/* 
 * pixelGeko.com
 * Copyright 2009 pixelGeko
 * All Rights Reserved
 *
 * Main Body 
 * Primary Styles
 *
 */
 
html {
	height: 100%;
	width: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-family: georgia, palatino linotype;
	font-size: 12px;
	height: 100%;
	width: 100%;
	background: url(../images/default-bg.jpg) top center no-repeat;
}

h1, h2, h3 {
	font-weight: normal;
}

h1 {
	font-size: 24px;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 16px;
}

p {
	line-height: 175%;
}

.clear {
	line-height: 0;
	font-size: 0;
	clear: both;
}

.navigation {
	position: relative;
}

	.navigation .back {
		border-bottom: 3px solid #99d688;
		position: absolute;
		margin: 0;
	}

#super-wrapper {
	width: 100%;
	padding: 0;
}

#wrapper {
	width: 1024px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0 0 50px 0;
}

#header-wrapper {
	padding: 0 50px;
	z-index: 99;
}
	#header-wrapper * {
		z-index: 99;
	}
	#header {
		height: 100px;
		width: 100%;
		position: relative;
	}
		#logo {
			height: 27px;
			width: 103px;
			background: url(../images/logo-dark.png) center center no-repeat;
			position: absolute;
			bottom: 10px;
			left: 0;
		}
		#navigation {
			list-style-type: none;
			margin: 0;
			padding: 0;
			position: absolute;
			left: 103px;
			bottom: 12px;
		}
			#navigation li {
				float: left;
				margin: 0 0 0 20px;
			}
			
			#navigation .back {
				top: 29px;
				margin: 0;
			}
				#navigation li a {
					font-style: italic;
					text-decoration: none;
					font-size: 14px;
					padding: 0 0 12px 0;
					
				}
				#navigation li a:link {
					color: #333;
				}
				#navigation li a:visited {
					color: #333;
				}
				#navigation li a:hover {
					color: #777;
				}
				#navigation li a:active {
					color: #333;
				}
		
#content-wrapper {
	padding: 0 50px;
	margin: 0;
}
	#content {
		margin: 0;
		padding: 0;
		padding: 10px 0 0 0;
		border-top: 10px solid #000;
		position: relative;
	}
		#content a {
			text-decoration: none;
		}
		#content a:link {
			color: #99d688;
		}
		#content a:visited {
			color: #99d688;
		}
		#content a:hover {
			color: #56ae98;
		}
		#content a:active {
			color: #99d688;
		}
		#contact-info {
			padding: 10px;
			background: #333;
			color: #e4e4e4;
			margin: 0 0 10px 0;
		}
			#contact-info p {
				padding: 0 10px;
			}
		#contact-splash {
			background: url(../images/contactgeko.jpg) center center no-repeat;
			width: 530px; 
			height: 454px; 
			float: left; 
			margin: 0 10px 0 0;
			overflow: hidden;
		}
		#contact-box {
			width: 384px;
			height: 454px;
			overflow: hidden;
			background: #333;
			float: left;
		}
			#contact-box form {
				padding: 10px;
				margin: 0;
			}
			#contact-box h2 {
				color: #e4e4e4;
				font-weight: normal;
				font-size: 18px;
			}
			#contact-box .field {
				margin: 0 0 10px 0;
				font-family: georgia, palatino linotype;
				padding: 10px 5px;
				border: 3px solid #444;
				background: #a0a0a0;
				color: #333;
				font-style: italic;
				width: 348px;
				font-size: 14px;
			}
			#contact-box textarea.field {
				height: 236px;
			}
			#contact-box .button {
				font-size: 18px;
				font-weight: bold;
				border: 3px solid #444;
				background: #a0a0a0;
				padding: 10px;
				width: 130px;
				font-family: georgia, palatino linotype;
				color: #333;
				margin: 0;
				cursor: pointer;
			}
			#contact-box .active,
			#contact-box .field:hover,
			#contact-box .button:hover {
				background: #e4e4e4;
				border: 3px solid #99d688;
			}
		#work {
			overflow: hidden;
			position: relative;
			height: 500px;
			margin: 0 0 10px 0;
			background: transparent;
		}
		#work-title {
			background: #333;
			margin: 0 0 10px 0;
			overflow: hidden;
			color: #e4e4e4;
			padding: 10px;
			clear: both;
		}
			#work-title .project-type  {
				font-size: 14px;
				text-transform: lowercase;
			}
		#work-details {
			background: #333;
			margin: 0;
			overflow: hidden;
			color: #e4e4e4;
			padding: 10px;
		}
		#work-navigation {
			background: #000000;
			margin: 0 0 10px 0;
			overflow: hidden;
			color: #e4e4e4;
			padding: 0 10px;
		}
			#work-navigation ul {
				list-style-type: none;
				padding: 0;
				margin: 0;
			}
			#work-navigation ul li {
				float: left;
			}
			#work-filter {
				font-size: 10px;
				display: none;
			}
				#work-filter li {
					margin: 0 20px 0 0;
					padding: 0 0 0 5px;
					border-left: 2px solid #333333;
				}
				#work-filter li.current {
					border-left: 2px solid #99d688;
				}
			
			#work-menu-super-wrapper {
				position: relative;
				height: 35px;
				overflow: hidden;
				width: 904px;
				background: #000;
			}
				#work-menu-wrapper {
					position: absolute;
				}
					#work-menu {
						height: 35px;
					}
					#work-menu li {
						padding: 10px 10px 13px 10px;
						white-space: nowrap;
					}
					#work-menu li.back {
						padding: 0;
						position: absolute;
						bottom: 0;
					}
						#work-menu li .details {
							color: #e4e4e4;
							font-size: 10px;
							text-transform: lowercase;
						}
		#about-subwrapper {
			float: left; 
			width: 714px;
			margin: 0 10px 0 0;
		}
			#about-content {
				height: 422px;
				background: #333;
				color: #e4e4e4;
				padding: 0 20px;
				overflow: hidden;
			}
				#about-content ul {
					list-style-type: none;
					padding: 0;
					margin: 0 0 0 10px;
				}
				#about-content li {
					background: url(../images/leaf-bullet.png) left top no-repeat;
					padding: 4px 0 4px 30px;
				}
				#about-content h3 {
					margin-bottom: 10px;
				}
			#about-title {
				height: 48px;
				color: #e4e4e4;
				padding: 10px;
				background: #333;
				margin: 0 0 10px 0;
			}
			#about-accent {
				float: left;
				width: 200px;
				height: 500px;
				background: url(../images/about-accent.jpg) top left no-repeat;
			}
					
#footer-wrapper {
	padding: 10px 50px 0 50px;
	margin: 0;
	clear: both;
}
	#footer {
		width: 100%;
		height: 75px;
		background: #333;
	}
		#gekologo {
			height: 63px;
			width: 35px;
			margin: 6px 7px 6px 14px;
			background: url(../images/gekologo-light.png) center center no-repeat;
			float: left;
		}
		#copyright {
			margin: 0;
			color: #e4e4e4;
			padding: 30px 0;
		}