/*****************************************
* Configuracion general de las etiquetas *
******************************************/

*{margin:0;padding:0}

html, body, ul, ul li, dl, dt, dd, img, form, table, td {
 border: 0px;
 list-style: none;
 border-spacing:0px;
 border-collapse:collapse;
}
html, body{ height:100%;}
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size:small; color: #CCCCCC;text-align: left;background-color:#000000;}
form { display: inline; color: #333; } 
img { border:0px; }
a img { border-width:0px;}
abbr, acronym, .abbr {border: 0px; }p { margin: 3px 0px 3px 0px; padding: 0px; color: #CCCCCC; } 
h4{ font-size:11px; font-weight:bolder; padding-bottom: 3px;}

/*****************************************
* Configuracion general de los enlaces   *
******************************************/
a 		{text-decoration:none; color:#CCCCCC;}
a:link,
a:visited 	{ color: #CCCCCC;} /*negro*/
a:hover		{ color: white; text-decoration: none;} /*azul*/


a.navegadorPrincipal{vertical-align:middle;text-decoration: none;color:#FFF; font-size:x-small;} 
a.navegadorPrincipal:hover		{ background-color: #000e4c;color: #FFF; text-decoration: none;font-size:x-small;} /*azul*/
a.navegadorPrincipal:active		{ background-color: #000e4c;color: #FFF; text-decoration: none;font-size:x-small;} /*azul*/

.secundario a:link,
.secundario a:visited 	{ text-decoration: none;} 

a.menuCabecera { color: #FFFFFF;font-size:x-small;} 
a.menuCabecera:link,
a.menuCabecera:visited 	{ color: #FFFFFF;font-size:x-small;} /*blanco*/
a.menuCabecera:hover	{ color: #FFFFFF; text-decoration: none; font-size:x-small;} /*blanco*/



a.tools:link,a.tools:active ,a.tools:visited{ color: #FFFFFF;font-size:x-small;} /*blanco*/
a.tools:hover{ color: #FFFFFF; text-decoration: none; font-size:x-small;} /*blanco*/

a.gama:link,a.gama:active,a.gama:visited 	{ color: black;} /*negro*/
a.gama:hover{ color: white;} /*blanco*/

/*****************************************
* Configuracion de la envolvente         *
******************************************/

#ENVOLVENTE { 
	text-align: center;
	margin:0 auto;
} 

/* Anchos según tamaño de ventana */
.RESOL800{width: 100%;min-width: 825px; min-height:600px;}
.RESOL1024{width: 100%;min-width: 825px; min-height:768px;}



/*****************************************
* Configuracion de la cabecera           *
******************************************/

#CABECERA {
	width: 100%;
	line-height:normal;
	background-color: #000000;
	padding: 30px 0px 30px 0px;

}
/*logo de ramon soler*/
#LOGO {
	float: left;
	margin-left:45px;
}
/*enlaces generales de todo el site*/
#MENUCABECERA {
	float: right;	
	margin-right:15px;
}
#MENUCABECERA ul{
	margin:11px 0px 0px 0px;
	padding:0px 0px 0px 0px;
}
#MENUCABECERA ul li{
	float: left;
	padding-left: 20px;
}

/*****************************************
* Configuracion de la barra de navegacion *
******************************************/
#BARRANAVEGADOR{
	background-color: #003366;
	width: 100%;
	height:22px;
	margin-top: 40px;
	padding-top:2px;
}	

/* Configuracion de los enlaces de la navegacion de proyectos*/
#BARRANAVEGADORLINKS{
	float:left;
}
#BARRANAVEGADORLINKS ul{
	list-style:none;
}
#BARRANAVEGADORLINKS ul li{
	float: left;
}
#BARRANAVEGADORLINKS ul li a{
	padding: 6px 12px;
	color:#FFFFFF;
}
#BARRANAVEGADORLINKS ul li a:hover{
	background-color: #000e4c;
}

/* Configuracion de los enlaces de Cesta y Mi Catalogo*/
#BARRANAVEGADORTOOLS{
	float:right;
	margin-right:13px;
}
#BARRANAVEGADORTOOLS ul li{
	float:left;
}
#BARRANAVEGADORTOOLS ul li.elementocesta{
	margin-right: 12px;
}
#BARRANAVEGADORTOOLS ul li.elementodocumento{
}

/******************************************************************
* Configuracion de la pantalla principal comun  a todos apartados *
*******************************************************************/
#PRINCIPAL {
	float: left;
	min-width: 840px;
	min-height: 550px;
	width:100%;
	margin-bottom: -2px;
	margin-left: -4px;
	border-left: 2px solid #000e4c;
	border-right: 2px solid #000e4c;
	border-bottom: 2px solid #000e4c;
	background-color: #595959;
}


/******************************************************************
* Configuracion de la pantalla inicial                            *
*******************************************************************/
#PRINCIPALINICIO {
	background-color:#000000;
	width: 100%;
	height: 100%;
	margin: auto;
	position:relative;
}
#PRINCIPALINICIOCENTRADO{
	width: 780px;
	height: 300px;
	position:absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	margin-left: -390px;
	margin-top: 110px;
}
#FLASHINTRO{
	width: 350px;
	float: left;
	margin: 0px 0px 0px 0px; /* Arriba Derecha Abajo Izquierda*/
}
#TEXTOINICIO{
	margin: 0px 0px 0px 60px; /* Arriba Derecha Abajo Izquierda*/
	width: 340px;
	text-align: left;
	float: left;
}


/*****************************************************************************
* Menu de navegación con las familias del apartado del Navegador de producto *
******************************************************************************/
#PRINCIPALMENU {
	float: left;
	position:relative;
	line-height:normal;
	min-height: inherit;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 12px;/*Puede que haya que hacer un hack para IE6, puede que haya que elimnarlo*/
	width: 140px;
	z-index: 10;
}
#PRINCIPALMENU div ul ul{
	border: 2px #000e4c solid;
}
#PRINCIPALMENU div ul ul ul{
	border: 2px #000e4c solid;
}


/***********************************************************************************************************
* Configuracion de la lista de enlaces seguidos dentro del contenedor priccipal del navegador de productos *
************************************************************************************************************/
#CAMINOPAN{
	width:100%;
	clear:both;
	height:16px;
	padding-left:8px;
}
#CAMINOPAN li{
	background-image: url(./../img/iconos/flecha.gif);
	background-position: left center;
	background-repeat: no-repeat;
	padding-left: 16px;
	padding-top: 2px;
	margin-left: 5px;
	float:left;
}
#CAMINOPAN ul li a{
	vertical-align:top;
}
#CAMINOPAN ul li a{
	color: #CCCCCC;
	font-size:x-small;
}
#CAMINOPAN ul li:last-child a{
	color: #999999;
}


/************************************************************************************************
* Este es el contenedor de la zona Navegador de productos donde se ven las series y referencias *
*************************************************************************************************/
#PRINCIPALCONTENEDOR {
	position:relative;
	width:79%;
	float: left;
	padding-left: 8px;
	padding-right: 8px;
	min-height:inherit;
	border-left: 2px #000E4C solid;
	text-align: left;
	z-index: 0;
	margin-bottom: 7px;
	padding-top: 10px;
	min-height: 600px;
}


/* Sub-apartados para mostrar las diferentes gamas*/
div.PRINCIPALTABLA{
	padding-bottom: 10px;
	padding-top: 10px;
	padding-left:15px;
	clear:both;
	position: relative;0
}
/* Titulo de cada gama de productos*/
div.GAMA{
	clear:both;
	margin: 0px 0px 4px 16px;
	width:100%;
	padding: 17px 0px 10px 0px;
	border-bottom: #000E4D 2px solid;
}
/* Cada serie o referencia que sale en las tables*/
div.ELEMENTO{
	position:relative;
	float:left;
	width: 125px;
	margin-bottom: 6px;
	margin-left:4px;
	margin-right:15px;
	height:135px;
}
div.ELEMENTO:hover{
	background-color:#afafaf;
	cursor:pointer;
}
div.ELEMENTO a p{
	padding-left:4px;
	color: #CCCCCC;
}
div.ELEMENTO:hover a p, div.ELEMENTO a:hover p{
	color:#FFF;
}
div.ELEMENTO a:hover p,div.ELEMENTO a:focus p{
	color:#FFF;
	background-color:#afafaf;
}
div.ELEMENTOS{
	padding: 7px 0px 0px 6px;
}

/***********************************************************************************************************
* Configuracion del buscador que esta debajo del navegador del producto                                    *
************************************************************************************************************/
#PRINCIPALBUSCADOR{
	float:left;	
	position:relative;
	padding: 4px 0px 4px 0px;
	margin-top:20px;
	margin-left:6px;
	width: 130px;
	overflow:hidden;
	border-bottom: 2px #000E4C solid;
	border-top: 2px #000E4C solid;
}
#PRINCIPALBUSCADOR p{
	font-size: 14px;
	margin-bottom: 13px;
}
.campoBusqueda{
	float:left;
	margin-left:7px;
	width: 90px;
	height: 18px;
	border: 1px #CCCCCC solid;
	font-size: 12px;
	text-align:center;
	background-color:#595959;
	color:#CCCCCC;	
}
.botonOk{
	float:left;
	width: 30px;
	height: 26px;
	color:#CCCCCC;	
	background-color:#595959;
	border: 0px;
	cursor:pointer;
	float:left;
}

/* Lineas que salen en los resultados de las busquedas */
div.LINEA{
	position:relative;
	float:left;
	width: 450px;
	margin-top: 15px;
}
div.LINEA:hover{
	background-color:#afafaf;
	cursor:pointer;
}
div.LINEA:hover a p{
	color:white;
}
div.LINEA a p{
	position:relative;
	float:left;
	width: 350px;
	font-size:12px;
	padding-left:4px;
}

/***********************************************************************************************************
* Configuracion de la ficha de cada referencia                                                             *
************************************************************************************************************/
#PRINCIPALFICHA{
	float:left;
	position:relative;
	z-index: 0;
	width: 100%;
	margin: 12px 0px 2px 6px;
}
#FICHAIZQUIERDA{
	float:left;
	position:relative;
	width: 55%;
	padding: 0px 10px 10px 10px;
}
#FICHADERECHA{
	float:left;
	position:relative;
	margin-left: 20px;
}
#FICHADERECHA a img{
	margin-bottom: 50px;
}
#FICHATEXTO{
	border-bottom: #003366 solid 2px;
	min-height: 220px;
}
#FICHATEXTO p{
	color: black;
}
#FICHATEXTO p b{
	color: #CCCCCC;
}

/* La seccion de los enlaces para añadir imagen/dxf, descargar catalogo y añadir referencia a Mi catalogo */
#PANELTOOLS{
	margin-top: 20px;
	font-size: small;
	line-height:24px;
}
#PANELTOOLS p{
	color: #CCCCCC;
}
#PANELTOOLCESTA{
	clear:both;
}
#PANELTOOLCESTA ul li{
	width: 150px;
	height: 32px;
	margin-left:15px;
	padding-left: 30px;
}
#PANELTOOLCESTA ul li.jpg{
	background-image: url(./../img/iconos/JPG.gif);
	background-position: left top;
	background-repeat: no-repeat;
}
#PANELTOOLCESTA ul li.dxf{
	background-image: url(./../img/iconos/DXF.gif);
	background-position: left top;
	background-repeat: no-repeat;
}
#PANELTOOLCESTA ul li a{
	font-size:x-small;
}
#PANELTOOLCESTA ul li a:hover{
	color:#FFFFFF;
}
#PANELTOOLCESTA ul li:hover{
	background-color:#999;
}
#PANELTOOLSENLACES{
	clear:both;
}
#PANELTOOLSENLACES a{
	display:block;
}


/***********************************************************************************************************
* Configuracion de estilo del area de Descargas                                                            *
************************************************************************************************************/
#PRINCIPALENCABEZADO{
	min-width: 253px;
	width: 32%;
	text-align:left;
	float:left;
	position:relative;
	background-color:#999999;
	line-height: 22px;
	margin:15px;
	margin-top:41px;
	padding: 7px;
	color: black;
	padding-bottom: 15px;
}
#PRINCIPALENCABEZADO select{ 
	width: 185px; 
	color: #000; 
	font-size: 1.1em;
	padding: 2px;
	margin-left: 70px;
}
#PRINCIPALCENTRO{
	width:60%;
	float:left;
	position:relative;
	margin: 15px 0px 15px 15px;
}
#PRINCIPALFORM{
	text-align: left;
	position: relative;
	width:1000px;
}
#PRINCIPALDESCARGA{
	text-align: left;
	width:90%;
	position:relative;
	float: left;
	margin: 10px 0px 0px 0px;
	border-top: #036 solid 2px;
}
#PRINCIPALDESCARGA tbody tr td a img{
	padding-left: 4px;
}
#PRINCIPALDESCARGA td,th{
	padding-left: 10px;
	padding-top: 5px;
}
#PRINCIPALDESCARGA td:hover{
	font-weight:bolder;
}
#PRINCIPALDESCARGA thead tr{
	height:40px;
}
/* Color de fondo de las filas de la tabla*/
.tablapar{
	/*background-color:;*/
}
.tablaimpar{
	background-color:#999999;
}


/***********************************************************************************************************
* Configuracion de estilo del area de las certificaciones                                                  *
************************************************************************************************************/
/* Estilo del texto cabecera de la seccion */
#TEXTOCERTIFICADOS{
	width: 700px;
	clear:both;
	text-align:left;
	margin: 10px 0px 0px 15px;
}
/* Estilo de las cajas de filtrado*/
#MENUFILTRADO{
	position:relative;
	float:left;
	margin-top:23px;
	margin-left:15px;
	margin-right:35px;
	width: 200px;
	text-align:left;
	font-size: 11px;
}
#MENUFILTRADO ul{
	list-style-type:none;
	margin-bottom:10px;
}
#MENUFILTRADO ul li{
	text-decoration:none;
}
#FILTRO1{
	overflow:auto;
	width: 200px;
	height: 105px;
	border: 1px #E2E1DD solid;
	margin-bottom: 20px;
}
.filtropar{
	background-color:#999999;
}
#FILTRO1CAPA{}
#FILTRO2{
	overflow:auto;
	width: 200px;
	height: 100px;
	border: 1px #E2E1DD solid;
}

/* Estilo del contenedor de los caertificados */
#myContent{
	text-align:center;
	left: 40px;
	background-color:#999;
	opacity:0.8;/* Solo afecta a los nuevos navegadores, no se aplica filtro internet explorer porque queda mal*/
}
#PANELCERTIFICADOS{
	position:relative;
	float:left;
	width:580px;
	margin-top:40px;
}
#PANELCERTIFICADOS ul{
	position:relative;
	float:right;
	width:31px;
	margin-left:35px;
}
#PANELCERTIFICADOS ul li#btnUp{
	margin-top: 40px;
	float:left;
	background-image: url("../img/iconos/flechaArriba.png");
	width:34px;
	height:34px;
}
#PANELCERTIFICADOS ul li#btnDown{
	margin-top: 220px;
	float:left;
	background-image: url("../img/iconos/flechaAbajo.png");
	width:34px;
	height:34px;
}
/* Estilo de cada certificado */
.CERTIFICADO{
	position:relative;
	float:left;
	margin:8px;
	width: 230px;
	height: 120px;
}
.CERTIFICADO a{
	cursor:pointer;
}
.CERTIFICADO a:hover{
	cursor:pointer;
	color:#FFFFFF;
}
.CERTIFICADO a span{
	margin-left: 6px;
}

/***********************************************************************************************************
* Configuracion de estilo del area de documentos                                                  *
************************************************************************************************************/
/* Estilo de las caja de texto */
#DOCUMENTOSTEXTO{
	width: 300px;
	margin-left:15px;
	margin-top:25px;
	padding: 10px;
	background:#999999;
	float:left;
}
#DOCUMENTOS{
	width:450px;
	text-align:center;
	margin: 25px;
	float:left;
}
/* Estilo de cada documento*/
#DOCUMENTO{
	margin:10px;
	float:left;
	width: 200px;
	height:120px;
	text-align:center;
}
/* Estilo del primer documento para que quede centrado */
/*#DOCUMENTO:first-child{
	clear:both;
	width:100%;
}
*/
/***********************************************************************************************************
* Configuracion de estilo del area de proyectos                                                            *
************************************************************************************************************/
/* Estilo del texto cabecera de la seccion */
#TEXTOPROYECTOS{
	width: 700px;
	clear:both;
	text-align:left;
	margin: 10px 0px 0px 15px;
}

.galleria{
	list-style:none;
	width:200px
}
.galleria li{
	display:block;
	width:80px;
	height:80px;
	overflow:hidden;
	float:left;	
	margin:0 10px 10px 0;
}
.galleria li a{
	display:none;
}
.galleria li div{
	position:absolute;
	display:none;
	top:0;
	left:180px;
}
.galleria li div img{
	cursor:pointer;
}
.galleria li.active div img,.galleria li.active div{
	display:block;
}
.galleria li img.thumb{
	cursor:pointer;
	top:auto;
	left:auto;
	display:block;
	width:auto;
	height:auto;
}
.galleria li .caption{
	display:block;
	padding-top:.5em;
}
* html .galleria li div span{
	width:400px;  /* IE hack: LE DOY LAYOUT PARA QUE SE VISIONE */
}
.caption{
	font-style:italic;
	color:#FFF;
}
.demo{
	position:relative;
	margin-top:2em; 
	margin-bottom: 10px;
}
.gallery_demo{
	width:90%;
	margin:0 auto;
}
.gallery_demo li{
	width:68px;
	height:50px;
	border:1px solid #44424f;
	margin: 2px 2px;
	background:#999;
}
.gallery_demo li div{
	left:240px;
}
#main_image{
	margin:0 auto 30px auto;
	height:300px;
	width:700px;
}
#main_image img{
	margin-bottom:10px;
}
.nav{
	padding-top:10px;
	padding-bottom:10px;
	clear:both;
	font-size:12px;
	letter-spacing:3px;
	text-transform:uppercase;
}


/***********************************************************************************************************
* Configuracion de estilo del formulario de contactos                                                      *
************************************************************************************************************/

#frmContact {
	width:700px;
	height:1%;
	display:inline;
	text-align:left;
	float:left;
	margin: 20px 0px 0px 0px;
	color: #CCC;
}		
#pie {
	float:left;
	display:inline;
	width:670px;
	margin:0px 15px;
	text-align:justify;
	padding:0px 0px 15px 0px;
}
#messageLabel,#message { 
	display: none !important; 
}
#frmContact label { 
	font-size: 1em; 
	line-height: 140%; 
	margin: 10px 0 .2em 30px; 
	float:left;
	clear:both;
}
#frmContact input, #frmContact select{ 
	width: 350px; 
	color: #000; 
	font-size: 1.1em;
	padding: 2px;
	float:left;
	clear:both;
	display: inline;
	margin: 0 0 .2em 30px;  
}

#frmContact textarea{ 
	width: 500px;
	height: 150px;
	color: #000;
	font-size: 1em; 
	padding: 4px; 
	background: #fff; 
	border: 1px solid #999; 
	margin: 0 0 .2em 30px; 
	overflow: auto; 
	float:left; 
	clear:both;
 }
.error-message, label.error { 
	color: red;
	margin: 0 0 .5em 90px;
	display: inline;
	font-size: 0.9em !important;
	font-weight:bolder; 
}