/***************** FONTS ******************/
html {
	font: 62.5% Verdana,Arial,sans;
	}

.menu li, h2, h3, #thumb a, #content ul.files li {
	font-family: "Trebuchet MS","Verdana","sans";
	}


/***************** GENERIC *****************/
.left {
	float: left;
	}

.right {
	float: right;
	}

.centered {
	text-align: center;
	}

.hidden {
	display: none;
	}

#skiplink {
	display: none;
	}

div.hr {
	width: 100%;
	clear: both;
	border: 0;
	}

	div.hr hr {
		display: none;
		}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1em;
	}

	ul li {
		margin: 0;
		padding: 0;
		list-style: none;
		font-size: 1em;
		}

/***************** LINKS *****************/
a { text-decoration: none; }
a:link { color: #d5ffa6; border-bottom: 1px dotted #8eb561; }
a:visited { color: #b9d49a; }
a:hover { color: #f2ffe3; }
a:focus { color: #f2ffe3; }
a:active { color: #ffffff; }

.menu li a { color: #b2b5ae; border: 0; text-decoration: none; font-weight: normal; }
.menu li a:hover, .menu li.current a { color: #eeffd8; }
.menu li a:focus { color: #eeffd8; }
.menu li a:active { color: white; }


/********************************************/
/****************  HEADER  ******************/
/********************************************/
body {
	margin: 0 auto;
	padding: 0;
	color: white;
	background: #758f64 url(images/bodyBg.png) 0 0 repeat-x;
	}

#header, #footer {
	width: 75.5em;
	margin: 0 auto;
	}

#header {
	position: relative;
	height: 26.5em;
	text-align: center;
	}

	#header #pagesize {
		position: absolute;
		top: 0;
		right: 0;
		margin: 0;
		padding: 0;
		}

		#header #pagesize dt {
			display: none;
			}

		#header #pagesize dd {
			float: left;
			margin: 0 0 0 5px;
			padding: 0;
			}

			#header #pagesize dd img, #header #pagesize dd a {
				border: 0;
				}

	#header h1 {
		font-size: 1em;
		height: 26.5em;
		width: 65.5em;
		margin: 0 5em 0 0;
		padding: 0 0 0 5em;
		background: transparent url(images/contentBgLeft.png) 0 14em no-repeat;
		}

		#header h1 a {
			display: block;
			height: 26.5em;
			width: 65.5em;
			margin: 0;
			padding: 0 5em 0 0;
			background: transparent url(images/contentBgRight.png) 100% 14em no-repeat;
			text-decoration: none;
			border: 0;
			}

			#header h1 a img {
				width: 55em;
				height: 26.5em;
				top: 0;
				border: 0;
				}


/********************************************/
/***************  CONTENT  ******************/
/********************************************/
#content {
	position: relative;
	width: 75.5em;
	margin: 0 auto;
	padding: 1.9em 0;
	background: transparent url(images/contentBgLeft.png) 0 -13em repeat-x;
	}

	#content h2 {
		margin: 0 0 0 1em;
		padding: 0;
		}

		#content h2, #content .main h2.boxy a {
			font-size: 3em;
			}

	#content h3 {
		padding: 0 0 0 1.5em;
		}

		#content h3, #content .main h3.boxy a {
			font-size: 2em;
			}

	#content img.thumbnail {
		width: 15em;
		height: 15em;
		border: 1px solid black;
		}

	#content p, #content address {
		line-height: 1.6em;
		font-size: 1.4em;
		padding: 0 2em 0;
		}

	/********************************************/
	/*                   BOXY                   */
	/********************************************/
	#content .boxy {
		position: relative;
		width: 45.6em;
		margin: 5.4em 2.5em 4.9em;
		padding: 0;
		font-size: 1em;
		background-color: #3c640f;
		}

		#content .boxy h2 {
			position: relative;
			width: 42.6em;
			padding: 0 0 0 2em;
			margin: 0 1em 0 0;
			top: -4em;
			left: -1px;
			font-size: 1em;
			background: transparent url(images/mainH2BgLeft.png) top left no-repeat;
			}

			#content .boxy h2 a {
				position: relative;
				display: block;
				width: 100%;
				margin: 0;
				padding: .4em .4em .4em 0;
				font-weight: normal;
				font-size: 3em;
				border: 0;
				color: white;
				background: transparent url(images/mainH2BgRight.png) top right no-repeat;
				}

		#content p {
			padding-right: 0;
			}


/********************************************/
/***************** MAIN PAGE ****************/
/********************************************/

	/********************************************/
	/*                 PRODESIGN                */
	/********************************************/
	#content #prodesign {
		float: right;
		background: #3c640f url(images/cactusBg.jpg) bottom right no-repeat;
		margin-bottom: 6em;
		}

		#content #prodesign p {
			padding: 1.5em 2.5em;
			margin: 0 0 2em 0;
			}

		#content #prodesign h3 {
			color: #c0e399;
			font-size: 1em;
			font-weight: bold;
			text-transform: uppercase;
			padding-bottom: .5em;
			}

		#content #prodesign img {
			position: relative;
			float: right;
			width: 18.5em;
			height: 25.2em;
			margin: -4em 0 0 2em;
			}

			#content #prodesign ul#designs {
				font-size: 1em;
				position: relative;
				list-style-type: none;
				width: 45.6em;
				margin-top: -1em;
				}

				#content #prodesign ul#designs li {
					float: left;
					width: 15.1em;
					text-align: center;
					background-image: none;
					background-color: #a2ca9c;
					border-left: .1em solid #315608;
					}

					#content #prodesign ul#designs li:first-child {
						border: 0;
						}

					#content #prodesign ul#designs li a {
						float: left;
						width: 12.6em;
						text-align: left;
						border-bottom: none;
						font-size: 1em;
						line-height: 3em;
						padding: 0 0 0 2.5em;
						margin: 0 auto;
						font-weight: bold;
						text-transform: uppercase;
						color: #112004;
						background: #a2ca9c url(images/bulletPlusGreen.png) 1em 50% no-repeat;
						}

						#content #prodesign ul#designs li a:hover {
							background-color: #c1e2bc;
							}

	/********************************************/
	/*                 MAINFOLIO                */
	/********************************************/
	#mainfolio {
		position: relative;
		width: 25em;
		background: transparent url(images/columnBg.png) center bottom no-repeat;
		margin-top: 2.5em;
		text-align: center;
		}

		#mainfolio ul {
			list-style: none;
			font-size: 1em;
			margin-top: 1em;
			}

			#mainfolio ul li {
				position: relative;
				top: -1.5em;
				background: none;
				}

			#mainfolio ul li:last-child {
				margin-top: -1em;
				}

				#mainfolio ul li a {
					border: 0;
					}

					#mainfolio ul li img {
						width: 24.9em;
						height: 18.3em;
						border: 0;
						}

		#mainfolio p {
			position: absolute;
			width: 100%;
			top: 33.6em;
			font-size: 1em;
			margin: 0;
			padding: 0;
			border-bottom: none;
			text-align: center;
			font-weight: bold;
			text-transform: uppercase;
			color: #a2ca9c;
			}

			#mainfolio p a {
				font-size: .9em;
				border: 0;
				}

	/********************************************/
	/*                PRETTYFACE                */
	/********************************************/
	#prettyface {
		position: relative;
		width: 100%;
		height: 19em;
		margin-bottom: 4em;
		background-color: #202f0f;
		}

		#prettyface h2 {
			font-size: 1em;
			margin: 0 0 .7em 3.4em;
			padding-top: 3.4em;
			}

			#prettyface h2 a {
				border: 0;
				}

				#prettyface h2 a img {
					height: 4.1em;
					width: 17.9em;
					border: 0;
					}

		#prettyface p {
			width: 16em;
			font-size: 1.1em;
			margin: 0 0 0 3.3em;
			padding: 0;
			color: #dfefce;
			line-height: 1.9em;
			text-align: left;
			}

		#prettyface ul {
			position: absolute;
			top: 0;
			right: 2.6em;
			width: 45.4em;
			list-style: none;
			font-size: 1em;
			clear: none;
			}

			#prettyface ul li {
				float: left;
				width: 15.1em;
				min-height: 19em;
				font-size: 1em;
				text-align: left;
				line-height: 1.6em;
				background: transparent url(images/mintyBg.png) bottom right no-repeat;
				}

				#prettyface ul li a {
					display: block;
					border: 0;
					padding: 1.5em;
					color: #18360c;
					text-align: left;
					}

				#prettyface ul li img {
					width: 12.3em;
					height: 6.2em;
					border: 0;
					}

		#prettyface p.more {
			position: absolute;
			right: -4.1em;
			top: 0;
			height: 19em;
			width: 6.7em;
			font-size: 1em;
			text-indent: -9000px;
			background: transparent url(images/bigArrow.png) center right no-repeat;
			}

			#prettyface p.more a {
				display: block;
				height: 19em;
				width: 6.7em;
				border: 0;
				}


/********************************************/
/************** PORTFOLIO PAGE **************/
/********************************************/

	/********************************************/
	/*               PORTFOLIO NAV              */
	/********************************************/
	#content .portfolionav {
		position: absolute;
		width: 6em;
		top: .7em;
		height: 26.6em;
		left: 75.4em;
		z-index: 1;
		}

		#content .portfolionav ul li {
			text-align: center;
			text-transform: uppercase;
			text-indent: -9000px;
			}

		#content .portfolionav ul li a {
			display: block;
			width: 6em;
			height: 26.6em;
			border: 0;
			background: transparent url(images/bigArrowDark.png) center right no-repeat;
			}


	/********************************************/
	/*                INFO/FOLIO                */
	/********************************************/
	#content .info {
		position: relative;
		width: 32em;
		height: 21.6em;
		margin: 0 0 4em 0;
		padding: 4em 0 1em 43.5em;
		background-color: #18200f;
		}
		
	#content .folio {
		position: relative;
		width: 44.5em;
		height: 11.6em;
		margin: 3em 0 5em 4em;
		padding: 1em 3em 1em 24em;
		background-color: #18200f;
		}

		#content .info h2, #content .folio h2 {
			font-size: 3em;
			font-weight: normal;
			margin: 0;
			padding: 0;
			}

		#content .info ul.urls li, #content .folio ul.urls li {
			font-size: 1.4em;
			}

		#content .info a, #content .folio a {
			border: 0;
			}

		/*------------------------------------------*/
		/*           MOCKUPS / SCREENSHOTS          */
		/*------------------------------------------*/
		#content .info ul.pics, #content .folio ul.pics {
			position: absolute;
			left: -2em;
			top: -1.6em;
			}

			#content .info ul.pics a, #content .info ul.pics img, #content .folio ul.pics a, #content .folio ul.pics img  {
				border: 0;
				}

			#content .folio ul.pics li img {
				width: 24.9em;
				height: 18.3em;
				}

			#content .info ul.pics li.full img {
				width: 44.8em;
				height: 32.8em;
				}

			#content .info ul.pics li.large {
				margin-bottom: -2.2em;
				z-index: 1;
				}

				#content .info ul.pics li.large img {
					width: 44.8em;
					height: 21.9em;
					}

			#content .info ul.pics li.medium {
				float: left;
				margin-right: -.7em;
				z-index: 2;
				}

				#content .info ul.pics li.medium img {
					width: 21.9em;
					height: 11.1em;
					}

		/*------------------------------------------*/
		/*               PROJECT QUOTE              */
		/*------------------------------------------*/
		#content .info blockquote, #content .info > p {
			padding: 0;
			margin: 3em 0 0 0;
			font-family: Georgia,"Times New Roman",serif;
			font-style: italic;
			width: 27em;
			}

			#content .folio p {
				margin: .5em 0 1em 0;
				padding: 0;
				font-size: 1.3em;
				text-align: left;
				}

			#content .info blockquote p {
				margin: 0 0 1em 0;
				padding: 0;
				font-size: 1.5em;
				text-align: left;
				}

				#content .info blockquote cite {
					font-size: 1.3em;
					color: #799a65;
					}

					#content .info blockquote cite span {
						font-weight: bold;
						font-style: italic;
						}

	/********************************************/
	/*           PORTFOLIO COLUMNS              */
	/********************************************/
	body.portfolio #content h3 {
		margin: 0;
		padding: 0;
		color: #6ebcc6;
		font: bold 1em Verdana,Arial,sans-serif;
		text-transform: uppercase;
		}

		#content .highlights, #content .services, #content .overview {
			float: left;
			margin: 1em 2em;
			}

		#content .highlights {
			width: 19em;
			margin: 1em 1em 1em 4em;
			}

		#content .services {
			width: 14em;
			}

		#content .overview {
			width: 27em;
			}

			#content .overview p {
				text-align: left;
				margin: 1em 0 0 0;
				padding: 0;
				font-size: 1.2em;
				}

		/*------------------------------------------*/
		/*                ICON LISTS                */
		/*------------------------------------------*/
		#content ul.icons {
			font-size: 1em;
			margin-top: .5em;
			}

			#content ul.icons li {
				text-align: left;
				font-size: 1.2em;
				padding: .7em 0 .7em 2em;
				background: transparent url(images/bulletLight.png) 0em .7em no-repeat;
				}

			#content ul.bullets li { background-image: url(images/icons/bullet_white.png); }
			#content ul.bullets.blue li { background-image: url(images/icons/bullet_blue.png); }
			#content ul.bullets.green li { background-image: url(images/icons/bullet_green.png); }

			#content ul li.images { background-image: url(images/icons/images.png); }
			#content ul li.bricks { background-image: url(images/icons/bricks.png); }
			#content ul li.world { background-image: url(images/icons/world.png); }
			#content ul li.date { background-image: url(images/icons/date.png); }
			#content ul li.arrowout { background-image: url(images/icons/arrow_out.png); }
/*			#content ul li. { background-image: url(images/icons/.png); } */


/********************************************/
/*************** SERVICES PAGE **************/
/********************************************/
body.services #content div h3 {
	position: absolute;
	font-size: 1em;
	margin: 0;
	padding: 0;
	}

	body.services #content div h3 img {
		width: 27.6em;
		height: 4.2em;
		}

body.services #content div > p {
	font-size: 1em;
	margin: .4em 3em 0 27.6em;
	padding: 0;
	line-height: 2em;
	color: #d4e5c2;
	}

	/********************************************/
	/*                 WE CREATE                */
	/********************************************/
	#content #create ul {
		background-color: #18200f;
		height: 22em;
		text-align: center;
		margin: 4em 0;
		}

		#content #create ul li {
			display: inline;
			width: 33%;
			height: 21.6em;
			}

			#content #create ul li img {
				position: relative;
				top: -1.5em;
				width: 23.3em;
				height: 23.8em;
				}

	/********************************************/
	/*                 WE PROVIDE               */
	/********************************************/
	#content #provide > ul {
		}

		#content #provide > ul > li {
			position: relative;
			width: 50.5em;
			min-height: 19em;
			margin: 4em 0 2.5em;
			padding-left: 25em;
			background: transparent url(images/weprovideBgDark.png) top left repeat-y;
			}

			#content #provide ul li h4 {
				display: none;
				}

			#content #provide ul li img.screenshot {
				position: absolute;
				top: -1.2em;
				left: -1.2em;
				width: 25.5em;
				height: 21.8em;
				z-index: 2;
				}

			#content #provide ul li img.logo {
				width: 16.3em;
				height: 6.8em;
				}

			#content #provide ul li ul, #content #provide ul li ul li { display: inline; }

			#content #provide ul li ul li a {
				position: relative;
				top: -2.1em;
				color: #236e8d;
				}

				#content #provide ul li#basecamp ul li a { left: 2.2em; }

			#content #provide ul li p {
				margin: 0;
				padding: .5em;
				color: #1f2914;
				}

			#content #provide ul li blockquote {
				position: relative;
				width: 48.5em;
				padding: 0 0 0 27em;
				margin: 0 0 0 -25em;
				color: #1f2914;
				font: italic 1em Georgia,Times,"Times New Roman",sans-serif;
				background: transparent url(images/weprovideBgLight.png) top left repeat-y;
				z-index: 1;
				}

				#content #provide ul li blockquote p {
					padding: .5em;
					}

				#content #provide ul li blockquote cite {
					position: absolute;
					bottom: .5em;
					right: .5em;
					color: #445630;
					font-style: normal;
					font-weight: bold;
					font-size: .9em;
					}

					#content #provide ul li blockquote cite a {
						color: #445630;
						}


/********************************************/
/*****************  ABOUT  ******************/
/********************************************/
#footer {
	position: relative;
	}


/********************************************/
/****************  FOOTER  ******************/
/********************************************/
#footer {
	position: relative;
	}

	#footer ul {
		position: absolute;
		top: 2.8em;
		left: 0;
		width: 100%;
		list-style: none;
		z-index: 2;
		text-align: center;
		}

		#footer ul li {
			display: inline;
			background: none;
			padding: 0 2em;
			font-size: 1.2em;
			text-transform: uppercase;
			border-left: 1px solid #acbd99;
			}

			#footer ul li:first-child {
				border: 0;
				padding-left: 1em;
				}
				
			#footer ul li a {
				color: #acbd99;
				}

	#footer p {
		position: relative;
		left: -47px;
		font-size: 1em;
		height: 8.2em;
		width: 65.5em;
		margin: 0 5em 0 0;
		padding: 0 0 0 5em;
		text-indent: -10em;
		background: transparent url(images/footerBgLeft.png) bottom left no-repeat;
		z-index: 1;
		}

		#footer p a {
			position: relative;
			display: block;
			right: -94px;
			height: 3.2em;
			width: 65.5em;
			margin: 0;
			padding: 5em 5em 0 0;
			text-align: center;
			text-decoration: none;
			color: #7f9473;
			background: transparent url(images/footerBgRight.png) bottom right no-repeat;
			border: 0;
			}

/********************************************/
/*****************  MENU  *******************/
/********************************************/
#header ul.menu {
	position: relative;
	list-style-type: none;
	margin: -6em 0 0 1em;
	width: 100%;
	height: 3em;
	z-index: 1;
	}

	#header ul.menu li {
		float: left;
		text-align: center;
		}

		#header ul.menu li a {
			display: block;
			min-height: 35px;
			margin: 0 1em 0 3em;
			padding-left: 3.5em;
			font-size: 1.4em;
			font-weight: normal;
			text-align: left;
			text-transform: uppercase;
			line-height: 2em;
			letter-spacing: .2em;
			background-position: 0 50%;
			background-repeat: no-repeat;
			}

			#header ul.menu li.home a { background-image: url(images/iconArrow.png); }
			#header ul.menu li.portfolio a { background-image: url(images/iconPictures.png); }
			#header ul.menu li.services a { background-image: url(images/iconStar.png); }
			#header ul.menu li.contact a { background-image: url(images/iconLetter.png); }
	
			#header ul.menu li a:hover, #header .menu li.current a {
				background-position: -576px 50%;
				}

 			#header ul.menu li.current a {
				font-weight: bold;
				cursor: default;
				}