/*
Theme Name: how-to-dj
Theme URI: http://www.howtodjfast.com
Description: A sleek and simple theme for HowToDJFast.com
Version: 1.0
Author: Gwyn Pritchett
Author URI: http://www.gwynpritchett.com/
Tags: blue, white, 2 column, widget ready, video
*/


/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
 form,  legend, td
table {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}


.widget {
	margin-bottom: 20px;
}
/* All color changes are right here! ------------------------------- */
/* ----------------------------------------------------------------- */

body { background:#111 url('images/how-to-dj_bg-main.jpg') repeat; font-size: 12px;}
#content { background:#fff url('images/how-to-dj_main_content_bg.gif') }
a { color:#000000 }
a:hover { color:#555 }
.widget_search {
	margin-top: 15px;
}
.player { 
margin-top: 20px;
padding-left: 25px;
padding-right: 25px;
}
#signup {
	width: 210px;
	margin: 0;
	color: #000000;
	font-weight: bold;
	font-size: 14px;
	padding-left: 25px;
	padding-right: 25px;
}
#signup tr td {
	padding: 0;
	margin: 0;
	
}
#signup input {
	margin-left: 2px;
	padding: 2px;
	background-color: #FFFBD1;
}

.click-for-more a {
	width: 570px;
	display: block;
	border-bottom: 3px solid #175081;
	text-decoration: none;
	background-color: #ff46ab;
	color: #fff;
	margin-bottom: 30px;
	padding: 3px 8px;
	font-size: 14px;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.click-for-more a:hover {
	background-color: #ec0784;
}

#header h1 span { color:#fff } 						/* tagline color */

.search-area .textbox, #searchform .textbox { 			/* SEARCH TEXTBOX */
	color:#555; 										/* text color */
	border:1px solid #000;								/* border color */
	background:#FFF }									/* background color */
	
	
#category_header {
	text-align: left; padding: 10px 14px; background: #eee; margin: 0 0 20px 0; font-size: 14px; border-left: 10px solid #ccc; border-right: 10px solid #ccc;
}
#category_header p {margin: 0; padding: 0;}
#category_header h1 {font-size: 20px; font-weight: bold; margin-bottom: 2px; font-family: 'Trebuchet MS', Arial, sans-serif; }	
	
	
#nav ul li a {											/* NAVIGATION */
	color:#fff;										/* text color */
	border-right:1px solid #6ca3ac }					/* link seperator color (the little line) */
	
#nav ul li a:hover {
	background:#254e94;									/* hover background color */
	color:#ffffff }										/* text hover color */
			
#nav li:hover ul,
#nav li.over ul { background:#408EC2 }					/* dropdown rollover background color */
#nav ul ul li a:hover { background:#5DACE7 }			/* dropdown link rollover color */

.widecolumn { background:#fff }						/* Should be same as above */

.post .date { color:#555 }								/* Date number color */
.post .date .top { color:#fff }							/* Date month color */

.post h2 { border-bottom:1px solid #BFBFBF }			/* Post bottom border color */
.post h2 a { color:#222 }							/* Post title link color */
.post h2 a:hover { color:#555 }							/* Post title link hover color */

.full h2 { color:#222 }								/* Post page - title color */
	
h2.pagetitle {
	color:#222; }										/* Page - title text color */

blockquote p { color:#555 }								/* Blockquote text color */
		
h3 { color:#000000 }									/* H3 title text color */
	
ul.commentlist li {
	background:#EFEFEF url('images/how-to-dj_comment_bg.gif') no-repeat }	/* Comment background color */
			
ul.commentlist .rightside { border-left:1px solid #cccccc }		/* Comment line seperator color */
		
#sidebar h2 { color:#000000 }							/* Sidebar title color */
#sidebar p { color:#000000 }								/* Sidebar text color */

#footer {
	border-top:5px solid #244e9d;						/* Footer border colors */
	border-right:1px solid #244e9d;
	border-left:1px solid #244e9d;
	background:#082b7b }								/* Footer background color */
	
#footer p { color:#FFF }								/* Footer text color */
#footer a { color: #a7d7fa }							/* Footer link color */
#footer a:hover { color: #FFF }							/* Footer link hover color */

/* ----------------------------------------------------------------- */
/* END COLOR CHANGES ----------------------------------------------- */






/* Main Styles ----------------------------------------------------- */
/* ----------------------------------------------------------------- */

body {
	font-family:Arial, Helvetica, sans-serif;
	margin:0; padding:0 }
	
a:active, a:focus { outline:none }
.clear { clear:both; font-size:1px; display:block }

#content {
	width:960px;
	margin:7px auto 0 auto }
	
a { text-decoration:underline }	
a:hover { text-decoration:none }
	
/* Header ---------------------------------------------------------- */
/* ----------------------------------------------------------------- */
#top-text {
	width: 960px;
	margin: 0 auto;
}

#top-text a {
color: #FFFFFF;
}
	
#top-text h2 {
	color: #eee;
	font-size: 15px;
	margin: 0 0 0 16px;
	padding: 0;
	position: absolute;
	top: 15px;
	}
#header {
	width:960px;
	height:50px;
	margin-top: 120px;
	position:relative;
	background:url('images/how-to-dj_header_bg.jpg') no-repeat }
	
	#header h1 {
		position:absolute;
		top:0px;
		left:15px;
		width:450px;
		height:330px;
		margin:0; padding:0;
		font-size:1px }
		#header h3 {
			position: absolute;
			top: 275px;
			color: #fff;
			left: 20px;
		}
		
		#header a.logo {
			display:block;
			position: absolute;
			width:300px;
			height:80px;
			margin-top: -100px;
			text-indent:-2000px;
			background:url('images/how-to-dj_logo.png') no-repeat }
			
		#header h1 span {
			font-size:28px;
			font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
			font-weight:bold;
			position:absolute;
			top:10px;
			left:10px }
					#header h1 span em {
						font-size: 18px;
					}

			
	#video {
		display:block;
		margin:0 0 20px 0; padding:0;
		width:330px;
		text-align:left;
		
		}			

		#searchform {
			width: 195px;
		}
		.search-area p, #searchform p {
			margin:0; padding:0;
			display:inline;
		 }
		
		.search-area form, #searchform form {
			margin:0; padding:0 }
		
		.search-area .textbox, #searchform .textbox {
			padding:5px;text-align: bottom;
			font-size:12px;
			font-family:Arial, Helvetica, sans-serif }
		
		.search-area .button, #searchform .button {
			border:none;
			float: right;
			padding:0; margin:3px 0 0 0;
			text-align: top;
			background:url('images/how-to-dj_button_search.gif') 0 0 no-repeat;
			width:30px;
			height:26px }

/* Navigation ------------------------------------------------------ */
/* ----------------------------------------------------------------- */
			
#nav {
	width:960px;
	height:42px;
	background:url('images/how-to-dj_nav_bg.gif') no-repeat;
	margin:0; padding:0 }
	
	#nav ul {
		list-style:none;
		margin:0; padding:0;
		width:960px;
		height:42px }
		
	#nav ul li {
		position:relative;
		display:block;
		float:left;
		height:42px;
		margin:0;
		padding:0 }
		
		#nav ul li a {
			text-decoration:none;
			display:block;
			padding:13px 20px 13px 20px;
			font-size:14px;
			font-weight:bold }
			
		#nav ul li a:hover { text-decoration:none }
			
		#nav ul ul {
			display: none;
			width:200px;
			height:auto;
			position:absolute;
			top:42px;
			left:0 }
			
			#nav li > ul {
				top: auto;
				left: auto }
			
			#nav li:hover ul, #nav li.over ul { z-index:2000px; display: block; width:200px; height:auto; top:42px; left:0 }
			
			#nav ul ul li {
				height:auto;
				display:block;
				float:none;
				margin:0; padding:0 }
				
				#nav ul ul li a {
					font-size:12px;
					height:auto;
					padding:8px 10px;
					border:none }
					
/* Main Content ---------------------------------------------------- */
/* ----------------------------------------------------------------- */

#main-content {
	width:960px;
	margin:0; padding:20px }
	
.narrowcolumn { width:585px !important; float:left; }

.post { clear:both; margin:0; padding:0 }

.post .date {
	display:block;
	float:left;
	position:relative;
	width:46px;
	height:28px;
	padding:20px 0 0 0;
	font-size:22px;
	font-weight:bold;
	text-align:center;
	background:url('images/how-to-dj_date_bg.gif') no-repeat;
	margin:4px 10px 0 0 }
	
	.post .date .top {
		font-size:11px;
		font-weight:bold;
		text-transform:uppercase;
		text-align:center;
		display:block;
		width:46px;
		position:absolute;
		top:1px; left:0 }

.post h2,.post h1 {
	width:585px;
	float:left;
	font-size:19px;
	font-weight:normal;
	margin:0 0 7px 0;
	padding:0 0 5px 0 }
	
.post h2 a { text-decoration:none }
.post h2 a:hover { text-decoration:none }

.entry { clear:both; }
.entry p { line-height:21px; font-size:14px; margin:0 0 25px 0 }


	
.post .postmetadata {
	float:left;
	width:578px;
	font-size:11px;
	font-style:normal;
	padding:0;
	margin:0 0 15px 0 }

	.date-time a,.social-media a{
		text-decoration: none;
	}
	.date-time a:hover,.social-media a:hover {
		color: #0076ff;
	}

	.post .postmetadata .date-time {
		width:260px;
		padding-left: 22px;
		padding-top: 2px;
		height: 16px;
		float:left; 
		text-transform: uppercase;
		background: url('images/vinyl.png') top left no-repeat;}

		.social-media {
			font-size: 12px;
			width:270px;
			text-align:right;
			float:right; 
		}
		.share-element {
			float: left;
	margin-left: 4px;
	height: 18px;
	border-right: 1px solid #888;
}
.share-element-last {
	border-right: none;
}
.share-icon {
	margin-bottom: -2px;
}
h2.pagetitle {
	margin:0 0 20px 0;
	padding:3px 10px 3px 10px;
	font-size:22px;
	font-weight:bold;
	letter-spacing:-1px }
		
.navigation { width:100%; font-size:12px; margin:0 }	
.navigation .alignleft { display:block; float:left; width:49% }
.navigation .alignright { display:block; float:right; width:49%; text-align:right }

blockquote {
	display:block;
	padding:0 60px 0 60px;
	margin:0;
	background:url('images/how-to-dj_quotes_left.gif') 30px 0 no-repeat }
	
	blockquote p {
		margin:0;
		padding:0;
		font-style:italic;
		background:url('images/how-to-dj_quotes_right.gif') bottom right no-repeat }
		
h3 {
	font-size:16px;
	font-weight:bold }
		
ul.commentlist {
	list-style:none;
	width:580px;
	margin:0;
	padding:0 }
	
	ul.commentlist li {
		display:block;
		width:580px;
		margin:0 0 15px 0 }
		
		ul.commentlist li div {
			display:block;
			padding:15px 15px 15px 26px;
			margin:0;
			width:540px;
			background:url('images/how-to-dj_comment_bottom.gif') bottom no-repeat }
			
ul.commentlist .leftside { display:block; width:150px; float:left }
ul.commentlist .rightside { display:block; width:370px; float:right }
ul.commentlist img { float:left; margin:0 10px 0 0 }
ul.commentlist cite { font-size:16px; font-weight:bold; font-style:normal; position:relative; top:-2px }
ul.commentlist small { font-size:11px; font-weight:normal; font-style:italic; display:block }
ul.commentlist p { margin:0; padding:0 0 0 15px; line-height:20px; font-size:12px }

#commentform { margin:0; padding:0 }
#commentform p { margin:0 0 15px 0; padding:0 }
#commentform .textarea {
	width:500px }

/* Sidebar --------------------------------------------------------- */
/* ----------------------------------------------------------------- */

#sidebar {
	font-size:14px;
	line-height:20px;
	float:left;
	width:335px; padding:0;
	position: relative;
	}
	#sidebar a {
		text-decoration: none;
	}
	#sidebar ul li a{
		padding: 3px 0;
		display: block;
		border-bottom: 1px dashed #aaa;
		color: #222;
	}
	#sidebar ul {
		list-style:none;
		margin:0; padding:0 }
		
	#sidebar h2 {
		padding:0;
		margin:0 0 10px 0;
		font-size:16px }
		
	#sidebar p {
		padding:0;
		margin:0 0 10px 0 }
#sidebar .products li a {
	font-size: 16px;
	line-height: 22px;
	padding: 5px 0;
}
#sidebar .products li.featuredproduct a {
	font-size: 20px;
}
/* #sidebar .archives li {
	margin:0 0 4px 0;
	display:block;
	height:18px;
	padding:0 0 0 20px;
	background:url('images/learn-to-dj_cal_icon.gif') 0 4px no-repeat }

#sidebar .categories ul li {
	margin:0 0 4px 0;
	display:block;
	height:18px;
	padding:0 0 0 20px;
	background:url('images/learn-to-dj_folder_icon.gif') 0 4px no-repeat }
	
/* Footer ---------------------------------------------------------- */
/* ----------------------------------------------------------------- */

#footer {
	width:918px;
	margin:0 auto;
	display:block;
	padding:8px 20px 8px 20px; }
	
#footer p { padding:0; margin:0; font-size:12px; line-height:25px }

.ddsg-wrapper h2 {
	border-bottom: none;
	font-size: 20px;
}
.ddsg-wrapper ul {
	margin-left: 20px;
	margin-bottom: 20px;
	list-style-type: none;
	font-size: 14px;
}
.ddsg-wrapper ul li ul{
	margin-left: 20px;
	margin-bottom: 5px;
	list-style-type: square;
	font-size: 11px;
}
.ddsg-wrapper ul li{
	padding: 2px;
}
.articles li {
	font-size: 18px;
	margin:0  0 10px 0;
}
.article h1 {
	font-size: 32px;
}
.article h3 {
	font-size: 24px;
	margin-bottom: 10px;
	color: #111;
}
ol {
	margin: 0 0 15px 28px;
	font-size: 14px;
}
ol li {
	line-height: 21px;
	margin-bottom: 12px;
}

/* ============ */
/* = Grey Box = */
/* ============ */
.grey-box {
	background: #eee;
	color: #000;
	margin-bottom: 20px;
	border: 1px solid #444;
	padding: 15px;
}
.grey-box p {
	margin-bottom: 15px;
}

.grey-box h2.pagetitle {margin: 0 0 10px 0; padding:0;}
.subtitle {font-size: 15px !important; color: #333;}