/*************************************************/
    /*      CSS PARA TODAS LAS BARRAS DE PROGRESO    */
    /*************************************************/

    .barra_progreso {
        /* Formato estructural */
        border:solid red 0px;
        /* Estilo por defecto */
        width:500px;
        text-align:center;
    }

    .barra_arriba {
        /* Formato estructural */
        position:absolute;
        height:inherit;
        width:inherit;
        /* Estilo por defecto */
        background-color:navy;
        color:white;
        clip:rect(0px, 300px, auto, 0px);
    }

    .barra_abajo {
        /* Formato estructural */
        height:inherit;
        /* Estilo por defecto */
        background-color:lightblue;
        color:navy;
    }


    /*************************************************/
    /*      CSS PARA LOS ESTILOS DE LA BARRA 1       */
    /*************************************************/

    #barra1 {
        width:400px; /* Es obligatorio que sea en px */
        height:auto;
        margin:auto;
    }

    #barra1 .barra_arriba{
        /* Sólo modificar la segunda coordenada (_, X, _, _) */
        clip:rect(0px, 220px, auto, 0px);
        background-color:green;
        color:white;
    }

    #barra1 .barra_abajo {
        color:black;
        background-color:#EEEE33;
    }


    /*************************************************/
    /*      CSS PARA LOS ESTILOS DE LA BARRA 2       */
    /*************************************************/

    #barra2 {
        width:300px; /* Es obligatorio que sea en px */
        height:auto;
        margin:auto;
        border:solid black 1px;
        border-top-color:silver;
        border-left-color:silver;
    }

    #barra2 .barra_arriba{
        /* Sólo modificar la segunda coordenada (_, X, _, _) */
        clip:rect(0px, 150px, auto, 0px);
        background-color:#FF6666;
        color:white;
    }

    #barra2 .barra_abajo {
        color:black;
        background-color:white;
    }