/* CSS formatting for Metro Transit */

#main,
#main #nav_menu {
	border-color: #333333;
}

/* Change to reflect Metro Footer */
#main #content {
	padding-bottom: 0;	
}

ul#sub_nav li {
	background-color: #FFFFFF;	
}

ul#sub_nav li a { 
	height: 28px;
	line-height: 28px;
	color: #000000; 
	background-color: #EEEEEE; 
	text-transform: uppercase; 
}

ul#sub_nav li a:hover {
	color: #FFFFFF; 
	background-color: #082487; 
}

ul#sub_nav li.home { width: 62px;}
ul#sub_nav li.home a { width: 50px;}

ul#sub_nav li.planyourtrip {width: 118px;}
ul#sub_nav li.planyourtrip a { width: 106px; }
ul#sub_nav li.planyourtrip ul, ul#sub_nav li.planyourtrip li { width: 130px; }
ul#sub_nav li.planyourtrip li a { width: 120px; }

ul#sub_nav li.schedules { width: 100px; line-height: normal; }
ul#sub_nav li.schedules a { width: 88px; line-height: normal; }
ul#sub_nav li.schedules ul, ul#sub_nav li.schedules li { width: 155px; }
ul#sub_nav li.schedules li a { width: 145px; }

ul#sub_nav li.busstopdepartures { width: 105px; line-height: normal; }
ul#sub_nav li.busstopdepartures a { width: 93px; line-height: normal; }

ul#sub_nav li.detours { width: 80px; }
ul#sub_nav li.detours a { width: 68px; }
ul#sub_nav li.detours ul, ul#sub_nav li.detours li { width: 123px; }
ul#sub_nav li.detours li a { width: 113px; }

ul#sub_nav li.fares { width: 110px; }
ul#sub_nav li.fares a { width: 98px;}
ul#sub_nav li.fares ul, ul#sub_nav li.fares li { width: 145px; }
ul#sub_nav li.fares li a { width: 135px; }

ul#sub_nav li.howtoride { width: 105px;}
ul#sub_nav li.howtoride a { width: 93px; }
ul#sub_nav li.howtoride ul, ul#sub_nav li.howtoride li { width: 143px; }
ul#sub_nav li.howtoride li a { width: 133px; }

ul#sub_nav li.paratransit { width: 105px;}
ul#sub_nav li.paratransit a { width: 93px; }
ul#sub_nav li.paratransit ul, ul#sub_nav li.paratransit li { width: 140px; }
ul#sub_nav li.paratransit li a { width: 130px; }

ul#sub_nav li.about { width: 80px;}
ul#sub_nav li.about a { width: 68px; }
ul#sub_nav li.about ul, ul#sub_nav li.about li { width: 133px; }
ul#sub_nav li.about li a { width: 123px; }

ul#sub_nav li.contact { width: 95px;}
ul#sub_nav li.contact a { width: 83px; }
ul#sub_nav li.contact ul, ul#sub_nav li.contact li { width: 123px; }
ul#sub_nav li.contact li a { width: 113px; }

/* Metro Footer message at the bottom of content section of all pages */
#footerMetro {
	background-color: #666666;
	color: #FFFFFF;
	margin: 0;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: bold;
	clear: both;
}
#footerMetro a {
	color: #FFFFFF;
}

/***********************************
   		BANNER IMAGE OVERLAY
************************************/
.columnSingle div.banner_overlay { background: url(../metro/images/bannerSingle.jpg) no-repeat 3px 3px; }
.columnDouble div.banner_overlay { background: url(../metro/images/bannerDouble.jpg) top left no-repeat; }
.columnTriple div.banner_overlay { background: url(../metro/images/bannerTriple.jpg) top left no-repeat; }
.columnFull div.banner_overlay { background: url(../metro/images/bannerFull.jpg) top left no-repeat; }

.columnSingle div.banner_overlay_alert { background: url(../metro/images/bannerSingleAlert.jpg) no-repeat 3px 3px; }
.columnFull div.banner_overlay_yellow { background: url(../metro/images/bannerFullYellow.jpg) top left no-repeat; }


/* Gray text ad link */
.textad {
	border: 1px solid #CCCCCC;
	padding: 3px;
	margin-bottom: 12px;
}
.textad a {
	display: block;
	background-color: #AAAAAA; 
	text-align: center; 
	padding: 5px 0;
	font-family: Trebuchet MS; 
	font-size: 14px; 
	font-weight: bold; 
	color: #FFFFFF; 
	text-decoration: none;
}


.title_gray {
	margin: 0;
	margin-bottom: 5px;
	padding: 1px;
	padding-left: 3px;
	background-color:#bbbbbb;
	color:#ffffff;
	text-transform:uppercase;
	font: bold 14px Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

/***********************************
   HIGHLIGHTS (FEATURED VIDEOS)
************************************/

.highlights .highlights_content { height: 140px; }

.highlights ul, .highlights li, .columnDouble .jcarousel-clip-horizontal, .columnDouble .jcarousel-item { height: 105px; }

.highlights h2 a {
	text-decoration: none;
	color: #000000;
	font-family: "Trebuchet MS";
}

.more {
	margin-top: 6px;
	text-align: right;
}
.more a {
	text-decoration: none;
	font-size: 11px;
	color: #336699;
	font-weight: bold;
	text-transform: lowercase;
}
.more a:hover {
	text-decoration: underline;
}

/* Print Schedules link styles for schedules section */
a.print_link {
	display: block;
	padding: 5px 8px;
	border: 1px solid #333333;
	font-size: 12px;
	font-family: Verdana;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	color: #082487;
	background-color: #EEEEEE;
	width: 120px;
	float: right;
}

a.print_link:hover {
	color: #FFFFFF;
	background-color: #082487;
}

/* Image with border within main content boxes */
.outline_box_banner img.border {
	border: 1px solid #CCCCCC;	
}


/***********************************
  ERRORS
************************************/
div.errors {
	padding: 10px;
	margin: 0 0 12px 0;
}

div.errors { border: 1px solid #CC0000; background-color: #FFEEEE; }

div.errors ul {
	padding: 0 0 0 25px;
	margin: 0;
	color: #000000;
}

div.errors h2 {
	font-family: "Trebuchet MS";
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	margin: 0px 0 0 0;
	padding: 0;
}