/*

 site: www.borja.com
 design: Estudio digital km-0.com
 // layout inspirado en un diseño de clearleft
 
colores:
arriba:e6922b;
centro:e7ded4
pie: 7f7f7f
marrón:6b400c
texto:#333333
*/

/* ========= elementos generales ========= */

*{
 font-size:100%;
 margin:0;
 padding:0;
 list-style:none;
 border:0;
}
p, ul, ol, dl, dt, dd, li, blockquote, cite, h1, h2, h3, h4, h5, h6, fieldset, hr, select{
margin-top: 0pt;
margin-right: 0pt;
margin-bottom: 0pt;
margin-left: 0pt;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
font-size: 1em;
font-weight: normal;
}

html {

}

body{
 background-color:#7f7f7f;
 font:75%/150% "Lucida Sans", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
 text-align:center;
 color:#333333;
 padding:0;
}

.clearboth{
 display:block;
 clear:both;
 margin:0;
 padding:0;
}

.clearleft{
 display:block;
 clear:left;
 margin:-10px 0 0 0;
 padding:0;
}

.clearright{
 display:block;
 clear:right;
 margin:0;
 padding:0;
}

a {
 color:#000;
}
a:visited {
 color:#7f7f7f;
}
a:hover, a:active {
 color:#e6922b;
}
/* ========= cabecera ========= */

#cabecerawrap{
 padding:0;
 margin:0;
 border-bottom:solid 6px #7f7f7f;
 background-color: #e6ad66;
 background-image: url('imagenes/fondo_cabecera.png');
 background-repeat: repeat-x;
 background-attachment: scroll;
 background-position: 0% 0%;

}

#cabecera{
 color:#fff;
 width:760px;
 margin:0 auto;
 padding:0;
 text-align:left;
}

  #cabecera a{
   color:#fff;
   text-decoration:none;
  }

  #cabecera h1{
   width:100px;
   height:100px;
   float:left;
   margin-left:-12px;
   display:inline;
  }

    #cabecera h1 a{
     display:block;
     width:180px;
     height:100px;
     float:left;
     overflow:hidden;
     text-indent:-9999px;
     margin:0 0 0 10px;
     padding:0;
     border:0 !important;
     background:transparent url('imagenes/logo_borja.png') 0 0 no-repeat;
    }


#menusup {
 float:right;
 margin:5px 0 0 0;
 display:inline;
 text-align: right;
}

  #menusup a{
   font-size:92%;
   white-space:nowrap;
   margin:0 3px !important;
   padding: 3px;
  }
  #menusup a:hover{
/*   color:#ffa96f;
   background-color:#fff; */
   text-decoration:underline;
  }

  #menusup ul{
   text-align:right;
  }

    #menusup ul li{
     display:inline;
    }
fieldset#busqueda {
	margin-top:10px;
	}
fieldset#busqueda input#searchbox {
border:1px solid #aaa;
background-color:#fefefe;
display: inline;
width: 150px;
height:18px;
}
fieldset#busqueda input#buscarSubmit{
  position:relative;
  left:-5px;
  top:-1px;
  vertical-align:bottom;
  margin:0;
  border:1px solid #aaa;
  width:52px;
  height:20px;
  background-image:url('imagenes/btn_buscar.png');
  background-repeat:no-repeat;
  background-position:top left;
}
ul#menunav{
 margin:50px 0 0 0;
 float:right;
 display:inline;
}

  ul#menunav li{
   display:inline;
  }

    ul#menunav li a{
     height:27px;    
     float: left;
     color:#fff;
     background-image:url('imagenes/fondo_menu.gif');
	 background-repeat: no-repeat;
     background-color:#666;
     margin:0px 1px !important;
     white-space:nowrap;
     text-align: center;
     font-weight:normal;
    }
    ul#menunav li a span{
     visibility:hidden;
    }
    ul#menunav li a:hover{
     color:#fff;
     background-color:#542400;
     background:#fff6f1 url('imagenes/fondo_menu.gif') top left no-repeat;
    }

    ul#menunav li.tejados a {
     width:141px;
     background:#fff6f1 url('imagenes/btn_acabados.png') top left no-repeat;
    }
    ul#menunav li.tejados a:hover,
    body#tejados ul#menunav li.tejados a{
     background:#fff6f1 url('imagenes/btn_acabados_ovr.png') top left no-repeat;
    }
    
    ul#menunav li.tejas a {
     width:113px;
     background:#fff6f1 url('imagenes/btn_tipoteja.png') top left no-repeat;
    }
    ul#menunav li.tejas a:hover,
    body#tejas ul#menunav li.tejas a{
     background:#fff6f1 url('imagenes/btn_tipoteja_ovr.png') top left no-repeat;
    }
    
    ul#menunav li.piezasespeciales a {
     width:141px;
     background:#fff6f1 url('imagenes/btn_piezas.png') top left no-repeat;
    }
    ul#menunav li.piezasespeciales a:hover,
    body#piezasespeciales ul#menunav li.piezasespeciales a{
     background:#fff6f1 url('imagenes/btn_piezas_ovr.png') top left no-repeat;
    }
    
    ul#menunav li.complementos a {
     width:140px;
     background:#fff6f1 url('imagenes/btn_complemento.png') top left no-repeat;
    }
    ul#menunav li.complementos a:hover,
    body#complementos ul#menunav li.complementos a{
     background:#fff6f1 url('imagenes/btn_complemento_ovr.png') top left no-repeat;
    }

/* centro */

#centrowrap{
 padding:0;
 margin:0;
 border-bottom:solid 1px #7f8082;
 background-color: #e8ded5; /*#fff6f1;*/
 min-height:192px;
}

#centro{
 /* TODO: the bottom border must be here to fix a bug which would otherwise cause the promo area to continue */ 
/*  border-bottom:solid 1px #7f8082; */

 width:760px;
 margin:0 auto;
 padding:10px 0 30px 0;
 text-align:left;
}
#centro.inicio {
 background:transparent url('imagenes/gato.jpg') 1px 0 no-repeat; /* TODO: hacer la imagen del gato más grande para que nunca se quede corta (q sobre) */
 padding:0;
}

  #centro ul{
   float:right;
   text-align:left;
   border-right:solid 1px #fff;
  }

    #centro ul li{
     float:right;
     clear:both;
     margin:0;
    }

      #centro ul li a{
       float:left;
       display:block;
       padding: 5px 10px 5px 45px;
       margin:0;
       background:#e1e1e1 url('imagenes/fondo_boton.jpg') -250px center no-repeat;
       border-left:solid 1px #fff;
       border-top:solid 1px #fff;
       border-bottom:solid 1px #666;
       border-right:solid 1px #666;
       color:#333;
       text-decoration:none;
       font:90%/150% "Lucida Sans", "Lucida Grande", "Bitstream Vera Sans", Arial, Helvetica, sans-serif;
       width:188px;
	   height:52px;
      }
      #centro ul li a:hover{
       background:#e1e1e1 url('imagenes/fondo_boton.jpg') 0 center no-repeat;
       border-top:solid 1px #ccc;
       border-left:solid 1px #ccc;
       color:#fff;
      }

      #centro ul li a strong{
       display:block;
       font-size:120%;
       line-height:150%;
       /* text-transform:uppercase; */
      }

#centro h1{
 font-size:30px;
 color:#ffa96f;
 font-weight:normal;
 padding: 10px;
}

#centro p {
 margin: 15px 20px 5px 20px ;
/* text-align: justify; */
}

/* simplified box model hack, as explained by Andy Clover:

   http://www.doxdesk.com/personal/posts/css/20020212-bmh.html  */

#centro ul li a{

 \width:247px;

 w\idth:191px;

}


#contenidowrap{
/* background:#fff url('imagenes/fondo_contenido.gif') repeat-x; */
 background-color:#fff;
 padding:0;
 margin:0;
 border-top:solid 1px #fff;/* TODO revisar borde */
 border-bottom:solid 1px #000;
 min-height:368px;
}

#contenido{
 width:760px;
 margin:0 auto;
/*  padding: 30px 0; */
 text-align:left;
  background-color:#fff;
 
}

#contenido h1{
 font-size:260%;
 color:#ffa96f;
 font-weight:normal;
 margin:20px;
}

#contenido h2{
 font-size:130%;
 color:#ffa96f;
 font-weight:normal;
 margin:20px;
}

#contenido p {
 margin: 10px 20px;
/* text-align: justify; */
}

#imagen {
 width:760px;
min-height:448px;
 margin:0 auto;
 padding: 0;
 text-align:center;
}

#navfotos {
 width:760px;
 height:22px;
 background-color:#eee;
}
#navfotos a{
	text-decoration:none;
	color:#000;
}
#navfotos a:visited{
	color:#000;
}
#navfotos a:hover{
	text-decoration:none;
	color:#ea7e14;
}

#navfotos span {
color:#ccc;
}


#navfotos .izquierda{
 float: left;
 }
#navfotos .izquierda img{
 margin-right:10px;
vertical-align:middle;
}

#navfotos .centrado{
 position:absolute;
 width:300px;
 margin-left:-150px;
 text-align:center;
 position:absolute;
 color:#e7912a;
 }
 
#navfotos .derecha{
 float: right;
}
#navfotos .derecha img{
 margin-left:10px;
 vertical-align:middle;
}

/* pie */
#piewrap{
 padding:0;
 margin:0;
 background-color: #7f7f7f;
}


#pie{
 font-size:85%;
 font-weight:bold;
 color:#fff;
 padding:10px 0;
}

#pie a:hover,
#pie a:visited,
#pie a:active{
color:#fff;	
	}
p#km-0 {
	color:#222;
	}

/* =========  <Presentación de los tejados> ============= */

#contenido div.subseccion {
 margin:10px auto;
 background-image:url('imagenes/marco_lados.png');
}
#contenido div.marco_superior {
height:18px;
background-image:url('imagenes/marco_superior.png');
}

#contenido div.marco_inferior {
 height:18px;
background-image:url('imagenes/marco_inferior2.png');
}

#contenido div.logo_producto {
float:left;
margin: 20px;
width:100px;
height:130px;
background-repeat:no-repeat;
text-align:center;
}
#contenido div.logo_producto:hover img{
 opacity:.9;
 filter: alpha(opacity=90);
}

#contenido div.logo_producto span{
text-indent:0 !important;
padding:0 !important;
margin:0 !important;
font-size:85%;
text-align: center;
}
#contenido div.titulo_subseccion {
 float:left;
 margin: 5px 20px;
 width:100px;
 height:100%;
}
#contenido div.contenedor_productos {
margin-left:140px
}

#contenido div.logo_producto a,
#contenido div.logo_producto a:visited,
#contenido div.logo_producto a:active{
text-decoration: none;
color:#000;
}

.mask {
display:block;
width:100px;
height:100px;
position:absolute;
z-index:1;
background-image:url('imagenes/marco_producto.png')!important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../imagenes/marco_producto.png');
cursor:pointer;
}

/* =========  </Presentación de los tejados> ============= */

/* =========  <Presentación de las tejas> ============= */

#contenido div.teja{
margin-top: 40px !important;
margin-bottom: 40px !important;
width:245px;
height:135px;
float:left;
}

#contenido div.teja a{
 display: block;
 color: #000;
 text-decoration: none;
}

#contenido div.teja a:hover{
 color: #e6a555;
 font-size: 150%;
}
#contenido div.teja a:hover img{
 -moz-opacity:0.6;
 opacity:.6;
 filster: alpha(opacity=60);
}

#contenido div.teja span{
position:absolute;
z-index:1
}
#contenido div.teja img {
vertical-align:top;
}

div.datosteja {
margin-top:50px;
/* width:380px;*/
text-align:left
}
div#imagenteja {
float:right;
/*margin-top:-200px;*/
display:none;
}

div.datosteja ul {
margin-left:30px;
}
div.datosteja ul li{
 margin: 6px 0;
 list-style-image: url(imagenes/ico_lista.gif);
}
div.datosteja dl {
margin-top:40px;
margin-left:30px;
}
div.datosteja dt {
 float:left;
 color: #00284a;
 font-weight: bold;
}
div.datosteja dd {
 margin: 6px 0;
 text-indent: 10px;
}

p#atencion {
 margin:20px;
 font-size:90%;
 font-style:italic;
}
/* =========  </Presentación de las tejas> ============= */


/* =========  <Listado de fichas técnicas> ============= */

#contenido #infoFichas {
width:100%;
height:310px;
overflow:auto;
margin: 40px auto;
}
#contenido #infoFichas ul { margin:20px 0; }
#contenido #infoFichas ul li{
 height:30px;
}
#contenido #infoFichas ul li a{
 background-image:url('imagenes/ico_pdf.png');
 background-repeat: no-repeat;
 background-color: transparent;
 background-position: 50px 0;
 display: block;
 padding:2px 0;
 padding-left:80px;
 }
#contenido #infoFichas ul li a:hover{
 background-color:#e7912a;
 color:#fff;
}

/* =========  </Listado de fichas técnicas> ============= */

/* =========  <Formulario de contacto> ============= */

div#formulario {
 width:100%;
 background-color:#fcf4e9;
 margin:20px 0 40px 0;
}
  div#formulario p{
   display: block;
   margin: 0;
   clear:both;
  }
  div#formulario label{
   width: 110px;
   float: left;
   margin-left: 10px;
   margin-top:8px;
  }
  div#formulario label.obligatorio{
   color:#e7912a;
  }
  div#formulario input, div#formulario select, div#formulario textarea{
   background-color: #f2f2f2;
   border: 1px solid #cbcbcb;
   margin-top:5px;
   float: left;
   padding: 2px 0 1px 0;
  }
  div#formulario input {
   height: 21px;
   width: 240px;
  }
  div#formulario select {
   height: 21px;
   width: 243px;
  }
  div#formulario textarea {
   height: 100px;
   width: 602px;
  }
  div#formulario input:focus,
  div#formulario textarea:focus,
  div#formulario select:focus {
    background-color: #f8f8f8;
  }
  div#formulario select#departamento{
   width: 605px;
  }
  p#submit {
   padding:10px;text-align:right;
  }
    p#submit input{
     background: auto;
     border: auto;
     width:auto;
     height:auto;
     float:none;
     margin: 0 20px;
     padding:0;
    }
    p#submit input#formulario_submit{
     margin-top:10px;
    }



div.infoBox {
	background-image:url('imagenes/back_logo.png');
	background-repeat:no-repeat;
	background-position: right bottom;
	border-top:1px solid #f6d8b3;
	border-left:1px solid #f6d8b3;
	border-bottom:1px solid #e7912a;
	border-right:1px solid #e7912a;
	background-color:#fcf4e9;
	}

div#infoFabricas {
	position:relative;
	float:right;
	width:246px;
	height:340px;
	z-index:2
	}
    
    
div#infoDistribuidores {
	height:340px;
	margin:0 0 40px 0;
	}

div#infoDistribuidores h2{
	margin: 15px auto;
	color: #e7912a;
	font-size:1.5em;
	font-weight:normal;
	text-align:center;
	text-decoration:underline;
}

div#infoDistribuidores h3{
	padding: 10px 25px;
	font-size:1.2em;
	font-weight:bold;
	color: #000;
}

div#infoDistribuidores h3 a,
div#infoDistribuidores h3 span{
	font-size:0.9em;
	font-weight:normal;
}

div#infoDistribuidores li{
	margin: 3px 30px;
	}

div#mapa {
	position:relative;
	float:left;
    width:463px;
    height:358px;
	background-image:url('imagenes/mapa_distribuidor.png');
	background-position:top left;
}

div#mapa div.iconito {
	position:absolute;
	cursor:pointer;
}
div#mapa div#fabrica {
top:120px;left:170px;
	}
div#mapa div#fabrica a{
	display:block;
    width:36px;
    height:36px;
    top:125px;left:180px;
    background-image:url('imagenes/ico_fabrica.png')!important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imagenes/ico_fabrica.png');
    background-repeat:no-repeat;
    background-position:center;
	}
div#mapa div#fabrica a:hover,
div#mapa div#fabrica a.selected{
    background-image:url('imagenes/ico_fabrica_ovr.png')!important;
    background-repeat:no-repeat;
    background-position:center;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imagenes/ico_fabrica_ovr.png');
	}
div#mapa div.deposito {
	}
div#mapa div.deposito a{
	display:block;
    width:36px;
    height:36px;
    background-image:url('imagenes/ico_deposito.png')!important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imagenes/ico_deposito.png');
    background-repeat:no-repeat;
    background-position:center;
	}
div#mapa div.deposito a:hover,
div#mapa div.deposito a.selected{
    background-image:url('imagenes/ico_deposito_ovr.png')!important;
    background-repeat:no-repeat;
    background-position:center;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../imagenes/ico_deposito_ovr.png');
	}
/* ADMIN */
   .adminAction {
   
   }
   .adminAction a{
   display:block;
   padding:2px;
   text-decoration:none;
   border:1px solid #ff796f;
   }
   .adminAction a:hover{
   background-color:#f2f2f2;
   }
   
   div.adminForm {
     background-color:#f2f2f2;
     border:1px solid #ffa96f;
     margin:0 20px 20px 20px;
     padding:20px 0;
   }
   div.adminForm p{
   display: block;
   margin: 0;
   clear:both;
  }
   div.adminForm label{
   width: 125px;
   float: left;
   margin-left: 10px;
   margin-top:8px;
  }
   div.adminForm input, .adminForm  select, .adminForm  textarea{
   background-color: #fff;
   border: 1px solid #cbcbcb;
   margin-top:5px;
   /*float: left;*/
   padding: 2px 0 1px 0;
  }
   div.adminForm input {
   height: 21px;
   width: 240px;
  }
   div.adminForm select {
   height: 21px;
   width: 243px;
  }
   div.adminForm textarea {
   height: 100px;
   width: 450px;
  }
   div.adminForm select#departamento {
   width: 605px;
  }

   div.adminForm ul {
   min-height:10px;
   margin: 0 10px 10px 10px ;
  }

ol.sortable-list *{
    list-style-type:decimal;
    list-style-position:inside;
  }
  

div#deposito.mapa {
	position:relative;
    width:463px;
    height:358px;
    margin:auto;
    border:1px solid #ffa96f;
    background-image:url('imagenes/mapa_distribuidor2.png');
    background-position:top left;
	cursor:pointer;
}

div#deposito.mapa div.iconito {
	position:absolute;
	cursor:pointer;
    width:16px;
    height:16px;
}

body#buscar #contenido p {
	margin:10px 30px;
}

.statusok,.statusnok {
	margin: 10px 20px;
	padding: 5px;
	text-align:center;
}

.statusok {
/*	color: #2AE692; */
	color: #e6922b;
	border:1px solid #e6922b; 
}

.statusnok {
	color:#E6532A;
	border:1px solid #E6532A;
}