@charset "utf-8";
/* CSS Document */

/*Move these to sbmtd_base.css*/
H1, H2, H3, H4 {
	color:#444;
}
H1, H2 {
	font-weight:normal;
}
H2 {
	font-size:31px;
}
/*end Move these to sbmtd_base.css*/
H3 {
	font-size:24px;
}

body {
/*	font-family:Arial, Helvetica, sans-serif;
	-webkit-box-sizing: border-box;  Safari/Chrome, other WebKit 
	-moz-box-sizing: border-box;     Firefox, other Gecko 
	box-sizing: border-box;          Opera/IE 8+ */
	
}

input, select {
	height:40px;
	font-size: 14pt;
	padding: 0 6px;
}

button {
	width: 16%;
	font-size: 14pt;
	height: 43px;
	border: thin solid #aaa;
}

/** Prevent hyperlinks in the google map .*/
.gmnoprint, .gm-style-cc, .gm-website { display: none !important }

/*input, select, textarea { 
	-webkit-box-sizing: border-box;  Safari/Chrome, other WebKit 
	-moz-box-sizing: border-box;     Firefox, other Gecko 
	box-sizing: border-box;          Opera/IE 8+ 
}*/

.cf {
	clear:both;
}

.float-left {
	float:left;
}

.float-right {
	float:right;
}
.center-div {
	clear:both;
	margin:auto;
}
.row {
	/*margin-bottom:10px;*/
}

.of2-col {
	float:left;
	width:49%;
	padding-right:2%;
}
.of2-col:nth-child(2) {
	padding-right:0px;
	float:right;
}
#search-region div{
	/*border:thin red dotted;*/
}

#pageholder {
	/*widescreen tv portrait*/
	width:1060px;   /*was 1080px;*/
	height:1840px;   /* was1920px;*/
	position:relative;
	z-index:100;
	margin:auto;
	border:thin grey dashed;
}
	
#header p.pagetitle {
	font-size:36px;
	margin:auto;
	text-align:center;
}

#header div {
	/*width:100%;
	height:40px;*/
	/*background-color:#CC9111;*/
}


#map-canvas {
	height: 32%; /*width: inherit*/;
}

#contentblock {
	top:43%;
	/*height:20%;	*/
	display:table;
	z-index:50;
	position:absolute;
	color:grey;
	width:96%;
	margin:0 2%;
}

.contentblock {
	font-size:14pt;
}

.contentblock label {
	font-size:10pt;
}

.contentblock .pageTitle {
	height:50px;
}


#title h1 {
	font-weight:normal;
}

#search-region {
	z-index:2;
	position:relative;
	width:100%;
}

#search-fields label {
	width:100%;
	display:block;
}

#search-fields input[type="textbox"] {
	width:93%;
	padding-left:6%;
}
#search-fields  input[type="textbox"].a {
	background: url(https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-a.png) no-repeat scroll 4px 4px;
}
#search-fields  input[type="textbox"].b {
	background: url(https://mts.googleapis.com/vt/icon/name=icons/spotlight/spotlight-waypoint-b.png) no-repeat scroll 4px 4px;
}
#search-fields  input[type="textbox"].a, #search-fields  input[type="textbox"].b {
	background-size:18px;
}

#transit-mode {
	margin: auto;
}
#transit-mode button:hover {
	opacity:.6;
}
#transit-mode div {
width: 117px;
height: 78px;
line-height: 120px;
background-repeat: no-repeat;
border: 0px;
display: inline-block;
padding: 0 3px 0 0;
text-align: center;
margin: 0;
}

#transit-mode div:hover {
	opacity:.8;
}
#transit-mode div.selected {
	opacity:1;
}

#transitB {
	background-image:url(../images/modes/bus.png);
}
#drivingB {
	background-image:url(../images/modes/car.png);
}
#walkingB {
	background-image:url(../images/modes/walk.png);
}
#bicyclingB {
	background-image:url(../images/modes/bike.png);
}
#transitB:hover, #transitB.selected {
	background-image:url(../images/modes/bus-selected.png);
	color:#652C90;
}
#drivingB:hover, #drivingB.selected {
	background-image:url(../images/modes/car-selected.png);
	color:#ED1C24;
}
#walkingB:hover, #walkingB.selected {
	background-image:url(../images/modes/walk-selected.png);
	color:#3852A4;
}
#bicyclingB:hover, #bicyclingB.selected {
	background-image:url(../images/modes/bike-selected.png);
	color:#69BD45;
}

/*#mode-options, #directions-button {
	margin: 15px 0;
}*/
#mode-options {
	height:70px;
}

/*#mode-options div, #mode-options input {
	float:left;
	margin: 0;
	height: 200px;
}*/
.ui-timepicker-input {
	margin:0;
}
.ui-timepicker-input, .timebutton {
	float:left;
}

.timebutton {
	height: 40px;
	/*border:thin grey solid;*/
	padding:2px;
	width:40px;
	background-image:url(../images/layout/clock-time-1.png);
	background-repeat:no-repeat;
	
	background-position:center;
	background-color:#B0B0B0;
   
}

#mode-options > div {
	/*display:none;*/
}

#mode-options div.selected {
	display:block;
}

#mode-title, #distance-travelled {
	display:inline-block;
	color:black;
	margin-top: 255px;
	font-weight: bold;
}

#mode-title {
	/*font-weight: bold;*/
	font-size: 18pt;
	margin-top: 10px;
}

#large-mode-icon {
	width:100%;
	height: 365px;
	background-repeat:no-repeat;
	background-position: 112px 50px;
	text-align: center;
	
}
#large-mode-icon.Bus {
		background-image:url(../images/modes/bus-large.png);
}
#large-mode-icon.Car {
		background-image:url(../images/modes/car-large.png);
}
#large-mode-icon.Bike {
		background-image:url(../images/modes/bike-large.png);
}
#large-mode-icon.Walk {
		background-image:url(../images/modes/walk-large.png);
}

.ui-timepicker-wrapper {
	width:150px;
	height:360px;
}

.ui-timepicker-list li {
	font-size: 24px;
	padding: 3px 10px 3px 5px;
}

#useCurrentLocation {
	text-decoration:underline;
	color:blue;
	cursor:pointer;
	margin-right:5px;
}

#directions-button {
	background-image:url(../images/directions-button.png);
	background-repeat:no-repeat;
	width:126px;
	height:36px;
	
	background-color:white;
	border:none;
}

#distance-travelled {
	margin-left:1en;
}

#time, .ui-timepicker-list {
	text-align: right;
}

#datepicker {
	position:relative;
	z-index:100;
}


/*CUSTOM RESULTS PANE*/

.panel-holder {
	overflow:hidden;	
	position:relative;
	width:95%;
	/*height:720px;*//*moved to id*/
	padding:10px;
	border:solid #E6E5D9 medium;
	border-radius: 22px;
}

#directionsPanelHolder {
	height:500px;
}

#scrollup, #scrolldown {
	position:absolute;
	background-image:url(../images/layout/single-arrow-rev.png);
	background-repeat:no-repeat;
	width:40px;
	height:36px;
	right:10px;
	z-index:100;
	cursor:pointer;
	display:none;
	border-radius: 8px;
}
#scrollup {
	top:16px;
	background-position: -3px -16px;
}
#scrolldown {
	bottom:10px;
	background-position: -3px -44px;
}
#scrollup:hover, #scrolldown:hover, #scrollup.disabled, #scrolldown.disabled {
	opacity:.5;
	border:none;
}
#text-email {
	margin-top:20px;
	height:120px;
	background-image:url(../images/layout/text-mail.png);
	background-repeat:no-repeat;
	background-position:115px 10px;
}

#text-email-close {
	background-image:url(../images/layout/x.png);
	position:absolute;
	right:10px;
	top:10px;
	width: 33px;
	height: 33px;
	border-radius: 8px;
	background-position: -4px -3px;
	
}
#text-email-close:hover {
	opacity:.5;
}


.drag {
	position: absolute;
	/*border: 1px solid #89B;
	background: #BCE;
	height: 58px;
	width: 58px;
	cursor: move;
	left: 120px;*/
	
/*prevent dragable objects from being selected*/
 /* -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;*/
  /* Required to make elements draggable in old WebKit 
  -khtml-user-drag: element;
  -webkit-user-drag: element;*/
}

.directions-box {
/*	display:table;*/
	/*max-height: 480px;*/
	overflow-x:visible;
	cursor:move;
}

.directions-box .waypoint {
	display:table-row;
}
.directions-box .result-first-column {
	display:table-cell;
	position:relative;
	width:30px;
	background-image:url(../images/modes/solid-ko.png);
	/*background-image:url(../images/modes/walk-pattern.png);*/
	background-repeat:repeat-y;
	/*background-position:8px;*/
	/*float:left;*/
}
.directions-box #waypoint-last .result-first-column, .directions-box .result-first-column.warning {
	background-image:none;
}
.directions-box .result-first-column img{
	position:relative;
	z-index:2;
	/*top:-3px;*/
}
.directions-box .wayo .result-first-column img{
	top:-4px;
}

.directions-box .result-first-column:before {
	position:absolute;
	content:"";
	z-index:3;
	top:2px;
	left:5px;
	color:black;
}
.directions-box .result-first-column.a:before { content:"A"; }
.directions-box .result-first-column.b:before { content:"B"; }

.directions-box .leg-line {
	content: " ";
	position: absolute;
	left: 8px;
	top: 12px;
	bottom: -12px;
	width:0px;
	/*height:120px;*/
	border-left: solid #ED1C24 6px;		/*car colored by default*/
	z-index:1;
}

.directions-box .result-second-column {
	display:table-cell;
	/*width:420px;	*/
}
.directions-box .result-second-column .selection-box,
.directions-box .result-last-column .selection-box {
	height:95px;
	margin-bottom:6px;
	padding: 6px;
	background-color:#E6E5D9;
}
.directions-box .result-second-column .selection-box.selected,
.directions-box .result-last-column .selection-box.selected {
	border:medium #E6E5D9 solid;
	background-color:#FFF;
}
.directions-box .result-second-column .selection-box.selected {
	border-right-width:0;
}
.directions-box .result-last-column .selection-box.selected {
	border-left-width:0;
	border-right-width:0;
}

.directions-box .result-last-column .selection-box.selected,
.directions-box .result-last-column .selection-box {
	background-image:url(../images/layout/arrow-r.png);
	background-repeat:no-repeat;
	background-position:center;
}
.directions-box .result-last-column .selection-box.selected{
	background-image:url(../images/layout/arrow-l.png);
	position:relative;
}
.directions-box .result-last-column .selection-box.selected:after{
	content:url(../images/layout/ko.png);
	position:absolute;
	top:0;
	right:-6px;
	z-index:2000;
}

.directions-box .time {
	font-weight:bold;
}
.directions-box .line-2, .directions-box .step-detail {
	font-size:10pt;
	color:#A7A9AB;
	/* height: 24px; */
}
.directions-box .line-3 {
	padding-bottom:8px;
}
.directions-box .line-4 {
	padding-top:4px;
	padding-bottom:8px;
	font-size:16px;
	
	height: auto;
	overflow: hidden;
	transition: height 2s;
	-webkit-transition: height 2s;
	clear:both;
}
.directions-box .line-4.compress {
	max-height: 0px;
/*	padding-bottom: 0;*/
	/* height: auto; */
}


.directions-box .result-last-column {
	display:table-cell;
	width:30px;
}

.directions-box .direction-step {
	margin-top:10px;
	float: left;
	width: 80%;
}

.directions-box .vehicle {
	float:left;
	width:46px;
	min-height: 37px;
}

.directions-box .vehicle img {
	float:left;
	width:40px;
	margin-top: -2px;
}
.directions-box .vehicle .route-no {
	/*float:left;*/
	width:26px;
	height:26px;
	border:thin red solid;
	border-radius:50%;
	text-align:center;
	position:relative;
	left:5px;
	padding:6px;
	background-color:white;
}



.directions-box .copywrite {
	font-size:14px;
	/*color:#A7A9AB;*/
}
.directions-box .copywrite p {
	margin:0px;
}

.directions-box .location {
	font-weight: bold;
}

.results-turn-by-turn {
	position: absolute;
	left: 526px;
	border:medium #E6E5D9 solid;
	width:465px;
	padding:20px 20px 20px 0;
	min-height:440px;
	/*border-left-width:0;*/
}

.results-turn-by-turn .row {

}
.results-turn-by-turn .result-first-column {
	display:table-cell;
	position:relative;
	width:50px;
	padding-left:30px;
}

.directions-box .waypoint.WALKING div.leg-line, .directions-box .waypoint.BICYCLING div.leg-line {
	border:none;
}
.directions-box .waypoint.BICYCLING .result-first-column {
	background-image:url(../images/modes/bike-pattern.png);
}

#crop-mode-icon {
	overflow:hidden;
	height:50px;
	background-position-x: -7px;
}
.results-turn-by-turn .result-second-column {
	display:table-cell;
	position:relative;
	width:400px;
	vertical-align: middle;
}
.result-second-column .warning {
background-color: #dbccab;
width: 95%;
position: relative;
z-index: 1;
padding: 5px;
margin: 5px 0;
}
.maneuvers{
	width:30px;
	height:30px;
	background-image:url(../images/maneuvers-2x.png);
	margin-left: 8px;
	position: relative;
	top: 9px;
}
.maneuver-first-column , .maneuver-second-column {
	display:table-cell;
	/* vertical-align: top; */
}
.maneuver-first-column {
	width:60px;
}
.vehicle {
	padding-left:40px;
	background-repeat:no-repeat;
	background-position:-10px -9px;
}
.vehicle.WALKING {
	background-image:url(../images/modes/walk-regular.png);
}
.vehicle.DRIVING {
	background-image:url(../images/modes/car-regular.png);
}
.vehicle.TRANSIT {
	background-image:url(../images/modes/bus-regular.png);
	
}
.vehicle.BICYCLING {
	background-image:url(../images/modes/bike-regular.png);
	background-position:-5px -8px;
}

.m- {background-image:none}
.m-turn-sharp-left{ background-position-y:0px; }
.m-uturn-right{ background-position-y:-70px; }
.m-turn-slight-right{ background-position-y:-104px; }
.m-merge{ background-position-y:-285px; }
.m-roundabout-left{ background-position-y:-392px; }
.m-roundabout-right{ background-position-y:-462px; }
.m-uturn-left{ background-position-y:-609px; }
.m-turn-slight-left{ background-position-y:-756px; }
.m-turn-left{ background-position-y:-828px; }
.m-ramp-right{ background-position-y:-860px; }
.m-turn-right{ background-position-y:-968px; }
.m-fork-right{ background-position-y:-998px; }
.m-straight{ background-position-y:-1068px; }
.m-fork-left{ background-position-y:-1099px; }
.m-ferry-train{ background-position-y:-1132px; }
.m-turn-sharp-right{ background-position-y:-1165px; }
.m-ramp-left{ background-position-y:-1197px; }
.m-ferry{ background-position-y:-1230px; }
/*.results-turn-by-turn .tbyt-title {
	font-size:18px;
}*/

#text-emailKO {
	position: absolute;
    top: 0%;
    left: 0%;
    margin-top: -0px;
    margin-left: -0px;
    width: 100%;
    height: 100%;
    background-color: black;
	opacity:.5;
	z-index:1001;
	transition:ease-in;
	display:none;
}

#text-emailBox {
	position: absolute;
    top: 50%;
    left: 32%;
    margin-top: -50px;
    margin-left: -50px;
    width: 460px;
    /*height: 100px;*/
	border-radius:20px;
	padding:20px;
    background-color: white;
	z-index:1002;
	display:none;
}

#input-smse {
	width:78%;
	padding:0 10px;
}
#text-email-response {
	display:none;
}

.error {
	background-color: #F35048;
	padding: 4px;
	margin: 0 4px 0 0;
	display:none;
}

/*CHANGES TO DEFAULT MAP DISPLAY*/
/*change display of hyperlinks within map window */
#map-canvas .gm-style-iw a, #map-canvas a img {
	pointer-events: none;
	text-decoration:none;
	cursor:default;
	}
	
#map-canvas a img {
	/*cursor:url(../https://maps.gstatic.com/mapfiles/openhand_8_8.cur);*/
}

/*hide ratings, photos (and related links) in POI infowindows*/
#map-canvas .gm-rev, #map-canvas .gm-photos {		
	display:none;
}

#chk_keyboard { position: absolute; bottom: 300px; left:70px; opacity: 0.9; border:3px solid gray; border-radius: 20px; background: white; }
#chk_keyboard div {position: absolute; border-radius:10px; text-align: center; background: gray; color: black;}
#chk_keyboard div span { border: none; position:relative; top: 8px; font-size: 30px}

.pac-item-query {font-size:22px !important; padding-right: 10px }
.pac-item {text-align:left; line-height: 40px !important; font-size:18px !important;}
.pac-item:nth-child(odd) { background: #F7F7F7 }
.pac-container {width:1000px !important }

#startpoint, #endpoint { user-select: none; -ms-user-select:none }

#ACpopupDiv { z-index: 1500; display: none; position:absolute; font-size: 22px; line-height: 40px; white-space: nowrap; background: white; width:1000px; overflow: hidden; font-family: Ariel, sans-serif; border: 1px solid #AAA }

#ACpopupDiv div { width: 97%; padding: 2px 1.5%; border-bottom: 1px solid #CCC; }
#ACpopupDiv div:nth-child(2n+1) { background: #EEE; }
#ACpopupDiv .ACgoog { text-align: right; position:absolute; bottom: 0; right: 0; width: 100px; opacity: 0.7 }

.ACpopupTyped { font-weight: bold; }
.ACpopupSmall { font-size: 18px; color: rgb(153,153,153);}


/**
 * For chk_timepicker.js
 */
#chktimepick { border: 2px solid black; background: black; position: relative; overflow: hidden; height: 300px; width: 200px; }
#chktimepick .scroller {height: 100%; width: 100%; overflow: hidden; }
#chktimepick .scroller div div { padding: 10px; color: black; }
#chktimepick .scroller div div:nth-child(2n) { background: #DDD; }
#chktimepick .scroller div div:nth-child(2n+1) { background: #FFF; }

#chktimepick .scrollup, #chktimepick .scrolldown {
	position:absolute;
	background-image:url(../images/layout/single-arrow-rev.png);
	background-repeat:no-repeat;
	width:40px;
	height:36px;
	right:10px;
	z-index:100;
	cursor:pointer;
/*	display:none;*/
	border-radius: 8px;
}
#chktimepick .scrollup {
	top:16px;
	background-position: -3px -16px;
}
#chktimepick .scrolldown {
	bottom:10px;
	background-position: -3px -44px;
}
#chktimepick .scrollup:hover, #chktimepick .scrolldown:hover, #chktimepick .scrollup.disabled, #chktimepick .scrolldown.disabled {
	opacity:.5;
	border:none;
}



/*
 * End chk_timepicker.js reqs
 **/

/*for testing*/

#colorscheme {
    position: absolute;
    top: 900px;
    left:380px;
    background: white;
    z-index: 999;
    padding:20px;
    border:2px solid black;
    display: none;
    
}