/*
shopfrontui.com by Stuart Charlton
VERSION 1.0

-------------------

CONTENTS ----------

1.RESET
2.DEFAULT STYLES
3.LAYOUT
4.PAGE FURNITURE
  4.1 Skiplinks
  4.2 Branding
  4.3 Menu
  4.4 Footer
  4.5 Utilities
5.GLOBAL CLASSES
  5.1 Misc
  5.2 Teasers
  5.3 Articles
  5.4 Nav and Asides
  5.5 Pagination
6.LOCALISED
  6.1 Home
  6.2 About
  6.3 Services
  6.4 Work
  6.5 Contact

-------------------

COLOURS ----------

BGND #eaeaeb;
BODY GREY #2d2d2d; 
LIGHT GREY #bfbfbf
BLUE #30a6c8

-------------------
*/

/* ------------------------------------------------------------------------------- */
/*  =[1] RESET
    http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */
/* ------------------------------------------------------------------------------- */

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, strong, sub, sup, tt, var,
b, u, i, center,
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-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
/* http://www.456bereastreet.com/archive/200910/remove_the_outline_from_links_on_active_only/ */
:active {outline:none;}
/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* ------------------------------------------------------------------------------- */
/*  =[2] DEFAULT STYLES */
/* ------------------------------------------------------------------------------- */

body {  
  font-family: Arial, "Helvetica Neue", "Bitstream Vera Sans", Helvetica, sans-serif; 
  font-size : 62.5%; 
  line-height: 1.3;
  color: #2d2d2d;
  background: #2d2d2d;
}
img {
  float: left;
  border: none;
  margin: .3em .6em .6em 0;
}
p {
  font-size: 1.4em;
  margin: 0 0 .8em 0;
}
blockquote {
  font-weight: bold;
}
cite {
  font-style: normal;
  font-size: 1.2em
}
acronym,
abbr {
  cursor: help;
  border: 0;
} 
abbr.date {
  border: 0;
}
a {
  -webkit-transition: color .4s linear;
  -moz-transition: color .4s linear;
  font-weight: normal;
}
a,
a:link 
a:visited,
a:focus,
a:active {
  text-decoration: none;
  color: #30a6c8;
}
a:hover {
  color: #646464;
}
a.image,
a:hover.image { 
  border: 0; 
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1.2em;
  margin: 2.4em 0 .8em 0;
}
h1 {
  margin: 0 0 .5em 0;
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 4.3em;
  letter-spacing: -0.01em;
  line-height: .9;
  color:#30A6C8;
}
h2 {
  color: #989898;  
}
h4 {
  font-size: 1.3em;
}
h6 {
  font-weight: normal;
}
ul, ol, dl {
  font-size: 1.2em;
  margin: 0 0 1.2em 0;
  padding: 0;
}
ol {
  margin-left: 2em;
  padding-left: 2em;
  list-style: decimal;
}
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
dt {
  float: left;
  clear: both;
}
/* http://stackoverflow.com/questions/501671/superscript-in-css-only */
sup {
  font-size: 50%;
  vertical-align: top;
}
q {
  font-style: italic;
}

/* ------------------------------------------------------------------------------- */
/*  =[3] LAYOUT */
/* ------------------------------------------------------------------------------- */

/* nested .inner divs simply to enable full-width bgnds */
.inner { 
  width:  980px;
  margin: 0 auto;
  clear: both;
  overflow: hidden;
}
body { /* saves one extra .inner */
  border-top: #fff 141px solid;
}
#branding {
  position: relative;
  width:  980px;
  margin: -141px auto 0 auto;
  clear: both;
  overflow: hidden;
  height: 141px;
  background: #fff;
}
#content {
  padding: 20px 0 30px 0;
  background: #eaeaeb;
}
#content .inner {
  background: #f9f9f9;
  border: 1px #cbcbcc solid;
  padding: 36px 29px;
  width: 920px;
  position: relative;
}
#primary { 
  float: left;
  width: 675px;
  margin-top: 0px;
  overflow: hidden;
}
#footer {
  background: #2d2d2d;
  padding-bottom: 2em;
}
/* ------------------------------------------------------------------------------- */
/*  =[4] PAGE FURNITURE */
/* ------------------------------------------------------------------------------- */

/* =[4.1] Skiplinks
--------------------------------- */

#skiplinks {
  position:absolute;
  left: -9999em;
}

/* =[4.2] Branding
--------------------------------- */

#logo {
  position: absolute;
  width: 263px;
  height: 63px;
  left: 4px;
  top: 35px;
  z-index: 9999;
  text-indent: -9999em;
  background: url(/inc/img/ui/logo.png) left top no-repeat; 
}

/* =[4.3] Menu
--------------------------------- */

#menu { 
  position: absolute;
  top: 74px;
  left: 0;
  width: 100%;
  height: 25px;
}
#menu h2  {
  position: absolute;
  left: -9999em;
}
#menu .inner {
  text-align: right;
}
#menu ul {
  float: right;
  overflow:hidden;
  height: 25px;
  font-size: 1em;
}
#menu li { 
  float: left;
  height: 25px;
  margin: 0 0 0 1em; 
  padding: 0;
  font-size: 1em;
} 
#menu li a { 
  float: left;
  font-size: 1.4em;
  line-height: 1.1;
  letter-spacing: 0.04em;
  padding: .3em .5em .4em .5em;
  font-weight: normal;
  color: #fff;
  background: #2d2d2d;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-transition: background-color  .4s linear;
  -moz-transition: background-color  .4s linear;
}
#menu li a:hover {
  color: #fff;
  background: #555;
}
#menu li.selected a {
  background: #30a6c8;
}

/* =[4.4] Footer
--------------------------------- */

#footer {
  color: #7f8185;
}
#footer .inner {
  padding-top: 3em;
}
#footer .block {
  float: left;
  overflow: hidden;
  width: 230px;
  margin: 0 20px 2.5em 0;
}
#clients.block {
  width: 460px;
}
#get-in-touch.block {
  float: right;
  margin: 0;
  width:250px;
}
#footer h2,
#footer h3 {
  margin: 0 0 1em;
  font-size: 1.2em;
  color: #7f8185;
  opacity: .99;
}
#footer h3 {
  margin: 0 0 .1em;
}
#footer p {
  clear: both;
  font-size: 1.2em;
  opacity: .99;
}
#footer a {
  color: #fff;
}
#footer a:hover {
  color: #939393;
}
#footer ul {
  font-size: 1em;
  opacity: .99;
}
#clients li {
  float: left;
  width: 230px;
  font-size: 1.3em;
  line-height: 1.4;
}
#clients li.last {
  width: 160px;
}
/*
#delicious p.meta,
#delicious p.meta a {
  color: #5b5c5e;
}
#delicious p.meta a:hover {
  color: #7f8185;
}
*/
#twitter_update_list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
#twitter_update_list li > a {
  font-size: 12px !important;
  color: #7F8185;
}
address.vcard {
  font-style: normal;
}
.vcard .adr,
.vcard .org,
.vcard .email,
.vcard .note {
  position:absolute;
  left: -9999em;
}
.vcard .tel {
  display: block;
  border: 1px #505050 dashed; 
  margin: 0 0 .8em 0;
  padding: .6em .6em .6em 50px;
  background: #383838 url(/inc/img/ui/phone.gif) 16px 95% no-repeat;
  font-size: 1.3em;
  color: #fff;
}
#get-in-touch a {
  color: #b8b5b5;
}
#get-in-touch a:hover {
  color: inherit;
}
#copyright,
#copyright a {
  color: #5b5c5e;
}
#copyright a:hover {
  color: #7f8185;
}

/* =[4.5] Utilities
--------------------------------- */

#utilities { 
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
}
#utilities h2  {
  position: absolute;
  left: -9999em;
}
#utilities .inner {
  text-align: right;
  padding: 0;
}
#utilities p { 
  clear: none;
  float: right;
  margin: 0 0 0 1em; 
  padding: 0;
  font-size: 1.2em;
  line-height: 1.8;
  font-weight: bold;
  opacity: 1;
  color: #2D2D2D;
} 
#utilities #phone { 
  padding: 0 1em 0 30px;
  border-right: 1px #c1c1c1 solid;
  background: url(/inc/img/ui/phone.gif) left 15% no-repeat;
} 
#utilities span { 
  position: absolute;
  left: -999em;
} 
#utilities a { 
  font-weight: bold;
  color:#30A6C8;
}
#utilities a:hover { 
  color:#646464;
}
/* ------------------------------------------------------------------------------- */
/*  =[5] GLOBAL CLASSES */
/* ------------------------------------------------------------------------------- */

/* =[5.1] Misc
--------------------------------- */

.first{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}  
.figure .caption {
  font-size: 1.1em;
  text-align: right;
  color: #999;
  margin: 0 0 1em 0;
  padding: 1em 0;
  border-bottom: 1px #d4d4d4 dashed;
}
.figure .caption em {
  font-style: normal;
}
p.footnote {
  font-size: 1.2em;
}
p.footnote,
p.footnote a  {
  color:#989898;
}
p.footnote a:hover {
  color:#444;
}
.meta {
  color: #8d8d8d;
}
ul.meta a {
  font-weight: bold;
  color: #749b20;
}


/* =[5.2] Teasers
--------------------------------- */

ul.teasers {
  font-size: 1em;
  overflow: hidden;
}
.teasers li {
  float: left;
  margin: 0 19px 19px 0;
  border: 1px #cbcbcc solid;
  border-bottom: 0;
  padding: 14px 14px 0px 14px;
  width: 284px;
}
.teasers li.last {
  margin-right: 0;
}
.teasers li h2  {
  margin: -15px -15px 12px -15px;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size: 1.8em;
  line-height: 1;
  letter-spacing: -0.01em;
  overflow: hidden;
  opacity: .99;
}
.teasers li h2 a {
  display: block;
  padding: 11px 15px 11px 15px;
  border: 0;
  color: #fff;
  background: #2d2d2d;
  font-weight: bold;
}


/* =[5.3] Articles
--------------------------------- */

.article {
  float: left;
  margin: 0 40px 0 0;
  width: 300px;
}
.article ul {
  font-size: 1em;
  line-height:1.3;
  list-style: disc;
  margin:0 0 1.9em 1em;
  padding:0 0 0 0.5em;
} 
.article li {
  font-size: 1.4em;
  line-height:1.3;
  margin: 0;
} 

/* =[5.4] Nav & Asides
--------------------------------- */

.nav {
  float: right;
}
.nav ul,
.aside ul,
.article .nav ul,
.article .nav ul li,
.article .aside ul,
.article .aside ul li {
  font-size: 1em;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.article .aside ul {
  margin-bottom: 1.2em;
}
.aside {
  overflow: hidden;
  margin: 0 0 1.6em 0;
  padding: 1.2em 0;
  border-top: 1px #d4d4d4 dashed;
  border-bottom: 1px #d4d4d4 dashed;
  font-size: 1.1em;
  font-weight: bold;
}
.aside ul li p {
  font-size: 1.2em;
  line-height: 1.4;
}
.aside h2,
.nav h2 {
  margin: 1.4em 0 2em 0;
}
.aside h3,
.nav h3 {
  margin: 0 0 .4em 0;
}
.nav ul li a {
  float: left;
  padding: .1em .3em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  background:#30A6C8;
  -webkit-transition: background-color .4s linear;
  -moz-transition: background-color .4s linear;
}
.nav ul li a:hover {
  background: #646464;
}

/* =[5.5] Pagination
--------------------------------- */

.pagination {
  position: absolute;
  top: 60px;
  right: 29px;
  text-align: right;
}
.pagination h2 {
  position: absolute;
  left: -9999em;
}
.article .pagination ul li {
  display: inline;
}
.pagination a,
.pagination li span {
  float: left;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  background: #d0d0d0;
}
.pagination a:hover {
  background: #646464;
}
.pagination li span {
  color: #f7f7f7;
  background: #ddd;
}


/* ------------------------------------------------------------------------------- */
/*  =[6] LOCALISED */
/* ------------------------------------------------------------------------------- */

/* =[6.1] Home
--------------------------------- */

#home #content .inner {
  background: none;
  border: 0;
  padding: 0;
  width: 980px;
  position: relative;
}
#hero {
  margin: 0 0 20px 0;
  padding: 34px 59px 0 30px;
  height: 262px;
  position: relative;
  overflow: hidden;
  width: 891px;;
  background: #32a9cc url(/inc/img/ui/hero.jpg) left top no-repeat;
}
#hero h1 {
  float: left;
  width: 412px;
  height: 261px;
  margin: 0;
  position: relative;
  left: 0;
  top: 0;
  font-size: 4.3em;
  color: #fff;
  background: url(/inc/img/ui/hero_h1.png) left top no-repeat;
  text-indent: -999em;
}
#hero h1 em {
  font-style: normal;
}
#hero p {
  float: right;
  width: 340px;
  color: #fff;
  opacity: .99;
  margin: 0.6em 0 .0em;
}
.notice {
  margin: -20px 0 20px;
  padding: 12px 16px;
  background: #fff;
  border: 1px #CBCBCC solid;
  border-top: 0;
  text-align: right;
}
.notice p {
  float: left;
}
.notice .more {
  font-size: 1.4em;
}
body#home .nav {
  width: 340px;
  padding-top: 1.9em;
}
body#home .nav li {
  float: left;
  margin: 0 1em 0 0;
}
body#home .nav ul li a {
  color: #30A6C8;
  background:#fff;
  -webkit-transition: color .4s linear;
  -moz-transition: color .4s linear;
}
body#home .nav ul li a:hover {
  color: #646464;
  background:#fff;
}
body#home .nav h2 {
  position: absolute;
  left: -9999em;
}
body#home .teasers {
  background: url(/inc/img/ui/home_teasers.png) left bottom no-repeat;
}
body#home .teasers li#about {
  padding-bottom: 115px;
}
.teasers li ul {
  overflow: hidden;
  font-size: 1em;
}
.teasers li li {
  border: 0;
  margin: 0;
  padding: 0;
  float: left;
  width: 141px;
  font-size: 1.2em;
  line-height: 1.5;
}
body#home .teasers li div {
  float: left;
  width: 142px;
}
body#home .teasers li div h3 {
  margin: 0;
  color: #989898;  
}
.teasers li p.footnote {
  clear: both;
  font-size: 1.3em;
  color: #bfbfbf;
  margin: 0;
}
.teasers li#services p strong {
  font-weight: normal;
}
.teasers li#services p strong:after {
  content: "*";
}
.teasers li#services p.footnote:after {
  content: "";
}
.teasers li#services p.footnote:before {
  content: "*";
  padding-right: .3em;
}


/* =[6.2] About
--------------------------------- */

body#about .article {
  width: 920px;
  margin: 0px 0 0 0;
  padding: 0;
}
body#about.js  .article {
  height: 372px;
  overflow: hidden;
}
body#about .article h1 {
  width: 980px;
}
body#about .article ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px #dadadb solid;
  width: 918px;
  font-size: 1em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius-topleft:3px;
  -moz-border-radius-topright:3px;
}
body#about.js  .article ul {
  border-bottom: none;
  overflow: hidden;
  height: 236px;
}
body#about .article ul li.section {
  margin: 0 0 10px 0;
  padding: 24px 29px 0;
  width: 860px;
  overflow: hidden;
  font-size: 1em;
  background: #fff;
}
body#about.js  .article ul li.section {
  float: left;
  margin: 0 0 100px 0;
  padding: 24px 29px;
  height: 188px;
}
body#about .article img {
  float: right;
  margin: -24px -29px 0 0;
  border: 0;
}
body#about .article h2 {
  margin: 0 0 0.6em 0;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size: 2.2em;
  color:#2D2D2D; 
}
body#about .article .nav {
  display: none; /* not required as content is inline if JS isn't enabled */
}
body#about.js  .article .nav {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
  border: none;
  width: 920px;
  background: #eaeaeb;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
}
body#about.js  .article .nav {
  overflow: hidden;
  height: 65px;
}
body#about .article .nav h2 {
  position: absolute;
  left: -999em;
}
body#about .article .nav ul {
  height: 65px;
  border: none;
  background: url(/inc/img/ui/tabs_nav.png) left top repeat-x;
}
body#about .article .nav ul li {
  clear: none;
  float: left;
  margin: 0;
  height: 65px;
  padding: 0 1px 0 0;
  background: url(/inc/img/ui/tabs_divider.png) right top no-repeat;
}
body#about .article .nav ul li a {
  clear: none;
  float: left;
  height: 39px;
  padding: 26px 24px 0 24px;
  text-align: center;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  font-size: 1.2em;
  color: #333;
  background: url(/inc/img/ui/tabs.png) right top no-repeat;
  -webkit-transition: none;
  -moz-transition: none;
}
body#about .article .nav ul li a:hover {
  background: url(/inc/img/ui/tabs.png) right -130px no-repeat;
}
body#about .article .nav ul li.selected {
  padding-right: 5px;
  background: url(/inc/img/ui/tabs_divider_selected.png) right top no-repeat;
}
body#about .article .nav ul li.selected.first {
  border-left: 1px #dadadb solid;
}
body#about .article .nav ul li.selected span {
  float: left;
  padding-left: 5px;
  background: url(/inc/img/ui/tabs_divider_selected.png) left top no-repeat;
}
body#about .article .nav ul li.first span {
  float: left;
  padding-left: 0;
  background: none;
}
body#about .article .nav ul li.selected.first span a {
  padding-left:23px;
}
body#about .article .nav ul li.selected a {
  height:38px;
  border-bottom: 1px #dadadb solid;
  padding-left: 19px;
  padding-right: 20px;
  color: #249dc0;
  background: #fff url(/inc/img/ui/tabs_shade.png) center top no-repeat;
}
body#about .article .nav ul li.first a {
  padding-left: 24px;
  border-bottom-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-bottomleft: 3px;
}
body#about .aside {
  margin: 0;
  padding-bottom: 0;
  border: 0;
  font-size: 1em;
  font-weight: normal;
  overflow: hidden;
}
body#about .aside.profile {
  float: left;
  width: 609px;
}
/*
body#about .aside.profile  {
  float:left;
  width:244px;
  overflow: hidden;
  margin: 0 20px 2em 0;
  padding: 0 20px;
}
*/
body#about .profile #stu {
  padding-left: 100px;
  padding-right: 100px;
  background: url(/inc/img/ui/mugshots.png) left top no-repeat;
}
body#about .profile .links li {
  display: inline-block;
  margin: 0 8px 0 0;
}
body#about .profile a {
  float: left;
  padding: .0em .3em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  background: #d0d0d0;
  -webkit-transition: background-color  .4s linear;
  -moz-transition: background-color  .4s linear;
}
body#about .profile a:hover {
  background: #646464;
}
body#about .aside.cta {
  float: right;
  width:264px;
  border: 1px #aaa dashed; 
  margin: 54px 0 .8em 0;
  padding: 0 1.8em .8em;
  background: #eee;
}
body#about .cta h2 {
  color:#2D2D2D; 
  font-size: 1.4em;
  margin: 1em 0 0.6em 0;
}

/* =[6.3] Services
--------------------------------- */

body#services .directory h1 {
  width: 550px;
}
body#services #content .block {
  float: left;
  width: 350px;
  position: relative;
}
body#services #content .block h2 {
  position: absolute;
  left: 0;
  top: -3px;
  width: 34px;
  height: 80%;
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif; 
  text-indent: -999em;
  background: #cfcfcf url(/inc/img/ui/services_headings.png) 0 13px no-repeat;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
body#services #content #development.block h2 {
  background-position: -34px 13px;
}
body#services #content .block ul {
  clear: both;
  font-size: 1em;
}
body#services #content .block ul {
  padding: 0 40px 3px 0;
  background: url(/inc/img/ui/services_bar_bottom.gif) left bottom no-repeat;
}
body#services #content .block ul li {
  margin: 0;
  padding: 0 0 1.2em 24px;
  border-left: 34px #cfcfcf solid;
}
body#services #content .block ul li h3 {
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-weight: bold;
  font-size: 2.2em;
  line-height: 1.2;
  margin: 0 0 .4em 0;
}
body#services #content .block ul li h3 a {
  font-weight: bold;
  color:#2D2D2D;
}
body#services .detail img {
  float: none;
  border: 0px #cbcbcc solid;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  margin: 0 0 0px 0;
}
body#services .detail .article {
  float: left;
  margin: 0 40px 0 0;
  padding-top: 1.4em;
  width: 335px;
}
body#services .detail .figure .caption {
  float: right;
  width: 300px;
  margin: 0 0 1.4em 0;
  padding: 1.4em 0;
  text-align: left;
}
body#services .nav {
  width: 213px;
  border-top: 1px #d4d4d4 dashed;
  border-bottom: 1px #d4d4d4 dashed;
  padding-bottom: 1em;
}
body#services .nav h2 {
  margin-bottom: 1.2em;
}
body#services .detail .aside {
  padding-top: 0;
  border-top: 0;
}
body#services .detail .nav {
  margin: -1.4em 0 0 0;
  border-top: 0;
}
body#services .detail .nav h2 {
  position: absolute;
  left: -999em;
}
body#services .detail .nav h3 {
  border-top: 1px #d4d4d4 dashed;
  margin:1.4em 0 1.2em 0;
  padding-top: 1.2em;
  color:#989898;
}
body#services .nav ul li {
  clear: both;
  overflow: hidden;
  margin: 0 0 .8em 0;
}
body#services .detail .nav ul li {
  margin:0;
  font-size: 1.2em;
}
body#services .detail .nav a {
  float: none;
  padding: 0;
  background: none;
  font-weight: normal;
  font-size: 1em;
  color: #30A6C8;
}
body#services .detail .nav li a:hover {
  color: #444;
}
body#services .detail li.selected a {
  color: #bababa;
}
body#services .detail .pagination {
  width:213px;
  font-size: 1em;
  text-align: right;
}
body#services .detail .pagination li {
  clear: none;
  float: right;
  width: auto;
  margin: 0 0 0 1em;
}
body#services .detail .pagination li a {
  background: #d0d0d0;
}
body#services .detail .pagination li a:hover {
  background: #646464;
}
body#services .detail .aside {
  float: right;
  width: 300px;
}
body#services .detail .aside h2 {
  margin: 0 0 1.4em 0;
  font-size: 1.1em;
}
body#services .detail .aside li {
  float: left;
  width: 150px;
  margin: 0 0 1em 0;
}
body#services .detail .aside li a {
  float: left;
  line-height: 1.1;
  padding: .2em .3em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  font-weight: bold;
  color: #fff;
  background: #959595;
}
body#services .detail .aside a:hover {
  background: #646464;
}

/* =[6.4] Work
--------------------------------- */

body#work .teasers {
  padding: 30px 0 .5em 0;
  border-top: 1px #d4d4d4 dashed;
  border-bottom: 1px #d4d4d4 dashed;
}
body#work .teasers li {
  position: relative;
  margin:0 30px 24px 0;
  padding: 0;
  border: 0;
}
body#work .teasers li.last {
  margin-right :0;
}
body#work .teasers li h2 {
  margin: 0;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 292px;
}
body#work .teasers li h2 a {
  background: #32add0;
}
body#work .teasers li a img {
  margin: 0;
}
body#work .detail img {
  float: right;
  margin: 0 0 2em 0;
  border: 1px #D4D4D4 solid;
}
body#work .detail h1 {
  position: relative;
  top: 0;
  left: 0;
  width: 350px;
}
body#work .article {
  margin: 0px 0 0 0;
  padding-top: 0;
  width: 350px;
  position: relative;
}
body#work .article dl.meta {
  overflow: hidden;
  margin: 0 0 1.6em 0;
  padding: 1.2em 120px 1.2em 0;
  border-top: 1px #d4d4d4 dashed;
  border-bottom: 1px #d4d4d4 dashed;
  width: 230px;
  font-size: 1.1em;
  font-weight: bold;
}
body#work .article dl.meta dt {
  color: #b3b2b2;
  padding-right: .4em;
}
body#work .article p {
  width: 300px;
}
body#work .aside ul {
  font-size: 1.1em;
}
body#work .aside h2 {
  position: absolute;
  left: -9999em;
}
body#work .aside {
  margin-top: 2em;
  padding-bottom: 0;
}
body#work .nav {
  padding-top: 1.9em;
}
body#work .nav h2 {
  position: absolute;
  left: -9999em;
}
body#work .article .nav {
  float: none;
  padding-top: 0;
}
body#work .article .nav h2 {
  position: relative;
  left: 0;
  margin-top: 0;
}
body#work .nav li {
  float: right;
  margin: 0 0 0 1em;
}
body#work .article .nav li {
  float: left;
  width: 150px;
  margin: 0 0 1em 0;
}
body#work .article .nav li.selected a {
  background: #30A6C8;
}
body#work .nav a {
  color: #fff;
  background: #959595;
}
body#work .nav a:hover {
  background: #646464;
}
body#work .article .nav .pagination {
  top: 14px;
  left: 232px;
  width: 120px;
  text-align: right;
}
body#work .article .nav .pagination li {
  float: right;
  width: auto;
  margin: 0 0 0 1em;
}
body#work .article .nav .pagination li a {
  background: #d0d0d0;
}
body#work .article .nav .pagination li a:hover {
  background: #646464;
}

/* =[6.5] Contact
--------------------------------- */

body#contact h1 { 
  width:920px;
}
body#contact #primary { 
  border-top: 1px #d4d4d4 dashed;
}
body#contact #primary .block {
  float: left;
  width: 337px;
}
body#contact #primary h2 {
  font-size: 2.2em;
  margin: .6em 0 .3em 0;
  color: #2d2d2d;
}
body#contact #primary .block p {
  font-size: 3em;
  font-weight: bold;
  color: #979797;
}
body#contact #primary p a {
  font-weight: bold;
  color: #979797;
}
body#contact #form.block { 
  width: 675px;
  border-top: 1px #d4d4d4 dashed;
  overflow: hidden;
}
#form form { 
  width: 675px;
  overflow: hidden;
  padding-bottom: 2em;
  border-bottom: 1px #d4d4d4 dashed;
}
fieldset {
  float: left;
  width: 327px;
}
fieldset#message {
  float: right;
  overflow: hidden;
}
/* extra fieldset */
fieldset#message label.zemTextarea {
  position: absolute;
  left: -999em;
}
input, textarea {
  border: none;
  outline :none;
  font-family: Arial, "Helvetica Neue", "Bitstream Vera Sans", Helvetica, sans-serif; 
  font-size: 1.2em;
  background-color: #f2f2f2;
}
label {
  display: block;
  margin: 8px 0 4px 0;
  padding: 8px 0 0 0;
  font-weight: bold;
  font-size: 1.2em;
  color: #989898;
}
label:hover {
  cursor: pointer;
}
form #details input,
form #message textarea {
  border: none;
  margin: 0;
  color: #636363;
}
form #details input {
  outline:none;
  border: none;
  background-image:url(/inc/img/ui/contact_form.gif);
  background-position: -10px -1084px;
  background-repeat:no-repeat;
  padding: 6px 10px 0 8px;
  width: 309px;
  height: 20px;
}
form #details input:focus {
  background-position: -10px -1129px;
}
/* textarea */
#message div {
   margin: 0;
  padding: 0;
  background-image:url(/inc/img/ui/contact_form.gif);
}
#message .top {
  width:327px;
  height: 4px;
  background-position: -10px -1346px;
}
#message .focused div.top {
  background-position: -10px -1268px;
}
#message .left {
float: left;
  width: 4px;
  height: 144px;
  background-position: -10px -437px;
}
#message .focused div.left{
  background-position: -10px -681px;
}
#message textarea {
  resize: none;
  float: left;
  width: 317px;
  height: 142px;
  padding: 2px 0px 0 2px;
}
#message .right {
float: right;
  width: 4px;
  height: 144px;
  background-position: -678px -609px;
}
#message .focused div.right{
  background-position: -678px -681px;
}
#message .bottom {
  float: left;
  width:327px;
  height: 4px;
  background-position: -10px -1494px;
}
#message .focused div.bottom {
  background-position: -10px -1366px;
}
/* submit */
fieldset#send {
  clear: both;
  width: 675px;
  padding: 1.5em 0 0 0;
}
fieldset#send input {
  float: right;
  margin: 0;
  padding: .5em .7em;
  font-size: 1.4em;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  color: #fff;
  background: #30a6c8;
}
.zemError li {
  margin: .6em 0;
  font-weight: bold;
  color: #30A6C8;
}
#primary .response {
  font-size: 1.4em;
  font-weight: normal;
  color: #979797;
  display: block;
  border: 1px #aaa dashed; 
  margin: 1.8em 0 .8em 0;
  padding: .8em .8em;
  background: #eee;
}
#secondary { 
  float: right;
  width: 213px;
  padding: 1.6em 0;
  border-top: 1px #d4d4d4 dashed;
  border-bottom: 1px #d4d4d4 dashed;
  overflow: hidden;
}
#secondary address span { 
  display: block;
  font-style: normal;
  font-size: 1.4em;
  line-height: 1.3;
}
#secondary h2 { 
  color: #989898;
  font-size: 1.2em;
  margin: 0 0 .9em;
}
#secondary img {
  border: 1px #ababab solid;
  margin: 1em 0;
}
#secondary p {
  font-size: 1.1em;
  margin: .9em 0 .3em 0;
  color:#989898;
}
#secondary div {
  text-align: right;
}
body#contact .nav  {
  padding-top: 1.9em;
}
body#contact .nav h2 {
  position: absolute;
  left: -9999em;
}
body#contact .nav li {
  float:right;
  margin:0 0 0 1em;
}
body#contact .nav a {
  color: #fff;
  background: #959595;
  line-height: 1.5;
}
body#contact .nav a:hover {
  background: #646464;
}
#mothership {
  position: absolute;
  right: 29px;
  top: 23px;
  width: 213px;  
  height: 57px;
  text-indent: -999em;
  background: url(/inc/img/ui/block.png) left top no-repeat;
}
#mothership a {
  position: absolute;
  right: 0;
  top: 15px;
  width: 213px;  
  height: 57px;
}