@charset "utf-8";
/* CSS Document */

body,html{	
	height: 95%;
	width: 98%;
	margin: 5px;
	padding: 5px;
	/*text-align: center;*/	

	font-family: Arial,tahoma;
	/*font-size: 1.3em*/
}

body{
	background: url(imagenes/fondo.gif) repeat;
}

header, footer {
	margin: auto;
    width: 92%;
    height: auto;  
    padding: 3px; 
    /*padding-top: 10px;
    padding-bottom: 10px;*/ 

	display: block;
	min-height: 10%;
	/*background: rgb(250,250,210);*/
	text-align: right;
	font-size: 1.1em;
}

/*header, footer, nav , aside , article ,*/ 
section{
	border: 0.05em solid white;
}

#main {
	height: 79%;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;   

    margin: auto;
    width: 92%;  
    padding-top: 10px;
    padding-bottom: 10px; 
}

#main nav {
	/*background: rgb(176,196,222);*/
	flex: 1 6 40%;
	order: 1;
	margin-top: 1%;
	margin-bottom: 1%;	

	display: -webkit-flex;
    display: flex;
    flex-flow: column;
}

#main section {
	/*background: rgb(152,251,152);*/
	flex: 3 1 60%;
	order: 2;
	margin: 1%;
	display: -webkit-flex;
    display:         flex;
    flex-flow: column;    
}

#main header{
	flex: 1 6 10%;
	order: 1;
	margin: 2% 2% 0% 2%;
	/*background: rgb(245,222,179);*/	
}

#main article {	
	/*background: rgb(184,134,11);*/
	flex: 6 1 80%;
	order: 2;
	margin: 2%;

	display: -webkit-flex;
    display: flex;
    flex-flow: row;  
}

#main footer{
	flex: 1 6 3%;
	order: 3;
	margin: 0% 2% 2% 2%;	
	/*background: rgb(245,222,179);*/	

	font-size: 20px; 
	color: white;
}

#main aside {
	/*background: rgb(230,230,250);*/
	flex: 1 6 20%;
	order: 3;
	margin-top: 1%;
	margin-bottom: 1%;

	display: -webkit-flex;
    display: flex;
    flex-flow: column;  
}

#nombre{
	margin: 3px;
    width: 60%;
    height: 50px;  
    padding: 2px;  

	display: block;
	float: left;
	font-family: 'Rock Salt', Arial;
	font-size: 45px;
	text-align: left;
	line-height: 4%;
	color: rgb(175,238,238);
}

#cabecera{
	color: white;
}

#cabecera_2{
	margin: 3px;
    height: 50px;  
    padding: 2px;  

	display: inline;
	float: left;
	font-family: 'Oswald', sans-serif;
	font-size: 45px;
	text-align: left;
	line-height: 4%;
	color: rgb(175,238,238);	
}

nav ul{
	list-style-type: none;
	margin: 5px;
	padding: 5px;
	
	/*border-color: rgb(0,0,0);
	border-style: solid;
	border-width: 3px;*/
}

nav a{

	flex: 1 6 50%;
	order: 1;
	display: block;
	padding: 5px;


	font-family: tahoma,Arial;
	font-size: 1.1em;

	color: rgb(255,255,255);
	background-color: rgb(128,128,128);

	text-decoration: none;

	border-color: black;
	border-style: solid;
	border-width: 3px;	
}

a:hover {
	color: rgb(0,0,0); 
	background-color: rgb(0,191,255);

	border-right-style: solid;
	border-right-width: 3px;
	border-right-color: white;
}

.ventana_A {

	flex: 1 6 40%;
	order: 2;


	margin: 8px;
	padding: 10px;
	border-radius: 24px;
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;

	background-color: rgb(216,191,216); 
	border-width: 3px;	
	border-style: solid;
	border-color: rgb(34,139,34);
}

.art_1{
	flex: 1 6 65%;
	order: 1;

	margin: 8px;
	padding: 8px;
	background-color: rgb(255,222,173); 
	border-width: 3px;	
	border-style: solid;
	border-color: orange;

	border-radius: 24px;
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;

	font-family: 'Rock Salt', Arial;
	font-size: 15px;
	text-align: left;
}

.art_2{
	flex: 1 6 30%;
	order: 2;

	margin: 8px;
	padding: 14px;
	/*background-color: rgb(240,128,128);*/ 
	border-width: 3px;	
	border-style: solid;
	border-color: orange;

	border-radius: 24px;
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;
}

.ventana_1 {
	flex: 1 6 30%;
	order: 1;

	margin: 8px;
	padding: 10px;
	background-color: rgb(240,128,128); 
	border-width: 3px;	
	border-style: solid;
	border-color: orange;

	border-radius: 24px;
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;
}

.ventana_2{
	flex: 1 6 30%;
	order: 2;

	margin: 8px;
	padding: 8px;
	background-color: rgb(154,205,50); 
	border-width: 3px;	
	border-style: solid;
	border-color: black;	

	border-radius: 24px;
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;
}

.ventana_3{
	flex: 1 6 30%;
	order: 3;

	margin: 8px;
	padding: 8px;
	background-color: #a4d3ff; 
	border-width: 3px;	
	border-style: solid;
	border-color: yellow;	

	border-radius: 24px;
	-moz-box-shadow: inset -5px -5px 5px #888;
	-webkit-box-shadow: inset -5px -5px 5px #888;
	box-shadow: inset -5px -5px 5px #888;
}

img {
    margin-top: 4px;
}

video {
    width: 98%;
    height: 98%;  
}