@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
***********************************************/
.style {
  max-width:500px;
  width:100%;
  margin:0 auto !important;
}

* {
  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:#93ad53;
  margin-bottom:15px;
  font-size:27px;
  line-height:30px;
}

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

h4 {
  font-size:15px;
  color: #423d44;
  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 40px;
}

.phone {
  background:url(../images/phone-icon.png) no-repeat;
}

.email {
  background:url(../images/email-icon.png) no-repeat;
}

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 ul li a {
  color:#544f57;
  text-decoration:none;
}

#header ul li a:hover, .nav-selected {
  color:#93ad53 !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:20px 0 20px 0px;
  text-transform:uppercase;
}

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

#header ul li a {
  font-size:12px;
  font-family:Verdana, Geneva, sans-serif;
  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:#555555;
  background-color:#506d1f;
  background-image: url(../images/body-background.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment:fixed;
  background-size: cover;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}

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

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

/*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;
  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, .small-content-column, .full-width-content {
  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 img {
  margin:0px 12px 0 0;
  float:left;
}

.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-book, .button-enquire, .button-viewprices {
  display:block;
  height:29px;
  text-indent:-9999px;
  margin-right:15px;
  margin-bottom:10px;
}

.button-book {
  background:url(../images/button-book.png);
  width:127px;
}

.button-viewprices {
  background:url(../images/button-viewprices.png);
  width:127px;
  margin-top:2px;
}

.button-enquire {
  background:url(../images/button-enquire.png);
  width:97px;
}

.button-book:hover, .button-enquire:hover, .button-viewprices:hover {
  background-position:bottom;
}

a {
  color:#423d44;
  text-decoration:underline;
}

a:hover {
  color:#8ea852;
}

/*2.7 Quotes */
.quote {
  font-style:italic;
  padding-left:36px;
  background:url(../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;
  max-width:100%;
  background:url(../images/wrapperbg.png);
  padding:11px;
  margin:40px auto 10px auto;
  border:1px solid #dbdbdb;
}

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

.small-column {
  width:335px;
}

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

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

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

.floating-content {
  width:348px;
}

.copyright {
  padding: 10px 0;
  width: 1015px;
  max-width: 100%;
  border-radius: 5px;
  display: block;
  background:url(../images/wrapperbg.png);
  text-align: center;
  margin: 0 auto;
  margin-bottom: 10px;
}

.copyright a:hover {
  color: #FFFFFF;
}

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

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

.mobileph {
  display: none;
}

a[href^=tel] {
  color: inherit;
  text-decoration: none;
}

/* 3.3 Footer */
.footer {
  border-bottom-right-radius:20px;
  background-color:#ffffff !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;
}


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

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 960px) {
  .wrapper {
    padding: 0;
    border: none;
  }

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

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

  .scale {
    width:100%;
    height:auto; /*scales image proportionately*/
  }

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

@media screen and (max-width: 767px) {
}

@media screen and (max-width: 625px) {
}

@media screen and (max-width: 580px) {
  .fotorama__nav-wrap {
    display:none;
  }

  .left, .right {
    float:none!important;
  }

  .wrapper, .copyright {
    width:500px;
    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 {
    background-color:#eaeaea;
    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;
  }

  .scale {
    width:100%;
    height:auto; /*scales image proportionately*/
  }

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

  .email {
    word-wrap:break-word
  }

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

  .room-thumbs img, .floating-content {
    margin-top:12px;
  }

  .floating-content {
    width:auto;
    margin-left:0px;
  }

  body {
    font-size:14px;
    background-image:none; /*stops background image loading*/
  }

  .copyright {
    padding: 10px 0;
  }

  .mobileph {
    display: block;
    background-color: inherit;
    color: inherit;
    font-size: 18px;
    padding: 10px 0;
    text-align: center;
  }

  a[href^=tel] {
    color: inherit;
    text-decoration: underline;
  }
}

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

  .email a {
    font-size:12px;
  }
}