/* ==============================================================
Filename: default.css
Template: Default Template
Author: Chris Schmitz
Contact: chris@beperceived.com
Date Created: 10/5/2009
Media: Screen
-----------------------------------------------
Notes: The main style information for the Perception website
http://www.beperceived.com
============================================================== */

/* --------------------------------------------

Table of Contents

	1. Main Container
	2. Header
		A. Client Login
		B. Main Navigaiton
	2. Homepage
		A. Featured Projects
	3. Portfolio Page
	4. Inner-Portfolio Pages
	5. General Page 
		A. Left Column
		B. Sidebar
	6. Contact Page
	7. Secondary Pages
	8. Footer
	9. Extras
	
-------------------------------------------- */

body { background: #fbfbfb url(../images/background.jpg) top center fixed no-repeat; }

/*  Main Container Styles  */
#container { margin: 35px auto; width: 900px; }

/*  Header Styles  */
#header { margin: 0 0 40px; }
#header h1 { float: left; }

	/*  Client Login Styles  */
	#client-login {
		background: #FFC82F;
		display: none;
		height: 110px;
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
	
	#client-login #login-container { margin: 0 auto; width: 900px; }
	#client-login #client-login-form { clear: both; float: left; width: 450px; }
	#client-login #client-login-content { float: right; overflow: hidden; width: 450px; }
	#client-login #client-login-content { float: right; overflow: hidden; width: 450px; }
	#client-login h4 { color: #fff; padding: 10px 0 8px; }
	#client-login #client-login-form h4 { margin-bottom: 5px; }
	#client-login #client-login-content h4 { margin-left: 5px; }	
	#client-login p { color: #333; font-size: 12px; width: 450px; }
	#client-login a { color: #fff; text-decoration: underline; }
	#client-login a:hover { color: #eee; }
	#client-login form {
		color: #fff;
		font: 14px bold Verdana;
		height: 100px;
		width: 424px;
	}

	#client-login form input {
		background: #666;
		border: 2px solid;
		border-color: #aaa #eee #eee #aaa;
		color: #fff;
		font-weight: bold;
		padding: 3px;
		width: 198px;
	}

	#client-login form input.untouched { color: #aaa; }
	#client-login form input:focus { background: #777; border-color: #bbb #fff #fff #bbb; }
	#client-login form div.submit { background: transparent; border: none; float: right; margin: 0 2px 0 0; }

	#client-login form input.submit {
		background: #fff;
		border-color: #eee #aaa #aaa #eee;
		border-width: 2px;
		color: #333;
		cursor: pointer;
		display: block;
		height: 27px;
		margin: 5px 0 0;
		padding: 0;
		width: 100px;
	}

	#client-login form div { float: left; margin: 0; padding: 0; }
		#client-login form div.nudge { margin: 0 6px 0 0; }
	#client-login form input.submit:hover { background: #eee; }
	#client-login form input.submit:active { border-color: #A1A1A1 #eee #eee #A1A1A1; }

	#top-bar { background: #FFC82F; height: 8px; }
		#top-bar div { position: relative; margin: 0 auto; width: 900px; }
		#top-bar span {
			background: #FFC82F;
			color: #fff;
			cursor: pointer;
			font-size: 14px;
			font-weight: bold;
			height: 20px;
			text-align: center;
			padding: 13px 12px 10px;
			position: absolute;
				right: 0;
		}

	/*  Main Navigation Styles 	*/
	ul.main-nav { float: right; padding: 40px 5px 0 0; }
		ul.main-nav a { color: #999; padding: 2px 7px; }
		ul.main-nav li.current_page_item a { background: #ffc82f; color: #fff; }
		ul.main-nav a:hover { background: #ddd; background-color: rgba(0, 0, 0, .1); color: #444; }
		ul.main-nav li.current_page_item a:hover { background: #ffc82f; color: #fff; }

	ul.main-nav li {
		display: inline;
		font-size: 1.7em;
		font-weight: bold;
		margin: 0 2px;
	}
	

/*  Homepage Styles  */
#love-home {
	height: 250px;
	overflow: visible;
	padding: 0 0 0 63px;
	width: 900px;
}

p#intro {
	font-size: 20px;
	font-weight: bold;
	margin: 25px 0 45px 0;
	text-align: center;
	width: 884px;
}

	/*  Featured Projects Styles  */
	#featured-projects li img { cursor: pointer; position: relative; width: 274px; }

	#featured-projects li a {
		cursor: pointer;
		display: block;
		position: relative;
		width: 274px;
	}

	ul#featured-projects li {
		float: left;
		height: 161px;
		position: relative;
		width: 300px;
	}

	#featured-projects li span {
		background: #000;
		color: #fff;
		font-size: 1.6em;
		font-weight: bold;
		height: 95px;
		padding: 7px 10px 0 10px;
		position: absolute;
		  top: 5px;
		  left: 5px;
		width: 254px;
	}

	ul#featured-projects li small {
		display: block;
		font-size: 12.5px;
		font-weight: normal;
		line-height: 15px;
		margin: 9px 0 0;
	}

	ul#featured-projects li img { border: 5px solid #000; }


/*  Portfolio Page Styles  */
p.service-description { float: left; margin: 0 15px 0 5px; width: 270px; }

ul.thumb-list { float: right; margin: 0 0 45px 10px; width: 600px; }
	ul.thumb-list li { display: block; float: left; margin: 5px 6px 2px 5px; }
		ul.thumb-list li a {
			display: block;
			height: 88px;
			position: relative;
			width: 88px;
		}

ul.thumb-list li a img {
	border: 3px solid #ccc;
	outline: 1px solid #bbb;
	float: left;
	position: relative;
}

ul.thumb-list li a div.thumb-back {
	background: #000;
	cursor: pointer;
	font-weight: bold;
	height: 80px;
	position: absolute;
		top: 3px;
		left: 3px;
	text-align: center;
	margin: 0;
	width: 80px;
	z-index: 100000;
}

div.thumb-back p { color: #FED04D; font-size: 12px; padding: 12px 0 0; }


/*  Inner-Portfolio Page Styles  */
h2.portfolio-title span {
	color: #C3C2C2;
	font-size: 80%;
	position: absolute;
		right: 0;
		top: 29px;
	margin: 10px 25px 0;
}

#left-column img, #right-column img {
	background-color: rgba(225, 225, 225, .4);
	border: 1px solid;
	border-color: rgba(0, 0, 0, .2);
	padding: 9px;
}

#right-column img { float: left; margin: 0 0 15px; }

div#left-column {
	float: left;
	margin: 25px 0;
	padding: 0 15px 0 5px;
	width: 400px;
}

div#right-column { float: right; margin: 25px 0; width: 480px; }
ul#extra-details { font-size: 14px; margin: 0 0 15px 5px; }
	ul#extra-details li { list-style-type: disc; }

ul.all-work { font-size: 14px; margin: 0 0 15px 5px; }
	ul.all-work li { list-style-type: disc; }

p#caption {
	color: #333;
	font-size: 20px;
	font-weight: bold;
	line-height: 24px;
}

ul#secondary-images li { float: left; margin: 5px 10px; }

p#get-some {
	border-top: 2px solid #ccc;
	border-bottom: 2px solid #ccc;
	font-size: 20px;
	padding: 10px 0 10px 45px;
	width: 855px;
}
	p#get-some a { border: none; color: #FFC82D; font-weight: bold; }
	p#get-some a:hover { border: none; color: #333; }

.go-back { margin: 0 0 35px 15px; }
	.go-back a { border-bottom: 1px dotted; }
	.go-back a:hover { border-bottom: 1px solid; }


/* General Page Styles */

	/*  Left Column Styles  */

	#main-left { float: left; width: 550px; }
	#main-left ul { font-size: 15px; line-height: 1.3em; margin: 0 0 15px 5px; }
		#main-left ul li { list-style-type: disc; margin: 0 0 5px; }

	#main-left strong { color: #444; }
	#main-left h4 { color: #333; font-size: 1.3em; margin: 0 0 10px 5px; }
	#main-left img { margin: 5px 0 15px 5px; }

	#main-left ul {
		float: left;
		margin: 0 0 15px 0;
		padding: 0 0 0 25px;
		width: 150px;
	}

	#main-left table {
		background: #ddd;
		background: rgba(0, 0, 0, .1);
		border: 2px solid #bbb;
		font-family: "Trebuchet MS";
		font-size: 14px;
		margin: 0 0 25px 5px;
		padding: 15px;
		width: 472px;
	}

	#main-left table th { color: #333; font-weight: bold; width: 250px; }
	#main-left table td { color: #555; }
	#main-left table td a { border: none; font-size: 11px; vertical-align: text-top; }
	#main-left table td a:hover { border: none; color: #333; }
	#main-left ul#benefits li { width: 500px; }

	/*  Sidebar Styles  */
	#sidebar { float: right; padding: 0 25px 0 15px; width: 270px; }
		#sidebar ul { margin: 0 0 0 25px; }
			#sidebar ul li { font-size: 15px; list-style-type: disc; margin: 0 0 3px; }
			
	#sidebar #hire-us h3 { font-size: 2em; margin: 5px 0 15px; }
	#sidebar #hire-us h4 { color: #333; font-size: 1.3em; margin: 0 0 15px; }
	#sidebar #hire-us img { margin: 0 0 0 60px; }
	#sidebar #hire-us p {
		font-family: "trebuchet ms";
		font-size: 12px;
		line-height: 1.3em;
		margin: 0 0 25px 22px;
	}


/* Contact Page Styles */
ul#contact-methods { padding: 0 100px 0 50px; }
h2.nudge { margin-bottom: 25px; }
div.contact-wrap { float: right; width: 510px; }
	ul#contact-methods h4 { color: #333; margin: 0 0 10px 0; }
		ul#contact-methods li img { float: left; }
		ul#contact-methods li p { margin: 0 0 15px; width: 500px; }
	ul#contact-methods label {
		color: #333;
		font-size: 15px;
		font-weight: bold;
		margin: 0 0 0 3px;
	}
ul#contact-methods li div.wpcf7 { width: 400px; }
ul#contact-methods li div.wpcf7 p { width: 400px; }
ul#contact-methods li form { width: 400px; }
ul#contact-methods li input#name, ul#contact-methods li input#email, ul#contact-methods li input#message {
	background: #FEC52D;
	border: 2px solid #fbfbfb;
	color: #fbfbfb;
	display: block;
	font-family: "Century Gothic";
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 8px;
	outline: 1px solid #ccc;
	padding: 2px;
	width: 200px;
}
ul#contact-methods li input#name:focus, ul#contact-methods li input#email:focus, ul#contact-methods li input#message:focus {
	background: #FED04D;
	border: 2px solid #eee;
	color: #fbfbfb;
	outline: 1px solid #bbb;
}
ul#contact-methods li textarea {
	background: #FEC52D;
	border: 2px solid #fbfbfb;
	color: #fbfbfb;
	display: block;
	font-family: "Century Gothic";
	font-size: 14px;
	font-weight: bold;
	height: 150px;
	outline: 1px solid #ccc;
	padding: 2px;
	width: 392px;
}
ul#contact-methods li textarea:focus {
	background: #FED04D;
	border-color: #eee;
	outline: 1px solid #bbb;
	color: #fbfbfb;
}
ul#contact-methods input.submit {
	background: #111;
	border-color: #F9F9F9 #8E8E8E #8E8E8E #F9F9F9;
	border-width: 2px;
	color: #fbfbfb;
	cursor: pointer;
	display: block;
	font-size: 14px;
	font-weight: bold;
	float: right;
	margin: 8px 0 0;
	padding: 2px;
	width: 125px; 
}
ul#contact-methods input.submit:hover { background: #222; }
ul#contact-methods input.submit:active { border-color: #8E8E8E #F9F9F9 #F9F9F9 #8E8E8E; }

img#form-icon { margin: 0 0 0 -20px; }

#thank-you { color: #0ba200; font-size: 120%; font-weight: bold; }
#contact-error { color: #dc0000; font-size: 120%; font-weight: bold; }


/*  Secondary Page Styles  */	
#logo-options { margin: 0 0 15px 50px; }
p#page-intro {
	letter-spacing: 1px;
	color: #333;
	font-size: 2.5em;
	font-weight: bold;
	line-height: 1.2em;
}
h3.nudge { margin-top: 20px; }


/*  Blog Styles  */
.post-preview {
	background: #fff;
	background: rgba(255, 255, 255, .6);
	border: 1px solid #ccc;
	margin: 25px 0;
	min-height: 135px;
	padding: 25px 25px 40px 215px;
}
	.post-preview p { margin: 0; }
	.post-preview h2 a { font-size: 28px; margin-bottom: 0px; }
	.post-preview .post-thumb {
		position: absolute;
			top: 25px;
			left: 25px;
	}
	.post-preview .article-info { 
		font-size: 12px;
		margin-bottom: 10px;
	}
	.post-preview .read-more {
		position: absolute;
			bottom: 15px;
			right: 20px;
	}

#article { float: left; position: relative; width: 585px; }
	#article p a, #article li a { border-bottom: 1px dotted; color: #555; }
	#article p a:hover { border-bottom: 1px solid; color: #000; }
	#article .post p a:hover, #article .post li a:hover { border-bottom: 1px solid; color: #FFC82D; }
	#article .post { margin-top: 25px; }
	#article .post p { font-size: 15px; }
	#article .wp-caption { 
		background: #eee; 
		background: rgba(240, 240, 240, .65); 
		border: 1px solid #ccc; 
		width:  100%; 
	}
	#article .wp-caption a, #article .wp-caption a:hover { border: none; }
	#article .wp-caption p { font-weight: bold; margin: 0; width: 550px; }
	#article .wp-caption img { border: 1px solid #aaa; }
	#article h1 { color: #000; font-size: 38px; margin-bottom: 15px; }	
	#article h2 { font-size: 32px; font-weight: bold; margin: 0 0 10px; }	
	#article h3 { font-size: 26px; margin: 0 0 10px; }	
	#article h4 { font-size: 22px; margin: 0 0 10px; }
	#article p.post-info { font-size: 12px; margin: 0 0 15px; }
	#article blockquote { background: #ddd; background: rgba(0, 0, 0, .1); margin-bottom: 20px; padding: 25px 35px; }
		#article blockquote cite { display: block; float: none; text-align: right; }
		#article .post blockquote p { font-family: georgia; font-size: 16px; margin-bottom: 0 !important; }
	#article ul { font-size: 15px; padding: 5px 0 15px 30px; }
		#article ul li { line-height: 1.5em; list-style-type: disc; }
	#article ol { font-size: 15px; padding: 5px 0 15px 30px; }
		#article ol li { line-height: 1.5em; list-style-type: decimal; }
	#article .post-preview a { border-bottom: none; }	

	/* Blog Sidebar Styles */
	ul#sidebar { float: right; margin-top: 23px; width: 250px; }
	ul#sidebar p { color: #333; }
	ul#sidebar p a { color: #333; }
	ul#sidebar li.widget {
		display: block;
		margin: 20px 0;
		padding: 0;
		width: 270px;
	}
	ul#sidebar .textwidget { background: #eee; border-top: 1px solid #fff; padding: 15px; }
		ul#sidebar .textwidget a { border-bottom: 1px dotted; color: #555; -webkit-transition: color .2s linear; }
		ul#sidebar .textwidget a:hover { border-bottom: 1px solid; color: #FFC82D; }
	ul#sidebar li.widget:hover h3.widget-title { background: #555; }
	ul#sidebar h3.widget-title { 
		background: #333; 
		border-top: 1px solid #777;
		border-bottom: 1px solid #000;
		color: #fff; 
		margin: 0; 
		padding: 10px 15px; 
	}
		ul#sidebar li ul { margin: 0; }
			ul#sidebar li ul li { list-style-type: none; margin: 0; }
				ul#sidebar li ul li a { 
					background: #eee; 
					border-top: 1px solid #fff; 
					border-bottom: 1px solid #ccc; 
					display: block; 
					font-weight: bold;
					padding: 5px 10px;
				}
				ul#sidebar li ul li a:hover { background: #fff; } 
	ul#sidebar #searchform label { display: none; }
	
	/* Author Box Styles */
	#author-box {
		background: #FFC82F;
		border: 1px solid #ccc;
		margin: 15px 0 25px;
		min-height: 110px;
		padding: 25px 25px 25px 155px;
	}
		#author-box .avatar {
			border: 5px solid #fff;
			position: absolute;
				top: 25px;
				left: 25px;
		}
	
	/* Comment Styles */
	#article .comments {
		margin: 15px 0;
		padding: 0;
		position: relative;
	}
		#article .comments li {
			background: #eee;
			background: rgba(225, 225, 225, .7);
			list-style-type: none;
			min-height: 115px;
			padding: 25px 25px 25px 115px;
			position: relative;
		}
		#article .comments li.alt {
			background: #ddd;
			background: rgba(245, 245, 245, .7);
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}
		#article .comments li.author-comment { background: #FFC82F; }
		#article .comments li.reply-comment { margin-left: 100px; position: relative; }
			#article .comments li.author-comment cite { 
				border-bottom: 1px solid #ccc;
				color: #fff;
				font-size: 20px;
				font-weight: bold; 
				padding-bottom: 10px;
			}
			.author-comment .comment-edit-link { background: #fff; color: #555; }
			#article .comments li a { border: none; }
			#article .comments li cite { float: none; margin: 0; }
				#article .comments li cite a {
					color: #;
					font-size: 20px;
					font-weight: bold;
				}
				#article .comments li.author-comment cite a { color: #555; }
				#article .comments li cite a:hover { color: #555; }
			#article .comments li .comment-info {
				border: none;
				font-size: 14px;
				margin-top: 0;
				padding: 0;
				position: absolute;
					top: 25px;
					right: 25px;
			}
			#article .comments li p {
				font-size: 14px;
				margin: 10px 0 0;
				padding: 0;
			}
			.comment-edit-link {
				background: #FFC82F;
				color: #fff;
				font-size: 14px;
				font-weight: bold;
				padding: 0px 5px;
				position: absolute;
					bottom: 25px;
					left: 25px;
			}
			#article .comment-edit-link:hover { background: #555; color: #fff; }
			#article .comments li a.avatar {
				background: #eee;
				border: 5px solid #fff;
				height: 65px;
				position: absolute;
					top: 25px;
					left: 25px;
				width: 65px;
			}
			#article .comments li.alt a.avatar { border-color: #ddd; }
	#comment-form label { font-size: 14px; }


/*  Footer Styles  */
#footer { margin: 25px 0 15px 0; }
	#footer div { float: left; margin: 0 0 25px; width: 350px; }
	#footer ul { margin: 3px 0 0 0; padding: 0 0 0 15px; width: 350px; }
		#footer ul li { float: left; margin: 0 20px 0 0; }
		#footer ul a { border-bottom: 1px dotted; color: #333; }
		#footer ul a:hover { border-bottom: 1px solid; color: #FFC82D; }
		#footer ul a:active { color: #000; }
	#footer h4 {
		color: #FFC82D;
		font-size: 18px;
		margin: 5px 0 10px 0;
		padding: 0;
		text-decoration: underline;
	}
	#footer p {
		color: #FFC82D;
		float: left;
		font-weight: bold;
		margin: 18px 0 0 0;
		text-align: right;
		width: 475px;
	}
	#footer img { float: right; width: 56px; }

/*  =Misc. Styles */
body { overflow-y: scroll; }
div { position: relative; }
.float-clear { clear: both; }

	/* Form Styles (OOCSS) */
	input:focus, textarea:focus { outline: none; }
	.text-input, .textarea, #searchform #s { 
		background: #eee; 
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), color-stop(0.4, #eee), to(#eee));
		border: 1px solid #ccc; 
		color: #777;
		display: block;
		font-size: 16px;
		font-weight: bold;
		line-height: 1em;
		margin: 2px 0 10px;
		padding: 5px;
		width: 165px;
	}
	#searchform { width: 270px; }
	#searchform #s { display: inline; height: 18px; margin-right: 5px; width: 175x; }
	.text-input { width: 250px; }
	.textarea { margin-top: 15px; width: 575px; }
	.text-input:focus, .textarea:focus, #searchform #s:focus { 
		background: #fefefe;
		border-color: #ddd;
		color: #555;
	}
	.submit {
		background: #eee;
		border: 5px solid #ccc;
		color: #333;
		cursor: pointer;
		font-size: 20px;
		font-weight: bold;
		margin: 0 auto;
		padding: 5px 15px;
	}
	#searchsubmit { 
		background: #333; 
		border: none; 
		color: #fff; 
		cursor: pointer; 
		display: inline; 
		float: right;
		font-size: 14px; 
		font-weight: bold; 
		height: 30px; 
		margin: 2px 0 0;
		padding: 2px 3px; 
		width: 80px;
	}
	#searchsubmit:hover { background: #555; }
	.submit:hover { background: #fefefe; border-color: #ddd; }
	
	/* Reusable Styles */
	.yellow-button {
		background: #FFC82F;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		padding: 3px 5px;
	}
	.yellow-button:hover { background: #555; color: #fff; }

	/* Default styles for classes generated by Wordpress */
	.alignright { float: right; margin: 6px 0 5px 10px; }
	.alignleft { float: left; margin: 6px 10px 5px 0; }
	.aligncenter { border: 1px solid #777; display: block; margin: 0 auto; }
	.centered-image { 
		background: #eee;
		background: rgba(100, 100, 100, .1);
		border: 1px solid #ccc;
		display: block; 
		padding: 15px 0;
		margin: 15px auto; 
		width: 100%;
	}
	.aligncenter, .alignnone { margin-bottom: 15px; }
	.wp-caption { border: 1px solid #666; text-align: center; background: #ccc; padding: 10px; }