/* @override http://10-5.ridemcts.com/_cmn/css/common.css */
/**
 	File Overview:		Milwaukee County Transit System - common.css
 	Company:			Versant
 	Description:		Base styles for www.ridemcts.com
*/

/**
	TOC
		1. Base Elements
		2. Structure
		3. Search and Utility links
		4. Navigation
		5. Ankle and Footer
		6. Editor classes
		etc...
*/



/* 1. Base Elements
------------------------------------------------ */
body {
	font:normal 80% Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#333;
	background:#fff url(/_cmn/images/css/body-map.jpg) center 0 no-repeat;
	padding-bottom:30px;
}
h1 {
	font-size:22px;
	margin:30px 0 20px;
}
h2 {
	font-size:16px;	
}
h3 {
	font-size:14px;
}
h4 {
	font-size:12px;
}
h5 {
	font-size:11px;
}
h6 {
	font-size:11px;
	text-transform:uppercase;
}
h2, h3, h4, h5, h6 {
	margin:5px 0 6px;
	padding-top:10px;
	line-height:1.2em;
}
p, dl, ol, ul, table, blockquote {
	margin:0 0 12px;
	line-height:1.6em;
}
ul ul,
ul ol,
ol ol,
ol ul {margin-bottom:0;}
ol {
	list-style:decimal;
	margin-left:25px;
}
blockquote {
	padding:20px 25px 0px 30px;
	background:#FFF url(/_cmn/images/css/left-doublequote.png) 13px 13px no-repeat;
	border:1px solid #feeac0;
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	font-size:16px;
	font-weight:bold;
}
a:link,
a:visited {text-decoration:none; color:#0033cc; /*border-bottom:1px dotted #e2e2e2;*/}
a:hover,
a:active {color:#275af3; /*border-bottom:1px solid #e2e2e2;*/}
em,
strong {font-weight:bold; color:#333; font-style:normal;}



/* 2. Structure
------------------------------------------------ */
#screenreader {position:absolute; top:-9999px;}

div.alert {
	border-bottom:1px solid #e94e4e;
	background-color:#ffe5e5;
	padding:15px 0 0 0; 
}
	div.alert dl {width:886px; padding:0 0 0 43px; margin:0 auto; background:#ffe5e5 url(/_cmn/images/css/main-alert.png) 5px 0px no-repeat;}
	div.alert dl dt {font-size:14px; font-weight:bold; padding-bottom:1px;}
	div.alert dl dd {font-size:12px; margin-bottom:15px;}
div.alert li {list-style:disc; margin-left:25px;}

#container {
	width:954px;
	margin:0 auto;
	padding:0 14px;
	background:#FFF url(/_cmn/images/css/header-curves.png) 0 0 no-repeat;
	border:1px solid #d5d5d5;
		border-bottom-left-radius:5px;
		-moz-border-radius-bottomleft:5px; 
		-webkit-border-bottom-left-radius:5px;
		border-bottom-right-radius:5px;
		-moz-border-radius-bottomright:5px;
		-webkit-border-bottom-right-radius:5px;
	border-top:none;
}

#branding {margin-bottom:12px;}

#logo {float: left; margin:52px 0 0 60px;}

div.row {width:100%; clear:both;}

table, tbody, tr, td { vertical-align: top; }

/* 3. Search and Utility links
------------------------------------------------ */
#utility {float:right; margin:40px 0 0 0;}
	#utility li {
		float:left;
		padding-left:10px;
		font-size:11px;
	}

#ctl00_search {
	float:right; 
	margin:10px 0 0 0; 
	clear:right;
	font-size:11px;
}
	#ctl00_search label {
		position:absolute;
		top:-9999px;
	}


/* 4. Navigation
------------------------------------------------ */
#main {margin:0 0 10px; clear:both; line-height:1.4em;}
	#main li {float:left; position:relative;}
		#main li a {
			display:block; 
			width:190px; 
			padding:10px 0; 
			background:#d2d2d2 url(/_cmn/images/css/menu-icons.png) 0 0 no-repeat; 
			border-right:1px solid #fff;
			border-bottom:0;
			color:#666;
			text-decoration:none;
			font-size:14px;
			font-weight:bold; 
			line-height:14px;
		}
			/* width and padding-left should total 214px; */
			#main li#nav-routes a 	{width:174px; padding-left:40px; background-position:2px 0;}
			/* width and padding-left should total 190px; */
			#main li#nav-fares a	{width:140px; padding-left:50px; background-position:-248px 0;}
			#main li#nav-howto a 	{width:134px; padding-left:56px; background-position:-457px 0;}
			/* width and padding-left should total 180px; */
			#main li#nav-programs a {width:120px; padding-left:60px; background-position:-718px 0;}
			/* width and padding-left should total 176px; */
			#main li#nav-about a 	{width:116px; padding-left:60px; background-position:-985px 0;}
			
			#main li a:hover,
			#main li.active a {
				color:#fff; 
				background-color:#3c6ea6;
			}
			
			#main li#nav-routes a:hover,
			#main li#nav-routes a:focus,
			#main li#nav-routes.active a	{background-position:2px -38px;}
			#main li#nav-fares a:hover,
			#main li#nav-fares a:focus,
			#main li#nav-fares.active a		{background-position:-248px -38px;}
			#main li#nav-howto a:hover,
			#main li#nav-howto a:focus,
			#main li#nav-howto.active a		{background-position:-457px -38px;}
			#main li#nav-programs a:hover,
			#main li#nav-programs a:focus,
			#main li#nav-programs.active a	{background-position:-718px -38px;}
			#main li#nav-about a:hover,
			#main li#nav-about a:focus,
			#main li#nav-about.active a	 	{background-position:-985px -38px;}
			
		#main li.first-nav-item a {
			border-top-left-radius:5px;
			-moz-border-radius-topleft:5px; 
			-webkit-border-top-left-radius:5px;
			border-bottom-left-radius:5px;
			-moz-border-radius-bottomleft:5px; 
			-webkit-border-bottom-left-radius:5px;
		}
		#main li.last-nav-item a {
			border-right:none; 
			border-top-right-radius:5px;
			-moz-border-radius-topright:5px; 
			-webkit-border-top-right-radius:5px;
			border-bottom-right-radius:5px;
			-moz-border-radius-bottomright:5px; 
			-webkit-border-bottom-right-radius:5px;
		}
		#main li span {
			width:35px;
			height:34px;
			display:block;
			text-indent:-9999px;
			position:absolute;
			top:0;
			background:#d2d2d2 url(/_cmn/images/css/menu-icons.png) -1236px 0 no-repeat;
			border-left:1px solid #888;
			background-color:#999;
			cursor:pointer;
		}
		#main li span:focus {
			background:#234a8d url(/_cmn/images/css/menu-icons.png) -1236px -38px no-repeat;
		}
			
			#main li.active span {
				background:#234a8d url(/_cmn/images/css/menu-icons.png) -1334px -38px no-repeat;}
			#main li.hover span {
				background:#234a8d url(/_cmn/images/css/menu-icons.png) -1236px -38px no-repeat;
			}
			#main li.hover span.hover-arrow {background:#234a8d url(/_cmn/images/css/menu-icons.png) -1287px -38px no-repeat}
			
			
			#main li#nav-routes span 	{left:178px;}
			#main li#nav-fares span		{left:154px;}
			#main li#nav-howto span 	{left:154px;}
			#main li#nav-programs span 	{left:144px;}
			#main li#nav-about span 	{left:141px; background-position:-1387px 0;}
			    #main li#nav-about.active span 	{background-position:-1483px -38px; }
			    #main li#nav-about.hover span 	{background-position:-1387px -38px;}
			    #main li#nav-about.hover span.hover-arrow {background-position:-1435px -38px;}
		 	
			/* Make route list fit overall width */
		    .column-1 {left:-8px; position:absolute; top:157px;}
		    .column-3 a {width:180px !important;}
		    .column-4 a {width:260px !important;}
				
/* Dropdowns */	
#main li div {
	display:none;
	position:absolute;
	top:34px;
	left:0;
	background-color:#fff;
	border:1px solid #999;
	padding:10px 10px 10px 0;
	z-index:9999;
	border:1px solid #999;
		border-bottom-left-radius:5px;
		-moz-border-radius-bottomleft:5px; 
		-webkit-border-bottom-left-radius:5px;
		border-bottom-right-radius:5px;
		-moz-border-radius-bottomright:5px;
		-webkit-border-bottom-right-radius:5px;
	border-top:none;
}
#main li div p {
	font-size:11px;
	padding:0 6px;
}

	#main li li {
		float:none;
		margin-bottom:1px;
	}
	#main ul.column,
	#main ul {
		float:left;
		display:inline;
		margin:0 7px;
	}
	#main ul.dropdown-second-level {
		border-bottom:1px dashed #999; 
		padding:10px 0 5px 0; 
		margin:-10px 0 10px 0;
		background-color:#fff;
	}
	#main ul.dropdown-second-level li a,
	#main ul.column li a {
		display:block;  
		background:none; 
		border-right:none;
		color:#4964c9;
		text-decoration:none;
		font-size:11px;
		font-weight:normal; 
		line-height:15px;
		float:none;
			border-radius:0;
			-webkit-border-radius:0;
			-moz-border-radius:0;
	}
	#main ul.dropdown-second-level li a {
		font-weight:bold;
	}
	#main li#nav-routes ul a,
	#main li#nav-fares ul a,
	#main li#nav-howto ul a,
	#main li#nav-programs ul a,
	#main li#nav-about ul a {
		padding:2px 0 1px 6px;
		margin:0;
		width:208px;
	}
		#main li#nav-routes ul a:hover,
		#main li#nav-fares ul a:hover,
		#main li#nav-howto ul a:hover,
		#main li#nav-programs ul a:hover,
		#main li#nav-about ul a:hover,
		#main li ul a:focus {
			background-color:#ccc;
		}
	#main li#nav-routes div {width:927px;}
	#main li#nav-fares div, 
	#main li#nav-howto div,
	#main li#nav-programs div,
	#main li#nav-about div {
		width:204px;
	}
	#main li#nav-about div {left:-40px;}
	
	
		
/* 5. Ankle and Footer
------------------------------------------------ */
#ankle {
	margin:50px 0 15px;
}
	#ankle h4 a {color:#333; border-bottom:0;}
	#ankle h4 a:hover {color:#0033cc; border-bottom:0;}
	#ankle ul {line-height:1.2em;}
	#ankle li {margin-bottom:6px;}
#ankle-socials,
#ankle-alerts,
#ankle-business,
#ankle-careers {
	float:left;
	width:187px;
	padding:0 25px;
	font-size:12px;
}

#ankle-socials {
	border-right:1px solid #c2c2c2;
}
	#ankle-socials h5 {font-size:12px; float:left; padding:0; margin:0;}
	#ankle-socials blockquote {
		width:140px;
		padding:0;
		background:none;
		border:none;
		float:left;
		font-size:11px;
		color:#666;
	}
	#ankle-socials ul {float:left; width:35px; margin-right:10px;}
	#ankle-socials ul li {
		margin:0 0 4px 0;
	}
	#ankle-socials ul a {
		display:block;
		width:35px;
		height:35px;
		background:#FFF url(/_cmn/images/css/social-network-icons.png) 0 0 no-repeat;
		text-indent:-9999px;
		overflow:hidden;
	}
		#ankle-socials ul li.twitter a {
			background-position:0 0;
		}
		#ankle-socials ul li.facebook a {
			background-position:0 -35px;			
		}
		#ankle-socials ul li.youtube a {
			background-position:0 -70px;			
		}
	
#ankle-alerts {border-right:1px solid #c2c2c2;}


#ankle-business {border-right:1px solid #c2c2c2;}
#ankle-careers {}

#footer {
	margin:0;
	padding-top:5px;
	font-size:11px;
	border-top:1px solid #d5d5d5;
}
	#footer span {
		float:left;
	}
	#footer ul {
		float:right;
	}
		#footer ul li {
			float:left;
			padding-right:8px;
		}
		

/* 6. Editor classes
------------------------------------------------ */
.roundcorners {
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}
.float-right {
	float:right;
	margin:0 0 15px 15px;
}
.float-left {
	float:left;
	margin:0 15px 15px 0;
}
.submit-button {
	padding:2px 4px 2px;
	border:1px solid #f8ba37;
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	background:#fbcc68;
	color:#666;
	font-size:11px;
	cursor:pointer;
}
.hide {display:none;}
.no-border {border:none;}
.call-to-action {
    width:150px;
    display:block;
    text-align:center;
    padding:2px 5px 2px;
	border:1px solid #666;
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
	background:#fbcc68;
	color:#666;
}
    .call-to-action:link,
    .call-to-action:visited {color:#fff; border:1px solid #666;}
.cta-red {background:#d32d36;}
.cta-green {background:#389170;}

table.content-table {margin:5px 0 20px 15px;}
	table.content-table td {border:1px solid #ccc; padding:2px 4px;}
	table.content-table	tr.even {background-color:#f1f1f1;}
.footnote {font-size:90%;}
.error {
	background-color:#ffe5e5;
	border:1px solid #e94e4e;
}
.success {
	background-color:#ceffce;
	border:1px solid #42e242;
}
.notice {
	background-color:#fefdcf;
	border:1px solid #e1df3b;
}
a.expand-image {}
/*a.expand-image img {
	width:50%;
	height:50%;
}*/

.watermark 
{
	color: #666;
}