/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Visit MBTA.com for full css 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
	margin: 0;
  	padding: 0;
}
form label {
	cursor: pointer;
}
form br { 
	clear: left; 
}
fieldset {
	border: none;
}
input, select  { 
	font-size: 100%;
} 

textarea {
	font-size: 15px;
}
input.checkbox, input.radio {
	float: left;
	vertical-align: text-bottom;
	margin-top: 0.3em;
	margin-right: 0.4em;
}
.alignLeft {
	float: left;
}
.alignRight {
	float: right;
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	General layout
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
/* for a reference on ems see http://www.clagnut.com/blog/348/ */
body {
	background-color: #C3C1AE;
}
#container {
	width: 100%;	
	margin: 0 auto;
	padding-left: 10px;
/*	background: transparent url(/images/main-bg-left.gif) top left repeat-y;  */
}
#main {	
	width: 100%;
	padding-right: 10px;
/*	background: #FFF url(/images/main-bg-right.gif) top right repeat-y;*/
}


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	General styles 
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
p {  /*font-size needs to be specified on the immediate element level, not on the containing element level!! */
	font-size: 1.1em;
}
a img {
	border: none;
}
br.clearit {
	clear: both;
	line-height: 0;
}
p.pdfnote {
	font-size: 1em;
}
/*img {
	font-size: 10px !important;
}
This would be nice (as a safety net to make sure all images are displayed at their correct dimensions, 
but it causes the CTRL+- thing to not work in IE6.
*/


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Styles to hide header text for full CSS & images, but will still be accessible
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
h1 span,
h3 span,
#schedules_and_interactive_maps ul li a span,
#charlie_main-content a.callout span,
#charlie_main-side a span { 
	position: absolute;
	left: -5000em;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	/*text-indent: -9999em#; - this is needed for safari but needs to go at the absolute end of the CSS file, after everything */
}
h1 img,
h3 img,
#schedules_and_interactive_maps ul li a img {
	position: absolute; /* causing gmaps station name hover to display underneath service alerts PNG */
	border: none;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Header layout & styles
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#header {


/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	float: left;
	min-height: 68px;
	width: 97.8em;
	min-width: 730px;
	background: #FFF url(/images/header-bg.gif) bottom left repeat-x;
	border-bottom: solid 0.4em #3F3F3F;
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

}
	#header h1 {
		float: left;
		width: 27.9em;
		min-width: 193px;
		height: 5.2em;
		min-height: 35px;
		margin: 0.8em 0 0 0.8em;
		border: none;
		font-size: 1em;
	}
		#header h1 img {
			width: 27.9em;
			min-width: 193px;
			height: 5.2em;
			min-height: 35px;
			font-size: 10px;
		}
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	#utility {
		list-style: none;
		float: right;
		margin: 0.5em 1em 0 0;
	}
		#utility li {
			float: left;
			padding: 0 0.5em 0 0.5em;
			border-left: solid 0.1em #999999;
		}
		#utility li img {
			float: left;
			margin-right: 0.2em;
		}
		#utility li.first {
			padding-left: 0;
			border-left: none;
		}
			#utility li a {
				text-decoration: none;
				color: #000000;
			}
			#utility li a:hover {
				color: #999999;
				text-decoration: underline;
			}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
	#utility {
		list-style: none;
		float: left;
		margin: 0.5em 1em 0 0;
	}
		#utility li {
			float: left;
			padding: 0 0.5em 0 0.5em;
			border-left: solid 0.1em #999999;
		}
		#utility li img {
			float: left;
			margin-right: 0.2em;
		}
		#utility li.first {
			padding-left: 0;
			border-left: none;
		}
			#utility li a {
				text-decoration: none;
				color: #000000;
			}
			#utility li a:hover {
				color: #999999;
				text-decoration: underline;
			}

	#main-navigation,
	#main-navigation ul {
		list-style: none;
	}
	#main-navigation {
		margin: 1.2em 0 0 0.8em;
		width: 83%;
		clear: left;
		/* the next two properties are necessary so nav items will overlay on top of any google map implementation */
		position: relative;
		z-index: 10;
	}	
		#main-navigation img.dot {
			width: 3.5em;
			height: 3.5em;
			position: absolute; 
			margin-top: 0.6em;	
		}		
		#main-navigation a {
			display: block;
			text-decoration: none;
			font-size: 1.1em;
			color: #000000;
			padding: 0.5em 0.5em 0.5em 0.5em 0.5em 0.5em;
			/* safari/webkit browsers only - will remove the extra weight that's added by OS X's native anti-aliasing */
			text-shadow: 0 0 0 #000;
		}		
		#main-navigation a:hover,
		#main-navigation li:hover a,
		#main-navigation li.sfhover a,
		#main-navigation li.on a   {
			color: #FFF;
		}		
		#main-navigation li {
			float: left;
			/*width: 12em;*/			
			margin: 0 3.8em 0 0;
		}
		#main-navigation li:hover,
		#main-navigation li.sfhover {
			/* the following (seemingly) fixes sticky suckerfish drop-down menus in IE7 */
			position: static;
		}
			#main-navigation li ul {
				position: absolute;
				left: -99999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
				margin: 0;
				border-top: solid 0.1em #669999;
				width: 12em;
			}
			#main-navigation li ul img {
				width: 1em;
				height: 1em;
				position: absolute; 
				margin-top: -0.3em;	
				margin-top: -0.7em;		
				left: 0;
			}			
			#main-navigation li ul li {
				clear: both;
				margin: 0;
			}
			#main-navigation li ul a {
				background-color: transparent !important;
				background-position: top left;
				background-repeat: repeat;
				color: #FFF;
				border-bottom: solid 1px #B4CDCD;
				float: left;
				width: 10em; /* if want to set a specific, universal width for all subnavs set this */
				margin: 0;
				padding: 0.4em;
			}		
			#main-navigation li ul a:hover {
				background: none !important;
				text-decoration: bold;
			font-size: 1.4em;
				color: #FFF;
			}
			/* 
--------------------------------------------------------------------------------------------------------------
				MENU SPECIFIC BACKGROUND COLORS				
				* Unfortunately, because IE cannot call the pseudo-class :hover on the <li> elements it was necessary
				to give each main menu <li> an id so that we could use the sfhover script to solve the IE pseudo-class
				problem (it does so by temporarily setting a class to the <li>) and still allow the pseudo-class to work 					  when the subnav is active. *
			-------------------------------------------------------------------------------------------------------------- */
		
	/* Schedules & Maps */
			#nav-schedules_and_maps:hover	a,		
			#nav-schedules_and_maps.on a					{ background-color: #4B67A7; }
			#nav-schedules_and_maps ul a					{ background-image: url(/images/subnav-bg-schedules_and_maps.png) !important; }
			#nav-schedules_and_maps ul li a:hover		{ background-color: #283474 !important; }


	
			/* Fares * Passes */
			/*#nav-fares_and_passes a:hover,*/
			#nav-fares_and_passes:hover a,
			#nav-fares_and_passes.sfhover a,
			#nav-fares_and_passes.on a						{ background-color: #6AB71D; }
			#nav-fares_and_passes ul a						{ background-image: url(/images/subnav-bg-fares_and_passes.png) !important; }
			#nav-fares_and_passes ul li a:hover,
			#nav-fares_and_passes.sfhover ul a:hover	{ background-color: #358B13 !important; }


			
			/* Rider Tools */
			#nav-rider_tools:hover a,
			#nav-rider_tools.sfhover a,
			#nav-rider_tools.on a							{ background-color: #C80000; }
			#nav-rider_tools ul a							{ background-image: url(/images/subnav-bg-rider_tools.png) !important; }
			#nav-rider_tools ul li a:hover,
			#nav-rider_tools.sfhover ul a:hover			{ background-color: #A10606 !important; }
			
			/* Riding The T */
			#nav-riding_the_t:hover a,
			#nav-riding_the_t.sfhover a,
			#nav-riding_the_t.on a							{ background-color: #FF6600; }
			#nav-riding_the_t ul a							{ background-image: url(/images/subnav-bg-riding_the_t.png) !important; }
			#nav-riding_the_t ul li a:hover,
			#nav-riding_the_t.sfhover ul a:hover		{ background-color: #EC3306 !important; }
			
			/* About the okto */
			#nav-about_the_mbta:hover a,
			#nav-about_the_mbta.sfhover a,
			#nav-about_the_mbta.on a,
			body.about_the_mbta #nav-about_the_mbta a	{ background-color: #820675; color: #FFF; }
			#nav-about_the_mbta ul a						{ background-image: url(/images/subnav-bg-about_the_mbta.png) !important; }
			#nav-about_the_mbta ul li a:hover,
			#nav-about_the_mbta.sfhover ul a:hover		{ background-color: #43093A !important; }
			
			/* Customer Service */
			#nav-customer_support:hover a,
			#nav-customer_support.sfhover a,
			#nav-customer_support.on a						{ background-color: #8C8786; }
			#nav-customer_support ul a						{ background-image: url(/images/subnav-bg-customer_support.png) !important; }
			#nav-customer_support ul li a:hover,
			#nav-customer_support.sfhover ul a:hover	{ background-color: #504948 !important; }				



				
		#main-navigation li:hover ul, #main-navigation li.sfhover ul { /* lists nested under hovered list items */
			left: auto;
		}

/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
	Safari CSS Hacks - We don't like it either THIS NEEDS TO BE AT THE END!!!
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
#search-main {
	margin-top: 0#;
}
#main-navigation img.dot {
	top: 4em#;
}
/* Styles to hide header text for full CSS & images, but will still be accessible */
h1 span,
h3 span,
#schedules_and_interactive_maps ul li a span { 
	text-indent: -9999em#;
}


.hidden 
{
position:absolute; 
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}