#wrapper {
width:900px;
margin:0 auto 0 auto;
background-color:#990000;
height:800px;
}
#top {
background-color:pink;
color:blue;
width: 900px;
height:100px;
float: left;
}
#nav {
background-color:#339;
width:900px;
float: left;
}
#left {
background-color:#069;
width:200px;
float: left;
}
#main {
background-color:#033;
width:500px;
float: left;
}
#right{
background-color:#999;
width:200px;
float: left;
}
#bottom{
background-color:#999;
width:900px;
float: left;
}
aside {
	width:200px;
	height:150px;
	background-color:white;
	float:right;
	clear:both;
}
article {
	width:700px;
	height:550px;
	background-color:yellow;
}

/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {  #wrapper {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */	background-color:#009900;
  }
}