body {
font-family:verdana, arial, sans-serif; 
font-size:100%; 
text-align:center; 
margin:0; 
padding:0; 
background-color: #000;
}

ul.css {padding:0; margin:100px auto; list-style-type:none; width:314px; height:314px; position:relative; border: 3px #0f0f0f dashed;}
ul.css li {display:block; height:100px; width:100px; float:left; margin:2px;}
ul.css a {display:block; width:98px; height:98px; border:1px solid #000; line-height:48px; text-align:center; text-decoration:none; color:#fff;}
ul.css a em,ul.css  a span {display:none; line-height:30px; padding-top: 30px;}

ul.css a#link1 {background:#667DFF; color:#0f0f0f;}
ul.css a#link3 {background:#36FF86; color:#0f0f0f;}
ul.css a#link5 {background: url(../images/main/ser.jpg) no-repeat;}
ul.css a#link7 {background:#FFE369; color:#0f0f0f;}
ul.css a#link9 {background:#FF9260; color:#0f0f0f;}

ul.css a:hover#link1 {background:#FFC663; font-weight: bold; color: #000;}
ul.css a:hover#link1 span {display:block; position:absolute; left:-340px; top:-60px; width:300px; height:170px; border:1px solid #FFC663; background: url(../images/main/int_main.jpg) no-repeat;}
ul.css a:hover#link1 em {display:block; position:absolute; left:-40px; top:-60px; width:140px; height:65px; border-right:1px solid #FFC663;  border-top:1px solid #FFC663;}

ul.css a:hover#link3 {background:#FFC663; font-weight: bold; color: #000;}
ul.css a:hover#link3 span {display:block; position:absolute; left:350px; top:-60px; width:300px; height:170px; border:1px solid #FFC663; background: url(../images/main/ext_main.jpg) no-repeat;}
ul.css a:hover#link3 em {display:block; position:absolute; left:211px; top:-60px; width:140px; height:65px; border-left:1px solid #FFC663;  border-top:1px solid #FFC663;}

ul.css a:hover#link7 {background:#4E83FF; font-weight: bold; color: #000;}
ul.css a:hover#link7 span {display:block; position:absolute; left:-340px; top:200px; width:300px; height:170px; border:1px solid #4E83FF; background: url(../images/main/per_main.jpg) no-repeat;}
ul.css a:hover#link7 em {display:block; position:absolute; left:-40px; top:306px; width:140px; height:65px; border-right:1px solid #4E83FF;  border-bottom:1px solid #4E83FF;}

ul.css a:hover#link9 {background:#4E83FF; font-weight: bold; color: #000;}
ul.css a:hover#link9 span {display:block; position:absolute; left:350px; top:200px; width:300px; height:170px; border:1px solid #4E83FF; background: url(../images/main/det_main.jpg) no-repeat;}
ul.css a:hover#link9 em {display:block; position:absolute; left:211px; top:306px; width:140px; height:65px; border-left:1px solid #4E83FF;  border-bottom:1px solid #4E83FF;}