/*
Website: thebgroup.co.uk
Updated: 25 Feb 2010

Coder/Designer: Kevin Francis, e: kev@thebgroup.co.uk
Bgroup Creative Agency, Keel House, Garth Heads, Newcastle upon Tyne, NE1 2JE, t: 0191 261 1333
*/
			
/* reset 
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
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; }
:focus { outline: 0; }
abbr, acronym { cursor: help; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th { text-align: left; }
th, td { vertical-align: top; }

/* =Body 
----------------------------------------------------------------------------------------- */
body { border-top: 5em solid #000; font: 75%/1.5 "Helvetica Neue", Arial, Verdana, sans-serif; color: #333; background: url(/_assets/img/body-bg.jpg) fixed; }

/* =Typography
----------------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: #222; font-family: "Helvetica Neue", Arial, Tahoma, sans-serif; line-height: 1.3; }
h1 { margin-bottom: .3em; font-size: 250%; line-height: 1.3; letter-spacing: -.01em; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
h1 + p { font-size: 150%; line-height: 1.3; }
h2 { font-size: 200%; margin-bottom: .75em; }
h3 { font-size: 150%; margin-bottom: .45em; }
h4 { font-size: 116.66%; margin-bottom: .58em; }

.hx { float: left; width: 18.52%; margin-right: 1.85%; font-size: 133.3%; font-weight: normal; line-height: 2.25; text-indent: 8px; background: #be3c14; color: #fff; text-shadow: 0 1px 0 rgba(131,6,2,.8); }
.gs-1 .hx { float: none; width: auto; margin-right: 0; } 
.hx a { display: block; color: #fff; }
.hx a:hover { background: #000; color: #fff; text-shadow: none; }
#logo { float: left; opacity: .3; margin:0; padding-bottom: .75em; }
#logo:hover { opacity: .5; }

ol, ul, dl, p { margin-bottom: 1.5em; }
ol, ul { list-style: none; }
dt { font-weight: bold; }
dd { margin: 0; font-weight: normal; }
.bulleted { list-style: disc; list-style-position: outside; }
.oops { color: #be3c14; padding: 1em 0; border: 3px solid rgba(0,0,0,.1); border-width: 3px 0  }
.required { color: #be3c14; }
address { display: inline; font-style: normal; }
abbr { border-bottom: 1px dotted #666; }

blockquote p { quotes: "\201C" "\201D"; }
blockquote p:first-child:before { content: open-quote;  margin-left: -.5em; } 
blockquote p:last-child:after { content: close-quote; }

.meta { margin: 0; }
.meta li { display: inline; padding-right: 1.2em; margin-right: 1em; border-right: 1px solid rgba(0,0,0,.1); }
.meta abbr[title*=Comments] a { padding-right: 1.5em; background: url(/_assets/img/comments.png) 100% 50% no-repeat;  }
.meta abbr[title*=Comments] a:hover { background-image: url(/_assets/img/comments-hov.png);  }
.meta li.last { margin: 0; padding: 0; border: 0!important; }

/* =Links
----------------------------------------------------------------------------------------- */
a { text-decoration: none; color: #be3c14; }
a:hover { color: #000; }
h1 a span { -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
h1 a:hover span { padding-left: 20px; -webkit-transition-property: padding-left; }

/* =Forms
----------------------------------------------------------------------------------------- */
.entry.form { float: right; width: 38.88%; }
input, textarea { font-size: inherit; font-family: inherit; }
input[type=email], input[type=tel], input[type=url], input[type=text], textarea { max-width: 400px; padding: .6em; margin-bottom: .5em; background: rgba(255,255,255,.7); border: 1px solid #c8c7c0; }
input[type=text]:hover, input[type=text]:focus, input[type=url]:hover, input[type=url]:focus, input[type=tel]:hover, input[type=tel]:focus, input[type=email]:hover, input[type=email]:focus, textarea:hover, textarea:focus { background: rgba(255,255,255,1); }
input[type=submit] { padding: .6em; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 0; background: #be3c14; color: #fff; text-shadow: 0 1px 0 rgba(131,6,2,.8); cursor: pointer;  }
input[type=submit]:hover { background: #000; text-shadow: none; -moz-box-shadow: 0 2px 5px rgba(0,0,0,.3); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3); box-shadow: 0 1px 5px rgba(0,0,0,.3); }
input[type=submit]:focus { background: #000; }

.fm-span { margin-top: 1em; }
.fm-span label { display: block; margin-bottom: .4em; overflow: hidden; }
.fm-span span { float: left; width: 30%; padding: .6em 0; cursor: pointer; }
.fm-span input { float: right; width: 60%;  }
#subscribe div input { display: block; margin-left: 35.7%; }

.g10-form label { display: block; margin-bottom: .8em; overflow: hidden; }
.g10-form input[type=text], .g10-form input[type=email], .g10-form input[type=tel], .g10-form input[type=url], .g10-form textarea { width: 65%; }
.g10-form span, .g10-form label em { float: left; width: 31.25%; font-style: normal; cursor: pointer; }
.g10-form .radcheck, .g10-form div { margin-left: 31.25%; }

/* =Layout
----------------------------------------------------------------------------------------- */
article, aside, dialog, figure, figcaption, footer, header, hgroup, nav, section, video { display: block; }
#branding { margin: 0 auto 1.5em auto; }
.container, #branding, #bookmarks { position: relative; width: 95%; max-width: 81em; clear: both; }
.container { margin: 0 auto 3em auto; padding-bottom: 3em; border-bottom: 3px solid rgba(0,0,0,.1); }
.container:after, #branding:after { content: "."; display: block; width: 0; height: 0; clear: both; visibility: hidden; } 
.container:last-of-type, .container.last-type   { padding-bottom: 0; border-bottom: 0; }
.container.alt { border: 0; padding-bottom: 0; }
.gs-1 { float: left; width: 18.52%; margin-right: 1.85%; }
.gs-2 { float: left; width: 38.88%; margin-right: 1.85%; }
.gs-3 { float: right; width: 59.26%; }
.gs-4 { float: right; width: 79.62%; }
.gs-5 { width: 100%; }

.listing li { margin-bottom: 3em; clear: right;}
.listing img { float: right; margin: 0 0 1.5em 1.5em; }
.listing #branding { width: 100%; } 
/*we have a worktype of branding, but the global header is also called #branding, so we un-do a rule here*/

#article { margin-bottom: 3em; }
#article .entry-title { position: relative; top: -153px; margin-bottom: -153px; }
#article .entry-summary { font-size: 150%; }

.articles { margin: 0; }
.articles a img { position: relative; left: -34.375%; float: left; width: 30.9%; margin-right: -34.375%; }
.articles li { position: relative; clear: left; margin: 0 0 2.25em 0; padding-bottom: 2.25em; border-bottom: 1px solid rgba(0,0,0,.1); }

#comments { padding-top: 3em; border-top: 3px solid rgba(0,0,0,.1); }
#comments address img { position: relative; left: -18.4%; margin-right: -12.15%; float: left; width: 12.15%;  }
#comments img[src^="/_var/"] { background: rgba(255,255,255,.2); }
#comments h4 a:hover img[src^="/_var/"] { background: #fff; }
#comments ol { margin-bottom: 3em; }
#comments li { clear: left; margin-bottom: 2.25em; padding-bottom: 2.25em; border-bottom: 1px solid rgba(0,0,0,.1); }
#comments .meta li, .articles .meta li { display: inline; padding: 0 .6em 0 0; margin: 0 .6em 0 0; border-width: 0 1px 0 0; border-right: 1px solid rgba(0,0,0,.1); }
.articles li.last, #comments li.last { margin-bottom: 0; padding: 0; border: 0!important; }

#bookmarks { overflow: hidden; margin: 2em auto; }
#bookmarks li { float: left; width: 18.52%; margin-right: 1.85%; }
#bookmarks a { display: block; padding-left: 1.8em; background-position: 0 50%; background-repeat: no-repeat; }
#bookmarks a[rel=flickr] { background-image: url(/_assets/img/flickr.png); }
#bookmarks a[rel=rss] { background-image: url(/_assets/img/feed.png); }
#bookmarks a[rel=twitter] { background-image: url(/_assets/img/twitter.png); }

#work ul { margin: 0 -1.85%; }
#work li { display: inline; position: relative; float: left; width: 290px; height: 162px; padding: 1px; margin: 0 1.85% 36px 1.85%; -moz-box-shadow: 0 1px 5px rgba(0,0,0,.5); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5); box-shadow: 0 1px 5px rgba(0,0,0,.5); }
#work figure { overflow: hidden; position: relative; height: 162px; }
#work a { position: absolute; width: 100%; height: 202px; top: -36px; left: 0; color: #fff; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
#work a:hover, #work a:active, #work a:focus { top: 0; -webkit-transition-property: top; }
#work img { position: absolute; bottom: 0; }
#work figcaption { position: absolute; top: 0; width: 100%; height: 36px; font-size: 12px; text-indent: 10px; text-shadow: 0 1px 0 rgba(0,0,0,.8); line-height: 36px; font-weight: normal; background: rgba(0,0,0,.7); }
#work a:active figcaption, #work a:focus figcaption { background: #000; } 

#gallery { position: relative; height: 26em; }
#gallery img { position: absolute; display: block; padding: 10px; background: rgba(0,0,0,.15); -webkit-transition: all 0.2s ease-in; -moz-box-shadow: 0 1px 5px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.2); box-shadow: 0 1px 5px rgba(0,0,0,.2); }
#gallery a:hover img, #gallery a:focus img, #gallery a:active img { z-index: 89; -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05); -moz-box-shadow: 0 10px 20px rgba(0,0,0,.5); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.5); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.root #gallery img { padding: 5px; }
.root #gallery { height: 15em; }

#gallery > :nth-child(1) img { top: 1em; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); transform: rotate(-10deg); }
#gallery > :nth-child(2) img { top: 0; -webkit-transform: rotate(15deg); -moz-transform: rotate(15deg); transform: rotate(15deg); }
#gallery > :nth-child(3) img { top: 1em; -webkit-transform: rotate(7deg); -moz-transform: rotate(7deg); transform: rotate(7deg); }
#gallery > :nth-child(4) img { top: 0; -webkit-transform: rotate(17deg); -moz-transform: rotate(17deg); transform: rotate(17deg); }
#gallery > :nth-child(5) img { top: 1em; z-index: 1; -webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); transform: rotate(-13deg); }
#gallery > :nth-child(6) img { top: 0; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); transform: rotate(10deg); }
.count-6 > :nth-child(1) img { left: 5%; }
.count-6 > :nth-child(2) img { left: 15%; }
.count-6 > :nth-child(3) img { left: 30%; }
.count-6 > :nth-child(4) img { right: 30%; }
.count-6 > :nth-child(5) img { right: 20%; }
.count-6 > :nth-child(6) img { right: 5%; }
.count-5 > :nth-child(1) img { left: 10%; }
.count-5 > :nth-child(2) img { left: 20%; }
.count-5 > :nth-child(3) img { right: 40%; }
.count-5 > :nth-child(4) img { right: 25%; }
.count-5 > :nth-child(5) img { right: 10%; }
.count-4 > :nth-child(1) img { left: 15%; }
.count-4 > :nth-child(2) img { left: 25%; }
.count-4 > :nth-child(3) img { right: 33%; }
.count-4 > :nth-child(4) img { right: 17%; }
.count-3 > :nth-child(1) img { left: 25%; }
.count-3 > :nth-child(2) img { left: 35%; }
.count-3 > :nth-child(3) img { right: 25%; }

/* Video & Audio content */
#multimedia { float: right; width: 59.26%; margin: auto; }
#audio { display: block; width: 80%; height: 24px; }

#info { background: rgba(0,0,0,.1); }
#info .container { padding: 3em 0; margin-bottom: 0; border: 0; }
#pannel { float: right; width: 25%; padding: 1.85%; background: rgba(255,255,255,.25)url(/_assets/img/coffee-cup.png) no-repeat 90% 70%; }
#pannel p { margin: 0 7em 0 0; }

/* =vCards */
.vcard.alt { margin-bottom: 1.5em; }
.person img { display: block; max-width: 100%; margin-bottom: 1.5em; }
.person .note { font-size: 116.66%; }
.person .role { font-size: 50%; display: block; font-weight: normal; color: #4d4d4d; }
.person .tel, .person .email { font-size: 116.66%; }
#pullout { position: absolute; left: 0; width: 38.88%; }

.team { position: relative; float: right; width: 59.26%; margin-bottom: -3em; }
.team li { margin: 0 6.25% 3em 0; width: 29.166%; float: left; }
.team > li:nth-child(3n) { margin-right: 0; }
.team address { position: absolute; left: -68.75%; font-size: 116.66%; font-weight: bold; line-height: 1; }
.team .role { display: block; margin-top: 4px; font-weight: normal; color: #4d4d4d; }
.team a { -webkit-transition: all 0.2s ease-in; cursor: pointer; }
.team img { display: block; width: 99.25%; background: rgba(255,255,255,.2); }
.team li:hover img { background: rgba(255,255,255,1); -webkit-transform: scale(1.05); -moz-transform: scale(1.05); transform: scale(1.05); -moz-box-shadow: 0 10px 20px rgba(0,0,0,.5); -webkit-box-shadow: 0 10px 20px rgba(0,0,0,.5); box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.team a:hover, .team li:hover * { color: #000; }

/* =Navigation
-----------------------------------------------------------------------------------------*/
#main { position: relative; top: -3.666em; max-width: 81em; margin: 0 auto; overflow: hidden; background: #000; }
#main ul { margin: 0 0 3em 40.2%; }
#main li { float: left; margin-right: 1.5%; font-size: 116.66%; line-height: 2; }
#main a { display: block; padding: 0 .5em; color: #fff; -webkit-transition: color .2s linear; }
#main a:hover { color: #be3c14; }
#main a:active, #main em a { font-style: normal; color: #be3c14; }

#sub { position: relative; top: -3em; left: -.9em; padding-bottom: .4em; margin-bottom: 0; overflow: hidden;  }
#sub li { float: left; }
#sub a { display: block; padding: 1.2em 1em .6em 1em; color: #4d4d4d; font-weight: normal; }
#sub em a { color: #be3c14; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 1px; -moz-box-shadow: rgba(0,0,0,.2) 0 1px 1px; background: #fff; font-style: normal; }
#sub a:hover { color: #be3c14; }
#sub a:active { padding-top: 1.3em; margin-bottom: -.1em; }

.supp li { position: relative; clear: right; border-bottom: 1px solid rgba(0,0,0,.1); font-size: 108.3%; }
.supp .last { border-color: rgba(0,0,0,.2); }
.supp ul { border-top: 1px solid rgba(0,0,0,.2); }
.supp h3 { margin-bottom: .45em;  }
.supp a { display: block; padding: .615em 2em .615em 0; font-weight: bold; }
.supp abbr { position: absolute; top: .615em; right: 0; padding: 0 7px; border: 0; font-weight: normal; cursor: pointer;  text-align: right; background: rgba(255,255,255,.6); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } 
.supp em a { font-style: normal; color: #333; }
.supp abbr { color: #999; }

/* =Images
----------------------------------------------------------------------------------------- */
img[src*=photos] { padding: 1px; }
img[src*=photos], img[src*=gallery] { -moz-box-shadow: 0 1px 5px rgba(0,0,0,.3); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.3); box-shadow: 0 1px 5px rgba(0,0,0,.3); -webkit-transition: all 0.25s ease-in; }
img[src*=photos]:hover, img[src*=gallery]:hover { -moz-box-shadow: 0 1px 5px rgba(0,0,0,.5); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.5); box-shadow: 0 1px 5px rgba(0,0,0,.5); }
.photo.alt { margin-bottom: 3em; }
#do img { display: block; margin-bottom: 3em; }
.entry-content img { display: block; margin: 3em 0; }

/* =Modernizr
----------------------------------------------------------------------------------------- */
.no-rgba #pannel { background: #d8d8d3 url(/_assets/img/coffee-cup.png) no-repeat 90% 70%; }
.no-rgba #info { background: #ccccc5; }
.no-rgba .articles > li, .no-rgba #comments ol > li { border-bottom: 1px solid #ccccc5; }
.no-rgba .container { border-bottom: 3px solid #ccccc5; }
.no-rgba .oops { border: 3px solid #ccccc5; border-width: 3px 0; }
.no-rgba .container.alt { border: 0; }
.no-rgba [id="gallery"] img { background: url(/_assets/img/10-black.png); }
.no-rgba #comments { border-top: 3px solid #ccccc5; }
.no-rgba .team img { background: #e9e9e3; }
.no-rgba .team a:hover img { background: #fff; }
.no-rgba #work figcaption { background: url(/_assets/img/70-black.png); }
.no-boxshadow #sub em a, .no-rgba .supp li { border-bottom: 1px solid #ccccc5; }
.no-boxshadow #work li { padding: 0; }
.no-rgba .supp .last { border-color: #b6b6b0; }
.no-rgba .supp ul { border-top: 1px solid #b6b6b0; }
.no-borderradius .supp abbr { padding: 0; }
.placeholder { color: #999; }