@import 'classes.less';

@body_bg:	#41464b;
@bg:		#fff;
@text:		#373e40;
@link:		#D2501C;

@gray_base:	#41464b;
@gray_dark:	#323538;

@strategy:	#eb6e1f;
@creative:	#f99d32; 
@media:		#fcb040;
@analytics:	#ffd24f;
@client:	#d9531e;

@blog:		#d2501c;
@blog_blue:	#455560;
@blog_gray:	#D3D2D2;

@educate_and_inspire:	#93A445;
@industry_news:			#FCB040;
@life_and_culture:		#D9531E;
@points_of_view:		#6FCDE4;

@lightbox_gray:	#d3d2d2;

/* http://meyerweb.com/eric/tools/css/reset/ v2.0b2 | 201101 NOTE: THIS IS A BETA VERSION (see previous line) USE WITH CAUTION AND TEST WITH ABANDON */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}/* HTML5 display-role reset for older browsers */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}/* remember to define focus styles! */:focus{outline:0}/* remember to highlight inserts somehow! */ins{text-decoration:none}

/* styles */
body {background: @body_bg; color: @text;
	font: 13px/1.5em "KlavikaRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
	letter-spacing: 1px;}
nav {text-transform: uppercase;

	ul, li {list-style: none; margin: 0; padding: none;}
	ul, li, a {float: left; display: block;}
}
strong {font-weight: bold;}
h1, h2, h3, h4, h5, h6, p, ol, ul, blockquote {margin: 1.3em 0;}
h1, h2, h3, h4, h5, h6 {color: @body_bg; font-weight: bold; font-size: 25px; line-height: 1em;
	text-transform: uppercase; letter-spacing: -1px;}
h3 {font-size: 1.5em; line-height: 1em;}
a {color: @link;}
input, textarea {font-family: "KlavikaRegular", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;}
ul, ol {padding-left: 15px;}
ul {list-style: disc;}
ol {list-style: decimal;}
	
#searching {background: rgba(255,255,255,0.75);
	height: 100%; width: 100%; overflow: hidden;
	position: absolute; z-index: 999;
	text-align: center;
		
	img {margin-top: 100px;}	
}
#blog-details, #details, #contact-details/*, #horizListContainer*/ {display: none;}
#horizListContainer a {text-decoration: none;}

/* temporary results table */
#results {
	th {text-align: left; font-weight: bold;}
}

.container {width: 960px; margin: 0 auto;}
.text-replace {text-indent: -9000px;}
.clear {height: 0; line-height: 0; font-size: 0; visibility: hidden; clear: both;}

.social {

	a {height: 20px; width: 20px; display: block; cursor: pointer;
		background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 -66px;
		text-indent: -9000px;
		margin-left: 5px;}
		
	.twitter {background-position: 0 -86px;}
		.twitter:hover {background-position: 0 -66px;}
	.facebook {background-position: -20px -86px;}
		.facebook:hover {background-position: -20px -66px;}
	.linkedin {background-position: -40px -86px;}
		.linkedin:hover {background-position: -40px -66px;}
	.flickr {background-position: -60px -86px;}
		.flickr:hover {background-position: -60px -66px;}
	.youtube {background-position: -80px -86px;}
		.youtube:hover {background-position: -80px -66px;}
	.rss {background-position: -100px -86px;}
		.rss:hover {background-position: -100px -66px;}
	.wordpress {background-position: -120px -86px;}
		.wordpress:hover {background-position: -120px -66px;}
	.skype {background-position: -140px -86px;}
		.skype:hover {background-position: -140px -66px;}
	.dribble {background-position: -160px -86px;}
		.dribble:hover {background-position: -160px -66px;}
	.email {background: transparent url('../ui-images/email-icon.png') no-repeat scroll 0 0;}
}

.column-left {float: left; margin-right: 80px;
	width: 440px;}
.column-right {float: left; margin-right: 0;
	width: 440px;}
.content-right {float: right; margin-left: 25px;
	
	li {float: none;}
}
.content-left {float: left; margin-right: 25px;}


#site-border {height: 8px; line-height: 0px; font-size: 0px;}

#site-wrapper {background: @bg;
	padding-bottom: 25px;}

#site-logo {width: 222px; height: 66px;
	float: left;
	background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 0;
	margin: 25px 0;
	cursor: pointer;}
	
#site-nav {float: right;
	margin: 48px 0;
	text-transform: uppercase; font-size: 0.9em;
	
	li {margin: 0 33px;
		cursor: pointer;}
	a {text-decoration: none; color: @text;}
	
/* Commented out in hopes that we can continue to legally use Klavika for our text
	.text-nav {
		li {background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 0;
			text-indent: -9000px; height: 12px;}
		.text-about {width: 38px; background-position: 0 -161px;}
		.text-press {width: 35px; background-position: -38px -161px;}
		.text-work {width: 34px; background-position: -73px -161px;}
		.text-jobs {width: 25px; background-position: -107px -161px;}
		.text-contact {width: 50px; background-position: -132px -161px;}
	}
*/
}

#site-callout {border-bottom: 1px solid @gray_base;
	position: relative;
	font-size: 0.8em; line-height: 1em; text-transform: uppercase;
	margin-top: 10px;
	
	.frame {display: block;
		position: absolute; top:-10px; left: 50%;
		margin-left: -150px;
		background: @gray_base; color: @bg;
		padding: 5px 20px;
		.border-radius(10px);}
		
/* Commented out in hopes that we can continue to legally use Klavika for our text
	span {width: 278px; height: 10px;
		background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 -175px;
		text-indent: -9000px; display: block;}
*/
}

#site-filter {margin: 30px auto;
	font-size: 0.9em;

/* Commented out in hopes that we can continue to legally use Klavika for our text
	.text-filter {
		span {display: block; height: 9px; text-indent: -9000px;
			background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 0;
			margin: 0 auto 8px;}
		.text-strategy {width: 97px; background-position: 0 -186px;}
		.text-creative {width: 96px; background-position: -100px -186px;}
		.text-media {width: 62px; background-position: -196px -186px;}
		.text-analytics {width: 111px; background-position: -257px -186px;}
		.text-search {width: 69px; background-position: -369px -186px;
		
		margin-top: -4px;}
	}
*/

	li {width: 154px; margin-right: 45px;
		text-align: center;}
	.last {margin-right: 0;}
	label {display:block; margin-bottom: 5px;
		font-size: 1.1em; letter-spacing: 3px;}
	
	.ui-slider-handle {background: transparent url('../ui-images/sprite.png') no-repeat scroll -308px -106px;
		height: 22px; width: 22px;
		border: none; .border-radius(0);
		top: -6px; cursor: move;}
	.ui-slider {width: 154px; height: 9px;
		background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 -106px;
		border: none; .border-radius(0);
		margin-top: 7px;}
	.inactive #strategy {background-position: -154px -106px;}
	#creative {background-position: 0 -115px;}
	.inactive #creative {background-position: -154px -115px;}
	#media {background-position: 0 -124px;}
	.inactive #media {background-position: -154px -124px;}
	#analytics {background-position: 0 -133px;}
	.inactive #analytics {background-position: -154px -133px;}
		
	#search {float: right; margin-right: 0; width: 171px;
		li {width: auto;}
		input {letter-spacing: 0;}
	}
	#keyword {border: none; padding: 0;
		width: 131px; height: 19px;
		padding:0 30px 0 10px;
		background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 -142px;}
}

#site-content {position: relative;

	#results, #horizList {
	
		h2 {color: @body_bg;}

		.isotope-item {position: relative; overflow: hidden;
			.linear-gradient(#ddd, #ccc, 100%);
		
			img {display: block;}
			h2 {margin: 0;}
			a {text-decoration: none;}
			
			.padding {padding: 20px;}
			.author {margin: 0;
				font-weight: bold; color: @body_bg;}
			.excerpt {color: @body_bg;
				margin-top: 10px;}
		}
		
		/* sizes */
		.size_145x120 {
			h2 {font-size: 0.9em;}
			
			.author {display: none;}
			.padding {padding: 10px;}
		}
		.size_308x120, .size_308x260 {
			h2 {font-size: 1.2em; line-height: 1.3em;}
			
			.author {display: none;}
			.padding {padding: 10px;}
			.excerpt {margin-top: 0;}
		}

		/* post types */
		.post {background: transparent url('../ui-images/sprite-blog.png') no-repeat scroll 0 0;}
		
		.tweets {background: transparent url('../ui-images/sprite-tweets.png') no-repeat scroll 0 0;
			
			.padding {padding: 40px 10px 10px;}
		}
		.job_postings {background: transparent url('../ui-images/sprite-jobs.png') no-repeat scroll 0 0;
			h2 {font-size: 2em; color: @blog;}
			
			.padding {padding-top:25px;}
		}
		
		.read-more {position: absolute; bottom: 10px; right:10px;
				width:60px; height: 21px;
				text-indent: -90000px;
				background: transparent url('../ui-images/sprite-blog.png') no-repeat scroll -308px -287px;}
		
		/* sizes - post specific */
		.post.size_145x120 {background-position: -780px 0;
			.excerpt {display: none;}
		}
		.post.size_308x120 {background-position: 0 -260px;}
		.post.size_308x260 {background-position: -471px 0;}
		.post.size_471x260 {
			.excerpt {padding-right: 115px;}
			.read-more {width: 76px; height: 27px;
				left:20px; right: auto;}
		}
		/* sizes - job specific */
		.job_postings.size_145x120 {background-position: 0 -120px;
		
			.padding {padding-top: 30px;}
			h2 {font-size: 1.3em; margin: 0.5em 0;}
		}
		
		/* colors */
		.industrynews {background-position: 0 -640px;

			h2 {color: @industry_news;}
			.read-more {background-position: -623px -260px;}
		}
		.industrynews.size_308x260 {
			.read-more {width: 76px; height: 27px;
				background-position: -623px -260px;}
		}
		.industrynews.size_308x120, .industrynews.size_145x120 {
			.read-more {background-position: -623px -287px;}
		}
		
		.life-and-culture {background-position: 0 0;

			h2 {color: @life_and_culture;}
			.read-more {background-position: -308px -260px;}
		}
		.life-and-culture.size_308x260 {
			.read-more {width: 76px; height: 27px;
				background-position: -308px -260px;}
		}
		.life-and-culture.size_308x120, .life-and-culture.size_145x120 {
			.read-more {background-position: -309px -287px;}
		}
		
		.points-of-view {background-position: -471px -380px;
		
			h2 {color: @points_of_view;}
			.read-more {background-position: -547px -260px;}
		}
		.points-of-view.size_308x260 {
			.read-more {width: 76px; height: 27px;
				background: -547px -260px;}
		}
		.points-of-view.size_308x120, .points-of-view.size_145x120 {
			.read-more {background-position: -547px -287px;}
		}
		
		.educate-and-inspire {background-position: 0 -380px;

			h2 {color: @educate_and_inspire;}
			.read-more {background-position: -471px -260px;}
		}
		.educate-and-inspire.size_308x260 {
			.read-more {width: 76px; height: 27px;
				background-position: -471px -260px;}
		}
		.educate-and-inspire.size_308x120, .educate-and-inspire.size_145x120 {
			.read-more {background-position: -471px -287px;}
		}
	}
}

#site-footer {color: @bg; font-size: 0.9em; line-height: 1.3em; text-transform: uppercase;
	padding: 25px 0;
	
	a {color: @bg;}
	
	#site-address {float: left; font-style: normal;}
	
	#footer-nav {
		li {cursor: pointer; margin: 0 45px;}

		.social {float: right;
			li {margin: 0;}
		}
		
		a {color: @bg; text-decoration: none;}
	}
	
/* Commented out in hopes that we can continue to legally use Klavika for our text
	.text-footer {
		li {display: block; height: 12px; text-indent: -9000px;
			background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 0;}
		.text-about {width: 41px; background-position: 0 -195px;} 
		.text-work {width: 38px; background-position: -41px -195px;} 
		.text-jobs {width: 28px; background-position: -79px -195px;} 
		.text-contact {width: 55px; background-position: -107px -195px;} 
	}
*/
}

#jquery-lightbox {line-height: inherit;}
#lightbox-container-image-box,
#lightbox-container-image-data-box {background-color: @lightbox_gray;}
#lightbox-container-image {padding: 25px;}
#lightbox-container-image-data-box {padding: 10px 25px 0;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {width: 45%;}
#lightbox-nav-btnPrev {margin-left: 13px;}
#lightbox-nav-btnNext {margin-right: 13px;}
#lightbox-container-image-data-box {font: inherit;}
#lightbox-secNav-btnClose {width: auto;}

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/* testing */
.isotope-item {-moz-transform-origin: 50% 50%;}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}
/* End: Recommended Isotope styles */
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
     -moz-transition: none;
          transition: none;
}

/* modal */
.simplemodal-overlay {background: #000;}
.simplemodal-container {.box-shadow(0,0,15px,0,rgba(0,0,0,0.6));}
.simplemodal-wrap {background:#fff; overflow: visible !important;}
.simplemodal-data {padding: 30px 90px;}

/* details */
.detail {position: relative;

	.padding {
	    border: 1px solid @gray_dark; border-left: 0; border-right: 0;
	    margin-bottom: 30px; padding: 25px 0;	
	}
	.header, .content {
		.name {font-size: 50px; line-height: 1em; color: @gray_dark; text-transform: uppercase;
			font-family: 'CactusBoldRegular', 'Arial Narrow', Arial, sans-serif;}
		.title {font: 25px/1em 'CactusMediumRegular', 'Arial Narrow', Arial, sans-serif;}
	}
	.badge {width: 44px; height: 54px;
		text-indent: -9000px;
		position: absolute; top:1px; right: 20px;
		background: transparent url('../ui-images/sprite.png') no-repeat scroll -222px 0;}
		
	.content {
		h2 {margin-top: 0;}
		
		ul {list-style: square; padding-left: 15px;}
		ul li {margin: 5px 0;}
		
		.social {padding: 0; list-style: none;
			li, a {float: left;}
		}
		
		.thumbnails {list-style: none; padding: 0;
		
			li {float: left;
				margin: 0 18px 18px 0;}
			.last {margin-right: 0;}
		}
		
		.work-list {float:left; width:32%;
			list-style: none; padding: 0;}
			
		.case-study-nav {margin: 0; padding: 0; list-style: none;
			float: right;
			
			li, a {float: left; display: block;}
			a {text-indent: -9000px;
				background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 0;
				width: 150px; height: 23px;
				margin-left: 10px;}
			.back-to-results {background-position: -211px -209px;}
			.launch-project {background-position: -362px -209px;} 
		}
	}
}
.detail.strategy {
	.name {color: @strategy;}
}
.detail.creative {
	.badge {background-position: -266px 0;}
	.name {color: @creative;}
}
.detail.media {
	.badge {background-position: -310px 0;}
	.name {color: @media;}
}
.detail.analytics {
	.badge {background-position: -354px 0;}
	.name {color: @analytics;}
}
.detail.client-services {
	.badge {background-position: -398px 0;}
	.name {color: @client;}
}

/* blog modal */
.blog-header {padding-bottom: 10px; border-bottom: 2px solid #d0d4d7;}
.blog-logo {float:left;
	width: 134px; height: 57px; text-indent: -9000px;
	background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 -208px;}
#blog-details {
	.post {color: @blog_blue; position: relative;
		font-family: Helvetica, Arial, sans-serif;
	
		.padding {border:none; margin: 0; padding: 0;}
		.header {margin-top: 45px; padding-bottom: 20px;
			border-bottom: 3px solid @blog_blue;}
		.name {font-family: "Times New Roman", serif; font-size: 3em; line-height: 1em;}
		.post-meta {border: 1px solid @blog_gray; border-left: 0; border-right: 0;
			margin: 5px 0 20px;
			font-size: 1.2em; line-height: 1em; padding: 10px 0;}
		.post-author {float: left;}
		.post-comments {float: right;}
		.post-image {display: block; height: 162px; width: 162px;
			float: left; margin-right: 20px;	
			.linear-gradient(#4C5C69, #44545F, 100%)}
		.simplemodal-close {position: absolute; top:-58px; right: -91px;
			color: @gray_dark;}
		
		a {text-decoration: none;}
		
		.read-more {position: absolute; bottom: 0; left: 180px;
	    	display: block; width: 115px; height: 27px;
	    	text-indent: -9000px;
	    	background: transparent url('../ui-images/sprite.png') no-repeat scroll -134px -237px;}
	}
	.educate-and-inspire {
		.post-image {background: transparent url('../ui-images/sprite.png') no-repeat scroll 0 -304px;}
	}
	.industrynews {
		.post-image {background: transparent url('../ui-images/sprite.png') no-repeat scroll -162px -304px;}
	}
	.life-and-culture {
		.post-image {background: transparent url('../ui-images/sprite.png') no-repeat scroll -324px -304px;}
	}
	.points-of-view {
		.post-image {background: transparent url('../ui-images/sprite.png') no-repeat scroll -486px -304px;}
	}
}

.job_postings {
	.header {border-bottom: 1px solid @gray_dark;}
	.name {margin-bottom: 25px;}
	.title {font-size: 25px; line-height: 1em; margin-top: 10px; font-style: italic;
		padding-bottom: 10px;}
	.content {position: relative; padding: 15px 0;}
	.badge {top:-20px;}
}

.people {
	.portfolio-image {float: left; margin-top: 5px;}
	.portfolio-adj {margin-left: 500px;}
}

.case_studies {
	.content {
		h2, h3, h4, h5, h6, p, ul, ol {margin: 0.5em 0;}
	}

	.name {float: left; margin-bottom: 20px;}
	.disciplines {float: right; margin-top: 30px;}
	.header {margin-bottom: 10px;}
}

#horizListContainer, #horizList {
	width:960px;
	
	li {position: relative;}
	.item {position: relative;}
}

#horizListButtons {
	a {
		width: 65px;
		height: 23px;
		text-indent: -9000px;
		display: block;
		float: right;
	}
	margin-bottom: 15px;
	height: 23px;
}
#horizList-next {
	background: transparent url('../ui-images/btn_next.png') no-repeat scroll;
}

#horizList-prev {
	background: transparent url('../ui-images/btn_back.png') no-repeat scroll;
	margin-right: 15px;
}

.closebtn {
	a {
		width: 67px;
		height: 30px;
		text-indent: -9000px;
		display: block;
		float: right;
		background: transparent url('../ui-images/btn_close.png') no-repeat scroll;
	}
	position: absolute; top:1px; right: 0px;
	height: 30px;
}

/* Contact Boxes */
#contact-details {border-bottom: 1px solid @gray_dark; margin-bottom: 25px; padding-bottom: 15px;}

.contact-item {background:#3e4044 url('../ui-images/sprite-contact.png') no-repeat scroll 0 0;
	color: #fff; font-size: 12px; line-height: 1.5em;
	float: left; margin:0 18px 18px 0 ;
	
	.padding {padding: 20px; padding-right: 335px;}
	
	h2 {font-size: 23px; line-height: 1em; color: @bg; font-weight: normal;
		margin: 0;}
	p {margin: 13px 0;}
	label, .button-submit {display: block; margin-top: 15px;
		background: #fff; border: 1px solid #fff;
		.border-radius(10px);
		padding: 3px 6px;
		position: relative;}
	label.error {background: #fff; border: none; 
		color: #CC0000; font-size: 12px;
    	position: absolute; right: 0; top: -1px;
    	margin: 0;}
    input, textarea {border: 0; background: none;
		width: 100%; resize: none;
		font-size: 12px;}
	.button-submit {float: right;
		background: #64c2d6; border-color: #64c2d6;
		padding: 0 10px;
		
		input {color: #fff; font-size: 17px; line-height: 1em; text-transform: uppercase; font-weight: bold; font-style: italic;}
	}
	.button {display: block; float: left;
		background: #64c2d6; border: 1px solid #64c2d6; -moz-border-radius: 10px;
		padding: 3px 10px;
		color: #fff; font-size: 17px; line-height: 1em;
		text-transform: uppercase; text-decoration: none; font-weight: bold; font-style: italic;}
	.social {padding: 20px 15px; list-style: none;
	
		li {float: left; margin: 0 10px 10px 0;}
		a {display: block; height: 64px; width: 64px;
			background-position: -486px 0;}
		.twitter, .twitter:hover {background-position: -486px 0;}
		.flickr, .flickr:hover {background-position: -550px 0;}
		.facebook, .facebook:hover {background-position: -614px 0;}
		.youtube, .youtube:hover {background-position: -486px -64px;}
		.linkedin, .linkedin:hover {background-position: -550px -64px;}
		.blog, .blog:hover {background-position: -614px -64px;}
	}
	
}
.contact-4x2 {width: 634px; height: 260px;}
.contact-2x2 {width: 308px; height: 260px;
	background-position: 0 -260px;}
.contact-2x2 {
	.padding {padding: 20px;}
}

.join-our-team {margin-right: 0;}
.directions {background-position: -308px -260px;
	margin-right: 0;
	
	.padding {padding: 20px;}
	#map {float: right; margin-left: 20px;
		border: 1px solid #3e4044; .border-radius(10px);}
	label {margin-right: 335px;}
}

#lightbox-image-details-currentNumber, #lightbox-secNav-btnClose {
	padding-bottom: 0 !important;
}
#lightbox-container-image {padding: 10px 25px !important;}

.privacy-policy {cursor: pointer; text-decoration: underline;}
#privacy-policy {display: none; position: relative;
	.simplemodal-close {position: absolute; top:-28px; right: 0;
			color: @gray_dark; text-decoration: none;}
}