@charset "utf-8";

body {font-family:verdana, arial; background-color:#333; background:url(https://hostalcomercial.com/img/skyline1280.jpg) no-repeat center top #B0B0B0; font-size:12px; background-size: cover;}
.wrapper {width:900px; overflow:hidden; opacity:0.93; filter:alpha(opacity=93); padding:20px; margin:10px auto; background:url(https://hostalcomercial.com/img/background.png); -moz-border-radius: 15px 0px 15px 15px; -webkit-border-radius: 15px 0px 15px 15px; border-radius: 15px 0px 15px 15px;}
h2 {color:#9F0000; font-size:14px; font-weight:bold; padding-bottom:5px;}

header {position:relative; height:85px; /*border-bottom: 1px solid #CCC;*/}
header ol li{display:inline; float:right; border-left:1px dotted black;}
header ol li a {padding:10px;}
header ol li a:hover {background-color:#666;} 

nav.main {position:absolute; bottom:-1px; right:0;}
nav.main a:first-child {-moz-border-radius: 10px 0 0 0; -webkit-border-radius: 10px 0 0 0; border-radius:10px 0 0 0; margin: 0;}
nav.main a {background-color:#EB3233; border-right: 1px solid #FFFFFF; color:#FFF; float:left; font-size:14px; padding: 7px 16px 9px; text-transform: lowercase;}
nav.main .activo, nav.main a:hover.activo {background:transparent; cursor:default; background-color:#9F0000; color:#FFF;}
nav.main a:hover {background-color:#CB3536; color:#FFF; text-decoration:none;} 

nav.idioma {position:absolute; top:0; right:0; cursor:pointer;}
nav.idioma a:hover {opacity:0.5; filter:alpha(opacity=50);}

article {line-height:1.7; color:#666; width:335px; float:right;}
article.comoLlegar {float:left; width:550px; margin:15px 0px 25px;}
article.comoLlegar dl {padding-left:13px;}
article dt {font-weight:bold;}
article.habs {line-height:2; margin-bottom:50px;}
article.anchoTotal {width:auto;}
section {height:300px; padding-top: 20px;}
figure {width:550px; float:left; padding-right:15px; overflow:hidden;}
footer {clear:both; font-size:11px; color:#777; background-color:#FFF; margin-top:25px; padding:5px; border-top: 1px dotted #BBB; text-align:center; line-height:2;}
footer .premios{float:left; width:100%;} 
footer .premios img {float: left; padding-top: 10px;}


.esp {background:url(https://hostalcomercial.com/img/spriteBanderas.png) no-repeat -2px -131px; color:transparent; width:25px; height:25px; display:inline-block;}
.ing {background:url(https://hostalcomercial.com/img/spriteBanderas.png) no-repeat -2px -70px; color:transparent; width:25px; height:25px;display:inline-block;}
.ale {background:url(https://hostalcomercial.com/img/spriteBanderas.png) no-repeat -2px -100px; color:transparent; width:25px; height:25px;display:inline-block;}
.chi {background:url(https://hostalcomercial.com/img/spriteBanderas.png) no-repeat -2px -10px; color:transparent; width:25px; height:25px;display:inline-block;}

.logo {margin-top:8px;}
.visitas {float:right;}
.notaPie {font-size:10px}
.separador {height:12px; background-color:#EEE;}
.widgetTiempo {position:absolute; color:grey; font-size:10px; width:540px; margin-top:4px; text-align:right;}
.facebook {width: 120px; height:100px; float: right; margin-right: 130px;margin-top: 1px;}
.muroFacebook {width:550px; float:left;}
.iconosTiempo {width:24px; position:absolute; margin-left:540px; margin-top:-11px;}
.temperatura {width:24px; position:absolute; margin-left:578px; margin-top:-8px;}
.telf {font-weight:bold; color:#CB3536; font-size:16px;}
.naranja {color:#fc3;}
#lupa {position:absolute; right:-55px; top:-20px; background:url(https://hostalcomercial.com/img/search.png) no-repeat; width:24px; height:24px; cursor:pointer;}
.metro {background:url(https://hostalcomercial.com/img/metro.jpg) no-repeat; padding-left:40px; margin:5px 0px;}
.imgPrecios {float:right; margin-top:15px; border:1px solid #CCC;}
.notasReservas {float:left; clear:both; color:#666; font-size:11px; margin:5px 0px 10px;}

table {width:660px; border:1px solid #CCC; margin-top:15px; font-size:13px; float:left;}
table th, table td{vertical-align:middle; text-align:center; padding:8px 20px; color:#000; font-weight:bold;}
table th {background-color:#EA7500; font-size:12px; color:#FFF; font-weight:normal;}
.tipoHabs {text-align:left; color:#666; font-weight:normal;}
.textLeft {text-align:left; }

.instalBalcon {background:url(https://hostalcomercial.com/img/iconos/balcon.png) no-repeat; padding-left:30px;}
.instalAire {background:url(https://hostalcomercial.com/img/iconos/aire.png) no-repeat; padding-left:30px;}
.instalCalefaccion {background:url(https://hostalcomercial.com/img/iconos/calefaccion.png) no-repeat; padding-left:30px;}
.instalTV {background:url(https://hostalcomercial.com/img/iconos/tv.png) no-repeat; padding-left:30px;}
.instalWifi {background:url(https://hostalcomercial.com/img/iconos/wifi.png) no-repeat; padding-left:30px;}
.instalWC {background:url(https://hostalcomercial.com/img/iconos/wc.png) no-repeat; padding-left:30px;}
.instalSecador {background:url(https://hostalcomercial.com/img/iconos/secador.png) no-repeat; padding-left:30px;}
.instalParking {background:url(https://hostalcomercial.com/img/iconos/parking.png) no-repeat; padding-left:30px;}
.instalInfo {background:url(https://hostalcomercial.com/img/iconos/info.png) no-repeat; padding-left:30px;}
.instalMaleta {background:url(https://hostalcomercial.com/img/iconos/maleta.png) no-repeat; padding-left:30px;}
.instalNosmok {background:url(https://hostalcomercial.com/img/iconos/nosmok.png) no-repeat;padding-left:30px;}
.instalNevera {background:url(https://hostalcomercial.com/img/iconos/nevera.png) no-repeat;padding-left:30px;}
.instalDesayuno {background:url(https://hostalcomercial.com/img/iconos/desayuno.png) no-repeat;padding-left:30px;}
.instalTetera {background:url(https://hostalcomercial.com/img/iconos/tetera.png) no-repeat;padding-left:30px;}

a.linkRojo {color:#CB3536; font-weight:normal;}
a.linkAzul {color:#0000FF; text-align:left; font-size:10px;}
a.linkPlano {color:darkorange;}
a.mailReservas {color:#06C; font-weight:bold; font-size:15px;}
a.linkGuerreros {color:#393;}
a:hover.linkGuerreros, a:hover.linkFotografia, a:hover.mailReservas {text-decoration:underline;}
a.linkFotografia {color:#777;}

.planoDetalle {margin-top:20px;}
#planoDetalle {display:none;}
#capaContactoForm {display:none; z-index:9999; background-color:#333; border:1px solid #666; -moz-box-shadow:0 0 50px 5px #222; -webkit-box-shadow: 0 0 50px #222;}
#capaContactoForm .close, #planoDetalle .close {background-image:url(https://hostalcomercial.com/img/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px;}
#fade{overflow:hidden; height:300px !important;}
/*formulario guerreros: modificar el ancho general igual que el textarea para mantener el padding*/
.contactoForm {width:386px; padding:30px;}
.contactoForm ol {}
.contactoForm legend {}
.contactoForm ol li {padding-bottom:25px; float:left;}
.contactoForm ol li label {width:100px; color:#EEE; float:left; text-align:left; width:80px;}
.contactoForm input[type=text] {height:20px; width:200px; background-color:#eee; border: 1px solid #555;  padding:2px; color:#333; float:left;}
.contactoForm textarea {background-color:#EEE; width:300px; height:100px; border:1px solid #555; padding:2px; color:#333; float:left; line-height:16px;}
.contactoForm input[type=submit] {padding:3px 6px 3px 6px; color:#FFF; cursor:pointer; background:none; border:1px solid #999; font-size:9px; margin-left:5px; float:right;}
.contactoForm input[type=submit]:hover {border:1px yellow solid;}
.contactoForm p {color:#999; text-align:left; padding-left:10px;}

.respuesta {font-size: 20px; text-align: center; height:100px; margin-top: 50px; background:url(https://hostalcomercial.com/imgs/tick.png) 130px -20px no-repeat;}
.respuesta p {padding-top:15px; color:#666;}

/*formulario reservas*/
/*formulario reservas*/
.reservas {clear:both; background-color:#EB3233; text-align: center; color:#FFF; padding: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px; margin-top:20px;}
.reservas p{font-size: 25px; text-transform:uppercase; display:block; font-weight:bold;}
a:hover .reservas {background-color:#9F0000;}
#fReservaIndex{overflow:hidden; font-size: 15px;}
#fReservaIndex span{margin-right:5px; /*float:left;*/ margin-top:-1px;}
.cMasOpciones span{float:none !important;}
.masOpciones span{float: none !important;}
#fReservaIndex span.inputDetalle{display: block; width: 291px;}
.inputDetalle > span{margin-right:0 !important;}
#fReservaIndex input[type="text"]{width:100px;}
#fReservaIndex input[type="button"]{width:75px; float:left; margin:-2px 0px 0px 10px;}

.masOpciones {
    background-color: #D70000;
    cursor: pointer;
    font-size: 11px !important;
    margin-bottom: 0 !important;
    margin-top: 20px;
    padding: 3px 0;
    text-align: center;
    width: 100%;
}

.cMasOpciones{padding:10px 5px 0;}

.pMasOpciones{display:block; margin:15px 0 0; font-weight:bold; display: block; float: left; clear: both;}
/*formulario precios y reservas*/
.realizaReserva{color: #666666; line-height: 1.7;}
.realizaReserva ul{margin:10px 0 10px 20px;}
.realizaReserva .letraPequeña{font-size:11px;}
.realizaReserva .precioTotal{padding: 5px 10px;}
.realizaReserva .relleneForm{font-size: 13px; font-weight: bold; margin-top: 20px;}
.realizaReserva a#nuevaReserva{font-size: 11px; font-weight: normal; color:#9F0000;}

.realizaReserva form{float:left;}
.realizaReserva #muestraDisp{left: 565px; position: absolute; top: 480px; width: 420px;}
.realizaReserva form fieldset{padding: 10px 0 0px 30px;}
.realizaReserva form .boton{height: auto; margin-right: 45px; float:right; padding: 1px 5px;}
#feedback.error{color:red;}
#feedback.no_error{color:#090;}
.facebook iframe{height:50px;}
.btnFormSeccion{height:auto !important; padding:5px; float:left; clear:both;}
.cMasOpcionesSeccion{padding: 8px 0; float:left;}
.cMasOpcionesSeccion span{float:none !important;}
input#search.btnFormSeccion[type="button"] {margin:0px;}

#fReservaIndex.fReservaSeccion{float:none !important; width:auto !important; font-size: 12px;}
#fReservaIndex.fReservaSeccion #roomType{width:auto;}
#fReservaIndex #roomType{width: 190px;}

#fReservaIndex .detalleHabitacion{float: right; margin-right: 0; margin-top: 5px;}

#fReservaIndex .detalleHabitacion a {color: #FFDDDD; float: left; margin: 3px 5px; padding: 0; text-decoration:underline;}

#fReservaIndex .detalleHabitacion img{float:right;border: 1px solid #ffdddd;}

#fEnviaDatos input[type="text"], #fReservaIndex input[type="text"], #fReservaIndex select{font-size: 14px; height: 20px;}
#fEnviaDatos #horaLlegada{width:57%;}
#fEnviaDatos label.horaLlegada{ line-height:16px}

#bVolverReservar{color: #666666; text-decoration:underline;}
/*loader*/
.overlay{left: 0; position: absolute; top: 0; background: url(https://hostalcomercial.com/img/overlay.png) repeat-x scroll 50% 50% #AAAAAA; opacity: 0.3; height: 100%; width: 100%; z-index: 1001;}
.overlay img{display: block; margin: 15% auto; width:100px;}

/*validaciones*/
.errorField{background-color:#FF6;}
.errorNumericField{background-color:#FF6; border:1px solid #F00;}
.txtErrorLength{color: red; float: right; font-size: 11px; margin-right: 30px; text-align: right; width: 100%;}

.mostrarOpciones{background: url(https://hostalcomercial.com/img/desplegar_ico.png) no-repeat right center; padding-right: 16px;}
.ocultarOpciones{background: url(https://hostalcomercial.com/img/plegar_ico.png) no-repeat right center; padding-right: 16px;}

.infoForm{display: block;
    float: right;
    font-size: 10px;
    margin-right: 160px;
    text-align: right;
    width: 100%;}

#fReservaIndex .infoForm{float:none;}
	
/*pop-up detalle habitación*/
.pop-up {
    -moz-box-shadow: 0 0 50px 5px #555555;
    background-color: #FDFFF4;
    border: 1px solid #A1B917;
    display: none;
    font-family: verdana;
    line-height: 1.5;
    min-height: 300px;
    padding: 10px 20px 0;
    width: 400px;
    z-index: 10000;
	border-color:#E63030;
}
.pop-up .close {
    background-image: url(https://hostalcomercial.com/img/close.png);
    cursor: pointer;
    height: 35px;
    position: absolute;
    right: -15px;
    top: -15px;
    width: 35px;
}
#habitacionDetailInside h3{font-size: 12px; font-weight: bold; margin-bottom: 5px;}
#habitacionDetailInside img{border: 1px solid #999999;}
#habitacionDetailInside p, #habitacionDetailInside span{font-size:11px;}
#habitacionDetailInside span{color:#9F0000;}

#habitacionDetail #habitacionDetailInside .fc-content{overflow-x: hidden; overflow-y: auto; height:450px;}

.fechas{float: left; width: 220px;}
#fReservaIndex .fechas{width:auto;}
img#icoDetalleHabitacion{vertical-align: top; max-width: 20px; border: 1px solid;}
#bAbreDetalle{color: #9F0000; font-size: 11px;}

.liDetail #icoDetalleHabitacion{margin: 0 3px 0 10px;}
/*estilo errores*/
.errorReserva{font-size: 16px; font-weight: bold;}
.errorContenedor{border:1px dotted red; padding:10px; color:#EB3233;}