body {font-family: arial, helvetica, sans-serif}
ul.tabs {margin: -16px 0 0 20px; padding: 0; list-style: none}
ul.tabs > li {display: block; float: left; margin-right: 11px; position: relative; color: #fff;}
ul.tabs > li > a {display: block; float: left; background-image: url(../images/mapnav_final/mapnav_tab_off_left.png); background-position: left top; background-repeat: no-repeat; padding-left: 10px; font-size: 11px; text-decoration: none; color: #000000}
ul.tabs > li > a > b {display: block; float: left; background-image: url(../images/mapnav_final/mapnav_tab_off_right.png); background-position: right top; background-repeat: no-repeat; padding: 3px 15px 8px 5px; margin-right: -10px}
ul.tabs > li > a:hover {background-image: url(../images/mapnav_final/mapnav_tab_on_left.png)}
ul.tabs > li > a:hover b {background-image: url(../images/mapnav_final/mapnav_tab_on_right.png)}
ul.tabs > li > a.here {background-image: url(../images/mapnav_final/mapnav_tab_here_left.png); color: #ffffff}
ul.tabs > li > a.here b {background-image: url(../images/mapnav_final/mapnav_tab_here_right.png)}
.left a {width: 20px; height: 48px; float:left; background-image: url(../images/mapnav_final/mapnav_left.png); background-position: 0 0}
.right a {width: 20px; height: 48px; float:right; background-image: url(../images/mapnav_final/mapnav_right.png); background-position: 0 0}
.disabled a {background-position: 0 -48px}
.active a {background-position: 0 -96px}
.active a:hover {background-position: 0 -144px}
.pane, .tap-stop-pane {width: 574px; height: 48px; position: absolute; top: 18px; left: 0px; background-image: url(../images/mapnav_final/mapnav_back.png); overflow: hidden}
.start {float:left; background-image: url(../images/mapnav_final/mapnav_back.png); height: 42px; color: #ffffff; font-size: 11px; width: 70px; padding: 6px 0px 0 0px; text-align: right}
.end {float:right; background-image: url(../images/mapnav_final/mapnav_back.png); height: 42px; color: #ffffff; font-size: 11px; width: 70px; padding: 6px 0px 0 0px}

.start img, .end img
{
	padding-left:2px;
	padding-top: 3px;
	background-image:url(../images/bg_timeline.png); background-repeat:repeat-x; background-position:0px 4px;
}

ul.map-nav-tab-stops {width: 2000px; margin: 0; padding: 0; list-style: none; background-image:url(../images/bg_timeline.png); background-repeat:repeat-x; background-position:0px 10px; height: 20px}
ul.map-nav-tab-stops li.stop {display: block; float: left}
ul.map-nav-tab-stops li.stop a { background-repeat: no-repeat; background-position: 2px 1px; width: 14px; height: 14px; display: block; float: left; margin-top: 8px; position: relative}
ul.map-nav-tab-stops li.here a {background-image: url(../images/mapnav_final/mapnav_marker_here.png); background-position: 0 0}



ul.nav {margin: 0; padding: 0; list-style: none; clear: both; width:600px;}
ul.nav li.btn_previous {position: absolute; top: 22px; left: 40px; z-index: 2}
ul.nav li.btn_previous a {display: block; font-size: 11px; font-weight: bold; color: #dddddd; text-decoration: none}
ul.nav li.btn_previous a.inactive {display: none}

ul.nav li.btn_previous a:hover {color: #ffffff}
ul.nav li.btn_previous a b {font-size: 16px}
ul.nav li.btn_next {position: absolute; top: 22px; right: 40px; z-index: 2}
ul.nav li.btn_next a {display: block; font-size: 11px; font-weight: bold; color: #dddddd; text-decoration: none}
ul.nav li.btn_next a.inactive {display: none}
ul.nav li.btn_next a:hover {color: #ffffff}
ul.nav li.btn_next a b {font-size: 16px}
ul.nav li.btn_detail {position: absolute; left: 0; top: 0px; width: 400px; text-align: center; color: #ffffff; font-size: 11px; z-index: 1}
ul.nav li.btn_detail b {font-size: 16px}

/* initially all panes are hidden */ 
div.panes div.pane, div.panes div.tap-stop-pane {
	display:none;		
}

.timeline_wrapper {
    overflow: hidden;
    /*cursor: -moz-grab !important;*/ /* should this be applied with JS? */
    height:20px;
    width:394px;
}


a.left {
width: 20px;
height:48px;
display:block;
background-image: url(../images/mapnav_final/mapnav_left_enabled.png);
}
a.left:hover {
background-image: url(../images/mapnav_final/mapnav_left_hover.png);
}

a.left a.active {
background-image: url(../images/mapnav_final/mapnav_left_enabled.png);
}

a.left a.disabled {
background-image: url(../images/mapnav_final/mapnav_left_selected.png);
}


a.right {
width: 20px;
height:48px;
display:block;
background-image: url(../images/mapnav_final/mapnav_right_enabled.png);
}
a.right:hover {
background-image: url(../images/mapnav_final/mapnav_right_hover.png);
}

a.right a.active {
background-image: url(../images/mapnav_final/mapnav_right_enabled.png);
}

a.right a.disabled {
background-image: url(../images/mapnav_final/mapnav_right_selected.png);
}

a.left {
width: 20px;
height:48px;
display:block;
background-image: url(../images/mapnav_final/mapnav_left_enabled.png);
}
a.left:hover {
background-image: url(../images/mapnav_final/mapnav_left_hover.png);
}

a.left selected {
background-image: url(../images/mapnav_final/mapnav_left_selected.png);
}

li.stop  a {
display:block;
width: 10px;
height:10px;
background-image: url(../images/mapnav_final/mapnav_marker.png);
}
li.stop  a:hover, li.stop  a.active {
width: 10px;
height:10px;
background-image:  url(../images/mapnav_final/mapnav_marker_here.png);
}

.timeline-panes
{
	position: absolute;
}

.timeline-panes .pane, .timeline-panes .tap-stop-pane
{
	width: 350px;
	left:100px
}

.disabled {display:none;}

.start > span.date {}
.start > span.thin { min-width: 30px;}

.end > span.date {}

.end > span.thin { min-width: 30px;}

.map-nav {
position:relative;
}



.map-nav a {text-decoration:none; color: #fff;}

.timeline-panes {color: #fff;}

.tap-stop-pane {color: #fff;}

.tab-stop-pane .title {  float:left;margin:5px;
font-size: 20px;
}

.map-nav {visibility:hidden;}

ul.tabs {margin-left: 30px}
ul.tabs a {text-decoration: none !important}
a.next, a.prev {text-decoration: none !important}
.left a {background-position: 0 -96px}
.left a:hover {background-position: 0 -144px}
.right a {background-position: 0 -96px}
.right a:hover {background-position: 0 -144px}
.tap-stop-pane {margin-top: 3px}
.tap-stop-pane .title {font-weight: bold; font-size: 16px}

ul.map-nav-tab-stops li.stop a {margin-top: 5px}

ul.map-nav-tab-stops li.square a {width: 18px; height: 20px; background-image: url(../images/mapnav_final/markers.png); background-position: 0 0}
ul.map-nav-tab-stops li.square a:hover, ul.map-nav-tab-stops li.square a.active {background-image: url(../images/mapnav_final/markers_here.png); background-position: 0 0}

ul.map-nav-tab-stops li.circle a {width: 18px; height: 20px; background-image: url(../images/mapnav_final/markers.png); background-position: 0 -20px}
ul.map-nav-tab-stops li.circle a:hover, ul.map-nav-tab-stops li.circle a.active {background-image: url(../images/mapnav_final/markers_here.png); background-position: 0 -20px}

ul.map-nav-tab-stops li.triangle a {width: 18px; height: 20px; background-image: url(../images/mapnav_final/markers.png); background-position: 0 -40px}
ul.map-nav-tab-stops li.triangle a:hover, ul.map-nav-tab-stops li.triangle a.active {background-image: url(../images/mapnav_final/markers_here.png); background-position: 0 -40px}

ul.map-nav-tab-stops li.star a {width: 18px; height: 20px; background-image: url(../images/mapnav_final/markers.png); background-position: 0 -60px}
ul.map-nav-tab-stops li.star a:hover, ul.map-nav-tab-stops li.star a.active {background-image: url(../images/mapnav_final/markers_here.png); background-position: 0 -60px}

/*Ticket #67 */
.map-nav .inactive { visibility:hidden !important;}


.map-nav a {text-decoration:none; z-index:1000;}

.map-nav ul.tabs li a, .map-nav a {text-decoration:none;}

.simple-pane {width: 750px !important}
.simple-pane .timeline_wrapper {width: 560px !important}
.simple-pane .tap-stop-pane {width: 560px !important}
.simple-pane .map-nav-tab-stops {width:auto !important}