/*  ELEMENTOS RESPONSIVE

clase que aplico al elemento contenedor que necesita cualquier elmento responsive ya que es sobre su ancho,
el que se aplicara la proporción en porcentajes con padding-top ,ej 4:3 => padding-top:75%; 16:9 => padding-top:55%; 16:8 => padding-top:50%; etc...*/
.m4p-video-responsive{
    clear:both;
    position: relative!important;
    margin: 0 auto;
    height:0!important;
}
#reproductor-video iframe{
    height:100%;
    width:100%;
}

/*aplicación automatica de las propiedades del hijo a elentos iframe, embed, object, img, para aplicación manual añadir la clase responsive-content al elemento hijo*/
.m4p-video-responsive iframe, .m4p-video-responsive embed, .m4p-video-responsive object, .m4p-video-responsive-content, .m4p-video-responsive img{
    position:absolute;
    left:0;
    top:0;
    width: 100%!important;
    height: 100%!important;
}


/*Varias clases para añadir al elemento padre responsive para asignar la proporción*/
.m4p-video-responsive-200{
    padding-top:200%!important;
}
.m4p-video-responsive-190{
    padding-top:190%!important;
}
.m4p-video-responsive-180{
    padding-top:180%!important;
}
.m4p-video-responsive-170{
    padding-top:170%!important;
}
.m4p-video-responsive-160{
    padding-top:160%!important;
}
.m4p-video-responsive-150{
    padding-top:150%!important;
}
.m4p-video-responsive-140{
    padding-top:140%!important;
}
.m4p-video-responsive-130{
    padding-top:130%!important;
}
.m4p-video-responsive-120{
    padding-top:120%!important;
}
.m4p-video-responsive-110{
    padding-top:110%!important;
}
.m4p-video-responsive-100{
    padding-top:100%!important;
}
.m4p-video-responsive-90{
    padding-top:90%!important;
}
.m4p-video-responsive-80{
    padding-top:80%!important;
}
.m4p-video-responsive-75{
    padding-top:75%!important;
}
.m4p-video-responsive-70{
    padding-top:70%!important;
}
.m4p-video-responsive-65{
    padding-top:65%!important;
}
.m4p-video-responsive-60{
    padding-top:60%!important;
}
.m4p-video-responsive-55{
    padding-top:55%!important;
}
.m4p-video-responsive-50{
    padding-top:50%!important;
}
.m4p-video-responsive-40{
    padding-top:40%!important;
}
.m4p-video-responsive-30{
    padding-top:30%!important;
}



/*////////////
////////       BOOTSTRAP CALLOUTS (caja color pastel con linea de color intenso a la izquierda)
////
// css de bs-callout (no viene en el bootstrap estandar por defecto)*/
.bs-callout {
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid #eee;
}
.bs-callout h4 {
    margin-top: 0;
}
.bs-callout p:last-child {
    margin-bottom: 0;
}
.bs-callout code, .bs-callout .highlight {
    background-color: #fff;
}
.bs-callout-success {
    background-color: #DFF0D8;
    border-color: #64AC5B;
}
.bs-callout-danger {
    background-color: #fcf2f2;
    border-color: #d9534f;
}
.bs-callout-warning {
    background-color: #fefbed;
    border-color: #f0ad4e;
}
.bs-callout-info {
    background-color: #f0f7fd;
    border-color: #5bc0de;
}

/*/////////////
////////       TABS (tabs-left y tabs-right)
////
// css de tabs-left y tabs-right tabs-bellow para posicionar las pestañas a la derecha, abajo o izquierda del contenido con una sola clase
// (no viene en el bootstrap estandar por defecto)/*/

.tabs-left, .tabs-right{width:100%}
.tabs-below > .nav-tabs,
.tabs-right > .nav-tabs,
.tabs-left > .nav-tabs {
    border-bottom: 0;
}

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: none;
}

.tab-content > .active,
.pill-content > .active {
    display: block;
}

.tabs-below > .nav-tabs {
    border-top: 1px solid #ddd;
}

.tabs-below > .nav-tabs > li {
    margin-top: -1px;
    margin-bottom: 0;
}

.tabs-below > .nav-tabs > li > a {
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

.tabs-below > .nav-tabs > li > a:hover,
.tabs-below > .nav-tabs > li > a:focus {
    border-top-color: #ddd;
    border-bottom-color: transparent;
}

.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
    border-color: transparent #ddd #ddd #ddd;
}

.tabs-left > .nav-tabs > li,
.tabs-right > .nav-tabs > li {
    float: none;
}

.tabs-left > .nav-tabs > li > a,
.tabs-right > .nav-tabs > li > a {
    min-width: 74px;
    margin-right: 0;
    margin-bottom: 3px;
}

.tabs-left > .nav-tabs {
    float: left;
    border-right: 1px solid #ddd;
}

.tabs-left > .nav-tabs > li > a {
    margin-right: -1px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}

.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
    border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}

.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
    border-color: #ddd transparent #ddd #ddd;
    *border-right-color: #ffffff;
}
.tabs-left > .tab-content{float:left;}
.tabs-right > .tab-content{float:right;}
.tabs-right > .nav-tabs {
    float: right;
    border-left: 1px solid #ddd;
}

.tabs-right > .nav-tabs > li > a {
    margin-left: -1px;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}


.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
    border-color: #ddd #ddd #ddd transparent;
    *border-left-color: #ffffff;
}
.tabs-links{
    text-align:center;
    clear:both;
}
/*//añadidos manualmente para que funcione bien/*/
.tabbable{
    width:100%
}
.tabs-left ul , .tabs-right ul{
    width:25%;
}
.tabs-left > .tab-content, 
.tabs-right > .tab-content{
    width:75%;
}
.debug-table{
    max-width:100%;
}
.debug-table span.value, .debug-table span.extend-value{
    color: #145083;
}
.debug-table .empty{
    color: #962e2e;
}
.debug-table .more, .debug-table .less{
    cursor: pointer;
    padding-left:5px;
    color: #2e963d;
    font-weight: bold;
}
.debug-table div.extend-value{
    display: none;
}