.style1 {
    width: 200px;
    vertical-align: top;
}





.accordionCabecera {
  
    background-color: #5DB230;
    font-family: Lato;
    font-size: small;
    font-weight: bold;
    padding: 17px;
    margin-top: 7px;
    cursor: pointer;
    
    color: White;
    border-radius: 8px;
    box-shadow: 0px 2px #15782f;
}


    .accordionCabecera:hover {
        box-shadow: 0px 3.5px #15782f;
   
    }


.accordionContenido {
    font-family: Lato;
    font-size: small;
    background-color: #1C5D97;
    color: White;
    /* border: 1px solid black;*/
    border-top: none;
    padding: 7px;
    border-radius: 6px;
}

.style2 {
    height: 105px;
    text-align: right;
    vertical-align: bottom;
    margin-top: 10px !important;
}



.menu, .menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu {
    width: 200px;
}

    .menu a {
        display: block;
        color: #FFFFFF;
        text-decoration: none;
        font-family: Lato;
        padding-bottom: 11px;
        /*text-align: left;*/
        border-top: #1C5D97 8px solid;
    }

        .menu a:hover {
            font-weight: bold;
        }

    .menu li {
        margin: 0;
        padding: 0;
        margin-bottom: 1px;
    }

    .menu ul li {
        padding-left: 15px;
    }

.medio {
    text-align: center;
}

.derecha {
    text-align: right;
}

.grid {
    width: 600px;
    border-width: 0px;
    margin-top: 8px;
}

    .grid a, .grid a:link, .grid a:active, .grid a:visited, .grid a:hover {
        font-weight: bold;
        color: #000000;
        text-decoration: none;
    }

    .grid table {
        border-color: #99BBE8;
        border-width: 1px;
    }

    .grid td, .grid th {
        height: 18px;
        vertical-align: middle;
    }



    .grid td {
        border-style: solid;
        border-width: 1px;
        border-color: #fff #C0C0C0 #C0C0C0 #C0C0C0;
        cursor: pointer;
    }

.selectedrow {
    background: transparent url(../Proteccion/Image/blue/BarraSelect.gif) repeat-x;
    border: 1px dotted #99BBE8;
    font-weight: bold;
}

.titulonota {
    background: transparent url(../Proteccion/Image/blue/thbackground.gif) repeat-x;
    height: 19px;
    border: solid 1px #99BBE8;
    font-weight: normal;
    height: 25px;
}

.Migrilla table {
    font-family: Lato;
    font-size: 10pt;
    width: 650px;
}

.tituloPrimero {
    text-align: center;
    border: 1px solid #000000;
    border-color: #5DB230;
}

.Migrilla th {
    border: 1px solid #000000;
    text-align: left;
}

.Migrilla td {
    border: 1px solid #000000;
}

.lila th {
    background: transparent url(../Proteccion/Image/blue/back-lila.gif) repeat-x;
    height: 19px;
    border: solid 1px #6666CC;
    font-weight: normal;
}

.lila td, .lila th {
    height: 18px;
    vertical-align: middle;
}

.azul th {
    background: transparent url(../Proteccion/Image/blue/thbackground.gif) repeat-x;
    height: 19px;
    border: solid 1px #99BBE8;
    font-weight: normal;
}

.azul td, .azul th {
    height: 18px;
    vertical-align: middle;
}

.amarillo th {
    background: transparent url(../Proteccion/Image/blue/back-ama.gif) repeat-x;
    height: 19px;
    border: solid 1px #FFCC66;
    font-weight: normal;
}

.amarillo td, .amarillo th {
    height: 18px;
    vertical-align: middle;
}

.rosarow {
    background: transparent url(../Proteccion/Image/blue/select-rosa.gif) repeat-x;
    border: 1px dotted #FFCCFF;
    font-weight: bold;
}

.bordesA {
    background: transparent url(../Proteccion/Image/blue/thbackground.gif) repeat-x;
    height: 19px;
    border: solid 1px #99BBE8;
    font-weight: normal;
}

.hrAzul {
    border-color: #99BBE8;
    color: #99BBE8;
    background-color: #99BBE8;
    width: 100%;
}

.hrVerde {
    border-color: #5db839;
    color: #5db839;
    background-color: #5db839;
    width: 100%;
}


.DropDown {
    background-color: White;
    color: #21357C;
    border: 1px solid #c5dbec; /*font-weight: bold; 	 /*width: 200px;*/
    padding: 0.4em 1em;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}

.textbox {
    border: 1px solid #c5dbec;
    font-weight: bold;
    width: 200px;
    padding: 0.4em 1em;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}

.NoVisible {
    visibility: hidden;
}

.popup {
    position: absolute;
    width: 100%;
    height: 110%;
    top: 0px;
    left: 0px;
    background-image: url(images/popups.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-color: #CCC;
    opacity: 0.75;
    filter: alpha(opacity=75);
}

.BackgroundCssClass {
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.5;
    -moz-opacity: 0.7;
}

.TablePop {
    border: 1px solid #5db839;
    font-weight: bold; /*background-image: url(../Images/ui-bg_flat_75_f5fce8_40x100.png);*/
    background-color: transparent;
    padding: 0.4em 1em;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
}

.butPop {
    border: 1px solid #5db839;
    font-weight: bold;
    background-image: url(../Image/menu_level1_item2.png);
    background-color: Transparent;
    background-repeat: repeat;
    font-weight: bolder;
    font-family: @Arial Unicode MS;
    padding: 0.4em 1em;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    cursor: pointer;
    color: #21357C;
}

.textboxV {
    border: 1px solid #5db839;
    font-weight: bold;
    width: 200px;
    padding: 0.4em 1em;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
}

.estiloasunto {
    border: 1px solid black;
    background-color: #ffffcd;
    font-family:Lato;
    font-size: small;
    font-weight: bold;
    padding: 4px;
    margin-top: 4px;
    cursor: pointer;
    text-align: left;
    color: Black;
}

.estilomensaje {
    font-family: Lato;
    font-size: small;
    background-color: #ffffcd;
    color: Black;
    border: 1px solid black;
    border-top: none;
    padding: 7px;
}

.estilotitulo {
    font-family: Lato;
    font-size: small;
    color: White;
    text-align: left;
}

.estilohv {
    font-family: Lato;
    font-size: small;
    background-color: #ffffcd;
    color: Black;
    border: 1px solid black;
    border-top: none;
    padding: 7px;
}

#close {
    cursor: pointer;
    width: 30px;
    line-height: 30px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: -10px;
    right: -10px;
}

#MensajeAlumno {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 400px;
    height: 200px;
    margin: -100px 0 0 -200px;
}




@media (max-width: 320px) {

    .homeOffice {
        margin-top: 10px;
        max-width: 90%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -13%;
        font-family: Lato;
        font-size: small;
        margin-left: -75px;
        text-align: center !important;
    }
}

@media (min-width: 320px) and (max-width: 350px) {

    .homeOffice {
        margin-top: 30px;
        max-width: 85%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -13%;
        font-family: Lato;
        font-size: small;
        margin-left: -65px;
        text-align: center !important;
    }
}


@media (min-width: 350px) and (max-width: 390px) {

    .homeOffice {
        margin-top: 10px;
        max-width: 95%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -13%;
        font-family: Lato;
        font-size: small;
        margin-left: -65px;
        text-align: center !important;
    }
}


@media (min-width: 390px) and (max-width: 393px) {

    .homeOffice {
        margin-top: 25%;
        max-width: 95%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -5%;
        font-family: Lato;
        font-size: small;
        margin-left: -65px;
        text-align: center !important;
    }
}


@media (min-width: 393px) and (max-width: 400px) {

    .homeOffice {
        margin-top: 15%;
        max-width: 95%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -13%;
        font-family: Lato;
        font-size: small;
        margin-left: -60px;
        text-align: center !important;
    }
}

@media (min-width: 400px) and (max-width: 410px) {

    .homeOffice {
        margin-top: 45px;
        max-width: 60%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -12%;
        font-family: Lato;
        font-size: small;
        margin-left: -60px;
        text-align: center !important;
    }
}


@media (min-width: 410px) and (max-width: 413px) {

    .homeOffice {
        margin-top: 30%;
        max-width: 75%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -12%;
        font-family: Lato;
        font-size: small;
        margin-left: -60px;
        text-align: center !important;
    }
}



@media (min-width: 413px) and (max-width: 430px) {

    .homeOffice {
        margin-top: 25%;
        max-width: 80%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -10%;
        font-family: Lato;
        font-size: small;
        margin-left: -60px;
        text-align: center !important;
    }
}


@media (min-width: 430px) and (max-width: 480px) {

    .homeOffice {
        margin-top: 45px;
        max-width: 60%;
        visibility: visible;
    }

    .TablaUsuario {
        font-family: Lato;
        font-size: small;
        margin-left: -40px;
        text-align: center !important;
    }
}


@media (min-width: 480px) and (max-width: 600px) {

    .homeOffice {
        margin-top: 45px;
        max-width: 65%;
        visibility: visible;
    }

    .TablaUsuario {
        font-family: Lato;
        font-size: small;
        margin-left: -55px;
        text-align: center !important;
    }
}


@media (min-width: 600px) and (max-width: 720px) {

    .homeOffice {
        margin-top: 10px;
        max-width: 70%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -6%;
        font-family: Lato;
        font-size: small;
        margin-left: -40px;
        text-align: center !important;
    }
}

@media (min-width: 720px) and (max-width: 810px) {

    .homeOffice {
        margin-top: 10px;
        max-width: 70%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -6%;
        font-family: Lato;
        font-size: small;
        margin-left: -40px;
        text-align: center !important;
    }
}



@media (min-width: 810px) and (max-width: 830px) {

    .homeOffice {
        margin-top: 5px;
        max-width: 70%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -5%;
        font-family: Lato;
        font-size: small;
        margin-left: -30px;
        text-align: center !important;
    }
}




@media (min-width: 830px) and (max-width: 912px) {

    .homeOffice {
        margin-top: 5px;
        max-width: 70%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: -5%;
        font-family: Lato;
        font-size: small;
        margin-left: -30px;
        text-align: center !important;
    }
}




@media (min-width:912px) and (max-width: 1024px) {

    .homeOffice {
        margin-top: 5px;
        max-width: 60%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: 0%;
        font-family: Lato;
        font-size: small;
        margin-left: -15px;
        text-align: center !important;
    }
}

@media (min-width:1024px) and (max-width: 1280px) {

    .homeOffice {
        margin-top: 5px;
        max-width: 50%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: 0%;
        font-family: Lato;
        font-size: small;
        text-align: center !important;
    }
}



@media (min-width:1280px) {

    .homeOffice {
        max-width: 30%;
        visibility: visible;
    }

    .TablaUsuario {
        margin-top: 0%;
        font-family: Lato;
        font-size: small;
        margin-left: 17px;
        text-align: center !important;
    }
}