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

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



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



/* ***************** Define the first section and asides/containers ***************** */


section.bookingnotes {  /* Whole top section with background image */
  position: relative;
  width: 99.6%;
  height: 780px;
  border: 2px solid grey;
  background-image: url("https://hd.unsplash.com/photo-1459259191495-52eccde892c7");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

section.bookingnotes aside.column {height: 670px; 
  margin-top: 7.3%;
  position: relative;}

section.bookingnotes aside.one {float: left;
  width: 63%;
  margin-left: 2%;
}

section.bookingnotes aside.two {float: right;
  width: 27%;
  margin-right: 4%;}

section.bookingnotes aside.column div.bookingsection {  /* Define the 2 x asides at top of the screen with text */
  position: relative;
  margin-left: 1.5%;
  height: auto;
  padding: .6em;
  border: 2px solid grey;
  box-shadow: inset 0 0 0 1000px rgba(226,211,227,.7);
  text-align: left;
  color: black;
}

section.bookingnotes aside.one div.roomavail,
section.bookingnotes aside.two div.paying
 {position: absolute;
  bottom: 0%;
}

/* ***************** Define the 2nd section for the header "ROOM TYPE NOTES" ***************** */

section.headinglabel {height: 63px;
  width: 99.9%;
  background-color: rgba(0,0,0,.4);}


/* ***************** Define the 3rd,4th and 5th sections + divs for the room types ***************** */

section.type {  /* All section containers for each room category - backpackers, motel lakeside */
  position: relative;
  width: 96.5%;
  height: 390px;
  border-top: 20px solid #E2D3E3;
  border-left: 20px solid #E2D3E3;
  border-right: 20px solid #E2D3E3;
  background-color: rgba(160,153,161,.6);
}

section.type aside#hotelphotos, section.type aside#roomdescription {
  position: relative;
  height: 310px;
}

section.type aside#hotelphotos {float: left; 
  margin-left: 2%;
  width: 56%;
}

section.type aside#roomdescription {float: right;
  width: 42%;
  margin-right: 0;
}

section.type aside#hotelphotos div.hotelpics {
  width: 290px;
  height: 290px;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* overlay */
  box-shadow: 0 0 0 150px inset, 0 0 5px grey;
  /* hover out transition */
  transition: box-shadow 1s;
  float: left;
  margin: 10px;
}

section.type div.backgroundgrey aside#hotelphotos p {  /* Styles all the text per room section - over image + description */
    background-color: rgba(160,153,161,.76);
    padding-bottom: 10px;
}

section.type div.backgroundgrey aside#roomdescription p {     /* Styles the pink over the text per room description */
    background-color: rgba(226,211,227,.3);
    margin-top: 10px;
    min-height: 272px;
}

section.type div.notesrooms {  /*Styles the grey rectangle beneath the header over whole room section */
  height: 90%;
  margin: 10px;
  background-color: rgba(160,153,161,.76);
  z-index: 1;
}

section.lakeroom aside#roomdescription div.lakesiderm {position: absolute;
  bottom: 10px;
  width: 100%;
  line-height: 1.3;
  font-size: 0.9em;
  font-stretch: extra-condensed;
  background-color: rgba(226,211,227,.6);
  text-align: center;
}

section.type aside#hotelphotos div#allrooms {  /* Styles the box inside backpackers room section with text - "Regardless.." */
  position: absolute;
  width: 290px;
  height: 287px;
  margin-top: 10px;
  margin-left: 329px;
  border: 2px solid grey;
  background-color: rgba(226,211,227,.6);
}


/* ***************** Define the text and headers further ***************** */

section.bookingnotes h6, section.headinglabel h5 {position: absolute;
  font-size: 2.2em;
  font-weight: bold;
  letter-spacing: expanded;
  color: black;
  margin: 0;
  width: 94.85%;
}

section.bookingnotes h6 {
  background-color: rgba(226,211,227,.8);
  padding: .15em .15em .15em 1.2em;
}

section.headinglabel h5 {padding: .15em .2em .15em 1.2em;}

section.type h3 {font-weight: bold;  /* Header of each room type x 3 */
  font-size: 1.4em;
  color: black;
  padding: .15em .15em .15em 1.2em;
  margin: 0;
  background-color: #E2D3E3;
}

section.bookingnotes aside.column div.bookingsection h2 {font-size: 1.3em;
  color: black;
  margin-top: 0;
} 

section.bookingnotes aside.one div.bookingsection p span#quote {font-size: 1.2em;
  line-height: 1.2;
  font-style: italic;
  font-weight: 600;
  color: royalblue;
}

section.bookingnotes aside.one div.bookingsection p span#centerctcs {display: block;
  text-align: center;}

section.type aside#roomdescription p {padding: .45em;}

section.type aside#hotelphotos p {color: white;
  text-align: center;
  border: 2px double white;
  }

section.type aside#hotelphotos div#lakeside span {
  color: white;
  font: 15pt 'sigmar one';
  text-align: center;
}

section.dormroom aside#hotelphotos div#allrooms p {
  font-size: 1.45em;
  font-weight: bold;
  color: #566266;
  padding: .4em .7em;
  text-align: center;
}


/* ******************************* Hotel pictures *********************************** */


/* Hotel Picture names */

section.type aside#hotelphotos .hotelpics::after {
  width: 75%;
  height: 75%;
  display: block;
  white-space: pre;
  font: 15pt 'sigmar one';
  color: white;
  border: 6px solid;
  text-align: center;
  /* center content using flex box */
  display: flex;
  justify-content: center;
  align-items: center;
  /* hover out transition */
  transition: opacity 1s .5s;
}

/* Reveal hotel picture on hover */

section.type aside#hotelphotos .hotelpics:hover {
  box-shadow: 0 0 0 5px inset, 0 0 5px grey, 0 0 10px grey inset;
  transition: box-shadow 1s;
}

/* Hide hotelpics name on hover */

section.type aside#hotelphotos .hotelpics:hover::after {
  opacity: 0;
  transition: opacity .5s;
}


/* Display the specific images and colours per hotel room photo */
section.type aside#hotelphotos div#lakeside {
  background-image: url(../images/HotelImagesUsed/lakesideroom.jpg);
  color: rgba(64, 133, 46, .8);
}

section.type aside#hotelphotos div#lakesidebathroom {
  background-image: url(../images/HotelImagesUsed/lakesidebathroom.jpg);
  color: rgba(64, 133, 46, .8);
}

section.type aside#hotelphotos div#motel {
  background-image: url(../images/HotelImagesUsed/motelroom.jpg);
  color: rgba(46,107,133,.8);
}

section.type aside#hotelphotos div#motelbathroom {
  background-image: url(../images/HotelImagesUsed/motelbathroom.jpg);
  color: rgba(46,107,133,.8);
}

section.type aside#hotelphotos div#backpackers {
  background-image: url(../images/HotelImagesUsed/backpackers.jpg);
  color: rgba(115, 46, 133, .8);
}



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

@media screen and (max-width: 1400px) {
   
    /* Reduce screen width */
    div#page {max-width: 1000px;}
  
   /* Increase top section height with forever background image page due to smaller width */
   section.bookingnotes {min-height: 820px;
       height: auto;}

   section.bookingnotes aside.column {height: 720px;} 

   section.bookingnotes aside.one {width: 60%;} 
   section.bookingnotes aside.two {width: 31%;}


   /* Reduce font size */   
   section.bookingnotes h6, section.headinglabel h5  {font-size: 1.9em;}  /* header - "ROOM BOOKINGS" + "ROOM TYPE NOTES" */

   section.bookingnotes aside.one div.bookingsection p span#quote {font-size: 1.05em;} /* Quote on how to book */

   section.headinglabel {width: 100%;}     /* header - "ROOM TYPE NOTES" */

   section.type h3 {font-size: 1.2em;
      text-align: center;}  /* Each room category x 3 */

   section.bookingnotes aside.column div.bookingsection h2 {font-size: 1.2em;}

   section.type div.backgroundgrey aside#roomdescription p {font-size: .85em;} /* Room description text x 3 */

   section.dormroom aside#hotelphotos div#allrooms p {font-size: 1.2em;
      padding-top: 0;}


   /* Update section layouts and divs/asides for each room type */

   section.type aside#hotelphotos, section.type aside#roomdescription {height: 290px;}

   section.type aside#hotelphotos div.hotelpics {width: 235px;   /* Reduce width of each photo */
      height: 275px;
      margin-left: 5px;}

   section.headinglabel {height: 55px;} /* Remove white space under "Room Type Notes" by reducing section height */

   section.type {border-top: 17px solid #E2D3E3;
      border-left: 17px solid #E2D3E3;
      border-right: 17px solid #E2D3E3;}   

   section.type aside#hotelphotos {width: 53.2%;}

   section.type aside#roomdescription {width: 42.8%;}

   section.type div.backgroundgrey aside#roomdescription p {min-height: 261px;
       height: auto;}

   /* Reduce width and style the box inside backpackers room text - "Regardless.." */  
   section.type aside#hotelphotos div#allrooms {width: 241px;
      height: 273px;
      margin-left: 250px;}

}


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

   /* Increase top section height with forever background image page due to smaller width */
   section.bookingnotes {min-height: 855px;
       height: auto;}

   section.bookingnotes aside.column {height: 770px;} 

   section.bookingnotes aside.one {width: 58.5%;} 
   section.bookingnotes aside.two {width: 32.5%;}

   section.headinglabel {height: 47px;} /* Remove white space under "Room Type Notes" by reducing section height */

   /* Reduce font size */ 
   section.bookingnotes h6, section.headinglabel h5  {font-size: 1.6em;}  /* header - "ROOM BOOKINGS" + "ROOM TYPE NOTES" */

    section.bookingnotes aside.column div.bookingsection p {font-size: .95em;}

    section.bookingnotes aside.one div.bookingsection p span#quote {font-size: 1em;} /* Quote on how to book */

    /* Update all the sections and asides/divs per room type */ 
    section.type {  /* All section containers for each room category - backpackers, motel lakeside */
      border-top: 15px solid #E2D3E3;
      border-left: 15px solid #E2D3E3;
      border-right: 15px solid #E2D3E3;}

    section.dormroom {height: 500px;} /* Container for the dorm room */
    section.motelroom {height: 530px;} /* Container for the motel room */
    section.lakeroom {height: 635px;   /* Container for the lake room */
      border-bottom: 15px solid #E2D3E3;}  /* Add bottom bottom to all match */

    /* Add bottom bottom to all match */
   
    section.dormroom aside.dormdes {height: 100px;} /* Container for the dorm room */
    section.motelroom aside.moteldes {height: 150px;} /* Container for the motel room */
    section.lakeroom aside.lakedes {height: 290px;} /* Container for the motel room */

    section.type div.notesrooms {  /*Styles the grey rectangle beneath the header over whole room section */
      height: 97%}

    section.type div.backgroundgrey aside#roomdescription p {     /* Styles the pink over the text per room description */
      background-color: rgba(226,211,227,.3);
      margin-top: 10px;
      min-height: 100px;
      height: auto;}

    /* Update the 6 x containers showing hotel room images */
    section.type aside#hotelphotos, section.type aside#roomdescription {position: relative;
      float: none;
      width: 96%;
      margin: 0 auto;
      margin-left: 2%;}

    section.type aside#hotelphotos {height: 305px; width: 98%;}

    section.type aside#hotelphotos div.hotelpics {width: 295px;   /* Increase width of each photo */
      height: 295px;
      margin-left: 5%;} 

    section.type aside#hotelphotos div#allrooms {  /* Styles the box inside backpackers room section with text - "Regardless.." */
      width: 295px;
      height: 294px;
      right: 57px;}

    section.lakeroom aside#roomdescription div.lakesiderm {margin-bottom: 30px;} /* Move up the lakeside box to align better */

    section.dormroom aside#hotelphotos div#allrooms p {font-size: 1.4em;}

}


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

    /* Increase top section height with forever background image page due to smaller width */
    section.bookingnotes {min-height: 1235px;
       height: auto;}

    /* Update asides to now go vertical down the page and not side by side */
    section.bookingnotes aside.column {float: none;
       width: 90%;
       position: relative;
       margin: 0 auto;}

    section.bookingnotes aside.one {
       position: relative;
       height: 655px; 
       margin-top: 68px;}     

    section.bookingnotes aside.two {height: 455px; 
       margin-top: 28px;}
     
    section.bookingnotes aside.two div.paying {width: 93%;}

    /* Reduce font size */ 
    section.bookingnotes h6, section.headinglabel h5  {font-size: 1.4em; /* header - "ROOM BOOKINGS" + "ROOM TYPE NOTES" */
       width: 92.85%;}  

    section.bookingnotes aside.column div.bookingsection p {font-size: .9em;}

    section.bookingnotes aside.one div.bookingsection p span#quote {font-size: .95em;} /* Quote on how to book */

    section.dormroom aside#hotelphotos div#allrooms p {font-size: 1.2em;}

    /* Reduce width of the whole 3rd, 4th, 5th sections */
    section.type {width: 95%;}

    /* Update the containers for the pictures x 6 of each hotel room */ 
    section.type aside#hotelphotos div.hotelpics {width: 225px; 
      height: 225px;}   /* Reduce width and height of each photo */ 

    section.type aside#hotelphotos div#allrooms  
      {width: 225px;   
      height: 221px;
      right: 20px;}

    /* Reduce height of the section containers 2 picture boxes per room section */
    section.type aside#hotelphotos {height: 255px;  
      margin-left: 0%;}
    
    /* Increase the height of the dark grey containers with text and 2 picture boxes included */
    section.dormroom {height: 515px;} /* Container for the dorm room */
    section.motelroom {height: 520px;} /* Container for the motel room */
    section.lakeroom {height: 585px;   /* Container for the lake room */
      border-bottom: 15px solid #E2D3E3;}  /* Add bottom bottom to all match */
   
    section.type div.notesrooms {  /*Styles the grey rectangle beneath the header over whole room section */
      height: 97%}

}

/* *********** BELOW IS DESIGNED FOR MOBILE PHONES USE OR SMALL TABLETS *********/

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

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

    /* Reduce font size */ 
    section.bookingnotes h6 {margin-top: -43px;}
      
    section.bookingnotes h6, section.headinglabel h5 {font-size: 1.4em;
      background: none;
      color: grey;
      margin-left: 11px;}

    section.bookingnotes aside.column div.bookingsection h2 {font-size: 1em;}

    section.bookingnotes aside.column div.bookingsection p {font-size: .85em;
      text-align: justify;}

    section.type h3 {font-size: 1em;
      font-stretch: extra-condensed;
      padding: .15em .15em .15em .3em;}


    /* Increase top section height and remove forever background image page due to smaller width */
    section.bookingnotes {min-height: 1335px;
       height: auto;
       background: none;  /* Remove background image of forever */
       border: none;}   /* Remove the original grey border that surrounded the image forever */

    
    /* Update the containers for the text in "bookingnotes" section to fit smaller screen */
    section.bookingnotes aside.column {width: 100%;} /* Increase from 90% to 100% width to make use of space */

    section.bookingnotes aside.one {height: 788px; /* Increase height to fit */
       margin-top: 68px;}     

    section.bookingnotes aside.two {height: 551px; /* Increase height to fit */
       margin-top: 20px;}
     
    section.bookingnotes aside.two div.paying {width: 89%;
      bottom: 20px;}

    /* Update the heaading "Room Type Notes" section */
    section.headinglabel {height: 55px; /* Increase container height to seperate further from top section */
      background: none;} 

    section.headinglabel h5 {padding-top: 15px;} /* Increase top white spacing */

    /* Reduce height of the section containers 2 picture boxes per room section */
    section.type aside#hotelphotos {height: 491px;  
      margin-left: 0%;}
 
    /* Increase the height of the dark grey containers with text and 2 picture boxes included */
    section.dormroom {height: 890px;} /* Container for the dorm room */
    section.motelroom {height: 898px;} /* Container for the motel room */
    section.lakeroom {height: 915px;}   /* Container for the lake room */

    /* Increase the height of the containers for each room category */
    section.dormroom aside.dormdes {height: 200px;} /* Container for the dorm room */
    section.motelroom aside.moteldes {height: 200px;} /* Container for the motel room */
    section.lakeroom aside.lakedes {height: 350px;
      position: relative;} /* Container for the motel room */

    section.lakeroom aside#roomdescription div.lakesiderm {position: relative;
       margin-bottom: 0;
       bottom: 0;}

    /* Move the box with text labelled "Regardless of all room" further down in line */
    section.type aside#hotelphotos div#allrooms {margin-top: 255px;
       right: 20px;}

    /* Amend the pink border on the outside */
    section.type {  /* All section containers for each room category - backpackers, motel lakeside */
      border-top: 8px solid #E2D3E3;
      border-left: 8px solid #E2D3E3;
      border-right: 8px solid #E2D3E3;}
      section.lakeroom {border-bottom: 8px solid #E2D3E3;}   /* Container for the lake room */

}