/* CSS formatting for Mayor960 Pages */

#main,
#main #nav_menu,
#main #footer, 
#main #footer .footerContact {
	border-color: #999999;
}

ul#sub_nav li {
	background-color:#ffffff;
}

ul#sub_nav li a {
	background-color: #ffffff;
	color: #000000;
}

ul#sub_nav li a:hover {
	background-color: #999999;
	color: #ffffff;
}

ul#sub_nav li li {
	background-color: #FFFFFF;
	color: #000000;
}

ul#sub_nav li li a:hover {
	background-color: #aaaaaa;
	color: #FFFFFF;
}

ul#sub_nav li.home { width: 130px; }
ul#sub_nav li.home a { width:118px; }

ul#sub_nav li.about { width: 150px; }
ul#sub_nav li.about a { width: 138px; }
ul#sub_nav li.about ul, ul#sub_nav li.about li { width: 150px; }
ul#sub_nav li.about li a { width: 140px; }

ul#sub_nav li.newsroom { width: 170px; }
ul#sub_nav li.newsroom a { width: 158px; }
ul#sub_nav li.newsroom ul, ul#sub_nav li.newsroom li { width: 170px; }
ul#sub_nav li.newsroom li a { width: 160px; }

ul#sub_nav li.blog { width: 170px; }
ul#sub_nav li.blog a { width: 158px; }


ul#sub_nav li.schedule { width: 200px; }
ul#sub_nav li.schedule a { width: 188px; }
ul#sub_nav li.schedule ul, ul#sub_nav li.schedule li { width: 200px; }
ul#sub_nav li.schedule li a { width: 190px; }

ul#sub_nav li.contact { width: 140px; }
ul#sub_nav li.contact a { width: 128px; }
ul#sub_nav li.contact ul, ul#sub_nav li.contact li { width: 140px; }
ul#sub_nav li.contact li a { width: 130px; }


/***********************************
   	   GRAY TITLE
************************************/
.title_gray .what_is_this {
	display: block;
	float: right;
	margin-right: 5px;
	padding-top: 1px;
	font: bold 12px Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	color: #003366;
	text-decoration: none;
	text-transform: none;
}


/***********************************
   		BANNER IMAGE OVERLAY
************************************/
.columnSingle div.banner_overlay { background: url(/mayor/images/bannerSingle.jpg) no-repeat 3px 3px; }
.columnDouble div.banner_overlay { background: url(/mayor/images/bannerDouble.jpg) top left no-repeat; }
.columnHalf div.banner_overlay { background: url(/mayor/images/bannerHalf.jpg) top left no-repeat; }
.columnTriple div.banner_overlay { background: url(/mayor/images/bannerTriple.jpg) top left no-repeat; }
.columnFull div.banner_overlay { background: url(/mayor/images/bannerFull.jpg) top left no-repeat; }


/***********************************
    WHAT'S NEW
************************************/
.whats_new {
	margin-bottom: 12px;
	padding: 0;
	background-color: #FFFFFF;
	clear: both;
}

.whats_new ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 11px;
	border: 1px solid #CCCCCC;
	border-width: 0px 1px 0px 1px;
}

.whats_new li {
	display: block;
	padding: 4px 6px;
	text-decoration: none;
	border-bottom: 1px dashed #CCCCCC;
}

.whats_new h3 {
	font-size: 11px;
	text-transform:uppercase;
	font-weight:bold;
	margin:0px;
}

.whats_new a {
    text-decoration:none;
}

/***********************************
    PROJECTS
************************************/
.projectInfoLabel{
	width:34%;
	float:left; 
	padding:5px 5px 5px 5px;
	font-weight:bold;
}

.projectInfo{
	width:60%;
	float:left;  
	padding:5px 5px 5px 5px;
}

div.rowShade{
	width:100%; 
	float:left; 
	background-color:#DDD;
}

/***********************************
    FORMS
************************************/
#formOutline{
		width:99%; 
		border:1px solid #CCC; 
		padding:2px;
}

div#content td.tallLabel{
	vertical-align:top;
	padding-top:7px;
	padding-bottom:7px;
}

tr.rowShade{
	width:100%; 
	background-color:#DDD;
}

.fieldName{
	width:25%;
	float:left; 
	padding:8px 5px 5px 5px;
}

.fieldName label{
	font-weight:bold;
}

.fieldInput{
	width:70%;
	float:left;  
	padding:5px 5px 5px 5px;
}

textarea{
	font-size:12px;	
}

#lastName, #firstName, #email{
	width:225px;
}

#comments{
	width: 480px;
	max-width: 480px;
}

#submit, .button{
		background-color:#999;
		color:#FFF;
		border:0px;
		width:100px;
		height:30px;
		border:1px solid #999;
		padding:0px;
}

#submit:hover, .button:hover{
		background-color:#AAA;
}

/***********************************
    DATA DISPLAY 
************************************/
.fieldLabel{
	width:25%;
	float:left; 
	padding:5px 5px 5px 5px;
}

.fieldData{
	width:72%;
	float:left;  
	padding:5px 0px 5px 5px;
	clear:right;
}

/***********************************
    Button Links
************************************/
a.linkButton{
		background-color:#999;
		color:#FFF;
		width:100px;
		height:16px;
		border:1px solid #999;
		padding:5px;
		display:block;
		text-decoration:none;
		text-align:center;
}

a.linkButton:hover{
		background-color:#AAA;
}

/* Link List Widths */
/*
.columnSingle .link_list a { width: 204px; }
.columnDouble .link_list a { 462px; }
.columnQuarter .link_list a { width: 211px; }
.columnHalf .link_list a { width: 448px; }
*/

/* Link List Banner Styles (Border/Padding) */
.columnDouble .link_list, .columnHalf .link_list, 
.columnTriple .link_list, .columnThreeQuarter .link_list { 
	border: 0; 
}

.columnDouble .link_list img, .columnHalf .link_list img, 
.columnTriple .link_list img, .columnThreeQuarter .link_list img { 
	padding: 0; 
	border: 0; 
}

.columnDouble .link_list ul, .columnHalf .link_list ul, 
.columnTriple .link_list ul, .columnThreeQuarter .link_list ul { 
	border: 1px solid #CCCCCC; 
	border-width: 1px 1px 0 1px; 
}

/***********************************
    LINK LIST double
************************************/
.link_list_double {
	border: 1px solid #CCCCCC;
	border-width: 1px 1px 0 1px;
	margin-bottom: 12px;
	padding: 0;
	background-color: #FFFFFF;
	min-height: 12px;
	clear: both;
	float:left;
}

.link_list_double img {
	padding: 3px;
	border: 1px solid #CCCCCC;
	border-width: 0 0 1px 0;
}

.link_list_double ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 11px;
	float: left;
}

.link_list_double li {
	float: left;
	width: 353px;
}

.link_list_double a {
	display: block;
	padding: 4px 6px;
	text-decoration: none;
	
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
}

.link_list_double a:hover {
	background-color: #EEEEEE;
}

/***********************************
  HIGHLIGHTS (POWERED BY JCAROUSEL)
************************************/
.highlights ul,
.highlights li {
	height: 157px;
}

.highlights h2 a {
	text-decoration: none;
	color: #000000;
}

.highlights .highlights_content {
	height: 192px;
}

/* Column Widths */
.columnDouble .jcarousel-clip-horizontal, .columnDouble .jcarousel-item { height: 157px; }
.columnHalf .jcarousel-clip-horizontal, .columnHalf .jcarousel-item { height: 157px; }
 
.jcarousel-navigation {
	background-color: #e3e3e3;
}

.jcarousel-navigation .previous,
.jcarousel-navigation .next {
	background-color: #e3e3e3;
	border:none;
	margin-top:3px;
}

.jcarousel-navigation a.previous:hover,
.jcarousel-navigation a.next:hover  {
	background-color: #cccccc;
}

.jcarousel-control a {
    border: none;
    color: #444444;
    background-color: #e3e3e3;
}

.jcarousel-control a:hover {
	background-color: #999999;
	color:#FFFFFF;
}

/* Current slide being displayed */
.jcarousel-control a.active {
	background-color: #555555;
	color:#FFFFFF;
}

/***********************************
  INTERACTIVE MAP
************************************/
#legendLabels td{
		width:14.29%;
		vertical-align:top;
}

#legendLabels td a{
		text-decoration: none;
}

/***********************************
  STYLES FOR HEADSHOT
************************************/

a.rollover{ 
	position:relative; 
	z-index:24;
	text-decoration:none;
	background:url(/mayor/images/mayorSoglin.jpg) no-repeat top left;
	width:210px;
	height:314px;
	display:block;
}

a.rollover span{ display: 
	none; 
}

a.rollover:hover{ 
	z-index:25; 
}

a.rollover:hover span.bubble{
	display:block; 
	position:absolute; 
	top: 0; 
	left:0;
	padding: 10px;
	margin-left:0px;
	margin-top:281px;
	width:190px;
	min-height:10px;
	color: #000000;
	background:#666666;
	color:#FFF;
	font-size:11px;
	text-align: left;
	filter: alpha(opacity=70); 
	KHTMLOpacity: 0.70; 
	MozOpacity: 0.70; 
	opacity: 0.70;
}

/***********************************
  DID YOU KNOW? (POWERED BY JCAROUSEL)
************************************/
#dyk .highlights ul,
#dyk .highlights li {
	height: 88px;
}

#dyk .highlights .highlights_content {
	height: 88px;
	padding: 0 8px;
	border: 0;
}

#dyk .highlights img {
	border: 0;
}

#dyk .highlights { width: 216px; }
#dyk .jcarousel-clip-horizontal, #dyk .jcarousel-item { width:  168px; }

#dyk .previous, 
#dyk .next {
	display: block;
	margin-top: 25px;
}
 
#dyk a.previous:hover,
#dyk a.next:hover  {
	background-color: #cccccc;
}

#dyk .previous {
	float: left;
}

#dyk .next {
	float: right;
}


/***********************************
CONTENT ROTATOR (POWERED BY JCAROUSEL)
************************************/
.content_rotator {
	border:0;
	margin-bottom: 12px;
	padding: 0;
	background-color: #FFFFFF;
	min-height: 12px;/*148px;*/
	clear: both;
}

.content_rotator .banner_overlay a {
	/*display:inline;*/
}

.content_rotator ul,
.content_rotator li {
	padding: 0; /* 0 10px 0 10px;*/
	margin: 0;
	list-style-type: none;
	height:auto;
	overflow:auto;
	/*height: 115px;*/
	/*overflow: hidden;*/
}

.content_rotator .content {
	border: 1px solid #CCCCCC;
	background-color: #FFFFFF;
	display: table-cell;
	overflow: hidden;
	height: 115px;
	min-height:115px;
	padding: 0;
}

.content_rotator img {
	border: 0;	
}

.content_rotator .item {
	margin: 5px;
}

.content_rotator .item img {
	float: left;
	margin: 0 5px 0 0;
}

.content_rotator .item .body {
	display: table-cell;
	vertical-align: middle;
}

.content_rotator .body ul {
	padding: 0;
	margin: 0 0 0 25px;
}

#content .content_rotator .body ul,
#content .content_rotator .body li {
	height: auto;
	list-style-type: disc;
}

.content_rotator .previous, 
.content_rotator .next {
	display: block;
	margin-top: 45px;
	padding: 3px;
}
 
.content_rotator a.previous:hover,
.content_rotator a.next:hover  {
	background-color: #cccccc;
}

.content_rotator .previous {
	float: left;
}

.content_rotator .next {
	float: right;
}

/* Column Widths */
.columnDouble .content_rotator { width: 474px; }
.columnDouble .jcarousel-container, .columnDouble .jcarousel-container-horizontal { width: 474px; }
.columnDouble .jcarousel-clip-horizontal, .columnDouble .jcarousel-item { width: 436px; height: 200px; }