/*  Color Scheme
Dark Blue  	004990
Light Blue  bcd6f0
Grey		999b9e
Light Grey	c5c6c8
Red			bf2f37
*/

body {
	background: url(http://www.nfta.com/metro/img/bg-body.jpg) repeat-x top;
	margin:0;
	padding:0;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
	width:100%; 
	height:100%;
    font-size:62.5%; /* 16px × 62.5% = 10px */
	border:0;			/* This removes the border around the viewport in old versions of IE */
	min-width:800px;	/* Minimum width of layout - does not work in old versions of Internet Explorer */
	font-size:.9em;  /*  = 9px */ 
}

#all {
	width:999px;
	background: url(http://www.nfta.com/metro/img/bg-all.png) repeat-y;
	margin:0 auto;
}

#header {
	float:left;
	width:969px;
	margin:0 15px;
}

#logo {float:left;  text-align:left; width:720px; margin-left:15px; }


/* ===================  NAVIGATION  ====================  */


#navigation
{
	background:#004990 url(http://www.nfta.com/metro/img/bg-navShort.jpg) repeat-x top;
	height:48px;
	width:969px;
	margin:0 15px;
	
}

#navigation ul {
	list-style:none;
	float:left; padding:0; margin:0;
	position:relative;
	z-index:1000;
	padding:0 12px; 
	margin:0;
	width:945px;
}

.navLink { display:none;}


#navigation ul li 
{
    height:44px; 
	float:left;
}

#navigation ul li a
{
    float:left;
    height:44px;    
}


#navigation ul li ul {
	display:none;
	list-style:none; 
	width:924px;
	min-height:166px;
	position:absolute; 
	top:44px; 
	left:0;
	padding:20px 0 20px 45px;
	margin:0;
	background:#004990;
	z-index:10000;
	font-size:.9em; 
	font-weight:900;
	filter:alpha(opacity=90);
	-moz-opacity:0.9;
	-khtml-opacity: 0.9;
	opacity: 0.9;	
}

/* Watermark */
#navigation ul li ul#ulHome {background:#004990 url(../img/ulHome.png) no-repeat bottom left;}
#navigation ul li ul#ulAlerts {background:#004990 url(../img/ulAlerts.png) no-repeat bottom left; }
#navigation ul li ul#ulSchedules {background:#004990 url(../img/ulschedules.png) no-repeat bottom left; }
#navigation ul li ul#ulMaps {background:#004990 url(../img/ulMaps.png) no-repeat bottom left; }
#navigation ul li ul#ulParkRide {background:#004990 url(../img/ulParkRide.png) no-repeat bottom left; }
#navigation ul li ul#ulHowToRide {background:#004990 url(../img/ulHowToRide.png) no-repeat bottom left; }
#navigation ul li ul#ulSpecialServices {background:#004990 url(../img/ulSpecialServices.png) no-repeat bottom left; }
#navigation ul li ul#ulTripPlanner {background:#004990 url(../img/ulTripPlanner.png) no-repeat bottom left; }

li > ul {
	top: auto;
	left: auto;
}


#navigation ul li:hover ul, #navigation ul li.over ul { display: block;}

#navigation ul li ul li { 
	padding:0;
	margin:0;
	height:34px;
	text-align:left;
	/* background:#004990; */
	width:221px;
}
 
#navigation ul li ul li a, #navigation ul li ul li a:link, #navigation ul li ul li a:visited, #navigation ul li ul li a:hover, #navigation ul li ul li a:active { 
	display:block; 
	padding:5px 5px 5px 10px;
	margin:0;
	color:#fff;
	text-decoration:none;
	background: url(../img/bg-navLink.png) no-repeat;
	width:196px;
} 

#navigation ul li ul li a:hover { 
	background: url(../img/bg-navHover.png) no-repeat;   
} 

#navigation ul li ul li:hover, #navigation ul li ul li.over { 
	color:red;
}

/* =============== Home ====================*/
#navigation ul li a.home, #navigation ul li a.home:link, #navigation ul li a.home:visited, 
#navigation ul li a.home:active
{
    width:75px;
	background: url(../img/primaryNav.gif) 0px 0px no-repeat;   
}

#navigation ul li a.home:hover, #pageHome #navigation ul li a.home:hover
{
    width:75px;
	background: url(../img/primaryNav.gif) 0px -88px no-repeat;   
}

#pageHome #navigation ul li a.home
{
    width:75px;
	background: url(../img/primaryNav.gif) 0px -44px no-repeat;   
}



/* ==================== Alerts ====================*/
#navigation ul  li a.alerts, #navigation ul  li a.alerts:link, #navigation ul  li a.alerts:visited, 
#navigation ul  li a.alerts:active
{
    width:65px;
	background: url(../img/primaryNav.gif) -75px 0px no-repeat;   
}

#navigation ul  li a.alerts:hover, #pageAlerts #navigation ul  li a.alerts:hover
{
    width:65px;
	background: url(../img/primaryNav.gif) -75px -88px no-repeat;   
}

#pageAlerts #navigation ul  li a.alerts
{
    width:65px;
	background: url(../img/primaryNav.gif) -75px -44px no-repeat;   
}


/*  ====================Schedules ====================*/
#navigation ul  li a.schedules, #navigation ul  li a.schedules:link, #navigation ul  li a.schedules:visited, #navigation ul  li a.schedules:active
{
    width:158px;
	background: url(../img/primaryNav.gif) -140px 0px no-repeat;   
}

#navigation ul  li a.schedules:hover, #pageSchedules #navigation ul  li a.schedules:hover
{
    width:158px;
	background: url(../img/primaryNav.gif) -140px -88px no-repeat;   
}

#pageSchedules #navigation ul  li a.schedules
{
    width:158px;
	background: url(../img/primaryNav.gif) -140px -44px no-repeat;   
}

/* ==================== Maps==================== */
#navigation ul  li a.maps, #navigation ul  li a.maps:link, #navigation ul  li a.maps:visited, #navigation ul  li a.maps:active
{
    width:69px;
	background: url(../img/primaryNav.gif) -298px 0px no-repeat;   
}

#navigation ul  li a.maps:hover, #pageMaps #navigation ul  li a.maps:hover
{
    width:69px;
	background: url(../img/primaryNav.gif) -298px -88px no-repeat;   
}

#pageMaps #navigation ul  li a.maps
{
    width:69px;
	background: url(../img/primaryNav.gif) -298px -44px no-repeat;   
}

/* ==================== Park&Ride ====================*/
#navigation ul  li.parkride a, #navigation ul  li a.parkride:link, #navigation ul  li a.parkride:visited, #navigation ul  li a.parkride:active
{
    width:124px;
	background: url(../img/primaryNav.gif) -367px 0px no-repeat;   
}

#navigation ul  li a.parkride:hover, #pageParkRide #navigation ul  li a.parkride:hover
{
    width:124px;
	background: url(../img/primaryNav.gif) -367px -88px no-repeat;   
}

#pageParkRide #navigation ul  li a.parkride
{
    width:124px;
	background: url(../img/primaryNav.gif) -367px -44px no-repeat;   
}


/* ==================== HowToRide ====================*/
#navigation ul  li a.howtoride, #navigation ul  li a.howtoride:link, #navigation ul  li a.howtoride:visited, #navigation ul  li a.howtoride:active
{
    width:124px;
	background: url(../img/primaryNav.gif) -491px 0px no-repeat;   
}

#navigation ul  li a.howtoride:hover, #pageHowToRide #navigation ul  li a.howtoride:hover
{
    width:124px;
	background: url(../img/primaryNav.gif) -491px -88px no-repeat;   
}

#pageHowToRide #navigation ul  li a.howtoride
{
    width:124px;
	background: url(../img/primaryNav.gif) -491px -44px no-repeat;   
}

/*  ====================SpecialNeeds ====================*/
#navigation ul  li a.specialneeds, #navigation ul  li a.specialneeds:link, #navigation ul  li a.specialneeds:visited, #navigation ul  li a.specialneeds:active
{
    width:131px;
	background: url(../img/primaryNav.gif) -615px 0px no-repeat;   
}

#navigation ul  li a.specialneeds:hover, #pageSpecialNeeds #navigation ul  li a.specialneeds:hover
{
    width:131px;
	background: url(../img/primaryNav.gif) -615px -88px no-repeat;   
}

#pageSpecialNeeds #navigation ul  li a.specialneeds
{
    width:131px;
	background: url(../img/primaryNav.gif) -615px -44px no-repeat;   
}

/*  ====================TripPlanner ====================*/
#navigation ul  li a.tripplanner, #navigation ul  li a.tripplanner:link, #navigation ul  li a.tripplanner:visited, #navigation ul  li a.tripplanner:active
{
    width:130px;
	background: url(../img/primaryNav.gif) -746px 0px no-repeat;   
}

#navigation ul  li a.tripplanner:hover, #pageTripPlanner #navigation ul  li a.tripplanner:hover
{
    width:130px;
	background: url(../img/primaryNav.gif) -746px -88px no-repeat;   
}

#pageTripPlanner #navigation ul  li a.tripplanner
{
    width:130px;
	background: url(../img/primaryNav.gif) -746px -44px no-repeat;   
}




/*  ===============  END NAVIGATION  ========================*/

#rotator {
	clear:both;
	padding-top:1px;
	width:969px;
	margin:0 15px;
}

#container {
	float:left;
	text-align:left;
	width:939px;
	margin:0 30px;
		/* background: url(http://www.nfta.com/metro/img/bg-main.gif) repeat-y; */
}


#main {
	float:left;
	width:609px;
	padding-top:10px;
	padding-right:10px;
}

#sideBar {
	float:left;
	text-align:center;
	width:310px;
	padding:5px;
	background:#fafafa;
}


.red {color:#bf2f37 }

#footer { font-size:.7em; }

#footer ul {padding:0 0 1em 0; margin:0;}

#footer li {
display:inline;
margin:0;
padding:0 3px;
border:0;
color:#003366;
list-style-type:none;
}

#footer a {
color:#003366; 
}

#footer a:hover {
color:#000; 
}


/*  ===============  General  ====================    */
img {border:0;}


/* =============== Headings  ======================   */

h1 {
font-weight:900;
font-size:1.5em;
}

h2 {
font-weight:900;
font-size:1.4em;
}


h2.routeCat { padding:0; margin:10px 0 0 0; font-style:italic; color:#6c6c6c;}

h3 {
font-weight:900;
font-size:1.3em;
}

h4 {
font-weight:900;
font-size:1.2em;
}

h5 {
font-weight:900;
font-size:1.1em;
}

.small {font-size:.8em;}

.newsheader {
border:0;
border-bottom:1px solid #999;
color:#003366;
padding:12px 0 0 0;
margin-bottom:0;
}

.newsheader2 {
margin:0 72px 0 0;
padding:0;
border:0;
border-bottom:1px solid #999;
color:#003366;
}

.greyheader {
height:23px;
line-height:23px;
padding-left:5px;
border:1px solid #999;
background:#EAEAEA;
}

.clear {clear:both;}
.imgPadding {padding:10px;}

/*  =============  Routes ================  */

/* .routeRow a, .routeRow a:link, .routeRow a:visited, .routeRow a:hover, .routeRow a:active
{
	text-decoration:none;
	color:#004990;
	padding:3px;
	
}
 
.routeRow a:hover {background-color:#bcd6f0;} */

a.sign,a.sign:link, a.sign:visited, a.sign:hover, a.sign:active 
{
	color:#000;
	padding:8px 8px 8px 22px;
	line-height:1.8em;
	text-decoration:none;
	background: url(../img/signIcon.gif) no-repeat left center;
}

a.sign:hover 
{
	border:1px solid #999;
	background-color:#bcd6f0;
	color:#004990;
}

a.sign:visited 
{
	color:#5c5c5c;  
}


/* ============ Alerts ====================  */

#alertsbox {
width:100px;
margin:0;
padding:0 0 10px 0;
border:0;
background:#EDC9CC;
font-size:9px;
text-align:left;
}

#alertsbox h4 {
height:18px;
line-height:18px;
margin:0 0 5px 0;
padding:0 5px;
border:0;
border-top:1px solid #E7B4B8;
border-bottom:1px solid #811B24;
background:#B92733;
font-size:14px;
color:#FFF;
text-align:center;
}

#alertsbox p {
padding:5px;
}

#alertsbox ul {
margin:0 0 0 18px;
padding:0 5px;
border:0;
list-style-type:square;
}



/*======================= Form fields ==============================*/

.textarea_large {
width:360px;
margin:0 0 5px 0;
border:1px solid #666;
padding:2px;
background:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:small;
color:#000;
}

.textfield_small, .textfield_medium, .textfield_large, .textfield_xlarge {
margin:0 0 5px 0;
border:1px solid #666;
padding:2px;
background:#FFF;
font-size:small;
color:#000;
vertical-align:middle;
}

.textfield_small {
width:216px;
}

.textfield_medium {
width:288px;
}

.textfield_large {
width:360px;
}

.textfield_xlarge {
width:432px;
}


ul#icon
{
list-style-type:none;
padding:20px;
}

ul#icon li
{
background: url(../img/li-icon.gif) no-repeat left 4px;
margin:0 0 8px 0;
min-height:10px;
padding:0 0 0 60px;
}

#feature {
	background:#eaeaea;

	border:4px double #fff;
	padding:5px 10px;
	margin:10px;
}

#feature2 {
	background:#fff;
	border:0;
	padding:5px 10px;
	margin:10px;
}

fieldset.red { color:#000; border:1px solid #710505; margin:5px 0; padding:5px; }

legend.red { color:#710505; font-weight:900; font-size:1.2em;}

fieldset.blue { color:#000; border:1px solid #041148;  margin:5px 0; padding:5px; }

legend.blue { color:#041148; font-weight:900; font-size:1.2em;}

fieldset.yellow { color:#000; border:1px solid #a9811d;  margin:5px 0; padding:5px; }

legend.yellow { color:#a9811d; font-weight:900; font-size:1.2em;}



.paleBlue { background:#bfc8ee; }

.lightGrey { background:#eaeaea; }

.darkGrey { background:#58585a; color:white; }

.darkblue { background:#041148; color:white; }

/*  ============  Park Ride Map ================ */
a.gmarker, a.gmarker:link, a.gmarker:visited, a.gmarker:hover, a.gmarker:active  {
	color:#bf2f37;
	text-decoration:none;
	line-height:2em;
	margin:7px 3px;
	border-bottom:1px solid #737476;
}

a.gmarker:hover {
	color:#737476;
	border-bottom:1px solid #737476;

}


/*  HOME PAGE EVENTS */


#events {float:left;}

.event {
	padding:12px; 
	background:#f8f8f8;
	border:double 4px #dddddd;
	font-size:0.8em;
	width:220px;
	float:left;
	margin:15px;
	height:190px;
}

/* NF Color Coded Routes */
.colors {
	width:260px; 
	padding:5px; 
	margin:3px; 
	border:1px solid #000;
}

.colors a, .colors a:link, .colors a:visited, .colors a:active, .colors a:hover {
	color:#000;
	text-decoration:none;
}

.colors a:hover { color:#fff; }