html {
    overflow-y: scroll; /* Always display vertical scroll bar - reason why pages were shifting to the left when the content extended the contentColumn. Doesn't play nicely with some browsers */
}

body {
  font-size: 10pt;
  font-family: verdana, arial, helvetica, sans-serif;
  line-height: 110%;
  margin: 0px;
  background-color: #ccccff;
  color: #000000;
  }

h1 {
line-height: 100%
}

a:link { color: #0000FF; } /* blue */
a:visited { color: #C40400; } /*red - matches DCLA header */
a:hover { color: #000099; font-weight: bold; } /* dark blue */

p.center {
text-align: center
}

p.left {
text-align: left;
}

p.right {
text-align: right;
}

div.left {
  text-align: left;
}

p.missionStatement {
color: blue;
font-size: 20px;
line-height: 110%;
text-align: left;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

div.center {
  margin-left: auto;
  margin-right: auto;
  width: 4em;
  vertical-align: top;
}

td.lakesCol {
width: 9.35em;
}
  
#myTable {
text-align:center;
width: 795px;
height: 550px;
border-spacing: 0pt;
border-style: solid;
border-width: 3px;
background-color: white;
border-color: grey;
/*border-color: blue;  The default color (grey) matches the headerpic and looks nicer! */
margin-left:auto; 
margin-right:auto;
}

#lakesTable {
table-layout: fixed;
text-align:center;
border-spacing: 50px 10px; /* cell spacing in x and y direction */
}



#contentColumn {
vertical-align: top; /* can do it inline html: style="vertical-align:top;" for column? */
text-align: center;
padding: 0px 20px;
}

#navigator {
background-color: #3333ff; /* matches button color, RGB = 51, 51, 255 */
border: 2px grey solid;
width: 200px;
/*padding: 2px;*/
/* text-align: center; */
vertical-align: text-top; 
font-size: 12pt;
}

a.without_u {
 text-decoration: none;
 }

/*********************************************************** BUTTONS ***********************************************************/
#home
{
  display: block;
  width: 187px;
  height: 38px;
  background: url(../graphics/home.gif) no-repeat 0 0;

}

#home:hover
{ 
  background-position: 0 -37px;
}

#home span
{
  display: none;
}

#home_hl /* highlited button (displays this id when viewing same page */
{
  display: block;
  width: 187px;
  height: 38px;
  background: url(../graphics/home.gif) no-repeat 0 -37px;

}

#home_hl:hover
{ 
  background-position: 0 0;
}

#home_hl span
{
  display: none;
}

#aboutUs
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/about_us.gif) no-repeat 0 0;

}

#aboutUs:hover
{ 
  background-position: 0 -25px;
}

#aboutUs span
{
  display: none;
}

#aboutUs_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/about_us.gif) no-repeat 0 -25px;

}

#aboutUs_hl:hover
{ 
  background-position: 0 0;
}

#aboutUs_hl span
{
  display: none;
}

#memberLakes
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/member_lakes.gif) no-repeat 0 0;

}

#memberLakes:hover
{ 
  background-position: 0 -25px;
}

#memberLakes span
{
  display: none;
}

#memberLakes_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/member_lakes.gif) no-repeat 0 -25px;

}

#memberLakes_hl:hover
{ 
  background-position: 0 0;
}

#memberLakes_hl span
{
  display: none;
}

#news_events
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/news_events.gif) no-repeat 0 0;

}

#news_events:hover
{ 
  background-position: 0 -25px;
}

#news_events span
{
  display: none;
}

#news_events_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/news_events.gif) no-repeat 0 -25px;

}

#news_events_hl:hover
{ 
  background-position: 0 0;
}

#news_events_hl span
{
  display: none;
}

#waterQuality
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/water_quality.gif) no-repeat 0 -12px;

}

#waterQuality:hover
{ /* Needed to shift on the y axis a bit more than the others */
  background-position: 0 -48px;
}

#waterQuality span
{
  display: none;
}

#waterQuality_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/water_quality.gif) no-repeat 0 -48px;

}

#waterQuality_hl:hover
{ /* Needed to shift on the y axis a bit more than the others */
  background-position: 0 -12px;
}

#waterQuality_hl span
{
  display: none;
}

#ais
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/ais.gif) no-repeat 0 0;

}

#ais:hover
{ 
  background-position: 0 -25px;
}

#ais span
{
  display: none;
}

#ais_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/ais.gif) no-repeat 0 -25px;

}

#ais_hl:hover
{ 
  background-position: 0 -25px;
}

#ais_hl span
{
  display: none;
}

#resources
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/resources.gif) no-repeat 0 0;

}

#resources:hover
{ 
  background-position: 0 -25px;
}

#resources span
{
  display: none;
}

#resources_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/resources.gif) no-repeat 0 -25px;

}

#resources_hl:hover
{ 
  background-position: 0 0;
}

#resources_hl span
{
  display: none;
}

#q_and_a
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/q_and_a.gif) no-repeat 0 0;

}

#q_and_a:hover
{ 
  background-position: 0 -25px;
}

#q_and_a span
{
  display: none;
}

#q_and_a_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/q_and_a.gif) no-repeat 0 -25px;

}

#q_and_a_hl:hover
{ 
  background-position: 0 -25px;
}

#q_and_a_hl span
{
  display: none;
}

#dclaGear
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/dcla_gear.gif) no-repeat 0 0;

}

#dclaGear:hover
{ 
  background-position: 0 -25px;
}

#dclaGear span
{
  display: none;
}

#dclaGear_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/dcla_gear.gif) no-repeat 0 -25px;

}

#dclaGear_hl:hover
{ 
  background-position: 0 0;
}

#dclaGear_hl span
{
  display: none;
}

#map
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/map.gif) no-repeat 0 -12px;

}

#map:hover
{ 
  background-position: 0 -48px;
}

#map span
{
  display: none;
}

#map_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/map.gif) no-repeat 0 -48px;

}

#map_hl:hover
{ 
  background-position: 0 -12px;
}

#map_hl span
{
  display: none;
}

#contactUs
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/contact_us.gif) no-repeat 0 0;

}

#contactUs:hover
{ 
  background-position: 0 -25px;
}

#contactUs span
{
  display: none;
}

#contactUs_hl
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/contact_us.gif) no-repeat 0 -25px;

}

#contactUs_hl:hover
{ 
  background-position: 0 0;
}

#contactUs_hl span
{
  display: none;
}

#how_to_join
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/want_to_join.gif) no-repeat 0 -10px;

}

#how_to_join:hover
{ 
  background-position: 0 -45px;
}

#how_to_join span
{
  display: none;
}

#how_to_join_h1
{
  display: block;
  width: 187px;
  height: 26px;
  background: url(../graphics/want_to_join.gif) no-repeat 0 -45px;

}

#how_to_join_h1:hover
{ 
  background-position: 0 -10px;
}

#how_to_join_h1 span
{
  display: none;
}



/******************************************************** END OF BUTTONS ********************************************************/

#footer {
text-align: center;
font-size: 8pt;
}