@charset "utf-8";
/*
  CSS Document
  AA - Tourism  - Michael Kotapski

  TEMPLATE DESIGN INSTRUCTIONS
  ****************************
  1)  the main background colour can be changed by editing the rgb value in the #bg class
  2)  the footer background colour can be changed by editing the rgb value in the footerContainer class.

  PLEASE NOTE:
  IF YOU CHANGE THE MAIN BACKROUND COLOUR YOU WILL ALSO NEED TO CHANGE ONE IMAGE FILE IN PHOTOSHOP OR FIREWORKS:
  THE IMAGE CAN BE FOUND HERE: images/bg_footer.png
  YOU NEED TO CHANGE THE TRIANGLE TO THE COLOUR THAT YOU ARE USNG IN THE MAINBACKGROUND. AFTER YOU ARE DONE
  OVERWRITE THE EXISTING ONE OR CHANGE THE PATH IN THE CLASS #base

  IF YOU HAVE ANY QUESTIONS PLEASE DON'T HESITATE ASKING ME VIA EMAIL: MKOTAPSKI@AA.CO.NZ
*/

html {
  margin: 0px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
}

body {
  padding: 0px;
  margin: 0px;
  color: #ffffff;
  background: #000;
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
}

#bg{
  background: #3b76da url(../images/bg.png) repeat;
}

#wrap{
  width:866px;
  height:100%;
  margin:0 auto;
}

#footerwrap{
  width: 866px;
  margin: 0 auto;
}

#footerContainer{
  background: #000;
  margin:0 auto;
}

#top{
  width: 866px;
  height: 130px;
  background: url(../images/bg_top.png) top left no-repeat;
}

#logo{
  width:866px;
  height: auto;
  float:left;
  border-bottom: 1px solid #000;
  padding: 10px 0 10px 0;
}

#resphone{
  color: #666666;
  text-align:right;
  font-size:18px;
  font-family:Arial, Helvetica, sans-serif;
}

#banner{
  width: 866px;
  height: 320px;
  float: left;
  background: url(../images/bg_banner.png) top left no-repeat;
  padding: 10px 0 0 0;
}

#banner img {
  display: block;
  padding: 20px 0 0 20px;
}

#banner{
  width: 867px;
  height: 308px;
  float: left;
  background: url(../images/bg_banner.png) top left no-repeat;
  padding: 27px 0 0 22px;
}

#banner img {
  display: block;
  padding: 20px 0 0 20px;
}

/* Horizontal Menu */
#menu{
  width:866px;
  height:45px;
  margin: -10px 0;
  float: left;
}

#menu ul {
  height:35px;
  margin: 0;
  padding: 0px 0 0 0px;
  list-style: none;
}

#menu li {
  height: 35px;
  display: block;
  float: left;
  padding:0px 4px 0 0;
}

#menu a {
  height: 20px;
  display: block;
  float: left;
  margin-top: 15px;
  padding:0px 32px 0px 32px;
  text-decoration: none;
  font: 17px Tahoma, Verdana, Arial;
  color: #fff;
  border-left: 1px dotted #333;
}

#menu a:hover {
  text-decoration: none;
  color: #bbb;
}

#content{
  width: 866px;
  min-height: 200px;
  background: url(../images/ctop.png) top left no-repeat;
  margin: -10px 0;
}

#clearBoth{
  clear: both;
  height: 1px;
  overflow: hidden;
}

.entry{
  width: 800px;
  float: right;
  color:#eee;
  padding:0px 50px 0px 20px;
  margin-top: 10px;
}

/*----  Headings  -------*/
h1{
  font-size:14px;
  color: #fff;
  border-bottom:dotted 1px #999999;
  text-transform:capitalize;
}

h2{
  font-size:14px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-transform:capitalize;
  border-bottom:dotted 1px #999999;
}

h3{
  font-size:22px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-transform:capitalize;
}

h4{
  font-size:14px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-transform:capitalize;
  border-bottom:dotted 1px #000;
}

/* 3 Columns */
#columns{
  width: auto;
  height: auto;
  margin: 20px 0 20px 0;
}

.leftcol{
  width: 255px;
  min-height: 150px;
  float: left;
  margin: 0 2px 0 0;
  padding: 4px 4px 4px 4px;
  border-right: 1px #666 solid;
}

.midcol{
  width: 255px;
  min-height: 150px;
  float: left;
  margin: 0 2px 0 0;
  padding: 4px 5px 4px 4px;
  border-right: 1px #666 solid;
}

.rightcol{
  width: 255px;
  min-height: 150px;
  float: left;
  margin: 0 2px 0 0;
  padding: 4px;
}

.colimg{
  width: 253px;
  padding: 2px;
  background: #fff;
}

.coltxt{
  padding: 2px;
}

/* ---- 2 Columns ---- */
.lcol{
  width: 375px;
  float: left;
  margin: 10px 2px 10px 0;
  padding: 4px;
  border-right: 1px #666 solid;
}

.rcol{
  width: 375px;
  float: left;
  margin: 10px 2px 10px 0;
  padding: 4px;
}

/*---- Rows ---- */
.row{
  width: 796px;
  min-height: 222px;
  border-bottom: 1px solid #000;
  padding: 0 0px 10px 0px;
  margin: 10px 0;
}

.rowimg{
  width: 299px;
  height: 222px;
  background: #fff;
  padding: 4px;
  margin-right: 10px;
  float: left;
}

.rowimgR{
  width: 299px;
  height: 222px;
  background: #fff;
  padding: 4px;
  margin-left: 10px;
  float: right;
}

.rowtxt{
  padding: 2px;
}

/*----  Pricetag, etc  --------*/
.pricetag{
  width: 79px;
  height: 150px;
  background: url(../images/pricetag.png) top center no-repeat;
  float: right;
  margin: 0 0 10px 6px;
}

.pricetag h2{
  color: #333;
  font-size:16px;
  margin-top: 97px;
  text-align:center;
  border: none;
}

.pricetag h2 a{
  color: #fff;
  font-size:16px;
  margin-top: 97px;
  text-align:center;
  border: none;
}

.pricetag a:hover{
  text-decoration:none;
}

.barimg{
  width: 250px;
  height: 167px;
  padding: 4px;
  margin: 4px;
  background: #fff;
  float: left;
}

/*----  Links  -------*/
a{
  color: #000;
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

/*-----  Base  -----*/
#base{
  width: 866px;
  min-height: 100px;
  font-size:12px;
  text-align:center;
  color: #fff;
  margin: 0px 0px 0px 0px;
  padding-top: 15px;
}

.basetxt{
  padding-top: 30px;
  color: #fff;
  font-family:Arial, Helvetica, sans-serif;
}

#base a{
  color:#fff;
  text-decoration:none;
}

#base a:hover{
  color:#fff;
  text-decoration:underline;
}

.copy{
  margin: 0;
  text-align:center;
  font-size:12px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

.copy a{
  color: #fff;
}

/*-----  Slideshow  -----*/
.slideshow{
  width: 495px;
  height:331px;
  border:1px #999999 solid;
  padding:2px;
}

/*-----  Image -----*/
.imgbox{
  width: auto;
  background: #ccc;
  padding:6px;
  float:right;
}

#pics{
  float:right;
  width:300px;
}

/* -- Map --*/
.mapcontainer {
  width:100%;
  margin:0 auto !important;
}

.map {
  position: relative;
  padding-bottom: 75%; /* This is the aspect ratio */
  height: 0;
  overflow: hidden;
  /* border:5px solid #fff; */
  margin-bottom: 10px;
}

.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/*-- Mobile CSS -- */
@media screen and (max-width: 650px) {
  #wrap, #top, #logo, #content, .entry, #columns,  #footerwrap, #base, .row, .rowimg, .rowimgR, #banner, .map {
    width: auto !important;
    margin: auto !important;
    height: auto !important;
  }

  #logo {
    text-align: center !important ;
    float: none;
    padding: 0;
    margin: 2px auto ;
    border: 0;
  }

  #logo img {
    max-width: 100%;
    margin: 20px auto !important;
  }

  #banner img {
    width: 100%;
    margin: auto;
    height: auto;
    padding: 0;
  }

  #banner {
    padding: 7px;
    background: none;
    float: none;
  }

  #top, #content {
    background: none;
  }

  #menu, .nomobile, .BtnColumns {
    display: none;
  }

  .entry {
    padding :6px;
    float: none;
  }

  .leftcol, .midcol, .rightcol, .row {
    border: none;
    float: none;
    margin: 1em auto;
    width: auto;
    overflow: auto;
    max-width: 325px;
  }

  .colimg {
    width: auto;
  }

  .colimg img {
    width: 100% !important;
  }

  .map {
    float: none;
  }

  .rowimg, .map {
    float: none;
    background: none;
    text-align: center;
  }

  .row {
    max-width: 400px !important;
    overflow:visible;
  }

  .rowimg img {
    width: 100% !important;
    max-width: 299px;
  }

  .rowimgR {
    text-align: center;
    float :left;
    margin-right: 10px !important;
    background: none;
  }

  .rowimgR ul {
    margin: 20px;
  }

  /*mobile friendly slideshow for old template slideshows*/
   #banner, #banner div {
    width:99%!important;
    float:none!important;
    height:auto!important;
  }

  #banner div{
    position:relative!important;
  }

  #banner div + div {
    position:absolute!important;
  }

  #banner div img {
    width:100%!important;
    max-width:100%!important;
  }

  .smap img {
    width:auto!important;
  }
}

@media screen and (max-width: 420px) {
  .rowimg {
    float: none;
    margin: auto;
  }

  .rowimgR {
    text-align: center;
    float: none;
    background: none;
  }
}