body	{
	background: #ffffff url(/grafix/frontpage/background-grad.png) repeat-x;
	font-family: 'Open Sans', sans-serif;
	color: #000000; 
	font-size: 13px;
	}
                                              
:root
{
 --lwblue:         #0C4964;
 --lwltblue:       #3C7994;
 --lwltback:       #5D9AB5;
 --postit:         #fff9dd;
 --lwgrey:         #999;
 --verygrey:       #bbb;
 --xgrey:          #eee;
 --darkred:        #ab0000;
 --reddish:        #cf3d29;
 --redback:        #ffd3d3;
 --blueback:       #eeffff;  
 --bluebackhover:  #e3f4f4;
 --greenback:      #f1fff1;
 --greenbackhover: #eaf8ea;  
 --pinkback:       #fff5f5;
 --pinkbackhover:  #F8E4E4;
 --fpe:            #1b7097;
 --menuback:       #7ea8ba;
}

.desktop
{
 max-width: 1000px;
 margin: auto;
 background-color: #fff;    
}
.topslide
{
 background-color: #fff;
 padding: 5px 0 0 0; 
}
.displayed
{
 max-width: 240px;
 width: 100%;
 height: auto;
 //margin: auto;
}

.logotd
{
 display: block;
}

.tdslide { padding: 0 5px 0 0; }

.hozm1
{
 display: block;
 height:        21px;
 line-height:   21px;
 width:         100%;
 text-align:    center;
 vertical-align: middle;
 background-color: #7ea8ba;
 color:         #193655;
 font-size:     13px;
 padding:       0;
 font-style: normal;
}      

.hozm2
{
 display: none;
 height:        44px;
 line-height:   21px;
 width:         100%;
 font-weight: bold;
 text-align:    center;
 vertical-align: middle;
 background-color: #7ea8ba;
 color:         #193655;
 font-size:     15px;
 padding:       0;
 font-style: normal;
}
.faint  { color: #4F6C8B; }
.faint2
{
 color: #6E98AA;
 font-weight: 400;
}

.hozmitem:link, .hozmitem:visited
{
 text-decoration: none;
 color:           #193655;
 font-weight:     600;
}
.hozmitem:hover
{
 color:#fff;
}
.menuitem:hover
{
 text-decoration: none;
 color: #F9F9F9 important!;
}  

.locationheaders
{
 margin: 0 90px 0 90px;
 background-color: white;
 display: block;
} 
.hpimage
{
 width: 100%;
 max-width: 240px;
 height: auto;
} 
.lhtd
{
 height: 190px;
}

.locationheaders2col
{
 margin: 0 50px 0 50px;
 background-color: white;
 display: none;
} 
.hpimage2
{
 width: 100%;
 max-width: 240px;
 height: auto;
}   
.lhtd2
{
 height: 190px;
}    

.locationheaders1col
{
 //margin: 0 50px 0 50px;
 background-color: white;
 display: none;
} 
.hpimage3
{
 width: 100%;
 max-width: 240px;
 height: auto;
}   
.lhtd3
{
 height: 190px;
}

.fpe
{
 width: 100%;
 max-width: 1000px;
 margin: 0px;
 margin-top: 8px;
 margin-bottom: 0;
 height: 30px;
 line-height: 30px;
 text-align: center;
 vertical-align: middle;
 color: #ADD7e9;
 background-color: var(--lwltblue);
 font-size: 17px;
 font-style: italic;
 font-weight: 700;
 padding: 0;
}
.fpelink:visited, .fpelink:link 
{
 text-decoration: none;
 color: #ADD7e9;    
}
.fpelink:hover { color: #193655; }

.fpe2
{
 display: none;
 width: 100%;
 max-width: 1000px;
 margin: 0px;
 margin-top: 8px;
 margin-bottom: 0;
 height: 30px;
 line-height: 30px;
 text-align: center;
 vertical-align: middle;
 color: #ADD7e9;
 background-color: var(--lwltblue);
 font-size: 17px;
 font-style: italic;
 font-weight: 700;
 padding: 0;
}  

.hpcontact
{
 //float: left;
 margin-top: 3px;
 margin-bottom: 0;
 height: 30px;
 line-height: 30px;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 color: #193655;
 background-color: #7ea8ba;
 font-size: 16px;
 font-style: italic;
 padding: 0;
}        

.hpcontact2
{
 display: none;
 margin-top: 3px;
 margin-bottom: 0;
 height: 50px;
 line-height: 22px;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 color: #193655;
 background-color: #7ea8ba;
 font-size: 16px;
 font-style: italic;
 padding: 0;
}

.maintel
{
 font-weight: bold;
 color: #193655;
 cursor: help;
 padding: 3px 0 0 0;  
}

.ddial
{
 color: #4F6C8B;
 cursor: help;   
}

.infocontact
{
 font-weight: bold;
 color: #193655;
 text-decoration: none;
}  

.bottommenu
{
 //float: left;
 margin-top: 0;
 //margin-bottom: 8px;
 height: 20px;
 line-height: 20px;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 color: #ADD7e9;
 background-color: #2a4962;
 font-size: 13px;
 font-weight: 600;
 //clear: both;
 padding: 0;
}    

.bottommenu2
{
 display: none;
 margin-top: 0;
 //margin-bottom: 8px;
 height: 43px;
 line-height: 20px;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 color: #ADD7e9;
 background-color: #2a4962;
 font-size: 13px;
 font-weight: 600;
 //clear: both;
 padding: 0;
}      

.bottommenu3
{
 display: none;
 margin-top: 0;
 //margin-bottom: 8px;
 height: 65px;
 line-height: 20px;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 color: #ADD7e9;
 background-color: #2a4962;
 font-size: 13px;
 font-weight: 600;
 //clear: both;
 padding: 0;
}           

.bottommenu4
{
 display: none;
 margin-top: 0;
 //margin-bottom: 8px;
 height: 85px;
 line-height: 20px;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 color: #ADD7e9;
 background-color: #2a4962;
 font-size: 13px;
 font-weight: 600;
 //clear: both;
 padding: 0;
}

a.bottommenuitem:link, a.bottommenuitem:visited
{ 
 text-decoration: none;
 color: #ADD7e9;
} 

a.bottommenuitem:hover
{ 
 text-decoration: none;
 color: #Fff;
}

.clients
{
 line-height: 30px;
 display: block;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 background-color: #7ea8ba;
 text-decoration: none; 
}   

.clients2
{
 line-height: 30px;
 display: none;
 width: 100%;
 text-align: center;
 vertical-align: middle;
 background-color: #7ea8ba;
 text-decoration: none; 
}

.clientitem
{
 padding: 3px;
} 

.librarylink
{
 font-size: 13px;
 text-decoration: none;
 font-weight: bold;
 color: #193655;
 margin: 0 0 5px 0;
 display: block;
}
.librarylink:hover
{
 text-decoration: underline;
}

#footercentre
{
 margin: auto;
 text-align: center;
 padding: 10px 0 0 0;
 display: none;
} 
#footercentre img
{
 padding: 0 2px 5px 2px;
 vertical-align: middle;
}

#footercontent
{
 width: 100%;
 padding: 20px;
 display: none;
}
#footerleft, #footerright
{
 display: inline-block;
 width: 45%;
 //background-color: pink;
}
#footerleft
{
 margin-right: 50px;
}
#footerright
{
 vertical-align: top;
}

.footer
{
 clear: both;
 padding: 10px 105px;
 background-color: #fff;
 //font-weight: bold;
 //font-size: 12px;
}
.footer img
{
 padding: 0 2px 5px 2px;
}
.footer a
{
 text-decoration: none;
 font-size: 13px;
 color: #193655;
}     
.footer a:hover
{
 text-decoration: underline;
 color: #193655;
}
      
.footer2
{
 display: none;
 //clear: both;
 //padding: 10px 10px 10px 65px;
 margin: 10px 60px;
 background-color: #fff;
 //font-weight: bold;
 //font-size: 12px;
}
.footer2 img
{
 padding: 0 2px 5px 2px;
}
.footer2 a
{
 text-decoration: none;
 font-size: 13px;
 color: #193655;
}     
.footer2 a:hover
{
 text-decoration: underline;
 color: #193655;
}

a.redlink                { color: #dd0000; text-decoration: underline; }
a.redlink:link           { color: #dd0000; text-decoration: underline; }
a.redlink:visited        { color: #dd0000; text-decoration: underline; }
a.redlink:hover          { color: #dd0000; text-decoration: none; background-color: #eee; }

.blurb
{
 font-size: 14px;
 padding: 0 15px 10px 0px;
}

article
{
 -webkit-column-count: 3;
    -moz-column-count: 3;
         column-count: 3;
 -webkit-column-width: 200px;
    -moz-column-width: 200px;
         column-width: 200px; 
 -webkit-column-gap: 1.5em;
    -moz-column-gap: 1.5em;
         column-gap: 1.5em; 
 -webkit-column-rule: 1px solid #ddd;
    -moz-column-rule: 1px solid #ddd;
         column-rule: 1px solid #ddd;
} 

.mobile
{
 display: none;
}

.columnlogo
{
 max-width: 100%;
 height: auto;
}

#wrapper
{
 width: 100%;
 max-width: 1000px;
 margin: 0px auto;
}

.mainwrapper
{
 padding: 10px;
}
 
.contact
{
 font-size: 13px;
 color: #004488;
 //font-weight: bold;
}

/* ::::::::::::::::  MEDIA QUERIES :::::::::::::::::::: */                        

@media only screen and (max-width: 1000px)
{    
  .hozm1  { display: none; }   
  .hozm2  { display: block; }
  .locationheaders
  {
   margin: 0 60px 0 60px;
  }
  .footer { padding: 10px 85px; }
}

@media only screen and (max-width: 900px)
{    
  .locationheaders
  {
   margin: 0 40px 0 40px;
  }
  .footer { padding: 10px 55px; }
}

@media only screen and (max-width: 850px)
{ 
  .mobile
  {
   display: block;
  }
  .logotd { display: none; }
  .hozm2  { display: none; }    
  .locationheaders
  {
   margin: 0 10px 0 10px;
  }

  .tdslide { padding: 0 0 0 0; }

  .fpe
  {
   background-color: var(--lwltblue);
  } 
  .footer { padding: 10px 30px; }

  .col4 { display: block; }
  .col3 { display: none; }
  .col2 { display: none; } 
  .col1 { display: none; }            

  .scoutbody
  {
   padding: 0 10px 10px 0px;
  }
  .bottommenu { display: none; }
  .bottommenu2 { display: block; }    
}   

@media only screen and (max-width: 800px)
{    
  .locationheaders
  {
   margin: 0;
  }
}       

@media only screen and (max-width: 750px)
{
  .hpimage
  {
   max-width: 220px;
  }
  .lhtd
  {
   height: 175px;
  }
  .clients { display: none; }
  .clients2 { display: block; }
}

@media only screen and (max-width: 700px)
{ 
//  .fpe
//  {
//   font-size: 15px;
//  } 
  .hpimage
  {
   max-width: 200px;
  }  
  .lhtd
  {
   height: 165px;
  }
}

@media only screen and (max-width: 650px)
{
  .locationheaders
  {
   display: none;
  }
  .locationheaders2col
  {
   display: block;
  }
  .footer { display: none; }
  .footer2 { display: block; }
  #footercontent { display: block; }
  #footercentre  { display: block; }      
  .clients2 { display: none; }
}

@media only screen and (max-width: 625px)
{
  .locationheaders2col
  {
   margin: 0 30px 0 30px;
  } 
}    

@media only screen and (max-width: 600px)
{ 
  .locationheaders2col
  {
   margin: 0 20px 0 20px;
  }
}  

@media only screen and (max-width: 550px)
{
  .locationheaders2col
  {
   margin: 0;
  }
}       

@media only screen and (max-width: 500px)
{
  .locationheaders2col
  {
   display: none;
  }
  .locationheaders1col
  {
   display: block;
  }
  .hpcontact { display: none; }
  .hpcontact2 { display: block; } 
  .fpe { font-size: 15px; }
}               

@media only screen and (max-width: 450px)
{
  .bottommenu2 { display: none; }
  .bottommenu3 { display: block; }
}                   

@media only screen and (max-width: 400px)
{ 
  .fpe { font-size: 14px; }
}

@media only screen and (max-width: 350px)
{
  .bottommenu3 { display: none; }
  .bottommenu4 { display: block; }
  .fpe { display: none; }
  .fpe2 { display: block; font-size: 13px; }
}                    

@media only screen and (max-width: 300px)
{ 
  .fpe2 { font-size: 12px; }
  .ddial { font-size: 13px; }
}