/* ========================================================

   PAGE ELEMENT STYLES
   
   Includes standard template elements like:
   
    branding,
	header and footer links, 
   	search form, 
	supporting content banners,
	journey planner form
	
   Also: 
   
   	image captions,
	generic forms,
	download and launch panels,
	date/time formatting,
	page tools,
	highlight box
	
*/

/* BRANDING */
#branding p{
  font-size: 19px;
  font-weight: bold;
  line-height: 19px;
  width: 250px;
  font-family:Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
#branding p a{
	color: #113B92;
}

#branding img{
	display: none;
}

/* CORPORATE LINKS & HELP AND SEARCH */
#corporate-links a,
#help-and-search a{
  color: black
  }
#corporate-links img{
  float: left;
  margin-right: 19px;
  }
#corporate-links dl,
#help-and-search dl {
  margin:0;
  margin-right: 10px;
  padding:0;
  float: left;
  }
#corporate-links dd,
#help-and-search dd {
  margin-right: 10px;
  float:left;
  }
#corporate-links p{
	text-align: right;
}
#help-and-search dl{
  float: right;
  }

/* SEARCH FORM */
#help-and-search form{
  float: right;
  padding-right: 19px;
  padding-top: 10px;
  }
#help-and-search fieldset{
	margin: 0;
	padding: 0;
	border: 0 solid;
	text-align: right;
}
#help-and-search input,
#help-and-search label,
#help-and-search button{
	vertical-align: middle;
}
#main-search-box{
  width: 200px;
}

/* Toolbox */
#toolbox { float: left; display: inline; width: 58px; height: 231px; padding-left: 8px; padding-top: 41px; margin-left: 0px; margin-top: 35px; }
#toolbox a:hover { text-decoration: none; }
#toolbox .tool_off, #toolbox .tool_on { display: block; width: 50px; height: 41px; background-repeat: no-repeat; background-position: 0px 0px; overflow: hidden; margin-bottom: 3px; }
#rotate_left_tool { background-image: url("../../../images/tfl/online/rotate_left_tool.gif"); }
#rotate_right_tool { background-image: url("../../../images/tfl/online/rotate_right_tool.gif"); }
#rotate_left_tool.tool_on { background-image: url("../../../images/tfl/online/rotate_left_tool_on.gif"); }
#rotate_right_tool.tool_on { background-image: url("../../../images/tfl/online/rotate_right_tool_on.gif"); }


/* SUPPORTING CONTENT BANNERS */
.banner,
.big-banner{
	display: block;
	background: url("../../../images/tfl/online/panel-shadow.gif") left bottom repeat-x;
	padding-bottom: 19px;
}
.banner img,
.big-banner img{
	padding: 1px;
	border: 1px solid #CCC;
	padding-right: 0;
	border-right: 0;
}
.big-banner img{
	padding-left: 0;
	border-left: 0;
}
.banner:hover img,
.big-banner:hover img,
.borderless-banner:hover img{
	border-color: #3497D5
}
.borderless-banner{
	display: block;
	padding-bottom: 19px;
}
.borderless-banner img{
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF
}

/* IMAGE CAPTIONS */
p.teaser .captioned-image{
	font-size: 0.8em;
	margin-bottom: 0;
}
.captioned-image{
	width: 167px;
	background: #F7F7F7 url("../../../images/tfl/online/panel-shadow.gif") left bottom repeat-x;
	padding-bottom: 23px;
	text-align: center;
	font-size: 1em;
	line-height: 1em;
	color: #666666;
}


/* FORMS */
form.styled{
	padding-bottom: 27px;
	background: url("../../../images/tfl/online/panel-shadow.gif") left bottom repeat-x;
}
form.styled fieldset{
	border: 0 none;
	margin: 0;
	margin-bottom: 8px;
	padding: 0;
}
form.styled legend{
  font-family:Arial, Helvetica, sans-serif;
  font-size: 1.25em;
  font-weight: bold;
  border-bottom: 1px solid #CCC;
  color: #000;
  float: left;
  width: 100%;
  margin: 0;
  margin-bottom: 8px;
  padding-bottom: 4px;
}
form.styled label{
	width: 100px;  
	display: inline-block;
	margin-top: 4px;
  	vertical-align: top;
	font-weight: bold;
}
form.styled .label-help{
	font-weight: normal;
	display: block;
}
form.styled label em,
form.styled legend em{
	color: red;
}
form.styled fieldset ol{
	float: left;
	margin: 0;
	padding: 0;
}
form.styled fieldset li{
	list-style: none;
	margin-bottom: 4px;
}
form.styled fieldset fieldset{
	border: 0 none;
}
form.styled fieldset fieldset legend{
  	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	border-bottom: 0 none;
	color: #666;
}
form.styled fieldset fieldset label{
	display: block;
  	width: auto;
	margin-left: 100px
}

input.button,
input.green-button{
	font-size: 1em;
	background: #63B2DF url("../../../images/tfl/online/button-blue.gif") left center repeat-x;
	color: #FFF;
	font-weight: bold;
	padding: 1px;
	border: 2px groove #057AB6;
	height: 22px;
}
input.green-button{
	background: #8EC335 url("../../../images/tfl/online/button-green.gif") left center repeat-x;
	border-color: #6FA417;
}

/* Forms in supporting content column adopt the grey panel style */
#supporting-content .styled legend{
  padding-top: 5px;
  width: 182px;
  font-family:Arial, Helvetica, sans-serif;
  background: url("../../../images/tfl/online/grey-panel-header.gif") repeat-x;
  border-bottom: 0 solid;
}
#supporting-content .styled{
  color: #666;
  background-color: #F7F7F7;
  margin-bottom: 0;
}
#supporting-content .styled a{
	margin-left: 8px;
	padding-left: 8px
}
#supporting-content .styled .button{
	margin: 0 8px;
}
#supporting-content .styled legend a{
	background-image: none;
	padding-left: 0;
	color: #113B92;
}
#supporting-content .styled select{
	width: 167px;
	margin-left: 8px;
	margin-bottom: 8px;
}

/* JOURNEY PLANNER FORM */
#jpForm label{
  position: absolute;
  left: -1999px;
}
#jpForm fieldset{
	margin-bottom: 0;
}

#jpForm .advanced{
	padding-left: 5px;
	background: url("../../../images/tfl/online/green-bullet.gif") no-repeat 4px left;
	vertical-align: text-middle;
	line-height: 1em;
	float: left;
}
#name_destination,
#name_origin{
	width: 163px;
	margin-left: 8px;
}

/* DOWNLOAD & LAUNCH PANELS */
div.download,
div.launch{	
	height: 65px;
	margin: 0 auto;
	margin-bottom: 19px;
}
div.download{
	background-image: url('../../../images/tfl/online/download-panel.gif');
	width: 222px;
	padding: 39px 19px 0 112px;
}
div.launch{
	background-image: url('../../../images/tfl/online/launch-panel.gif');
	width: 254px;
	padding: 23px 19px 0 80px;
}
.download a,
.launch a{
  	color: #4BA60A;
  	font-family:Arial, Helvetica, sans-serif;
  	font-size: 1.25em;
  	font-weight: bold;
}

/* DATE/TIME FORMATTING */
.timestamp{
	margin-top: -19px;
	color: #999999;
}

/* PAGE TOOLS */
#page-tools{
	border-top: 1px solid #CCC;
	padding-top: 8px;
}
#page-tools li{
	float: left;
	margin-right: 19px;
}


/* HIGHLIGHT BOX - Creates a box with a blue border and a blue background behind the heading */
.highlight-box {
	background-color: #FFF;
	color: #000;
	text-align: left;
	margin: 0 0 19px 0;
	border: 1px solid #3497D5;
	padding: 19px;
	padding-bottom: 0;
		}
.highlight-box h2	{
	border: 0;
	line-height: 25px;
	background-image: url(../../../images/tfl/online/blue-panel-heading-bg.gif);
	background-repeat: repeat-x;
	background-position: center;
	padding: 8px 19px;
	margin: -18px;
	margin-bottom: 8px;
	color: #FFFFFF;
	}
	

     
/*supporting content styles*/
#supporting-content .rounded-shadow-box .contentArea{
	width:162px;	
	*width:159px;
	padding-left:3px
}

/*supporting content styles end*/	

	
.rounded-shadow-box{
	clear:both;
}
.rounded-shadow-box .tlc{
	overflow:hidden;
	padding-left:14px;
	background:url(../../../images/tfl/online/tlc.gif) no-repeat top left;
}
.rounded-shadow-box .trc{
	overflow:hidden;
	padding-right:14px;
	background:url(../../../images/tfl/online/trc.gif) no-repeat top right;
}
.rounded-shadow-box .t-bg{
	height:14px;
	overflow:hidden;
	width:100%;
	background:url(../../../images/tfl/online/t_bg.gif) repeat-x top left;
}
.rounded-shadow-box .left-bg{
	overflow:hidden;
	padding-left:14px;
	background:url(../../../images/tfl/online/l_bg.gif)  repeat-y top left;
}
.rounded-shadow-box .right-bg{
	padding-right:14px;
	background:url(../../../images/tfl/online/r_bg.gif)  repeat-y top right;
}
.rounded-shadow-box .contentArea{
	margin-left:-5px;
	overflow:hidden;
}
.rounded-shadow-box .blc{
	overflow:hidden;
	padding-left:14px;
	background:url(../../../images/tfl/online/blc.gif) no-repeat top left;
}
.rounded-shadow-box .brc{
	overflow:hidden;
	padding-right:14px;
	background:url(../../../images/tfl/online/brc.gif) no-repeat top right;
}
.rounded-shadow-box .b-bg{
	height:14px;
	overflow:hidden;
	width:100%;
	background:url(../../../images/tfl/online/b_bg.gif)  repeat-x top left;
}

.rounded-shadow-box .contentArea .button-default-1{
	margin:31px 0 0 10px;	
}

.modal {
	position: fixed; 
    top: 40%;
    left: 35%;
    width: 40%;       
    background: #FFFFFF;
    border-radius:5px;
    padding:4px;
    opacity: 1.0;
    filter: alpha(opacity=100);       
}

.overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
}