@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: #000000;
  background: #004d52;
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
}

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

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

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

#footerContainer{
  background: #555;
  margin: 0 auto 0 auto;
  padding-bottom: 10px;
}

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

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

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

#banner{
  width: 866px;
  height: 420px;
  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;
}

/* 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 38px 0px 38px;
  text-decoration: none;
  font: 12px Tahoma, Verdana, Arial;
  color: #000;
  border-left: 1px dotted #292b76;
}

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

#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: #000;
  padding:0px 50px 0px 20px;
  text-align:left;
  margin-top: 10px;
}

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

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

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

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

/* 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 #292b76 solid;
}

.midcol{
  width: 255px;
  min-height: 150px;
  float: left;
  margin: 0 2px 0 0;
  padding: 4px 5px 4px 4px;
  border-right: 1px #292b76 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 #292b76 solid;
}

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

/*----   Rows ---- */
.row{
  width: 796px;
  min-height: 222px;
  border-bottom: 1px solid #292b76;
  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 a{
  color: #fff;
}

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

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

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

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

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

/*-----  Base  -----*/
#base{
  width: 866px;
  min-height: 100px;
  font-size:12px;
  text-align:center;
  color: #fff;
  background: url(../images/bg_footer.png) top center no-repeat;
  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 #292b76 solid;
  padding:2px;
}

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

.noborder{
  border: none;
}

.mapcontainer {
  width:100%;
  margin:0 auto 10px auto !important;
  background: #fff;
  padding: 4px;
}

.map {
  position: relative;
  padding-bottom: 75%; /* This is the aspect ratio */
  height: 0;
  overflow: hidden;
}

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