/* Layout styles */

/*********** site structure styles ***********/
#wrapper {
	min-width: 980px;
	background:#fff;
	width:expression(document.body.clientWidth < 990? "980px": "auto" );
}

#outer {
	width: 99.5%;
	min-width: 980px;
}

*html #outer {
	height: 1%;
}

#headerMain {
	width: 100%;
    float: left;
    padding: 0 0 8px 0;
    background: #FFF;
}

#header {
	width: 100%;
	min-width: 980px;
    float: left;
    background: #000 url(../images/header_bground.gif) no-repeat 100% 0;
    border-bottom: 1px solid #FFF;
    color: #fff;
}

#mainNav {
    clear: both;
    height: 32px;
    background: #FD2F31 url(../images/nav_bground_rpt.gif) repeat-x;
	min-width: 980px;
}

#container {
    margin: 0 174px 0 168px;
	min-width: 670px;
}

*html #container {
    height: 1%;
}

html>body #container {
    /*float: left;*/ /* Causing problems in firefox */
}

.outerwrap {
    float: left;
    width: 99.5%; /* This needs to be 99.5 otherwise right hand nav doesn't float properly */
    position: relative;  /* This is VITAL for Mac IE so the rollovers don't disappear on mouse over */
}

#centrecontent {
	float: right;
	width: 100%;
	/*margin: 0 1px 10px 0;*/
	/* Safari 4 fix */
	margin: 0 1px 10px -1px;
	min-height: 600px;
}

#content {
	height: 1%;
	padding: 0 20px 0 20px;
	/* font-size: 1.1em; */
	font-size: small;
	margin: 0;
}

#left {
	position: relative;
	margin: 0 0 0 -168px; /* same value as the width */
	float: left;
	width: 168px;
	/*height: 63px;*/
	height:auto;
	background: url(../images/left_timetables_bground.gif) no-repeat 0 0; 
}

#right {
	position: relative;
	float: right;
	margin: 0 -176px 0 0; /* same value as the width */
	background: url(../images/outer_bg.gif) no-repeat 0 100%;
	height: auto;
}

#right .right_inner {
	padding: 10px 7px 7px 7px;
	width: 162px;
	background: url(../images/right_bground.gif) no-repeat 0 0;
}


#clearfooter { 
	clear: both;
}

#footer {
	clear: both;
  	height: 20px;
	position: relative;
	margin: 20px 0 0 0;
	padding: 5px 0 0 0;
	border-top: 1px solid #CCC;
}

/***********  Link styles ***********/

a:hover {
	color: #000;
	text-decoration: underline;
}

/***********  Header Main styles ***********/

/* Header Styles */

#header h1 {
	margin: 0;
}

#header h1 a {
	width: 140px;
	height: 71px;
	display: block;
	float: left;
}

#header form { /* Hides search form */
	display: none;
}

#header #utilities { /* Includes phone number, Buy Metcards, Feedback and Log In */
    float: right;
    width: 500px;
	height: 20px;
    margin: 5px 0 0 0;
    color: #FFF;
    font-weight: bold;
	font-size: 12px;
}

#header #utilities_search { /* By line and Search Button */
	clear: right;
    float: right;
    width: 450px;
	height: 20px;
    margin: 0;
    padding: 10px 0 0 0;
    color: #FFF;
    font-weight: bold;
    font-size: 12px;
}

#header #utilities span.phone {
    float: left;
    margin: 0 0 0 0;
    padding: 0 0 0 18px;
    text-align: right;
    background: url(../images/phone_icon.gif) no-repeat 0 2px;
}

#header #utilities span.utility,
#header #utilities_search span.utility {
    /* float: right;
    margin: 0;
    padding: 0;
    list-style-type: none; */
}

#header #utilities span.utility,
#header #utilities_search span.utility {
    display: inline;
    float: right;
    margin: 0 .6em 5px 0;
    padding: 0;
    background: url(../images/hme_utilities_bground_rpt.gif) no-repeat 100% 0;
}

#header #utilities span.utility a,
#header #utilities_search span.utility a {
    color: #FFF;
    float: left;
    text-decoration: none;
    margin: 0 0 5px 0 ;
    padding: .1em .5em .1em 1.8em;
    background: url(../images/hme_utilities_bground.gif) no-repeat 0 0;
}

#header #utilities_search p.byline {
	float: left; 
    font-size: 12px;
    margin: 0 .7em 0 0;
    padding: 0;
    height: 20px;
}

html>body #header #utilities_search p.byline {
	float: left; 
    font-size: 12px;
    margin: 0 .7em 0 0;
    padding: 0;
    height: 20px;    
}

/* Sub Utilities Styles (includes journey planner link, date and how to use link) */ 

#subUtilities {
	float: left;
	margin-top: -1px;
	width: 100%;
}

/* Journey Planner Styles */

#journeyPlanner {
	float: left;
	padding: 9px 0 0 0;
}

#journeyPlanner a {
	display: block;
	width: 168px;
	height: 21px;
	color: #000;
	text-decoration: none;
	font-weight: bold;
	font-size: 13px;
	padding: 1px 0 0 25px;
	background: url(../images/journey_planner_bground.gif) no-repeat 0 0;
}

/* Help Styles */

#help {
	float: right;
	width: 30em;
	padding: .8em 0 0 0;
}

#help ul {
	float: right;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#help ul li {
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
}

#help ul li.time {
	color: #666;
	background: url(../images/help_bground_rpt.gif) repeat-y 100% 0;
	padding: 0 .5em 0 .1em;
	margin: 0 .5em 0 0;
}

#help ul li a {
	color: #666;
	text-decoration: none;
	padding: .2em 2em .2em 0;
	background: url(../images/help_bground.gif) no-repeat 100% 0;
}

/***********  Navigation styles ***********/

/*Main Nav styles */

#mainNav ul {
  float: left;
  width: 100%;
  min-width: 100%;	
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: url(../images/nav_bground.gif) no-repeat 100% 0;
  border-bottom: 2px solid white;
}

#mainNav ul li { 
  display: inline;
  margin: 0;
  padding: 0;
}

#mainNav ul li a {
	float: left;
	display: block;
	color: #FFF;
	text-decoration: none;
	margin: 0;
	padding: .7em .6em;
	font: bold 12px arial, helvetica, sans-serif;
	text-transform: lowercase;
	white-space: nowrap;
	background: url(../images/nav_a_bground.gif) no-repeat 100% 100%;
}

#mainNav ul li.first a {
	background: url(../images/nav_home_bground.gif) no-repeat 0 0;
}

#mainNav ul li.last a {
	background: none;
	float: right;
	background: url(../images/metcard_deals_nav.gif) no-repeat left;
	padding-left: 30px;
}

#mainNav ul li a:hover, #mainNav ul li a.active {
	text-decoration: none;
}

#mainNav ul li a.active {
	background: #000;
}

#mainNav ul li.last a.active {
	background: none;
	float: right;
	background: url(../images/metcard_deals_nav.gif) no-repeat left;
	padding-left: 30px;
}

/*Sub Nav styles */

/* Secondary */


#subNav {
	float: left;
	width: 168px;
	margin: 60px 0 0 0;
	padding: 6px 0 0 0;
}

/* show the h1 but in same colour as background image so that it doesn't appear BUT 
does show the curved header */

#left #subNav h1 {
	font-size: 0.1px; 
	height: 11px;
	color: #E1E1E1;
	background: url(../images/left_subnav_bground_top.gif) no-repeat 0 100%;
	padding: 0;
	margin: 5px 0 0 0;
}

#subNav ul {
	width: 168px;
	float: left;
	background: url(../images/left_subnav_bground.gif) no-repeat 0 100%;
	margin: 0;
	padding: 0 0 10px 0;
	list-style-type: none;
}

#subNav ul li {
	float: left;
	display: block;
	width: 168px;
	margin: 0;
	padding: 0;
	background: url(../images/left_subnav_arrow.gif) no-repeat 12px 7px;
}

#subNav ul li a {
	display: block;
	color: #333;
	text-decoration: none;
	font weight: normal;
	font-size: 12px;
	padding: 2px 2px 2px 24px;
	background: url(../images/left_subnav_border.gif) no-repeat 22px 100%;
}

#subNav ul li a:hover, 
#subNav ul li a.active {
	color: #FFF;
	background: #333 url(../images/left_subnav_arrow_over.gif) no-repeat 1em .6em;
}

/* Tertiary */

#subNav ul ul {
	background: none;
	padding: 0;
	margin: 0 0 10px 0;
}

#subNav ul ul li {
	background: none;
}

#subNav ul ul li a {
	display: block;
	color: #333;
	text-decoration: none;
	font-size: 11px;
	padding: .1em 0 .1em 2.5em;
	background: none;
}

#subNav ul ul li a:hover, #subNav ul ul li a.active {
	font-weight: bold;
	background: none;
	background-color: #D4D4D4;
	color: #333;
}

#subNav ul ul li a.active, #subNav ul ul li a.active:hover {
	background: url(../images/left_tertnav_arrow.gif) no-repeat 2.5em .6em;
	padding-left: 3.7em;
}


/*********** Left column Styles ***********/



/*********** Right column Styles ***********/

/* General Styles */

#right .toolbarPortal h1 {
	margin: 0;
	padding: 0;
}

#right .toolbarPortal1,
#right .toolbarPortal2,
#right .toolbarPortal3,
#right .toolbarPortal4,
#right .toolbarPortal5,
#right .toolbarPortal6,
#right .toolbarPortal7 { /* For IE, otherwise it puts a large gap in between each portal */
	float: left;
	clear: both;
	height: 1%;
	margin: 0 0 .5em 0;
}

#right .toolbarPortal {
	float: left;
	clear: both;
	width: 162px;
	padding: 0 0 1em 0;
	line-height: 1.2em;
	background: #FFF url(../images/right_portal_bground.gif) no-repeat 0 100%;
}

#right .toolbarPortal h2 {
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #333;
	margin: 0;
	padding: .3em 0 0 .8em;
	height: 22px;
	background: url(../images/right_hdr_bground.gif) no-repeat 0 0;
}

#right .toolbarPortal form {
	margin: 0;
	padding: .5em;
	line-height: 1.4em;
}

#right .toolbarPortal form label {
	margin: 0;
	padding: 0;
	display: block; /* Added by Geoff, 17 October to fix display issues */
}

/* Search & My Way Styles */

#right #toolbar-right .toolbarPortal .combinedSearchPortal h2 {
    background: url(../images/right_quicksearch_hdr_bground.gif) no-repeat 0 0;
    color: #FFF;
}

#right .toolbarPortal .myWayPortal h2 a {
    color: #00f;
    text-decoration: none;
}

#right .toolbarPortal .myWayPortal h2 a:hover {
    color: #F00;
    text-decoration: underline;
}

#right .toolbarPortal .myWayPortal .myWayInner h3 {
    font-size: 11px;
    font-weight: bold;
    padding: 0.2em 0 0 0.5em;
    margin: 0;	
}

#right .toolbarPortal .combinedSearchPortal h3 {
    padding: 0.3em .5em 0 .5em;
    margin: 0;
    font: bold 12px arial, helvetica, sans-serif;
    color: #000;
}

#right .toolbarPortal .combinedSearchPortal p,
#right .toolbarPortal .quickSearchPortal p,
#right .toolbarPortal .searchPortal p,
#right .toolbarPortal .myWayPortal p {
    padding: 0 .5em 0 .5em;
    margin: 0;
}

#right .toolbarPortal .combinedSearchPortal form input {
    border: 1px solid #A8A8A8;
    font: normal 12px arial, helvetica, sans-serif;
}


#right .toolbarPortal .combinedSearchPortal form input.button {
    margin: 2px 0 0 2px;
    padding: 2px 0 2px 2px;
    width: 28px;
    height: 18px;
    border: none;
    cursor: pointer;
    color: #FFF;
    font: bold 12px arial, helvetica, sans-serif;
    background: url(../images/right_go_btn.gif) no-repeat bottom left;
}

html>body #right .toolbarPortal .combinedSearchPortal form input.button {
    padding: 0.2em 0 0 .1em;
    margin: 0.1em 0 0 .5em;
}

/* Standard Promo Tile Styles */

#right .toolbarPortal .std_promo_tile {
	float: left;
	width: 162px;
}

#right .toolbarPortal .std_promo_tile .promoTileLink a {
	background: url(../images/red_arrow.gif) no-repeat 0 .3em;
	padding: 0 0 0 1.3em;
	color: #00f;
	text-decoration: none
}

#right .toolbarPortal .std_promo_tile a:hover {
	color: #F00;
	text-decoration: underline;
}

#right .toolbarPortal .std_promo_tile a:visited {
	color: #800080;
}


#right .toolbarPortal .std_promo_tile h2 {
	background: url(../images/right_portal_hdr.gif) no-repeat 0 0;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000;
	margin: 0;
	padding: 10px 0 0 10px;
	width: 152px;
}

#right .toolbarPortal .std_promo_tile .std_promo_tile_Inner {
	float: left;
	width: 139px;
	padding: 0 8px;
}

#right .toolbarPortal .std_promo_tile_Inner img {
	float: left;
	margin: .4em .5em 0 0;
}

#right .toolbarPortal .std_promo_tile_Inner p {
	line-height: 1.3em;
	margin: 0;
	padding: 0;
}



/*********** Footer Styles ***********/

#footer ul {
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#footer li {
	display: inline;
	margin: 0;
	padding: 0;
}

#footer li a {
	float: left;
	padding: 0 5px;
	color: #666;
	border-right: 1px solid #9C9C9C;
}

#footer li.last a {
	border-right: none;
}

#footer li a:hover {
	text-decoration: none;
}

/* Credits Footer Styles */

#footer ul#Credits {
	display: none;
}

#footer #footerDesc {
	clear: both;
	float: left;
}

#footer #footerDesc p {
	padding: 0;
	margin: .3em 0 0 0;
	color: #333;
}

/* Rich text Image styles */
div.imageleft, div.imageright, div.leftobject, div.rightobject
{
    padding-top: 4px;
    padding-bottom: 4px;
    display: inline;
}

div.imagecenter, div.centerobject
{
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
    display: block;
}

div.imagecenter
{
    text-align: center;
}


div.imageleft, div.leftobject
{
    float: left;
    padding-right: 8px;
}

div.imageright, div.rightobject
{
    float: right;
    padding-left: 8px;
}

div.imageleft p.picturetext, div.imageright p.picturetext, div.imagecenter p.picturetext
{
    margin-top: 2px;
    margin-bottom: 2px;
}

div.imageleft p.picturetext, div.imageright p.picturetext, span.picturetext
{
    background-color: #f0f0f0;
}

/* Styles to make HTML valid: */

td.pixels40 {
	width: 40px;	
}

img {
	border-width: 0px;
}

/* MyWay */

#MyWayMessage img {
	margin: 13px 0 0 0;
}

#Form_AddToMyWayForm_action_addToMyWay {
	margin: 0px 0 0 10px; 
	position:absolute; 
}

	#Form_AddToMyWayForm div#action_addToMyWay label.left {
		display: none;
	}
	
fieldset {
	border: 0;
}
#right .toolbarPortal .myWayPortal .myWayInner ul p {
	padding-bottom: 5px;
}
.myWayInner ul a {
	color: #666;
	text-decoration: none;
	padding-bottom: 20px;
}
.myWayInner ul a:hover {
	color: #444;
	text-decoration: none;
}

/* Polls */

div#PollAnswer ul {
	margin: 0px;
	padding: 0px;
}

	form.ShowPoll div.middleColumn .optionset li, form.ShowPoll div.Actions {
		margin-left: 0.5em;
		list-style-type: none;
	}

		form.ShowPoll div.middleColumn .optionset li label {
			font-weight: normal;
			font-size: 1em;
		}
		
		#right .toolbarPortal form li label {
			display: inline;
		}
		
	#right form.ShowPoll label, #right form.ShowPoll h6 {
		font-weight: normal !important;
		margin-top: 0px !important;
		margin-bottom: 1em !important
	}