body {padding: 0; background: #2d2f33 url(../i/bg-header.png) 0 0 repeat-x;}

a {color: #25afff; text-decoration: none;}
a:hover {text-decoration: underline;}

.clear {clear: both; overflow: hidden; height: 0;}

/* @group Header */
body>header {position: relative; z-index: 11; height: 96px; width: 982px; margin: 0 auto;}
body>header p {margin: 0;}

h1 {position: relative; left: 20px; top: 23px;}
h1, h1 a, h1 img {display: block; height: 56px; width: 309px;}
#tagline {position: absolute; z-index: 12; right: 32px; top: 116px; height: 10px; width: 204px; background: url(../i/tagline.png) 0 0 no-repeat; text-indent: -10000px;}
#header-tel {position: absolute; right: 32px; top: 41px; height: 34px; width: 245px; background: url(../i/about.png) 0 0 no-repeat; text-indent: -10000px;}
/* @end */

/* @group Nav */
body>nav {position: relative; z-index: 10; height: 37px; width: 982px; margin: 0 auto; padding: 8px 0 0;}
body>nav ul {height: 35px; width: 486px; margin: 0 0 0 -3px; padding: 0 0 0 4px; background: url(../i/nav.png) 0 -35px no-repeat;}
body>nav li {display: inline; float: left; list-style-type: none; height: 33px; width: 85px; margin: 0 1px 0 0; padding: 0 4px;}
body>nav li a {display: block; height: 33px; width: 85px; text-indent: -10000px;}
body>nav li a:hover {background: url(../i/nav.png) -8px 0 no-repeat;}
body>nav li#nav-work, body>nav li#nav-work a {width: 138px;}
body>nav li#nav-work a:hover {background: url(../i/nav.png) -102px 0 no-repeat;}
body>nav li#nav-casestudies, body>nav li#nav-casestudies a {width: 124px;}
body>nav li#nav-casestudies a:hover {background: url(../i/nav.png) -249px 0 no-repeat;}
body>nav li#nav-contact, body>nav li#nav-contact a {width: 98px;}
body>nav li#nav-contact a:hover {background: url(../i/nav.png) -382px 0 no-repeat;}
body>nav ul li.selected a:hover {background: transparent !important;}

#about>nav ul {background-position: 0 -70px;}
#work>nav ul {background-position: 0 -105px;}
#casestudies>nav ul {background-position: 0 -140px;}
#contact>nav ul {background-position: 0 -175px;}
/* @end */

/* @group Content */
#content {padding: 30px 0 62px; background: #f4f4f4 url(../i/bg-persistent.png) 0 100% repeat-x;}
#content>span {display: block; overflow: hidden; height: 16px; width: 982px; margin: 0 auto; background: url(../i/bg-content.png) -982px 0 no-repeat;}
#content #content-inside-bottom {background: url(../i/bg-content.png) 0 0 no-repeat;}
#content-inside {position: relative; min-height: 100px; width: 982px; margin: 0 auto; padding: 1px 0; background: url(../i/bg-content.png) 100% 0 repeat-y;}

#content #content-inside #for-hire {position: absolute; left: 1px; top: -15px; height: 124px; width: 100px; margin: 0; background: url(../i/for-hire.png) 0 0 no-repeat; text-indent: -10000px; text-align: left;}
#content #content-inside #for-hire a {display: block; height: 114px; width: 77px;}


  /* @group Home */
  #home #content h2 {height: 402px; width: 982px; margin: 45px 0 41px; background: url(../i/home.jpg) 0 0 no-repeat; text-indent: -10000px;}
  #home #content p {position: absolute; top: 405px; right: 74px; width: 440px; color: #9d9d9d; font-size: 1.167em; text-align: right;}
  /* @end */
  
  /* @group About */
  #about article {overflow: hidden; padding: 0 0 20px;}
  #about #content h2 {height: 60px; width: 670px; margin: 50px 0 0 42px; background: url(../i/about/header.png) 0 0 no-repeat; text-indent: -10000px;}
  #about #content header p {margin: 0 42px 40px; color: #999; font-size: 1.5em; line-height: 1.4;}
  
  #about #testimonials {display: inline; float: right; width: 224px; margin: 0 31px 0 0; background: url(../i/about/bg-testimonials.png) -448px 0 repeat-y;}
  #about #testimonials span.testimonials-top, #about #testimonials span.testimonials-bottom {display: block; overflow: hidden; height: 12px; background: url(../i/about/bg-testimonials.png) -224px 0 no-repeat;}
  #about #testimonials span.testimonials-bottom {margin: 70px 0 0; background-position: 0 0;}
  #about #testimonials h3 {margin: 8px 16px 20px; padding: 8px 0 0 30px; background: url(../i/about/quote.png) 0 0 no-repeat; color: #292b2a; font-size: 1.334em;}
  
  #about #testimonials blockquote {margin: 0 9px; padding: 22px 7px 8px;}
  #about #testimonials blockquote.first {background: url(../i/about/bg-testimonials-line.png) 0 0 repeat-x;}
  #about #testimonials p {margin: 0 0 .5em; color: #6c6c6c; font-size: .917em; line-height: 1.4;}
  #about #testimonials p.cite {margin: 0; color: #383a3d; font-size: .834em;}
  #about #testimonials p cite {font-size: 1.1em; font-style: normal; font-weight: bold;}
  
  #about section.team {width: 480px; padding: 14px 0 36px 221px; color: #888;}
  #about section.team img {display: inline; float: left; position: relative; margin: 0 0 0 -191px;}
  #about section.team h3 {margin: 0; padding: 4px 0 0; color: #292b2a; font-size: 1.084em; font-weight: normal;}
  #about section.team p {margin: 0 0 1.286em; font-size: 1.167em;}
  #about section.team p.team-contact {font-size: 1em;}
  /* @end */
  
  /* @group Work */
  #work #content-inside {padding-bottom: 20px;}
  #work #content header {position: relative; height: 369px; margin: 9px 0 22px; background: url(../i/work/our-stuff.jpg) 0 0 no-repeat; text-indent: -10000px;}
  #work #content header p.more-info {position: absolute; left: 540px; top: 233px; width: 420px; color: #aeb5bd; font-size: 1.167em; line-height: 1.2; text-indent: 0;}
  
  #work #content article {float: left; position: relative; width: 581px; padding: 0 31px;}
  #work #content article h3 {margin: 0 0 11px 13px; font-size: 1.834em; line-height: 1;}
  #work #content .work-image {border: 1px solid #dfe0e4; margin: 0 0 12px; padding: 11px; background: #f1f1f1;}
  #work #content .work-image img {display: block; border: 1px solid #e4e5e9; padding: 5px; background: #fff url(../i/loading.gif) 50% 50% no-repeat;}
  
  #work #work-nav {float: right; width: 300px; padding: 0 31px 0 0;}
  #work #work-type {list-style-type: none;}
  #work #work-type li {display: inline; float: right; height: 27px; width: 65px; margin: 0 0 6px 6px; padding: 0 8px 0 24px; background: url(../i/work/buttons.png) -97px 0 no-repeat; font-size: 1em; line-height: 28px;}
  #work #work-type a {color: #fff;}
  #work #work-type .selected {background-position: 0 0;}
  #work #work-type .selected a {color: #1c1c1c; text-decoration: none;}
  
  #work #work-select {clear: both; border-top: 1px solid #dfe0e4;}
  #work #work-select li {list-style-type: none; border-bottom: 1px solid #dfe0e4; margin: 0; padding: .75em 11px;}
  #work #work-select h3 {margin: 0; font-size: 1.084em;}
  #work #work-select p {margin: 0 0 .5em; color: #6c6c6c;}
  #work #work-select p.work-view {margin: 0;}
  #work #work-select li.selected {color: #afafaf; background: #f0f0f0;}
  #work #work-select li.selected p {color: #afafaf;}
  #work #work-select li.selected p.work-view {height: 8px; width: 27px; margin: 1em 0 0; background: url(../i/work/arrows-selected.png) 0 0 no-repeat;}
  #work #work-select li.selected p.work-view a {display: none;}
  
  #work #pagination {position: absolute; right: 36px; top: 0;}
  #work #pagination li {display: inline; float: left; list-style-type: none; margin: 0 3px 0 0;}
  #work #pagination li.prev {margin: 0 7px 0 0;}
  #work #pagination li.next {margin: 0 0 0 7px;}
  #work #pagination li a {display: block; height: 28px; width: 27px; background: url(../i/work/pagination.png); line-height: 28px; text-align: center;}
  #work #pagination li.selected a {color: #1c1c1c;}
  #work #pagination li.prev a, #work #pagination li.next a {overflow: hidden; height: 15px; width: 8px; margin: 7px 0 0; background: url(../i/work/arrows.png) 0 0 no-repeat; text-indent: -10000px;}
  #work #pagination li.prev.disabled a {background-position: 0 -15px; cursor: default;}
  #work #pagination li.next a {background-position: -8px 0;}
  #work #pagination li.next.disabled a {background-position: -8px -15px; cursor: default;}
  #work #pagination a:hover {text-decoration: underline;}
  #work #pagination li.selected a:hover {text-decoration: none;}
  
  #work.identity #content article {width: 921px;}
  #work.identity #content-inside>nav {float: none; height: 0; width: auto; padding: 0;}
  #work.identity #work-type {position: absolute; right: 31px; top: 400px;}
  /* @end */
  
  /* @group Case Studies */
  #casestudies #content h2 {height: 369px; width: 982px; margin: 9px 0; background: url(../i/case-studies/coming-soon.jpg) 0 0 no-repeat; text-indent: -10000px;}
  #casestudies #content p {overflow: hidden; height: 0; margin: 0; text-indent: -10000px;}
  #casestudies #content p.more-info {overflow: visible; position: relative; left: 434px; top: -178px; height: 0; width: 480px; color: #aeb5bd; font-size: 1.084em; text-indent: 0;}
  /* @end */

  /* @group Contact */
  #contact #content-inside {width: 530px; padding: 1px 160px 1px 292px;}
  #contact #content h2 {height: 79px; width: 497px; margin: 28px 0 3px; background: url(../i/contact/header.png) 0 0 no-repeat; text-indent: -10000px;}
  #contact #content p {color: #6c6c6c; font-size: 1.167em;}
  
  #contact #content .vcard {display: inline; float: left; margin-left: -248px;}
  #contact #content .vcard h3 {margin: 0 0 3px; font-size: 1.334em;}
  #contact #content .vcard p {font-size: 1em;}
  #contact #content .vcard a {font-size: .917em;}
  
  #contact #content fieldset {clear: none; padding: 0 0 1.5em;}
  #contact #content .field {margin: 0 0 .75em;}
  #contact #content .left {clear: both; float: left; width: 260px;}
  #contact #content .right {clear: none; float: left; width: 250px;}
  #contact #content input.text {width: 244px; border: 1px solid #999;}
  #contact #content input.default, #contact #content textarea.default {color: #666;}
  #contact #content textarea {display: block; width: 504px; border: 1px solid #999;}
  #contact #content div.checkbox {overflow: hidden; width: 504px; padding: 3px; background: #efefef; font-weight: bold;}
  #contact #content div.checkbox label {display: inline; padding: 0 10px 0 0;}
  #contact #content div.checkbox ul {display: inline; list-style-type: none; margin: 0; font-weight: normal;}
  #contact #content div.checkbox li {display: inline; margin: 0;}
  
  #contact #content p.error, #contact #content p.success {height: 41px; margin: 0 0 1em; padding: 0 0 0 48px; background: url(../i/contact/bg-error.png) 0 0 no-repeat; color: #ff3030; font-size: 1.25em; line-height: 40px;}
  #contact #content p.success {background: url(../i/contact/bg-success.png) 0 0 no-repeat; color: #3a679f;}
  #contact .error input.text, #contact .error textarea {background: #ddf0ff;}
  /* @end */

/* @end */

/* @group Persistent content */
#persistent {width: 587px; margin: 0 auto; padding: 18px 365px 0 30px; color: #81868c;}
#persistent h2 {margin: 0; padding: .4em 0; color: #fff; font-size: 1.667em; font-weight: normal;}
#services-design, #services-technical {float: left; color: #fff; width: 240px;}
#services-design li, #services-technical li {margin: 0; list-style-position: inside;}
#services-design strong, #services-technical strong {color: #81868c; font-weight: normal;}

#persistent-featured {display: inline; float: right; position: relative; height: 365px; width: 350px; margin: 0 -365px 0 0; background: url(../i/bg-persistent-right.png) 0 0 no-repeat;}
#persistent-inquiry {position: relative; padding: 36px 0 0 46px; height: 59px;}
#persistent-inquiry h2 {margin: 0; padding: 0; font-size: 1.25em; font-weight: bold;}
#persistent-inquiry p {margin: 0;}
#persistent-inquiry a {display: block; position: absolute; left: 20px; top: 20px; height: 68px; width: 286px; text-indent: -10000px;}
#persistent-about h2 {margin: 0; padding: 15px 70px 0 48px; color: #d6d9dc; font-size: 1.25em; font-weight: bold;}
#persistent-about ul {list-style-type: none; padding: 4px 0 0 80px;}
#persistent-about li {width: 180px; margin: 0; padding: 11px 0 0;}
#persistent-about h3 {margin: 0; color: #fff; font-size: 1.084em; font-weight: normal; line-height: 1;}
#persistent-about p {margin: 0; color: #a2a5af; font-size: .917em;}
#persistent-about a {color: #fff; text-decoration: none;}
#persistent-casestudy {position: absolute; left: 39px; top: 232px; height: 102px; width: 241px; text-indent: -10000px;}
#persistent-casestudy a {display: block; position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
/* @end */

/* @group Footer */
body>footer {clear: both; position: relative; top: -5.5em; width: 617px; margin: 0 auto; padding: 0 365px 0 0; color: #fff; font-size: .917em;}
body>footer p {height: 36px; width: 587px; padding: 0 0 0 30px; background: url(../i/bg-footer.png) 0 0 no-repeat; line-height: 36px;}
body>footer a {color: #fff; text-decoration: none;}
body>footer a:hover {text-decoration: underline;}
/* @end */

/* @group IE6 */
* html #for-hire {display: none;}
/* @end */