/***************************************************************************************************************** * Web: * * Autor: http://www.jmocana.eu * * Hoja: layout.css * * Descripcion: Estructura de la web * * Fecha: 26/03/2012 * * Versión: 1.0 * *****************************************************************************************************************/ /* ESTRUCTURA ------------------------- */ body{background: #F9F9F9 url(../img/f_body.jpg) repeat-x 0 0;} #header{padding-top: 3em; margin-bottom: 1em;} #contenidos{clear: both; padding: 1em 0; background-color: #FFF; border: 1px #EFEFEF solid; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-moz-box-shadow: 5px 0 0 #888; -webkit-box-shadow: 10px 10px 5px #888;box-shadow: 0 5px 3px #F1F1F1;} #footer{clear: both; padding: 4em 0 0 0;} /* CABECERA ------------------------- */ #header .superior{padding: 0; margin-bottom: 1.8em;} #header h1{float: left;} /* patrocinadores */ #header .logos{float: right; background-color: #FFF;margin-top: .5em; padding: .1em;} #header .logos li{float: left; margin-left: 1em; padding-left: 1em; background: url(../img/separador.gif) no-repeat 0 center;} #header .logos li:first-child{margin: 0; padding: 0;} #header .logos img{display: block;} #header .buscar{float: right; width: 22.6em; padding-top: .6em;} /* navegacion */ #header #nav{clear: both; float: left; width: 76em;} #header #nav li{float: left; font: bold 1.3em/1em Arial, Helvetica, sans-serif; padding-top: .7em;} #header #nav li a{color: #FFF; text-decoration: none; padding: .3em 2em; display: block; border-left: 1px #355172 solid;} #header #nav li.item_portada a { border:0;} #header #nav li.item_portada.marcado a { background:#f9f9f9;} #header #nav .marcado a{ background-color: #FFF; color: #104385; padding: .6em 2.5em; border-left:0; -webkit-border-top-left-radius: 2px;-webkit-border-top-right-radius: 2px; -moz-border-radius-topleft: 2px;-moz-border-radius-topright: 2px;border-top-left-radius: 2px;border-top-right-radius: 2px;} #header #nav.desplegado{height: 8em;} /* subnavegación */ #header #nav .subnav{position: absolute; top: 11.5em; left: 0; background-color: #FFF; border-bottom: 3px #EDEDED solid; width: 100%;} #header #nav .subnav ul{} #header #nav .item_documentacion .subnav ul{width: 70em; margin: 0 auto;} #header #nav .item_recursos .subnav ul{width: 83.5em; margin: 0 auto;} #header #nav .item_comunidad .subnav ul{width: 83.5em; margin: 0 auto;} #header #nav .subnav li{ font-size: 1em; padding: .5em 0; margin-top: .5em;} #header #nav .subnav li:first-child a{border: none;} #header #nav .subnav .marcado{margin-top: 0;} #header #nav .subnav .marcado a{background-color: #36618F; color: #FFF; -webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px; padding: .4em 1em; border: none; position: relative; left: 1px;} #header #nav .subnav a{ font-weight:normal; border-left: 1px #BCBCBC solid; padding: 0 1em;} /* buscador */ #header #cse-search-box label{display: none;} #header #cse-search-box #buscador{float: left; width: 13em; padding:.4em .4em .3em; margin-top: 0; background-color: #FFF; font: normal 1.3em/1em Arial, Helvetica, Tahoma, sans-serif; color: #333; border: none; -webkit-border-top-left-radius: 2px; -webkit-border-bottom-left-radius: 2px;-moz-border-radius-topleft: 2px;-moz-border-radius-bottomleft: 2px;border-top-left-radius: 2px;border-bottom-left-radius: 2px; } #header #cse-search-box button{float: left; background: url(../img/sprite.png) no-repeat 0 0; width: 39px; height: 24px; border: none; padding: 0; cursor: pointer;} /* PIE ------------------------- */ #footer li{float: left;} #footer .sup{background: #2A4C70 url(../img/f_pie-sup.jpg) repeat-x 0 0; border-top: 1px #617FA0 solid; padding: 3em 0;} #footer .inf{background: url(../img/f_inf-pie.jpg) repeat-x center 0; border-top: 1px #45668B solid; padding: .4em 0;} /* directorio */ #footer #directorio h2{font: normal 2em 'PTSansBold'; color: #FFF; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px #405e7f solid; margin-bottom: 1em;} #footer #directorio h3{font: bold 1.2em Arial, Tahoma, Verdana; color: #FFF; text-transform: uppercase; margin-bottom: 1em;} #footer #directorio li{width: 30.4em; border-left: 1px #405e7f solid;padding: 0 1em; margin-left: 1em;} #footer #directorio li:first-child{margin-left: 0; border: none; padding-left: 0;} #footer #directorio li li{font: normal 1.1em Arial, Tahoma, Verdana; border: none; margin: 0; padding: 0; float: left; width: 13em; margin-bottom: .5em;} #footer #directorio li li a{color: #D2D8DE; text-decoration: none;} #footer #directorio li li a:hover{text-decoration: underline;} /* aside */ #footer .aside{padding: 1.5em 0 0 0;} #footer .aside .col_i, #footer .aside .col_d{width: 48em;} #footer .aside .col_i a{display: block; margin-bottom: 1em;} #footer .aside .col_i p{font: normal 1.2em/1.4em Arial, tahoma, Verdana; color: #D2D8DE; margin-bottom: 1.5em;} #footer .aside .col_i p a{display: inline; color: #D2D8DE;} #footer .aside .col_d{padding-top: 1em;width: 41em;} #footer .aside .col_d ul{width: 80%; float: right;} #footer .aside .col_d li{width: 40%; margin-bottom: .2em;} #footer .aside .col_d li a{font: normal 1.1em Arial, Tahoma, Verdana; color: #D2D8DE; text-decoration: none;} #footer .aside .col_d li a:hover{text-decoration: underline;} /* compartir*/ #footer .list-compartir li{margin-right: 1.8em;} #footer .list-compartir a{font: normal 1.2em 'PTSansBold'; color: #D2D8DE; text-decoration: none; letter-spacing: .1em; padding: 1em 0 1em 3.7em} #footer .list-compartir .facebook a{background: url(../img/ico-facebook.png) no-repeat 0 0} #footer .list-compartir .twitter a{background: url(../img/ico-twitter.png) no-repeat 0 0} #footer .list-compartir .podcast a{background: url(../img/ico-podcast.png) no-repeat 0 0}