@import 'normalize.css';
@import 'typography.css';

/* !Element-level Declarations */
	html {
		color: #5f5c5c;
		text-shadow: 1px 1px 2px #ddd;
		/* background: url(../images/bg-960_grid_12_col.png) repeat-y center top; */
		background: #fbfbfb url(../images/bg-body.jpg) no-repeat center bottom;
		min-height: 100%;
	}

	body {
		position: relative;
		width: 940px;
		margin: 0 auto;
		padding: 20px 0 0;
	}

	a {
		color: #4f9695;
	} 
	
	a:hover,
	a:focus,
	a:active,
	a.active {
		color: #db5921;
	}
	
	a:active {
		position: relative;
		bottom: -1px;
	} 
	
	h1 {
		color: #9b0f1e;
	}
	
	article,
	aside,
	section {
		display: block;
	}
	
	aside {
		position: relative;
		margin-top: 3.2em;
		margin-bottom: 3.2em;
		margin-left: -20px;
		padding-top: 1.6em;
		padding-right: 20px;
		padding-left: 80px;
		color: #9b0f1e;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	
		aside.image,
		aside.video {
			width: 513px;
			margin-left: -100px;
			padding-left: 0;
			padding-bottom: 15px;
		}
		
		aside.image {
			padding: 0;
		}
	
	footer {
		display: block;
		clear: both;
		padding-bottom: 30px;
	}

/* !Sitewide Delcarations */

	.hidden {
		/* screen reader-friendly hidden content from http://www.webaim.org/techniques/css/invisiblecontent/ */
		position: absolute;
		left: -10000px;
		top: auto;
		width: 1px;
		height: 1px;
		overflow: hidden;
	}

	#site-header {
		display: block;
		overflow: hidden;
		height: 90px;
	}
	
		#site-header h1 {
			display: block;
			background: url(../images/logo-oc.png) no-repeat left top;
			width: 344px;
			height: 46px;
			text-indent: -9999em;
			position: relative;
		}
		
			#site-header h1 a {
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 344px;
				height: 46px;
			}
		
		ul#nav-primary {
			position: absolute;
			top: 17px;
			right: 0px;
			overflow: visible;
		}
		
			ul#nav-primary li {
				float: left;
				margin-left: 6px;
				position: relative;
				overflow: visible;
			}
			
				ul#nav-primary li a {
					padding: 0 8px 3px;
				}
					
					ul#nav-primary li a#nav-primary-case-studies-link {
						padding-right: 18px;
						border-right: 1px solid #fbfbfb;
						background: url(../images/ico-menu.png) no-repeat right 7px;
					}
					
						ul#nav-primary li a#nav-primary-case-studies-link:hover,
						ul#nav-primary li a#nav-primary-case-studies-link:focus,
						ul#nav-primary li a#nav-primary-case-studies-link.active,
						body.case-studies ul#nav-primary li a#nav-primary-case-studies-link {
							background-position: right -5px;
						}
					
					ul#nav-primary li a#nav-primary-case-studies-link:hover,
					ul#nav-primary li a#nav-primary-case-studies-link:focus,
					ul#nav-primary li a#nav-primary-case-studies-link.active {
						border-right: 1px solid #D6E2E3;
					}
				
			ul#nav-sub-case-studies {
				position: absolute;
				right: 10px;
				top: 1.4em;
				width: 240px;
				margin-right: -10px;
				background: #fbfbfb url(../images/bg-body.jpg) no-repeat center bottom;
				padding: 12px 10px 10px;
				z-index: 10;
				opacity: .9;
				border-right: 1px solid #D6E2E3;
				border-bottom: 1px solid #D6E2E3;
				-moz-border-radius-bottomright: 10px;
				-moz-border-radius-bottomleft: 10px;
				-webkit-border-bottom-right-radius: 10px;
				-webkit-border-bottom-left-radius: 10px;
				border-bottom-right-radius: 10px;
				border-bottom-left-radius: 10px;
			}
				
				ul#nav-primary li ul#nav-sub-case-studies li {
					margin-left: 0;
					padding: 0;
					float: none;
					display: list-item;
					margin-bottom: .4em;
				}

					ul#nav-primary li ul#nav-sub-case-studies li a {
						padding: 0;
					}

			ul#nav-primary li#nav-primary-rss a {
				padding-right: 18px;
				background: url(../images/ico-rss.png) no-repeat right 2px;
			}
			
			ul#nav-primary li#nav-primary-rss a:hover,
			ul#nav-primary li#nav-primary-rss a:focus {
				background-position: right -16px;
			}
	
			body.home #nav-primary-home a,
			body.entries #nav-primary-weblog a,
			body.case-studies #nav-primary-case-studies a,
			body.team #nav-primary-team a
			{
				color: #db5921;
			}
		
			body.case-studies #nav-primary-case-studies li a {
				color: #4f9695;
			}
			
			body.case-studies #nav-primary-case-studies li a:hover,
			body.case-studies #nav-primary-case-studies li a:focus,
			body.case-studies #nav-primary-case-studies li a:active
			{
				color: #db5921;
			}

	a.read-full:link, a.comment:link,
	a.read-full:visited, a.comment:visited {
		color: #fefefe;
		background: #4f9695;
		text-shadow: -1px -1px 2px #44898f;
		padding: .4em .7em;
		-webkit-border-radius: .5em;
		-moz-border-radius: .5em;
	}
	
	.activated a.read-full:link, .activated a.read-full:visited,
	a.read-full:hover, a.read-full:focus,
	a.comment:hover, a.comment:focus {
		background: #db5921;
		text-shadow: -1px -1px 2px #b8762f;
	}
	
	.header-section { /* sectional headers along the left-hand side */
		width: 160px;
		float: left;
		clear: both;
	}
	
	.content-primary { /* main column of content */
		width: 700px;
		float: right;
		margin-top: 0;
		margin-bottom: 3.2em;
		overflow: visible;
	}
	
	.content {
		margin-bottom: 3.2em;
	}
	
	.required,
	.intro p {
		color: #9b0f1e;
	}
	
	.required {
		position: relative;
		bottom: -.3em;
	}
	
	ul.errorlist {
		color: #A40200;
		margin-top: 1.6em;
		margin-bottom: .4em;
	}
	
	.wrapper { /* ie7 float clearning necessity */
		overflow: hidden;
	}

/* !Page: home.html */

	ul#case-study-overview {
		position: relative;
		height: 350px;
		margin-top: -50px;
	}
	
		ul#case-study-overview li {
			position: absolute;
		}
		
			ul#case-study-overview .industry {
				display: block;
			}
			
			ul#case-study-overview li.activated div.summary {
				position: absolute;
				z-index: 10;
				width: 300px;
				left: 33%;
				top: 33%;
				background: #fbfbfb url(../images/bg-body.jpg) no-repeat center bottom;
				padding: 10px 10px 0;
				opacity: .9;
				border: 1px solid #D6E2E3;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				cursor: pointer;
			}
	
		#ahnu {
			width: 152px;
			height: 108px;
			left: 450px;
			top: 236px;
		}
		
		#clarisonic {
			width: 234px;
			height: 122px;
			left: 500px;
			top: 47px;
		}
		
		#opal {
			width: 77px;
			height: 132px;
			left: 360px;
			top: 180px;
		}
		
		#einstein-wireless {
			width: 231px;
			height: 128px;
			left: 543px;
			top: 146px;
		}
		
		#imds {
			width: 124px;
			height: 136px;
			left: 310px;
			top: 30px;
		}
		
		#sun-west-ranch {
			width: 147px;
			height: 99px;
			left: 193px;
			top: 147px;
		}
		
		#gallatin-valley-food-bank {
			width: 76px;
			height: 213px;
			left: 436px;
			top: 13px;
		}
	
	#recent-blog-posts {
		overflow: hidden;
	}
	
		#recent-blog-posts h1 {
			position: absolute;
			left: -9999em;
		}
			
		#recent-blog-posts article {
			float: left;
			width: 268px;
			padding-right: 40px;
			background: url(../images/rule-vertical.jpg) repeat-y right top;
		}
		
		#recent-blog-posts article.not-first {
			padding-left: 28px;
		}
		
		#recent-blog-posts article.last {
			background-image: none;
			padding-right: 0;
		}
	
	#oc-approach {
		margin: 3.2em 0;
		position: relative;
	}
			
		#oc-approach .intro {
			width: 550px;
			float: left;
			
		}
		
		#oc-approach #capabilities-graph {
			margin-left: 30px;
		}
		
		#capabilities-trigger {
			position: absolute;
			right: 0;
			top: 240px;
			cursor: pointer;
			width: 75px;
			height: 32px;
			background: url(../images/btn-capabilities.png) no-repeat left top;
			text-indent: -9999em;
		}
		
			#capabilities-trigger:hover,
			#capabilities-trigger:focus {
				background-position: right top;
			}
		
			#capabilities-trigger.expanded {
				background-position: left bottom;
			}

				#capabilities-trigger.expanded:hover,
				#capabilities-trigger.expanded:focus {
					background-position: right bottom;
				}
		
		#capabilities {
			clear: both;
			margin-left: 160px;
			overflow: hidden;
		}
		
			li.capability {
				width: 212px;
				float: left;
				padding: 0 34px 0 34px;
				background: url(../images/rule-vertical.jpg) repeat-y right top;
			}
			
			li.capability.first {
				padding: 0 34px 0 0;
			}
			
			li.capability.last {
				background: none;
				padding: 0 0 0 34px;
			}
			
			li.capability ul {
				margin-left: 15px;
			}
			
				li.capability li {
					margin-bottom: .2em;
				}
				
			#capability-strategize h2 {
				color: #63b3b8;
			}
			
			#capability-strategize li {
				list-style-image: url(../images/bullet-strategize.png);
			}
			
			#capability-create h2 {
				color: #669900;
			}
			
			#capability-create li {
				list-style-image: url(../images/bullet-create.png);
			}
			
			#capability-deliver h2 {
				color: #db5921;
			}
			
			#capability-deliver li {
				list-style-image: url(../images/bullet-deliver.png);
			}
			
			#approach {
				clear: both;
				overflow: hidden;
				margin-left: 160px;
			}
				
				#approach .first,
				#approach .last {
					width: 360px;
					float: left;
				}
				
				#approach .first {
					padding-right: 40px;
				}
				
/* !Page: team.html */

	#leadership-team .intro {
		width: 380px;
		float: right;
		margin: 0 0 3.2em 0;
	}
	
	ul#team {
		width: 480px;
		float: left;
		margin: 0 0 3.2em 0;
	}
	
		#team li {
			padding-bottom: 1.35em; /* #team h2 has no margin -- collapses too far when running accordion in IE */
		}
		
		#team .inner {
			padding-top: 1.65em; /* #team h2 has no margin -- collapses too far when running accordion in IE */
			margin-left: 20px;
		}
		
		.links {
			border-top: 1px solid #D6E2E3;
			overflow: hidden;
			padding: 1em 0 0;
		}
			
			ul.team-links {
				margin: 0;
				padding: 0;
			}
				
				.link-weblog {
					padding: 0 0 0 20px;
					height: 1.1em;
					background: url(../images/ico-weblog.png) no-repeat left top;
				}
			
				.link-email {
					padding: 0 0 0 20px;
					height: 1.1em;
					background: url(../images/ico-email.png) no-repeat left top;
				}
	
			ul.social-media-links li {
				display: inline;
				margin-right: 1.5em;
			}
			
				.link-twitter {
					padding: 0 0 0 20px;
					height: 1.1em;
					background: url(../images/ico-twitter.png) no-repeat left top;
				}
			
				.link-linkedin {
					padding: 0 0 0 20px;
					height: 1.1em;
					background: url(../images/ico-linkedin.png) no-repeat left top;
				}
			
	.tooltip {
		position: absolute;
		z-index: 10;
		width: 300px;
		color: #5f5c5c;
		background: #fbfbfb url(../images/bg-body.jpg) no-repeat center bottom;
		margin: 1.9em 0 0 -240px;
		padding: 10px;
		opacity: .9;
		border: 1px solid #D6E2E3;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		cursor: pointer;
	}

/* !Section: blog */

	.entries .archive,
	.categories .archive { /* archive list items */
		margin-bottom: 5.4em;
	}
		
		.entries a img.thumbnail,
		.categories a img.thumbnail,
		.entries img.thumbnail,
		.categories img.thumbnail { 
			border: 2px solid #4f9695;
			float: left;
			position: relative;
			margin: 0 10px 10px -30px;
		}
	
		.entries .archive .excerpt,
		.categories .archive .excerpt {
			margin-left: 60px;
		}
	
	.entries .hentry blockquote {
		position: relative;
		left: -54px;
		padding: 10px 0 0 54px;
		margin: .5em 0 .5em 0;
		color: #bbb;
		background: #fbfbfb url(../images/bg-blockquote.png) no-repeat left top;
	}
	
		.entries .hentry blockquote cite {
			display: block;
			margin-top: .3em;
			color: #5f5c5c;
		}
		
	.entries .post li {
		list-style-type: disc;
		list-style-position: outside;
	}
	
	.comments article {
		margin-top: 3.2em;
		margin-bottom: 3.2em;
		margin-left: -20px;
		padding-right: 20px;
		padding-left: 30px;
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	
	.comments article.first {
		margin-top: 0;
	}
	
	.comments article.last {
		margin-bottom: 0;
	}
	
	.entries form { /* comment form */
		margin-top: 0; /* reset the typography.css-applied catch all margin */
	}
	
	input#id_name,
	input#id_email,
	input#id_url,
	textarea#id_comment {
		display: block;
		width: 306px;
		padding: .5em .3em;
		border: 5px solid #f0f1ef;
		background: #dedfdb;
		margin-top: .4em;
	}
	
	.error input#id_name,
	.error input#id_email,
	.error input#id_url,
	.error textarea#id_comment {
		border-color: #a40200;
		background: #efefef;
	}
	
	textarea#id_comment {
		width: 526px;
	}
	
	input#id_name:focus,
	input#id_email:focus,
	input#id_url:focus,
	textarea#id_comment:focus {
		background: #efefef;
		border-color: #A4CBD7;
		outline: none;
	}

	input.submit-post {
		padding: .3em .8em;
		background-color: #cbe9e7;
		border: none;
		color: #4f9695;
		cursor: pointer;
		-webkit-border-radius: 17px;
		-moz-border-radius: 17px;
		border-radius: 17px;
	}
	
	input.submit-preview {
		border: none;
		background: none;
		cursor: pointer;
		padding: 0;
		color: #4f9695;
		text-decoration: underline;
	}
	
	input.submit-preview:hover,
	input.submit-preview:focus,
	input.submit-preview:active {
		color: #db5921;
	}
	
	input.submit-post:active,
	input.submit-preview:active {
		position: relative;
		bottom: -1px;
	}
	
	.or {
		padding: 0 0 0 .4em;
	}

/* !Section: portfolio */

	.gallery {
		margin-top: -10px;
		width: 940px;
		height: 370px;
		position: relative;
	}
	
		.gallery li {
			position: absolute;
			left: 0;
			top: 0;
		}
	
	#gallery-nav {
		border-top: 1px solid #9b0f1e;
		border-bottom: 1px solid #9b0f1e;
		margin-bottom: 1.8em;
	}
	
		#gallery-nav a {
			display: inline-block;
			width: 20px;
			height: 20px;
			margin: 5px;
			padding: 5px;
			border: 1px solid #eee;
		}
		
			#gallery-nav a.active {
				background: #eee;
				border: 1px solid #ddd;
			}
	
	.project-description {
		float: left;
		width: 380px;
		margin-left: 80px;
		margin-bottom: 3.2em;
	}

	ul.capabilities {
		width: 210px;
		float: right;
	}

	ul.capabilities li {
		list-style-image: url(../images/bullet-capability.png);
		margin-bottom: .2em;
	}