@import url('reset.css');
@import url('visual.css');

body {background: url(../images/visual/dpattern.jpg) repeat-y 50% 0% #141318;}

#quote-form {width: 100%;}
#quote-form .info {padding: 0 0 0 20px;}

#loadInfo {display: none;}

/*-------------------------------------------    
   TITLES
-------------------------------------------*/
#primary h1 {padding: 25px 0 0 0}


body#serv.prepare h1 {line-height: .5em;}
body#serv.prepare h1 strong {
	text-indent: -999em; display: block; width: 100%; height: 60px;  margin: 0;
	background: url(../images/visual/title-prepare.png) no-repeat 100% 0; text-align: left;
}
body#serv.innovate h1 i {
	text-indent: -999em; display: block; width: 100%; height: 50px; 
	background: url(../images/visual/title-ino.png) no-repeat 100% 0; text-align: left;
}
body#news h1 i {
	text-indent: -999em; display: block; width: 100%; height: 60px; 
	background: url(../images/visual/title-folio.png) no-repeat 100% 0; text-align: left;
}
body#news h1 span {display: none;}

body#team h1 i {
	text-indent: -999em; display: block; width: 100%; height: 50px; 
	background: url(../images/visual/title-team.png) no-repeat 100% 0; text-align: left;
}


body#marketing h1 i {
	text-indent: -999em; display: block; width: 100%; height: 60px; 
	background: url(../images/visual/title-marketing.png) no-repeat 100% 0; text-align: left;
}
body#marketing h1 i {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	background: url(../images/visual/title-marketing.png) no-repeat 93% 0; text-align: left;
}
body#marketing h1 span {top: -10px; position: relative;}

body#contact h1 i {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	background: url(../images/visual/title-contact.png) no-repeat 100% 0; text-align: left;
}
body#case h1 i {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	background: url(../images/visual/title-request.png) no-repeat 100% 0; text-align: left;
}




/*-------------------------------------------    
   BACKGROUNDS
-------------------------------------------*/
body#home #outer {background: url(../images/768/field1.jpg) repeat-x 50% 0}
body#home #inner {background: url(../images/768/field2.jpg) repeat-x 50% 130px}
body#home #deeper {background: url(../images/768/field3.jpg) repeat-x 50% 294px}
#container {width: 98%}
#prefooter {width: 98%}
#footwrap {width: 93%;}
#services {width: 95%;}
#services p { padding: 0; }


/*-------------------------------------------    
   HEADER
-------------------------------------------*/
header#masthead {height: 130px; position: relative;}
header .logo {
	width: 174px; left: 50%;
	margin-left: -87px;
	background: url(../images/768/logo-ribbon.png) no-repeat 50% 100%; 
	padding: 10px 0 55px 0;
}
header .logo span {font-size: 12px; letter-spacing: 0;}
header .logo:hover {padding: 30px 0 55px 0}
header .logo img {width: 80%;}


/*-------------------------------------------    
   INSIDE CONTAINER
-------------------------------------------*/
body#serv #primary {
	background: none; height: 780px;
}
#outer {background: url(../images/768/field1.jpg) repeat-x 50% 0}
body.expand header#masthead {height: 130px;}
body.expand #inner {
	background: url(../images/visual/home-midfield.jpg) repeat-x 50% 230%; border-bottom: 1px solid #015F92;
}

#primary h1 {font-size: 4.3em; padding: 35px 25px 0 0; height: 107px; line-height: .7em}
#primary h1 strong {font-weight: 800;}

body#serv.prepare #primary {height: 910px;}
body.prepare #inner {
	background-position: 50% 170%; 
}


/*-------------------------------------------    
   SUBNAV
-------------------------------------------*/
#subnav {left: 25px}
#subnav { position: absolute; top: 55px; }
#subnav li {float: left; margin: 0 15px 0 0}
#subnav li a {display: block; width: 147px; height: 56px; text-align: center; font-size: 1em; color: #fff; background: url(../images/visual/subnav-btn.png) no-repeat 0 -56px; line-height: 40px; text-shadow: 2px 2px 0 #000; text-transform: uppercase; letter-spacing: normal;}
#subnav li a:hover, #subnav .active a {background-position: 0 0;}


/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body#serv section {width: 48%; position: absolute; z-index: 999;}
body#serv section h3 {font-size: 1em;}
body#serv section[role='design'] {
	top: 155px; left: 0;
}
body#serv section[role='multi'] {
	top: 135px; right: 10px;
}
body#serv section[role='mobile'] {
	top: 340px; left: 120px;
}
body#serv section[role='dev'] {
	bottom: 20px; right: 0;
	width: 64%; color: #fff;
}
body#serv section[role='cms'] {
	top: 145px; left: 0;
	width: 50%; 
}
body#serv section[role='seo'] {
	top: 340px; left: 0;
	width: 40%; 
}
body#serv section[role='stats'] {
	top: 150px; right: 0;
	width: 48%; 
}
body#serv section[role='ecommerce'] {
	top: 380px; right: 0;
	width: 28%; 
}
body#serv section[role='hosting'] {
	top: 640px; right: 0;
	width: 50%; color: #fff;
}

body#serv section[role='dev'] .serv-icon a {background-position: -76px -93px;}
body#serv section[role='dev'] article {padding: 0;}
body#serv section[role='ecommerce'] .serv-icon {height: 45px; margin: 0; left: -10px; position: relative;}
body#serv section[role='ecommerce'] .serv-icon .icon-ecommerce {
	margin: 0 auto; height: 45px; width: 45px;
	background-position: -545px -15px; left: 0; top: 0; padding: none;
}
body#serv section[role='ecommerce'] .serv-icon .icon-ecommerce:hover {background-position: -545px -95px;}
body#serv section[role='ecommerce'] h2 strong {display: block;}

body#serv section[role='seo'] p {padding: 0 30px 0 0;}
body#serv section[role='hosting'] p {padding: 0 30px 0 0; margin: 0 0 15px 0}

body#serv section[role='hosting'] h2 { text-transform: uppercase; font-size: 1.2em; line-height: 2em; margin: 0 0 10px;}
body#serv section[role='hosting'] h2 strong {display: block; font-size: 3.5em; letter-spacing: -2px; color: #fff; font-weight: 800; margin: 0 0 25px 0}

/* -- MOBI -- */
body#serv .mobi a {display: block; background: url(../images/768/innovate-mobile.png) no-repeat; width: 280px; height: 290px; position: absolute; top: 440px; left: 15px; text-indent: -999em;}

/* --- SCREENS -- */
body#serv .screens a {display: block; background: url(../images/768/innovate-screen.png) no-repeat; width: 380px; height: 271px; position: absolute; top: 320px; right: 0; text-indent: -999em;}

/* -- TWINS -- */
body#serv .twins a {display: block; background: url(../images/768/prepare-twins.png) no-repeat; width: 280px; height: 297px; position: absolute; top: 360px; left: 50%; margin-left: -110px; text-indent: -999em;}

/* -- SPACEBOY -- */
body#serv .spaceboy a {display: block; background: url(../images/visual/design-trooper.png) no-repeat; width: 160px; height: 290px; position: absolute; bottom: 0; left: 20px; text-indent: -999em;}


/* -- BIG CTA -- */
body#serv .cta.big {position: absolute; bottom: 0; left: 140px;}
body#serv .cta.big:hover {background: rgba(0,0,0,1)}



/*-------------------------------------------    
   //// DETAIL ////  SERVICES & PAGES
-------------------------------------------*/
body.expand.details #outer {margin: 0 0 25px 0;} /* --- CHANGE VALUE = 0 WHEN ADDING marketingS ---- */
body.expand.details #inner {background-position: 50% 180%;}
body.expand.details #primary {background: none;}

body.details #primary section {padding: 20px; width: 45%;}
body.details #primary #secondary {width: 45%; position: absolute; right: 0}
body#serv.details #primary {
	height: 870px;
}

/* --- ANALYTICS ---- */
body.details #primary.analytics section {width: 95%}
body#serv.details #primary.analytics .cta.big {top: 450px; left: 20px; right: auto;}

/* --- case LINK ---- */
body#serv.details #primary .big {
	max-width: 150px; height: 40px; 
	text-align: center; position: absolute; top: auto; bottom: 220px; right: 25px; left: auto; font-size: 1em; line-height: 40px;
}



/* --- SERVICE caseS ---- */
body#serv.details #primary aside {display: none;}
body#serv.details aside h3 {margin: 0 0 25px 0}
body#serv.details aside p {font-size: 1em;}


/* --- SERVICE marketing POSTS ---- */
body#serv.details .marketing-post {width: 45%; float: left; margin: 0 2.5%}
body#serv.details .brands {width: 100%;}


/* ---- FULL marketing POST ----- */
body#marketing.full-post #search {width: 180px;}
body#marketing.full-post .marketing-post img {border: 1px solid #666; margin: 0 0 25px 0; width: 100%;}


body#serv.details .trooper {position: absolute; bottom: -5px; left: 0;}


/* --- /////  SERVICE LOGOS  ///// ---- */
body#serv.details #primary .serv-icon {
	position: relative; width: 100px; height: 100px; margin: 0 20px 10px 0;
}

body#serv.details .serv-icon a {width: 100%; height: 100%; right: 0; position: relative;}
body#serv.details .icon-web-design {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/web-design-logo.png) no-repeat 0 0
}
body#serv.details .icon-multi {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/multi-logo.png) no-repeat 0 0
}
body#serv.details .icon-dev {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/web-dev-logo.png) no-repeat 0 0
}
body#serv.details .icon-mobile {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/mobile-logo.png) no-repeat 0 0
}
body#serv.details .icon-cms {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/cms-logo.png) no-repeat 0 0
}
body#serv.details .icon-stats {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/analytics-logo.png) no-repeat 0 0
}
body#serv.details .icon-seo {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/search-logo.png) no-repeat 0 0
}
body#serv.details .icon-ecommerce {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/768/commerce-logo.png) no-repeat 0 0
}



/* --- /// SERVICE FOOT LINKS //// --- */
body.details #primary #service-list {position: absolute; bottom: 0; width: 75%; right: 0; padding: 0 0 35px 0;}
body.details #primary #service-list h3 {font-size: 1.3em; margin: 0 0 30px 0}
#service-list .col {width: 50%; float: left}
#service-list ul li {margin: 0 0 15px}








/*-------------------------------------------    
   caseS
-------------------------------------------*/
body#news aside, body#serv aside {width: 30%; position: absolute; bottom: 30px; left: 200px;}
body.expand aside blockquote .author {color: #fff;}
body.expand aside blockquote p {font-size: 1.1em; background: url(../images/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.9); border: none;}

body#news aside {position: inherit; width: 100%;}


/*-------------------------------------------    
   PORTFOLIO
-------------------------------------------*/
body#news #inside-wrap {background-position: 0 -35px}
body#news #inner {
	background: url(../images/visual/home-midfield.jpg) repeat-x 50% 100%; border-bottom: 1px solid #015F92;
}
body#news #primary {height: 920px;}
body#news #primary h1 {padding: 18px 20px 0 0; font-size: 4.2em;}

/* -- FOLIO SLIDER -- */
.folioslider {
	width: 100%; position: absolute; top: 155px; left: 0;
	background: url(../images/visual/folio-shine.png) no-repeat 50% 236px;  
}

/* -- FOLIO PANEL -- */
.folio-panel {width: 100%;}



/* Direction Nav */
body#news #next {width: 50px; height: 50px; margin: 0; display: block; background: url(../images/768/mini-arrows.png) no-repeat -50px 0; position: absolute; top: 10px; left: 50%; cursor: pointer; text-indent: -9999px; z-index: 999}
body#news #next:hover {background-position: -50px -50px}

body#news #prev {width: 50px; height: 50px; margin: 0; display: block; background: url(../images/768/mini-arrows.png) no-repeat 0 0; position: absolute; top: 10px; left: 50%; cursor: pointer; text-indent: -9999px; z-index: 999; margin-left: -50px}
body#news #prev:hover {background-position: 0 -50px}



/* -- FOLIO THUMBS -- */
.pthumbs {
	margin: 80px auto 0 auto; width: 90%; max-width: 848px; 
	background: url(../images/visual/folio-shadow.png) no-repeat 50% 100%; 
	padding: 0 0 50px 0;
}

.pthumbs li {float: left; height: auto;}

.pthumbs li.pA {width: 22.2877358%}
.pthumbs li.pB {width: 54.4245283%}
.pthumbs li.pC {width: 22.2877358%; float: right;}

.pthumbs li img {padding: 5px; background: #000; max-width: 100%;}
.pthumbs li:first-child img {padding: 5px 0 5px 5px}
.pthumbs li:last-child img {padding: 5px 5px 5px 0}
.pthumbs li:first-child, .pthumbs li:last-child {margin: 6% 0 0 0}

.pinfo {width: 90%; max-width: 930px; color: #fff; margin: 0 auto; padding: 20px 0 0 0; b}
.pinfo .col {float: left; width: 33.3333333%;}
.pinfo .col:first-child p {margin: 0 0 20px 0; padding: 0 20px 0 0}
.pinfo h2 {margin: 0 0 20px 0; font-weight: 300;}
.pinfo ul li {height: 37px; line-height: 30px; font-size: 1em; padding: 0 0 0 50px; margin: 0 0 10px 0; font-weight: normal; text-shadow: 1px 1px 0 #000;}

.pinfo .cta {position: absolute; top: -60px; left: 10px; font-size: .85em; padding: 0 20px}





/*-------------------------------------------    
   TROOPERS
-------------------------------------------*/
body#team #inner {
	background: url(../images/visual/team_midfield.jpg) repeat-x 50% 100%; border-bottom: 1px solid #015F92;
}
body#team .shine {
	width: 100%; height: 970px;
	background: none;
}

/*-- TEAM WIRES --*/
body#team .team-wires {width: 432px; height: 101px; position: absolute; top: 357px; left: 50%; margin-left: -216px; background: url(../images/visual/team-wires.png) no-repeat 0 0; text-indent: -999em;}

/*-- IGD LINK --*/
body#team #igd_btn {display: block; width: 289px; height: 326px; text-indent: -999em; background: url(../images/visual/igd-hologram.png) no-repeat 0 0; position: absolute; bottom: -100px; left: 50%; margin-left: -144px;}

/*-- TEAM DARK BOX --*/
body#team .troopers_box {width: 100%; height: 368px; background: url(../images/visual/trooper-dudes.png) no-repeat 50% 0; position: absolute; top: 65px; left: 0;}

/*-- TEAM CONTENT --*/
#team-content {width: 90%; margin:0 auto; padding: 315px 0 0 0}
#team-content .colA {float: left; width: 48.125%; background: rgba(0,0,0,0.7);}
#team-content .colB {float: right; width: 48.125%; background: rgba(0,0,0,0.7);}

#team-content section {
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}

#team-content .colA .content {padding: 20px 100px 20px 40px;}
#team-content .colB .content {padding: 20px 30px 20px 120px;}

body#team .content h3 {font-size: 1em; margin: 0 0 25px 0}
body#team .content p {color: #B9B9B9; font-size: .9em;}


/* --- TWEETS ---- */
body#team aside {display: none;}




/*-------------------------------------------    
  CONTACT
-------------------------------------------*/
body#contact #primary {width: 95%}
body#contact #inner {background-position: 50% 100%;}
body#contact #primary {height: 1000px}
body#contact .shine {
	width: 100%;
	background: url(../images/visual/folio-shine.png) no-repeat 50% 342px;
}
body#contact #primary {background: url(../images/visual/c-hologram.png) no-repeat 45% 95%}


body#contact #info h2 {height: 52px; background: url(../images/visual/contact-icons.png) no-repeat 0 0; padding: 0 0 0 60px}
body#contact #form h2 {height: 52px; background: url(../images/visual/contact-icons.png) no-repeat 0 -52px; padding: 0 0 0 60px}







 
/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#slidenav {top: 180px}

#featured {height: 408px; position: relative; }

#featured h1, #featured h2 { text-indent: -9999em; margin: 70px 0 55px 0; height: 180px}
#featured h1 strong, #featured h2 strong {font-size: 8em; letter-spacing: -1px; line-height: 1.1em; color: #fff;}


#featured .designSlide h1 { background: url(../images/visual/home-slidetxt-1.png) no-repeat 50% 25px; }
#featured .devSlide h2 { background: url(../images/visual/home-slidetxt-2.png) no-repeat 50% 25px; }
#featured .mobileSlide h2 { background: url(../images/visual/home-slidetxt-3.png) no-repeat 50% 25px; }
#featured .mediaSlide h2 { background: url(../images/visual/home-slidetxt-4.png) no-repeat 50% 25px; }


.panel a, .cta {
	font-size: 1em;  padding: 0 30px; line-height: 2.5em;
	text-shadow: 0 2px 2px rgba(0,0,0,0.6);
}


/*-------------------------------------------    
   HOME - SERVICES
-------------------------------------------*/
#services {padding: 75px 0 40px 0; width: 100%; max-width: 960px; margin: 0 auto;}
#services section {
	width: 22.9166667%;
	margin: 0 1.0416667%;
	float: left;
	text-align: center;
	position: relative;
}
body#home .serv-icon {background: url(../images/visual/icon-shine.png) no-repeat 0 0;position: absolute; top: -120px; 
	left: 50%; margin-left: -46px;
}
#services h2 {font-size: 1.2em; font-weight: 300}





/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
	background: url(../images/visual/home-midfield.jpg) repeat-x 50% 0; 
}
#container {background: url(../images/visual/tab-shadow.png) no-repeat 130% 115px;}
#container #midglow {background: url(../images/768/home-responsive.png) no-repeat 0 100%; padding: 0}


#container section {
	width: 39.5833333%;
	float: left;
	padding: 0 0 0 3%;
}
#container aside {
	width: 53.125%;
	float: right;
	padding: 125px 0 0 0;
}

#container h2,#container h3 {
	font-size: 1.4em; letter-spacing:  normal;
}
#container .cta {font-size: .8em; padding: 0 20px;}

.check-list {margin: 0 0 15px 0}
.check-list li {font-size: 1em; margin: 0 0 5px 0; background: url(../images/visual/check-bullet.png) no-repeat 0 0; padding: 0 0 0 30px;}

body#home blockquote p {font-size: 1em;}


/* --- ABOUT --- */
#about .brands {padding: 25px 0 0 0}
#about .cta {margin: 0 0 35px 0}



/*-------------------------------------------    
   HOME - TABS
-------------------------------------------*/
#tab-container {min-height: 340px;}
aside .tabs li a {font-size: 1em; line-height: 1.3em;
	background: url(../images/visual/tab-ribbon.png) no-repeat;
	background-position: 50% -147px; 
}
.folio-btn {position: absolute; bottom: -20px; left: 0; }
aside .tabs li a span b {font-size: .8em}



/*-------------------------------------------    
  marketing POSTS
-------------------------------------------*/
body#marketing h1 {
	padding: 0; margin: 0; height: inherit; line-height: 44px; margin: 0 0 45px 0
}
body#marketing h1 img {float: right; margin: 12px 0 0 15px}


body#marketing #primary {width: 95%}
.marketing-post figure img {display: block;}



.marketing-post h2 {font-size: 1.4em;}
.marketing-post .cta {padding: 0 20px;}
.marketing-post img {width: 35%; margin: 0 1.5em 1.5em 0}
.marketing-post .post {text-transform: none; font-size: 12px;}



/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
nav {height: 160px;}
nav ul {width: 100%; height: 100%; position: relative;}
nav ul li {
	width: 95px;
	background: url(../images/768/nav-ribbon.png) no-repeat 50% -174px;
}
nav ul li a {
	font-size: 1em;
}

nav ul li a span {padding: 85px 0 0 0; background: url(../images/visual/nav-icons.png) no-repeat 0 -15px;}
nav ul .n-services {left: 0;}
nav ul .n-news {left: 95px;}
nav ul .n-team {left: 190px;}
nav ul .n-marketing {right: 190px;}
nav ul .n-contact {right: 0;}
nav ul .n-case {right: 95px;}
nav ul li:hover  {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
nav ul .n-services a span {background-position: -10px -20px;}
nav ul .n-news a span {background-position: -10px -150px;}
nav ul .n-team a span {background-position: -15px -280px;}
nav ul .n-marketing a span {background-position: -10px -410px;}
nav ul .n-contact a span {background-position: -10px -668px;}
nav ul .n-case a span {background-position: -10px -535px;}

nav ul .n-services:hover span {background-position: -130px -20px;}
nav ul .n-news:hover span {background-position: -130px -150px;}
nav ul .n-team:hover span {background-position: -135px -280px;}
nav ul .n-marketing:hover span {background-position: -130px -410px;}
nav ul .n-contact:hover span {background-position: -130px -668px;}
nav ul .n-case:hover span {background-position: -130px -535px;}

/*-------------------------------------------    
  ACTIVE MENU ITEMS
-------------------------------------------*/
body#serv nav ul .n-services {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#serv nav ul .n-services span {background-position: -130px -20px;}

body#news nav ul .n-news {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#news nav ul .n-news span {background-position: -130px -150px;}

body#team nav ul .n-team {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#team nav ul .n-team span {background-position: -130px -280px;}

body#marketing nav ul .n-marketing {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#marketing nav ul .n-marketing span {background-position: -130px -410px;}


body#contact nav ul .n-contact {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#contact nav ul .n-contact span {background-position: -130px -668px;}


body#case nav ul .n-case {
	background: url(../images/768/nav-ribbon.png) no-repeat;
	background-position: 50% 0; 
}
body#case nav ul .n-case span {background-position: -130px -535px;}


/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#prefooter article {width: 60%; margin: 0 3%;  float: left; }
#prefooter aside {width: 30%; margin: 0 2%; float: right;}


/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav {
	width: 68.75%;
	float: left;
	height: 150px;
}
#foot-nav dt {font-size: 1.1em;}
#foot-nav dl {
	width: 31.25%;
	margin: 0 1%;
	float: left;
	
}
footer {
	position: relative;
	width: 30.2083333%;
	float: right;
	font-size: 12px; color: #999;
	margin: 0 0 65px 0;
}
footer h2 {margin: 0}
footer h2 .cta {
	margin: 0 0 20px 0; font-size: 13px;
}


.igd-icon {
	left: 0; right: auto; bottom: -40px;
}


.pinfo .soon {display: none}

#liulanqi, #woai, #qqhao, #dianhua {display: none}