/*Estilos para Gráficas San Román. www.graficassanroman.com */
/*Reseteo de Elementos ----------------------------------------------------------*/
* {
	margin:0;
	padding:0;

}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fields et,input,textarea,p,blockquote,th,td {
   margin:0;
   padding:0;
}
table {
   border-collapse:collapse;
   border-spacing:0;
}
fieldset,img {
   border:0;
}
address,caption,cite,code,dfn,th,var {
   font-style:normal;
   font-weight:normal;
}
ol,ul {
   list-style:none;
}
caption,th {
   text-align:left;
}
h1,h2,h3,h4,h5,h6 {
   font-size:100%;
   font-weight:normal;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border:0;
}

/*Elementos Principales-------------------------------------------------------------*/

body {
	background: #E9E6D7 url(../img/bg.gif)  repeat-y center top;
	font: 62.5% Trebuchet, Arial, Helvetica, sans-serif; 
	color: #000000;
	text-align: center;
}

#container {
	background-color: #fff;
	text-align: left;
	margin: 0 auto;
	width: 87em; /*870px*/
}

.clear{
 clear:both;
}

hr {
	display : none;
}

strong {
color: #3F3F3F;
}

abbr, acronym {
border-bottom: 1px dotted #3f3f3f;
}

/*Enlaces----------------------------------------------------------------------------*/
a {
text-decoration: underline;
color: #015DA2;
}

a:hover {
text-decoration: underline;
color: #E62A8D;
}

/*Cabecera---------------------------------------------------------------------------*/
#header {
	margin: 1.5em 1.5em 1.5em 5em;
}

h1 {
	width: 27em;
	float: left;
}

/*Menu---------------------------------------------------------------------------*/
#menu {
	float: left;
	width: 51.5em;
	margin:1.8em 0 0 0; 
	}

#skip {
	visibility: hidden;
}

/*Técnica de sustitución de texto por imágenes. Funciona sin CSS y con imagenes desactivadas*/
#budget-b {
	position: relative; 
	z-index: 1;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: underline;
	float: right;
	margin: 0 1.3em 1em 0;
	}

#budget-b a{
	width: 170px; 
	height: 30px; 
	background: url(../img/pidanos-presupuesto.gif) no-repeat center center; 
	display: block; 
	color: #015DA2; 
	margin-left: 25em;
}
#budget-b #selected, #budget-b a:hover{ background: url(../img/pidanos-presupuesto-sel.gif) no-repeat center center; color: #E62A8D;}
#budget-b a span { position: absolute	; z-index: -1;}

#menu li {
	float: left;
	list-style: none;
	border-right: 1px solid #D7D7D7;
	}

#menu #contact-b {
	border-right: none;
	}

#home-b, #services-b, #technology-b, #company-b, #contact-b {
	position: relative; 
	z-index: 1;
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: underline;
}

#home-b a{
	width: 80px; 
	height: 30px; 
	background: url(../img/menu-home.gif) no-repeat center center; 
	display: block; 
	color: #002A5A; 
}

#services-b a{
	width: 104px; 
	height: 30px; 
	background: url(../img/menu-servicios.gif) no-repeat center center; 
	display: block; 
	color: #002A5A; 
}

#technology-b a{
	width: 116px; 
	height: 30px; 
	background: url(../img/menu-tecnologia.gif) no-repeat center center; 
	display: block; 
	color: #002A5A; 
}

#company-b a{
	width: 100px; 
	height: 30px; 
	background: url(../img/menu-empresa.gif) no-repeat center center; 
	display: block; 
	color: #002A5A; 
}

#contact-b a{
	width: 108px; 
	height: 30px; 
	background: url(../img/menu-contacto.gif) no-repeat center center; 
	display: block; 
	color: #002A5A; 
	}

#home-b #selected, #home-b a:hover{ background: url(../img/menu-home-sel.gif) no-repeat center center; color: #015DA2;}
#services-b #selected, #services-b a:hover{ background: url(../img/menu-servicios-sel.gif) no-repeat center center; color: #015DA2;}
#technology-b #selected, #technology-b a:hover{background: url(../img/menu-tecnologia-sel.gif) no-repeat center center; color: #015DA2;}
#company-b #selected, #company-b a:hover{ background: url(../img/menu-empresa-sel.gif) no-repeat center center; color: #015DA2;}
#contact-b #selected, #contact-b a:hover{ background: url(../img/menu-contacto-sel.gif) no-repeat center center; color: #015DA2;}
#accesibility #selected {color: #E62A8D;}

#home-b a span { position: absolute; z-index: -1;}
#services-b a span { position: absolute; z-index: -1;}
#technology-b a span { position: absolute; z-index: -1;}
#company-b a span { position: absolute; z-index: -1;}
#contact-b a span { position: absolute; z-index: -1;}

/*Contenido---------------------------------------------------------------------------*/
#home #content {
	background: url(../img/cabe-home.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#services #content {
	background: url(../img/cabe-servicios.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#technology #content {
	background: url(../img/cabe-tecnologia.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#company #content {
	background: url(../img/cabe-empresa.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#contact #content {
	background: url(../img/cabe-contacto.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#budget #content {
	background: url(../img/cabe-presupuesto.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#accesibility #content, #longdesc #content {
	background: url(../img/cabe-accesibilidad.jpg) no-repeat center top;
	margin: 0 3em 0 3em;
	padding: 0 0 20em 0;
	}

#main-column {
	width: 53em;
	float: left;
	margin: 20em 4em 3em 0;
	}

#secundary-column {
	width: 11em;
	float: left;
	margin: 20em 0 0 0;
}

#secundary-column img{
	border: 0.1em solid #AEAEAE;
	padding: 0.3em;
}

#secundary-column p{
	margin: 0 0 2em 0;
}


/*#secundary-column a:hover img{
	border: 0.1em solid #E62A8D;
	margin: 0 0 2em 0;
	padding: 0.3em;
}
*/
/*Estilos para textos---------------------------------------------------------------------*/
h2 {
	font: bold 2.1em Georgia, "Times New Roman", Times, serif;
	color: #015DA2;
	margin: 0 0 0.8em 0.8em;
}

#main-column p {
	font: 1.3em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	color: #555555;
	margin: 0 0 0.8em 3em;
}

/*Servicios y Tecnologia----------------------------------------------------------------------*/
#main-column ul li {
	list-style-type: none;
	margin: 2em 0 0 4em;
}

h3 {
	font: bold 1.5em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
 	color: #FF6000;
	margin: 0 0 0.3em 0;
	padding: 0.1em 0 0 1.2em;
 	background: url(../img/bullet.gif) no-repeat 8px 10px;
}

#main-column ul li p{
	margin: 0 0.5em 0 2.5em;
}

#highlight {
	background-color: #E5F0F7;
	border-top: 0.2em solid #A0C1D7;
	border-bottom: 0.2em solid #A0C1D7;
	color: #3A3A3A;
	padding: 0.6em 0 0.8em 0;
}
#technology #main-column #highlight ul {
	font: 1.2em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	margin: 1em 0 0 0;
}
#technology #main-column #highlight ul li{
	margin: 0.3em 0 0.3em 5em;
	background: url(../img/bullet2.gif) no-repeat left center;
	padding: 0 0 0 1.2em;
}
/*Contacto----------------------------------------------------------------------*/
#contact #highlight {
	background-color: #E5F0F7;
	border-top: 0.2em solid #A0C1D7;
	border-bottom: 0.2em solid #A0C1D7;
	margin: 1em 0 2em 3em;
}

#contact h3, #budget h3 {
	font: 2em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	color: #FF6000;
	margin: 0 0 0.3em 0;
	padding: 0.1em 0 0 1.2em;
	background: none;
}

#contact #main-column #highlight p, #contact #main-column address, #contact #main-column #highlight ul {
	font:  1.3em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	margin: 0 0 0.8em 3em;
	padding: 0 0 0 5em;
	color: #3a3a3a;
}

#contact #main-column li {
	margin: 0 0 0.1em 0;
}

#contact #main-column address {
	background: url(../img/icono-direccion.gif) no-repeat left center;
}

#contact #main-column #highlight p {
	background: url(../img/icono-telefono.gif) no-repeat left center;
}

#contact #main-column #highlight ul {
	background: url(../img/icono-email.gif) no-repeat left center;
}

#contact #main-column a {	
color: #084E81;
}
#contact #main-column a:hover {	
color: #E62A8D;
}

/*Formulario----------------------------------------------------------------------*/
form { 
  	width: 35.9em; 
  	border: 1px dotted #A2C2D8;
	font: 1.3em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif; 
	padding: 2em 2.4em 2em 0;
	margin: 1em 0 0 2.3em; 
	color: #555555;
}

form fieldset legend {
	visibility: hidden;
}

form label { 
	display: block; 
	float: left; 
	width: 9em; 
	margin: 0.5em 0 0 -0.3em;
	text-align: right; 
	font-weight: bold;
}

form label span, #disclaimer span {
	color:#FF6000;
	font-weight: normal;
}

form input, form textarea {
	margin:0.5em 0 0 0.3em;
	font: 1em Verdana, Arial, Helvetica, sans-serif; 
	}

#disclaimer {
	font: 0.7em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif; 
	padding: 1em 0 0 0;
}
.formerror {
	border-top: 0.2em solid #DF0000;
	border-bottom: 0.2em solid #DF0000;
	background-color : #FFDDDD;
	padding: 0 0 0.8em 0;
	margin: 1em 0 2em 3em;
	background: #FFDDDD url(../img/icono-error.gif) no-repeat 20px 10px;
}

#contact .formerror h3, #budget .formerror h3 {
	color: #000;
	padding: 0.6em 0 0 4.1em;
	}

#contact .formerror p, #budget .formerror p {
	margin: 0 0 0.2em 6.4em;
}

.formerror strong {
	color: #000;
}

#contact #main-column .formerror ul li, #budget #main-column .formerror ul li{
	font:  1.3em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	margin: 0 0 0.2em 4.4em;
	padding: 0 0 0 5em;
	color: #000;
	background: url(../img/bullet2.gif) no-repeat 50px center;
	}

.error-input{
	border: 1px solid #DF0000;
	background-color: #FFDDDD;
}

.example {
	margin: 0 0 0 0.5em;
	font-size: 0.8em;
}
.errortext {
	color: #DF0000;
	margin: 3em 0 5em 7.5em;
	padding: 2em 0 1em 3.8em;
	font-weight: bold;
	background: url(../img/icono-error-16.gif) no-repeat 25px 28px;
}

.correct {
	background: url(../img/icono-flecha.gif) no-repeat left center;	
	padding: 0 0 0 1.4em;
	margin: 0 0 0 0.3em;
}

/*Accesibilidad----------------------------------------------------------------------*/
#accesibility #main-column {
	width: 73em;
}

#accesibility h3, #longdesc h3 {
	font: 2em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	color: #FF6000;
	margin: 0 0 0.3em 0;
	padding: 0.1em 0 0 1.2em;
	background: none;
}

#accesibility #main-column ul {
	margin: 0 0 1em 0;
}

#accesibility #main-column ul li {
	margin: 0 0 0 4em;
	font: 1.3em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	color: #555555;
 	background: url(../img/bullet.gif) no-repeat center left;
	padding: 0 0 0 1em;
}

/*Footer----------------------------------------------------------------------------------*/
#footer{
	border-top: 0.1em dashed #AEAEAE;
	margin: 4em 3em 1.5em 3em;
	padding: 1.5em 0 1.8em 1.8em;
}

#home #footer{
	margin: 7em 3em 1.5em 3em;
}

#footer address, #footer p, #footer ul {
	font: 1.1em Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #555555;
	margin: 0 0 0.8em 0;
		}

#footer p {
	float: left;
	}

#footer ul {
	list-style-type: none;
 	float: right;
 	text-align: right;
	margin: -2em 0 0 0;
	 }

#footer li {
	margin: 0 0 0.8em 0;
}

/*ThumbBox Mapa----------------------------------------------------------------------------------*/
#thumbBox{ /*Outermost DIV for thumbnail viewer*/
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	padding: 1em;
	padding-bottom: 0;
	background-color: #E9E6D7;
	border: 0.2em solid #CDC9B8;
	visibility: hidden;
	z-index: 10;
	cursor:pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
	font: 1.7em "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
	color: #674A3A;
	padding: 0.5em 0.2em 0.5em 0;
	text-align: right;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
	position: absolute;
	visibility: hidden;
	border: 1px solid black;
	background-color: #EFEFEF;
	padding: 0.5em;
	z-index: 5;
}