/* *********** This pages is stying for just accommodation.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 accommodation.html *** */




/* Remove the border ont the right aside */ 
section#pagecontainer aside.rightside {border: none;}



/* ***************** Define the buttons on the right hand side ***************************/

section#pagecontainer aside.rightside div.stayover, section#pagecontainer aside.rightside div.returnhome {min-height: 150px;
  	height: auto;
  	width: 90%;
  	color: grey;
  	border: 5px solid white;
  	text-align: center;
  	padding: .5em;
  	margin: 0 auto;
    margin-top: 8.5%;
    text-align: center;
}

section#pagecontainer aside.rightside div.returnhome {margin-top: 12%;}

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

section#pagecontainer aside.rightside div.stayover:hover, 
section#pagecontainer aside.rightside div.returnhome:hover {background-color: rgba(227,5,52,.2);}

section#pagecontainer aside.rightside div.stayover div.italic, 
section#pagecontainer aside.rightside div.returnhome div.italic 
   {font-style: italic;
    color: #1E2E33;
    font-weight: bold;
}

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


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

@media screen and (max-width: 1400px) {
   
 section#pagecontainer aside.box {padding-top: 0px;
  padding-bottom: 0;}

  /* Update the width of the asides */
  section#pagecontainer aside.leftside {width: 48%;}

  section#pagecontainer aside.rightside {width: 30%; 
   margin-right: 8%;}


   /* Update buttons on the right side of the screen */
   section#pagecontainer aside.rightside div.stayover, 
   section#pagecontainer aside.rightside div.returnhome {padding: .4em;}

   section#pagecontainer aside.rightside div.stayover div.titlelarge, 
   section#pagecontainer aside.rightside div.returnhome div.titlelarge 
    {font-size: 1.7em;}  /* Reduce font size */

}


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

   /* Increase page height */
   section#pagecontainer {min-height: 475px;
      height: auto;}

   /* Change asides to vertical alignment and not next to each other */
   section#pagecontainer aside.box {float: none; 
      width: 77%;
      margin-left: 10%;}

   /* Update container size for both the left and right aside */
   section#pagecontainer aside.leftside {position: relative;
      height: 435px;
      margin-top: 30px;}

   section#pagecontainer aside.rightside {position: relative;
      height: 255px; 
      margin: 0 auto;}

  section#pagecontainer aside.rightside div.stayover, 
  section#pagecontainer aside.rightside div.returnhome {height: 140px;
      margin: 0;
      padding: 0;
      width: 43%;}

    section#pagecontainer aside.rightside div.stayover {margin-top: 30px;}

    /* Driving information button - place next to the STAY OVER button */
    section#pagecontainer aside.rightside div.returnhome {position: absolute;
      right: 0;
      top: 0;}

   /* Reduce font size */
   section#pagecontainer aside.leftside p {font-size: .95em;}

}

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

   /* Increase page height */
   section#pagecontainer {min-height: 530px;}

   /* Update container size for the left aside */
   section#pagecontainer aside.leftside {height: 480px;}

  /* Update the size of the buttons and font */
  section#pagecontainer aside.rightside div.stayover div.titlelarge, 
  section#pagecontainer aside.rightside div.returnhome div.titlelarge 
     {font-size: 1.5em;
     text-shadow: 2px 2px 1px grey;}

  section#pagecontainer aside.rightside div.stayover div.italic, 
  section#pagecontainer aside.rightside div.returnhome div.italic 
   {font-size: .9em;}

}

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

   /* Update container size for the left aside */
  section#pagecontainer aside.leftside {min-height: 460px;
     height: auto;}
   
   section#pagecontainer aside.rightside {height: 235px;
      width: 79%;} 

  /* Update padding around the text*/
   section#pagecontainer aside.leftside {padding: .3em;}

  /* Reduce font size */
  section#pagecontainer aside.leftside p {font-size: .9em;}

  section#pagecontainer aside.rightside div.stayover {margin-top: 20px;}

  section#pagecontainer aside.rightside div.stayover, 
  section#pagecontainer aside.rightside div.returnhome {min-height: 120px;
     height: auto;}

  /* Update the size of the buttons and font */
  section#pagecontainer aside.rightside div.stayover div.titlelarge, 
  section#pagecontainer aside.rightside div.returnhome div.titlelarge 
     {font-size: 1.3em;}

  section#pagecontainer aside.rightside div.stayover div.italic, 
  section#pagecontainer aside.rightside div.returnhome div.italic 
   {font-size: .85em;}

}

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

  /* Remove border from around the text and update padding */
	section#pagecontainer aside.leftside {border: none;
	   padding: 0 .25em .25em .5em;}

  section#pagecontainer aside.leftside p {text-align: justify;}

  /* Update section height for the 2 x buttons */
  section#pagecontainer aside.rightside {height: 390px;} 

  /* Driving information button - place under the STAY OVER button */
  section#pagecontainer aside.rightside div.returnhome {position: relative;
      top: 18px;}

  section#pagecontainer aside.rightside div.stayover, 
  section#pagecontainer aside.rightside div.returnhome {height: 80px;
      width: 80%;
      margin: 0 auto;
      background-color: rgba(172,179,181,.5);
  }

  section#pagecontainer h6 {padding-top: 28px;} /* Create more space due to height of white area increased */

}


@media screen and (max-width: 390px) {
   
  section#pagecontainer aside.leftside p {font-size: 0.85em;}
}