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



@font-face {
    font-family: 'YanoneKaffeesatzRegular';
    src: url('../fonts/YanoneKaffeesatz-Regular-webfont.eot');
    src: url('../fonts/YanoneKaffeesatz-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/YanoneKaffeesatz-Regular-webfont.woff') format('woff'),
         url('../fonts/YanoneKaffeesatz-Regular-webfont.ttf') format('truetype'),
         url('../fonts/YanoneKaffeesatz-Regular-webfont.svg#YanoneKaffeesatzRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}



h2{
	font-family:Verdana, Geneva, sans-serif;
	font-size:1.2em;
	margin-bottom:0.5em;
}

h3{
	font-family:Verdana, Geneva, sans-serif;
	font-size:1em;
	margin-bottom:0.5em;
}



.enlace{
	border-radius:10px;
	box-shadow: 2px 2px 5px #999;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	line-height:50px;
	margin-top:20px;
	padding:7px 20px;
}

.enlace:hover{
	opacity: 0.7;
  	filter:  alpha(opacity=70);
}

/*Historia del arte #C96*/
.topo_arte{list-style-image:url(../imgs/topo_arte.png);}
.arte .enlace{background-color:#C96;}
.arte h2,.arte h3 {color:#C96;}

/*actual #969*/
.topo_actual{list-style-image:url(../imgs/topo_actual.png);}
.actual .enlace{background-color:#969;}
.actual h2, .actual h3{color:#969;}

/*profesiones #699*/
.acti_profesiones{
	padding:10px 10px 5px 30px;
	background-color:#E8F0F0;
	list-style-image:url(../imgs/topo_profesiones.png);
	}
.profesiones .enlace{background-color:#699;}
.profesiones h2, .profesiones h3{color:#699;}

/*diversidad #8E8EEC*/
.acti_diversidad{
	padding:10px 10px 5px 30px;
	background-color:#F4F4FD;
	list-style-image:url(../imgs/topo_diversidad.png);}
.diversidad .enlace{background-color:#8E8EEC;}
.diversidad h2, .diversidad h3{color:#8E8EEC;}

/*para audio #F66*/
.topo_audio{list-style-image:url(../imgs/topo_audio.png);}
.audio .enlace{background-color:#F66;}
.audio h2, .audio h3{color:#F66;}

/*descubrir #FC3*/
.topo_descubrir{list-style-image:url(../imgs/topo_descubrir.png);}
.descubrir .enlace{background-color:#FC3;}
.descubrir h2, .descubrir h3{color:#FC3;}

.nav_2{ 
	background-color:#CCC;
	border-radius: 10px;
	box-shadow: 2px 2px 5px #999;
	clear:left;
	color:#FFF;
	display:block;
	float:left;
	font-family:YanoneKaffeesatzRegular;
	font-size:28px;
	height:36px;
	line-height:24px;
	margin-bottom:10px;
	padding-top:10px;
	text-align:center;
	width:208px;
}

#nav_a:hover{background-color:#C96; border:none;}
#nav_b:hover{background-color:#969; border:none;}
#nav_c:hover{background-color:#699; border:none;}
#nav_d:hover{background-color:#8E8EEC; border:none;}
#nav_e:hover{background-color:#F66; border:none;}
#nav_f:hover{background-color:#FC3; border:none;}

#nav_a.actual{background-color:#C96; border:none;}
#nav_b.actual{background-color:#969; border:none;}
#nav_c.actual{background-color:#699; border:none;}
#nav_d.actual{background-color:#8E8EEC; border:none;}
#nav_e.actual{background-color:#F66; border:none;}
#nav_f.actual{background-color:#FC3; border:none;}

#nav.nav_home #nav_a:hover{opacity: 0.6;filter:  alpha(opacity=60);}
#nav.nav_home #nav_b:hover{opacity: 0.6;filter:  alpha(opacity=60);}
#nav.nav_home #nav_c:hover{opacity: 0.6;filter:  alpha(opacity=60);}
#nav.nav_home #nav_d:hover{opacity: 0.6;filter:  alpha(opacity=60);}
#nav.nav_home #nav_e:hover{opacity: 0.6;filter:  alpha(opacity=60);}
#nav.nav_home #nav_f:hover{opacity: 0.6;filter:  alpha(opacity=60);}


@media only screen and (orientation:portrait){
	/* portrait mode */
	
	#nav_a {
		clear:none;
		width:106px;
		height:60px;
		float:left;
		position:relative;
		left:10px;
		padding:10px 5px 0 5px;
	}
	#nav_b {
		clear:none;
		width:106px;
		height:60px;
		float:left;
		position:relative;
		left:20px;
		padding:10px 5px 0 5px;
	}
	#nav_c {
		clear:none;
		width:106px;
		height:60px;
		float:left;
		position:relative;
		left:30px;
		padding:10px 5px 0 5px;
	}
	#nav_d {
		clear:none;
		height:60px;
		width:106px;
		float:left;
		position:relative;
		left:40px;
		padding:10px 5px 0 5px;
	}
	#nav_e {
		clear:none;
		height:60px;
		width:106px;
		float:left;
		position:relative;
		left:50px;
		padding:10px 5px 0 5px;
	}
	#nav_f {
		clear:none;
		height:60px;
		width:106px;
		float:left;
		position:relative;
		left:60px;
		padding:10px 5px 0 5px;
	}
}