body {
    font-size:12px;
    font-family: "Arial","Helvetica", sans-serif;
    background:#00408D;
    text-align:center;
    color:#fff;
    }
    
/* Estructura y fondos */    

#cont-header, #cont-contents, #cont-footer { 
    position:relative;
    width:100%; 
    text-align:center;
    }    
    
#cont-header {
    height:91px;
    background:#005DA2 url('../web/fondos/header-bottom.jpg') repeat-x left bottom;
    }
    
#cont-contents {
    background:#191919 url('../web/fondos/malla.jpg') repeat;
    border-bottom:#fff solid 6px;
    }
    
#uri {
    position:absolute;
    right:6px;
    top:15px;
    width:30px;
    height:470px;
    background:url('../web/fondos/lateral.jpg') no-repeat left top;
    }
    
#cont-footer {
    background:#00408D;
    }
    
#info-footer {position:relative;width:300px;text-align:left;margin:10px 0 0 30px;} 

#ingreso-clientes {position:relative;margin:10px 10px 10px 40px;height:30px;}
#creditos-y-politicas {float:right;right:20px;width:600px;text-align:right;}
    
#header, #contents, #footer { 
    position:relative;
    width:1016px;
    margin:0 auto;
    text-align:left;
    }
    
#contents {
    background:#000 url('../web/fondos/contenidos.jpg') repeat-y right top;
    min-height:450px;
    }    
    
    
#menu {
    position:absolute;
    width:224px;
    top:0;
    bottom:0;
    left:3px;
    padding:0;
    background:#191919 url('../web/fondos/menu.jpg') repeat-y left top;
    }   
    
#principal {
    position:relative;
    margin:0 60px 0 250px;
    padding:15px 0;
    } 
    
#banner {
    position:relative;
    margin:0 0 0 227px;
    padding:0;
    width:746px;
    height:446px;
    overflow:hidden;
    border:#000 solid 2px;
    }  
    
#sub-menu {
    position:absolute;
    text-align:right;
    right:0px;
    top:15px;
    } 
    
.info-contacto {
    position:absolute;
    right:0;
    top:90px;
    width:200px;
    text-align:right;
    } 
    
#form-contacto {
    position:relative;
    width:450px;
    }
        
.detalles {
    float:right;
    top:0;
    min-height:200px;
    width:350px;
    padding: 0 0 0 15px;
    border-left:#666 solid 1px;
    }
     
#imagenes, #videos,#ubicacion, div.noticias {position:relative;}    
#videos,#ubicacion {display:none;}   
div.mini {float:left;margin:15px 16px 0 16px;} 
div.imagen-horizontal {padding:4px;border:#888 solid 1px; margin:20px 0;} 
#disclaimer {clear:both;padding:20px 0 0 16px; }
  
ul.servicios, ul.informacion {margin:-20px 0 10px 100px;}   
   
/* fin estructuras y fondos */

/* Estilos de texto */
h1 {height:91px;background:url('../web/fondos/top.jpg') no-repeat left top;}
h1 span { display:none;}
h2 {font-size:1.8em;margin:10px 300px 20px 0;}
h3 {font-size:1.4em;}
h4 {font-size:1.2em;}
h4.contacto {color:rgb(92,164,237);margin:15px 0 5px 0;}
p, table {line-height:140%;color:#888;font-size:13px;}
p {margin:0 0 15px 0;}
a, a:link, a:visited {color:#0065FF;}
div.detalles h4 {font-size:1.5em;margin:0 0 10px 0;}
div.detalles p strong {color:#0065FF;}
div.detalles table, div#popup table {width:100%;border-collapse:collapse;text-align:left;}
div.detalles table td {padding:3px;}

div#popup h2 {width:100%;}
div#popup table td {padding:3px;font-size:12px;border-bottom:#888 solid 1px;text-transform:lowercase;}
div#popup table .zona {background:#222;color:#fff;border-top:#ccc solid 1px;border-bottom:#ccc solid 1px;}
div#popup table tr.tr_verde {background:#008000;color:#fff;}
div#popup table tr.tr_amarillo {background:#FFFF66;color:#333;}
div#popup table tr.tr_rojo {background:#FF020D;color:#fff;}
div#popup table td.titulo_celda {text-transform:uppercase;font-weight:bold;}
div#popup table.tablaclima {width:100%;}
div#popup table.tablaclima td {border-bottom:#666 solid 1px;}
    
div.titular p.fecha {margin:5px 0;}
div.titular h3 {margin:0 0 10px;}    
div.titular h3 a {text-decoration:none;}
div.titular h3 a:hover {color:#5EBDF0;}    

#footer h4 {color:#fff;margin-bottom:5px;}
#footer p{color:#fff;font-size:12px;margin:0 0 5px 0;}
#footer p.small a {color:#002F5E;font-size:0.9em;text-decoration:none;}
#footer p.small a:hover {color:#000;}
#footer a {color:#fff;}
#footer a:hover {color:#66CCFF;}
#disclaimer {color:#444;}
/* fin estilos de textos */

#mensaje {position:relative;margin:10px 0;padding:15px 10px 15px 30px;cursor:pointer;}
#mensaje li {margin:0 0 0 15px;list-style-type:none;}
#mensaje #close {position:absolute;right:20px;cursor:pointer;color:#fff;top:15px;}
#mensaje.errors {background:#111 url('../img/iconos/delete.png') no-repeat 5px 50%;color:#ccc;border:#666 solid 1px;}
#mensaje.confirmacion {background:#A2FF83 url('../img/iconos/accept.png') no-repeat 13px 50%;color:#000;border:#40BF2C solid 1px;}    
#mensaje.aviso {background:#C1DEFF;color:#000;border:#40BF2C solid 1px;}


/* Menús  */
#menu ul, #menu ul li {margin:none;padding:none;} 
#menu ul li a {display:block;height:41px;background-position:left top;background-repeat:no-repeat;margin:none;padding:none;}
#menu ul li a span {display:none;margin:0;padding:0;}   
#menu ul li a.portada { background-image:url('../web/botones/portada.jpg');}
#menu ul li a.portada:hover { background-image:url('../web/botones/portada-over.jpg');}
#menu ul li a.portada-sel { background-image:url('../web/botones/portada-sel.jpg');}
#menu ul li a.empresa {background-image:url('../web/botones/empresa.jpg');}
#menu ul li a.empresa:hover {background-image:url('../web/botones/empresa-over.jpg');}
#menu ul li a.empresa-sel {background-image:url('../web/botones/empresa-sel.jpg');}
#menu ul li a.servicios {background-image:url('../web/botones/servicios.jpg');}
#menu ul li a.servicios:hover {background-image:url('../web/botones/servicios-over.jpg');}
#menu ul li a.servicios-sel {background-image:url('../web/botones/servicios-sel.jpg');}  
#menu ul li a.equipamiento {background-image:url('../web/botones/equipamiento.jpg');}
#menu ul li a.equipamiento:hover {background-image:url('../web/botones/equipamiento-over.jpg');}
#menu ul li a.equipamiento-sel {background-image:url('../web/botones/equipamiento-sel.jpg');}   
#menu ul li a.equipo-humano {background-image:url('../web/botones/equipo.jpg');}
#menu ul li a.equipo-humano:hover {background-image:url('../web/botones/equipo-over.jpg');}
#menu ul li a.equipo-humano-sel {background-image:url('../web/botones/equipo-sel.jpg');}
#menu ul li a.noticias {background-image:url('../web/botones/noticias.jpg');}
#menu ul li a.noticias:hover {background-image:url('../web/botones/noticias-over.jpg');}
#menu ul li a.noticias-sel {background-image:url('../web/botones/noticias-sel.jpg');}
#menu ul li a.galeria {background-image:url('../web/botones/galeria.jpg');}
#menu ul li a.galeria:hover {background-image:url('../web/botones/galeria-over.jpg');}
#menu ul li a.galeria-sel {background-image:url('../web/botones/galeria-sel.jpg');}
#menu ul li a.informacion-util {background-image:url('../web/botones/informacion.jpg');}
#menu ul li a.informacion-util:hover {background-image:url('../web/botones/informacion-over.jpg');}
#menu ul li a.informacion-util-sel {background-image:url('../web/botones/informacion-sel.jpg');}
#menu ul li a.contacto {background-image:url('../web/botones/contacto.jpg');}
#menu ul li a.contacto:hover {background-image:url('../web/botones/contacto-over.jpg');}
#menu ul li a.contacto-sel {background-image:url('../web/botones/contacto-sel.jpg');}

#sub-menu ul li {display:inline;}
#sub-menu ul li a span {display:none;}
#sub-menu ul li a {float:right;width:136px;height:38px;margin:0 0 0 10px;background-repeat:no-repeat;background-position:left top;border:#000 solid 2px;} 
#sub-menu ul li a.imagenes {background-image:url('../web/botones/imagenes.jpg');}
#sub-menu ul li a.imagenes:hover {border:#ffc solid 2px;}
#sub-menu ul li a.imagenes-sel {background-image:url('../web/botones/imagenes-sel.jpg');border:#ffc solid 2px;}
#sub-menu ul li a.videos {background-image:url('../web/botones/videos.jpg');}
#sub-menu ul li a.videos:hover {border:#ffc solid 2px;}
#sub-menu ul li a.videos-sel {background-image:url('../web/botones/videos-sel.jpg');border:#ffc solid 2px;}
#sub-menu ul li a.formulario {background-image:url('../web/botones/formulario.jpg');}
#sub-menu ul li a.formulario:hover {border:#ffc solid 2px;}
#sub-menu ul li a.formulario-sel {background-image:url('../web/botones/formulario-sel.jpg');border:#ffc solid 2px;}
#sub-menu ul li a.ubicacion {background-image:url('../web/botones/ubicacion.jpg');}
#sub-menu ul li a.ubicacion:hover {border:#ffc solid 2px;}
#sub-menu ul li a.ubicacion-sel {background-image:url('../web/botones/ubicacion-sel.jpg');border:#ffc solid 2px;}

div.mini a {display:block;border:#444 solid 1px;padding:10px;}
div.mini a:hover {border:#ffc solid 1px;background:#191919;}
div.mini img {border:#fff solid 1px;}

a.info {display:block;width:200px;padding:21px 0 20px 100px;margin:10px 0;font-size:1.4em;background-position:15px 50%;background-repeat:no-repeat;color:#006EDB;text-decoration:none;}
a.info:hover {color:#0071E1;}
a.info.clima {background-image:url('../web/iconos/clima.png');}
a.info.clima:hover {background-image:url('../web/iconos/clima2.png');}
a.info.clima-sel {background-image:url('../web/iconos/clima2.png');}
a.info.mareas {background-image:url('../web/iconos/mareas.png');background-position:28px 50%;}
a.info.mareas:hover {background-image:url('../web/iconos/mareas2.png');}
a.info.mareas-sel {background-image:url('../web/iconos/mareas2.png');background-position:28px 50%;}
a.info.puertos {background-image:url('../web/iconos/puertos.png');}
a.info.puertos:hover {background-image:url('../web/iconos/puertos2.png');}
a.info.puertos-sel {background-image:url('../web/iconos/puertos2.png');}
a.info.oceanografia {background-image:url('../web/iconos/ola.png');}
a.info.oceanografia:hover {background-image:url('../web/iconos/ola2.png');}
a.info.geodesia {background-image:url('../web/iconos/geodesia.png');}
a.info.geodesia:hover {background-image:url('../web/iconos/geodesia2.png');}
a.info.ingenieria-fondeo {background-image:url('../web/iconos/formula.png');}
a.info.ingenieria-fondeo:hover {background-image:url('../web/iconos/formula2.png');}
a.info.servicios-especiales {background-image:url('../web/iconos/plano.png');}
a.info.servicios-especiales:hover {background-image:url('../web/iconos/plano2.png');}
a.info.servicios-informacion {background-image:url('../web/iconos/arroba.png');}
a.info.servicios-informacion:hover {background-image:url('../web/iconos/arroba2.png');}

#ingreso-clientes a{background:url('../web/botones/acceso-clientes.png') no-repeat left top;display:block;height:41px;}
#ingreso-clientes span {display:none;}

ul.servicios li, ul.informacion li {color:#ccc;margin:0 0 5px 0;padding:3px 0 0 20px;font-size:1.2em;background:url('../web/iconos/flecha-azul.png') no-repeat left 3px;}

ul.informacion li a { color:#fff;text-decoration:none; }

/* Fin menús  */

/* Formularios */
#principal p.enlace_ingreso {margin:0 0 0 210px;}
#principal p.enlace_ingreso a {color:#0080FF;text-decoration:none;}
#principal p.enlace_ingreso a:hover {color:#ff9;}
#principal p.enlace a:hover {color:#9CD0FF;}
/***********
#principal form fieldset {border:#333 solid 1px;}
#principal form legend {margin-left:5px;text-align:left;color:#999;padding:0 3px;}
#principal form label {float:left;width:200px;padding:2px 10px 2px 2px;text-align:right;color:#FFC;}
#principal form input.date-pick {width:136px;}
#principal form .campo_ingreso {padding:3px;margin-bottom:2px;min-height:22px;}
#principal form .campos  {width:250px;padding:1px 3px;color:#1a1a1a;}
*************/

#principal form {width:100%;}
#principal p.destacado {color:#66CCFF;}
#principal form fieldset {border:none;}
#principal form legend {margin-left:5px;text-align:left;color:#999;padding:0 3px;}
#principal form .campo_ingreso {padding:3px;margin-bottom:2px;min-height:22px;}
#principal form label {float:left;width:200px;padding:2px 10px 2px 2px;text-align:right;color:#FFC;}
#principal form select.numero {width:143px;}
#principal form .claves, form .keys {width:30px;}
#principal form .keys {padding:1px 3px;border:none;}
#principal form .campos:disabled {border:none;color:#fff;font-size:1.2em;}
#principal form .textos {width:490px;height:200px;font-size:1em;}
#principal form .fecha {width:100px;margin-left:2px;}
#principal form .numero {width:135px;}
#principal form div.campo_submit {margin:10px 0 0 110px;}
#principal form div.submit_acceso {margin:10px 0 15px 215px;}
#principal form div.campo_submit input {width:120px;}
#principal form ul.errors {margin:3px 0 5px 212px;color:#ff0;}

#reproductor {background:#000;text-align:center;width:90%;padding:5%; }


#form-contacto form fieldset {border:none;}
#form-contacto form fieldset legend {line-height:140%;margin:0 0 15px 0;color:#777;}
#form-contacto form fieldset legend span { color:#0080FF;font-weight:bold;}
#form-contacto form .campo_ingreso {padding:3px;margin-bottom:2px;min-height:22px;}
#form-contacto form label {float:left;width:100px;padding:2px 10px 2px 2px;text-align:right;color:#FFC;}
#form-contacto form fieldset input {width:250px;} 
#form-contacto form fieldset textarea {width:254px;height:100px;} 
#form-contacto form div.campo_submit {margin:10px 0 0 110px;}
#form-contacto form ul.errors {margin:3px 0 5px 112px;color:#ff0;}

h2.encuesta {width:90%;}
form#encuesta fieldset {margin:20px 0;}
form#encuesta fieldset legend {color:#999;font-size:14px;font-weight:bold;}
form#encuesta dt label {width:100%;text-align:left;margin:10px 0 5px 0;}
form#encuesta dd {clear:both;}
form#encuesta #submit {padding:7px;border:#444 solid 2px;background:#222;color:#fff;margin:15px 0 0 0;}
form#encuesta label.optional {display:none;}  

ul.descargas {margin:10px 18px;}
ul.descargas li {margin:8px 0;list-style-type:square;}
ul.descargas li a {text-decoration:none;}
ul.descargas li a:hover {color:#ff0;}
    
  
/* Fin formularios */


/* Otros estilos */
.ocultar {display:none;}