*{margin:0px;padding:0px}
body{font-family:arial}
ul{list-style:none;width:100%}
li{padding:4px;margin-bottom:5px; margin-top:5px; background-color:#ffffcc;text-align:center;color:#000; width:}
#head
{
	min-height:30px;
	background-color:#006699;
	border-bottom:2px solid #333;
	padding:20px;
	clear:both
}
#footer
{
	min-height:10px;
	background-color:#dedede;
	border-top:2px solid #333;
	padding:20px;
	clear:both;
	text-align:center
}
#nav{
	border-bottom:2px solid #333;
}
#main
{
	padding:10px 10px 10px 10px;
}
#article,#sidebar{background-color:#dedede; min-height:250px;margin-bottom:20px;overflow:auto}
.content{padding:20px}
.clearfix{
	clear:both;
}
@media only screen and (min-width: 480px)
{
	
#header
{
background-color:#cc0000;	
}
ul{float:left;}
li{float:left;width:16%;padding:4px;margin-right:8px}
#main
{
	padding:10px 20px 10px 20px;
}
	
}
@media only screen and (min-width: 768px){
#header
{
background-color:#006699;	
}
#article
{
float:left;
width:68%;
}

#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
width:100%;
}
ul{float:right}
li{float:left;width:12%;padding:4px;margin-right:8px}
#main
{
	padding:20px 30px 20px 30px;
}

}