/* Global Rules:
   Set common elements, colors, fonts, and font size cascade, 
   but save all layout and screen-specific sizing for @media queries
*/

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  font-family: 'roboto', normal;
}
  
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #6db3f2;
  background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de));
  background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
  background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
  background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
  background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 50%,#3690f0 51%,#1e69de 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
  background-attachment: fixed;
}
 
body, body a, header h1{
  color: white;
}
  
header {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  background-image: url(../photos/banner-lifeguard.jpg);
  font-size: 3rem;
  min-height: 5rem;
}

header h1 {
  font-family: 'Life Savers', bold;
}

header ul.contact-info a {
  text-decoration: none;
  background-repeat: no-repeat;
  background-size: auto 1.25em;
  background-position: left center;
  padding: 0 0 0 1.75em;
  margin: 0 0 .5em;
}

header .contact-info li.phone a {
  background-image: url(../siteIcons/phone.png);
}

header .contact-info li.email a {
  background-image: url(../siteIcons/mail.png);
}

header .contact-info li.twitter a {
  background-image: url(../siteIcons/twitter.png)
}

header .contact-info li.facebook a {
  background-image: url(../siteIcons/facebook.png)
}

header .contact-info li.place a {
  background-image: url(../siteIcons/pin.png)
}

nav {
    font-family: "Noto Serif", normal;
    display: block;
    position:relative;
    float: left;
}

nav ul {
  list-style-type: none;
}

nav li{
  display:inline;
}

nav a {
  text-decoration: none;
  font-weight: normal;
  color: #153B52;
  display: inline-block;
  width: 100%;
}

nav a:hover{
  color: white;
}

nav a.selected {
  color:#cc0000;
}

nav a.selected:hover {
  color: #cc0000;
}

nav .certifications {
  display:block;
  position:relative;
}

nav .certifications a {
  background-repeat: no-repeat;
  font-size: .95rem;
  background-size: auto 3.25em;
  padding-top: 3.5rem;
  padding-bottom: 1rem;
}

nav .certifications li.RedCross a {
  background-image: url(../siteIcons/RedCross.png);
}

nav .certifications li.USSwim a {
  background-image: url(../siteIcons/USSwim.png)
}

nav .certifications li.NSPF a {
  background-image: url(../siteIcons/NSPF.png)
}

main h1, main h2, main h3, .title, .toc {
  font-family: 'Noto Serif', normal;
}

main h3, main h2 {
  margin-bottom: .75rem;
}

main p {
  line-height: 1em;
  margin-bottom: 1rem;
}

main .toc {
  padding: .5rem;
}

body#swim main, body#gallery main, body#wsi main{
  color: black;
}

body#swim main .toc, body#gallery main .toc, body#wsi main .toc {
  background-color: blue;
  color: white;
}

body#swim main p a, body#wsi main p a {
  color: black;
}

body#lifeguard main .toc{
  color: white;
  background-color: #cc0000;
}

main h2 {
  color: #cc0000;
}

body#swim main h2, body#gallery main h2, body#wsi main h2 {
  color: blue;
}

main ul li {
  list-style-type: disc;
  margin-left: 20px;
}

main ol li {
  list-style-type: decimal;
  margin-left: 20px;
}

.upcomingClasses {
  position:relative;
  float:left;
}

.upcomingClasses li, .toc li {
  margin-bottom: .75rem;
}

main #UpcomingClasses a.upcoming {
  background-color: #cc0000;
  color: black;
  font-style: italic;
}

main .title {
  text-decoration:underline;
}

main .date {
  font-style:italic;
  text-decoration:none;
}

main ul.upcoming li{
  list-style-type: none;
}

main ul.upcoming li a {
  text-decoration: none;
}

main p.PDFfile {
  background-repeat: no-repeat;
  background-size: auto 32px;
  background-position: left center;
  padding: 0 0 0 40px;
  margin: 0 0 10px;

  background-image: url(../siteIcons/PDFfile.png)
}
  
#placeholderdiv img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

main #agreement > object, main #request > object {
  min-height: 100vh;
  padding-bottom: 10vh;
}

.slick-slider img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

div.slick-slide {
  /*An attempt to standardize the heights of the slides as to present something to apply borders and centering against*/ 
  height: 65vh;
  padding: 8px;
  
  /* An attempt at adding borders, but they looked like ass
  border-style: solid;
  border-color: blue;
  border-width: 1px;
  */
}

/* Layout definitions common to Medium and Large layouts on Desktops and Laptops
   Screens larger than 11.5 inches and wider than 770px 
   (All smaller screens get caught with "Tablet" or "Phone" views below)
   */
@media screen and (min-device-width:11.5in) and (min-width:770px) {
  main img.left{
    float:left;
    right: 10px;
  }

  body:NOT(#gallery) main img:not(.left){
    left: 10px;
  }
  
  main img.right{
    float:right;
  }
}

/* Large Layout definitions 
  For screens larger than 11.5 inches and wider than 1160 pixels
  (Smaller screens get caught by later layouts)
  */
@media screen and (min-device-width:11.5in) and (min-width:1160px) {
  header {
    padding: 15px;
  }

  header h1, header ul {
    display: block;
    vertical-align: text-top;
    position: relative;
  }
  
  header h1 {
    max-width: 14em;
    float: left;
  }
  
  header ul {
    text-indent: -15vw;
    max-width: 114em;
    float: right;
  }
  
  header li  {
    font-size: .33em;
  }
  
  nav{
    min-width: 21ch;
    max-width: 15%;
    font-size: 1.5rem;
  }
  
  nav ul {
    padding: 0.4rem;
  }

  nav ul:not(.certifications) {
    position: relative; 
    left: .8em;
  }
    
  nav ul:not(.certifications) li a{
    margin-bottom: 1rem;
  }
  
  .certifications {
    font-size: .5em;
    padding-left: 4em;
  }
  
  .certifications a {
    text-align: left;
    background-position: 3em 0em;
  }
  
  body#swim main .toc, body#gallery main .toc, body#wsi main .toc {
    width: 42ch;
  }

  body#lifeguard main .toc{
    width: 42ch;
  }

  main div#LifeguardSwimTest ul li {
    margin-bottom: .75rem;
  }
  
  .upcomingClasses {
    width:49%;    
  }

  #placeholderdiv {
    width:49%;
    min-height: 75vh;
    position:relative;
    float:right;
  }
  
  main {
    display: inline-block;
    position:relative;
    width: 72.5%;
    min-height: 75vh;
    vertical-align: top;
    margin: 1em;
  }
  
  main h2 {
    font-size: 1.5rem;
  }
  
  main #UpcomingClasses a.upcoming, main .title, main h3 {
    font-size: 1.25rem;
  }
  
  main p, main ul {
    font-size: 1rem;
  }
  
  main img{
    display: inline-block;
    position: relative;
    
  }
  
  body:not(#gallery) main img:not(div#placeholderdiv > img) {
    max-height: 21em;
    max-width: 50%;
    margin: 10px;
  }
  
  main > div:not(:first-child) {
    padding-top: 1em;
  } 
  
  #placeholderdiv img {
  max-height: 70vh;
  }
}
  
/* Layout Modifications for Very Large Desktop screens:
   Screens larger than 11.5 inches and wider than 1159px
   (SMALL screens, regardless of pixel density, are caught by Phone and Tablet views)
   */
 @media screen and (min-device-width:11.5in) and (min-width:1159px) {
  html {
    max-width: 1950px; 
      /* 
      WSXGA+: 1680x1050
      1080p: 1920x1080
      15" Retina Display: 2880x1800
      */
    margin-left: auto;
    margin-right: auto;
  }
  
  nav {
    width: 24ch;
  }
  
  /* Removed to left justify
  .certifications {
    right: 5px;
  }
  */
  

}

/* Layout definitions common to Small and Medium layouts
   Screens smaller than 11.5 inches or less than 1159 pixels
   */
@media screen and (max-width:1159px), screen and (max-device-width:11.49in) {
  main > div {
    width: 95%;
    margin: 0 auto;
    min-width: 295px
  }
  
  nav .certifications li {
    width: 32%;
    display: inline-block;
    vertical-align: text-top;
  }
  
  .certifications a {
    text-align: center;
    background-position: top center;
  }
  
  nav li a, .toc li {
    margin-bottom: 1vmax;
  }

}

/* Medium Layout definitions
   Screens smaller than 11.49 inches that are also larger than 770px, AND
   Screens smaller than 1159px and larger than 770px
   */
@media screen and (max-device-width:11.49in) and (min-width:770px), 
       screen and (min-width: 770px) and (max-width:1159px) {
  header {
    min-height: 5rem;
    padding: 15px;
  }

  header h1, header ul {
    display: block;
    vertical-align: text-top;
    position: relative;
  }
  
  header  h1{
    width:49%;
    text-align: right;
    display: block;
    position: relative;
    float: left; 
  }
  
  header ul  {
    width: 40%;
    text-align: left;
    display: block;
    position: relative;
    float: right;
  }

  header li {
    font-size: .4em;
  }
  
  #placeholderdiv{
    position: relative;
    float: right;
    max-width: 49%;
  }
  

  nav {
    text-align: center;
    max-width: 49%;
  }
  
  #placeholderdiv img {
  max-width: 50%;
  max-height: 100%;
  }

  #placeholderdiv, nav{
    height: 35rem;
  }
  
  nav {
    font-size: 1.4rem;
  }
  
  img {
    max-width:50%;
    clear: none;
  }
  
  h2, h3 {
    font-size: 1.25em;
  }
  body:not(#home) main > div:first-child {
    max-width: 49%;
    height: 35em;
    float: right;
    clear: right;
  }


  body:not(#home) div:first-child .toc {
    font-size: 1.4em;
    height: 100%;
    width: 100%;
    margin: auto;
  }
  
  body:not(#home) div:first-child img {
    max-height: 100%;
    max-width: 100%;
  }
  
  .toc li {
    vertical-align: center;
  }
  
  .upcomingClasses{
    width: 100%;
  }  
}

/* Small Layout definitions
   Screens smaller than 769 pixels
   */
@media screen and (max-width:769px) {
  header, body{
    width: 100vw;
  } 
  
  header  h1{
    text-align: center;
    display: block;
  }
  
  header ul  {
    text-align: center;
    display: block;  
  }

  header li {
    font-size: .333em;
  }

  nav, .toc {
    display: block;
    width: 100%;
    margin: auto;
    clear:both;
  }
  
  nav {
    text-align: center;
  }
  
  .certifications {
    font-size: 1rem;
  }
  
  nav, .toc, h2, h3 {
    font-size: 1.3em;
  }
  
  .toc {
    text-align: left;
  }
  .toc li {
    width: 100%
  }
  
  main img:not(div#placeholderdiv > img), #placeholderdiv {
    display: block;
    max-height: 75vh;
    max-width: 75vw;
    margin-left: auto;
    margin-right: auto;
    clear:both;
  }
  
  #div#placeholderdiv > img {
    max-height: 100%;
    max-width:100%;
  }
  
  div.upcomingClasses {
    display:block;
    position:relative;
    float: left;
    max-width: 260px;
  }
}

/* Sizes for all Laptop and Desktop screens:
   Screens larger than 11.5 inches and at ANY resolution
   (All smaller screens get caught with "Tablet" or "Phone" views below)
   */
@media screen and (min-device-width:11.5in) {
  html {
    font-size: 16px;
  }
}

/* Sizes for Tablet screens:
   Screens larger than 6.5 inches, AND smaller than 11.49 inches
   (Set ONLY sizes here; All layout gets handled below)
   */
@media screen and (min-device-width:6.5in) and (max-device-width:11.49in) {
  html {
    font-size: 18px;
  }   
}

/* Sizes for Phone screens:
   Screens smaller than 6.49 inches
   (Set ONLY sizes here; All layout gets handled below)
   */
@media screen and (max-device-width:6.5in) {
  html{
    font-size: 2vw !important;
  }

  header{
    /*Target font-size: 12.8px*/;
    overflow: auto;
  }
  
  nav li:not(.certifications), .toc li {
    font-size: 4.6vw;
  }
}

/* Clearfix */
.clearfix {
    clear: both;
}

#placeholderdiv img {
  max-width: 100%;
}

footer{
  clear: both;
  position: relative;
  margin-top: -1rem;
  height: 2rem;
  line-height: 5rem;
  font-size: .75rem;
  width: 100%;
  text-align: center;
  color: white;
}