/* @group common */

#panel-preview,
#panel-preview div.inner,
#framing-preview,
#printing-preview,
#style-preview,
#style-preview div.inner {
	height:343px;
}

/* @group panel preview */
#panel-preview {
	background-color:#000;
}

/* @group framign preview */

#framing-preview {
	background: transparent url(../img/framing-preview-bg.jpg) no-repeat;
	padding:0;
}

#framing-preview .frame,
#framing-preview .frame .style {
	height:343px;
	background-repeat:no-repeat;
	background-color:transparent;
}

#framing-preview .frame {
	background-image:url(../files/frames/7.png);
}

#framing-preview .frame .style {
	background-image:url(../files/styles/1/1.jpg);
	background-position:-113px 115px;
}

/* @group printing preview */

#printing-preview {
	position:relative;
	background:transparent url(../img/printing-preview-bg.jpg) no-repeat;
}

#printing-preview .overlay {
	position:absolute;
	background:#c04283;
	width:138px;
	height:206px;
	top:61px;
	right:133px;
}

/* @group style preview */
#style-preview {
	background:#000;
	position:relative;
}

#style-preview .overlay,
#framing-preview .overlay {
	position:absolute;
	width:310px;
	color:#fff;
	background:transparent url(../img/style-preview-overlay-bg.png);
	padding:6px 15px 4px;
	z-index:800;
}

#style-preview .overlay a.view-details,
#framing-preview .overlay a.view-details {
	float:left;
}

#style-preview .overlay ul {
	float:right;
	margin:0;
	list-style: none;
}

#style-preview .overlay li {
	display:inline;
	font-weight:bold;
	background:#4e4d4d;
	border:1px solid #343433;
	margin:0;
	padding:0 6px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}

#style-preview .overlay li.current {
	background:#333332;
	border-color:#1f1f1f;
}