/*

cajas_responsivas.htm
Pinta cajas que se ajustan a diferentes tipos de pantallas
Rogelio Ferreira Escutia - septiembre 2016

*/

@media only screen and (min-width: 1px) {
    #pagina {
        margin: 0 auto;
    }
    #cabecera {
        width:100%;
        background: red;
        display: inline-block;
		float: left;
    }
    #principal {
        width:100%;
        background: yellow;
        display: inline-block;
		float: left;
    }
    #noticias {
        width:100%;
        background: blue;
        display: inline-block;
		float: left;
    }
    #enlaces {
        width:100%;
        background: green;
        display: inline-block;
		float: left;
    }
    #pie_de_pagina {
        width:100%;
        background: orange;
        display: inline-block;
		float: left;
    } 
}

@media only screen and (min-width: 980px) {
    #pagina {
        margin: 0 auto;
    }
    #cabecera {
        width:100%;
        background: green;
        display: inline-block;
		float: left;
    }
    #principal {
        width:50%;
        background: blue;
        display: inline-block;
		float: left;
    }
    #noticias {
        width:50%;
        background: orange;
        display: inline-block;
		float: left;
    }
    #enlaces {
        width:100%;
        background: purple;
        display: inline-block;
		float: left;
    }
    #pie_de_pagina {
        width:100%;
        background: yellow;
        display: inline-block;
		float: left;
    }
}

@media only screen and (min-width: 1200px) {
    #pagina {
        margin: 0 auto;
    }
    #cabecera {
        width:100%;
        background: orange;
        display: inline-block;
		float: left;
    }
    #principal {
        width:34%;
        background: red;
        float: left;
        display: inline-block;
		float: left;	
    }
    #noticias {
        width:33%;
        background: yellow;
        display: inline-block;
		float: left;
    }
    #enlaces {
        width:33%;
        background: blue;
        display: inline-block;
		float: green;
    }
    #pie_de_pagina {
        width:100%;
        background: purple;
        display: inline-block;
		float: left;
    }
}