@charset "utf-8";
/* CSS Document */

/*
http://www.quijoteconfort.com/
webdeveloperchis - 04.09.2012
*/

span#trace{
  position:absolute;
  top:5px;
  right:5px;
  color:#000;
  font:bold 15px arial;
  z-index:99;}

/* Fuentes - @font-face */
@font-face {
  font-family: 'MPRegular';
  src: url('mp-regular-webfont.eot');
  src: local('☺'), url('mp-regular-webfont.woff') format('woff'), url('mp-regular-webfont.ttf') format('truetype'), url('mp-regular-webfont.svg#webfontVnltv9ZY') format('svg');
  font-weight: normal;
  font-style: normal;}
/*
Más info sobre el uso de @font-face
http://www.fontsquirrel.com/fontface
*/


/* Reseteo & Reglas Genericas */
*{margin:0;padding:0;border:0;outline:none;}
ol,ul{list-style: none;}
table{border-collapse:collapse;border-spacing:0;}
legend{display:none;}
input{font-size:1em;}
html,body{height:100%;}

body{
color:#000;
background-color:#fff;
font:normal 62.5%/normal Arial, Helvetica, sans-serif; /* cuerpo 10px */}

a,a:link,a:visited,a:hover,a:active{color:#709424;}

.none{display:none;}
.bloque{display:block;}
.enlinea{display:inline;}
.fueradepantalla{position:absolute;top:0;left:-5000em;}

.left{float:left;width:auto;}
.right{float:right;width:auto;}
.clear{clear:both;}
.clearleft{clear:left;}
.clearright{clear:right;}

body.home{
  background-color:#282828;}

body.yafaltamenos{
  background:#fff url(../img/fondotrasparencia5.png) repeat-x 0 0;
  font:normal 20px/normal 'MPRegular', Arial, Helvetica, sans-serif; /* cuerpo 10px */
  text-align:center;}
#yafaltamenos{
  color:#000;
  font-size:45px;}
#quedanxdias{
  color:#709424;
  font-size:118px;}
#yafaltamenos,#quedanxdias{
  text-transform:uppercase;
  font-weight:normal;
  white-space:nowrap;}
.colorgris{
  color:#5F5F5F !important;}
  
div.avisadmecontainer p{
  font-size:22px;
  color:#5F5F5F;}
  
body.animacion #avisadmecontainer,
body.animacion #yafaltamenos,
body.animacion #quedanxdias{
  display:none;
  position:absolute;
  top:40%;}
body #logohome{
  width:531px;
  height:127px;
  position:absolute;
  top:40%;
  margin-top:-63px;
  left:50%;
  margin-left:-265px;
  z-index:9999}
    
#pagecontainer{
  position:relative;
  overflow:hidden;}
body.animacion #quedanxdias{
  left:50%;}
body.animacion3 #tapa{
  position:absolute;
  left:0;
  top:40%;
  background:#fff url(../img/fondotrasparencia5.png) repeat-x 0 0;
  display:block;
  z-index:99;}

body.animacion #avisadmecontainer{
  color:#5F5F5F;
  text-align:center;
  white-space:nowrap;
  left:50%;
  top:60%;}
#avisadmeform{
  padding-top:25px;}
#emailavisadme{
  border:1px solid #BFBFC6;
  background-color:#E3E3E6;
  width:230px;
  height:38px;
  font:normal 18px/38px arial;
  color:#5F5F5F;
  padding:0 5px;}
#botonavisadme{
  background:#709424 url(../img/fondobotonavisadme.png) repeat-x 0 0;
    padding:0 10px;
  text-shadow:2px 1px 1px #5E7011;
  margin-left:8px;
  border-radius:19px;
  border:1px solid #797988;
  height:38px;
  font:italic normal 18px/38px arial;
  color:#fff;}


/* HOME */
#head{
  position:absolute;
  top:0;
  left:50%;
  z-index:10;
  margin-left:-500px;
  display:block;
  width:1000px;
  height:249px;
  background:transparent url(../img/bg-head.png) no-repeat 50% 0;
  padding:28px 0 0 0;}
.ie_7 #head{height:229px;}
.menor650 #head{
  padding-top:11px;
  background-position:50% -25px;}
#head h1 a{
  text-indent:-5000px;
  text-align:left;
  background:transparent url(../img/quijoteconfort-logotipo-blanco.png) no-repeat 50% 0;
  display:block;
  width:531px;
  height:64px;
  margin:0 auto 38px auto;}
.menor650 #head h1 a{
  margin-bottom:28px;}        
#head .headnav ul{
  overflow:hidden;
  display:inline-block;
  box-shadow:0px 1px 3px #555;
  margin:0 40px 0 194px;
  float:left;
  border-radius:5px;}
#head .headnav ul li{
  float:left;}
#head .headnav ul li a{
  display:block;
  background:#B5B5B5 url(../img/bg-headnav.png) repeat-x 0 0;
  font:normal 16px/31px 'MPRegular', Arial, Helvetica, sans-serif;
  color:#464646;
  padding:0 12px;
  border-right:1px solid #9e9d9d;
  border-left:1px solid #989898;
  text-decoration:none;}
#head .headnav ul li a:hover{
  text-shadow:0px 0px 18px #eee;}
#head .headnav ul li a.ultimas-novedades{
  border-left:0;
  border-radius:5px 0 0 5px;}
#head .headnav ul li a.contacto{
  border-right:0;
  border-radius:0 5px 5px 0;}
input.search{
  background:#4b4b4b url(../img/bg-search.png) no-repeat 7px 50%;
  box-shadow:0px 0px 0px #000, 0px 3px 3px #333 inset;
  height:21px;
  border:1px solid #464647;
  border-radius:15px;
  width:170px;
  padding:5px 6px 3px 30px;
  font:normal 16px/21px 'MPRegular', Arial, Helvetica, sans-serif;
  color:#fff;
  float:left;}
input.searchbutton{
  display:none;}
#secciones{
  position:absolute;
  left:0;
  bottom:0;}  
div.seccion{
  display:block;
  float: left;
    position: relative;}
#menu{
  background:#282828 url(../img/bg-menu.png) repeat-x 0 0;}
#cocinas{
  background:#9a3a16 url(../img/bg-cocinas.png) repeat-x 0 0;}
#baños{
  background:#023d72 url(../img/bg-banios.png) repeat-x 0 0;}
#estufas-y-calderas-de-pellets{
  background:#13631b url(../img/bg-estufas.png) repeat-x 0 0;}
p.banda{
  text-indent:-1000px;
  display:block;
  width:100%;
  height:10px;
  overflow:hidden;
  background-color:#58585A;
  margin:107px 0 0 0;}
#menu p.banda{
  background-color:#709424;}
.menor650 p.banda{
  margin-top:82px}    
    
#menu > ul{
  overflow:hidden;
  position:absolute;
  bottom:58px;
  left:50%;
  margin-left:-500px;
  display:block;
  width:1000px;}
.menor650 #menu > ul{
  bottom:47px;}
.mayor950 #menu > ul{
  bottom:358px;}
.mayor1100 #menu > ul{
  bottom:300px;} 
#menu > ul > li{
  float:left;
  text-align:center;
  position:relative;
  /*height:662px; window.height-(175=58+117)*/}
#menu > ul > li a.seccion{
  display:none;}
#menu ul li.cocinas,
#menu > ul > li.cocinas ul{
  width:357px;
  background:none;}
#menu ul li.cocinas{
  background:transparent url(../img/cocinero.png) no-repeat 80% 38%;}
.menor650 #menu ul li.cocinas{
  background-position:80% 0;}
.mayor950 #menu ul li.cocinas{
  background-position:80% 8px;}
#menu > ul > li.cocinas ul{
  margin-left:35px;}
#menu ul li.banios,
#menu > ul > li.banios ul{
  width:286px;}
#menu ul li.banios{
  background:transparent url(../img/pato.png) no-repeat 35% 38%;}
.menor650 #menu ul li.banios{
  background-position:35% -8px;}
.mayor950 #menu ul li.banios{
  background-position:35% 5px;} 
#menu > ul > li.banios ul{
  /*margin-left:-143px;*/}
#menu ul li.estufas,
#menu > ul > li.estufas ul{
  width:357px;}
.ie_7 #menu > ul > li.cocinas ul,
.ie_7 #menu > ul > li.banios ul{
  margin-left:-150px;}
.ie_7 #menu > ul > li.estufas ul{
    margin-left:-210px;}
#menu ul li.estufas{
  background:transparent url(../img/hoja.png) no-repeat 10% 36%;}
.menor650 #menu ul li.estufas{
  background-position:10% -8px;}
.mayor950 #menu ul li.estufas{
  background-position:10% 0;}
#menu > ul > li.estufas ul{
  margin-left: -36px;}
#menu > ul > li > div{
  padding-top:20px;
  background:transparent url(../img/bg-menu-ul.png) no-repeat left bottom;
  position:absolute;
  bottom:20px;
  height:140px;
  width:357px;
  left:0;}
.menor650 #menu > ul > li > div{
  bottom:0px;
  height:100px;}
.mayor950 #menu > ul > li > div{
  bottom:40px;}
#menu > ul > li.banios> div{
  width:286px;}
#menu > ul > li.cocinas > div{
  background:none;}
#menu > ul > li ul{
  position:absolute;
  bottom:0;}
#menu > ul > li ul a{
  font:normal 20px/26px 'MPRegular', Arial, Helvetica, sans-serif;
  color:#fff;
  text-decoration:none;}
.menor650 #menu > ul > li ul a{
    font:normal 18px/22px 'MPRegular', Arial, Helvetica, sans-serif;}
    
.menuflotante{
  position:absolute;
  bottom:50px;
  left:50%;
  width:842px;
  margin-left:-421px;
  z-index:99;}
.menor650 .menuflotante{
  bottom:0;}
.mayor950 .menuflotante{
  bottom:380px;}
.mayor1100 .menuflotante{
  bottom:300px;}
.menuflotante ul{
  overflow:hidden;}
.menuflotante ul li{
  float:left;
  margin-left:16px;}
.menuflotante ul li a{
  display:block;
  height:175px;
  width:270px;
  text-align:center;
  font:normal 28px/normal 'MPRegular', Arial, Helvetica, sans-serif;
  color:#fff;
  text-shadow:0px 2px 5px #000;
  text-decoration:none;
  padding-top:20px;}
.menor650 .menuflotante ul li a{
  padding-top:37px;}
.menuflotante ul li a.interior{
  background:transparent url(../img/bg-menuflotante.png) no-repeat 0 0;}
.menuflotante ul li.select a{
  color:#000;
  text-shadow:none;}
.menuflotante ul li.cocinas.select a{
  background:transparent url(../img/bg-menuflotante-select-cocinero.png) no-repeat 0 0;}
.menuflotante ul li.banios.select a{
  background:transparent url(../img/bg-menuflotante-select-pato.png) no-repeat 0 0;}
.menuflotante ul li.estufas.select a{
  background:transparent url(../img/bg-menuflotante-select-hoja.png) no-repeat 0 0;}
.menuflotante ul li.cocinas{
  margin-left:0;}
  
#footer{
  position:absolute;
  height:58px;
  width:880px;
  bottom:0;
  left:50%;
  margin-left:-440px;
  background:transparent url(../img/bg-footer.png) repeat-x 0 0;
  z-index:3;
  font:normal 14px/40px 'MPRegular', Arial, Helvetica, sans-serif;
  color:#fff;
  text-align:center;}
.menor650 #footer{
  height:29px;
  font:normal 12px/32px 'MPRegular', Arial, Helvetica, sans-serif;}
.mayor950 #footer{
  height:108px;}
#footer .bloque{
  display:inline;}
  
div.contenedor-seccion{
  width:880px;
  margin:80px auto 0 auto;
  position:relative;}
.menor650 div.contenedor-seccion{
  margin-top:46px;}
.mayor950 div.contenedor-seccion{
  margin-top:85px;}
.mayor1100 div.contenedor-seccion{
  margin-top:80px;}
div.seccion h2{
  font:normal 46px/normal 'MPRegular', Arial, Helvetica, sans-serif;
  color:#fff;
  text-shadow:0px 2px 5px #000;
  background:transparent url(../img/bg-footer-50.png) repeat-x 0 bottom;}
#estufas-y-calderas-de-pellets h2{
  font:normal 39px/normal 'MPRegular', Arial, Helvetica, sans-serif;}
.menor650 div.seccion h2{
  font:normal 34px/35px 'MPRegular', Arial, Helvetica, sans-serif;}
div.secciontexto{
  width:400px;
  padding:51px 0 0 0;
  font:normal 15px/20px Georgia;
  color:#fff;
  text-shadow:0px 1px 1px #888;}
.menor650 div.secciontexto{
  font:normal 13px/15px Georgia;
  width:450px;}
.mayor950 div.secciontexto{
  font:normal 17px/21px Georgia;
  width:450px;}
.mayor1100 div.secciontexto{
  font:normal 19px/22px Georgia;
  width:450px;}
div.secciontexto p{
  padding-bottom:10px;}

div.seccion ul.submenu{
  overflow:hidden;
  display:inline-block;
  position:absolute;
  left:0;
  top:62px;
  z-index:10;
  width:370px;
  height:31px;
  background:transparent url(../img/bg-submenu.png) no-repeat 0 0;}
#estufas-y-calderas-de-pellets ul.submenu{
  top:57px;}
.menor650 div.seccion ul.submenu{
  top:47px;}
div.seccion ul.submenu li{
  float:left;}
div.seccion ul.submenu a{
  display:block;
  font:normal 16px/31px 'MPRegular', Arial, Helvetica, sans-serif;
  color:#000;
  padding:0 14px;
  border-right:1px solid #333;
  border-left:1px solid #222;
  text-decoration:none;}
#baños ul.submenu a{
  padding:0 10px;}
#estufas-y-calderas-de-pellets ul.submenu a{
  padding:0 18px;}
div.seccion ul.submenu a:hover{
  text-shadow:0px 0px 18px #fff;}
div.seccion ul.submenu li.first a{
  border-left:0;
  border-radius:5px 0 0 5px;}
div.seccion ul.submenu li.last a{
  border-right:0;
  border-radius:0 5px 5px 0;}
  
div.seccion div.galeria-seccion{
  position:absolute;
  right:0px;
  top:15px;
  z-index:10;
  width:410px;
  height:333px;}
  
div.subseccion{
  position:absolute;
  left:50%;
  z-index:100;
  width:880px;
  height:334px;
  margin-left:-440px;
  color:#fff;
  text-align:center;
  border-radius:8px;
  display:none;}
#cocinas div.subseccion{
  background-color:#682B0B;
  box-shadow:0px 5px 10px #682B0B;}
#baños div.subseccion{
  background-color:#214A6A;
  box-shadow:0px 5px 10px #214A6A;}
#baños div.subseccion{
  background-color:#123A51;
  box-shadow:0px 5px 10px #123A51;}
#estufas-y-calderas-de-pellets div.subseccion{
  background-color:#325319;
  box-shadow:0px 5px 10px #325319;}
#ultimas-novedades,#donde-estamos,#contacto{
  background-color:#fff;
  box-shadow:0px 5px 10px #fff;
  color:#333;
  height:395px;}
div.subseccion h3{
  font:normal 30px/normal 'MPRegular', Arial, Helvetica, sans-serif;
  text-shadow:0px 2px 5px #000;
  padding:51px 20px 18px 20px;}
#energias-renovables h3{padding:21px 20px 15px 20px;}
div.subseccion .subsecciontexto{
  font:normal 16px/22px Georgia;
  padding:0 250px 30px;}
#donde-estamos{height:580px;}
#donde-estamos a{color:#333;text-decoration:none;}
#donde-estamos .subsecciontexto{
  padding:0 30px 30px;}
#donde-estamos .mapa{
  display:block;
  width:800px;
  height:400px;
  background:transparent url(../img/mapa.gif) no-repeat 50% 30px;}
#energias-renovables .subsecciontexto{
  float:left;
  display:block;
  padding:0 20px;
  width:250px;
  text-align:left;}  
.mayor1100   div.subseccion .subsecciontexto{
  font:normal 18px/22px Georgia;}
div.subseccion .subsecciontexto p{
  padding-bottom:10px;}
a.close-subseccion{
  background:transparent url(../img/x-close.png) no-repeat 0 0;
  height:16px;
  width:16px;
  position:absolute;
  right:12px;
  top:12px;
  overflow:hidden;
  text-indent:-500px;
  z-index:2;}
a.close-subseccion:hover{
  background-position:0 bottom;}