@charset "utf-8";
/* CSS Document */
@font-face { 
    font-family: 'Lucida Handwriting Italic'; 
    src: url('lucida_handwriting_italic.eot'); 
    src: url('lucida_handwriting_italic.eot?#iefix') format('embedded-opentype'), 
         url('lucida_handwriting_italic.svg#Lucida Handwriting Italic') format('svg'), 
         url('lucida_handwriting_italic.woff') format('woff'), 
         url('lucida_handwriting_italic.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal;
}

html, body{width: 100%; height:100%; min-width: 1024px; font-family: "Lucida Handwriting Italic", sans-serif; font-size: 16px; color: white;}

* {margin: 0; padding: 0;}
a {text-decoration: none; color: white;}

root, #header, #footer, #nav {display: block;}

#header {position: fixed; top: 0px; bottom: 0px; left: 0px; background: #FF8C00; height: 46px;  width: 100%; color: white; line-height: 46px; -webkit-backface-visibility:hidden;}
#logo {float: left; background: url('/img/logo.png') no-repeat; width: 160px; height: 117px;}
#nav {float: right; margin-right: 30px;}
#nav a {width: 100px; color: #000; margin-right: 20px;}
#nav a:hover {border-bottom: 1px solid white; color: white}
#nav a.active {border-bottom: 1px solid white; color: white}
#nav a.active:hover {border-bottom: 1px solid white; color: white}

#content {min-height: 100%; height: auto; width: 100%; }
#content:after{width: 100%; height: 50px; display: block; clear:both;}
#espacio {height: 130px; display: block;}
#fondo {width: 0px; display: block; background: url('/img/banda_naranja.png') repeat;}

#content .error {text-align: center; padding-top: 150px;}
#content .nosotros {height: 900px;}

#content .nosotros .fotos {display: block; width: 560px; list-style: none; height: 120px; margin: 0px 0px 20px 0px;}
#content .nosotros .fotos li {float: left; width: 100px; height: 100px; margin: 6px;}
#content .nosotros .fotos li a  {display: inline-block; width: 100px; height: 100px; }
#content .nosotros .fotos .foto1 {background:url("/img/puertap.jpg") -0px -0px;}
#content .nosotros .fotos .foto1:hover {background:url("/img/puertap.jpg") -0px -100px;}
#content .nosotros .fotos .foto2 {background:url("/img/obradorp.jpg") -0px -0px;}
#content .nosotros .fotos .foto2:hover {background:url("/img/obradorp.jpg") -0px -100px;}
#content .nosotros .fotos .foto3 {background:url("/img/biombop.jpg") -0px -0px;}
#content .nosotros .fotos .foto3:hover {background:url("/img/biombop.jpg") -0px -100px;}
#content .nosotros .fotos .foto4 {background:url("/img/pizarrap.jpg") -0px -0px;}
#content .nosotros .fotos .foto4:hover {background:url("/img/pizarrap.jpg") -0px -100px;}
#content .nosotros .fotos .foto5 {background:url("/img/mesap.jpg") -0px -0px;}
#content .nosotros .fotos .foto5:hover {background:url("/img/mesap.jpg") -0px -100px;}

#content .productos {height: 800px;}
#content .productos .fotos {display: block; width: 560px; list-style: none; height: 120px; margin: 0px 0px 20px 0px;}
#content .productos .fotos li {float: left; width: 100px; height: 100px; margin: 6px;}
#content .productos .fotos li a  {display: inline-block; width: 100px; height: 100px; }
#content .productos .fotos .foto1 {background:url("/img/productos1p.jpg") -0px -0px;}
#content .productos .fotos .foto1:hover {background:url("/img/productos1p.jpg") -0px -100px;}
#content .productos .fotos .foto2 {background:url("/img/productos2p.jpg") -0px -0px;}
#content .productos .fotos .foto2:hover {background:url("/img/productos2p.jpg") -0px -100px;}
#content .productos .fotos .foto3 {background:url("/img/productos3p.jpg") -0px -0px;}
#content .productos .fotos .foto3:hover {background:url("/img/productos3p.jpg") -0px -100px;}
#content .productos .fotos .foto4 {background:url("/img/productos4p.jpg") -0px -0px;}
#content .productos .fotos .foto4:hover {background:url("/img/productos4p.jpg") -0px -100px;}
#content .productos .fotos .foto5 {background:url("/img/productos5p.jpg") -0px -0px;}
#content .productos .fotos .foto5:hover {background:url("/img/productos5p.jpg") -0px -100px;}

#content .pedidos {height: 1500px;}
#content .reserva {height: 600px;}
#content .contact {height: 1100px;}

#content .politica {height: 2000px;}
#content .aviso {height: 1200px;}
#content .cookies {height: 4400px;}

#content .reserva #reserva {display: block; width: 500px; margin-top: -25px; height: 565px; border: none; background: transparent; margin-left: auto; margin-right: auto;}

#content .direccion {text-align: right;}
#content .direccion a:hover {text-decoration: underline;}
#content .contacto fieldset {padding: 10px 0px; border: none; }
#content .contacto fieldset label {float: left; width: 120px; font-weight: bold;}
#content .contacto fieldset .input {float: right; width: 420px; }
#content .contacto fieldset .textarea {float: right; width: 420px; }
#content .contacto fieldset .input-submit {clear: both; float: right; background: url('/img/bt_off.png') no-repeat; width: 145px; height: 30px; border: none; margin-top: 25px; cursor: pointer; color: white; font-size: 18px; }
#content .contacto fieldset .input-submit:hover {background: url('/img/bt_off.png') no-repeat -0px -30px; }

#content .pedido fieldset {padding: 10px 0px; border: none; }
#content .pedido fieldset label {float: left; font-weight: bold;}
#content .pedido fieldset .input {float: right; width: 400px; }
#content .pedido fieldset .number {float: right; width: 50px; margin-left: 10px;}
#content .pedido fieldset .textarea {float: right; width: 400px; }
#content .pedido fieldset select {float: right; width: 250px; }
#content .pedido fieldset button {float: right; width: 80px; margin-left: 10px;}
#content .pedido fieldset .input-submit {clear: both; float: right; background: url('/img/bt_off.png') no-repeat; width: 145px; height: 30px; border: none; margin-top: 25px; cursor: pointer; color: white; font-size: 18px; }
#content .pedido fieldset .input-submit:hover {background: url('/img/bt_off.png') no-repeat -0px -30px; }

#texto {width: 560px; padding: 20px 0px 20px 45px; display: none;}
#texto h1 {font-size: 24px; margin-bottom: 20px;}
#flecha {float: right; width: 24px; height: 26px; margin: 10px; cursor: pointer; display: inline-block}
#flecha .flechaI {display: block; width: 24px; height: 26px; background: url('/img/flechaizda.png') no-repeat;}
#flecha .flechaD {display: none; width: 24px; height: 26px; background: url('/img/flechadcha.png') no-repeat;}
#espacio2 {height: 48px; display: block;}
#localizacion a:hover{text-decoration: underline;}

#footer {position: fixed; bottom: 0px; background: #FF8C00; height: 48px; text-align: center; width: 100%; color: white; line-height: 48px; -webkit-backface-visibility: hidden; }
#footer a{color: white; display: inline-block; width: 200px;}
#footer a:hover{text-decoration: underline;}

#cookies {margin-top: 50px; margin-left: 200px; background: orange; padding: 10px;}