/*******************************************************************************
 * Main column
 ******************************************************************************/
.main {
	float: left;
	width: 680px;
	padding-top: 0 !important;
	margin-bottom: 10px;
}

/*
 * Style the map loading block that will be included via jQuery
 */
#gmap-loading {
  z-index: 999999;
  position: absolute;
  top: 240px;
  left: 275px;
  
  font-size: 1.5em;
  font-weight: bold;
  
  color: #fff; background: #585858 url(../img/loading-transparent.gif) no-repeat 5px center; opacity: 0.8;
  border: 1px solid #fff;
  padding: 5px 5px 5px 25px;
}

/*
 * Style the map zoom instruction that will be included via jQuery
 */
#gmap-zoom-out-instruction,
#gmap-zoom-in-instruction {
  z-index: 999999;
  position: absolute;
  top: 450px;
  left: 25px;
  
  font-size: 1.5em;
  
  color: #fff; background: #585858; opacity: 0.8;
  border: 1px solid #fff;
  padding: 5px;
}

/*
 * Journey planner instructions (including instruction in journey details) 
 */
#journey-planner-instructions {
  background: #fff;
  float: left;
  padding: 10px 20px;
	width: 660px;
}
#journey-planner-instructions ol {
  margin: 0;
}
#journey-planner-instructions li {
  font-size: 1.4em;
  margin: 0 0 10px 20px;
}
#journey-planner-instructions strong {
  font-weight: normal;
  color: #E00C78;
}
#instruction-2 strong { color: #1EADD4; }
#instruction-3 strong { color: #24A800; }

#journey_details ul.instructions {
  float: left; clear: both; width: 500px;
  position: absolute; top: 280px;
  margin-top: 20px;
  /* Line-up the instructions with the main journey planner instructions */
  margin-left: -20px;
}

#journey_details ul.instructions li {
  font-size: 1.4em;
  margin: 0 0 10px 20px;
}


/*
 * Journey details
 */

#journey_details_wrapper {
	float: left;
	width: 100%;
	background: #FFF;
}

#journey_details {
	float: left;
	display: none;
	overflow-y: scroll;
	height: 350px;
	/* Pad the journey details a little to line-up with the instructional text */
	margin-left: 20px;
	position: relative;
	width: 660px;
}

/*
 * Journey details' tabs
 */
#detail_tabs {
	display: none;
	background: #919191;
	float: left;
	width: 100%;
	border-bottom: 1px solid #000;
}
#detail_tabs ul {
	float: left;
	list-style: none;
	margin: 0;
}
#detail_tabs li {
	float: left;
	margin: 0;
	padding: 0;
	border-right: 1px solid #fff;

	text-align: center;
}
#detail_tabs li.last {
	padding: 0;
	background: none;
	border: none;
}
#detail_tabs li a {
	color: #fff;
	float: left; display: block;	width: 58px; text-align: center; padding: 10px;
	text-decoration: none;	
}

#detail_tabs li.current a {
	background: #24A800;
	color: #fff;
}
#detail_tabs .showhide img {
  margin: 5px 0 0 5px;
}


/*******************************************************************************
 * Sidebar 
 ******************************************************************************/
.sidebar_wrapper {
	float: right;
	width: 280px;
	margin-bottom: 10px;
}	
.sidebar {
	padding-bottom: 10px;
}

/*
 * Journey planner form
 */

#JourneyPlannerIndexForm .header {
  background: url(../img/plan_a_journey.png) no-repeat top left;
  min-height: 65px;
  margin-bottom: 10px; padding-left: 65px;
}

#JourneyPlannerIndexForm h2, 
#JourneyPlannerIndexForm h3 {
  color: #053054;
}
#JourneyPlannerIndexForm h2 {
  font-size: 1.8em; margin: 10px 0 5px;
}
#JourneyPlannerIndexForm h3 {
  font-size: 1.0em;
}

#JourneyPlannerIndexForm {
	padding: 10px 20px 20px;
}
#JourneyPlannerIndexForm div.input {
	margin: 10px 0;	
}
#JourneyPlannerIndexForm div.input label {
	display: block;
	font-weight: bold;
}
#JourneyPlannerIndexForm div.input input {
	border: 1px solid #d6d6d6;
	padding: 4px 26px 4px 4px;
	width: 210px;
}
#JourneyPlannerIndexForm div.input input.flash {
  background: #ffe2f1;
	border: 1px solid #e00c78;
}

#JourneyPlannerIndexForm .depart_arrive {
	margin: 5px 0 20px;		 
}
/* Add some space between the depart/arrive radio buttons */
#JourneyPlannerDepartArrive1 { margin-left: 40px; }

#JourneyPlannerIndexForm .submit {
	margin-top: 20px;		 
}
#JourneyPlannerIndexForm .submit input {
	margin-right: 5px;		 
}


/*
 * auto complete
 */
#JourneyPlannerIndexForm div.input input.ac_loading {
	background: #FFF url(../img/ajax-loader.gif) no-repeat center right;
}
div.ac_results {
	color: #333;
}


#tmp {
	display: none;
}

#JourneyPlannerIndexForm .date_time {
	margin: 5px 0;		 
}
#JourneyPlannerIndexForm #JourneyPlannerDate {
	border: 1px solid #d6d6d6;
	padding: 4px 26px 4px 4px;
	//background: #FFF url(../img/info_icon.gif) no-repeat center right;
	width: 91px;
}
#JourneyPlannerIndexForm #JourneyPlannerHHour,
#JourneyPlannerIndexForm #JourneyPlannerMMin {
	border: 1px solid #d6d6d6;
	padding: 4px 2px 4px 2px;
}

#featured_layers .loading {
	background: #FFF url(../img/ajax-loader.gif) no-repeat center right;
}

table.timetable {
	margin: 5px;
	border: 2px solid #333;	
	font-size: 10px;
}
table.timetable th {
	text-align: left;
	background: #333;
	color: #FFF;
	padding: 2px;
}
table.timetable td {
	padding: 2px;
	background: #FFF;
	border-bottom: 1px solid #CCC;
}


#slider_wrapper {
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #FFF;
	background: url(../img/slider_wrapper_bg.gif) repeat-x bottom left;
	float: left;
	width: 100%;
	padding: 10px 0;
}
#slider_wrapper .label {
	float: left;
	padding: 0 10px;
}
#slider {
	float: left;
	width: 490px;
}
#slider_amount {
	padding: 0 10px;
	float: left;
}
#slider_wrapper .amount_label {
	float: left;
}
#featured {
	background: #ece9e4;
	padding: 10px 0;
	border-bottom: 1px solid #FFF;
}
#featured h2 {
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-topright:10px;
	background:none repeat scroll 0 0 #000000;
	color:#FFFFFF;
	float:left;
	font-size:24px;
	margin:0;
	padding:14px 8px 12px 10px;
}
#featured h2 em {
	color:#0EB4DA;	
	font-style: normal;
}

#featured_layers {
	background: #ece9e4;
	padding: 10px;
}
#featured_layers h3 {
	font-weight: bold;
	background: #0099cc;
	color: #FFF;
	font-size: 1em;
	padding: 10px 10px 10px 30px;
}
#featured_layers .ui-accordion-content {
	padding: 10px;
}
#featured_layers .ui-accordion-content ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#featured_layers .ui-accordion-content ul li {
	margin: 0;
}

#map_details {
	display: none;
}

.select {
	display: none;
	border: 1px solid #CCC;
	background: #FFF;
	color: #333;
	padding: 1px;
	width: 238px;
	height: 150px;
	overflow-y: scroll;
}
.select li {
	margin: 0;
	list-style: none;
	padding: 4px 2px;
	cursor: pointer;
	font-size: .8em;
}
.select li.hover {
	background: #EEE;
	color: #333;	
}
.select .selected {
	background: #333 !important;
	color: #FFF !important;
}
.select .loading {
	text-align: center;
}

.rtb_to,
.rtb_from {
	font-weight: bold;
	cursor: pointer;	
}

.rtb_to span,
.rtb_from span {
	display: none;
}

/*
 * Marker filters
 */
#content form#featured_layers {
  background: #fff;
  border: 1px #C3C3C3 solid;  
  float: left;
  margin: 5px; margin-right: 0;
  padding: 5px 10px;
}
form#featured_layers h4 { margin-bottom: 10px; }
form#featured_layers ul { list-style: none; }
form#featured_layers ul li {
  margin: 0; padding: 0 8px 0 0; float: left;
  position: relative;
}
form#featured_layers #slider_amount {
  font-size: 0.8em;
  padding: 0;
  width: 125px;
}
form#featured_layers input.marker {
  position: absolute; top: 0; left: 0;
  z-index: -99999;
}
form#featured_layers label {
  /*float: left;*/
  text-indent: -9999px;
  margin: 0; padding: 0;
  width: 100px; height: 95px;
  cursor: pointer;
}
form#featured_layers label.roadworks { background: url(../img/Map_Roadworks.gif) no-repeat top right; }
form#featured_layers label.busStops { background: url(../img/Map_Bus_stops.gif) no-repeat top right; }
form#featured_layers label.trains { background: url(../img/Map_Train_Stations.gif) no-repeat top right; }
form#featured_layers label.carpark { background: url(../img/Map_Car_Parks.gif) no-repeat top right; }
form#featured_layers label.parkAndRide { background: url(../img/Map_Park_and_Rides.gif) no-repeat top right; }
form#featured_layers label.taxi { background: url(../img/Map_Taxi_Ranks.gif) no-repeat top right; }
form#featured_layers label.active,
form#featured_layers label:hover { background-position: bottom right; }