/*  
	Theme Name: Chuck Joiner Theme
	Theme URI: http://www.xldstudios.com/
	Description: Custom made theme for the Mac Voices Group and Chuck Joiner. Designed by <a href="http://www.xldstudios.com/" title="XLD Studios">XLD Studios</a>.
	Version: 1.0
	Author: Erik Bernskiold, XLD Studios
	Author URI: http://www.xldstudios.com/
	Tags: magazine, two column
*/

@import "typography.css";
@import "quick-classes.css";
@import "comments.css";

body {
	background: #e2e2e2;
	margin: 0;
	padding: 0;
	color: #505050;
	font-family: Helvetica, Verdana, sans-serif;
	font-size: 12px;
	line-height: 18px;
}

#container {
	width: 960px;
	margin: 0 auto 0 auto;
	overflow: hidden;
	background: #fff;
}

	#header {
		background: url(images/header.jpg) no-repeat;
		width: 960px;
		height: 170px;
		position: relative;
		overflow: hidden;
	}
	
		#header h1 { margin: 0; padding: 0; }
		
			#header h1 a {
				background: url(images/logo.jpg) no-repeat;
				display: block;
				margin: 0;
				padding: 0;
				width: 250px;
				height: 130px;
				position: absolute;
				top: 10px;
				left: 75px;
				overflow: hidden;
				font-size: 0px;
				text-indent: -9999em;
			}
			
		#header ul {
		    margin: 0px 0 0 350px;
		    padding: 0;
		}
		
		    #header ul li {
		    	float: left;
		    	margin: 0;
		    	padding: 0;
		    	list-style: none;
		    	color: #fff;
		    }
		    
		    	#header ul li a {
		    		background: transparent;
		    		font-size: 12px;
		    		text-transform: uppercase;
		    		margin: 0;
		    		display: block;
		    		padding: 8px 15px 2px 15px;
		    		height: 23px;
		    		color: #fff;
		    		text-decoration: none;
		    	}
		    	
		    		#header ul li a:hover { background: #525252; }
		    		
		    		#header ul li a.active {
		    			background: url(images/nav-active-tile.jpg) repeat-x;
		    		}
						
		#header #advertisement {
			position: absolute;
			top: 70px;
			left: 410px;
			width: 468px;
			height: 60px;
			overflow: hidden;
		}
		
	#content {
		background: #fff;
		border-right: 1px solid #e8e8e8;
		margin: 0;
		padding: 10px;
		float: left;
		width: 630px;
	}
	
		#content #featured-content {
			border: 8px solid #e8e8e8;
			width: 570px;
			margin: 10px;
			padding: 10px;
			overflow: hidden;
		}
		
			#content p.box-title {
				font-family: Helvetica, Verdana, sans-serif;
				font-size: 14px;
				font-weight: bold;
				text-transform: uppercase;
				color: #a4a4a4;
				margin: 0;
				padding: 0;
			}
			
			#conten h2 {
				font-family: Helvetica, Verdana, sans-serif;
				font-size: 24px;
				line-height: 28px;
				margin: 20px;
				padding: 0;
			}
			
			#content .post-image {
				float: left;
				width: 90px;
				margin: 10px 0 0 10px;
				padding: 0;
			}
			
				#content .post-image img { border: 3px solid #ccc; }
			
			#content .post-content {
				line-height: 24px;
				text-align: justify;
				margin: 0 20px 0 40px;
				padding: 0;
			}
			
				#content .post-content p {
					margin: 0 0 10px 0;
					padding: 0;
				}
			
				#content .post-content a.more-link {
					font-weight: bold;
					font-style: italic;
					margin: 0 0 10px 20px;
					padding: 0;
				}
	
			#content ul.post-meta {
				margin: 0 0 10px 0;
				padding: 0;
				clear: both;
			}
			
				#content ul.post-meta li {
					float: left;
					list-style: none;
					margin: 0;
					padding: 0 20px 0 20px;
					color: #a4a4a4;
					text-transform: uppercase;
				}
				
		#content #post-grid {
			width: 620px;
			margin: 0 0 0 10px;
			padding: 0;
		}
		
			#content #post-grid .post-box {
				float: left;
				width: 280px;
				margin: 0 0 20px 20px;
			}
			
				#content #post-grid .post-box h2 {
					font-size: 14px;
					font-weight: bold;
					line-height: 20px;
				}
				
				#content #post-grid .post-box .post-box-thumb {
					float: left;
					margin: 7px 10px 5px 0;
				}
					
				#content #post-grid .post-box a.more-link {
					font-weight: bold;
					font-style: italic;
					margin: 0 0 10px 20px;
					padding: 0;
				}
	
				#content #post-grid .post-box ul.post-meta {
					margin: 0 0 10px -15px;
					padding: 0;
					width: 280px;
				}
				
					#content #post-grid .post-box ul.post-meta li {
						float: left;
						list-style: none;
						margin: 0;
						padding: 0 10px 0 10px;
						color: #a4a4a4;
						text-transform: uppercase;
					}
	
	#sidebar {
		background: #fff;
		float: right;
		margin: 0;
		padding: 10px;
		width: 289px;
		overflow: hidden;
	}
	
		#sidebar #social-media {
			width: 300px;
			margin: 10px -10px 15px -10px;
			padding: 0;
			position: relative;
			overflow: hidden;
			height: 80px;
		}
		
			#sidebar #social-media #rss-feed {
				float: left;
				border-right: 5px solid #e8e8e8;
				height: 80px;
				padding: 0 30px 0 20px;
				margin: 0;
				width: 60px;
			}
			
				#sidebar #social-media #rss-feed a {
					background: url(images/subscribe-hover.jpg);
					display: block;
					width: 70px;
					height: 70px;
					overflow: hidden;
					font-size: 0px;
					text-indent: -9999em;
				}
				
				#sidebar #social-media #rss-feed a:hover {
					background: url(images/subscribe-hover.jpg);
				}
				
			#sidebar #social-media #connect {
				background: url(images/connect-with-chuck.jpg) no-repeat 20px 0;
				float: left;
				position: relative;
				width: 170px;
			}
			
				#sidebar #social-media #connect ul {
					clear: both;
					position: relative;
					margin: 24px 0 0 30px;
					padding: 0;
				}
				
					#sidebar #social-media #connect ul li {
						list-style: none;
						margin: 0;
						padding: 0 4px 0 4px;
						float: left;
						overflow: hidden;
					}
					
						#sidebar #social-media #connect ul li a {
							display: block;
							width: 37px;
							height: 37px;
							overflow: hidden;
							text-indent: -99999em;
						}
						
							#sidebar #social-media #connect ul li a#facebook {
								background: url(images/facebook-hover.jpg) no-repeat;
							}
							
								#sidebar #social-media #connect ul li a#facebook:hover {
									background: url(images/facebook-hover.jpg) no-repeat;
								}
							
							#sidebar #social-media #connect ul li a#twitter {
								background: url(images/twitter-hover.jpg) no-repeat;
							}
							
								#sidebar #social-media #connect ul li a#twitter:hover {
									background: url(images/twitter-hover.jpg) no-repeat;
								}
							
							#sidebar #social-media #connect ul li a#friendfeed {
								background: url(images/friendfeed-hover.jpg) no-repeat;
							}
							
								#sidebar #social-media #connect ul li a#friendfeed:hover {
									background: url(images/friendfeed-hover.jpg) no-repeat;
								}
		#sidebar .sidebar-item {
			clear: both;
			margin: 10px 0 10px 0;
			padding: 0;
		}
		
			#sidebar .sidebar-item h2 {
				border-bottom: 7px solid #e8e8e8;
				font-family: Helvetica, Verdana, sans-serif;
				font-size: 14px;
				color: #656565;
				font-weight: bold;
				text-transform: uppercase;
				padding: 0 0 4px 20px;
				margin: 0;
			}
			
				#sidebar .sidebar-item h2.advertisement {
					background: url(images/advertisement.jpg) no-repeat;
					border: none;
					margin: 10px 0 20px 0;
					padding: 10px 0 20px 0;
					overflow: hidden;
					width: 292px;
					height: 14px;
					text-indent: -9999em;
					font-size: 0px;
				}
			
			#sidebar .sidebar-item ul {
				margin: 10px 20px 10px 20px;
				padding: 0;
			}
			
				#sidebar .sidebar-item ul li {
					list-style: none;
					margin: 5px 0 15px 0;
					padding: 0;
					border-bottom: 1px solid #e8e8e8;
				}
				
					#sidebar .sidebar-item ul li h3.post-title {
						font-family: Helvetica, Verdana, sans-serif;
						font-size: 12px;
						font-weight: normal;
						margin: 0;
						padding: 0;
						border: 0;
						text-align: left;
						width: 100%;
					}
					
						#sidebar .sidebar-item ul li h3.post-title a {
							color: #000;
							text-decoration: none;
						}
						
						#sidebar .sidebar-item ul li h3.post-title a:hover { color: #505050; }
						
					#sidebar .sidebar-item ul li p.date {
						margin: 5px 0 10px 0;
						padding: 0;
						color: #858585;
						text-transform: uppercase;
					}
					
			#sidebar .sidebar-item p.view-more {
				text-transform: uppercase;
				font-weight: bold;
				float: right;
				margin: 0 20px 10px 0;
				padding: 0;
			}
	
	#footer {
		background: #fff;
		border-top: 20px solid #e2e2e2;
		clear: both;
		padding: 10px 40px 10px 40px;
		margin: 0;
		overflow: hidden;
		/*height: 190px;*/
	}
	
		#footer h2 {
			color: #393939;
			font-family: Helvetica, Verdana, sans-serif;
			font-size: 18px;
			font-style: normal;
			font-weight: normal;
			text-transform: lowercase;
			margin: 20px 0 22px 18px;
			padding: 0;
		}

	
		#footer #macvoices-group {
			background: #f6f6f6;
			float: left;
			height: 230px;
			width: 227px;
		}
		
			#footer #macvoices-group h2 {
				color: #393939;
				font-family: Helvetica, Verdana, sans-serif;
				font-size: 18px;
				font-style: normal;
				font-weight: normal;
				text-transform: lowercase;
				margin: 20px 0 22px 18px;
				padding: 0;
			}
			
			#footer #macvoices-group ul {
				margin: 10px 0 0 40px;
				padding: 0 0 0 10px;
				border-left: 4px solid #b6b6b6;
			}
			
				#footer #macvoices-group ul li {
					list-style: none;
					margin: 0;
					padding: 4px 0 6px 0;
				}
		
		#footer #categories {
			float: left;
			position: relative;
			overflow: hidden;
		}
		
			#footer #categories h2 {
				color: #393939;
				font-family: Helvetica, Verdana, sans-serif;
				font-size: 18px;
				font-style: normal;
				font-weight: normal;
				text-transform: lowercase;
				margin: 20px 0 12px 18px;
				padding: 0;
			}
			
			#footer #categories ul {
				margin: 10px 0 0 40px;
				padding: 0 0 0 10px;
				border-left: 4px solid #b6b6b6;
				float: left;
				overflow: hidden;
			}
			
				#footer #categories ul li {
					list-style: none;
					margin: 0;
					padding: 4px 0 2px 0;
				}
				
		#copyright {
			margin: 0 auto 0 auto;
			padding: 30px 0 40px 60px;
			width: 960px;
		}
		
			#copyright ul {
				margin: 0;
				padding: 0;
			}
			
				#copyright ul li {
					float: left;
					padding: 0 20px 0 20px;
					list-style: none;
				}
	
/*	Single Content Page: Narrow
*******************************************************/

#content-narrow {
	background: #fff;
	border-right: 1px solid #e8e8e8;
	margin: 0;
	padding: 30px;
	float: left;
	width: 590px;
}

	#content-narrow h2 {
		border-bottom: 3px solid #e8e8e8;
		font-family: Helvetica, Verdana, sans-serif;
		font-size: 24px;
		font-weight: lighter;
		line-height: 30px;
		margin: 10px 0 10px 30px;
		padding: 0 0 4px 30px;
	}

	#content-narrow .post-image {
		float: left;
		width: 90px;
		margin: 10px 30px 15px 10px;
		padding: 0;
	}
		
	#content-narrow ul.post-meta {
		clear: both;
		margin: 0 0 0 30px;
		padding: 0;
	}

		#content-narrow ul.post-meta li {
			float: left;
			list-style: none;
			margin: 0;
			padding: 0 20px 0 20px;
			color: #a4a4a4;
			text-transform: uppercase;
		}

/*	Single Content Page: Wide
*******************************************************/

#content-wide {
	background: #fff;
	margin: 0;
	padding: 50px;
	width: 860px;
}

	#content-wide h2 {
		border-bottom: 3px solid #e8e8e8;
		font-family: Helvetica, Verdana, sans-serif;
		font-size: 24px;
		font-weight: lighter;
		line-height: 30px;
		margin: 10px 0 10px 30px;
		padding: 0 0 4px 30px;
	}

	#content-wide .post-image {
		float: left;
		width: 90px;
		margin: 10px 30px 15px 10px;
		padding: 0;
	}
		
	#content-wide ul.post-meta {
		clear: both;
		margin: 0 0 0 30px;
		padding: 0;
	}

		#content-wide ul.post-meta li {
			float: left;
			list-style: none;
			margin: 0;
			padding: 0 20px 0 20px;
			color: #a4a4a4;
			text-transform: uppercase;
		}
		
/*	Search Box & Forms
*******************************************************/

label.screen-reader-text { display: none; }

input {
	background: #fafafa;
	border: 3px solid #e8e8e8;
	padding: 5px;
	outline: none;
	color: #999999;
}

	input:focus { border: 3px solid #c8c8c8;}
	input:hover { border: 3px solid #d8d8d8; }

textarea {
	background: #fafafa;
	border: 3px solid #e8e8e8;
	padding: 10px;
	outline: none;
	color: #999999;
}

	textarea:focus { border: 3px solid #c8c8c8;}
	textarea:hover { border: 3px solid #d8d8d8; }

input[type=submit] {
	background: #fafafa;
	border: 3px solid #e8e8e8;
	padding: 5px;
	margin: 0 0 0 10px;
	outline: none;
	color: #888;
	font-weight: bold;
	text-transform: uppercase;
}

	input[type=submit]:hover { border: 3px solid #d8d8d8; }
	
/* =PageNavi
-------------------------------------------------------------- */
 
/* Use !important to override PageNavi CSS */

.wp-pagenavi {
	margin: 40px 20px 20px 50px;
}
 
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active {
	color: #fff !important;
	background: #226fb0 !important;
	padding: 5px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none !important;
}
.wp-pagenavi a:hover {
	background: #4690cf !important;
	border: none !important;
}
.wp-pagenavi span.pages {
	color: #fff !important;
	background: #226fb0 !important;
	padding: 5px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none !important;
}
.wp-pagenavi span.current {
	color: #fff !important;
	background: #1a7cd0 !important;
	padding: 5px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none !important;
}
.wp-pagenavi span.extend {
	color: #fff !important;
	background: #226fb0 !important;
	padding: 5px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: none !important;
}