@charset "utf-8";
/* CSS Document */

/* Color palette:  
darkest grey: #4c4c4c
dark grey: #62656b
middle grey: #818181
light grey (text): #c6c6c6
lightest grey: #d4d4d3
*/

/* --------------------------------------------
	RESET DEFAULT ELEMENT CSS SETTINGS
-------------------------------------------- */
html,body{
	padding:0px; margin:0px;	
}
h1,h2,h3,h4,h5{
	font-weight:normal;
}
table, th, tr, td{
	border-collapse:collapse; border:0px; padding:0px; text-align:left; vertical-align:top;
}
a { 
	text-decoration: none; color:#c6c6c6;
}
a:hover, a:focus { 
	text-decoration: none;
}
ul{
	margin:0px; padding:0px;	
}
img{
	border:0px;
}
#dialog, .stopPopupBody
{
	background:#62656b url(images/noiseBG.jpg) repeat;
/*
*/
	}
/* --------------------------------------------
	GLOBAL CLASSES
-------------------------------------------- */
.clear { 
    clear: both; 
}
.downArrow{
	width:37px;
	height:37px;
	background:url(images/downButton_sprite.png) no-repeat 0px -37px;
}
.upArrow{
	width:37px;
	height:37px;
	background:url(images/upButton_sprite.png) no-repeat 0px 0px;
}
.leftArrow{
	width:37px;
	height:37px;
	background:url(images/leftButton_sprite.png) no-repeat 0px 0px;
}
.rightArrow{
	width:37px;
	height:37px;
	background:url(images/rightButton_sprite.png) no-repeat -37px 0px;
}
.halfColLeft{
	width:48%;
	margin:0px 2% 0px 0px;
	float:left;
}
.halfColRight{
	width:48%;
	margin:0px 0px 0px 2%;
	float:right;
}
.thirdColLeft{
	width:31%;
	margin:0px 3% 0px 0px;
	float:left;
}
.thirdColCenter{
	width:31%;
	float:left;
}
.thirdColRight{
	width:31%;
	margin:0px 0px 0px 3%;
	float:right;
}
.twoThirdsColLeft{
	width:62%;
	margin:0px 3% 0px 0px;
	float:left;
}
.twoThirdsColRight{
	width:66%;
	margin:0px 0px 0px 3%;
	float:right;
}
.overlay{
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:absolute;
	z-index:1001;
	display:none;
}


/* --------------------------------------------
	LAYOUT SECTIONS AND STYLES
-------------------------------------------- */

html, body {
	text-align: left; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #c6c6c6; height: 100%;
}
body{
	background:#4c4c4c url(images/bodyBGPattern.gif) repeat;
	position:relative;
	height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
}
.pageWrapper{
	
}

/*
 Top Bar, Nav, socialBar
---------------------------------------------------*/
header{
	width:100%;
	min-height:100px;
}
header h1{
	float:left;
	color:white;
	padding-left:310px;
	font-size:1.7em;
	margin:12px 0px 0px;
}
.clientLogo{
	min-width:235px; min-height:67px;
	border:7px solid #818181;
	background:white;
	margin-left:20px;
	padding:10px;
	border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; -webkit-border-bottom-left-radius:20px;
	border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; -webkit-border-bottom-right-radius:20px;
	box-shadow: 0px 0px 12px -3px #000;
	-webkit-box-shadow: 0px 0px 12px -3px #000;
	position:absolute;
	top:-8px;
	z-index:200;
	text-align:center;
	display: table-cell; vertical-align: middle;
}
.clientLogo img{
	max-width:222px; max-height:74px;
}
.clientLogo a{
	display:block;	
}
.routeNavBtn, .navMenuBtn{ display:none; }
nav{
	float:right;
}
nav ul{
	list-style-type: none;
	float:right;
}
nav ul li{
	float: left; 
	height:56px;
	text-align:center;
	padding:0px;
}
nav ul li:hover{
	background:url(images/navDarkBG.gif) repeat;
}
nav ul li a{
	display:block;
	padding:0px 15px;
	line-height:56px;
	background:url(images/verticalGroove_dark.gif) repeat-y left;
}
nav ul li a:hover{
	text-decoration:none;
}
.socialBar{
	min-height:40px;
	width:100%;
	background:#d4d4d3;
	border-top:3px white solid; border-bottom:3px white solid;
	box-shadow: 0px 0px 7px -1px #000;
	-webkit-box-shadow: 0px 0px 7px -1px #000;
	position:relative;
	z-index:100;
}
.socialContent{
	overflow: hidden;
    position: relative;
    width: 100%;
}
.socialContent .twitterLogo{
	float:left;
	width:50px;
	height:42px;
	background:url(images/twitterTicker.jpg) no-repeat left center;	
	margin-left:380px;
}
.socialContent .twitterTickerWrapper{
	float:left;
	/*border-left:1px solid #818181;*/
	margin:5px 8px 5px 306px;
	/*color:#818181;*/
	min-height:29px;
}
.socialContent .twitterTickerWrapper ul{
	padding:0px;
	margin-left:0px;
	list-style:none;
	list-style-image:url(images/socialBullet.png);
	list-style-position:inside;
	font-size:.8em;
}
.socialContent .twitterTickerWrapper ul li{
	padding:1px;
}
.socialContent .socialLinks{
	float:right;
	/*background:#969696;*/
	padding:0px 5px;
	display:block;
	height: 100%;
    position: absolute;
    right: 0;
}
.socialContent .socialLinks img{
	float:left;
	margin:6px;
}

/*
 Main Area, Content
--------------------------------------------------*/
.content{
	width:100%;
	height:100%;
	position:relative;
	padding:0px;
	padding-bottom:41px;
	overflow:hidden;
}

/*
 Menu
--------------------------------------------------*/
#menu{
	min-width:220px;
	background:#62656b url(images/noiseBG.jpg) repeat;
	box-shadow: 0px 0px 7px -1px #000;
	-webkit-box-shadow: 0px 0px 7px -1px #000;
	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;
	position:absolute;
	top:0px;
	z-index:50;
	margin-left:43px;
}
#menuButton{
	height:34px;
	width:100%;
	padding:10px 0px;
	margin:0px;
	background:url(images/wideHorizontalGroove.gif) repeat-x top;
	border:none;
	cursor:pointer;
}
#menuButton .downArrow, #menuButton .upArrow{
	float:left;
	margin:0px 10px;
}
#menuButton h1{
	margin:2px 0px;
	padding:3px 10px 0px 57px;
	font-size:1.8em;
}
#routes{
	max-height:390px;
	overflow:auto;
}
#routes ul{
	list-style-type: none;
}
#routes ul li{ 
	min-height:34px;
	padding:6px 0px 0px 0px;
	background:url(images/wideHorizontalGroove.gif) repeat-x top;
}
#routes .routeHeader{
	min-height:24px;
	padding:5px 35px 5px 35px;
	font-size:1.2em;
	cursor:pointer;
	line-height:1.4em;
	position:relative;
}
.routeInfo
{
	float:right;
	height:32px;
	width:32px;
	position:absolute;
	top:0px; right:0px;
}
#routes .routeSubscript{ font-size:.8em; }
#routes div.fakeCheckbox{
	width:22px; height:22px;
	background:url(images/fakeCheckboxBG_sprite.png) no-repeat;
	position:absolute;
	left:0px; top:0px;
	margin:5px 8px 0px 5px;
}
#menuPadding
{
	background:#4c4c4c url(images/bodyBGPattern.gif) repeat;
	}
#routes .instructions{
	padding:3px 10px 3px;
	font-size:1.1em;
	background:#4c4c4c url(images/bodyBGPattern.gif) repeat;
}
#routes div.checked{
	background-position:0px -22px;
}
#routes div.fakeCheckbox a{
	display:block;
	width:14px; height:14px;
	border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px;
	background:#c6c6c6;
	position:absolute;
	top:50%; left:50%;
	margin:-7px 0px 0px -7px;
}
#routes table, #dialog table, .stopPopupBody table{
	font-size:.9em;
}
#dialog table, .stopPopupBody table{
	color:#c6c6c6;
	text-transform: uppercase;
}
#routes table tr, #dialog table tr, .stopPopupBody table tr{
	background:url(images/horizontalGroove.gif) repeat-x top;
}
#routes table thead tr:first-child, #dialog table tr:first-child, .stopPopupBody table thead tr:first-child{
	background:none;
	border-top:2px solid #FFF;
	border-bottom:2px solid #FFF;
}
#routes table th, #routes table td, #dialog table th, #dialog table td, .stopPopupBody table th, .stopPopupBody table td{
	width:60px;
	padding:8px 10px;
}
#routes table td, #dialog table td, .stopPopupBody table td{
	background:url(images/verticalGroove.gif) repeat-y left;
}
#routes table th:first-child, #routes table td:first-child, #dialog table th:first-child, #dialog table td:first-child, .stopPopupBody table th:first-child, .stopPopupBody table td:first-child{
	width:100px;
	background:none;
}
#routes table td.highlight, #dialog table td.highlight, .stopPopupBody table td.highlight{
	font-weight:bolder;
	color:#000000;
	background:#fff;
	background: -moz-linear-gradient(top, #ffffff 0%, #efefef 51%, #ffffff 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(51%,#efefef), color-stop(99%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 51%,#ffffff 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#efefef 51%,#ffffff 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#efefef 51%,#ffffff 99%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%,#efefef 51%,#ffffff 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	border-top:1px solid #4c4c4c;
	text-shadow: 1px 1px #d1d0d0;
	/*background:#4c4c4c url(images/verticalIndent.gif) repeat-y left;*/
}
/* redefine scrollbar (webkit only) */
#routes::-webkit-scrollbar {
    width: 19px;
}
#routes::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background: #4c4c4c;
	border-left: 1px solid #818181;
}
#routes::-webkit-scrollbar-thumb {
	background:#62656b url(images/noiseBG.jpg) repeat;
	border-left: 1px solid #818181;
}
#routes::-webkit-scrollbar-button:start {
   	height:18px;
   	background:url(images/scrollArrowUp.png) no-repeat top left;
	border-bottom: 1px solid #818181;
	border-left: 1px solid #818181;
}
#routes::-webkit-scrollbar-button:end {
   	height:18px;
   	background:url(images/scrollArrowDown.png) no-repeat top left;
	border-top: 1px solid #818181;
	border-left: 1px solid #818181;
}
/*tweaks to jquery ui resizable*/
#menu .ui-resizable-e{
	position:absolute; right:0px;
}
#menu .ui-resizable-s{
	position:absolute; bottom:0px; background:red;
}

#stopPopup{
	position:absolute;
	z-index:1002;
	top:5%;
	left:50%;
	margin-left:-250px;
	/* margin-top:-40%; */
	max-width:558px;
	min-width: 500px;
	box-shadow: 0px 0px 12px -1px #000;
	-webkit-box-shadow: 0px 0px 12px -1px #000;
	background:#62656B url(images/noiseBG.jpg) repeat;
	border-radius:7px; -moz-border-radius:7px; -webkit-border-radius:7px; -khtml-border-radius:7px;
	overflow:hidden;
}
#stopPopup .stopPopupHeader{
	min-height:35px;
	border-bottom:1px solid #a1a0a1;
	box-shadow: 0px 0px 8px -1px #000;
	-webkit-box-shadow: 0px 0px 8px -1px #000;
	padding:1px 0px 0px;
	position:relative;
	top:0px;
}
#stopPopup .stopPopupHeader h1{
	color:#d4d4d3;
	text-align:center;
}
#stopPopup .stopPopupHeader hr{
	border-top:1px solid #41403d;
	border-bottom:1px solid #a1a0a1;
	border-left:none; border-right:none;
}
#stopPopup .stopPopupBody{
	overflow:auto;
	width:100%;
	min-height:320px;
	max-height:467px;
	color:#333333;
	/*
	background:#d4d4d3;
	*/

	/*
	overflow:auto;
	width:100%;
	padding-top:25px;
	padding-left:25px;
	min-height:320px;
	max-height:467px;
	color:#333333;
	*/
	/* background:#d4d4d3; */
}
#stopPopup .arrowCircle{
	width:116px; height:116px;
	box-shadow: inset 0px 0px 8px -1px #000;
	-webkit-box-shadow: inset 0px 0px 8px -1px #000;
	background:#fff;
	border-radius:58px; -moz-border-radius:58px; -webkit-border-radius:58px;
	text-align:center;
	margin-left:auto; margin-right:auto;
}
.routeItem .arrowCircle img{ width:100px; padding:27px 0; }
#stopPopup .stopPopupFooter{
	min-height:38px;
	border-top:1px solid #a1a0a1;
	box-shadow: 0px 0px 8px -1px #000;
	-webkit-box-shadow: 0px 0px 8px -1px #000;
	padding:5px 0px;
	cursor:pointer;
	position:relative;
	bottom:0px;
}
#stopPopup .stopPopupFooter .leftArrow{
	float:left;
	margin: 0px 10px;
}
#stopPopup .stopPopupFooter h3{
	line-height:37px;
	margin:0px; padding:0px;
	font-size:1.6em;
}
#stopPopup .stopPopupFooter:hover > .leftArrow{
	background-position:-38px 0px;
}
#stopPopup .routeItem{
	width:100%;
	text-align:center;
}
#stopPopup .routeItem h1{
	font-size:4em;
	margin:0px;
}
#stopPopup .routeItem p{
	font-size:2em;
	margin:1.2em 0 0;
}
#stopPopup .routeItem h2.routeName{
	font-size:2.1em;
	margin:.3em 0 .6em;
	text-transform:uppercase;
}
#stopPopup hr.colorBorder{
	border-top:1px solid #918f8f;
	border-bottom:1px solid #edecec;
	border-left:none; border-right:none;
	height:11px;
	background:#333333;
	margin-bottom:2em;
}
#stopPopup .nextBus{
	background:#babab9;
	border-top:1px solid #918f8f;
	border-bottom:1px solid #edecec;
}
#stopPopup .nextBus p{
	color:#565656;
	margin:0px;
	font-size:1.7em;
	line-height:1.5em;
}

/*
 FOOTER
--------------------------------------------------*/
footer{
	height:41px;
	width:100%;
	position:absolute;
	bottom:0px;
	z-index:100;
	background:#4c4c4c url(images/bodyBGPattern.gif) repeat;
	box-shadow: 0px 0px 7px -1px #000;
	-webkit-box-shadow: 0px 0px 7px -1px #000;
	overflow:hidden;
}
.footerSecondaryBar{
	background:white;
	width:100%;
	height:3px;	
}
.footerPrimaryBar{
	background:#818181;
	width:100%;
	height:5px;	
}
.footerContent{
	background:url(images/horizontalGroove_dark.gif) repeat-x top;
	height:33px;
}
.footerContent img.logo{
	float:right;
	padding-top:7px; padding-right:15px;
	max-height:24px;	
}
.footerNav ul{
	list-style-type: none;
	float:left;
}
.footerNav ul li{
	float: left; 
	height:33px;
	text-align:center;
	padding:0px;
	line-height:33px;
}
.footerNav ul li:hover{
	background:url(images/navDarkBG.gif) repeat;
}
.footerNav ul li a{
	display:block;
	padding:0px 15px;
	line-height:33px;
	background:url(images/verticalGroove_dark.gif) repeat-y right;
}
.footerNav ul li a:hover{
	text-decoration:none;
}


#RSSContainer
{
	height:100%;
	}
.infoBox
{
	white-space:nowrap;
	}
.vehicleCapacityTitle
{
	width:100%;
	text-align:center;
	}
.vehicleCapacityImage
{
	display: block;
    margin-left: auto;
    margin-right: auto 
    }