@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Oswald);

.desktop{
    padding:10px;
}

<!--
.sub-position{
    width:50%;
    color:#FFF;
    float:right;
}

.menu{
    width:100%;
    margin:0 auto;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase; 
    font-size:90%;

}

@media (min-width: 1024px) {
    .sub-header{
        width:85%;
        min-width:1024px;
        max-width:1024px;
        margin: 0 auto;
    }

    /* Header*/
    .header{
        width:85%;
        min-width:1024px;
        max-width:1024px;
        margin: 0 auto;
        color:#FFF;
    }

    .logo img{
        width:70%;
        height:auto;

    }

    /* Contenedor */
    .container {
        width:85%;
        min-width:1024px;
        max-width:1024px;
        margin: 0 auto;
    }
    .content {
        width:70%;
        float:left;
        padding: 5px 0;
    }


    /* Content Left */
    .content-left {
        float:left;
        width:29%;
        background-color:#fbb03f;
        font-size:80%;

    }
    /* Ruta */
    .ruta{
        font-size:80%;
        margin-left:10px;
    }


    /* Pie de paginas */
    .viniles{
        float:left;
        width:30%;
        min-width: 310px;
        margin:17px;
    }
    .footer{
        width:85%;
        min-width:1024px;
        max-width:1024px;
        margin: 0 auto;
        padding-bottom:5px;
        padding-top:5px;
        margin-bottom:5px;

    }
    .end{
        width:85%;
        min-width:1024px;
        margin: 0 auto;
    }

    .text{
        padding:5px;
    }
}

@media (min-width: 700px) and (max-width: 1024px) {
    .sub-header{
        width:95%;
        margin: 0 auto;
    }

    /* Header*/
    .header{
        width:95%;
        margin: 0 auto;
        color:#FFF;
    }

    .logo img{
        width:80%;
        height:auto;

    }

    /* Contenedor */
    .container {
        width:95%;
        margin: 0 auto;
    }
    .content {
        width:65%;
        float:left;
        padding: 5px 0;
    }


    /* Content Left */
    .content-left {
        float:left;
        width:29%;
        min-width:250px;
        background-color:#fbb03f;

    }
    /* Ruta */
    .ruta{
        font-size:80%;
        margin-left:10px;
    }


    /* Pie de paginas */
    .viniles{
        float:left;
        width:30%;
        min-width: 310px;
        margin:17px;
    }
    .footer{
        width:95%;
        margin: 0 auto;
        padding-bottom:5px;
        padding-top:5px;
        margin-bottom:5px;

    }
    .end{
        width:95%;
        margin: 0 auto;
    }

    .text{
        padding:5px;
    }	
}

@media (min-width: 420px) and (max-width: 700px) {
    .sub-header{
        width:100%;
        margin: 0 auto;
    }

    /* Header*/
    .header{
        width:100%;
        margin: 0 auto;
        color:#FFF;
    }

    .logo img{
        width:95%;
        height:auto;

    }

    /* Contenedor */
    .container {
        width:100%;
        margin: 0 auto;
    }
    .content {
        width:100%;
        padding: 5px 0;
    }


    /* Content Left */
    .content-left {
        margin:0 auto;
        width:75%;
        min-width:250px;
        background-color:#fbb03f;

    }
    /* Ruta */
    .ruta{
        font-size:80%;
        margin-left:10px;
    }


    /* Pie de paginas */
    .viniles{
        width:70%;
        margin:0 auto;
        margin:17px;
    }
    .footer{
        width:100%;
        margin: 0 auto;
        padding-bottom:5px;
        padding-top:5px;
        margin-bottom:5px;

    }
    .end{
        width:100%;
        margin: 0 auto;
    }

    .text{
        padding:5px;
    }	
    .content img{
        width:auto;
        height:auto;
    }
}

@media (min-width: 320px) and (max-width: 420px) {
    .sub-header{
        width:100%;
        margin: 0 auto;
    }

    /* Header*/
    .header{
        width:100%;
        margin: 0 auto;
        color:#FFF;
    }

    .logo img{
        width:100%;
        height:auto;

    }

    /* Contenedor */
    .container {
        width:100%;
        margin: 0 auto;
    }
    .content {
        width:100%;
        padding: 5px 0;
    }


    /* Content Left */
    .content-left {
        margin:0 auto;
        width:95%;
        min-width:250px;
        background-color:#fbb03f;

    }
    /* Ruta */
    .ruta{
        font-size:80%;
        margin-left:10px;
    }


    /* Pie de paginas */
    .viniles{
        width:70%;
        margin:0 auto;
        margin:17px;
    }
    .footer{
        width:100%;
        margin: 0 auto;
        padding-bottom:5px;
        padding-top:5px;
        margin-bottom:5px;

    }
    .end{
        width:100%;
        margin: 0 auto;
    }

    .text{
        padding:5px;
    }	

    .content img{
        width:auto;
        height:auto;
    }
}

@media (min-width: 220px) and (max-width: 320px) {
    .sub-header{
        width:100%;
        margin: 0 auto;
    }

    /* Header*/
    .header{
        width:100%;
        margin: 0 auto;
        color:#FFF;
    }

    .logo img{
        width:100%;
        height:auto;

    }

    /* Contenedor */
    .container {
        width:100%;
        margin: 0 auto;
    }
    .content {
        width:100%;
        padding: 5px 0;
    }


    /* Content Left */
    .content-left {
        margin:0 auto;
        width:95%;
        min-width:250px;
        background-color:#fbb03f;

    }
    /* Ruta */
    .ruta{
        font-size:80%;
        margin-left:10px;
    }


    /* Pie de paginas */
    .viniles{
        width:70%;
        margin:0 auto;
        margin:17px;
    }
    .footer{
        width:100%;
        margin: 0 auto;
        padding-bottom:5px;
        padding-top:5px;
        margin-bottom:5px;

    }
    .end{
        width:100%;
        margin: 0 auto;
    }

    .text{
        padding:5px;
    }	

    .content img{
        width:auto;
        height:auto;
    }
}

.ruta{
    padding-bottom:10px;

}


.content-left {
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}

.msm-tx {
    margin:10px;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}

.content .login{
    margin:0 auto;
    padding:10px;
    width:80%;

}

.content .login input{
    padding:10px;

}

.bg-black{
    padding-top: 10px;
    padding-bottom:10px;	
    background:#be1d2c;
    color:#FFF;

}

.avPlayerContainer{
    max-width:400px;

}




/* *******************************************/
/*********************************************/
/* *******************************************/
/* General
/*********************************************/
/* *******************************************/
/*********************************************/

body {
    font: 100%/1.3 'Open Sans', sans-serif;;
    margin: 0;
    padding: 0;
    color: #000;
    background: rgba(255,255,255,0.72);
    background: -moz-linear-gradient(top, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.75) 11%, rgba(255,255,255,0.81) 32%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.72)), color-stop(0%, rgba(255,255,255,0.72)), color-stop(11%, rgba(255,255,255,0.75)), color-stop(32%, rgba(255,255,255,0.81)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.75) 11%, rgba(255,255,255,0.81) 32%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.75) 11%, rgba(255,255,255,0.81) 32%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.75) 11%, rgba(255,255,255,0.81) 32%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.75) 11%, rgba(255,255,255,0.81) 32%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

.spacer{
    width: 80%;
    height:20px;
}


.content ul, .content ol { 
    padding: 0 15px 15px 40px; 
}

ul, ol, dl { 
    padding: 0;
    margin: 0;
}

ul{
    margin-left:20px;
    list-style:none;

}



h1{
    font-family: 'Oswald', sans-serif;
    color:#333;
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px; 
    font-weight:bold;
    text-shadow: -1px 0 #F7F7F7, 0 1px #F7F7F7, 1px 0 #F7F7F7, 0 -1px #F7F7F7, 0.1em 0.1em 0.05em #D8D8D8;

}
h2 {
    font-family: 'Oswald', sans-serif;
    color:#be1d2c;
    text-shadow: -1px 0 #E4E4E4, 0 1px #E4E4E4, 1px 0 #E4E4E4, 0 -1px #E4E4E4, 0.1em 0.1em 0.05em #333;
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px; 

}


h3 {
    font-family: 'Oswald', sans-serif;
    color:#be1d2c;
    font-size:125%;
   /* text-shadow: -1px 0 #CCC, 0 1px #CCC, 1px 0 #CCC, 0 -1px #CCC, 0.1em 0.1em 0.05em #333;*/
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px; 

}

h4, h5, h6 {
    color:#315a13;
    text-shadow: -1px 0 #CCC, 0 1px #CCC,	  1px 0 #CCC, 0 -1px #CCC, 0.1em 0.1em 0.05em #333;
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px; 
}
p {
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px; 
    text-shadow:white 0.1em 0.1em 0.2em;
}

.content-left h3 {
    color:#24aae1;
    text-shadow: -1px 0 #CCC, 0 1px #CCC, 1px 0 #CCC, 0 -1px #CCC, 0.1em 0.1em 0.05em #000;
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px; 
}

.content-left #boton{ 
    background-color:#e00b0b;
    color:#FFF;
    padding:10px;
    margin-left:3px;
    margin-right:3px;
    margin-top:5px;
    text-decoration:none;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}
.content-left #boton:hover {
    text-decoration:none;
    background-color:#666;
    color:#FFF;
    padding:10px;
    margin-left:3px;
    margin-right:3px;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}

.content-left a:link {
    color:#FFF;
    text-decoration: underline; 
}
.content-left a:visited {
    color: #FFF;
    text-decoration: underline;
}
.content-left a:hover, a:active, a:focus { 
    text-decoration: none;
}



a img { 
    border: none;
}
/**********************************/
/*	Enlaces
/**********************************/
a:link {
    color:#e00b0b;
    text-decoration: underline; 
}
a:visited {
    color: #e00b0b;
    text-decoration: underline;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}

.end a:link {
    color:#FFF;
    text-decoration: underline; 
}
.end a:visited {
    color: #FFF;
    text-decoration: underline;
}
.end a:hover, a:active, a:focus { 
    text-decoration: none;
}


.ruta a:link {
    color:#e00b0b;
    text-decoration: none; 
}
.ruta a:visited {
    color: #e00b0b;
    text-decoration: none;
}
.ruta a:hover, a:active, a:focus { 
    text-decoration:underline;
}

.breadcrumb li{
    float: left;

}





.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* ********************************************/
/* Botones
/*********************************************/

#boton a:link{
    text-decoration:none;
}

#boton{ 
    border:none;
    background-color:#000;
    color:#FFF;
    padding:10px;
    margin-left:3px;
    margin-right:3px;
    margin-top:5px;
    text-decoration:none;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}
#boton:hover {
    text-decoration:none;
    background-color:#666;
    color:#FFF;
    padding:10px;
    margin-left:3px;
    margin-right:3px;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}

/**************/
#sub-boton{ 
    border:none;
    background-color:#659B61;
    color:#FFF;
    font-size:85%;
    padding:5px;
    text-decoration:none;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}
#sub-boton:hover {
    border:none;
    background-color:#000;
    color:#FFF;
    font-size:85%;
    padding:5px;
    text-decoration:none;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}

/**************/


#field5{ 
    border:none;
    background-color:#000;
    color:#FFF;
    padding:10px;
    margin-left:3px;
    margin-right:3px;
    margin-top:5px;
    text-decoration:none;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}
#field5:hover {
    border:none;
    text-decoration:none;
    background-color:#666;
    color:#FFF;
    padding:10px;
    margin-left:3px;
    margin-right:3px;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}


blockquote{
    padding:10px;
    background-color:#E9F2FD;

}

.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background:url(../images/icon_top.png) no-repeat;
}

/*****************************************/
/* Form Login
/*****************************************/
.control-group{

}

#login-form{
    padding:15px;
    padding-top:10px;
    padding-bottom:10px;

}

#modlgn-username {
    padding:7px;
    width:90%;
    margin:10px;
    border:none;
}

#modlgn-passwd{
    padding:7px;
    width:90%;
    margin:10px;
    border:none;
}

.input-small{
    padding:7px;
    border:none;
}

/* ********************************************** */
/* Alertas
/* ********************************************** */
.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size:100%;
    color:#000;
}

.alert-heading {
    color: inherit;
}

.alert .close {
    float:right;
    cursor:pointer;

}
.alert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.alert-danger,
.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}
.alert-info {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
}

.alert-block > p,
.alert-block > ul {
    margin-bottom: 0;
}

.alert-block p + p {
    margin-top: 5px;
}

/********************************************/
/*
/* Estilos de Tablas
/*
/********************************************/
#style-table{

}	

#style-table thead th{
    background-color: #e00b0b;
}

#style-table table {
    width:99%;
    border-collapse: collapse;
    border: 0px solid #000;
    font-size:90%;
}
#style-table th {
    font-weight:bold;
    border-bottom:1px solid #999;
    color:#FFF;
    padding: .2em;
    font-size: 1.2em;
    background-color:#e00b0b;
}

#style-table th a:link {
    color:#fff;
    text-decoration: none;
    font-size:80%;
}
#style-table th a:visited {
    color:#fff;
    text-decoration: underline;

}
#style-table th a:hover, a:active, a:focus { 
    text-decoration: underline;
}

#style-table td {
    border-bottom:1px solid #999;
    padding: .2em;

}
#style-table .mi-table th{
    font-size:97%;
    color:FFF;
    background: #be1d2c;
}

#style-table .mi-table tr:hover{
    background-color:#FFF;
    color:#be1d2c;
}

#style-table thead th, tfoot th {
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    background: transparent;
}

#style-table tfoot td {
    border: 5px solid #000;
}

#style-table th{
    background: #FFF;
    color: #FFF;
}
#style-table tbody {
    border: 1px solid #000;
}

#style-table tbody th{
    text-align: center;
}
#style-table tbody td{
    text-align: left;
}

#style-table tfoot th{
    border: 1px solid #000;
    background: #CCC;
}

#style-table tfoot td{
    border: 1px solid #000;
}

.div-count{
    margin:0 auto;
    width:50%;
    font-size:70%;
    text-align:center;

}
.div-table{
    margin:0 auto;
    width:50%;
    text-align:center;
}
.div-table .icon{
    padding:10px;
    float:left;
    margin:auto;
    width:10%;

}

/********************************************/
/*
/* Estilos ventanas
/*
/********************************************/
.div-windows {
    margin: 0 auto;
    position: absolute;
    top:125;
    left:5;
    width: 450px;
    max-width:450px;
    background-color:#FFF;
    font-size:120%;
    border:1px solid #be1d2c;
    cursor:default;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
}

.div-windows .div-contenido{
    font-size:100%;
}

.div-windows .botones {
    padding:7px;
    background-color:#be1d2c;
    color:#FFF;
    border:0px solid #FFF;
    border-radius:5px;
    -webkit-border-radius: 5px;
    text-decoration:none;
}
.div-close{
    height:25px;
    background-color:#be1d2c;
    color:#FFF;

}
.div-close .close{
    float:right;
    margin-right:10px;

}

.div-close .title-close{
    margin-left:10px; 
    float:left;

}

.div-close .close:link{
    color:#FFF;
    text-decoration:none;
}
.div-close .close:visited{
    color:#FFF;
    text-decoration:none;
}


.div-contenido{
    padding:10px;
    color:#333;
}
.div-bottom {
    margin:0 auto;
}

.div-bottom img{
    cursor:pointer;

}


.div-bottom .tree{
    float:left;
    padding:2px;
}

.div-bottom .two{
    float:left;
    padding:2px;
}

.div-bottom .one{
    float:left;
    padding:2px;
}

input { padding:5px;}
select{ padding:5px;}
legend{
    padding:7px;
    background:#CCC;
    font-weight:bold;

}

/********************************************/
/*
/* Tool Tips
/*
/********************************************/
#tooltip {
    position:absolute;
    z-index:9999;
    color:#fff;
    font-size:100%;
    text-align:center;
    width:180px;
    -moz-box-shadow: 2px 2px 5px #111; /* for Firefox 3.5+ */
    -webkit-box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */
    box-shadow: 2px 2px 5px #111; /* for Safari and Chrome */

}

#tooltip .tipHeader {
    height:8px;
    background-color:#1488C0;

}

#tooltip .tipBody {
    background-color:#1488C0;
    padding:5px 5px 5px 15px;
}

#tooltip .tipFooter {
    height:8px;
    background-color:#1488C0;

}

/* ************************************
    PAGINACION
*************************************** */

.pagination li{
    float: left;
    padding: 5px;
    border: 1px #999 solid;
    background-color: #be1d2c;
    font-size: 80%;
    margin: 3px;
    
    
}

.pagination li a:link{
    text-decoration: none;
    color: #FFF;
    
}


.dataTables_filter label {
    float: right;
    padding: 5px;
}