/*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*/

/*common section*/
body{
	background-color:#000000;
	color:#ffffff;
	font-family:arial, sans-serif;
}
/*end of common section*/


/*The menu section*/
	#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:1px;
		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;
	}
/*The end of menu section*/

/*The header section*/
header{
	height:12%;
	font-family:"PT Sans Narrow", "Arial Narrow", sans-serif;
	text-align:center;
	font-size:2em;
}
/*The end of header section*/

/*The main section*/
div#container{
	width:100%;
	min-height:50%;
	margin:0 auto;
	overflow:hidden;
}


aside{
	float:left;
	width:18%;
	min-height:10%;
	margin:0.5%;
	border:1px solid #cccccc;
}

aside > h2{
	font-size:1em;
	text-align:center;
	background-color:#333333;
	padding:3% 0 3% 0;
	
}
article{
	float:left;
	width:60%;
	min-height:10%;
	height:50%;
	margin:0.5%;
	border:1px solid #dddddd;
	background-color:#333333;
	text-align:justify;
	text-indent:1.5em;
	
}
section{
	width:96%;
	height:96%;
	overflow:auto;
	margin:1em auto;
	font-size:0.9em;
}
figure{
	margin:0 0 6% 0;
	background-color:#333333;
	padding:0 0 3% 0;
}
figure img{
	padding:2%;
	margin:1% 1% 0 1%;
	width:94%;
	opacity:0.8;
}
figure img:hover{
	opacity:1;
}
figure:hover figcaption a{
	text-decoration:underline;
	color:#ffffff;
}

figcaption {
	width:96%;
	text-align:center;
	padding:1%;
}
figcaption a{
	font-size:0.8em;
	text-decoration:none;
	color:#dddddd;
}
figcaption a:hover{
	text-decoration:underline;
	color:#ffffff;
}
img{
	border:0;
}
@media screen and (max-width:1024px) {

	#menu>li>a{
		font-size:0.8em;
	}
}

@media screen and (max-width:800px) {

	#menu>li>a{
		font-size:0.6em;
	}
}