*{margin:0px;padding:0px}
body{font-family:arial;

  background-image: url('sfondo.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover}
ul{list-style:none;width:100%}
li{padding:4px;margin-bottom:5px; margin-top:5px; text-align:center;color:#000; width:}
#head
{
	min-height:30px;
	background-color:#006699;
	border-bottom:2px solid #333;
	padding:4px;
	clear:both;
	text-align:center;
	color:#ffffff
}
#footer
{
	min-height:10px;
	background-color:#006699;
	border-top:2px solid #333;
	padding:10px;
	clear:both;
	text-align:center;
	color:#ffffff;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%
}
#h2
{
  font-size: 0.275em; /* 14px/16=0.875em */
}
#nav{
	border-bottom:2px solid #333;
}
#main
{
	padding:10px 10px 10px 10px;
}
#article{min-height:250px;margin-bottom:20px;overflow:auto}
#sidebar{background-color:#fffff0; border-radius: 20px; min-height:180px;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:19%;padding:4px;margin-right:2px}
#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:center}
li{float:left;width:19%;padding:4px;margin-right:4px}
#main
{
	padding:20px 30px 20px 30px;
}

}