/*////////// GENERAL RULES //////////*/
/* Created by - Kristopher Howe - 2018 - SNHU Final Project */

/* Dropdown Button */
.dropbtn {
  background-color: #003366;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #003366;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}



/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 999999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  z-index: 1; /* Sit on top */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  z-index: 1; /* Sit on top */
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

html {
 height: 100%;
 margin-bottom: 1px;}

 body {
   background: url('images/background/bluebackground1.jpg') no-repeat fixed top left;
   color: #000000;
   text-align: left;
   font: normal 80% Verdana, Verdana, Geneva, sans-serif;
   padding: 0;
   margin: 0 auto;
   background-size: cover;
 }
 


 hr {
   background-color: #5392cb;
   color: #5392cb;
   border: none;
   height: 1px;}

   
   table {
    padding: 0;
    border-collapse: collapse;
    font-size: 100%;
    width: 100%;}


    
    #wrapper {/* -- The wrapper holds the header, content, sidebar, and footer areas --*/

     width: 1080px;

     margin: 0 auto;
   }

   /*////////// TYPOGRAPHY //////////*/

   p {
     margin: 0px 0;
     font-size: large;
   }
   a {
     color: #003366;
     text-decoration: underline;
     outline: none;
     font-weight: bold;}

     a:hover {
       color: #606060;
       text-decoration: underline;
       font-weight: bold;}

       h1 {
         border-bottom: 5px #003366 solid;
         border-top: 4px #003366 solid;
         padding-left: 3px;
         margin-top: 0;
         background: #003366 no-repeat;
         text-align: center;
         color: #FFFFFF;
       }

       h2 {

         color: #003366;
         font: normal 12px Arial, Arial, sans-serif;
         letter-spacing: 2px;
         margin: .8em 0;
         text-align: left;}

         h3 {
           color: #003366;
           font: bold 16px Georgia, Georgia, serif;
           letter-spacing: 3px;
           line-height: 25px;
           margin: .8em 0;
           text-transform: uppercase;
           text-align: left;}

           h4 {
             color: #000000;
             font: bold 18px Arial, Arial, sans-serif;
             letter-spacing: 1px;
             line-height: 25px;
             margin: .8em 0;
             text-transform: uppercase;
             text-align: left;}

             h5 {
               color: #808080;
               font: bold 14px Georgia, Georgia, serif;
               margin: .8em 0;
               text-transform: uppercase;
               text-align: left;}

               h6 {
                 color: #000000;
                 font: bold 14px Arial, Arial, sans-serif;
                 letter-spacing: 1px;
                 line-height: 25px;
                 margin: .8em 0;
                 text-transform: uppercase;
                 text-align: left;}

                 /*////////// HEADER AREA //////////*/

                 #header {
                   position: relative;
                   width: 1080px;
                   height: 210px;
                   text-align: center;
                 }
                 
                 .translate { 
                   position: absolute; 
                   top: 12px; 
                   left: 67%; } 
                   
                   /*////////// MAIN NAVIGATION NEW //////////*/ 
                   
                   /*////////// MAIN NAVIGATION NEW //////////*/

                   #navigation {
                     position: relative;
                     width: 1080px;
                     height: 45px;
                     text-align: center;
                   }
                   .nav  {
                    text-align: center;
                    display: inline-block;
                    z-index: 9999;

                  }

                  .nav ul {
                    *zoom: 1;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    background: #003366; /* this is the main bar color */
                    z-index: 9999;


                  }

                  .nav ul:before,
                  .nav ul:after {
                    content: "";
                    display: table;
                    z-index: 9999;
                  }

                  .nav ul:after {
                    clear: both;
                    z-index: 9999;
                  }

                  .nav ul > li {
                    float: left;
                    position: relative;
                    width: 160px; /* width of main nav selections */
                    z-index: 9999;
                  }

                  .nav a {
                    display: block;
                    padding: 12px 10px;
                    line-height: 1.2em;
                    color: #fff; /* this is the text color */
                    border-left: 1px solid #003366; /* this is the middle bar color */
                    text-align: center;
                    font-weight: bold;
                  }

                  .nav a:hover {
                    text-decoration: none;
                    background: #091136; /* this is the main bar hover color */
                  }

                  .nav > ul > li > ul {
                    position: absolute;
                    left: 0;
                    top: 36px;
                    z-index: 9000;
                    max-height: 0;
                    /*overflow: hidden;   showing overflow allows for sideways flyout menus to show */
                    -webkit-transform: perspective(400px) rotateX(-90deg);
                    -moz-transform: perspective(400px) rotateX(-90deg);
                    -ms-transform: perspective(400px) rotateX(-90deg);
                    -o-transform: perspective(400px) rotateX(-90deg);
                    transform: perspective(400px) rotateX(-90deg);
                    -webkit-transform-origin: top;
                    -moz-transform-origin: top;
                    -ms-transform-origin: top;
                    -o-transform-origin: top;
                    transform-origin: top;
                    -webkit-transition: 350ms;
                    -moz-transition: 350ms;
                    -o-transition: 350ms;
                    transition: 350ms;
                    background: #003366; /* this is the drop down menu color */
                  }

                  .nav li ul li {
                    width: 200px; /* width of drop down selections */
                  }

                  .nav li ul a {
                    border: none;
                  }

                  .nav li ul a:hover {
                    background: #091136; /* this is the drop down menu hover color */
                  }

                  .nav > ul > li:hover > ul {
                    max-height: 1000px;
                    -webkit-transform: rotateX(0deg);
                    -moz-transform: rotateX(0deg);
                    -ms-transform: rotateX(0deg);
                    -o-transform: rotateX(0deg);
                    transform: rotateX(0deg);
                    z-index: 999;
                  }

                  

                  

/* if you need more or fewer link groups, take the total width of 960 and divide by the
number of link groups you need. Just do the math and subtract an extra pixel or two for
cross-browser wiggle room */


/*////////// SLIDESHOW //////////*/

#slideshow {
 position: absolute;
 top: 15px;
 left: 35px;
 width: 330px;}

 /*////////// CONTENT AREA //////////*/

 #content {
   float: right;
   width: 630px;
   margin: 5px;
   padding: 1;
   line-height: 1.6em;}

   #tcontent {
     float: center;
     width: 960px;
     margin-left: auto ;
     margin-right: auto ;
     padding: 0;
     line-height: 1.6em;}

     #ncontent {
       float: middle;
       left: 50%;
       width: 960px;
       margin: 0px;
       padding: 0;
       line-height: 1.6em;}

       .blocktable {
        padding: 0;
        margin-top: 20px;
        border-collapse: collapse;
        font-size: 100%;
        width: 100%;}

        .blockcontent {/* -- sets the table cell properties for the three-column table --*/
         padding: 0 10px;
         font-size: 90%;
         text-align: left;
         vertical-align: top;
         width: 33%;}

         .blockcontent h3, .blockcontent h4 {
           border: 1px #003366 solid;
           margin-top: 0;
           text-align: center;}

           .blockcontent2 {/* -- sets the table cell properties for the two-column table --*/
             padding: 0 10px;
             font-size: 90%;
             text-align: left;
             vertical-align: top;
             width: 50%;}

             .blockcontent2 h3, .blockcontent2 h4 {
               border: 1px #003366 solid;
               margin-top: 0;
               text-align: center;}

               #contentwide {/* -- used on the one-column page layout --*/
                 padding: 10px;
                 width: 1050px;
                 text-align: center;
               }

               /*////////// SIDEBAR AREA //////////*/

               #sidebar {
                 float: left; 
                 margin: 0px 5px;
                 padding: 0;
                 font-size: 85%;
                 width: 412px;}

                 .textbox {/* -- used for the text box that sits inside of the sidebar area --*/
                   background: #D1E6FB no-repeat;
                   color: #000000;
                   padding: 5px;
                   margin: 5px 0;
                   border: 0px #003366 solid;
                   text-align: center;
                 }
                 .textboxc {/* -- clear textbox for centering --*/

                   color: #000000;
                   padding: 5px;
                   margin: 5px 0;
                   border: 0px #003366 solid;
                   text-align: center;
                 }
                 .textbox h4 {
                   border-bottom: 1px #003366 solid;
                   padding-left: 3px;
                   margin-top: 0;
                   background: #003366 no-repeat;
                   color: #FFFFFF;
                   text-align: center;
                 }

                 .textbox h6 {
                   border-bottom: 1px #003366 solid;
                   padding-left: 3px;
                   margin-top: 0;
                   background: #FF0000 no-repeat;
                   color: #FFFFFF;
                   text-align: center;
                 }

                 .textbox h1 {
                   border-bottom: 3px #003366 solid;
                   border-top: 3px #003366 solid;
                   padding-left: 3px;
                   margin-top: 0;
                   background: #003366 no-repeat;
                   text-align: center;
                   color: #FFFFFF;
                 }

                 #sidebar ul {
                  list-style: square;  
                  list-style-image: none;}


                  /*////////// FOOTER //////////*/

                  #footer {
                   background: #04539E ;
                   clear: both;
                   text-align: center;
                   letter-spacing: 2px;
                   color: #ffffff;
                   height: 50px;
                   font-size: 85%;
                   border-top: 1px #404040 solid;
                   /*padding: 20px 0 0 0; */
                   width: 1080px;
                 }



                 /*////////// CONTACT FORM //////////*/

                 #contactform {
                   padding: 5px;
                   text-align: left;
                   margin: 20px 10px 5px 10px;}

                   #contactform label {
                     width: 150px;
                     float: left;
                     text-align: right;
                     margin: 3px 5px 5px 5px;
                     clear: both;}

                     #contactform input {
                       margin: 3px 5px 5px 5px;
                       background-color: #ffffff;
                       color: #000000;
                       border: 1px solid #c2c2c2;}

                       #contactform textarea {
                         font: normal 12px Verdana, sans-serif;
                         margin: 3px 5px 5px 5px;
                         background-color: #ffffff;
                         color: #000000;
                         border: 1px solid #c2c2c2;}

                         #contactform .button {
                           background-color: transparent;
                           text-align: center;
                           margin: 5px 0 0 170px;
                           border: none;
                           clear: both;}

                           /*////////// PRODUCT CATALOG //////////*/

                           .catalog {
                             padding: 5px;
                             line-height: 1em;
                             text-align: center;
                             vertical-align: top;
                             width: 33%;
                             z-index:99999}

                             /*////////// IMAGES //////////*/

                             img {
                               border: none;}

                               .mainimage {
                                 margin: 0 10px 20px 0;
                                 padding: 5px;
                                 float: left;
                                 border: 3px #818181 double;}

                                 .imageleft-noborder {
                                   margin: 0 10px 0 0;
                                   float: left;}

                                   .imageright-noborder {
                                     margin: 0 0 0 10px;
                                     float: right;}

                                     .imageleft-border {
                                       margin: 0 10px 0 0;
                                       padding: 5px;
                                       float: left;
                                       border: 3px #818181 double;}

                                       .imageright-border {
                                         margin: 0 0 0 10px;
                                         padding: 5px;
                                         float: right;
                                         border: 3px #818181 double;}

                                         /*////////// MISC. CLASSES //////////*/

                                         .center {
                                         }

                                         .clear {
                                           clear: both;
                                           font-size: 0;
                                           line-height: 0;
                                           height: 1px;}

                                           .calendar {
                                             text-align: center;
                                             line-height: 1.2em;
                                             margin: 0 20px 20px 20px;}

                                             /*////////// Teachers and Parents Navigation //////////*/

                                             .navv{
                                              border:1px solid ;
                                              border-width:1px 0;
                                              list-style:none;
                                              margin:0;
                                              padding:0;
                                              
                                              
                                            }
                                            .navv li{
                                              list-style-type: none;
                                              padding: 0px;
                                              height: 24px;
                                              margin-top: 4px;
                                              margin-bottom: 4px;
                                              

                                            }
                                            .navv ul {
                                             *zoom: 1;
                                             text-align: center;
                                             display: inline-block;
                                             list-style: none;
                                             margin: 0;
                                             padding: 0;
                                             background: #003366; /* this is the main bar color */
                                             z-index: 9;
                                           }

                                           .navv ul:before,
                                           .navv ul:after {
                                             content: "";
                                             display: table;
                                             z-index: 9;
                                           }

                                           .navv ul:after {
                                             clear: both;
                                             z-index: 9;
                                           }

                                           .navv ul > li {
                                             float: left;
                                             list-style: none;
                                             position: relative;
                                             width: 180px; /* main nav width */
                                             z-index: 9;
                                           }

                                           .navv a {
                                             display: block;
                                             padding: 12px 10px;
                                             line-height: 1.2em;
                                             color: #fff; /* this is the text color */
                                             border-left: 1px solid #003366; /* this is the middle bar color */
                                             text-align: center;
                                             font-weight: bold;
                                           }

                                           .navv a:hover {
                                             text-decoration: none;
                                             background: #091136; /* this is the main bar hover color */
                                           }

                                           .navv > ul > li > ul {
                                             position: absolute;
                                             left: 0;
                                             top: 36px;
                                             z-index: 9;
                                             max-height: 0;
                                             /*overflow: hidden;   showing overflow allows for sideways flyout menus to show */
                                             -webkit-transform: perspective(400px) rotateX(-90deg);
                                             -moz-transform: perspective(400px) rotateX(-90deg);
                                             -ms-transform: perspective(400px) rotateX(-90deg);
                                             -o-transform: perspective(400px) rotateX(-90deg);
                                             transform: perspective(400px) rotateX(-90deg);
                                             -webkit-transform-origin: top;
                                             -moz-transform-origin: top;
                                             -ms-transform-origin: top;
                                             -o-transform-origin: top;
                                             transform-origin: top;
                                             -webkit-transition: 350ms;
                                             -moz-transition: 350ms;
                                             -o-transition: 350ms;
                                             transition: 350ms;
                                             background: #003366; /* this is the drop down menu color */
                                           }

                                           .navv li ul li {
                                             width: 200px;
                                           }

                                           .navv li ul a {
                                             border: none;
                                           }

                                           .navv li ul a:hover {
                                             background: #091136; /* this is the drop down menu hover color */
                                           }

                                           .navv > ul > li:hover > ul {
                                             max-height: 1000px;
                                             -webkit-transform: rotateX(0deg);
                                             -moz-transform: rotateX(0deg);
                                             -ms-transform: rotateX(0deg);
                                             -o-transform: rotateX(0deg);
                                             transform: rotateX(0deg);
                                             z-index: 999;
                                           }

                                           #lightbox {
                                             background-color:#eee;
                                             padding: 20px;
                                             z-index:999999;
                                             position: Relative;

                                           }

                                           #lightboxDetails {
                                             font-size: 0.8em;
                                             padding-top: 0.4em;}	

                                             #lightboxCaption {
                                               color: #000000;
                                               float: left;}

                                               #keyboardMsg {
                                                 float: right;}

                                                 #closeButton {
                                                   top: 5px;
                                                   right: 5px;}

                                                   #lightbox img {
                                                     border: none;
                                                     clear: both;
                                                     z-index:999999;
                                                     position: Relative;
                                                   }

                                                   #overlay img {
                                                     border: none;
                                                     z-index:999999;
                                                     position: Relative;
                                                   }

                                                   #overlay {
                                                     background-image: url("../images/overlay.png");
                                                     z-index:999999;
                                                     position: Relative;
                                                   }

                                                   * html #overlay{
                                                     background-color: #333;
                                                     back\ground-color: transparent;
                                                     background-image: url("../blank.gif");
                                                     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/overlay.png", sizingMethod="scale");}