/*

	-- -- -- -- -- -- --
	Terran Creative
	default.css
	main site foundation layout
	-- -- -- -- -- -- --
	
*/

@import url("reset.css");

/* -- basic HTML elements -- */

	body {
		font: 73% "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #ddd;
		background: #999 url(../images/ui/bg.jpg) 50% 30px;
	}

	
/* -- Content Styling -- */
	abbr, .small-caps {
		letter-spacing: 0.1em;
	}
		p abbr, p .small-caps {
			font-size: 0.9167em; /* 11px */
		}
	.amp {
		font-family: Palatino, Georgia, serif;
		font-style: italic;
	}
	a:link {
		color: #FFF;
		text-decoration: none;
	}
	a:visited {
		color: #FFF;
		font-weight: normal;
		text-decoration: none;
	}
	a:hover {
		color: #000;
	}
	.disclaimer {
		color: #584b43;
		font: italic 1em Candara, georgia, serif;
		display: block;
		margin: 1em 0;
		text-indent: 0;
		text-align: right;
	}
	dd {
		/* 11px / 12px */
		font-size: 1.1em;
		line-height: 1.091;
		color: #a0783e;
	}
	dt {
		/* 12px / 12px */
		font-size: 1.2em;
		line-height: 1;
	}
	label {
		/* 11px / 19px */
		font-size: 1.1em;
		line-height: 1.7272;
		text-transform: uppercase;
	}
	h2 {
		height: 220px;
		width: 619px;
		display: block;
		text-indent: -9000px;
		margin: -60px 0 -90px 20px;
	}
	h3 {
		font: 1.7em "Trebuchet MS", Arial, Helvetica, sans-serif;
		line-height: 1.2667;
		color: #DDD;
		text-transform: lowercase;
		font-weight: bold;
		width: 430px;
		height: 28px;
		margin: 0 0 5px 0;
		background: url(../images/ui/bg-h4.png) 0 18px repeat-x;
		text-shadow: #999 1px -1px 1px;
	}
	h4 {
		font-size: 1.2em;
		line-height: 1.5833;
	}
	input, textarea {
		font: 1.3em "Lucida Grande", "Lucida Sans Unicode", arial, sans-serif;
		color: #291e18;
	}
	ul {
		margin-bottom: 0.5em;
	}
	ul li {
		font-size: 1.2em;
		line-height: 1.5833;
		margin-left: 1.5em;
		color: #222;
		list-style: disc;
	}
	ol li {
		font-size: 1.3em;
		line-height: 1.6923;
		margin-left: 24px;
		list-style: lower-roman;
	}
	ul li h4, ol li h4,
	ul li p, ol li p {
		font-size: 1em;
	}
	p {
		font-size: 1.2em;
		line-height: 1.5833;
		margin: 0 0 0.5em 0;
		color: #222;
	}
	p .accent {
		padding-bottom: 3px;
		border: none;
		background: url(../i/ui/border-low.png) repeat-x left bottom;	
	}
	p img {
		float: right;
		margin: 0 0 0 10px;
	}

/* -- containers -- */
	#container {
		width: 100%;
		min-height: 100%;
		position: relative;
	}
	#container .wrap {
		padding-top: 30px;
		padding-bottom: 110px;
		width: 100%;
		overflow: hidden;
	}
	#container .wrap2 {
		min-height: 680px;
	}
	#footer {
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 30px;
	}
	
	body, html {
		height: 100%;
	}
	#container {
		background: url(../images/ui/header-black.jpg) repeat-x 50% 0;
	}
	#container .wrap {
		background: url(../images/ui/bg-top.jpg) repeat-x 50% 140px;
	}
	#container .wrap2 {
		background: url(../images/ui/bg-hand.png) no-repeat 50% 110px;
	}
	
/* -- header -- */
	#header {
		background: #333332 url(../images/ui/header-grey.jpg) repeat-x 50% 0;
		height: 110px;
	}
	#header .wrapper1 {
		background: url(../images/ui/header-grey2.jpg) no-repeat 50% 0;
		height: 110px;
	}
	#header .wrapper2 {
		width: 780px;
		margin: 0 auto;
		height: 110px;
		position: relative;
	}
	#header h1 {
		width: 290px;
		height: 110px;
		background: url(../images/ui/logo.jpg) no-repeat;
		position: relative;
	}
	#header h1 a:link, #header h1 a:visited {
		display: block;
		width: 290px;
		height: 110px;
		text-indent: -9000px;
		overflow: hidden;
		position: relative;
		z-index: 5;
	}
	/* -- script-generated span for hover -- */
	#header h1 span {
		display: block;
		width: 290px;
		height: 110px;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../images/ui/logo-hover.jpg) no-repeat;
		z-index: 1;
	}
	
	#stage {
		width: 750px;
		margin: 0 auto;
		padding: 10px 0 0 0;
		overflow: hidden;
		position: relative;
	}
	
	#networks {
		width: 750px;
		height: 48px;
		display: block;
	}
	
	#networks ul {
		width: 313px;
		height: 48px;
		display: block;
		float: right;
		list-style-type: none;
		background: url(../images/ui/network-icons.png) no-repeat 0 0;
	}
	
	#networks ul li {
		width: 48px;
		height: 48px;
		display: block;
		margin: 0 5px 0 0;
		padding: 0;
		float: left;
	}
	
	#networks ul li.last {
		margin: 0;
	}
	
	#networks ul li a {
		width: 48px;
		height: 48px;
		display: block;
		position: relative;
		margin: 0;
		padding: 0;
		text-indent: -9000px;
		cursor: pointer;
	}
	
	#networks ul li.twitter a:hover {
		background: url(../images/ui/network-icons.png) no-repeat 0 -48px;
	}
	#networks ul li.facebook a:hover {
		background: url(../images/ui/network-icons.png) no-repeat -53px -48px;
	}
	#networks ul li.blogger a:hover {
		background: url(../images/ui/network-icons.png) no-repeat -106px -48px;
	}
	#networks ul li.myspace a:hover {
		background: url(../images/ui/network-icons.png) no-repeat -159px -48px;
	}
	#networks ul li.flickr a:hover {
		background: url(../images/ui/network-icons.png) no-repeat -212px -48px;
	}
	#networks ul li.linkedin a:hover {
		background: url(../images/ui/network-icons.png) no-repeat -265px -48px;
	}
	
	.column-1 {
		width: 510px;
		padding: 0;
		margin: -30px 0 0 0;
		float: left;
	}
	
	.column-1 p a:link, .column-1 p a:visited{
		color: #eee;
		text-decoration: none;
		font-weight: bold;
		font-size: 1.1em;
		text-shadow: #666 1px 1px 1px;
	}
	
	.column-1 p a:hover {
		color: #fff;
		text-shadow: #000 1px 1px 1px;
	}
	
	.column-1 div.bg-top, .column-1 div.bg-bottom {
		width: 510px;
		display: block;
	}
	.column-1 div.bg-top {
		height: 35px;
		background: url(../images/ui/bg-box-top.png) no-repeat;
	}
	.column-1 div.bg-bottom {
		height: 90px;
		background: url(../images/ui/bg-box-bottom.png) no-repeat;
	}
	.column-1 div.bg-fill {
		width: 430px;
		height: auto;
		padding: 0 40px;
		display: block;
		background: url(../images/ui/bg-box-fill.png) repeat-y;
	}
	.column-2 {
		width: 230px;
		padding: 0 0 0 10px;
		float: left;
	}
	
	.column-2 h3 {
		font: 1.5em "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #BCBCBC;
		font-weight: normal;
		width: auto;
		height: auto;
		margin: 0;
		background: none;
		text-shadow: #333 1px -1px 1px;
	}

	.column-2 p {
		padding: 10px 10px 5px 5px;
		margin: -5px 0 15px 0;
		width: 215px;
		color: #CCC;
		font-size: 1.1em;
		background: url(../images/ui/c2-box-off.png) right top no-repeat;
	}
	
	.column-2 p:hover {
		color: #DDD;
		background: url(../images/ui/c2-box-on.png) right top no-repeat;
	}
	
	.column-2 p strong {
		color: #AAA;
	}
	.column-2 p em {
		color: #FFF;
		font-style: italic;
	}
	.column-2 p	a {
		background: url(../images/ui/link.png) 0px 3px repeat-x;
		color: #EC6700;
	}
	.column-2 p	a:hover {
		color: #FFF;
	}
	.column-2 p	strong {
		color: #EEE;
		font-weight: bold;
	}
	.column-2 p	br {
		margin: 0 0 10px 0;
	}
	.column-2 p.contact	br {
		margin: 0;
	}
	
	
	.column-2 .googlead {
		width: 200px;
		height: 200px;
		display: block;
		margin: 0 15px 20px 15px;
	}
	
	#container #stage i {
		display: block;
		width: 750px;
		height: 24px;
		background: url(../i/ui/h2-overhang.png) no-repeat 0 0;
		position: absolute;
		top: 26px;
		left: 0;
		margin: 0;
	}
	
/* -- header nav -- */
	#primary-nav {
		position: absolute;
		top: 0;
		right: 0;
		width: 401px;
		height: 110px;
		background: url(../images/ui/menu.jpg) no-repeat 0 0;
	}
	#primary-nav ul {
		margin: 0;
	}
	#primary-nav li {
		width: 100px;
		height: 110px;
		position: absolute;
		top: 0;
		cursor: pointer;
		list-style: none;
		margin: 0;
	}
		li.about {
			left: 0;
		}
		li.services {
			left: 100px;
		}
		li.portfolio {
			left: 200px;
		}
		li.contact {
			left: 300px;
		}
	#primary-nav li a:link, #primary-nav li a:visited, #primary-nav div {
		display: block;
		width: 101px;
		height: 110px;
		overflow: hidden;
		text-indent: -9000px;
		cursor: pointer;
	}
	/* Primary nav default hover states */
	li.about a:hover, div.nav-about {
		background: url(../images/ui/menu.jpg) no-repeat 0 -110px;
	}
	li.services a:hover, div.nav-services {
		background: url(../images/ui/menu.jpg) no-repeat -100px -110px;
	}
	li.portfolio a:hover, div.nav-portfolio {
		background: url(../images/ui/menu.jpg) no-repeat -200px -110px;
	}
	li.contact a:hover, div.nav-contact {
		background: url(../images/ui/menu.jpg) no-repeat -300px -110px;
	}
	/* Primary nav scripted hover states */
	div.nav-services {
		position: absolute;
		top: 0;
		left: 100px;
	}
	div.nav-portfolio {
		position: absolute;
		top: 0;
		left: 200px;
	}
	div.nav-contact {
		position: absolute;
		top: 0;
		left: 300px;
	}

	
/* -- footer -- */
	#footer {
		padding-top: 51px;
		background: url(../images/ui/bg-bottom.png) repeat-x 0 -1px;
	}
	#footer .wrapper1 {
		background: #333332 url(../images/ui/footer-black.jpg);
	}
	#footer .wrapper2 {
		width: 780px;
		margin: 0 auto;
		position: relative;
		height: 30px;
	}
	#footer p {
		position: absolute;
		right: 0;
		bottom: 10px;
	}
	
	#footer .links {
		height: 30px;
		width: 50%;
		display: block;
		margin: 0;
		padding: 0;
		float: left;
	}
	#footer .links ul {
		height: 30px;
		width: auto;
		display: block;
		margin: 0;
		padding: 0;
	}
	#footer .links ul li {
		height: 30px;
		width: auto;
		display: block;
		list-style: none;
		float: left;
		margin: 0 15px 0 0;
		padding: 0;
	}
	#footer .links ul li a img {
		height: 16px;
		width: 16px;
		display: block;
		padding: 0;
		margin: 6px 5px 0 0;
		float: left;
		text-indent: -9000px;
	}
	#footer .links ul li a:link, #footer .links ul li a:visited {
		height: 30px;
		width: auto;
		display: block;
		float: left;
		margin: 0;
		padding: 0;
		font-weight: normal;
		font-size: 0.7em;
		letter-spacing: normal;
		line-height: 2.8em;
		color: #666;
	}
	#footer .links ul li:hover a {
		color: #FFF;
		text-decoration: none;
	}
	#footer .links ul li.fb a img {
		background: url(../images/ui/links.jpg) no-repeat -64px -16px;
	}
	#footer .links ul li.fb a:hover img {
		background: url(../images/ui/links.jpg) no-repeat -64px 0;
	}
	#footer .links ul li.ms a img {
		background: url(../images/ui/links.jpg) no-repeat -16px -16px;
	}
	#footer .links ul li.ms a:hover img {
		background: url(../images/ui/links.jpg) no-repeat -16px 0;
	}
	#footer .links ul li.tw a img {
		background: url(../images/ui/links.jpg) no-repeat -32px -16px;
	}
	#footer .links ul li.tw a:hover img {
		background: url(../images/ui/links.jpg) no-repeat -32px 0;
	}
	#footer .links ul li.di a img {
		background: url(../images/ui/links.jpg) no-repeat -80px -16px;
	}
	#footer .links ul li.di a:hover img {
		background: url(../images/ui/links.jpg) no-repeat -80px 0;
	}
	#footer .links ul li.in a img {
		background: url(../images/ui/links.jpg) no-repeat 0 -16px;
	}
	#footer .links ul li.in a:hover img {
		background: url(../images/ui/links.jpg) no-repeat 0 0;
	}
	#footer .links ul li.fk a img {
		background: url(../images/ui/links.jpg) no-repeat -48px -16px;
	}
	#footer .links ul li.fk a:hover img {
		background: url(../images/ui/links.jpg) no-repeat -48px 0;
	}
	
	#footer .copyright, #footer .secondary-nav {
		height: 30px;
		width: 50%;
		display: block;
		margin: 0;
		padding: 0;
		float: left;
		font-weight: normal;
		font-size: 1em;
		letter-spacing: normal;
		line-height: 2.6em;
		color: #888;
	}
	
	#footer .copyright {
		text-align: right;
	}
	
	#footer .secondary-nav {
		text-align: left;
	}
	
	#footer .copyright a:link, #footer .copyright a:visited, #footer .secondary-nav a:link, #footer .secondary-nav a:visited {
		color: #666;
	}
	#footer .copyright a:hover, #footer .secondary-nav a:hover {
		color: #FFF;
		text-decoration: none;
	}