@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;
}

/*img {
  display:block;
}*/

:focus {
  outline: 0;
}


/**********************************************
 2. MAIN EDITABLE ELEMENTS
***********************************************/

/*2.1 Paragraphs and Headings*/
h1, h2{
  color:#af484a; /*default heading colour #93ad53 green*/
  margin-bottom:15px;
  font-size:27px;
  line-height:30px;
}

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

h4 {
  font-size:15px;
  font-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; /*default state*/
  text-decoration:none;
}

#header ul li a:hover, .nav-selected {
  color:#b5646d!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; /*default glboal text colour #555555 grey*/
  background:#3a5a88 url(../images/body-background.jpg) no-repeat top;
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
}

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

.standout {
  background: #fbfbfb; /*default #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:#375a7d;
}

.feature-bg2 {
  background-color:#7d3739;
}

.feature-link:hover {
  background-color:#af484a; /*default #93ad53 green*/
  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, .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;
}

.large-content-column ul {
  margin-left:35px;
}

/*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:#9f393c;
}

/*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;
  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;
}

.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;
}

/* 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;
}

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

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


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

@media screen and (max-width:960px) {
  .left, .right {
    float:none !important;
  }

  .wrapper {
    width:95%;
    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;
  }

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

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

  .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*/
  }

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

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

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

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

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

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