.horizontalaccordion ul {
	margin: 0 auto;
	padding: 0;
	list-style:none;
	height: 300px; /*700*/
	width: 1050px;
	float: left;
	position: absolute;
	left: 0px;
	top: 240px; /*240*/
}

.horizontalaccordion ul li {
    display:block;
	overflow: hidden;
    float:left;
    margin: 0;
    padding: 0;
    list-style:none;
	width:40px;
	height: 300px; /*300*/

    /* Decorative CSS */
    background:#f0f0f0; /*#f0f0f0*/

    /* CSS3 Transitions */
    transition: width 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out;
    -webkit-transition: width 0.3s ease-in-out;
    -o-transition: width 0.3s ease-in-out;
}

.horizontalaccordion>ul li h3 {
	display:block;
	float:left;
	margin: 0;
	padding:10px;
	height:19px;
	width:480px; /*280*/
	/* Decorative CSS */
    border-left:#f0f0f0 1px solid;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	text-transform:uppercase;
	color: #000;
	background:#ccc; /*цвет закладок*/
	/* CSS3 Transform Rotate & Translate */
    white-space:pre;
	-moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
	-moz-transform-origin: 0 100%;
	-o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
	-o-transform-origin: 0 100%;
	-webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
	-webkit-transform-origin: 0 100%;
	transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
	transform-origin: 0 100%;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);  /* IE6,IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE8 */
	/* CSS3 Gradient Effect */
/*    background: -moz-linear-gradient( top, #999999, #cccccc);*/
/*	background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));*/
}

.horizontalaccordion>ul>li>div {
    display:none;
    float:left;
	overflow: auto;
    position:relative;
    top:-40px;
    left:40px;
    *top:0px;       /* IE7 Hack */
    *left:0px;      /* IE7 Hack */
    margin:0;
    width:620px; /*320*/
    height:380px; /*280*/
    padding:10px;
}

.horizontalaccordion>ul>li:hover {
    overflow: hidden;
	width: 650px; /*580*/
}
.horizontalaccordion>ul>li:hover p{ /*---------------------------------------------*/
	color: #000;
	font-size: 77%;
	width: 500px;
	display: block;
	padding: 20px 20px 0 0;
}

.horizontalaccordion:hover>ul>li:hover>div {
    display:block;
	margin-top: -50px;
}

.horizontalaccordion:hover>ul>li:hover>h3 {
    /* Decorative CSS */
    color:#fff;
    background:#000000;

    /* CSS3 Gradient Effect 
    background: -moz-linear-gradient( top, #f00, #000000); /* FF, Flock    #454545
    background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4.0) /*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
            progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff0000); /* IE 5.5 - IE 7 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=4.0)" /*-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
                "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff0000)";   /* IE 8 */
}

.horizontalaccordion>ul>li>h3:hover {
    cursor:pointer;
}
a.ankor {
	color : #000000;
	font-family : Georgia, "Times New Roman", Times, serif;
	font-size : 14px;
	margin-left : 0px;
	margin-top : 0px;
	text-decoration: none;
	font-weight: normal;
	text-align: center;
 }
 a.ankor:hover {
	color : #FF0000;
	font-family : Georgia, "Times New Roman", Times, serif;
	font-size : 14px;
	margin-left : 0px;
	margin-top : 0px;
	text-decoration: underline;
	font-weight: normal;
	text-align: center;
 }