/*

.albumitem {
	display: block; 
	float: left; 
	text-align: left;
	margin-bottom: 10px;
	width: 560px; 
	background: #fff;
}

.topitem {
	margin-top: 10px;
}

.albumitem p {
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.albumchoice {font-size: 9pt; padding-left: 20px; margin-bottom: 10px;}
.albumchoice label {padding-right: 0.5em; }
.albumchoice a { font-size: 8pt; padding-right: 30px; float: right;}

.albumitemtitle { 
	display: block; 
	float: left; 
	text-align: left; 
	color: #fff; 
	padding-left: 10px; 
	width: 550px;
	margin-bottom: 10px;
	
	background-color: #656565;
}
.albumitemtitle  h2{
	line-height: 30px; 
	font-weight: bold; 
	font-size: 10pt;
	margin: 0px;
	padding-bottom: 0px;
	color: #fff;
}

.albumitemtitle p {
	padding-bottom: 5px; 
	margin: 0px;
	color: #fff;
}

#sbWrapper {
	width: 220px;
	padding-left: 8px;
	float: right;
}

#summaryblock {
	display: block; 
	text-align: left;
	width: 220px;
	float: right;
	margin-top: 10px;
}

#summaryblock.fixed {
  	position: fixed;
  	top: 0px;
}

#summary {
	display: block; 
	float: left; 
	text-align: left;
	margin-bottom: 10px;
	width: 220px; 
	background: #fff;
}

#summary p {
	text-align: center;
}

#summary h2 { 
	display: block; 
	float: left; 
	text-align: left; 
	color: #fff;  
	width: 200px;
	height: 30px;
	line-height: 30px; 
	font-weight: bold; 
	font-size: 10pt;
	padding: 0px 10px 0px 10px;
	margin: 0px;
	margin-bottom: 10px;
	background-color: #dfa036;
}

#spec {
	display: block; 
	float: left; 
	text-align: left;
	margin-bottom: 10px;
	width: 220px;
	background: #fff;
}

#spec p {
	display: block;
	float: left;
	text-align: left;
	padding-left: 10px;
	margin-top: 10px;
}

#spec h2 { 
	display: block; 
	float: left; 
	text-align: left; 
	color: #FFFFFF; 
	width: 200px;
	height: 30px;
	line-height: 30px; 
	font-weight: bold; 
	font-size: 10pt;
	padding: 0px 10px 0px 10px;
	margin: 0px;
	background-color: #656565;
}

#collection_set {
	display: block;
	float: left;
	margin-top: 20px;
	padding-left: 35px;
	padding-right: 35px;
	margin-bottom: 20px;
	width: 700px;
}

#collection_set a:hover {
	background-color: #EFEFEF;
}

.collection {
	display: block;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
	width: 260px;
	height: 250px;
	box-shadow: 3px 3px 5px #aaaaaa;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	color: black;
}

.collection h2 {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 1.2em;
}

.collection img {
	width: 200px;
	height: 133px;
	padding-left: 30px;
}

*/

/* the overlayed element */
.overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	background: white;
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:800px;		
	
	/* some padding to layout nested elements nicely  */
	padding:15px;

	/* a little styling */	
	font-size:11px;
	
	-webkit-box-shadow: 0px 0px 15px #555;
	-moz-box-shadow: 0px 0px 15px #555;
	box-shadow: 0px 0px 15px #555;
}

/* default close button positioned on upper right corner */
.overlay .close {
	background-image:url(../images/overlay/close.png);
	position:absolute; right:-15px; top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

.spinner {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -50px; /* half width of the spinner gif */
	margin-top: -50px; /* half height of the spinner gif */
	text-align:center;
	z-index:1234;
	overflow: none;
	width: 100px; /* width of the spinner gif */
	height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

.spinner-fixed {
	position: absolute;
	top: 480px;
	left: 50%;
	margin-left: -16px; /* half width of the spinner gif */
	margin-top: -16px; /* half height of the spinner gif */
	text-align:center;
	z-index:1234;
	overflow: none;
	width: 32px; /* width of the spinner gif */
	height: 34px; /*hight of the spinner gif +2px to fix IE8 issue */
}



/* Wizard Styles */


/* scrollable root element */
#guide {	
	background:#fff;
	border:5px solid gray;
	font-size:12px;
	height:520px;
	margin: 0px auto;	
	width:720px;
	overflow:hidden;
	position:relative;
	
	/* rounded corners for modern browsers */
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}  

/* scrollable items */
#guide .items {
	width:20000em;	
	clear:both;	
	position:absolute;	
}

/* single item */
#guide .page {	
	padding:20px 30px;
	width:650px;
	float:left;	
}

#guide .page-content {	
	height:425px;
	float:left;	
}

/* title */
#guide h2 {
	border-bottom:1px dotted #ccc;
	font-size:22px;
	font-weight:normal;
	margin:2px 0 0 0;
	padding: 0px 0px 15px 0px;		
}

#guide h2 em {
	display:block;
	font-size:14px;
	color:#666;
	font-style:normal;
	margin-top:5px;
	width: 650px;
}

#guide p {
	font-size: 14px;
}

#guide .clearfix {
	clear:left;
	padding-top:10px;	
}

#guide .right {
	float:right;		
}

/* validation error message bar */
#error-message {
	position:absolute;
	display: block;	
	left:0;
	top:470px;
	padding: 5px;
	text-align:center;
	font-size:18px;
	width: 360px;
	margin-left: 180px;
	display:none;
	z-index:2;
	color: red;
}

#guide .error {
	border:1px solid red;		
}

#guide #status {
	margin:0px !important;
	height:35px;
	background:#444041 ;
	padding-left:20px !important;
}

#status li {
	list-style-type:none;
	list-style-image:none;
	float:left;
	color:#fff;
	padding:10px 20px;
}

#status li.active {
	background-color:#dfa036;
	font-weight:normal;
	color:#fff;		
}

#status li.active:hover {
	background-color:#dfa036;
	font-weight:normal;	
	color:#fff;	
}

#status a {
	text-decoration: none;
	color:#fff;
}

#status li:hover {
	background-color: gray;
	text-decoration: none;
	color:#fff;
}

/* root element for scrollable */
.vertical {  
	
	/* required settings */
	position:relative;
	overflow:hidden;	

	/* vertical scrollers have typically larger height than width */	
	height: 222px;	 
	width: 650px;
	
	border-top:1px solid #ddd;	
}

.verticalone {  
	
	/* required settings */
	position:relative;
	overflow:hidden;	

	/* vertical scrollers have typically larger height than width */	
	height: 111px;	 
	width: 650px;
	
	border-top:1px solid #ddd;	
}

/* root element for scrollable items */
.scrollable_items {	
	position:absolute;
	
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
}

/* single scrollable item */
.scrollable_item {
	display: block;
	border-bottom:1px solid #ddd;
	margin:0px 0;
	padding:15px;
	font-size:12px;
	height:80px;
	text-decoration: none;
	color: #000;
	width: 620px;
}

.scrollable_items a{
	text-decoration: none;
}

.highlight_hover a:hover {
	background-color: #f5f5f5;
}


.selected {
	background: #f9f9f9 url('../icons/32x32/accept.png') 600px 8px no-repeat;
}

/* elements inside single item */
.scrollable_item img {
	float:left;
	margin-right:20px;
	height:80px;
	width:120px;
}

.scrollable_item h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#456;
	font-weight:normal;
}

/* scrollable_items for items that you have to select... */

.scrollable_item_select {
	float: right;
	margin-left: 2px;
	padding-top: 49px;
	height: 15px;
	color:#456;
	background: url('../icons/32x32/add.png') 4px 15px no-repeat;
	width: 40px;
	text-align: center;
}

.scrollable_item_deselect {
	float: right;
	margin-left: 2px;
	padding-top: 49px;
	height: 15px;
	color:#456;
	background: url('../icons/32x32/subtract.png') 4px 15px no-repeat;
	width: 40px;
	text-align: center;
}

.scrollable_item_placehold {
	float: right;
	margin-left: 2px;
	padding-top: 49px;
	height: 15px;
	color:#456;
	width: 40px;
	text-align: center;
}


/* the action buttons above the scrollable */
#actions {
	width:650px;
	margin-bottom: 10px;	
}

.pad {
	margin-top: 20px;
}

#actions a {
	font-size:12px;		
	cursor:pointer;
	color:#666;
}

#actions a:hover {
	text-decoration:underline;
	color:#000;
}

.disabled {
	visibility:hidden;		
}

.next {
	float:right;
}

/* outermost element for the scroller (stays still) */
#scrollwrap {
	position:relative;
	overflow:hidden;
	width: 650px;	
	height:260px;
	margin-bottom:10px;
}

/* the element that moves forward/backward */
#scroll { 	
	position:relative;
	padding:5px 25px 5px 25px;
	height:250px;
	color:#000;
} 

.slider { 
	background:#444041 ; 
		height:9px; 
		position:relative; 
		cursor:pointer;
		border:1px solid #333;
		width:650px;
		float:left; 
		clear:right;
		margin-top:10px;
		-moz-border-radius:5px; 
		-webkit-border-radius:5px; 
		border-radius:5px;
		-moz-box-shadow:inset 0 0 8px #000;
		box-shadow:inset 0 0 8px #000;
}

.progress {
	background-color:#dfa036;
	height:9px;
	position:absolute;
	width:0;
}

.handle { 
	background:#fff ; 
		height:28px;
		width:28px;
		top:-12px;
		position:absolute; 
		display:block; 
		margin-top:1px;
		border:1px solid #000;
		cursor:move;
		-moz-box-shadow:0 0 6px #000;
		-webkit-box-shadow:0 0 6px #000;
		box-shadow:0 0 6px #000;
		-moz-border-radius:14px;
		-webkit-border-radius:14px;
		border-radius:14px;
}

.handle:active {
	background:gray;		
}

#sizes .range {
	display:none;
}

#albumpages {
	display: block;
	float: left;
}

#albumpages h5 {
	margin: 0px;
	padding: 30px 0px 35px 0px;
	font-size: 18px;
	font-weight: normal;
	width: 650px;
	color:#666;
	
}

#albumpages p {
	width: 640px;
	padding: 0px 5px 0px 5px;
	font-size: 20px;
	position: absolute;
	top: 170px;
	color:#666;
	
}

/* the input field */
#albumpages .range {
	border:1px inset #ddd;
	float:left;
	font-size:20px;
	margin:15px 0 0 300px;
	padding:3px 0;
	text-align:center;
	width:50px;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px;
	 		
}


.size {
	display: block; 
	float:left;  
	width: 250px; 
	height: 250px; 
	margin: 0px 25px 0px 25px;
}

.size a:hover {
	background-color: #666;
}

.size a {
	display: block;
	border: 1px solid #333;
	margin-left: auto;
	margin-right: auto;
	background:#444;
	text-align: center;
	-webkit-box-shadow: 6px 6px 5px #aaaaaa;
	-moz-box-shadow: 6px 6px 5px #aaaaaa;
	box-shadow: 6px 6px 5px #aaaaaa;
	text-decoration: none;
}

.size h3 {
	font-size:1.5em;
	color: white;
	font-weight: bold;
	margin-bottom: 5px;
	border: none; 
	}
.size h4 {
	font-size:1.3em;
	color: white;
	margin: 10px;
	border: none;
	}
.size h5 {
	font-size:1.2em;
	color: white;
	margin: 5px;
	border: none;
	}
	
#size_label {
	padding: 30px 10px 0px 10px;
	font-size: 1.2em;
}

.size .check {
	background: white url('../icons/32x32/accept.png') no-repeat 3px 4px;
	position:absolute; 
	left:-100px; 
	top:0px;
	cursor:pointer;
	height:40px;
	width:40px;
	z-index: 10;
	display: visible;
	-moz-box-shadow:0 0 6px #000;
	-webkit-box-shadow:0 0 6px #000;
	box-shadow:0 0 6px #000;
	-moz-border-radius:40px;
	-webkit-border-radius:40px;
	border-radius:40px;
}

.input label {
	color: green;
}

.albumprice {
	color: black;
	font-weight: bold;
}

#mats {
	display: block;
	float: left;
	margin-top: 20px;
}

.delta {
	float: right;
	color: black;
	font-weight: bold;
}

.horizontal {

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 568px;
	height:110px;
	
	/* custom decorations */
	border:1px solid #ccc;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.horizontal .horizontal_items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.horizontal_items div {
	float:left;
	padding:15px;
	height:80px;
	width: 538px;
	font-size:12px;
	text-decoration: none;
	color: #000;
}

.horizontal_item {
	display: block;
	margin:0px;
	padding:15px;
	font-size:12px;
	height:80px;
	text-decoration: none;
	color: #000;
	width: 538px;
}

.horizontal_items a {
	text-decoration: none;
}

.horizontal_items img {
	float:left;
	margin-right:20px;
	height:80px;
	width:120px;
}

.horizontal_items h3 {
	margin:0 0 5px 0;
	font-size:16px;
	color:#456;
	font-weight:normal;
}

/* this makes it possible to add next button beside scrollable */
.horizontal {
	float:left;	
}

.horizontal_selected {
	background: #f9f9f9 url('../icons/32x32/accept.png') 518px 8px no-repeat;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.right 				{ background-position: 0 -30px; clear: right; margin-right: 0px;}
a.right:hover 		{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

#cover {
	margin-top: 5px;
	display: block;
}

#duo {
	margin-top: 5px;
	display: block;
}

#spine {
	margin-top: 5px;
	display: block;
}

/* Tooltip stuff */

.aToolTip {
	border:2px solid gray;
	background:white;
	color:#fff;
	margin:0;
	padding:6px 12px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

.aToolTip .aToolTipContent {
	position:relative;
	margin:0;
	padding:0;
	color: gray;
	font-size: 12px;
}

.ToolTips img {
	width: 20px;
	height: 20px;
	float: none;
	padding-left: 3px;
	margin: 0px;
	display: inline;
	vertical-align: middle;
}

.aToolTipContent img{
	display: block;
	width: 150px;
	height: 150px;
	margin-bottom: 5px;
}

.option_text p {
	display: block;
	margin-top: 10px;
	font-size:14px;
	color:#666;
	font-style:normal;
	width: 650px;
	text-align: center;
}

.scrollable_item_add {
	float: right;
	margin-left: 0px;
	padding-top: 49px;
	height: 15px;
	color:#456;
	background: url('../icons/32x32/add.png') 4px 15px no-repeat;
	width: 40px;
	text-align: center;
}

.scrollable_item_sub {
	float: right;
	margin-left: 2px;
	padding-top: 49px;
	height: 15px;
	color:#456;
	background: url('../icons/32x32/subtract.png') 4px 15px no-repeat;
	width: 40px;
	text-align: center;
}

.scrollable_item_qty {
	float: right;
	display: block;
	margin-left: 2px;
	padding-top: 25px;
	height: 39px;
	color:#456;
	font-size: 20px;
	width: 38px;
	text-align: center;
}

#album_price_block {
	display: block;
	float: left;
	text-align: center;
	width: 325px;
	margin-top: 30px;
}

#album_summary_block {
	display: block;
	float: left;
	text-align: left;
	width: 300px;
	padding-left: 25px;
	margin-top: 30px;
}