@import url(http://fonts.googleapis.com/css?family=Lato);


/*pagina para manejo de bordes y sombra: http://www.cssmatic.com/es/box-shadow */
.navbarm {
    margin-top: -50px; 
    height: 80px;
    position: relative;
    background: rgba(71,46,9,0.76);
    background: -moz-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(71,46,9,0.76)), color-stop(100%, rgba(217,107,11,0.62)));
    background: -webkit-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: -o-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: -ms-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: linear-gradient(to right, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#472e09', endColorstr='#d96b0b', GradientType=1 );
}


.container {
    width: 100%;
    border: none;
}

/*Lo desactivo cuando estoy en modo diseño para poder visualizar bien los controles*/
/*pero ojo se activa cuando este en modo produccion o lo subo al servidor para que se vea bien todo el sitio*/
.conta {
    width: 100%;
    overflow: hidden;
    display: inline-block;
    border: none;    
}


.asumir_largopag_menuizq {
    height: 600px;
}


.side-bar {
    background: rgba(71,46,9,0.76);
    background: -moz-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(71,46,9,0.76)), color-stop(100%, rgba(217,107,11,0.62)));
    background: -webkit-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: -o-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: -ms-linear-gradient(left, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    background: linear-gradient(to right, rgba(71,46,9,0.76) 0%, rgba(217,107,11,0.62) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#472e09', endColorstr='#d96b0b', GradientType=1 );
    position: absolute;
    /*En el site.master con javascript defino el alto de la side-bar para que se ajuste al tamaño del div del contenido*/
    width: 228px;
    color: #fff;
    transition: margin-left 0.5s;
    height: 100vh;
}

    .side-bar ul {
        list-style: none;
        padding: 0px;
    }

        .side-bar ul li.menu-head {
            font-family: 'Lato', sans-serif;
            padding: 20px;
        }


            .side-bar ul li.menu-head a {
                color: #fff;
                text-decoration: none;
                height: 50px;
            }


        .side-bar ul .menu-head a {
            color: #fff;
            text-decoration: none;
            height: 50px;
        }

        .side-bar ul .menu li a {
            color: #fff;
            text-decoration: none;
            display: inline-table;
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            .side-bar ul .menu li a:hover {
                border-left: 3px solid #ECECEA;
                padding-left: 17px;
                background: rgba(181, 206, 222, 0.52);
            }

            .side-bar ul .menu li a.active {
                padding-left: 17px;
                background: #D9853B;
                border-left: 3px solid ;
            }

                .side-bar ul .menu li a.active:before {
                    content: "";
                    position: absolute;
                    width: 0;
                    height: 0;
                    border-top: 20px solid transparent;
                    border-bottom: 20px solid transparent;
                    border-left: 7px solid #D9853B;
                    margin-top: -10px;
                    margin-left: 208px;
                }


.content {
    padding-left: 228px;
    transition: padding-left 0.5s;
    width: 100%;
   }

.active > .side-bar {
    margin-left: -174px;
    transition: margin-left 0.5s;
}

.active > .content {
    padding-left: 50px;
    transition: padding-left 0.5s;
}

/*.navbarm {
    border-bottom: 2px solid #94f573;
}*/

.body-content {
    border-top-left-radius: 2% 2%;
}

.list-group a:hover {
    padding-left: 17px;
    background: #7dfaa2;
    border-left: 3px solid;
    border-left-color: #04860b;
}

.list-group a:active {
    padding-left: 17px;
    background: #7dfaa2;
    border-left: 3px solid;
    border-left-color: #04860b;
}

.list-group a:focus {
    padding-left: 17px;
    background: #85aec6;
    border-left: 3px solid;
    border-left-color: #04860b;
    color: #061457;

}


/*Ojo con la imagen era label que me distorcionaba el ancho del barra de navegacion y tambien los divs*/
/*La siguientes lineas me permite ajustar la imagen al tamaño de la pantalla sin desajustar lo anterior*/
/*img {
    display: block;
    margin: 0 auto;
    padding-left: 5px; 
    max-width: 90%;
    width: 80%;
    position: center;
}


@media only screen and (max-width:800px) {
    img {
        margin: 0 auto;
        padding-left: 5px;
        max-width: 70%;
        width: 70%;
        position: center;
    }
    
   -----------------

}*/