@import url(reset.css);
@import url(fonts.css);

html, body {
	color:#333;
	background: #e6e6e6 url('/img/body-bg.jpg'); }

body {
	background: #e6e6e6 url('/img/body-bg.jpg'); padding-bottom: 50px;
	color: #333;
	text-align: left;
	font-family: Arial, sans-serif; }

/* global */
.clear { clear: both; }
.highlight { font-weight: bold; }
a { color: #0099cc; }
p { margin-bottom: 12px; }

h2 { font-size: 182%;
	color: #859a27;
	margin: 0 0 20px 0;
	padding-top: 5px;
	font-weight: bold; }

h3 { border-top: 1px solid #c2cd93;
	padding-top: 5px;
	font-size: 100%;
	color: #859a27;
	margin: 24px 0 16px 0;
	font-weight: bold; }
	
h4 { font-weight: bold; }

strong { font-weight: bold; }

.spacer,
.break {
	display: block;
	clear: both;
	height: 0;
	overflow: hidden; }

.hover { cursor: pointer; }

/* content */
#wrapper,
#page {
	margin: 0 auto; padding: 17px 50px 0 50px;
	width: 900px; height: auto;
	background: url(/img/bg-page.png) 0 0 repeat-y;
	color: #666;
	text-align: left; }
	
	#page-bottom {
		width: 1000px;
		height: 20px;
		margin: 0 auto;
		background: url(/img/bg-page-bottom.png) 0 0 no-repeat; }
		
		#page-bottom p {
			color: #8b8b8b;
			font-size: 93%;
			padding: 20px 0 0 50px; }
		
		#page-bottom a {
			color: #666; }

#content {
	margin: 0; padding: 50px 0 30px 0;
	width: 900px; }
	
	.main-content {
		width: 632px;
		float: right; }
		
		.main-content p, .main-content ul { width: 510px; }
		
	.sidebar-content {
		float: left;
		width: 237px; }

		.sidebar-content #talky {
			background: url(/img/who-we-are-talky.png) no-repeat 0 0;
			height: 39px;
			padding: 0;
			margin: 2px 0 0 -7px; }
	
.page-header {
	width: 632px;
	float: right; }
	
	h2.page-header { border-top: 1px solid #c2cd93; }


/* header */
#header {
	width: 900px;
	height: 102px;
	margin: 0 auto;
	padding-bottom: 5px;
	border-top: 4px solid #a9c215;
	border-bottom: 1px solid #e5e5e5; }
	
	#header a#logo {
		position: absolute;
		margin: 20px 0 0 40px; }
	
	#header ul { margin: 20px 0 0 252px; }
	
	#header li {
		font-size: 100%;
		width: 128px;
		height: 19px;
		float: left;
		background: url(/img/nav-bg-gradient.png) repeat 0 0;
		margin: 0 1px 1px 0; }
		
		#header li div {
			width: 128px;
			height: 19px;
			background: url(/img/nav-bg.png) no-repeat 0 0; }
			
			#header li div a {
				background: url(/img/bullet.png) no-repeat;
				background-position: 11px 8px; }

		#header li.active { background: url(/img/active-nav-bg.png) no-repeat; }
	
	#header ul li a {
		display: block;
		color: #333;
		font-weight: bold;
		text-decoration: none;
		padding: 0 0 3px 18px;
		margin: 0;
		width: 108px;
		height: 16px; }
		
		#header ul li ul { margin: 0; }

		#header ul li ul li {
			float: none;
			margin-right: 0; }
		
		#header ul li ul li a {
			font-weight: normal; }
			
	#nav li div {
		display: none;
	}


/* home */
.homepage {}
	
	.homepage ul { height: 410px; }
	
	.homepage ul li {
		width: 629px;
		height: 90px;
		margin-bottom: 5px; }
			
		.homepage li h4 {
			font-size: 138.5%;
			font-weight: normal;
			margin: -5px 0 0 100px;
			color: #333; }
			
		.homepage li p {
			margin: 0 0 0 100px;
			padding: 5px 0 0 0;
			color: #666;
			font-size: 93%;
			width: 455px; }
				
		#understand {
			border-left: 4px solid #ffc94a;
			background: #ececec url(/img/ps_icon_01.png) no-repeat 15px 10px; }

		#improve {
			border-left: 4px solid #80cdf6;
			background: #ececec url(/img/ps_icon_02.png) no-repeat 15px 10px;  }	

		#grow {
			border-left: 4px solid #88e567;
			background: #ececec url(/img/ps_icon_03.png) no-repeat 15px 10px;  }
	
		#start {
			border-left: 4px solid #d097ff;
			background: #ececec url(/img/ps_icon_04.png) no-repeat 15px 10px;  }
			
			.homepage #understand a, .homepage #improve a, .homepage #grow a, .homepage #start a {
				position: absolute;
				width: 633px;
				height: 90px;
				margin-left: -4px; }

/* site reviews banner */
#whats-your-problem #site-review-banner {
	color: #0099cc;
	width: 162px;
	height: 120px;
	background: url('/img/ux-site-reviews-banner.png') no-repeat;
	padding: 10px 35px 0 55px;
}
	#whats-your-problem #site-review-banner p {
		font-size: 12px;
		display: block;
		padding: 0; margin: 0;
		line-height: 15px;
	}
	#whats-your-problem #site-review-banner h2 {
		color: #000;
		font-size: 18px;
		margin: 5px 0 5px 0;
	}

	/* sidebar content */
	.homepage .sidebar-content {
		color: #859b28;
		font-size: 108%;
		margin-top: -10px; }

		#whats-your-problem { height: 420px;}
		
		#whats-your-problem h2 {
			font-size: 285%;
			font-weight: bold;
			margin: 0 0 26px 0;
			padding: 0; }
		
		#whats-your-problem p {
			line-height: 25px;
			margin-bottom: 69px; }
	
		/* talk to us */
		#talk-to-us {
			border-top: 1px solid #e5e5e5;
			font-size: 85%; }
		
			#talk-to-us h5, #fuzzy-thoughts h5 {
				color: #3399cc;
				margin: 10px 0 13px 0; }
			
			#talk-to-us dt {
				color: #bed14f;
				margin: 0 10px 0 0;
				float: left; }
			
			#talk-to-us dd { color: #333; margin: 10px 0 0 0; }
		
				#talk-to-us dt.office { margin-top: 10px; }
					#talk-to-us dd.office {
						float: left;
						margin: 10px 30px 0 0; }
						
				#talk-to-us dd.fax {}
					#talk-to-us dt.fax { margin-top: 10px; }

			#talk-to-us a { text-decoration: none; }

	/* fuzzy thoughts */
	#fuzzy-thoughts {
		border-top: 1px solid #e5e5e5;
		font-size: 85%; }

		.blog-teaser { margin-left: 120px; }
		
		.fuzzy-thoughts-date { color: #3399cc; }
	
		#fuzzy-thoughts h6 {
			font-size: 108%;
			color: #006699;
			margin: 2px 0 5px 0; }
		
		#fuzzy-thoughts p {
			color: #333;
			font-size: 100%;
			width: 350px;
			margin: 0 0 0 0; }
		
		#fuzzy-thoughts a { color: #006699; }
	
		#fuzzy-thoughts img { float: left; }


/* who we are */
#who-we-are-sidebar {
	background: #e6f4e6 url(/img/who-we-are-sidebar.png) no-repeat 29px 65px;
	height: 261px; }
	
	#one-percent {
		background: #d9f0fc url(/img/one-percent-for-the-planet.png) no-repeat 23px 21px;
		margin: 17px 0 0 0;
		font-size: 85%; }
		
		#one-percent h3 { 
			padding: 75px 12px 15px 23px;
			margin: 0;
			border: 0;
			color: #333;
			font-weight: bold; }
		#one-percent p {
			padding: 0 12px 15px 23px;
			margin: 0; }
	
	.linked-in {
		margin-bottom: 30px;
	}
		.linked-in img {
			vertical-align: middle;
		}
	

/* what we do */
.what-we-do .sidebar-content {
	/*
	height: 320px;
		background: #e6f4e6 url(/img/what-we-do-sidebar.png) no-repeat 31px 55px;*/
	 }
	
	#what-we-do-sidebar-content {
		height: 320px;
		background: #e6f4e6 url(/img/what-we-do-sidebar.png) no-repeat 31px 55px; }
		#what-we-do-sidebar-content ul { display: none; }
	
	.what-we-do .sidebar-content h2 {
		font-size: 100%;
		font-weight: bold;
		margin: 0 0 0 30px;
		padding: 20px 0 0 0; }
		
	.what-we-do .sidebar-content #talky { margin-top: 1px; }
	
	/*
	.what-we-do #talky {
			background: url(/img/who-we-are-talky.png) no-repeat 0 0;
			height: 39px;
			padding: 0;
			margin: 321px 0 0 -7px;
			float: left; }*/
	
	
	.what-we-do ul { margin: 0 0 20px 0; }
	
		.what-we-do li {
			padding-left: 30px;
			background: url(/img/content-bullet.png) no-repeat 15px 6px;
			margin-bottom: 15px; }
	
	.what-we-do #problem {
		float: left;
		width: 202px;
		height: 182px; }
		
		.what-we-do #problem div {
	  		position: absolute;
	  		top: 0;
	  		left: 0;
	  		display: none; }
	
	.what-we-do #process {
		float: left;
		width: 202px;
		height: 182px; }
		
		.what-we-do #process div {
	  		position: absolute;
	  		top: 0;
	  		left: 202px;
	  		display: none; }
	
	.what-we-do #result div {
		float: left;
		position: absolute;
  		top: 0;
  		left: 202px;
  		display: none; }
	
		.what-we-do #result div {
	  		position: absolute;
	  		top: 0;
	  		left: 404px;
	  		display: none; }
		
	#what-we-do-process { position: relative; }
	
	#what-we-do-nav {
		display: block;
		width: 128px;
		height: 19px;
		margin: -19px 0 0 0; }
		
		#what-we-do-nav div { display: none; }


/* problem solution */
.problem-solution .sidebar-content ul { margin: 0; padding: 0; }

	.problem-solution .sidebar-content li {
		width: 225px;
		height: 53px;
		background-color: #ececec;
		margin-bottom: 4px; }

		.problem-solution .sidebar-content li#understand,
			.problem-solution .sidebar-content li#improve,
			.problem-solution .sidebar-content li#grow,
			.problem-solution .sidebar-content li#start {
				background-position: -3px -1px; }
	
			.problem-solution .sidebar-content li#understand { background: #ececec url(/img/ps_icon_sm_01.png) no-repeat; }
			.problem-solution .sidebar-content li#improve { background: #ececec url(/img/ps_icon_sm_02.png) no-repeat; }
			.problem-solution .sidebar-content li#grow { background: #ececec url(/img/ps_icon_sm_03.png) no-repeat; }
			.problem-solution .sidebar-content li#start { background: #ececec url(/img/ps_icon_sm_04.png) no-repeat; }

		
		.problem-solution .sidebar-content ul li a {
			display: block;
			width: 160px;
			height: 38px;
			color: #333;
			text-decoration: none;
			padding: 15px 10px 0 68px;
			margin-left: -12px;
			font-size: 85%; }
	
			.problem-solution .sidebar-content li#understand.active { background-color: #ffc94a; }
			.problem-solution .sidebar-content li#improve.active { background-color: #80cdf6; }
			.problem-solution .sidebar-content li#grow.active { background-color: #88e567; }
			.problem-solution .sidebar-content li#start.active { background-color: #d097ff; }

.problem-solution ul { margin: -15px 0 25px 10px; }
	
.problem-solution li {
		padding-left: 8px;
		margin-bottom: 8px;
		background: url(/img/bullet.png) no-repeat 3px 7px; }

.problem-solution img {
	margin: 0 8px 16px 0;
	float: left; }

.problem-solution h4 { margin: 0 0 20px 0; }


/* process */
.the-process .sidebar-content {
	height: 320px;
	background: #e6f4e6 url(/img/process-sidebar.png) no-repeat 27px 70px; }
	
	.the-process .sidebar-content #talky { margin-top: 146px; }
	
	.the-process .sidebar-content a {
		color: #fff;
		font-size: 85%;
		text-decoration: none;
		display: block;
		width: 101px;
		height: 20px; }
		
		.the-process .sidebar-content a#sidebar-discovery {
			margin: 95px 0 -10px 68px;
			padding: 3px 0 0 27px;
			background: url(/img/process-discovery-bg.png) no-repeat; }
			
		.the-process .sidebar-content a#sidebar-interface-design {
			margin: 0 0 -10px 68px;
			padding: 3px 0 0 11px;
			background: url(/img/process-interface-design-bg.png) no-repeat; }
			
		.the-process .sidebar-content a#sidebar-validation {
			margin: 0 0 0 68px;
			padding: 3px 0 0 27px;
			background: url(/img/process-validation-bg.png) no-repeat; }

.the-process p.process {
	width: 515px;
	margin: 15px 0 0 50px; }

.the-process h2 { margin-bottom: 0; }
	
.the-process h3#subhead {
	color: #b2b2b2;
	font-weight: normal;
	padding: 0; border: 0;
	margin-top: 0px; }

	.the-process h3 {
		border: 0;
		font-size: 100%;
		font-weight: bold; }
		
		.the-process h3 a { color: #fff; }
		
		.the-process #step-discovery h3 { padding: 29px 0 0 69px; }
		.the-process #step-interface-design h3 { padding: 28px 0 0 48px; }
		.the-process #step-validation h3 { padding: 28px 0 0 69px; }
	
	.the-process #step-discovery { background: #f4f4f4 url(/img/process-discovery.png) no-repeat; width: 600px; }
	.the-process #step-interface-design { background: #f4f4f4 url(/img/process-interface-design.png) no-repeat; width: 600px; }
	.the-process #step-validation { background: #f4f4f4 url(/img/process-validation.png) no-repeat; width: 600px; }

	.the-process dl {
		font-size: 85%;
		padding-bottom: 10px; }
	
	.the-process dt {
		font-weight: bold;
		padding: 0 0 0 15px; }
		
		.the-process #step-discovery dt { background: url(/img/discovery-dot.png) no-repeat 0 2px; }
		.the-process #step-interface-design dt { background: url(/img/interface-design-dot.png) no-repeat 0 2px; }
		.the-process #step-validation dt { background: url(/img/validation-dot.png) no-repeat 0 2px; }
	
	.the-process dd {
		padding: 0 0 0 15px;
		margin: 0 0 16px 0; }
	
	dl.bullets-left {
		float: left;
		margin: 20px 30px 0 35px;
		width: 250px; }
	
	dl.bullets-right {
		float: left;
		margin: 20px 0 0 0;
		width: 250px; }
	
	.process-bottom {
		width: 600px;
		height: 8px;
		margin-bottom: 6px;
		background: url(/img/process-bottom.png) no-repeat; }


/* case studies */
.case-studies .sidebar-content ul li {
	color: #006699;
	font-size: 85%;
	display: block;
	background: #ececec;
	height: 53px;
	margin-bottom: 4px;
	border-left: 4px solid #c2cd93; }
	
	.case-studies .sidebar-content ul li#threadless-case-study { background: #ececec url(/img/work/cs_nav_thumb_01.png) no-repeat 9px 5px; }
	.case-studies .sidebar-content ul li#microsoft-case-study { background: #ececec url(/img/work/cs_nav_thumb_02.png) no-repeat 9px 5px; }
	.case-studies .sidebar-content ul li#cmomgo-case-study { background: #ececec url(/img/work/cs_nav_thumb_03.png) no-repeat 9px 5px; }
	.case-studies .sidebar-content ul li#leapfrog-case-study { background: #ececec url(/img/work/cs_nav_thumb_04.png) no-repeat 9px 5px; }
	.case-studies .sidebar-content ul li#microsoft-case-study-2 { background: #ececec url(/img/work/cs_nav_thumb_05.png) no-repeat 9px 5px; }
	.case-studies .sidebar-content ul li#vibes-case-study { background: #ececec url(/img/work/cs_nav_thumb_06.png) no-repeat 9px 5px; }
	.case-studies .sidebar-content ul li#great-wolf-case-study { background: #ececec url(/img/work/cs_nav_thumb_07.png) no-repeat 9px 5px; }
	
		.case-studies .sidebar-content ul li.active {
			padding: 13px 0 0 60px;
			height: 40px;
			color: #666; }
		
		.case-studies .sidebar-content ul li#threadless-case-study.active { background: #c3e9ca url(/img/work/cs_nav_thumb_01.png) no-repeat 9px 5px; }
		.case-studies .sidebar-content ul li#microsoft-case-study.active { background: #c3e9ca url(/img/work/cs_nav_thumb_02.png) no-repeat 9px 5px; }
		.case-studies .sidebar-content ul li#cmomgo-case-study.active { background: #c3e9ca url(/img/work/cs_nav_thumb_03.png) no-repeat 9px 5px; }
		.case-studies .sidebar-content ul li#leapfrog-case-study.active { background: #c3e9ca url(/img/work/cs_nav_thumb_04.png) no-repeat 9px 5px; }
		.case-studies .sidebar-content ul li#microsoft-case-study-2.active { background: #c3e9ca url(/img/work/cs_nav_thumb_05.png) no-repeat 9px 5px; }
		.case-studies .sidebar-content ul li#vibes-case-study.active { background: #c3e9ca url(/img/work/cs_nav_thumb_06.png) no-repeat 9px 5px; }
		.case-studies .sidebar-content ul li#great-wolf-case-study.active { background: #c3e9ca url(/img/work/cs_nav_thumb_07.png) no-repeat 9px 5px; }
	
	.case-studies .sidebar-content ul li a {
		color: #006699;
		text-decoration: none;
		display: block;
		width: 173px;
		height: 40px;
		margin: 0;
		padding: 13px 0 0 60px; }
		
		.case-studies .sidebar-content ul li.active a {
			color: #666;
			text-decoration: none;
			display: block;
			width: 173px;
			height: 40px;
			margin: -13px 0 0 -60px;
			padding: 13px 0 0 60px; }

	.case-studies img {
		border: 1px solid #ccc;
		float: left;
		margin: 0 6px 20px 0; }
	
	.case-studies h2 { margin-bottom: 0; }
	
	.case-studies h3#subhead {
		color: #b2b2b2;
		font-weight: normal;
		padding: 0; border: 0;
		margin: 0px 0 20px 0; }
	
	.case-studies #what-we-gave-them { background: url(/img/casestudy_flow.png) no-repeat 0 4px; }
	
		#what-we-gave-them ul { margin: 70px 0 25px 0; }
		#what-we-gave-them li { padding: 0 0 12px 40px; }
		
			#what-we-gave-them li.discovery { background: url(/img/discovery-process.png) no-repeat 0 2px; }
			#what-we-gave-them li.interface-design { background: url(/img/interface-design-process.png) no-repeat 0 2px; }
			#what-we-gave-them li.validation { background: url(/img/validation-process.png) no-repeat 0 2px; }
	
	#what-they-said {
		width: 531px;
		background: url(/img/cs_balloon_top.png) no-repeat;
		margin: 20px 0 3px 0;
		padding: 11px 0 0 0;
		font-size: 85%; }
	
		#what-they-said p {
			background: #d6ebf5 url(/img/cs_balloon_bottom.png) no-repeat 0 100%;
			margin: 0 0 0 53px;
			width: 410px;
			padding: 5px 20px 10px 20px; }
	
	#what-we-said {
		width: 531px;
		height: 86px;
		background: url(/img/what-we-said.png) no-repeat;
		font-size: 85%;
		margin-bottom: 40px; }
		
		#what-we-said p {
			padding: 10px 0 0 35px;
			width: 430px; }

.case-study-thumb {
	position: relative;
	width: 190px;
	height: 100px;
	float: left;
	margin: 0 8px 22px 0; }
	
img.overlay {
	position: absolute;
	top: 71px;
	right: -1px;
	border: 0;
	padding: 0; margin: 0; }

/* contact us */
.contact-us .sidebar-content {
	height: 320px;
	background: #e6f4e6 url(/img/contact-sidebar.png) no-repeat 20px 39px; }
	
	.contact-us .sidebar-content #talky { margin-top: 322px; }
	
	.contact-us img {
		float: left;
		margin-right: 5px; }
		
	.contact-us p#address {
		margin-top: 25px; }
			
	.contact-us p.contact-info {
			float: left;
			width: 150px;
			margin: 0 0 20px 0; }

/* accessibility statement */
.accessibility-statement .sidebar-content { background: #e6f4e6; }
	
	.accessibility-statement .sidebar-content p {
		padding: 35px 20px;
		margin: 0; }
		
.accessibility-statement li {
	padding-left: 30px;
	background: url(/img/content-bullet.png) no-repeat 15px 6px;
	margin-bottom: 15px; }