/********** Resets ***********/

  * { padding: 0; margin: 0; }

  .clear { clear: both; }

  /***************************/



  /********** Fonts **********/

  body, a, aside p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }

  p, li { font-family: 'Century Gothic', verdana, arial, helvetica, sans-serif; }

  #desktop_flash {  font-family: 'Handwriting - Dakota', cursive, sans-serif; }

  /***************************/



  body { padding: 10px; font-size: 16px; }

  section { margin-top: 17px; }

  section .indent { margin-left: 20px; }



/* Debugger */

  /* #page, h1, h2, p, header, #logo, #flash, nav, a,  #tagline, #content, aside, footer { border: 1px solid black; } */



  #page {

    min-width: 320px; max-width: 960px;

    margin: 0px auto;

  }



  h1 {

    text-align: left;

    font-size: 25px;

    margin: 0.67em 0;


  }

  h1.homepage {

    margin: -20px 0 0.67em 0;

  }



  h1.center { text-align: center; }



  h2 {

    display: block;

    margin-right: 20px;

    color: #f60;

    font-size: 18px;

    font-weight: bold;

  }



  h2.inline {

    display: inline;

    float: left;

    padding-bottom: 15px;

  }



  h3 { margin: 10px 0;
	
	color: #000000;

     	font-size: 18px; }



  p {

    margin: 10px 0px 10px 0px;

    font-size: 12px;

  }



  li { list-style-type: none; }



  ul.classic { margin: 10px 0px 20px 40px; }

  ul.classic li {

    list-style-type: disc;

    font-size: 12px;

font-weight: normal;

  }



  table { font-size: 12px; }

  table { text-align: left; margin-bottom: 20px; }

  th, td { padding: 2px 0px 1px 10px; }

  th { border-bottom: 2px solid hsl(27, 16%, 80%);; }

  tbody tr:nth-child(odd) { background-color: hsl(27, 16%, 85%); }

  tbody tr:nth-child(odd) td:first-child { border-radius: 5px 0px 0px 5px; }

  tbody tr:nth-child(odd) td:last-child { border-radius: 0px 5px 5px 0px; }



  blockquote {

    display: block;

    padding: 3px 20px 6px 20px;

    border-left: 10px solid #f60;

    margin: 20px 0px 20px 20px;

    font-size: 14px;

    font-weight: bold;

  }


  iframe { border: none; }
  
/*** Header ***/

  header { overflow: auto; width: 100%; }

  #logo {

    width: 18%;

    float: left;

  }

  #logo img { width: 100%; }

  #flash {

   width: 80%;

   float: left;

  }



  #mobile_flash { margin: 2% 0% 4% 8%; color: #666; }

  #mobile_flash li { display: table; overflow: auto; padding: 1px 0; }

  #mobile_flash span.verb, span.object, i { display: table-cell; }

  #mobile_flash i { width: 25px; vertical-align: top; color: black; }

  #mobile_flash i.fa-mobile { font-size: 22px; }

  #mobile_flash span.verb { width: 50px; }

  #mobile_flash a:link,          aside a:link { text-decoration:none; color:#fb9e25; }

  #mobile_flash a:link visited,  aside a:link, aside a:visited { color:#fb9e25; }



  #desktop_flash { display: none; }



/* Navigation */

  nav {

    display: block;

    width: 98%;

    float: left;

    overflow: hidden;

    padding: 0px 0px 13px 0px;

    text-align: center;

    color: white;

    font-weight: bold;

  }

  nav a {

    display: inline-block;

    width: 32.5%;

    padding: 8px 0;

  }



  .orange {

    box-shadow:inset 0px 1px 0px 0px #fce2c1;

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffc477), color-stop(1, #fb9e25) );

    background: linear-gradient( to bottom, #ffc477 5%, #fb9e25 100% );

    background-color:#ffc477;

    border-radius:6px;

    border:1px solid #eeb44f;

    color: white;

    text-decoration:none;

    text-shadow:1px 1px 0px #cc9f52;

  }.orange:hover {

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );

    background: linear-gradient( to bottom, #fb9e25 5%, #ffc477 100% );

    background-color:#fb9e25;

  }.orange:active {

    position:relative;

    top:1px;

  }

  .green {

    box-shadow:inset 0px 1px 0px 0px #d9fbbe;

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #bed53b), color-stop(1, #a5cc52) );

    background: linear-gradient( to bottom, #b8e356 5%, #a5cc52 100% );

    background-color:#b8e356;

    border-radius:6px;

    border:1px solid #c2d43b;

    color:#ffffff;

    font-size:16px;

    font-weight:bold;

    padding:8px 0px;

    text-decoration:none;

    text-shadow:1px 1px 0px #528009;

  }.green:hover {

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c2d43b), color-stop(1, #dbdb1f) );

    background: linear-gradient( to bottom, #c2d43b 5%, #dbdb1f 100% );

    background-color:#c2d43b;

  }.green:active {

    position:relative;

    top:1px;

  }

  .blue {

    box-shadow:inset 0px 1px 0px 0px #138d8f;

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #6699cc), color-stop(1, #18347a) );

    background: linear-gradient( to bottom, #2089d9 5%, #18347a 100% );

    background-color:#2089d9;

    border-radius:6px;

    border:1px solid #2089d9;

    color:#ffffff;

    font-size:16px;

    font-weight:bold;

    padding:8px 0;

    text-decoration:none;

    text-shadow:1px 1px 0px #0a6180;

  }.blue:hover {

    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #18347a), color-stop(1, #2089d9) );

    background: linear-gradient( to bottom, #18347a 5%, #2089d9 100% );

    background-color:#18347a;

  }.blue:active {

    position:relative;

    top:1px;

  }



  #tagline {

    float: left;

    width: 94%;

    overflow: hidden;

    color: #333;

    border-top-style: dotted;

    border-top-color: #666;

    border-width: thin;

    padding-left: 20px;

  }

  #tagline p { font-size: 15px; }



/********** Content **********/

/* Index */

  #index { width: 100%; text-align: center; }

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



/* About */

  #about { padding: 0% 2%; }



/* Locations */

  #locations { padding-left: 20px; }

  #locations section { margin-bottom: 60px; }

  #locations h1 { margin-bottom: 0px; }

  #locations h2 { margin: 40px 0px 7px 0px; padding: 0;}

  #locations p { margin: 5px 0; padding: 0;}



/* School Year */

  #schoolyr table .day { width: 50px; text-align: center; }

  #schoolyr table .location { width: 130px; }

  #schoolyr table .time { width: 130px; }



/* Summer */

  #summer p.announcement { font-size: 18px; margin: 20px 0px; }



/* Calendar */

  #calendar { margin-bottom: 30px; }

  #calendar p a {

    display: block;

    width: 300px;

    padding: 10px;

    margin: 0px auto;

    text-align: center;

    font-size: 16px;

    border-radius: 10px;

    box-shadow: 1px 1px 3px #777;

  }



/********** Aside **********/

  aside { display: none; font-size: 12px; }

  aside p { margin: 5px 0px 16px 0px; }



/********** Footer **********/

  footer {

    display: block;

    width: 98%;

    position: relative;

    margin: 1.875% 0;

  }

  footer p {

    font-size: 10px;

  }



/**************************** Desktop Midsize CSS *****************************/



@media (min-width:640px) and (max-width:959px) {

  #mobile_flash { display: none; }

  #desktop_flash {

    display: block;

    position: relative;

    margin-left: 30px;

    top: 10px;

    font-size: 14px;

    color: #666;

    border-color: #000;

  }

  nav {

    width: 80%;

    float: right;

    margin-top: 2.6%;

  }

  #tagline { float: right; width: 76%; padding: 0px 10px;}



  aside {

    display: block;

    float: left;

    width: 16.875%;

    color:#666;

    font-size: 14px;

    font-weight: bold;

  }



  #content {

    width: 81%;

    float: right;

  }

}



/**************************** Desktop Fullsize CSS ****************************/



@media (min-width:960px) {

  #mobile_flash { display: none; }

  #desktop_flash {

    display: block;

    position: relative;

    margin-left: 30px;

    top: 37px;

    color: #666;

    font-size: 14px;

    border-color: black;

  }

  nav { float: right; width: 80%; margin-top: 5.2%; }

  nav a { width: 16.25%; overflow: hidden; }

  #tagline { float: right; width: 76%; padding: 0px 10px; }



  aside {

    display: block; font-size: 15px;

    float: left; width: 16.875%;

    color:#666;

    font-size: 12px;

    font-weight: bold;

  }

  aside a:link { text-decoration:none; color:#fb9e25; }

  aside a:link visited { color:#fb9e25; }



  #content {

    width: 82%;

    float: right;

  }

}

/******************************************************************************/