/***** GENERIC RULES AND MORE **********************************************************/

a {
  text-decoration: underline;
  color: #006699;
}

a:visited {
  text-decoration: underline;
  color: #666;
}

a:hover {
  text-decoration: none;
}

.clear {
  clear: both;
  height: 0;
  line-height: 0;
  font-size: px; /*for IE*/
}

.strikethrough {
	text-decoration: line-through;
}

/* For the heading tags */
.blue{
	color:#336699;
}

.red {
	color: #cc0000;
}

.gold {
	color: #E7AB0E;
}

.orange {
	color: #dd6d22;
}

.green {
	color: #5A7D1F;
}

.darkblue {
	color: #323266;
}
.blue_oan {
	color: #1AB7EA;
}
/* END */

/* Menus... */

ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.menu li a {
  display: inline-block;
  padding: 5px 12px 0px 8px;
  height: 25px;
  color: white;
  text-decoration: none;
}

ul.menu a:hover {
  text-decoration: none;
}


ul.dept {
font-size:80%;
}

div.alertBox {
    border: 2px solid #CC0000;
    margin: 0px 0px 10px 0px;
    padding: 0px 10px;
	
}

p.alert {
	color:#cc0000 !important;
	font-size:80%;
}

/***** LAYOUT STYLES (from here on in...) ************************************************/

body {
  background-color: #E7EFF7;
  font-family: Verdana, Arial, sans-serif;
  padding: 0;
  margin: 0;
}

#page {
  clear: both;
  width: 952px;
  margin: 0 auto;
  background-color: white;
  border: 1px solid white;
}



/***** TOP NAVIGATION ********************************************/

#top-navigation {
  width: 100%;
  background-color:#336699;
  padding:0px;
  margin:0px;
  }

#top-navigation .container {
  width: 952px;
  height: 27px;
  padding-bottom:8px;
  padding-top:4px;
  margin: 0 auto;
  text-align: right;
  font-size:11px;
  color:#d6dfe3;
 }  

#top-navigation .container a{
  text-decoration:none;
  color:#d6dfe3;
  }

#francais {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}

#weather {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}

/*********END TOP NAVIGATION STYLES *************************************/ 



  
/***** START HEADER *****************************************************************************/

#headers {
  float: left;
  width: 774px;
  padding-bottom: 15px;
  background: url(/shared/Redesign/images/dropshadow_spacer.jpg) repeat-x;
  background-position: bottom center;
  border: none;   
}

#banner {
  height: 108px;
  background: url(/shared/Redesign/images/header_part2.jpg);
  border-bottom: 1px solid white;
  width: 774px;
}

#top-menu {
  background-color: #5E5E86;
  border-bottom: 1px solid white;
  height: 30px !important;
}

#top-menu ul {
  font-size: 85%;
  line-height:22px;
}

#top-menu ul li.residents {
  background-color: #CC0000;
  
}

#top-menu ul li.business {
  background-color: #F0B40F;
}

#top-menu ul li.visitors {
  background-color: #FF6600;
}

#top-menu ul li.city_hall {
  background-color: #5A7D1F;
}

#top-menu ul li.departments {
  background-color: #323266;
  border-right: none;
  
}

#top-menu ul li.self_service {
	background-color: #0173AF;
	border-right: none;
}

#top-menu ul li.site_map {
background-color: #cc0000;
}

#top-menu ul li a {
  text-decoration: none;
}


#top-menu ul.extras{
  float: right;
  border-right: 13px solid #000066;
  border-left: 1px solid white;
}

<!-- Not needed anymore becasue SiteMap link was removed from header.htm -->
/*#top-menu ul.extras li {
  border-right: 1px solid white;
}*/


/* Hack: IE6 ignores this style because of the '>'. */ 
ul.menu li > a {
  display: block;
}

#headers .submenu {
  height: 29px;
  width: 759px;
  border-bottom: 1px solid white;
  padding-left: 15px;
  background-color: #5E5E86;
}


#headers .submenu ul li {
  padding: 0;
  border: none;
}

#headers .submenu ul li a {
  padding: 0 10px;
  height: 1.3em;
  margin-top: 6px;
}

#headers .submenu ul li:first-child a {
  border-left: none;
}

/***** LEFT MENU *******************************************************************/




#left-bar {
  float: left;
  width: 177px;
  /*border: 1px solid white;*/
  background-color: #336699;
  color: white;
  font-size: 80%;
  border: 0px;
}

#left-bar .section a,
#left-bar .section div {
  display: block;
  background-color: #AAAAAA;
  border-left: 1px solid white;
  padding: 9px; /* changed by Ashley - we want it this way */
  /* padding-right: 40px right is now in the class styles for gallery, sitemap, contact us, and events.*/
  background-repeat: no-repeat;
  background-position: 95% 50%;
  text-decoration: none;
}


#left-bar .section form {
  padding: 0px;
  margin: 0px;
}

#left-bar .section img.icon {
  float: right;
  margin-right: 9px;
}



#left-bar .three-one-one {
  /*background-color: #333366;*/
  background-color: #0173AF; /*change to this when 311 logo goes in */

}

#left-bar .three-one-one div {
/*  background-color: #80BEDB;*/
/*  color: white;*/
/*  font-size: 36pt;*/
/*  font-weight: bold;*/
/*  letter-spacing: 0.2em;*/
  padding: 0;
  
}

#left-bar .three-one-one a {
  padding: 0;
}

#left-bar .three-one-one img {
  margin: 0;
}

#left-bar img {
  border: none;
}

#left-bar a {
  color: white;
}

#left-bar a:hover {
  text-decoration: none;
}



#left-menu .section.images {
/*Use this for an image that is 163 px wide (full width of the left nav), and with no a href tag. */
  display: block;
  background-color: #AAAAAA;
  border-left: 1px solid white;
  padding: 0px;
  background-repeat: no-repeat;
  
}

#left-bar .section img {
  padding:0px !important;
}

#left-bar .section img a{
  padding:0px !important;
}
/*---------------------------------------------------*/
/* Use for images where you want no top border ONLY!!*/

#left-bar .section-notopborder {
  background-color: #006699;
  padding-left: 13px;
  border-top: 0px;
}

#left-bar .section-notopborder a,
#left-bar .section-notopborder div {
  display: block;
  background-color: #AAAAAA;
  padding: 0px; /* changed by Ashley - we want it this way */
  /* padding-right: 40px right is now in the class styles for gallery, sitemap, contact us, and events.*/
  background-repeat: no-repeat;
  background-position: 95% 50%;
  text-decoration: none;
}

#left-menu .section-notopborder.images {
/*Use this for an image that is 163 px wide (full width of the left nav), and with no a href tag. */
  display: block;
  background-color: #AAAAAA;
  border-left: 1px solid white;
  padding: 0px;
  background-repeat: no-repeat;
}



/*---------------------------------------------------*/
/* Use for images where you want no padding for an image in the left nav - 163 px wide */

#left-bar .section-image {
  background-color: #006699;
/*  padding-left: 13px;*/
  border-top: 1px solid white;
}

#left-bar .section-image a,
#left-bar .section-image div {
  display: block;
  background-color: #AAAAAA;
  padding: 0px; /* changed by Ashley - we want it this way */
  /* padding-right: 40px right is now in the class styles for gallery, sitemap, contact us, and events.*/
  background-repeat: no-repeat;
  background-position: 95% 50%;
  text-decoration: none;
}

#left-menu .section-image.images {
/*Use this for an image that is 163 px wide (full width of the left nav), and with no a href tag. */
  display: block;
  background-color: #AAAAAA;
  border-left: 1px solid white;
  padding: 0px;
  background-repeat: no-repeat;
}

#left-bar .calendars a {
  padding: 0px;
  border-left: 1px solid white;
  background-repeat: no-repeat;
}

/*Same rss image used for all stylesheets - orange*/
#left-bar .rss a {
  background-image: url(/shared/Redesign/images/icons/rss_ongry.gif);
}

/*Same e-subscribe image used for all stylesheets - green*/
#left-bar .e-subscribe a {
  background-image: url(/shared/Redesign/images/icons/esubscribe_ongry.gif);
}






/***** RIGHT CONTENT ***********************************************************************/

#main {
  float: right;
  width: 773px;
}

#main a {
  text-decoration: underline;
}

#main a:hover {
  text-decoration: none;
}

/***** MAIN ********************************************************************************/

#content {
  float: left;
  width: 527px;
  padding: 10px 14px 14px 14px;
  min-height: 250px;
}

#content2013bc {
  float: left;
  width: 700px;
  padding: 10px 14px 14px 14px;
}

#content h1 {
  margin-top: 0;
}

#content .subsections {
  text-align: center;
}

#content .subsections .section {
  display: inline;
  padding: 0px 6px;
}

#content .subsections img {
  margin-bottom: 8px;
  display: inline-block;
  border: none;
}

#content div.features {
  padding-left: 13px;
  background-color: #666666;
}

#content div.features h1 {
  margin: 0;
  padding: 10px;
  background-color: #AAAAAA;
  color: white;
  font-size: 80%;
  font-weight: normal;
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  
  /** Why, IE?  Why? **/
  position: relative;
}


/*---- START NEW Text Features ----*/

/*---- START Text Features ----*/
/*---- Added to base_style July.22.15 ----*/


#content div.textfeatures {
	margin-top: 15px;
}

#content div.textfeatures h3{
	padding-bottom: 10px;
  border-bottom:dotted 1px #666666; 
}

#content div.textfeatures ul {
  padding-left: 15px;
  line-height:17px;
}

#content div.textfeatures ul li { 
  padding: 3px;
  font-size:70%;
}

#content div.textfeatures div.subfeature {
  padding-top: 5px;
}

#content div.textfeatures .left {
  float: left;
  width: 48%;
}

#content div.textfeatures .right {
  float: right;
  width: 48%;
}

.subfeature a {
  color: #333333;
}

.subfeature a:visited {
  color: #666;
}

/*---- END NEW Text Features ----*/


#content div.features div.body {
  background-color: #EEEEEE;
  border-left: 1px solid white;
  padding: 8px;
}

#content div.features div.body ul {
  padding-left: 5px;
  line-height:17px;
}

#content div.features div.body ul li a{
  color: #333333;

}

#content div.features div.bodyTOC {
  background-color: #EEEEEE;
  border-left: 1px solid white;
  padding: 8px;
  
}

#content div.features div.bodyFULL {
  background-color: #EEEEEE;
  border-left: 1px solid white;
  padding: 8px;
  
}

#content div.bannerimage {
  padding-left: 12px;
  padding-top: 12px;
}



.two_cols .left {
  float: left;
  width: 48%;
  font-size:70%;
  line-height:15px;
}

.two_cols .fareleft {
    float: left;
    font-size: 90%;
    width: 39%;
}

.two_cols .right {
  float: right;
  width: 48%;
  font-size:70%;
  line-height:15px;
}

.two_cols .fareright {
    float: right;
    font-size: 90%;
    width: 60%;
}

.two_cols a {
  color: #333333;
}

.two_cols a:visited {
  color: #666;
}

.two_colsTOC .left {
  float: left;
  width: 48%;
  font-size:75%;
}

.two_colsTOC .full {
  float: left;
  width: 100%;
  font-size:75%;
  line-height:20px;
  color: #000;

}

.two_colsTOC .right {
  float: right;
  width: 48%;
  font-size:75%;
}

.two_colsTOC a {
  color: #333333;
}


.two_cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.two_colsTOC ul {
  list-style: none;
  padding: 0;
  margin: 0;
}


/***** RIGHT BAR *************************************************************************/

#right-bar {
  width: 214px;
  float: right;
  border-left: 1px solid white;
  padding-bottom: 10px;
}

#right-bar .section h1 a {
  color: #ffffff;
}

#right-bar .image {
  border-top: 1px solid white;
  padding-right: 10px;
}

#right-bar .image img {
  background-color: #AAAAAA;
  margin: 0;
  padding: 0px;
  color: white;
  border-right: 1px solid white;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
}

#right-bar .section {
  border-top: 1px solid white;
  padding-right: 11px;
}

#right-bar .section h1 {
  background-color: #AAAAAA;
  margin: 0;
  padding: 10px;
  font-size: 100%;
  font-weight: bold;
  color: white;
  border-right: 1px solid white;
  text-align:left;
}

#right-bar .section h2 {
  margin: 0;
  padding: 10px;
  font-size: 100%;
  font-weight: bold;
  color: white;
  border-right: 1px solid white;
  text-align:left;

}

#right-bar .section h3 {
  margin: 0;
  font-size: 100%;
  font-weight: bold;
  text-align: left;
  color: #333366;
  border-right: 1px solid white;
}

#right-bar .section .body {
  background-color: #EEEEEE;
  border-top: 1px solid white;
  border-right: 1px solid white;
  padding: 5px 10px;
  font-size: 85%;
}

#right-bar .section.search .body {
  background-color: #ffffff;
  border-top: 1px solid white;
  border-right: 1px solid white;
  padding: 5px 10px;
  text-align:center;
}

#right-bar .section .body ul {
  margin: 0;
  padding-left: 15px;
  list-style-type: square;
  
}

#right-bar .one {
  background-color: #669999;
  color: #669999;
}

#right-bar .two {
  background-color: #CC9999;
  color: #CC9999;
}

#right-bar .three {
  background-color: #996699;
  color: #996699;
}

#right-bar .four {
  background-color: #9999cc;
  color: #996699;
}

#right-bar .five {
  background-color: #333399;
  color: #333399;
}


#right-bar .clerks {
  background-color: #5A7D1F;
  color: #000000;
  padding-top: 0px;
}


#trumbaclerks {
  background-color: #ffffff;
  width: 214px;
  float: left;
  border-left: 1px solid white;
  padding-bottom: 10px;
}




/* from CityNet*/
#right-bar .red {
	background-color: #CC0000;
	color: #CC0000;
}

#right-bar .green {
	background-color: #669999;
	color: #669999;
}

#right-bar .blue {
	background-color: #6699CC;
	color: #6699CC;
}

#right-bar .gold {
	background-color: #FFCC00;
	color: #FFCC00;
}

#right-bar .mauve{
	background-color:  #996699;
	color: #996699;
}

#right-bar .dkblue {
  background-color: #333399;
  color: #333399;
}

#right-bar .dkgreen {
  background-color: #336633;
  color: #336633;
}

#right-bar .ardblue {
  background-color: #00aaee;
  color: #00aaee;
}


#right-bar .clerks {
  background-color: #5A7D1F;
  color: #000000;
  padding-top: 0px;
}

#trumbaclerks {
  background-color: #ffffff;
  width: 214px;
  float: left;
  border-left: 1px solid white;
  padding-bottom: 10px;
}

/* from CityNet*/



#right-bar .threeoneone {
  background-color: #0173AF;
  color: #0173AF;
}

#right-bar .search {
  background-color: #ffffff;
  color: #ffffff;
}
#right-bar .emerg-one {
  background-color: #cc0000;
  color: #cc0000;
}

#right-bar .emerg-two {
  background-color: #038089;
  color: #038089;
}

#right-bar .emerg-three {
  background-color: #cc9933;
  color: #cc9933;
}

#right-bar .emerg-four {
  background-color: #333366;
  color: #333366;
}

#right-bar .utilitynews {
  background-color: #8FBE4A;
  color: #336699;
}

#right-bar .section h2.utility {
  background-color: #336699;
  margin: 0;
  padding: 10px;
  font-size: 100%;
  font-weight: bold;
  text-align: right;
  color: white;
  border-right: 1px solid white;
}

#right-bar img.rss {
  border: none;
  vertical-align: middle;
}

#right-bar a {
  color: #333333;
}

#right-bar a:visited {
  color: #666;
}

#right-bar .search form {
  color: #333333;
  display:inline;
  margin: 0px;
}

#right-bar {
  font-size: 80%;
}

#right-bar li {
  padding: 2px 0;
}

#right-bar .date {
  text-align: right;
  color: #000;
  margin-bottom: 5px;
}

.RtNavText {
  color: #000;
 
}


/***** FOOTER ***********************************************************************/

#footer {
  clear: both;
  display:block;
  padding: 1em;
  margin-top: 10px;
  background-color: #eee;
  text-align: left;
  font-size: 70%;
  border-top: 1px dotted #999999;
  height: inherit;
  line-height: 20px;
  padding-bottom: 10px;
  padding-top:10px;
}


.footer_box {
 float:left;
 width: 160px;
 margin-left: 10px;
 margin-right: 10px;

}
.footer_box a:link{
 display:block;
 text-decoration:none;
 border-bottom: solid thin  #999;
}
.footer_box a:visited{
 display:block;
 text-decoration:none;
 border-bottom: solid thin  #999;
 color: #336699;
}
.footer_box a:hover{
 text-decoration:none;
 border-bottom: solid thin  #999;
}
.footer_box a:active{
 text-decoration:none;
 border-bottom: solid thin  #999;
}

.connect {
 float:left;
 border-bottom: none;
 padding: 3px;
 margin-top: 3px;
 margin-left: 10px;
}
.connect a:link {
 border-bottom: none;
 padding: 0px;
}
.connect a:visited {
 border-bottom: none;
 padding: 0px;
}
.connect a:hover {
 border-bottom: none;
 padding: 0px;
}
.connect a:active {
 border-bottom: none;
 padding: 0px;
}

.copyright {
 clear: both;
 text-align:left;
 padding-top:5px;
  font-size: 80%;
 }


/*--------------------END Footer Styles------------------------------------------*/







/** ALTERNATIVE LAYOUTS **/
body.hide-right-bar #right-bar {
  display: none;
}

body.hide-right-bar #content {
  /*width: auto;*/
  min-width: 720px;
}

body.fluid #top-navigation {
  width: auto;
}

body.fluid #page {
  width: auto;
  min-width: 951px;
}

body.fluid #main {
  clear: left;
  float: none;
  width: auto;
  background-color: white;
}

body.fluid #content {
  float: none;
  width: auto;
}

body.fluid #header {
}


body.fluid #banner {
  height: 108px;
  background: url(/shared/Redesign/images/headerimgFluid.jpg);
  border-bottom: 1px solid white;
  border-left: 0px;
}
  
#dm0m0 {
  width: auto !important;
}

/* iMap styles */

#top-menu ul li.interactive {
  background-color: #669933;
}

#top-menu ul li.free {
  background-color: #0291DD;
}

#top-menu ul li.sale {
  background-color: #993366;
}

#banner-iMap {
  height: 108px;
  background: url(/shared/redesign/images/header.jpg);
  border-bottom: 1px solid white;
}




#Map {
  display: inline;
}

/* images... */
.imageLeft {
	
	clear: none;
	float: left;
	border: 1px solid #000;
	margin-right: 10px;
}

.imageRight {
	
	clear: none;
	float: right;
	border: 1px solid #000;
	margin-left: 10px;
}

.imageLeft-noborder {
	
	clear: none;
	float: left;
	border: none;
	margin-right: 10px;
}

.imageRight-noborder {
	
	clear: none;
	float: right;
	border: none;
	margin-left: 10px;
}


/***** TOP AD BAR **********************************************************/

#top-ad {
  width: 950px;
  margin: 0px auto;
  margin-top: 1em;
  margin-bottom: 4px;
  padding: 0px;
  color: white;
  font-size: 80%;
  border: 1px solid white;
  background-color:#FFF;
}

#top-ad a {
  color: white;
}
