/*///////////////////////////////////////////////////////////////////
Imported styles

Estilos usados en el caso de que se use en el diseño algún tipo de caja
para maquetar el contenido de las distintas capas de la web
///////////////////////////////////////////////////////////////////*/

@import "/themes/default/styles/reset.css";

@import "/themes/default/styles/box_157.css";
@import "/themes/default/styles/box_438.css";
@import "/themes/default/styles/box_751.css";

/*///////////////////////////////////////////////////////////////////
General

Estilos que hacen referencia a distintos elementos presentes en
todas las páginas
///////////////////////////////////////////////////////////////////*/

#contents p { margin: 0 0 10px; line-height: 1.3em; text-align: justify; }
#contents .box_438 ul li { padding: 0 0 0 8px; margin: 0 0 10px; line-height: 1.3em; text-align: justify; }
strong { font-weight: bold; }
em { font-weight: bold; color: #1261c4; }

h1 { background: url(../images/bg_h1.gif) 0 4px no-repeat; font-size: 2.6em; color: #1052a0; margin: 0 0 20px; padding: 0 0 5px 30px; }
h1 span { color: #ee3b33;}

h2 { margin: 0 0 10px; padding: 0 0 5px 25px; background: url(../images/bg_h2.gif) 0 2px no-repeat; font-size: 1.8em; color: #367aca;  }

#contents ol li, #contents ul li {  margin: 0 0 8px; padding: 0 0 0 8px; background: url(../images/mini_bullet.png) 0 5px no-repeat; text-align: left; }

/*///////////////////////////////////////////////////////////////////
Layouts

Principales capas contenedoras
///////////////////////////////////////////////////////////////////*/

html{ font-family: Arial, Helvetica, sans-serif; font-size: 75%; color: #666; }
body { background: url(../images/bg_body.jpg) center 180px no-repeat; }

/*Contenedor general que contiene todo el contenido de la web*/

#l_all { margin:0 auto; width:1059px;}

/*Cabecera donde se inserta la imagen de la cabecera principal de la web*/

#header { position: relative; /*width: 100%;*/ height: 180px; background: url(../../../data/cabecera/cabecera.jpg) center top no-repeat; }
#header a.header_img { display: block; width: 100%; height: 180px; }
#header a.header_img img { display: none; }

/*Div auxiliar*/

#before_l_contets {margin: 2px 0 0; left:-25px; position:relative; top:-30px; }
#before_l_contets div { width: 926px; margin: 0 auto; } 

/*Div contenedor de las distintas columnas de maquetación (div#left, div#contents y div#right)*/

#l_contents { width: 926px; margin: 0 auto; }

/*Columna izquierda donde se incluye el menú principal de navegación y si es necesario se insertarían los banners y la atención online*/

#left { float: left; width: 24.7%; padding: 0 0 0 6px; }

/*Contenido central donde se cargarán las distintas plantillas del solution pack*/

#contents {
	float: left;
	width: 68%;
	padding: 0 0 0 30px;
}

/*Columna derecha donde suele ir la atención online y los banners, pero que en este caso está oculta porque el diseño así lo requiere*/

#right { display: none; }

/*Pie de la web donde va donde se encuentran los logos de validación, servicios web y firma de Complejo Creativo, su contenido está más abajo*/

#footer { float: left; width:100%;}

/*///////////////////////////////////////////////////////////////////
Breadcrumbs

Miga de pan usada para ubicar al usuario dentro de la navegación de
la web
///////////////////////////////////////////////////////////////////*/

#before_l_contets #breadcrumbs {
	float: left;
	width: 610px;
	color: #fff;
	padding: 9px 0 0 7px;
	font-size: 0.8em;
	background: url(../images/arrow_breadcrumbs.gif) 0 13px no-repeat;
}
#breadcrumbs a { color: #fff; text-decoration: underline; }
#breadcrumbs .current_breadcrumb { font-weight: bold; font-size: 1.1em; } /*Estilo usado en el breadcrumbs de la sección actual*/

/*///////////////////////////////////////////////////////////////////
Webservices

Servicios web de la página
///////////////////////////////////////////////////////////////////*/

#before_l_contets #webservices { float: right; width: 300px; padding: 8px 0 0; }
#webservices ul {}
#webservices ul li { float: left; margin: 0 4px 0 0; padding: 0 7px 3px 0; background: url(../images/separator_webservice.gif) right 4px no-repeat; }
#webservices ul li.last { margin: 0; padding: 0; background: none; }
#webservices ul li a { color: #fff; font-size: 0.8em; text-decoration: none; }
#webservices ul li a:hover { text-decoration: underline; }

/*///////////////////////////////////////////////////////////////////
Language flags

Banderas de idioma situada absolutamente dentro de la cabecera
///////////////////////////////////////////////////////////////////*/

#language_flags { position: absolute; top:129px; left:32px; }
#language_flags div { width: 30px; float: left; }

/*///////////////////////////////////////////////////////////////////
Banners

Banners administrabales situados en la columna izquierda o derecha
según el diseño lo requiera
///////////////////////////////////////////////////////////////////*/

#banner img {}


/*///////////////////////////////////////////////////////////////////
Banners

Banners administrabales situados en la columna izquierda o derecha
según el diseño lo requiera
///////////////////////////////////////////////////////////////////*/

.box_157 { margin: 0 0 20px; }
.box_157 img { }

/*///////////////////////////////////////////////////////////////////
Atención online

Banner de acceso a la atención online, situado en la columna izquierda o derecha
según el diseño lo requiera
///////////////////////////////////////////////////////////////////*/

#left .box_157 #atencion_online {}

/*///////////////////////////////////////////////////////////////////
Footer

Contenido del pie, donde se encuentran los logos de validación, 
servicios web y firma de Complejo Creativo
///////////////////////////////////////////////////////////////////*/

/*Logos de validación CSS, XHTML y WCAG*/

#footer div.validations { float: right; margin: 5px 0 0; }
#footer div.validations a { padding-right: 10px; }

/*Firma de Complejo Creativo (logo de c2, dirección y url*/

#footer div.box_751 { float: left; border-top: 1px dotted #86bbfb; padding: 10px 0 0; margin: 30px 0 0; width:100%; }
#footer div.box_751 div.signature {
	width: 380px;
	height: 20px;
	padding-bottom: 10px;
	color: #86bbfb;
	font-size: 0.8em;
}
#footer div.box_751 div.signature img { position: relative; top: 5px; margin: 0 4px 0 0; }
#footer div.box_751 div.signature a { color: #86bbfb; text-decoration: none; }
#footer div.box_751 div.signature a:hover { text-decoration: underline; }

/*///////////////////////////////////////////////////////////////////
Iframe

Marco interior contenido en el div#content donde se carga un contenido
externo en caso de introducirlo en el panel de control
///////////////////////////////////////////////////////////////////*/

#contents iframe { width: 660px; margin: 8px 0; }
#contents iframe#ifr_contents { height: 600px; }
#seccion h2 { margin-top: 0;}

/*///////////////////////////////////////////////////////////////////
Lightbox

Estilo del popin utitilado para mostrar las imágenes ampliadas.
///////////////////////////////////////////////////////////////////*/

div#lightbox { background-color: #fff; padding: 20px; }

div#lightbox img { border: 1px solid #999; }
div#lightbox img#closeButton { border: none;}

div#lightbox a kbd { display: none; }

div#lightbox #lightboxCaption { font-size: 1.2em; color: #1d60b1; }

/*///////////////////////////////////////////////////////////////////
Pop in

Ventana emergente interior donde se cargan los servicios web
(recomendar, sugerencias y condiciones de uso) y la ampliación de 
las distintas imágenes de cada una de las secciones
///////////////////////////////////////////////////////////////////*/

#popin_service {
	display: none;
	position: absolute;
	z-index: 1;
	top: 40%;
	left: 40%;
	width: 250px;
	padding: 5px;
	border: 1px solid white;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	background: #dcdcdc;
}


div#main_map { float:left; width:660px;}