/* 
   //////////////////////////////////////////////////////////////////////////////////
   //       CSS Modulo 2: Segunda práctica obligatoria de Cristina Loéz Diaz       //
   /////////////////////////////////////////////////////////////////////////////////
*/


<style type="text/css">
body {
    font-family: Arial, Helvetica, sans-serif;
    /* background: #3CF;   No se ve porque lo tapamos con las cajas*/
}

header {
    font-family: 'Trirong', serif; /* Fuente de google. ver import en cabecera del html */
    font-size: 1.6em;
    color: black;
    text-align:center;
    /*background-color: lightgrey;*/
}

button{
/*Bordes redondeados*/
    -webkit-border-radius:10px;/*Para chrome y Safari*/
    -moz-border-radius:10px;/*Para Firefox*/
    -o-border-radius:10px;/*Para Opera*/
    border-radius:10px;/*El estandar por defecto*/
    

    /* Degradados: */;
    background: #fefefe; /* Old Browsers */
    background: -moz-linear-gradient(top, #fefefe 0%, #dbdbdb 50%, #d1d1d1 57%, #e2e2e2 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #fefefe), color-stop(50%, #dbdbdb), color-stop(57%, #d1d1d1), color-stop(100%, #e2e2e2)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #fefefe 0%, #dbdbdb 50%, #d1d1d1 57%, #e2e2e2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fefefe 0%, #dbdbdb 50%, #d1d1d1 57%, #e2e2e2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fefefe 0%, #dbdbdb 50%, #d1d1d1 57%, #e2e2e2 100%); /* IE 10+ */
    background: linear-gradient(to bottom, #fefefe 0%, #dbdbdb 50%, #d1d1d1 57%, #e2e2e2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0 ); /* IE6-9 */


    overflow:hidden;
    padding:1px;
    width:50px;
    height: 30px;
}

.boton_ancho {
    
    padding:1px;
    width:150px;
    height: 30px;  
}


button:hover{
    
    /*Degradados: */
    background: #f2f6f8;
    background: -moz-linear-gradient(top, #f2f6f8 0%, #d8e1e7 45%, #b5c6d0 66%, #e0eff9 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #f2f6f8), color-stop(45%, #d8e1e7), color-stop(66%, #b5c6d0), color-stop(100%, #e0eff9));
    background: -webkit-linear-gradient(top, #f2f6f8 0%, #d8e1e7 45%, #b5c6d0 66%, #e0eff9 100%);
    background: -o-linear-gradient(top, #f2f6f8 0%, #d8e1e7 45%, #b5c6d0 66%, #e0eff9 100%);
    background: -ms-linear-gradient(top, #f2f6f8 0%, #d8e1e7 45%, #b5c6d0 66%, #e0eff9 100%);
    background: linear-gradient(to bottom, #f2f6f8 0%, #d8e1e7 45%, #b5c6d0 66%, #e0eff9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0 );

  
    /* Borde sombreado: */
    -webkit-box-shadow:  1px -1px 0px #999;/*Chrome y Safari*/
    -moz-box-shadow:  1px -1px 0px #999;/*Firefox*/
    -o-box-shadow:  1px -1px 0px #999;/*Opera*/
    box-shadow:  1px -1px 0px #999;/*Estandar por defecto*/
    border:1px solid #E3E3E3;
}


/* Estilo para la caja que enmarca toda la página: */
.caja {
        
    border-style: solid;
    border-width: thin;
    border-color: black; /** blue = #30F; */

    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 30px;
        
    text-align: left;
   

    /*background-color: lightblue;/

    /* Background con degradados generados con ayuda de en http://www.cssmatic.com/ */
    background: rgba(151,185,211,1); /* Old Browsers */
    background: -moz-linear-gradient(left, rgba(151,185,211,1) 0%, rgba(233,241,247,1) 100%); /*Para Firefox FF3.6+ */
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(151,185,211,1)), color-stop(100%, rgba(233,241,247,1))); /*Para chrome y Safari 4+*/
    background: -webkit-linear-gradient(left, rgba(151,185,211,1) 0%, rgba(233,241,247,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(151,185,211,1) 0%, rgba(233,241,247,1) 100%); /* Para Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(151,185,211,1) 0%, rgba(233,241,247,1) 100%); /* IE 10+ */
    background: linear-gradient(to right, rgba(151,185,211,1) 0%, rgba(233,241,247,1) 100%); /*El estandar por defecto*/
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#97b9d3', endColorstr='#e9f1f7', GradientType=1 ); /* IE6-9 */


    /* Borde con sombreado: 
        ej: box-shadow: -11px -11px #888;  
       Generado con ayuda de en http://www.cssmatic.com/
    */
    -webkit-box-shadow: inset 12px 12px 13px 2px rgba(209,209,209,1);
    -moz-box-shadow: inset 12px 12px 13px 2px rgba(209,209,209,1);
    box-shadow: inset 12px 12px 13px 2px rgba(209,209,209,1);


   /* Borde redondeado esquina inferior derecha 
    border-bottom-right-radius: 50px 30px;  */

    border-radius: 0px 0px 48px 0px;
    -moz-border-radius: 0px 0px 48px 0px;
    -webkit-border-radius: 0px 0px 48px 0px;
    border: 0px solid #000000;

}



h1 { 
    font-size: 1.0em;
    color: grey;
}


article {
    font-size: 1.1em;
    text-align: left;
    color: black;
}


/* Sección footer: */

footer { 
    font-size: 1.1em;
    color: red;
    text-align: left;
}


</style>