/*reset*/
header, footer, aside, menu, article, section, ul, li, h1, h2, h3, figure, figcaption{
	display:block;
	margin:0;
	padding:0;
}
body, html{
	height:100%;
	padding:0;
	margin:0;
}
/*end of reset*/
	*{
		/*pointer-events: none */
	}
	html{
		font-size: 100%;
	
	}
	body{
		min-height:100%;
		background-color:#777777;
		margin:0;
		padding:0;
		z-index:1;
		
	}
	#container{
		width:100%;
		background-color:#111111;
		background-color:rgba(0,0,0,0.8);
		margin:3% auto;
		min-height:99%;
		position:relative;
	}
	#images{
		width:100%;
		overflow:hidden;
		padding:0 1.1% 1.2% 1.3%;
		position:relative;
	}
	#images>a{
		width:24%;
		height:12em;
		display:block;
		float:left;
		opacity:0.9;
		margin:0.2% 0.2%;
		position:relative;
		overflow:hidden;
		border:1px solid #ffffff;
	}
	#images>a>img{
		width:100%;
		margin:auto;
	}
	#images>a:hover{
		opacity:1;
	}
	#images>a:hover>img{
		
	}

	#images>a>h3{
		width:100%;
		height:9%;
		position:absolute;
		bottom:-9%;
		background-color:#000000;
		background-color:rgba(0,0,0,0.5);
		color:#ffffff;
		font-family:arial;
		font-size:0.7em;
		font-weight:100;
		padding:0.5% 2%;
		overflow:hidden;
		transition:height 0.3s, background-color 0.3s;
		line-height:120%;
		behavior:url('./ie/PIE.htc');
	}
	#images>a:hover>h3{
		height:30%;
		background-color:#000000;
		background-color:rgba(0,0,0,0.7);
		transition:height 0.3s, background-color 0.3s;
		behavior:url('./ie/PIE.htc');
	}
	h1{
		padding: 2% 0 0 0;
		color:#dddddd;
		font-size:300%;
		font-family:"Book Antiqua", Times, serif;
		text-align:center;
		margin:0;
	}
	#menu{
		display:block;
		margin:0;
		height:5%;
		width:100%;
		position:fixed;
		top:0;
		left:0;
		z-index:10;
		background-color:#000000;
		border-bottom:0.3em solid #777777;
	}
	#menu>li{
		list-style-type:none;
		margin:0;
		padding:0;
		display:block;
		float:left;
		width:10%;
		color:#ffffff;
		font-weight:bold;
		text-align:center;
		z-index:10;
	}
	#menu>li:hover{
		background-color:#000000;
		background-color:rgba(0,0,0,0.9);
	}
	#menu>li>a{
		display:block;
		font-family:arial, sans-serif;
		padding:0.5em;
		height:1.0em;
		color:#bbbbbb;
		text-decoration:none;
		z-index:10;
	}
	#menu>li:hover>a{
		color:#000000;
		height:1.3em;
		background-color:#ffffff;
		text-decoration:none;
	}
	h2{
		clear:both;
		color:#dddddd;
		font-size:200%;
		font-family:"Book Antiqua", Times, serif;
		text-align:left;
		text-align:center;
		margin:1em 0 1em 0;
	}
	div#text{
		color:#ffffff;
		margin:1em 0 0 0;
		padding:0 1.1% 1.2% 1.3%;
		font-family:arial, sans-serif;
		font-size:1em;
		line-height:1.4em;
	}
	
	#text img{
		width:100%;
		border:1px solid #ffffff;
	}
	figure, figcaption{
		display:block;
	}
	
	
/*The menu section*/
menu{
	position:absolute;
	top:0px;
	right:0px;
	width:50%;
	border-width:0 0 1px 1px;
	border-style:solid;
	border-color:#ffffff;
	background-color:#222222;
	border-radius: 0 0 0 1em;
	
}

menu>li{

	margin:0 3% 0 3%;
	float:left;
	max-width:20%;
	overflow:hidden;
}
menu>li>a{
	color:#dddddd;
	text-decoration:none;
	font-family:"PT Sans Narrow", "Arial Narrow", sans-serif;
	font-weight:bold;
	font-size:150%;
}
menu>li>a:hover{
	color:#ffffff;
}

menu>li>a.selected{
	color:#dd0000;
	text-decoration:none;
	font-family:"PT Sans Narrow", "Arial Narrow", sans-serif;
	font-weight:bold;
	font-size:150%;
}
menu>li>a.selected:hover{
	color:#ff0000;
	text-decoration:none;
	font-family:"PT Sans Narrow", "Arial Narrow", sans-serif;
	font-weight:bold;
}
/*The end of menu section*/
@media all and (max-width:1024px){
#menu>li{
	text-align:center;
}
#menu>li>a{
	font-size:0.8em;
}	
#menu>li>a.selected{
	font-size:0.8em;
}
#menu>li>a.selected:hover{
	font-size:0.8em;
}
}
@media all and (max-width:800px){
#menu>li>a{
	font-size:0.7em;
}
@media all and (max-width:640px){
#menu>li>a{
	font-size:0.6em;
}
}