#wrapper
{
background-color: white;
}

#header
{
background-color: black;
color: white;
width: 100%;
height: 200px;
text-align: center;
font-size: 3em;
line-height: 200px;
}

#sidebar
{
background-color: gray;
color: white;
width: 10%;
height: auto;
font-size: 20px;
float: left;
padding-right: 5px;
}

#content
{
background-color: white;
color: black;
width: 85%;
height: auto;
font-size: 1em;
float: right;
}

#footer
{
background-color: orange;
color: black;
width: 100%;
height: 100px;
text-align: center;
font-size: 1em;
clear: both;
}

a:link{color: black; text-decoration: none;}
a:visited{color: green}
a:hover{color: blue}
a:active{color: purple; text-decoration: line-through}

.a1{
	display: block;
	padding-top: 30px;
	text-align: center;
	line-height: 50px;
}

/*media queries*/

/*large-size screen*/

@media screen and (max-width: 980px){

#header{
	width: 94%;
}

#content{
	width:65%;
}

#sidebar{
	width: 30%;
}

#footer{
	width: 94%;
}

}

/*Medium-size screens*/

@media screen and (max-width: 720px){
	

#content{
	width: auto;
	float: none;
}

#sidebar{
	width: auto;
	float: none;
}
}

/*small-size screens*/
@media screen and (max-width: 480px;){
	
#header{
	height: auto;
	width: auto;
}

#sidebar{
	display: none;
}