/* Dubtrain 2009 CSS - handcoded by :pete, june 2009 - first css sheet! */

/* !    HTML RESET */

html, body, h1, h2, h3, p, ul, li, form {
	border: 0;
	margin: 0;
	padding: 0;
	}

/* !    HTML ELEMENTS */

/* !    PAGE LAYOUT & GENERAL CLASSES */

#container {
	width: 100%;
	margin: 0 auto;
	}

html, body {
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 12px;
	}

.center {
	text-align: center;
	}

.hidden {
	display: none;
	}

td {
	text-align: center;
	}

.credits {
	text-align: center;
	font-style: italic;
	font-size: 11px;
	color: #666666;
	}

/* !    SET LINK APPEARANCE */
/*      a nice light maroon with a 1x1+1blur silver shadow. classy! */

body a {
	color: maroon;
	text-shadow: 1px 1px 1px silver;
	text-decoration: none;
	}

body a:hover {
	color: #0080ff;
	}

/* !    BACKGROUND STYLING */

#leftbar {
	display: block;
	float: left;
	width: 105px;
	height: 2000px;
	background: url(/images/site/sidebar_shaded_long_left.jpg) fixed no-repeat 0 0;
	text-indent: -9999px;
	}

#rightbar {
	display: block;
	float: right;
	width: 105px;
	height: 2000px;
	background: url(/images/site/sidebar_shaded_long_right.jpg) fixed no-repeat top right;
	text-indent: -9999px;
}

/* !    HEADER STYLING */

#header a h1 {
	display: block;
	float: none;
	margin: auto;
	width: 300px;
	height: 78px;
	text-align: center;
	background: url(/images/site/dubtrain_title_plain.jpg) no-repeat 0 15px;
	text-indent: -9999px;
	text-decoration: none;
	}

#header p.seattle {
	display: block;
	float: none;
	margin: auto;
	width: 218px;
	height: 45px;
	text-align: center;
	background: url(/images/site/dubbing_seattle.jpg) no-repeat 0 0;
	text-indent: -9999px;
	}

/* !    NAVIGATION STYLING */

#navigation {
	margin: auto;
	position: relative;
	width: 590px;
	height: 20px;
	}

#navigation ul {
	list-style: none
	}

#navigation li {
	float: left;	
	}

#navigation li a {
	display: block;
	height: 20px;
	background: no-repeat 0 0;
	text-indent: -9999px;
	text-decoration: none;
	overflow: hidden;
	}

/* !    SET BUTTON IMAGES & ROLLOVERS */

#navigation a#about {
	width: 58px;
	background: url(/images/nav/ocrnav_01.jpg) no-repeat 0 0;
	}

#navigation a#record {
	width: 84px;
	background: url(/images/nav/ocrnav_02.jpg) no-repeat 0 0;
	}

#navigation a#remix {
	width: 54px;
	background: url(/images/nav/ocrnav_03.jpg) no-repeat 0 0;
	}

#navigation a#featured {
	width: 76px;
	background: url(/images/nav/ocrnav_04.jpg) no-repeat 0 0;
	}

#navigation a#artists {
	width: 68px;
	background: url(/images/nav/ocrnav_05.jpg) no-repeat 0 0;
	}

#navigation a#discography {
	width: 99px;
	background: url(/images/nav/ocrnav_06.jpg) no-repeat 0 0;
	}

#navigation a#construction {
	width: 107px;
	background: url(/images/nav/ocrnav_07.jpg) no-repeat 0 0;
	}

#navigation a#misc {
	width: 44px;
	background: url(/images/nav/ocrnav_08.jpg) no-repeat 0 0;
	}

#navigation a#about:hover,
#navigation a#record:hover,
#navigation a#remix:hover,
#navigation a#featured:hover,
#navigation a#artists:hover,
#navigation a#discography:hover,
#navigation a#construction:hover,
#navigation a#misc:hover {
	display: block;
	background-position: 0 -20px;
	}

/* !    NAVIGATION TEXT POPUP */

#navigation a:hover span {
	display: block;
	position: absolute;
	top: 25px;
	left: 0px;
	margin: auto;
	width: 590px; 
	z-index: 100;
	color: teal;
	font: 10px Verdana, sans-serif;
	text-align: center; 
	text-shadow: none;
	text-indent: 0;
	}

/* !    CHECK BODY ID & SHOW ROLLOVER TAB ON GIVEN PAGE */

body#about_page a#about,
body#record_page a#record,
body#remix_page a#remix,
body#featured_page a#featured,
body#artists_page a#artists,
body#discography_page a#discography,
body#construction_page a#construction,
body#misc_page a#misc {
	display: block;
	background-position: 0 -40px; /* SHOWS BLUE HILITE page */
	}

/* !    CONTENT STYLING */

#content {
	display: block;
	margin: auto;
	width: 550px;
	background-color: white;
	padding: 20px 25px 0 25px;
	border-top: 2px solid #efefef;
	}

#content h2, h3 {
	text-align: center;
	padding-bottom: 15px;
	}

#content table {
	border-top: 1px solid silver;
	}

/* !    CONTENT BLOCK GRAPHIC PICKER */
/*      we need a different size & border for each graphic */

#content a.headerpic {
	display: block;
	float: left;
	margin: 2px 8px 0 0;
	border: 2px black solid;
	text-indent: -9999px;
	}

#content a#flagboy {
	width: 97px;
	height: 120px;
	background: url(/images/content/flagboy_logo_verysmall.jpg) no-repeat 0 0;
	}

#content a#amps {
	width: 111px;
	height: 83px;
	background: url(/images/content/dubtrain_amps_verysmall.jpg) no-repeat 0 0;
	}

#content a#dub_box {
	width: 98px;
	height: 108px;
	background: url(/images/content/dub_box_verysmall.jpg) no-repeat 0 0;
	}

#content a#dub_keys {
	width: 120px;
	height: 74px;
	background: url(/images/content/dub_keys_verysmall.jpg) no-repeat 0 0;
	}

#content a#kit_mics {
	width: 97px;
	height: 120px;
	background: url(/images/content/kit_mics_verysmall.jpg) no-repeat 0 0;
	}

#content a#pan_mics {
	width: 120px;
	height: 91px;
	background: url(/images/content/pan_mics_verysmall.jpg) no-repeat 0 0;
	}

#content a#framing {
	width: 120px;
	height: 90px;
	background: url(/images/content/framing_verysmall.jpg) no-repeat 0 0;
	}

#content a#modeknob {
	width: 107px;
	height: 106px;
	background: url(/images/content/modeknob_verysmall.jpg) no-repeat 0 0;
	}

#content a#drumkit {
	width: 120px;
	height: 85px;
	background: url(/images/content/drumkit_verysmall.jpg) no-repeat 0 0;
	}
	
#content a#gobo {
	width: 120px;
	height: 101px;
	background: url(/images/content/gobo_small.jpg) no-repeat 0 0;
	}

/* !    CONTENT SUB DIVS */

/* !    CONTENT HEADER */

#content_head { 
	display: block;
	width: 500px;
	margin: auto;
	border-bottom: 1px solid silver;
	}

#content_head p {
	padding-bottom: 15px;
	}

#content_head p.moreinfo {
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	color: #666666;
	}

#content_head span { /* used to highlight text in the content head */
	color: maroon;
	font-weight: bold;
	}

/* !    FEATURED MUSIC LIST ITEMS */

.content_list { 
	display: block;
	width: 350px;
	margin: auto;
	padding: 10px;
	border-top: 2px solid #efefef;
	}

.content_list p {
	margin-top: 5px;
	margin-bottom: 15px;
	color: #999999;
	font-size: 10px;
	}

/* !    ARTIST AUDO CLIP BOXES */

p.clipbox_head {
	display: block;
	background-color: silver;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	margin-top: 11px;
	padding: 3px 0 8px;
	}

p.clipbox_head a { /* white shadow for artist links */
	text-shadow: 1px 1px 1px white;
	}

p.clipbox_list {
	display: block;
	width: 200px;
	padding: 4px;
	border: 1px solid silver;
	}

p.clipbox_list a {
	display: block;
	width: 200px;
	text-align: center;
	}

/* !    DISCOGRAPHY BOXES */

.album_box { /* the main container */
	display: block;
	width: 550px;
	height: 145px;
	margin: auto;
	margin-top: 16px;
	}

.d_info { /* artist & album box on the left */
	display: block;
	float: left;
	position: relative;
	top: 20px;
	width: 155px;
	height: auto;
	padding: 0px 5px;
	text-align: center;
	font-size: 11px;
	}

p.d_info span { /* the album title */
	display: block;
	text-align: center;
	margin-top: 5px;
	font-size: 13px;
	font-weight: bold;
	}

.d_artwork {
	display: block;
	float: left;
	width: 144px;
	height: 144px;
	padding: 0px;
	margin: 0px;
	border: 2px solid black;
	}

.d_text {
	display: block;
	float: left;
	position: relative;
	top: 20px;
	width: 210px;
	height: auto;
	padding: 0 10px 0 10px;
	margin: 0 0 0 0;
	text-align: center;
	font-size: 11px;
	}

p.d_text a.d_link { /* the buy_the_album button */
	display: block;
	width: 113px;
	height: 19px;
	margin: auto;
	margin-top: 15px;
	background: url(/images/site/buy_button.jpg) no-repeat 0 0;
	text-indent: -9999px;
	}

p.d_text a.d_link:hover {
	display: block;
	background-position: 0 -19px;
	}

p.d_text a.d_link:active {
	display: block;
	background-position: 0 -38px;
	}

/* !    CONSTRUCTION IMAGE */

#content_list img {
	display: block;
	width: 252px;
	height: 189px;
	margin: auto;
	border: 2px solid black;
	margin-bottom: 15px;
	}

/* !    MISC BOXES */

#content_list p.misc_box {
	display: block;
	width: 400px;
	margin: auto;
	margin-top:15px;
	margin-bottom: 10px;
	border: 1px solid silver;
	}

#content_list p.misc_box>a {
	display: block;
	width: 394px;
	height: 20px;
	margin: auto;
	padding: 3px;
	background-color: #cccccc;
	font-weight: bold;
	text-align: center;	
	}

#content_list p span{
	display: block;
	width: 390px;
	margin: auto;
	padding: 5px;
	text-align: center;	
	}

/* !    FOOTER STYLING */

#footer {
	float: none;
	font-family: "Lucida Grande", Verdana, Arial, sans-serif;
	font-size: 10px;
	color: #666666;
	background: white;
	border-top: 2px solid #efefef;
	width: 540px;
	margin: auto;
	padding: 13px 25px;
	line-height: 15px;
	text-align: center;
	}

#footer a {
	text-decoration: none;
	}

#footer a:hover {
	color: #0080ff;
	}

.left {
	float: left;
	}

.right {
	float:right;
	}