/*
	File:			custom.css
	Description:	Custom styles for Thesis + KolFolio 1.0
	More Info:		http://diythemes.com/thesis/rtfm/custom-css/
*/

/*
	NOTE:
	The CSS below contains the styles to build
	the KolFolio skin. I HIGHLY recommend
	you don't edit the default Kolfolio CSS.
	
	Instead, do this:
	
	You can override any of the KF CSS below by adding
	'.custom' in front of it.
	
	For example, if you wanted to change the background
	color of #header to pink (I won't judge), simply
	put this in the designated area below:
	
	.custom #header { background: pink }
	
	...this will override the default #header styles.
	
	Customizing KolFolio this way will be easier, and help make
	future updates to the skin easier on everybody.
*/

/* USE THIS SPACE BELOW FOR ALL EXTRA CSS */



/* I WOULDN'T EDIT ANYTHING BELOW */


/**************
 * G L O B A L
 */

body.custom { background: url(images/bg.png) }

.custom a, #sidebars a, #sidebars a:hover {
	outline: none;
	text-decoration: none;
	transition: color .3s linear;
	-moz-transition: color .3s linear;
	-webkit-transition: color .3s linear
}
	.custom a:hover { color: #888 }

#page { background: transparent }


/* Buttons */

.button,
.custom input[type="submit"], .custom a.more-link, #commentform input.form_submit, #cancel-comment-reply-link {
	border: 1px solid rgba(0, 0, 0, .2);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	letter-spacing: normal;
	padding: .5em .8em;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	text-transform: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3)
}
	.custom .button.red,
	.custom a.more-link, #cancel-comment-reply-link {
		background: #c60000;
		background: linear-gradient(top, #c60000 0%, #b20000 100%);
		background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000));
		background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%)
	}
	.custom .button.orange {
		background: #f99015;
		background: linear-gradient(top, #f99015 0%, #f76c0f 100%);
		background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f));
		background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%)
	}
	.custom .button.green,
	.custom input[type="submit"], #commentform input.form_submit {
		background: #30a146;
		background: linear-gradient(top, #30a146 0%, #249334 100%);
		background: -moz-linear-gradient(top, #30a146 0%, #249334 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334));
		background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%)
	}
	.custom .button.blue {
		background: #16a4c8;
		background: linear-gradient(top, #16a4c8 0%, #1086b6 100%);
		background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6));
		background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%)
	}
	.custom .button.gray {
		background: #c2c2c2;
		background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
		background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae));
		background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%)
	}
	.custom .button.dark {
		background: #464646;
		background: linear-gradient(top, #464646 0%, #343434 100%);
		background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434));
		background: -webkit-linear-gradient(top, #464646 0%, #343434 100%)
	}
	.custom .button:hover,
	.custom input[type="submit"]:hover, .custom a.more-link:hover, #commentform input.form_submit:hover, #cancel-comment-reply-link:hover { color: #fff; opacity: .5 }


/* Rounding */

.button, a.more-link, #message_wrapper, .custom input, .custom textarea, #cancel-comment-reply-link { border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px }


/* Non-specific shortcodes */

.half_block { float: left; margin: 0 2%; width: 46% }


/************
 * F O R M S
 */

.custom input, .custom textarea {
	background: #fff;
	border: 1px solid #d5d5d5;
	padding: .5em .8em;
	box-shadow: inset 0px -1px 0px rgba(0, 0, 0, .03);
	-moz-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, .03);
	-webkit-box-shadow: inset 0px -1px 0px rgba(0, 0, 0, .03)
}

.custom .name { background: #fff url(images/name.png) no-repeat center left }

.custom .email { background: #fff url(images/email.png) no-repeat center left }

.custom input.name, .custom input.email { padding-left: 2.2em }


/**************
 * H E A D E R
 */

#header {
	background-position: 2.2em 0;
	border-bottom: 1px solid #d5d5d5;
	margin-bottom: 2.2em;
	padding: 0 2.2em 2.2em;
	position: relative
}

.menu { position: absolute; right: .8em; top: 2.4em; width: auto }
	.custom .menu ul a { width: auto }
	.menu li { margin-left: 2em }
		.custom .menu li a {
			background: none;
			font-size: 1.7em;
			letter-spacing: normal;
			line-height: 1.412em; /*24px*/
			text-transform: none
		}
	.custom .current-menu-item a { cursor: default }
	.menu .current a:hover, .menu .current-cat a:hover, .menu .current-menu-item a:hover { background: none }

.sub-menu {
	background: #fff;
	border: 1px solid #d5d5d5;
	border-radius: 0 3px 3px 3px;
	-moz-border-radius: 0 3px 3px 3px;
	-webkit-border-radius: 0 3px 3px 3px;
	box-shadow: 0 1px 1px #d5d5d5;
	-moz-box-shadow: 0 1px 1px #d5d5d5;
	-webkit-box-shadow: 0 1px 1px #d5d5d5
}
	.sub-menu li { margin: 0 }
		.custom .sub-menu li a { border-bottom: 1px solid #d5d5d5; color: #232323; font-size: 1.6em; padding: .875em /*12px*/ }
			.sub-menu li a:hover { background: none; color: #b11623 }

.custom li.drop:hover, .custom li.drop a:hover {
	background: #fff;
	border-radius: 3px 3px 0 0;
	-moz-border-radius: 3px 3px 0 0;
	-o-border-radius: 3px 3px 0 0;
	-webkit-border-radius: 3px 3px 0 0;
	box-shadow: 0 1px 1px #d5d5d5;
	-moz-box-shadow: 0 1px 1px #d5d5d5;
	-o-box-shadow: 0 1px 1px #d5d5d5;
	-webkit-box-shadow: 0 1px 1px #d5d5d5
}


/*************************************
 * F O L I O  +  F E A T U R E  B O X
 */

#feature_box {
	background: none;
	border-bottom: 1px solid #d5d5d5;
	margin-bottom: 2.2em;
	padding: 0 2.2em 2.2em;
	text-align: center
}
	#feature_box p { margin-bottom: 0 }
	#feature_box form { margin-top: .8em }
		#feature_box input { margin-right: .3em }
	#feature_box span { letter-spacing: 3px; text-transform: uppercase }


/****************
 * C O N T E N T
 */

.custom .post_box { padding-top: 2.2em; margin: 0 2.2em }

.headline_area h1, .headline_area h2, #archive_intro h1, .custom .format_text h3, .custom .format_text h4 { font-weight: bold }

.format_text li { margin-bottom: .6em }

.format_text input[type="submit"] { border: 1px solid rgba(0, 0, 0, 0.2) }

.custom .headline_meta { font-style: normal }
	.custom .headline_meta span, .custom .headline_meta abbr { letter-spacing: normal; text-transform: none }

.post_image { background: #fff; border: 1px solid #d5d5d5; padding: 5px }


/******************
 * C O M M E N T S
 */

#comments { border-top: 1px solid #d5d5d5; clear: both }

#commentform p a, dl#comment_list dd p.reply a:hover, .prev_next a:hover { text-decoration: none }

.comments_intro { border-bottom: 1px solid #d5d5d5 }
	.comments_intro p { text-align: center }
	.comments_intro span { font-size: inherit }
	.comments_intro a:hover, .custom #commentform p a:hover, .prev_next a:hover, dl#comment_list dd p.reply a:hover { color: #888 }

.comments_intro, #respond_intro { margin: 0; padding: 2.2em }

.comments_intro p, #respond_intro p { font-size: 1.7em; line-height: 1.412em /*24px*/ }

span.bracket { display: none }

span.avatar { border: 3px solid #fff; float: left; margin-right: 1em }

.avatar img { margin-left: 0 }

span.avatar, .avatar img {
	border-radius: 35px;
	-moz-border-radius: 35px;
	-o-border-radius: 35px;
	-webkit-border-radius: 35px;
	box-shadow: 0 2px 2px #d5d5d5;
	-moz-box-shadow: 0 2px 2px #d5d5d5;
	-o-box-shadow: 0 2px 2px #d5d5d5;
	-webkit-box-shadow: 0 2px 2px #d5d5d5
}

span.comment_time { display: block }

#comment_list { margin-bottom: 0 }
dl#comment_list, #commentform { border: 0 }
	dl#comment_list dl dd .format_text, dl#comment_list dd .format_text, dl#comment_list dl dd.bypostauthor > .format_text { padding-top: .625em /*10px*/ }
	dl#comment_list dl.children dd .format_text { padding-top: 1.375em }
	dl#comment_list dt { padding-top: 2.2em }
	dl#comment_list dt, dl#comment_list dd { padding-left: 2.2em; padding-right: 2.2em }
		dl#comment_list dd { border-bottom: 1px solid #d5d5d5 }
			dl#comment_list dd:last-child { border: 0 }
	dl#comment_list .bypostauthor { background: none }
	dl#comment_list dt .comment_author { font-weight: normal }

dl#comment_list dl dt.bypostauthor, dl#comment_list dl dd.bypostauthor > .format_text { border-color: #b11623 }

dl#comment_list dt a:hover { color: #232323; text-decoration: none }

#commentform { padding: 0 2.2em 2.2em }
	#commentform label { color: #666; font-size: .8em; letter-spacing: 3px; text-transform: uppercase }
	#commentform input.form_submit { font-weight: normal }

#commentform input, #commentform textarea {
	background: #fff;
	border: 1px solid #d5d5d5;
	color: #333;
	padding: .5em;
	box-shadow: 0 0 2px #d5d5d5;
	-moz-box-shadow: 0 0 2px #d5d5d5;
	-o-box-shadow: 0 0 2px #d5d5d5;
	-webkit-box-shadow: 0 0 2px #d5d5d5
}

#cancel-comment-reply-link { font-size: 14px; letter-spacing: 3px; padding: 4px 6px; text-transform: uppercase }

#respond { border-top: 1px solid #d5d5d5; margin: 0; padding-top: 2.2em }
	#respond_intro p { color: #232323; font-size: 18px; letter-spacing: 3px; text-transform: uppercase }

.custom .post_nav { border-top: 1px solid #d5d5d5; padding: 2.2em }
	.custom .post_nav p,
	.custom .post_nav a { font-size: 14px; letter-spacing: 3px; text-transform: uppercase }

.prev_next { padding: 0 0 2.2em 0 }
	.prev_next p { font-size: 13px; line-height: 1em }


/****************
 * G A L L E R Y
 */

.gallery .post_box { margin: 0 }

#gallery_area { list-style: none; width: 100% }
	#gallery_area .image { background: url(images/grid.png); height: 260px; overflow: hidden; padding: 20px 20px 0; position: relative }
	#gallery_area .image_wrapper { background-position: top center; height: 260px; width: 100% }
	#gallery_area .overlay {
		background: rgba(0, 0, 0, .7);
		cursor: pointer;
		height: 280px;
		left: 0;
		position: absolute;
		text-align: center;
		top: 0;
		width: 100%
	}
		#gallery_area .overlay p { margin-top: 140px }
		#gallery_area .overlay a {
			background: #eee;
			color: #333;
			font-size: 13px;
			margin-right: 15px;
			padding: 4px 7px 3px;
			text-transform: uppercase
		}
			#gallery_area .overlay a:hover { color: #b11623 }
	#gallery_area li {
		float: left;
		margin: 0 1.1% 22px 1%;
		min-height: 430px;
		text-align: center;
		width: 31%
	}
	#gallery_area h3 { margin-top: 1em }
	#gallery_area p { color: #666; font-size: .938em /*14px*/; line-height: 1.533em /*23px*/ }

#message_wrapper {
	background: #fff;
	border: 1px solid #d5d5d5;
	padding: 20px;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1)
}
	#message_wrapper h3 { font-size: 1.125em /*18px*/; line-height: 1.444em /*26px*/; margin-top: 0 }
	#message_wrapper p { font-size: .875em /*14px*/; line-height: 1.571em }
	#message_wrapper input { font-size: .875em /*14px*/; margin-top: .8em /*11px*/ }


/* Portfolio Page */

.portfolio-page .headline_meta { display: none } /* yikes */

.portfolio-page dl#comment_list { margin: 0 auto; width: 60% }

.portfolio-page #respond { margin: 0 auto; width: 60% }

.portfolio-page dl#comment_list #respond { width: 100% }

.portfolio-page #cancel-comment-reply-link { display: inline-block; float: none; margin-bottom: .5em /*8px*/ }

.portfolio-page .post_nav { text-align: center }

.portfolio_slider {
	background: url(images/grid.png);
	float: right;
	height: 380px;
	overflow: hidden;
	padding: 20px 0 0 20px;
	position: relative;
	margin-left: 30px;
	width: 380px
}
	.portfolio_slider li {
		background-position: top center;
		float: left;
		height: 380px;
		list-style: none;
		position: absolute;
		width: 360px
	}
		.portfolio_slider li.show { z-index: 500 }
	.portfolio_slider img {
		cursor: default;
		box-shadow: 0 0 10px #000;
		-moz-box-shadow: 0 0 10px #000;
		-o-box-shadow: 0 0 10px #000;
		-webkit-box-shadow: 0 0 10px #000
	}


/****************
 * S I D E B A R
 */

.sidebar h3 { font-variant: normal; font-weight: normal; letter-spacing: 3px; text-transform: uppercase }

.custom .sidebar ul.sidebar_list { padding: 2.2em 2.2em 0 2.2em }


/* Freelance Widget */

li.freelance { background: url(images/note.png) repeat-y top left; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.13); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.13); -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.13) }
	li.freelance .freelance_wrapper { padding: 2.071em 1.571em 1.571em 2.786em }
	li.freelance h3 { margin-bottom: 6px }
		li.freelance h3.available { color: #2a923d }
		li.freelance h3.booked { color: #b11623 }
	li.freelance p { margin-bottom: 10px; line-height: 23px; overflow: hidden }
	li.freelance a.button { float: right }


/**************
 * F O O T E R
 */

#footer { border-top: 1px solid #d5d5d5; overflow: hidden; padding: 2.2em 2.2em 0; text-align: left }
	#footer p.copyright { float: right }
	#footer a:hover { border: 0 }