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

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

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



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



/* Increase page height from accomtemplate.css  */
section#pagecontainer {height: 970px;}


section#pagecontainer aside.box {width: 39%;}

/* Define the header fonts */
section#pagecontainer aside.box span#headerhtl {font-weight: bold;}

section#pagecontainer h5 {
  font-size: 1.7em;
  font-weight: bold;
  letter-spacing: expanded;
  color: grey;
  margin-left: .1em;
  margin-top: -.5em;
  margin-bottom: .7em;
}

section#pagecontainer aside.box {
  min-height: 600px;
  height: auto;
  margin-top: 2%;
}

/* Increase left aside and define more than accomtemplate.css  */
section#pagecontainer aside.leftside {color: grey;
  padding: .5em;
  text-align: left;
  border: 2px solid grey;
  }



/*************** Define the top right hand side quote box ************* */

section#pagecontainer aside.rightside {border: none;
  margin-right: 8%;
  margin-top: 2%;}

section#pagecontainer aside.rightside div.commenthotel {color: #096887;
  padding: .5em;
  text-align: justify;
  font-size: .93em;
  font-style: italic;
  border: 6px groove royalblue;
  border-top: none;
  border-bottom: none;
}

section#pagecontainer aside.rightside div.commenthotel div.quoteclare {text-align: right;
    color: royalblue;
    font-size: .8em;
    font-variant-caps: petite-caps;
  }


/*************** Define the bottom right hand side text box ************* */
section#pagecontainer aside.rightside div.accomovernightmore {
  color: grey;
  border: 2px solid grey;
  padding: .5em;
  height: 40%;
  text-align: left;
  margin-top: 9.3%;
  }


/*************** 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: 380px;
  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: 1400px) {
   
   /* Increase page height from accomtemplate.css */
   section#pagecontainer {height: 1080px;}

   section#pagecontainer h6 {padding-top: 15px;}  /* Space out the title more by lowering this down due to more white space */

   /* Update boxes so the bottom of the box is both at the same height */
   section#pagecontainer aside.rightside div.accomovernightmore {padding-top: 0.95em;}

}


@media screen and (max-width: 1025px) {
	
   /* Reduce screen width */
   div#page {max-width: 800px;}

   /* Reduce header height with navigation at the bottom of the page */
   header.headerarea {height: 87px;} 

  /* Increase page height from accomtemplate.css */
   section#pagecontainer {height: 1180px;}

   /* Reduce height between bullet line spacing */
   section#pagecontainer aside.rightside div.accomovernightmore ul li {line-height: 1;}

   /* Reduce fonts */
   section#pagecontainer h6 {font-size: 1.8em; 
      padding-top: .75em;}
   
   section#pagecontainer h5 {font-size: 1.6em;}

   section#pagecontainer aside.box p {font-size: .95em;}

  /* Update boxes so the bottom of the box is both at the same height */
   section#pagecontainer aside.rightside div.accomovernightmore {padding-top: 0.45em;}

  /* Hide the go back button due to limited screen width */
    div#page div.buttongoback {display: none;}
}


@media screen and (max-width: 820px) {
   
   /* Reduce screen width */
   div#page {max-width: 600px;}

   /* Increase page height from accomtemplate.css */
   section#pagecontainer {height: 1510px;}

   /* Reduce fonts */
   section#pagecontainer h6 {font-size: 1.6em; 
      padding-top: 1em;}

   section#pagecontainer h5 {font-size: 1.4em;}

   section#pagecontainer aside.box p {font-size: .9em;}

   /* Move both asides further down from the top margin due to limited page size */
   section#pagecontainer aside.box {margin-top: 5%;}

  /* Update boxes so the bottom of the box is both at the same height */
   section#pagecontainer aside.rightside div.accomovernightmore {padding-top: 0.75em;}
}

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

     /* Reduce screen width */
   div#page {max-width: 300px;}

   /* Increase page height from accomtemplate.css */
   section#pagecontainer {height: 2128px;}

  /* Remove background image and styling */
   section.beachimage {background-image: none;}

   /* Reduce fonts */
   section#pagecontainer h6 {font-size: 1.5em; 
      padding: .25em 1.3em .5em .8em;
      text-align: center}

   section#pagecontainer h5 {font-size: 1.3em;}

   /* Change page layout - asides now vertical */
   section#pagecontainer aside.box {float: none; 
     width: 92%; 
     margin: 0 auto;
     background-color: rgba(255,255,255,.7);}
   
   /* Put relative position to the left side box */
     section#pagecontainer aside.leftside {position: relative;}

   /* Amend so that is the same width as parent container */ 
   section#pagecontainer aside.rightside {width: 100%;}

    /* Add background to the main text boxes for more depth */
    section#pagecontainer aside.leftside,
    section#pagecontainer aside.rightside div.accomovernightmore {background-image: url("../images/whiterose.jpg");
      z-index: 1}
 
     section#pagecontainer aside.leftside div.overlayA, 
     section#pagecontainer aside.rightside div.accomovernightmore div.overlayB {
      height: 95%;
      width: 98%;
      background-color: rgba(255,255,255,.7);
      color: #121212;}

   /* Use the comment more as a natural divide in the page */
    section#pagecontainer aside.rightside div.commenthotel {
      margin-top: 1.5em;
      background-color: rgba(190,206,212, .5);}

   /* Reduce height between bullet line spacing */
   section#pagecontainer aside.rightside div.accomovernightmore ul li {line-height: .8;}

}


@media screen and (max-width: 330px) {
   
   /* Reduce screen width to fit mobile */
   section#pagecontainer aside.box {width: 88%;} 
 
   /* Increase page height from accomtemplate.css */
   section#pagecontainer {height: 2260px;}


}