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

Title: 		WareWorks screen styles
Version: 	1.0 

Author: 	DROPKICK - http://dropkickdesign.com
Created: 	2008-11-19
Modified: 	2008-11-20

Deployment note: SetOutputFilter DEFLATE should be set on this directory (squishy squishy)

Note: base typography definitions based on YUI Fonts CSS
	http://developer.yahoo.com/yui/fonts/
	version: 2.6.0
	Copyright (c) 2008, Yahoo! Inc. All rights reserved.
!!!! line 35
- - - - - - - - - - - - - - - - - - - - - */

@import "reset.css";

/* @group Globals */

/* mac hide \*/
html,
body {
	height: 100%; 
	width: 100%;
	}
/* end hide */
body {
	background: #524f26;
	min-height: 600px; /* for well-behaved browsers*/
	min-width: 960px;  /* for well-behaved browsers*/
	text-align: center;
	}

/* @end Globals */

/* @group Layout */

#outer {
	display: table;
	height: 100%;
	vertical-align: middle;
	width: 100%;
	}
#container {
	display: table-cell;
	height: 600px;
	position: relative;
	text-align: center;
	vertical-align: middle;
	}
#inner {
	background: #fff;
	height: 600px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 960px;
	}
#header {
	background: #aea78c url("../_img/bkg-nav.jpg") repeat-y 0 bottom;
	display: inline;
	float: right;
	min-height: 600px;
	width: 280px;	
	}
	#header #print-logo {
		display: none;
		}
	#header h1#logo,
	#home #header #logo-wrap {
		height: 298px;
		overflow: hidden;
		width: 280px;
		}
	#header h1#logo a {
		background: transparent;
		display: block;
		height: 115px;
		margin-top: 130px;
		overflow: hidden;
		text-indent: -9999px;
		width: 280px;
		}
	
body #content {
	color: #686445;
}
body#home #content {
	padding: 155px 70px 0 60px; 
	width: 540px;
}
	body#home #content #quote {
		background: url('../_img/home-quote.gif') no-repeat 0 0;
		height: 270px;
	}
	body#home #quote p {
		float: left;
		text-indent: -9999px;
	}
	body#home #continue {
		float: right;
		margin-top: 260px;
		}

body.about #content {
	padding: 170px 60px 0 50px;
	width: 570px;
	}
body.services #content,
body#clients #content {
	padding: 295px 100px 0 110px;
	width: 470px;
	}
body.clients #content {
	padding: 110px 90px 0 110px;
	width: 480px;
	}
	body.clients #content img {
		padding: 0 0 10px;
		}
body.contact #content {
	padding: 110px 120px 0 110px;
	width: 450px;
	}

#slides {
	height: 350px;
}	
#slides #pics {
	height: 302px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 446px;
}
	
	
/* @end Layout */

/* @group Typography */

			/*
			px  (%)
			10 	77
			11 	85
			12 	93 (was 93)
			13 	100
			14 	108 (was 107)
			15 	116 (was 114)
			16 	123.1 (was 122)
			17 	131 (was 129)
			18 	138.5 (was 136)
			19 	146.5 (was 144)
			20 	153.9 (was 152)
			21 	161.6 (was 159)
			22 	167
			23 	174
			24 	182
			25 	189
			26 	197 
			*/
/* x-small is for IE6/7 quirks mode. */
body {
/*	font: 13px/1.231 arial,helvetica,clean,sans-serif; */
	font: 13px/1.231 helvetica,arial,clean,sans-serif;
	*font-size: small; /* for IE */
	*font: x-small; /* for IE in quirks mode */
	}

/* nudge down to get to 13px equivalent for these form elements */ 
button,
input,
select,
textarea {
	font: 99% Helvetica,Arial,clean,sans-serif;
	}

/* remind tables remember to inherit */
table {
	}

/* Bump up IE to get to 13px equivalent for these fixed-width elements */
code,
kbd,
pre,
samp,
tt {
	font-family: monospace;
	*font-size: 108%;
	line-height: 100%;
	}

	/* @group Links */
	
	a:link,
	a:visited,
	a:hover,
	a:active {
		color: #333;
		text-decoration: none;
	}
	
	a:hover,
	a:active {
		border-bottom: 1px dotted #666;
	}
	
	h1 a:link,
	h1 a:visited,
	h1 a:hover,
	h1 a:active {
		color: #333;
		text-decoration: none;
	}
	
	h1 a:hover,
	h1 a:active {
		border: none;
	}
	
	/* @end Links */

body#about .big {
	font-size: 182%;
	font-weight: normal;
	}

p {
	font-size: 104%;
	line-height: 24px;
	padding-bottom: 24px;
	text-align: justify;
	}

body.clients h2 {
	font-size: 104%;
	font-weight: normal;
	line-height: 24px;
	margin-bottom: 9px;
	}
body.contact h2 {
	background: url('../_img/contact-logotype.gif') no-repeat;
	font-size: 1%;
	height: 24px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	top: 0;
}

body.contact p {
	font-size: 108%;
	margin-left: 100px;
	padding-bottom: 12px;
}

body.clients p {
	line-height: 23px;
	}

body.contact p.errors {
	padding-bottom: 3px;
}

/* @end Typography */

/* @group Lists */

#global-nav {
	display: block;
	}
	#global-nav li {
		float: left;
		}
		#global-nav li a {
			background: url('../_img/sprite-global.gif') no-repeat;
			border: none;
			display: block;
			font-size: 1%;
			height: 24px;
			margin: 0;
			overflow: hidden;
			padding: 0;
			text-indent: -9999px;
			top: 0;
			}
		li#nav-about a,
		li#nav-about a:visited {
			background-position: 0 -24px;
			left: 0;
			width: 69px;
			}
		body.about li#nav-about a,
		li#nav-about a:hover,
		li#nav-about a:active {
			background-position: 0 0;
			}
		li#nav-services a,
		li#nav-services a:visited {
			background-position: -69px -24px;
			left: 0;
			width: 65px;
			}
		body.services li#nav-services a,
		li#nav-services a:hover,
		li#nav-services a:active {
			background-position: -69px 0;
			}
		li#nav-clients a,
		li#nav-clients a:visited {
			background-position: -134px -24px;
			left: 0;
			width: 59px;
			}
		body.clients li#nav-clients a,
		li#nav-clients a:hover,
		li#nav-clients a:active {
			background-position: -134px 0;
			}
		li#nav-contact a,
		li#nav-contact a:visited {
			background-position: -193px -24px;
			left: 0;
			width: 87px;
			}
		body.contact li#nav-contact a,
		li#nav-contact a:hover,
		li#nav-contact a:active {
			background-position: -193px 0;
			}

#sub-nav {
	clear: both;
	padding: 15px 0 0 16px;
	}
	#sub-nav li {
		color: #eee;
		font-size: 85%;
		line-height: 85%;
		margin: 0;
		padding: 0;
		}
/* @group sub-nav services  */
		body.services #sub-nav li a {
			background: url('../_img/sprite-subnav-services.gif') no-repeat;
			border: none;
			display: block;
			font-size: 1%;
			height: 24px;
			margin: 0;
			overflow: hidden;
			padding: 0;
			text-indent: -9999px;
			top: 0;
			width: 252px;
			}
		body.services li#sub-supply a,
		body.services li#sub-supply a:visited {
			background-position: 0 0;
			left: 0;
			}
		body#supply li#sub-supply a,
		body.services li#sub-supply a:hover,
		body.services li#sub-supply a:active {
			background-position: -252px 0;
			}

		body.services li#sub-packaging a,
		body.services li#sub-packaging a:visited {
			background-position: 0 -24px;
			left: 0;
			}
		body#packaging li#sub-packaging a,
		body.services li#sub-packaging a:hover,
		body.services li#sub-packaging a:active {
			background-position: -252px -24px;
			}

		body.services li#sub-platform a,
		body.services li#sub-platform a:visited {
			background-position: 0 -48px;
			left: 0;
			}
		body#platform li#sub-platform a,
		body.services li#sub-platform a:hover,
		body.services li#sub-platform a:active {
			background-position: -252px -48px;
			}

		body.services li#sub-design a,
		body.services li#sub-design a:visited {
			background-position: 0 -72px;
			left: 0;
			}
		body#design li#sub-design a,
		body.services li#sub-design a:hover,
		body.services li#sub-design a:active {
			background-position: -252px -72px;
			}

		body.services li#sub-manufact a,
		body.services li#sub-manufact a:visited {
			background-position: 0 -96px;
			left: 0;
			}
		body#manufact li#sub-manufact a,
		body.services li#sub-manufact a:hover,
		body.services li#sub-manufact a:active {
			background-position: -252px -96px;
			}

		body.services li#sub-startup a,
		body.services li#sub-startup a:visited {
			background-position: 0 -120px;
			left: 0;
			}
		body#startup li#sub-startup a,
		body.services li#sub-startup a:hover,
		body.services li#sub-startup a:active {
			background-position: -252px -120px;
			}

		body.services li#sub-equipment a,
		body.services li#sub-equipment a:visited {
			background-position: 0 -144px;
			left: 0;
			}
		body#equipment li#sub-equipment a,
		body.services li#sub-equipment a:hover,
		body.services li#sub-equipment a:active {
			background-position: -252px -144px;
			}

		body.services li#sub-coaching a,
		body.services li#sub-coaching a:visited {
			background-position: 0 -168px;
			left: 0;
			}
		body#coaching li#sub-coaching a,
		body.services li#sub-coaching a:hover,
		body.services li#sub-coaching a:active {
			background-position: -252px -168px;
			}

		body.services li#sub-trouble a,
		body.services li#sub-trouble a:visited {
			background-position: 0 -192px;
			left: 0;
			}
		body#trouble li#sub-trouble a,
		body.services li#sub-trouble a:hover,
		body.services li#sub-trouble a:active {
			background-position: -252px -192px;
			}
/* @end sub-nav services  */

/* @group sub-nav clients  */
		body.clients #sub-nav li a,
		body.clients li#sub-google,
		body.clients li#sub-ingrid,
		body.clients li#sub-intuitive,
		body.clients li#sub-kalkan,
		body.clients li#sub-mirapoint,
		body.clients li#sub-sandstrom,
		body.clients li#sub-uncle,
		body.clients li#sub-zeltiq {
			background: url('../_img/sprite-subnav-clients.gif') no-repeat;
			border: none;
			display: block;
			font-size: 1%;
			height: 18px;
			margin: 0 0 1px;
			overflow: hidden;
			padding: 0;
			text-indent: -9999px;
			top: 0;
			width: 252px;
			}
		body.clients li#sub-7paths a,
		body.clients li#sub-7paths a:visited {
			background-position: 0 -3px;
			left: 0;
			}
		body#paths li#sub-7paths a,
		body.clients li#sub-7paths a:hover,
		body.clients li#sub-7paths a:active {
			background-position: -252px -3px;
			}

		body.clients li#sub-attheplate a,
		body.clients li#sub-attheplate a:visited {
			background-position: 0 -21px;
			left: 0;
			}
		body#plate li#sub-attheplate a,
		body.clients li#sub-attheplate a:hover,
		body.clients li#sub-attheplate a:active {
			background-position: -252px -21px;
			}

		body.clients li#sub-disney a,
		body.clients li#sub-disney a:visited {
			background-position: 0 -40px;
			left: 0;
			}
		body#disney li#sub-disney a,
		body.clients li#sub-disney a:hover,
		body.clients li#sub-disney a:active {
			background-position: -252px -40px;
			}

		body.clients li#sub-franzia a,
		body.clients li#sub-franzia a:visited {
			background-position: 0 -58px;
			left: 0;
			}
		body#franzia li#sub-franzia a,
		body.clients li#sub-franzia a:hover,
		body.clients li#sub-franzia a:active {
			background-position: -252px -58px;
			}

		body.clients li#sub-google {
			background-position: 0 -77px;
			left: 0;
			}
		body.clients li#sub-ingrid {
			background-position: 0 -95px;
			left: 0;
			}
		body.clients li#sub-intuitive {
			background-position: 0 -114px;
			left: 0;
			}
		body.clients li#sub-kalkan {
			background-position: 0 -132px;
			left: 0;
			}
		body.clients li#sub-mirapoint {
			background-position: 0 -151px;
			left: 0;
			}
		body.clients li#sub-sandstrom {
			background-position: 0 -169px;
			left: 0;
			}
		body.clients li#sub-seeds a,
		body.clients li#sub-seeds a:visited {
			background-position: 0 -187px;
			left: 0;
			}
		body#seeds li#sub-seeds a,
		body.clients li#sub-seeds a:hover,
		body.clients li#sub-seeds a:active {
			background-position: -252px -187px;
			}
		body.clients li#sub-uncle {
			background-position: 0 -206px;
			left: 0;
			}
		body.clients li#sub-zeltiq {
			background-position: 0 -224px;
			left: 0;
			}
/* @end sub-nav clients  */

#section-nav {
	display: block;
	margin-bottom: 15px;
	height: 15px;
	width: 450px;
	}
	#section-nav li {
		border-left: 1px solid #b6b2a0;
		float: left;
		padding: 0 8px;
		}
	#section-nav li.first {
		border: none;
		padding-left: 0;
		}
		#section-nav li a,
		#section-nav li a:visited {
			border: none;
			color: #b6b2a0;
			display: block;
			font-size: 93%;
			height: 12px;
			line-height: 100%;
			margin: 0;
			padding: 0;
			}
		body.story #section-nav li a#nav-story,
		body.photos #section-nav li a#nav-photos,
		body.endorsement #section-nav li a#nav-endorsement,
		#section-nav li a:hover,
		#section-nav li a:active {
			color: #524f26;
			}
#slide-nav {
	clear: left;
	display: block;
	height: 55px;
	margin: 0;
		}
	#slide-nav li {
		float: left;
		padding: 30px 0 5px 20px;
		}
	#slide-nav li#prev {
		border: none;
		padding-left: 390px;
		}

ul#contacts {
	display: block;
	height: 35px;
	padding-bottom: 32px;
	width: 100%;
	}

ul#contacts,
ul#contacts a {
	color: #b6b2a0;
	}
	#contacts li{
		border-left: 1px solid #b6b2a0;
		float: left;
		font-size: 93%;
		height: 12px;
		line-height: 100%;
		padding: 0 8px;
		}
	#contacts li.first {
		border: none;
		padding-left: 0;
		}
ol#errorlist {
	color: #c00;
	font-size: 85%;
	line-height: 100%;
	list-style-type: decimal;
	margin-left: 120px;
	padding-bottom: 12px;
	}

/* @end Lists */

/* @group Forms */

form {
	}
fieldset {
	}
legend {
	}
label,
input {
	display: block;
	float: left;
	margin-bottom: 18px;
	width: 90px;
	}
label {
	font-size: 85%;
	padding: 0;
	width: 90px;
	}
input {
	border: 1px solid #524f26;
	display: block;
	font-size: 93%;
	padding: 3px;
	width: 340px;
	}
input.button {
	background: #fff;
	border: none;
	color: #524f26;
	font-size: 85%;
	display: block;
	float: right;
	padding: 10px 3px;
	width: 80px;
	}
textarea {
	border: 1px solid #524f26;
	font-size: 93%;
	height: 150px;
	overflow: auto;
	padding: 3px;
	width: 340px;
	}
input,
textarea {
	}
select {
	}

br {
	clear: left;
	}

/* @end Forms */

/* @group Overrides */

.quiet {
	left: 0;
	position: absolute;
	top: -300px;
	width: 80%;
	}
.more {
	font-size: 91%;
	margin-left: 5px;
	}	
.clear {
	clear: both;
	}	
.left {
	float: left;
	}
.right {
	float: right;
	}

/* @end Overrides */