/*
Variable Grid System.
Learn more ~ http://www.spry-soft.com/grids/
Based on 960 Grid System - http://960.gs/
Licensed under GPL and MIT.
*/

/* Containers
----------------------------------------------------------------------------------------------------*/
.container_8 {	margin-left: auto; margin-right: auto; width: 960px; }

/* Grid >> Global
----------------------------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8 { display:inline; float: left; position: relative; margin: 0px 10px 0px 10px; }

/* Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

/* Grid >> 8 Columns
----------------------------------------------------------------------------------------------------*/
.container_8 .grid_1 { width:100px; }
.container_8 .grid_2 { width:220px; }
.container_8 .grid_3 { width:340px; }
.container_8 .grid_4 { width:460px; }
.container_8 .grid_45 { width:540px; }
.container_8 .grid_5 { width:580px; }
.container_8 .grid_6 { width:700px; }
.container_8 .grid_7 { width:820px; }
.container_8 .grid_8 { width:940px; }

/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/* Globals
----------------------------------------------------------------------------------------------------*/
html { font-size: 62.5%; overflow-y: scroll!important; overflow-x: hidden!important; background: #000;  }
body { font: 1.4em Helvetica, Arial, sans-serif; background: #000; line-height: 140%; }
* { margin: 0px; padding: 0px; border: none; list-style: none; outline: none; }
a { color: #000; text-decoration: underline; }
a:hover { text-decoration: none; }

/* Colours
----------------------------------------------------------------------------------------------------*/
.white { background: #FFF; }

/* Floats
----------------------------------------------------------------------------------------------------*/
.right { float: right; }
.left, .mc_merge_var { float: left; }

/* Padding & Margins
----------------------------------------------------------------------------------------------------*/
.nopad, .page-item-10 { padding: 0!important; }
.nomargin { margin: 0!important; }
.padall { padding: 20px; }
.padtopbottom { padding: 20px 0; }
.padleftright { padding: 0 20px; }
.padfooter { padding: 5px 20px; }
.padleft { padding-left: 20px; }
.padright { padding-right: 20px; }
.padbottom { padding-bottom: 20px; }
.padtop { padding-top: 20px; }

/* Hide
----------------------------------------------------------------------------------------------------*/
.mc_var_label, .mc_signup_submit, #search-button { display: none; }

/* Typography
----------------------------------------------------------------------------------------------------*/
.small { font-size: 0.8em; }
p, ul { margin: 0 0 1.4em 0; }
#content ul li { list-style: square; margin-left: 2em; }
#content ol li { list-style: decimal; margin-left: 2em; }
h1, h2, h3, h4 { margin: 0 0 0.8em 0; line-height: 100%; }
h1 { font-size: 3.2em; letter-spacing: -2px; margin: 0 0 0.3em 0; }
h2, h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
blockquote { width: 220px; padding: 20px 20px 1px 20px; background: #EEE; margin: 0 0 10px 20px; float: right; }
blockquote p { text-transform: uppercase; font-size: 1.1em; letter-spacing: 0; line-height: 100%; }
#content .byline { font-weight: bold; text-transform: uppercase; font-size: 0.8em; margin: 0 0 1.4em 0; }
#content .code { margin-bottom: 1.4em; width: 500px; background: #EEE; padding: 20px; overflow: auto; font-size: 1.2em; }
#content .client { font-size: 0.9em; line-height: 140%; }

/* Footer
----------------------------------------------------------------------------------------------------*/
.address address { font-style: normal; }
.address address a { text-decoration: none; }
footer#footer dl { font-size: 0.8em; float: left; margin: 0 20px 0 0; }
.newsletterandlinks { background: url(../img/footer.png) no-repeat top center; }
footer#footer dl a { text-decoration: none; color: #808080; -webkit-transition: color 0.4s linear; }
footer#footer dl a:hover { color: #FFF; }
footer#footer .padall p, footer#footer dt a, footer#footer h3 { color: #FFF; }
footer#footer dt a { font-weight: bold; text-decoration: none; }
footer#footer input { background: none; color: #808080; font-size: 1em; font-family: Helvetica, Arial, sans-serif; height: 22px; border-bottom: 2px solid #808080; }
footer#footer #mc_signup_submit { background: #808080; color: #000; padding: 5px 10px; font-weight: bold; line-height: 100%; margin: 0 0 0 10px; top: 0px; position: relative; }
footer#footer #mc_mv_EMAIL { width: 426px; }
#mc_message { color: #e31818; position: relative; margin: 0 0 1.4em 0; }

/* Header
----------------------------------------------------------------------------------------------------*/
header#header { border-top: 2px solid #FFF; padding-top: 20px; background: url(../img/header.png) no-repeat 157px 20px; position: relative; margin-bottom: 20px; }
.home { background: url(../img/logo.png); width: 157px; height: 0; padding: 112px 0 0 0; overflow: hidden; display: block; }
header#header ul { font-weight: bold; border-bottom: 2px solid #FFF; float: left; top: 92px; left: 177px; position: absolute }
header#header a { color: #FFF; text-decoration: none; -webkit-transition-property:color; -webkit-transition: color 0.4s linear; }
header#header a:hover { color: #AAA; }
header#header li { float: left; display: inline-block; padding-right: 2em; }
header#header .current_page_item a, header#header .current_page_parent a, header#header .current_page_ancestor a { color: #808080; }
#search-form { position: absolute; top: 89px; right: 20px;}
#search-form input { background: none; color: #808080; font-size: 1em; font-family: Helvetica, Arial, sans-serif; height: 22px; border-bottom: 2px solid #808080;  }
#search-form #search-button { background: #808080; color: #000; padding: 5px 10px; font-weight: bold; line-height: 100%; margin: 0 0 0 10px; top: 0px; position: relative; }
#search-form #search-input { width: 330px; }
.navigation { float: left; clear: both; margin: 0 0 5px 0; width: 540px; }
.nav-previous a, .nav-next a { background: #808080; color: #FFF; padding: 8px 10px; font-size: 0.9em; text-decoration: none; font-weight: bold; -webkit-transition: background 0.4s linear; }
.nav-previous { float: left; }
.nav-next { float: right; }
.nav-previous a:hover, .nav-next a:hover { background: #000; }

/* Content
----------------------------------------------------------------------------------------------------*/
#contentcontainer { margin-bottom: 20px; }
#content { width: 540px; background: #FFF; }
#content hr { border-bottom: 10px solid #000; margin: 0 0 1.4em 0; }
#breadcrumbs { color: #808080; font-size: 0.8em; text-transform: uppercase; margin: 0 0 1em 0; }
#breadcrumbs a { color: #808080; }
#content .blog-list .metainfo { margin-bottom: 20px; clear: both; }
#content .blog-list h2 a, #content .client h5 a { text-decoration: none; -webkit-transition: color 0.4s linear; }
#content .blog-list h2 a:hover, #content .client h5 a:hover { color: #808080; }
#content .client { border-top: 1px solid #999; padding-top: 1em; padding-bottom: 1em; }
#content .client p { margin: 0; }

/* Images
----------------------------------------------------------------------------------------------------*/
.centreimg { margin: 0 0 1em 0; }
img.right, img.alignright { margin: 0 0 10px 25px; float: right; }
img.left, img.alignleft { margin: 0 25px 10px 0; float: left; }
#content .thumbnailcontainer { float: right; margin: 0 0 0 25px; height: 110px; width: 150px; overflow: hidden; -webkit-transition: opacity 0.2s linear; }
.thumbnailcontainer:hover { opacity: 0.5; }
#content .blog-list .thumbnailcontainer { margin-bottom: 1em; }
#casestudyimg { margin: 0 0 1.4em 0; }
img.attachment-fullsize, img.alignnone { width: 540px; height: 290px; }

/* Sidebar
----------------------------------------------------------------------------------------------------*/
#sidebar { width: 330px; position: relative; }
#sidebar ul { margin-bottom: 30px; }
#sidebar h2 { border-bottom: 2px solid #000; margin: 0 0 0.2em 0; padding: 0 0 0.4em 0; }
#sidebar li { border-bottom: 1px solid #eee; padding: 5px 0; }
#sidebar li a { font-weight: bold; text-decoration: none; color: #808080; -webkit-transition: color 0.4s linear; display: block; }
#sidebar li a:hover { color: #000;  }
#sidebar li h3 a { color: #000; -webkit-transition: color 0.4s linear; letter-spacing: 0px; }
#sidebar li h3 a:hover { color: #808080; }
#sidebar h3 { margin: 0 0 0.2em 0; font-size: 1.1em; }
#sidebar .current_page_item { background: #eee; padding: 5px 10px; }
#sidebar .current_page_item a {  color: #000; }
.sidequote { background: #000 url(../img/quote.png) no-repeat bottom left; padding: 20px 20px 50px 20px; color: #FFF; margin: 0 0 30px 0; } 
.sidequote p { margin: 0; }
.sidequote a { color: #FFF; }
.twitter { position: relative; top: -50px; float: right; font-size: 0.9em; }
.twitter a { background: url(../img/twitter.png) no-repeat center right; padding: 5px 1.4em 5px 0; text-decoration: none; font-weight: bold; -webkit-transition: color 0.4s linear; }
.twitter a:hover { color: #808080; }
.rss a { background: url(../img/rss.png) no-repeat center right; width: 100%; display: block; text-decoration: none; -webkit-transition: color 0.4s linear; }
.rss a:hover { color: #808080; }

/* What we did
-------------------------------------------------------------- */
#content .whatwedid { width: 180px; padding: 20px; background: #EEE; margin: 0 0 10px 20px; float: right; }
#content .whatwedid h4 { border-bottom: 2px solid #000; margin: 0 0 0.4em 0; padding: 0 0 0.2em 0; }
#content .whatwedid li { list-style: none; margin-left: 0; }
#content .url { border-top: 1px solid #c2c2c2; margin:  0.4em 0 0 0; padding: 0.4em 0 0 0; }
#content .whatwedid a { text-decoration: none; color: #000; -webkit-transition: color 0.4s linear; background: url(../img/viewsite.png) no-repeat left center; padding: 0 0 0 1em; }
#content .whatwedid a:hover { color: #808080; }

/* Meta Info
-------------------------------------------------------------- */
.metainfo { border-bottom: 1px solid #999; padding-bottom: 1em; font-size: 0.9em; font-weight: bold; line-height: 130%; color: #808080; float: left; clear: both; width: 540px; }
.metainfo a { text-decoration: none; color: #808080; font-weight: normal; -webkit-transition: color 0.4s linear; }
.metainfo a:hover { color: #000; }
.metainfo .share { background: url(../img/share.png) no-repeat left center; padding: 0 0 0 1.2em; font-weight: bold; }
.metainfo .tags { background: url(../img/tags.png) no-repeat left center; padding: 0 0 0 0.9em; }
.metainfo .comment { background: url(../img/comment.png) no-repeat left center; padding: 0 0 0 1.2em; }
.metainfo .categories { background: url(../img/categories.png) no-repeat left center; padding: 0 0 0 1.2em; }

/* Comments
-------------------------------------------------------------- */
#comments { margin-top: 10px; clear: both; float: left; }
#comments .comment-author a { border: none; }
#comments-list ol { padding-left: 0; }
#comments-list ol li { list-style-type: none; padding: 20px 20px 1px 20px; background: #EEE; margin: 0 0 10px 0; }
#comments-list ol li div.comment-author { font-weight: bold; }
#respond { background: #EEE; padding: 20px; float: left; clear: both; width: 500px; }
#respond h3 { margin: 0 0 0.2em 0; padding: 0 0 0.2em 0; }
.comments h3 { display: none; }
#respond #comment-notes { color: #808080; }
#respond input,  #respond textarea { padding: 4px; border: 1px solid #DDD; font: 1em Helvetica, Arial, sans-serif; border: 1px solid #DDD; }
#respond input { width: 25em; }
#respond textarea { width: 25em; }
#respond .button { border: none; padding: 8px; font-size: 1em; font-weight: bold; clear: both; float: right; width: 8.5em; background: #000; color: #EEE; -webkit-transition: background 0.4s linear; cursor: pointer; }
#respond .button:hover { background: #808080; }
#respond label { font-weight: bold; }
#respond .form-label { float: left; clear: right; margin: 0 0 5px 0; }
#respond .form-input, #respond .form-textarea { float: right; margin: 0 0 5px 0; }

/*contact form
-------------------------------------------------------------- */
div.wpcf7 form.wpcf7-form {  background: #EEE; padding: 20px; margin: 0 0 20px 0; float: left; width: 500px; }
div.wpcf7 form.wpcf7-form p { margin: 0 0 5px 0; font-weight: bold; line-height: 180%; clear: both; }
div.wpcf7 form.wpcf7-form p input.text-input, div.wpcf7 form.wpcf7-form p textarea, #searchform-no-results input.text-input { padding: 4px; border: 1px solid #aaa; font: 1em Helvetica, Arial, sans-serif; border: 1px solid #DDD; }
form input.button { padding: 8px; border: none; font: 1em Helvetica, Arial, sans-serif; font-weight: bold; clear: both; float: left; width: 12em; background: #000; color: #EEE; -webkit-transition: background 0.4s linear; cursor: pointer; }
form input.button:hover { background: #808080; }
span.wpcf7-not-valid-tip-no-ajax { margin-left: 10px; color: #e31818; }
#searchform-no-results input.text-input { padding: 8px; }
form.wpcf7-form p textarea { width: 98%; }
.wpcf7-response-output { clear: both; margin-top: 1.4em; }

/* Vcard
-------------------------------------------------------------- */ 
div.map { margin-bottom: 30px; } 
div.vcard, div.compinfo { margin: 0.5em 0 30px 0; }
div.vcard div.fn { display: none; }
div.tel, div.email { font-weight: bold; }
div.tel span, div.email span { font-weight: normal; }

/* Intro
-------------------------------------------------------------- */
.intro #content { background: none; }
.intro { background: #205a97 url(../img/divein.jpg) no-repeat; height: 608px; }
.intro #sidebar { }
.intro #sidebar a, .intro #sidebar li a, .intro #sidebar li, .intro #sidebar li h3 a, .intro #sidebar p { color: #FFF; }
.intro #sidebar h2 { border-bottom-color: #FFF; }
.intro #sidebar li { border-bottom-color: #6f86af; }
.intro #sidebar p { margin: 0; }
.intro #sidebar li a:hover, .intro #sidebar li h3 a:hover, .intro #sidebar h2 a:hover, .intro #content h2 a:hover { color: #9eb1d2; }
.intro #content h1, .hub h1 { color: #FFF; text-transform: uppercase; margin-bottom: 0.1em; }
.intro #content h2, .hub h2 { color: #FFF; font-weight: normal; text-transform: uppercase; font-size: 1.1em; letter-spacing: 0; }
.intro #content h2 a { color: #FFF;  -webkit-transition: color 0.4s linear; text-decoration: none; }

/* Hub
-------------------------------------------------------------- */
.hub { background-color: #666; height: 250px; position: relative; }
.imgcredit { position: absolute; right: 10px; bottom: 10px; font-size: 0.7em; font-weight: bold; line-height: 100%; }
.imgcredit a { text-decoration: none; color: #FFF; background: url(../img/flickr.png) no-repeat right center; padding-right: 31px; opacity: 0.5; -webkit-transition: opacity 0.4s linear; }
.imgcredit a:hover { opacity: 1; }

/* Fadein
-------------------------------------------------------------- 
#content { opacity: 0; }
@-webkit-keyframes .fadein { opacity: 1; -webkit-transition: opacity 1s linear; }*/