/*

blockinteractive.co.uk by Stuart Charlton
VERSION 2.2
-------------------

CONTENTS ----------

1.RESET
2.DEFAULT STYLES
3.LAYOUT
4.PAGE FURNITURE
  4.1 Skiplinks
  4.2 Branding
  4.3 Themes
  4.4 Menu
  4.5 Footer
5.GLOBAL CLASSES
  5.1 General
  5.2 Blocks
  5.3 Tabbed headings
  5.4 Asides
  5.5 hReview
  5.6 jQuery pagination
  5.7 Cufon
6.PAGE TYPES
  6.1 Article pages
7.GLOBAL MODULES
  7.1 About.block 
  7.2 Process.block 
  7.3 Blog.block 
  7.4 Projects.block 
8.LOCALISED
  8.1 Home page
  8.2 Projects section
  8.3 About section
  8.4 Process section
  8.5 Blog section
  8.6 Contact section


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

COLOURS ----------

BGND #ebebeb;
BODY GREY #939393; 
LINK GREY #646464
GRAPHITE #303030
GREEN #95a219
GREEN highlight #afb94d
ORANGE #d35117
ORANGE highlight #e1794a

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

*/

/* ------------------------------------------------------------------------------- */
/*  =[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 */
/* ------------------------------------------------------------------------------- */


html {
  padding: 0 0 30px 0;
  background: #d4d4d4;
}
body {	
  font-family: Arial, "Helvetica Neue", "Bitstream Vera Sans", Helvetica, sans-serif; 
  font-size : 62.5%; 
  line-height: 1.4;
  color: #bbb;
  background: #ebebeb;
  border-top: 41px #D4D4D4 solid;
}
img {
  border: 0px;
  float: left;
  margin: .3em .6em .6em 0;
}
p {
  clear: none;
  font-size: 1.2em;
  line-height: 1.5;
  margin: 0 0 1.2em 0;
  padding: 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;
}

a,
a:link 
a:visited,
a:focus,
a:active {
  text-decoration: none;
  font-weight: bold;
  color: #939393;
}
a:hover {
  color: #646464;
}
a.image,
a:hover.image { 
  border: 0; 
}
h1, h2, h3, h4, h5, h6 {
  margin: 2.4em 0 .8em 0;
}
h1 {
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-size: 3.3em;
  margin: .6em 0 .5em 0;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
h2 {
  font-size: 1.2em;
  color: #7f7f7f;  
}
h3 {
  font-size: 1.4em;
}
h4 {
  font-size: 1.3em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 1.2em;
  font-weight: normal;
}
ul, ol, dl {
  font-size: 1.2em;
  margin: 0 0 1.2em 0;
  padding: 0;
}
ol {
  margin-left: 20px;
  padding-left: 20px;
  list-style: decimal;
}
ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
dt,
dd {
  margin: 0;
  padding: 0;
}
dt{
  float: left;
  clear: both;
}
dd{
  clear: none;
}
table {
  margin: 1.2em 0 2.4em 0;
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: #265464;
  border-collapse:collapse; /* can't apply cellpadding & cellspacing in textiled tables */
}
th, td {
  margin: 0;
  padding: 4px 10px;
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: #265464;
  background: #265464;
  font-size: 1.1em;
  text-align: left;
}
th {
  background: #A8A8A8;
  color: #265464;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: normal; 
  text-align: left;
}
form fieldset {
  border: 0; 
  margin: 0; 
  padding: 0;
}
input, textarea {
  border: 1px #ccc solid;
  margin: .6em 0 0 0;
  padding: 4px;
  font-family: Arial, "Helvetica Neue", "Bitstream Vera Sans", Helvetica, sans-serif; 
  font-size: 1.2em;
  background: #f3f3ff;
}
label {
  clear: both;
  float: left;
  margin: .6em 0 0 0;
  padding: 0;
  width: 100px;
  font-weight: bold;
  font-size: 1.2em;
}
label:hover {
  cursor: pointer;
}

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

#wrapper {
  position: relative;
  margin: 0px auto;
  width:  880px; 
  overflow: visible;
}
#content { 
  width:  880px;
  margin: 9px 0 0 0;
  background: url("/inc/img/ui/content.gif") right top repeat-y;
  overflow: hidden;
}
#primary { 
  clear: both;
  position: relative;
  float: right;
  width: 584px;
  padding: 0 25px 25px;
/*  background-color: #303030; */
  overflow: hidden;
}
#secondary { 
  width: 226px;
  overflow: hidden;
}
#footer { 
  margin: 30px 0 0 0;
  padding: 20px 0 0 0;
  background: #d4d4d4;
  overflow: hidden;
}
#footer .inner { 
  clear: both;
  width:  880px; 
  position: relative;
  margin: 0px auto;
  overflow: hidden;
  background: url(/inc/img/ui/footer.gif) left top repeat-y;
}

/* ------------------------------------------------------------------------------- */
/*  =[4] PAGE FURNITURE */
/* ------------------------------------------------------------------------------- */

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

#skiplinks {
  position:absolute;
  left:0px;
  top:-500px;
  width:1px;
  height:1px;
  overflow:hidden;
}

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

#branding {
  position: relative;
  width: 880px;
  height: 41px;
  padding: 21px 0 9px;
  background: none;
  background: url("/inc/img/ui/block.png") 0 20px no-repeat;
}
#logo {
  text-indent: -9999em;
  width: 484px;
  height: 218px;
  border: 0;
  position: absolute;
  left: 400px;
  top: -100px;
  margin: 0;
  z-index: 1;
  background-position: right 59px;
  background-repeat: no-repeat; 
}
#branding dd {
  float: right;
  color: #969696;
  background: #fff;
  width: 634px;
  height: 41px;
  margin: 0px 0 0px 0;
  overflow: hidden;
  font-family: Georgia, "Times New Roman", Times, serif; 
  font-weight: bold;
  font-size: 21px;
  line-height: 36px;
  text-indent: 18px; 
  color: #969696;
}
#branding dd strong {
  color: #303030;
}
button{
  position: absolute;
  right: 20px;
  top: 34px;
  width: 66px;
  height: 22px;
  background: url("/inc/img/ui/more_taglines_small.png") 0 0 no-repeat;
  border: 0;
  text-indent: -999em;
}
button:hover{
  cursor: pointer;
}
/* Gecko */
button:focus,
button:active{
  outline: none;
}
/* Moz */
button::-moz-focus-inner {
  border: none;
}

/* =[4.3] Themes
--------------------------------- */

body#home {	
  background: #ebebeb url(/inc/img/ui/body_birds.png) center top no-repeat;
}
body#home #logo {
  background-image: url(/inc/img/ui/theme_baloon.png);
}
body#about{	
  background: #ebebeb url(/inc/img/ui/body_towers.png) center top no-repeat;
}
body#about  #logo {
  background: url(/inc/img/ui/theme_tv.png) right 47px no-repeat;
}
body#process #logo {
  background-image: url(/inc/img/ui/theme_parp.png);
}
body#process {	
  background: #ebebeb url(/inc/img/ui/body_japanese.png) center top no-repeat;
}
body#blog #logo {
  background-image: url(/inc/img/ui/theme_speaker.png);
}
body#blog {	
  background: #ebebeb url(/inc/img/ui/body_bob.png) center top no-repeat;
}
body#contact  #logo {
  background-image: url(/inc/img/ui/theme_trees.png);
}
body#contact {	
  background: #ebebeb url(/inc/img/ui/body_spaceman.png) center top no-repeat;
}
/* see also: 8.2 Projects */


/* =[4.4] Menu
--------------------------------- */

#menu { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 41px;
}
#menu h2  {
  position: absolute;
  left: -9999em;
}
#menu ul {
  margin:0 auto;
  overflow:hidden;
  position:relative;
  width:880px;
  height: 41px;
  font-size: 1em;
  z-index: 9999;
}
#menu li { 
  float: left;
  height: 41px;
  margin: 0 .4em 0 0; 
  padding: 6px 0 0 0;
  line-height: 3.0;
} 
#menu li a { 
  float: left;
  height: 35px;
  font-size: 1.2em;
  padding: 0 1.7em;
  color: #7b7b7b;
  background: #e0e0e0 url(/inc/img/ui/menu_tab.gif) left bottom repeat-x;
} 
#menu li a:hover {
  color: #95a219;
}
#menu li.selected a {
  color: #95a219;
  background: #ebebeb;
}

#menu li#projects_bt { 
  padding-top: 0;
  height: 41px;
  margin-left: -.2em;
  width: 88px;
}
#menu li#projects_bt a { 
  padding-top: 6px;
  width: 88px;
  background: url(/inc/img/ui/menu_projects.png) left 3px no-repeat;
  color: #ccc;
} 
#menu li#projects_bt a:hover { 
  color:#fff;
} 
body#projects #menu li#projects_bt a { 
  padding-top: 6px;
  background: url(/inc/img/ui/menu_projects.png) left -44px no-repeat;
  color: #fff;
} 

/* =[4.5] Footer
--------------------------------- */

#footer,
#footer a {
  color: #a5a5a5;
}
#footer a {
  color: #979797;
}
#footer a:hover {
  color: #777;
}

#footer .block {
  width: 250px;
  padding: 0 20px;
}
#footer .vcard.block {
  padding-right: 0;
}
#footer .block .column {
  float: left;
  width: 110px;
  padding: 0 10px 0 0;
}

#footer .block h2 {
  overflow: hidden;
  margin: 0 0 1.2em 0 ;
  padding: 0;
  font-size: 1.2em;
  color: #5e5e5e;
  opacity: 1;
}
#footer .block ul {
  margin: 0;
  padding: 0;
  font-size: 1.2em;
}
#footer #delicious.block div {
  margin: 0 0 1em 0;
  padding: 3px 5px;
  background: #fff;
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
}
#footer #delicious.block div h3,
#footer #delicious.block div p {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.35;
}
#footer #delicious.block div h3 a {
  color: #95a219;
}
#footer #delicious.block div h3 a:hover {
  color: #777;
}
#footer #delicious.block p.meta {
  margin: 0;
  line-height: 1.35;
  color: #969696;
}
address {
  font-size: 1.2em;
  font-style: normal;
}
#footer .block.vcard p {
  margin: 0;
}
#footer .vcard .org {
  position: absolute;
  left: -9999em;
}
#footer .vcard .tel,
#footer .vcard .email,
#footer .vcard .group {
  display: block;
}
#footer p#copyright {
  clear: both;
  width:  880px; 
  position: relative;
  margin: 0px auto;
  padding-top: 20px;
  color: #b2b2b2;
}
/* ------------------------------------------------------------------------------- */
/*  =[5] GLOBAL CLASSES */
/* ------------------------------------------------------------------------------- */

/* =[5.1] General
--------------------------------- */

.first{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}  
.list_head {
  position:absolute;
  left:0px;
  top:-500px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.meta {
  color: #919191;
}
ul.meta a {
  font-weight: bold;
  color: #749b20;
}
a.image,
a.image:hover {
  border: none;
}
.alert {
  padding: 10px 31px;
  background: #414141;
}

/* =[5.2] Blocks
--------------------------------- */

.block {
  position: relative;
  float: left;
}
.block .inner  {
  margin: 0;
  padding: 10px 12px 14px 12px;
  background: #d9d9d9;
  border-top: 1px #cecece solid; 
  border-bottom: 1px #cecece solid; 
  color: #5e5e5e;
  font-size: 1em;
  overflow: hidden;
}
.block .inner li  {
  margin: .9em 0 0 0;
  padding: .9em 0 0 0;
  background: #d9d9d9;
  border-top: 1px #cecece solid; 
}
.block .inner li.first  {
  margin: 0;
  padding: 0;
  border-top: none; 
}
.block .inner h3 {
  clear: both;
  margin: 0 0 0.7em;
  font-size:1.2em;
  line-height: 1.35;
}
.block .inner h3 a {
  color: #303030;
}
.block .inner h3 a:hover {
  color: #939393;
}
.block .inner p {
  font-size: 1.2em;
  line-height: 1.35;
  margin: 0;
}
.block .inner p .continue {
  color: #d35117;
}
.block .inner p a:hover.continue {
  color: #939393;
}
/* generic article navigation list */
.block ul.nav {
  clear: both;
  margin: 2.4em 0 0 0;
  background: #d9d9d9;
  border-bottom: 1px #d2d2d2 solid; 
  font-size: 1em;
  font-weight: bold;
}
.block .nav li {
  margin: 0;
  padding: 0;
}
.block .nav li a {
  border: 0;
  border-top: 1px #d2d2d2 solid; 
  display: block;
  color: #303030;
  font-weight: bold;
  font-size: 1.2em;
  padding: 6px 10px;
}
.block .nav li a:hover {
  background: #d7d7d7;
}
.block .nav li span {
  float: right;
  color: #939393;
}
.block img {
  margin: 0;
}
#secondary .block { 
  overflow:hidden;
  margin: 0 0 20px 0;
  width:226px;
}

/* =[5.3] Tabbed headings
--------------------------------- */

.block h2  {
  margin: 0;
  line-height: 1;
  overflow: hidden;
  opacity: .99;
  letter-spacing: 0.03em;
}
.block .inner h2  {
  margin: -10px -12px 12px -12px;
}
.block h2 a {
  float: left;
  padding: .7em 2.1em .6em 1.0em;
  color: #fff;
  border: 0;
  opacity: .99;
  font-weight: normal;
  background: #303030;
}
.block h2 a.slug {
  margin: 0em 0 -0.7em 0em;
  padding: .7em 4em .6em 1.0em;
  background: #d35117 url("/inc/img/ui/bt-arrow_right.png") 90% .5em no-repeat;
}
h2.tab {
  font-size:1.2em;
  line-height:1;
  margin:0;
  overflow: hidden;
}
h2.tab,
h2.tab a {
  height: 28px;
}
body.not_home #primary h2.tab {
  position: absolute;
  left: 0;
  top: 0;
  background: #D9D9D9;
  color:#939393;
  font-size:1.2em;
  font-weight: normal;
  line-height:1.1;
  margin:0;
  padding:0.7em 3em 0.7em 1.0em;
}

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

.aside {
  padding: 0.0em 0 0 0;
  border-top: 1px #4b4b4b solid;
}


/* =[5.5] hReview
--------------------------------- */

.hreview {
  margin: 0 0 1em;
  padding: 0;
  width: 268px;
  height:220px;
  position: relative;
  overflow: hidden;
  background: url("/inc/img/ui/blockquote.png") left top no-repeat;
}
.hreview .item {
  position: absolute;
  left: -999em;
}
.hreview blockquote {
  height: 127px;
  padding: 16px 22px 16px 30px;
}
.article #primary .column .hreview p {
  display: inline;
  margin: 0;
  font-size: 1.4em;
  line-height: 1.35;
  font-weight: normal;
  opacity: 1;
  color: #fff; 
}
.cufon-active .article #primary .column .hreview p {
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  font-size: 2em;
}
.hreview cite {
  display: block;
  padding: 12px 0 12px 30px;
  font-size: 1.1em;
  font-weight: bold;
  opacity: .99;
  color: #515151;
  background: url(/inc/img/ui/dude.png) 0px center no-repeat;
}


/* =[5.6] jQuery pagination
--------------------------------- */

.pagers {
  display: none;
}
body.js .pagers {
  display: block;
  position: absolute;
  right: 15px;
  top: 18px;
  z-index: 9999;
  font-size: 1em;
  overflow: hidden;
}
.pagers li {
  float: right;
  margin: 0 0 0 .8em;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  background: #4e4e4e;
  font-size: 1.1em;
}
.pagers li span {
  float: left;
  padding:1px 4px;
  color: #333;
  cursor: pointer;
}

.rgba .pagers li {
  background: rgba(255,255,255,.12);
}
.pagers li a {
  float: right;
  padding: 1px 4px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  color: #bbb;
  text-transform: capitalize;
}
.pagers a:hover {
  background: #fff;
  -webkit-transition: background-color .4s linear;
  -moz-transition: background-color .4s linear;
}
.rgba .pagers a:hover {
  background: rgba(255,255,255,.99);
}
.pagers .active a {
  background: #fff;
  color: #303030;
}
.rgba .pagers .active a {
  background: rgba(255,255,255,.99);
}

/* =[5.7] Cufon
--------------------------------- */

/* avoid FOUC */
.cufon-loading h1 {
  visibility: hidden !important;
}


/* ------------------------------------------------------------------------------- */
/*  =[6] PAGE TYPES */
/* ------------------------------------------------------------------------------- */

/* =[6.1] Article pages
--------------------------------- */

#summary strong {
  background: #444;
}
#summary em {
  font-style: normal;
  background: #d35117;
}
#primary .column {
  float: right;
  width: 280px;
}
#primary .column.first {
  float: left;
}
.article #primary .column a {
  color: #fff;
}
.article #primary .column a:hover {
  color: #ccc;
}
.article #primary .column ul li {
  margin: 0 0 1.3em 0;
  padding: 0 0 0 20px;
  background: url("/inc/img/ui/bullet_24.png") 0 .6em no-repeat;
}
.article #content .column h2,
.article #content .column h3,
.article #content .column h4,
.article #content .column h5,
.article #content .column h6,
.article #content .column p,
.article #content .column li,
.article #content .column blockquote {
  opacity: 0.99;
}
#primary .figure img {
  float: none;
  margin: 0 0 1em 0;
}
#primary .figure p.caption {
  text-align: right;
  font-size: 1.1em;
  margin: .2em 0 0 0;
}
.article #primary .column h2 {
  color: #fff;
  font-size: 1.4em;
}
.primary #content h3 {
  color: #7f7f7f;
  font-size: 1.2em;
  margin-top: 1.4em;
}
.article #primary .column h2:first-child,
.article #primary .column h3:first-child {
  margin-top: 0;
}
.article #primary .aside ul li a {
  color: #a6b32c;
}
.article #primary .aside h3 {
  margin: 0;
  padding: .9em 0;
  color: #fff;
  font-size: 1.2em;
}
.article #primary .aside ul {
  list-style: none;
  margin: 0;
  padding: 0 0 1.4em 0;
  background: none;
  border-bottom: 1px #4b4b4b solid;
}
.article #primary .aside ul li {
  margin: 0;
  padding: 0;
  background: none;
}


/* ------------------------------------------------------------------------------- */
/*  =[7] GLOBAL MODULES */
/* ------------------------------------------------------------------------------- */


/* =[7.4] About
--------------------------------- */

#about.block p {
  opacity: .99;
}
#about.block .inner {
  background: #414141;
  border: 0;
}
#about.block .inner p {
  font-size: 1.2em;
  color: #d7d7d7;
}
/* tighten it up in narrow left col */
body.not_home #about.block h2 a {
  padding-right: 1.2em;
}
body.not_home #about.block h2 a.slug {
  padding-right: 4em;
}


/* =[7.2] Process
--------------------------------- */

#process.block .inner {
  background: #fff;
  border: 0;
}
#process.block .inner p {
  font-size: 1.2em;
}
#process.block .inner p a {
  color: #9ca91b;
}
#process.block .inner p a:hover {
  color: #939393;
}
#process.block h2 .slug {
  background-color: #95a219;
}


/* =[7.3] Blog
--------------------------------- */

#blog.block .inner a.image {
  float: left;
  width: 202px;
  margin: 0 0 1.4em 0;
  overflow: hidden;
}
#blog.block h2 .slug  {
  background-color: #95a219;
}


/* =[7.4] Projects
--------------------------------- */

body.not_home #projects.block {
  width: 236px;
  height: 149px;
}
#projects.block .inner {
  padding:0;
  border: 0;
}
#projects.block .inner img {
  margin:0;
}
#projects.block h2 {
  margin: 0;
  z-index: 9999;
}
#projects.block h2 .slug  {
  background-color: #95a219;
}


/* ------------------------------------------------------------------------------- */
/*  =[8] LOCALISED */
/* ------------------------------------------------------------------------------- */


/* =[8.1] Home
--------------------------------- */

body#home #branding dd {
  position: absolute;
  left: -9999em;
}
body#home #content { 
  overflow: hidden;
  background: none;
}
#hero.block {
  float: left;
  margin: 0 0 20px 0;
  width: 430px;
  height: 488px;
}
#hero.block .inner {
  border: none;
  height: 438px;
  padding: 25px 22px 25px 28px;
  background: #fff url(/inc/img/ui/home_hero.png) left bottom no-repeat;
}
#hero.block h1 {
  color: #303030;
  font-size: 3.8em;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-top: 0;
}
.cufon-ready #hero.block h1 {
  word-spacing: -0.15em;
  line-height: 1;
}
#hero.block .inner p {
  font-weight: normal;
  font-size: 1.3em;
  line-height: 1.3;
  margin:0 0 .7em;
  width: 270px;
  color: #303030;
}
#hero.block .nav {
  position: absolute;
  right: 22px;
  top: 105px;
  width: 82px;
  background: transparent;
  padding: .5em 0 0  0;
  border-top:1px solid #dedede;
  border-bottom:1px solid #dedede;
}
.block .inner li {
  background: none;
  border: none;
  margin: 0 0 .4em 0;
  padding: 0 0;
}
#hero.block .nav a {
  display: inline;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 1.1em;
  color: #767f1e;
}
#hero.block .nav a:hover {
  color: #939393;
}
#hero.block .inner div {
  position: absolute;
  right: 22px;
  bottom: 0px;
  width: 201px;
  height: 144px;
  text-indent: -999em;
}
#hero.block .inner div a {
  position: absolute;
  text-indent: -999em;
  left: 101px;
  top: 49px;
  width: 51px;
  height: 14px;
}
#hero.block .inner div a:hover {
  background: rgba(255,255,255,.1);
}
#work.block {
  float: right;
}
.js #work.block {
  float: right;
  margin: 0 0 20px 0;
  width: 430px;
  height: 488px;
  position: relative;
  background: #303030;
}
#work.block .pagers h3 {
  font-size: 1em;
  margin: 0;
}
#case_studies {
  clear:both;
  position:relative;
  overflow:hidden;
  width: 430px;
  height: 488px;
  margin-bottom: 20px;
}
#case_studies .slides {
  position:relative;
  height:488px;
  width:430px;
  font-size: 1em;
}
#case_studies .slides li  {
  position:relative;
}
#case_studies .slides li,
#case_studies .slides li a.image,
#case_studies .slides li a.image img {
  width: 430px;
  height: 488px;
  float: left;
  margin-bottom: 0px;
}
#case_studies .caption {
  position: absolute;
  left: 30px;
  top: 370px;
  width: 370px;
  padding-top: 1.6em;
  border-top: 1px #555 solid;
}
.rgba #case_studies .caption {
  border-top: 1px rgba(255,255,255,.13) solid;
}
#case_studies .caption h3 {
  font-size: 1.2em;
  margin: 0 0 .8em 0;
}
#work.block .caption h3 a {
  color: #fff;
}
#case_studies .caption p {
  font-size: 1.2em;
  line-height: 1.35;
}
#work.block .caption a.continue {
  position: absolute;
  top: 1.5em;
  right: 0;
  font-size: 1.1em;
  color: #b3c041;
}
#work.block .caption a:hover {
  color: #939393;
}
body#home .group {
  float: left;
  overflow: hidden;
  width: 226px;
  margin-right: 20px;
}
body#home #blog.block {
  float: left;
  width: 580px;
  height: 178px;
  position: relative;
}
body#home #blog.block .inner {
  height: 111px;
  padding-right: 300px;
  border: 0;
  background: url(/inc/img/ui/home_blog_block.png) left top repeat-x; 
}
body#home #blog.block .inner a.image {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0;
  width: 297px; 
  height: 182px;
}
body#home #about.block {
  float: right;
  width: 282px;
}
body#home #about.block .inner {
  padding: 0;
}
body#home #footer {
  margin-top: 15px;
}


/* =[8.2] Projects section
--------------------------------- */

body#projects #branding dd {
  position: absolute;
  left: -9999em;
}
html.lightbox,
body#projects #footer {
  background: #2a2a2a;
}
body#projects {
  background: #303030 url(/inc/img/ui/body_sketch.png) center 41px no-repeat;
  border-color: #2a2a2a;
}
body#projects h1 {
  font-size: 3em;
}
body#projects #menu a {
  color: #979797;
  background: #1f1f1f;
}
body#projects #menu a:hover {
  color: #fff;
}
body#projects #menu .selected a {
  color: #fff;
  background: #303030;
}
body#projects #branding {
  background:transparent url(/inc/img/ui/block_dark.png) no-repeat 0 20px;
}
body#projects .section #logo {
  height: 258px;
  background-image: url("/inc/img/ui/theme_canoe.png");
}
body#projects #content {
  overflow: hidden;
  background: #202020;
}
body#projects #primary {
  padding: 25px; 
  width: 830px;
  position: relative;
  background: none;
  position: relative;
}
body#projects #footer {
  padding: 20px 0 10px;
}
body#projects #footer .inner {
  background-image: url(/inc/img/ui/footer_dark.gif);
}
body#projects #footer h2 {
  color: #c2c2c2;
}
body#projects #footer,
body#projects #footer a {
  color: #979797;
}
body#projects #footer #delicious.block div {
  background: #393939 ;
}
body#projects #footer #delicious.block p.meta,
body#projects #footer #delicious.block p.meta a {
  color: #454545;
}
body#projects #footer a:hover,
body#projects #footer #delicious.block p.meta a:hover,
body#projects #footer .vcard a:hover {
  color: #666;
}
body#projects #footer p#copyright {
  color: #393939;
}
body#projects #footer .vcard a {
  color: #b1b1b1;
}
#filter {
  background: #2b2b2b;
  margin: 2em 0;
  padding: 18px 25px;
  overflow: hidden;
}
#filter h2 {
  float: left;
  margin: 0 1.4em 0 0;
  font-size: 1.2em;
  color: #fff;
}
#filter ul,
body#projects .article #primary .aside .sectors {
  margin: 0;
  font-size: 1em;
  overflow: hidden;
}
#filter li,
body#projects .article #primary .aside .sectors li {
  float: left;
  margin: 0;
  padding: 0;
  background: 0;
  border: 0;
}
#filter .sectors li a,
.teasers span a,
body#projects .article #primary .aside .sectors li a {
  color: #cdcdcd;
  opacity: 0.99;
  float: left;
  margin: 0 1em .5em 0;
  padding: 3px 4px;
  font-size: 1.1em;
  line-height: 1;
  text-transform: capitalize;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border: 0;
  color: #b3b3b3;
  background: #4b4b4b;
}
body#projects .article #primary .aside .sectors li a:hover,
#filter li a:hover,
.teasers span a:hover {
  color: #fff;
  background: #666;
  -webkit-transition: background-color .4s linear;
  -moz-transition: background-color .4s linear;
}
#filter li.selected a {
  color: #606060;
  background: #fff;
}

/* list page */
body#projects .section #primary h1 {
  margin: 0;
}
.teasers {
  font-size: 1em;
  overflow: hidden;
}
.teasers li {
  float: left;
  margin: 0 17px 2.4em 0; 
  width: 124px;
  position: relative;
}
.teasers li.last {
  margin-right: 0; 
  overflow: hidden;
}
.teasers li.first {
  clear: both;
}
.teasers li img {
  float: none;
  margin: 0;
}
.teasers li h2 {
  margin: .5em 0 .3em 0;
}
.teasers li h2 a {
  color: #a6b32c;
}
.teasers li p {
  line-height: 1.3;
  opacity: 0.99;
}

/* article page */

body#projects #primary .meta {
  display: block;
  overflow: hidden;
  padding: 0 0 1em 0;
  border-bottom: 1px #3d3d3d solid;
  font-weight: bold;
  color:#ccc;
}
body#projects #primary .meta dt {
  padding: 0 .5em 0 0;
  color:#4b4b4b;
}
body#projects .article #primary h1 {
  clear: both;
  margin: 20px 0;
}
body#projects .article #primary .column {
  float: left;
  width: 268px;
}
body#projects .article #primary .hreview {
  margin: 2.6em 0 0 0;
}
body#projects #primary img{
  float: right;
  margin: 0 0 2em 0;
}
.external {
  background:transparent url(/inc/img/ui/external.png) no-repeat scroll right center;
  padding-right: 20px;
}

body#projects .pagers {
  top: 32px;
  right: 0;
}

/* =[8.3] About section
--------------------------------- */

body#about #summary {
  padding-bottom: 20px;
}
body#about #testimonials,
body#about #slides {
  width: 584px;
  height:267px;
  overflow: hidden;
  position: relative;
}
body#about #testimonials #slides ul {
  margin: 0;
  padding: 0;
  width: 2584px;
}
body#about #testimonials #slides ul li {
  float: left;
  margin: 0;
  padding: 0;
  width: 584px;
  height:267px;
  background-position: left top;
  background-repeat: no-repeat;
  text-indent: -999em;
}
body#about #testimonials #slides li#mattward {
  background-image: url("/inc/img/ui/testimonial_mattward.jpg");
}
body#about #testimonials #slides li#anarafferty {
  background-image: url("/inc/img/ui/testimonial_annarafferty.jpg");
}
body#about #testimonials #slides li#stevenickolls {
  background-image: url("/inc/img/ui/testimonial_stevenickolls.jpg");
}
body#about #testimonials #slides li#bridgetmarrison {
  background-image: url("/inc/img/ui/testimonial_bridgetmarrison.jpg");
}
body#about #testimonials p {
  position: absolute;
  left: 15px;
  top: 10px;
  margin: 0;
  padding: 0;
  font-size: 1.6em;
  font-weight: bold;
  color: #888;
}
body#about #testimonials cite {
  position: absolute;
  left: -999em;
}
body#about .category #content .column img {
  float: none;
}
body#about #content .column h2 {
  margin-top: 0.3em;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size: 2.1em;
  line-height: 1.1;
}
body#about .category #content h3#network {
  clear: both;
  margin: 0;
  padding: 2.4em 0 .6em 0;
}
ul.links li {
  display: inline;
  padding: 0 .6em 0 0;
  opacity: 0.99;
}

/* =[8.4] Process section
--------------------------------- */

body#process #primary {
  padding-bottom: 140px;
  background: url("/inc/img/ui/block_sig.png") 87% 97% no-repeat;
}
body#process #primary .continue {
  position: absolute;
  left: 300px;
  bottom: 70px;
  width: 278px;
  height: 159px;
  background: url("/inc/img/ui/get-in-touch.png") 0 0 no-repeat;
  text-indent: -999em;
}
body#process .continue a {
  position: absolute;
  left: 93px;
  top: 90px;
  width: 100px;
  height: 19px;
  text-indent: -999em;
}

/* =[8.5] Blog section
--------------------------------- */

#navigation { 
  width: 226px;
  margin: 0px 0 20px 0;
  padding: 0px 0px;
  overflow: hidden;
}
#navigation .inner {
  clear:both;
  padding: 0 0 1.2em;
}
#navigation h2  {
  float: left;
  font-weight:normal;
  padding: 0.7em 3.1em 0.7em 1em;
  height: auto;
  line-height: 1.1;
  color:#fff;
  background: #303030;
}
#navigation .inner h3 {
  margin: .9em 0 0 0;
  padding: .9em 10px;
  border-top: 1px #d2d2d2 solid; 
  font-size: 1.2em;
  color: #525252;
}
#navigation .inner  h3.first {
  clear: both;
  margin: 0;
  padding: .9em 10px;
  border-top: 0; 
}
#navigation ul {
  clear: both;
  overflow: hidden;
  font-size: 1em;
  margin: 0 0;
  padding: 0 0;
}
#navigation li {
  float: left;
  width: 113px;
  margin: 0;
  padding: 0 0 0.3em 0;
  font-size: 1em;
  background: 0;
  line-height: 1;
  border: 0;
}
#navigation li a {
  color: #cdcdcd;
  opacity: 0.99;
  float: left;
  margin: 0 10px;
  padding: 3px 4px;
  font-size: 1.1em;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border: 0;
  color: #fff;
}
#navigation .categories li a {
  background: #d35117;
}
#navigation .categories li a:hover,
#navigation .categories li.selected a {
  background: #a93e0f;
}
#navigation .sectors li a {
  background: #95a219;
  text-transform: capitalize;
}
#navigation .sectors li a:hover,
#navigation .sectors li.selected a {
  background: #7a8415;
}
#navigation .archive_list li a {
  background: #a9a9a9;
}
#navigation .archive_list li a:hover,
#navigation .archive_list li.selected a {
  background: #888;
}
#navigation li a:hover {
  -webkit-transition: background-color .4s linear;
  -moz-transition: background-color .4s linear;
}
abbr.published {
  border: none;
}
#content .hfeed a.image {
  width: 404px;
  overflow: hidden;
}
#content .hfeed img {
  margin: 0 0 1.4em 0;
}
#content .hfeed {
  margin: 0;
  padding:  25px 0 0 0;
  list-style: none;
  font-size: 1em;
}
#content .hfeed .hentry {
  overflow: hidden;
  background: #3c3c3c;
  margin: 0 0 2em 0;
  padding: 20px;
  position: relative;
}
.article #content .hfeed .hentry {
  padding: 20px 20px 60px;
}
#content .hfeed h1 {
  margin: 0;
}
.archive #content h1 {
  color: #747474;
}
.archive #content .hfeed  {
  margin: 0;
  padding: 0;
}
#content ol.hfeed h3,
.article #content div.hfeed h1.entry-title,
.archive #content ol.column.hfeed h4 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 3em;
  line-height: 1;
  margin: 0 0 0.5em 0;
  width: 404px;
}
.cufon-active #content ol.hfeed h3 { 
  line-height: .8;
}
#content .hfeed h3 a,
.archive #content .hfeed h4 a {
  color: #fff;
}
#content .hfeed .entry-summary,
#content .hfeed .entry-content {
  width: 404px;
}
#content .hfeed li .entry-summary,
#content .hfeed li .entry-content p {
  clear: both;
  margin: 0;
  opacity: .99;
}
.article #content .hfeed .entry-summary  {
  /* first h2 below has zero top-margin */
  margin-bottom: 1.3em;
}
.article #content .hfeed .entry-content h2,
.article #content .hfeed .entry-content h3 {
  margin-top: 0;
  font-size: 1.8em;
  color:#eee;
}
.article #content .hfeed .entry-content h3 {
  font-size: 1.6em;
  color:#ccc;
}
.article #content .hfeed .entry-content ul,
.article #content .hfeed .entry-content ol {
  font-size: 1em;
  margin-left: 35px;
  padding-left: 0em;
  list-style: disc;
}
.article #content .hfeed .entry-content ol {
  margin-left: 20px;
  padding-left: 20px;
  list-style: decimal;
}
.article #content .hfeed .entry-content li {
  font-size: 1.3em;
  opacity: .99;
  margin-left: 0;
  padding-left: 0;
}
.article #content .hfeed .entry-content blockquote {
  padding: 0 20px;
}
.article #content .hfeed .entry-content cite {
  font-size: 1em;
}
.article #content .hfeed .entry-summary p,
.article #content .hfeed .entry-content p {
  opacity: .9;
}
.article #content .hfeed .entry-content blockquote p {
  width: 344px;
}
.article #content .hfeed .entry-summary a,
.article #content .hfeed .entry-content a  {
  color: #CDCDCD;
}
.article #content .hfeed .entry-summary a:hover,
.article #content .hfeed .entry-content a:hover  {
  color: #979797;
}

#content .hfeed dl.meta {
  position: absolute;
  top: 20px;
  left: 444px;
  width: 120px;
  padding: .9em 0;
  border-top: 1px #4b4b4b solid;
  border-bottom: 1px #4b4b4b solid;
  opacity: .99;
  overflow: hidden;
}
#content .hfeed dl.meta dt {
  padding-right: .3em;
}
#content .hfeed dl.meta a {
  font-weight: normal;
  color: #D7D7D7;
  text-transform: capitalize;
}
#content .hfeed .entry-summary a:hover ,
#content .hfeed dl.meta a:hover {
  color: #4d4d4d;
}

#content .local_nav {
  position: absolute;
  top: 105px;
  left: 444px;
  width: 120px;
}
#content .local_nav h2 {
  margin: 0;
  font-size: 1.2em;
  color: #fff;
  font-weight: normal;
}
.article #content .hfeed .local_nav ol,
.article #content .hfeed .local_nav ul,
.article #content .hfeed .local_nav li {
  font-size: 1em;
  opacity: 1;
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.article #content .hfeed .local_nav li {
  margin: .9em 0 0 0;
}
.article #content .hfeed .local_nav li h3,
.article #content .hfeed  .local_nav li p.meta {
  font-size: 1.2em;
  margin: 0;
  color: #747474;
  opacity: .99;
}
.article #content .hfeed .local_nav li h3 a {
  color: #d7d7d7;
  font-weight: normal;
}
.article #content .hfeed .local_nav li h3 a:hover,
.article #content .hfeed .local_nav li.selected h3 a {
  color: #979797;
}


/* =[8.6] Contact section
--------------------------------- */

body#contact #primary .column {
  opacity: 0.99;
  color: #bbb;
}
#content #primary address {
  font-style: normal;
  font-size: 1em;
  margin: 0 0 2em 0;
}
#content #primary address span {
  display: block;
  font-size: 1.2em;
}
#content #primary address span.reg {
  font-size: 1.1em;
}
#content #primary .phone abbr,
#content #primary abbr.email,
#content #primary .email abbr {
  border: none;
  float: left;
  width: 3em;
  color: #808080;
}
#content address .phone,
body#contact #primary .column a {
  color: #c1c1c1;
  font-weight: bold;
}
body#contact #primary .column a:hover {
  color: #939393;
}
body#contact #primary .column h2 {
  margin-top: 0;
}
#primary address .phone {
  margin: .8em 0 0 0;
}
#primary address .email {
  margin: 0 0 .8em 0;
}
#primary address .reg {
  font-size: 1.1em;
}