/*
 #1#- body
 #2#- header
 #3#- nav
 #4#- article
 #5#- aside
 #6#- footer
 #7#- MOBILE
*/

html{
    background: aqua;
}

/* #1#- body */
BODY {
	font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	color : #666666;
	margin : 0px 0px 0px 0px;
	padding : 0px 0px 0px 0px;
	text-align: center;
	background-color: #aabbcc;
	background-position: top left;
	background-repeat: repeat-x;
	width: 100%; 
}


.wrapper {
    width: 100%;
    height: 100%;
}


/*  #2#- header */
header, nav, comoJugar, demoJugar {
    margin-bottom: 0.3em;
}

header{
/*    background: #e0e6e7; */
    height: 100px;
    position: relative;

}
/*
header img {
    height: 60px;
    position: absolute;
    top: 4px;
}
*/
/*
header img.dcha{
    padding-left: 14em;
}
*/

.cabRegister{
/*    background: red; */
    width: 230px;
    float: left;

}

/*  #3#- nav */
nav{
    background: green;
    height: 40px; 
}

nav li {
    float: left;
    margin: 0.7em 0.3em;
    border-right: solid #fff 1px;
    padding-right: 0.4em;
}

nav li a {
    color: #fff;
    text-decoration: none;
}

nav li a:hover {
    color: red;
    text-decoration: none;
}

/*  #4#- article */
article{
    background: yellow;
/*    height: 300px;   */
    width: 48%;
    float: left;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
}


article2{
    background: grey;
/*    height: 300px;   */
    width: 20%;
    float: left;
    margin:3px;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;

}

apuestas{
/*    background: #e1e341; */
/*    height: 300px;   */
/*    margin-left: 5px;  */
/*    padding: 5px;  */
    width: 40%;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
}

editorApuestas{
/*    background: #e1e341; */
/*    height: 300px;   */
/*    margin-left: 5px;  */
/*    padding: 5px;  */
    width: 40%;
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
}

resultados{
/*    background: #e1e341; */
/*    height: 300px;   */
/*    margin-left: 5px; */
/*    padding: 5px; */
    width: 20%; 
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

corredores{
/*    background: #e1e341; */
/*    height: 300px;   */
/*    margin-left: 5px; */
/*    padding: 5px; */
    width: 25%; 
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

editorCorredores{
/*    background: #e1e341; */
/*    height: 300px;   */
/*    margin-left: 5px; */
/*    padding: 5px; */
    width: 25%; 
    float: right;
    margin-right: 5px;
    margin-bottom: 5px;
}

correosMasivosARTICLE{
    background: #e1e341;
/*    height: 300px;   */
    width: 48%;
    margin-left: 5px;
    padding: 5px;
    float: left;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
}

comoJugar{
    background: yellow;
/*    height: 300px;   */
    width: 48%;
    float: left;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
}

demoJugar{
    background: #a4eff5;
/*    height: 300px;   */
    width: 20%;
    float: left;
    margin:3px;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
}


/* #5#- aside */
aside {
    background: blue; 
/*    height: 250px;  */
    width: 30%;
    float: right;
}


correosMasivosASIDE {
/*    background: blue; */
/*    height: 250px;  */
/*
    width: 30%;
    float: left;
*/

/*    height: 300px;   */
    /*width: 20%;*/
/*    background: #b4b634;    */
    float: left;
    margin-left: 5px;
    box-shadow: 0px 0px 4px 0px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    margin-bottom: 5px;
}



/* #6#- footer */
footer{
    background: black;
    height: 70px;
    width: 100%;
    color: white;
    clear: both;
    vertical-align: text-top;
}


/* #7#- MOBILE  */
@media screen and (max-width: 580px) {
/*##############################################*/
    body {
        width: 99%;
    }    

    article, article2, aside {
        float: left;
        width: 95%;
        padding: 0.5em;
    }


    comoJugar, demoJugar, correosMasivosARTICLE, correosMasivosASIDE, apuestas, resultados, corredores, editorApuestas, editorCorredores {
        float: left;
        width: 95%;
        padding: 0.5em;
        max-width: 570px;
        margin-top: 5px;
        margin-bottom: 5px;
    }


    header{
        height: 160px;
        float: right;
    }   

	nav{
		height: 80px; 
	}

    footer{
        height: 100px;
    }	

}




/* iPhone Retina */
@media screen and (max-width: 320px) {
/*##############################################*/
    body {
        width: 99%;
    }    

    article, article2, aside {
        float: left;
        width: 95%;
        padding: 0.5em;
    }


    comoJugar, demoJugar, correosMasivosARTICLE, correosMasivosASIDE, apuestas, resultados, corredores, editorApuestas, editorCorredores {
        float: left;
        width: 95%;
        padding: 0.5em;
        max-width: 570px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    header{
        height: 160px;
        float: right;
    }   

    nav{
        height: 80px; 
    }

    footer{
        height: 100px;
    }   

}

/* Extra Small Devices, Phones */
@media screen and (max-width: 480px) {
/*##############################################*/
    body {
        width: 99%;
    }    

    article, article2, aside {
        float: left;
        width: 95%;
        padding: 0.5em;
    }


    comoJugar, demoJugar, correosMasivosARTICLE, correosMasivosASIDE, apuestas, resultados, corredores, editorApuestas, editorCorredores {
        float: left;
        width: 95%;
        padding: 0.5em;
        max-width: 570px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    header{
        height: 160px;
        float: right;
    }   

    nav{
        height: 80px; 
    }

    footer{
        height: 100px;
    }   

}

/* Small Devices, Tablets */
@media screen and (max-width: 768px) {

}


/* Medium Devices, Desktops */
@media screen and (max-width: 992px) {

}

/* Large Devices, Wide Screen */
@media screen and (max-width: 1200px) {

}