/* -------------------------
            ID's Layout
   ------------------------- */

div#contenedorGral
{
    
}

div#top
{
    background: url(img/bg_topBar.gif) repeat-x;
    height: 182px;
}

    div#topCity
    {
        background: url(img/bg_topCity.jpg) no-repeat;
        height: 182px;
        position: relative;
    }

        ul#navegacion
        {
            
        }

div#pagina /* Ahora ya puede llevar height porque la #baseDeColumnas hace que página se expanda de nuevo verticalmente (# NO debe llevar height, porque si la trae, el #pie se acomoda justo debajo de la #pagina.. y como la #pagina contiene elementos flotados, se comprime verticalmente.. y el #pie queda a media pagina (Solo en IE)). */
{
    min-width: 775px;
    max-width: 966px;
    margin: 0px auto; /* Necesario para centrar la página a la ventana */
    position:relative;
    /*border-left: dashed 1px #3988C1;
    border-right: dashed 1px #3988C1;
    border-bottom: dashed 1px #3988C1;
    background-color: #ECF1F7;*/
}

    div#columna1 /* Las columnas NO deben llevar ni bordes, ni margenes ni padding, porque al calculo del porcentaje se le suman esos elementos y hacen las columnas más anchas de lo que corresponde a su porcentaje. */
    {
        float: left;
        width: 80%;
        position:relative;
        margin-bottom:20px;
    }

        #bgCol1
        {
             position:absolute;
             width:101px;
             height:587px;
             top:0px;
             left:-91px;
             background: url(img/bg_col1.png) no-repeat;
        }

        div#contColumna1
        {
            background: #FFF url(img/img_pie.jpg) no-repeat 85% 100%;
            border-left: solid 1px #000;
            border-right: solid 1px #000;
            border-bottom: solid 1px #000;
            position:relative;
            z-index:10;
            margin: 0px 5px 0px 10px;
            padding: 20px;
        }
        
        div#pie
        {
            background: #000;
            border-top:solid 1px #4688F7;
            margin: 0px 5px 0px 10px; /* necesario para que en IE el div #pie no se pegue a #contenidoPagina aunque el primero tenga margen inferior de 20 tambien */
            padding:5px 0 5px 30px;
            color:#4E708A;
            font-size:11px;
        }

    div#columna2
    {
        float: left;
        width: 20%;
        position:relative;
    }
    
        #bgCol2
        {
             position:absolute;
             width:101px;
             height:587px;
             top:0px;
             left:-5px;
             z-index:1;
             background: url(img/bg_col2.png) no-repeat;
        }

        div.contColumna2
        {
            margin: 10px 10px 0px 5px;
            padding: 6px;
            background: #FFF;
            border: solid 1px #000;
            position:relative;
            z-index:10;
            background: #FFF url(img/bg_contColumna2.gif) no-repeat 100% 100%;
        }

    div#baseDeColumnas
    {
        clear: both;
        /*margin: 0 0 20px;  necesario para que en Firefox el div #pie no se pegue a #stopFloat aunque este ultimo tenga margen superior de 20 tambien */
    }

   
   /* -------------------------
            Clases Layout
   ------------------------- */

.lnkHomePage
{
    display: block;
    height:80px;
    width:270px;
    position:absolute;
    bottom:10px;
}

div.contColumna2 h2
{
    font-size:12px;
    /*border-bottom:dashed 2px #FFF;*/
    letter-spacing: 0;
    background: url(img/h2_linea.jpg) no-repeat 0% 100%;
    color:#FFF;
    margin:-6px -6px 0 -6px;
    padding:2px 2px 6px 12px;
}

div.contColumna2 p
{
    font-size:11px;
}



/* -------------------------
      Menu navegacion Top      
   ------------------------- */