@charset "utf-8";

/**
 * CHK Kiosk CSS
 *
 * Contents:
 *   Body 
 *   Header
 */   

/**
 * Body  
 */

html { width: 1080px; background:gray }

body {
 margin: 0 auto; overflow: hidden;
 width: 1080px;
 height: 1840px;
 background: white;
 position: relative;
 font: .8em Arial, Helvetica, sans-serif;
 font-family: sans-serif; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

ul, ol { margin: 0; padding: 0; }

/**
 * Body changes on task selection.
 */

body.next-bus #header 
  { background:#1C58BD; } /* blue was #1D58BC */
body.bus-routes #header #top-header-box
  { background:#5E9B4A; }/*green was #5E9A4A*/
body.trip-planning #header #top-header-box
  { background:#E3AD0C; } /*orange was #E2AD0C*/

body.next-bus #header #bottom-header-box:before
  { ncontent:"~ next bus ~" }/*blue */
body.bus-routes #header #bottom-header-box:before
  { ncontent:"bus routes"}/*green */
body.trip-planning #header #bottom-header-box:before
  { ncontent:"trip planning" } /*orange */ 


/**
 * Header
 */

#header { border-radius: 10px 10px 0 0; }

#header #top-header-box {
 position: relative;
 height: 54px;
 margin: 0 auto;
 background: rgba(0,0,0,0);
 padding:10px 20px 20px 20px;
 overflow:hidden; 
}

#h_date_time { float: right; width: 200px; position: relative; top: 5px; }
#h_time { width: 100%; text-align: center; color:#fff; font-size:2.7em; }
#h_date { width:100%; text-align: center; color:#fff; font-size:1em;
  color:rgba(255,255,255,.7); }
#h_name { position: absolute; left:0px; top:22px; margin:0 20%; width: 60%;
  color:white; text-align:center;font-size:2.7em}
#h_logo { width:180px; position:relative; }

#header #bottom-header-box {
 height: 100px;
 margin: 0 auto;
 background: #eee;
 overflow:hidden; 
 text-align:center;
 font-size:50pt;
 font-weight:normal;
 line-height: 80pt;
 color: rgba(0,0,0,.5);
 background: rgba(255,255,255,.5);
 
 -webkit-box-shadow: 0px 10px 5px rgba(50, 50, 50, 0.25);
 -moz-box-shadow:    0px 10px 5px rgba(50, 50, 50, 0.25);
 box-shadow:         0px 10px 5px rgba(50, 50, 50, 0.25);
 position:relative;
}



/**
 * nextBus
 */

#nextBus { margin:0 auto; background: white }
#nextBus nav ul {
 list-style:none; overflow:hidden; font-size:2.4em;
 background:#F3F3F3; color:#444444; margin:0 0 5px; }
#nextBus nav ul li { display: inline; padding-top:2.5%; padding-bottom: 1%}  
#nb_h_route { float: left; width:155px; text-align: center; }
#nb_h_dest { float: left; text-align: left; padding-left: 10px; }
#nb_h_time { float: right; width:340px; text-align: right; padding-right:30px}

.nb_entry { height:93px; width:100%; position:relative }

.nb_row { position: absolute; width: 100%;
 margin:0 0 5px;
 padding:10px 0 10px;
 background:#F3F3F3;
 height:70px  }
.nb_row:hover{ background:#FCFBEB; transition:ease-in .5s all; }
.nb_row a{ color:#0B333C; text-decoration:none;}
.nb_row a small{ color:#999999; font-size:20px;}

.nb_row_icon { float:left; width:155px; text-align:center; }

.nb_row_wait {
 position:absolute; right:30px; top: 0px; width:180px; top:28px ;
 font-size:1.8em; color:green; font-weight:bold; text-align:right;
}
.nb_row_wait div { position: absolute; top:0px; right: 0px; width: 100%; }


.nb_row_time {
 position:absolute; right:30px; top: 53px; width:180px;
 font-size:1em; color:gray; font-weight: bold; text-align:right;
}

.nb_row_stop {
 position:absolute; right:270px; top: 28px; width:80px; text-align: center;
 font-size:1.em; color:gray; 
}

.nb_row_dest { 
 position:absolute; left:165px; top: 28px; width:530px;
 font-size:2em; font-weight:bold; color:gray;  
}

.nb_row_detail { 
 position:absolute; left:165px; top: 68px; width:900px;
 font-size:1em; color:gray;  
}


#nb_disclaimer { height:93px; width:100%; position:relative }

#nb_disclaimer div {
 position: absolute;
 margin:0 0 5px;
 padding:10px 100px 10px 160px;
 text-indent: -78px;
 background:#F3F3F3;
 height:70px;
 font-size:2em; color:gray;
}




/* BOTTOM OF PAGE */

#footer {width:100%; margin:0 auto; position:absolute; bottom:0px;  }		
#f_largeIcons {
 text-align:center;
 background:#F3F3F3;
 border-top:5px solid #ccc;
 margin:17px 0;
 padding:20px 0 10px 0 }

#f_dest,#f_route{
 width:350px;
 height:208px;
 display:inline-block;
 text-align:center;
 font-size:16px; }	
#f_dest a,#f_route a {
 width:100%; height:208px; display:inline-block; }		
#f_dest a { background:url(../images/destinations.png) center no-repeat; }
#f_dest a:hover { background:url(../images/destinations_pressed.png) center no-repeat; }
#f_route a { background:url(../images/busroutes.png) center no-repeat }
#f_route a:hover { background:url(../images/busroutes_pressed.png) center no-repeat }

#f_smallIcons {
 border-bottom-left-radius: 10px; 
 border-bottom-right-radius: 10px; background: #064469;
 overflow:hidden;
 padding-bottom:13px; }

#f_home,#f_backBtn {border:none; margin:20px 20px 0;}
#f_home { float:right;}	
#f_backBtn { float:left; }
#f_home a{
 background:url(../images/home.png) no-repeat;
 width:28px; height:30px;  display:block;
 padding:25px; }
#f_home a:hover{ background:url(../images/home_pressed.png) 6px 2px no-repeat; }
#f_backBtn a{
 background:url(../images/back.png) no-repeat;
 width:28px; height:30px;  display:block;
 padding:25px; }
#f_backBtn a:hover{background:url(../images/back_pressed.png) 6px 2px no-repeat;}	

/* MESSAGES */

.alertMsg, .alertMsg h1 {
 background: white;
 padding:16px 50px;
 font-size:1.5em;
 font-weight:normal; }

/* BUBBLE */
#mydivforbubble { position: absolute; }
.bubble {  position:absolute; background:url(../images/layout/touch_screen.png) no-repeat; z-index:1010; width:243px; height:139px; transition:ease-in .5s all;  margin-left:470px; margin-top:-115px;  
}



.viewAllRoute {position:absolute; right:10px;  }
.rowFluid { width:100%; }

.nextBusTime { float:left; width:345px; margin:0 20px 0 141px; font-size:2.9em; font-weight:normal; }

.moreDeparture { float:left; font-size:2.3em; color:#666; padding-top:8px;  }
.moreDeparture ul{ margin-top:5px; list-style:none; margin-left:0; padding-left:50px; }

#routeDetails {  background:#5E9B4A; color:#fff; display: block; position:relative; top:600px }
#selectRoute { margin-top:0px; margin-left:6px }
.routeDetailTitle { position:relative; font-size:3.5em;  padding:8px; }
.routeDetailTitle ins { margin:0 30px; }
.routeDetailTitle #route_name { max-width: 530px; }

#route_departures .depart { position:relative; width: 100%; height: 40px;}
#route_departures .depart:nth-child(odd) { background: #D3EACC; color: rgba(0, 0, 0, 0.5); }
#route_departures .depart .headsign { position:absolute; left: 200px; top: 8px; font-size:20px  }
#route_departures .depart .times { position:absolute; right:10px; top:8px; width: 360px; text-align: center; }
#route_departures .times span { font-size:20px; display: inline-block; width: 110px; }

#route_arrivals { position:absolute; font-size:20px; right:10px; top:6px; width: 360px; padding: 3px; text-align:center }
#route_arrivals .departing { position:relative; top: 36px; }
#route_arrivals .arrive { padding: 5px 0; border: 1px solid rgba(255,255,255, 0.5); border-radius: 8px }
#route_arrivals .times { margin-top: 10px; width: 360px; text-align: center }
#route_arrivals .times span { font-size:20px; display: inline-block; width: 110px; color: rgba(255,255,255, 0.7);  }

#br_arrival .inbound {}
#br_arrival .times {}
#br_arrival .times span {}
#br_arrival .departing {}


.viewAllRoute {position:absolute; right:10px;  }
 
.allRoute{ overflow:hidden; }
.allRoute ul{ list-style:none; float:left; width:33%; margin: 0 1px; padding:0;}
.allRoute ul li{ list-style:none; margin:10px 0; border:1px solid #B3DBFF; height:71px; padding:3px; font-size:1.2em; }	
.allRoute ul li ins{ margin-right:10px}
.allRoute ul li a{ display:block; color:#39A1FF; text-decoration: none }
.allRoute ul li:hover{ background:#FCFBEB; transition:ease-in .5s all; border:1px solid #F27F21; }
.allRoute ul li.selected{ background:#F9EEED; transition:ease-in .5s all; border:1px solid #D38489; }

#mapIMG { height: 700px; }





html { height: 100% }

body
{
  /**
   * Remove text select.
   */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#bodydiv { width: 1200px; height: 1920px; position:relative;
       margin: 0 auto; padding: 0; visibility: hidden;
       background-color:white; color: black;}

#planbtn { position: absolute; z-index:10; }
#planbtn:hover { background-color: blue; opacity: 0.1 }

#schebtn { position: absolute; z-index:10; }
#schebtn:hover { background-color: yellow; opacity: 0.1 }

#txtview { position: absolute; background-color:white; color: black;
  text-align:center; }

/**
 * Main Items
 */
#map { position: absolute; z-index: 1; margin: 0 auto }

.uiPathHead { text-align:center; width:300px; margin:0 auto }
.uiItineraryList { text-align:left; width:400px; margin:0 auto }
.uiItinerary { font-size:10pt }

#sbtpZoom {
  z-index: 1001;
  position: relative;
  opacity: 0.71;
  vertical-align: middle;
}
#sbtpZoom a {
  text-decoration: none;
  position: absolute;
  display: block;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #369;
  border: 1px solid #ccc;
  border-radius: 8px;
  opacity: 0.71;
}
#sbtpZoom a:hover { background: #036; }


/**
 * For NextBus.js
 */
.iTime { position: absolute }
.iBus { position: absolute }
.iServ { position: absolute }
.iIcon { position: absolute }
.iList { position: relative; list-style-type: none; padding: 0 }
.iList li { position: relative; }

/**
 * For PlanTrip.js
 */
.ptSelect { position: absolute }
.ptSelect ul { margin: 10px; padding: 0; list-style-type: none; text-align: center; }
.ptSelect ul li { display: inline; border-color: black; }
.ptSelect ul li:hover { background-color: grey }
.ptHighlight { background-color: lightblue }
.ptStart, .ptEnd { position: absolute }
.ptStart:hover { background-color: grey }
.ptEnd:hover { background-color: grey }
.ptSteps { position: absolute; text-align: left; overflow:auto}



#footer { 
	border-radius: 0px 0px 10px 10px; 
	position:relative;
}

#footerlinks {
 background-color: white; opacity: 0; /* for IE clickable */
	position: absolute;
	z-index: 1;
	top: 16px;
	left: 128px;
}
#footerlinks a {
	width: 267px;
	display: inline-block;
	height: 262px;
	margin-right: 11px;
}