/*
Theme Name: Squids With Skeletons
Theme URI: http://squidswithskeletons.com
Description: Custom theme for portfolio.
Version: 2.0
Author: Vincent Re
Author URI: http://vincentmre.com
Tags: grey, custom header, fixed width
*/



/* Begin Typography & Colors */
body {
	background: #000 !important;
	color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	line-height: 20px;
}
#container {

	}
	#header {
			background: url(images/sidebar-bg.jpg) no-repeat;
			left:0;
			position:fixed;
			top:0;
			height: 1048px;
			width:235px;
		}
		#header h1 a {
				background: url(images/sws-logo.jpg) no-repeat;
				display: block;
				height: 225px;
				text-indent: -9999px;
				margin: 0 0 20px 25px;
				width: 160px;
			}
		#header p {display: none;}
		#header ul#menu {
				margin: 0 auto;
				width: 179px;
			}
			ul#menu li {
				
				}
				ul#menu li a {
						background: transparent url(images/nav.png) no-repeat;
						display: block;
						height: 40px;
						margin-bottom: 10px;
						text-indent: -9999px;
						width: 179px;
					}
					ul#menu li a#nav-featured {
							background-position: left top;
						}
					ul#menu li a#nav-projects {
							background-position: left -44px;
						}
					ul#menu li a#nav-blog {
							background-position: left -88px;
						}
					ul#menu li a#nav-contact {
							background-position: left -134px;
						}
						ul#menu li a:hover {
								opacity: .5;
							}
	#content {
			width: 945px;
			margin-left: 240px;
		}
		#content .section {
				position: relative;
			}
			.section a.top-link {
					background: url(images/backtotop.jpg) no-repeat left top;
					display: block;
					height: 20px;
					position: absolute;
					right: 42px;
					text-indent: -9999px;
					top: 10px;
					width: 38px;
				}
				.section a.top-link:hover {
						background-position: left bottom;
					}
			.section h2 {
					display: block;
					height: 38px;
					margin: 20px 0;
					width: 910px;
				}
				.section h2 span {
						display: none;
					}
			#content .about {
					height: 335px;
					width: 910px;
				}
			#content .about h2 {
					background: url(images/big-name.jpg) no-repeat;
					display: block;
					height: 128px;
					margin: 20px 0;
					text-indent: -9999px;
					width: 915px;
				}
			#content .about p {
					color: #a9aeae;
					font-size: 16px;
					font-weight: normal;
					margin: 0 0 20px 0;
				}
			#content .about h3 {
					background: transparent url(images/john-radford.jpg) no-repeat;
					display: block;
					float: right;
					height: 95px;
					margin: -30px 0 0;
					text-indent: -9999px;
					width: 122px;
				}
		#content .featured {
				
			}
			.featured h2 {
					background: url(images/headings.jpg) no-repeat -2px top;
				}
			.featured ul {
				
				}
				.featured ul li {
						float: left;
						display: inline;
						width:436px;
						margin-right: 30px;
						position: relative;
					}
					.featured ul li .image-container {
							border: 10px solid #141a1b;
							height: 318px;
							width: 416px;
							overflow: hidden;
						}
						.image-container:hover {
								border-color: #2a3739 !important;
							}
						.featured ul li .image-container img {
								height: 318px;
							}
						.featured ul li .image-container a.featured-details {
								background: url(images/clickfordetails.png) no-repeat;
								display: block;
								height: 143px;
								width: 143px;
								position: absolute;
								right:-15px;
								top:-8px;
								text-indent: -9999px;
							}
					.featured ul li .project-info {
							line-height:20px;
							margin-top:5px;
						}
						.project-info h3 {
								color: #fff;
								font-size: 14px;
								font-weight: normal;
								text-transform: uppercase;
							}
						.project-info p a,
						.project-info p {
								color: #a9aeae;
								font-size: 12px;
								text-transform: lowercase;
							}
		#content .projects {
		
			}
			.projects h2 {
					background: url(images/headings.jpg) no-repeat -2px -41px;
				}
			.projects ul {
			
				}
				.projects ul li {
						float: left;
						display: inline;
						margin:0 14px 14px 0;
						width:218px;
					}
					.projects ul li a {
							display: block;
							border: 5px solid #141a1b;
							height: 159px;
							width: 208px;
							overflow: hidden;
							margin-bottom: 10px;
						}
						.projects ul li a:hover {
								border-color: #2a3739;
							}
						.projects ul li a img {
								height: 159px;
							}
					.projects ul li .project-info {
							line-height: 15px;
							margin-bottom: 10px;
						}
						.project-info a {
								display: inline !important;
								border: none !important;
								color: #a9aeae;
								font-size: 12px;
								text-transform: lowercase;
							}
		#content .contact {
		
			}
			.contact h2 {
					background: url(images/headings.jpg) no-repeat -2px -82px;
				}
			.contact p {
					color: #a9aeae;
					font-size: 14px;
				}
				.contact p a {
						color: #7f8282;
						font-size: 14px;
						text-decoration: none;
					}				
				.contact p label {
						display: block;
						float: left;
						width: 200px;
						margin-right: 5px;
					}
		
		#footer {
				color: #565656;
				font-size: 11px;
				margin: 40px 0 0 0;
				border-top: 1px solid #111819;
				padding: 20px 0;
			}
		
/*--------------- FORM STYLES -------------*/

#cformsform {

	}
	.cf-ol {
	
		}
		.cf-ol li {
				clear: both;
				margin-bottom: 10px;
				color:#4C5153;
				font-family:Helvetica,Arial,sans-serif;
				font-size:12px;
				text-transform:uppercase;
			}
			.cf-ol li label {
					display:block;
					float:left;
					height:22px;
					line-height:22px;
					width:210px;
				}
				span.reqtxt,
				span.emailreqtxt {
						color: #111819 !important;
						margin-left: 10px !important;
					}
			.cf-ol li textarea {
					vertical-align: top;
				}
			.cf-ol li textarea,
			.cf-ol li input {
					background: #111819;
					border: none;
					padding: 4px;
					width: 400px;
					color: #ccc;
				}
			input#sendbutton {
					background: #000;
					border: 1px solid #111819;
					margin: -20px 0 20px 210px;
					color: #565656;
					padding: 10px;
					text-transform: uppercase;
					cursor: pointer;
				}
			p#contact-topper {
					font-size: 12px;
					margin: 10px 0;
				}
			.linklove {display: none;}
			#usermessagea {
				background: #111819;
				color: #8B221A;
				font-size: 16px;
				margin: 0 0 20px;
				padding: 10px;
				text-align: center;
				text-transform: uppercase;
				width: 756px;
				}