/* *********** This pages is stying for just accommodationstayover.html ********************/

/* Please refer to navigation.css for the header area, navigation menu, page layout
   and footer styling  ************/

/* accomtemplate.css styles 2 html pages with page layout, asides, h6, media queries, 
	   This styles accommodation.html and accommodationinformation.html */

 /* *** This styles the sections for accommodationstayover.html *** */



/* ***************** Define the page layout and containers ***************** */

section#pagecontainer {text-align: left;}

/* ***************** Define the font ***************** */

section#pagecontainer h6 {font-size: 1.75em;
  font-weight: bold;
  letter-spacing: expanded;
  color: #434545;
  text-align: left;
  margin-left: 120px;
  margin-top: 80px;
}


/* ***************** Define the buttons ***************** */

section#pagecontainer div.roombookings, section#pagecontainer div.hotelinfo {min-height: 150px;
    height: auto;
    width: 40%;
    color: grey;
    border: 5px solid white;
    text-align: center;
    padding: .5em;
    margin-left: 120px;
    text-align: center;
    background-color: rgba(173,177,179,.5);
    margin-top: 5%;
}

section#pagecontainer a {text-decoration: none;}

section#pagecontainer div.roombookings:hover, 
section#pagecontainer div.hotelinfo:hover {background-color: rgba(227,5,52,.2);}

section#pagecontainer div.roombookings div.italicA, 
section#pagecontainer div.hotelinfo div.italic {font-style: italic;
    color: #1E2E33;
    font-weight: bold;
}

section#pagecontainer div.roombookings div.titlelarge, 
section#pagecontainer div.hotelinfo div.titlelarge 
  {font-size: 2em;
  color: white;
  text-shadow: 3px 3px 1px grey;
}

/*************** Define the go back button of far left of the screen ************* */
div#page div.buttongoback {
  position: fixed;
  width: 63px;
  height: auto;
  margin-left: 0;
  margin-top: 320px;
  z-index: 1;

    -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

div#page div.buttongoback:hover { 
  padding: 5px;
  background-color: #D6113C;
}



/* **************************** Media Queries **********************************  */


@media screen and (max-width: 930px) {
	
section#pagecontainer h6 {font-size: 1.6em;
  margin-left: 10%;}

section#pagecontainer div.roombookings, section#pagecontainer div.hotelinfo {width: 65%;
  min-height: 110px;
  height: auto;
  margin-left: 90px;}

section#pagecontainer div.roombookings div.titlelarge, 
section#pagecontainer div.hotelinfo div.titlelarge 
  {font-size: 1.6em;}

div#page div.buttongoback {display: none;}

}

@media screen and (max-width: 675px) {
   
section#pagecontainer h6 {font-size: 1.4em;
  margin-left: 10%;}

section#pagecontainer div.roombookings div.titlelarge, 
section#pagecontainer div.hotelinfo div.titlelarge 
  {font-size: 1.4em;}

}

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

section#pagecontainer h6 {font-size: 1.3em;
  margin-left: 9%;}

section#pagecontainer div.roombookings, section#pagecontainer div.hotelinfo {margin-left: 12%;}

section#pagecontainer div.roombookings div.titlelarge, 
section#pagecontainer div.hotelinfo div.titlelarge 
  {font-size: 1.2em;}

section#pagecontainer div.roombookings div.italicA, 
section#pagecontainer div.hotelinfo div.italic {font-size: .85em;}


}

@media screen and (max-width: 400px) { /* Designed for mobiles */

   /* Reduce header height */
    header.headerarea {height:80px;}

     section#pagecontainer {width: 98.6%;}

     /* Remove the beach image from the accomtemplate.css */ 
    section.beachimage {background-image: url("../images/stationary.jpg");
      background-repeat: no-repeat;
      border: 2px solid grey;}

    section#pagecontainer h6 {font-size: 1.3em;
       text-align: center;
       padding: 0 1em 0 .3em;
       margin-top: 1em;}

     section#pagecontainer div.roombookings, section#pagecontainer div.hotelinfo {margin-top: 55px;}

}