/*Can't use normal #content id because of what seems to be a bug in Firefox;
unless I define some padding-top for the #content2 id, the #content2 ul 
ignores margin-top*/

#content2 {
	font-size: 1.4em;
	margin: 6.5em auto 4em auto; padding: 7.5em 0 0 0;
	height: 21.5em; width: 47em;
	/*background-color: Aqua;*/
	}
#content2 ul {
	display: block; position: relative;
	margin: 0 auto; padding: 0; 
	list-style-type: none; 
	width: 158px; height: 158px; 
	}
#content2 img {border: 0;}
#content2 li {
	display:block; 
	height: 50px; width: 50px; 
	float: left; 
	margin: 1px;
	}
#content2 a {
	display: block; 
	width: 48px; height: 48px; 
	line-height: 48px; 
	text-align: center; text-decoration: none; 
	font-weight: bold;
	}
#content2 a em, #content2 a span {display: none;}
a#link1 {background: #333; color: #fff; border: 1px solid #000;}
a#link2 {background: #666; color: #fff; border: 1px solid #000;}
a#link3 {background: #999; color: #000; border: 1px solid #000;}
a#link4 {background: #666; color: #fff; border: 1px solid #000;}
a#link5 {background: #ccc; color: #000; border: 1px solid #000;}
a#link6 {background: #999; color: #000; border: 1px solid #000;}
a#link7 {background: #ccc; color: #000; border: 1px solid #000;}
a#link8 {background: #eee; color: #000; border: 1px solid #000;}
a#link9 {background: #fff; color: #fff; border: 0;}

a:hover#link1, a:hover#link2, a:hover#link3, a:hover#link4,
a:hover#link5, a:hover#link6, a:hover#link7, a:hover#link8 {
	background: #ffd610; color: #000;
	}

a:hover#link9 {
	background: #fff; color:#000;  border: 1px solid #000; font-size: 1.2em;
	}
	
a:hover#link1 span, a:hover#link2 span, a:hover#link3 span, a:hover#link4 span,
a:hover#link5 span, a:hover#link6 span, a:hover#link7 span, a:hover#link8 span {
	display: block; position: absolute; border: 1px solid #000;
	}	

a:hover#link1 em, a:hover#link2 em, a:hover#link3 em, a:hover#link4 em,
a:hover#link5 em, a:hover#link6 em, a:hover#link7 em, a:hover#link8 em {
	display: block; position: absolute; line-height: 1px;
	}
	
a:hover#link1 span {left: -210px; top: -100px; width: 200px; height: 150px;}
a:hover#link1 em {
	left: -10px; top: -25px; width: 35px; height: 25px; 
	border-right: 1px solid #000; border-top: 1px solid #000; 
	}

a:hover#link2 span {left: 2px; top:-160px; width: 151px; height: 150px;}
a:hover#link2 em {
	left: 78px; top: -9px; width: 1px; height: 10px; 
	border-right: 1px solid #000; 
	}

a:hover#link3 span {left: 165px; top: -100px; width: 200px; height: 150px;}
a:hover#link3 em {
	left: 129px; top: -25px; width: 35px; height: 25px; 
	border-left: 1px solid #000;  border-top: 1px solid #000; 
	}

a:hover#link4 span {left: -210px; top: 2px; width: 200px; height: 150px;}
a:hover#link4 em {
	left: -10px; top: 75px; width: 12px; height: 1px; 
	border-top: 1px solid #000; 
	}

a:hover#link5 span {left: 165px; top: 2px; width: 200px; height: 150px;}
a:hover#link5 em {
	left: 155px; top: 75px; width: 12px; height: 1px; 
	border-top: 1px solid #000; 
	}

a:hover#link6 span {left: -210px; top: 105px; width: 200px; height: 150px;}
a:hover#link6 em {
	left: -10px; top: 155px; width: 35px; height: 25px; 
	border-right: 1px solid #000;  border-bottom: 1px solid #000; 
	}

a:hover#link7 span {left: 2px; top:165px; width: 152px; height: 150px;}
a:hover#link7 em {
	left: 78px; top: 155px; width: 1px; height: 10px; 
	border-right: 1px solid #000; 
	}

a:hover#link8 span {left: 165px; top: 105px; width: 200px; height: 150px;}
a:hover#link8 em {
	left: 129px; top: 155px; width: 35px; height: 25px; 
	border-left: 1px solid #000; border-bottom: 1px solid #000;
	}