/* Created by Carlos Vassallo Donayre */

body {
}

/*
  Empieza el cuerpo, lado izquierdo
*/
sectiona#musica_animacion {
/*
    background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#ffffff));
    background: -moz-linear-gradient(top,  #CCCCCC,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
*/

/*
    max-width: 855px;   
    width: 85%;   
    margin: 8px 16px 2px 134px;
*/
    border-radius: 8px;
    display:block;
    width: 79%;   
    margin: 8px 16px 2px 134px;
    min-height: 110px;
    z-index: -3;
}

article#musica_ani_part_1, article#musica_ani_part_2 {
/*
    max-width: 97%;  
    max-width: 62%;  
*/
    border-radius: 8px;
    display: inline-block;
    vertical-align: top;
}

article#musica_ani_part_1 {
/*
    background-color: #585858;
    background-color: #212121;
    margin: 16px 16px 16px 16px;
    width: 55%; 
    font-family: Georgia, "Times New Roman", Times, serif;
*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 12px;
    margin: 16px 8px 8px 8px;
    width: 52%; 
}

article#musica_ani_part_2 {
/*
    background-color: #fff;
    margin: 24px 16px 16px 10px;
    width: 36%; 
*/
    margin: 24px 8px 16px 5px;
    width: 39%; 
}

#musica_ani_part_11 {          /*   texto en letras Chicas del pie de Pagina   */
/*
    color: #3994AE;
    margin: 10px 10px 10px 40px;
*/
    margin: 10px 10px 10px 10px;
}

#musica_ani_part_12 {          /*   texto en letras Chicas del pie de Pagina   */
/*
    color: #3994AE;
    margin: 10px 10px 10px 40px;
*/
    margin: 10px 10px 10px 10px;
}



#imagen_nos_01 {               /*   imagen de la operadora   */
/*  
    border-color:#F4A9EA;
    border-color:#991313;   borde rojo
    margin: 1.0em 2.0em 0.1em 0.1em;    
    padding: 0.2em 0.2em 0.2em 0.2em;

*/  
    border: 3px solid;
    border-color:#F4A9EA;
    border-radius: 8px;
    margin: 10px 10px 10px -10px;
}

    /*
    <a href="<?php echo $registro["audio_locutor"];?>"><img src="docentes/media/audio/img_audio_03.jpg" width="50" height="50" style="border-radius:40px;" /></a>
    background: url(docentes/media/audio/img_audio_03.jpg);
    */

    #reproductor_fm1 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

    #reproductor_fm2 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }




/*
  manejo de Responsive Web Design (media cuery 1)   
@media screen and (min-width: 921px) and (max-width: 1080px) {
*/
@media screen and (max-width: 1024px) {
    #reproductor_fm1 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

    #reproductor_fm2 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

}
/*   se trabajo hasta aqui por ahora (2014-11-05).   */

@media screen and (max-width: 768px) {
    sectiona#musica_animacion {
    /*
        margin: 8px 16px 2px 134px;
    */
        border-radius: 8px;
        display:block;
        width: 79%;   
        margin: 8px 16px 2px 124px;
        min-height: 110px;
        z-index: -3;
    }

    #reproductor_fm1 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

    #reproductor_fm2 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

}

@media screen and (max-width: 640px) {
    sectiona#musica_animacion {
    /*
        margin: 8px 16px 2px 110px;
        width: 79%;   
    */
        border-radius: 8px;
        display:block;
        width: 89%;   
        margin: 8px 16px 2px 70px;
        min-height: 110px;
        z-index: -3;
    }

    article#musica_ani_part_1 {
    /*
        background-color: #585858;
        background-color: #212121;
        margin: 16px 16px 16px 16px;
        width: 55%; 
        font-family: Georgia, "Times New Roman", Times, serif;
    */
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        margin: 16px 8px 8px 8px;
        width: 54%; 
    }

    article#musica_ani_part_2 {
    /*
        background-color: #fff;
        margin: 24px 8px 16px 5px;
        width: 36%; 
    */
        margin: 24px 2px 16px 18px;
        width: 37%; 
    }


    #musica_ani_part_11 {          /*   texto en letras Chicas del pie de Pagina   */
    /*
        color: #3994AE;
        margin: 10px 10px 10px 40px;
        margin: 10px 10px 10px 20px;
    */
        margin: 10px 10px 10px 10px;
    }

    #musica_ani_part_12 {          /*   texto en letras Chicas del pie de Pagina   */
    /*
        color: #fff;
        margin: 10px 10px 10px 40px;
        margin: 10px 10px 10px 20px;
    */
        margin: 10px 10px 10px 10px;
    }

    #reproductor_fm1 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

    #reproductor_fm2 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }
}

@media screen and (max-width: 480px) {
    sectiona#musica_animacion {
    /*
        margin: 8px 16px 2px 110px;
        margin: 8px 16px 2px 70px;
        width: 79%;   
        width: 89%;   
    */
        border-radius: 8px;
        display:block;
        width: 80%;   
        margin: 8px 16px 2px 105px;
        min-height: 110px;
        z-index: -3;
    }

    article#musica_ani_part_1 {
    /*
        background-color: #585858;
        background-color: #212121;
        margin: 16px 16px 16px 16px;
        width: 55%; 
        font-family: Georgia, "Times New Roman", Times, serif;
    */
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        margin: 16px 8px 8px 8px;
        width: 54%; 
    }

    article#musica_ani_part_2 {
    /*
        background-color: #fff;
        margin: 24px 8px 16px 5px;
        width: 36%; 
    */
        margin: 24px 2px 16px 18px;
        width: 37%; 
    }


    #musica_ani_part_11 {          /*   texto en letras Chicas del pie de Pagina   */
    /*
        color: #3994AE;
        margin: 10px 10px 10px 40px;
        margin: 10px 10px 10px 20px;
    */
        margin: 10px 10px 10px 10px;
    }

    #musica_ani_part_12 {          /*   texto en letras Chicas del pie de Pagina   */
    /*
        color: #fff;
        margin: 10px 10px 10px 40px;
        margin: 10px 10px 10px 20px;
    */
        margin: 10px 10px 10px 10px;
    }

    #reproductor_fm1 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

    #reproductor_fm2 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }
}

@media screen and (max-width: 320px) {
    sectiona#musica_animacion {
    /*
        margin: 8px 16px 2px 110px;
        margin: 8px 16px 2px 70px;
        width: 79%;   
        width: 89%;   
    */
        border-radius: 8px;
        display:block;
        width: 80%;   
        margin: 8px 16px 2px 105px;
        min-height: 110px;
        z-index: -3;
    }

    article#musica_ani_part_1 {
    /*
        background-color: #585858;
        background-color: #212121;
        margin: 16px 16px 16px 16px;
        width: 55%; 
        width: 54%; 
    */
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        margin: 16px 8px 8px 8px;
        width: 50%; 
    }

    article#musica_ani_part_2 {
    /*
        background-color: #fff;
        margin: 24px 8px 16px 5px;
        width: 36%; 
        width: 37%; 
    */
        margin: 24px 2px 16px 18px;
        width: 35%; 
    }


    #musica_ani_part_11 {          /*   texto en letras Chicas del pie de Pagina   */
    /*
        color: #3994AE;
        margin: 10px 10px 10px 40px;
        margin: 10px 10px 10px 20px;
    */
        margin: 10px 10px 10px 10px;
    }

    #musica_ani_part_12 {          /*   texto en letras Chicas del pie de Pagina   */
    /*
        color: #fff;
        margin: 10px 10px 10px 40px;
        margin: 10px 10px 10px 20px;
    */
        margin: 10px 10px 10px 10px;
    }


    #reproductor_fm1 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }

    #reproductor_fm2 {   /* imagen reproductor de audio */
        /*
        height: 100%;
        */
        transform:scale(0.5,0.5);
        -ms-transform:scale(1,1);           /* IE 9 */
        -moz-transform:scale(1,1);          /* Firefox */ 
        -webkit-transform:scale(0.7,0.7);   /* Safari and Chrome */
        -o-transform:scale(1,1);            /* Opera */

        margin: 10px 10px 10px 0px;    
        width: 40%;
        height: 40%;
    }
}