/**
 * LAYOUT CSS.
 */

/* Layout reset */
* { margin: 0; padding: 0; }

/*  Footer Positioned at bottom fix, for pages that aren't very tall.  http://www.xs4all.nl/~peterned/examples/csslayout1.html */
html, body {
  height:100%; /* needed for container min-height */
}

body {
	position:relative;
	height:auto !important; /* browsers reales */
	height:100%; /* IE6: tratado como as min-height*/
	min-height:100%; /* browsers reales */
	margin-bottom:20px;
}

/* página general 
--------------------------- */

#pagina {
	width:100%;
	position:relative;
	text-align:left;
}

/* encabezado
--------------------------- */

#barra-gris-superior {
	width:100%;
	height:5px;
	margin-bottom:20px;
	background:#666666 url(../images/fondo-colores.gif) no-repeat 96px top;
}

#encabezado {
	width:960px;
	position: relative;
	margin:0 auto 20px;
}

#encabezado #logo,
#encabezado #atencion-cliente,
#encabezado #cesta {
	float:left;
    padding: 0; /* NO CAMBIAR. */
}

#encabezado #logo {
	width:374px;
	margin-top:14px;
	margin-left:0;
	/* margin-right:-239px; Valor negativo del ancho de #logo + margen izquierdo. */
}

#encabezado #atencion-cliente {
	width:534px;
	height:66px;
    margin-left:239px; /* Ancho de #logo */
    margin-right:-773px; /* Valor negativo del ancho de #atencion-cliente + margen izquierdo. */
	background: url(../images/atencion-cliente-telefono.gif) no-repeat 386px center;
}

#encabezado #cesta {
	width:187px;
	/*margin-left:773px;  Ancho de #logo + #atencion-cliente. */
    /*margin-right:-960px;  Valor negativo del ancho de #cesta + margen izquierdo. */
	float:right;
	margin-left:0;
	margin-right:0;
}

#cesta #recuadro-cesta-superior,
#cesta #recuadro-cesta-inferior
{
	width:187px;
}

#cesta #recuadro-cesta-superior {
	background: url(../images/recuadro-cesta-superior.gif) no-repeat center top;
	height:6px;
}

#cesta #recuadro-cesta {
	width:176px;
	padding-right:11px;
	background: url(../images/recuadro-cesta-fondo.gif) repeat-y 0 0;
	text-align:right;
	color:#666;
}

#recuadro-cesta a {
	font-weight:bold;
	color:#666;
}

#cesta #recuadro-cesta-inferior {
	background: url(../images/recuadro-cesta-inferior.gif) no-repeat center top;
	height:8px;
}

/* navigation-bar 
 * buscador
--------------------------- */

#menu-buscador {
	width:100%;
	position: relative;
	height:34px;
	background: url(../images/fondo-menu-superior.gif) repeat-x 0 0;
	z-index:1000;
}

#menu-buscador-interior {
	width:960px;
	margin:0 auto;
}

#menu-buscador #menu-principal {
	float:left;
	width:585px;
	margin-left:0;
	margin-right:-585px; /* Valor negativo del ancho de #menu-principal + margen izquierdo. */
    padding: 0; /* NO CAMBIAR. */
}

#menu-buscador #buscador {
	float:left;
	width: 375px;
	margin-top:4px;
	margin-left: 585px; /* Ancho de #menu-principal. */
	margin-right: -960px; /* Valor negativo del ancho de #buscador + margen izquierdo. */
    padding: 0; /* NO CAMBIAR. */
}

#menu-buscador #buscador input.form-texto {
	width:174px;
	height:15px;
	padding:4px 5px 3px 5px;
	border:1px solid #b51f33;
	background-image:url(../images/fondo-caja-buscador.gif);
	background-repeat:repeat-x;
	vertical-align:middle;
	font-size:14px;
	color:#666;
	float:left;
}

#menu-buscador #buscador input.form-boton {
	vertical-align:middle;
	margin-right:6px;
}

#menu-buscador #buscador a {
	float:left;
}

#menu-buscador #buscador a.form-boton {
	display:block;
	width:51px;
	height:26px;
	margin:0 10px 0 2px;
	background:url(../images/botones/boton-buscador.gif) no-repeat 0 0;
}

#menu-buscador #buscador a.form-boton:hover {
	background:url(../images/botones/boton-buscador.gif) no-repeat -51px 0;
}

#menu-buscador #buscador a.link-blanco13 {
	margin-top:4px;
}

/**
 * CSS dropdown menu inspired by Son of Suckerfish...
 * http://www.htmldog.com/articles/suckerfish/dropdowns/
 * http://www.alistapart.com/articles/horizdropdowns
 */
 
/* primer nivel ul */
 
#menu-principal ul { 
	position:relative;
	width:510px;
	height:34px;
	margin:0;
	padding: 0 0 0 2px;
	list-style: none;
	background: url(../images/borde-menu.png) repeat-y left top;
} 

#menu-principal ul li {
	float: left;
	width:110px;
	padding: 0;
	list-style: none;
	background: url(../images/borde-menu.png) repeat-y right top;
}

#menu-principal a {
	display: block;
	/*width:110px;*/
	height:24px;
	margin: 0;
	padding: 10px 0 0;
	text-align:center;
}

#menu-principal a:hover {
	background: url(../images/fondo-menu-superior-over.gif) no-repeat left top;
}

/* segundo nivel */

#menu-principal li ul {
	position: absolute;
	width:409px;
	w\idth: 409px;
	z-index:9999;
	left: -999em; /* to hide menus because display: none isn't read by screen readers */
	padding: 0 0 25px 0;
	margin: 0;
	list-style: none;
	background: url(../images/fondo-submenu-superior.png) no-repeat left top;
}

#menu-principal li ul h3 {
	color:#fff;
	margin:10px 0;
}

#menu-principal li ul ul {
	position: relative;
	z-index:9999;
	width:197px;
	w\idth: 197px;
	background: none;
}

/*#menu-principal li li {
	zoom: 1;
	background:url(../images/bkg-degrade-menu.png) repeat-y 0 0;
	behavior: url(/Defensoria/sites/all/themes/defensoria/iepngfix.htc);
} */
#menu-principal ul.menu li.expanded ul div.fondoSubmenu{
	width:394px;
	overflow:hidden;
	margin-top:6px;
	background-image:url(../images/fondo-submenu-inferior.png);
	background-position:bottom;
	background-repeat:no-repeat;
}
#menu-principal ul.menu li.expanded ul,#menu-principal ul.menu li.expanded ul li,#menu-principal ul.menu li.expanded ul li ul,#menu-principal ul.menu li.expanded ul li ul li,#menu-principal ul.menu li.expanded h3{
	float:none;
	width:auto;
	margin:0px;
	padding:0px;
	background:none;
}
#menu-principal ul.menu li.expanded ul{
	width:394px;
	height:auto;
	background-repeat:no-repeat;
	background-image:url(../images/fondo-submenu-superior.png);	
	background-position:top;
}

#menu-principal ul.menu li.expanded ul li{
	width:177px;
	padding-left:20px;
	float:left;
}
#menu-principal ul.menu li.expanded ul li h3{
	color:#fff;
	margin:10px 0;
}
#menu-principal ul.menu li.expanded ul li ul{
	width:auto;
	float:none;
	height:auto;
	overflow:visible;
	background:none;
	border:0px;
}
#menu-principal ul.menu li.expanded ul li ul li{
	float:none;
}
#menu-principal li li li {
	float: none;
	margin:0;
	padding:0;
	background:none!important;
}

#menu-principal li ul a {
	display:block;
	height:23px;
 	margin: 0;
	padding: 0 0 0 10px;
	text-align:left;
	background: url(../images/flecha-menu.gif) no-repeat 0px 6px;
	color:#FFFFFF;
	Font-size:8.6pt;
}

#menu-principal li ul a:hover {
	background: url(../images/flecha-menu.gif) no-repeat 0px 6px;
}

#menu-principal li:hover ul, #menu-principal li li:hover ul, #menu-principal li li li:hover ul, #menu-principal li.sfhover ul, #menu-principal li li.sfhover ul, #menu-principal li li li.sfhover ul {
	left: auto;
}

#menu-principal li.expanded:hover,#menu-principal li.expanded.sfhover {
	background: url(../images/fondo-menu-superior-over.gif) no-repeat left top;
}

#menu-principal li.expanded li:hover,#menu-principal li.expanded.sfhover li {
	background: none;
}

/* area central 
--------------------------- */

#sombreado-gris {
	width:100%;
	height:31px;
	background:#666666 url(../images/sombra-gris.gif) repeat-x 0 0;
}

/* contenedor 
--------------------------- */

#contenedor, #contenedor-estatica {
	/*position:relative;*/
	margin-bottom:17px;
    padding-bottom: 1px !important;
}

#contenedor-interior {
	width:960px;
	margin:0 auto;
}

/* layout - una columna */

#columna-unica {
	width:960px;
}

/* layout - dos columnas */

#contenedor #columna-izquierda {
	float:left;
	width:210px;
	margin-left:0;
	margin-right:-210px; /* Valor negativo del ancho de #columna-izquierda + margen izquierdo. */
    padding: 0; /* NO CAMBIAR. */
}

#contenedor #principal {
	float:left;
	width: 750px;
	margin-left: 210px; /* Ancho de #columna-izquierda. */
	margin-right: -960px; /* Valor negativo del ancho de #principal + margen izquierdo. */
    padding: 0; /* NO CAMBIAR. */
}

#contenedor #principal-interior {
	padding-left:30px;
}

/* layout - dos columnas (páginas estáticas) */

#contenedor-estatica #principal {
	float:left;
	width:490px;
	margin-left:0;
	margin-right:-490px; /* Valor negativo del ancho de #principal + margen izquierdo. */
    padding: 0; /* NO CAMBIAR. */
}

#contenedor-estatica #principal-interior {
	padding-right:30px;
}

#contenedor-estatica #columna-derecha {
	float:left;
	width: 470px;
	margin-left: 490px; /* Ancho de #principal. */
	margin-right: -960px; /* Valor negativo del ancho de #columna-derecha + margen izquierdo. */
    padding: 0; /* NO CAMBIAR. */
}

/* pie 
--------------------------- */

#menu-pie {
	position:relative;
	width:100%;
	height:23px;
	padding-top:10px;
	text-align:center;
	background:url(../images/fondo-pie.gif) repeat-x 0 0;
}

#menu-pie a {
	font-size:11px;
	padding-right:11px;
}

#pie-pagina {
	position: relative;
	width:636px;
	margin:35px auto;
}

#pie-pagina #logo,
#pie-pagina #certificado-texto,
#pie-pagina #certificado-logo {
	float:left;
    padding: 0; /* NO CAMBIAR. */
}

#pie-pagina #logo {
	width:163px;
	height:42px;
	margin-left:0;
	margin-right:-163px; /* Valor negativo del ancho de #logo + margen izquierdo. */
	background: url(../images/logo-wolters-chico.jpg) no-repeat top right;
}

#pie-pagina #certificado-texto {
	width:364px;
    margin-left:163px; /* Ancho de #logo */
    margin-right:-527px; /* Valor negativo del ancho de #certificado-texto + margen izquierdo. */
	color:#666;
}

#pie-pagina #certificado-texto p {
	padding:0 35px;
	font-size:10px;
	text-align:center;
}

#pie-pagina #certificado-logo {
	width:69px;
	height:38px;
	margin-left:527px; /* Ancho de #logo + #certificado-texto. */
    margin-right:-596px; /* Valor negativo del ancho de #certificado-logo + margen izquierdo. */
	background: url(../images/logo-certificado.gif) no-repeat top center;
}

/* ESTILOS EXTRAS 
---------------------------------- */

/* ayuda layout */

#encabezado,
#menu-buscador-interior,
.tabs-item,
#resumen-direcciones,
#carousel-home
{
	clear: both;
}

/* Previene  desbordamiento de contenido 
---------------------------------------- */

#logo,
#atencion-cliente,
#cesta,
#menu-principal,
#buscador,
#columna-izquierda,
#principal,
#certificado-texto,
#certificado-logo,
.link-anterior,
.link-posterior,
.floatleft,
.floatright,
#mycarousel
{
	overflow: visible;
	word-wrap: break-word; /* propiedad CSS3 */
}

/* Clear Floats sin agregar etiquetas extras:  
 * http://www.positioniseverything.net/easyclearing.html
------------------------------------------------------------ */

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { 
	display: inline-block; 
}

/* Esconder de IE-mac \*/
* html .clearfix { 
	height: 1%; 
}
.clearfix { 
	display: block; 
}
/* Fin Esconder de IE-mac */

/* Clear classes para contenido */

.clearleft { 
	clear: left; 
}

.clearright { 
	clear: right; 
}

.clearboth { 
	clear: both; 
}

/* Float classes para divs */

.floatleft { 
	float: left; 
}

.floatright { 
	float: right; 
}

/* Float classes para imágenes */

.floatleft-img { 
	float: left; 
	margin: 0 15px 5px 0px !important; 
}

.floatright-img { 
	float: right; 
	margin: 0 0px 5px 15px !important; 
}

.floatleft .caption { 
	font-size: 10px; 
	font-weight: bold; 
	text-transform: uppercase; 
	padding-top: 5px; 
}

/* "Saltar a menú principal" link
*
* Este link es útil tanto para personas con discapacidades visuales o físicas que no pueden utilizar el mouse.
*/

#skip-nav {
	display: none;
}

#skip-nav a, #skip-nav a:hover, #skip-nav a:visited {
	position: absolute;
	left: 0;
	top: -500px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#skip-nav a:active, #skip-nav a:focus {
	position: static;
	width: auto;
	height: auto;
}