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

/*-- Layout ---*/
html { 
	background: #2699bf url('../images/body-bg.png') repeat-x; 
	text-align: center; }
body { 
	color: #111;
	font-size: 12px;
	margin: 0 auto;
	text-align: left;
	position: relative;
	width: 970px; }
#header, #dashboard, #footer, #dashboard-subpage, #footer-subpage { width: 100%; }
#header { 
	margin: 0 auto;
	text-align: center; }
#dashboard { 
	background: url('../images/sub-page-bg.png') repeat-y;
	float: left;
	height: auto;
	min-height: 850px;
	margin: 2px 0 0 0; padding: 0 0 20px 0;
	position: relative; }
#dashboard-subpage {
	background: url('../images/sub-page-bg.png') repeat-y; 
	float: left;
	height: auto;
	min-height: 700px;
	margin: 2px 0 0 0; padding: 0 0 20px 0; }
#footer {
	background: url('../images/footer-sub-page.png') no-repeat;
	clear: both;
	height: auto;
	margin: -29px 0 0 0; padding: 50px 0 40px 0; }
#footer-subpage {
	background: url('../images/footer-sub-page.png') no-repeat;
	clear: both;
	height: auto;
	margin: -29px 0 0 0; padding: 50px 0 40px 0; }
	
/*--- global ---*/
h3 { font-size: 16px; }
a { cursor: pointer; }

span.owner {
	display: block; 
	float: right; 
	font-size: 11px; 
	margin: 2px 20px 0 0; }
span.owner a { 
	color: #000;
	padding: 2px; }
span.small-font { 
	color: #111; 
	font-size: 11px; 
	letter-spacing: 0.02em; }
#footer a { 
	color: #000;
	padding: 5px; }
#footer a:hover, #footer a:focus, span.owner a:hover, span.owner a:focus { 
	background-color: #000;
	color: #ccf2ff; 
	text-decoration: none; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;}
	
.clear { clear: both; }

/*--- header ---*/
#heeader { 
	height: 150px;  }
#header h1 {
	height: 148px; width: 100%;
	margin: 0;
	position: relative; }
#header h1 span {
	background: url(../images/performance-dashboard-1.png);
	height: 148px; width: 960px;
	margin: 0 auto;
	position: absolute;
	left: 0; top:0; }
#header img, #header img a { border: none; }

/*--- navigation ---*/
div.navigation {
	background:url(../images/navigation-body.png) repeat-y;	
	font-size: 14px;
	margin: 0 15px; padding: 0;}
div.navigation ul {
	background:url(../images/navigation-bottom.png) no-repeat bottom;
	margin: 0; padding: 10px 0 15px 0;
	text-align:center; }
div.navigation ul li {
	display: inline;
	margin: 0 15px; }
div.navigation li a {
	color: #05151a;
	padding: 3px;
	text-decoration: none; }
div.navigation li a:hover {
	background-color: #7b7b7b;
	color: #fff;
	padding: 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }
div.navigation li a:focus {
	background-color: #7b7b7b;
	color: #fff;
	padding: 3px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }
	
body.ridership li.nav-ridership, body.dashboard li.nav-dashboard, body.on-time li.nav-on-time, body.customer-service li.nav-customer-service, body.completion li.nav-completion, body.operating-budget li.nav-operating-budget {
	color: #33ccff;
	font-weight: bold; }

/*--- styling and formatting for dashboard guages---*/

/*--- guages for front page ---*/
#operations{ position: absolute; left: 20px; top: 110px; }
#completion { position: absolute; left: 339px; top: 50px; }
#ridership { position: absolute; right: 20px; top: 110px; }
#cusservice { position: absolute; left: 100px; top: 475px; }
#ontime { position: absolute; right: 100px; top: 475px; }

#operations ul, #completion ul, #ridership ul, #cusservice ul, #ontime ul, #tide-complete ul, #tide-expanded ul,
#facility-complete ul, #facility-expended ul { 
	font-family: Georgia, Arial, Helvetica, sans-serif;
	list-style-type: none;
	margin: 10px 0;
	padding: 0;
	width: 301px; }
li.title { 
	background: url(../images/sprite-btn.png) no-repeat 0 -34px;
	display: block;	
	font-weight: bold;
	height: 34px; width: 200px;
	margin-left: 50px;
	text-align: center; 
	overflow: hidden; }
li.title a { 
	background: url(../images/sprite-btn.png) no-repeat 0 0;
	display: block;
	color: #ffffff;
	height: 100%; width: 100%;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-decoration: none; }
li.title a:hover { 
	background-position: 0 34px;
 }
li.title a span { 
	display: block; 
	color: #fff;
	padding: 7px; }
li.title a span a:hover { color: #000; }
li.desciption {
	font-size: 10px; 
	letter-spacing: 0.05em;
	margin-left: 50px;
	text-align: center; 
	width: 210px;}
/*--- guages for construction projects ---*/
h2.ss-facility { margin-top: 50px; }
ul.guages { list-style-type: none; }
ul.guages li { float:left; }
	
#dashboard-title { 
	background:url(../images/dashboard-name.png) no-repeat;
	height: 145px; width: 128px;
	margin: 0 auto;
	position: absolute;
	left: 430px; top: 435px;}
/*--- guages for sub pages sidebar ---*/
#ridership-sub { position: relative; right: 0; top: 0; }

/*--- Sub Pages --- */
#dashboard-subpage h2 {
	border-bottom: 1px dashed #000;
	margin-left: 20px; margin-right: 20px; padding: 0 0 3px 0;
	width: auto; }
p { margin: 10px 20px; }
p, ul { 
	color: #111;
	line-height: 160%; }
p.desciption {
	letter-spacing: 0.05em;
	text-align: center; }
table { 
	border: 2px solid #ccc;
	margin: 20px 0 20px 20px; 
	width: 600px; }
table caption { 
	font-weight: bold;
	text-align: left; }
table th {
	background-color: #eafaff;
	text-align: center; }
table td { 
	border-top: 1px solid #999; 
	border-left: 1px solid #999;
	text-align: right; }
td.table-border-none { border-left: none; }
td.align-left-text, th.align-left-text { 
	border-left: none; 
	font-weight: bold; 
	text-align: left; }

ul.ridership-list {
	background-color: #eafaff;
	border: 1px solid #ccc;
	list-style-image: url(../images/bullet-add-1.png);
	margin: -10px 0 0 50px; padding: 20px; 
	width: 500px; }
ul.ridership-list li { margin: 10px 0; }

ul#graphs-charts { 
	background-color: #f3f3f3; 
	border: 1px solid #c4c4c4;
	float: right; 
	height: auto;
	list-style-type: none;
	margin: 30px 20px; padding: 20px; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }
ul#graphs-charts li { margin: 15px 0; }
ul#graphs-charts img { border: 1px solid #c4c4c4; }
ul#graphs-charts img:hover { border: 1px solid #e5e5e5; }
ul#graphs-charts li.guages img { border: none; }

ul#charts-projects { 	
	background-color: #f3f3f3; 
	border: 1px solid #c4c4c4;
	height: auto; width: 900px;
	float: left;
	list-style-type: none;
	margin: 20px 0 0 20px; padding: 20px 10px; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; }
ul#charts-projects li { 
	display: inline;
	margin: 0 10px; }
ul#charts-projects img { border: 1px solid #c4c4c4; }
ul#charts-projects img:hover { border: 1px solid #e5e5e5; }
ul#charts-projects li.guages img { border: none; }

.all-routes {
	border: none; 
	display: block;
	width: 225px;
	height: 95px;
	text-indent:-9999px;
}
.all-routes a {
	display:block;
	width:100%;
	height:100%;
	background: transparent url(../ontime-performance/all-routes.jpg) no-repeat top left;
	outline:none;
}
.all-routes a:hover {
	background-position:0 -95px;
}


span.divider {
	border-bottom: 1px solid #ccc; 
	height: 10px;
	margin: 10px 0; }

/*--- styling of different table elements ---*/
tr.operating-revenues {
	background-color: #ccc; }
tr.expenses, tr.total-expenses { background-color: #eafaff; }
tr.green-bg { background-color: #d5ecd2; }

td.neg-red { color: #F00; }

/*--- footer elements---*/
#footer ul { 
	float: right;
	margin-right: 20px; }
#footer ul li { 
	display: inline;
	margin: 0 10px; }
	
	
/* ---- ridership table --- */
table.tide-ridership {
  border-bottom-color:#CCCCCC;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-collapse:collapse;
  border-left-color:#CCCCCC;
  border-left-style:solid;
  border-left-width:1px;
  border-right-color:#CCCCCC;
  border-right-style:solid;
  border-right-width:1px;
  border-top-color:#CCCCCC;
  border-top-style:solid;
  border-top-width:1px;
  width:600px;
}
.tide-ridership caption {
  font-weight:bold;
  font-size: 18px;
  text-align:left;
}
.tide-ridership tr.odd td, .tide-ridership tr.odd .column1 {
  background-color:#F7F7F7;
}
.tide-ridership .column1 {
  background-color:#EEEEEE;
}
.tide-ridership td {
  border-bottom-color:#CCCCCC;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#CCCCCC;
  border-left-style:solid;
  border-left-width:1px;
  color:#111111;
  height:75px;
  padding: 6px;
  text-align: left;
}
.tide-ridership td em {
  color:#BDBDBD;
  font-size:18px;
  font-style:normal;
  font-weight:bold;
  opacity:0.8;
}


.tide-ridership td ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	text-align:left;
	
}

.tide-ridership td li {
	margin: 3px 0;
}
.tide-ridership td li span {
	font-weight: bold;	
}
.tide-ridership th {
  border-bottom-color:#CCCCCC;
  border-bottom-style:solid;
  border-bottom-width:1px;
  border-left-color:#CCCCCC;
  border-left-style:solid;
  border-left-width:1px;
  color:#678197;
  font-weight:normal;
  padding-bottom:0.3em;
  padding-left:0.5em;
  padding-right:0.5em;
  padding-top:0.3em;
  text-align:left;
}
.tide-ridership td:hover, .tide-ridership tr.odd td:hover, .tide-ridership tr.odd .column1:hover {
  background-attachment:initial;
  background-clip:initial;
  background-color:#EBF6E3;
  background-image:initial;
  background-origin:initial;
  background-position:initial initial;
  background-repeat:initial initial;
  color:#444444;
  text-shadow:rgba(255, 255, 255, 0.296875) 0 -1px 0;
}
.tide-ridership thead th {
  background-attachment:initial;
  background-clip:initial;
  background-color:#EBF6E3;
  background-image:initial;
  background-origin:initial;
  background-position:initial initial;
  background-repeat:initial initial;
  color:#111111;
  font-size:16px;
  font-weight:bold;
  padding-bottom:10px;
  padding-left:0;
  padding-right:0;
  padding-top:10px;
  text-align:center;
}
.previous-months a {
  background-attachment:initial;
  background-clip:initial;
  background-color:#CCCCCC;
  background-image:initial;
  background-origin:initial;
  background-position:initial initial;
  background-repeat:initial initial;
  border-bottom-left-radius:5px 5px;
  border-bottom-right-radius:5px 5px;
  border-top-left-radius:5px 5px;
  border-top-right-radius:5px 5px;
  color:#111111;
  margin-right:20px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
  padding-top:5px;
  text-decoration:none;
}
.previous-months a:hover {
  background-attachment:initial;
  background-clip:initial;
  background-color:#EBF6E3;
  background-image:initial;
  background-origin:initial;
  background-position:initial initial;
  background-repeat:initial initial;
}


.ridership-tide #dashboard-subpage { min-height:700px; }
.ridership-tide #dashboard-subpage table.tide-ridership {
  margin-left:auto; margin-right:auto;
}