Просмотр архива онлайн игра Форсаж

/*********** FONTS *******
@font-face {
	font-family:
"ptsans";
	src: url("/fonts/ptsans.ttf");
	font-size:
14px;
        color: #D3D3D3;
}
****/
@import
"http://webfonts.ru/import/ptsans.css";
@import
"http://webfonts.ru/import/lobster.css";


body { margin:0px;
padding:0px;background: url(/img/body.jpg) repeat; font-family:
"PTSansRegular"; color: #D3D3D3;}
img { border:0px; }
.clr {
clear:both; }


.stn:link, .stn:visited { color: #F8FF19;
text-decoration: none; font-weight: bold; } 
.stn:active, .stn:hover {
color: #d77906; text-decoration: none; }

.stn-sort:link,
.stn-sort:visited { color: #FFFFFF; text-decoration: none; font-weight:
bold; } 
.stn-sort:active, .stn-sort:hover { color: #000000;
text-decoration: none; }

/*############# WRAPPERS #############*/
.wrap
{ width:1000px; margin:0 auto; border:0px solid black; }

/*#############
HEADER #############*/
.header { width:1000px; }

.clr-line {  

	background: url(/img/hd-line.jpg)
no-repeat;
	width:980px;
	height:8px;
}

.logo {
	background:
url(/img/logo.png) no-repeat;
	width:1680px;
	height:521px;
	margin:0px
-250px 0px -350px;
}

.hd-menu
{
	float:right;
	list-style:none;
	font-family:
"PTSansRegular";
	margin:50px 80px 0px 0px;
}

.hd-menu li
{
	display:inline;
	margin:0px 15px 0px 0px;
	border:3px solid
#FFF;
	padding:7px 5px 3px 5px;
}

.hd-menu li:hover {
	border:3px
solid #f9ac85;
	border-radius:10px;
	padding:5px 5px 3px
5px;
}

.hd-menu a {
	text-decoration:none;
	color:#000;
}

.cp-art
{
	background: url(/img/fruits.jpg)
no-repeat;
	width:542px;
	height:244px;
	margin-bottom:10px;
	float:left;
}

.sprite-icon
{
	background: url(/img/sprite-icon.png)
no-repeat;
	width:500px;
	height:500px;
}

.hd-bnf
{
	float:left;
	background: url(/img/block1.png)
no-repeat;
	height:209px;
	font-family:
"lobster";
	margin:25px 0px 0px 0px;
	padding:5px 15px 0px
20px;
	
}

.hd-bnf li {
	list-style-image:
url(/img/arrow.png);	
	background-repeat:no-repeat;
        padding:5px
15px 0px 20px;
}

/*############# CONTENT #############*/
.content { 
width:100%; margin-top:-20px; }
.cl-left { width:330px; float:left;
border:0px solid black; }
.cl-right { width:650px; float:left; padding:0px
0px 0px 20px; border:0px solid black; }

.h-title {
	background:
url(/img/opacity-title1.png)
no-repeat;
	width:289px;
	height:24px;
	color:#000;
font-size:17px;
	font-family:
"Impact";
padding:3px 0px 0px 20px;
margin:1px 0px 0px
0px;
	text-align:left;
}

.h-title2 {
	background:
url(/img/opacity-title2.png)
no-repeat;
	width:230px;
	height:25px;
	color:#000;
font-size:17px;
	font-family:
"Impact";
padding:3px 0px 0px
0px;
	text-align:left;
}

.h-title3 {
	background:
url(/img/opacity-title2.png)
no-repeat;
	width:230px;
	height:25px;
	color:#000;
font-size:17px;
	font-family:
"Impact";
padding:3px 0px 0px
0px;
	text-align:center;
}

.h-title1 {
	background:
url(/img/opacity-title.png)
no-repeat;
	width:647px;
	height:25px;
	color:#000;
font-size:17px;
	font-family:
"Impact";
padding:3px 0px 0px
15px;
	text-align:left;
	
}
.autoriz {
	background:
url(/img/block1.png) no-repeat;
	height:209px;	
        margin: 0px 0px
0px 0px;
	padding:5px 0px 0px 10px;
}

.lg {
	background:
none;
	border: 1px solid #8d8d8d;
	border-radius:10px;
	background:
url(/img/inpt.png) repeat-x;
	width:237px;
	height:24px;
	padding:0px
0px 0px 10px;
	margin:3px 0px 0px 0px;
box-shadow: inset 0px 1px 10px 1px
rgba(5, 5, 5, 0.900), 3px 5px 10px rgba(0, 0, 0, 0.302);
}

.lg:hover
{
	background: url(/img/inpt-hov.png)
repeat-x;
	width:237px;
	height:24px;
}

.ps {
	background:
none;
	border: 1px solid #8d8d8d;
	border-radius:10px;
	background:
url(/img/inpt.png) repeat-x;
	width:237px;
	height:24px;
	padding:0px
0px 0px 10px;
	margin:3px 0px 0px 0px;
box-shadow: inset 0px 1px 10px 1px
rgba(5, 5, 5, 0.900), 3px 5px 10px rgba(0, 0, 0, 0.302);
}

.ps:hover
{
	background: url(/img/inpt-hov.png)
repeat-x;
	width:237px;
	height:24px;
}

.btn_in {
	background:
url(/img/btn2.png) no-repeat;
border: 1px solid #303030;
border-radius:
10px;
color: #FFF;
margin: 10px 0px 0px 0px;
padding: 4px 0px 4px
0px;
cursor: pointer;
width: 80px;
text-shadow: 1px 1px 0px rgba(0, 0,
0, 0.298);
box-shadow: inset 0px 1px 10px 1px rgba(5, 5, 5, 0.900), 3px
5px 10px rgba(0, 0, 0, 0.302);
}

.btn_reg {
background:
url(/img/btn2.png) no-repeat;
border: 1px solid #303030;
border-radius:
10px;
color: #FFF;
margin: 10px 0px 0px 0px;
padding: 4px 0px 4px
0px;
cursor: pointer;
width: 127px;
text-shadow: 1px 1px 0px rgba(0, 0,
0, 0.298);
box-shadow: inset 0px 1px 10px 1px rgba(5, 5, 5, 0.900), 3px
5px 10px rgba(0, 0, 0, 0.302);
}

.btn_7 {
background:
url(/img/btn2.png) no-repeat;
border: 1px solid #303030;
border-radius:
10px;
color: #FFF;
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px
0px;
cursor: pointer;
width: 127px;
text-shadow: 1px 1px 0px rgba(0, 0,
0, 0.298);
box-shadow: inset 0px 1px 10px 0px rgba(5, 5, 5, 0.900), 3px
5px 10px rgba(0, 0, 0, 0.302);
}

.btn_8 {
background:
url(/img/btn.png) no-repeat;
border: 1px solid #565454;
border-radius:
13px;
color: #FFF;
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px
0px;
cursor: pointer;
width: 120px;
text-shadow: 1px 1px 0px rgba(0, 0,
0, 0.298);
box-shadow: inset 0px 1px 10px 0px rgba(5, 5, 5, 0.900), 3px
5px 10px rgba(0, 0, 0, 0.302);
}
a.rs-ps { color:#f77827;
text-decoration:none;  font-size:14px; }
a.rs-ps:hover {
text-decoration:underline; }

.stat {
	background: url(/img/block1.png)
no-repeat;
	height:209px;
	font-family:
"lobster";
	margin:25px 0px 0px 0px;
	padding:5px 0px 0px
10px;
		
}

.st-lf { float:left; margin:5px 0px 0px 0px; }
.st-rg {
float:left; margin:7px 0px 0px 15px; }

.line {
	margin:10px 0px 0px
30px;
}

.line-st {
	border: 1px solid
#8d8d8d;
	border-radius:10px;
	background: url(/img/inpt-hov.png)
repeat-x;
	width:115px;
	height:19px;
	color:#f77827;
	text-align:center;
	margin:2px
0px 0px 0px;
	padding:5px 0px 0px 0px;
	
}

.st-time {
	margin:3px
0px 0px 30px;
}

.wim {
	background: url(/img/small-inpt.png)
repeat-x;
	width:229px;
	height:34px;
	border:1px solid
#b6b6b6;
	border-radius:10px;
	text-align:center;
	font-size:20pt;
	padding:10px
0px 0px 0px;
	margin:0px 0px 0px 190px;
}

.wim-block {
	margin:10px
0px 0px 67px;
}

.wim-lf {
	background: url(/img/man-1.jpg)
no-repeat;
	width:125px;
	height:129px;
	float:left;
}

.wim-ctr
{
	width:220px;
	float:left;
	color:#0a5200;
	font-size:19pt;
	text-align:center;
	margin:0px
5px 0px 5px;
}

.wim-ctr-in {
	background: url(/img/arrows.jpg)
no-repeat;
	width:117px;
	height:63px;
	margin:10px 0px 10px
50px;
}

.wim-rg {
	background: url(/img/man-2.jpg)
no-repeat;
	width:130px;
	height:131px;
	float:left;	
}

.garant-bk
{
	width:200px;
	float:left;
	margin:5px 0px 0px
0px;
	text-align:center;
	color:#0a5200;
	font-size:15pt;	

}

i
{
	display:block;
	background:url(/img/garant-sprite.jpg);
	width:171px;
	height:155px;
	margin-left:15px;
}

.cntrl-ps
{
	width:271px;
	margin-left:40px;

}

s
{
	display:block;
	background:url(/img/paysitem-sprite.png);
	width:57px;
	height:46px;
	float:left;
}

.acc-title
{
background: #989D96;
width: 240px;
height: 30px;
border: 2px solid
#4F4F4F;
border-radius: 3px;
text-align: left;
box-shadow: 0 0 0 2px
#BEBEBE;
margin-left: 30px;
color:#000;
font-size:17px;
	font-family:
"Impact";
padding:0px 0px 0px 15px;
margin-top:
5px;
}

.acc-title1 {
background: #989D96;
width: 240px;
height:
25px;
border: 2px solid #4F4F4F;
border-radius: 3px;
text-align:
center;
box-shadow: 0 0 0 2px #BEBEBE;
margin-left:
30px;
color:#000;
font-size:17px;
	font-family:
"Impact";
padding:1px 0px 0px 15px;
}

.acc-title3
{
background: #989D96;
width: 591px;
height: 30px;
border: 2px solid
#4F4F4F;
border-radius: 3px;
text-align: left;
box-shadow: 0 0 0 2px
#BEBEBE;
margin-left: -148px;
color:#000;
font-size:17px;
	font-family:
"Impact";
padding:0px 0px 0px 15px;
margin-top:
5px;
}

.field-gr {
	background: url(/img/as.png)
no-repeat;
	width:273px;
	height:36px;
	padding:9px 0px 0px
28px;
	margin:-10px 0px 1px 23px;
        
       
}
.field-gr:hover
{
	background: url(/img/asu.png)
no-repeat;
	width:273px;
	height:36px;
	padding:9px 0px 0px
28px;
	margin:-10px 0px 1px 23px;
       
}
.field-gr a
{
	color:#fff;
	text-decoration:none;
	font-size:20px;
}

.field-gr
a:hover {
       

	color:#fff;
	text-decoration:none;
	border-bottom:1px dashed
#99be97;
	font-size:20px;
}

.field-rd {
	background:
url(/img/field-rd.jpg)
no-repeat;
	width:220px;
	height:31px;
	padding:9px 0px 0px
48px;
	margin:-10px 0px 11px 28px;
}

.field-rd a
{
	color:#ad7676;
	text-decoration:none;
	font-size:20px;
}

.field-rd
a:hover {
	color:#c28888;
	text-decoration:none;
	border-bottom:1px
dashed #c28888;
	font-size:20px;
}

.field-ar {
	background:
url(/img/field-ar.jpg)
no-repeat;
	width:220px;
	height:31px;
	padding:9px 0px 0px
48px;
	margin:-10px 0px 11px 28px;
}

.field-ars {
	background:
url(/img/field-ars.jpg)
no-repeat;
	width:220px;
	height:31px;
	padding:9px 0px 0px
48px;
	margin:-10px 0px 11px 28px;
}

.field-ars a, .field-ar a
{
	color:#7ea57b;
	text-decoration:none;
	font-size:18px;
}

.field-ars
a:hover, .field-ar a:hover
{
	color:#99be97;
	text-decoration:none;
	border-bottom:1px dashed
#99be97;
	font-size:18px;
}

.fr-block {
	width: 540px;float:
left;margin: 0px 20px 20px 10px;background: rgba(190, 190, 190,
0.39);border-radius: 15px;
}

.fr-block img {
	margin:10px 0px 10px
10px;
	border-radius:10px;
	border:3px solid #cdcdcd;
}

.fr-block3
{
	width: 180px;float: left;margin: 0px 15px 10px -5px;background:
rgba(190, 190, 190, 0.39);border-radius: 15px;
}
.fr-block3 img
{
	margin:0px 0px 0px 0px;
	border-radius:10px;
	
}

.fr-block4
{
	width: 370px;float: left;margin: 0px 15px 10px -5px;background:
rgba(190, 190, 190, 0.39);border-radius: 15px;
}
.fr-block4 img
{
	margin:0px 0px 0px 0px;
	border-radius:10px;
	
}
.fr-block img
{
	margin:10px 0px 0px 15px;
	border-radius:10px;
	border:3px solid
#cdcdcd;
}
.fr-block2 {
background: url(/img/fr-block.jpg)
no-repeat;
width: 530px;
height: 180px;
float: left;
margin: 0px 20px
20px 20px;
border: 3px solid #CDCDCD;
border-radius:
10px;
}

.fr-block2 img {
	margin:10px 0px 0px
15px;
	border-radius:10px;
	
}

.fr-block5 {
	width: 445px;float:
left;margin: 0px 5px 0px 5px;background: rgba(190, 190, 190,
1.69);border-radius: 15px;height:180px;
}

.fr-block5 img {
	margin:0px
0px 0px 0px;
	border-radius:10px;
	
}

.fr-title
{
	color:#E2E1E1;
	font-size:18px;
}

.cl-fr-lf {
	float:left;

	text-align:center;
}

.cl-fr-rg {
	float:left;
	margin: 10px 0px
10px 5px;
}

.fr-te-gr { color:#E2E1E1; }
.fr-te-gr-title { color:#000;
font-weight:700; margin-bottom:10px;}

.fr-te-gr2 { color: #B22222;
}
.fr-te-gr-title { color:#000; font-weight:700;
margin-bottom:10px;}

a.sm-btn
{
	display:block;
	cursor:pointer;
	font-size: 12px;
	font-weight: 700
!important;
	margin: 0px 5px 8px 0px;
	padding: 0px
14px;
	border-radius: 10px;
	box-shadow: inset 0px 1px 0px 0px rgba(255,
255, 255, 0.400), 1px 1px 1px rgba(0, 0, 0, 0.102);
	display:
inline-block;
	line-height: 26px;
	text-shadow: 1px 1px 0px rgba(255,
255, 255, 0.298);
	background: linear-gradient(to bottom, #88BDFF 0px,
#60A7FF 100%) transparent;
	border: 1px solid #3E8FF4;
	color: #2B63A8
!important;	
	text-decoration:none;
}

a.sm-btn:hover { opacity:0.8;
}


input.sm-btn {
	display:block;
	cursor:pointer;
	font-size:
12px;
	font-weight: 700 !important;
	margin: 0px 5px 8px 0px;
	padding:
0px 14px;
	border-radius: 10px;
	box-shadow: inset 0px 1px 0px 0px
rgba(255, 255, 255, 0.400), 1px 1px 1px rgba(0, 0, 0, 0.102);
	display:
inline-block;
	line-height: 30px;
	text-shadow: 1px 1px 0px rgba(255,
255, 255, 0.298);
	background: linear-gradient(to bottom, #88BDFF 0px,
#60A7FF 100%) transparent;
	border: 1px solid #3E8FF4;
	color: #2B63A8
!important;	
	text-decoration:none;
}

input.sm-btn:hover {
opacity:0.8; }

.silver-bk {
background: #292929;
border: 2px solid
#9C9E93;
width: 580px;
border-radius: 5px;
margin: -10px 0px 0px
0px;
padding: 10px 10px 10px 20px;
color: #BEBEBE;
}

.silver-bk2
{
	background: #f7f7f7;
	border:1px solid
#dddddd;
	width:540px;
	margin:-10px 0px 0px 0px;
	padding:10px 10px
10px 20px;
	color:#7ea57b;
}

.block1
{background:url('/img/block2.png') no-repeat;width:647px;text-align:left;
margin: 3px 0px 0px 0px; padding: 5px 0px 0px 10px;  height:39px;}
.block2
{background:url('/img/block2a.png') repeat-y;margin: -5px 0px 0px
0px;
	padding:0px 40px 10px 30px;float:center;color:#BEBEBE;}
.block3
{background:url('/img/block3.png') no-repeat left
bottom;width:647px;height:62px;padding:0px 0px 0px 0px;}

.s-bk-lf
{
	margin-left:150px;
}

.sm-line
{
	width:450px;
	float:left;
	margin:5px 0px 5px
0px;
	font-size:14px;

}

.sm-line-nt {
	
	margin:5px 0px 5px
0px;
	font-size:14px;

}

.sm-line-nt img {
	border:3px solid
#cdcdcd;
	border-radius:10px;
	vertical-align:-13px;
}

.sm-line img
{
	border:3px solid
#cdcdcd;
	border-radius:10px;
	vertical-align:-13px;
	margin:0px 5px 0px
0px;
}

.m-tb {
	background: #897B7B;
	color:white;
}

table {
border:none; }
 
td
{
	border-radius:10px;
	margin-right:5px;
}

.bs-py {
	border: 1px
solid #8d8d8d;
	border-radius:10px;
	background: url(/img/inpt-hov.png)
repeat-x;
	width:115px;
	height:24px;
	color:#f77827;
	text-align:center;
	margin:0px
0px 0px 0px;
	padding:3px 0px 0px 0px;
}

.out-my {
	background:
none;
	border: 1px solid #8d8d8d;
	border-radius:10px;
	background:
url(/img/inpt.png) repeat-x;
	width:187px;
	height:24px;
	padding:0px
0px 0px 10px;
	margin:1px 0px 0px 0px;
}

.out-my:hover {
	background:
url(/img/inpt-hov.png)
repeat-x;
	width:187px;
	height:24px;
}

/*############# FOOTER
#############*/
.footer {
	margin-top:100px;
}

.htt:hover
{background: #D3D3D3;color:#000000;}


.logotip{
background:
url(/img/logotip.png) no-repeat;
margin:0px 0px 0px
350px;
}




#top-menu-1{
background:
url(/img/top-menu-1.png);


}
#top-menu-1:hover{
background:
url(/img/top-menu-1a.png)no-repeat;;

}

#top-menu-2{
background:
url(/img/top-menu-2.png);


}
#top-menu-2:hover{
background:
url(/img/top-menu-2a.png)no-repeat;


}

#top-menu-3{
background:
url(/img/top-menu-3a.png);


}
#top-menu-3:hover{
background:
url(/img/top-menu-3s.png)no-repeat;
 height:
41px;

}

#top-menu-4{
background:
url(/img/rul.png);


}
#top-menu-4:hover{
background:
url(/img/rul1.png)no-repeat;
 

}

#top-menu-6:hover{
background:
url(/img/25.png)no-repeat;
 

}


#top-menu-7:hover{
background:
url(/img/24.png)no-repeat;

}


#top-menu-8:hover{
background:
url(/img/23.png)no-repeat;


}

#top-menu-9{


 text-align:
center;
font-family: "Impact";
font-size: 17px;
color:
#FFF;
text-shadow: #000080 0 2px 9px;
padding-top: 24px;
padding-left:
-7px;
text-decoration: none;
float:center;
background-color:
#FFF;

}


#top1{
	float: left;
	padding:0;
	height:71px;
	margin:
0 10px;
position: relative;
    z-index: 500;
     left: 0px;
    top:
200px;
    
}

.top1  a{
	background: url(/img/top1.png) no-repeat; /*
фон пунктов меню , пропишите правильный
путь! */
	color: #bbb; /* цвет шрифта */
	display:
block;
	float: left;
	font: 17px/73px Impact; /* размер
шрифта / высота шрифта (НЕ МЕНЯТЬ!) /
семейство шрифтов */
	height:65px;
	text-decoration:
none; /* подчеркивание(сейчас его нет) */
       
padding:0px 0px 0px 20px;
	text-align: center;
	width: 186px;
	overflow:
hidden;
	margin: 1px 0 0 0; /* отступы пунктов меню
*/
	text-shadow: #000 0 0 1px; /* тень у букв */
position:
relative;
    z-index: 500;
    left: 0px;
    top: 200px;
   

}

.top1 a:hover, .top1 a.active{
	background: url(/img/top1.png)
no-repeat; /* фон пунктов меню (при наведении) ,
пропишите правильный путь! */
        margin: 0px 0
0 0;
	color: #fed9d9; /* цвет шрифта при наведении
*/
	text-shadow: #e75454 0 0 25px; /* тень у букв при
наведениии */
position: relative;
    z-index: 500;
     left:
0px;
    top: 200px;
    
}

#top2{
	float:
left;
	padding:0;
	height:71px;
	margin: 0 0px;
position: relative;
  
 z-index: 500;
     left: -5px;
    top: 200px;
  
}

.top2 
a{
	background: url(/img/top2.png) no-repeat; /* фон пунктов
меню , пропишите правильный путь! */
	color:
#bbb; /* цвет шрифта */
	display: block;
	float: left;
	font:
17px/73px Impact; /* размер шрифта / высота шрифта
(НЕ МЕНЯТЬ!) / семейство шрифтов
*/
	height:65px;
	text-decoration: none; /*
подчеркивание(сейчас его нет) */
	text-align:
center;
	width: 186px;
	overflow: hidden;
	margin: 1px 0 0 0px; /*
отступы пунктов меню */
        padding:0px 0px 0px
20px;
	text-shadow: #000 0 0 1px; /* тень у букв */
position:
relative;
    z-index: 500;
    left: -5px;
    top: 200px;
  

}

.top2 a:hover, .top2 a.active{
	background: url(/img/top2.png)
no-repeat; /* фон пунктов меню (при наведении) ,
пропишите правильный путь! */
        margin: 0px 0
0 0px;
	color: #fed9d9; /* цвет шрифта при наведении
*/
	text-shadow: #e75454 0 0 25px; /* тень у букв при
наведениии */
position: relative;
    z-index: 500;
     left:
-5px;
   top: 200px;
    
}

#top3{
	float:
left;
	padding:0;
	height:71px;
	margin: 0 0px;
position: relative;
  
 z-index: 500;
     left: -5px;
    top: 200px;
  
}

.top3 
a{
	background: url(/img/top3.png) no-repeat; /* фон пунктов
меню , пропишите правильный путь! */
	color:
#bbb; /* цвет шрифта */
	display: block;
	float: left;
	font:
17px/73px Impact; /* размер шрифта / высота шрифта
(НЕ МЕНЯТЬ!) / семейство шрифтов
*/
	height:65px;
	text-decoration: none; /*
подчеркивание(сейчас его нет) */
	text-align:
center;
	width: 186px;
	overflow: hidden;
	margin: 1px 0 0 -5px; /*
отступы пунктов меню */
        padding:0px 0px 0px
20px;
	text-shadow: #000 0 0 1px; /* тень у букв */
position:
relative;
    z-index: 500;
    left: -5px;
    top: 200px;
  

}

.top3 a:hover, .top3 a.active{
	background: url(/img/top3.png)
no-repeat; /* фон пунктов меню (при наведении) ,
пропишите правильный путь! */
        margin: 0px 0
0 -5px;
	color: #fed9d9; /* цвет шрифта при
наведении */
	text-shadow: #e75454 0 0 25px; /* тень у
букв при наведениии */
position: relative;
    z-index:
500;
     left: -5px;
   top: 200px;
    
}



#top4{
	float:
left;
	padding:0;
	height:71px;
	margin: 0 0px;
position: relative;
  
 z-index: 500;
     left: -5px;
    top: 200px;
  
}

.top4 
a{
	background: url(/img/top2.png) no-repeat; /* фон пунктов
меню , пропишите правильный путь! */
	color:
#bbb; /* цвет шрифта */
	display: block;
	float: left;
	font:
17px/73px Impact; /* размер шрифта / высота шрифта
(НЕ МЕНЯТЬ!) / семейство шрифтов
*/
	height:65px;
	text-decoration: none; /*
подчеркивание(сейчас его нет) */
	text-align:
center;
	width: 186px;
	overflow: hidden;
        padding:0px 0px 0px
20px;
	margin: 1px 0 0 -5px; /* отступы пунктов меню
*/
	text-shadow: #000 0 0 1px; /* тень у букв */
position:
relative;
    z-index: 500;
    left: -5px;
    top: 200px;
  

}

.top4 a:hover, .top4 a.active{
	background: url(/img/top2.png)
no-repeat; /* фон пунктов меню (при наведении) ,
пропишите правильный путь! */
        margin: 0px 0
0 -5px;
	color: #fed9d9; /* цвет шрифта при
наведении */
	text-shadow: #e75454 0 0 25px; /* тень у
букв при наведениии */
position: relative;
    z-index:
500;
     left: -5px;
   top: 200px;
    
}

#top5{
	float:
left;
	padding:0;
	height:71px;
	margin: 0 0px;
position: relative;
  
 z-index: 500;
     left: -5px;
    top: 200px;
  
}

.top5 
a{
	background: url(/img/top1.png) no-repeat; /* фон пунктов
меню , пропишите правильный путь! */
	color:
#bbb; /* цвет шрифта */
	display: block;
	float: left;
	font:
17px/73px Impact; /* размер шрифта / высота шрифта
(НЕ МЕНЯТЬ!) / семейство шрифтов
*/
	height:65px;
	text-decoration: none; /*
подчеркивание(сейчас его нет) */
	text-align:
center;
	width: 186px;
	overflow: hidden;
	margin: 1px 0 0 0; /*
отступы пунктов меню */
        padding:0px 0px 0px
10px;
	text-shadow: #000 0 0 1px; /* тень у букв */
position:
relative;
    z-index: 500;
    left: -5px;
    top: 200px;
  

}

.top5 a:hover, .top5 a.active{
	background: url(/img/top1.png)
no-repeat; /* фон пунктов меню (при наведении) ,
пропишите правильный путь! */
        margin: 0px 0
0 0;
	color: #fed9d9; /* цвет шрифта при наведении
*/
	text-shadow: #e75454 0 0 25px; /* тень у букв при
наведениии */
position: relative;
    z-index: 500;
     left:
-5px;
   top: 200px;
    
}



<STYLE>
body,
input{
	font-family: Calibri, Arial;
        
}
#accordion {
	
      
 list-style: none;
	padding: 0 0 0 0;
	width: 276px;
       
margin-left: 20px;
        margin-top: -10px;
}
#accordion
li{
	display: block;
        background: url(/img/as.png) no-repeat;
   
    box-shadow: 0 3px 4px #8b8b8b;
	text-shadow: 1px 1px 0px rgba(0, 0, 0,
0.298);
	box-shadow: inset 0px 1px 10px 0px rgba(55, 55, 55, 0.400), 3px
5px 10px rgba(0, 0, 0, 0.402);
	margin: 1px;
	cursor: pointer;
	padding:
6 15 6 10px;
	list-style: circle;
	border-radius: 4px;
}
#accordion
li:hover{
	display: block;
        background: url(/img/asu.png)
no-repeat;
        box-shadow: 0 3px 4px #8b8b8b;
	text-shadow: 1px 1px
0px rgba(0, 0, 0, 0.298);
	box-shadow: inset 0px 1px 10px 0px rgba(55, 55,
55, 0.400), 3px 5px 10px rgba(0, 0, 0, 0.402);
	margin: 1px;
	cursor:
pointer;
	padding: 6 15 6 10px;
	list-style: circle;
	border-radius:
4px;
}

#accordion ul {
	list-style: none;
	padding: 0 0 0
0;
	display: none;
}
#accordion ul li{
	font-weight:
normal;
	box-shadow: inset 0px 1px 10px 1px rgba(5, 5, 5, 0.900), 3px 5px
10px rgba(0, 0, 0, 0.302);
	cursor: auto;
        
	background:
url(../img/bu2.png) no-repeat;
        background: #D3D3D3;
	padding: 5 0
5 20px;
}
#accordion ul li:hover{
	font-weight: normal;
	box-shadow:
inset 0px 1px 10px 1px rgba(5, 5, 5, 0.900), 3px 5px 10px rgba(0, 0, 0,
0.302);
	cursor: auto;
        
	background: url(../img/bu2.png)
no-repeat;
        background: #FFF5EE;
	padding: 5 0 5 20px;
       

}
#accordion a {
	text-decoration: none;
        color:
#000;
}
#accordion a:hover {
	text-decoration: underline;
       
color: #000;
}

</STYLE>

.podskazka{
    display: inline;
   
position: relative;
}

.podskazka:hover:after{
    background: #000;
 
  background: rgba(0,0,0,.5);
    border-radius: 5px;    
    color:
#fff;
    content: attr(data-title);
    left: 933px;
    top: 220px;
 
  padding: 5px 15px;
    position: absolute;
    z-index: 980;
   
width: auto;
}

.podskazka:hover:before{ /* Добавляем
стрелочку внизу блока всплывающей
подсказки */
    border: solid;
    border-color: #000
transparent;
    border-width: 6px 6px 0 6px;   
    content:
"";
    left: 1033px;
    top: 247px;
    position:
absolute;
    z-index: 990;
}

.podskazka2{
    display: inline;
   
position: relative;
}

.podskazka2:hover:after{
    background: #000;

   background: rgba(0,0,0,.5);
    border-radius: 5px;    
    color:
#fff;
    content: attr(data-title2);
    left: 719px;
    top:
-716px;
    padding: 5px 15px;
    position: absolute;
    z-index:
980;
    width: auto;
}

.podskazka2:hover:before{ /*
Добавляем стрелочку внизу блока
всплывающей подсказки */
    border: solid;
   
border-color: #000 transparent;
    border-width: 6px 6px 0 6px;   
   
content: "";
    left: 755px;
    top: -572px;
    position:
absolute;
    z-index: 990;
}

.tooltip{
    display: inline;
   
position: relative;
}

.tooltip:hover:after{
    background: #000;
   
background: rgba(0,0,0,.5);
    border-radius: 5px;    
    color:
#fff;
    content: attr(data-title3);
    left: 773px;
    top:
-878px;
    padding: 5px 15px;
    position: absolute;
    z-index:
980;
    width: auto;
}

.tooltip:hover:before{ /* Добавляем
стрелочку внизу блока всплывающей
подсказки */
    border: solid;
    border-color: #000
transparent;
    border-width: 6px 6px 0 6px;   
    content:
"";
    left: 811px;
    top: -754px;
    position:
absolute;
    z-index: 990;
}



.tooltip2{
    display: inline;
  
 position: relative;
}

.tooltip2:hover:after{
    background: #000;
 
  background: rgba(0,0,0,.8);
    border-radius: 5px;    
    color:
#fff;
    content: attr(data-title3);
    left: 57px;
    top: -873px;

   padding: 5px 15px;
    position: absolute;
    z-index: 980;
   
width: auto;
}

.tooltip2:hover:before{ /* Добавляем
стрелочку внизу блока всплывающей
подсказки */
    border: solid;
    border-color: #000
transparent;
    border-width: 6px 6px 0 6px;   
    content:
"";
    left: 85px;
    top: -786px;
    position: absolute;

   z-index: 990;
}