/**************** Colors ****************************/
/*
color1 Blue for blue headings etc : #1b82bd
color2 Bright Green: #87c53e
color3 Blue for active nav : #379bba
color4 Pale yellow box backgrounds: #fbf8de

*/
/**************** Style Resets **********************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,p,pre,blockquote,ul,ol,dl,address {margin:1em 0;}
li, dd, blockquote {margin-left:1em;}
html, body, fieldset {font:100.1%/120% Verdana, Arial, Helvetica, sans-serif;}
input, select, textarea {font-size:100.1%;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
form label{cursor:pointer;}
fieldset, img{border:none;}
table{border-collapse:collapse; border-spacing:0;}
ul li {list-style-type:square;}
hr {height: 1px; background-color: #E5E5E5;  color: #E5E5E5;   border: none;  padding: 0; margin: 1em 1em;}

/**************** General rules *********************/

html{height:100%; }
body {height:101%; line-height:150%;color: #555; text-align: center; background:#ccddbb url(../images/greenfadeback1.jpg) left top repeat-x;}

/**************** General Links ***********************************/

a:link            { color: #1b82bd; text-decoration: none;border-bottom:1px solid #1b82bd;}
a:visited         { color: #1b82bd; text-decoration: none;border-bottom:1px solid #1b82bd;}
a:focus, a:hover, a:active {color: #fff;background-color:#1b82bd;border-bottom:1px solid #7d7779 }

/********************** Navigation ******************/

#navlist{margin:0;width:100%;background:#87c53e url(../images/greenback.gif) 0 -2px repeat-y;}

#navlist li{list-style: none;margin:0;padding:5px;}
#navlist a {font-weight:bold;color:#555;display:block;text-decoration:none;border-bottom:none;width:100%;display:block;}
#navlist a:link, #navlist a:visited {  border-bottom:none;color:#fff ; display:block;text-decoration: none; padding-left:10px;}
#navlist a:focus, #navlist a:hover, #navlist a:active {color: #fff;background:#379bba url(../images/navback.jpg) right center no-repeat;;padding-left:10px;}

/* submenus */
#navlist ul {margin:0 -2px 0 0;padding:0;}
#navlist ul li {padding:3px;}
#navlist ul a {font-weight:bold;color:#555;display:block;text-decoration:none;border-bottom:none;width:100%;display:block;}
#navlist ul a:link, #navlist a:visited {  border-bottom:none;color:#fff ; display:block;text-decoration: none; padding-left:10px;}
#navlist a:focus, #navlist ul a:hover, #navlist a:active {color: #1b82bd;background: url(../images/bluearrow.gif) right center no-repeat;;padding-left:10px;}

/* Current Menu Item Effects just change the relevant body tags to match e.g. #depts-fire */
#home #nav-home, #depts #nav-depts, #depts-police #nav-depts,#depts-admin #nav-depts, #depts-parks #nav-depts,#depts-fire #nav-depts,#depts-fire_service #nav-depts, #depts-works #nav-depts, #depts-zoning #nav-depts, #depts-courts #nav-depts, #mayor #nav-mayor, #council #nav-council, #applications #nav-applications, #employment #nav-employment, #directory #nav-directory, #library #nav-library, #churches #nav-churches, #links #nav-links, #utilities #nav-utilities, #contact #nav-contact, #schedule #nav-schedule, #notices #nav-notices, #notices-council_minutes #nav-notices, #notices-pz_minutes #nav-notices, #webcam #nav-webcam, #photo #nav-photo {color: #fff;background:#379bba url(../images/navback.jpg) right center no-repeat;;padding-left:10px;}
#depts-police #nav-police, #depts-fire #nav-fire, #depts-fire_service #nav-fire_service, #depts-admin #nav-admin, #depts-works #nav-works, #depts-zoning #nav-zoning, #depts-courts #nav-courts, #depts-parks #nav-parks, #notices-council_minutes #nav-council_minutes, #notices-pz_minutes #nav-pz_minutes {color: #1b82bd;background: url(../images/bluearrow.gif) right center no-repeat;padding-left:10px;}

/***************** Headings ********************/

/* h1 {font-size:110%; color: #000; font-weight:normal;} */
h1 {font-size:180%; color:#1b82bd; font-weight:normal;margin-top:0;}
h2 {font-size:160%; color:#62ab34; font-weight:normal;}
h3 {font-size:140%; color:#62ab34;font-weight:normal;}
h4 {font-size:140%; color:#62ab34;font-weight:normal;}

/***************** Page Sections *********************/

#container { margin:1em auto;text-align:left; width:760px; font-size:76%;padding:0 ;}

#skip {font-size:80%; position:absolute;top:-10px; right:0;  text-align:right; color:white;   margin-bottom:0;}
  #skip li {display:inline;  list-style-type: none;  padding: 0em;  }
  #skip li a:link, #skip li a:visited  {border:none; color:#1b82bd; padding:6px;  }
  #skip li a:focus, #skip li a:hover, #skip  a:active { border:none;color:#fff;    padding:6px;background:#4195c3 url(../images/skipback.jpg) left bottom repeat-x;}

#mainbox {clear:both;overflow:hidden; border:10px solid white;width:740px;background:#fff url(../images/greenback.gif) left top repeat-y;overflow:hidden;}
#mainbox img.icon {float:none;padding:0;margin:0;border:none;}

#header {position:relative;height:2em;overflow:hidden;width:100%;}

#logo {height:200px;background:#449c02 url(../images/mainpic.jpg) left top no-repeat;}

#info {margin-left:5px;margin-top:20px;padding-top:10px;border-top:1px solid #fff;color:#fff;}
  #info h4 {margin-top:5px;}

/*****The float right was removed from the #content img so that the council photo could be centered******/
#content {width:520px;float:right;margin:0 0 0 0 ;background-color:white;}
#content p {}
#content img {clear:both;padding:6px;border:1px solid #e2e2e2;color:#333;background:#fff;margin: 0 0 5px 4px;}
#content ul  {margin-left:10px;}
  
/************Floating photos. The border is inherited from the #content img id and must be put in there own div**************/
#photoCenter img {display:block; margin-left:auto; margin-right:auto;}
#photoRight img {display:block; float: right;}
.image_right img {float:right; margin: 0 5px 0 5px; }
.image_left img {float:left; margin:0 5px 0 5px;}
.image_center img {display:block; margin-left:auto; margin-right:auto;}

/*******************Use to center text. Used mostly on the city council page*************/
#content .text_center {text-align:center;}
 
 
/*********The CSS for the news boxes*******/
#boxwrap {background:#fff url(../images/boxback.gif) left top repeat-y; overflow:hidden;padding:0;margin:0;}
#content .box {float:left; width:31%; margin:0px 8px 8px 0; display:inline;background:#fbf8de url(../images/corner.gif) right top no-repeat;}
#content .box p {margin-left:5px; margin-right:5px;}
#content .box h3 {margin:5px;}

#sidebar {width:199px;float:left;margin:0;}
  #sidebar img.sidebarpic {margin-left:15px;margin-top:20px;display:block;}
  #sidebar p {margin-right:10px;margin-left:10px;}

#footer {clear:both; padding:1em 0 1em 0;overflow:hidden;color:white;}
  #footer a:link,#footer a:visited,#footer a:hover,#footer a:focus {color:white;}
  #footer .left {float:left; width:40%;text-align:left;}
  #footer .right {float:right; width:60%; text-align:right;}


/***************** Image Replacement ****************/

/* General IR statements */
.replace {clear:both;position: relative;  overflow: hidden; margin: 0 0 0 0;padding: 0;   font-size: 150%; }
.replace em {     display: block;   position: absolute;  top: 0;  /* left: 0; */ z-index: 1;    /* for opera5 (?) and o6/mac */     }
/* General IR statements for IE5.x mac only */
* html>body .replace {  position: static; overflow: visible;   font-size: 10px;  /* for ie5.x/mac */  }
* html>body .replace em  { position: static; }
* html>body .replace a {color:#fff; text-decoration: none;  /* ie5.0-5.1.x/mac  must have this value or the underline shows through the image. */   }
* html>body .replace a:visited {font-color:#fff; text-decoration: none;  /* ie5.0-5.1.x/mac  must have this value or the underline shows through the image. */   }

/* Each pair of statements per instance of IR */
#myh1, #myh1 em {color:#fff;padding-bottom:0; background-color:#87c53e;     width:191px;     height: 181px; background: url(../images/logo.jpg) top left no-repeat;}
* html>body #myh1 em { /* for ie5.x/mac only */ margin-bottom: -181px;  /* Required to bring text underneath image. Use the negative height of the image here.*/  }
h1 a:link, h1 a:visited {color:#fff;}

/********************** Use on 2 column pages ******************/
#lcolumn{float: left; width: 48%; margin-right: 5px;}
#rcolumn{float: left; width: 48%; margin-left: 5px;} 

/*************** Forms ******************/

#contactform {font-size:100%; color:#000; margin:0;width:90%;  }
#contactform fieldset { border:none;   }
#contactform legend {   display:none;}
#contactform input {background:#fff;   border:1px solid #1b82bd;  width:70%;     padding:5px 3px 5px 3px;   vertical-align:middle;  margin:0 0 5px 0; }
#contactform textarea { background:#FFF;  border:1px solid #1b82bd;     width:70%;  margin-left:0;    font-size:110%;   padding:3px ;  vertical-align:middle;  }
#contactform input.button {   border:1px solid #fff;clear:both;   color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;    background-color:#1b82bd;  }
#contactform input:hover, #contactform textarea:hover {  border:1px solid #1b82bd;,background-color:#efefef;   }
#contactform input.button:focus, #contactform input.button:hover, #contactform input.button:active  { clear:both; color:white;   font-size:100%;   width:30%;  margin:10px 0 20px 0;   font-weight:bold;    background-color:#379bba;  }

/***************** Clearfix ****************/

.clearfix:after { content:".";  display:block;  height:0;  clear:both;   visibility:hidden;  }
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


/************** Tables ********************/
/* Currently these styles will apply to any table within the content div.*/
#gallery a:link,#gallery a:visited,#gallery a:hover,#gallery a:focus {color:white; background: white; text-decoration: none;}
#content table {margin:0 auto 10px auto;width:99%;}
#content th {border:1px solid #ccddbb;background-color:#ccddbb;font-weight:bold;text-align:center;}
#content td {border:1px solid #ccc;vertical-align:top;font-weight:normal;font-size:110%;color:#555;text-align:center;padding-bottom:5px;}
#content td ul li {font-weight:normal;text-align:left;list-style-type:none;margin:0 5px;padding:0;}
#content td ul {list-style-type:none;font-size:90%;color:#555;margin:0 0;padding:0;list-style-position:outside;}
#content tr.roweven td {background-color:white;}
#content tr.rowodd td {background-color:#ccddbb;}
#content table caption {font-size:120%; color:#555;font-weight:bold;font-family:verdana, arial, Helvetica, sans-serif;text-align:center;margin-left:20px;}