/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-map-pane svg,
.leaflet-map-pane canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg,
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer {
	max-width: none !important;
	}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	}
.leaflet-container.leaflet-touch-drag.leaflet-touch-drag {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(routing/leaflet.css#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-tile {
	will-change: opacity;
	}
.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	     -o-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	will-change: transform;
	}
.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	     -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	     -o-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline: 0;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-container a.leaflet-active {
	outline: 2px solid orange;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a,
.leaflet-bar a:hover {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}


/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}
.leaflet-control-zoom-out {
	font-size: 20px;
	}

.leaflet-touch .leaflet-control-zoom-in {
	font-size: 22px;
	}
.leaflet-touch .leaflet-control-zoom-out {
	font-size: 24px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(routing/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(routing/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.7);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover {
	text-decoration: underline;
	}
.leaflet-container .leaflet-control-attribution,
.leaflet-container .leaflet-control-scale {
	font-size: 11px;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;

	background: #fff;
	background: rgba(255, 255, 255, 0.5);
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 19px;
	line-height: 1.4;
	}
.leaflet-popup-content p {
	margin: 18px 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4px 4px 0 0;
	border: none;
	text-align: center;
	width: 18px;
	height: 14px;
	font: 16px/14px Tahoma, Verdana, sans-serif;
	color: #c3c3c3;
	text-decoration: none;
	font-weight: bold;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover {
	color: #999;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}
.leaflet-oldie .leaflet-popup-tip-container {
	margin-top: -1px;
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-clickable {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}
@charset "UTF-8";
body {margin: 0}

p {color: #3D4142; font-size: 12px; margin-bottom: 7px;}

#container {
width: 100%;
height:100vh  ;
/* background-color: #506580;*/
position: fixed;
}

#head {
position: fixed;
top:0;
width: 100%;
height:100px;
margin-top: 50px;

border-top: 1px solid #E40613;
border-bottom: 1px solid #AAD3DF;

background:url(header-bg.jpg) no-repeat;
background-size:cover;
background-position:center top;

border-bottom-width: solid #AAD3DF 7px;

}

#form {
width: 80%;
margin: auto;
padding-top: 0px;
}

#xform {float: left; margin: auto; width: 420px; display: block;}

.input {
width: 400px;
height: 30px;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
border: 1px solid #1196b0;
margin: 6px;
padding: 2px 5px 2px 5px;


}

.input:hover {
-webkit-box-shadow: 2px 2px 3px 0px rgba(12,120,242,1);
-moz-box-shadow: 2px 2px 3px 0px rgba(12,120,242,1);
box-shadow: 2px 2px 3px 0px rgba(12,120,242,1);
}

#corps {
width: 80%;

height:100%;

background-color: #AAD3DF;
margin: auto;

margin-top: 50px;

border: 7px solid #AAD3DF;
}

#left, #xx_left {
width: 68%; 
height:100%; height: calc(100% - 15px);
background-color: #AAD3DF;
float: left;
}

#right h1 {margin-left:5px; padding-top: 10px; font-size: 13px; color: #1F9DB4}

#right {
width: 32%; 
height:100%; height: calc(100% - 214px);  
margin-top:100px;
margin-left: -2px;
background-color: #E0DFDF;

position:relative;
	overflow-y:scroll;
}

#footer {
position: fixed;
bottom: 0;
width: 100%;
height:50px;

border-top: 1px solid #AAD3DF;
background-color: #104D62;  

}


.map {height: calc(100% - 202px); width: calc(100% - 5px); margin-top:100px;  background-color: #AAD3DF;     border: 1px solid #434748; }

.gps {font-size: 14px; font-style: bold; border: 2px solid #3B8CD2;  width: 100%; }

.gps td, th {
border: thin solid #6495ed;
width: 50%; padding:10px; 
}

.gps td:nth-child(2n), th {color: #3B8CD2;}
.gps tr:nth-child(n)   { background: #ACE5F0; }
.gps tr:nth-child(2n) { background: #E7C9B9; font-style: bolder;}


.tbox {border: 1px solid #32B3C9; width: 30%;}
.tbox td {border: 1px solid #32B3C9;}
.tbox th {background-color: grey; color: white;}
.tbox tr {text-align: center;}
.tbox tr:nth-child(2n+1) {background-color:#ede8e8;}
.tbox tr:nth-child(2n) {background-color:#e0f5f9;}




#instructions, #ctx, #routing-response, .box {
	max-height: 70%;
	background-color: white;
	margin:10px;
	padding: 10px;
	overflow: auto;

    border: 1px solid #32B3C9;

}


.center
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  border-radius: 5px;
}

#car  {color: #2973AB; font-style: bold; font-size: 30px; margin: 5px}
#time {color: #DD171B; font-style: bold; font-size: 30px; margin: 5px}
#bird {color: #7CB900; font-style: bold; font-size: 30px; margin: 5px}

#car:before  {content:url('/img/car_0.png'); margin:5px;}
#time:before {content: url('/img/time_0.png'); margin:5px;}
#bird:before  {content:url('/img/eagle_0.png'); margin:5px;}

#routing-bird, #routing-car, #routing-time {

  background-color: white;
  margin:10px;
  padding: 10px;
  border: 1px solid #32B3C9;
  width: 200px;
  float: left;
  text-align: center;
  vertical-align: middle;
}
.box ul li {text-transform : capitalize; width:50%; line-height: 1.5;color:#0c69ac; font-family: sans-serif,Serif,Tahoma,Verdana,Arial,Helvitica; font-size: 12px; float:left;}

.box span {color:#E40613; font-size: 11px; margin-left: 5px;}
.box ul li span:nth-child(2n+1) {color:#8AC17E;}
.box ul li span:nth-child(2n) {color:#DD171B;}


.wbox {

    background-color: white;
    margin: 10px;
    padding: 10px;
    border: 1px solid #32B3C9;
}

.box:hover, .wbox:hover {
box-shadow: 0px 0px 5px 1px rgba(119, 119, 119, 0.65);
-moz-box-shadow: 0px 0px 5px 1px rgba(119, 119, 119, 0.65);
-webkit-box-shadow: 0px 0px 5px 1px rgba(119, 119, 119, 0.65);
}

.xleft {float:right; vertical-align: center;}

.btn {background-color: #008B92; color: white; height: 80px; float: left; margin: 10px;}

#home {height: 100px; float:left; margin-top:0px;}

.htl_box {
float:left; border: solid 1px; border-color:grey; margin:5px; padding:2px; width:100px; height:70px;
box-shadow: 0px 0px 5px 1px rgba(119, 119, 119, 0.65);
-moz-box-shadow: 0px 0px 5px 1px rgba(119, 119, 119, 0.65);
-webkit-box-shadow: 0px 0px 5px 1px rgba(119, 119, 119, 0.65);
        }

.htl_box:hover {
box-shadow: 0px 0px 5px 1px rgba(19, 7, 244, 0.65);
-moz-box-shadow: 0px 0px 5px 1px rgba(19, 7, 244, 0.65);
-webkit-box-shadow: 0px 0px 5px 1px rgba(19, 7, 244, 0.65);
}

.flag img {max-width: 99%}



@media (max-width: 767px) {

#home_ico {height: 85px; float:left; margin-top:0px;}
#home {height: 85px; float:left; margin-top:0px;}

#xform {width: 72%; }
.input {width: 100%; margin: 3px;}

.btn {height: 40px; margin: 6px; width: 96%; clear: both; font-size: 20px;}


#container {height:auto; position: relative;}

#head {height:190px; position: relative; margin-top: 0;}

#form {
width: 100%;
height: auto;
padding-top: 0px;
}

#corps {
width: 100%;
height:auto;
border-width: 0px;
margin-top: 0		;
}

#footer {position: relative; height:0px;}

#left {width: 100%; height:300px; float: none;}

#xx_left {width: 100%; height:auto; float: none;}

#right {
width: 100%;
height:auto;
float: none;
margin:auto;
  border-top: 2px solid #32B3C9;
}

.map {margin-top:0px; height: 100%; width: 100%; border: none;}


#instructions, #ctx, #routing-response, .box {
  height: auto;
}

.box ul li {width:auto; float:none; line-height: 3; font-size: 13px; }
.box span a, div.dist {display: inline-block; height:16px; width: 60px;  padding: 3px; font-size: 12px;}


#routing-bird, #routing-car, #routing-time {
  width: 29%;
  height: 30px;
  margin:3px;
  padding: 3px;
  text-align: center;

  padding-top: 10px;


}

#car  {color: #2973AB; font-style: bold; font-size: 16px; margin: 3px;}
#time {color: #DD171B; font-style: bold; font-size: 16px; margin: 3px;}
#bird {color: #7CB900; font-style: bold; font-size: 16px; margin: 3px;}

#car:before  {content:url('/img/car_mini.png'); margin:3px;}
#time:before {content: url('/img/time_mini.png'); margin:3px;}
#bird:before  {content:url('/img/eagle_mini.png'); margin:3px;}

.tbox {width: 95%;}
}
@charset "UTF-8";
/* reseting this style for optimal view using Eric Meyer's CSS Reset - http://meyerweb.com/eric/tools/css/reset/
------------------------------------------------------------------ */
body, html  { height: 100%; }
html, body, div, span, applet, object, iframe,
/*h1, h2, h3, h4, h5, h6,*/ p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
del { text-decoration: line-through; }
table {border-spacing: 0; } /* IMPORTANT, I REMOVED border-collapse: collapse; FROM THIS LINE IN ORDER TO MAKE THE OUTER BORDER RADIUS WORK */

/*------------------------------------------------------------------ */
html {height: 100%}
body {
  font-family: Roboto Light,Arial,sans-serif;
  font-weight: 300;
  color: #2C2C2C;
  font-size:13px;
  /* background-color: #F3F3F3; */
  background: url(/img/city.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#sec01 {width:80%; height: 100%; left:0;}

/* #head {background-color:grey; width:80%;height:80px; position: fixed; top: 0px; left: 0px; z-index: 2000; } */
/* #routing-map {background-color:#F3F3F3; width:700px height:700px;}  */

#box { 
  position: fixed;
  top: 10px;
  right: 10px;
  border-width:1px; border-style:solid; border-color:#f0f0f0;
  background-color: pink;
  z-index: 2000; 
  height:100%;
  width:20%;
}  

a:link {text-decoration:none; color: #3B8CD2;} 
/* a:hover {color: yellow; background-color: grey; } */
h2 {color: #3B8CD2; font-size:14px;}

ol span {
background-size: 22px 24px;
background-repeat: no-repeat;
margin: 2px;
content: '';
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
}

ol li {border-bottom: 1px solid #8BD8E8;}
ol li:hover {background-color:#9DDFEB;}

.xleft {float:right; vertical-align: middle; margin-top: 6px; color: #fff; background-color: #008b92; width: 60px; padding: 5px; text-align: center;
-moz-border-radius:10px 0;
-webkit-border-radius:10px 0;
border-radius:10px 0;
}
.km {color: #7CB900;}

.time {color: #fff; font-size: 9px; background-color: #808182; min-width: 70px; padding: 2px 5px 2px 5px; text-align: center;
-moz-border-radius:5px 0;
-webkit-border-radius:5px 0;
border-radius:5px 0;
}

li span a:link  {text-decoration:none; color: #fff;} 
.dist:hover {background-color: red;}
li span a, .dist {color: #fff;  background-color: #0068C9; width: 50px; text-align: center; float: right; line-height: 1.6; margin: 3px; vertical-align: middle; font-size: 10px; 
-moz-border-radius:5px 0;
-webkit-border-radius:5px 0;
border-radius:2px 2px;
}

.inst {color: #3E4243; width: 70%; display:inline-block; margin: auto;}


.icon-KeepLeft     {background-image: url('/routing/img/keep_left.png');}
.icon-SharpLeft    {background-image: url('/routing/img/sharp_left.png');}
.icon-Left         {background-image: url('/routing/img/left.png');}
.icon-SlightLeft   {background-image: url('/routing/img/slight_left.png');}
.icon-SlightRight  {background-image: url('/routing/img/slight_right.png');}
.icon-Right        {background-image: url('/routing/img/right.png');}
.icon-SharpRight   {background-image: url('/routing/img/sharp_right.png');}
.icon-DestinationReached    {background-image: url('/routing/img/marker-icon-red.png');}
/* .icon-WaypointReached       {background-image: url('/routing/img/**.png');} */
.icon-Roundabout            {background-image: url('/routing/img/roundabout.png');}
.icon-KeepRight             {background-image: url('/routing/img/keep_right.png');}

.x_hotel {margin:auto;}
.x_hotel h2 {font-size:14px; text-transform:uppercase;}
.x_hotel th {background-color:#AEBFCF; color: white;}
.x_hotel td, .x_hotel th {padding:10px; margin:10px; width:50%; line-height:1.5;}
.x_hotel tr:nth-child(2n+1) {background-color:#f0f0f0;}

  .class0:before {content:url('img/star0_20.png'); vertical-align:-5px;}
  .class1:before {content:url('img/star1_20.png'); vertical-align:-5px;}
  .class2:before {content:url('img/star2_20.png'); vertical-align:-5px;}
  .class3:before {content:url('img/star3_20.png'); vertical-align:-5px;}
  .class4:before {content:url('img/star4_20.png'); vertical-align:-5px;}
  .class5:before {content:url('img/star5_20.png'); vertical-align:-5px;}
  .class6:before {content:url('img/star6_20.png'); vertical-align:-5px;}
  .class7:before {content:url('img/star7_20.png'); vertical-align:-5px;}
  .class8:before {content:url('img/star8_20.png'); vertical-align:-5px;}
  .class9:before {content:url('img/star9_20.png'); vertical-align:-5px;}

  .not_classed {vertical-align:top; color:#222222;font-style: italic; margin-top:5px;}
  .x_hotel h2:before {content:url('img/hotel2.png'); margin:0; padding:0; vertical-align:-5px; margin-right:5px;}
  .hotel_button {background-color:#146078; padding:4px; text-align:center; color:yellow; font-weight:bold; width:60%; margin:auto;}

  @media (max-width: 767px) {

.x_hotel table {width:100%; margin:5px;} 
.x_hotel td {padding:5px; margin:0px;} 


.inst {width: 50%; line-height: 1}

li span a, .dist {line-height: 1.2;}

.htl {
float:left; border: solid 1px; border-color:grey; margin:5px; padding:2px; width:100px; height:70px;
-moz-box-shadow: 1px 1px 2px 0px #3531ff;
-webkit-box-shadow: 1px 1px 2px 0px #3531ff;
-o-box-shadow: 1px 1px 2px 0px #3531ff;
box-shadow: 1px 1px 2px 0px #3531ff;
        }
}