ul.media {padding:0; margin:170px auto 0 auto; list-style-type:none; width:158px; height:158px; position:relative;}
ul.media li {display:block; height:50px; width:50px; float:left; margin:1px;}
ul.media a {display:block; width:48px; height:48px; border:1px solid #000; line-height:48px; text-align:center; text-decoration:none; color:#fff;}
ul.media a em,ul.media  a span {display:none; line-height:1.7em;}
ul.media a#link1 {background:#697210;}
ul.media a#link2 {background:#e09222;}
ul.media a#link3 {background:#f0c992; color:#000;}
ul.media a#link4 {background:#ffd610; color:#000;}
ul.media a#link5 {background:#b55568;}
ul.media a#link6 {background:#847b52;}
ul.media a#link7 {background:#724a10;}
ul.media a:hover#link1 {background:#000;}
ul.media a:hover#link1 span {display:block; position:absolute; left:-210px; top:-160px; width:199px; height:149px; border:1px solid #000;background:#697210;}
ul.media a:hover#link1 em {display:block; position:absolute; left:-10px; top:-85px; width:35px; height:85px; border-right:1px solid #000;  border-top:1px solid #000;}

ul.media a:hover#link2 {background:#000;}
ul.media a:hover#link2 span {display:block; position:absolute; left:-75px; top:-160px; width:199px; height:149px; border:1px solid #000;background:#e09222;}
ul.media a:hover#link2 em {display:block; position:absolute; left:78px; top:-10px; width:1px; height:11px; font-size:1px; overflow:hidden; border-right:1px solid #000;}

ul.media a:hover#link3 {background:#000; color:#fff;}
ul.media a:hover#link3 span {display:block; position:absolute; left:168px; top:-160px; width:199px; height:149px; border:1px solid #000; background:#f0c992; color:#000;}
ul.media a:hover#link3 em {display:block; position:absolute; left:132px; top:-85px; width:35px; height:85px; border-left:1px solid #000;  border-top:1px solid #000;}

ul.media a:hover#link4 {background:#000; color:#fff;}
ul.media a:hover#link4 span {display:block; position:absolute; left:-210px; top:2px; width:199px; height:149px; border:1px solid #000; background:#ffd610; color:#000;}
ul.media a:hover#link4 em {display:block; position:absolute; left:-10px; top:75px; width:12px; height:1px; border-top:1px solid #000;}

ul.media a:hover#link5 {background:#000;}
ul.media a:hover#link5 span {display:block; position:absolute; left:168px; top:2px; width:199px; height:149px; border:1px solid #000; background:#b55568;}
ul.media a:hover#link5 em {display:block; position:absolute; left:104px; top:75px; width:65px; height:1px; border-top:1px solid #000;}

ul.media a:hover#link6 {background:#000;}
ul.media a:hover#link6 span {display:block; position:absolute; left:-210px; top:160px; width:199px; height:149px; border:1px solid #000; background:#847b52;}
ul.media a:hover#link6 em {display:block; position:absolute; left:-10px; top:155px; width:35px; height:85px; border-right:1px solid #000;  border-bottom:1px solid #000;}

ul.media a:hover#link7 {background:#000;}
ul.media a:hover#link7 span {display:block; position:absolute; left:168px; top:160px; width:199px; height:149px; border:1px solid #000; background:#724a10;}
ul.media a:hover#link7 em {display:block; position:absolute; left:132px; top:155px; width:35px; height:85px; border-left:1px solid #000;  border-bottom:1px solid #000;}

#mediaText {
	font-size: 10px;
	text-align: left;
	padding:10px;	
}