@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%;}
}