*{
margin:0;
padding:0;
}

body{
background-color:#fff;
font:100%/120% "Trebuchet MS",Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
/*font-family:Georgia,"Times New Roman",Times, serif;*/

/* la definición base de la fuente va en porcentual %, el resto en relativos 'em' */
}

/*

COLORES

NARANJA 	#ffa616;
GRIS:		#808080;
*/

/* De Marca: Casa Saumell */
.marca {
color:#ee9900;
font-weight:bold;
}


/* FONDO SUPERIOR DE LA PAGINA */
#fondo_superior{}


/* ESTRUCTURA GENERAL */
#pagina{
position:relative;
width:960px;
min-height:400px;
margin:0 auto;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* CABECERA */
#cabecera{
position:relative;
width:100%;
height:86px;
background:#fff url("../img/fondo_cabecera.png") no-repeat 0px 0px;
z-index:200;
}

#logo{
	position:absolute;
	left:0;
	top:0;
	width:256px;
	height:86px;
}
#frase{
	position:absolute;
	left:256px;
	top:0;
	width:524px;
	height:86px;
}
#menu_soporte{
	position:absolute;
	right:0;
	top:11px;
	width:180px;
	height:86px;
	font-size:.7em;
}
#menu_soporte a,#menu_soporte span{
	display:block;
	height:20px;
	line-height:20px;
	padding-left:32px;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* MENU */
#menu{
position:relative;
width:100%;
height:44px;
overflow:hidden;
background:#fff url("../img/fondo_menu.png") no-repeat 0px 0px;
z-index:300;
}

#menu ul, #menu li{
margin:0;
padding:0;
list-style:none;
}
#menu li{
	float:left;
}

#menu img{
	position:relative;
}
#menu a:hover img{
	margin-top:-88px;
}
#menu .actual img{
	margin-top:-44px;
}

#menu li.item_quienes{
	float:right;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Principal */

#principal{
position:relative;
width:100%;
min-height:386px;
background:#fff;
}

/* --- lateral izquierdo --- */
#lateral{
position:relative;
float:left;
width:256px;
overflow:hidden;
}
#lateral img{width:256px;}

#contenido{
position:relative;
float:left;
width:704px;/* esta hay que corregirlo para IE */
}



#margen{
	margin:1em;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* PIE */
#pie{
clear:both;
height:53px;
width:100%;
font-size:.7em;
background:#fff url("../img/fondo_pie.png") repeat-x 0px 0px;
text-align:left;
}
#pie #saumell img{
	float:left;
}
#pie #saumell p {
color:#555;
float:left;
display:inline;
margin-left:.5em;
margin-top:.1em;
}
#pie a{
color:#dd8800;
text-decoration:none;
padding:0 .2em;
}

p#tecnico{
	clear:both;
	margin-left:260px;
}
p#tecnico a{
	color:#dd8800;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* GENERICOS */

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


h1{color:#850;font-size:1.4em;margin:.8em 0;margin-top:0}
h2{color:#a71;font-size:1.1em;margin:.7em 0;font-variant:small-caps}
h3{color:#960;font-size:1.0em;margin:.5em 0;}

p{
line-height:140%;
text-align:justify;
font-size:.8em;
margin-bottom:.5em;
}

a.volver{
	font-size:.6em;
	margin:0;
	position:relative;
	top:-2em;
}
.borrar_flujo{
clear:both;
width:0;height:0;
visibility:hidden;
}
.btn{
cursor:pointer;
}
.f_izq{
float:left;
}

a img{
border:0;
}

#contenido ul, #contenido ol {
	margin:.5em 0 .5em 2em;
}
#contenido li{
	list-style-image: url('../img/lista_item.png');
	font-size:.8em;
}

/* AVISOS DE RESPUESTAS FORMULARIOS, ETC. */
.aviso{
padding-left:2em;/* relativo al tamaño del ícono */
}
.recuadro,.recuadro-ico{
margin:.5em;
padding:.5em;
border:1px solid #777;
}
.recuadro-ico{
padding:.5em 3em;
margin:1em;
}
.precaucion{
color:#660;
border-color:#880;
background:#ffe url("../img/iconos/Warning.png") no-repeat .5em 50%;
}
.error{
color:#900;
background:#fee url("../img/iconos/stop_round.gif") no-repeat .5em 50%;
border-color:#700;
}
.ok{
color:#090;
background:#efe url("../img/iconos/accept_green.gif") no-repeat .5em 50%;
border-color:#070;
}
.info{
color:#009;
background:#eef url("../img/iconos/info.gif") no-repeat .5em 50%;
border-color:#007;
}


.icono16{
padding-left:20px;
background-repeat:no-repeat;
background-position:0px 0px;
}

.sistema{
background-image:url("../img/iconos/Key.gif");
}

.PDF{
height:20px;
background:url("../img/pdf_logo2.gif") no-repeat 0 2px;
padding-left:22px;
padding-top:4px;
}

.centrar_img img{
	display:block;
	margin:auto;
}
.centrar_img{text-align:center}





#inicio #principal{
	background:#fff url("../img/fondo_principal.png") repeat-x;
}

#inicio #margen{margin:0}
.buttons{padding:5px;}
.buttons span{color:#666;padding:0 5px;cursor:pointer;font:10px Verdana}
.buttons span.active, .buttons span:hover{background:#dd8800;color:#fff}

.mask1{
	position:relative;
	width:232px;
	height:232px;
	overflow:hidden;
	margin:0 auto;
}
#box8{
	position:absolute;
}
#box8 div{
	width:232px;
	float:left;
}
#box8 div p{
	font-size:.7em;
}
#box8 div h3{
	font-size:.8em;
	color:#c70;
}
#box8 .buttons{
	text-align:left
}
#box8 .next{
	float:right
}
.sample8 .buttons{
	text-align:center;
	clear:both;
}
.sample8 .mask1{
/*
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;*/
}
#box8 img{width:232px}

ul#byslidemenu, ul#byslidemenu li{list-style:none;margin:0;padding:0}


#servicios #contenido{width:540px}

body#productos.productos ul, body#productos.productos li{list-style:none;}

#productos #contenido{
width:540px;/* esta hay que corregirlo para IE */
}






#lateral_gal{
	float:left;
	width:164px;
	position:relative;
	background:#fff;
}

#lateral_gal > div{
	margin-bottom:4px;
	padding-bottom:8px;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
	background:#f7f7f7;
}
#lateral_gal > div:hover{
	background:#fff;
}
#lateral_gal h3{
	margin-top:0;
}
#lateral_gal h4{
	font-size:.8em;
	text-align:center;
	color:#666;
	font-variant:small-caps;
	line-height:100%;
	margin:2px 0;
}
.fotito{
width:96px;
height:96px;
/*overflow:hidden; esto era para que recortara las imagenes pero ahora vamos a deformar */ 
margin:auto;/* para centrar */
position:relative;
}
.fotito img{
	display:block;
	width:100%;
	height:100%;
}



/* Galeria de fotos */
/* usando noobslide - CAMBIAR NOMBRES ESTILOS AL FINALIZAR */
.sample{
padding:10px;
margin:1em 0;
/*border-top:1px solid #e1e1e1;*/
/*border-bottom:1px solid #e1e1e1;*/
}

.mask6{
	position:absolute;
	left:50%;
	margin-left:-120px;
	width:240px;
	height:180px;
	overflow:hidden;
}

/* Sample 7*/
#box7{
	position:absolute;
}
#box7 span{
	display:block;
	float:left;
}

#thumbs7{
	position:relative;
	width:486px;
	clear:both;
	height:41px;
	overflow:hidden;
	margin-top:190px;
	background:#aaa;
	border-top:1px solid #999;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
	position:absolute;
	top:0;
	width:100%;
	height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
	display:block;
	width:60px;
	height:41px;
	margin:0;
	float:left;
	cursor:pointer;
}
#thumbs7 .thumbs div img{
	width:54px;
	float:right;
}
#thumbs_handles7 span{
	background:url('../img/thumb_invisible.gif') no-repeat;
}
#thumbs_mask7{
	width:1200px;
	background:url('../img/thumbs_mask.gif') no-repeat center top;
}


.thumbs{
	width:54px;
	
}
.thumbs div{
	display:block;
	width:54px;
	height:41px;
	margin:3px 0;
	cursor:pointer;
}

.thumbs div img{
	display:block;
	width:100%;
	height:100%;
	border:none
}
span img{
	display:block;
	border:none;
}

/* ajustamos las imagenes deformando a la proporcion requerida */
#box7 span img {width:240px;height:180px}
#thumbs7 .thumbs div img{
	width:54px;
	height:41px;
}



#obras #contenido{
	width:540px;/* esta hay que corregirlo para IE */
}
#obras #galeria{
	float:left;
	width:100%;
}

#obras #galeria >div{
	float:left;
	width:120px;
	height:160px;
	margin-left:0px;
	margin-right:4px;
	border-bottom:1px solid #ddd;
	border-right:1px solid #ddd;
	background:#f7f7f7;
}
#obras #galeria .fotito{
	margin-top:8px;
}
#obras #galeria > div:hover{
	background:#fff;
}
#obras #galeria h3{
	margin-top:0;
}
#obras #galeria h4{
	font-size:.8em;
	text-align:center;
	color:#666;
	font-variant:small-caps;
	line-height:100%;
	margin:2px 0;
}
#obras #lateral_gal ul, #obras #lateral_gal ol {
	margin:.5em 0 .5em .5em;
}
#obras #lateral_gal li{
	list-style-image: url('../img/lista_item.png');
	font-size:.7em;
}

#contacto #contenido{
	width:540px;/* esta hay que corregirlo para IE */
}