/***************************************************** 

	Design and Code by Humongous One
	Prepared by Scott Arnold
	Last Updated: 12.13.09


	Table Of Contents:
	01. Universal
	02. Layout
	03. Structure


/***************************************************** 
	01. Universal
*****************************************************/

body {
	margin: 0 auto;
	background-color: #000;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font size: 62.5%;	
	text-align: center;
	color: #fff;
	z-index: 1;
}

#header {
	width: 100%;
	height: 37px;
	background-color: #000;
	border-bottom: 2px solid #ccc;
}

.tooltip {
	position: absolute;
	z-index:3;
	display: none;
	color: #000;
	padding: 5px;
	background-color: #cbeee3;
	font:  11px "Lucida Grande", Lucida, Verdana, sans-serif;
	text-transform: uppercase;;
}

/***************************************************** 
	02. Layout
*****************************************************/

#supersize {
			position:fixed;
			z-index: -99;
		}			
		#supersize img {
			height:100%;
			width:100%;
			position:absolute;
		}

#wrapper {
	width: 950px;
	margin: 0 auto;
}

body.records #wrapper {
	margin: 70px auto 0;
}
/***************************************************** 
	03. Navigation
*****************************************************/

#nav {
	width: 950px;
	margin: 0 auto;
}

#homeLinkContainer {
	width: 110px;
	height: 80px;
	background: #000;
	border-bottom: 5px solid #ffff99;
	float: left;
}
 
#homeLink {
	width: 108px;
	height: 61px;
	text-indent: -9999px;
	background-image: url(/_images/6131_Records.jpg);
	display: inline-block;
	margin: 12px auto 0;
}

#menu {
	width: 431px;
	height: 15px;
	margin: 12px 0 0 0;
	float: right;
}

#menu ul#mainNav {
	height: 15px;
	width: 431px;
	background: url(/_images/navigation.jpg) top left no-repeat;
	position: relative;
	text-align: left;		
}

#menu ul#mainNav li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0;
}

ul#mainNav li, ul#mainNav a {
	height: 22px;
	display: block;
	}

#menu ul#mainNav li a{
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
}


#blog {left: 0; width: 38px; border-bottom: 5px solid #a3d39c;}
#records {left: 57px; width: 68px; border-bottom: 5px solid #f9ad81;}
#shop {left: 150px; width: 40px; border-bottom: 5px solid #7accc8;}
#contact {left: 215px; width: 67px; border-bottom: 5px solid #8393ca;}
#messageBoard {left: 306px; width: 125px; border-bottom: 5px solid #f49ac1;}

#blog a:hover {background: transparent url(/_images/navigation.jpg) 0 -15px no-repeat;}
#records a:hover {background: transparent url(/_images/navigation.jpg) -57px -15px no-repeat;}
#shop a:hover {background: transparent url(/_images/navigation.jpg) -150px -15px no-repeat;}
#contact a:hover {background: transparent url(/_images/navigation.jpg) -215px -15px no-repeat;}
#messageBoard a:hover {background: transparent url(/_images/navigation.jpg) -306px -15px no-repeat;}

body.blog #blog {left: 0; width: 38px; border-bottom: 5px solid #fff; background: transparent url(/_images/navigation.jpg) 0 -15px no-repeat;}
body.records #records {left: 57px; width: 68px; border-bottom: 5px solid #fff; background: transparent url(/_images/navigation.jpg) -57px -15px no-repeat;}
body.shop #shop {left: 150px; width: 40px; border-bottom: 5px solid #fff; background: transparent url(/_images/navigation.jpg) -150px -15px no-repeat;}
body.contact #contact {left: 215px; width: 67px; border-bottom: 5px solid #fff; background: transparent url(/_images/navigation.jpg) -215px -15px no-repeat;}
body.messageBoard #messageBoard {left: 306px; width: 125px; border-bottom: 5px solid #fff; background: transparent url(/_images/navigation.jpg) -306px -15px no-repeat;}

/***************************************************** 
	04. Twitter
*****************************************************/

.twitterContainer {
	float: right;
	margin: 27px 80px 0 0;
	width: 664px;
	height: 40px;
	padding: 10px;
	font-size: 0.8em;
	background-image: url(/_images/transBackground.png);
	-moz-border-radius: 10px; -webkit-border-radius: 10px;
}

.twitterBird {
	margin: 9px 7px 0 0;
	float: left;
}

.twitted {
	font-weight: bold;
	font-size: 1.0em;
}

.twitted h2 {
	margin: 0;
	color: #fff;
	background-color: #888;
}

.twitted p.preLoader {
	margin: 10px 0 0 0;
	font-weight: bold;
}

.twitted ul#twitter_update_list {
	margin: 0;
}

.twitted ul#twitter_update_list li {
	margin: 0;
}

.twitted ul#twitter_update_list li span {
	/* tweet content */
	display: block;
	text-align: left;
	line-height: 1.3em;
	margin: 0 0 0 7px;
}

.twitted ul#twitter_update_list li span a {
	/* links in tweet content */
	color: #fff;
	text-decoration: underline;
}

.twitted ul#twitter_update_list li span a:hover {
	/* links in tweet content */
	color: #fff;
	text-decoration: underline;
}

.twitted ul#twitter_update_list li a {
	/* timestamp link */
	display: inline-block;
	margin: 0 0 0 5px;
	color: #9F9F9F;
	float: left;
	text-align: left;
	text-decoration: none;
	font-weight: bold;
}

.twitted ul#twitter_update_list li.firstTweet a {
	margin: 0 5px 0 0;
}

.twitted ul#twitter_update_list li.lastTweet {
	border-bottom: none;
}

.twitted p.profileLink {
	display: block;
	margin: 0;
	padding: 0.3em 1em;
	color: #fff;
}

.twitted ul#twitter_update_list li.firstTweet a {
	display: inline;
}

.twitterContainer {
}

/***************************************************** 
	05. Blog
*****************************************************/


.contactContainer {
	margin: 27px 0 0 0;
	width: 630px;
	float: left;
}

.blogContainer {
	margin: 27px 0 0 0;
	width: 630px;
	float: left;
}

.post {
	font-size: 0.75em;
	float: right;
	width: 530px;
	background-image: url(/_images/transBackground.png);
	margin: 0 0 40px 0;
	padding: 10px 10px 30px 10px;
	text-align: left;
	line-height: 1.6em;
	font-weight: bold;
	color: #fff;
}

.post p {
	margin: 0 0 12px 0;
}

.post a {
	text-decoration: bottom;
}

.post a:link, .post a:visited {
	color: #CBCBCB;
}

.post a:hover {
	color: #fff;
}

.post h3 {
	font-size: 1.4em;
	margin: 0 0 15px 0;
}

.post h3 a:link, .post h3 a:visited {
	margin: 0;
	color: #fff;
	text-decoration: none;
	padding: 0 0 1px 0;
	border-bottom: 1px solid #fff;
}

.post h3 a:hover {
	border-bottom: 1px solid #B0B0B0;
}

.posts {display: inline-block;; width: 625px;}

.postKindDate {float: left; margin: 16px 0 0 0;}

.published {font-size: 0.8em; text-align: center; margin: 10px 0 0 0; font-weight: bold;}

.post.news {border-top: 4px solid #219ad2;}
.post.video {border-top: 4px solid #d25321;}
.post.audio {border-top: 4px solid #fff799;}
.post.tour {border-top: 4px solid #189787;}

.postCategory {float: right; margin: 0 0 14px 0;}

.postCategory.news {width: 20px; height: 20px; text-indent: -9999px; background-image: url(/_images/postIconNews.png);}
.postCategory.video { width: 20px; height: 20px; text-indent: -9999px; background-image: url(/_images/postIconVideo.png);}
.postCategory.audio { width: 20px; height: 20px; text-indent: -9999px; background-image: url(/_images/postIconAudio.png);}
.postCategory.tour { width: 20px; height: 20px; text-indent: -9999px; background-image: url(/_images/postIconTour.png);}

object.flashvideo {
	width: 100%;
	height:350px;
	margin: 0 0 10px 0;
}
/***************************************************** 
	06. Sidebar
*****************************************************/

.sidebar {
	margin: 27px 0 0 0;
	float: right;
	width: 270px;
}

#upcomingReleases {
	border-top: 4px solid #7accc8;
	background-image: url(/_images/transBackground.png);
	text-align: left; 
	margin: 0 0 27px 0;
}

	#upcomingReleases img {
		width: 134px;	height: 134px;
		max-width: 134px; max-height: 134px;
		display: block;
	}
	
	.upcomingReleases1 {
		float: left;
	}
	
	.upcomingReleases2 {
		float: right;
	}
	
	#upcomingReleases .number {
		float: left;
		position: absolute;
		font-size: 0.7em;
		font-weight: bold;
		padding: 4px 5px;
		background-color: #000;
	}
	
	#upcomingReleases ol {
		list-style-type: decimal;
		list-style-position: inside;
		font-size: 0.7em;
		font-weight: bold;
		margin: 0 0 0 11px;
		padding: 0 0 30px 0;
	}
	
	#upcomingReleases ol li {
		margin: 15px 0 -8px 0;
		line-height: 1.5em;
	}
	
	#upcomingReleases ol li .format {
		margin: 0 0 0 16px;
	}
	
	h3 {
		margin: 0 0 0 11px;	
	}

	.releaseInfo {
		position: relative;
		margin: 145px 0 0 0;
	}
	
#catalogReleases {
	border-top: 4px solid #7accc8;
	background-image: url(/_images/transBackground.png);
	text-align: left; 
	margin: 0 0 15px 0;
}

	.catalogReleasesL {
		float: left;
		padding: 0;
	}
	
	.catalogReleasesM {
		float: left;
		padding: 0 0 0 3px;
	}
	
	.catalogReleasesR {
		float: right;
		padding: 0;
	}
	

	#catalogReleases img {
		width: 88px;	height: 88px;
		max-width: 88px; max-height: 88px;
		display: block;
		float: left;
		margin: 0 0 3px 0;
	}
	
	#catalogReleases .number {
		float: left;
		position: absolute;
		font-size: 0.7em;
		font-weight: bold;
		padding: 4px 5px;
		background-color: #000;
	}
	
	#catalogReleases ol {
		list-style-type: decimal;
		list-style-position: inside;
		font-size: 0.7em;
		font-weight: bold;
		margin: 0 0 0 11px;
		padding: 0 0 30px 0;
	}
	
	#catalogReleases ol li {
		margin: 15px 0 -8px 0;
		line-height: 1.5em;
	}
	
	#catalogReleases ol li .format {
		margin: 0 0 0 16px;
	}

	#catalogReleases .releaseInfo {
		position: relative;
		margin: 193px 0 0 0;
	}
	
#mailingList {
	border-top: 4px solid #187597;
	background-image: url(/_images/transBackground.png);
	text-align: left; 
	margin: 0 0 27px 0;
}	

#mailingList h3 {
	text-align: center;
	margin: 15px 0 10px;
}

#mailingList form {
	text-align: center;
	margin: 0 auto;
}

#mailingList .option {
	float: left;
	font-size: 0.7em;
	font-weight: bold;
}

#mailingList #options {
	text-align: center;
	margin: 7px auto 15px;
}

/***************************************************** 
	07. Footer
*****************************************************/

#footerWrapper {
	clear: both;
	width: 100%;
	background-color: #000;
	height: 240px;
}

#footer {
	margin: 0 auto;
	width: 930px;
	padding: 15px 10px;
}

#footer h4 {
	text-align: left;
	font-size: 1.1em;
	margin: 0 0 18px 0;
}

#footer .footerCol {
	font-size: 0.7em;
}

ul.footerCol li {
	margin: 0 0 13px 0;
	text-align: left;
}

.footerCol {
	width: 180px;
	margin: 0 9px 0 0;
	float: left;
}

#footer ul li {
	padding: 0 0 1px 0;
}

#footer ul li a:link, #footer ul li a:visited {
	color: #fff;
	text-decoration: none;
}

#footer ul li a:hover {
	border-bottom: 1px solid #fff;
}

#credits {
	font-size: 0.7em;
	float: right;
	text-align: right;
}

#credits ul li a {
	text-decoration: underline;
}

#credits ul li a:link, #credits ul li a:visited {
	color: #CBCBCB;
	border-bottom: 1px solid #fff;
}
	
#credits ul li a:hover {
	color: #fff;
	border-bottom: none;
}

#credits ul {
	margin: 72px 0 0 0;
}

#credits ul li  {
	margin: 0 0 9px 0;
	line-height: 1.3em;
}

#footer #credits ul li a {display: inline;}

/***************************************************** 
	08. Records
*****************************************************/

.record {
	display: block;
	border-top: 4px solid #f9ad81;
	width: 930px;
	background-image: url(/_images/transBackground.png);
	margin: 70px 0 40px 0;
	padding: 10px;
	text-align: left;
	overflow: hidden;
}

.record:last-child {
	margin: 70px 0 70px 0;
}

.record .info img {
	width: 170px; height: 170px;
}


.record .info {
	width: 200px;
}

.record .catNumb {
	font-size: 0.8em;
	color:#d3d3d3;
	margin: 0 0 10px 0;
}

.record .artist {
	font-size: 1.3em;
	font-weight: bold;
	margin: 0 0 6px 0;
	
}

.record .recordTitle {
	font-size: 0.8em;
	color: #d3d3d3;
	margin: 0 0 6px 0;
}

.record .format {
	font-size: 0.7em;
	color:#d3d3d3;
	margin: 10px 0 24px 0;
}

.record .info {
	display: block;
	width: 200px;
	height: 100%;
	float: left;
}

.record .info img {
	width: 100px; height: 100px;
	background-color: #8B8B8B;
	padding: 1px;
	text-align: center;
	margin: 0 auto;
}

.recordGallery {
	float: right;
	width: 720px;
}

.recordColor {
	position: relative;
	width: 170px;
	height: 200px;
	float: left;
	margin: 0 5px 25px;
}

.recordColor p {
	text-align: center;
	color: #d3d3d3;
	margin: 10px 0 0 0;
	font-size: 0.8em;
	font-weight: bold;
}

.listenPanel {
	width: 100%;
}

a .listen {
	margin: 10px 0 0 0;
	font-size: 0.8em;
	color: #d3d3d3;
	display: inline-block;
}

.listenText {
	padding: 0 0 3px 0;
}

a:hover .listen {
	padding: 0 0 1px 0;
	border-bottom: 1px solid #999;
}


/***************************************************** 
	09. Contact
*****************************************************/

.contactContainer {
	margin: 27px 0 0 0;
	width: 610px;
	background-image: url(/_images/transBackground.png);
	float: left;
	border-top: 4px solid #8393ca;
	padding: 10px 10px 0;
	text-align: left;
}

#googleMap {
	display: block;
	width: 610px;
	height: 300px;
	background-color: #fff;
	margin: 0 0 15px 0;
}

ul#contactDetails {
	width: 610px;
	font-size: 0.75em;
	font-weight: bold;
}

ul#contactDetails li {
	width: 150px;
	float: left;
	margin: 10px 26px 10px;
}

ul#contactDetails li p {
	text-align: center;
	padding: 0 12px;
}

ul#contactDetails li p strong {
	border-bottom: 1px solid #fff;
}


ul#contactDetails li p a {
	color: #CBCBCB;
	text-decoration: none;
}

ul#contactDetails li p a:hover {
	color: #fff;
	text-decoration: underline;
}

ul#contactDetails li p.details {
	text-align: left;
	line-height: 1.5em;
	margin: 15px 0;
}

ul#contactDetails li img {
	display: block;
	margin: 0 auto 25px;
}

/***************************************************** 
	10. Bonus 
*****************************************************/

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 10px;
}

::-webkit-scrollbar-button:vertical:increment {
    background-color: #fff;
}

::-webkit-scrollbar-track-piece {
    background-color: #eee;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:vertical {
    height: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;
}

::-webkit-scrollbar-thumb:horizontal {
    width: 50px;
    background-color: #ccc;
    -webkit-border-radius: 3px;