@charset "utf-8";

body {
	font: 100%/100% Arial, Helvetica, sans-serif;
	background-color: #fff;
	color: #000;
	padding: 0;
	margin: 0;
}
a {
	color: #084C8D;
	text-decoration: none;
	/*border-bottom: 1px dotted #bbd4ee;*/
}
a:hover {
	text-decoration: none;
	/*border-bottom: 1px dotted #084c8d;*/
}
a.image {
	border: 0;
}


img.header {
	display: none;
}

h1 {
	font: 20px/28px "Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 7px 10px 7px 10px;
	margin: 0 0 10px 0;
	background-color: #084C8D;
	color: #fff;
	text-align: right;
	/*background-image: url(/v3/images/m/trimet-logo.png);
	background-repeat: no-repeat;
	background-position: left;*/
}
	h1 a {
		color: #fff;
	}

h2 {
	font: 110%/110% Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 10px 10px 0 10px;
	margin: 0;
	color: #666;
}
	h2.padding {
		padding-bottom: 10px;
	}
h3, h4, h5, h6 {
	font: 100%/100% Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 10px 10px 0 10px;
	margin: 0;
}


p {
	margin: 0;
	padding: 0 10px 10px 10px;
}
p.alert {
	color: #808080;
	font: 80%/150% Arial, Helvetica, sans-serif;
}
p.alert img.bullet {
	float: left;
	padding-right: 5px;
}
p.error, p.unrecognized {
	color: #000;
	font-weight: bold;
}
p.footer-links {
	font: 70%/120% Arial, Helvetica, sans-serif;
	padding: 10px 0 15px 0;
}
p.footnote {
	font: 80%/110% Arial, Helvetica, sans-serif;
	color: #666;
	padding: 10px;
}
p.header {
	margin: 5px 0 5px 0;
	padding: 0;
}
p.footer {
	font: 70%/120% Arial, Helvetica, sans-serif;
	padding: 15px 0 0 0;
	margin: 10px 0 0 0;
	border-top: 1px solid #ccc;
}
p.link {
	font: 90%/115% Arial, Helvetica, sans-serif;
	padding-top: 5px;
	padding-bottom: 5px;
}
p.list-desc {
	margin: -10px 0 0 0;
	padding: 0;
}
p.note {
	font: 80%/110% Arial, Helvetica, sans-serif;
}
p.secondary, span.sub {
	color: #999;
	font: 80%/150% Arial, Helvetica, sans-serif;
	padding-top: 0;
	margin-top: -10px;
}
p.spacer-top {
	margin-top: 15px;
}
p.stopid {
	color: #808080;
	font: 80%/150% Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 2px 0 0 10px;
}
p span.bold {
	font: 90%/100% Arial, Helvetica, sans-serif;
	font-weight: bold;
}





ul {
	padding: 5px 5px 10px 25px;
	margin: 0;
}
	ul li {
		font: 90%/115% Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0 0 5px 0;
	}
	ul li a {
	}
	
ul.links {
	padding: 0;
	margin: 0;
	border-top: 1px solid #E0E0E0;
}
	ul.links li {
		margin: 0;
		padding: 0;
		list-style: none;
		border-bottom: 1px solid #E0E0E0;
	}
	ul.links li a {
		display: block;
		font: 105%/105% Arial, Helvetica, sans-serif;
		padding: 10px 25px 10px 10px;
		margin: 0;
		background-image: url(/v3/images/m/arrow.gif);
		background-position: right;
		background-repeat: no-repeat;
	}
		ul.links li a:active {
			background-color: #ff6;
		}
	ul.links li h3 {
		padding-top: 0;
		padding-left: 0;
		font: 105%/105% Arial, Helvetica, sans-serif;
	}
		ul.links li h3 img {
			display: inline;
			background-image: none;
			margin: 0;
			padding: 0;
		}
		
	ul.links li p.secondary {
		padding-top: 3px;
	}
		ul.links li p.secondary a {
			padding: 0;
			margin: 0;
			display: inline;
			background-image: none;
		}
	
	
ul.list {
	padding: 0;
	margin: 10px 0 10px 0;
	border-top: 1px solid #E0E0E0;
}
	ul.list li {
		border-bottom: 1px solid #E0E0E0;
		margin: 0;
		padding: 10px;
		font: 100%/115% Arial, Helvetica, sans-serif;
	}
	ul.list li span.head {
		font-weight: bold;
	}


form.form-style fieldset {
	padding: 0 10px 10px 10px;
	margin: 0;
	border: 0;
}
form.form-style fieldset.normal {
	padding-bottom: 0;
	margin-bottom: 5px;
}
	form.form-style fieldset.normal label {
		display: block;
		font-weight: bold;
		padding-bottom: 5px;
	}
form.form-style fieldset.addresses label {
	display: block;
	font-weight: bold;
	padding-bottom: 5px;
	
	/*width: 55px;
	float: left;*/
	clear:both;
}
form.form-style fieldset.addresses input, form.form-style fieldset.normal input {
	width: 271px;
	font: 100%/115% Arial, Helvetica, sans-serif;
	padding: 2px;
}
	form.form-style fieldset.normal input.stopid {
		width: 107px;
	}
form.form-style fieldset.preferences {
	background-color:#eee;
	font-size: 90%;
	padding-top: 5px;
	padding-bottom: 5px;
}
	form.form-style fieldset.preferences label {
		display: block;
		width: 110px;
		float: left;
		font-weight: normal;
	}
	form.form-style fieldset.preferences select {
		font-weight: normal;
		font: 100%/115% Arial, Helvetica, sans-serif;
		padding: 2px;
	}
form.form-style fieldset.when, form.form-style fieldset.when-day {
	/*padding-left: 65px;*/
	display: block;
	float: left;
}
form.form-style fieldset.submit {
	padding-top: 15px;
}
form.form-style fieldset.submit2 {
	padding-top: 0;
}

form.form-style fieldset.submit input, form.form-style fieldset.submit2 input {
	font: 115%/115% Arial, Helvetica, sans-serif;
}

form.form-style fieldset select {
	font-weight: normal;
	font: 100%/115% Arial, Helvetica, sans-serif;
	padding: 2px;
}


.month {
	margin-right: 10px;
}
p.instructions {
	font-size: 70%;
	padding-bottom: 5px;
	color: #999;
	
	padding-left: 0;
	/*padding-left: 55px;*/
}
p.helplink {
	font-size: 70%;
	padding: 0;
	color: #999;
	display: inline;
}
p.helplink a {
	padding: 8px 5px 5px 5px;
}


/* alerts begin */
div.alerts-header p {
	font: 80%/80% Arial, Helvetica, sans-serif;
	color: #666;
	padding-top: 3px;
	padding-bottom: 10px;
	text-align: center;
}

div.alerts-header ul {
	list-style: none;
}
	div.alerts-header ul li {
		margin: 0;
		padding: 0 0 5px 5px;
	}

ul#alerts {
	padding: 0;
	margin: 10px 0 10px 0;
	border-top: 1px solid #E0E0E0;
}
	ul#alerts li {
		border-bottom: 1px solid #E0E0E0;
		margin: 0;
		padding: 2px 5px 2px 5px;
	}
	ul#alerts p {
		font: 100%/115% Arial, Helvetica, sans-serif;
	}

/* alerts end */


/* transittracker begin */
table.table-rule {
	border-top: 1px solid #E0E0E0;
	margin: 10px 0 10px 0;
	font: 100%/115% Arial, Helvetica, sans-serif;
}
table.table-rule p {
	padding: 0;
	margin: 0;
}
td.table-rule {
	border-bottom: 1px solid #E0E0E0;
}
/* transittracker end */
	


/* trip planner begin */
.options {
	font-size: 90%;
	padding-top: 8px;
	margin-bottom: 0;
	padding-bottom: 5px;
	font-weight: bold;
	background-color: #eee;
	
	clear:both;
}

ol#tripsteps {
	margin: 5px 0 10px 0;
	padding: 0;
	border-top: 1px solid #E0E0E0;
}
	ol#tripsteps li {
		margin: 0;
		padding: 0 5px 7px 30px;
		list-style: none;
		border-bottom: 1px solid #E0E0E0;
		font: 105%/115% Arial, Helvetica, sans-serif;
	}
	ol#tripsteps li h3 {
		font: 95%/110% Arial, Helvetica, sans-serif;
		margin: 5px 0 0 0;
		padding-top: 5px;
	}
	ol#tripsteps li span.stopid {
		color: #808080;
		font: 80%/150% Arial, Helvetica, sans-serif;
		padding: 0;
		margin: 2px 0 0 10px;
	}
	ol#tripsteps li a {
		padding: 0;
		margin: 0;
	}
	ol#tripsteps li img.icon {
		float: left;
		margin-left: -30px;
		margin-top: 0;
	}
	
	
	
#itinerary {
	font: 90%/125% Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 10px 10px 10px 10px;
	clear: both;
}
	#itinerary  {
		padding: 10px;
		background-color: #f4f4f4;
		border: 1px solid #b1aca7;
	}
	#itinerary p {
		padding-bottom: 5px;
		padding-left: 0;
	}
	#itinerary td {
		vertical-align: top;
	}
	#itinerary h2 {
		border: 0;
		padding: 0;
		margin: 0;
		text-transform: none;
		font: 105%/115% Arial, Helvetica, sans-serif;
		font-weight: bold;
	}


#buttons {
	margin: 15px 0 25px 0;
}
#buttons span.button-tripplanner {
	width: 100px;
	height: 26px;
	margin: 0 15px 0 0;
	padding: 0;
	font: 100%/100% Arial, Helvetica, sans-serif;
	font-weight: normal;
	border: none !important;
	text-align: center;
	float: left;
}
	#buttons span.button-tripplanner a {
		margin: 0;
		padding: 6px 0 0 0;
		width: 100px;
		height: 21px;
		background-position: 0 0;
		color: #ffffff;
		text-decoration: none;
		border: none !important;
		float: left;
	}
	#buttons span.button-tripplanner a:hover {
		background-position: -100px 0;
		cursor: pointer;
		text-decoration: none;
		color: #ffffff;
	}
		#buttons span.button-tripplanner a {
			background: url(/v3/images/tripplanner/button.gif) no-repeat;
		}


div.planner-alerts {
	list-style: none;
	margin: 15px 15px 10px 0;
	padding: 0;
}
div.planner-header h2 {
	font: 105%/125% "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 5px 0 0 0;
	margin: 0;
	color: #555555;
	text-transform: none;
}

/* trip planner end */


/* trip planner and alerts */
div.tabs p {
	background-color: #ddd;
	margin: 0;
	padding: 10px 0px 4px 0px;
	text-align: center;
	font: 100%/115% Arial, Helvetica, sans-serif;
	font-weight: bold;
}
		div.tabs p span {
			background-color: #fff;
			padding: 5px 10px 5px 10px;
			margin: 0;
			color: #000;
			border: 0;
		}
		div.tabs p a.selected {
			padding: 5px 10px 5px 10px;
			margin: 0;
			border: 0;
			background-color: #fff;
		}
		div.tabs p a.unselected {
			padding: 5px 10px 5px 10px;
			margin: 0;
			border: 0;
		}
		


/* trip planner and transittracker */
.or {
	text-align: center;
	color: #999;
	background-color: #fff;
	font-weight: bold;
}
.or-div {
	text-align: center;
	margin: 0 0 10px 0;
}
.or-p {
	border-bottom: 1px solid #ccc;
	margin-bottom: -10px;
}


/*info to hide from mobile displays */
.highslide-html-content, .info-item, p.help {
	display: none;
}




/* --- EMERGENCY BOX --- */
#EmergencyNoticeBox, #WeatherEmergency {
	margin: 0 0 10px 0;
	/*padding: 5px 5px 10px 40px;*/
	padding: 5px 5px 10px 10px;
	color: #ffffff;
	font: 100%/100% Arial, Helvetica, sans-serif;
}
	#EmergencyNoticeBox {
		/*background: url(/v3/images/m/emergency.gif) #c73d30 top left no-repeat;*/
		background-color: #c73d30;
	}
	#WeatherEmergency {
		/*background: url(/v3/images/m/emergency-weather.gif) #7da4cc top left no-repeat;*/
		background-color: #7da4cc;
	}
#EmergencyNoticeBox p.header, #WeatherEmergency p.header {
	font: bold 125%/125% Arial, Helvetica, sans-serif;
	margin: 0 0 3px 0;
	padding: 0;
	color: #ffffff;
}
#EmergencyNoticeBox p, #WeatherEmergency p {
	font: 90%/110% Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0 0 10px 0;
}
#EmergencyNoticeBox p.update, #WeatherEmergency p.update {
	font: 70%/70% Arial, Helvetica, sans-serif;
	padding: 5px 0 0 0;
}
#EmergencyNoticeBox a, #WeatherEmergency a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	border-bottom: 1px dotted #fff;
}
	#EmergencyNoticeBox a {
		border-bottom: 1px dotted #e6776c;
	}
	#WeatherEmergency a {
		border-bottom: 1px dotted #a7c6e6;
	}

#EmergencyNoticeBox a:hover, #WeatherEmergency a:hover {
	color: #ffffff;
	border-bottom: 1px dotted #fff;
}