/*===========================================================*/
/* 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: #333333;
                background-color: #e4ebf8;
                /*background-image:url('background2048.gif');*/
              }

/* main container - centered max 1000px wide */
#main_container { width: 100%;
                  max-width: 1000px;
                  margin: 0 auto 0 auto;
                  background-color: #ffffff; /*#ebeef0; */
                  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 */

 .banner_container          { height: 90px;
                              background-color: #ffffff;
                              background: linear-gradient(#1f3451, #ffffff);
                              margin: 0 auto;
                            }

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

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

 .banner_container .center { background-image: url('graphics/banner_small_300x90.jpg');
                             background-repeat: no-repeat;
                             height: 90px;
                             overflow: hidden;
                             background-position: center center; 
                           }

/* full width menu - initially spread over two lines */
 .menu_container { /*margin-bottom: 2px;*/
                   background-color: #004080;
                 } 

 .menu_container ul { list-style: none;
                      margin: 0 auto;
                      padding: 0;
                      max-width: 450px;
                    }

 .menu_container li { font-size: 11px;
                      font-weight: bold; 
                      float: left;
                      box-sizing: border-box; /* to allow percentage based widths that include borders */
                      height: 25px;
                      line-height: 25px;
                      padding: 0 0 0 0; 
                      text-align: center;
                      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: 25%; border-width: 0 1px 0 0; }
 li.li_item2 { width: 25%; border-width: 0 1px 0 0; }
 li.li_item3 { width: 25%; border-width: 0 1px 0 0; }
 li.li_item4 { width: 25%; border-width: 0 0 0 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; }
*/

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

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

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

/*==========================================*/
/* Media Query for screens 380px and above  */
/* change banner image                      */
/*==========================================*/

@media only screen and (min-width: 380px)
{
   .banner_container .center { background-image: url('graphics/banner_small_370x90.jpg');
                             }
}

/*==========================================*/
/* Media Query for screens 450px and above  */
/* increase size of banner and increase     */
/* menu font and remove menu borders        */ 
/*==========================================*/
  
@media only screen and (min-width: 450px)
{
  .banner_container  { height: 130px;
                     }

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

  .banner_container .center { background-image: url('graphics/banner_medium_540x130.jpg');
                              height: 130px;
                            }

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

 li.li_item1 { border-width: 0; }
 li.li_item2 { border-width: 0; }
 li.li_item3 { border-width: 0; }
 li.li_item4 { border-width: 0; }

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

}

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

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

/*====================================================*/
/* Media Query for screens 650px and above            */
/* further increase size of banner and main heading   */
/*====================================================*/
  
@media only screen and (min-width: 650px)
{
  .banner_container  { height: 180px;
                     }

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

 .banner_container .center { background-image: url('graphics/banner_large_720x180.jpg');
                             height: 180px;
                           }    

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

}

/*==========================================*/
/* Media Query for screens 875px and above  */
/* increase banner size                     */
/*==========================================*/

@media only screen and (min-width: 875px)
{
 .banner_container .center { background-image: url('graphics/banner_large_840x180.jpg');
                           }    
}

/*======================*/
/* 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 - 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;}

/* 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 (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; }