@import url(visual.css);

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



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

body#serv.prepare h1 strong {
	text-indent: -999em; display: block; width: 100%; height: 63px; 
	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: 63px; 
	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-news.png) no-repeat 93% 0; text-align: left;
}
body#team h1 i {
	text-indent: -999em; display: block; width: 100%; height: 60px; 
	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: 63px; 
	background: url(../images/visual/title-marketing.png) no-repeat 100% 0; text-align: left;
}

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-case.png) no-repeat 100% 0; text-align: left;
}



/*-------------------------------------------    
   PRIMARY
-------------------------------------------*/
body#home #outer {background: url(../images/visual/field1.jpg) repeat-x 50% 0}
body#home #inner {background: url(../images/visual/field2.jpg) repeat-x 50% 154px}
body#home #deeper {background: url(../images/visual/field3.jpg) repeat-x 50% 386px}

body.expand #outer {
	
	-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.5);
	-moz-box-shadow: 5px 5px 10px rgba(0,0,0,.5);
	-o-box-shadow: 5px 5px 10px rgba(0,0,0,.5);
	box-shadow: 5px 5px 10px rgba(0,0,0,.5);
	
}

/*-------------------------------------------    
   HEADER
-------------------------------------------*/
header#masthead {height: 160px; position: relative;} 
header .logo {
	width: 260px; left: 50%; 
	margin-left: -130px; 
	background: url(../images/visual/logo-ribbon.png) no-repeat 50% 100%; 
	padding: 10px 0 70px 0;
}
header .logo span {letter-spacing: 1px; text-align: center; padding: 0 0 0 8px}


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

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


/*-------------------------------------------    
  SUBNAV
-------------------------------------------*/
#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; font-weight: 400; 
}
#subnav li a:hover, #subnav .active a {background-position: 0 0;}



/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body#serv section {width: 46%; position: absolute; z-index: 999 }

body#serv section[role='design'] {
	top: 155px; left: 0;
}
body#serv section[role='multi'] {
	top: 155px; right: 100px;
}
body#serv section[role='mobile'] {
	top: 320px; left: 140px;
}
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: 350px; right: 0;
	width: 28%; 
}
body#serv section[role='hosting'] {
	top: 660px; right: 0;
	width: 50%; color: #fff;
}


/* -- ICON ENHANCEMENTS -- */
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: 2.5em; margin: 0 0 30px; font-weight: 600}
body#serv section[role='hosting'] h2 strong {display: block; font-size: 3.5em; color: #fff; font-weight: 800}



/* -- MOBILE -- */
body#serv .mobi a {display: block; background: url(../images/visual/innovate-mobile.png) no-repeat; width: 340px; height: 350px; position: absolute; top: 410px; text-indent: -999em;}
/* -- SCREENS -- */
body#serv .screens a {display: block; background: url(../images/visual/innovate-screen.png) no-repeat; width: 513px; height: 365px; position: absolute; top: 280px; right: 0; text-indent: -999em;}
/* -- TWINS -- */
body#serv .twins a {display: block; background: url(../images/visual/prepare-twins.png) no-repeat; width: 360px; height: 382px; position: absolute; top: 300px; left: 50%; margin-left: -150px; text-indent: -999em;}

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

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




/*-------------------------------------------    
   //// DETAIL ////  SERVICES LOGOS
-------------------------------------------*/
body#serv.details #primary .serv-icon {
	position: absolute; width: 150px; height: 150px; left: 115%; top: -84px;
}

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





/*-------------------------------------------    
   //// Marketing
-------------------------------------------*/


body#marketing section {width: 46%; position: absolute; z-index: 999 }

body#marketing section[role='multi'] {
	top: 155px; right: 100px;
}



body#marketing.details #primary .serv-icon {
	position: absolute; width: 150px; height: 150px; left: 115%; top: -84px;
}

body#marketing.details .serv-icon a {width: 150px; height: 150px; right: 0; position: relative;}
body#marketing.details .icon-multi {
	width: 100%; height: 100%; margin: 0; padding: 0;
	background: url(../images/visual/multi-logo.png) no-repeat 0 0
}








/*-------------------------------------------    
   //// DETAIL ////  SERVICES & PAGES
-------------------------------------------*/
body.expand.details #outer {margin: 0 0 25px 0;} /* --- CHANGE VALUE = 0 WHEN ADDING BLOGS ---- */
body.expand.details #inner {background-position: 50% 168%;}
body.expand.details #primary {background: url(../images/visual/c-hologram.png) no-repeat 50% 50%}


body#serv.details h1 {text-align: left;}
body#serv.details h1 span {text-align: right; }
body#serv.details h1 i {display: block; width: 100%; text-indent: -999em; text-align: left; height: 75px; }

/* --- DESIGN ---- */
body#serv.details #primary.design h1 i {
	background: url(../images/visual/serv-h1-design.png) no-repeat 100% 100%; 
}

body.expand.details #primary.design {background: url(../images/visual/design-figure.png) no-repeat 50% 40%}
body.expand.details #primary.design .shift {padding: 0 0 0 90px}
body.expand.details #primary.design p {width: 79%;}
body.expand.details #primary.design #secondary p {width: auto;}


/* --- DEVELOP ---- */
body#serv.details #primary.develop h1 i {
	background: url(../images/visual/serv-h1-develop.png) no-repeat 100% 100%; 
}

body.expand.details #primary.develop {background: url(../images/visual/figure-develop.png) no-repeat 50% 55%}
body.expand.details #primary.develop p {width: 70%;}
body.expand.details #primary.develop #secondary p {width: auto;}
body.expand.details #primary.develop .shift {padding: 0 0 0 90px}


/* --- MOBILE ---- */
body#serv.details #primary.mobile h1 i {
	background: url(../images/visual/serv-h1-mobile.png) no-repeat 100% 100%; 
}
body.expand.details #primary.mobile {background: url(../images/visual/prepare-twins.png) no-repeat 48% 53%}
body.expand.details #primary.mobile p {width: 80%;}
body.expand.details #primary.mobile #secondary p,body.expand.details #primary.mobile #secondary h3 {padding: 0 0 0 50px}


/* --- MULTIMEDIA ---- */
body#serv.details #primary.multi h1 i {
	background: url(../images/visual/serv-h1-multi.png) no-repeat 100% 100%; 
}


/* --- CMS FIGURE ---- */
body#serv.details #primary.cms h1 i {
	background: url(../images/visual/serv-h1-cms.png) no-repeat 100% 100%; 
}
body.expand.details #primary.cms {background: url(../images/visual/cms-figure.png) no-repeat 50% 40%}
body.expand.details #primary.cms .shift {padding: 0 0 0 90px}
body.expand.details #primary.cms p {width: 79%;}
body.expand.details #primary.cms #secondary p {width: auto;}

/* --- SEO FIGURE ---- */
body#serv.details #primary.seo h1 i {
	background: url(../images/visual/serv-h1-seo.png) no-repeat 100% 100%; 
}
body.expand.details #primary.seo {background: url(../images/visual/seo-figure.png) no-repeat 50% 40%}
body.expand.details #primary.seo .shift {padding: 0 0 0 90px}
body.expand.details #primary.seo p {width: 79%;}
body.expand.details #primary.seo #secondary p {width: auto;}
body.expand.details #primary.seo .collapse {width: 70%}


/* --- ANALYTICS FIGURE ---- */
body#serv.details #primary.analytics h1 i {
	background: url(../images/visual/serv-h1-analytics.png) no-repeat 100% 100%; 
}
body.expand.details #primary.analytics {background: url(../images/visual/figure-analytics.png) no-repeat 100% 45%}
body.expand.details #primary.analytics .cta.big {left: 0; right: auto;}
body.expand.details #primary.analytics section {width: 60%}
body.expand.details #primary.analytics #secondary {display: none;}
body.expand.details #primary.analytics .cta.big {top: 450px}
body.expand.details #primary.analytics .serv-icon a {right: 280px;}


/* --- ECOMMERCE FIGURE ---- */
body#serv.details #primary.ecommerce h1 i {
	background: url(../images/visual/serv-h1-ecommerce.png) no-repeat 100% 100%; 
}

/* --- HOSTING FIGURE ---- */
body#serv.details #primary.hosting h1 i {
	background: url(../images/visual/serv-h1-hosting.png) no-repeat 100% 100%; 
}






/* --- GLOBAL ---- */
body.details #primary section {padding: 20px 20px 20px 0; width: 35%;}
body.details #primary #secondary {
	width: 35%; position: absolute; right: 0; padding-right: 0;
}

body#serv.details #primary {
	height: 900px;
}

body#marketing.details #primary {
	height: 900px;
}

/* --- QUOTE LINK ---- */
body.details #primary .big {max-width: 150px; text-align: center; position: absolute; top: 575px; right: 0;}




/* --- SERVICE QUOTES ---- */
body#serv.details #primary aside {left: auto; top: 670px; right: 0; width: 26%;}
body#serv.details aside h3 {font-weight: 300; font-size: 1.3em; text-shadow: 1px 1px 3px #000; margin: 0 0 25px 0}
body#serv.details aside p {font-size: 1em;}


/* --- SERVICE BLOG POSTS ---- */
body#serv.details .news-post {width: 45%; float: left; margin: 0 2.5%}
body#serv.details .brands {width: 100%;}
body#serv.details .trooper {position: absolute; bottom: -5px; left: 0;}


/* --- SERVICE NEWS POSTS ---- */
body#marketing.details .news-post {width: 45%; float: left; margin: 0 2.5%}
body#marketing.details .brands {width: 100%;}
body#marketing.details .trooper {position: absolute; bottom: -5px; left: 0;}

/* --- Marketing SERVICE CASES ---- */
body#marketing.details #primary aside {left: auto; top: 670px; right: 0; width: 26%; float:right; margin-top:530px;}
body#marketing.details aside h3 {font-weight: 300; font-size: 1.3em; text-shadow: 1px 1px 3px #000; margin: 0 0 25px 0}
body#marketing.details aside p {font-size: 1em;}



/* --- /// SERVICE FOOT LINKS //// --- */
body.details #primary #service-list {width: 500px; height: 230px; position: absolute; bottom: 0; left: 170px; padding: 0;}
body.details #primary #service-list h3 {font-size: 1.3em; margin: 0 0 30px 0; text-shadow: 1px 1px 3px #000; font-weight: 600;}
#service-list .col {width: 50%; float: left}
#service-list ul li {margin: 0 0 15px}




/*-------------------------------------------    
   QUOTES
-------------------------------------------*/
body#serv aside, body#serv aside {width: 30%; position: absolute; bottom: 60px; left: 240px;}
body#news aside {position: inherit; width: 100%;}

body.expand aside blockquote .author {color: #fff;}
body.expand aside blockquote p {background: url(../images/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.90); border: none;}



/*-------------------------------------------    
   PORTFOLIO
-------------------------------------------*/
body#launch #inside-wrap {background-position: 0 0; overflow: hidden;}
body#launch #inner {
	background: url(../images/visual/home-midfield.jpg) repeat-x 50% 100%; border-bottom: 1px solid #015F92;
}
body#launch #primary {width: 100%; height: 1000px; max-width: 960px; margin: 0 auto;}
body#launch #next, body#launch #prev {top: 200px;}


body#launch .shadow-left {opacity: 0; display: block; width: 195px; height: 348px; background: url(../images/visual/folio-thumb-shadow.png) no-repeat 0 0; position: absolute; top: 70px; left: 50%; margin-left: -430px;}

body#launch .shadow-right {opacity: 0; display: block; width: 195px; height: 348px; background: url(../images/visual/folio-thumb-shadow.png) no-repeat -195px 0; position: absolute; top: 70px; left: 50%; margin-left: 235px;}


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



/* -- FOLIO THUMBS -- */
.pthumbs {
	margin: 165px auto 0 auto; width: 100%; 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;
	position: relative;
}

.pthumbs li.pA {width: 22.2877358%; left: 190px; opacity: 0}
.pthumbs li.pB {width: 54.4245283%; z-index: 999;}
.pthumbs li.pC {width: 22.2877358%; left: -190px; opacity: 0; 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: 65px 0 0 0}


/* -- FOLIO INFO -- */
.pinfo {width: 100%; max-width: 930px; color: #fff; margin: 0 auto; padding: 20px 0 25px 0; position: relative; background: url(../images/visual/folio-info-bg.png) no-repeat 15% 85%; opacity: 0; height: 250px;}
.pinfo .col {float: left; width: 33.3333333%;}
.pinfo .col:first-child p {margin: 0 0 20px 0; padding: 0 50px 0 0}
.pinfo h2 {margin: 0 0 20px 0; font-weight: 400;}
.pinfo h2 b {font-weight: 400;}
.pinfo ul li {height: 37px; line-height: 30px; font-size: 1em; padding: 0 0 0 50px; margin: 0 0 10px 0; text-shadow: 1px 1px 0 #000;}

.pinfo .cta {position: absolute; top: -640px; left: 10px; }

.pinfo .soon {
	border: 1px solid #333; background: #000; color: #67D5F5;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
}



/*-------------------------------------------    
   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: 70px; 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 {padding: 315px 0 0 0}
#team-content .colA {float: left; width: 48.125%; background: url(../images/visual/team-info-bg.png) no-repeat 0 0; height: 324px;}
#team-content .colB {float: right; width: 48.125%; background: url(../images/visual/team-info-bg2.png) no-repeat 0 0; height: 324px;}

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

body#team .content h2 {margin: 0 0 15px 0;}
body#team .content h3 {font-size: 1.1em; margin: 0; font-weight: 400;}
body#team .content p {color: #B9B9B9; font-size: .9em; line-height: 1.8em;}


/* --- TWEETS ---- */
body#team aside {padding: 45px 0 0 0; width: auto;}
body#team aside h2{background: url(../images/visual/tweet-peak.png) no-repeat 15% 100%; margin: 0; height: 60px;}
body#team aside h2 span {width: 100%; display: block; height: 38px; background: url(../images/visual/side-social.png) no-repeat 0 -87px; padding: 0 0 0 50px; line-height: 40px; margin: 0 0 20px 0; font-weight: 400;}


/* --- TWEET FEED ---- */
#tweetFeed {
	width: inherit;
	background-color: rgba(0,0,0,0.5); color: #fff; font-size: 1em; padding: 15px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
}
#tweetFeed .tweet_join, #tweetFeed .tweet_time {display: none}
#tweetFeed .tweet_avatar {display: none; width: 48px; height: 48px; float: left; margin: 0 15px 0 0; border: 1px solid #75E8FA}
#tweetFeed .tweet_text {display: block; font-size: 1.1em; padding: 5px 0 0 0; font-style: italic; padding: 0 25px}


/*-------------------------------------------    
  NEWS
-------------------------------------------*/
body#news h1 {padding: 0; margin: 0; height: inherit; line-height: 48px; margin: 0 0 45px 0}
body#news h1 img {float: right; margin: 12px 0 0 15px}

body#news .wire {display: block; width: 339px; height: 268px; text-indent: -999em; background: url(../images/visual/news-wire.png) no-repeat 0 0; position: absolute; top: -28px; left: 0}


/*-------------------------------------------    
  CASE
-------------------------------------------*/
body#case h1 {padding: 0; margin: 0; height: inherit; line-height: 48px; margin: 0 0 45px 0}
body#case h1 img {float: right; margin: 12px 0 0 15px}

body#case .wire {display: block; width: 339px; height: 268px; text-indent: -999em; background: url(../images/visual/case-wire.png) no-repeat 0 0; position: absolute; top: -28px; left: 0}



/*-------------------------------------------    
  CONTACT
-------------------------------------------*/
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
-------------------------------------------*/
body#home #wrapper {height: 625px;}
#featured {width: 100%; height: 465px; position: absolute; top: 160px; left: 0;}

#featured h1, #featured h2 { text-indent: -9999em; margin: 100px 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; }





/*-------------------------------------------    
   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;
}

body#home .serv-icon.on {background-position: 0 -94px;}

#services h2 {font-size: 1.3em; font-weight: 300}
#services h2 strong {font-weight: 400}





/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/

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

#container section {
	width: 39.5833333%;
	float: left;
	padding: 0 0 0 1%;
	
}

#tab-container {height: 380px;}
#tab-container article {padding: 0 25px 0 90px; }
#tab-container .launch_last p {padding: 0 30px 0 0 }

#container aside {
	width: 53.125%;
	float: right;
	padding: 125px 0 0 0;
}
.check-list {margin: 0 0 25px 25px}
.check-list li {font-size: 1.1em; margin: 0 0 10px 0; background: url(../images/visual/check-bullet.png) no-repeat 0 0; padding: 0 0 0 30px;}

body.details .check-list li {font-size: 1em; margin: 0 0 5px 0;}

#tab-container article .cta {margin: 0 0 0 25px}


/* --- ABOUT --- */
#about figure {margin: 0 0 0 0}
#about .brands {padding: 25px 0 0 0; margin: 0;}
#about .cta {margin: 0}
#about .shorthand {padding: 0 60px 0 0}


/*-------------------------------------------    
   HOME - TABS
-------------------------------------------*/
aside .tabs li a {
	background: url(../images/visual/tab-ribbon.png) no-repeat;
	background-position: 50% -147px; 
}
aside .tabs li a span b {font-size: .8em}


/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
nav ul li {
	width: 120px;
	background: url(../images/visual/nav-ribbon.png) no-repeat; 
	background-position: 50% -190px;
}

nav ul li a span {
	background: url(../images/visual/nav-icons.png) no-repeat 0 -15px;
}

nav ul .n-services {left: 0;}
nav ul .n-news {left: 120px;}
nav ul .n-team {left: 240px;}
nav ul .n-marketing {right: 240px;}
nav ul .n-contact {right: 0;}
nav ul .n-case {right: 120px;}

nav ul .n-services a span {background-position: 0 -15px;}
nav ul .n-news a span {background-position: 0 -145px;}
nav ul .n-team a span {background-position: 0 -275px;}
nav ul .n-marketing a span {background-position: 0 -405px;}
nav ul .n-contact a span {background-position: 0 -663px;}
nav ul .n-case a span {background-position: 0 -530px;}

nav ul li:hover  {
	background: url(../images/visual/nav-ribbon.png) no-repeat;
	background-position: 50% -5px; 
}
nav ul .n-services:hover span {background-position: -120px -15px;}
nav ul .n-news:hover span {background-position: -120px -145px;}
nav ul .n-team:hover span {background-position: -120px -275px;}
nav ul .n-marketing:hover span {background-position: -120px -405px;}
nav ul .n-contact:hover span {background-position: -120px -663px;}
nav ul .n-case:hover span {background-position: -120px -530px;}


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

/*-- FOLIO --*/
body#news nav ul .n-news {
	background: url(../images/visual/nav-ribbon.png) no-repeat;
	background-position: 50% -5px; 
}
body#news nav ul .n-news span {background-position: -120px -145px;}


/*-- TEAM --*/
body#team nav ul .n-team {
	background: url(../images/visual/nav-ribbon.png) no-repeat;
	background-position: 50% -5px; 
}
body#team nav ul .n-team span {background-position: -120px -275px;}

/*-- MARKETING -- */
body#marketing nav ul .n-marketing {
	background: url(../images/visual/nav-ribbon.png) no-repeat;
	background-position: 50% -5px; 
}
body#marketing nav ul .n-marketing span {background-position: -120px -405px;}


/*-- CONTACT -- */
body#contact nav ul .n-contact {
	background: url(../images/visual/nav-ribbon.png) no-repeat;
	background-position: 50% -5px; 
}
body#contact nav ul .n-contact span {background-position: -120px -663px;}

/*-- case --*/
body#case nav ul .n-case {
	background: url(../images/visual/nav-ribbon.png) no-repeat;
	background-position: 50% -5px; 
}
body#case nav ul .n-case span {background-position: -120px -530px;}


/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#prefooter article {width: 64.5833333%; float: left; margin: 0 1.0416667%}
#prefooter aside {width: 31.25%; float: right; margin: 0 1.0416667%}


/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav {
	width: 68.75%;
	float: left;
	height: 150px;
}
#foot-nav dl {
	width: 48%;
	margin: 0 1%;
	float: left;
}

footer {
	width: 30.2083333%;
	float: right;
	font-size: 11px; color: #999;
	position: relative;
}
footer h2 {margin: 0 0 15px 0}
footer h2 .cta {
	margin: 0; font-size: 16px; background: none;
	/* -- RADIUS -- */
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	
	/* -- SHADOW -- */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	
	text-align: left;
	text-transform: none; padding: 0; line-height: 16px;

}
footer h2 .cta:hover {
	padding: 0; background: none; border: none;
	/* -- SHADOW -- */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
}




/*-------------------------------------------    
  BRANDS
-------------------------------------------*/
.brands {width: 100%; margin: 0 0 40px 0; height: 124px; background: url(../images/visual/brands-bg.png) no-repeat 50% 0; overflow: hidden;}
.brands-item-1{display: block; width: 100%; height: 100%; background: url(../images/brands-1.png) no-repeat 50% 15px; display: none;}
.brands-item-2{display: block; width: 100%; height: 100%; background: url(../images/brands-2.png) no-repeat 50% 15px; display: none;}


/*-------------------------------------------    
 页码
-------------------------------------------*/
.dede_pages{
}
.dede_pages ul{
	float:left;
	padding:12px 0px 12px 16px;
}
.dede_pages ul li{
	float:left;
	font-family:Tahoma;
	line-height:17px;
	margin-right:6px;

}
.dede_pages ul li a{
	float:left;
	padding:2px 4px 2px;

	display:block;
}