body{
background:gray;
}
#all{
width:65%;
background:black;
height:auto;
margin-right:auto;
margin-left:auto;
}
#head{height:50px;
font-size:1.25em;
border-bottom:1 px solid #333;
padding:.25em;
text-align:center;
position:-webkit-sticky;
position:sitcky;

}
#head a:link{
color:green; /*tan color*/
text-decoration:none;
}
#head a:active{
color:white; /*gold color*/
text-decoration:underline;
}
#head a:hover{
color:pink; /*gold color*/
text-decoration:none;
}
#head a:visited{
color:red;
text-decoration:underline;
}
#head a:focus{
	color:purple;
	text-decoration:underline;

}

#side{width:45%;
height:200px;
background:red;
float:left;
border-right:1px solid black;
box-sizing:border-box;}

#main{
width:55%;
height:200px;
background:green;
float:left;
}
#right{
width:100%;
height:100px;
background:blue;
text-align:center;
}
img{
max-width:40%;
}
#foot{
clear:both;
height:45px;
background:brown;
border-top:1px solid #333;
text-align:center;
}
@media only screen and (min-width:450px) and (max-width:800px){
body{
margin:0:
}
#all{
width:80%;
}
#main{
width:80%;
float:right;
}
#right{
clear:both;
width:800%;
height:200px;
}
}
@media only screen and (min-width:0px) and (max-width:449px){
body{
margin:0;
}
#all{
width:100%;}
#head{height:50px;
font-size:1.1em;
padding:.15em;
}
#side{
width:100%;
height:auto;
float:none;
}
#right{
height:200px;
width:800%;
}
}