/*===========================================================*/
/* initial styles for all devices - assumed min width 320px  */
/*===========================================================*/

body.mainbody { margin:  0px 0px 0px 0px;
                padding: 0px 0px 0px 0px;
                font-family: "DejaVu Sans", Verdana, sans-serif;
                font-size: 16px;
                color: #65696c; /* #333333 */
                background-color: #e4ebf8;
                line-height: 1.4;
              }

/* main container - centered max 1240px wide */
#main_container { width: 100%;
                  max-width: 1240px;     /* 1000px */
                  margin: 0 auto 0 auto;
                  background-color: #ffffff;
                  overflow: auto;
                }

/* module wrapper - wrap 2 modules in same wrapper to display side by side at larger widths  */
 .module_wrapper { background-color: #ffffff; 
                   min-width: 320px;
                   overflow: hidden;
                 }

/* half width module (full width on small devices) */ 
 .hw_module { width: auto; 
              max-width: 625px;
              margin-left: 4%;
              margin-right: 4%;
              background-color: #ffffff;
            }

/* full width module */ 
 .fw_module { margin-left: 4%;
              margin-right: 4%;
            }

/* set the horizontal rule for displaying between sections on small screens */
  .hr_break { height: 3px;
              background-color: #e4ebf8;
              border: none;
              margin: 0;
            }

/* class to clear floating divs - uses '::after' pseudo element  */ 
.clearfix::after { content: "";
                   display: table;
                   clear:   both;
                 }

/* standard banner container - left (logo), center (Devonport Waterwise) */
/*
 .banner_container          { height: 110px;
                              background-color: #ffffff;
                              margin: 0 auto;
                            }

 .banner_container .left   { float: left;
                             width: 70px;
                             height: 110px;
                             background-repeat: no-repeat;
                             background-position: center center; 
                             background-size: contain;
                           } 

 .banner_container .left_img  { background-image: url('images/logo_waterwise_trans1.png'); }

 .banner_container .center { background-image: url('images/banner2_small_380x110.jpg');
                             background-repeat: no-repeat;
                             height: 110px;
                             overflow: hidden;
                             text-align: center; 
                             padding-top: 5px; 
                             color: #5384bb;
                             font-weight: bold;
                             font-size: 18px;
                           }
*/

/* alternative banner container */

 .banner_container  { height: 160px;  /* 300px at max width */ 
                      background-image: url('images/guy_ww11_1240x372.jpg');
                      background-size: cover; 
                      background-repeat: no-repeat;
                      background-position: 0% 10%;
                    }
 .banner_container img { display: block; 
                         margin: 0 auto 0 0;
                         padding: 10px 0 0 10px; 
                         width: 80px; /* 12%; */
                       }

/* full width menu - initially spread over two lines */
 .menu_container { margin-bottom: 0;
                 } 

 .menu_container ul { list-style: none;
                      margin: 0;
                      padding: 0;
                    }

 .menu_container li { font-size: 11px;
                      font-weight: bold; 
                      float: left;
                      box-sizing: border-box; /* to allow percentage based widths that include borders */
                      height: 34px;
                      padding: 12px 0 0 0; 
                      text-align: center;
                      background-color: #004080;
                      border-style: solid; /* border-width is set on each individual li */
                      border-color: #000024;
                    }
 /* set width (in percentages) and borders of each menu item - relies on box-sizing set to border-box */
 li.li_item1 { width: 20%; border-width: 0 1px 1px 0; }
 li.li_item2 { width: 30%; border-width: 0 1px 1px 0; }
 li.li_item3 { width: 30%; border-width: 0 1px 1px 0; }
 li.li_item4 { width: 20%; border-width: 0 0 1px 0; }
 li.li_item5 { width: 20%; border-width: 0 1px 0 0; }
 li.li_item6 { width: 30%; border-width: 0 1px 0 0; }
 li.li_item7 { width: 30%; border-width: 0 1px 0 0; }
 li.li_item8 { width: 20%; border-width: 0; }

 a.nav1 {display: block; } /* make the entire width of the menu item clickable */

 /* main page heading */
 h1.heading { text-align: center;
              color: #004080;
              font-weight: bold;
              font-size: 18px; 
            }

/* Fundraising div */
div.fundraising { max-width: 1000px;
                  margin: 0 auto; 
                  padding-left: 20px;
                  padding-right: 20px;
                }

/* WW footer */
div.ww_footer { padding-top: 15px; 
                max-width: 600px;
                margin: auto;
              }
 .dsww_div { float: left;
             width: 40%;
             max-width: 230px; /* the image width is 115px, displayed at 50% width of this element */
           }

 .dsww_div img { width: 50%;     /* display image at 50% width of containing element */
                 display: block;
                 margin: auto;
               }

 .nzsww_div { float: right;
              width: 60%; 
              max-width: 328px; /* the image width is 230px, displayed at 70% width of this element */
            }


 .nzsww_div a { width: 70%;   /* set the width of the anchor element to 70% width of containing element */
                margin: 0 auto;
                display: block;
              }

 .nzsww_div a:hover img { opacity:0.6; }


 .nzsww_div img { width: 100%;     
                  display: block;
                  margin: auto;
                }

 .resources_link_div { text-align: right;
                       margin-right: 15px;
                       margin-bottom: 10px;
                       font-size: 12px;
                     }

 p.footer { text-align: center;
            font-size: 9px;
            clear: both;
            margin-bottom: 30px;
          }

 .credit { line-height: 20px;
           color: #dddddd;
           font-size: 10px;
           text-align: right;
           padding-right: 2%;
           height: 20px;
           background-color: #004080;
           margin: 0;
         }

/* end WW footer */

/* WW school timeslots */

 div#timeslots p { color: #004080;
                   /*font-size: 13px;*/
                   margin-bottom: 5px;
                 }

  #timeslots table    { border-collapse: collapse;
                        font-size: 10px;
                        color: #004080;

                      }
  #timeslots table td { border: 1px solid #004080; }

  #timeslots tr.day_headings { font-weight: bold;
                               color: #ffffff;
                               background-color: #004080;
                               text-align: center; 
                             }  
  tr.day_headings td:nth-child(1) { width: 8%; }
  tr.day_headings td:nth-child(2) { width: 18.4%; }
  tr.day_headings td:nth-child(3) { width: 18.4%; }
  tr.day_headings td:nth-child(4) { width: 18.4%; }
  tr.day_headings td:nth-child(5) { width: 18.4%; }
  tr.day_headings td:nth-child(6) { width: 18.4%; }

  #timeslots tr.schools { height: 35px;}
  tr.schools td:nth-child(1) { font-weight: bold;
                               color: #ffffff;
                               background-color: #004080;
                               text-align: center; 
                             }

  tr.schools td.free_slot { background-color: #ddedfd; }


 a {outline: 0}
/*==========================================*/
/* Media Query for screens 400px and above  */
/* increase width of sponsor_div            */
/*==========================================*/

@media only screen and (min-width: 400px)
{

 .resources_link_div { font-size: 13px;
                     }
}

/*==========================================*/
/* Media Query for screens 450px and above  */
/* increase size of banner and main heading */
/* reset menu item widths                   */ 
/*==========================================*/
  
@media only screen and (min-width: 450px)
{

/*
  .banner_container  { height: 130px;
                     }

  .banner_container .left   { width: 115px;
                              height: 130px;
                            } 

  .banner_container .center { background-image: url('images/banner2_medium_650x130.jpg');
                              height: 130px;
                              font-size: 25px;
                            }
*/

  h1.heading { font-size: 20px; 
             }

  li.li_item1 { width: 25%; }
  li.li_item2 { width: 25%; }
  li.li_item3 { width: 25%; }
  li.li_item4 { width: 25%; }
  li.li_item5 { width: 25%; }
  li.li_item6 { width: 25%; }
  li.li_item7 { width: 25%; }
  li.li_item8 { width: 25%; }

  #timeslots table { font-size: 12px; }

}

/*==========================================*/
/* Media Query for screens 500px and above  */
/*==========================================*/

@media only screen and (min-width: 500px)
{
  p.footer { font-size: 10px; }

 .resources_link_div { font-size: 15px;
                     }
}

/*==========================================*/
/* Media Query for screens 600px and above  */
/*==========================================*/

@media only screen and (min-width: 600px)
{
 .resources_link_div { font-size: 16px;
                     }
}


/*====================================================*/
/* Media Query for screens 650px and above            */
/* further increase size of banner and main heading   */
/* reset menu item widths to display on one line      */ 
/*====================================================*/
  
@media only screen and (min-width: 650px)
{

/*
  .banner_container  { height: 180px;
                     }

  .banner_container .left   { width: 160px;
                              height: 180px; 
                            }

 .banner_container .center { background-image: url('images/banner2_large_1080x180.jpg');
                             height: 180px;
                             font-size: 35px;
                           }    
*/
 .banner_container  { height: 200px; }
 .banner_container img { width: 100px;
                       }

 .menu_container li { font-size: 12px; }

 li.li_item1 { width: 14%; border-width: 0; }
 li.li_item2 { width: 14%; border-width: 0; }
 li.li_item3 { width: 14%; border-width: 0; }
 li.li_item4 { width: 14%; border-width: 0; }
 li.li_item5 { width: 14%; border-width: 0; }
 li.li_item6 { width: 14%; border-width: 0; }
 li.li_item7 { width: 14%; border-width: 0; }
 li.li_item8 { width:  2%; border-width: 0; }

 h1.heading { font-size: 22px; 
            }
 p.footer { font-size: 11px; }

}



/*==========================================*/
/* Media Query for screens 800px and above  */
/*==========================================*/

@media only screen and (min-width: 800px)
{
  p.footer { font-size: 13px;
             margin-top: 30px;
             margin-bottom: 45px;
           }
}

/*==========================================*/
/* Media Query for screens 900px and above  */
/* increase width of footer_div             */
/*==========================================*/

@media only screen and (min-width: 900px)
{
div.ww_footer { padding-top: 30px; 
                max-width: 700px;
              }
 .banner_container  { height: 250px; }
 .banner_container img { width: 120px;
                       }

}
/*==========================================*/
/* Media Query for screens 1000px and above */
/*==========================================*/

@media only screen and (min-width: 1000px)
{
 .banner_container  { height: 300px; }
 .banner_container img { width: 150px;
                       }

}


/*======================*/
/* End of Media Queries */
/*======================*/

/* other common styles */

/* set properties for nav bar links - blue without underlines */
a.nav1:link     {color: #ffffff ;  text-decoration: none;}
a.nav1:visited  {color: #ffffff ;  text-decoration: none;}
a.nav1:active   {color: #ffff00 ;  text-decoration: none;}
a.nav1:hover    {color: #ffff00 ;  text-decoration: none;}

/* set properties for 'current page' link */
a.current_page:link     {color: #ffff00 ;  text-decoration: none;}
a.current_page:visited  {color: #ffff00 ;  text-decoration: none;}
a.current_page:active   {color: #ffff00 ;  text-decoration: none;}
a.current_page:hover    {color: #ffff00 ;  text-decoration: none;}

/* set properties for text links - blue with underlines */
a.blueredul:link     {color: #000080;  text-decoration: underline;}
a.blueredul:visited  {color: #000080;  text-decoration: underline;}
a.blueredul:active   {color: #ff0000;  text-decoration: none;}
a.blueredul:hover    {color: #ff0000;  text-decoration: none;}

/* set properties for text links - red with underlines */
a.redblueul:link     {color: #ff0000;  text-decoration: underline;}
a.redblueul:visited  {color: #ff0000;  text-decoration: underline;}
a.redblueul:active   {color: #800000;  text-decoration: none;}
a.redblueul:hover    {color: #800000;  text-decoration: none;}

/* set properties for text links - white with underlines */
a.whiteredul:link     {color: #dddddd;  text-decoration: underline;}
a.whiteredul:visited  {color: #dddddd;  text-decoration: underline;}
a.whiteredul:active   {color: #ff0000;  text-decoration: none;}
a.whiteredul:hover    {color: #ff0000;  text-decoration: none;}

/* set properties for Close link */
a.close_window:link     {color: #004080; text-decoration: none;}
a.close_window:visited  {color: #004080; text-decoration: none;}
a.close_window:active   {color: #ff0000;  text-decoration: none;}
a.close_window:hover    {color: #ff0000;  text-decoration: none;}

/* set properties for photo navigation links - grey/black with no underlines */
a.greyblackx:link    {color: #333333;  text-decoration: none;}
a.greyblackx:visited {color: #333333;  text-decoration: none;}
a.greyblackx:active  {color: #333333;  text-decoration: none;}
a.greyblackx:hover   {color: #000000;  text-decoration: none;}

/* align text - especially used for tables when viewed in IE */
  .alignleft { text-align: left;}

/* Large (25px) bold font      */
.font25bold   { font-weight: bold;
                font-size:  25px;
              }
/* Medium (20px) bold font     */
.font20bold   { font-weight: bold;
                font-size: 20px; 
              }
/* Medium (18px) bold font     */
.font18bold   { font-weight: bold;
                font-size: 18px; 
              }
/* Medium (15px) bold font     */
.font15bold   { font-weight: bold;
                font-size: 15px; 
              }
/* Medium (15px) bold red font     */
.font15boldred { font-weight: bold;
                 font-size: 15px; 
                 color: #ff0000;
               }

/* Medium (15px) normal font    */
.font15normal { font-weight: normal;
                font-size: 15px;
              }

/* Small (14px) normal font    */
.font14normal { font-weight: normal;
                font-size: 14px;
              }

/* Small (14px) bold font    */
.font14bold { font-weight: bold;
              font-size: 14px;
            }

/* Small (12px) normal font    */
.font12normal { font-weight: normal;
                font-size: 12px;
              }

/* Small (12px) bold font    */
.font12bold { font-weight: bold;
              font-size: 12px; 
            }

/* Small (11px) normal font    */
.font11normal { font: normal 11px Arial;
              }

/* Small (12px) italic font    */
.font12italic { font-style: italic;
                font-size: 12px;
              }

/* Small (11px) italic font    */
.font11italic { font-style: italic;
                font-size: 11px;
              }

.heavy { font-weight: bold; }

/* remove blank lines before and after paragraph */ 
p.margin0   { margin: 0; }   

/* remove blank lines before paragraph */ 
p.margin0top   { margin-top: 0; } 

/* remove blank lines after paragraph */ 
p.margin0bottom   { margin-bottom: 0; }          

/* styles for centering various elements */

 p.centered   { text-align: center; }

 div.centered { text-align: center; }

 td.centered { text-align: center; }

 img.centered { display: block;
                margin: 0 auto 0 auto;
              }   

 p.justify_text { text-align: justify; }

.red      {color: #ff0000;} 
.blue     {color: #0000ff;} 
.gray     {color: #949494;}
.dblue    {color: #004080;}

/* styles for table borders */

 table.border0 td { border: 0 none; }

 table.border1    { border-collapse: collapse; }
 table.border1 td { border: 1px solid #000000; }