/* OVERRIDES */
* {margin:0;padding:0;}
input:focus, textarea:focus,select:focus {outline: none;}
html, body {
height: 100%;
}
img {border:0;}
body,p {font-family:franklin-gothic-urw, sans-serif;}
b {
    font-weight:500;
}
/* GLOBAL */
#container{
    position: absolute;
    top:0; bottom:0; right:0; left:0;
}
header {
	height:54px;
}
#map {
	position: absolute;
	top: 54px;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    overflow: hidden;
}
/* FOOTER */
footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    background-color:white;
    border-top:1px #999 solid;
    height:60px;
     -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
}
#legend {
    padding-top:6px;
    padding-left:6px;
    padding-right:6px;
    background-color:white;
    height:25px;
    cursor:default;
    display:inline-block;
    vertical-align:top;
}
#ads {
    display:inline-block;
    background-color:orange;
}
#zoombtns {
     position:absolute;
     right:0;
     top:0;
}
.zoom {
    width:38px;
    height:38px;
    margin:9px 9px 9px 0;
    text-align:center;
    display:inline-block;
    color:#000;
    font-size:2em;
    background-color:white;
    border:1.5px #999 solid;
    border-radius:4px;
    text-decoration:none;
     -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
      box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
}


/* LINE ICONS */
#menu li ul.lineholder {display:block; position:absolute; top:0; right:2px;}
.lineholder li {
    font-size:0.6em;
    list-style-type:none;
    display:inline-block;
    color:white;
    background-color:black;
    margin-right:1px;
    width:21px;
    height:20px;
    font-weight:bold;
    text-align:center;
}
.lineholder li span {
    height:16px;
    line-height:16px;
    padding:2px;
    display:block;
}
@media only screen and (min-width: 480px) {
    .lineholder li {
        font-size:0.8em;
        width:25px;
    }
}
/* HEADER ITEMS INCLUDING SEARCH*/

#menu li.searchitem {
    width:auto;
    float:right  !important;
    display:none;
    z-index: 99999;
}
#menu li.searchbutton {
    display:block;
    float:right !important;
    width:40px;
}
.searchbutton button {
    width:40px;
    height:40px;
    background:url(../png/ic_action_search2.png) no-repeat 4px 4px;
    border:0;
}
form#search input {
    width:200px;
    height:40px;
    border:none;
    border-image-width:0;
    font-size:1em;
    color:white;
    background:transparent url(../png/ic_action_search2.png) no-repeat 4px 4px;
    padding-left:32px;
    overflow:hidden;
    -webkit-appearance: none;
}

form#search input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ffffff;
    opacity:  0.7;
}
form#search input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ffffff;
   opacity:  0.7;
}
form#search input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ffffff;
   opacity:  0.7;
}
form#search input:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #ffffff;
   opacity:  0.7;
}

#menu ul#searchresults {
    background-color:white;
    border:1px #999 solid;
    display:block;
}
#menu #searchresults li.sr {
    padding-left:15px;
    list-style-type:none;
    height:38px;
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    line-height:38px;
    cursor:pointer;
    display:block;
    position:relative;
}
li.selectedSearch {
    background-color:#ddf;
}
@media only screen and (min-width: 675px) {
    #menu li.searchbutton {
        display:none;
    }
    #menu li.searchitem {
        display:block;
    }
}
@media only screen and (max-width: 675px) {
    .searchInProgress #menu li.submenu,
    .searchInProgress #menu li.logo,
    .searchInProgress #menu li.searchbutton,
    .searchInProgress #menu li.iphonemenu {
        display:none;
    }
    .searchInProgress #menu li.searchitem {
        display:block;
        float:none;
        width:auto;
    }
    
}

/* MENU */
#menu{
        width: 100%;
        list-style: none;
}

#menu li.menuchild {
        float: left;
        padding: 0;
        position: relative;
}
li.iphonemenu {
    width:135px;
    height:44px;
}
#menu .iphonemenu a {
    padding:2px;
    padding-top:6px;
}
li.logo.expandable {
    background:url(../png/more2.png) no-repeat 75px 38px;
}
li.citysubmenu.expandable {
    background:url(../png/more2.png) no-repeat 45px 38px;
}
li.moresubmenu.expandable {
    background:url(../png/more2.png) no-repeat 22px 38px;
}
li.langs.expandable {
    background:url(../png/more2.png) no-repeat 16px 38px;
}

li#helpitem {
    display:none;
}
li.citysubmenu {
  margin-left:14px;
  width:40px;   
}
li.moresubmenu {
    margin-left:10px;
    width:56px;   
    display:none;
}
#menu li.citysubmenu a,
#menu li.moresubmenu a {
    font-size:larger;
    width:102px;   
}
#menu li.citysubmenu > a{
    width:32px;   
    padding-top:14px;
}
#menu li.moresubmenu > a {
    width:80px;
}

li.citysubmenu a span {
    display:none;
    font-weight:500;
    -webkit-font-smoothing:antialiased;
    font-size:24px;
}
@media only screen and (min-width: 350px) {
    li.moresubmenu {
        display:block;
    }
}
@media only screen and (min-width: 480px) {
    li#helpitem {
        display:block; 
   }
   li.citysubmenu {
     width:130px;   
   }
   #menu li.citysubmenu > a {
       width:120px;   
   }
   li.citysubmenu a span {
       display:inline;
   }
   li.citysubmenu a abbr {
         display:none;
     }
}
#menu li.logo {
    width:40px;
}
#menu a{
        float: left;
        height: 32px;
        padding: 16px 0 4px 8px;
        color: #000;
        text-decoration: none;
        width:80px;
}
#logo {
    background-repeat:no-repeat;
    width:32px !important;
    height:32px;
    margin-left:10px;
    margin-top:-2px;
    padding-bottom:12px;
    height:32px;
    background:url(../png/mthick.svg) 0 4px no-repeat;
    background-size:36px 36 px;
}
#menu li.right {
    float:right;
    border-right:0;
}



#menu li.selected ul.items {
    display: block;
}

/* Sub-menu */

ul.items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 44px;
    left: 0;
    z-index: 99999;
    background: white;
}

li.item {
    float: none;
    display: block;
    margin-left:-1px;
    padding:0;
}



#menu ul a{
    padding: 10px;
    height: 22px;
    width:110px;
    display: block;
    white-space: nowrap;
    float: none;
}
#menu ul a:hover{
        background: #ddf;
}


/* Clear floated elements */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

.langs {
    width:40px;
}
#menu .langs ul a {
    width:24px;
}
.langs .lbl {
    display:none;
}

@media only screen and (min-width: 480px) {
    .langs {
        width:95px;
    }
    .langs .abbr {
        display:none;
    } 
    .langs .lbl {
        display:inline;
    }
    #menu .langs ul a {
        width:110px;
    }
    li.langs.expandable {
        background-position-x: 32px;
    }
}

/* JOURNEY VIEW */

#journeyview {
	background:#222;
	background:-moz-linear-gradient(top, #222,black );
	background:-webkit-linear-gradient(top, #222,black );
	background:linear-gradient(top, #222,black );
	height:66px;
	position: absolute;
    bottom: 60px;
    left: 0;
    right: 0;
	color:yellow;
	font-size:2em; 
	padding-left:30px;
	padding-top:6px;
	display:none;
	opacity:0.9;
	font-size:1.6em;
	cursor:pointer;
}
.time {
    margin-right:20px;
}
#journeyview img {
    vertical-align:middle;
    padding-right:3px;
}
.stn1,.stn2 {
    color:white;
}

#routedetails .stn1,#routedetails .stn2 {
    color:black; 
    font-size:1.3em; 
    font-weight:bold; 
    overflow: hidden;
    white-space:nowrap;
    width:290px;
    height:2em;
}
#routedetails .stn2 {
    width:270px;
    height:2em;
    
}
#routedetails .stn1,#routedetails .stn2,#routedetails .journeyresult,#routedetails .stime,#routedetails .sprice {display:block;position:absolute;}
#routedetails .arrow {padding-right:10px;}
#routedetails .stime, #routedetails .sprice {font-size:1.4em;}

#routedetails .stn1 {top:0em; left:15px;}
#routedetails .stn2 {top:2.2em; left:15px;}
#routedetails .stime {top:3.2em; left: 0px;  width:250px; display:inline-block;  vertical-align:middle;}
#routedetails .sprice {top:5.2em; left: 0px;  width:250px; display:inline-block; vertical-align:middle;}
#routedetails .stime img { vertical-align:middle; width:40px; padding-right:0.3em;}
#routedetails .sprice img { vertical-align:middle; width:40px; padding-right:0.3em;}
#routedetails ul {margin-top:12em; padding-top:10px; border-top:1px #999 solid; }

.line2 {
    margin-right:30px;
}
.stn1 {
    line-height:57px;
}
@media only screen and (max-width: 799px) {
    footer {
        height:85px;
    }
    #journeyview {
           bottom: auto;
           top:45px;
    }
    #ads {
        display:block;
        position:absolute;
        bottom:0;
    }
    #legend {
        position:absolute;
        top:0;
        display:block;
    }
  
}
@media only screen and (max-width: 799px) {
    #journeyview {
        font-size:1.2em;
    }
    .stn1 {
        display:block;
        line-height:30px;
    }
    .stn1,.stn2 {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .line2 {
        display:block; float:left;
        margin-top:5px;
    }
    .journeyinfo {
        position:absolute;
        top:0;
        left:0;
        width:50%;
        padding-top:5px;
        padding-left:5px;
        overflow:hidden;
    }
    .journeyresult {
        position:absolute;
        top:0;
        right:0;
        width:50%;
         overflow:hidden;
    }
    #journeyview img {
        max-width:34px;
    }
    .stime,.sprice {
        display:block;
    }
}

/* POPOVER */

#popover {
   position:relative;
   padding:10px;
   padding-top:10px;
   margin:1em 0 3em;
   color:white;
   font-weight:bold;
   opacity:0.9;
   background:#333333;
   /* css3 */
   -moz-border-radius:10px;
   -webkit-border-radius:10px;
   border-radius:10px;
   background:-moz-linear-gradient(top, black, #333333);
   background:-webkit-linear-gradient(top, black, #333333);
   background:linear-gradient(top, black, #333333);
   display:none;
	height:86px;
	position:absolute;
}
#popover:after { /* creates triangle */
   content:"";
   display:block; 
   position:absolute;
   bottom:-15px;
   left:130px;
   width:0;
   border-width:15px 15px 0;
   border-style:solid;
   border-color:#333333 transparent;
}
#popover > * {
    vertical-align:top;
}
.name {
	display:inline-block;
	height:44px;
	overflow:hidden;
	margin-left:5px;
	vertical-align:top;
}

.alt_name {
    padding-top:2px;
    display:block;
    float:left;
    clear:left;
}
#popover .lineholder {
    display:inline-block;
    vertical-align:top;
}
@media only screen and (max-width: 799px) {
    #popover .lineholder.superchange li {
        width:12px;
        font-size:0.6em;
    }
}
#metropedia {
	color:white;
	height:19px;
	display:block;
	float:left;
	text-decoration:none;
}
@media only screen and (max-width: 799px) {
    #metropedia {
        width:175px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}
#metropedia:hover {
	text-decoration:underline;
}

#audio_btn {
    display:inline-block;
    vertical-align:top;
	background-color:#eee;
	cursor: pointer;
	width:34px;
	height:34px;
	background:url(../png/speakerSmall.png) no-repeat 7px 7px;
}
.buttons {
    display:block;
}
.nicebtn {
	padding-left:31px;
	padding-top:13px;
	padding-right:10px;
	width:73px;
	height:36px;
	display:inline-block;
	background-color:black;
	text-decoration:none;
	text-align:center;
	color:white;
	font-size:smaller;
	cursor:pointer;
}
#plan_route_btn {
	background:url(../png/btn-route.png) no-repeat;
}
#times_btn {
	background:url(../png/btn-traintimes.png) no-repeat;	
}

#city-sh a {color:#0033CC;}
#city-bj a {color:#D90000;}
#city-hk a {color:#E38E38;}
#city-gz a{color:#008100;}
#city-sg a{color:#6633CC;}
#city-tp a{color:#00B93D;}
#city-sl a{color:#9635e6;}
#city-dl a{color:#E64C0F;}

#times,#routedetails {
    display:none;
    border:1px #999 solid;
    -webkit-box-shadow-left: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
    box-shadow-left: 0px 0px 3px 3px rgba(0, 0, 0, 0.2);
    width:320px;
    bottom:0;
    top:45px;
    right:0;
    position:absolute;
    background:white;
    background:rgba(255,255,255,0.9);
    color:black;
    overflow-y:scroll;
	cursor:pointer;
}
#timesinner,#routedetailsinner {
    padding:20px;
    width:280px;
    overflow:visible;
}
#timesinner h2 {
    padding-left:46px;
    padding-top:4px;
    background:white url(../png/blackclock.png) no-repeat 0 0;
    padding-bottom:10px;
}
#timesajax {
    
}
#timesajax td {
    height:32px;
    border-bottom:1px #ddd solid;
}
#timesLine {
    width:32px;
}
.timesLineTd {
 text-align:center;
 height:32px;
 line-height:32px;   
}
#timesDest {
    width:250px;
}
#timesFirst {
    width:60px;
}
#timesLast {
    width:60px;
}
#timesSep{
    width:10px;
}

svg {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
svg circle {
    cursor: pointer;
}
#stationdb, #linedb {
    display:none;
}

.step {height:60px; list-style-type:none;display:block; position:relative;}
.step .lineA {height:30px; width:8px; position:absolute; top:0; left:20px}
.step .lineB {height:30px; width:8px;  position:absolute; top:30px; left:20px}
.step p {position:absolute; top:6px; left:50px; font-size:1.15em;}
.stationstep p {margin-top:12px;}
.directionstep p {font-size:1em; top:12px;}
.step img {position:absolute; top:22px; left:12px}
#menu a {
    color:white;
}