/* ------------------------------------------
DJ SCRIBBLER
Stylesheet: DEFAULT styles for screen, print, and handheld
Author: Nicolas Gallagher (http://nicolasgallagher.com)
Updated: 24 May 2009
------------------------------------------ */


/* =======================================================================================================================
										S C R E E N
   ======================================================================================================================= */
	
@media screen, projection {

/* ---------------------------------------------------------------------------------------------------------------------
==RESET
--------------------------------------------------------------------------------------------------------------------- */

html, body, div, span, object,
h1, h2, h3, h4, p, blockquote,
a, abbr, acronym, address, em, img, small, strong, sup,
ol, ul, li {
	padding:0; border:0; margin:0; font-size:100%; vertical-align:baseline; background:transparent;
}

blockquote, q {quotes:none;}
body {line-height:1;}
:focus {outline:0;}



/* ---------------------------------------------------------------------------------------------------------------------
==TYPOGRAPHY
--------------------------------------------------------------------------------------------------------------------- */

body {font-family:Calibri, Myriad Pro, Helvetica, Arial, serif; font-size:100.01%; color:#aaa; background:#191919;}

a:link, a:visited {color:#fff; text-decoration:none;}
a:hover, a:focus, a:active {color:#fff; text-decoration:underline;}

/* =Headings, paragraphs, and quotes
------------------------------------------ */
h1, h2, h3, h4 {font-weight:normal; line-height:1.2em; color:#bbb;}
h1 {font-size:2em;} /* 32px */
h2 {font-size:1.75em;} /* 28px */
h3 {margin:1.5em 0 0.777em; font-size:1.125em; font-weight:bold;} /* 18px */
h4 {font-size:1em;} /* 16px */

p, blockquote, li {font-size:0.875em;} /* 12px */
blockquote p, li li, li p {font-size:1em;}

p, blockquote {margin:1em 0; line-height:1.5em;}
blockquote {margin:1em 25px;}
strong {font-weight:bold;}
em {font-style:italic;}

/* =General lists
------------------------------------------ */
ul, ol {list-style:none; margin:1em 0;}
li {line-height:1.5em;}

/* =Other
------------------------------------------ */
hr {clear:both; height:0; border:1px solid #ccc; margin:0;}



/* ---------------------------------------------------------------------------------------------------------------------
==LAYOUT
--------------------------------------------------------------------------------------------------------------------- */

#container {width:960px; margin:0 auto; background:#191919;}

/* =Nav skip
------------------------------------------ */
#navigation-skip {position:absolute; left:-9000px;}

/* =Header
------------------------------------------ */
#header {/* for ie7 -> */ min-height:0; background:url(../images/design/bg-header.png) no-repeat 330px 85px;}
	h1#logo {float:left; width:335px; height:185px; margin-right:90px;}
	h1#logo img {display:block;}

	#feeds {float:left; margin:35px 0 0;}
	#feeds li {float:left; width:80px; margin-right:20px; overflow:hidden; font-size:1.125em; font-weight:bold; text-align:center;}
	#feeds li a:link, #feeds li a:visited {display:block; padding-bottom:80px; color:#adc8e0; background:url(../images/design/sprite.png) no-repeat 0 100%;}
	#feeds li.rss a:link, #feeds li.rss a:visited {color:#f79f15; background-position:-80px 100%;}

/* =Content
------------------------------------------ */
#content-wrapper {/* for ie7 -> */ min-height:0; padding:50px 20px 0;}
	#content-primary {float:left; width:580px;}
	#content-secondary {float:right; width:250px; margin-top:-200px;}
	#content-tertiary {clear:both; float:left; width:100%;}

/* =Footer
------------------------------------------ */
#footer {padding:0 20px;}
	#footer ul li {padding:0; margin:0;}
	#footer a:link, #footer a:visited {border:0;}
	#footer a:hover, #footer a:focus, #footer a:active {border:0;}



/* ---------------------------------------------------------------------------------------------------------------------
==CONTENT
--------------------------------------------------------------------------------------------------------------------- */

.intro {margin:-25px 0 2em;}
.intro strong {color:#ddd;}

.promo {padding:10px; border:1px solid #444; margin:1em 0 2em; font-size:1em; color:#fff; background:#333;}

/* =Primary Content
------------------------------------------ */

.article {padding:0 0 2em; margin:0 0 1em; overflow:hidden; background:url(../images/design/bg-article.png) no-repeat 0 100%;}

.header {position:relative; /* for ie7 -> */ min-height:0;}
	.header .mix-details {float:left; width:375px; padding:0.5em 0 1em 75px;}
		.header h2 {padding:0.1em 0; line-height:1em;}
		.header h2 strong {font-weight:normal;}
		.header h2 a span {position:absolute; top:0.4em; left:5px; width:60px; height:56px; cursor:pointer; background:url(../images/design/sprite.png) no-repeat -160px 0;}
		.header .hover h2 a {text-decoration:none;}
		.header h2 a:hover span, .header .hover h2 a span {background-position:-160px -56px;}
		.video .header h2 a span {background-position:-220px 0;}
		.video .header h2 a:hover span, .video .header .hover h2 a span {background-position:-220px -56px;}

	.header .published {float:right; /* for ie7 -> */ min-height:0; padding-top:1em; font-size:0.875em; white-space:nowrap;}

.section {padding:0 0 0.5em;}
	.section p a:link, .section p a:visited,
	.section li a:link, .section li a:visited {text-decoration:underline;}
	.section p a:hover, .section p a:focus, .section p a:active,
	.section li a:hover, .section li a:focus, .section li a:active {text-decoration:none;}
	
	.section .photo {display:block; border:5px solid #333; margin:0.75em 0;}

.guest-mix h2 strong, .guest-mix .contributor {text-transform:uppercase;}

.skip-to-top {margin:0; text-align:right; overflow:hidden;}
.skip-to-top a, .skip-to-top a {float:right; padding:3px 30px 3px 0; font-style:italic; background:url(../images/design/sprite-arrows.png) no-repeat 100% 100%;}
.section .skip-to-top a:link, .section .skip-to-top a:visited {text-decoration:none;}
.section .skip-to-top a:hover, .section .skip-to-top a:focus, .section .skip-to-top:active {text-decoration:underline;}

/* javascript generated elements */
.toggle-section {clear:right; float:right; margin:0.5em 0 0; line-height:1; white-space:nowrap; background:url(../images/design/sprite-arrows.png) no-repeat 100% 0%;}
	.toggle-section a {display:block; padding:3px 28px 3px 0; font-style:italic; background:url(../images/design/sprite-arrows.png) no-repeat 100% 50%;}
	.activated a {background:none;}


/* =Secondary Content
------------------------------------------ */

.module {margin:0 0 4em; background:url(../images/design/bg-module.png) no-repeat 100% 65px;}
	.module h2 {height:60px; text-indent:-9000px; background:url(../images/design/sprite-module-h2.png) no-repeat 100% 0;}
	.module ul {/* for ie7 -> */ min-height:0; padding:0 25px 0 0;}
	.module li {margin:0 0 1em; font-size:1em;}

#subscribe {padding-right:95px; margin:0 0 3em; background:url(../images/design/icon-subscribe.png) no-repeat 140px 35px;}
#subscribe h2 {margin-right:-75px; font-size:1.5em; line-height:1em; color:#fff;}
#subscribe p {line-height:1.2em; color:#fff;}
#subscribe form {margin-right:-95px;}
#subscribe form label {position:absolute; left:-900em;}
#subscribe form .text {width:170px; color:#777;}

#events p {margin:0;}
#events li {font-size:0.875em;}

#social h2 {background-position:100% -60px;}
#social li {float:left; width:92px; margin:0 10px 10px 0;}
#social li a {position:relative; display:block; width:92px; height:76px; overflow:hidden;}
#social li a span {position:absolute; top:0; left:0; width:100%; height:100%; cursor:pointer; background:url(../images/design/sprite-social-media-icons.png) no-repeat 0 0;}
	#social li.youtube span {background-position:0 -77px;}
	#social li.last-fm span {background-position:0 -153px;}
	#social li.twitter span {background-position:0 -227px;}
	#social li.myspace span {background-position:0 -306px;}
	#social li.flickr span {background-position:0 -380px;}
	
	#social li.email {clear:both; width:auto; margin:1em 0 0;}
	#social li.email a {width:auto; height:auto; padding-left:38px; background:url(../images/design/icon-email.png) no-repeat 0 50%;}

#bio h2 {background-position:100% -120px;}
#bio p {padding:0 25px 0 0; margin-top:0;}

#flickr-gallery h2 {background-position:100% -180px;}
#flickr-gallery p {padding:0 25px 0 0; margin-top:0;}
#flickr-gallery li {float:left; border:1px solid #888; margin:5px;}
#flickr-gallery li a, #flickr-gallery li img {display:block;}



/* ---------------------------------------------------------------------------------------------------------------------
==SELF-CLEARING (modern browsers)
--------------------------------------------------------------------------------------------------------------------- */

#header:after,
#content-wrapper:after,
.header:after,
.module ul:after {
	clear:both; display:block; content:"\0020"; height:0; font-size:0; line-height:0; visibility:hidden;
}

/* end of @media screen, projection */}


/* =======================================================================================================================
										P R I N T I N G
   ======================================================================================================================= */

@media print {

/* end of @media print */}


/* =======================================================================================================================
										H A N D H E L D
   ======================================================================================================================= */

@media handheld {

/* end of @media handheld */}