Bottom work

by Cosette Girardot

HTML

<body>
<div class="top">
    <div class="banner">
        <div id="E"></div>
    </div>   </div>
<div class="bottom">
    <div id="bottomleft">
		<h2>Testing</h2><p>Lorem i quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede.</p>
	</div>    
	<div class="info" >
    </div>
</div><!-- This closes the div for the class .bottom -->
</body>

<!-- style="background-color:#999999;height: 96.5%;width: 259px;z-index: 3;position: absolute;	top: -17px;float: right; left:100%;" -->

CSS

/*BASIC PAGE ATTRIBUTES*/
body {
	font-family: "Myriad Pro";
    background-color: #000
}

h1 { /*this it the font used for "What to Eat" */
	font-size: 24px;
	color: rgb(160,195,87);
	text-shadow: 2px 1px 3px rgb(0,0,0);
	font-weight: bold;
	font-family: Rockwell;
	line-height: 30%;
}
h2 {
	font-size: 24px;
	color: #808080;
	font-family:"Courier New", Courier, monospace;
}
h3 {
    font-size: 16px;
	color: #FFF;
	text-shadow: 2px 1px 3px rgb(0,0,0);
	font-weight: bold;
	font-family: Rockwell;
}
p {
	font-family:"Myriad Pro";
	font-size:14px;
}
a:link {
	text-decoration: none;
	color: #FFF; !Important
	font-size:20px;
	font-family:Arial, Helvetica, sans-serif; !important
}
a:visited {
	text-decoration: none;
	color: #FFF;
}
a:hover {
	text-decoration: none;
	color: rgb(160,195,87);
}
a:active {
	text-decoration:none;
	color: rgb (160, 195, 87);
}










/* STYLE FOR THE TOP HALF OF THE PAGE INCLUDING THE ROTATING DISPLAY, NAVIGATION, AND BUTTON CONTROLS*/
.top { /*this is the main header box for all the content on my page*/
	height: 315px;
	margin-top:0%;
	margin-bottom:0%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	width: 851px
}
#E {
	height: 5px;
	width: 5px;
	position: absolute;
	margin-left:10px;
    background-image: url("http://www.emich.edu/dining/images/top_ewhite.png");
	top: 5px;
}
#frontcontrols {
	width: 148px;
	height: 11px;
	bottom: 10%;
	text-align: right;
	margin-top: 280px;
	margin-left: 80%;
	float: right;
	z-index: 600;
	padding: 0%;
	position: absolute;
}

#frontcontrols li {
	list-style: none;
	display: inline;
}


.banner{ 
	background-size: 851px 315px;
	height: 315px;
	margin-top: 0%;
	position: absolute;
	z-index: 1;
	font-variant: inherit;
	overflow:hidden;
}
.banner img{
	width: 851px;
	height: 315px;
	display:none;
}
	
.navigation { /*this entire div will have to go as an overlay for the picture slideshow*/
	background-color: rgba(0,0,0,0.6);
	float: left;
	height: 315px;
	left: 0px;
	top: auto;
	padding-left:...