@charset "utf-8";

/* REDEFINES */
html, body { height: 100%; margin: 0; padding: 0; }
body { color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
p, div, ul, li { margin: 0; padding: 0; line-height: 150%; }
h1 { margin: 0; padding: 0; }
pre { font-weight: normal; color: #FFF; position: absolute; right: 0; top: 0; width: 500px; background: #000; z-index: 101; padding: 10px; margin: 10px; }
h4 { font-size: 150%; color: #999; font-weight: bold; margin: 15px 20px 5px; padding: 5px; border-bottom: 1px solid #BBB; }
h4 b { display: block; }
h4 span { display: block; font-size: 75%; font-weight: normal; }

/* STRUCTURE */
#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFF url(images/logo.jpg) no-repeat center left;
	z-index: 100;
	border-bottom: 1px solid #BBB;
	padding: 25px 150px 10px 150px;
	font-size: 260%;
	cursor: default;
	height: 110px;
}

#wrapper {
	padding-top: 150px;
}

/* HELPER */
.breaker { clear: both; float: none; }
.bold { font-weight: bold; }
.hidden { display: none; }
.footer { margin: 0 0 25px; }



/* HEADER */
#header .total { display: block; margin: 0 0 10px; }
#header .discount { display: block; font-size: 35%; color: #666; text-transform: uppercase; }
#header .rebate { display: block; font-size: 50%; color: #F00; }
#header .rebate:before { content: "- "; }
#header .items_total { display: block; font-size: 35%; font-weight: normal; font-style: italic; }
#header .items_total:after { content: " Items"; }
#header p.menu { font-size: 35%; font-weight: normal; color: #666; margin: 10px 0 0 10px; }
#header p.menu span { margin: 0 5px; cursor: pointer; }
#header p.menu span:hover { color: #999; }
#header p.menu span:before { content: "\BB\20"; }
#header p.menu span.not_enough_items { color: red; }



/* ITEM */
div.item { padding: 10px 1%; width: 15%; height: 125px; cursor: default; margin: 10px 1% 10px; border-bottom: 1px solid #EEE; float: left; }
div.item .artist { font-weight: bold; display: block; }
div.item .title { font-style: italic; text-transform: lowercase; font-size: 90%; }
div.item .title:before { content: "\""; }
div.item .title:after { content: "\""; }
div.item .label { font-style: italic; color: #666; font-size: 85%; }
div.item .label:before { content: "("; }
div.item .label:after { content: ")"; }
div.item .cover { margin: 3px 10px 3px 3px; height: 80px; width: 80px; float: left; border: 1px solid #DDD; }
div.item label { font-weight: bold; padding: 3px; }
div.item label:after { content: " items"; }
div.item p.soldout { font-weight: bold; color: red; text-transform: uppercase; margin: 5px 0; }



/* SLIDER */
.slider { border: 1px solid #DDD; margin: 10px 16px 10px 106px; background: #FFF; cursor: pointer; display: block; }
.slider:hover { border: 1px solid #898989; }
.slider .ui-slider-handle { background: #FFF; border: 1px solid #DDD; cursor: pointer; }
.slider .ui-slider-handle:hover { border: 1px solid #898989; }
.slider .ui-slider-range { background: #666; }
a.plus, a.minus { cursor: pointer; }



/* CONTACT FORM */
#contactform { padding: 155px 1% 20px; }
#contactform p { display: table-row; padding: 5px; }
#contactform p input { display: table-cell; font-size: 125%; color: #999; border: 1px solid #999; margin: 5px; padding: 5px; width: auto; }
#contactform p label { display: table-cell; font-size: 125%; margin: 5px; padding: 5px; font-weight: bold; color: #777; }
#contactform .agb { font-size: 80%; display: block; width: 25%; margin: 10px; }
#contactform .small { width: auto; }
#contactform .submit {  }