@charset "utf-8";
@font-face {
	font-family: FeriaSans;
/*tinc les fonts en subdirectori, per a lliurament exercici la deixo en el mateix lloc que HTML	
	src: url(../fonts/FiraSans-BookItalic.otf) format("opentype");*/
	src: url(FiraSans-BookItalic.otf) format("opentype");
}
body{
	font-family:Tahoma, Arial, Serif;
	font-size:14px;
	color:#581A50;

	background: linear-gradient(to top, rgba(128,128,128,0) 0%, rgba(128,128,128,1) 100%);
}
header{
	font-family:'Baloo Bhaina', cursive, Arial, Serif;
	font-size:20px;
	color:white;
	text-align:center;
    text-shadow: 2px 4px 1px black;
	padding:5px;
	margin:5px;
	border:2px solid #0E24C8;
	border-radius: 9px;
	background: linear-gradient(to right, darkred 0%, black 100%);
}
#main{
	height:80%;
	display: flex;
	display: -webkit-flex;
	flex-flow:row;
}
/*Estilos para nav*/
#main nav {
	font-family:'Sansita', Arial, Serif;
	color:#12E619;
	text-align:center;
	padding:5px;
	margin:5px;
	border:2px solid #12E619;
	flex: 1 6 20%;
	order: 1;

	background: linear-gradient(to top, rgba(90,116,45,0) 0%, rgba(150,116,45,1) 100%);
}
#menuV1{
	list-style-type: none;
    padding: 0px;
	margin:15px;
	border:1px solid #12E619;
    border-right-width: 5px;

    background: white;
}    
#menuV1 a {
	text-decoration: none;
    color:#581A50;
    padding: 5px;
    border-bottom: 1px dotted #12E619;
    display: block;   
}
#menuV1 a:hover {
	font-family: Verdana;
    font-size: 0.9em;
    color: white;
    background-color: black;
    border-right: 25px solid #12E619;
}
#menuV2{
	list-style-type: none;
    padding: 0px;
	margin:15px;
	border:1px solid #0C663C;

	background: white;
}    
#menuV2 a {
	text-decoration: none;
    color:#581A50;
    padding: 5px;
    border-bottom: 1px dotted #0C663C;
    display: block;
}
#menuV2 a:hover {
	font-family: Verdana;
    font-size: 0.9em;
    color: white;
    background-color: #0C663C;
    border-right: 25px solid black;
}
#apoyos{
	list-style-type: none;
    padding: 0px;
	margin:35px;
	color:#0C663C;
	
	background-image:url("http://3.bp.blogspot.com/-EFA6y9sID4A/Und-mcNFynI/AAAAAAAADYE/nHYusVs3bOA/s1600/Mobbingmadrid-apoyo+-familiar.png");
	background-size:180% 100%;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;	

	border-radius: 25% 25% 25% 25%;
	-moz-border-radius: 25% 25% 25% 25%;
	-webkit-border-radius: 25% 25% 25% 25%;
	border: 0px solid #000000;	
	
    box-shadow: 0 0 3px 3px #0C663C;
    -moz-box-shadow:  0 0 3px 3px #0C663C;
    -webkit-box-shadow: 0 0 3px 3px #0C663C;
}    
/*Estilos para section*/
#main section{
	padding:5px;
	margin:5px;
	border:2px solid #FA120A;
	float:left;
	flex: 3 1 60%;
	order: 2;
	background-image:url("https://image.jimcdn.com/app/cms/image/transf/none/path/s01546d57feca68c0/image/i85e4267fe7bc26a5/version/1477785626/image.png");
}
#main section header{
	font-family:'Baloo Bhaina', Arial, Serif;
	font-size:xx-large;	
    text-shadow: 2px 4px 1px black;
	color:white;
	padding:5px;
	margin:5px;
	border:1px solid #FA120A;

	background: linear-gradient(to top, rgba(250,00,00,0.4) 0%, rgba(250,00,00,1) 100%);
}
#main article{
	color:black;
	padding:5px;
	margin:5px;	
	border:1px solid #FA120A;

	background: linear-gradient(to top, #E2D5D5 0%, #E27C7C 100%);
}
#main section footer{
	font-family:'Sansita', Arial, Serif;
	color:white;
	font-size:small;
	text-align:right;
	padding:5px;
	margin:5px;
	border:1px solid #FA120A;
	display: block;

	background: linear-gradient(to bottom, rgba(116,45,50,0.75) 0%, rgba(116,45,50,1) 100%);
}
/*Estilos para aside*/
#main aside{
	font-family:'Sansita', Arial, Serif;
	color:#0AFAD6;
	text-align:center;
	padding:5px;
	margin:5px;
	border:2px solid #0AFAD6;
	flex: 1 6 20%;
	order: 3;

	background: linear-gradient(to top, rgba(45,100,116,0) 0%, rgba(45,100,116,1) 100%);
}
#main aside div{
	width:90px;
	height:100px;
	margin:20px;
	padding:5px;
	border:1px solid #0AFAD6;
	
	float:left;
	display:inline;
	
	border-radius: 0 50% 0 50%;
    -moz-border-radius: 0 50% 0 50%;
    -webkit-border-radius: 0 50% 0 50%;
    border: 0px solid #000000;
	
	-moz-box-shadow: inset -5px -5px 5px #0AFAD6;
    -webkit-box-shadow: inset -5px -5px 5px #0AFAD6;
    box-shadow: inset -5px -5px 5px #0AFAD6;
}
p{
	font-family:Tahoma, Arial, Serif;
	font-size:14px;
}
.subp{
	font-family:FeriaSans, Arial, Serif;
	font-size:12px;
	margin:15px;	
}
img{ 
    padding:15px;
	margin:auto;
	float:left;
}
iframe{ 
    padding:15px;
	float:left;
}
audio{ 
    padding:15px;
	float:left;
}
/*Estilos para footer*/
footer{
	font-family:'Sansita', Arial, Serif;
	font-size:large;
	color:#F60AFA;	
	padding:5px;
	margin:5px;
	border:2px dashed #F60AFA;
	display: block;
	clear: both;
    text-align: center;
	background: linear-gradient(to right, #F0D2EB 0%, #F233D2 100%);
}