body
{
margin:0;
padding:0;
}
#side
{
width:100%;
height:10%;
background:#0000ff;
}

ul 
{
padding-left:0;
margin-left:0;
}

li:hover
{
color:white;
}

img
{
display:none;
}

#wrap
{
width:80%;
margin:0 auto;
}

#nav
{
position:relative;
width:20%;
height:90%;
padding-top: 2%;
background:#cc9900;
text-align:left;
}

#nav ul
{
list-style:none;
margin-right:20px;
position:absolute;
top:0%;
left:-20%;
}

#nav ul li
{
display:block;
margin-left:20px;
font:20px ;
}

#nav ul li a
{
text-decoration:none;
color:#000000;
}

#nav ul li a:hover
{
color:#ff0000;
}

#banner
{
position:absolute;
width:65%;
padding-top: 1.5%;
height:90%;
left:25%;
top:10%;
background:#dd8877;
}

#gal
{
height:100%;
background:#ccc;
}

#footer
{
height:20%;
background:#000;
}

@media screen and (max-width: 600px)
	{
		#nav
{
position:relative;
width:100%;
height:inherit;
padding-top: 2%;
background:#cc9900;
text-align:left;
}
		#banner{
				position:relative;
			width:100%;
			padding-top: 1.5%;
			margin-top:-20px;
			height:90%;
			left:0%;
			top:20%;
			background:#dd8877;
}
		#nav ul
{
list-style:none;
margin-right:20px;
position:relative;
left:0%;
}
		ul {width:75px;background-color:pink;}
		img {display:block;}
		ol { padding-left:0px; text-align:left; display:none;background-color:pink;}
		ul:hover > ol {display:block;}
		

	}