/*
----------------------------------------
The Creative Kind
     Author:    Dennis Eusebio
---------------------------------------- */

/* zeros out everything */
@import "whitespace-reset.css";

body {
	background: #f9f9f9;
	font: .8em/160% Arial, Verdana, sans-serif;
	color: #333;
}

p { margin-bottom: .7em; }
small { font-size: 90%; }

/* links
---------------------------------------- */
a:link { color: #333; outline: 0; }
a:visited { color: #333; outline: 0; }
a:hover { color: #00ccff; outline: 0; }
a:active { color: #333; outline: 0; }

/* headers
---------------------------------------- */
h1, h2, h3, h4 {

}
h2 { font-size: 170%; }
h3 { font-size: 120%; }


/* universal
---------------------------------------- */
.container {
	margin: 0 auto;
	width: 950px;
}
	.right_column {
		float: left;
		width: 950px;
		background: url(../images/bg_content_right.gif) repeat-y;
	}
	.left_column {
		float: left;
		width: 950px;
		background: url(../images/bg_content_left.gif) repeat-y;
	}

#nav {
	float: left;
	width: 100%; 
	background: #333;
}
	#nav .container { padding: 0 0 20px 0; } /* ie being a bitch */
	#logo a:link, #logo a:visited, #logo a:hover, #logo a:active {
		margin: 20px 120px 20px 15px;
		text-indent: -9999px;
		float: left;
		width: 113px; height: 52px;
		background: url(../images/logo.gif) no-repeat;
		display: inline;
	}
		#logo a:hover { background-position: 0 -52px; }
	#nav ul {
		margin-top: 37px;
		float: left;
		width: 702px;
	}
		#nav ul li { display: inline; }
		#nav ul li a:link, #nav ul li a:visited, #nav ul li a:hover, #nav ul li a:active {
			margin-right: 50px;
			text-indent: -9999px;
			float: left;
			height: 15px;
			display: inline;
			overflow: hidden;
		}
			#nav_about { width: 35px; background: url(../images/nav_about.gif) no-repeat; }
			#nav_blog { width: 27px; background: url(../images/nav_blog.gif) no-repeat; }
			#nav_business { width: 75px; background: url(../images/nav_business.gif) no-repeat; }
			#nav_creatives { width: 78px; background: url(../images/nav_creatives.gif) no-repeat; }
			#nav_collective { width: 110px; background: url(../images/nav_collective.gif) no-repeat; }
			#nav_contact { width: 45px; background: url(../images/nav_contact.gif) no-repeat; }
			
			#nav ul li a:hover, #nav .selected { background-position: 0 -15px; }
#content {
	padding: 30px 0;
	float: left;
	width: 100%;
	background: #fff;
}
	.right_column .container { background: url(../images/bg_content_right.gif) repeat-y; }
	
	#title_area h1 {
		margin: 0 0 30px 0;
		text-indent: -9999px;
		float: left;
		width: 560px; height: 52px;
		display: inline;
	}
		#title_blog { background: url(../images/title_blog.gif) 15px 0 no-repeat; }
		#title_about { background: url(../images/title_about.gif) 15px 0 no-repeat; }
		#title_contact { background: url(../images/title_contact.gif) 15px 0 no-repeat; }
		#title_business { background: url(../images/title_business.gif) 15px 0 no-repeat; }
		#title_creatives { background: url(../images/title_creatives.gif) 15px 0 no-repeat; }
		#title_collective { background: url(../images/title_collective.gif) 15px 0 no-repeat; }
	
	.date { margin: 0; font-size: 90%; color: #999; }

#footer {
	padding: 20px 0;
	float: left;
	width: 100%;
	border-top: 1px solid #ddd;
	color: #999;
	font-size: 90%;
}
	#footer .container { 
		padding: 0 15px;
		width: 920px;
	}
	#footer p { display: inline; }
	#footer .copyright { margin-right: 20px; }
	#footer a:link, #footer a:visited, #footer a:hover, #footer li a:active {
		margin-right: 10px;
		font-weight: bold;
		color: #666;
	}	
		#footer a:hover { color: #333; }
	
	
/* page specific
---------------------------------------- */	
/* index */
#marketing_header {	
	float: left;
	width: 100%;
	background: #fff url(../images/bg_marketing_header.gif) repeat-x;
	border-bottom: 1px solid #ddd;
}	
	#btn_forcreatives, #btn_forbusiness {
		float: left;
		width: 460px; height: 254px;
	}
		#btn_forcreatives { background: url(../images/feature/bg_creative.jpg) no-repeat; }
		#btn_forbusiness { background: url(../images/feature/bg_business.jpg) no-repeat; }
	#btn_forcreatives h2 a:link, #btn_forcreatives h2 a:visited, #btn_forcreatives h2 a:hover, #btn_forcreatives h2 a:active {
		margin-top: 95px;
		text-indent: -9999px;
		float: left;
		width: 460px; height: 70px;
		background: #333 url(../images/feature/btn_creative_ratliff.gif) no-repeat;
	}
	
	#btn_forbusiness h2 a:link, #btn_forbusiness h2 a:visited, #btn_forbusiness h2 a:hover, #btn_forbusiness h2 a:active {
		margin-top: 95px;
		text-indent: -9999px;
		float: left;
		width: 460px; height: 70px;
		background: #333 url(../images/feature/btn_forbusiness.gif) no-repeat;
	}
		#btn_forcreatives h2 a:hover, #btn_forbusiness h2 a:hover { background-position: 0 -70px; }

	#btn_creativecollective a:link, #btn_creativecollective a:visited, #btn_creativecollective a:hover, #btn_creativecollective a:active {
		text-indent: -9999px;
		float: left;
		width: 950px; height: 92px;
		background: url(../images/btn_collective.gif) no-repeat;
	}
		#btn_creativecollective a:hover { background-position: 0 -92px; }

/* blog */
#blog {
	float: left;
	width: 575px;
}
	#explanation {
		padding: 40px 0 40px 55px;
		float: left;
		width: 473px;
	}
		#explanation a:link, #explanation a:visited, #explanation a:hover, #explanation a:active {
			text-indent: -9999px;
			float: left;
			width: 473px; height: 87px;
			background: url(../images/btn_about.gif)  no-repeat;
		}
		#explanation a:hover { background-position: 0 -87px; }

	#title_recentposts {
		margin: 20px 0;
		text-indent: -9999px;
		float: left;
		width: 575px; height: 17px;
		background: url(../images/title_recentposts.gif) no-repeat;
	}
	#title_category {
		margin-bottom: 20px; padding-bottom: 10px;
		border-bottom: 1px solid #ddd;
	}
	
	#blog_entries {
		padding: 0 15px;
		float: left;
		width: 545px;
	}
		.blog_entry {
			padding: 5px 0;
			float: left;
			width: 545px;
			border-bottom: 1px solid #ddd;
		}		
		.blog_entry h2 { font-size: 100%; }
		#blog_entries .feature h2 { font-size: 170%; line-height: 120%; }
			.blog_content {
				padding: 10px 0 20px 0;
			}
			.blog_content a:link, .blog_content a:visited, .blog_content a:hover, .blog_content a:active {
				text-decoration: underline;
				font-weight: bold;
			}
			.blog_meta {
				margin: 10px 0; padding: 10px 15px;
				background: #f7f7f7;
				font-size: 90%;
				border: 1px solid #eee;
			}
			.blog_meta p { margin: 0; display: inline; }
			.icon_comment {
				margin-right: 20px; padding-left: 25px;
				background: url(../images/icon_comment.gif) 0 50% no-repeat;
			}
			.blog_meta a:link, .blog_meta a:visited, .blog_meta a:hover, .blog_meta a:active {
				font-weight: bold;
			}
		.small { 
			padding: 10px;
			width: 525px;
		}
			.meta_small {
				float: left;
				width: 105px;
			}
			.entry_preview {
				float: right;
				width: 400px;
			}
				.meta_small a:link, .meta_small a:visited, .meta_small a:hover, .meta_small a:active {
					 font-weight: bold; 
				}
				
		.pagination {
			margin: 20px 0;
			float: left;
			width: 575px;
			text-align: center;
		}
			.pagination div { display: inline; }
			.pagination .pages { margin: 0 20px; }
			.pagination a:link, .pagination a:visited, .pagination a:hover, .pagination a:active {
				font-weight: bold;
			}
		.backtomain {
			margin-bottom: 20px; padding-bottom: 5px;
			float: left;
			width: 575px;
			border-bottom: 1px solid #ddd;
			font-size: 90%;
		}
		#comments {
			float: left;
			width: 575px;
		}
			#comment_count {
				margin: 0 15px; padding: 10px 15px;
				float: left;
				width: 515px;
				background: #f7f7f7;
				display: inline;
			}
			#comment_count a:link, #comment_count a:visited, #comment_count a:hover, #comment_count a:active {
				font-weight: bold;
			}
			.comment {
				margin: 20px 30px;
				float: left;
				width: 515px;		
				display: inline;
			}
				.comment_content {
					padding: 20px;
					background: #f7f7f7;
				}
				.meta_comment { padding: 5px 20px; font-size: 90%; }
				.meta_comment a:link, .meta_comment a:visited, .meta_comment a:hover, .meta_comment a:active {
					font-weight: bold;
				}
				.comment_date { margin-left: 10px; color: #999; }
			.none {
				text-align: center;
				font-weight: bold;
				font-size: 120%;
			}
		#f_addcomment {
			padding: 0 30px;
			float: left;
			width: 515px;
		}
			#f_addcomment h2 { margin-bottom: 20px; }
			#f_email, #f_name, #f_url, #f_comment {
				padding: 5px;
				width: 505px;
				background: #f7f7f7;
			}
			#f_comment { height: 100px; }
			#f_sendupdates { margin-left: 5px; }
			.textile {
				margin-top: 20px;
				font-size: 90%;
				color: #999;
				line-height: 90%;
			}

#sidebar {
	padding: 0 20px 20px 20px;
	float: right;
	width: 297px;
}	
	#sidebar .block {
		padding: 20px 0;
		float: left;
		width: 297px;
		border-bottom: 1px solid #ddd;
	}
		#sidebar .block p { margin: 0; }
		#sidebar .block h3 { margin-bottom: 10px; }
		#sidebar .block img { display: block; }
		#f_subscribe { margin: 10px 0; }	
			#email_address {
				margin-bottom: 5px; padding: 5px;
				width: 285px;
				border: 1px solid #ddd;
				background: #fff;
				font-size: 120%;
				color: #999;
			}
		.icon_feed {
			padding: 2px 0 2px 25px;
			background: url(../images/icon_feed.gif) 0 50% no-repeat;
			font-weight: bold;
		}
		#categories a:link, #categories a:visited, #categories a:hover, #categories a:active {
			float: left;
			width: 148px;
		}
			#categories a.selected { font-weight: bold; }
		.icon_flickr { 
			padding-left: 25px;
			background: url(../images/icon_flickr.gif) 0 50% no-repeat;
			float: left;
			width: 272px;
		}
		#flickr img {
			margin: 0 20px 20px 0;
			float: left;
			width: 75px;
			display: inline;
		}
		#sidebar #interviews { border-bottom: none; }
			#interviews .interview {
				float: left;
				width: 297px; height: 91px;
			}
				#interviews a:link, #interviews a:visited, #interviews a:hover, #interviews a:active {
					margin-top: 35px; padding: 1px 4px;
					background: #333;
					color: #fff;
					float: left;
					font-weight: bold;
				}
				#interviews a:hover { color: #f7f7f7; background: #666;}

/* about */
.left_column #sidebar {
	float: left;
}
#about {
	float: right;
	width: 575px;
}
	#about blockquote {
		margin: 20px 0;
		font-size: 200%;
		line-height: 130%;
	}
	#about_content { padding: 0 15px; }
	#about_title {
		margin: 20px 0;
	}
	#about_content h3 { margin-bottom: 5px; }
	
#staff_bios {
	float: left;
	width: 545px;
}
	#staff_bios h2 {
		margin: 20px 0;
	}
	.bio {
		padding-right: 20px;
		float: left;
		width: 252px;
	}

/* contact */
	#contact_content { padding: 0 15px; }
	#contact_title { margin-top: 20px; }
	#f_sendemail {
		margin: 20px 0; padding: 20px;
		border: 1px solid #ddd;
	}
		#f_send_name, #f_send_email, #f_send_message {
			padding: 5px;
			width: 490px;
			background: #f7f7f7;
		}
			#f_send_message { height: 100px; }

#thankyou {
	margin: 20px 0; padding: 20px 20px 20px 65px;
	border: 1px solid #ddd;
	background: url(../images/icon_success.gif) 20px 15px no-repeat;
}
	#thankyou p { margin: 0; }
	#thankyou h1 {
		margin-bottom: 3px;
		font-size: 170%;
	}

/* for business */
#for_business {
	padding: 0 15px;
	float: left;
	width: 545px;
}
	#for_business h3 {
		margin-bottom: 15px;
	}
	.specialties {
		margin-top: 15px;
		float: left;
		width: 545px;
	}
		.specialties ul {
			float: left;
			width: 545px;
		}
		.specialties ul li {
			float: left;
			width: 181px;
		}
	#sidebar #business p { margin-bottom: .8em; }
	.icon_pdf {
		padding: 2px 0 2px 25px;
		background: url(../images/icon_pdf.gif) 0 50% no-repeat;
		font-weight: bold;
	}
	#btn_contact {
		text-indent: -9999px;
		float: left;
		width: 297px; height: 41px;
		background: url(../images/btn_contact.gif) 0 0 no-repeat;
	}
		#btn_contact:hover { background-position: 0 -41px; }

/* for creatives */
#for_creatives {
	padding: 0 15px;
	float: left;
	width: 545px;
}	
	#register_creative {
		margin-top: 25px;
		float: left;
		width: 545px;
	}		
	#for_creatives h3 { margin-bottom: 15px; }
		#register_creative form {
			margin-top: 15px; padding: 20px;
			border: 1px solid #ddd;
		}
		#r_name, #r_phone, #r_email, #r_message, #c_name, #c_phone, #c_email, #c_message {
			padding: 5px;
			width: 490px;
			background: #f7f7f7;
		}
		#register_creative a { font-weight: bold; }
		#register_creative h3 {
			margin-bottom: 10px; padding-bottom: 5px;
			border-bottom: 1px solid #eee;
		}
		#register_creative #f_candidate {
			margin-top: 20px;
		}
	.action {
		padding: 10px 0 0 0;
		border-top: 1px solid #eee;
	}
	.required { font-size: 90%; font-weight: bold; color: red; }
	
	#terms_content {
		padding: 40px 0;
	}
		#terms_content h1 {
			margin-bottom: 20px;
			font-size: 180%;
		}
		#terms_content h3 { margin-bottom: .7em; }
	
/* collective */
#collective_process {
	margin: 15px 20px;
}
#collective_process li {
	list-style: disc;
}
	#collective_process li a { font-weight: bold; }
	#formula {
		margin: 20px; padding: 20px;
		font-size: 120%;
		background: #eee;
	}
		#formula p { margin: 0; }