* {
	margin:0;
	padding:0;
	color:white;
}
 
 	body {
		background-image: url(recources/background.png);
		color: #fff;
		font-family: Verdana ,Arial,sans-serif;
	
	}
 
 
#container {
	margin:10px auto;
	/*width:768px;*/
	width:600px;
}

article {
	border: 2px solid #999;
	margin: 5px;
	min-height: 20px;
}


#header {
	width:100%;
	text-align: center;
	/*background:#80c9e3;*/
	margin-bottom: 2%;
	height:50px;
}
 
#content {
	float:left;
	width:100%;
	margin-right:2%;
	/*height:800px;*/
}


	.text {
		/*width: 194px;*/
		float: left;
		height: 20px;
	}
		
	.sound {
		/*width: 300px;*/
		float: right;
		height: 20px;
	}
 
 	 ul#navi {
	  list-style-type: none;
	  width: 100%;
	  float: left;
	  font-family: Verdana ,Arial,sans-serif;
	  font-size: 15px;
	  font-weight: bold;
	  margin: 0 0 25px 0;
	  padding: 0 0 0 0;
	  /*background-color: #333;*/
	}
	 
	 ul#navi li {
	  display: block;
	  float:left;
	  margin: 0 4px 0 0;
	  width: 32%;
	}
	 
	 ul#navi li a {
	  display: block;
	  padding: 10px 20px;
	  color: #fff;
	  background-color: #999;
	  text-decoration: none;
	}
	ul#navi li.active a,
	ul#navi li a:hover {
		background-color: #fff;
		color: #3a8de3;
	}
 
 
 
 
 @media only screen and (max-width: 1024px) {
 
 
#content { width:100%; }
 
}
/* iPhone  iPod Touch */
 @media only screen and (max-width: 480px) {
 
#container {
	width:320px;
} 
 
 
 .sound {
 float: clear;
 }
#content {
	width:100%;
	margin-right:0;
	margin-bottom:2%;
}
 	article {
		height: 45px;
	}

}