.horizontal
, .horizontal ul
{
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
.horizontal:after
, .horizontal ul:after
{
	content: '';
	display: block;
	clear: left;
}
.horizontal li
{
	float: left;
	margin: 0 1em 0.5em 0;
	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;
}
.framed .c
{
	position: relative;
	z-index: 2;
	display: block;
	margin: 0 0 -10px 0;
	/* Отступы от границ кнопки. Нижний больше на 2px, которые занимает тень. */
	padding: 2px 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('/i/framed.png') 0 0 no-repeat;
	/* IE 7 уже умеет показывать png, поэтому используем хак, который он не понимает. */
	-background-image: none;
	-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=framed.png,sizingMethod=crop);
}
.framed .t *
{
	margin-top: -10px;
}
.framed .l *
{
	//width: 100%;
	margin-left: -11px;
}

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