@charset "utf-8";
/* CSS Document

Author: Chris Stevens, © AA Tourism 2012

[ TABLE OF CONTENTS ]

1. Resets
2. Main Editable Elements
    2.1 Paragraphs and Headings
    2.2 Main Navigation
    2.3 Backgrounds
    2.4 Feature Blocks (home page header)
    2.5 Negative Space
    2.6 Buttons and Links
    2.7 Quotes

3. Layout / Other
    3.1 Template Layout / OOCSS
    3.2 Page Columns
    3.3 Footer

4.  CSS for Mobile Devices
    4.1 Screen size: 580px wide
    4.2 Screen size: 420px wide
*/


/**********************************************
 1. RESET
***********************************************/
* {
  margin: 0;
  padding: 0;
  border:none;
  text-decoration:none;
  font-weight:normal;
}

:focus {
  outline: 0;
}


/**********************************************
 2. MAIN EDITABLE ELEMENTS
***********************************************/
/*2.1 Paragraphs and Headings*/
h1, h2{
  color:#FFFFFF;
  margin-bottom:15px;
  font-size:27px;
  line-height:30px;
}

h3 {
  font-size:22px;
  line-height:25px;
  color: #FFFFFF;
  margin-bottom:15px;
  font-weight:bold;
}

h4 {
  font-size:15px;
  color: #FFFFFF;
  margin-bottom:5px;
  font-weight:bold;
}

h4 a, h3 a, h2 a, h1 a {
  text-decoration:none;
}

.call-to-action {
  font-size:27px;
}

.divider {
  border-bottom:1px solid #dcdcdc;
  padding-bottom:12px!important;
  margin-bottom:15px;
}

.phone, .email {
  display:block;
  padding:3px 5px 3px 0;
}

strong {
  font-weight:bold;
}

p, .large-content-column, .small-content-columnm, .full-width-content {
  line-height:19px;
}

p {
  margin-bottom:20px;
}

.relative {
  position:relative;
}

/*2.2 Main Navigation */

/*Main Navigation Colours */
#header{
  background-color:#1b7c8a;
  padding:10px 0;
}

#header ul li a {
  color:#fff; /*default state*/
  text-decoration:none;
}

#header ul li a:hover, .nav-selected {
  color:#fff!important;
  -webkit-transition: color 222ms linear;
  -moz-transition: color 222ms linear;
  -o-transition: color 222ms linear;
  -ms-transition: color 222ms linear;
  transition: color 222ms linear;
}

/*Main Navigation Other*/
#header ul {
  margin:40px 0 20px 0px;
  text-transform:uppercase;
}

#header ul li {
  float:left;
  display:block;
  list-style:none;
  padding:15px 12px;
  background:url(../images/main-nav-divider.png) no-repeat right;
}

ul {
  margin-left:35px;
  margin-bottom:20px;
}

.companyLogo {
  position:relative;
  float: left;
}

#header ul li a {
  font-size:14px;
  padding:11px 0 0 0;
  display:block;
}

#header ul li a:hover, #header ul li .nav-selected {
  padding:7px 0 0 0;
  border-top:solid 4px;
}

/*2.3 Backgrounds */
body {
  color:#FFFFFF;
  background:#1b7c8a;
  background-image: url(../images/background.jpg);
  background-attachment: fixed;
  background-size: cover;
  font-family: "Open Sans", sans-serif;
  font-size:14px;
  line-height: 1.5;
}

#main-container {
  background:#1b7c8a;
  padding:25px;
}

.standout {
  background: #fbfbfb;
  border:1px solid #eae6e6;
  color: #423d44;
}

.standout h3, .standout h4 {
  color: #423d44;
}

.standout a {
  color: #423d44;
}

.standout a:hover {
  color: #1b7c8a;
}

/*2.4 Feature Blocks (home page header)*/
.feature {
  position:relative;
  height:162px;
}

.feature-bg1, .feature-bg2 {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
  position:absolute;
  bottom:0px;
  left:0px;
  width:335px;
  z-index:200;
  height:43px;
}

.feature-bg1 {
  background-color:#37312a;
}

.feature-bg2 {
  background-color:#287d9c;
}

.feature-link:hover {
  background-color:#93ad53;
  color:#ffffff;
  -webkit-transition: background-color 130ms linear;
  -moz-transition: background-color 130ms linear;
  -o-transition: background-color 130ms linear;
  -ms-transition: background-color 130ms linear;
  transition: background-color 130ms linear;
}

.feature-link {
  color:#FFFFFF!important; /*default #ffffff white, (!important for cms)*/
  position:absolute;
  bottom:0px;
  left:0px;
  display:block;
  padding:10px 10px 10px 18px;
  height:23px;
  width:307px;
  font-size:20px;
  z-index:300;
  letter-spacing:1px;
  text-decoration:none;
}

.feature img {
  z-index:100;
}

/*2.5 Negative Space*/
.large-content-column, .full-width-content {
  padding: 25px 25px 25px 0;
}

.small-content-column {
  padding:25px;
}

.bottom-margin {
  margin-bottom:20px;
}

.double-bottom-margin {
  margin-bottom:40px;
}

.top-margin {
  margin-top:20px;
}

.left-margin {
  margin-left:20px;
}

.right-margin {
  margin-right:20px;
}

.room-thumbs {
  text-align: center;
  background-color: #FFFFFF;
  padding: 10px 0;
}

.room-thumbs img {
  vertical-align: middle;
  margin:5px 12px 5px 5px;
  max-height: 135px;
}

.clear-left-margin {
  margin-left:0px!important;
}

.clear-right-margin {
  margin-right:0px!important;
}

.clear-bottom-padding {
  padding-bottom:0px!important;
}

.clear-top-padding {
  padding-top:0px!important;
}

/*2.6 Buttons and Links*/
.button-container {
  margin: 10px 0;
}

.button-container .button {
  margin-right: 5px;
}

.button {
  background-color: #5393AD;
  color: #FFFFFF !important;
  padding: 5px 10px;
  display: inline-table;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.buttonbooknow {
  background-color: #5393AD;
  color: #FFFFFF;
}

.buttonbooknow:hover {
  background-color: #42758A;
  color: #FFFFFF;
}

.buttonenquire {
  background-color: #5393AD;
  color:#FFFFFF;
}

.buttonenquire:hover {
  background-color: #42758A;
  color: #FFFFFF;
}

a {
  color:#FFFFFF;
  text-decoration:underline;
}

a:hover {
  color:#423d44;
}

/*2.7 Quotes */
.quote {
  font-style:italic;
  padding-left:36px;
  background:url(https://www.retreatbayofislands.co.nz/images/quote-icon.png) no-repeat left top;
}


/**********************************************
 3. LAYOUT / OTHER
***********************************************/
/* 3.1 Template Layout Elements */
.left {
  float:left;
}

.right {
  float:right;
}

.clearfloat {
  clear: both;
  height:0px;
  font-size: 1px;
  line-height: 0px;
  margin:0px;
  padding:0px;
}

.wrapper {
  width:990px;
  background:url(../images/wrapperbg.png);
  padding:11px;
  margin:40px auto 40px auto;
  border:1px solid #dbdbdb;
}

/* 3.2 Page Columns */
.large-column {
  width:590px;
}

.small-column {
  width:335px;
  margin-bottom: 10px;
}

.large-content-column {
  width:565px;
}

.small-content-column {
  width:285px;
}

.block {
  display:block; /*apply to fix images that are creating unwanted negative space in ie*/
}

.floating-content {
  width:348px;
}

/* 3.3 Footer */
.footer {
  border-bottom-right-radius:20px;
  background-color:#1b7c8a !important;
  border-top: solid 1px #d4d4d4;
  font-size:11px;
  padding:25px;
}

.footer p {
  margin:0px;
}

.footer-icons {
  text-align:right;
}

.footer-icons img {
  margin-left:15px;
}

.googlemaps {
  position: relative;
  padding-bottom: 75%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

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

.scale {
  max-width:100%;
  height:auto;
}

.amenities, .affiliations {
  margin: 2px;
  border: none;
}

.birds {
  text-align: center;
}

.birds img {
  margin-right: 2px;
}

.birds img:last-child {
  margin-right: 0;
}

/**********************************************
 4. CSS FOR MOBILE DEVICES
***********************************************/
@media screen and (max-width: 1014px) {
  .wrapper {
    width: auto;
  }
}

/* 4.1 Screen size: 990px wide */
@media screen and (max-width: 990px) {
  .left, .right {
    float:none!important;
  }

  .wrapper {
    margin-top:3px;
  }

  #header ul {
    margin:0px;
  }

  #header ul li {
    float:none;
    background-image:none;
    padding:0px;
    margin-top:8px;
  }

  #header ul li a, #header ul li a:hover {
    font-size:18px;
    padding:10px 10px 10px 10px;
  }

  #header ul li a:hover, #header ul li .nav-selected {
    padding:6px 10px 10px 10px;
  }

  .large-column, .small-column, #header ul {
    width:100%;
  }

  .large-content-column, .small-content-column {
    width:auto;
  }

  .large-content-column {
    padding: 10px 0;
  }

  .companyLogo {
    float: none;
    text-align: center;
  }

  .scale {
    width:100%;
    height:auto;
  }

  .exclude-from-mobile {
    display:none;
  }

  .email {
    word-wrap:break-word;
  }

  .button-viewprices {
    position:static; /*sets absolute positioning to default*/
    margin-top:10px;
  }

  body {
    font-size:14px;
    background-image:none;
  }

  .footer-icons {
    text-align:center;
  }
}

/* 4.2 Screen size: 420px wide */
@media screen and (max-width: 420px) {
  .wrapper {
    /*width:300px;*/
  }
}