@charset "utf-8";
@import url("http://fonts.googleapis.com/css?family=Istok+Web:400,700");
@import url("http://fonts.googleapis.com/css?family=Oswald");
@import url("reset.css");
@import url("grid.css");

/* COLORS -------------
Red				#A11E22
Black			#050505
Gray			#666666
Light Gray		#999999
Dark Gray		#323232
White			#FFFFFF
---------------------*/

/** BODY **/
body {
	background-color: #121212;
	background-image: url(../img/background.png);
	color: #E0E0E0;
	font-family: "Istok Web", Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
}

/** LINKS **/
a {
	color: #999999;
	text-transform: none;
	text-decoration:  none;
}

a:hover {
	color: #FFFFFF;
}

/** HEADLINES **/
h2 {
	border-bottom: 1px solid #A11E22;
	padding: 3px 0;
	font-size: 13px;
	text-transform:  uppercase;
	font-family: "Oswald", Arial Black, Helvetica;
	font-weight: normal;
}

/** HORIZONTAL RULE **/
hr {
	height: 1px;
	border: none;
	background-color: rgba(0, 0, 0, 0.15);
	margin: 20px 0;
}

/** OVERALL WRAPPER **/
div#overallWrapper {
	width: 980px;
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/** HEADER **/
header {
	background-color: #323232;
	background-image: url(../img/header_jwb1.jpg);
	background-position: top center;
	padding: 20px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

header img {
	margin: 0 auto;
	display: block;
}


/** NAVIGATION **/
nav {
	font-size: 12px;
	background-color: #A11E22;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.25)), color-stop(100%, rgba(255, 255, 255, 0)));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.25) 0%,rgba(255, 255, 255, 0) 100%);
	border-top: 1px solid rgba(0, 0, 0, 0.02);
	color: #FFFFFF;
	font-family: "Oswald", "Istok Web", Arial;
	height: 40px;
}
nav ul {
	padding: 0 20px;
}
nav ul li {
	float: left;
	margin: 0 0;
}
nav ul li a {
	margin: 10px 5px;
	height: 20px;
	line-height: 20px;
	display: block;
	padding: 0 10px;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	text-transform: uppercase;
}
nav ul li a:hover {
}

nav ul li a.active {
	color: #FFFFFF;
}

/** CONTENT **/
div#content {
	clear: both;
	float: none;
	padding: 20px 10px;
	background-color: #191919;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
	margin: 0;
}

/** FOOTER **/
footer {
	margin: 0 0 10px;
	padding: 15px 20px;
	background-color: #171717;
	border-top: 1px solid #1F1F1F;
	color: #323232;
	text-align: right;
}
	
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/
/***********************************************************************/

/** BLOG **/
section.blog {
	margin: 0 0 30px;
}

section.blog h2 {
	border-bottom: 1px solid #A11E22;
	padding: 3px 0;
	font-size: 13px;
}

section.blog p.datetime {
	color: #999999;
	font-size: 11px;
	margin: 2px 0;
}

section.blog div.content {
	padding: 0;
	text-align:  justify;
}

/** PAGES **/
article#pages-content {
	text-align:  justify;
}

/** RELEASES **/
article.release {
	height: 290px;
}

article.release img.cover {
	width: 210px;
	height: auto !important;
	height: 210px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

article.release h2 {
	border: none;
}

article.release h2 span.artist {
	display: block;
	color: #FFFFFF;
}

article.release h2 span.title {
	font-weight: normal;
	text-transform: none;
	color: #999999;
	font-size: 11px;
}

article.release h2 span.format {
	font-weight: normal;
	color: #444444;
	text-transform: none;
}

/** LATEST RELEASES **/
a.latest-release {
	margin: 0 0 10px;
	display: block;
}
a.latest-release img.cover {
	width: 210px;
	height: auto !important;
	height: 210px;
	margin: 10px 4px 5px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
a.latest-release p.artist {
	margin: 0;
	text-align:  center;
}
a.latest-release p.title {
	margin: 0;
	text-align:  center;
	text-transform:  none;
	color: #FFFFFF;
}
a.latest-release p.title:before { content: "\""; }
a.latest-release p.title:after { content: "\""; }
a.latest-release:hover {
	color: #999999;
}

/** RELEASE DETAIL **/
div.release-detail {
	
}
div.release-detail img.cover {
	width: 290px;
	height: auto !important;
	height: 290px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

div.release-detail article h2 span.cgn {
	color: #444444;
	font-weight: normal;
	font-size: 10px;
	float: right;
}

div.release-detail article h2 span.artist {
	color: #FFFFFF;
}

div.release-detail article h2 span.title {
	font-weight: normal;
	text-transform: none;
	color: #999999;
	font-size: 11px;
	margin: 0 10px;
}

div.release-detail article h2 span.title:before { content: "\""; }
div.release-detail article h2 span.title:after { content: "\""; }

div.release-detail article h2 span.format {
	font-weight: normal;
	color: #444444;
	text-transform: none;
}

div.release-detail article section.description {
	margin: 20px 0;
	text-align:  justify;
}

div.release-detail a.open_pressinginfo img, div.release-detail a.open_releasedownload img, div.release-detail a.open_mp3s img {
	width: 20px;
	height: 20px;
	margin: 0 5px;
}
div.release-detail a.open_releasedownload_free img {
	width: 48px;
	height: 48px;
	margin: 0 5px;
}

div.release-detail div.soundcloud {
	margin: 20px 5px 5px;
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 1);
}

/** PRESSING INFO **/
div.modal img.pressinginfo-img {
	width: 450px;
	height: auto;
	margin: 5px 5px 15px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/** MP3 DOWNLOAD **/
ul.mp3list { }

ul.mp3list li {
	background-image: url(../img/music_icon_s.png);
	background-position:  center left;
	background-repeat: no-repeat;
	height: 20px;
	line-height: 20px;
	padding: 0 0 0 25px;
	margin: 0 0 5px;
}

/** SHOP **/
article.row.shop-article {
	margin-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.1);
	padding-bottom: 10px;
}
article.shop-article img.cover {
	width: 210px;
	height: auto !important;
	height: 210px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

article.shop-article h2 {
	margin: 0;
}
article.shop-article h2 span.cgn {
	color: #444444;
	font-weight: normal;
	font-size: 10px;
	float: right;
	padding: 0 5px;
}

article.shop-article h2 span.artist {
	color: #FFFFFF;
}

article.shop-article h2 span.title {
	font-weight: normal;
	text-transform: none;
	color: #999999;
	font-size: 11px;
	margin: 0 10px;
}

article.shop-article h2 span.title:before { content: "\""; }
article.shop-article h2 span.title:after { content: "\""; }

article.shop-article h2 span.format {
	font-weight: normal;
	color: #444444;
	text-transform: none;
}

article.shop-article div.content {
	text-align: justify;
	margin: 0 10px 10px 0;
}

/** SHOP - SUB ARTICLE **/
article.row.shop-article.sub-article {
	margin-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.1);
	padding-bottom: 10px;
}
article.shop-article.sub-article img.cover {
	width: 50px;
	height: auto !important;
	height: 50px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/** SHOP - SMALL ARTICLE **/
article.shop-article-small {
	margin-bottom: 20px;
	background-color: rgba(0, 0, 0, 0.1);
}

article.shop-article-small img.cover {
	width: 130px;
	height: auto !important;
	height: 130px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

article.shop-article-small h2 {
	margin: 5px 10px 5px 0;
	font-size: 10px;
}
article.shop-article-small h2 span.cgn {
	color: #444444;
	font-weight: normal;
	font-size: 10px;
	float: right;
}

article.shop-article-small h2 span.artist {
	color: #FFFFFF;
	display: block;
}

article.shop-article-small h2 span.title {
	font-weight: normal;
	text-transform: none;
	color: #999999;
	font-size: 11px;
}

/** SHOP FORM **/
form.pre-shop {
	
}

form.pre-shop input[type='submit'] {
	display: none;
}

/** SIDE CART **/
ul.cart {
	
}

ul.cart li {
	padding: 3px;
	background-color: rgba(0, 0, 0, 0.1);
}

ul.cart li.cart-item {
	margin: 5px 0;
}

ul.cart li.cart-item span.artist {
	font-weight: bold;
	display: block;
}

ul.cart li.cart-item span.title {
	font-size: 10px;
	color: #999999;
	display: block;
}
ul.cart li.cart-item span.title:before, ul.cart li span.title:after { content: "\""; } 
ul.cart li.cart-item span.format {
	font-size: 10px;
	font-weight: bold;
}

ul.cart li.cart-item span.sub {
	color: #999999;
	font-size: 10px;
}
ul.cart li.cart-item span.sub:before { content: " | "; }

ul.cart li.cart-item span.price {
	display: block;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

ul.cart li.cart-item a.delete-from-cart {
	float: right;
	padding: 0 3px;
}

ul.cart li.total {
	border-top: 1px solid #A11E22;
	padding-top: 5px;
}

ul.cart li.shipping {
	margin: 0 0 5px;
}

ul.cart li.cart {
	text-align: center;
	color: #999999;
}

/** FULL CART **/
div.cart-article {
	padding-bottom: 5px;
}

div.cart-article img.cover {
	width: 50px;
	height: auto !important;
	height: 50px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

div.cart-article div.details {
	line-height:  60px;
}

div.cart-article div.details span.cgn {
	color: #444444;
	font-weight: normal;
	font-size: 12px;
	display: block;
}

div.cart-article div.details span.artist {
	color: #FFFFFF;
}

div.cart-article div.details span.title {
	font-weight: normal;
	text-transform: none;
	color: #999999;
	font-size: 11px;
}
div.cart-article div.details span.title:before, div.cart-article div.details span.title:after { content: "\""; }

div.cart-article div.details span.format {
	font-weight: bold;
}

div.cart-article div.details span.sub {
	color: #999999;
}
div.cart-article div.details span.sub:before { content: " - "; }

div.cart-article a.delete-from-cart {
	text-align: center;
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	margin: 0 5px;
	display: inline-block;
	height: 20px;
	line-height: 20px;
	width: 20px;
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
}

div.cart-article a.delete-from-cart:hover {
	background-color: rgba(0, 0, 0, 0.25);
}

div.cart-article span.price {
	line-height: 60px;
	height: 60px;
	text-align:  right;
	display: block;
	letter-spacing: 1px;
	padding: 0 5px;
}

div.cart-shipping {
	line-height: 40px;
	height: 40px;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 0;
}
div.cart-shipping span.price {
	line-height: 40px;
	height: 40px;
}

div.cart-total {
	border-top: 1px solid #A11E22;
	background-color: rgba(0, 0, 0, 0.1);
	line-height: 30px;
	height: 30px;
	font-weight: bold;
	padding: 0;
}

div.cart-total span.price {
	line-height:  30px;
	height: 30px;
}

div.row#no-shipping div.inner {
	margin: 7px;
	padding: 5px;
	color: #FFF;
	font-weight: bold;
	background-color: #A11E22;
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/** CHECKOUT FORM **/
form#checkoutForm {

}

form#checkoutForm div.input {
	display: block;
}

form#checkoutForm div.input label {
	display: block;
}

form#checkoutForm div.input input[type='text'] {
	
}

form#checkoutForm div.row div.row {
	line-height: 30px;
	height: 35px;
}

form#checkoutForm div.row div.dummy-input, form#checkoutForm div.row input[type='text'] {
	width: 280px;
	height: 20px;
	line-height: 20px;
	padding: 5px 10px;
	border: none;
	border-radius: 3px;
	background-color: #FFFFFF;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0)));
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

form#checkoutForm div.row div.dummy-input {
	color: #999999;
	line-height: 22px;
	cursor: default;
}

form#checkoutForm label[for='notes'] {
	display: block;
	height: 35px;
	line-height: 30px;
}

form#checkoutForm textarea {
	font-family: "Istok Web";
	width: 280px;
	height: 115px;
	padding: 10px;
	border: none;
	border-radius: 3px;
	background-color: #FFFFFF;
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.2)), color-stop(100%, rgba(0, 0, 0, 0)));
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	background-image: linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

form#checkoutForm p {
	height: 30px;
	line-height:  30px;
	text-align:  right;
}

div.checkoutCount {
	text-align:  center;
	font-size: 20px;
	line-height: 50px;
	height: 50px;
	width: 50px;
	border-radius: 25px;
	margin: 0 auto 5px;
	background-color: #A11E22;
	font-family: "Oswald", "Istok Web", Arial;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
	text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.25);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.15)), color-stop(100%, rgba(255, 255, 255, 0)));
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%,rgba(255, 255, 255, 0) 100%);
	background-image: linear-gradient(top, rgba(255, 255, 255, 0.15) 0%,rgba(255, 255, 255, 0) 100%);
	cursor: default;
}

/** HERO **/
div#hero {
	margin-bottom: 20px;
}

div#hero img {
	width: 690px;
	height: auto !important;
	height: 690px;
	margin: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 1);
}

/** MODAL **/
div.modal {
	box-shadow: 0 0 10px rgba(0, 0, 0, 1);
	background-color: #191919;
	border-radius: 15px;
	width: 500px;
	position:  absolute;
	left: 50%;
	top: 15%;
	margin-left: -250px;
	z-index: 999;
}

div.modal header {
	background-image: none;
	border-radius: 15px 15px 0 0;
	background-color: #151515;
	border-bottom: 1px solid #1F1F1F;
	box-shadow: none;
	font-family: "Oswald", "Istok Web", Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
div.modal a.modal-close-link {
	float: right;
	margin: 20px;
	font-weight:  bold;
}
div.modal div.content {
	padding: 20px;
}

/** FORM **/
input[type='text'] {
	padding: 5px 10px;
	border: none;
	border-radius: 3px;
	background-color: #FFFFFF;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

input[type='button'], input[type='submit'] {
	padding: 5px 15px;
	border: none;
	border-radius: 3px;
	background-color: #A11E22;
	color: #FFFFFF;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25) 0%,rgba(255, 255, 255, 0) 100%);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
	cursor: pointer;
}
input[type='button']:hover, input[type='submit']:hover {
	background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.15) 0%,rgba(255, 255, 255, 0) 100%);
}
input[type='button']:active, input[type='submit']:active {
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%,rgba(0, 0, 0, 0) 100%);
}
select {
	padding: 4px 5px;
	border: none;
	border-radius: 3px;
	background-color: #FFFFFF;
	background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%,rgba(0, 0, 0, 0) 100%);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
}

/** LOADER **/
img#loader { display: none; }

/** ERROR NOTICE **/
div.error-notice {
	background-color: #A11E22;
	color: #FFF;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
	margin: 0 0 10px;
	padding: 5px;
}

/** HELPER **/
.clearfix { clear: both; float: none; }
.underline { text-decoration: underline; }

/*
 * 
 *	LIGHTBOX 
 * 
 */
div.lightbox {
	width: 500px;
	height: auto;
	position: absolute;
	z-index: 999;
	top: 100px;
	left: 50%;
	margin-left: -250px;
	border-radius: 10px;
	background: #333333;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	display: none;
}
div.lightbox img {
	margin: 10px;
	width: 480px;
	height: auto;
	cursor: pointer;
}
