@charset "utf-8";
/* CSS Document */

body {color: #ccc; background: #202020; margin: 0px; padding: 0px; background: url(../images/body-bg.gif); background-repeat: repeat; font-size: 1em; font-family: Arial, Helvetica, sans-serif;}
html, body {height: 100%;}
a img {border: none;}
a {text-decoration: none; color: #51b85e;}

::-moz-selection{background: #000 !important;} 
::selection {background: #000 !important;}

.container {width: 970px; position: relative; margin: auto;}
.shadow {background: url(../images/shadow-bg.png); background-repeat: repeat-x; padding: 30px 0px 30px 0px; position: static; z-index: 10; border-bottom: 1px solid #333;}
.clear {clear: both;}
.right {float: right; margin: 0px 0px 15px 15px; border: 3px solid #363636; -moz-box-shadow: 0px 2px 2px #000; -webkit-box-shadow: 0px 2px 2px #000; box-shadow: 0px 2px 2px #000;}
.smaller {font-size: 0.7em; display: block; float: right;}

h1, h2, h3, h4, h5 {font-family: 'Muli', sans-serif; font-weight: normal; color: #fff;}
	h1 strong, h2 strong, h3 strong, h4 strong, h5 strong {color: #fff; font-weight: normal;}
	h1 {margin: 0px; padding: 0px; font-size: 1.6em; line-height: 150%;}
	h2 {margin: 1em 0 1em 0; padding: 0px; font-size: 1.2em; line-height: 150%;}
	
/* stick the footer */
#wrap {min-height: 100%;}
#wrap #content {padding-bottom: 565px;}
	#wrap-work #content {padding-bottom: 236px;}
#stick {height: 535px; margin-top: -538px; border-top: 1px solid #333;}
	#stick-work {height: 206px; margin-top: -206px; border-top: 1px solid #333;}

/* topbar */
#topbar {background: url(../images/topbar-bg-x.png); background-repeat: repeat-x; height: 100px; font-family: 'Oswald', sans-serif;}
	#topbar ul {list-style: none; padding: 0px; margin: 0px; font-size: 1.4em; line-height: 100px;}
		#topbar ul li {float: left; display: block; margin: 0px 60px 0px 0px;}
			#topbar ul li a {color: #fff; text-transform: uppercase;}
				#topbar ul li a:hover {}
				#topbar ul li a.current {color: #57bdf1;}
		#topbar #logo {float: right; margin: 8px 0px 0px 0px;}

/* banner */
#banner {height: 250px; position: static; z-index: 20; text-shadow: black 0.1em 0.1em 0.2em;}
	#banner h2 {width: 580px; float: left; line-height: 180%; margin: 50px 0px 0px 0px; padding: 0px; font-size: 1.8em; color: #ccc;}
	#banner #logo {position: absolute; top: -50px; right: 0px;}
	
/* content */
#content {border: none;}

	#content h3 {font-family: Georgia, "Times New Roman", Times, serif; margin: 0px; padding: 0px; font-style: italic; color: #57bdf1; font-size: 0.8em;}
	#content p, #content ul, #content ol {line-height: 180%; font-size: 0.95em;}
		#content ul li {margin: 0px 0px 0.8em 0px;}
	
	/* blog content styles */
	#blogContent {float: left; width: 670px; position: relative; z-index: 30;}
	
			/* posts */
			#blogContent .post {padding: 40px; border: 2px solid #333; -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; margin: 0px 0px 30px 0px; background: #1e1e1e;}
				#blogContent .post h2.entry-title {margin-top: 0px; font-size: 1.6em; border-bottom: 1px solid #333; padding: 0px 0px 20px 0px;}
				#blogContent .post pre {font-family: Courier New, Courier New, monospace; width: 556px; overflow: hidden; display: block; padding: 15px; font-size: 0.8em; background: #333; border: 1px solid #000; -moz-box-shadow: inset 3px 3px 9px #000000; -webkit-box-shadow: inset 3px 3px 9px #000000; box-shadow: inset 3px 3px 9px #000000; border-right: 1px solid #555; border-bottom: 1px solid #555;}
					#blogContent .post .entry-meta {float: right; background: #333; color: #999; text-align: center; font-size: 0.8em; padding: 2px; margin: 0px 0px 15px 15px;}
						#blogContent .post .entry-date {display: block; padding: 5px; border: 1px dashed #555;}
					#blogContent .post .entry-utility {font-size: 0.6em;}
					
			/* search */
			.page-title {margin: 0px 0px 30px 0px;}
				.page-title span {color: #57bdf1;}
			#searchform input {height: 30px; line-height: 28px;}
				#searchform label {display: block; font-size: 1.5em; padding: 0px 0px 15px 0px; font-family: Georgia, "Times New Roman", Times, serif; color: #fff; font-style: italic;}
				#s {width: 250px; padding: 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; margin: 0px 0px 10px 0px;}
				#searchsubmit {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; background: #000; color: #ccc; font-weight: bold; width: 258px; cursor: pointer;}
					#searchsubmit:hover {background: #111; color: #fff;}
					.archive-meta {display: none;}
			
			#nav-below {font-size: 0.8em;}
				.nav-previous {float: left; padding: 0px 30px 30px 30px;}
				.nav-next {float: right; padding: 0px 30px 30px 30px;}
			
			/* comments */
			#comments {color: #fff; padding: 40px; border: 2px solid #333; -moz-box-shadow: 5px 5px 5px #000; -webkit-box-shadow: 5px 5px 5px #000; box-shadow: 5px 5px 5px #000; margin: 0px 0px 30px 0px; background: #1e1e1e; text-align: right; clear: both;}
				#comments label {float: left; text-align: left;}
				.commentlist {list-style: none; margin: 0px; padding: 0px;}
				.commentlist li {padding: 20px; background: #333; border: 1px solid #000; -moz-box-shadow: inset 3px 3px 9px #000000; -webkit-box-shadow: inset 3px 3px 9px #000000; box-shadow: inset 3px 3px 9px #000000; border-right: 1px solid #555; border-bottom: 1px solid #555; margin: 0px 0px 20px 0px;}
				.reply, .commentmetadata {font-size: 0.6em;}
					.form-submit {height: 40px; line-height: 40px;}
			
	/* blog menu */
	#blogMenu {float: right; width: 260px; background: #3f3f3f; padding: 20px; margin: 50px 0px 0px 0px; position: relative; z-index: 20; -webkit-border-top-right-radius: 12px; -webkit-border-bottom-right-radius: 12px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomright: 12px; border-top-right-radius: 12px; border-bottom-right-radius: 12px;}
		#blogMenu #searchform {}
		#blogMenu h3 {font-size: 1.5em; padding: 15px 0px 15px 0px; border-top: 1px solid #333; color: #fff;}
		#blogMenu ul {list-style: none; margin: 0px; padding: 0px;}
			#blogMenu li#recent-comments-2 {display: none;}
	
	/* process */
	#process {margin: 30px 0px 0px 0px;}
	#process .box {float: left; width: 181px; padding: 20px 30px 20px 20px; height: 220px; display: block; margin: 0px 18px 0px 0px; color: #fff;}
		#process #box1 {background: url(../images/box-1-bg.png);}
		#process #box2 {background: url(../images/box-2-bg.png);}
		#process #box3 {background: url(../images/box-3-bg.png);}
		#process #box4 {background: url(../images/box-4-bg.png); padding: 20px; margin: 0px;}
		#process .box h2 {font-size: 1em; margin: 0px 0px 1em 0px;}
		#process .box p {font-size: 0.75em; font-family: Arial, Helvetica, sans-serif; line-height: 160%;}
	
	/* contact */
	#contact {float: left; width: 470px;}
	#contact p {text-align: right;}
	#contact label {text-align: left; display: block; float: left; line-height: 40px;}
	#contact .input {width: 200px; padding: 5px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #999;}
		#contact input.input {height: 30px;}
		#contact textarea.input {height: 100px;}
		#contact .input:focus {color: #333;}
	#contact .submit, #submit {-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: none; background: #000; color: #ccc; font-weight: bold; width: 210px; height: 40px; line-height: 38px; cursor: pointer; border: 1px solid #000; display: block; float: right;}
		#contact .submit:hover, #submit:hover {background: #111; color: #51b85e;}
		#contact .errorMessage {color: #fff; padding: 20px; border: 2px solid #333; margin: 20px 0px 20px 0px; background: #1e1e1e; text-align: left; clear: both; font-size: 0.8em;}
			#contact .errorMessage p {text-align: left;}
			#content .errorMessage ul li {margin: 0px 0px 0.4em 0px;}
		#contact .errorCross {float: left; display: block; background: #666; width: 12px; height: 12px; line-height: 12px; color: #000; text-align: center; font-weight: bold; margin: 14px 10px 0px 0px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-size: 0.6em;}
		
	#contactInfo {float: right; width: 470px;}
	
	/* portfolio */
	#portfolio a.thumb {}
		
/* recent work */
#recent {}
	#recent h2 {margin: 0px;}
	a.thumb {display: block; float: left; width: 220px; margin: 2em 30px 0px 0px; color: #666; font-size: 0.6em; }
	a.thumb img {padding: 3px; background: #363636; -moz-box-shadow: 0px 2px 2px #000; -webkit-box-shadow: 0px 2px 2px #000; box-shadow: 0px 2px 2px #000;}
	a.thumb span {padding: 6px 3px 0px 3px; display: block;}
	a.thumb span strong {display: block; color: #fff; font-weight: normal; font-size: 1.4em; margin: 0px 0px 4px 0px;}
	a.last {margin: 2em 0px 0px 0px;}
	
/* footer */
#footer {background: url(../images/footer-bg-x.png); background-repeat: repeat-x; padding: 20px 0px 20px 0px;}
	#footer .container {overflow: hidden;}
	#footer h2,#footer h3 {margin: 0px 0px 1em 0px; text-transform: uppercase; font-size: 1em; font-family: 'Oswald', sans-serif;}
	#footer .column {float: left; display: block; width: 220px; margin: 0px 27px 0px 0px;}
	#footer .column a {color: #ccc;}
		#footer .column a:hover {color: #fff;}
	#footer .column ul, #footer .column p, #footer .column ol {list-style: none; padding: 0px; margin: 0px; font-size: 0.8em; line-height: 180%;}
		#footer .column ul li a span {font-size: 0.8em; color: #666; font-style: italic;}
			#footer .column ul li a:hover span {color: #999;}
	#footer .last {float: right; text-align: right; margin: 0px; width: 440px;}
		#footer .column p#social {margin: 10px 0px 0px 0px; clear: both;}
			#footer .column p#social a {float: right; display: block; margin-left: 6px; filter: alpha(opacity=80); opacity: 0.8;}
			#footer .column p#social a:hover {filter: alpha(opacity=100); opacity: 1;}
			#footer-facebook {margin: 10px -10px 0px 0px;}
			#footer-google {margin: 10px -40px 0px 0px; float: right;}