/*general*/
body,html{
padding:0px;
margin: 0px;
font-family: "Open Sans",sans-serif,tahoma,"Trebuchet Ms",Arial, helvetica ;
font-size: 1em;
color:#6e6c67;
}
*{
margin:0px;
padding:0px;
}
a,a:visited,a:link{
color:#DA700F;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-decoration:none;
}
a:hover{
color:#1351A2;
text-decoration:underline;
}
h1,h2,h3{
color:#000;
font-size:1.5em;
font-weight: normal;
}
h4,h5{
font-size:1.2em;
font-weight: normal;
}
.content{
width:100%;
max-width:970px;
margin:0 auto;
}
.warningcolor{
color:red;
font-weight:bold;
font-style: normal;
}
div.row{
float:left;
width:100%;
}
div.row div.c4{
width:25%;
float:left;
}
div.row div.c3{
width:33%;
float:left;
}
.pl20{
padding-left:20px;
}
.pl5{
padding-left:5px;
}
.pl10{
padding-left:10px;
}
.pl15{
padding-left:15px;
}
.pr5{
padding-right:5px;
}
.pr10{
padding-right:10px;
}
.pr15{
padding-right:15px;
}
.pr20{
padding-right:20px;
}
.pr25{
padding-right:25px;
}
.pr30{
padding-right:30px;
}
#bajo{
float:left;
width:100%;
padding-top:15px;
padding-bottom:15px;
background-color: #d8d4ca;
font-size:0.8em;
color:#6e6c67;
}
#bajo div#legal{
float:right;
width:33%;
text-align: right;
}
#bajo div#legal p{
font-size:0.7em;
}
#bajo a{
color:#416d9d;
}
#bajo div#paises{
float:left;
width:50%;
}
#bajo div#paises ul{
margin-top:10px;
list-style: none;
}
#bajo div#paises ul li{
float:left;
width:33%;
}
#bajo div#paises ul li img{
vertical-align: middle;
margin-right:5px;
}
/*fin general*/
/*busquedas*/
div.liscene1{
margin-bottom:10px;
padding-bottom:10px;
border-bottom: 1px solid #cfcbbf;
}
div.liscene1 a{
font-weight: bold;
display:block;
background-image:url('../images/pivot.png');
background-repeat: no-repeat;
background-position: 0px 0px;
padding-left:25px;
}
/*div.liscene1 a b{
color:#1351A2;
}
fin busquedas*/
/* index */
#contenido{
position:absolute;
z-index: 3;
top:0px;
left:0px;
width:100%;
height:100%;
}
#fondoindex{
background-color: #02212d;
display:none;
z-index:1;
position:fixed;
width:100%;
min-height:550px;
margin:0 auto;
background-position: 50% 0px;
background-repeat: no-repeat;
}
#overlay{
display:none;
z-index:2;
background-image:url('../images/overlay.png');
position:fixed;
width:100%;
height:500px;
top:0px;
left:0px;
}
#mainindex{
margin-left:auto;
margin-right:auto;
margin-top:15px;
margin-bottom:15px;
width:700px;
}
#mainindex img#logo{
position:absolute;
z-index: 2;
width:500px;
margin-left:100px;
}
#mainindex img#flag{
position:absolute;
z-index: 1;
margin-top:0px;
margin-left:40px;
margin-bottom:0px;
width:100px;
}
#mainindex form{
width:700px;
padding-top:90px;
display:block;
text-align: center;
}
#mainindex form input[type=text], #cabecera div#form form input[type=text]{
background-image:url('../images/pivot.png');
background-repeat: no-repeat;
background-position: 5px 8px;
width:180px;
padding:7px 30px;
font-size:1.1em;
background-color: #FFFFFF;
border: 2px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#mainindex form div label, #cabecera div#form form div label{
color:#fff;
text-shadow: 1px 1px 5px #000;
margin-right:10px;
}
#mainindex form div input[type=checkbox], #cabecera div#form form div input[type=checkbox]{
margin-right:3px;
padding:3px;
}
.fondo1{
width:100%;
float:left;
margin-top:0px;
background-color: #fff;
min-height: 500px;
padding-top:0px;
}
#map-canvas{
border-top:1px solid #0c6385;
width:100%;
height:250px;
margin-bottom:15px;
-moz-transition:height 0.51s linear;
transition:height 0.51s linear;
overflow: hidden
}
#mapa{
width:100%;
height:250px;
}
#informacion-distancia{
margin-top:30px;
margin-bottom:30px;
text-align: center;
text-shadow: 1px 1px #333;
font-size:1.2em;
color:#fff;
width:100%;
margin-left:auto;
margin-right:auto;
}
#informacion-distancia h1{
color:#fff;
font-size:1.5em;
text-shadow: 2px 2px #333;
margin-bottom:10px;
}
#informacion-distancia h2{
color:#fff;
text-shadow: 1px 1px #333;
margin-bottom:5px;
}
#indexpresentacion{
margin-top: 15px;
}
#indexpresentacion span.icon{
/*text-shadow: 1px 1px #efefef;
background-color: #e3e3e3;
color:#0c6385;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 50%;*/
margin-right:15px;
float:left;
color:#55534e;
font-size:2.5em;
height:150px;
padding-top:10px;
}
#indexpresentacion h2,#indexpresentacion h3,#indexpresentacion h4,#indexpresentacion h5{
color:#232323;
/*text-shadow: 1px 1px #333;*/
margin-bottom:5px;
text-rendering: optimizelegibility;
font-size:1.1em;
font-weight: normal
}
video {
background-attachment: fixed;
bottom: 0;
height: auto;
max-width: inherit;
min-height: 100%;
min-width: 100%;
position: absolute;
right: 0;
vertical-align: top;
width: auto;
z-index: 0;
}
/*columnas index*/
#indexpresentacion div div p{
font-size:0.8em;
color:#55534e;
}
div.ruta{
text-align: left;
}
div.cabeceraruta{
font-weight: bold;
padding:5px;
}
div.cabeceraruta span{
margin-right:5px;
}
div.cabeceraruta span h4{
display:inline;
}
.pivot{
background-image:url('../images/pivot.png');
background-repeat: no-repeat;
background-position: 5px 5px;
padding:5px 5px 5px 30px;
}
ol.listaruta{
padding-left: 15px;
margin-left:10px;
}
ol.listaruta li{
padding-top:10px;
padding-bottom:10px;
border-bottom:1px solid #dddddd;
width:100%;
}
ol.listaruta li span{
float:right;
margin-left:5px;
font-weight: bold;
}
div.finuta{
margin-bottom:20px;
}
div#indexseccion2{
margin-top:15px;
float:left;
width:100%;
}
div#indexseccion2 ul{
list-style: none;
width:100%;
float:left;
border:1px solid red;
display:block;
}
div#indexseccion2 h4{
font-weight: normal;
color:#55534e;
}
div#indexseccion2 ul li{
float:left;
width:50px;
}
div#indexseccion2 ul li ul {
margin-top:15px;
}
div#indexseccion2 ul li ul li p{
line-height: 32px;
}
div#indexseccion2 ul li ul li{
float:left;
width:100%;
margin-bottom: 10px;
color:#6e6c67;
border-bottom:1px solid #cfcfcf;
padding-bottom:10px;
}
div#indexseccion2 ul li ul li span{
color:#878787;
margin-top:5px;
float:left;
margin-right:10px;
}
div#indexseccion2 ul li ul li span.disbledcolor{
color:#c5525e
}
div#indexseccion2 ul li ul li a{
font-size:1.1em;
}
div#indexseccion2 ul li ul li img.mapa{
width:100px;
height:100px;
float:left;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
div#indexseccion2 ul li ul li div{
float:left;
width:33%;
margin-right:15px;
padding-right:15px;
border-right:1px solid #cfcfcf;
}
div#indexseccion2 ul li ul li div span.destacado1{
color:#115387;
font-size: 1.5em;
font-weight: 400;
line-height: auto;
}
div#indexseccion2 ul li ul li div span.destacado2{
color:#115387;
font-size: 1em;
}
div#indexseccion2 ul li ul li div span.icon{
font-size:1.5em;
margin-top:5px;
}
/*listado de rutas*/
div#listadorutas{
float:left;
width:50%;
}
div#listadorutas h3{
margin-bottom:15px;
font-weight: normal;
color:#232323;
font-size:1.2em;
text-rendering: optimizelegibility;
}
div#listadorutas ul{
list-style: none;
width:100%;
float:left;
display:block;
}
div#listadorutas ul li{
cursor: pointer;
float:left;
width:95%;
margin-bottom: 15px;
color:#6e6c67;
padding-bottom:15px;
font-size:0.9em;
}
div#listadorutas ul li a{
margin-top:10px;
display:block;
color:#6e6c67;
font-size: 0.7em;
width:95%;
float:left;
border-bottom:1px solid #5181ad;
}
div#listadorutas ul li span.cabeeraruta
{
display:block;
background-color: #5181ad;
color:white;
padding:2px;
/*-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;*/
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
div#listadorutas ul li a b{
color:#DA700F;
}
div#listadorutas ul li p{
padding-right:15px;
}
div#listadorutas ul li div{
float:left;
width:33%;
}
div#listadorutas ul li div.segundalinea{
width:50%;
margin-top:10px;
}
div#listadorutas ul li div p{
margin-right:5px;
padding-right:5px;
border-right:1px solid #cfcfcf;
font-size: 0.8em
}
div#listadorutas ul li div p span{
}
div#listadorutas ul li div p span.destacado1{
color:#115387;
font-size: 1.8em;
font-weight: 400;
line-height: auto;
}
div#listadorutas ul li div p span.destacado1{
color:#115387;
font-size: 1.8em;
font-weight: 400;
line-height: auto;
}
div#listadorutas ul li div p span.tiempo{
color:#115387;
font-size: 1.8em;
line-height: 30px
}
div#listadorutas ul li div p span.icon{
font-size:1.5em;
margin-top:5px;
margin-right:5px;
}
div#listadorutas ul li div p img.fondo{
position:absolute;
z-index:-1;
opacity: 0.5;
width:100%;
}
div#listadorutas ul li div.segundalinea p span.icon{
margin-top:0px;
display:block;
float:left;
}
div#listadorutas ul li div.segundalinea p span.icon img{
position:absolute;
margin-left:-18px;
margin-top:1px;
}
div#listadorutas ul li div.segundalinea p.sb,div#listadorutas ul li div p.sb{
border:none;
}
div#listadorutas2 div{
float:left;
width:33%;
}
div#listadorutas2 div img{
width:100%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 29%, rgba(0, 0, 0, 0.01) 30%, rgba(0, 0, 0, 0.01) 33%, rgba(0, 0, 0, 0.17) 62%, rgba(0, 0, 0, 0.24) 68%, rgba(0, 0, 0, 0.62) 90%, rgba(0, 0, 0, 0.73) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
div#imgcerrar{
position:absolute;
z-index:3;
margin-top:-60px;
margin-left:-20px;
display:none;
cursor:pointer;
}
/*fin listado de rutas */
/*fin index*/
/*ruta*/
#cabecera{
padding-top:15px;
padding-bottom:15px;
background-color: #82c0e3;
margin-bottom:10px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #82C0E3 0%, #0099E3 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #82C0E3 0%, #0099E3 100%);
/* Opera */
background-image: -o-linear-gradient(top, #82C0E3 0%, #0099E3 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #82C0E3), color-stop(1, #0099E3));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #82C0E3 0%, #0099E3 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #82C0E3 0%, #0099E3 100%);
}
#cabecera div#form{
float:right;
}
#ruta{
float:left;
width:100%;
margin-top:10px;
padding-top:10px;
/*border-top:3px solid #82c0e3;*/
margin-bottom:15px;
}
#instrucciones{
float:right;
width:336px;
padding:5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size:0.8em;
}
#instrucciones img#pasoapaso{
position:absolute;
margin-left:300px;
margin-top:-10px;
opacity:0.7;
}
#instrucciones ol{
float:left;
}
#instrucciones li{
cursor:pointer;
float:left;
}
#instrucciones div.finuta{
float:left;
}
#rutatexto{
float:left;
width:610px;
font-size: 0.8em
}
#rutatexto h2, h2.cabecera-principal-ruta{
margin-bottom:10px;
font-size: 1.3em
}
#rutatexto p#descripcionruta{
float:left;
}
#tablaruta,#marcomapadatosruta{
float:left;
width:100%;
margin-bottom:15px;
}
#tablaruta div ,#marcomapadatosruta div{
float:left;
}
#tablaruta div div, #marcomapadatosruta div div{
float:none;
margin-right:10px;
padding-right: 10px;
border-right:1px solid #cfcfcf;
font-size:1.8em;
color:#115387;
}
#tablaruta div div span,#marcomapadatosruta div div span{
margin-right: 5px;
-moz-transition: 0.31s;
transition: 0.31s;
float:left;
margin-top:5px;
}
#tablaruta div:hover div span, #marcomapadatosruta div:hover div span{
margin-right: 15px;
color:#fd8b10;
font-weight:bolder;
/*font-size:1.5em;
margin-top:0px;*/
margin-right: 0px;
}
#tablaruta div div p,#marcomapadatosruta div div p{
font-size:0.5em;
color:#6e6c67;
}
#tablaruta div.c25,#marcomapadatosruta div.c25{
width:25%;
}
#tablaruta div.c33,#marcomapadatosruta div.c33{
width:33%;
}
#tablaruta div.c20,#marcomapadatosruta div.c20{
width:20%;
}
#marcomapa{
width:100%;
max-width: 610px;
margin-top:25px;
}
#mapa-ruta{
float:left;
width:100%;
height:280px;
background-color: #f3f3f3;
}
#mapaestatico{display:none;}
#menumapas{
float:left;
width:100%;
}
#menumapas a{
display:block;
float:left;
background-color: #f3f3f3;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
padding-left:10px;
padding-right:10px;
padding-top:3px;
padding-bottom:3px;
margin-right:5px;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#menumapas a:hover{
background-color: #e7e6e8;
padding-left:20px;
padding-right:20px;
}
#marcomapadatosruta{
margin-top:15px;
display:none;
}
div.compartir{
margin-top:5px;
float:left;
}
div.compartir img{
vertical-align: middle;
cursor:pointer;
opacity: 0.7;
filter: alpha(opacity=50); /* For IE8 and earlier */
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
div.compartir img:hover{
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
div#consumo-carburante{
float:left;
width:100%;
margin-top:15px;
}
div#consumo-carburante h4{
font-size: 1.5em;
float:left;
width:100%;
margin-bottom: 10px;
}
div#consumo-carburante h4 span,div#rutasalternativas h4 span{
font-size:1.5em;
display:block;
float:left;
}
#consumo-carburante ul{
list-style: none;
}
#consumo-carburante ul li{
float:left;
width:33%;
margin-bottom:10px;
}
#consumo-carburante ul li b{
display:block;
color:#115387;
}
#consumo-carburante ul li span{
display: block;
float:left;
background: url("../images/vehiculos.png") no-repeat 0px 12px;
width:45px;
margin-right:5px;
height:40px;
}
#consumo-carburante ul li.vehiculo2 span{
background-position: -48px 12px
}
#consumo-carburante ul li.vehiculo3 span{
background-position: -96px 12px
}
#consumo-carburante ul li.vehiculo4 span{
background-position: -144px 12px
}
#consumo-carburante ul li.vehiculo5 span{
background-position: -195px 12px
}
#consumo-carburante ul li.vehiculo6 span{
background-position: -310px 12px
}
#consumo-carburante input[type=text]{
width:50px;
padding:7px;
font-size:1.1em;
background-color: #FFFFFF;
border: 2px solid #CCCCCC;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
div#pasosruta{
float:left;
width:100%;
}
div#rutasalternativas{
padding-top:15px;
float:left;
width:100%;
}
div#rutasalternativas h5{
margin-bottom:10px;
}
div#rutasalternativas h5 span{
float:left;
margin-right:5px;
}
div#rutasalternativas div{
padding-top:10px;
padding-bottom:10px;
border-top:1px solid #e3e3e3;
}
div#rutasalternativas div span{
color:#6e6c67;
font-size:1.5em;
float:left;
margin-right:5px;
}
div#ruta-nav{
position:absolute;
z-index:1;
margin-left:-105px;
width:90px;
top:105px;
}
div#ruta-nav img{
display:none;
position:absolute;
margin-left:69px;
margin-top:10px;
}
div#ruta-nav ul{
list-style: none;
}
div#ruta-nav ul li{
background: url("../images/menu-off.png") right top no-repeat;
padding-top:10px;
padding-bottom:10px;
color:#cfcfcf;
text-align: center;
font-size: 0.6em;
-moz-transition:0.3s linear;
transition:0.3s linear;
cursor:pointer;
}
div#ruta-nav ul li.on{
background: url("../images/menu-on.png") right top no-repeat;
}
div#ruta-nav ul li a{
color:#cfcfcf;
}
div#ruta-nav ul li a:hover{
color:#115387;
text-decoration: none
}
div#ruta-nav ul li span{
display:block;
font-size: 2.5em;
}
div#localidades_ruta{
float:left;
width:100%;
margin-top: 15px
}
div#localidades_ruta h5{
font-size: 1.5em;
}
div#localidades_ruta ul{
list-style: none
}
div#localidades_ruta ul li{
font-size:1.1em;
padding-top:5px;
padding-bottom:5px;
padding-left:3px;
background: url("../images/menu-off.png") -1px 0px repeat-y;
}
div#localidades_ruta ul li span{
color:#cf5b15;
margin-right:3px;
}
div#rutas-fotos,div#rutas-comentarios{
float:left;
width:100%;
margin-top: 15px
}
div#rutas-fotos h3{
font-size: 1.5em;
color:#6E6C67;
margin-bottom:10px;
}
div#rutas-fotos h3 span{
margin-right:5px;
}
div#rutas-fotos div{
float:left;
width:100%;
margin-bottom:10px;
}
div#rutas-fotos div img{
float:left;
max-width: 200px;
margin-right:15px;
}
/*fin ruta*/
/*banners*/
.block97090{
width:970px;
height:auto;
}
.block336280{
float:left;
margin-right: 10px;
}
.block46860{
width:468px;
height:60px;
margin-bottom:10px;
margin-top:10px;
}
/*fin banners*/