@charset "utf-8";
/* CSS Document */
/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {
body {background-color: #0E00BF;}
#main {
	position:absolute; 
	top:0; 
	left:0; 
	width:980px; 
	height:auto;
}
#header {position: inherit; left:0; top:0; height:auto; width:100%; text-align:center; }
#content {position: inherit; left:20%; top:0; height:auto; width:80%; text-align:center; }
#sidebar {
	position: inherit; 
	left:10px; 
	top:10px; 
	height:auto; 
	width:20%;
	text-align:center;
}
#articel_1, #articel_2, #articel_3, #articel_4 {
	height: 600px; width: 800px; 
}
#articel_4 {top: 200px; left: 300px; z-index:50;}
#articel_3 {top: 250px; left: 250px; z-index:100;}
#articel_2 {top: 300px; left: 200px; z-index:150;}
#articel_1 {top: 350px; left: 150px; z-index:550;}
#p_1, #p_2, #p_3, #p_4{
	position: relative; 
	top: 0; 
	left: 0; 
	height: 5%; 
	width: 100%; 
	background-color: #94FBE9;
	color: #FFFFFF; 
	text-align:center;
	font:bold 25px/100% Arial, Helvetica, sans-serif;
	text-shadow:0 1px 2px rgba(0,0,0,.7); 
	border-radius: 3px;
	transition: all 0.5s ease;
}

}
/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 650px) {
#main {
	position:absolute; 
	top:0; left:0; 
	width:100%;
	height: 3700px;
}
#header {
	position: inherit; 
	height:auto; 
	width:100%; 
	text-align:center;
}
#content {
	position: static; 
	height: auto; 
	width:100%;
}
#sidebar {
	position: static; 
	height:auto; 
	width:100%;
}
#articel_1, #articel_2, #articel_3, #articel_4 {
	position: static;
	height: 600px; width: 80%; 
}
#p_1, #p_2, #p_3, #p_4{
	height: auto; 
	font:bold 18px/100% Arial, Helvetica, sans-serif;
}

}
/************************************************************************************
smaller than 480
*************************************************************************************/
@media screen and (max-width: 480px) {
}
