html, body
{
    font-size: 12px;
    background:#C0C0C0;
    width:100%;
    padding: 0; /*Opera */
    font-family: Verdana;
    color: #333333;
    text-align:center; /* para que lo centre en IE */
}
strong
{
    font-weight: bold;
}
#aspnetForm
{
    width: 100%;
    text-align:justify;
    background:#C0C0C0;
}
h1
{
    font-size:36px;
    font-weight:bold;
}
h2
{
    font-size: 22px;
    font-weight: bold;
    text-align:left;
    margin-top:5px;
    margin-bottom:5px;
    margin-bottom:20px;
}
h3
{
    font-size:16px;
    text-align:left;
    color:#016ec5;
    font-style:italic;
}
h4
{
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
}
p
{
    margin-top:15px;
    margin-bottom:15px;
    line-height:1.4em;
}
a
{
    text-decoration:none;
    outline:none;
    color:#016ec5;
}
a:link
{
    color:#016ec5;
}
a:visited
{
    color:#016ec5;
}
a:hover
{
    outline:none;
    color:#6faa1e;
}
   
/* precarga de imagenes */
img { background:url(../Images/loader.gif) no-repeat 50% 50%; }

/*********************************************************************************************/
/* ---------------------------------------- LAYOUT  ---------------------------------------- */
/*********************************************************************************************/

#layoutTabla
{
    width:100%;
}
.tdCentro
{
    margin:0;
    padding:0;
    width:900px;
}
#trHeader
{
    background-color:White;
    width:900px;
}
.tdSombreado
{
    background-image: url('../Images/sombra.png');
    background-repeat: repeat-x;
}
#DivContent
{  
    width:898px;
    background:White;
    margin:auto;
    border-left:solid 1px #666666;
    border-right:solid 1px #666666;
    position:relative;
    overflow:auto;
}
#DivMapaWeb
{
    background-color:#F1F1F1;
    overflow:hidden; /* lo pongo a hidden por que en Ie 6 y 7 si una div tiene un padding y el contenido de esta se establece al 100% no cuenta el padding y salen las barras de scroll */
    border-left:solid 1px #666666;
    border-right:solid 1px #666666;
    padding:10px;
}
#DivFooter
{
    text-align:center;
    background-color:#333333;
    margin:auto;
    color:#999999;
    padding:10px;
    font-size:11px;
}
.fondoCabecera
{
    background-image:url('../Images/ondas.jpg');
    background-color:White;
    background-repeat:no-repeat;
    background-position:right;
}
/*********************************************************************************************/
/* ------------------------------- MENU HORIZONTAL PRINCIPAL  ------------------------------ */
/*********************************************************************************************/

.FondoMenuHorizontal
{
    width:100%;
    height:25px;
    border-top:solid 5px #016ec5;
    background-image: url('../Images/fondoMenuHorizontal.jpg');
    background-repeat: repeat-x;
}   
#MenuHorizontal 
{ 
    list-style-type: none;
    width:900px;
    float:none;
    margin-left:0px;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}
#MenuHorizontal li 
{
    float: left;
    text-align:center;
    height:25px;
    width:100px;
    margin-right:1px;
    list-style:none;
    list-style-position:outside;
}
#MenuHorizontal li a 
{
    display: block;
    text-decoration: none;
    color: #fff;
    padding:5px;
    font-weight:bold;
    outline-style:none;
    background:url('../Images/menuHorizontalHover.jpg') 0px 25px repeat-x;
}
#MenuHorizontal li a:hover 
{
    background:url('../Images/menuHorizontalHover.jpg') 0px 0px repeat-x;
    color: #000;
}
#MenuHorizontal li a.active, #MenuHorizontal li a.active:hover 
{
    background:url('../Images/menuHorizontalHover.jpg') 0px 0px repeat-x;
    color: #000;
}

/*********************************************************************************************/
/* ----------------------------- MENU HORIZONTAL CambioIdioma  ----------------------------- */
/*********************************************************************************************/

#MenuCambioIdioma 
{ 
    list-style-type: none;
    float:right;
}
#MenuCambioIdioma li 
{
    float: left;
    text-align:left;
    height:15px;
    list-style:none;
    list-style-position:outside;
}
.listItemConBarra /* muestra la barra entre los elementos de la lista horizontal */
{
    border-right:solid 1px #666666;
}
#MenuCambioIdioma li a  
{
    display: block;
    text-decoration: none;
    color: #666666;
    padding-right:5px;
    padding-left:5px;
    outline-style:none;
    cursor:pointer;
}
#MenuCambioIdioma li a:hover 
{
    color: #6faa1e;
}

/*************************************************************************************************/
/* ----------------------------------------- MENU VERTICAL ------------------------------------- */
/*************************************************************************************************/

.MenuVertical /* lista que representa el menu vertical */
{
    background:#E6E6E6;
} 
.MenuVertical li 
{
    list-style:none;
    list-style-position:outside;
} 
.MenuVertical li a
{
    color:#333333;
} 
.SubMenuVertical /* lista que representa el submenu */
{
    background:#D1D1D1;
    list-style-type: none;
    width:200px;
} 
.MenuItemBordeUpDown /* item de menu con borde arriba y abajo */
{
    border-top:solid 1px #C0C0C0;
    border-bottom:solid 1px #C0C0C0;
}
.MenuItemBordeDown /* item de menu con borde abajo */
{
    border-bottom:solid 1px #C0C0C0;
}
.NivelUnoMenuVertical a
{
        display: block;
        text-decoration: none;
        outline-style:none;
        padding:8px;
} 
.NivelUnoMenuVertical a:hover
{
        background-color:#F7F7F7;
} 

.NivelDosMenuVertical
{
    font-size:11px;
}
    .NivelDosMenuVertical a
    {
        display: block;
        text-decoration: none;
        color:#016ec5;
        outline-style:none;   
        padding:5px 5px 5px 20px;
    } 
        .NivelDosMenuVertical a:hover
        {
            display: block;
            text-decoration: none;
            outline-style:none;  
            background-color:#8E8E8E;
            color:White;
        } 
.tituloMenuVertical /* titulo o cabecera del Menu vertical de cada seccion de la web */
{
    background-color:#6faa1e;
    background-image: url('../Images/degradadoVerde.jpg');
    background-repeat: repeat-x;
    font-size:14px;
    padding:9px;
    padding-left:10px;    
    margin:0;
    cursor:default;
    border-bottom:solid 1px #666666;
}

.contenedorMenuVertical
{
    width:200px; 
    border:solid 1px #666666;
    /* Posicionamiento de la capa que contiene el menu */
    float: left; /* Alineada a la izquierda */
    position: relative; /* posicion relativa a la capa que la contiene, hay que establecer position: relative o absolute para poder usar z-index */
    z-index: 2; /* cuanto mas alto es el numero mas "arriba" esta */
    top: -80px; /* como la capa a la que queremos sobreponernos (la imagen de cada seccion) esta encima hay que usar un top negativo */
   
   /* NO PUEDO USAR ESTO POR QUE GOOGLE CHROME NO LO MUESTRA CORRECTAMENTE */
    /* margin-bottom:-60px; /* aunque el menu este hacia arriba (gracias al top -80) sigue ocupando la altura como si no se hubiera movido 
    por eso es necesario ponerle un margen inferior negativo, para que el contenedor general que se expande segun el contenido que tenga 
    lo haga de manera correcta y no reserve un espacio innecesario que el menu ya no ocupa (ya que se a subido hacia arriba con el top negativo) 
    ponemos -60 en vez de -80 por que queremos que deje un margen de 20 (80-60 = 20)*/
}

/********************************************************************************************************/
/* --------------------------------------------- MAPA WEB --------------------------------------------- */
/********************************************************************************************************/

.mapaWebContainer /* Div que contiene el mapa web */
{
    overflow:auto; /* para que se expanda cuando el contenido lo haga */
}
.mapaWebSeccion /* Cada una de las columnas esta representada por este Div */
{
    float:left; /* Alineadas a la izquierda */
    width:25%; /* Como son cuatro columnas (100% / 4 = 25%) */
}
.mapaWebTituloSeccion /* Titulo de cada una de las columnas (secciones de la web), este titulo es un H2 */
{
    margin:0 0 5px 0;
    font-size:12px;
}
.mapaWebListaSeccionNivelUno
{
    list-style:none;
    list-style-position:outside;
    line-height:1.3em;

}
/* Estilo de los links del mapa web */
.mapaWebListaSeccionNivelUno a
{
    color:#333333;
}
.mapaWebListaSeccionNivelUno a:link
{
    color:#333333;
}
.mapaWebListaSeccionNivelUno a:visited
{
    color:#333333;
}
.mapaWebListaSeccionNivelUno a:hover
{
    color:#333333;
    text-decoration:underline;
}
 
/* ------- Colores ------ */
/* AzulOscuro = #091165 */
/*AzulClaro = #016ec5 */
/* VerdeClaro = #6faa1e */

/* --------------------------------------------- GENERALES ----------------------------------------------- */
.listaSling
{
    margin-left:20px; /* uso margin left a toda la lista en vez de poner list-style-position:inside a elemento por que IE 6 y 7 no lo interpreta bien */
}
.listaSling li
{
    list-style-image:url(../Images/bullet.gif);
    line-height:16px;
}
.imgConBorde
{
    border: solid 1px #c0c0c0;
    background-color:#F1F1F1;
    padding:5px;
}
.pieFoto
{
    font-size:11px;
    margin:5px;
    margin-bottom:20px;
    font-style:italic;
}
/* ------------------------------------ Cabecera de cada seccion ---------------------------------*/
.DivSombraVertical
{
    width:50px;
    height:200px;
    background-image:url('../Images/sombraVertical.png');
    background-repeat:repeat-y;
    float:right;
}
.DivCabeceraSeccion
{
    background-color:White;
    width: 898px; height: 200px;
}
.DivCabeceraSeccion img
{
    float:right;
}
.DivTituloSeccion /* Div que contitene el titulo y la leyenda que se muestra en  cada seccion (sobre la imagen del principio de la pagina */
{
    position: absolute; /* posicion absoluta o relativa para que se pueda usar la propiedad z-index */
    z-index: 3; /*  para que se pueda superponer a la imagen que se muestra en cada seccion */
    left: 20px;
    top: 10px;
    width: 350px;
}

.DivTituloSeccion h2 /* titulo */
{
    text-align:left;
    color:White;
    margin:0px;
}

.DivTituloSeccion p /* leyenda */
{
    font-size:11px;
    font-style:italic;
    color:White;
}

/* ------------------------- Pagina de Catalogos -------------------*/ 
.DivCatalogo
{
    cursor:pointer;
    margin:5px;
}
.DivCatalogo span
{
    position:relative;
    top:14px;
}
.DivCatalogo img
{
    border-style:none;
}
/* --------------------------- UTILES --------------------------*/
.DivClear
{
    clear:both;
}

/* ----------------------------- Servicios Certificaciones Tabla -------------------------------- */
.tablaServiciosDiseno
{
   margin:auto;
   border:solid 1px Black;
   width:630px;
   font-size:11px;
}
.tablaServiciosDiseno td
{
    border:solid 1px Black;
    padding:5px;
}
.tablaServiciosDiseno th
{
    border:solid 1px Black;
    padding:5px;
    font-size:12px;
    font-weight:bold;
    background:#91cc41;
}
.Azul1
{
    background-color:#548dd4;
    width:165px;
}
.Azul2
{
    background-color:#8db3e2;
}
.Azul3
{
    background-color:#c6d9f1;
}
.Azul4
{
    background-color:#dbe5f1;
}

/* ----- Colores Tabla ------- */
/* Azul1 > #548dd4 */
/* Azul2 > #8db3e2 */
/* Azul3 > #c6d9f1 */
/* Azul4 > #dbe5f1 */