// The first line defines when the code should run
$(document).ready(function() { 
// This line selects the element to trigger the function and defines the first function
// In this case "bind" combined with "mouseover", so when the list element, with index 0 is moused over do the following 3 things.
	$("li:eq(0)").bind("mouseover", function () {
	   $(".float:eq(0)").css({'display':'block','top':'45px'}),
	   $(".float:lt()").hide(),
	   $(".float:gt()").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(0)").hide();
	});
});
// The above block of code is repeated for each individual list element in the set. 
// Don't forget to change the index number if copying and pasting.

$(document).ready(function() {
   $("li:eq(1)").bind("mouseover", function () {
	   $(".float:eq(1)").css({'display':'block','top':'75px'}),
	   $(".float:lt(1)").hide(),
	   $(".float:gt(1)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(1)").hide();													   
   });
});
$(document).ready(function() {
   $("li:eq(2)").bind("mouseover", function () {
	   $(".float:eq(2)").css({'display':'block','top':'105px'}),
	   $(".float:lt(2)").hide(),
	   $(".float:gt(2)").hide();	
           }).bind("mouseleave", function () {
	   $(".float:eq(2)").hide();														   
	});
});
$(document).ready(function() {
   $("li:eq(3)").bind("mouseover", function () {
   		$(".float:eq(3)").css({'display':'block','top':'135px'}),
   		$(".float:lt(3)").hide(),
   		$(".float:gt(3)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(3)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(4)").bind("mouseover", function () {
   		$(".float:eq(4)").css({'display':'block','top':'165px'}),
   		$(".float:lt(4)").hide(),
   		$(".float:gt(4)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(4)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(5)").bind("mouseover", function () {
   		$(".float:eq(5)").css({'display':'block','top':'195px'}),
   		$(".float:lt(5)").hide(),
   		$(".float:gt(5)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(5)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(6)").bind("mouseover", function () {
   		$(".float:eq(6)").css({'display':'block','top':'225px'}),
   		$(".float:lt(6)").hide(),
   		$(".float:gt(6)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(6)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(7)").bind("mouseover", function () {
   		$(".float:eq(7)").css({'display':'block','top':'255px'}),
   		$(".float:lt(7)").hide(),
   		$(".float:gt(7)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(7)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(8)").bind("mouseover", function () {
   		$(".float:eq(8)").css({'display':'block','top':'285px'}),
   		$(".float:lt(8)").hide(),
   		$(".float:gt(8)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(8)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(9)").bind("mouseover", function () {
   		$(".float:eq(9)").css({'display':'block','top':'315px'}),
   		$(".float:lt(9)").hide(),
   		$(".float:gt(9)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(9)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(10)").bind("mouseover", function () {
   		$(".float:eq(10)").css({'display':'block','top':'405px'}),
   		$(".float:lt(10)").hide(),
   		$(".float:gt(10)").hide();	
           }).bind("mouseleave", function () {
	   $(".float:eq(10)").hide();														   
	});
});
$(document).ready(function() {
   $("li:eq(11)").bind("mouseover", function () {
   		$(".float:eq(11)").css({'display':'block','top':'445px'}),
   		$(".float:lt(11)").hide(),
   		$(".float:gt(11)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(11)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(12)").bind("mouseover", function () {
   		$(".float:eq(12)").css({'display':'block','top':'475px'}),
   		$(".float:lt(12)").hide(),
   		$(".float:gt(12)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(12)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(13)").bind("mouseover", function () {
   		$(".float:eq(13)").css({'display':'block','top':'505px'}),
   		$(".float:lt(13)").hide(),
   		$(".float:gt(13)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(13)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(14)").bind("mouseover", function () {
   		$(".float:eq(14)").css({'display':'block','top':'535px'}),
   		$(".float:lt(14)").hide(),
   		$(".float:gt(14)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(14)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(15)").bind("mouseover", function () {
   		$(".float:eq(15)").css({'display':'block','top':'605px'}),
   		$(".float:lt(15)").hide(),
   		$(".float:gt(15)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(15)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(16)").bind("mouseover", function () {
   		$(".float:eq(16)").css({'display':'block','top':'625px'}),
   		$(".float:lt(16)").hide(),
   		$(".float:gt(16)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(16)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(17)").bind("mouseover", function () {
   		$(".float:eq(17)").css({'display':'block','top':'695px'}),
   		$(".float:lt(17)").hide(),
   		$(".float:gt(17)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(17)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(18)").bind("mouseover", function () {
   		$(".float:eq(18)").css({'display':'block','top':'725px'}),
   		$(".float:lt(18)").hide(),
   		$(".float:gt(18)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(18)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(19)").bind("mouseover", function () {
   		$(".float:eq(19)").css({'display':'block','top':'755px'}),
   		$(".float:lt(19)").hide(),
   		$(".float:gt(19)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(19)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(20)").bind("mouseover", function () {
   		$(".float:eq(20)").css({'display':'block','top':'785px'}),
   		$(".float:lt(20)").hide(),
   		$(".float:gt(20)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(20)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(21)").bind("mouseover", function () {
   		$(".float:eq(21)").css({'display':'block','top':'815px'}),
   		$(".float:lt(21)").hide(),
   		$(".float:gt(21)").hide();
           }).bind("mouseleave", function () {
	   $(".float:eq(21)").hide();															   
	});
});
$(document).ready(function() {
   $("li:eq(22)").bind("mouseover", function () {
   		$(".float:eq(22)").css({'display':'block','top':'845px'}),
   		$(".float:lt(22)").hide(),
   		$(".float:gt(22)").hide();	
           }).bind("mouseleave", function () {
	   $(".float:eq(22)").hide();														   
	});
});


// this block of code tells the function that when the div box "content box" is moused over, do something, then when the mouse leaves the area, hide the 
// div and return it to its normal state. 
$(document).ready(function() {
   $(".float").mouseenter(function() {
		  $(this).css({'background-color':'white', 'color':'black'});
				  }).mouseleave(function() {
				  $(this).hide();
				  $(this).css({'background-color':'white', 'color':'black'});
	});
});