@charset "utf-8";
/*  

	TUBE's TOP HitRing CSS Document 
		
		
*/

.horizontal
, .horizontal ul
{
list-style-type: none;
width: 100%;
margin: -3px 0 0 0;
padding: 0;
}
.horizontal:after
, .horizontal ul:after
{
content: '';
display: block;
clear: left;
}
.horizontal li
{
float: left;

padding: 0;
}
/*****************************/

/* Чтобы исправить поведение курсора и hover в IE. */
.framed a
{
cursor: pointer;
//cursor: hand;
}
.framed a:hover
{
background-color: transparent;
}

/* Для компенсации отрицательного значения margin-bottom в IE. */
.framed.horizontal
{
//padding-bottom: 10px;
}

.framed .f
{
position: relative;
z-index: 1;
display: block;
float: left;
min-height: 10px;
//height: 10px;
color: #000000;
text-decoration:none;
}
.framed .c
{
position: relative;
z-index: 2;
display: block;
margin: 0px 0 -10px 0;
/* Отступы от границ кнопки. Нижний больше на 2px, которые занимает тень. */
padding: 4px 15px 4px 15px;
}
.framed .t
, .framed .b
{
position: absolute;
z-index: 1;
top: 0;
//top: auto;
bottom: 0;
left: 0;
right: 11px;
overflow: hidden;
//width: 100%;
//height: 100%;
}
.framed .b
{
top: auto;
bottom: -10px;
height: 10px;
}
.framed .r
{
left: auto;
//left: -11px;
right: 0;
//margin-left: 100%;
width: 11px;
}
.framed .t *
, .framed .b *
{
position: absolute;
top: 0;
left: 0;
/* Общие ширина и высота изображения. Можно указать с запасом. */
width: 800px;
height: 400px;
background: url('../images/framed.png') 0 0 no-repeat;
}
.framed .t *
{
margin-top: -10px;
}
.framed .l *
{
//width: 100%;
margin-left: -11px;
}

/* Демонстрируем смену оформления у кнопки. В данном случае на hover. */
.framed a:hover .t *
, .framed a:hover .b *
{
top: -200px;
}