/* CSS Document */
/*global8*/
html { overflow:auto;}
.clear { clear:both; }
.none { display:none; }
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
* html .clearfix, *:first-child+html .clearfix { zoom: 1; }
.no-border { border:0 !important; }
.no-padding { padding:0 !important; }
.left { float:left; }
.right { float:right; }
body { font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; line-height:1.3em; -webkit-text-size-adjust:none; position:relative;}
h1 { color: #8cc63f; font-size: 34px; line-height: 1.3em; padding-bottom: 5px;line-height:1.3em; font-weight:normal}
h2 { color: #ffffff; font-size: 26px; padding-bottom: 5px; padding-top:5px; line-height:1.3em; font-weight:normal}
h3 { color: #8cc63f; font-size: 22px; padding-bottom: 5px; padding-top: 5px; line-height:1.3em; font-weight:normal}
h4 { color: #ffffff; font-size: 23px; padding-bottom: 5px; padding-top: 5px;line-height:1.3em; font-weight:normal}
h5 { color: #8cc63f; font-size: 18px; padding-bottom: 5px; font-weight:100; padding-top: 5px;line-height:1.3em; font-weight:normal}
h6 { color: #ffffff; font-size: 13px; font-weight: normal; padding-bottom: 5px; line-height:1.3em; font-weight:normal; letter-spacing:1px;}
p { padding-bottom:10px; color:#ffffff;font-size: 13px;}
p cufon { padding-bottom:5px; padding-right:1px;}
img { vertical-align:middle; }
a { text-decoration:none; color:#ffffff; }
a:hover { color:#8cc63f; }
a.focus { color:#8cc63f; }
a.green:hover { color:#ffffff; }
#resizable { padding:110px 10px 130px; position:relative;}
/*#resizable img {width:100%; height:auto;}*/
div#resizable div.clear {clear: both;overflow: hidden;}
@font-face {
font-family: 'DINRegular';
src: url('font/ff_din_regular-webfont.eot');
src: url('font/ff_din_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('font/ff_din_regular-webfont.woff') format('woff'),
url('font/ff_din_regular-webfont.ttf') format('truetype'),
url('font/ff_din_regular-webfont.svg#DINRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DINCondMediumRegular';
src: url('font/ff_din_condensed_medium-webfont.eot');
src: url('font/ff_din_condensed_medium-webfont.eot?#iefix') format('embedded-opentype'),
url('font/ff_din_condensed_medium-webfont.woff') format('woff'),
url('font/ff_din_condensed_medium-webfont.ttf') format('truetype'),
url('font/ff_din_condensed_medium-webfont.svg#DINCondMediumRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DINBold';
src: url('font/ff_din_bold-webfont.eot');
src: url('font/ff_din_bold-webfont.eot?#iefix') format('embedded-opentype'),
url('font/ff_din_bold-webfont.woff') format('woff'),
url('font/ff_din_bold-webfont.ttf') format('truetype'),
url('font/ff_din_bold-webfont.svg#DINBold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'CenturyLightSSiLightItalic';
src: url('font/century-light-ssi-light-italic-webfont.eot');
src: url('font/century-light-ssi-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('font/century-light-ssi-light-italic-webfont.woff') format('woff'),
url('font/century-light-ssi-light-italic-webfont.ttf') format('truetype'),
url('font/century-light-ssi-light-italic-webfont.svg#CenturyLightSSiLightItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'VegurMedium';
src: url('font/vegur-b_0.602-webfont.eot');
src: url('font/vegur-b_0.602-webfont.eot?#iefix') format('embedded-opentype'),
url('font/vegur-b_0.602-webfont.woff') format('woff'),
url('font/vegur-b_0.602-webfont.ttf') format('truetype'),
url('font/vegur-b_0.602-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
.din-regular { font-family:'DINRegular'}
.dincond-medium { font-family:'DINCondMediumRegular'}
.din-bold { font-family:'DINBold'}
.din { font-family:'DINRegular'}
.myriad { font-family:'VegurMedium'}
body { background-color:#000;}
div#new-wrapper {line-height:1.3em; margin:0 auto; height:100%; top:0; left:0; margin-left:260px}
/*------------------------------------------header----------------------------------------------------*/
div#header{top:0; left:0; z-index:10; width:250px; position:absolute}
div#header div.container{ background-color:#8cc63f; padding:30px 30px 50px 0; position:relative}
div#header div.logo {text-align:right; margin-bottom:20px; color:#c6e39f; font-size:15px;}
div#header div.logo span { font-weight:normal;}
/*div#header div.first-nav { width:200px;}*/
div#header div.first-nav ul li{ list-style-type:none; text-align:right; font-size:14px; text-transform:capitalize;}
div#header div.first-nav ul li.large {font-size:37px; line-height:1em}
div#header div.first-nav ul li a.selected{ color:#6c9a2e;}
div#header div.first-nav ul li a:hover{ color:#6c9a2e;}
div#header div.first-nav ul li a.focus{ color:#6c9a2e;}
div#header div.second-nav {text-align:right; position:relative;}
div#header div.second-nav ul { list-style-type:none; margin:0 20px 0 0; padding-top:10px; font-size:12px; float:right;}
/*div#header div.second-nav ul li{float:left; text-align:center; margin-left:5px;}*/
div#header div.second-nav ul li{text-align:right; margin-bottom:5px;}
div#header div.second-nav a { padding:0 11px; *padding-top:5px; *padding-bottom:5px;}
div#header div.second-nav a:hover{color:#FFFFFF}
/*div#header div.second-nav ul li a#all:hover{ background:url(../images/hover-all.png) center center no-repeat}
div#header div.second-nav ul li a#organice:hover{ background:url(../images/hover-organice.png) center center no-repeat}
div#header div.second-nav ul li a#sleek:hover{ background:url(../images/hover-sleek.png) center center no-repeat}
div#header div.second-nav ul li a#novel:hover{ background:url(../images/hover-novel.png) center center no-repeat}
div#header div.second-nav ul li a#corporate:hover{ background:url(../images/hover-corporate.png) center center no-repeat}
div#header div.second-nav ul li a#all.selected{ background:url(../images/hover-all.png) center center no-repeat}
div#header div.second-nav ul li a#organice.selected{ background:url(../images/hover-organice.png) center center no-repeat}
div#header div.second-nav ul li a#sleek.selected{ background:url(../images/hover-sleek.png) center center no-repeat}
div#header div.second-nav ul li a#novel.selected{ background:url(../images/hover-novel.png) center center no-repeat}
div#header div.second-nav ul li a#corporate.selected{ background:url(../images/hover-corporate.png) center center no-repeat}*/
div#header div.second-nav ul li a.all { background:url(../images/all.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.corporate { background:url(../images/corporate.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.intranet { background:url(../images/intranet.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.mobile { background:url(../images/mobile.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.campaign { background:url(../images/campaign.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.ecommerce { background:url(../images/ecommerce.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.market { background:url(../images/market.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a.media { background:url(../images/media.png) left 1px no-repeat; *background-position:left 9px;}
div#header div.second-nav ul li a:hover { background-position:0 -15px; *background-position:0 -12px;}
div#header div.second-nav ul li a.selected { background-position:0 -15px; *background-position:0 -12px;}
div#header div.inner-second-nav ul {margin:0; padding-top:20px;}
div#header div.inner-second-nav ul li {text-align:right; font-size:14px; padding-bottom:7px; float:none;}
div#header div.inner-second-nav ul li a{padding:0}
div#header div.inner-second-nav ul li a.selected { color:#FFFFFF;}
div#header div.inner-second-nav ul li a.green:hover { color:#FFFFFF}
div#header ul li { text-transform:uppercase}
div#header ul li.small { text-transform:lowercase}
/*------------------------------------------footer----------------------------------------------------*/
div#footer { position:fixed;bottom:0; width:100%; left:0; z-index:10; color:#6e696b;background-color: black;}
div#footer div.container{ max-width:100%; margin:0 auto; min-width:720px; padding:0 30px 0 40px;}
div#footer div.container div.left { padding-top:14px;}
div#footer div.container div.left img {float:left; margin:0 5px 5px 0;}
div#footer div.container div.left span.keyboard{color:#FFFFFF; background:url(../images/key.gif) bottom left no-repeat; padding-left:100px; padding-top:40px; display:block; width:98px;}
div#footer div.container div.left span {color:#FFFFFF;}
div#footer div.container div.right { text-align:right; padding-top:5px; }
div#footer div.container div.right div { width:80px;}
/*------------------------------------------content----------------------------------------------------*/
.works {background:url(../images/bg1.jpg) top left #000 fixed no-repeat; }
div#works div.container {padding-top: 110px; max-width: 1220px; padding-bottom:120px;}
div#works div.container div.top { width:100%;}
div#project { width:100%; }
div.overlay{ background-color:#000000; opacity:0.3; filter:alpha(opacity=30); width:100%; height:100%; position:fixed; top:0; left:0;}
div.showcase { background:url(../images/showcase.png) right top no-repeat; width:160px; height:143px; text-align:right; padding-right:170px; float:left; position:relative;}
div.showcase h2 { padding:0}
div.white-overlay { position:absolute; width:100%; height:100%; top:0; left:0; background-color:#FFFFFF; opacity:0; filter:alpha(opacity=0); *padding-bottom:5px;}
div#works div#project a.keynav { display:block; float:left; height:300px;}
div#works div#project div.client { width:240px;float:left; position:relative; border-right:1px dotted #c6c6c6; overflow:hidden; margin-bottom:10px; }
div.project { position:relative; height:150px;}
div#works div#project div.client.focus .white-overlay { opacity:0.2; filter:alpha(opacity=20);}
div#works div#project div.client:hover .white-overlay { opacity:0.2; filter:alpha(opacity=20);}
a.focus div.client .white-overlay { opacity:0.4; filter:alpha(opacity=40);}
div#works div#project div.client h4 { font-size:1.2em;}
div#works div#project div.client h6 {font-size: 1.1em; width: 200px;color: #ffffff;}
div#works div#project div.client h6 cufon { padding-bottom:5px}
div#works div#project div.client div.project { padding-left:20px; padding-top:15px;}
span.name{ font-size:1.2em; padding-bottom:0;color: #ffffff; padding-top: 5px;line-height:1.2em}
span.intro{font-size: 1.1em; width: 200px;color: #ffffff; font-weight: normal; padding-bottom: 5px; line-height:1.2em; display:block;}
span.intro cufon{ padding-bottom:5px}
div#works div#project span.client { width:240px;float:left; position:relative; border-right:1px dotted #c6c6c6; overflow:hidden; margin-bottom:10px; display:block;}
div#works div#project span.client.focus span.white-overlay { opacity:0.2; filter:alpha(opacity=20);}
div#works div#project span.client:hover span.white-overlay { opacity:0.2; filter:alpha(opacity=20);}
span.project { position:relative; height:150px;}
span.white-overlay { position:absolute; width:100%; height:100%; top:0; left:0; background-color:#FFFFFF; opacity:0; filter:alpha(opacity=0); *padding-bottom:5px;display:block;}
a.focus span.client span.white-overlay { opacity:0.4; filter:alpha(opacity=40); }
div#works div#project span.client h4 { font-size:1.2em;}
div#works div#project span.client h6 {font-size: 1.1em; width: 200px;color: #ffffff;}
div#works div#project span.client h6 cufon { padding-bottom:5px}
div#works div#project span.client span.project { padding-left:20px; padding-top:15px; display:block}
span.border { display:block; width:43px; height:10px; background:url(../images/hori-border.png) top left no-repeat; margin:10px 0;}
span.arrow { display:block; width:10px; height:10px; background:url(../images/arrow.png) center center no-repeat; position:absolute; bottom:10px; right:10px;}
/*-------------------------------isotope------------------------------------*/
.isotope-item { z-index: 2;}
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1;}
/**** 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;}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,.isotope.no-transition .isotope-item,.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; transition-duration: 0s;}
.content{ z-index:2;height:100%;}
div#intro { z-index:10; float:right; max-width:370px; margin-right:20px;}
div#intro div.container {padding:0; margin:0; }
div#intro div.container h3 {padding-bottom:0;}
div#intro div.container h5 { color:#ddddde;}
div#intro div.container cufon {padding-bottom:2px;}
/*----------------------------------------------------------------------------------------inner page--------------------------------------------------------------------------------------------------*/
/*------------------------------------------people----------------------------------------------------*/
body.people{ background:url(../images/people-bg.jpg) top left #000 fixed no-repeat;}
div#thumbnails{ *zoom:1;}
div#thumbnails div.container { position:relative; max-width:590px; position:relative; }
div#thumbnails div.container div.intro {float:left; width:400px; height:400px; text-align:left; background:url(../images/intro-bg.png) left top repeat #ff3366;}
div#thumbnails div.container div.intro div.container { float:left;width:auto; height:auto; margin:20px; display:block;}
div#thumbnails div.container div.intro h2 { padding-bottom:15px;}
div#thumbnails div.container div{float:left; width:100px; height:100px;}
div#thumbnails div.container div.people div{ display:none;}
div#thumbnails div.container div { overflow:hidden;}
div#thumbnails div.container div.current img { margin-top:-100px; }
div#thumbnails div.container div.clear { width:auto; height:auto; border:none; clear:both;}
div#thumbnails div.container span.large { font-size:20px;}
div#thumbnails div.container div.people div ul li { font-size:14px;}
div#thumbnails div.container div.intro p { line-height:2em}
div#thumbnails div.container div.people div .conversation { line-height:normal}
/*------------------------------------------detail of work----------------------------------------------------*/
.workdetail{ background:url(../images/detail-bg.jpg) top left #000 fixed no-repeat;}
.workdetail #resizable { padding-right:0; padding-left:80px;}
/*div#services div.container { max-width: 960px; margin:0 auto; min-height: 600px; padding-top: 150px; }*/
div.detail-content{ z-index:2; height:100%; margin-left:580px; margin-top:40px; max-width:960px; padding-right:20px;}
div#workdetail div.container cufon {padding-bottom:15px;}
div#workdetail div.container h6 {color:#ddddde;}
div#workdetail div.container img {float:left; margin:5px;}
div#workdetail div.container div#info div.top { width:200em;}
div#workdetail div.container img.large { width:600px}
div#workdetail div.container img.small { width:600px}
div#workdetail div.container img.medium { width:600px}
div#workdetail div.container a {color:#8cc63f;}
div#workdetail div.container a:hover {color:#ffffff;}
div#workdetail div.container a#more-works { float:left;background-color:#8cc63f; padding:5px 10px; color:white;}
div#workdetail div.container a#more-works cufon { padding:0;}
div#workdetail div.container a#more-works:hover {color:#6c9a2e;}
div#workdetail div.container { margin:0 auto;}
div#workdetail div.container div#resizable { width:760px;}
div#workdetail div.container ul { margin-bottom:10px;}
div#workdetail div.container h6 { padding-bottom:15px;}
div#workdetail div.container img { position:relative;}
div#workdetail div.container div.middle { margin-top:30px; width:580px; margin-left:5px;}
div#desc { z-index:10; width:580px; margin-bottom:10px; margin-left:9px; [;margin-left:6px;]}
div#desc div.container h1 {padding-bottom:0;}
div#desc div.container cufon {padding-bottom:2px;}
a#slideNext, a#slidePrev { text-indent:-9999px;}
/*------------------------------------------services----------------------------------------------------*/
.white { color:#fff; }
.green { color:#8cc63f;}
a.green { font-size:14px;}
a.green:hover { color:#FFFFFF;}
.grey { color:#ddddde;}
.services{background:url(../images/services-bg.jpg) top left fixed #000 no-repeat;}
div#services h2 {padding-bottom:15px;}
div#services div.container { max-width: 960px; padding-bottom:100px; }
div#services div ul { margin-bottom:10px;}
div#services cufon{ padding-bottom:7px;}
div#services h6 { padding-bottom:20px;}
ul li.dot{ color:#FFFFFF; background:url(../images/dot.gif) left 12px no-repeat; color:#ddddde; padding:5px 0 5px 10px; font-size:13px; letter-spacing:1px;}
div#services ul li.item-one { min-height:1000px;}
div#services ul li.item-sec { min-height:700px;}
div#services div.top { padding-bottom:7px; margin-right:20px;}
div#services div.middle { padding-bottom:7px; margin-right:20px;}
div#services div.top div { margin-right:20px; float:left; width:300px;}
div#services div.top div.sec { width:300px;margin-right:0;}
div#services div.middle h5 { padding:15px 0 10px 0;}
div#services div.middle div { float:left; margin-right:20px; margin-bottom:10px; width:300px;}
div#services div.middle div img { width:80%; height:auto; margin-bottom:10px;}
div#services div.middle div.sec { margin-right:0; width:300px;}
div#services div.middle div.sec img { margin-right:60px;}
div#services div.middle div.demo ul { float:left;}
div#services div.middle img { float:left; margin-right:10px; position:relative;}
div#services div.middle div.clear { clear:both;overflow: hidden; float:none;}
div#services div.top div.clear { clear:both;overflow: hidden; float:none;}
div#services div.sec div.clear { clear:both;overflow: hidden; float:none;}
/*------------------------------------------career----------------------------------------------------*/
.career{ background:url(../images/career-bg.jpg) top left #000 fixed no-repeat;}
div#career div.container { max-width:960px;}
div#career div ul { margin-bottom:10px;}
div#career div.top { padding-bottom:7px; margin-right:20px;}
div#career div.top h2 { padding-bottom:15px;}
div#career div.top h6 { padding-bottom:15px;}
div#career div.top cufon {padding-bottom:7px;}
/*------------------------------------------about----------------------------------------------------*/
.about{ background:url(../images/about-bg.jpg) top left #000 fixed no-repeat;}
div#about div.container {max-width:960px; min-height:600px; height:100%;}
div#about div ul li.item-one { min-height:850px;}
div#about div ul li.item-second { min-height:600px;}
div#about div ul { margin-bottom:10px;}
div#about div.top { padding-bottom:7px; margin-right:20px;}
div#about div.top h2 { padding-bottom:15px;}
div#about div.top h6 { padding-bottom:15px; padding-top:10px;}
div#about div.top cufon {padding-bottom:7px;}
div#about div.top div { margin-right:20px; float:left; width:300px;}
/*------------------------------------------contact----------------------------------------------------*/
.contact{ background:url(../images/contact-bg.jpg) top left #000 fixed no-repeat;}
div#contact div.container {max-width:960px; min-height:600px; position:relative;}
div#contact div ul { margin-bottom:10px;}
div#contact div.top { padding-bottom:7px; margin-right:20px;}
div#contact div.top img { margin-bottom:30px;}
div#contact div.top h2 { padding-bottom:10px;}
div#contact div.top h6 { padding-bottom:15px; }
div#contact div.top cufon {padding-bottom:7px;}
div#contact div.top table { margin-bottom:20px;}
div#contact div.top table h6 { padding:3px;}
div#contact div.top table input, textarea { width:300px; border:1px #999999 solid;}
select { width:303px; border:1px #999999 solid; background:url(../images/select.gif) center right no-repeat; background-color:#FFFFFF }
div#contact div.top table input.button { width:100px; background-color:#8cc63f; color:#FFFFFF; float:right; margin:10px 5px; text-align:right; padding:5px 5px 0 0; cursor:pointer; border:none;}
span.error { color:#FF0000;}