HTML-верх
Код:
<style type="text/css">
#pun-announcement h2 {display: none}
#pun-announcement .container {padding-top: 1em}
</style>
<style type="text/css">
/*
Стили для слидриона
*/
#slidorion {
width: 768px; /* Установим ширину контейнера. Равна сумме ширины #slider и #accordion */
height: 500px; /* Установим высоту контейнера. Равна высоте #slider и #accordion */
position: relative;
left: 50%;
margin-left: -384px;
padding: 10px;
background: #b7b78f;
border: 0px solid #9d9d6c;
}
#slider {
width: 488px; /* ширина контейнера с картинками */
height: 500px; /* Установим его высоту*/
position: relative;
float: left;
overflow: hidden; /* Скроем прокрутку */
}
.slider-image {
position: relative;
}
.slider-image img {
width: 488px; /* Ширина картинки*/
height: 500px; /* Высота картинки */
position: absolute;
}
#accordion {
width: 280px; /* Ширина контейнера с описателем*/
height: 500px; /* высота */
font-family: Verdana;
background: #f8f8d2;
-webkit-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
-moz-box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
position: relative;
z-index:999;
float: left;
}
#accordion .header { /* заголовок описания. Сложный стиль */
height: 36px;
color: #333;
background: #eeeed7;
/* градиентная заливка с css*/
background: -moz-linear-gradient(top, #f8f8d2 59%, #e8e6ca 100%);
background: -webkit-linear-gradient(top, #d7d7b4 59%,#e8e6ca 100%);
background: -o-linear-gradient(top, #d7d7b4 59%,#e8e6ca 100%);
background: -ms-linear-gradient(top, #d7d7b4 59%,#e8e6ca 100%);
background: linear-gradient(top, #d7d7b4 59%,#e8e6ca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7b4', endColorstr='#dcdcdc',GradientType=0 );
/* градиентная заливка с css - конец */
border: none;
border-top: 1px solid #c5cc00;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#accordion .header a { /* стиль ссылки внутри заголовка */
background: none;
padding: 8px 14px;
text-decoration: none;
font-weight: bold;
font-size: 12px;
display: block;
}
#accordion .header a:hover { /* стиль ссылки внутри заголовка при наведении */
background: #d7d7b4;
cursor: pointer;
}
#accordion .header a.active { /* стиль активной ссылки внутри заголовка */
border-bottom: none;
background-color: #9b965f !important;
color: #fff;
}
#accordion .content {
height: 257px; /* Эту высоту нужно менять, поскольку она зависит от высоты контейнера с описанием и числа вкладок */
font-weight: bold;
font-size: 12px;
margin: 0;
padding: 16px;
border: none;
background: #fdfddb;
background: -moz-linear-gradient(top, #a7a77a 0%, #e3e3bb 10%);
background: -webkit-linear-gradient(top, #a7a77a 0%,#e3e3bb 10%);
background: -o-linear-gradient(top, #a7a77a 0%,#e3e3bb 10%);
background: -ms-linear-gradient(top, #a7a77a 0%,#e3e3bb 10%);
background: linear-gradient(top, #a7a77a 0%,#e3e3bb 10%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7a77a', endColorstr='#e3e3bb',GradientType=0 );
</style>
