/* FONT STEP UP  BASELINE 12px */
/*
30px - 250%
28px - 233%
25px - 208%
24px - 200%
22px - 183%
20px - 167%
18px - 150%
17px - 142%
16px - 133%
15px - 125%
14px - 117%
13px - 108%
12px - baseline
11px - 92%
10px - 83%
9px - 75% 
8px - 67%
*/
 
/* = css reset
----------------------------------------------- */
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, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

em {
	font-style:italic;
}

/* = tools
----------------------------------------------- */
.hide {
	display:none;
}

.clear {
	clear:both;
	float:none;
}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* =global styles
----------------------------------------------- */
@font-face{ /* first for IE 6/7/8 */
	font-family: 'DINWebMedium';
	src:url(type/DINWeb-Medium.eot);
}
				
@font-face { /* for Mozilla browsers -> Firefox */
	font-family: 'DINWebMedium';
	src:url(type/DINWeb-Medium.woff) format('woff'), url('type/DINOT-Medium.svg#DINOT-Medium') format('svg');
}

@font-face{ /* first for IE 6/7/8 */
	font-family: 'DINWebRegular';
	src:url(type/DINWeb.eot);
}

@font-face { /* for Mozilla browsers -> Firefox */
	font-family: 'DINWebRegular';
	src:url(type/DINWeb.woff) format('woff');
}

body {font-family:Helvetica, Arial;font-size:12px;color:#585858;}

ul {list-style-type:none;}

h3 {font-family:"ff-din-web-1","ff-din-web-2",Helvetica,Arial,sans-serif;margin:0 0 20px 0;font-size:142%;color:#0e0e0e;text-transform:uppercase;}
h4 {font-family:Arial;font-size:150%;color:#585858;padding:10px 0 10px 0;}
h5 {margin:39px 0 25px 0;font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;font-size:100%;color:#FFF;text-transform:uppercase;}

strong {font-weight:bold;}

/* = Tools
----------------------------------------------- */
.clear {clear:both;float:none;}
.hide {display:none;}

/* = Global Links 
----------------------------------------------- */
a, a:visited {text-decoration:none;color:#59d100;}
a:hover {color:#50bc00;}
a:focus, a:active {-moz-outline:0px none red;outline:0px none red;}

a.arrow-link {display:inline-block;background:url(../images/icon-link-arrow.png) 0 6px no-repeat;padding:4px 10px 4px 12px;margin:10px 0 0 0;font-weight:bold;}
a:hover.arrow-link {display:inline-block;background:#59d100 url(../images/icon-link-arrow.png) 0 7px no-repeat;background-position: 0 -8px;padding:4px 10px 4px 12px;margin:10px 0 0 0;;color:#FFF;font-weight:bold;}

a.arrow-link-dark {display:inline-block;background:url(../images/icon-link-arrow.png) 0 7px no-repeat;padding:4px 10px 4px 12px;margin:10px 0 0 0;font-weight:bold;}
a:hover.arrow-link-dark {display:inline-block;background:#59d100 url(../images/icon-link-arrow.png) 0 7px no-repeat;background-position: 0 -21px;padding:4px 10px 4px 12px;padding:4px 10px 4px 12px;margin:10px 0 0 0;;color:#0e0e0e;font-weight:bold;}

/* = Header 
----------------------------------------------- */ 
#header {width:100%;border-bottom:1px solid #d5d5d5;z-index:100;background:#fff;}
	
	.logo-container {float:left;width:605px;border-bottom:4px solid #59d100;padding:0 0 14px;}
	
	#header h1 {background:url(../images/logo-main.png) no-repeat;height:37px;margin:50px 0 0 0px;text-indent:-5000px;overflow:hidden;}
	#header ul:after {clear:both;display:block;content:".";height:0;visibility:hidden;}	
		#header li {cursor:pointer;overflow:hidden;position:relative;border-bottom:4px solid #59d100;float:left;color:#000;margin:0 0 0 25px;height:101px;width:68px;text-align:center;text-transform:uppercase;font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;font-size:108%;}
			#header li a {color:#000;padding:80px 0 0;height:100px;display:block;position:relative;z-index:1000;}
			#header li a:hover {color:#fff;}
			#header li.active{background:#59d100;border-bottom:4px solid #50bc00;}
			#header li.active a{color:#f4fffa;}
			#header li .nav-roll{height:120px;background:#59D100;position:relative;top:10px;z-index:100;}
					
/* = Main Content 
----------------------------------------------- */
#main-content {margin:0;background:#fff;padding:0;}
#main-content:after {clear:both;display:block;content:".";height:0;visibility:hidden;}	
.content-block {width:978px;margin:0 auto;padding:0;}
.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .ten-col, .eleven-col
	 {float:left;margin:0 30px 0 0;padding:0;}

.one-col {width:54px;}
.two-col {width:138px;}
.three-col {width:222px;}
.four-col {width:306px;}
.five-col {width:390px;}
.six-col {width:474px;}
.seven-col {width:558px;}
.eight-col {width:642px;}
.nine-col {width:726px;}
.ten-col {width:810px;}
.eleven-col {width:894px;}
.twelve-col {width:978px;margin:0;}

.one-col.pad-right {width:34px;padding:0 20px 0 0;}
.two-col.pad-right {width:118px;padding:0 20px 0 0;}
.three-col.pad-right {width:202px;padding:0 20px 0 0;}
.four-col.pad-right {width:286px;padding:0 20px 0 0;}
.five-col.pad-right {width:370px;padding:0 20px 0 0;}
.six-col.pad-right {width:454px;padding:0 20px 0 0;}
.seven-col.pad-right {width:538px;padding:0 20px 0 0;}
.eight-col.pad-right {width:622px;padding:0 20px 0 0;}
.nine-col.pad-right {width:706px;padding:0 20px 0 0;}
.ten-col.pad-right {width:790px;padding:0 20px 0 0;}
.eleven-col.pad-right {width:874px;padding:0 20px 0 0;}

.no-margin {margin:0!important;}

/* = homepage carousel 
----------------------------------------------- */
#featured-work {background:url(../images/bg-work-grid.gif);margin-top:-1px;padding:0;border-bottom:1px solid #D5D5D5;}
	
	#inner-feature-wrapper {margin:0 auto;overflow:hidden;position:relative;}
	#featured-work .content-block {position:relative;overflow:hidden;height:355px;background:url(../images/bg-work-top-shadow.png) no-repeat;width:978px;padding:0;}
	#featured-work .four-col {margin:80px 30px 0 0;position:absolute;top:0;left:0;z-index:200;}
		#featured-work .four-col h3 {font-size:142%;text-transform:uppercase;color:#000;}
		#featured-work .four-col h2 {margin:25px 0 0;color: #59d100;font-size:250%;}
		#featured-work .four-col p {font-size:150%;font-weight:normal;line-height:26px;margin: 0 0 31px;}
		#featured-work .four-col a.block-highlight {background:#59d100 url(../images/icon-link-arrow-h.png) no-repeat 10px 11px;color:#ffffff;padding:9px 23px;font-size:92%;display:inline-block;}
		#featured-work .four-col .image-selector {margin:10px 0 0 0;}
		#featured-work .four-col .image-selector a {border:3px solid transparent;display:inline-block;}
		#featured-work .four-col .image-selector a.active {border:3px solid #fff;}
		#featured-work .four-col .image-selector a:hover {border:3px solid #fff;}
		#featured-work .four-col .image-selector img {width:50px;height:34px;display:block;float:left;}
	#featured-work .eight-col {margin:0 0 0 0;}
	#featured-work .eight-col img {float:left;display:block;}
	
#carousel-slider {position:relative;left:0;z-index:100;height:355px;}	

#featured-work .content-block .carousel-btn {width:100px;background:#555;position:absolute;}

#control-bar {cursor:pointer;z-index:5000;width:978px;height:29px;padding:87px 24px 0 24px;left:0;bottom:0px;position:absolute;background:url(../images/bg-feature-control-bar.png) no-repeat;}
#control-bar h1{font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;font-size:183%;color:#fff;margin:-2px 20px 0 0;line-height:20px;float:left;font-weight:normal;}
	
	#control-bar h1 a, #control-bar p a {color:#fff;overflow:hidden;white-space:nowrap;}
	#control-bar h1 a:hover #control-bar p a:hover {color:#dfdede;} 
		
#control-bar p {font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;font-size:150%;color:#fff;line-height:18px;float:left;}	
	#control-bar p a:hover {color:#59D100;} 
	#control-bar .project-info {position:absolute;top:83px;left:27px;}

#learn-more {position:absolute;right:-52px;top:412px;font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;font-size:142%;padding:5px 0 0 10px;width:176px;height:46px;z-index:9000;display:block;background:url(../images/bg-learnmore-box-small.png) no-repeat;color:#fff;} 
/*#learn-more {position:absolute;right:-68px;top:412px;font-size:22px;padding:12px 0 0 12px;width:235px;height:34px;z-index:3000;display:block;background:url(../images/bg-learnmore-box-big.png) no-repeat;color:#fff;}*/

#project-indicator-wrapper {position:absolute;right:0;bottom:0;height:50px;width:80px;z-index:8000;} 
#project-indicator {height:30px;position:absolute;right:15px;top:5px;padding:0 10px 0 0;overflow:hidden;}
#project-indicator .indicator-block {width:16px;height:50px;background:#333333;float:left;margin:20px 0 0 2px;cursor:pointer;}
#project-indicator .indicator-block.highlight {background:#59D100;margin-top:10px;}

#project-indicator .indicator-block:hover{background:#59D100 !important;margin-top:10px;}

#external-hover-wrapper {width:1000px;position:relative;margin:0 auto;padding:60px 0 0 0;}

/* = homepage content 
----------------------------------------------- */
#home-content {padding:50px 0 68px;background:#f4f4f4;}
	#home-content .four-col {background:url(../images/bg-white-divider.gif) no-repeat;background-position:right;}
	#home-content img.info-graphic {display:block;margin:0 0 18px;} 
	#home-content p.large-text {font-size:164%;line-height:24px;}
	
	#home-content img.featured-article {border:3px solid #c6c6c6;}
	#home-content .content-block img.featured-article {margin:0 0 14px 0;}
	#home-content .content-block p.article-title {color:#59d100;font-size:164%;font-weight:normal;}

	a.blog-article {display:block;border-top:1px solid #dfdfdf;padding:12px 0 10px 15px;color:#585858;line-height:18px;}	
	a.blog-article.last {border-bottom:1px solid #dfdfdf;}
	a.blog-article:hover {background:#f7f7f7;color:#59D100;}
	p.article-date {color:#0e0e0e;font-weight:bold;margin:0 0 6px;}

/* = work
----------------------------------------------- */
#work-grid {background:url(../images/bg-work-grid.gif);margin-top:-1px;}
	#work-grid .content-block {background:url(../images/bg-work-top-shadow.png) no-repeat;padding:54px 0 35px 0;position:relative;}
	#work-grid .content-block .work-block {width:299px;height:164px;position:relative;overflow:hidden;margin:0 30px 30px 0;}
	#work-grid .content-block .work-block {border:3px solid #c6c6c6;}
	#work-grid .content-block .work-block:hover {border:3px solid #59D100;}
	#work-grid-shadow {position:absolute;bottom:0px;left:0px;}

.full-width-solid-background {background:#f8f8f8;border-top:1px solid #fff;}	
#work-grid .full-width-solid-background .content-block {background:#F8F8F8; padding:60px 0 60px;}

.full-width-solid-background ul {border-top:1px solid #dfdfdf;}
.full-width-solid-background ul li {line-height:50px;border-bottom:1px solid #dfdfdf;font-size:150%;}

/* = work overlays
----------------------------------------------- */
#work-grid .content-block .work-overlay {color:#fff;width:275px;float:left;position:relative;top:200px;height:90px;border-top:1px solid #65ec00;background:url(../images/bg-green-overlay.png);position:relative;padding:18px 12px 12px 12px;}
	#work-grid .content-block .work-overlay h1 {font-size:150%;font-weight:bold;margin:0 0 8px 0;color:#000;}
	#work-grid .content-block .work-overlay p {font-size:108%;font-weight:bold;line-height:120%;}

/* = work detail template
----------------------------------------------- */
#work-detail {margin-bottom:30px;}
#work-detail.extended {margin-bottom:60px;}
	#work-detail .content-block {width:978px;background:url(../images/bg-work-top-shadow.png) no-repeat;padding:42px 0 0 0;}	
	#work-detail h2 {font-size:250%;color:#000;font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;line-height:normal;}
	
	#work-detail .next {padding:13px 0 2px 0;text-align:right;}
	#work-detail .next a {font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;display:block;height:18px;background:url(../images/icon-next-project.png) right 1px no-repeat;text-transform:uppercase;font-size:142%;padding:4px 30px 1px 0;}
	#work-detail .next a:hover {background-position:right -22px;text-transform:uppercase;padding:4px 30px 1px 0;}
	
	#work-detail .project-description {line-height:20px;}
	#work-detail .project-description p {padding:0 0 10px 0;}
	#work-detail p.quote {font-family:Georgia;font-size:150%;margin:0 0 20px 0;line-height:26px;color:#000;}
	#work-detail p.author {border-bottom:1px solid #DFDFDF;padding:0 0 20px 0;margin:0 0 20px 0;}
	#work-detail p.role {color:#000;font-weight:bold;padding:0 0 13px 0;}
	#work-detail .content-block .project-description a.arrow-link {line-height:12px;}
	
/* = work detail carousel
----------------------------------------------- */
#work-carousel {margin:18px 0 13px 0;height:454px;overflow:hidden;position:relative;-moz-user-select: none;}	
	#work-carousel .btn-block {height:100%;width:84px;background:url(../images/bg-white-transparency.png);position:absolute;cursor:pointer;}
	#work-carousel .btn-block:hover {height:100%;width:84px;background:url(../images/bg-grey2-transparency.png);position:absolute;cursor:pointer;}
	#work-carousel .btn-block .arrow {position:absolute;top:45%;left:18px;}
	#carousel-btn-left .arrow {width:46px;height:46px;background:url(../images/img-carousel-btn-left2.png) no-repeat;}
	#carousel-btn-right .arrow {width:46px;height:46px;background:url(../images/img-carousel-btn-right2.png) no-repeat;}
	#carousel-btn-left:hover .arrow {background:url(../images/img-carousel-btn-left2.png) 0 -46px no-repeat;}
	#carousel-btn-right:hover .arrow {background:url(../images/img-carousel-btn-right2.png) 0 -46px no-repeat;}
	
	#work-detail-slider {width:4000px;position:relative;left:84px;float:left;height:454px;}
	#work-detail-slider img {display:block;float:left;visibility: hidden;}
	#carousel-btn-left {top:0px;left:0px;}
	#carousel-btn-right {top:0px;right:0px;}
	
#indicator-block {margin:0 auto 33px auto;width:auto;height:10px;text-align:center;}
	#indicator-block span {display:inline-block;width:16px;line-height:10px;background:#ccc;margin:0 0 0 3px;}
		#indicator-block span.highlight {background:#000;}

/* = related work strip
----------------------------------------------- */
#related-work {margin:0;padding:77px 0 60px 0;background:#f4f4f4 url(../images/bg-related-top-shadow.png) top repeat-x;}

/* = about us 
----------------------------------------------- */
#about-us {background:#fff;}	
#about-us .content-block {width:978px;background:url(../images/bg-work-top-shadow.png) no-repeat;padding:60px 0 85px 0;}
	#about-us .pad-t40 {padding:40px 0 0 0;}
	#about-us p {line-height:18px;color:#858585;}	
	#about-us h2 {font-family:"ff-din-web-1","ff-din-web-2",Helvetica, Arial,sans-serif;font-size:250%;color:#59d100;padding:0 0 13px 0;margin:-3px 0 0 0;}
	#about-us p.sub-line {font-family:Arial;font-size:150%;color:#8a8a8a;padding:0 0 60px 0;}
	#about-us .principle-block {background:#f5f5f5;padding:30px 41px 30px 30px;width:235px;min-height:165px;}
		#about-us .principle-block h3 {font-size:200%;color:#585858;padding:0 0 13px 0;margin:-2px 0 0 0;text-transform:none;font-weight:normal;}
		#about-us .process-block p {line-height:18px;color:#858585;padding:0 0 10px 0;}
		#about-us .process-block img {padding:12px 0 0 0px;}
		#about-us .services-block h4 {font-family:Arial;font-size:150%;color:#585858;padding:10px 0 10px 0;}
		#about-us .services-block p {padding:0 0 12px 0;}
	#accordian {border-bottom:1px solid #e9e9e9;overflow:hidden;position:relative;} 
	#accordian li {background:#fff;}
	#accordian li.outer-block {border-top:1px solid #e9e9e9;}
	#accordian li .details {height:54px;cursor:pointer;}
	#accordian li .details:hover {background:#f7f7f7;}
	#accordian li .details img {float:left;display:block;height:54px;}
	#accordian li .details ul.info {margin:7px 0 0 12px;width:220px;float:left;font-size:100%;}
	#accordian li .details ul.info li {margin:0 0 1px;}
	#accordian li .details:hover ul.info li {background:#f7f7f7;}
	#accordian li .details ul.info .name {font-weight:bold;color:#0e0e0e;margin:0 0 3px;}	
	#accordian li .details ul.info .email {margin-top:3px;display:none;}
	#accordian li .details.open ul.info .email {display:block;}
	#accordian .employee-description p {margin:10px 0;}
	
	#about-us .four-col.side-shadow.principle-block {background:url(../images/bg-work-shadow.png) no-repeat top left;min-height:0;padding-top:10px;}
	#about-us .four-col.side-shadow.principle-block h3 {font-size:150%;color:#585858;}
	#about-us .four-col.side-shadow.principle-block p {margin:0 0 10px;}

/* = Footer 
----------------------------------------------- */
#footer {background:#0e0e0e;width:100%;}
	#footer .content-block {padding:0 0 41px 0;color:#c8c8c8;} 
	#footer .content-block .four-col {background:url(../images/bg-footer-vertical-rule.png) no-repeat;background-position:right;min-height:206px;}
	#footer .content-block .four-col img.small-float-img {float:left;margin:0 18px 0 0;}	
	#footer .content-block .client-comment {line-height:18px;font-size:108%;}
	#footer .content-block .client-name {color:#5f5f5f;padding:10px 0 3px 0;}
	#footer .content-block .five-col {background:url(../images/bg-footer-vertical-rule.png) no-repeat;background-position:right;min-height:206px;}
	#footer .content-block .three-col li {font-size:167%;line-height:26px;}
	#footer .content-block .three-col li.address {font-size:117%;line-height:18px;}
	#footer .content-block .three-col li.padT6 {padding:6px 0 0 0;}
	#twitter-update-list li {line-height:24px;margin:-3px 0 0 0;font-size:167%;}
	a.twitter-date {color:#3e3e3e;display:block;font-size:53%;margin:0;text-transform:uppercase;}

#sub-footer {background:#000;width:100%;margin-top:-1px;}
	#sub-footer .content-block {color:#4b4b4b;height:44px;}