/* @override 
	http://www.adelaidemetro.dev/extension/adelaidemetro/design/adelaidemetro/stylesheets/style.css */

/*

	Description: Adelaide Metro site, layout & styles.
	Version: 2

*/

/* Contents */

/*
==================
Reset
==================

==================
Home
==================
- - Announcements Box
- - Tabs
- - Service updates
- - SimplyScroll
- - Callouts
- - Video Dialog
- - Slider

==================
Route Page
==================
 - - Route variations
 - - Utility links
 - - Route announcements
 - - Route (tabs)
 - - Table
 - - Sticky Scroll CSS
 - - Routes dropdown
 - - Timetables
 - - Printed timetable
 - - Related routes
 - - Bus theme
 - - Train theme
 - - Tram theme

==================
Stop Page
==================
 - - Utility links
 - - Next Services Realtime
 - - Bus Tram theme 
 - - Back to top
 - - Sidebar
 - - Printed timetable
 - - In-page timetable
 - - Vertical timetable (default)

==================
Content Pages
==================
 - Sidebar: Globals
 - Sidebar: Inline tooltips
 - Sidebar: search
 - Sidebar: menu
 - Content Pages: Global
 - Content Pages: Tabs
 - Content Pages: Section icons
 - Content Pages: Ajax search results
 - - Bus theme
 - - Train theme
 - - Bus theme
 - - Tram theme
 - - Table (retailers)
 - Custom dropdown
 - Context search
 - Related links
 - Shortcuts list
 - Grid list
 - List News
 - List Events
 - List Service Updates
 - Tabs - Overwriting jQuery UI
 - Special service
 - CMS content styles (unlocked contents)
 - - Headings
 - - Body
 - - List: Default
 - - List: Anchors
 - - List: Prices
 - - List: Steps
 - - List: With icons
 - - Table: Default
 - - Table: Retailer search results
 - Card Types
 - - Blue
 - - Green
 - - Yellow
 - - Navy
 - - Common
- Fares: Table
- Sitemap
- Collapsible content
- Forgotten password
- Alternative Timetable Search Results List
- Stackable Plugin global styles

==================
Announcements Page
==================
- List of service updates
- - Callouts
- - Feedback Form
- - Event Form
- Collapsible content
- Feedback Page Columns
- - Tier dropdown boxes

==================
Post Page (service update, news & event page)
==================
- Details
- Body
- Sidebar - Location
- Sidebar - Others
- Sidebar - Image
- Bottom links
- Post Content Styles

==================
Register Page (Login/registration form)
==================
- Submit
- Shadow

==================
My Metro Page
==================
- - Tabs
- - Tab content area
- - Table - Generic
- - Inline edit 
- - Table - MY ROUTES
- - Table - MY TIMETABLES
- - Table - MY STOPS
- - Table - MY JOURNEY PLANS
- - Table - Route signs
- - Table - Stop signs
- - Bus theme
- - Train theme
- - Tram theme
- - Section - UPDATE MY DETAILS

==================
Timetables and Maps landing page
==================

==================
Search Results Page
==================
- Accordion
- Grid list
- Service Updates
- News
- Events
- STOPS
- More contents
- No Results

==================
Tickets Page
==================
- Tickets landing page
- Metrocard landing page

==================
Subscribe to alerts
==================
Table

==================
Where to buy
==================

==================
Choose a Stop
==================

==================
FAQs
==================

==================
Grid list
==================
- - Target iPad
- - Bus theme
- - Train theme
- - Tram theme
- - Special group theme
- - Special theme


==================
List events
==================

==================
List news
==================

==================
List service updates
==================

==================
Utility Links
==================

==================
Route Lables
==================

==================
Content Tools
==================

==================
General
==================
- Layout rules
- Global styles
- - Forms
- Header
- - My Metro Login
- - My Metro Menu
- -Time & Date
- - Shadows Logo
- - Main Menu
- - Second tier
- - Alt Menu
- - Site Search
- - Latest announcements - - - - Delete?
- Footer & subfooter
- Elements
- - Folds
- - Collapsible contents
- - Links with arrows
- - Default back to top link
- - Crumbs
- Buttons
- -Button sizes
- -Button colors
- List of service updates
- Callouts
- - One row
- File formats
- Alerts
- Recaptcha
- System notifications
- Form error
- jQuery UI (predictive search results)
- Loading Animation Graphics
- Error Page
- Homepage Survey
- Mobile Redirection

*/


/* ==========================================================================
   Reset
   ========================================================================== */

/*
*  YUI 3.4.1 (build 4118)
*  Copyright 2011 Yahoo! Inc. All rights reserved.
*  Licensed under the BSD License.
*  http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}


/* ==========================================================================
   Home
   ==========================================================================*/

#page-home #shadow-logo-left
{
	/*background: url(../images/sprite.png) -25px -1933px no-repeat;*/
	width: 25px;
	height: 222px;
	bottom: -8px
}

#page-home #wrapper
{
	background: none;
	border: none;
}

#page-home #content
{
	z-index: 310;
	position: relative;
}


#page-home #wrapper .column
{
	position: relative;
	float: left;
	width: 33.33%;
	background: #fff;
	height: 30.4em;
	margin-bottom: 20px;
}

#page-home #wrapper .column .column-shadow
{
	position: absolute;
	z-index: 299;
	top: 0;
	right: -12px;
	background: url(../images/sprite.png) -521px -2000px no-repeat;
	height: 390px;
	width: 12px;
}

@media only screen and (max-width:800px) {
	
#page-home #wrapper .column {
	width: 50%;
}
}

@media only screen and (max-width: 600px) {
	
#page-home #wrapper .column {
	width: 100%;
}
	
#page-home #wrapper .column .column-shadow {
	
	display: none;
}
	
#page-home #wrapper .column {
	height: auto;
}

#page-home #wrapper #announcements-blq {
	padding-bottom: 3em;
}

}

/*--- Quick links ---*/

#page-home #wrapper #quick-links-blq {
	padding: 20px;
	box-sizing:border-box;
	-webkit-border-top-left-radius: 18px;
	-moz-border-radius-topleft: 18px;
	border-top-left-radius: 18px;
	background: #e7ebf2;
}


#page-home #wrapper #quick-links-blq  .quick-links-bubble {
	opacity: 0;
    left: 100px;
    position: absolute;
    top: 4px;
    margin: 0px 0px 0px 30px;
    background: rgba(0, 0, 0, 0.7);
    padding: 3px 8px;
    border-radius: 10px;
    color: white;
    width: 200px;
    z-index: 200;
}

#page-home #wrapper #quick-links-blq ul li:hover .quick-links-bubble {
	left: 190px;
	opacity: 1;
	transition: all 0.2s ease-out;
}

#page-home #wrapper #quick-links-blq ul li {
	padding: 2px 0;
	position: relative;
}
#page-home #wrapper #quick-links-blq ul li a {
	display: block;
	color: #FFF;
	background: #447ca2;
	border-radius: 4px;
	text-decoration: none;
	padding: 19px 10px 19px 19px;
	font-size: 16px;
	line-height: 17px;
  }
 
#page-home #wrapper #quick-links-blq ul li a:after {
	display: block;
	content: '';
	float:left;
	width: 30px;
	height: 30px;
	background: url(../images/sprite-quicklinks.png) -0px -0px no-repeat;
	background-size: 30px 450px;
   margin: -6px 9px -2px -9px;
  }

#page-home #wrapper #quick-links-blq ul li#journey-planner-button a:after {
	background-position: -0px -0px;
}

#page-home #wrapper #quick-links-blq ul li#real-time-button a:after {
	background-position: -0px -53px;
}

#page-home #wrapper #quick-links-blq ul li#timetables-button a:after {
	background-position: -0px -106px;
}

#page-home #wrapper #quick-links-blq ul li#register-metrocard-button a:after {
	background-position: -0px -158px;
}

#page-home #wrapper #quick-links-blq ul li#manage-metrocard-button a:after {
	background-position: -0px -210px;
}

#page-home #wrapper #quick-links-blq ul li#customer-survey-button a:after {
	background-position: -0px -262px;
}  

#page-home #wrapper #quick-links-blq ul li#footy-express a:after {
	background-position: -0px -306px;
}

#page-home #wrapper #quick-links-blq ul li#contacts-us a:after {
	background-position: -0px -346px;
}

#page-home #wrapper #quick-links-blq ul li#metromate a:after {
	background-position: -0px -400px;
}



  
#page-home #wrapper #quick-links-blq ul li a:hover {
	background: rgba(0,79,129,1);
}

@media only screen and (max-width : 600px) {
	
	#page-home #wrapper #quick-links-blq {
		padding: 2px 0;
		background: none;
		-webkit-border-top-left-radius: 0;
		-moz-border-radius-topleft: 0;
		border-top-left-radius: 0;
	}
	
	#page-home #wrapper #quick-links-blq ul li a {
		padding: 15px;
		background: rgba(24,51,93,.65);
	}
	
	#page-home #wrapper #quick-links-blq ul li a:hover {
		background: rgba(24,51,93,.85);
	}
	
	#page-home #wrapper #quick-links-blq ul li:hover .quick-links-bubble,
	#page-home #wrapper #quick-links-blq .quick-links-bubble {
		left: auto;
		opacity: 1;
		position: relative;
		top: auto;
		margin: 2px 0px 2px 30px;
		background: rgb(17, 66, 110);
		padding: 3px 8px;
		border-radius: 3px;
		color: #c7c6c6;
		width: auto;
		z-index: 200;
		font-size: 0.95em;
	}

}

  @media only screen and (max-width : 480px) {
	#page-home #wrapper #quick-links-blq {
		padding: 2px 4px 10px 4px;
		background: rgba(0,49,95,.5);
		margin: 0;
	}
	
	#page-home #wrapper #quick-links-blq ul li a {
		padding: 11px 15px;
	}
}


/*--- Announcements Box ---*/

#page-home #wrapper #announcements-blq
{
	background: #f7faff;
	overflow: hidden;
}

#page-home #wrapper #announcements-blq h2
{
	position: absolute;
	/*top: 15px;  Keeps in line with other panel's h2 */
	width: 50%;
	background: #cedbef /*url(../images/gradient-tabs-announcement.png) top repeat-x*/;
	cursor: pointer;
	text-align: center;
	font: bold 1.4em Arial, Helvetica, sans-serif;
	color: #0F2E5D;
	text-shadow: 0px 1px 0px white;
	/* border-bottom: 1px solid #fff; */
	padding: 10px 0;
}

@media only screen and (max-width : 1040px) {
	
	#page-home #wrapper #announcements-blq h2 span {
		display:block;
		max-width: 90px;
		margin: 0 auto;
	}
}

@media only screen and (min-width : 480px) {

#page-home #wrapper #announcements-blq
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 18px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 0px 18px 0px;
	border-radius: 0px 0px 18px 0px;
}

}

/* Tabs */

#page-home #wrapper #announcements-blq #tab-2-trigger
{
	right: 0;
	top: 0;
}

#page-home #wrapper #announcements-blq h2{
	font-size: 12px;
}
#page-home #wrapper #announcements-blq h2.active
{
	background-color: #f7faff;
	color: #000;
	cursor: default;
	border-bottom: 1px solid #f8f9fe;
}

/* Service updates */

.service-alert{
	top: 40px;
	position: relative;
	padding: 10px 10px 10px 20px;
	border-bottom: 2px solid #f5b03a;
}
.service-alert-empty{
	top: 40px;
	position: relative;
	padding: 10px 10px 20px 20px;
	border-bottom: 2px solid #2eaa56;
}

#service-updates-blq .service-alert,
#service-updates-blq .service-alert-empty{
	top: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	border-bottom: none;
}

.service-alert img,
.service-alert-empty img{
	vertical-align: middle;
	margin-right: 10px;
}

.service-alert-empty img{
	float: left;
}

.service-alert .icon{
	background: url('../images/icon-service-alert.png') no-repeat left top;
	width: 35px;
	height: 31px;
	display: inline-block;
}
.service-alert-empty .icon{
	background: url('../images/icon-service-alert.png') no-repeat left top;
	width: 35px;
	height: 31px;
	display: inline-block;
}


#page-home #wrapper #announcements-blq ul.service-updates
{
	margin-top: 36px;
}

#page-home #wrapper #announcements-blq ul#unplanned_disruptions
{
	margin-top: 39px;
	overflow-x: hidden;
    overflow-y: auto;
    display: block;
    height: 270px;
    padding: 0px 0px 0px 0px;
}

#page-home #wrapper #announcements-blq #whats-new ul.service-updates
{
	margin-top: 30px;
}
#page-home #wrapper #announcements-blq ul.service-updates li.update {
	min-height: 60px;
}

#page-home #wrapper #announcements-blq ul.service-updates li.update a
{
	text-shadow: 0px 1px 0px #ffffff;
}

#page-home #wrapper #announcements-blq .announcements-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 5px 0 6px 0;
	border: none;
	width: 100%;
	text-align: center;
	font-size: 1em;
	background: #eaf2f9;
}
#page-home #wrapper #announcements-blq .announcements-footer a {
	margin: 0 5px;
}

#page-home #wrapper #announcements-blq a.twitter span {
	background: url(../images/sprite.png) -492px -1742px no-repeat;
	display: inline-block;
	font-size: 1em;
	padding: 13px 0 0 12px;
	margin-right: 5px;
}

#page-home #wrapper #announcements-blq span.link-arrow
{
	font-size: 1em;
	padding: 13px 0 0 12px;
	background: url(../images/link-arrow.png) 0 100% no-repeat;
	display:inline-block;
}


@media only screen and (max-width : 1040px) {
		
	#page-home #wrapper #announcements-blq ul.service-updates {
		margin-top: 55px;
	}
	#page-home #wrapper #announcements-blq #whats-new ul.service-updates
	{
		margin-top: 43px;
	}

	.service-alert,
	.service-alert-empty {
	  margin-top: 10px;
	}
	.service-alert img {
		width: 20px;
		height: auto;
	}
	
	#page-home #wrapper #announcements-blq ul.service-updates li.update:nth-child(4) {
		display: none;
	}
	
	#page-home #wrapper #announcements-blq .routes-affected li:nth-child(5) a
	{
		display: none;
	}
}

@media only screen and (max-width : 600px) {
	
	#page-home #wrapper #announcements-blq h2 {
		-webkit-box-shadow: inset 0px -10px 10px -7px rgba(162,173,189,.5);
		-moz-box-shadow: inset 0px -10px 10px -7px rgba(162,173,189,.5);
		box-shadow: inset 0px -10px 10px -7px rgba(162,173,189,.5);
	}
	
	#page-home #wrapper #announcements-blq h2.active {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}
	
	#page-home #wrapper #announcements-blq ul.service-updates {
		margin-bottom: 15px;
	}
	
	#page-home #wrapper #announcements-blq ul.service-updates li.update:nth-child(4) {
		display: block;
	}
	
	#page-home #wrapper #announcements-blq .routes-affected li:nth-child(5) a
	{
		display: inline;
	}
	
	.service-alert img {
		width: 31px;
		height: auto;
	}
	
	#page-home #wrapper #announcements-blq .announcements-footer {
	padding: 13px 0 15px 0;
	}

	#page-home #wrapper #announcements-blq ul#unplanned_disruptions
	{
		margin-top: 58px;
	}
}
@media only screen and (max-width : 480px) {
	#page-home #wrapper #announcements-blq {
		margin-bottom: 0;
	}
	
	#page-home #wrapper #announcements-blq .announcements-footer {
	-webkit-box-shadow: inset 0px -12px 10px -7px rgba(203,209,217,1);
	-moz-box-shadow: inset 0px -12px 10px -7px rgba(203,209,217,1);
	box-shadow: inset 0px -12px 10px -7px rgba(203,209,217,1);
	}
}

@media only screen and (max-width : 350px) {
	#page-home #wrapper #announcements-blq .routes-affected li:nth-child(5) a
	{
		display: none;
	}
}

	
	



/* SimplyScroll */

#page-home #wrapper #announcements-blq .scroller,
#page-home #wrapper #announcements-blq .scroller .scroller-clip
{
	width: 220px;
}

/*--- Callouts ---*/

#page-home #wrapper .callouts
{
	margin-bottom: 40px;
}

/* Video Dialog */

#lightbox-video { 
	/* the jquery ui theme might already have positioning styles for the lightbox, in which case the following styles might not be needed */
	/*position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -300px;
	margin-left: -320px;*/
	
	
	/* these probably will be needed regardless */
	/*display:none;
        background-color: #FFF;
	width: 640px;
	padding: 20px 20px 40px 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;*/
}

#lightbox-video .close {
	/* i'll pretty this up a bit once the markup is in the template */
	display: block;
	margin: -10px 0 10px 0;
	float: right;
}

/* ---- Slider ---- */

.slider-wrapper { height:389px; width:328px; overflow:hidden; }

.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.slider-wrapper .nivoSlider { /*desktop*/
  position: absolute;
  width: 328px;
  height: 389px;
  left: 50%;
  margin-left: -164px;
}

.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block; /*Turn off progress bard underneath slider*/
	/*display: none;*/
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none !important;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer; display:none !important;
}
.nivo-prevNav {
	left:0px; 
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.slider-wrapper .nivo-controlNav { /*desktop*/
	position: absolute;
	bottom: 0;
	width: 100%;
}

.nivo-controlNav {
	text-align: center;
	padding: 6px;
	line-height: 24px;
	position:relative;
	bottom: 24px;
	z-index:90;
	height: 30px;
	box-sizing: border-box;
	background: rgba(0,0,0,.3);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4c000000', endColorstr='#4c000000'); /* IE */
}

.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}

.slider-wrapper-mobile .nivo-controlNav {
	text-align: left;
	padding: 12px;
	line-height: 30px;
	height: 38px;
	bottom: 4px;
  }

.nivo-controlNav a {
	display:inline-block;
	width:14px;
	height:14px;
	border-radius: 7px;
	background-color: #888888;
	background-color: #FFF;
	-moz-opacity: .5;
	opacity:.5;
	filter: alpha(opacity=50);
	text-indent:-9999px;
	border:0;
	margin: 0 2px;
}
.slider-wrapper-mobile .nivo-controlNav a {
	margin: 0 6px;
}

.nivo-controlNav a.active {
	background-color: #ffffff;
	-moz-opacity: 1;
	opacity:1;
	filter: alpha(opacity=100);
}

a#nivo-pause,
a#nivo-pause-mobile{
	background: url('../images/pause.png') no-repeat;
	background-color: transparent;
	opacity:0.25;
	filter:alpha(opacity=25);
	float: right;
	border-radius: 0px;
}
a#nivo-play,
a#nivo-play-mobile {
	background: url('../images/play.png') no-repeat;
	background-color: transparent;
	opacity:0.25;
	filter:alpha(opacity=25);
	display: none;
	float: right;
	border-radius: 0px;
}

a#nivo-pause:hover,
a#nivo-pause-mobile:hover,
a#nivo-play:hover,
a#nivo-play-mobile:hover {
	opacity:1;
	filter:alpha(opacity=100);
}


@media only screen and (max-width : 800px) {
	.slider-wrapper {
		display: none;
	}	
	
	.slider-wrapper-mobile {
	margin-bottom: 0;
	}
	
	.slider-wrapper-mobile img {
		width: 100%;
		height: auto;
		margin-bottom: 4px;
	}	
}

@media only screen and (min-width : 801px) {
	.slider-wrapper-mobile {
		display: none;
	}
}


/* ==========================================================================
   Route Page
   ========================================================================== */

#page-route #route-details
{
	position: relative;
	margin-left: 180px;
	min-height: 175px;
}

#page-route #route-details h1 .route-sign
{
	position: absolute;
	display: block;
	left: -180px;
	width: 130px;
	height: 130px;
	text-align: center;
	padding: 15px;
}

#page-route #route-details h1 .route-sign .route-number
{
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	font-weight: bold;
	height: 130px;
	width: 130px;
	font-size: 2.5em;
}

#page-route #route-details h1 .route-sign .route-icon
{
	position: absolute;
	top: -10px;
	left: -10px;
	width: 51px;
	height: 51px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}

#page-route #route-details h1 .route-sign .route-shadow
{
	position: absolute;
	display: block;
	width: 160px;
	bottom: -20px;
	left: 0;
	background: url(../images/sprite.png) center -1578px repeat-x;
	height: 20px;
}

#page-route #route-details h1 .route-title
{
	display: inline-block;
	margin: 15px 0;
	font-size: 2em;
	font-weight: bold;
	width: 100%;
}

#page-route #route-details h1 .route-title,
#page-route #route-details p,
#page-route #route-details h2
{
	text-shadow: 0px 1px 0px #ffffff;
}

#page-route #route-details p
{
	font-size: 1.1em;
	line-height: 1.15em;
	margin-bottom: 15px;
}

#page-route #route-details h2
{
	font-weight: bold;
	margin-bottom: 2px;
	font-size: 1.1em;
}

@media only screen and (max-width : 800px) {

#page-route #route-details {
	margin: 20px 20px 0 90px ;
	min-height: 0;
}

#page-route #route-details h1 .route-sign
{
	width: 50px;
	height: 50px;
	padding: 10px 8px 6px 8px;
	left: -90px;
}

#page-route #route-details h1 .route-title {
	font-size: 1.5em;
	 margin: 10px 0;
}

#page-route #route-details h1 .route-sign .route-shadow {
  width: 80px;
  background-size: 50%;
  }
  
#page-route #route-details h1 .route-sign .route-number {
	width: 50px;
	height: 50px;
}

#page-route #route-details h1 .route-sign .route-icon {
	width: 26px;
	height: 26px;
	background-size: 300px 1600px;
	}
	
#page-route .bus #route-details h1 .route-sign .route-icon {
	background-position: 0 -1097px !important;
}

}

@media only screen and (max-width : 480px) {
#page-route #route-details {
	margin-left: 110px;
}
}

/* Route variations */

#page-route #route-details ol
{
	white-space: normal;
	overflow: visible;
	padding-top: 3px;
	height: auto;
}

#page-route #route-details ol li
{
	display: inline;
	line-height: 1.8em;
	margin-right: 1px;
}

#page-route #route-details ol li a
{
	font-size: 1em;
}

/* Utility links */

#page-route #utility-links
{
	padding: 20px 0;
	margin-bottom: 35px; 
}

#page-route #utility-links li
{
	width: 33.33%;
}

#page-route #utility-links li.download a
{
	border-left: 1px solid #d0d4dc;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px; 
}

#page-route #utility-links li.subscribe a
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 5px 5px 0px;
	border-radius: 0px 5px 5px 0px; 
}

/* Route announcements */

#page-stop #route-announcements,
#page-route #route-announcements,
#page-mymetro #route-announcements
{
	margin: 15px 0 4px 0;
	background: #ffffde url(../images/route-announcements.png) 15px 12px no-repeat;
	padding: 15px 15px 0 70px;
	min-height: 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #fff;
}

#page-stop  #route-announcements li,
#page-route #route-announcements li,
#page-mymetro #route-announcements li
{
	padding-bottom: 15px;
}

#page-stop  #route-announcements strong,
#page-route #route-announcements strong,
#page-mymetro #route-announcements strong
{
	display: block;
}

@media only screen and (max-width : 480px) {

#page-route #route-announcements,
#page-mymetro #route-announcements
{
	margin: 15px 20px 4px 20px;
}
}

/* Route information */
#page-route #route-information,
#page-mymetro #route-information
{
	margin: 15px 0 4px 0;
	background: #f3f3f3 url(../images/contents/sprite-list-icons.png) 12px -379px no-repeat;
	padding: 15px 15px 0 70px;
	min-height: 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #fff;
}

#page-route #route-information li,
#page-mymetro #route-information li
{
	padding-bottom: 15px;
}

#page-route #route-information strong,
#page-mymetro #route-information strong
{
	display: block;
}

@media only screen and (max-width : 480px) {

#page-route #route-information,
#page-mymetro #route-information
{
	margin: 15px 20px 4px 20px;
}
}

/* Route (tabs) */

#page-route #route
{
	position: relative;
	padding-top: 40px;
}

#page-route .stops-heading {
  font-size: 1.25em;
  font-weight: bold;
  padding: 10px 0 20px 0;
}

#page-route #route h3
{
	position: absolute;
	width: 49%;
	background: #f8f8f8;
	border: 1px solid #d0d4dc;
	border-bottom: none;
	text-align: center;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px;
	margin-top: 8px;
	cursor: pointer;
	padding-top: 9px;
	height: 22px;
	color: #00305e;
}

#page-route #route h3:hover
{
	color: #0075b5;
}

#page-route #route #route-tab-1
{
	position: absolute;
	left: 0;
	top: 0;
}

#page-route #route #route-tab-2
{
	position: absolute;
	top: 0;
	right: 0;
}

#page-route #route #route-tab-1 a,
#page-route #route #route-tab-2 a {
	text-decoration: none;
}

#page-route #route h3.active
{
	padding-top: 12px;
	color: #000;
	height: 28px;
	margin-top: 0;
	background: #fff;
	font-weight: bold;
	cursor: default;
}

@media only screen and (max-width : 600px) {
	
	#page-route #route {
		padding-top: 0;
	}

	#page-route #route #route-tab-1,
	#page-route #route #route-tab-2 {
		position: relative;
		width: 100%;
	}
	
	#page-route #route .accordion .head {
		text-align: left;	
		height: 28px;
		font-weight: bold;
	}
	
	#page-route #route .accordion .head a
	{
		position: relative;
		display: block;
		text-decoration: none;
		background: url(../images/collapse-large.png) 8px center no-repeat;
		padding: 0 10px 0 40px;
		line-height: 18px;
	}
	
	#page-route #route .accordion .collapsed a
	{
		background: url(../images/expand-large.png) 8px center no-repeat;
	}

}

@media only screen and (max-width : 480px) {
	
	#page-route .stops-heading {
	  padding: 0 20px 10px 20px;
	}
	
	#page-route #route .accordion
	{
		position: relative;
		margin: 0;
	}
	
	#page-route #route .accordion .head
	{
		position: relative;
		background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
		border-top: 1px solid #d0d4dc;
		cursor: pointer;
		color: #00305e;
		font-size: 16px;
		padding: 15px 10px 17px;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		margin: 0;
		height: auto;
		box-sizing: border-box;
	}
	
	#page-route #route .accordion:last-child
	{
		border-bottom: 1px solid #d0d4dc;
	}
		
	#page-route #route-related .fold-blue-horizontal h2 {
		margin: 0;
	}
	#page-route #route-related ul li .route-name {
	  padding-right: 15px;
	}
}


/* Table */

#page-route #route table
{
	background: #fff;
	border: 1px solid #d0d4dc;
	border-bottom: none;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-radius: 0px 0px 4px 4px;
	border-radius: 0px 0px 4px 4px; 
}

#page-route #route table tr.route-labels-holder td
{
	margin-top: 30px;
	font-size: 1em;
}
#page-route #route table tr.route-labels-holder td.third-col
{
  margin-top: 3px;
}

#page-route #route table tr.route-labels-holder td.third-col a {
	display: inline-block;
	height: 15px;
	width: 15px;
	background: url(../images/sprite.png) -160px -867px no-repeat;
	background-size:300px 1600px;
	margin: 1px 0 2px 0;
}

#page-route #route table .route-labels span
{
	display: inline-block;	
	-moz-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-webkit-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-o-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	-ms-transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
	transform: scale(1) rotate(-45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 
	font-weight: bold;
	width: 16px;
}

/* Sticky Scroll CSS */

#page-route #route table .sticky-active
{
	position: absolute !important;
	background: #fff;
	padding: 20px 0 10px;
	z-index: 999;
}

/* -- */

#page-route #route table tr
{
	height: 44px;
	border-bottom: 1px dashed #d8d8d8;
}

#page-route #route table tr:last-child
{
	border-bottom: 1px solid transparent;
}

#page-route #route table tr:hover
{
	border-top: 1px solid transparent;
}

#page-route #route tr.route-labels-holder,
#page-route #route tr.route-labels-holder:hover
{
	background-color: #fff !important;
	border: none !important;
    height: 60px;
	cursor: default;
}

#page-route #route table .first-col,
#page-route #route table .second-col,
#page-route #route table .third-col
{
	position: absolute;
}

#page-route #route table .first-col
{
	width: 159px;
	text-align: center;
}

#page-route #route table .second-col
{
	left: 160px;
	width: 55%;
}

#page-route #route table .third-col {
  right: 5%;
  width: 9%;
  text-align: center;
}

#page-route #route table .third-col p
{
	line-height: 1.1em;
	padding: 1px 0 0 0;
}

#page-route #route table tr td.second-col,
#page-route #route table tr td.third-col
{
	padding-top: 7px;
	color: #555;
}

#page-route #route table .first-col .route-wrapper
{
	margin-top: -1px;
}

#page-route #route table .first-col .route-wrapper div
{
	display: inline-block;
	width: 16px;
	height: 45px;
	text-indent: -2000em;
	background-position: 0 -252px;
	background-repeat: no-repeat;
}

#page-route #route table .first-col .route-wrapper div.route-main
{
	background-position: 0 -54px;
}

#page-route #route table .first-col .route-wrapper div.route-start
{
	background-position: 0 10px;
}

#page-route #route table .first-col .route-wrapper div.route-variation-start
{
	background-position: 0 -188px;
}

#page-route #route table .first-col .route-wrapper div.route-end
{
	background-position: 0 -118px;
}

#page-route #route table .first-col .route-wrapper div.route-variation-end
{
	background-position: 0 -316px;
}

#page-route #route table .first-col .route-wrapper div.bypass
{
	background-position: 0 -18px;
}

#page-route #route table .first-col .route-wrapper div.route-variation-bypass
{
	background-position: 0 -220px;
}

#page-route #route table .first-col .route-wrapper div.empty
{
	background-image: none !important;
}

#page-route #route table .first-col .route-wrapper div.empty:before,
#page-route #route table .first-col .route-wrapper div.bypass:before,
#page-route #route table .first-col .route-wrapper div.route-variation-bypass:before
{
	content: ".";
}

#page-route #route .back-to-top
{
	border: 1px solid #d0d4dc;
	border-top: none;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-radius: 0px 0px 3px 3px;
	border-radius: 0px 0px 3px 3px; 
	background-color:#f8f8f8;
}

#page-route #route .content-shadow
{	
	background: url(../images/sprite.png) center -590px no-repeat;
	height: 12px;
}

@media only screen and (max-width : 600px) {
	
	#page-route #route table {
		font-size: .95em;
	}
		
	#page-route #route table tr {
	  height: 75px;
	}
	
	#page-route #route table .first-col {
	  width: 102px;
	  }
	
	#page-route #route table .second-col {
	  left: 112px;
	  width: 50%;
	}
	
	#page-route #route table .third-col {
	  right: 2.5% !important;
	  width: 11% !important;
	}
	
	#page-route #route table .first-col .route-wrapper div
	{
		display: inline-block;
		width: 16px;
		height: 76px;
		text-indent: -2000em;
		background-position: 0 -504px;
		background-repeat: no-repeat;
		background-size: 16px 659px;
	}
	
	#page-route #route table .first-col .route-wrapper div {
		background-image: url(../images/table-bus-route-sprite-mobile@2x.png);
	}
	#page-route #route table .first-col .route-wrapper div.route-main {
	  background-position: 0 -118px;
	}
	#page-route #route table .first-col .route-wrapper div.route-start {
	  background-position: 0 10px;
	}
	#page-route #route table .first-col .route-wrapper div.route-variation-start {
	  background-position: 0 -368px;
	}
	#page-route #route table .first-col .route-wrapper div.route-end {
	  background-position: 0 -236px;
	}
	#page-route #route table .first-col .route-wrapper div.route-variation-end {
	  background-position: 0 -624px;
	}
	#page-route #route table .first-col .route-wrapper div.route-variation-end {
	  background-position: 0 -624px;
	}
	#page-route #route table .first-col .route-wrapper div.route-main.bypass {
		background-position: 0 -36px;
	}
	#page-route #route table .first-col .route-wrapper div.bypass,
	#page-route #route table .first-col .route-wrapper div.route-variation-bypass {
		background-position: 0 -440px;
	}
	
}


/* Routes dropdown */

#page-route #routes-dropdown
{
	margin-left: 20px;
	padding-bottom: 15px;
}

#page-route #routes-dropdown label
{
	text-shadow: 0px 1px 0px #ffffff;
	padding:0 0 3px 3px;
}

#page-route #routes-dropdown select
{
	width: 100%;
	font-size: 1em;
}

@media only screen and (max-width : 800px) {

#page-route #routes-dropdown
{
	margin-left: 0;
}

}

/* Timetables */

#page-route #route-timetables
{
	margin-left: 20px;
	margin-bottom: 15px;
	background: #fff;
	border: 1px solid #D0D4DC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 20px;
}

#page-route #route-timetables h2
{
	font-size: 1.35em;
	font-weight: bold;
}

#page-route #route-timetables .route-timetable-subgroup
{
	color: #555;
	font-size: 1.1em;
	display: block;
	margin-top: 20px;
	border-bottom: 1px solid #f3f3f3;
	margin-left: -20px;
	margin-right: -20px;
	padding-left: 20px;
	line-height: 2.3em;
}

#page-route #route-timetables ul{
	display: block;
	margin: 15px 0 10px;
}

#page-route #route-timetables ul li
{
	margin-bottom: 8px;
}

#page-route #route-timetables ul li:last-child
{
	margin-bottom: 10px;
}

#page-route #route-timetables ul li a
{
	display: inline-block;
	background-position: 0 4px;
}

@media only screen and (max-width : 800px) {

#page-route #route-timetables
{
	margin-left: 0;
}

}

/* Printed timetable */

#page-route #route-printed,
#page-route #route-future-printed
{
	margin-left: 20px;
	margin-bottom: 15px;
	background: #fff;
	border: 1px solid #D0D4DC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 20px;
}

#page-route #route-printed h2,
#page-route #route-future-printed h2
{
	font-size: 1.35em;
	font-weight: bold;
	margin-bottom: 15px;
}
#page-route #route-future-printed p{
    margin-bottom: 15px;
}
#page-route #route-printed a.pdf,
#page-route #route-future-printed a.pdf{
	display: inline-block;
	background-repeat: no-repeat;
	background-image: url(../images/mini-icons.png);
	background-position: 0 -957px;
	line-height: 20px;
	padding-left: 20px;
}

@media only screen and (max-width : 800px) {

#page-route #route-printed
{
	margin-left: 0;
}

#page-route #route-printed a.pdf,
#page-route #route-future-printed a.pdf{
	background-image: url(../images/mini-icons@2x.png);
	background-size: 16px 2078px;
}
}

/* Related routes */

#page-route #route-related
{
	margin: 30px 0 0 20px;
}

#page-route #route-related .fold-blue-horizontal
{
	margin: 0 -20px 20px;
}

#page-route #route-related .fold-blue-horizontal h2
{
	position: absolute;
	font-size: 1.25em;
	font-weight: bold;
	margin: 0 0 0 30px;
}

#page-route #route-related ul li
{
	height: 90px;
}

#page-route #route-related ul li a
{
	text-decoration: none;
}

#page-route #route-related ul li .route-sign
{
	position: absolute;
	padding: 10px;
	width: 52px;
	height: 52px;
}

#page-route #route-related ul li .route-number
{
	display: table-cell;
	vertical-align: middle;
	height: 52px;
	width: 52px;
	color: #fff;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
}

#page-route #route-related ul li .route-name
{
	font-size: 1.25em;
	text-decoration: none;
	font-weight: bold;
	margin-left: 80px;
	display: table-cell;
	vertical-align: middle;
	height: 72px;
	padding-left: 85px;
}

#page-route #route-related ul li .route-shadow
{
	position: absolute;
	background: url(../images/sprite.png) center -1532px;
	height: 17px;
	width: 72px;
	bottom: -17px;
	margin-left: -10px;
}
#page-route #route-related .bus .route-sign
{
	/*background-color: #2eaa56;*/
	background-color: #2da955;
}
#page-route #route-related .train .route-sign
{
	background-color: #27a7df;
}
#page-route #route-related .tram .route-sign
{
	background-color: #eb2127;
}
/* Bus theme */

#page-route .bus .route-sign
{
	/*background-color: #2eaa56;*/
	background-color: #2da955;
}

#page-route .bus #route-details ol li .variation-number
{
	/*background-color: #2eaa56;*/
	background-color: #2da955;
}

#page-route .bus #route .route-labels
{
	/*color: #2eaa56;*/
	color: #0d8935;
}

#page-route .bus #route-details h1 .route-sign .route-icon
{
	background-position: 0 -2195px;
}

#page-route .bus #route table .sticky-active
{
	border-bottom: 2px solid #2EAA56;
}

#page-route .bus #route table tr:hover
{
	background-color: #e0f2e6;
	border-bottom: 1px solid #2EAA56;
}

#page-route .bus #route table .first-col .route-wrapper div
{
	background-image: url(../images/table-bus-route-sprite.png);
}

@media only screen and (max-width : 600px) {
	#page-route .bus #route table .first-col .route-wrapper div {
		background-image: url(../images/table-bus-route-sprite-mobile@2x.png);
	}
	
	#page-route #route-related .fold-blue-horizontal {
		margin: 0 0 20px;
	}
}


/* Train theme */

#page-route .train .route-sign
{
	background-color: #27a7df;
}

#page-route .train #route-details ol li .variation-number
{
	border-color: #27a7df;
}

#page-route .train #route .route-labels
{
	color: #27a7df;
}

#page-route .train #route-details h1 .route-sign .route-icon
{
	background-position: -71px -2195px;
}

#page-route .train #route table .sticky-active
{
	border-bottom: 2px solid #27a7df;
}

#page-route .train #route table tr:hover
{
	background-color: #ddf1fa;
	border-bottom: 1px solid #27a7df;
}

#page-route .train #route table .first-col .route-wrapper div
{
	background-image: url(../images/table-train-route-sprite.png);
}

@media only screen and (max-width : 600px) {
	#page-route .train #route table .first-col .route-wrapper div {
		background-image: url(../images/table-train-route-sprite-mobile@2x.png);	
	}
}

/* Tram theme */

#page-route .tram .route-sign
{
	background-color: #eb2127;
}

#page-route .tram #route-details ol li .variation-number
{
	border-color: #eb2127;
}

#page-route .tram #route .route-labels
{
	color: #eb2127;
}

#page-route .tram #route-details h1 .route-sign .route-icon
{
	background-position: -142px -2195px;
}

#page-route .tram #route table .sticky-active
{
	border-bottom: 2px solid #eb2127;
}

#page-route .tram #route table tr:hover
{
	background-color: #fdf0f0;
	border-bottom: 1px solid #eb2127;
}

#page-route .tram #route table .first-col .route-wrapper div
{
	background-image: url(../images/table-tram-route-sprite.png);
}

@media only screen and (max-width : 600px) {
	#page-route .tram #route table .first-col .route-wrapper div {
		background-image: url(../images/table-tram-route-sprite-mobile@2x.png);
	}
}


/* ==========================================================================
   Stop Page
   ========================================================================== */

#page-stop #stop-details, #page-stop .stop-details
{
	position: relative;
	margin-left: 180px;
	min-height: 170px;
}

#page-stop #stop-details h1 .stop-type, #page-stop .stop-details h1 .stop-type
{
	position: absolute;
	left: -180px;
	top: 28px;
	z-index: 888;
	width: 160px;
	text-align: center;
	font-size: 1.1em;
}

#page-stop #stop-details h1 .stop-sign, #page-stop .stop-details h1 .stop-sign
{
	position: absolute;
	display: block;
	left: -180px;
	width: 130px;
	height: 130px;
	text-align: center;
	padding: 15px;
	background-image: url(../images/sprite.png);
}

#page-stop #stop-details h1 .stop-sign .stop-number, #page-stop .stop-details h1 .stop-sign .stop-number
{
	display: table-cell;
	vertical-align: middle;
	font-weight: bold;
	height: 130px;
	width: 130px;
	font-size: 2.5em;
}

#page-stop #stop-details h1 .stop-sign .stop-icon, #page-stop .stop-details h1 .stop-sign .stop-icon
{
	position: absolute;
	top: -10px;
	left: -10px;
	width: 51px;
	height: 51px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}

#page-stop #stop-details h1 .stop-side, #page-stop .stop-details h1 .stop-side
{
	position: absolute;
	left: -180px;
	top: 112px;
	z-index: 888;
	width: 160px;
	text-align: center;
	font-size: 1.1em;
}

#page-stop #stop-details h1 .stop-address, #page-stop .stop-details h1 .stop-address
{
	display: inline-block;
	margin: 15px 0 5px 0;
	font-size: 2em;
	font-weight: bold;
	width: 98%;
}

#page-stop #stop-details h1 .stop-suburb, #page-stop .stop-details h1 .stop-suburb
{
	display: block;
	font-size: 14px;
	/*font-weight: bold;
	margin-bottom: 15px;*/
}


#page-stop #stop-details h1 .stop-title,
#page-stop #stop-details p,
#page-stop .stop-details h1 .stop-title,
#page-stop .stop-details p
{
	text-shadow: 0px 1px 0px #ffffff;
}

#page-stop #stop-details p, #page-stop .stop-details p
{
	font-size: 1.1em;
	line-height: 1.15em;
	margin-bottom: 15px;
}
#page-stop #stop-details p a, #page-stop .stop-details p a 
{
	display: inline-block;
	height: 15px;
	width: 15px;
	background: url(../images/sprite.png) -160px -867px no-repeat;
	background-size:300px 1600px;
	margin: 5px 0 -2px 0;
}

@media only screen and (max-width : 800px) {
	
#page-stop #stop-details, #page-stop .stop-details
{
	margin: 20px 20px 0 90px ;
	min-height: 0;
}

#page-stop #stop-details h1 .stop-address, #page-stop .stop-details h1 .stop-address
{
	font-size: 1.5em;
	margin: 10px 0 10px 15px;
}

#page-stop #stop-details h1 .stop-suburb,
#page-stop #stop-details p,
#page-stop .stop-details h1 .stop-suburb,
#page-stop .stop-details p
{
  margin-left: 15px;
}

#page-stop #stop-details h1 .stop-sign, #page-stop .stop-details h1 .stop-sign  
{
	left: -80px;
	width: 51px;
	height: 51px;
  	background-size: 300px 1600px;
	background-position: 0 -1137px;	
}

#page-stop .bus #stop-details h1 .stop-sign, #page-stop .bus .stop-details h1 .stop-sign  
{
  background-position: 0 -1137px;
  }

#page-stop .train #stop-details h1 .stop-sign, #page-stop .train .stop-details h1 .stop-sign 
{
  background-position: -84px -1137px;
  }

#page-stop .tram #stop-details h1 .stop-sign, #page-stop .tram .stop-details h1 .stop-sign  
{
  background-position: -170px -1137px;
  }

#page-stop #stop-details h1 .stop-sign .stop-icon, #page-stop .stop-details h1 .stop-sign .stop-icon 
{
	background-position: 0 -1097px !important;
  	background-size: 300px 1600px;
	top: -10px;
	left: 0px;
	width: 26px;
	height: 26px;
  }
  
#page-stop .bus #stop-details h1 .stop-sign .stop-icon, #page-stop .bus .stop-details h1 .stop-sign .stop-icon  
{
	background-position: 0 -1097px !important;
}
  
#page-stop .train #stop-details h1 .stop-sign .stop-icon, #page-stop .train .stop-details h1 .stop-sign .stop-icon 
{
	background-position: -35px -1097px !important;
}
  
#page-stop .tram #stop-details h1 .stop-sign .stop-icon, #page-stop .tram .stop-details h1 .stop-sign .stop-icon 
{
	background-position: -70px -1097px !important;
}
  
#page-stop #stop-details h1 .stop-type, #page-stop .stop-details h1 .stop-type 
{
	left: -81px;
	top: 8px;
	width: 80px;
	font-size: .8em;
}

#page-stop .train #stop-details h1 .stop-type, #page-stop .train .stop-details h1 .stop-type  
{
	top: 18px;
}


#page-stop #stop-details h1 .stop-sign .stop-number, #page-stop .stop-details h1 .stop-sign .stop-number 
{
  height: 50px;
  width: 50px;
}

#page-stop #stop-details h1 .stop-side, #page-stop .stop-details h1 .stop-side 
{
  left: -64px;
  top: 57px;
  width: 50px;
  font-size: .8em;
}

}

/* Utility links */

#page-stop #utility-links
{
    margin-bottom: 34px;
    padding: 20px 0 0 0;
    width: 80%;
}

#page-stop #utility-links li
{
	width: 50%;
    /* changed from 33.33% */
}

#page-stop #utility-links li.start-here a
{
	border-left: 1px solid #d0d4dc;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius: 5px 0px 0px 5px;
	border-radius: 5px 0px 0px 5px; 
}

#page-stop #utility-links li.save a
{
	/*-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;*/
}

/* Next Services */

#next-services-icon {
	float: left;
    background: url("../images/sprite.png") no-repeat scroll -38px -1739px transparent;
    height: 20px;
    width: 20px;
    margin: 5px 3px 0 10px;
}

#page-stop table.next-services tr:first-child th h2 {
	font-weight:  bold;
	margin-top: 7px;
}

#page-stop table.next-services th:first-child
{
	width: 440px;
	text-align: left;
	padding: 0;
}

#page-stop table.next-services th.arrive{
	text-align: right;
	padding-right: 30px;
}

#page-stop table.next-services td
{
	width: 30%;
	text-align: right;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #d0d4dc;
	padding: 7px 12px 7px 12px;	
}

#page-stop table.next-services td span
{
	position: relative;
	display: block;
}

#page-stop table.next-services td span .non-realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -37px -1737px;
	position: absolute;
	top: -9px;
	right: -14px;
    height: 20px;
	overflow: hidden;
    margin: 0px 0px 0px 0px;
    width: 20px;
    text-indent: 9999px;
	white-space: nowrap;
}

#page-stop table.next-services tr.first td {
	border-top: 0;
}

#page-stop table.next-services tr.last td {
	border-bottom: 0;
}

#page-stop table.next-services td:first-child
{
	width: 70%;
	text-align: left;
}

#page-stop table.next-services .bus-label
{
	min-width: 30px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}
#page-stop table.next-services .tram-label
{
	min-width: 30px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}
#page-stop table.next-services .train-label
{
	min-width: 30px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
}
#page-stop table.next-services .bus-label,
#page-stop table.next-services .tram-label,
#page-stop table.next-services .train-label{
	font-size: 1.3em;
	width:68px;
}

#page-stop table.next-services .arrive span {
	width: 120px;
	display: inline-block;
	text-align: center;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: 2px solid #a4a7ad;
	border-radius: 3px;
	padding: 2px 4px 1px;
	font-size: 1em;
	font-weight: bold;
	background: #fff;
}
#page-stop table.next-services td span.headsign{
	padding-top: 5px;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.8em;
}
#page-stop table.next-services td span.headsign{
	padding-top: 5px;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.8em;
	display: inline;
}

#page-stop .route-shadow
{
	background: url(../images/sprite.png) center -590px;
	height: 20px;
	width: 100%;
}

#page-stop span.next_services_label
{
    font-size:0.9em;
    padding-top:13px;
    padding-left:3px;
    display:block;
    text-align:right;
}

/* Next Services Realtime */

#page-stop table.next-services-realtime,
#page-stop table.next-services {
	position: relative;
	background: #F3F3F3 url(../images/route-bg.png) top repeat-x;
	border: 1px solid #d0d4dc;
	margin:-10px 0 0 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	border-collapse: inherit;
}

#page-stop table.next-services-realtime tr:first-child,
#page-stop table.next-services tr:first-child {
	background: #dedede url(../images/realtime-header-bkgd.png) top repeat-x;
}

#page-stop table.next-services-realtime th,
#page-stop table.next-services th
{
	border-bottom: 1px solid #D0D4DC;
	padding: 15px 12px 11px 12px;
	color: #555555;
	font-weight:bold;
 	text-shadow: 0px 1px 0 #FFFFFF;
}

#page-stop table.next-services-realtime th.arrive
{
	text-align: center;
}

#realtime-label {
	background-image: url(../images/realtime-bkgd-green.png);
	background-position: center right;
	background-repeat: no-repeat;
	width: 140px;
	height: 1em ;
	padding: 14px 0 15px 0;
	margin: -15px 10px -15px -12px; 
	float: left;
	color: #FFF;
	border-radius: 3px 0 0 0;
}

.bus #realtime-label {
 	text-shadow: 0px -1px 0 #228b44;
	background-image: url(../images/realtime-bkgd-green.png);
}

.train #realtime-label {
 	text-shadow: 0px -1px 0 #2f86ac;
	background-image: url(../images/realtime-bkgd-blue.png);
}

.tram #realtime-label {
 	text-shadow: 0px -1px 0 #aa1418;
	background-image: url(../images/realtime-bkgd-red.png);
}

#realtime-label span {
	display: block;
	float: left;
	width: 42px;
	height: 1em;
	margin: -14px 3px -14px 0;
	padding: 14px 0 14px 0;
	background: url(../images/sprite.png) no-repeat scroll -63px -1729px;
}

.bus #realtime-label span {
	background: url(../images/sprite.png) no-repeat scroll -63px -1729px;
}

.train #realtime-label span {
	background: url(../images/sprite.png) no-repeat scroll -102px -1729px;
}

.tram #realtime-label span {
	background: url(../images/sprite.png) no-repeat scroll -143px -1729px;
}

table.next-services-realtime #next-services-icon {
	float: left;
    background: url("../images/sprite.png") no-repeat scroll -38px -1739px transparent;
    height: 17px;
    width: 20px;
    margin: -2px 3px 0 0;
}

#page-stop table.next-services-realtime h2 {
	font-weight:  bold;
}

#page-stop table.next-services-realtime tr.service_top td
{
	width: 10%;
	text-align: right;
	vertical-align: top;
	border-top: 1px solid #fff;
	border-bottom: 0px solid #d0d4dc;
	padding: 7px 12px 0px 12px;	
}
#page-stop table.next-services-realtime tr.service_top td.icons
{
	padding: 7px 0px 0px 12px;	
}
#page-stop table.next-services-realtime tr.service_bottom td
{
	width: 10%;
	text-align: right;
	border-top: 0px solid #fff;
	border-bottom: 1px solid #d0d4dc;
	padding: 0px 12px 7px 12px;	
}

#page-stop table.next-services-realtime td span
{
	position: relative;
	display: block;
	width: 150px;
}
#page-stop table.next-services-realtime td span.headsign{
	padding-top: 5px;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.8em;
	display: inline;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  }

#page-stop table.next-services-realtime tr.first td {
}

#page-stop table.next-services-realtime tr.last td {
	border-bottom: 0;
}

#page-stop table.next-services-realtime tr.service_top td:first-child
{
	width: 80%;
	text-align: left;
}

#page-stop table.next-services-realtime td span .icon {
	position: relative;
    height: 20px;
    width: 20px;
    margin: 0px;
	overflow: hidden;
	white-space: nowrap;
	display: block;
	float: right;
    text-indent: 9999px;
}

#page-stop table.next-services-realtime td span .wheelchair-access {
	background: url(../images/sprite.png) no-repeat scroll -191px -1739px;
    margin: 0px 3px 0px 0px;
}

#page-stop table.next-services-realtime td span .electric-vehicle {
	background: url(../images/sprite.png) no-repeat scroll -289px -1739px;
    margin: 0px 3px 0px 0px;
}

#page-stop table.next-services-realtime td span .non-realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -37px -1737px;
}
#page-stop table.next-services-realtime td span .realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -256px -1739px;
}
#page-stop table.next-services-realtime td span .platform {
	position: relative;
    height: 20px;
	overflow: hidden;
    margin: 0px 12px 0px 0px;
    width: 72px;
	white-space: nowrap;
	font-weight: bold;
	display: block;
	float: right;
	top: 3px;
}

#page-stop .next_services_label span.realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -256px -1739px;
	position: absolute;
	top: -3px;
	left: 6px;
    height: 0;
    padding-top: 20px;
	overflow: hidden;
    margin: 0px -11px 0 0;
    width: 20px;
}

#page-stop table.next-services-realtime .bus-label,
#page-stop table.next-services-realtime .train-label,
#page-stop table.next-services-realtime .tram-label {
	width:68px;
	display: inline-block;
	text-align: center;
	margin-right: 10px;
	font-size: 1.2em;
	margin-bottom: 7px;
	line-height: 1em;
}

#page-stop table.next-services-realtime .arrive span {
	width: 101px;
	display: inline-block;
	text-align: center;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: 2px solid #a4a7ad;
	border-radius: 3px;
	padding: 3px 4px 1px;
	font-size: 1em;
	font-weight: bold;
	background: #fff;
}
#page-stop .route-shadow
{
	background: url(../images/sprite.png) center -590px;
	height: 20px;
	width: 100%;
}

#page-stop span.next_services_label
{
    font-size:0.9em;
    padding-top:13px;
    padding-left:3px;
    display:block;
    text-align:center;
    position: relative;
}
#page-stop span.realtime-label 
{
	padding-left: 31px;
	position: relative;
	line-height: 1.5em;
}

#page-stop #realtime-label,
#page-stop table.next-services-realtime th,
#page-stop table.next-services-realtime h2,
#page-stop table.next-services h2 {
	font-size:11px !important;
}


#page-stop table.next-services-realtime td.realtime_loading_img,
#page-stop table.next-services td.realtime_loading_img
{
	text-align: center;
}

div#next_services{
	width:100%;
	display: block;
	text-align: center;
	margin-top: 85px;
	margin-bottom: 40px;
	position: relative;
}


@media only screen and (max-width : 800px) {
	
div#next_services{
	margin-top: 20px;
	margin-bottom: 20px;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
	border-bottom: 1px solid #d0d4dc;
}
	
/* Next Scheduled Services */

#page-stop table.next-services td {
	padding: 14px 10px 0 5px;	
	vertical-align: top;
	width: 60%;
}

#page-stop table.next-services th #next-services-icon,
#page-stop table.next-services-realtime th #next-services-icon {
	float: left;
	background: url(../images/sprite-realtime.png) no-repeat scroll 2px -230px;
	height: 26px;
	width: 26px;
	margin: -6px 3px 0 -11px;
  }

#page-stop table.next-services th.arrive {
	padding: 0 22px 6px 0;
	width: 6%;
	font-size: 11px;
	letter-spacing: -0.07em;
}

#page-stop table.next-services .arrive {
	padding: 12px 5px 0 0;	
	width: 20%;
	text-align: right;
}

#page-stop table.next-services tr:nth-child(2) td {
	border-top: 0;
}

#page-stop table.next-services .bus-label {
	float: left;
	min-width: 30px;
	display: block;
	text-align: center;
	margin: -3px 10px 12px 0;
	padding: 2px 4px 2px;
}

#page-stop table.next-services td span.headsign{
	padding-bottom: 5px;
	font-weight: bold;
	font-size: 1.1em;
}


/* Next Services Realtime */
#page-stop div#next_services img{
	margin: 20px auto;
}

/* Initial TABLE */
#page-stop table.next-services-realtime,
#page-stop table.next-services {
	margin: 0 0 20px 0;
	background: #FFF;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0; 
}

#page-stop table.next-services-realtime tr:first-child,
#page-stop table.next-services tr:first-child {
	background: #f3f3f3;
}
#page-stop table.next-services-realtime tr.non-realtime th{
	height: 21px;
}
#page-stop table.nearest-stops table.next-services-realtime tr:first-child,
#page-stop table.nearest-stops table.next-services tr:first-child {
	background-color: transparent;
}

#page-stop table.next-services-realtime tr:first-child th,
#page-stop table.next-services tr:first-child th  {
	margin:  0 0;
}

#page-stop table.next-services-realtime tr:first-child th h2 {
	position: absolute;
	left: 145px;
	top: 15px;
}
#page-stop table.next-services-realtime tr:first-child th h2.non-realtime {
	position: absolute;
	left: 38px;
	top: 12px;
}

#page-stop table.next-services-realtime tr.service_top td {
	border-bottom: 1px solid #d0d4dc;
	padding: 9px 10px 28px 9px !important;	
}
#page-stop table.next-services-realtime tr.service_bottom td {
	border-bottom: 1px solid #d0d4dc;
	padding: 0px 10px 5px 5px;	
}

#page-stop table.next-services-realtime td span,
#page-stop table.next-services td span  {
	margin-bottom: 14px;
	padding-right: 35px;
	width: auto;
}

#page-stop table.next-services-realtime th,
#page-stop table.next-services th {
	width: 75%;
	padding: 14px 10px 0 16px;
	font-size:13px;
}
#page-stop table.next-services-realtime h2 {
	font-size:13px;
}


#page-stop table.next-services-realtime th.arrive {
	vertical-align: middle;
	padding: 3px 22px 0 0;
	text-align:right;
}

#page-stop table.next-services-realtime .arrive {
	padding: 4px 5px 0 0;	
	width: 20%;
	text-align: right;
}

#page-stop table.next-services-realtime tr:last-child td {
	border-bottom: 0;
}

#page-stop table.next-services-realtime .bus-label,
#page-stop table.next-services-realtime .train-label,
#page-stop table.next-services-realtime .tram-label {
	float: left;
	display: block;
	margin: 0px 10px 0px 0px;
	position: relative;
	z-index: 99;
}

#page-stop table.next-services-realtime .arrive span {
	width: 115px;
	padding: 3px 4px 2px;
	margin-bottom: 0;
}

#page-stop table.next-services-realtime td span.headsign{
	position:absolute;
	font-weight: bold;
	display: block;
	clear: both;
	padding-top: 26px;
	width: 87%;
}

#realtime-label {
	background-image: url(../images/realtime-bkgd-green@2x.png);
	width: 136px;
	padding: 15px 0 15px 0;
	margin: -14px 7px 0 -16px; 
	font-size: 13px;
}

.bus #realtime-label {
	background-image: url(../images/realtime-bkgd-green@2x.png);
}

.train #realtime-label {
	background-image: url(../images/realtime-bkgd-blue@2x.png);
}

.tram #realtime-label {
	background-image: url(../images/realtime-bkgd-red@2x.png);
}


@media screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
				
		#realtime-label {
			background-size: 289px 50px;
		}
		
	}

#realtime-label span {
	width: 38px;
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px 6px;
}

.bus #realtime-label span {
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px 6px;
}

.train #realtime-label span {
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px -38px;
}

.tram #realtime-label span {
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px -81px;
}
		
#page-stop .route-shadow span.next_services_label 
{
	padding-left: 12px;
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	display: block;
}
#page-stop .next_services_label span.realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -256px -1739px;
	position: absolute;
	top: -3px;
	left: 6px;
    height: 0;
    padding-top: 20px;
	overflow: hidden;
    margin: 0px -11px 0 0;
    width: 20px;
}
	
#page-stop table.next-services-realtime td span .icon {
	position: absolute;
	top: 0;
	right: 3px;
    height: 0;
    padding-top: 21px;
    margin: -1px -25px 0 0;
}
#page-stop table.next-services-realtime td span .wheelchair-access {
	background: url(../images/sprite-realtime.png) no-repeat scroll -3px -133px;
	right: 3px;
}
#page-stop table.next-services-realtime td span .non-realtime-icon {
	background: url(../images/sprite-realtime.png) no-repeat scroll 2px -230px;
	right: -14px;
}
#page-stop table.next-services td span .non-realtime-icon {
	background: url(../images/sprite-realtime.png) no-repeat scroll 2px -230px;
	right: -14px;
}
#page-stop table.next-services-realtime td span .realtime-icon {
	background: url(../images/sprite-realtime.png) no-repeat scroll 3px -167px;
	right: -14px;
}
#page-stop table.next-services-realtime td span .electric-vehicle  {
	background: url(../images/sprite-realtime.png) no-repeat scroll -2px -199px;
	right: 23px;
    width: 25px;
}
#page-stop table.next-services-realtime td span .platform {
	position: absolute;
	height: 20px;
	overflow: hidden;
    margin: 0px 0px 0px 0px;
    width: 72px;
	white-space: nowrap;
	font-weight: bold;
	display: block;
	top: 30px;
	right: -148px;
	font-size: 1.1em;
}

#page-stop #next_services .route-shadow {
	display: none;
}

div#next_services #expand_services {
  width: 89%;
  margin: 15px auto;
  display: block;
  height: 42px;
}







#page-stop table.service_list{
	width: 100%;
	margin-top: 5px;
}
#page-stop table.service_list tr{
	/*height: 31px;*/
}
#page-stop table.service_list tr.service_top td{
	border-bottom: 0px solid #ccc;
	padding-bottom: 5px;
	padding-top: 8px;
}
#page-stop table.service_list tr.service_bottom td{
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
	padding-top: 0px;
}
#page-stop table.service_list td.route_id{
	/*width:55px;*/
}
#page-stop table.service_list td.route_id .bus-label,
#page-stop table.service_list td.route_id .train-label,
#page-stop table.service_list td.route_id .tram-label {
	font-size: 1.3em;
}

#page-stop table.service_list td.headsign{
	text-align: left;
	line-height: 1.2em;
}
#page-stop table.service_list td.icons{
	width:50px;
	/*width:64px;*/
	text-align: right;
	padding-right: 4px;
}
#page-stop table.service_list td.time{
	width:70px;
}
#page-stop table.service_list td span.route_details{
	display: block;
	padding-top: 2px;
	/*padding-bottom: 5px;*/
	font-size: 1.1em;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
}

#page-stop table.service_list td.time span.route-number{
	display: inline-block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #000;
	padding: 2px 4px 1px;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	background: #fff;
	margin-right: 5px;
}
#page-stop table.service_list td.time span.remaining{
	display: inline-block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #000;
	padding: 3px 4px 1px;
	font-size: 1.3em;
	text-decoration: none;
	font-weight: bold;
	background: #fff;
	margin-right: 5px;
	width:65px;
	text-align: center;
}
#page-stop table.service_list td span.arrival_time{
	display: inline-block;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #000;
	padding: 7px 9px 1px;
	font-size: .9em;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	/*margin-right: 5px;*/
}


}


/* services key */

#page-stop .services_key span.realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -256px -1739px;
    height: 20px;
	text-indent: -9999px;
    margin: 0px 0px 0px 0px;
    width: 20px;
    display: inline-block;
    padding-top: 2px;
}
#page-stop .services_key span.wheelchair-access {
	background: url(../images/sprite.png) no-repeat scroll -191px -1739px;
    height: 20px;
	text-indent: -9999px;
    margin: 0px 0px 0px 0px;
    width: 20px;
    display: inline-block;
    padding-top: 2px;
}
#page-stop .services_key span.electric-vehicle {
	background: url(../images/sprite.png) no-repeat scroll -289px -1739px;
    height: 20px;
	text-indent: -9999px;
    margin: 0px 0px 0px 0px;
    width: 20px;
    display: inline-block;
    padding-top: 2px;
}
#page-stop .services_key span.non-realtime-icon {
	background: url(../images/sprite.png) no-repeat scroll -37px -1739px;
    height: 20px;
	text-indent: -9999px;
    margin: 0px 0px 0px 0px;
    width: 20px;
    display: inline-block;
    padding-top: 2px;
}

#page-stop .services_key{
	border-radius: 4px;
	/*  background-color: #fdfefe;
	-webkit-box-shadow:inset 1px 1px 0 0 #d8d9d9;
	box-shadow:inset 1px 1px 0 0 #d8d9d9;*/
	margin-top: 15px;
	padding:15px;
	padding-left: 30px
}
#page-stop .services_key ul{
	margin: 7px 0px 0px 2px !important;
	padding: 0px;
	list-style-type: none;
	text-align: left;
}

#page-stop .services_key ul li { 
	display: inline-block;
	width: 50%;
	margin-bottom: 10px;
}

p.stop_timetable_info{
	margin-bottom: 40px;
	text-align:center;
}

#page-stop div.back-to-top{
	margin-left: -20px;
}

@media only screen and (max-width : 800px) {
	
p.stop_timetable_info{
	margin: 0px 20px;
}
	
#page-stop .services_key span.realtime-icon {
	background: no-repeat scroll -3px -166px;
    width: 25px;
    display: inline-block;
    padding-top: 2px;
}
#page-stop .services_key span.wheelchair-access {
	background: no-repeat scroll -3px -132px;
    width: 25px;
    display: inline-block;
    padding-top: 2px;
}
#page-stop .services_key span.electric-vehicle {
	background: no-repeat scroll -3px -199px;
    width: 25px;
    display: inline-block;
    padding-top: 2px;
}
#page-stop .services_key span.non-realtime-icon {
	background: no-repeat scroll -3px -229px;
    width: 25px;
    display: inline-block;
    padding-top: 2px;
}

#page-stop table.next-services th #next-services-icon,
#page-stop table.next-services-realtime th #next-services-icon,
#realtime-label span,
#page-stop table.next-services-realtime td span .wheelchair-access,
#page-stop table.next-services-realtime td span .realtime-icon,
#page-stop table.next-services-realtime td span .non-realtime-icon,
#page-stop table.next-services-realtime td span .electric-vehicle,
#page-stop .services_key span.realtime-icon, 
#page-stop .services_key span.non-realtime-icon, 
#page-stop .services_key span.wheelchair-access, 
#page-stop .services_key span.electric-vehicle	 {
	background-image: url(../images/sprite-realtime@2x.png)  !important;
	background-size: 26px 282px  !important;
}

}


@media only screen and (max-width : 1040px) {
	
#page-stop .services_key{
	margin: 20px;
	width: auto;
}
#page-stop div#nearest_stops_key{
	margin: 15px -5px 15px -5px;
	width: inherit;
}

#page-stop .services_key ul li { 
	width: 100%;
	margin-bottom: 5px;
	line-height: 1.4em;
}

}

/* Routes */

#page-stop #served-by
{
    font-size:1em;
	font-weight: bold;
	padding: 0 0 7px 0;
	margin-top: 10px;
}

#page-stop #routes
{
	position: relative;
}

#page-stop #routes a
{
	text-decoration: none;
}

#page-stop #routes li.route
{
	position: relative;
	background: #fff url(../images/route-bg.png) top repeat-x;
	border: 1px solid #d0d4dc;
	margin-bottom: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}

#page-stop #routes li.route .route-sign
{
	position: absolute;
	top: 5px;
	left: 32px;
	text-align: center;
	width: 52px;
	height: 52px;
	padding: 10px;
}

#page-stop #routes li.route .route-sign .route-number
{
	display: table-cell;
	vertical-align: middle;
	color: #fff;
	height: 52px;
	width: 52px;
	cursor: default;
}

#page-stop #routes li.route .route-name-wrapper
{
	display: block;
	height: 82px;
	width: 83%;
	cursor: pointer;
}

#page-stop #routes li.route .route-name
{
	display: table-cell;
	vertical-align: middle;
	height: 82px;
	background: url(../images/expand-large.png) 7px 50%  no-repeat;
	padding-left: 120px;
	font-size: 1.1em;
	color: #00305E;
	line-height: 1.15em;
}

#page-stop #routes li.route:hover .route-name
{
	color: #0075B5;
}

#page-stop #routes li.route .collapsed .route-name
{
	background: url(../images/collapse-large.png) 7px 50%  no-repeat;
}

#page-stop #routes li.route .route-shortcut
{
	position: absolute;
	top: 34px;
	right: 0;
	width: 90px;
}

#page-stop #routes li.route ul.timetables
{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	background-color: #FFF;
}

#page-stop #routes li.route ul.timetables span.days
{
	display: block;
	background: #f3f3f3;
	color: #555;
	text-align: center;
	font-weight: bold;
	line-height: 2.6em;
	font-size: .9em;
}

#page-stop #routes li.route ul.timetables li
{
	float: left;
	width: 33.33%;
	background: #fff;
	border-top: 2px solid #fff;
}

#page-stop #routes li.route ul.timetables li table tr th
{
	border-bottom-width: 2px;
	border-bottom-style: solid;
	text-align: center;
	line-height: 2.5em;
	font-size: .9em;
	color: #555;
}

#page-stop #routes li.route ul.timetables li table
{
	border-right: 1px dashed #d8d8d8;
}

#page-stop #routes li.route ul.timetables li:last-child table
{
	border-right: none;
}

#page-stop #routes li.route ul.timetables li table tr
{
	text-align: center;
	line-height: 1.4em;
	font-size: .9em;
}

#page-stop #routes li.route ul.timetables li table tr.first td
{
	padding-top: 5px;
}

#page-stop #routes li.route ul.timetables li table tr.last td
{
	padding-bottom: 5px;
}

#page-stop #routes li.route ul.timetables li table tr td:last-child
{
	border-left: 1px dashed #d8d8d8;
}

#page-stop #routes li.route .route-shadow
{
	position: absolute;
	bottom: -21px;
	background: url(../images/sprite.png) center -590px;
	height: 20px;
	width: 100%;
}

/* Bus theme */

#page-stop .bus .stop-sign
{
	background-position: 0 -2275px;
}

#page-stop .bus .stop-sign .stop-number
{
	color: #2eaa56;
}

#page-stop .bus #stop-details h1 .stop-sign .stop-icon, #page-stop .bus .stop-details h1 .stop-sign .stop-icon
{
	background-position: 0 -2195px;
}

#page-stop .bus #routes li.route .route-sign
{
	background-color: #2eaa56;
}

#page-stop .bus #routes li.route ul.timetables li table tr th
{
	border-bottom-color: #2eaa56;
}

/* Train theme */

#page-stop .train .stop-sign
{
	background-position: -170px -2275px;
}

#page-stop .train .stop-sign .stop-number
{
	color: #27a7df;
}

#page-stop .train #stop-details h1 .stop-sign .stop-icon
{
	background-position: -71px -2195px;
}

#page-stop .train #routes li.route .route-sign
{
	background-color: #27a7df;
}

#page-stop .train #routes li.route ul.timetables li table tr th
{
	border-bottom-color: #27a7df;
}

/* Tram theme */

#page-stop .tram .stop-sign
{
	background-position: -340px -2275px;
}

#page-stop .tram .stop-sign .stop-number
{
	color: #eb2127;
}

#page-stop .tram #stop-details h1 .stop-sign .stop-icon, #page-stop .tram .stop-details h1 .stop-sign .stop-icon
{
	background-position: -142px -2195px;
}

#page-stop .tram #routes li.route .route-sign
{
	background-color: #eb2127;
}

#page-stop .tram #routes li.route ul.timetables li table tr th
{
	border-bottom-color: #eb2127;
}

#page-stop #map_link a.view-map-button{
	background: #00305e;
	display: inline-block;
	padding: 8px 20px 9px;
	color: #fff;
	text-decoration: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border: none;
	position: relative;
	cursor: pointer;
	font-weight: normal;
	font-size: 1em;
	text-align: center;
	-webkit-appearance: none;
}
#page-stop #map_link a.view-map-button:hover{
	background-color: #002141;
}

#page-stop a#save-stop-btn{
	padding: 6px 0;
	background: #fff url(../images/sprite.png) center -1669px repeat-x;
	text-decoration: none;
	border: 1px solid #d0d4dc;
	display: block;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: center;
  	white-space: nowrap;
  	display: inline-block;
  	width: 200px;
}
#page-stop a#save-stop-btn::before{
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 -6px 0;
	background-image: url(../images/mini-icons.png);
	background-repeat: no-repeat;
}
#page-stop a#save-stop-btn.save::before{
	background-position: 0 -830px;
}
#page-stop a#save-stop-btn.saved::before{
	background-position: 0 -641px;
}
#page-stop a#save-stop-btn span{
	line-height: 20px;
	display: inline-block;
}

/* Back to top */

#page-stop .back-to-top
{
	background: none;
	margin-top: -8px;
}

@media only screen and (max-width : 800px) {

#page-stop .back-to-top {
	display: none;
}
}

/* Sidebar */

#page-stop #sidebar #map_stop{
	width: 95%;
	height: 410px;
	margin-left: 15px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #fff;
}

#page-stop #sidebar #map_stop noscript{
	display: block;
	padding: 10px;
}

#page-stop #sidebar #map_link{
	width: 95%;
	margin-left: 15px;
	text-align: center;
	margin-top: 10px;
}

@media only screen and (max-width : 800px) {
	
#page-stop #sidebar #map_stop,
#page-stop #sidebar #map_link {
  width: 89%;
  margin: 0 auto;
  }
  
#page-stop #sidebar #map_stop {
  margin-top: 30px;
}
	  
#page-stop #sidebar #map_link a{
	margin: 15px auto;
	display: block;
	line-height: 2em;
	background-color: #00305e;  
	color: #FFF;
	text-decoration: none;
	padding: 8px 20px 9px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
  
}

/* Printed timetable */

#page-stop #route-printed
{
	margin-left: 20px;
	margin-bottom: 15px;
	margin-top: 20px;
	background: #fff;
	border: 1px solid #D0D4DC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 20px;
}

#page-stop #route-printed h2
{
	font-size: 1.35em;
	font-weight: bold;
	margin-bottom: 15px;
}

/* In-page timetable */
#page-timetable table
{
	position: relative;
	background: #fff;
	clear: both;
	border: 1px red;
	font-size: 1em;
	margin-top: 10px;
	border: 1px solid #d0d4dc;
	border-top: none;
	width: 100%;
}

#page-timetable table caption
{
	left: -2000em;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.js-off #timetable
{
	margin-top: 20px !important;
}

#page-timetable table tr td,
#page-timetable table tr th[scope=col],
#page-timetable table tr th[scope=row]
{
	width: 96px;
	min-width: 96px;
	text-align: center;
	border-right: 1px dashed #ddd;
}

#page-timetable table tr td,
#page-timetable table tr th[scope=row]
{
	line-height: 1.65em;
	padding-right: 20px;
	border-bottom: 1px dashed #ddd;
	padding: 6px 8px;
}

.js-off table .stop-hide,
.js-off table .route-hide
{
	display: none !important;
}

#page-timetable table .stop-hide,
#page-timetable table .route-hide
{
	position: absolute;
	border: 1px solid #d0d4dc;
	text-indent: -9999em;
	display: block;
	width: 16px;
	height: 16px;
	background-color: #fff;
	background-position: 0 -1216px;
}

#page-timetable table tr:hover
{
	background-color: #f6f6f6;
}

#page-timetable table tr.timetable-headings:hover
{
	background: #fff;
}

#page-timetable table tr td:last-child,
#page-timetable table tr th:last-child
{
	border-right: none;
}

#page-timetable table div
{
	position: relative;
	display: block;
}

#page-timetable table .stop-address
{
	font-weight: bold !important;
}

#page-timetable table .stop-link,
#page-timetable table span
{
	clear: both;
	/*position: absolute;
	top: -37px;
	right: -9px;
	border: 1px solid #d0d4dc;
	border-bottom: none;
	text-indent: -9999em;*/
	display: block;
}

#page-timetable table tr th[scope=col],
#page-timetable table tr th[scope=row] {
	font-weight: bold;
}

#page-timetable table .stop-location
{
	color: #555;
}

#page-timetable table span
{
	font-weight: normal;
}
/* Vertical timetable (default) */

#page-timetable table.vertical tr th[scope=col] {
	position: relative;
	border-top: 1px solid #d0d4dc;
	padding: 10px 8px;
	vertical-align: top;
}

#page-timetable table tr th[scope=col]:first-child
{
	vertical-align: middle;
}
#page-timetable table tr th[scope=col]:nth-child(2)
{
	vertical-align: middle;
}
#page-timetable table tr th[scope=col]:nth-child(5)
{
	vertical-align: middle;
}

#page-timetable table.vertical tr th[scope=col] p
{
	margin: 0;
	padding: 0;
}

#page-timetable table.vertical tr th[scope=col] .stop-location
{
	margin: 20px 0 10px 0;
}

#page-timetable table.vertical tr th[scope=col] .stop-hide
{
	top: -21px;
	right: -9px;
}

#page-timetable table.vertical tr th[scope=row]
{
	border-bottom: 1px dashed #DDD;
	position: relative;
}

#page-timetable table.vertical tr th[scope=row] .route-hide
{
	top: 1px;
	left: -9px;
}

#page-timetable table.vertical .stop-address
{
	margin-top: 10px;
}

.bus #page-timetable table#timetable tr th[scope=col]
{
	border-bottom: 2px solid #2FB457;
}
.train #page-timetable table#timetable tr th[scope=col]
{
	border-bottom: 2px solid #27A7DF;
}
.tram #page-timetable table#timetable tr th[scope=col]
{
	border-bottom: 2px solid #EB2127;
}


#page-stop .bus table#timetable .bus-label{
	border: 2px solid #2EAA56;
}
#page-stop .bus table#timetable .bus-label:hover{
	color:#2EAA56;
}
#page-stop .train table#timetable .bus-label{
	border: 2px solid #27A7DF;
}
#page-stop .train table#timetable .bus-label:hover{
	color:#27A7DF;
}
#page-stop .tram table#timetable .bus-label{
	border: 2px solid #EB2127;
}
#page-stop .tram table#timetable .bus-label:hover{
	color:#EB2127;
}
div#stop_route_list{
	padding:15px;
}
div#stop_route_list table td{
	padding:5px;
}
div#stop_route_list h2{
	font-weight: bold;
	margin-bottom: 10px;
}
div#route_grid{
	width:300px;
}
div#route_grid div.route_grid_item{
	height: 27px;
	margin-right: 5px;
	display: block;
	float: left;
}
div#jp_link{
	margin-top: 20px;
}

@media only screen and (max-width : 800px) {
div#stop_route_list{
	padding:20px;
}
div#route_grid {
  width: 100%;
}
}

/* responsive - mobile to desktop hide */
@media only screen and (max-width: 800px){
    #desktop {
        display: none;
    }
    
    #mobile, .mobile-only{
        display: block;
    }
	

}

@media only screen and (max-width: 800px) and (min-width: 601px) {
	#page-home #quick-links-blq,
	#page-home  #announcements-blq{
		height: 35.1em!important;
	}
	#page-home #announcements-blq ul#unplanned_disruptions {
		height: 330px!important;
	}
}

@media only screen and (min-width: 801px){
    #desktop {
        display: block;
    }
    
    #mobile, .mobile-only{
        display: none;
    }
	
    input#mobile{
        display: block;
    }
}


/* delete? */
/*
#legend {
	background: #FFF;
    border-bottom: 1px solid #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.3) inset;
    margin: 10px 0 0;
    min-height: 30px;
    padding: 15px 15px 15px 15px;
}

#legend lh, #legend li {
	margin: 3px 10px;
}

#legend lh {
	font-weight:bold;
	margin: 6px 0;
}
*/


/* ==========================================================================
   Content Pages
   ==========================================================================*/

/*---------------------------------------------------------------------------
  Content Pages - Sidebar: Globals 
  ---------------------------------------------------------------------------*/

#page-content #sidebar h1
{
	font-size: 2em;
	line-height: 1.2em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
	margin: 15px 20px 8px 15px;
}

#page-content #sidebar p
{
	font-size: 1em;
	padding: 8px 20px 8px 15px;
	line-height: 1.25em;
	text-shadow: 0px 1px 0px #ffffff;
}

#page-content #sidebar ul.shortcuts-list
{
	display: inline-block;
	margin: 10px 20px 15px 15px;
}

#page-content #sidebar ul.shortcuts-list li
{
	margin-bottom: 3px;
}

/*---------------------------------------------------------------------------
  Content Pages - Sidebar: Inline tooltips 
  ---------------------------------------------------------------------------*/

#page-content #sidebar .inline-tooltips
{
	background-color: #F7FAFF;
	margin: 10px 10px 0 0;
	padding: 0 15px 15px 15px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3); 	
}

#page-content #sidebar .inline-tooltips h3
{
	font-size: 1.25em;
	padding: 15px 0 5px;
	border-bottom: 1px dashed #D0D4DC;
}

#page-content #sidebar .inline-tooltips p
{
	padding: 8px 0;
}

/*---------------------------------------------------------------------------
  Content Pages - Sidebar: search
  ---------------------------------------------------------------------------*/

#page-content #sidebar #sidebar-search
{
	position: relative;
	background: url(../images/sidebar-search-bg.png) no-repeat;
	padding: 14px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	height: 54px;
	margin-bottom: 5px;
}

#page-content #sidebar #sidebar-search input[type=text]
{
	width: 165px;
	margin-right: 2px;
}

#page-content #sidebar #sidebar-search input.button
{
	padding-top: 9px;
	padding-bottom: 8px; 
}

#page-content #sidebar #sidebar-search label
{
	font-weight: bold;
	padding-bottom: 2px;
}

#page-content #sidebar #sidebar-search label span
{
	font-weight: normal;
	color: #555;
}

#page-content #sidebar .ui-autocomplete-loading
{
	background: url(../images/loading.gif) 158px 8px no-repeat;
}

/*---------------------------------------------------------------------------
  Content Pages - Sidebar: menu
  ---------------------------------------------------------------------------*/

#page-content #nav-wrapper
{
	position: absolute;
	text-align: right;
	 width: 100.5%;
}

#page-content #nav-wrapper #nav-secondary
{
	text-align: left;
	background: #fff;
	font-size: 1.1em;
	width: 100%;
	margin-top: 15px;
	border: 1px solid #d0d4dc;
	border-right: 1px solid #e7ecf5;
}

#page-content #nav-wrapper #nav-secondary li,
#page-content #nav-wrapper #nav-secondary li span,
#page-content #nav-wrapper #nav-secondary li a
{
	display: block;
	text-decoration: none;
}

#page-content #nav-wrapper #nav-secondary li span.top-level,
#page-content #nav-wrapper #nav-secondary li a.top-level
{
	padding-left: 30px;
	font-size: 1.15em;
	line-height: 40px;
	height: 40px;
}

#page-content #nav-wrapper #nav-secondary .top-level
{
	border-bottom: 1px solid #EDEFF4;
}

#page-content #nav-wrapper #nav-secondary li:last-child .top-level
{
	border: none;
}

#page-content #nav-wrapper #nav-secondary .top-level-selected
{
	position: relative;
	color: #fff;
	font-weight: bold;
	background: #0075b5 url(../images/sprite.png) 0 -130px no-repeat;
	border: none;
}

#page-content #nav-wrapper #nav-secondary .arrow-top-level-selected
{
	position: absolute;
	z-index: 100;
	top: 0;
	right: -14px;
	height: 40px;
	width: 14px;
	background: url(../images/sprite.png) right -130px no-repeat;
}

#page-content #nav-wrapper #nav-secondary .top-level-selected:first-child
{
	margin: -1px 0 0 -1px;
}

#page-content #nav-wrapper #nav-secondary li.expanded .top-level-selected
{
	background-position: 0 -420px;
}

#page-content #nav-wrapper #nav-secondary li.expanded .top-level-not-selected
{
	background: url(../images/sprite.png) 9px -254px no-repeat;
}

#page-content #nav-wrapper #nav-secondary li.collapsed
{
	background: url(../images/sprite.png) 13px -357px no-repeat;
}

#page-content #nav-wrapper #nav-secondary ul.sublevel li
{
	position: relative;
	padding: .4em;
	padding-left: 50px;
	background: url(../images/sprite.png) 35px -308px no-repeat;
	line-height: 1.4em;
	/*height: 30px;*/
}

#page-content #nav-wrapper #nav-secondary ul.sublevel li.collapsed
{
	background: url(../images/sprite.png) 13px -357px no-repeat;
}


#page-content #nav-wrapper #nav-secondary ul.sublevels li span.sublevels-label
{
	background: #F8F8F8;
	padding-left: 30px;
	color: #555555;
	height: 30px;
	height: 2.2em;
}

#page-content #nav-wrapper #nav-secondary ul.sublevel
{
	border-bottom: 1px solid #f3f3f3;
}

#page-content #nav-wrapper #nav-secondary ul.sublevel li.sublevel-selected
{
	background: url(../images/sprite.png) 0 -510px no-repeat #006ca9;
	color: #fff;
	font-weight: bold;
}

#page-content #nav-wrapper #nav-secondary .arrow-sublevel-selected
{
	position: absolute;
	z-index: 100;
	top: 50%;
	margin-top: -15px;
	right: -14px;
	height: 30px;
	width: 14px;
	background: url(../images/sprite.png) right -510px no-repeat ;
}

#page-content #nav-wrapper #nav-follow-link
{
	font-size: .9em;
	margin-right: 12px;
	line-height: 40px;
	color: #666;
	cursor: pointer;
}

@media only screen and (max-width : 800px) {
	
	#page-content #nav-wrapper {
		position: relative;
	}
			
	#page-content #nav-wrapper #nav-secondary li {
		display: none;
	}
	
	#page-content #nav-wrapper #nav-secondary .expanded,
	#page-content #nav-wrapper #nav-secondary .expanded li {
		display: block;
	}
		
	#page-content #nav-wrapper #nav-follow-link-wrapper {
		display: none;
	}
	
    }

/*---------------------------------------------------------------------------
  Content Pages: Global
  ---------------------------------------------------------------------------*/

#page-content #content #locked .fold-white-horizontal
{
	margin: 25px 0 0 0;
}

#page-content #content .content-white-bg
{
	position: relative;
	background: #fff;
	padding-bottom: 30px;
	/*min-height: 500px;*/
	border: 1px solid #d0d4dc;
	-moz-border-radius-topleft: 25px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 25px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 25px 0px 25px 0px;
	border-radius: 25px 0px 25px 0px;
	margin-left: 2px;
	min-height: 600px; /* Minimum height of the content area */
}

#page-content #content .content-white-bg .content-shadow
{
	position: absolute;
	bottom: -13px;
	background: url(../images/sprite.png) center -590px no-repeat;
	height: 12px;
	width: 100%;
	z-index: 1;
}



/*-- Back to top link --*/

#page-content #content .content-white-bg .back-to-top
{
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #f8f8f8;
	margin: 20px 0 0 0;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 25px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 0px 25px 0px;
	border-radius: 0px 0px 25px 0px; 
}

#page-content #content .content-white-bg .back-to-top a
{
	font-size: .9em;
	display: block;
	padding: 8px 5px 8px 40px;
	background: url(../images/sprite.png) 22px -785px no-repeat;
}

@media only screen and (max-width: 480px) {
    #page-content #content .content-white-bg {
        border: none;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
    }
    #page-content #content .content-white-bg .back-to-top
	{
		background-color: transparent;
	}
    #page-content #content .content-white-bg.realtime-arrivals
	{
		background-color: transparent;
	}

    #content-tools ul li:last-child {
        display: none;
    }
    
    .stop a{
        height: auto !important;
    }
    
    .stop span {
        margin-top: -12px !important;
        margin-bottom: 8px;
    }

}

/*---------------------------------------------------------------------------
  Content Pages: Tabs
  ---------------------------------------------------------------------------*/

#tabs li a{
    cursor: pointer;
}

#page-content #tabs
{
	border-bottom: 1px solid #d8d8d8;
	line-height: 34px;
	margin: 0 15px;
	padding-top: 20px;
}

#page-content #tabs li
{
	display: inline;
	font-size: 1.1em;
}

#page-content #tabs li a, .tabs inactive
{
	border: 1px solid #d8d8d8;
	border-bottom: none;
	padding: 10px 6px;
	background: #efefef;
	text-decoration: none;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px; 
}

#page-content #tabs li.tabs {
    padding: 10px 0px !important;
}

#page-content #tabs li.tabs a {
    font-weight: normal !important;
}

@media only screen and (max-width : 1040px) {
    #page-content #tabs li.tabs a.active {
        background-color: #00295e !important;
        color: #FFF;
    }
}

#page-content #tabs li.tabs a.active {
    background-color: #FFF;
}

#page-content #tabs li.active a
{
	border: 0px solid #d8d8d8;
	border-bottom: none;
	padding: 10px 6px;
	background: #ffffff;
	text-decoration: none;
	font-weight:bold;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px; 
}

#page-content #tabs li a:hover
{
	background: #fff;
	border: 1px solid #d8d8d8;
	border-bottom: 1px solid #fff;
}

#page-content #tabs li.active a:hover
{
	background: #fff;
	border: 0px solid #d8d8d8;
	border-bottom: 0px solid #fff;
}

#page-content #tabs li.active
{
	border: 1px solid #d8d8d8;
	border-bottom: 1px solid #fff;
	padding: 10px 6px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	cursor: default;
}


@media only screen and (max-width : 1040px) {
	
	#page-content #tabs {
		border-bottom: 0;
	}
	
	#page-content #tabs li {
		display: inline-block;
		margin: 4px;
		float:left
	}
	
	#page-content #tabs li a {
		display: inline-block;
		border: 0;
		padding: 0px 12px;
		background: #edf0f7;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#page-content #tabs li a:hover {
		background: #23b452;
		border: 0;
		color: #FFF;
	}
	
	#page-content #tabs li.active {
		background: #00295e;
		padding: 0px 12px;
		border: 0;
		color: #FFF;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	

}


/*---------------------------------------------------------------------------
  Content Pages: Section icons
  ---------------------------------------------------------------------------*/

#section-icons
{
	padding: 30px 30px 0 30px;
}

#section-icons .icon
{
	background-image: url(../images/section-icons.png);
	background-repeat: no-repeat;
	display: inline-block;
	width: 61px;
	height: 61px;
	margin-right: 5px;
}

#section-icons .icon-bus
{
	background-position: 0 0;
}

#section-icons .icon-bus-maps
{
	background-position: 0 -71px;
}

#section-icons .icon-bus-timetables
{
	background-position: 0 -424px;
}

#section-icons .icon-train
{
	background-position: 0 -141px;
}

#section-icons .icon-train-maps
{
	background-position: 0 -211px;
}

#section-icons .icon-train-timetables
{
	background-position: 0 -495px;
}

#section-icons .icon-tram
{
	background-position: 0 -282px;
}

#section-icons .icon-tram-maps
{
	background-position: 0 -353px;
}

#section-icons .icon-tram-timetables
{
	background-position: 0 -566px;
}

#section-icons .icon-updates
{
	background-position: 0 -637px;
}

#section-icons .icon-bus-train-tram
{
	background-position: 0 -708px;
}

#section-icons .icon-train-tram
{
	background-position: 0 -850px;
}

#section-icons .icon-bus-train
{
	background-position: 0 -921px;
}

#section-icons .icon-bus-tram
{
	background-position: 0 -992px;
}

#section-icons .icon-project
{
	background-position: 0 -779px;
}

#section-icons .icon-news
{
	background-position: 0 -1063px;
}

#section-icons .icon-adelaidemetro
{
	background-position: 0 -1134px;
}

#section-icons .icon-events
{
	background-position: 0 -1205px;
}

#section-icons .icon-timetables
{
	background-position: 0 -1276px;
}

#section-icons .icon-maps
{
	background-position: 0 -1347px;
}

#section-icons .icon-alerts
{
	background-position: 0 -1418px;
}

#section-icons .icon-journey
{
	background-position: 0 -1489px;
}

#section-icons .icon-metrocard
{
	background-position: 0 -1560px;
}

#section-icons .icon-tickets
{
	background-position: 0 -1631px;
}

#section-icons .icon-money
{
	background-position: 0 -1702px;
}

#section-icons .icon-stop
{
	background-position: 0 -1773px;
}

#section-icons .icon-bus-special
{
	background-position: 0 -1844px;
}

#section-icons .icon-sitemap
{
	background-position: 0 -1915px;
}

#section-icons p.tip
{
	display: inline-block;
	margin-left: 5px;
}

@media only screen and (max-width : 800px) {
	#section-icons .icon {
		display: none;
	}
}


/*---------------------------------------------------------------------------
  Content Pages: Ajax search results
  ---------------------------------------------------------------------------*/

#ajax-search-results-holder
{
	margin: 20px 30px;
	padding: 20px;
	background: #f3f3f3;
	-webkit-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1); 
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 15px 0px 15px 0px;
	border-radius: 15px 0px 15px 0px; 
}

#ajax-search-results-holder h2
{
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: 10px;
	text-shadow: 0px 1px 0px #ffffff;
}

#ajax-search-results-holder li
{
	clear: both;
	padding: 2px 0;
}

#ajax-search-results-holder li .route-number
{
	display: inline-block;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #000;
	padding: 2px 4px 1px;
	font-size: .9em;
	text-decoration: none;
	font-weight: bold;
	background: #fff;
	margin-right: 5px;
}

.js-off #ajax-search-results-holder .dropdown,
.js-off #ajax-search-results-holder .dropdown ul li
{
	display: inline-block;
}

.js-on #ajax-search-results-holder .dropdown
{
	display: inline-block;
	margin-left: 5px;
}

/* Bus theme */

#ajax-search-results-holder li.bus-route .route-number
{
	border: 2px solid #2EAA56;
}

/* Train theme */

#ajax-search-results-holder li.train-route .route-number
{
	border: 2px solid #27A7DF;
}

/* Tram theme */

#ajax-search-results-holder li.tram-route .route-number
{
	border: 2px solid #EB2127;
}

/* Table (retailers) */

#ajax-search-results-holder table th
{
	font-weight: bold;
}

#ajax-search-results-holder table tr
{
	line-height: 21px;
}

/*---------------------------------------------------------------------------
  Content Pages - Custom dropdown
  ---------------------------------------------------------------------------*/

.js-off .dropdown dt
{
	display: none; /* We hide the dropdown title when JS is off */
}

.js-on .dropdown dd,
.js-on .dropdown dt,
.js-on .dropdown ul
{
	margin:0px;
	padding:0px;
}

.js-on .dropdown dd
{
	position:relative;
}

.js-on .dropdown a,
.js-on .dropdown a:visited
{
	text-decoration:none;
	outline:none;
}

.js-on .dropdown dt a:hover
{
	-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1); 
}

.js-on .dropdown dt a
{
	background:#fff url(../images/sprite.png) right -56px;
	display:block;
	padding-right:20px;
	border:1px solid #D0D4DC;
	width:100px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 	
}

.js-on .dropdown dt a span
{
	cursor:pointer;
	display:block;
	padding: 4px 5px 4px 10px;
}

.js-on .dropdown dd ul
{
	background:#fff;
	display:none;
	left:0;
	position:absolute;
	top:0;
	width:auto;
	min-width:120px;
	list-style:none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); 
}

.js-on .dropdown dd ul li
{
	padding: 0 !important;
}

.js-on .dropdown dd ul li a {
	line-height: 26px;
	display:block;
	border-bottom: 1px solid #F3F3F3;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0;
	white-space: nowrap;
}

.js-on .dropdown dd ul li a:hover {
	background-color:#f8f9fe;
	border-bottom: 1px solid #cedbef;
}

.js-on .dropdown dd ul li:last-child a,
.js-on .dropdown dd ul li:last-child a:hover
{
	border-bottom: none;
}

/*---------------------------------------------------------------------------
  Content Pages: Context search
  ---------------------------------------------------------------------------*/

#page-content #content #context-search
{
	background: #fff;
	border: 1px solid #efefef;
	position: relative;
	padding: 20px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#page-content #content #context-search input[type=text]
{
	width: 64%;
	margin-right: 5px;
}

#page-content #content #context-search input.button
{
	padding-top: 12px;
	padding-bottom: 11px; 
}

#page-content #content #context-search label
{
	padding-bottom: 2px;
}

#page-content #content #context-search label span
{
	font-weight: normal;
	color: #555;
}

#page-content #content #context-search .ui-autocomplete-loading
{
	background: url(../images/loading.gif) 395px 8px no-repeat;
}

@media only screen and (max-width : 480px) {
    #page-content #content #context-search input[type=text] {
        width: 100%;
        margin: 10px 0;
        padding: 8px 0;
    }
    #page-content #content #context-search input.button {
        width: 100%;
    }


}

/*---------------------------------------------------------------------------
  Content Pages: Related links
  ---------------------------------------------------------------------------*/

#page-content #content .list-related-links
{
	clear: both;
	background: #f8f8f8;
	padding: 15px 20px;
	margin: 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	line-height: 1.5em;
}

#page-content #content .list-related-links h3
{
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 5px;
}

#page-content #content .list-related-links ul,
#page-content #content #unlocked .list-related-links ul
{
	padding: 0;
}

#page-content #content .list-related-links ul li,
#page-content #content #unlocked .list-related-links ul li
{
	list-style-image: none;
	line-height: 1.35em;
	float: left;
	width: 45%;
	margin-bottom: 2px;
	margin-right: 5%;
}

#page-content #content a.link-arrow {
	background: url(../images/link-arrow.png) no-repeat scroll 0 3px transparent;
}



/*---------------------------------------------------------------------------
  Content Pages: Shortcuts list
  ---------------------------------------------------------------------------*/
#page-content #content .shortcuts-list{
	padding: 0;
}

#page-content #content .shortcuts-list li
{
	list-style-image: none;
	line-height: 1.6em;
	padding-left: 30px;
	background: url(../images/sprite.png) 7px -314px no-repeat;
	margin-bottom: 0;
}

#page-content #content .shortcuts-list li.first
{
	/*font-size: 16px;*/
	line-height: normal;
	background-position: 0 -640px;
	font-weight: bold;
	padding-bottom: 4px;
	padding-top: 3px;
}

#page-content #content .shortcuts-list li a
{
	text-decoration: none;
	font-size: 1.1em;
}

/*---------------------------------------------------------------------------
  Content Pages: Grid list
  ---------------------------------------------------------------------------*/
#page-content #grid-list
{
	padding: 18px 14px 20px 29px;
}

/*---------------------------------------------------------------------------
  Content Pages: List News
  ---------------------------------------------------------------------------*/
#page-content #list-news
{
	margin: 20px 30px 30px;
}

/*---------------------------------------------------------------------------
  Content Pages: List Events
  ---------------------------------------------------------------------------*/
#page-content #list-events
{
	margin: 20px 30px 30px;
}

/*---------------------------------------------------------------------------
  Content Pages: List Service Updates
  ---------------------------------------------------------------------------*/
#page-content #list-updates
{
	clear: both;
	margin: 20px 30px 30px;
	padding-top: 30px;
}

/*---------------------------------------------------------------------------
  Content Pages: Tabs - Overwriting jQuery UI
  ---------------------------------------------------------------------------*/
#page-content #content .ui-tabs
{
	border: none;
	padding: 0;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px; 
}

#page-content #content .ui-tabs ul.ui-tabs-nav
{
	background: none;
	padding: 0;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	border: none;
	border-bottom: 1px solid #D8D8D8;
}

#page-content #content .ui-tabs ul.ui-tabs-nav li
{
	margin-right: 4px;
}

#page-content #content .ui-tabs ul.ui-tabs-nav li a
{
	padding: 10px 8px;
}

#page-content #content .ui-tabs ul.ui-tabs-nav li.ui-state-default
{
	border: 1px solid #D8D8D8;
}

#page-content #content .ui-tabs .ui-tabs-panel
{
	padding: 0;
}



/*---------------------------------------------------------------------------
  Content Pages: Special service
  ---------------------------------------------------------------------------*/
#page-content #special-service
{
	margin: 20px 30px 0;
}

/*---------------------------------------------------------------------------
  Content Pages: CMS content styles (unlocked contents)
  ---------------------------------------------------------------------------*/
#page-content #content #unlocked
{
	padding: 0;
	padding-bottom: 30px;
	display: block;
}

#page-content #content #unlocked .unlocked-content-wrapper
{
	padding: 10px 30px 30px 30px;
}

#page-content #content #locked .unlocked-content-wrapper
{
	padding: 10px 30px 0;
}

#page-content #content #unlocked .fold-white-horizontal
{
	margin: 25px 0 0 0;
}

#page-content #content #unlocked .alert
{
	clear: both;
}

#page-content #content #locked #unlocked .unlocked-content-wrapper /* Unlocked content inside a locked content area */
{
	padding: 0;
	margin-bottom: -30px;
}

/*--- Headings ---*/

#page-content #content #unlocked .unlocked-content-wrapper h2,
#page-content #content #unlocked .unlocked-content-wrapper h3,
#page-content #content #unlocked .unlocked-content-wrapper h4,
#page-content #content #locked .unlocked-content-wrapper h2,
#page-content #content #locked .unlocked-content-wrapper h3,
#page-content #content #locked .unlocked-content-wrapper h4
{
	/*clear: both; Removed By Josh*/
	margin: 25px 0 10px;
}

#page-content #content #unlocked .unlocked-content-wrapper h2,
#page-content #content #locked .unlocked-content-wrapper h2
{
	font-size: 1.65em;
	border-bottom: 3px solid #555;
	padding-bottom: 5px;
}

#page-content #content #unlocked .unlocked-content-wrapper h3,
#page-content #content #locked .unlocked-content-wrapper h3
{
	font-size: 1.35em;
}

#page-content #content #unlocked .unlocked-content-wrapper h4,
#page-content #content #locked .unlocked-content-wrapper h4
{
	font-size: 1.25em;
}

/*--- Body ---*/

#page-content #content #unlocked p
{
	font-size: 1em;
	padding: 10px 0;
	line-height: 1.35em;
}

#page-content #content #unlocked img
{
	border: 1px solid #efefef;
	padding: 10px;
}

#page-content #content #unlocked img.right-floating
{
	float: right;
	margin:0 0 20px 15px;
}
#page-content #content #unlocked div.right-floating
{
	float: right;
	margin:0 0 20px 15px;
}

#page-content #content #unlocked img.left-floating
{
	float: left;
	margin:0 15px 20px 0;
}
#page-content #content #unlocked div.left-floating
{
	float: left;
	margin:0 15px 20px 0;
}

@media only screen and (max-width : 800px) {
    
    #page-content #content #unlocked img {
        max-width: 100%;
        height: auto;
        padding: 10px 0;
    }

    #page-content #content #unlocked img.right-floating,
    #page-content #content #unlocked img.left-floating,
    #page-content #content #unlocked div.right-floating,
    #page-content #content #unlocked div.left-floating {
        width: 100%;
        float: none;
        text-align: center;
        margin: 0;
    }
    #page-content #content #unlocked div.right-floating img,
    #page-content #content #unlocked div.left-floating img {
        margin: 0 auto;
        max-width: 100%;
    }
    #page-content #content #unlocked iframe {
        display: block;
        margin: 10px auto;
    }
}


/*--- List: Default ---*/

#page-content #content #unlocked .unlocked-content-wrapper ul
{
	/*clear: both; Removed By Josh*/
	margin: 10px 0;
	padding: 0 0 10px 20px;
}

#page-content #content #unlocked .unlocked-content-wrapper ul li
{
	list-style-image: url(../images/contents/bullet.png);
	list-style-position: outside;
	font-size: 1em;
	line-height: 1.25em;
}

#page-content #content #unlocked .unlocked-content-wrapper ul li p
{
	font-size: inherit;
	line-height: inherit;
}

/*--- List: Anchors ---*/

#page-content #content #unlocked .title-anchors
{
	border: none !important;
	font-size: 1.1em !important;
	font-weight: bold !important;
	margin: 10px 0 !important;
}

#page-content #content #unlocked ul.list-anchors
{
	padding: 0;
	margin-top: 0;
}

#page-content #content #unlocked ul.list-anchors li
{
	display: block;
	list-style-image: none;
	font-size: 1em;
	background: url(../images/sprite.png) 0 -1002px no-repeat;
	padding-left: 22px;
	line-height: 1.35em;
	margin-bottom: 0;
}

/*--- List: Prices ---*/

#page-content #content #unlocked ul.list-prices
{
	display: inline-block;
	margin: 5px 0;
	padding: 0;
}

#page-content #content #unlocked ul.list-prices li
{
	list-style-image: none;
	line-height: normal;
	float: left;
	background: #f6f6f6;
	padding: 10px;
	font-size: 1.7em;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#page-content #content #unlocked ul.list-prices li span
{
	font-size: .6em;
	display: block;
	margin-bottom: 5px;
}

/*--- List: Steps ---*/

#page-content #content #unlocked ol.list-steps
{
	padding: 10px 0;
}

#page-content #content #unlocked ol.list-steps li
{
	list-style-image: none;
	display: inline-block;
	background: #2fb457 url(../images/contents/list-steps.png) center right no-repeat;
	color: #fff;
	padding: 10px 17px 10px 10px;
	font-size: 1em;
	line-height: normal;
	margin-bottom: 0;
}

#page-content #content #unlocked ol.list-steps li
{
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

#page-content #content #unlocked ol.list-steps li:last-child
{
	background-image: none;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	padding-right: 10px;
}

/*--- List: With icons ---*/

#page-content #content #unlocked ul.list-icons
{
	padding: 10px 0;
	display: inline-block;
	margin: 0 -8px;
}

#page-content #content #unlocked ul.list-icons li
{
	list-style-image: none;
	line-height: normal;
	float: left;
	position: relative;
	padding: 12px;
	width: 163px;
	height: 96px;
	background-color: #f3f3f3;
	background-image: url(../images/contents/sprite-list-icons.png);
	background-repeat: no-repeat;
	margin: 4px 8px 14px;
	font-size: 1.35em;
	color: #555;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 25px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 25px;
	-webkit-border-radius: 0px 25px 0px 25px;
	border-radius: 0px 25px 0px 25px;
}

#page-content #content #unlocked ul.list-icons li a
{
	font-weight: bold;
}

#page-content #content #unlocked ul.list-icons li span.shadow
{
	position: absolute;
	left: 0;
	top: 120px;
	background: url(../images/sprite.png) right 0 no-repeat;
	width: 188px;
	height: 14px;
}

#page-content #content #unlocked ul.list-icons li.icon-mouse
{
	background-position: 12px 67px;
}

#page-content #content #unlocked ul.list-icons li.icon-phone
{
	background-position: 12px -64px;
}

#page-content #content #unlocked ul.list-icons li.icon-card
{
	background-position: 12px -196px;
}

#page-content #content #unlocked ul.list-icons li.icon-info
{
	background-position: 12px -330px;
}

#page-content #content #unlocked ul.list-icons li.icon-location
{
	background-position: 12px -463px;
}

/*--- Table: Default ---*/

#page-content #content #unlocked table
{
	clear: both;
	border: 1px red;
	font-size: 1em;
	margin: 10px 0;
}

#page-content #content #unlocked table caption
{
	left: -2000em;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

#page-content #content #unlocked table th p
{
	margin: 0;
	padding: 0;
}

#page-content #content #unlocked table th
{
	font-weight: bold;
	padding: 10px 8px;
	border-bottom: 2px solid #2FB457;
}

#page-content #content #unlocked table tr:hover
{
	background-color: #f6f6f6;
}

#page-content #content #unlocked table tr:hover th
{
	background-color: #fff;
}

#page-content #content #unlocked table td
{
	line-height: 1.65em;
	padding-right: 20px;
	border-bottom: 1px solid #ddd;
	padding: 6px 8px;
}

#page-content #content #unlocked table.two-columns tr td
{
	width: 50%;
}

#page-content #content #unlocked table.three-columns tr td
{
	width: 33%;
}

#page-content #content #unlocked table.four-columns tr td
{
	width: 25%;
}

#page-content #content #unlocked table.five-columns tr td
{
	width: 20%;
}

#page-content #content #unlocked table.six-columns tr td
{
	width: 16%;
}

#page-content #content #unlocked table.seven-columns tr td
{
	width: 14%;
}

#page-content #content #unlocked table.eight-columns tr td
{
	width: 12.5%;
}

/*---- Find nearest retailer form ----*/

#page-content #content #unlocked #form-retailer input#retailer_keyword {
    width: 50%;
    margin: 10px 5px 0 0;
}

/*--- Table: Retailer search results ---*/

#page-content #content #unlocked #form-retailer
{
	clear: both;
	padding: 10px 0;
}

#page-content #content #unlocked #form-retailer input[type=submit]
{
	top: -2px;
}

#page-content #content #unlocked #form-retailer input[type=submit]:active
{
	margin-bottom: 0;
}

#page-content #content #unlocked #form-retailer .ajax-table
{	
	width: 100%;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3); 
	border-collapse: collapse;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-top: 2px;
}

#page-content #content #unlocked #form-retailer .ajax-table th
{
	border-bottom: none;
}

#page-content #content #unlocked #form-retailer .ajax-table tr:last-child td
{
	border: none;
}

#page-content #content #unlocked #form-retailer .ajax-table tr:first-child td
{
	border: none;
}

#page-content #content #unlocked #form-retailer .ajax-table tr th:first-child,
#page-content #content #unlocked #form-retailer .ajax-table tr td:first-child
{
	padding-left: 15px;
}

#page-content #content #unlocked #form-retailer .ajax-table span.yes,
#page-content #content #unlocked #form-retailer .ajax-table span.no
{
	text-align: center;
	display: block;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	height: 15px;
}

#page-content #content #unlocked #form-retailer .ajax-table span.yes
{
	background-position: center -1305px;
}

#page-content #content #unlocked #form-retailer .ajax-table span.no
{
	background-position: center -1396px;
}

#page-content #content #unlocked #form-retailer .table-arrow
{
	position: relative;
	display: block;
	height: 18px;
}

#page-content #content #unlocked #form-retailer .top-arrow-border
{
	border-color: transparent transparent #dedede transparent;
	border-style: solid;
	border-width: 10px;
	height:0;
	width:0;
	position:absolute;
	top:-2px;
	left:15px;
	overflow: hidden;
}

#page-content #content #unlocked #form-retailer .top-arrow {
	border-color: transparent transparent #fff transparent;
	border-style: solid;
	border-width: 10px;
	height:0;
	width:0;
	position:absolute;
	top:0;
	left:15px;
	overflow: hidden;
}

/*---------------------------------------------------------------------------
  Content Pages - Card Types
  ---------------------------------------------------------------------------*/
#page-content #content #unlocked #cards-blq
{
	padding: 0;
	margin-bottom: 20px;
	display: inline-block;
}

#page-content #content #unlocked #cards-blq li
{
	list-style-image: none;
	line-height: normal;
	float: left;
	width: 50%;
	margin-bottom: 0;
	margin-top: 0;
}

#page-content #content #unlocked #cards-blq li a
{
	text-decoration: none;
}

/*--- Blue ---*/

#page-content #content #unlocked #cards-blq li.blue .card-title-blq
{
	background: url(../images/contents/card-regular-title-bg.png) repeat-x;
	border-right: 1px solid #0191c5;
	border-bottom: 1px solid #0082b1;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 5px 0px 0px 0px;
	border-radius: 5px 0px 0px 0px; 
}

#page-content #content #unlocked #cards-blq li.blue .card-img-blq
{
	background: url(../images/contents/card-regular-bg.png) center top;
	border-top: 1px solid #26b7eb;
	border-right: 1px solid #0392c5;
}

#page-content #content #unlocked #cards-blq li.blue .card-options-blq
{
	background-image: url(../images/contents/card-regular-bg.png);
	border-right: 1px solid #c8c8c8;
}

#page-content #content #unlocked #cards-blq li.blue .card-info-blq
{
	border-right: 1px solid #d1d1d1;
}

/*--- Green ---*/

#page-content #content #unlocked #cards-blq li.green .card-title-blq
{
	background: url(../images/contents/card-concession-title-bg.png) repeat-x;
	border-bottom: 1px solid #258a42;
	border-right: 1px solid #258A42;
	border-left: 1px solid #4ebf70;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 5px 0px 0px;
	border-radius: 0px 5px 0px 0px;
}

#page-content #content #unlocked #cards-blq li.green .card-img-blq
{
	background: url(../images/contents/card-concession-bg.png) center top;
	border-top: 1px solid #4ebf70;
	border-right: 1px solid #258A42;
	border-left:1px solid #4ebf70;
}

#page-content #content #unlocked #cards-blq li.green .card-options-blq
{
	background-image: url(../images/contents/card-concession-bg.png);
	border-right: 1px solid #D1D1D1;
	border-left: 1px solid #fff;
}

#page-content #content #unlocked #cards-blq li.green .card-info-blq
{
	border-right: 1px solid #D1D1D1;
	border-left: 1px solid #fff;
}

/*--- Yellow ---*/

#page-content #content #unlocked #cards-blq li.yellow .card-title-blq
{
	background: url(../images/contents/card-students-title-bg.png) repeat-x;
	border-left: 1px solid #f8ba4e;
	border-bottom: 1px solid #bf8622;
	border-right: 1px solid #cd9128;
}

#page-content #content #unlocked #cards-blq li.yellow .card-img-blq
{
	background: url(../images/contents/card-students-bg.png) center top;
	border-top: 1px solid #fbbb4b;
	border-left: 1px solid #eab04b;
	border-right: 1px solid #c08722;
}

#page-content #content #unlocked #cards-blq li.yellow .card-options-blq
{
	background-image: url(../images/contents/card-students-bg.png);
	border-left: 1px solid #fff;
	border-right: 1px solid #c8c8c8;
}

#page-content #content #unlocked #cards-blq li.yellow .card-info-blq
{
	border-left: 1px solid #fff;
	border-right: 1px solid #d1d1d1;
	border-bottom: 1px solid #D1D1D1;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius: 0px 0px 0px 5px;
	border-radius: 0px 0px 0px 5px; 
}

/*--- Navy ---*/

#page-content #content #unlocked #cards-blq li.navy .card-title-blq
{
	background: url(../images/contents/card-seniors-title-bg.png) repeat-x;
	border-left: 1px solid #135892;
	border-bottom: 1px solid #0d3d66;
	border-right: 1px solid #0d3d66;
}

#page-content #content #unlocked #cards-blq li.navy .card-img-blq
{
	background: url(../images/contents/card-seniors-bg.png) center top;
	border-top: 1px solid #135892;
	border-left: 1px solid #135892;
	border-right: 1px solid #0d3d66;
}

#page-content #content #unlocked #cards-blq li.navy .card-options-blq
{
	background-image: url(../images/contents/card-seniors-bg.png);
	border-left: 1px solid #fff;
	border-right: 1px solid #D1D1D1;
}

#page-content #content #unlocked #cards-blq li.navy .card-info-blq
{
	border-left: 1px solid #fff;
	border-right: 1px solid #D1D1D1;
	border-bottom: 1px solid #D1D1D1;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 0px 5px 0px;
	border-radius: 0px 0px 5px 0px; 
}

/*--- Common ---*/

#page-content #content #unlocked #cards-blq .card-title-blq
{
	color: #fff;
	height: 42px;
	text-shadow: 0px 1px 1px #4a4a4a;
}

#page-content #content #unlocked #cards-blq .card-title-blq h3
{
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	line-height: 43px;
	margin-top: 0;
}

#page-content #content #unlocked #cards-blq .card-img-blq
{
	height: 157px;
	text-align: center;
}

#page-content #content #unlocked #cards-blq .card-img-blq img
{
	margin: 3px -1px 0 0;
	border: 0;
	padding: 0;
}

#page-content #content #unlocked #cards-blq .card-options-blq
{
	padding: 34px 30px 15px 30px;
	text-align: center;
	background-color: #ebebeb;
	background-position: center -163px;
	background-repeat: no-repeat;
	height: 4.5em;
}

#page-content #content #unlocked #cards-blq .card-options-blq .button
{
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
}

#page-content #content #unlocked #cards-blq .card-options-blq a.link-arrow
{
	margin: 0 -10px;
}

#page-content #content #unlocked #cards-blq .card-info-blq
{
	background: #f6f6f6;
	text-align: center;
	padding: 15px;
	color: #555;
	height: 12em;
}

#page-content #content #unlocked #cards-blq .card-info-blq p
{
	line-height: 16px;
	font-size: 12px;
}

@media only screen and (max-width : 950px) {
    #page-content #content #unlocked #cards-blq li {
        	width: 100%;
    }
    #page-content #content #unlocked #cards-blq .card-info-blq {
            height: auto;
    }
}
@media only screen and (max-width : 800px) {
    #page-content #content #unlocked #cards-blq li {
        	width: 50%;
    }
    #page-content #content #unlocked #cards-blq .card-info-blq {
        	height: 12em;
    }
}
@media only screen and (max-width : 650px) {
    #page-content #content #unlocked #cards-blq li {
        	width: 100%;
    }
    #page-content #content #unlocked #cards-blq .card-info-blq {
            height: auto;
    }
}

@media only screen and (max-width : 800px) {
    #node_1122 th.st-head-row {
        border-top: 2px solid #2FB457;
    }
    #node_1122 .st-val {
        width: 25%;
    }
}


/*---------------------------------------------------------------------------
  Content Pages - Fares: Table
  ---------------------------------------------------------------------------*/
#page-content #content #unlocked .fares tr:hover
{
	background: none !important;
}

#page-content #content #unlocked .fares tr th.fare,
#page-content #content #unlocked .fares tr td.fare
{
	text-align: center;
	width: 33%;
	border-right: 1px dashed #ddd;
}

#page-content #content #unlocked .fares tr th:last-child.fare,
#page-content #content #unlocked .fares tr td:last-child.fare
{
	border-right: none;
}

#page-content #content #unlocked .fares tr td
{
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dashed #ddd;
}

#page-content #content #unlocked .fares tr td h3
{
	margin: 0 0 5px 0 !important;
	color: #555;
}
#page-content #content #unlocked .three-columns tr td h3
{
	margin: 0 0 5px 0 !important;
	color: #555;
}

#page-content #content #unlocked .fares tr td img
{
	clear: both;
	border: none !important;
	padding: 0 !important;
}

#page-content #content #unlocked .fares.fares tr td.fare
{
	font-size: 1.7em;
}

/*---------------------------------------------------------------------------
  Content Pages: Sitemap
  ---------------------------------------------------------------------------*/
#page-content #content #sitemap
{
	padding: 0 30px 20px;
}

#page-content #content #sitemap h2
{
	font-size: 1.35em;
	font-weight: bold;
	margin: 20px 0 10px;
}

#page-content #content #sitemap ol li
{
	margin-left: 20px;
	line-height: 1.4em;
	list-style: decimal;
	font-size: 1.05em;
}

#page-content #content #sitemap ol li ol li
{
	list-style: circle;
}

/*---------------------------------------------------------------------------
  Content Pages: Collapsible content
  ---------------------------------------------------------------------------*/
#page-content #content #unlocked .accordion,
#post  .accordion
{
	padding: 12px 0 15px;
	background: url(../images/accordion-shadow.png) bottom center no-repeat;
}

#page-content #content #unlocked .accordion .head a,
#post  .accordion .head a
{
	padding-left: 23px;
	background: url(../images/expand.png) 2px 1px no-repeat;
	font-size: .8em;
}

#page-content #content #unlocked .accordion .collapsed a,
#post  .accordion .collapsed a
{
	background: url(../images/collapse.png) 2px 1px no-repeat;
}

#page-content #content #unlocked .accordion div,
#post  .accordion div
{
	padding-left: 23px;
}

#page-content #content #unlocked .accordion p,
#post  .accordion p
{
	line-height: 1.4em;
	margin: 10px 0;
}

/* ---------
 * Forgotten password
 * ----------- */
#page-content #content #unlocked .buttonblock{
    margin-top:10px;
}


/* ---------
 * Standard Lists
 * ----------- */
#page-content #content #unlocked ul
{
	/*clear: both; Removed By Josh*/
	margin: 10px 0;
	padding: 0 0 10px 20px;
}

#page-content #content #unlocked ul li
{
	list-style-image: url(../images/contents/bullet.png);
	list-style-position: outside;
	font-size: 1em;
	line-height: 1.25em;
}


/* ---------
 * Alternative Timetable Search Results List
 * ----------- */

.timetable_results_header{
    display:none;
}
ul.timetable_results_sublist{
    margin-left:50px;
}
ul.timetable_results_sublist li{
    list-style-image: url(../images/contents/bullet.png);
    list-style-position: outside;
}


/* ---------
 * Content Pages: Stackable Plugin global styles
 * ----------- */

.stacktable { width: 100%; }
.st-head-row { padding-top: 20px; padding-left: 20px; }
.st-head-row.st-head-row-main { display: none; padding-top: 0; }
.st-key { width: 49%; text-align: left; padding-right: 1%; }
.st-val { width: 49%; padding-left: 1%; }

.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }

@media only screen and (max-width : 800px) {
    .stacktable.large-only { display: none; }
    .stacktable.small-only { display: table; }
}


/* ---------
 * Content Pages: Display table as divs using the apply-display-block class
 * ----------- */

@media only screen and (max-width : 800px) {
    .apply-display-block tr,
    .apply-display-block th,
    .apply-display-block td  {
        display: block;
    }
}



/* ==========================================================================
  Announcements Page
   ==========================================================================*/
#page-announcements #content h1
{
	font-size: 2em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
	padding: 10px 0 10px 15px;
}

#page-announcements #content .alert
{
	position: absolute;
	top: 40px;
	right: 20px;
}

#content #subscribe-to-alerts .rss-alert p
{
	background-position: 10px -1493px;
}

#page-announcements .rss{
	margin: 13px 0 19px 0;
	display: block;
}

#page-announcements .rss span{
	margin: -2px 5px 0 15px;
}

#page-announcements #contact-form #select-wrapper #inquiry_details div b.headline
{
    padding-bottom: 5px;
}

#page-announcements #contact-form #select-wrapper #inquiry_details div
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-radius: 0px 10px 0px 10px;
    border-radius: 0px 10px 0px 10px;
    float: left;
    margin-right: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: block;
    height: 150px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    background: #e7ecf5;
    border-bottom: 1px solid #fff;
}


#page-announcements #content #project-updates-blq{
    /*display:none;*/
    position: relative;
    overflow: hidden;
    margin: 0 0 20px;
    padding-bottom: 40px;
    float: left;
    width: 100%;
    background: #F7FAFF;
    border-bottom: 1px solid #fff;
    /*-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3); */
}
#page-announcements #content #service-updates-blq

{
	position: relative;
	overflow: hidden;
	margin: 10px 0 0;
	padding-bottom: 40px;
	float: left;
	width: 100%;
	background: #F7FAFF;
	border-bottom: 2px solid #F5B03A;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3); 	
}


#page-announcements #content #service-updates-blq
{
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 0;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 15px 0 15px 0px;
	border-radius: 15px 0 0 0;
}

#page-announcements #content #project-updates-blq
{
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright:0;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0;
	-webkit-border-radius:0 15px 0 15px;
	border-radius: 0 0 15px 0;
}

#page-announcements #content #project-updates-blq
{
	float: right;
}

#page-announcements #content #service-updates-blq h2,
#page-announcements #content #project-updates-blq h2
{
	padding: 20px 20px 15px 20px;
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
}

#page-announcements #content #service-updates-blq p,
#page-announcements #content #project-updates-blq p
{
	padding: 20px 20px 15px 20px;
}

#page-announcements #content #service-updates-blq ul.service-updates,
#page-announcements #content #project-updates-blq ul.service-updates
{
	padding: 0 20px 20px 20px;
        width:100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
       
       
}
#page-announcements #content #service-updates-blq ul.service-updates li.update,
#page-announcements #content #project-updates-blq ul.service-updates li.update{
    float:left;
    width:35%;
}

#page-announcements #content #service-updates-blq a.show-more,
#page-announcements #content #project-updates-blq a.show-more
{
	position: absolute;
	bottom: 20px;
	right: 20px;
	border: none;
}

#page-announcements #content ul.service-updates .scroller,
#page-announcements #content ul.service-updates .scroller .scroller-clip
{
	width: 360px;
}

@media only screen and (max-width : 600px) {

#page-announcements #content .alert
{
	position: relative;
	margin: 10px 20px 20px 20px;
	}
	
#page-announcements #content #service-updates-blq,
#page-announcements #content #project-updates-blq {
	margin: 10px 20px 20px 20px;
	width: auto;
	float: none;

}

}

@media only screen and (max-width : 800px) {

#page-announcements #content .alert
{
	position: relative;
	top: auto;
	right: auto;
}

}

@media only screen and (max-width : 700px) {

#page-announcements #content #service-updates-blq ul.service-updates li.update,
#page-announcements #content #project-updates-blq ul.service-updates li.update{
    width:79%;
}
}

/*---------------------------------------------------------------------------
  Announcements Page: List of service updates // OK
  ---------------------------------------------------------------------------*/
#page-announcements #content ul.service-updates
{
	padding: 0 15px;
}

#page-announcements #content ul.service-updates .update
{
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
	background-size: 600px 3200px;
	padding: 10px 30px 0 62px;
	min-height: 70px;
}

#page-announcements #content ul.service-updates .bus-update
{
	background-position: -545px -2197px;
}

#page-announcements #content ul.service-updates .train-update
{
	background-position: -545px -2427px;
}

#page-announcements #content ul.service-updates .tram-update
{
	background-position: -545px -2312px;
}

#page-announcements #content ul.service-updates .bus-train-tram-update
{
	background-position: -545px -2542px;
}

#page-announcements #content ul.service-updates .train-tram-update
{
	background-position: -545px -2657px;
}

#page-announcements #content ul.service-updates .bus-train-update
{
	background-position: -545px -2772px;
}

#page-announcements #content ul.service-updates .bus-tram-update
{
	background-position: -545px -2887px;
}

/* Callouts */

#page-announcements #content #callouts h2
{
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
	padding: 0 0 10px 20px;
}

/* Feedback Form */

#page-announcements #contact-form{
	padding: 20px 20px 15px 20px;
}

/* Event Form */
#page-content #event-form{
	padding: 20px 20px 15px 20px;
  background: #F6F6F6;
  border: 1px solid #CCC;
  margin: 30px;
  }
#page-content #event-form label {
	text-indent: 2px;
	margin: 5px 0 10px 0;	
}
#page-content #event-form .element{
	/*margin: 20px 0 20px 0;*/
	display: block;
	height: inherit;
	padding: 10px 0px;
}
#page-content #event-form h2{
	font-size: 1.7em;
}
#page-content #event-form h3{
	margin: 40px 0px 10px 0px;
	font-size: 1.5em;
}

#page-content #event-form .element h4{
	font-weight: bold;
	font-size: 1em;
	margin:	20px 0;
}
#page-content #event-form .setup_dates h4{
}

#event-form input[type=text] {
	width: 25%;
	font-size: 1em;
}

#event-form input.event_details {
	width: 15.5%;
}

#event-form input#total_attendance {
  margin-right: 20px;
  float: right;
}

#page-content #event-form .text-input-long {
	width: 79.7% !important;
}

#event-form input[type=radio] {
	margin-right: 10px;
}


#page-content #event-form textarea{
	margin-top: 10px;
}
#page-content #event-form .setup_dates label{
	display: inline-block;
	padding-right: 10px;
}
#page-content #event-form .setup_dates input{
	display: inline-block;
}
#page-content #event-form .inline label{
	display: inline-block;
	padding-right: 10px;
	width: 15%;
}
#page-content #event-form .inline label.short{
	display: inline-block;
	padding-right: 0;
	padding-left: 20px;
	width: 15%;
}
#page-content #event-form .inline label.long{
	display: inline-block;
	width: 50%;
}
#page-content #event-form .inline input{
	display: inline-block;
	width: 30%;
}
#page-content #event-form .details label.short {
	padding-left: 0;
	padding-right: 10px;
}
#page-content #event-form #validation_messages{
    display:none;
    color:#ff0000;
    padding: 20px 0px;
}
#page-content #event-form #validation_messages p{
    padding: 5px 0px;
}
#page-content #event-form #validation_messages h2{
    padding-left: 0px !important;
    padding-bottom: 5px !important;
}
#page-content #event-form .element .day_label{
    display: inline-block;
    width: 70px;
}

#page-content #event-form .top-labels{
	margin-left: 75px;
}
#page-content #event-form .top-labels label{
	float: left;
	width: 19.5%;
	margin-bottom: 0px;
}
#page-content #event-form .element.total{
	float: right;
}
#page-content #event-form .element.total input{
	width: 135px;
}
#page-content #event-form .element.total label{
	float: left;
	margin-right: 20px;
	margin-top: 12px;
}
#page-content #event-form input.top-long{
	width: 40%;
}
#page-content #event-form input.invalid{
	border: 1px solid #ff0000;
}

#event_form_submit {
	margin: 30px 0;
	min-width: 160px;
}

#page-announcements #contact-form .separator{
	clear: both;
}
#page-announcements #contact-form h3{
	font-weight: bold;
	font-size: 1.3em;
	padding-bottom: 10px;
}
#page-announcements #contact-form h2{
	padding-top: 0px;
	padding-left: 0px !important;
}
#page-announcements #faq_search_results #list-more-contents{
	margin-top: 10px;
}
#page-announcements #faq_search_results #list-more-contents li{
	margin-top: 0px;
	margin-bottom: 10px;
	padding-bottom: 0px;
}
#page-announcements #faq_search_results #list-more-contents li h3{
	padding-bottom: 0px;
}
#page-announcements #faq_search_results #list-more-contents li h3 a{
	font-size: 0.8em;
}

#page-announcements #contact-form #live_chat .chatbox{
	background-image: url('../images/chatboxes_36.png');
	background-repeat: no-repeat;
	background-position: 10px 10px;
	padding-left: 54px;
	padding-bottom: 20px;
	padding-top: 20px;
	padding-right: 20px;
}

#page-announcements #contact-form #select-wrapper {
	background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 0 15px 0 15px;
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.1);
    margin: 30px 0 10px 0;
    padding: 15px 20px 0 20px;
}

#page-announcements #contact-form #select-wrapper #inquiry_details div li.tick
{
    list-style-type: none;
    background: url('../images/mini-icons.png') no-repeat 0 -641px;
    width: 250px;
    height: auto;
    padding-left: 25px;
}

#page-announcements #content #contact-form #feedback #select-wrapper p {
	font-weight: normal;
}

#page-announcements #contact-form label {
	font-weight: bold;
	text-indent: 2px;
	margin: 5px 0 10px 0;	
}


#page-announcements #contact-form #more_details_form label {
	font-weight: normal;
	margin: 0;	
}


#page-announcements #contact-form #tier_3_holder{
	margin-bottom: 15px;
}

#page-announcements #contact-form #more_details_form{
	display:none;
	margin-top: 2.5em;
	margin-left: 15px;
}
#page-announcements #contact-form #faq_search{
	margin-top: 20px;
	width: 50%;
	float: left;
}
#page-announcements #contact-form #live_chat{
	margin-top: 20px;
	width: 50%;
	float: left;
}

#page-announcements #contact-form textarea {
	font-size: 1.25em;
	padding: 8px;
	margin: 3px 0 0 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #B3B3B3;
	width: 425px;
}
#page-announcements #contact-form input[type="text"] {
	width: 300px;
}

#page-announcements #contact-form input.button {
	margin: 5px 0 20px 0;
}

#page-announcements #contact-form input,
#page-announcements #contact-form select,
#page-announcements #contact-form textarea{
	margin-bottom: 8px;
	font-weight: normal;
}
#page-announcements #contact-form select{
	margin-right: 10px;
    width: 289px;
	background: #fefefe;
	border: 1px solid #B3B3B3;
	/*padding: 5px 0;
	height: 15em;*/
}
#page-announcements #contact-form select option {
	/*padding: .35em 10px;
	border-bottom: 1px dotted #E7ECF5;*/
}

#page-announcements #contact-form #tier_3{
	margin-right: 0;
}

#page-announcements #contact-form select#hour,
#page-announcements #contact-form select#minute,
#page-announcements #contact-form select#ampm{
    width:50px;
	/*height: 1em;
	padding: .1em 0;*/
	margin-top: .5em;
}
#page-announcements #list-more-contents li
{
	padding-bottom: 10px;
	margin-top:10px;
}

#page-announcements #list-more-contents li a
{
	font-size: 1.25em;
	font-weight: bold;
}

#page-announcements #list-more-contents li p
{
	line-height: 1.3em;
	font-size: 1.1em;
	padding-top: 10px;
	margin-left: 10px;
}

#page-announcements #contact-form #feedback #select-wrapper h2,
#page-announcements #contact-form #feedback #contact_details h2{
	padding-left: 0px;
}


@media only screen and (max-width : 800px) {    
    #page-announcements #contact-form #faq_search,
    #page-announcements #contact-form #live_chat {
        width: 100%;
    }
    #page-announcements #contact-form select {
        width: 245px;
    }
    #page-announcements #contact-form input[type="text"] {
        width: 90%;
    }
    
}

/*---------------------------------------------------------------------------
  Announcements Page: Collapsible content
  ---------------------------------------------------------------------------*/
#page-announcements #content .accordion
{
	padding: 12px 0 15px;
	/*background: url(../images/accordion-shadow.png) bottom left no-repeat;*/
	background: url("../images/accordion-shadow.png") no-repeat scroll center 107%;
    border-bottom: 1px solid #D0D4DC;
	padding-left:10px;
}

#page-announcements #content .accordion .head a
{
	padding-left: 23px;
	background: url(../images/expand.png) 2px 1px no-repeat;
	font-size: 1.1em;
	font-weight: normal;
	margin: 0;
}

#page-announcements #content .accordion .collapsed a
{
	background: url(../images/collapse.png) 2px 1px no-repeat;
}

#page-announcements #content .accordion div
{
	padding-left: 23px;
}

#page-announcements #content .accordion h3 {
	line-height: 1.3em;
	margin: 10px 0;
	font-weight: bold;
}

#page-announcements #content .accordion p
{
	line-height: 1.3em;
	margin: 10px 0;
}

/*---------------------------------------------------------------------------
  Announcements Page : Feedback Page Columns
  ---------------------------------------------------------------------------*/
#page-announcements #content #feedback-contact-details,
#page-announcements #content #feedback-contact-form
{
	position: relative;
	overflow: hidden;
	margin: 10px 0 20px;
	padding-bottom: 25px;
	float: left;
	width: 100%;
	background: #ffffff;
	border-bottom: 1px solid #fff;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3); 	
	min-height:500px;
}

#page-announcements #content #feedback-contact-details
{
	-moz-border-radius-topleft: 15px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 15px 0px 15px 0px;
	border-radius: 15px 0px 15px 0px;
}

#page-announcements #content #feedback-contact-form
{
	padding-top: 1em;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius: 0px 15px 0px 15px;
	border-radius: 0px 15px 0px 15px;
}

#page-announcements #content #feedback-contact-form
{
	float: right;
}

#page-announcements #content #feedback-contact-details h2,
#page-announcements #content #feedback-contact-form h2
{
	padding: 20px 20px 15px 20px;
	font-size: 1.3em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
}
#page-announcements #content #feedback-contact-form h2#service_select_or
{
	padding: 2px 20px 8px 2px;
	font-size: 1.2em;
}
#page-announcements #content #feedback-contact-form h3#service_select_header
{
	padding: 7px 20px 8px 2px;
	font-size: 1em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
}

#page-announcements #content #feedback-contact-form #contact_details .accordion p
{
	/*padding-left: 20px;*/
        font-weight: normal;
}
#page-announcements #content #feedback-contact-form #contact_details .accordion ul
{
	/*clear: both; Removed By Josh*/
	margin: 10px 0;
	padding: 0 0 10px 20px;
}

#page-announcements #content #feedback-contact-form #contact_details .accordion ul li
{
	list-style-image: url(../images/contents/bullet.png);
	list-style-position: outside;
	font-size: 1em;
	line-height: 1.25em;
}


#page-announcements #content #feedback-contact-form #feedback p
{
	padding-left: 0;
	margin-bottom: 10px;
	font-weight: bold;
}


#page-announcements #content #feedback-contact-form #faq_search_results p
{
	padding-left: 0px;
}


/* Tier dropdown boxes */
#page-announcements #content #feedback-contact-form #tier_1_col,
#page-announcements #content #feedback-contact-form #tier_2_col,
#page-announcements #content #feedback-contact-form #tier_3_col
{
    float:left;
    margin-right: 5px;
}

#page-announcements #contact-form #form_response,
#page-announcements #contact-form #email_response,
#page-announcements #contact-form #form_email_response{
    display:none;
}
#page-announcements #contact-form input.invalid,
#page-announcements #contact-form textarea.invalid{
    border: 1px solid #ff0000;
}

#page-announcements #contact-form #service_lookup{
	width: 460px;
	float: left;
	height: 190px;
}
#page-announcements #contact-form #divider_label{
	width: 41px;
	float: left;
	margin-top: 54px;
}
#page-announcements #contact-form #route_select{
	width: 300px;
	float: left;
	margin-top: 38px;
}

@media only screen and (max-width : 480px) {
    #page-announcements #content #feedback-contact-form {
        border-radius: 0;
        -webkit-border-radius: 0;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
}

/* ==========================================================================
   Post Page (service update, news & event page)
   ==========================================================================*/

#page-post #post
{
	padding: 15px 15px 0 15px;
}

#page-post #post p
{
	font-size: 1.1em;
	line-height: 1.3em;
	text-shadow: 0px 1px 0px #ffffff;
	padding-bottom: 15px;
}

/* Details */

#page-post #post-details #section-icons
{
	float: right;
	padding: 0;
}

#page-post #post-details h1
{
	font-size: 2em;
	font-weight: bold;
	line-height: 1.25em;
	text-shadow: 0px 1px 0px #ffffff;
	padding-bottom: 15px;
}

#page-post #post-details ul.routes-affected
{
	display: inline-block;
	white-space: normal;
	overflow: visible;
	padding-top: 3px;
}

/* Body */

#page-post #post #unlocked
{
	padding: 15px 15px 5px 15px !important;
	margin: 25px 0 0 -15px !important;
}

#page-post #post a.link-arrow-back
{
	display: block;
	margin-top: 10px;
}

/* Sidebar - Location */

#page-post #sidebar #post-location
{
	padding: 20px 0 10px 0;
}

#page-post #sidebar #post-location .fold-blue-horizontal
{
	margin: 0 -10px 20px;
}

#page-post #sidebar #post-location .fold-blue-horizontal h2
{
	position: absolute;
	font-size: 1.25em;
	font-weight: bold;
	margin: 0 0 0 22px;
	text-shadow: 0px 1px 0px #ffffff;
}

#page-post #sidebar #post-location p
{
	margin: 0 0 15px 15px;
}

#page-post #sidebar #post-location #map{
	margin-top: 15px;
	width: 310px;
	height: 310px;
	margin-left: 15px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #fff;
}

#page-post #sidebar #post-location #map noscript{
	display: block;
	padding: 10px;
}

/* Sidebar - Others */

#page-post #sidebar #post-others
{
	margin: 20px 0 0 0;
}

#page-post #sidebar #post-others
{
	margin: 20px 0 0 0;
}

#page-post #sidebar #post-others .fold-blue-horizontal
{
	margin: 0 -10px 20px;
}

#page-post #sidebar #post-others .fold-blue-horizontal h2
{
	position: absolute;
	font-size: 1.25em;
	font-weight: bold;
	margin: 0 0 0 22px;
	text-shadow: 0px 1px 0px #ffffff;
}

#page-post #sidebar #post-others ul li
{
	padding: 0 0 20px 15px;
	background: url(../images/sprite.png) 0 -317px no-repeat;
}

#page-post #sidebar #post-others ul li a
{
	font-size: 1.1em;
	line-height: 1.15em;
}

/* Sidebar - Image */

#page-post #sidebar #post-thumbnail
{
	margin: 20px 0 0 0;
}

#page-post #sidebar #post-thumbnail img
{
	border: 2px solid #fff;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); 
}

/* Bottom links */

#page-post #post .back-to-top
{
	margin-left: -20px;
}

#page-post #post .back-to-top a
{
	text-decoration: underline;
}

/* Post Content Styles */
#page-post #content #post{

}

#page-post #content #post #unlocked ul
{
	/*clear: both; Removed By Josh*/
	margin: 10px 0;
	padding: 0 0 10px 20px;
}

#page-post #content #post #unlocked ul li
{
	list-style-image: url(../images/contents/bullet.png);
	list-style-position: outside;
	font-size: 1em;
	line-height: 1.25em;
}
#page-post #content #post #unlocked h1
{
	font-weight:bold;
	font-size: 1.7em;
	margin: .75em 0;
}
#page-post #content #post #unlocked h2
{
	font-weight:bold;
	font-size: 1.6em;
	margin: .75em 0;
}

#page-post #content #post #unlocked h3
{
	font-weight:bold;
	font-size: 1.5em;
	margin: .75em 0;
}
#page-post #content #post #unlocked h4
{
	font-weight:bold;
	font-size: 1.4em;
	margin: .75em 0;

}
#page-post #content #post #unlocked table 
{
	clear: both;
	font-size: 1em;
	margin: 10px 0;
}
#page-post #content #post #unlocked table th
{
	font-weight: bold;
	padding: 10px 8px;
	border-bottom: 2px solid #2FB457;
}
#page-post #content #post #unlocked table td 
{
	line-height: 1.65em;
	padding-right: 20px;
	border-bottom: 1px solid #DDD;
	padding: 6px 8px;
}


/* ==========================================================================
   Register Page (Login/registration form)
   ==========================================================================*/

#page-register #content #register-form-blq,
#page-register #content #login-form-blq
{
	position: relative;
	width: 49%;
}

#page-register #content #register-form-blq
{
	float: left;
	background: #fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #D0D4DC;	
}

#page-register #content #login-form-blq
{
	float: right;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #fff;
	background: #F7FAFF;
}

#page-register #content #register-form-blq .register-form,
#page-register #content #login-form-blq .login-form
{
	padding: 30px;
}

#page-register #content h1
{
	font-size: 1.6em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
	margin-bottom: 20px;
}

#page-register #content p.pre-heding
{
	font-weight: bold;
	margin-bottom: 5px;
}

#page-register #content p.intro
{
	margin-bottom: 15px;
	line-height: 1.2em;
	font-size: 1.2em;
}

#page-register #content input[type=text],
#page-register #content input[type=password]
{
	width: 95%;
	font-size: 1.6em;
}

#page-register #content label
{
	font-size: 1em;
	display: block;
	padding-top: 10px;
}
#page-register #content #username-container
{
	display: none;
}

#page-register #content input.error{
	border:2px solid #ff0000;
}
#page-register #content ol#error_list li label{
	padding-top: 0px;
}

/* Submit */

#page-register #content input[type=submit]
{
	margin-top: 20px;

}

/* Shadow */

#page-register #content #register-form-blq .content-shadow {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -13px;
	z-index: 555;
    background: url("../images/sprite.png") no-repeat scroll center -590px transparent;
    height: 12px;
}

#recaptcha_widget_div {
	margin-top: 20px;
}

#page-register #content p.forgot-password
{
	margin-top: 15px;
}

#page-register #content #register #error-message{
	margin-bottom: 20px;
	background: none;
	padding: 0px 0px 0px 0px;
	min-height: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border-bottom: 0px solid #fff;
}
#page-register #content #register #error-message #error_list{
	background: #ffffff url(../images/error.png) 1em 0px no-repeat;
	background-size: 30px;
	padding-left: 60px;
}
#page-register #content #register #error-message #error_list li{
	color: #ff0000;
	padding-top:5px;
}

/* Mobile */

@media only screen and (max-width : 800px) {
    #page-register #content #register-form-blq,
    #page-register #content #login-form-blq
    {
        width: 100%;
        float: none;
        border: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        padding: 0 20px;
        margin: 0 -20px;
    } 
    .content-shadow {
        display: none;
    }
}


@media only screen and (max-width : 600px) {
    #page-register #content input[type=submit] {
        width: 100%;
        height: 40px;
    }
}

@media only screen and (max-width: 380px) {
    
    #page-register #content #register-form-blq, #page-register #content #login-form-blq {
        padding: 0;
        margin: 0;
    }
    #recaptcha_widget_div {
        margin-bottom: 158px;
    }
    #recaptcha_area {
        position: absolute;
        margin-left: -159px;
        left: 50%;
    }
}
    

/* ==========================================================================
   My Metro Page 
   ==========================================================================*/

#page-mymetro #content #opening
{
	padding: 10px 0 10px 15px;
}

#page-mymetro #content #opening h1
{
	font-size: 2em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
}

#page-mymetro #content #opening p
{
	margin-top: 15px;
	text-shadow: 0px 1px 0px #ffffff;
	line-height: 1.25em;
}

/* Tabs */

#page-mymetro #content #tabs
{
	display: block;
	margin: 35px 0 0 15px;
	height: 25px;
}

#page-mymetro #content #tabs li
{
	display: inline;
	font-size: 1.1em;
	line-height: 1em;
	margin-right: 5px;
	white-space: nowrap;
}

#page-mymetro #content #tabs li.active,
#page-mymetro #content #tabs li a
{
	position: relative;
	padding: 10px 15px;
	background: #F8F8F8;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px;
	border: 1px solid #D0D4DC;
	cursor: default;
	text-decoration: none;
}

#page-mymetro #content #tabs li.active
{
	padding-top: 14px;
	padding-bottom: 10px;
	background: #fff;
	border-bottom: 1px solid #fff;
}

#page-mymetro #content #tabs li a:hover
{
	background: #fff;
}

#page-mymetro #content #tabs .number
{
	background: #2EAA56;
	position: absolute;
	top: -10px;
	right: 5px;
	padding: 2px 5px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: .85em;
	line-height: 1.3em;
	color: #fff;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); 	
}


@media only screen and (max-width : 1040px) {
	
	#page-mymetro #content #tabs {
		border-bottom: 0;
        margin-bottom: 0px;
	}
	
	#page-mymetro #content #tabs li {
		display: inline-block;
		margin: 8px 4px;
		float:left;
        line-height: 36px;
	}
	
	#page-mymetro #content #tabs li a {
		display: inline-block;
		border: 0;
		padding: 0px 12px;
		background: #ffffff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#page-mymetro #content #tabs li a:hover {
		background: #23b452;
		border: 0;
		color: #FFF;
	}
	
	#page-mymetro #content #tabs li.active {
		background: #00295e;
		padding: 0px 12px;
		border: 0;
		color: #FFF;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	

}

/* Tab content area */

#page-mymetro #content #tab-content
{
	background: #fff;
	min-height: 400px;
	border: 1px solid #D0D4DC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}

#page-mymetro #content #tab-toolbar
{
	line-height: 40px;
	border-bottom: 2px solid #2EAA56;
	padding: 0 20px;
}

#page-mymetro #content #tab-toolbar a.find
{
	background: url(../images/mini-icons.png) 0 -320px no-repeat;
	padding: 2px 0 2px 25px;
}

@media only screen and (max-width : 1040px) {
    #page-mymetro #content #tab-content {
        margin-top: 10px;
    }
}

@media only screen and (max-width : 480px) {
    #page-mymetro #content #tab-content {
        border: none;
        -webkit-border-radius: none;
        -moz-border-radius: none;
        border-radius: none;
    }
}
 
/* Table - Generic */

#page-mymetro #content #tab-content table a.delete
{
	background: url(../images/mini-icons.png) 0 -383px no-repeat;
	padding: 2px 0 2px 20px;
}

#page-mymetro #content #tab-content table a.edit
{
	background: url(../images/mini-icons.png) 0 -447px no-repeat;
	padding: 2px 0 2px 20px;
	margin-right: 15px;
}

#page-mymetro #content #tab-content table a.view
{
	background: url(../images/mini-icons.png) 0 -254px no-repeat;
	padding: 2px 0 2px 20px;
	margin-right: 15px;
}

#page-mymetro #content #tab-content table a.start
{
	background: url(../images/mini-icons.png) 0 -512px no-repeat;
	padding: 2px 0 2px 20px;
	margin-right: 15px;
}

#page-mymetro #content #tab-content table th
{
	font-weight: bold;
	height: 40px;
}

#page-mymetro #content table tr td
{
    border-bottom: 1px dashed #D8D8D8;
}

@media only screen and (min-width : 801px) {
    #page-mymetro #content table tr td
    {
        padding: 15px 0;
    }
}

#page-mymetro #content table tr:last-child td
{
	border: none;
}

#page-mymetro #content .alert
{
	margin: 20px;
}

/* Inline edit */

#page-mymetro #content table tr td .editable
{
	font-weight: bold;
	font-size: 1.25em;
}

#page-mymetro #content table tr td .ui-state-hover
{
	color: #0075b5;
	padding-right: 22px;
	background: url(../images/mini-icons.png) right -449px no-repeat;
	border: none;
}

#page-mymetro #content table tr td input[type=text]
{
	font-weight: normal;
	margin-bottom: 5px;
	display: block;
	width: 80%;
}

@media only screen and (max-width : 800px) {
    #page-mymetro #content table tr td > div {
        padding-top: 10px;
        padding-bottom: 20px;
    }
}

/* Table - MY ROUTES */

#page-mymetro #content #my-routes .col-1
{
	width: 12%;
	padding-left: 20px;
}

#page-mymetro #content #my-routes .col-1 a
{
	text-decoration: none;
}

#page-mymetro #content #my-routes .col-2 a
{
	display: block;
}

#page-mymetro #content #my-routes .col-2 a.route-name
{
	font-size: 1.25em;
	margin-bottom: 3px;
}

#page-mymetro #content #my-routes .col-3,
#page-mymetro #content #my-routes .col-4
{
	width: 12%;
	text-align: center;
}

#page-mymetro #content #my-routes .col-5
{
	padding-right: 20px;
	text-align: right;
	width: 22%;
}


@media only screen and (max-width : 1040px) {

    #page-mymetro #content #my-routes .col-5
    {
        text-align: left;
        line-height: 2em;
    }

}

@media only screen and (max-width : 800px) {
    
    #page-mymetro #tab-content #my-routes-tab tr th.st-head-row {
        padding-left: 20px;
        padding-top: 20px;
    }
    
    #page-mymetro #tab-content #my-routes-tab tr td.st-val.col-2 {
        position: relative;
        top: -85px;
    }
    
    #page-mymetro #tab-content #my-routes-tab .st-key .route-name-and-map {
        display: none;	
    }

    #page-mymetro #tab-content #my-routes-tab .st-val .route-name-and-map {
        margin-bottom: -56px;
    }

    #page-mymetro #tab-content #my-routes-tab .st-val .route-name-and-map a {
        display:block;
        padding: 4px 0;
    }

}

/* Table - Route signs */

#page-mymetro #content table .route-sign
{
	position: relative;
	display: block;
	padding: 10px;
	width: 52px;
	height: 52px;
}

#page-mymetro #content table .route-number
{
	display: table-cell;
	vertical-align: middle;
	height: 52px;
	width: 52px;
	color: #fff;
	font-size: 1.35em;
	text-align: center;
}

#page-mymetro #content table .route-shadow
{
	position: absolute;
	background: url(../images/sprite.png) center -1532px;
	height: 17px;
	width: 72px;
	bottom: -17px;
	left: 0;
}

@media only screen and (max-width : 1040px) {

    #page-mymetro #content table .route-number, #page-mymetro #content table .route-sign
    {
        height: 40px;
        width: 40px;
        font-size: 1em;
    }

}

@media only screen and (max-width : 800px) {
    #page-mymetro #content table .route-number, #page-mymetro #content table .route-sign {
        width: 60px;
        height: 60px;
        font-size: 1.3em;
    }
    #page-mymetro #content table .route-number {
        display: block;
        padding-top: 15px;
    
    }
    #page-mymetro #content table .route-shadow {
        /*display: none;*/
    }
}



/* Table - MY TIMETABLES */

#page-mymetro #content #my-timetables .col-1
{
	width: 12%;
	padding-left: 20px;
}

#page-mymetro #content #my-timetables .col-1 a
{
	text-decoration: none;
}

#page-mymetro #content #my-timetables .col-2  .timetable-name
{
	display: inline-block;
}

/*#page-mymetro #content #my-timetables .col-3,*/
#page-mymetro #content #my-timetables .col-2
{
	width: 25%;
}
#page-mymetro #content #my-timetables .col-3
{
	width: 41%;
}

#page-mymetro #content #my-timetables .col-4
{
	padding-right: 20px;
	text-align: right;
	width: 22%;
}

/* Table - MY STOPS */

#page-mymetro #content #my-stops .col-1
{
	padding-left: 20px;
}

#page-mymetro #content #my-stops .col-1 a
{
	display: block;
	font-size: 1.25em;
	margin-bottom: 3px;
}
#page-mymetro #content #my-stops .col-2
{
	width: 12%;
}
#page-mymetro #content #my-stops .col-2 a
{
	text-decoration: none;
}

#page-mymetro #content #my-stops .col-3
{
	width: 30%;
}

#page-mymetro #content #my-stops .col-3 .stop-name
{
	display: inline-block;
}

#page-mymetro #content #my-stops .col-4
{
	padding-right: 20px;
	text-align: right;
	width: 22%;
}


/* Table - Stop signs */

#page-mymetro #content table .stop-sign
{
	position: relative;
	display: none;
	padding: 10px;
	width: 52px;
	height: 52px;
	background-image: url(../images/sprite.png);
}

#page-mymetro #content table .stop-number
{
	display: table-cell;
	vertical-align: middle;
	height: 52px;
	width: 52px;
	font-size: 1.25em;
	text-align: center;
}

@media only screen and (max-width : 800px) {
    #page-mymetro #content table .stop-sign
    {
        position: absolute;
        display: block;
    }
    #page-mymetro #content table tr .stop-sign
    {
        background-position: 0 -2447px;
        color: #2eaa56;
    }
    #page-mymetro #my-stops-tab th.st-head-row a,
    #page-mymetro #my-stops-tab th.st-head-row p {
        margin-left: 90px;
        display: block;
    }
    
    #page-mymetro #my-stops-tab tr.col-2 {
        display: none;
    } 
    #page-mymetro #my-stops-tab tr.col-3 td {
        border: none;
    }
    #page-mymetro #my-stops-tab tr.col-3 td > div {
        padding-bottom: 4px;
    }
    #page-mymetro #my-stops-tab .st-key > div {
        display: none;
    }
    
}

/* Stop Sign - Bus theme */

#page-mymetro #content table tr.bus .route-sign
{
	background-color: #2eaa56;
}

#page-mymetro #content table tr.bus .stop-sign
{
	background-position: 0 -2447px;
	color: #2eaa56;
}

/* Stop Sign - Train theme */

#page-mymetro #content table tr.train .route-sign
{
	background-color: #27a7df;
}

#page-mymetro #content table tr.train .stop-sign
{
	background-position: -170px -2447px;
	color: #27a7df;
}

/* Stop Sign -Tram theme */

#page-mymetro #content table tr.tram .route-sign
{
	background-color: #eb2127;
}

#page-mymetro #content table tr.tram .stop-sign
{
	background-position: -340px -2447px;
	color: #eb2127;
}

/* Table - MY JOURNEY PLANS */

#page-mymetro #content #my-journeyplans .col-1
{
	width: 30%;
	padding-left: 20px;
}

#page-mymetro #content #my-journeyplans .col-1 .journeyplan-name
{
	display: inline-block;
}

#page-mymetro #content #my-journeyplans .col-4
{
	padding-right: 20px;
	text-align: right;
	width: 25%;
}


/* My Metro - Stacktable styles */


#page-mymetro .st-head-row.st-head-row-main { display: none;}
#page-mymetro .st-head-row a { text-decoration: none; }
#page-mymetro .st-key { width: 100px; text-align: right; padding-right: 10px; font-weight: bold; }
#page-mymetro .st-val { width: auto; padding-right: 10px;}



/* Section - UPDATE MY DETAILS */

#page-mymetro #content #update-profile .col-1,
#page-mymetro #content #update-profile .col-2
{
	float: left;
	width: 43.8%;
	padding: 30px;
}

#page-mymetro #content #update-profile .col-full{
   	float: left;
	width: 100%;
	padding: 30px; 
}


#page-mymetro #content #update-profile h2
{
	font-size: 1.65em;
	font-weight: bold;
	margin-bottom: 20px;
}

#page-mymetro #content #update-profile .col-1 p
{
	font-size: 1.1em;
	line-height: 1.3em;
	margin-bottom: 15px;
}

#page-mymetro #content #update-profile label
{
	font-size: 1em;
	display: block;
	padding-top: 10px;
}

#page-mymetro #content #update-profile .button,
#page-mymetro #content #update-profile .button,
#page-mymetro #content #update-profile input[type=text],
#page-mymetro #content #update-profile input[type=password]
{
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    box-sizing : border-box;
}

#page-mymetro #content #update-profile input[type=text],
#page-mymetro #content #update-profile input[type=password] {
	width: 100%;
}

#page-mymetro #content #update-profile input[type=submit]
{
	margin-top: 20px;
}

#page-mymetro #content #update-profile input#cancel
{
    float: left;
    margin-top: 12px;
    margin-right: 10px;
}
#page-mymetro #content #update-profile #login-details {
        padding-bottom: 30px;
}

@media only screen and (max-width : 1040px) {
    
    #page-mymetro #content #update-profile-wrapper #tab-content {
        background: none;
        border: none;
    }
    #page-mymetro #content #update-profile .col-1,
    #page-mymetro #content #update-profile .col-2
    {
        clear: both;
        width: 450px;
        padding: 20px 20px 10px 20px;
    }
    #page-mymetro #content #update-profile .button,
    #page-mymetro #content #update-profile .button,
    #page-mymetro #content #update-profile input[type=text],
    #page-mymetro #content #update-profile input[type=password]{
        width: 100%;
    }
}

@media only screen and (max-width : 600px) {
    #page-mymetro #content #update-profile .col-1,
    #page-mymetro #content #update-profile .col-2 {
        width: 88%;
    }
    #page-mymetro #content #update-profile .button,
    #page-mymetro #content #update-profile .button,
    #page-mymetro #content #update-profile input[type=text],
    #page-mymetro #content #update-profile input[type=password] {
        width: 100%;
    }
}

/* ==========================================================================
   Timetables and Maps landing page
   ==========================================================================*/

/* Timetables & Maps landing page */

#timetables-maps-shortcuts-col-1,
#timetables-maps-shortcuts-col-2
{
	margin-top: 10px;
	width: 43%;
	padding-bottom: 30px;
}

#timetables-maps-shortcuts-col-1
{
	float: left;
	margin-left: 30px;
}

#timetables-maps-shortcuts-col-2
{
	float: right;
	margin-right: 30px;
}

#timetables-maps-shortcuts-col-1 h3,
#timetables-maps-shortcuts-col-2 h3
{
	font-size: 1.35em;
	font-weight: bold;
	margin-bottom: 15px;
	border-bottom: 2px solid #555555;
	padding-bottom: 5px;
}

/* Timetables & Maps 3 landing pages */

#timetables-maps-search-blq,
#timetables-search-blq,
#maps-search-blq
{
	padding: 20px;
	background: #f8f8f8;
	margin: 20px 30px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius: 0px 15px 0px 15px;
	border-radius: 0px 15px 0px 15px;
	-webkit-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1); 
        clear:both;
}

#timetables-maps-search-blq h2,
#timetables-search-blq h2,
#maps-search-blq h2
{
	display: block;
	font-size: 1.35em;
	color: #000;
	padding-bottom: 15px;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
}

/* ==========================================================================
   Search Results Page
   ==========================================================================*/


#page-search-results #search-results-wrapper h1
{
	margin: 15px;
	font-size: 2em;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
	margin-bottom: 0px;
}

#page-search-results #search-results-wrapper h2.spelling
{
	padding-bottom: 10px;
	font-size: 1.3em;
	margin-left: 16px;
}



/*-----------------------------------------------------------------------------------------------
  Tabs
-----------------------------------------------------------------------------------------------*/


#page-search-results #content #tabs
{
	display: block;
	margin: 35px 0 0 15px;
	height: 25px;
}

#page-search-results #content #tabs li
{
	display: inline;
	font-size: 1.1em;
	line-height: 1em;
	margin-right: 5px;
	white-space: nowrap;
}

#page-search-results #content #tabs li
{
	position: relative;
	padding: 10px 15px;
	background: #F8F8F8;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px;
	border: 1px solid #D0D4DC;
	cursor: default;
	text-decoration: none;
}
#page-search-results #content #tabs li a
{
	text-decoration: none;
	/*cursor: default;*/
}

#page-search-results #content #tabs li.active
{
	padding-top: 14px;
	padding-bottom: 10px;
	background: #fff;
	border-bottom: 1px solid #fff;
}
#page-search-results #content #tabs li a:hover
{
	background: #fff;
}

#page-search-results #content #tabs .number
{
	background: #2EAA56;
	position: absolute;
	top: -10px;
	right: 5px;
	padding: 2px 5px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: .85em;
	line-height: 1.3em;
	color: #fff;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); 	
}


@media only screen and (max-width : 1040px) {
    
	#page-search-results #search-results-wrapper {
        padding-top: 10px;
    }
	
	#page-search-results #content #tabs {
		border-bottom: 0;
        margin-bottom: 0px;
	}
	
	#page-search-results #content #tabs li {
		display: inline-block;
		margin: 8px 4px;
		float:left;
        line-height: 36px;
        padding: 0;
        border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#page-search-results #content #tabs li a {
		display: inline-block;
		border: 0;
		padding: 0px 12px;
		background: #ffffff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}
	
	#page-search-results #content #tabs li a:hover {
		background: #23b452;
		border: 0;
		color: #FFF;
	}
	
	#page-search-results #content #tabs li.active {
		border: 0;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
        padding: 0;
	}
	#page-search-results #content #tabs li.active a {
		background: #00295e;
		color: #FFF;
    }
	
	

}

/* Tab content area */
#page-search-results #content #tab-content #routes-maps-tab,
#page-search-results #content #tab-content #stops-tab,
#page-search-results #content #tab-content #service-updates-tab,
#page-search-results #content #tab-content #news-tab,
#page-search-results #content #tab-content #events-tab,
#page-search-results #content #tab-content #content-tab{
	display: none;
}
#page-search-results #content #tab-content #routes-maps-tab.active,
#page-search-results #content #tab-content #stops-tab.active,
#page-search-results #content #tab-content #service-updates-tab.active,
#page-search-results #content #tab-content #news-tab.active,
#page-search-results #content #tab-content #events-tab.active,
#page-search-results #content #tab-content #content-tab.active{
	display: block;
}

#page-search-results #content #tab-content
{
	background: #fff;
	min-height: 400px;
	border: 1px solid #D0D4DC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}

#page-search-results #content #tab-content table th {
  font-weight: bold;
  height: 40px;
}
#page-search-results #content #tab-content table tr.column-labels th {
	border-bottom: 2px solid #2EAA56;
}
#page-search-results #content #tab-content table tr td {
	padding: 15px 0;
	border-bottom: 1px dashed #D8D8D8;
}
#page-search-results #content #tab-content table th a{
	display: inline-block;
	height: 15px;
	width: 15px;
	background: url(../images/sprite.png) -160px -867px no-repeat;
	background-size: 300px 1600px;
	margin: 1px 0 2px 23px;
}

#page-search-results #content #tab-toolbar
{
	line-height: 40px;
	border-bottom: 2px solid #2EAA56;
	padding: 0 20px;
}

#page-search-results #content #tab-toolbar a.find
{
	background: url(../images/mini-icons.png) 0 -320px no-repeat;
	padding: 2px 0 2px 25px;
}

#page-search-results #content #tab-content #stops-tab .stop_address_mobile{
	display: none;
}

@media only screen and (max-width : 1040px) {
    #page-search-results #content #tab-content {
        margin-top: 10px;
    }
}

@media only screen and (max-width : 480px) {
    #page-search-results #content #tab-content {
        border: none;
        -webkit-border-radius: none;
        -moz-border-radius: none;
        border-radius: none;
    }
    #page-search-results #content #tab-content table th.col-3{
    	width: 66px;
    }
    #page-search-results #content #tab-content table th.col-3 div{
    	width: 66px;
    }
    #page-search-results #content #tab-content table th a{
    	margin-left: 23px; 
    	margin-top: -17px;
    }
    #page-search-results #content #tab-content #stops-tab .stop_address_mobile{
    	display: block;
    }
    #page-search-results #content #tab-content #stops-tab table#my-stops td.col-2,
    #page-search-results #content #tab-content #stops-tab table#my-stops th.col-2{
    	display: none;
    }
}


/*-----------------------------------------------------------------------------------------------
  Accordion
-----------------------------------------------------------------------------------------------*/

#page-search-results #search-results-wrapper .accordion
{
	position: relative;
	background: #fff;
	border: 1px solid #D0D4DC;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin-bottom: 15px;
}

#page-search-results #search-results-wrapper .accordion .head
{
	background: #f8f8f8 url(../images/accordion-bg.png) repeat-x;
	padding: 10px 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	cursor: pointer;
}

#page-search-results #search-results-wrapper .accordion .head a
{
	background: url(../images/collapse.png) 10px 45% no-repeat;
	padding-left: 30px;
	font-weight: bold;
	font-size: 1.1em;
}

#page-search-results #search-results-wrapper .accordion .collapsed a
{
	background: url(../images/expand.png) 10px 45% no-repeat;
}

#page-search-results #search-results-wrapper .accordion .accordion-shadow
{
	position: absolute;
	bottom: -21px;
	background: url(../images/sprite.png) center -590px no-repeat;
	height: 20px;
	width: 100%;
	z-index: 444;
}

/*-----------------------------------------------------------------------------------------------
  Grid list
-----------------------------------------------------------------------------------------------*/

#page-search-results #grid-list
{
	padding: 25px 25px 15px;
}

/*-----------------------------------------------------------------------------------------------
  Service Updates
-----------------------------------------------------------------------------------------------*/

#page-search-results #service-updates
{
	padding: 25px 25px 15px;
}

#page-search-results #service-updates #list-updates .update p
{
	width: 90%;
}

/*-----------------------------------------------------------------------------------------------
  News
-----------------------------------------------------------------------------------------------*/

#page-search-results #news
{
	padding: 25px 25px 15px;
}

#page-search-results #news #list-news .post p
{
	width: 90%;
}

/*-----------------------------------------------------------------------------------------------
  Events
-----------------------------------------------------------------------------------------------*/

#page-search-results #events
{
	padding: 25px 25px 15px;
}

/*-----------------------------------------------------------------------------------------------
  STOPS
-----------------------------------------------------------------------------------------------*/
#page-search-results #stops, #page-content #stops
{
	padding: 25px 25px 15px;
}

#page-search-results #list-stops li.stop a,#page-content #list-stops li.stop a
{
	background-image: url(../images/mini-icons.png);
	background-position: 0 -702px;
	height: 20px;
	background-repeat: no-repeat;
	padding-left: 17px;
	padding-top: 3px;
	display: block;
}
h2.stop-search-header{
	margin-top:20px;
}

#page-search-results #list-stops li.stop span.stop_address{
	margin-top: -17px;
	display: inline-block;
	margin-left: 17px;
}
#page-content #list-stops li.stop span.stop_address{
	margin-top: -17px;
	display: inline-block;
	margin-left: 17px;
}

/*-----------------------------------------------------------------------------------------------
  More contents
-----------------------------------------------------------------------------------------------*/

#page-search-results #more-contents
{
	padding: 25px 25px 15px;
}

#more-contents #list-more-contents li
{
	padding-bottom: 10px;
}

#more-contents #list-more-contents li a
{
	font-size: 1.25em;
	font-weight: bold;
}

#more-contents #list-more-contents li p
{
	line-height: 1.3em;
	font-size: 1.1em;
	padding-top: 10px;
	margin-left: 10px;

}

/*---------------------------------------------------
  No Results
----------------------------------------------------*/

#no_results{
    padding: 20px 20px;
}

/* ==========================================================================
   Tickets Landing Page
   ==========================================================================*/

/* Tickets landing page */

#page-content #content #tickets-blq
{
    margin: 0 30px;
	margin-top: -9px;

}

#page-content #content #tickets-blq .tickets-blq-col-1,
#page-content #content #tickets-blq .tickets-blq-col-2 {
    width: 47%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#page-content #content #tickets-blq .tickets-blq-col-1 {
    padding-right: 3%;
    border-right: 1px solid #efefef;
}
#page-content #content #tickets-blq .tickets-blq-col-2 {
    padding-left: 3%;
}

@media only screen and (max-width: 600px) {
#page-content #content #tickets-blq .tickets-blq-col-1,
#page-content #content #tickets-blq .tickets-blq-col-2 {
        width: 100%;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #efefef;
        margin-bottom: 20px;
    }
}

#page-content #content #tickets-blq h2
{
	font-size: 1.65em;
	margin: 20px 0 12px;
}

#page-content #content #tickets-blq img
{
	padding: 0;
	margin-bottom: 20px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius: 0px 15px 0px 15px;
	border-radius: 0px 15px 0px 15px; 
    max-width: 100%;
    height: auto;
}

#page-content #content #tickets-blq .button
{
	position: absolute;
	top: 205px;
	left: 45px;
	right: 45px;
	text-align: center;
}

#page-content #content #tickets-blq p
{
	line-height: 1.35em;
}

#page-content #content #tickets-blq ul.shortcuts-list
{
	margin-top: 15px;
}

/* Metrocard landing page */

#page-content #content #metrocard-blq
{
    margin: 0 30px;
	margin-top: -9px;
}

#page-content #content #metrocard-blq .metrocard-blq-col-1,
#page-content #content #metrocard-blq .metrocard-blq-col-2
{
    width: 47%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#page-content #content #metrocard-blq .metrocard-blq-col-1 {
    padding-right: 3%;
    border-right: 1px solid #efefef;
}
#page-content #content #metrocard-blq .metrocard-blq-col-2 {
    padding-left: 3%;
}

@media only screen and (max-width: 600px) {
#page-content #content #metrocard-blq .metrocard-blq-col-1,
#page-content #content #metrocard-blq .metrocard-blq-col-2 {
        width: 100%;
        padding: 0;
        border: 0;
        border-bottom: 1px solid #efefef;
        margin-bottom: 20px;
    }
}

#page-content #content #metrocard-blq h2
{
	font-size: 1.65em;
	margin: 20px 0 12px;
}

#page-content #content #metrocard-blq img
{
	padding: 0;
	margin-bottom: 20px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius: 0px 15px 0px 15px;
	border-radius: 0px 15px 0px 15px; 
    max-width: 100%;
    height: auto;
}

#page-content #content #metrocard-blq .button
{
	position: absolute;
	top: 205px;
	left: 45px;
	right: 45px;
	text-align: center;
}

#page-content #content #metrocard-blq p
{
	line-height: 1.35em;
}

#page-content #content #metrocard-blq ul.shortcuts-list
{
	margin-top: 15px;
}


/* ==========================================================================
   Subscribe to alerts
   ==========================================================================*/

#page-content #subscribe-to-alerts
{
	margin: 20px 30px;
}

#page-content #subscribe-to-alerts h2
{
    border-bottom: 3px solid #555555;
    font-size: 1.65em;
    margin-bottom: 15px;
    margin-top: 25px;
    padding-bottom: 5px;
}

#page-content #subscribe-to-alerts #routes
{
	margin: 20px 0; 
}

/* Table */

#page-content #subscribe-to-alerts table
{
	margin: 10px 0;
}

#page-content #subscribe-to-alerts table th
{
	font-weight: bold;
	height: 35px;
}

#page-content #subscribe-to-alerts table tr:hover
{
	background-color: #f6f6f6;
}

#page-content #subscribe-to-alerts table tr:hover th
{
	background-color: #fff;
}

#page-content #subscribe-to-alerts table tr td
{
	border-bottom: 1px dashed #D8D8D8;
	padding: 10px 0;
}

#page-content #subscribe-to-alerts table .col-1
{
	width: 20%;
	padding: 0 10px;
}

#page-content #subscribe-to-alerts table .col-3
{
	text-align: right;
	padding-right: 10px;
}

#page-content #subscribe-to-alerts table .col-3 a.subscribe
{
	color: #00305E;
	padding: 2px 0 2px 20px;
	background: url(../images/mini-icons.png) 0 -575px no-repeat;
}

#page-content #subscribe-to-alerts table th
{
	border-bottom: 2px solid #2EAA56;
}

#page-content #subscribe-to-alerts #tabs
{
	margin: 0px 0px;
}

/* ==========================================================================
   Where to buy
   ==========================================================================*/

#retailer-search-blq
{
	padding: 20px;
	background: #f8f8f8;
	margin: 20px 30px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 15px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 15px;
	-webkit-border-radius: 0px 15px 0px 15px;
	border-radius: 0px 15px 0px 15px;
	-webkit-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 1px 0px 1px rgba(0, 0, 0, 0.1); 
}

#retailer-search-blq h2
{
	display: block;
	font-size: 1.35em;
	color: #000;
	padding-bottom: 15px;
	font-weight: bold;
	text-shadow: 0px 1px 0px #ffffff;
}

#retailer-search-blq p
{
	line-height: 1.35em;
	margin-bottom: 20px;
}

#retailer-search-blq #search-type
{
}

#retailer-search-blq #search-type legend
{
	font-weight: bold;
	margin-bottom: 10px;
}

#retailer-search-blq #search-type label,
#retailer-search-blq #search-type input[type=radio]
{
	display: inline;
	margin-bottom: 20px;
}

#retailer-search-blq #search-type label
{
	margin: 0 10px 0 5px;
}

/* ==========================================================================
   Choose a Stop
   ========================================================================== */

#choose-stop-blq
{
    margin: 20px 30px;
}

#choose-stop-blq h2
{
	font-weight: bold;
	font-size: 1.1em;
	padding: 5px 0;
	margin-bottom: 10px;
}

#choose-stop-blq img
{

	float: left;
	margin-bottom: 10px;
}

#choose-stop-blq input {box-sizing:border-box}

#choose-stop-blq .search-wrapper {
  position:relative;
  margin-right:100px;
}

#choose-stop-blq input[type="text"] {
  display:block;
  width:100%;
}

#choose-stop-blq input[type="submit"] {
  display:block;
  width:100px;
  position:absolute;
  bottom: 0;
  left:100%;
}

#choose-stop-blq #choose-by-route,
#choose-stop-blq #choose-by-stop-id {
    width: 47%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#choose-stop-blq #choose-by-route {
    padding-right: 3%;
    border-right: 1px solid #efefef;
}
#choose-stop-blq #choose-by-stop-id {
    padding-left: 3%;
}


@media only screen and (max-width: 900px) {
    #choose-stop-blq #choose-by-route,
    #choose-stop-blq #choose-by-stop-id {
        width: 100%;
        padding: 0;
        border: 0;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 800px) {
    #choose-stop-blq #choose-by-route,
    #choose-stop-blq #choose-by-stop-id {
        width: 47%;
    }
    #choose-stop-blq #choose-by-route {
        padding-right: 3%;
        border-right: 1px solid #efefef;
    }
    #choose-stop-blq #choose-by-stop-id {
        padding-left: 3%;
    }
}

@media only screen and (max-width: 600px) {
    #choose-stop-blq #choose-by-route,
    #choose-stop-blq #choose-by-stop-id {
        width: 100%;
        padding: 0;
        border: 0;
        margin-bottom: 20px;
    }
}

#choose-stop-blq .text-wrap
{
	float: left;
	margin-left: 10px;
	width: 60%;
}

#choose-stop-blq #choose-by-route form,
#choose-stop-blq #choose-by-stop-id form
{
	padding-top: 10px;
	clear: both;
	display: block;
}




/* ==========================================================================
   Metrotickets (parent)
   ==========================================================================*/


@media only screen and (max-width: 800px) {
    #node_429 table th {
        border-bottom: 1px solid #ddd !important;
        border-top: 2px solid #2FB457;
    }
    #node_429 .st-key {
        width: 25%;
        font-weight: bold;
        vertical-align: top;
        padding-top: 13px !important;
    }
}


/* ==========================================================================
   Metrotickets - fares
   ==========================================================================*/

@media only screen and (max-width: 800px) {
    #node_428 table th {
        border-bottom: 1px solid #ddd !important;
        border-top: 2px solid #2FB457;
    }
    #node_428 table tr:nth-child(2) > th.st-head-row {
        border-top: none;
    }
    #node_428 .st-val {
        width: 25%;
        text-align: center;
        font-weight: bold;
    }
}


/* ==========================================================================
   Metrotickets - Protect your card
   ==========================================================================*/

#node_1125 .st-head-row.st-head-row-main {
    display: table-row;
}
#node_1125 table .st-key {
    display: none;
}

@media only screen and (min-width: 801px) {
    #node_1125 table tr th:first-child {
        display: none;
    }

    #node_1125 table tr td:first-child {
        display: none;
    }
}

/* ==========================================================================
   Metrotickets - Recharge your card
   ==========================================================================*/

#page-content #content #unlocked #node_1126 table {
    margin: -10px 0 40px 0;
}

#page-content #content #unlocked #node_1126 table th {
    padding: 30px 8px 10px 8px;
}

/* ==========================================================================
   Tickets - Where to buy
   ==========================================================================*/

#node_431 table .st-key {
    display: none;
}

/* ==========================================================================
   Using Adelaide Metro - Accessibility & Disability
   ==========================================================================*/

@media only screen and (max-width : 950px) {
    .apply-display-block tr,
    .apply-display-block th,
    .apply-display-block td  {
        display: block;
    }
    #node_418 table tr td p {
        text-align: center;
    }
    #node_418 table tr td iframe {
        display: block;
        margin: 10px auto;
     }
}

@media only screen and (max-width: 800px) {
    #node_418 table tr td p {
        text-align: left;
    }
    .apply-display-block tr {
        display: table-row;
    }
    .apply-display-block th,
    .apply-display-block td {
        display: table-cell;
    }
}

@media only screen and (max-width : 634px) {
    .apply-display-block tr,
    .apply-display-block th,
    .apply-display-block td  {
        display: block;
    }
    #node_418 table tr td p {
        text-align: center;
    }
}

/* ==========================================================================
   FAQs
   ==========================================================================*/

#page-content #faq-wrapper
{
	margin-left: 20px;
	padding-bottom: 20px;
}

#page-content #faq-wrapper h2
{
	font-size: 1.35em;
	font-weight: bold;
	text-shadow: 1px 1px 0px #ffffff;
	margin: 23px 0 10px;
	line-height: 1em;
}

#page-content #faq-wrapper .accordion
{
	padding: 12px 0 15px;
	background: url(../images/accordion-shadow.png) bottom center no-repeat;
}

#page-content #faq-wrapper .accordion .head a
{
	padding-left: 23px;
	background: url(../images/expand.png) 2px 1px no-repeat;
	font-size: 1.1em;
}

#page-content #faq-wrapper .accordion .collapsed a
{
	background: url(../images/collapse.png) 2px 1px no-repeat;
}

#page-content #faq-wrapper .accordion div
{
	padding-left: 23px;
}

#page-content #faq-wrapper .accordion p
{
	line-height: 1.35em;
	margin: 10px 0;
}

/* ==========================================================================
   Scroller
   ==========================================================================*/

.scroller
{
	height: 25px;
}

/* Container DIV - automatically generated */
.scroller-container
{ 
	position: relative;
	padding-top: 3px;
}

/* Clip DIV - automatically generated */
.scroller-clip
{ 
	position: relative;
	overflow: hidden;
	z-index: 2;
	height: 25px;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.scroller-list
{ 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
/* Master button styles - note that up and down versions 
have been removed in this example */

.scroller-btn
{
	position: absolute;
	width: 7px;
	height: 13px;
	z-index:3;
	cursor: pointer;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}
	
.scroller-btn-left
{
	right: -12px;
	top: 8px;
	background-position: -328px -1806px;
}

.scroller-btn-left.disabled
{
	display: none;
}

.scroller-btn-right
{
	right: -24px;
	top: 8px;
	background-position: -306px -1806px;
}

.scroller-btn-right.disabled
{
	display: none;
}


/* ==========================================================================
   Grid list
   ==========================================================================*/

#grid-list
{
	display: inline-block;
}


#grid-list li.route
{
	position: relative;
	float: left;
	width: 138px;
	min-height: 138px;
	margin: 0 15px 15px 0;
	cursor: pointer;
}

#grid-list li.route h3
{
	z-index: 1000;
	position: relative;
	letter-spacing: -4px; /* fixes .route-variation inline-block whitespace issues (firefox, IE) */
    word-spacing: -4px; /* fixes .route-variation inline-block whitespace issues (opera) */
	margin: 10px 10px 6px 10px;
}

#grid-list .route-name {
	background: rgba(0,0,0,0.1);
	display: block;
	padding: 10px;
	min-height: 76px;
	width: 118px;
  }

#grid-list .route-name a {
	color: #FFF;
	text-decoration: none;
}

#grid-list .route-number
{
	color: #fff;
	display: block;
	text-decoration:  none;
	letter-spacing: normal; 
    word-spacing: normal;
	text-decoration: none;
}

#grid-list .route-shadow
{
	position: absolute;
	display: block;
	width: 138px;
	bottom: -20px;
	left: 0;
	background: url(../images/sprite.png) center -2897px repeat-x;
	height: 20px;
}


/* Target iPad */

@media only screen and (max-device-width: 1024px) {

}

@media only screen and (max-width: 550px) {
	
#page-content #grid-list {
  padding: 18px 10px 20px 10px;
}

#grid-list li.route {
	width: 100%;
	min-height: 0;
	background: none !important;
	margin-bottom: -5px;
  }
  
#grid-list li.route h3 {
	width: 60px;
	float: left;
	text-align: center;
	font-size: .5em;
	display:table;
}

#grid-list li.route h3 a {
	display:block;
	width: 50px;
	height: 50px;
	padding: 5px;
	display: table-cell;
	vertical-align:middle;
	line-height: 1.1em !important;
}

#grid-list .route-name {
  background: none;
  padding: 10px 4px;
  min-height: 62px;
  width: auto;
  display:table;
}
#grid-list .route-name a {
  color: #00305e;
  display: table-cell;
  vertical-align:middle;
}
#grid-list .route-shadow {
	display: none;
}

#grid-list li.route-special span.school-service{
	left: 0px !important;
	right: initial !important;
	margin-top: 50px !important;
	margin-right: 0px;
	margin-left: 17px;
}

}
/* Bus theme */

#grid-list li.route-bus,
#grid-list li.route-bus h3,
#grid-list li.route-special,
#grid-list li.route-special h3
{
	/*background: #2eaa56;*/
	background: #2da955;
}

#grid-list li.route-bus .route-number,
#grid-list li.route-special .route-number
{
	font-size: 2em;
	/*font-weight: bold;*/
	line-height: 1em;
}
#grid-list li.route-special span.school-service{
	position: absolute;
	right: 0px;
	z-index: 1001;
	background-color: #f0d332;
	margin-top: 14px;
	margin-right: 7px;
	display: block;
	border-radius: 3px;
	padding: 3px;
	text-transform: uppercase;
	font-size: 9px;
	font-weight: bold;
}

/* Train theme */

#grid-list li.route-train,
#grid-list li.route-train h3
{
	background: #27a7df;
}

#grid-list li.route-train .route-number
{
	font-size: 2em;
	line-height: 1em;
}


/* Tram theme */

#grid-list li.route-tram,
#grid-list li.route-tram h3
{
	background: #eb2127;
}

#grid-list li.route-tram .route-number
{
	font-size: 2em;
	line-height: 1em;
}


/* Special group theme */

#grid-list li.route-special-group,
#grid-list li.route-special-group h3
{
	background: #2eaa56;
}

#grid-list li.route-special-group .route-number
{
	font-size: 1.6em;
	line-height: 1em;
}


#grid-list li.route-special-group .total-number
{
	background: #fff;
	position: absolute;
	top: -10px;
	right: 5px;
	padding: 0 8px;
	height: 24px;
	font-size: .9em;
	line-height: 2.1em;
	color: #2EAA56;
	text-align: center;
	font-weight: bold;
	-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3); 
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
}

@media only screen and (min-width: 700px) {
	#grid-list li.route-special-group .route-name {
		display: none;
	}
}


/* Special theme */

#grid-list li.route-special
{
	background: #2eaa56;
}

#grid-list li.route-special .route-number
{
	/*font-size: 1.7em;*/
	line-height: 1em;
}

/* ==========================================================================
   List events
   ==========================================================================*/

#list-events .post
{
	position: relative;
	display: block;
	padding: 0 60px 20px 200px;
	border-bottom: 1px dashed #D0D4DC;
	margin-bottom: 20px;
	background-repeat: no-repeat;
	min-height: 92px;
}

#list-events li.post:last-child
{
	border-bottom: none;
	margin-bottom: 0;
}

#list-events .post .title-update
{
	font-size: 1.25em;
	font-weight: bold;
}

#list-events .post p
{
	padding-top: 10px;
	font-size: 1.1em;
	line-height: 1.3em;
}

#list-events p.date
{
	position: absolute;
	right: 0;
	top: 0;
	background: #f8f8f8;
	padding: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}

#list-events p.date span
{
	display: block;
	text-align: center;
	text-shadow: 0px 1px 0px #ffffff;
}

#list-events p.date span.day
{
	font-weight: bold;
	font-size: 1.7em;
	color: #2EAA56;
	margin-top: 5px;
}

#list-events p.date span.month
{
	font-size: .85em;
	font-weight: bold;
	color: #555;
	text-transform: uppercase;
}

/* ==========================================================================
   List news
   ==========================================================================*/

#list-news .post
{
	display: block;
	padding: 0 0 20px 200px;
	border-bottom: 1px dashed #D0D4DC;
	margin-bottom: 20px;
	background-repeat: no-repeat;
}

#list-news li.post:last-child
{
	border-bottom: none;
	margin-bottom: 0;
}

#list-news .post .title-update
{
	font-size: 1.25em;
	font-weight: bold;
}

#list-news .post p
{
	padding-top: 10px;
	font-size: 1.1em;
	line-height: 1.3em;
}

@media only screen and (max-width : 600px) {
    #list-news .post {
        padding: 110px 0 20px 0px;
    }
    #list-events .post {
        padding: 110px 60px 20px 0px;
    }
}


/* ==========================================================================
   List service updates
   ==========================================================================*/

#list-updates .update
{
	display: block;
	padding: 0 0 20px 110px;
	background: url(../images/service-updates-icons.png) no-repeat;
	border-bottom: 1px dashed #D0D4DC;
	margin-bottom: 20px;
	min-height: 90px;
}

#list-updates li.update:last-child
{
	border-bottom: none;
	margin-bottom: 0;
}

#list-updates .update .title-update
{
	font-size: 1.25em;
	font-weight: bold;
}

#list-updates .update p,
#list-updates .update ul.routes-affected-wrapper
{
	padding-top: 10px;
	font-size: 1.1em;
	line-height: 1.3em;
}

#list-updates .update .routes-affected-label
{
	display: block;
}

#list-updates .update ul.routes-affected
{
	white-space: normal;
	overflow: visible;
	padding-top: 3px;
	height: auto;
}

#list-updates .update ul.routes-affected li
{
	line-height: 1.7em;
}

#list-updates .update ul.routes-affected li a
{
	font-size: .9em;
}

#list-updates .bus-update
{
	background-position: 0 0;
}

#list-updates .train-update
{
	background-position: 0 -750px;
}

#list-updates .tram-update
{
	background-position: 0 -1500px;
}

#list-updates .bus-train-tram-update
{
	background-position: 0 -2250px;
}

#list-updates .train-tram-update
{
	background-position: 0 -3000px;
}

#list-updates .bus-train-update
{
	background-position: 0 -3750px;
}

#list-updates .bus-tram-update
{
	background-position: 0 -4500px;
}

@media only screen and (max-width : 800px) {
    #list-updates .update {
        background-size: 46px auto;
        padding: 0 0 20px 60px;
    }
}

/* ==========================================================================
   Utility Links
   ==========================================================================*/

/*

	Description: Utility Links.
	Version: 0.1

*/

#utility-links li
{
	float: left;
	text-align: center;
	white-space: nowrap;
}
@media only screen and (min-width : 601px ) and (max-width : 800px) {
    #utility-links li {
        font-size: 15pt;
    }
    
    #utility-links li a{
        background-position: 0 -20px !important;
        background-size: 1px 3200px !important;   
    }
    
    #utility-links span {
        /*margin-top: 24px !important;   */
        padding-top: 15px;
    }
    #page-stop #utility-links span {
        /*margin-top: 24px !important;   */
        padding-top: 1px;
    }
    #page-stop #utility-links li {
    	font-size: 1.2em;
    }
   

    /*#utility-links li.end-here a{
        min-height: 47px;
    }
    
    #utility-links li.start-here a{
        min-height: 47px;
    }
    #utility-links li.start-here{
        margin-bottom: 5px;   
    }*/
    
}

@media only screen and (max-width : 600px ){

    /*#utility-links li.end-here a{
        min-height: 65px;
    } 
    #utility-links li.start-here a{
        min-height: 65px;
    } */

    #page-stop #utility-links{
    	width: 100%;
    	margin-bottom: 0px;
    	padding: 0 0 0 0;
    }
    
    #page-stop #utility-links li {
        width: 50%;    
        /*margin-left: -33px;
        height: 83px;*/
       -webkit-border-top-right-radius: 0px !important;
	   -webkit-border-bottom-right-radius: 0px !important;
	   -moz-border-radius-topright: 0px !important;
	   -moz-border-radius-bottomright: 0px !important;
	   border-top-right-radius: 0px !important;
	   border-bottom-right-radius: 0px !important;
    }
    
    /*#page-stop #utility-links li.start-here a{
         -webkit-border-top-right-radius: 5px !important;
	   -webkit-border-bottom-right-radius: 5px !important;
	   -moz-border-radius-topright: 5px !important;
	   -moz-border-radius-bottomright: 5px !important;
	   border-top-right-radius: 5px !important;
	   border-bottom-right-radius: 5px !important;
    }
    
    #page-stop #utility-links li.end-here a{
        -webkit-border-top-left-radius: 5px !important;
	   -webkit-border-bottom-left-radius: 5px !important;
	   -moz-border-radius-topleft: 5px !important;
	   -moz-border-radius-bottomleft: 5px !important;
	   border-top-left-radius: 5px !important;
	   border-bottom-left-radius: 5px !important;
    }*/
}

/*@media only screen and (max-width : 800px){
    #page-stop #utility-links li {
        width: 50%;   
        margin-left: -33px;
        height: 83px;
        -webkit-border-top-right-radius: 0px !important;
	   -webkit-border-bottom-right-radius: 0px !important;
	   -moz-border-radius-topright: 0px !important;
	   -moz-border-radius-bottomright: 0px !important;
	   border-top-right-radius: 0px !important;
	   border-bottom-right-radius: 0px !important;
    }
    
    #page-stop #utility-links{
        margin-bottom: -5px;    
    }
    
    #utility-links li.end-here a{
        -webkit-border-top-left-radius: 5px !important;
	   -webkit-border-bottom-left-radius: 5px !important;
	   -moz-border-radius-topleft: 5px !important;
	   -moz-border-radius-bottomleft: 5px !important;
	   border-top-left-radius: 5px !important;
	   border-bottom-left-radius: 5px !important;
        
        margin-top: -2px;
        
        border-left: 1px solid #d0d4dc;
    }
    #utility-links li.start-here a{
        -webkit-border-top-right-radius: 5px !important;
	   -webkit-border-bottom-right-radius: 5px !important;
	   -moz-border-radius-topright: 5px !important;
	   -moz-border-radius-bottomright: 5px !important;
	   border-top-right-radius: 5px !important;
	   border-bottom-right-radius: 5px !important;
    }
}*/

#utility-links li a
{
	padding: 6px 0;
	background: #fff url(../images/sprite.png) center -1669px repeat-x;
	text-decoration: none;
	border: 1px solid #d0d4dc;
	border-left: none;
	display: block;
}

#utility-links li a::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 0 -6px 0;
	background-image: url(../images/mini-icons.png);
	background-repeat: no-repeat;
}

#utility-links li a.active,
#utility-links li a:active
{
	-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1); 
}

#utility-links li a span,
#utility-links li a em
{
	line-height: 20px;
	display: inline-block;
}

#utility-links li a em
{
	/*background: url(../images/mini-icons.png) 0 -641px no-repeat;*/
}

#utility-links li a span br,
#utility-links li a em br
{	display: none;
}


/* Bus theme */

.bus #utility-links li a::before
{
	background-image: url(../images/mini-icons.png);
}

.bus #utility-links li a em
{
	/*background: url(../images/mini-icons.png) 0 -641px no-repeat;*/
}

/* Train theme */

.train #utility-links li a::before
{
	background-image: url(../images/mini-icons-blue.png);
}

.train #utility-links li a em
{
	/*background: url(../images/mini-icons-blue.png) 0 -641px no-repeat; */
}

/* Tram theme */

.tram #utility-links li a::before
{
	background-image: url(../images/mini-icons-red.png);
}

.tram #utility-links li a em
{
	/*background: url(../images/mini-icons-red.png) 0 -641px no-repeat;*/
}

/* Icons */

#utility-links li.download a::before
{
	background-position: 0 -766px;
}

#utility-links li.save a::before
{
	background-position: 0 -830px;
}

#utility-links li.saved a::before
{
	background-position: 0 -641px;
}

#utility-links li.subscribe a::before
{
	background-position: 0 -574px;
}

#utility-links li.interactive a::before
{
	background-position: 0 -702px;
}

#utility-links li.start-here a::before
{
	background-position: 0 -832px;
    /* changed from 0 -1358 */
	background-image: url(../images/mini-icons.png);
}

#utility-links li.end-here a::before
{
	background-position: 0 -702px;
    /* changed from 0 -1406 */
	background-image: url(../images/mini-icons.png);
}

#utility-links li.jp a{
    -webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
#utility-links li.save a,
#utility-links li.saved a{
    -webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#page-route #utility-links li.save a,
#page-route #utility-links li.saved a{
    -webkit-border-top-left-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

#utility-links li.print a span
{
	background-position: 0 -893px;
}

#utility-links li.pdf a::before
{
	background-position: 0 -957px;
}

#utility-links li.horizontal a span
{
	background-position: 0 -1022px;
}

#utility-links li.vertical a span
{
	background-position: 0 -1086px;
}

#utility-links li.reset a span
{
	background-position: 0 -1150px;
}

#utility-links li.edit a span
{
	background-position: 0 -446px;
}

#utility-links li.reverse a span
{
	background-position: 0 -1264px;
}

#utility-links li.full-screen a span
{
	background-position: 0 -1262px;
}

#utility-links li.normal-screen a span
{
	background-position: 0 -1312px;
}

#utility-links li.direction a span
{
	background-position: 0 -191px;
}

@media only screen and (max-width : 600px) {
	
	#page-route #utility-links {
		margin-bottom: 70px !important;
	}
	
	#utility-links li {
		white-space: inherit;
  	}
	
	#utility-links li a {
		background-position: center -1628px;
	}
	
	
	#utility-links li a::before {
	display: block;
	margin: 5px auto 0 auto;
	}
	
	#utility-links li a span,
	#utility-links li a em {
		padding: 5px;
		background: none !important;
		line-height: 1.2em;
	}
	
	#utility-links li a span br,
	#utility-links li a em br {
		display: inline;
	}
	
	
	/* Bus theme */
	
	.bus #utility-links li a::before
	{
		background-image: url(../images/mini-icons@2x.png);
		background-size: 16px 2078px;
	}
	
	/* Train theme */
	
	.train #utility-links li a::before
	{
		background-image: url(../images/mini-icons-blue@2x.png);
		background-size: 16px 1400px ;
	}
	
	/* Tram theme */
	
	.tram #utility-links li a::before
	{
		background-image: url(../images/mini-icons-red@2x.png);
		background-size: 16px 1400px ;
	}
	
	/* overrides */
	
	#utility-links li.start-here a::before
	{
		background-image: url(../images/mini-icons@2x.png) !important;
		background-size: 16px 2078px;
	}
	
	#utility-links li.end-here a::before
	{
		background-image: url(../images/mini-icons@2x.png) !important;
		background-size: 16px 2078px;
	}
	
	
	
		
}

@media only screen and (max-width : 480px) {
	
	#page-route #utility-links {
		margin-bottom: 85px !important;
	}
	
	/*#utility-links li a {
		-webkit-border-radius: 0 !important;
		-moz-border-radius: 0 !important;
		border-radius: 0 !important;
	}*/
}


/* ==========================================================================
   Route Labels
   ==========================================================================*/

/*

	Description: Route labels.
	Version: 0.1

*/

.bus-label,
.train-label,
.tram-label,
.special-label
{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #000;
	padding: 2px 4px 1px;
	font-size: .9em;
	text-decoration: none;
	font-weight: bold;
	background: #fff;
}
#subscribe-to-alerts .bus-label,
#subscribe-to-alerts .train-label,
#subscribe-to-alerts .tram-label,
#subscribe-to-alerts .special-label
{
	width: 48px;
	display: inline-block;
	text-align: center;
}

.bus-label
{
	border: 2px solid #2EAA56;
}

.bus-label:hover
{
	color: #2EAA56;
}

.train-label
{
	border: 2px solid #27A7DF;
}

.train-label:hover
{
	color: #27A7DF;
}

.tram-label
{
	border: 2px solid #EB2127;
}

.tram-label:hover
{
	color: #EB2127;
}

.special-label
{
	border: 2px solid #2EAA56;
}

.special-label:hover
{
	color: #2EAA56;
}

/* ==========================================================================
   Content Tools
   ==========================================================================*/

/*

	Description: Content tools.
	Version: 0.1

*/


#content-tools
{
	position: relative;
	float: right;
	width: 25%;
	padding: 12px 0 10px;
}

#content-tools ul li
{
	float: right;
}

#content-tools a,
#content-tools span
{
	border: 1px solid #d0d4dc;
	padding: 4px 12px;
	background: url(../images/sprite.png) 0 -56px repeat-x;
	text-decoration: none;
	cursor: pointer;
	color: #00305E;
	display: block;
}

#content-tools .print
{
	border-right: none;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
}

#content-tools .share
{
	padding-right: 27px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 3px 3px 0px;
	border-radius: 0px 3px 3px 0px;
	background: url(../images/sprite.png) right -56px repeat-x;
}

#content-tools .print:hover,
#content-tools .share:hover
{
	color: #0075b5;
	-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, 0.1); 
}

#content-tools ul li ul
{
	position: absolute;
	width: 150px;
	top: 31px;
	right: 1px;
	z-index: 999;
	background: #fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
}

/*#content-tools ul li#share ul*/
#content-tools ul li#share:hover ul
{
	left: inherit;
}

#content-tools ul li ul li
{
	float: none;
}

#content-tools ul li ul li a
{
	display: block;
	background: none;
	border: none;
	line-height: 28px;
	border-bottom: 1px solid #F3F3F3;
	background-repeat: no-repeat;
	background-position: 5px;
	line-height: 21px;
	padding-left: 26px;
}

#content-tools ul li ul li a.fb
{
	background-image: url(../images/social/facebook_16.png);
}

#content-tools ul li ul li a.tw
{
	background-image: url(../images/social/twitter_16.png);
}

#content-tools ul li ul li a.gp
{
	background-image: url(../images/social/google_plus_16.png);
}

#content-tools ul li ul li a:hover
{
	background-color: #f8f9fe;
	border-bottom: 1px solid #cedbef;
}

#content-tools ul li ul li:last-child a
{
	border-bottom: none;
}


#content-tools ul .btn i {
    background: none !important;
}


/* ==========================================================================
   General
   ==========================================================================*/


/*---------------------------------------------------------------------------
  Layout rules
  ---------------------------------------------------------------------------*/
html
{
	background: #2c6c9c url(../images/gradient-bg.png) center repeat-y;
	height:auto;
}

body
{
	background: url(../images/gradient-top.png) top repeat-x; 
    font-family: Helvetica, Arial, sans-serif;
    font-size: .8em;
	margin:0 auto;
	height: 100%;
}

#map-texture
{
	background: url(../images/map-texture.png) top center no-repeat;
	min-width: 990px;
}

#header,
#wrapper,
#footer
{
	position: relative;
	display:block;
	zoom:1;
	clear: both;
	text-align: center;
}

#wrapper
{
	min-height: 580px;
	border-top: 1px solid #e6e8eb;
	background: #e7ecf5 url(../images/wrapper-top-gradient.png) repeat-x;
	/*overflow: auto;*/
}

#sidebar
{
	float:left;
	z-index: 100;
	width:33%;
	position:relative;
	text-align: left;
}

#content
{
	float:none;
	width: 100%;
}

.with-sidebar
{
	float:left !important;
	width: 67% !important;
}

#header .alignment,
.connect-and-go,
#wrapper .alignment,
#footer .alignment
{
	position: relative;
	margin: 0 auto;
	padding: 0 20px;
	width:984px;
	text-align: left;
}

@media only screen and (max-width: 1040px) {
	#map-texture {
		min-width: 260px;
	}
	
	#header .alignment, .connect-and-go, #wrapper .alignment, #footer .alignment {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

@media only screen and (max-width : 800px) {
				
	html {
		background: #2c6c9c url(../images/gradient-bg-mobile.png) center repeat-y;
		background-size: 100% 5px;
	}
	
	body
	{
		background: url(../images/gradient-top-mobile.png) top repeat-x; 
	}
	#wrapper
	{
		min-height: 0px;
		border-top: none;
		background: #e7ecf5;
	}
	
	#map-texture {
		background: none;
	}
	
	#sidebar {
		width: 100%;	
		padding-bottom: 20px;
	}
	
	.with-sidebar {
	  width: 100% !important;
	}
	
	#content-tools {
		/*width: 100%;*/
		display: none;
	}
	
	


}
@media only screen and (max-width: 480px) {

#header .alignment,
#wrapper .alignment,
#footer .alignment {
	padding: 0;
}
}

/*---------------------------------------------------------------------------
  Global styles
  ---------------------------------------------------------------------------*/
.hide-text
{
	text-indent: -2000em;
}

.offscreen
{
	left: -2000em;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.clear
{
	clear: both;
}

a
{
	outline: none;
	color: #00305e;
	text-decoration: underline;
}

a:hover
{
	color: #0075b5;
}

#page-top
{
	position: absolute;
	top: -2000em;
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italic;
}

cite
{
	font-family: monospace;
}


@media only screen and (min-width : 801px) {
.hide-desktop {
	display: none;
}
}

@media only screen and (max-width : 800px) {
		
	.hide-mobile {
		display: none;
	}
	
	.table-responsive
	{
		overflow-x: auto;
	}
}


/* Forms */

label
{
	font-size: 1.05em;
	display: block;
    font-weight: bold;
}

label span,
.checkbox span /* required field or inline comment */
{
	color: #555;
	font-weight: normal;
}

input[type=text],
input[type=email],
input[type=password] {
	font-size: 1.25em;
	padding: 8px;
	margin: 3px 0 0 0;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #b3b3b3;
	/*background: #fff url(../images/sprite.png) 0 -1204px repeat-x  !important;*/ /* this *should* overide form autofill yellow colouring */
}

input[type=text]:focus,
input[type=email]:focus,
input[type=password]:focus
{
	-webkit-box-shadow: 0px 0px 7px #a4c4e2;
	-moz-box-shadow: 0px 0px 7px #a4c4e2;
	box-shadow: 0px 0px 7px #a4c4e2;
	outline: none;
	color: #022650;
	border: 1px solid #a4c4e2;
}

.inline-submit
{
	display: inline-block;
}

.center
{
	text-align: center;
}

.none
{
	display: none;
}


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
/*---------------------------------------------------------------------------
  Header
  ---------------------------------------------------------------------------*/
#header
{
	min-height: 220px;
}

#header #logo
{
	position: absolute;
	top: 57px;
	left: 15px;
}

#header .header-left-blq
{
	position: relative;
	float: left;
	width: 33.33%;
	height: 257px;
}

#header .header-right-blq
{
	float: right;
	width: 66.67%;
	min-height: 220px;
}

@media only screen and (max-width : 1040px) {
	
#header .header-left-blq
{
	width: 25%;
}

#header .header-right-blq
{
	width: 75%;
}

}


@media only screen and (max-width : 800px) {

	#header
	{
		min-height: 90px;
	}

	#header #logo {
	  position: absolute;
	  top: 15px;
	  left: 0;
	}

	#header #logo img {
		width: 100px;
		height: auto;
	}

	#header .header-right-blq {
		position: relative;
		float: none;
		width: 100%;
		min-height: 0;
	}

	#header .header-left-blq
	{
		position: absolute;
		height: auto;

	}
	
	#page-home #wrapper #quick-links-blq ul li:hover .quick-links-bubble,
	#page-home #wrapper #quick-links-blq .quick-links-bubble {
		left: auto;
		opacity: 1;
		position: relative;
		top: auto;
		margin: 2px 0px 2px 30px;
		background: rgb(42, 110, 158);
		padding: 3px 8px;
		border-radius: 3px;
		color: #f7faff;
		width: auto;
		z-index: 200;
		font-size: 0.95em;
	}


}

@media only screen and (max-width : 600px) {

#header {
	min-height: 79px;
}

#header #logo img {
}

}

@media only screen and (max-width : 480px) {

#header #logo {
  top: 10px;
}


#header #logo img {
	width: 72px;
	height: auto;
	margin-left: 15px;
}

}




#site-alignment
{
	position: absolute;
	left: 10px;
	top: 10px;
}

#site-alignment li
{
	float: left;
}

#site-alignment li a
{
	display: block;
	text-indent: -2000em;
	width: 25px;
	height: 25px;
	background-image: url(../images/sprite.png);
	filter: alpha(opacity=50);  
    -moz-opacity: 0.5;  
    -khtml-opacity: 0.5;  
    opacity: 0.5;
}

#site-alignment li.align-left a
{
	background-position: 0 -1865px;
}

#site-alignment li.align-left a.active
{
	background-position: -50px -1865px;
}

#site-alignment li.align-center a
{
	background-position: -75px -1865px;
}

#site-alignment li.align-center a.active
{
	background-position: -25px -1865px;
}

#site-alignment li a.active
{
	filter: alpha(opacity=100);  
    -moz-opacity: 1;  
    -khtml-opacity: 1;  
    opacity: 1;
}


/* ----- Metrocard links ----- */


@media only screen and (max-width : 800px) {

#metrocard-wrapper {
	background: #2EAA56;
	color: #FFF;
	padding: 15px 20px 30px 20px;
  }
  
#metrocard-wrapper h2,
#metrocard-wrapper ul {
	float: left;
}
  
#metrocard-wrapper li {
	display: inline-block;
}

#metrocard-wrapper h2,
#metrocard-wrapper li a {
	display: inline-block;
	background: none !important;
	color: #FFF !important;
	border-bottom: 0 !important;
	padding: 0 !important;
	margin: 0 10px 0 0 !important;
  }
    
#metrocard-wrapper li:first-child a::before {
  display: inline-block;
  content: '';
  float: left;
  width: 23px;
  height: 15px;
  background: url(../images/sprite-nav-mobile.png) -4px -134px no-repeat;
  background-size: 30px 402px;
  margin-right: 5px;
}

#metrocard-wrapper li:last-child a::before {
  display: inline-block;
  content: '';
  float: left;
  width: 23px;
  height: 15px;
  background: url(../images/sprite-nav-mobile.png) -4px -178px no-repeat;
  background-size: 30px 402px;
  margin-right: 8px;
}
    
  
}


@media only screen and (min-width : 801px) {

#metrocard-wrapper {
	display: none; 
}

}


/* Hidden for small screens (Desktops and laptops) */

@media only screen and (max-width : 1224px) {

	#site-alignment {
		display: none;
	}
}


/* Hidden for small screens (mobile) */

@media only screen and (max-device-width: 1024px) {

	#site-alignment {
		display: none;
	}
}

/* ----- My Metro Login ----- */

@media only screen and (min-width : 801px) {

#mymetro-login {
	margin: 10px 0 0 0;
	padding: 0;
	list-style: none;
	z-index: 100;
    position: absolute;
	color: #FFF;
	width: 220px;
	top: 0;
	left: 20px;
}

#mymetro-login li {
	margin: 0;
	padding: 0;
	display: inline;
}

#mymetro-login li:first-child {
	border-right: 1px solid #FFF;
	padding-right: .5em;
	margin-right: .5em;
	}
	
#mymetro-login li a {
	color: #FFF;
	cursor: pointer;
}

}

@media only screen and (max-width : 800px) {
	
	#mymetro-login-wrapper {
		background: #d9e6f7;
	}
	
	#mymetro-login {
		padding: 15px 20px;
	}
	
	#mymetro-login ul {
		display: inline-block;
		float:left;
	}
	
	#mymetro-login li {
		width: 65%;
		display: inline-block;
	}
	
	#mymetro-login li:last-child {
		float: right;
		width: 35%;  
	}
    
	#mymetro-login li:last-child::before { 
        display: inline-block;
        content: '';
        float: right;
        width: 10px;
        height: 10px;
        background: url(../images/sprite-nav-mobile.png) -9px -219px no-repeat;
        background-size: 30px 402px;
        margin-top: 2px;
    }
	
	#mymetro-login li:last-child a {
		float: right;
		text-align:right;
	}
	
	#mymetro-login li span,
	#mymetro-login li a {
		float:left;
		display: inline-block;
		background: none !important;
		border-bottom: 0 !important;
		padding: 0 !important;
		margin: 0 20px 0 0 !important;
	}
}

/* ----- My Metro Menu ----- */

#nav-mymetro-title
{
	position: absolute;
	background: url(../images/sprite.png) right -196px;
	top: 176px;
	right: 20px;
	padding: 5px 25px 5px 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: bold;
	color: #004e81;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	width: 80px;
	cursor: pointer;
	text-decoration: none;
}

#nav-mymetro-title a:hover
{
	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
	box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.4); 
}

#nav-mymetro
{
	position: absolute;
	top: 200px;
	right: 20px;
	background: #fff;
	z-index: 999;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); 
}

#nav-mymetro li
{
	padding: 0 10px;
	line-height: 28px;
	border-bottom: 1px solid #F3F3F3;
}

#nav-mymetro li:hover
{
	background-color: #f8f9fe;
	border-bottom: 1px solid #cedbef;
}

#nav-mymetro li:last-child
{
	border-bottom: none;
}

#nav-mymetro li a
{
	font-size: 12px;
	text-decoration: none;
}

/* ----- Time & Date ----- */

#timestamp
{
	position: absolute;
	right: 20px;
	top: 11px;
	text-align: right;
	color: #fff;
	text-shadow: 0px 1px 1px #00305e;
	filter: dropshadow(color=#00305e, offx=0, offy=1);
}

@media all and (max-width: 800px) {
	
#timestamp {
	display: none;
}

}

/* ----- Shadows Logo ----- */

#shadow-logo-left
{
	position: absolute;
	z-index: 555;
	left: -8px;
	bottom: 0;
	width: 8px;
	height: 213px;
	/*background: url(../images/sprite.png) 0 -1935px no-repeat;*/
}

#shadow-logo-right
{
	position: absolute;
	z-index: 555;
	right: -8px;
	bottom: 0;
	width: 8px;
	height: 213px;
	background: url(../images/sprite.png) -9px -1935px no-repeat;
}

@media only screen and (max-width : 800px) {
	
	#shadow-logo-right {
		display: none;
	}

}


/* ----- Main Menu ----- */

#header .flexnav {
	position: relative;
}

@media only screen and (min-width : 801px) {

#nav-main
{
	display: block;
	margin: 60px 0 50px 20px;
	/*width: 330px;*/
	width: 27em;
	background: url(../images/nav-main-bkgd.png) 350px -24px no-repeat;
}

.ie8 #nav-main {
	margin: 10px 0 50px 20px;
}

#nav-main a
{
	text-decoration: none;
	color: #fff;
	font-size: 1.1em;
}

#nav-main a.active
{
	color: #faaf2c;
	font-weight: bold;
}

#nav-main li.col-1
{
	margin-left: 0;
}

#nav-main li.col-2
{
	margin-left: 14em;
}

#nav-main li
{
	position: relative;
	width: 12em;
	/*line-height: 21px;*/
	line-height: 1.7em;
}

#nav-main li.reset
{
	margin-top: -6.8em; /* 4 items (we do not count Home) * 1.6em line-height = 6.4em */
}

#nav-main li a.home,
#nav-main li a.root
{
	display: block;
}

#nav-main li.root
{
	background: url(../images/nav-main-arrow.png) right 50% no-repeat;
}

#nav-main li.root:hover
{
	background: #faaf2c;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-radius: 3px 0px 0px 3px;
	border-radius: 3px 0px 0px 3px;
	padding-left: 5px;
	padding-right: 6px;
	/*height: 21px;*/ /* removed for text scalability */
}

#nav-main li.root:hover a.root
{
	position: relative;
	font-weight: bold;
	color: #00305e;
}

#nav-main li.root:hover a.root span.arrow
{
	position: absolute;
	z-index: 1200;
	top: 0;
	right: -21px;
	width: 20px;
	height: 21px;
	background: url(../images/sprite.png) -21px 0 no-repeat;
}

.flexnav .touch-button, #header .menu-button {
	display: none;
}

/* Second tier */

#nav-main .offscreen
{
	width: 0;
}

#nav-main li.root:hover ul
{
	/*margin-top: -21px;*/ /* removed for text scalability */
	margin-left: 10px;
	position: absolute;
	top: 0;  /* added for text scalability */
	z-index: 999;
	background: #fff;
	left: 12em;
	white-space: nowrap;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	-webkit-border-radius: 0px 3px 3px 3px;
	border-radius: 0px 3px 3px 3px;
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
	width: auto;
}

#nav-main li ul li
{
	border-bottom: 1px solid #F3F3F3;
	width: 100%;
	line-height: 1.7em;
}

#nav-main li ul li:hover
{
	background-color: #F8F9FE;
    border-bottom: 1px solid #CEDBEF;
}

#nav-main li:last-child
{
	border: none;
}

#nav-main li ul li a,
#nav-main li ul li span
{
	font-size: 1em;
	color: #00305E;
	padding: 0 10px 0 15px;
}

#nav-main li ul li span
{
	color: #000;
	display: block;
}

#nav-main li ul li a:hover
{
	color: #0075b5;
}

#nav-main li.search
{
	position: inherit;
	z-index: 999; /* IE7 needs this */ 
}

}

@media only screen and (max-width : 800px) {
	

#header .menu-button > .touch-button {
	display: none;
}

#header .flexnav li a {
	background: #ebf2fb;
	border-bottom: 1px solid #CCC;
	color: #002f5f;
	text-decoration: none;
	padding: .96em 1.5em;
}


.flexnav-show { /* override 'offscreen class' */ 
	left: auto;
	overflow: visible !important;
	position: relative;
}

#header .flexnav li ul a,
#header .flexnav li ul span {
	background: #d9e6f7;
}

#header .flexnav li ul span {
	display: block;
}

#header .flexnav li ul.offscreen li a,
#header .flexnav li ul.offscreen li span {
	padding: .96em 1.5em .96em 3em;
}

#header .flexnav .touch-button {
    width: 100%;
    height: 40px;
    top: 0;
    right: 0;
    padding-top: 0.96em;
    padding-right: 1.5em;
    background: none;
}
    
#header .flexnav .touch-button > em {
display: none;
}
    
#header .flexnav .touch-button:after {
  display: block;
  content: '';
  float: right;
  width: 12px;
  height: 12px;
  background: url(../images/sprite-nav-mobile.png) -9px -257px no-repeat;
  background-size: 30px 402px;
  margin-top: 2px;
}
#header .flexnav .touch-button.active:after {
  background-position: -9px -293px;
}


}


/* ----- Alt Menu ----- */




@media only screen and (min-width : 801px) {

#nav-alt
{
	position: absolute;
	top: 0;
	height: 36px;
	margin-left: 20px;
	width: 72%;
}

#nav-alt li
{
	display: inline-block;
	padding: 10px 10px 0 0;
}

#nav-alt li a
{
	font-size: 1em;
	color: #fff;
}

#nav-alt #gov-australia
{
	position: absolute;
	top: 52px;
	right: 30px;
	width: 133px;
	height: 38px;
	background: url(../images/sprite.png) -197px -926px no-repeat;
	text-indent: -2000em;
}

#shadow-nav-alt
{
	position: absolute;
	top: 35px;
	width: 75.25%;
	height: 19px;
	background: url(../images/shadow-nav-alt.png) center 0 no-repeat;
}

.connect-and-go-wrapper {
	position: absolute;
	width: 100%;
	overflow: hidden;
	padding: 0;
}
    
.connect-and-go {
	height: 224px;
}

.connect-and-go:after {
	content: '';
    position: absolute;
    display: block;
    right: -110px;
    top: 36px;
    width: 382px;
    height: 184px;
    background-image: url(../images/connect-and-go-logo-new-v2.png);
    background-repeat: no-repeat;
    background-size: 363px;
}



}

@media only screen and (min-width : 1041px) {

#nav-alt {
	width: 64%;
    right: 15px;
}
}

@media only screen and (max-width : 800px) {
	
	#nav-alt #gov-australia {
		display: none;
	}
    
}


/* ----- Site Search ----- */

#search-form
{
	position: absolute;
	top: 180px;
	right: 0;
	left: 0;
	z-index: 999;
	background: url(../images/search-background-desktop.png) no-repeat;
	padding: 12px 19px;
	border-radius: 18px;
	z-index: 560;
	margin: 0 20px;
	box-sizing: border-box;
  }

#search-form label
{
	display: inline-block;
	color: #fff;
	font-weight: bold;
	margin-right: 5px;
}

#search-form input[type=text]
{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding: 10px 5px 10px 33px;
	border: none;
	font-size: 1.1em;
	width: 67%;
	box-sizing: border-box;
	-webkit-appearance: none;
}

@media only screen and (min-width : 801px) {
    #search-form .search-icon {
        content: '';
        position: absolute;
        display: block;
        top: 22px;
        left: 30px;
        width: 20px;
        height: 20px;
        background: url(../images/sprite.png) -1px -1348px no-repeat;
    }
}

#search-form select
{
	font-size: 1.2em;
	padding: 1px 0;
	margin: 0 5px;
}

#search-form input[type=submit]
{
	border: none;
	padding: 10px 8px;
	font-size: 1.1em;
	background: #2EAA56;
	color: #FFF;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; 
	width: 31.4%;
	margin: 0 0 0 1%;
	box-sizing: border-box;
	-webkit-appearance: none;
  }

#search-form input[type=submit]:hover
{
	-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.3); 
}


@media only screen and (max-width : 800px) {
	
/*	.flexnav li.search {
		position: inherit;
		overflow: visible;
		width: 100%;
	}
*/	
  
	#search-form input[type=text] {
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-right-radius: 0px;
		-moz-border-radius-topright: 0px;
		-moz-border-radius-bottomright: 0px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
	  	box-shadow: inset 2px 2px 0px 0px rgba(132, 132, 132, 0.2);
}
	
	#search-form input[type=submit]
	{
		width: 33%;
		margin: 0 0 0 -1.5%;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-topleft: 0px;
		-moz-border-radius-bottomleft: 0px;
		border-top-left-radius: 0px;
		border-bottom-left-radius: 0px;
	  }
	
}

@media only screen and (max-width : 800px) {

	#search-form ::-webkit-input-placeholder {
	   color: #FFF;
	}
	
	#search-form :-moz-placeholder { /* Firefox 18- */
	   color: #FFF;
	}
	
	#search-form ::-moz-placeholder {  /* Firefox 19+ */
	   color: #FFF;
	}
	
	#search-form :-ms-input-placeholder {  
	   color: #FFF;
	}

}

@media only screen and (max-width : 480px) {
	
	#search-form input[type=text] {
	padding: 8px;
}
	
	#search-form input[type=submit] {
	padding: 8px;
	}

}

@media only screen and (max-width : 300px) {

#search-form input[type=submit] {
	width:31.3%;
}

}



/* ----- Mobile menu buttons and dropdowns (search and main) ----- */
	
@media only screen and (max-width : 800px) {
	
	#header .search-button,
	#header .menu-button {
		position: relative;
		float: right;
		background-image: url(../images/sprite-nav-mobile.png);
		background-position: 5px -27px;
		background-repeat: no-repeat;
		background-size: 30px 402px;
		background-color: transparent;
		border: none;
		padding: 20px 20px 20px 0;
		margin: 22px -7px 26px 0;
		width: 20px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
  		 }
		 
	#header .search-button {
		background-position: 5px -75px;
		position: absolute;
		top: 22px;
		right: 60px;
		margin: 0;
	}
	
	#page-home #header .search-button {
		display: none;
	}
		 		 
	#header .search-button.active,
	#header .menu-button.active {
		background-color: rgba(0,0,0,0.2);
	  }
	  
	#search-form {
		display: none;
		position: relative;
		background: none;
		margin: 0;
		margin: 20px 0;
		border-radius: 0;
		clear: both;
		top: 0;
		padding: 0;
	}
	
	#page-home #header #search-form {
		display: block;
	}
		
	#search-form.show:after,
	#metrocard-wrapper:after {
		content: '';
		display: block;
		width: 30px;
		height: 13px;
		position: absolute;
		top: -13px;
		right: 45px;
		background: url(../images/sprite-nav-mobile.png) 15px -324px no-repeat;
		background-size: 30px 402px;
	}
	
	 #metrocard-wrapper:after {
		right: 0px;
		background: url(../images/sprite-nav-mobile.png) 15px 0 no-repeat;
		background-size: 30px 402px;
}

	#header .flexnav,
	#search-form.show {
		position: absolute;
		z-index: 9998;
		right: 33px;
		left: inherit;
		top: 80px;
		background: none;
		width: 100%;
		max-width: 420px;
		float: right;
		-webkit-box-shadow: 9px 7px 31px -6px rgba(0,0,0,0.75);
		-moz-box-shadow: 9px 7px 31px -6px rgba(0,0,0,0.75);
		box-shadow: 9px 7px 31px -6px rgba(0,0,0,0.75);
	  }
	  
	#search-form.show {
		display: block;
		background: #ebf2fb;
		padding: 17px 12px 20px 12px;
		margin: 0 0 10px 0;
			}
	  
	
}

@media only screen and (max-width : 480px) {
	
	#header .search-button {
		top: 12px;
  		 }
		 
	#header .menu-button {
		margin: 12px 9px 2px 0;
	 }
	
	#search-form {
		margin: 0;
		padding: 12px;
		background: rgba(0,49,95,.5);
	}

	#search-form.show::after {
		right: 64px;
		background-position: 50% -324px;
	}
	
	#metrocard-wrapper::after {
		right: 14px;
		background-position: 50% 0;
	}
	
	#header .flexnav,
	#search-form.show {
		position: relative;
		width: 100%;
		top: 10px;
		right: auto;
		max-width: 490px;
		margin-bottom:  10px;
		-webkit-box-shadow: 0px 10px 16px -8px rgba(0,0,0,0.2);
		-moz-box-shadow: 0px 10px 16px -8px rgba(0,0,0,0.2);
		box-shadow: 0px 10px 16px -8px rgba(0,0,0,0.2);
	}
	
	#header .flexnav {
		top: 20px;
		margin-bottom:  20px;
	}
	
}

/* ----- Rate my ride to display over flexnav ----- */

.fancybox-lock .fancybox-overlay {
    z-index: 9998;
}


/* ----- Latest announcements ----- */

/* ----- Delete? ----- */

/*#latest-announcements
{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40px;
	padding-left: 25px;
	background: #006196 url(../images/gradient-ticker.png) bottom repeat-x;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 5px 0px 0px;
	border-radius: 0px 5px 0px 0px;
	border-top: 1px solid #2c6c9c;
	overflow: hidden;
}

#latest-announcements-icon
{
	position: absolute;
	z-index: 777;
	top: 9px;
	left: 15px;
	width: 20px;
	height: 20px;
 	background: url(../images/sprite.png) 0px -1739px no-repeat;
}

#latest-announcements-list li a{
	color: #fff;
	text-decoration: none;
}

#latest-announcements noscript p
{
	padding: 12px 0 0 20px;
	color: #fff;
}*/








/*---------------------------------------------------------------------------
  Footer & subfooter
  ---------------------------------------------------------------------------*/
#footer
{
	background: #e7ecf5;
	padding: 35px 0;
}

#footer .nav-footer
{
	width: 20.8%;
	padding-left: 4%;
	float: left;
}

#footer .nav-footer > li
{
	margin-bottom: 1em;
}

#footer .nav-footer li ul
{
	margin: 5px 0 5px 20px;
}

#footer .nav-footer a
{
	font-size: .9em;
	text-decoration: none;
}

#footer .nav-footer a.root
{
	font-weight: bold;
	line-height: 17px;
	margin-bottom: 1em;
	font-size: 1.1em;
}
#footer ul.nav-footer li.place_holder{
	text-decoration: none;
	font-weight: bold;
	line-height: 24px;
	font-size: 1.1em;
	color: #00305e;
}

#subfooter {
     position: relative;
}

#subfooter p
{
	text-align: right;
}

#subfooter a
{
	text-decoration: none;
}

#subfooter ul
{
	float: right;
	margin-top: 30px;
	font-size: .9em;
}

#subfooter ul li
{
	text-align: left;
	display: inline;
	margin-left: 20px;
}

#subfooter ul li.logo
{
	position: absolute;
	margin: 0;
	height: 30px;
}

#subfooter ul li.sa-gov
{
	left: 0;
}

#subfooter ul li.logo a
{
	display: block;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}

#subfooter ul li.sa-gov a
{
	height: 30px;
	width: 108px;
	background-position: 0 -926px;
}

#subfooter p.last-modified
{
	float: right;
	margin-top: 30px;
	margin-left: 20px;
	color: #555;
	font-size: .9em;
}

#subfooter #disclaimer a
{
	font-size: .9em;
	display: inline-block;
	height: 32px;
	background: url(../images/sprite.png) right -844px no-repeat;
	padding-right: 100px;
	line-height: 28px;
	margin-top: 20px;
}

#subfooter #disclaimer .rss {
	background: none;
	padding-right: 20px;
}


#subfooter #disclaimer .rss span{
	margin-top: 5px;
}

.rss span{
	background: url(../images/sprite.png) -226px -1740px no-repeat;
	width: 16px;
	height: 16px;
	display: block;
	float: left;
	margin: -2px 5px 0 0;
}

#footer .mobile-logos {
    display: none;
}

#footer ul.social{
	margin: 7px 0px 0px 2px !important;
	padding: 0px;
	list-style-type: none;
	text-align: left;
}

#footer ul.social li { display: inline; }

#footer ul.social li a.twitter{
	background: url(../images/sprite.png) -572px -1738px no-repeat;
	width: 22px;
	height: 22px;
	display: inline-block;
	margin-right: 5px;
	text-indent: -9999px;
}
#footer ul.social li a.youtube{
	background: url(../images/sprite.png) -543px -1738px no-repeat;
	width: 22px;
	height: 22px;
	display: inline-block;
	margin-right: 5px;
	text-indent: -9999px;
}
#footer ul.social li a.facebook{
	background: url(../images/sprite.png) -514px -1738px no-repeat;
	width: 22px;
	height: 22px;
	display: inline-block;
	margin-right: 5px;
	text-indent: -9999px;
}

@media only screen and (max-width: 800px) {

#footer {
    padding: 10px 0 35px 0;   
}

#subfooter {
     padding: 0 16px;   
}

#subfooter ul {
  float: none;
  text-align: center;
  margin-top: 5px;
}

#subfooter ul li {
	line-height: 30px;
	margin: 0 10px;
}

#subfooter p.last-modified, 
#subfooter #disclaimer,
#footer .nav-footer > li,
#footer .fold-blue-horizontal,
#subfooter ul li.sa-gov {
	display: none;
}

#footer .mobile-logos {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 15px;
    display: block;
}

#footer ul .mobile-logos li.logo
{
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
    background-size: 450px 2400px;
}

#footer ul .mobile-logos li.sa-gov
{
    display: inline-block;
    margin-right: 12px;
	height: 22px;
	width: 81px;
	background-position: 0 -694px;
}
#footer ul .mobile-logos li.gov-of-sa
{
    display: inline-block;
    margin-left: 12px;
	height: 29px;
	width: 106px;
	background-position: -300px -694px;
}
    
#footer .mobile-logos .fold-blue-horizontal {
    display: block;
    background-position: 0 -10px;
}
    
#footer .fold-blue-horizontal .fold-blue-left {
    background-position: left -720px;
}
    
#footer .fold-blue-horizontal .fold-blue-right {
    background-position: right -720px;
}
    
#footer .mobile-logos .flipped {
    -ms-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.ie #footer .mobile-logos .flipped {
	height: 50px;
}

.ie8 #footer .mobile-logos .flipped {
	display: none;
}

#footer .nav-footer {
  width: 100% !important;
  padding: 0 !important;
  text-align: center;
}

#footer .nav-footer > li.place_holder {
	display: block;
}

#footer .nav-footer > li.place_holder span {
	display: none;
}

#footer ul.social {
  text-align: center;
}


}

/*---------------------------------------------------------------------------
  Elements
  ---------------------------------------------------------------------------*/
/*--- Folds ---*/

/* Blue */

.fold-blue-horizontal,
.fold-blue-horizontal .fold-blue-left,
.fold-blue-horizontal .fold-blue-right
{
	height: 34px;
}

.fold-blue-horizontal
{
	position: relative;
	background: url(../images/fold-blue-horizontal.png) repeat-x;
	margin: 0;
	overflow: hidden;
}

.fold-blue-horizontal .fold-blue-left,
.fold-blue-horizontal .fold-blue-right
{
	position: absolute;
	width: 130px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}

.fold-blue-horizontal .fold-blue-left
{
	background-position: left -710px;	
	left: -40px;
	top: 0;
}

.fold-blue-horizontal .fold-blue-right
{
	background-position: right -710px;
	right: -40px;
	top: 0;
}

/* Blue (collapsible) */

.fold-blue-coll-horizontal,
.fold-blue-coll-horizontal .fold-blue-coll-left,
.fold-blue-coll-horizontal .fold-blue-coll-right
{
	height: 34px;
}

.fold-blue-coll-horizontal
{
	display: block;
	position: relative;
	background: url(../images/fold-blue-coll-horizontal.png) repeat-x;
	margin-top: -20px;
}

.fold-blue-coll-horizontal .fold-blue-coll-left,
.fold-blue-coll-horizontal .fold-blue-coll-right
{
	position: absolute;
	width: 130px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}

.fold-blue-coll-horizontal .fold-blue-coll-left
{
	background-position: left -1459px;	
	left: 0;
	top: 0;
}

.fold-blue-coll-horizontal .fold-blue-coll-right
{
	background-position: right -1459px;
	right: 0;
	top: 0;
}

/* White */

.fold-white-horizontal,
.fold-white-horizontal .fold-white-left,
.fold-white-horizontal .fold-white-right
{
	height: 10px;
}

.fold-white-horizontal
{
	display: block;
	position: relative;
	background: url(../images/fold-white-horizontal.png) repeat-x;
	margin: 0 -40px;
}

.fold-white-horizontal .fold-white-left,
.fold-white-horizontal .fold-white-right
{
	position: absolute;
	width: 130px;
	background-image: url(../images/sprite.png);
	background-repeat: no-repeat;
}

.fold-white-horizontal .fold-white-left
{
	background-position: -15px -1056px;	
	left: 0;
	top: 0;
}

.fold-white-horizontal .fold-white-right
{
	background-position: -445px -1056px;
	right: 0;
	top: 0;
}

@media only screen and (max-width : 800px) {

.fold-white-horizontal {
    display: none;
}

}

/* Collapsible contents (jQuery Collapsible) */

h3.collapsible 
{
	padding: 10px 0 15px;
	font-size: 1.25em;
	/*font-size: 16px;*/
	text-shadow: 0px 1px 0px white;
}

.collapsible-heading
{
	cursor:pointer;
	padding: 10px 0 10px 25px !important;
	background:url(../images/sprite.png) 2px -1978px no-repeat;
	position: relative;
	z-index: 999;
	width: 80%;
}

.collapsible-heading-collapsed
{
	background:url(../images/sprite.png) -586px -1978px no-repeat;
}

.collapsible-heading-toggle
{
	position: relative;
	z-index: 999;
	/*font-size: 14px;*/
	font-size: 1.1em;
	text-decoration: none;
}

.collapsible-heading-collapsed .collapsible-heading-toggle
{
}

.collapsible-heading-status
{
	position:absolute; left:-99999px;
}

.collapsible-content
{
	overflow:hidden;
	position: relative;
	z-index: 999;
	/*font-size: 14px;*/
	font-size: 1.1em;
	color: #555;
	padding:10px 0 20px 25px;
}

.collapsible-content-collapsed
{
	display:none;
}

/*--- Links with arrows ---*/

a.back-link
{
	background:url(../images/back-arrow.png) 0 0 no-repeat;
	padding-left: 15px;
}

a.link-arrow
{
	font-size: 1em;
	padding-left: 12px;
	background: url(../images/green-arrow.png) 0 50% no-repeat;
	display:inline-block;
}

a.link-arrow-back
{
	font-size: 1em;
	padding-left: 20px;
	background:url(../images/back-arrow.png) 0 0 no-repeat;
}

/*@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {*/
	
@media only screen and (max-width : 800px) {
		
	a.back-link
	{
		background-image: url(../images/back-arrow@2x.png);
		background-size: 6px 8px;
	}
		
	a.link-arrow
	{
		background-image: url(../images/green-arrow@2x.png);
		background-size: 6px 8px;
	}
	a.link-arrow-back
	{
		background-image: url(../images/back-arrow@2x.png);
		background-size: 6px 8px;
	}
	}


/*---------------------------------------------------------------------------
  Default back to top link // OK
  ---------------------------------------------------------------------------*/
.back-to-top
{
	display: block;
}

.back-to-top a
{
	font-size: .9em;
	display: block;
	padding: 8px 5px 8px 40px;
	background: url(../images/sprite.png) 22px -785px no-repeat;
}

/*---------------------------------------------------------------------------
  Crumbs // OK
  ---------------------------------------------------------------------------*/
#crumbs
{
	padding: 5px 0 10px 15px;
	float: left;
	width: 71%;
	font-size: .9em;
}

#crumbs p
{
	display: inline;
	line-height: 30px;
	margin-right: 10px;
}

#crumbs strong
{
	font-weight: normal;
}

#crumbs a
{
	font-size: 1em;
	text-decoration: none;
	margin: 0 5px;
}

#crumbs ul
{
	display: inline;
}

#crumbs ul li
{
	display: inline-block;
	height: 30px;
	line-height: 30px;
}

#crumbs ul li span
{
	display: inline-block;
	width: 18px;
	height: 30px;
	background: url(../images/sprite.png) 0 0 no-repeat;
	text-indent: -2000em;
}

#crumbs ul li.current
{
	margin: 0 5px;
	color: #555;
}

#crumbs p,
#crumbs li,
#crumbs li a
{
	text-shadow: 0px 1px 0px #ffffff;
}

@media only screen and (max-width : 800px) {

	#crumbs {
		display: none;
	}
	
}

/* ----- Mobile back ----- */

.mobile-back-wrapper {
    display: none;
}

@media only screen and (max-width : 800px) {
    
    .tier3 .mobile-back-wrapper,
    .transport_mode .mobile-back-wrapper {
        background-color: #dce2ef;
        display: block;
    }
    .mobile-back {
        display: block;
        padding: 16px 20px;
        color: #00295e;
        font-size: 13px;
        text-decoration: none;
		text-align: left;
    }
    .mobile-back::before {
		content: '';
		display: inline-block;
		background: url(../images/sprite.png) -590px -370px no-repeat;
		float: left;
		width: 18px;
		height: 13px;
      }
}



/*---------------------------------------------------------------------------
  Buttons  // OK
  ---------------------------------------------------------------------------*/

.button, .button:visited {
    background: #222;
	display: inline-block; 
	padding: 8px 20px 9px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 3px; 
	-webkit-border-radius: 3px;
    border: none;
	position: relative;
	cursor: pointer;
    font-weight: normal;
    font-size: 1em;
    text-align: center;
	-webkit-appearance: none;
}

.button:hover
{
	background-color: #111; color: #fff;
	text-decoration: none;
}

.button:active
{
	margin-bottom: -1px;
}

/* Button sizes */

.small.button, .small.button:visited
{
	font-size: .85em; padding: ;
}

.button, .button:visited,
.medium.button, .medium.button:visited
{
	font-size: 1em;
    line-height: 1;
}

.large.button, .large.button:visited
{
    padding: 11px 20px 12px;
}

/* Button colors */

.green.button, .green.button:visited
{
	background-color: #23b452;
}

.green.button:hover
{
	background-color: #13a23a;
}

.blue.button, .blue.button:visited
{
	background-color: #0c75ae;
}

.blue.button:hover
{
	background-color: #015e95;
}

.yellow.button, .yellow.button:visited
{
	background-color: #eeaa35;
}

.yellow.button:hover
{
	background-color: #e29e29;
}

.navy.button, .navy.button:visited
{
	background-color: #00305e;
}

.navy.button:hover
{
	background-color: #002141;
}

/*---------------------------------------------------------------------------
  List of service updates // OK
  ---------------------------------------------------------------------------*/

ul.service-updates
{
	padding: 5px 0 0 0;
}

ul.service-updates .update {
	background-image: url(../images/sprite-announcements-new.png);
	background-size: 600px 770px;
	background-repeat: no-repeat;
	padding: 7px 10px 5px 65px;
	min-height: 60px;
	display: block;
}
ul.service-updates .update.empty
{
	padding-left: 10px;
	width: 300px;
	background-image: none;
}
div#service-updates ul.service-updates .update{
	min-height: 98px;
}

ul.service-updates .date{
	font-size: 10px;
	color: #4c4c4c;
	display: block;
	margin-bottom: 3px;
}
ul.service-updates .bus-update
{
	background-position: -8px -550px;
}

ul.service-updates .train-update
{
	background-position: -8px -660px;
}

ul.service-updates .tram-update
{
	background-position: -8px -440px;
}

ul.service-updates .bus-train-tram-update
{
	background-position: -8px -330px;
}

ul.service-updates .train-tram-update
{
	background-position: -8px -220px;
}

ul.service-updates .bus-train-update
{
	background-position: -8px -110px;
}

ul.service-updates .bus-tram-update
{
	background-position: -8px 0;
}

/* List of routes affected */

ul.routes-affected
{
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	/*height: 1.9em;*/
	margin-top: 3px;
        max-width: 100%;
}

ul.routes-affected li
{
	display: inline;
	line-height: 24px;
}

ul.routes-affected li:last-child
{
	margin-right: 30px;
}

@media screen and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-device-pixel-ratio: 1.5) {
				
	ul.service-updates .update {
		background-image: url(../images/sprite-announcements-new@2x.png);
	}
		
	}


@media only screen and (min-width : 1040px) {

	ul.service-updates .update {
		width: 250px;
	}

}

/*---------------------------------------------------------------------------
  Callouts  // OK
  ---------------------------------------------------------------------------*/
.callouts
{
	/*-webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);*/
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.callouts ul{
	margin-left: -8px;
	width: 101.8%;
}
.callouts ul li
{
	float: left;
	position: relative;
	height: 250px;
	width: 100%;
	background-color: transparent;
	margin-bottom: 20px;
	margin-left: 0;
	margin-right: 0;
}

.callouts ul li div
{
	height: 250px;
}

.callouts ul li div a
{
	position: absolute;
	color: #fff;
	text-decoration: none;
	height: 35px;
	margin-top: 225px;
	overflow: hidden;
	background: url(../images/transp.png);
	font-size: 12px;
	left: 0;
	right: 0;
	bottom: 0;
}

.callouts ul li div span
{
	display: block;
	padding: 5px 20px;
	line-height: 14px;
}

.callouts ul li div strong
{
	display: block;
	font-weight: normal;
	line-height: 35px;
	padding-left: 32px;
	background: url(../images/sprite.png) -577px -1987px no-repeat;
}

.callouts ul li div a:hover strong
{
	font-weight: bold;
	background: none;
	padding-left: 22px;
}

@media only screen and (min-width : 1040px) {
.callouts ul li div strong
{
	width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
}

@media only screen and (max-width : 1040px) {
.callouts ul li div strong
{
	line-height: 1.2em;
	margin: 5px 0;
	padding: 0 20px;
}
}

/* One row */

.callouts ul.rows-1 li.featured-1,
.callouts ul.rows-1 li.featured-1 a:hover,
.callouts ul.rows-1 li.featured-1 .featured-image
{
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 8px;
	-webkit-border-radius: 8px 0px 0px 8px;
	border-radius: 8px 0px 0px 8px; 
}

.callouts ul.rows-1 li.featured-1 a
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 8px;
	-webkit-border-radius: 0px 0px 0px 8px;
	border-radius: 0px 0px 0px 8px; 
}

.callouts ul.rows-1 li.featured-3,
.callouts ul.rows-1 li.featured-3 a:hover,
.callouts ul.rows-1 li.featured-3 .featured-image
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 8px 8px 0px;
	border-radius: 0px 8px 8px 0px;
}

.callouts ul.rows-1 li.featured-3 a
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 0px 8px 0px;
	border-radius: 0px 0px 8px 0px; 
}

/* Two & three rows */

.callouts ul.rows-2 li.featured-1,
.callouts ul.rows-2 li.featured-1 a:hover,
.callouts ul.rows-3 li.featured-1,
.callouts ul.rows-3 li.featured-1 a:hover
{
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 8px 0px 0px 0px;
	border-radius: 8px 0px 0px 0px; 
}

.callouts ul.rows-2 li.featured-3,
.callouts ul.rows-2 li.featured-3 a:hover,
.callouts ul.rows-3 li.featured-3,
.callouts ul.rows-3 li.featured-3 a:hover
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 8px 0px 0px;
	border-radius: 0px 8px 0px 0px;
	margin-right: 0;
}

.callouts ul.rows-2 li.featured-4,
.callouts ul.rows-2 li.featured-4 a,
.callouts ul.rows-2 li.featured-4 a:hover,
.callouts ul.rows-3 li.featured-7,
.callouts ul.rows-3 li.featured-7 a,
.callouts ul.rows-3 li.featured-7 a:hover
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	-moz-border-radius-bottomleft: 8px;
	-webkit-border-radius: 0px 0px 0px 8px;
	border-radius: 0px 0px 0px 8px; 
}

.callouts ul.rows-2 li.featured-6,
.callouts ul.rows-2 li.featured-6 a,
.callouts ul.rows-2 li.featured-6 a:hover,
.callouts ul.rows-3 li.featured-9,
.callouts ul.rows-3 li.featured-9 a,
.callouts ul.rows-3 li.featured-9 a:hover
{
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 0px;
	-webkit-border-radius: 0px 0px 8px 0px;
	border-radius: 0px 0px 8px 0px;
}

.callouts-more-links
{
	padding-top: 10px;
	text-align: right;
	margin-right: 10px;
}

.callouts-more-links a
{
	margin-left: 10px;
}

@media only screen and (min-width: 1040px) {
	
	.callouts ul li {
	margin-left: 8px;
	margin-right: 8px;
	}
}

@media only screen and (max-width: 1040px) {
	
	.callouts ul{
		margin-left: 0;
		width: 100%;
	}
	
	.callouts ul li,
	.callouts ul li .featured-image {
		-moz-border-radius-topleft: 0px !important;
		-moz-border-radius-topright: 0px !important;
		-moz-border-radius-bottomright: 0px !important;
		-moz-border-radius-bottomleft: 0px !important;
		-webkit-border-radius: 0px 0px 0px 0px !important;
		border-radius: 0px 0px 0px 0px !important;
	}

	
	.callouts ul li {
		height: auto;
		min-height: 140px;
		background-size: 125px 100px;
		background-repeat: no-repeat;
		background-position: 20px 20px;
		background-color: rgba(0, 49, 95, 0.50);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#8800315F,endColorstr=#8800315F)"; /* IE8 */   
		padding: 15px 5px 25px 5px;
		margin-bottom: 2px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.callouts ul li .featured-image {
	width: 125px;
	height: 100px;
	float: left;
	margin-left: 10px;
	background-position: 50% 50%;  /* Sets reference point to scale from */
	background-size: cover;        /* Sets background image to cover entire element */
	}

	
	.callouts ul li div {
	  height: auto;
	}
	
	.callouts ul li div a {
		margin-top: 0 !important;
		position: relative;
		margin-left: 135px;
		display: block;
		overflow:visible !important;
		background: none;
		height: auto !important;
  	}
	
	.callouts ul li div strong {
		background: none;
		padding-left: 20px !important;
		margin-top: 0 !important;
		font-weight: bold;
	}
	
	.callouts ul li div a span {
		display: block;
	}
	
	.callouts ul li div a:after {
		content: "Read more";
		display: inline-block;
		padding: 5px 13px 0 20px;
		background: url(../images/link-arrow.png) 100% 65% no-repeat;
		margin-bottom: 13px;
  }

}
@media only screen and (max-width: 800px) {
.featured-contents-heading {
	left: inherit;
	overflow: visible;
	position: relative;
	width: auto;
	color: #FFF;
	padding: 16px;
	font-size: 18px;
	font-weight: bold;
	}
	#page-home #wrapper .callouts {
	  margin-bottom: 10px;
	}
	
	#page-home #wrapper .callouts:after {
	  content: '';
	  display: block;
	  background: url(../images/connect-and-go-logo-mobile.png) -27px 0 no-repeat;
	  background-size: 114%;
	  width: 300px;
	  height: 50px;
	  float: right;
	  margin-top: -20px;
      	}
	
	#page-home #wrapper .callouts :nth-last-child(2) li:last-child {
	background: -moz-linear-gradient(top, rgba(0,49,95,0.5) 0%, rgba(0,49,95,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,49,95,0.5)), color-stop(100%,rgba(0,49,95,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,49,95,0.5) 0%,rgba(0,49,95,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,49,95,0.5) 0%,rgba(0,49,95,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,49,95,0.5) 0%,rgba(0,49,95,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,49,95,0.5) 0%,rgba(0,49,95,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8000315f', endColorstr='#0000315f',GradientType=0 ); /* IE6-9 */
	}

}

@media only screen and (min-width : 801px) {
	.callouts ul li {
		width: 31.33%;
		margin-left: 1%;
		margin-right: 1%;
		padding: 0;
		min-height: 200px;
	}
	
	.callouts ul li .featured-image {
		width: 100%;
		height: 0;
		margin-left: 0; 
		padding-bottom: 79.5%;
		margin-bottom: 20px;
}

	.callouts ul li div a {
			margin-left: 0;
	}
	
	.callouts ul li div a span {
		min-height: 115px;
	}

}

@media only screen and (max-width: 1040px) {
	#page-announcements .callouts ul li {
		background-color: #F7FAFF;
	}
	#page-announcements .callouts ul li:hover {
		background-color: #FFF;
	}
	#page-announcements .callouts ul li div a {
		color: #000;
	}
	#page-announcements .callouts ul li div a:hover {
		color: #0075b5;
	}
	
	
}

/*---------------------------------------------------------------------------
  File formats // OK
  ---------------------------------------------------------------------------*/
.file
{
	font-size: .9em;
	color: #555;
	white-space: nowrap;
	text-decoration: none !important;
	display: inline-block;
	margin-left: 5px;
}

.file .pdf
{
	font-size: .9em;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	/*background: #dc0000;
	color: #fff;*/
	font-weight: bold;
	/*padding: 2px 5px;*/
	margin: 0 1px 0 2px;
}

/*---------------------------------------------------------------------------
  Alerts
  ---------------------------------------------------------------------------*/
#content .alert
{
	margin: 10px 0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3); 	
}

#content .alert p
{
	padding: 12px 20px 12px 38px !important;
	background: url(../images/mini-icons.png) no-repeat;
	line-height: inherit !important;
}

#content .alert.info
{
	background-color: #f8f8f8;
}

#content .alert.info p
{
	background-position: 10px 10px;
}

#content .alert.warning
{
	background-color: #FFFFDE;
}

#content .alert.warning p
{
	background-position: 0 0;
}

#content .alert.messaging
{
	background-color: #fff;
}

#content .alert.messaging p
{
	background-position: 12px -50px;
}

#content .alert.error
{
	background-color: #ffbbba;
}

#content .alert.success
{
	background-color: #dff3bc;
}

#content .alert.content-inline
{
	margin: 0 30px 30px;
}

/*---------------------------------------------------------------------------
  Recaptcha
  ---------------------------------------------------------------------------*/
#recaptcha_widget #recaptcha_image
{
	margin: 10px 0;
	background: #fff;
	display: block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #efefef;
	padding: 10px;
}

#recaptcha_widget #recaptcha_image img
{
	display: inline !important;
}

#recaptcha_widget .recaptcha_only_if_image,
#recaptcha_widget .recaptcha_only_if_audio,
#recaptcha_widget .recaptcha_only_if_incorrect_sol
{
	display: block;
}

#recaptcha_widget #recaptcha_actions
{
	position: relative;
}

#recaptcha_widget #recaptcha_actions #recaptcha_tools
{
	position: absolute;
	right: 0;
	top: -15px;
}

#recaptcha_widget #recaptcha_actions #recaptcha_tools div
{
	display: inline;
}

#recaptcha_widget #recaptcha_actions #recaptcha_tools div a
{
	font-size: .9em;
}

#recaptcha_widget #recaptcha_actions #recaptcha_tools .new-code
{
	background: url(../images/mini-icons.png) 0 -194px no-repeat;
	padding-left: 20px;
}

#recaptcha_widget #recaptcha_actions #recaptcha_tools .listen-code
{
	background: url(../images/mini-icons.png) 0 -129px no-repeat;
	padding-left: 20px;
	margin-left: 10px;
}

#recaptcha_widget #recaptcha_actions #recaptcha_tools .new-image
{
	background: url(../images/mini-icons.png) 0 -258px no-repeat;
	padding-left: 20px;
	margin-left: 10px;
}

#recaptcha_noscript
{
	display: block;
}

#recaptcha_noscript label
{
	display: block;
    font-size: 1em;
    padding-top: 10px;
}

#recaptcha_noscript textarea
{
	margin-top: 3px;
	padding: 8px;
	width: 94%;
} 

/*---------------------------------------------------------------------------
  System notifications // OK
  ---------------------------------------------------------------------------*/
body.js-on #notify
{
	overflow: hidden;
	width: 100%;
	text-align: centre;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	background: url(../images/transp.png);
	height: 0;
	line-height: 40px;
}

body.js-on #notify p
{
	font-size: 1.1em;
	color: #fff;
	text-indent: 40px;
}

body.js-on #notify_details
{
	overflow: hidden;
	width: 100%;
	text-align: centre;
	position: fixed;
	z-index: 99999;
	top: 0;
	left: 0;
	background: url(../images/transp.png);
	height: 0;
	line-height: 40px;
}

body.js-on #notify_details p
{
	font-size: 1.1em;
	color: #fff;
	text-indent: 40px;
}

body.js-on .ui-dialog
{
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
}

/*---------------------------------------------------------------------------
  Form error // OK
  ---------------------------------------------------------------------------*/
#error-message
{
	margin-bottom: 20px;
	background: #ffe5e5 url(../images/error.png) 16px 15px no-repeat;
	padding: 15px 15px 0 68px;
	min-height: 30px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #fff;
}

#error-message p
{
	font-size: 1.1em;
	color: #b50000;
	margin-bottom: 15px;
}

#error-message ol li
{
	list-style: decimal;
	margin-left: 20px;
}

#error-message ol li:last-child
{
	padding-bottom: 15px;
}

/*---------------------------------------------------------------------------
  jQuery UI (predictive search results)
  ---------------------------------------------------------------------------*/
.ui-autocomplete {
	max-height: 280px;
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 20px;
}

/*---------------------------------------------------------------------------
  Loading Animation Graphics
  ---------------------------------------------------------------------------*/
img.loading_img {
    display: none;
}

/*---------------------------------------------------------------------------
  Error Page
  ---------------------------------------------------------------------------*/
img.loading_img {
    display: none;
}

div#error_page{
    margin:40px auto;
    width:700px;
    text-align: left;
}

div#error_page h2{
    font-size: 2em;
    font-weight: bold;
    line-height: 1.25em;
    padding-bottom: 15px;
}
div#error_page p{
	font-size: 1.1em;
    line-height: 18px;
    padding-bottom: 15px;
}
div#error_page lh{
    font-weight: bold;
}
ul.maintenance-list{
    margin: 10px 0;
    padding: 0 0 10px 20px;
}
ul.maintenance-list li{
    list-style-image: url(../images/contents/bullet.png);
    list-style-position: outside;
    font-size: 1em;
    line-height: 1.25em; 
}

/*---------------------------------------------------------------------------
  Homepage Survey
  ---------------------------------------------------------------------------*/
#survey_dialog{
	width:100%;
	height:auto;
	display: none;
	background-color:#fff;
}
#survey_dialog img {
    width: 100%;
}

#initial_instructions,
#alternative_instructions{
	padding: 10px 10px; 
	text-align: center;
}
#alternative_instructions{
	display: none;
}
.fancybox-inner{
	/*overflow-x: hidden !important; */
    width: 100% !important;
    height: auto !important;
}

.fancybox-wrap,
.fancybox-desktop,
.fancybox-type-inline,
.fancybox-opened {
    width: 85% !important;
    max-width: 763px;
}

#survey_dialog .large.button,
#survey_dialog .large.button {
    padding: 11px 15px 12px;
}

/*-------------------------------------------------------------------------------
  Pagination
--------------------------------------------------------------------------------*/
.pagination-nav li{
    display: inline-block;
    margin-left: 8px;
    margin-top: 10px;
    background-color: white;
    padding: 5px;
    padding-top: 2px;
    color: blue;
    text-decoration: underline;
}

.pagination-nav li:hover{
    background-color: lightblue;
}

.pagination-nav{
    margin: 0 auto;
    width: 70%;
}

.pagination-active{
    color:red !important;   
}

/*-------------------------------------------------------------------------------
  Page Content - Nearest Stops
--------------------------------------------------------------------------------*/
.stop_name, .stop_marker, .address
{
    padding-left: 0px; 
}
/*800px tablet, 480 mobile*/
@media only screen and (max-width: 480px) {
    .nearest-stops{
        width: 98%;
        margin: 0 auto;
    }
    .stop_name, .stop_marker, .address
	{
	    padding-left: 17px; 
	}
	.stop_name{
		font-size: 1.1em;
	}
}

@media only screen and (max-width: 800px) and (min-width: 481px) {
    .nearest-stops{
        width: 95%;   
        margin: 0 auto;
    }
}

@media only screen and (min-width: 801px){
    .nearest-stops{
        margin: 0 auto;   
    }
}

.stop-nearest .stop-sign
{
    left: 0;
}

.stop-nearest
{
    text-align: left;   
}

.graybg
{
    background: #f3f3f3 !important; 
}

a .stop-nearest
{
  margin: 0;
  padding: 0;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

.nearest_header
{
  padding: 0px 0 8px 0;
  font-size: 21px;
  font-weight: bold;
  text-shadow: 0px 1px 0px #ffffff;
  text-align: left;
  padding-left: 20px;
  margin-top: 17px;
  margin-bottom: 17px;
}

.nearest-stops{
    text-align: left;
}

/*-------------------------------------------------------------------------------
  Page Content - Nearest Stops/ taken from mobile css
--------------------------------------------------------------------------------*/

#page-stop table.nearest-stops section.next-services-section-1
{
	background: #ffffff;
}

#page-stop table.nearest-stops table.next-services-realtime tr:first-child,
#page-stop table.nearest-stops table.next-services tr:first-child {
	/*position: absolute;
	top: -42px;
	left: 0;
	width: 100%;*/
	background-color: transparent;
}

#page-stop table.nearest-stops{
	/*width:100%;*/
}
#page-stop table.nearest-stops img.loading_img{
	display: block;
	margin: 0px auto;
}
#page-stop table.nearest-stops table.next-services-realtime tr.service_top td
{
	border-top: 1px solid #d0d4dc;
}
#page-stop table.nearest-stops td span.marker{
	background-image: url(../images/mini-icons.png);
	background-position: 0 -702px;
	display: inline-block;
	background-repeat: no-repeat;
	padding: 0 0 0 20px;
	line-height: 20px;
}
#page-stop table.nearest-stops td ul{
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 0px;
}
#page-stop table.nearest-stops td ul li{
	margin-top: 8px;
	width: 100%;
	position: relative;
}
#page-stop table.nearest-stops td ul li a{
	width: 31px;
	display: block;
	text-align: center;
	float: left;
	margin-right: 5px;
	margin-top: -2px;
}

table.nearest-stops td.address{
	padding-top: 2px;
}

#realtime-mobile-label 
{
	background: url(../images/realtime-bkgd-green@2x.png) center right no-repeat;
	width: 40%;
	height: 1em;
	padding: 4px 0 4px 4px;
	margin: 9px 7px 3px -16px;
	float: left;
	color: #FFF;
	font-size: 13px;
    margin-left: 2px;
    margin-bottom: 15px;
}
.train #realtime-mobile-label {
	background: url(../images/realtime-bkgd-blue@2x.png) center right no-repeat;
}
.tram #realtime-mobile-label {
	background: url(../images/realtime-bkgd-red@2x.png) center right no-repeat;
}

#realtime-mobile-label span {
	display: block;
	float: left;
	width: 30px;
	/*height: 1em;*/
	background: #333;
	margin: -9px 3px -14px 0; 
	padding: 14px 0 14px 0;
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px 6px;
	background-size: 53%;
}
.train #realtime-mobile-label span {
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px -18px;
	background-size: 53%;
}

.tram #realtime-mobile-label span {
	background: url(../images/sprite-realtime.png) no-repeat scroll 11px -43px;
	background-size: 53%;
}

div.next-services-label{
	padding-top: 13px;
	font-weight: bold;
  margin-bottom: 15px;
}
div.next-services-label-icon{
	float: left;
	background: url("../images/sprite.png") no-repeat scroll -38px -1739px transparent;
	height: 20px;
	width: 20px;
	margin: 11px 3px 0 0;
}

#page-stop section.next-services-section-0
{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
	border-top: 1px solid #d0d4dc;
	border-bottom: 1px solid #d0d4dc;
	margin: 70px -16px 15px -16px;
	padding: 0px 32px 0px 0;
}

#page-stop table.nearest-stops section.next-services-section-1
{
	background: #ffffff;
}

/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/

ul.simple-pagination {
	list-style: none;
}

.simple-pagination {
	display: block;
	overflow: hidden;
	padding: 0 5px 5px 0;
	margin: 0;
}

div .simple-pagination {
    display: table;
    margin: 0 auto;
    padding-bottom: 20px;
}

.simple-pagination ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.simple-pagination li {
	list-style: none;
	padding: 0;
	margin: 0;
	float: left;
}

/*------------------------------------*\
	Compact Theme Styles
\*------------------------------------*/

.compact-theme a, .compact-theme span {
	float: left;
	color: #333;
	font-size:14px;
	line-height:24px;
	font-weight: normal;
	text-align: center;
	border: 1px solid #AAA;
	border-left: none;
	min-width: 14px;
	padding: 0 7px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

.compact-theme a:hover {
	text-decoration: none;
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
	background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */
}

.compact-theme li:first-child a, .compact-theme li:first-child span {
	border-left: 1px solid #AAA;
	border-radius: 3px 0 0 3px;
}

.compact-theme li:last-child a, .compact-theme li:last-child span {
	border-radius: 0 3px 3px 0;
}

.compact-theme .current {
	background: #bbbbbb; /* Old browsers */
	background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */
	cursor: default;
}

.compact-theme .ellipse {
	background: #EAEAEA;
	padding: 0 10px;
	cursor: default;
}

/*------------------------------------*\
	Light Theme Styles
\*------------------------------------*/

.light-theme a, .light-theme span {
	float: left;
    text-decoration: none;
	color: #00295e;
	font-size:14px;
	line-height:32px;
	font-weight: normal;
	text-align: center;
	
	min-width: 14px;
	padding: 0 10px;
	margin: 0 5px 0 0;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	background-color: #edf0f7;
}

.light-theme a:hover {
	text-decoration: none;
	background: #2da955;
    color: #fff;
}

.light-theme .current {
	background: #00295e; 
	color: #FFF;
	border-color: #444;
	box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
	cursor: default;
}

.light-theme .ellipse {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-weight: bold;
	cursor: default;
}

/*------------------------------------*\
	Dark Theme Styles
\*------------------------------------*/

.dark-theme a, .dark-theme span {
	float: left;
	color: #CCC;
	font-size:14px;
	line-height:24px;
	font-weight: normal;
	text-align: center;
	border: 1px solid #222;
	min-width: 14px;
	padding: 0 7px;
	margin: 0 5px 0 0;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	background: #555; /* Old browsers */
	background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */
	background: linear-gradient(top, #555 0%,#333 100%); /* W3C */
}

.dark-theme a:hover {
	text-decoration: none;
	background: #444;
}

.dark-theme .current {
	background: #222;
	color: #FFF;
	border-color: #000;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
	cursor: default;
}

.dark-theme .ellipse {
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-weight: bold;
	cursor: default;
}

/* tinyNav*/
.tinynav { 
	display: none;
}
select.tinynav, .tinynav option {
	width: 90%;
}

@media only screen and (max-width : 800px) {
	
	#page-content #nav-wrapper {
		position: relative;
	}
	
	#page-content #nav-wrapper #nav-secondary {
	  border: 0;
	  background: none;
	}			
	#page-content #nav-wrapper #nav-secondary li {
		display: none;
	}
	
	#page-content #nav-wrapper #nav-secondary .expanded,
	#page-content #nav-wrapper #nav-secondary .expanded li {
		display: block;
	}
		
	#page-content #nav-wrapper #nav-follow-link-wrapper {
		display: none;
	}
	
	/* tinyNav*/

    .tinynav { display: block; margin: 15px; }
	
	#page-content #nav-wrapper #nav-secondary li.expanded .top-level-selected,
	#page-content #nav-wrapper #nav-secondary li.expanded .top-level-not-selected,
	#page-content #nav-wrapper #nav-secondary li.expanded .top-level-not-selected,
	#page-content #nav-wrapper #nav-secondary .expanded .sublevel {
		display: none;
	}
	
	
}

.required {
	color: red;
	font-weight: bold;
}


@media screen and (max-width: 767px) {
	.renderedtable td {
		display: inline-block;
		width: auto;
	}
	
	.renderedtable {
		width: auto!important;
	}
}
