/*
 *
 *  General
 *
 */	

		
* {
	margin:0;
	padding:0;
	}
html, body {
	height:100%;
	}		
body{
	margin:0;
	padding:0;
	font:12px Arial, Helvetica, sans-serif;
	line-height:1.5em;
	background:#717DBD url(../img/fondo.gif) no-repeat center 0px;
	}
a:focus { 
	outline: 0;	
	}	
body#select{
	background:#201c1d;
	}
ul, li {
	list-style:none;
  	list-style-type: none;      	
	}	
a:link,	a:visited, a:active { 
	text-decoration:none; 
	color:#000;
	font-size:11px;
	}	
a:hover { 
	text-decoration:none;
	color:#000;
	} 

#galeria{	
	}
	
a.biok{
	color:#fff;
	}

h2{
font-size:18px;
font-weight:normal;

}	
	
/*
 *
 *   Idioma
 *
 */ 	


.con{
	margin:10px auto;
	position:relative; /* puts container in front of distance */
	text-align:left;
	height:430px;
	width:750px;
	clear:left;
	background:none;	
	}
.esp a{
	float:left;
	margin:10px 0 0 1px;	
	text-indent:-10000px;
	background:url(../img/esp.gif) no-repeat;
	height:35px;
	width:89px;
	} 
.eng a{

	float:left;
	margin:10px 0 0 -3px;
	text-indent:-10000px;
	background:url(../img/eng.gif) no-repeat;
	height:35px;
	width:89px;
	}
.log{
        float:left;
	text-indent:-10000px;
	background:url(../img/logo2.jpg) no-repeat;
	height:53px;
	width:188px;
	}

#select .log{
	position:relative;
	float:left;
	top:300px;
	left:74px;
/*	margin:305px 0 0 00px; */
	text-indent:-10000px;
	background:url(../img/logo2.jpg) no-repeat;
	height:53px;
	width:188px;	
	}
#select .logos{	
	position:relative;
	top:0px;
	left:0px;
	width:475px;
	height:101px;
	background:url(../img/biok_biokhome.jpg) no-repeat;
	}
#select a.logobiok{	
	float:left;
	display:block;
	width:205px;
	height:101px;
	text-indent:-4000px;	
	}
#select a.logobiokhome{	
	float:left;
	display:block;	
	width:270px;
	height:101px;
	text-indent:-4000px;
	}	
	
#distancia { 
		width:1px;
		height:50%;
		margin-bottom:-215px; /* half of container's height */
		float:left;
		}		
#wrap{
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:430px;
		width:730px;
		clear:left;
		background:none;
		}	

#triar{ height:auto; background:#717DBD;}
#triar #wrap{
    margin-top:300px;
    width:200px; 
    height:100px;
 }	
#dades{
	width:100%;
	height:450px;
	padding:0;
	margin:0;
	}
		
#content{
	float:left;
	width:100%;
	height:430px;
	padding:0;
	margin:0;
	background:#fff;
	}
#logo a{
	float:right;
	width:106px;
	height:32px;
	text-indent:-3000px;
	background:url(../img/logo.gif) no-repeat;
	padding:0;
	margin:20px 20px 0 0;
	}
*html #logo{ margin-left:5px;}

#volver{
	clear:both;
	float:left;
	width:auto;
	margin:0 0 0 20px;
	}
#volver a { font-size:11px;}


/*
 *
 *   Novetats PORTADA
 *
 */    
.bot a{
    float:left;
    width:auto;
    margin:23px 0 0 0px;
    color:#000;
    font-weight:bolder;
    padding:2px 8px 2px 0px;
    }    
.bot a:hover{
    color:#812990;    
    }
#contnovetats{
	 float:left; 
	 width:100%; 
	}
#novedades .bot a{ margin-left:0px;}
#novetats #texte{
    float:left;
    margin:5px 0 0 20px;
    height:350px;
    background:url(../img/reportaje.gif) no-repeat 0 0;
    width:385px;
    overflow:auto;
    } 	
#novetats #texte p{
	margin:100px 0 0 130px;
	}	
#novetats #foto{
    float:left;
    margin:10px 0 0 20px;
    width:280px;
    height:345px;
    overflow:auto;
    }
#novetats #foto a{	
	float:left;
	width:125px;
	height:125px;
	margin:0 5px 5px 0;
    }	
#novetats #foto a img{
	width:125px;
	height:125px;	
    }		
*html #novetats #foto{ margin:25px 0 0 10px;}
   







/*
 *
 *   Submenu  desplegable de Productes
 *
 */	
ul#submenu{
/*	display:none;*/
	position:absolute;
	 width:303px;
	top:17px;
	left:0px;
	margin:0;
	padding:0px;
	z-index:10000;
	}
ul#submenu li{
	position:relative;
	display:block;
	margin:0;
	padding:0;
	}
ul#submenu li a#tipo{
	position:relative;
	width:140px;
	height:18px;
	background:url(../img/sub_esp.gif) 0 0;	
	text-indent:-3000px;	
	}
ul#submenu li a#tipo:hover{
	position:relative;
	width:140px;
	height:18px;
	background:url(../img/sub_esp.gif) 0 -18px;	
	text-indent:-3000px;	
	}	
	
ul#submenu li a#nombre{
	position:relative;
	width:163px;
	height:18px;
	background:url(../img/sub_esp.gif) -141px 0;	
	text-indent:-3000px;
	}	
ul#submenu li a#nombre:hover{
	position:relative;
	width:163px;
	height:18px;
	background:url(../img/sub_esp.gif) -141px -18px;		
	text-indent:-3000px;
	}		
	
	
	
/*
 *
 *   Inici
 *
 */  
#inicio #fotoinici{
	position:relative;
	top:0px;
	left:40px;
	width:393px;
	height:285px;
	margin:109px 0 0 20px;
	}
#inicio #fotoinici table{
	width:100%;
	height:100%;
	}
#inicio #novedades{
	position:absolute;
	top:180px;
	left:485px;
	width:215px;
	height:210px;
	}	
	

.titol{
	display:none;
	width:100%;
	padding:0;
	}
	

/*
 *
 *   Productes
 *
 */  
/* contendor menu productes */
#menupro{
	float:left;
	position:relative;
  	width:170px;
	margin:28px 0 0 20px;
	padding:0px;
	z-index:1;
	}
#menupro #menuscroll{
	position:relative;
  	width:180px;
	height:390px;	
	overflow:auto;
	z-index:10;	
	}
*html #menupro,
*html #menupro #menuscroll{
	margin-left:7px;
  	width:170px;	
	}		
/* contendor menu subproductes */	
#subpro{ 
	float:left;
  	width:180px;
	height:390px;
	margin:28px 0 0 5px;
  	padding:0px;
	}
/* contendor fotos productes */
#productos #fotoProd,
#categorias #fotoProd{
	float:left;
	margin:5px 0 0 0;
	padding:0;
	}
/* fotos productes */
#fotoProd .fotPro{
	display:none;
	}
	
	
	
	
ul.menuproduc{
	float:left;
  	width:160px;
	height:370px;
	margin:0;
  	padding:0;
	}
ul.menuproduc li {
  	width:160px;
  	margin:0;
  	padding:0;  
  	border-bottom:1px solid #ddd;	           
	}	
ul.menuproduc li a {
  	position: relative;  
	top:0;
	left:0;
	display: block; 
	width:150px;
	margin:0;
	padding:0px 0px 0px 10px;
  	color:#000;   	
	text-decoration:none; 
	}
ul.menuproduc li a:hover{ 
	background:#812990;
	}
	
/* subproducte */
ul.submenuproduc{
	display:none;
	float:left;
  	width:160px;
  	margin: 0px; 
  	padding:0px;   
	}
ul.submenuproduc li {
  	position: relative;         
  	width: 160px;
  	margin:0;
  	padding:0;  
  	border-bottom:1px solid #ddd;			 
	}
ul.submenuproduc li a { 
  	position:relative;  
	color:#000; 
	display:block;
	width:150px;

	margin:0;
	padding:0px 0px 0px 10px;
	text-decoration:none; 	
	}
ul.submenuproduc li a:hover,
.subact{ 
	background:#333;
	color:#fff;	
	}	



/*
 *
 *   Produce
 *
 */ 	
#fotosmini{
	float:left;
  	width:130px;
	margin:28px 0 0 20px;
	padding:0px;
	/*z-index:0;*/	
	}
#fotosmini #menuscroll{
	/*z-index:0;*/
	position:relative;
  	width:130px;
	height:374px;	
	overflow:auto;
	}
*html #fotosmini,
*html #fotosmini #menuscroll{
	margin-left:7px;
	}
#contFotos{
	float:left; 
	width:540px; 
	margin:0 0 0 10px;
	}		
.torna a{
	float:left;
	width:100px;
	margin:23px 0 0 20px;
	font-weight:bold;
	color:#000;	
	}	
.torna a:hover{
	color:#812990;	
	}
#fitxa{
	float:left;
	width:160px;
	margin:15px 10px 0 5px;
	}
#dis { margin: 0 0 10px 0;}
#imatges{
	float:left;
	width:auto;
	margin:0 0 0 5px;
	}
#imatges #titol{
	margin:0;
	padding:0;
	height:29px;
	}

	
	
	
/*
 *
 *  Empresa
 *
 */	
ul#menuEmpresa{
	float:left;
	width:auto;
	height:18px;
	margin:0px 0 0 20px; 
	padding:0;
	}
* html ul#menuEmpresa{margin:0 0 0 5px;}
ul#menuEmpresa li{ float:left;}
ul#menuEmpresa li a{
	float:left;
	width:auto;
	height:18px;
	padding:0px 10px 0 10px;
	margin:28px 0 0 0px;
	}
*html ul#menuEmpresa{ margin-left:10px;}

ul#menuEmpresa li a:hover{
	background:#333;
	color:#fff;
}
.empresa_filosofia .filosofia,
.empresa_historia .historia,
.empresa_servicio .servicio,
.empresa_calidad .calidad,
.empresa_diseny .diseny,
.empresa_acabados .acabados{
	background:#812990;
	color:#fff;
	}
	
#empresa #foto{
	float:left;
	margin:55px 0 0 20px;
	width:340px;
	height:340px;
	}
*html #empresa #foto{ margin:25px 0 0 10px;}
#empresa #titol{
	float:left;
	margin:50px 0 0 20px;
	width:320px;
	}	
#empresa #texte{
	float:left;
	margin:10px 0 0 20px;
	width:320px;
	height:260px;
	overflow:auto;
	}	
#empresa #acabados #titol{
	float:left;
	margin:40px 0 0 20px;
	width:auto;
	}
* html #empresa #acabados #titol{ margin:10px 0 0 10px;}	
#empresa #acabados #texte{
	float:left;
	margin:0px 0 0 20px;
	width:690px;
	height:auto;
	}	
* html #empresa #acabados #texte{margin:0 0 0 10px;}	
	
.subtitol{
	float:left;
	width:310px;
	margin:0 10px 10px 20px;
	}

.col{
	float:left;
	width:330px;
	height:275px;
	margin:0 0 0 20px;
	overflow:auto;
	}
* html .col  { margin:0 0 0 10px;} 
* html .subtitol { margin:0 0 10px 10px;} 

.col table {
	margin:0;
	padding:0;
	}
.col table td{
	width:33%;
	padding:0 0 30px 0;
	}
.col table td img{
	float:left;
	width:63px;
	}
.col table td span{
	clear:both;
	float:left;
	font-size:11px;
	width:100%;
	}	
.tbl{
	width:310px;
	}
.tbl td{ vertical-align:top;}
	
	
	
/*
 *
 *   Distribuidores
 *
 */ 	
	
#datos{	
	position:relative;
	top:28px;
	left:20px;
	height:385px;
	width:125px;
	overflow:auto;	
	}		
#datos a{
	float:left;
	width:85px;
	padding:1px 10px 1px 10px;
	font-weight:bolder;
	
	}
#datos a:hover{
	background:#812990;
	color:#fff;
	}
#datos ul{
	float:left;
	width:90px;
	margin:20px 0 0 0;
	}
#datos ul li{
	margin:0 0 0 10px;
	}
#datos ul li p{
	color:#812990;
	font-weight:bolder;
	}	
#mapa{
	z-index:10;
	position:absolute;
	top:100px;
	left:255px;
	width:453px;
	height:230px;
	}
#mapa p{ margin: 0 0 0 200px;}

#prov{
	display:none;
	position:absolute;
	top:45px;
	left:146px;
	width:98px;
	height:385px;
	padding:0 0 0 10px;
	overflow:auto;
	}
	
	
	
/*
 *
 *  Proyectos
 *
 */	
 
#proyectos #menupro{
	float:left;
	position:relative;
  	width:170px;
	margin:28px 0 0 20px;
	padding:0px;
	z-index:1;
	}
#proyectos #menupro #menuscroll{
	position:relative;
  	width:180px;
	height:390px;	
	overflow:auto;
	z-index:0;	
	}
*html #proyectos #menupro,
*html #proyectos #menupro #menuscroll{
	margin-left:7px;
  	width:170px;	
	}	
 #proyectos #titol{
 	float:left;
	width:500px;
	margin:30px 0 0 20px;
 }
*html #proyectos #titol{ margin-left:10px;}
 #proyectos #texte{
 	clear:both;
 	float:left;
	width:340px;
	margin:10px 0 0 20px;
	height:320px;
	overflow:auto;
 }
*html #proyectos #texte{ margin-left:10px;} 
#proyectos #fotoProd{
 	float:left;
	width:auto;
	margin:5px 0 0 20px;
 	}
 #proyectos #foto{
 	float:left;
	width:auto;
	margin: 10px 0 0 10px;
 	}
#proyectos .fotPro{
	float:left;
	width:auto;
	}

 
 
	
/*
 *
 *  Clientes
 *
 */	
ul#menuClientes{
	float:left;
       width:auto;
	height:18px;
	margin:0 0 0 20px; 
	padding:0;
	}
ul#menuClientes li {float:left; width:auto;}
ul#menuClientes li a{
	float:left;
	width:auto;
	height:18px;
	padding:0px 10px 0 10px;
	margin:28px 0 0 0px;
	}

ul#menuClientes li a:hover{
	background:#333;
	color:#fff;
}
.clientes_fichas .fichas,
.clientes_circulares .circulares,
.clientes_catalogos .catalogos,
.clientes_catalogos .diseny,
.clientes_catalogos .acabados{
	background:#812990;
	color:#fff;
	}
.conClients{
	clear:both;
	float:left;
	margin:15px 0 0 20px;
       *margin:40px 0 0 20px;
	padding:0;
	}	
*html .conClients{
	margin:25px 0px 0px 10px;
	}	
#clientes #foto{
	float:left;
	width:auto;
	margin:50px 0 0 60px;
	}
*html #clientes #foto{
	position:absolute;
	top:10px;
	left:240px;
	margin:110px 0 0 115px;
	}
ul.puntClients{
	float:left;
	width:250px;
	height:285px;
	overflow:auto;
	margin:10px 0 0 0;
	padding:0 0 0 30px;
	}
*html ul.puntClients{ width:247px;}
ul.puntClients li {
	list-style:url(../img/punt.gif);
  	list-style-type:none;
	padding:3px 0 3px 0;
	}	
ul.puntClients li a:hover{
	color:#812990;
	}		




/*
 *
 *   Formulari de consulta
 *
 */ 	
	
.formErrors{
	position:absolute;
	width:450px;
	font-size:12px;
	color:#CC3300;
	font-weight:bold;
	margin:0 0 0 20px;
	}
#formulari{
	float:left;
	width:720px;
	margin:0;
	padding:0;
	}
.formc{
	float:left;
	width:350px;
	margin:0 0 5px 0;
	}
*html .formc { margin-bottom:10px;}
label{
	float:left;
	width:90px;
	text-align:right;
	}
label span{
	color:#717DBD;
	}
#colum{
	float:right;
	text-align:right;
	width:200px;
	margin:40px 10px 0 0;
	padding:0;
	}
*html #colum{ margin-right:5px;}
#inp{
	float:left;
	width:335px;
	border:0px;
	margin:85px 0 0 73px;
	padding:0;
	}
*html #inp{ margin:65px 0 0 40px;}	
.txtin{
	text-align:left;
	}
#tex{
	float:left;
	width:195px;
	border:0px;
	margin:85px 0 0 5px;
	padding:0;
	}
#tex .formc{
	width:100%;
	}
.input{
	float:left;
	margin:0 0 5px 10px;
	padding:1px;
	width:230px;
	border:1px solid #666;
	font:11px Arial, Helvetica, sans-serif;
	}
.enviar{
	float:left;
	width:95px;
	height:18px;
	text-indent:-3000px;
	}
.formi{
	float:left;
	width:195px;;
	margin:0 0 0 0;
	}	
.borrar{
	float:right;
	width:95px;
	height:18px;
	margin: 0 0 0 3px;
	text-indent:-3000px;
	}	
.inputxt{
	clear:both;
	float:left;
	width:191px;
	height:90px;
	margin:0;
	padding:1px;
	border:1px solid #666;
	overflow:auto;
	}
#adre{
	text-align:right;
	width:200px;
	margin:0;
	padding:0;
	}
	
	
#carga{
	position: absolute;
	left: 0;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	background:#fff url(../img/spinner.gif) no-repeat center;
	}
	
	
/* error  */

#error #titol{
	float:left;
	width:450px;
	margin:20px 0 0 20px;
	}	
*html #error #titol{ margin-left:10px} 
#error #logo a{
	float:left;
	width:109px;
	margin:20px 0 0 130px;
	padding:0;
	}
#error #foto img{
	float:left;
	width:340px;
	margin:15px 0 0 10px;
	}
#error #texte{
	clear:both;
	float:left;
	width:340px;
	margin:10px 0 0 20px;
	}	
*html #error #texte{ margin-left:10px} 
	

 a.error:link,
 a.error:visited,
 a.error:active{
	font:10px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:#000000;	
	padding:3px 10px 3px 10px;
	font-weight:normal;
	text-transform:uppercase;
	}
 a.error:hover{
	color:#000;
	background-color:#812990;
	}