/* ------------- RESET STYLES MOVED IN HERE -------------------------------------- */
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;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* 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;
}

/* ----------- CORE STYLES ------------------------------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

body {
    margin: 0px;
    padding: 0px; 
    font-family: Verdana, Arial, helvetica, sans-serif;
    background:#3F3E43 url('images/grey-generic-bg.jpg') top center repeat-x;
    font-size: 0.7em;
}

#pre-header {
    width: 930px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 10px;
    padding-bottom: 12px;
    font-family: Georgia, Times New Roman, Serif;
}

#keywords {
    width: 200px;
    text-align: center;
}

#pre-header p, #pre-header ul {color:#fff;}
#pre-header ul li {float:left; padding:0 5px}
#pre-header ul li a {color:#fff;}
#pre-header ul li a:hover {color:#fff; }
#pre-header ul li.br { border-right: 1px solid #ffffff;}
#pre-header p#keywords {padding:0 0 0 0; margin:0 0 0 0;}

#main-container {
    min-width: 990px;
    margin-bottom: 0px;
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 990px;
    text-align: left;
    background-color:#fff;
}

#header 
{
    background:url('images/header-bg-site.gif');
    padding: 0px 0px 0px 0px;
    height: 152px;
}

#logo {
    float: left;
    display: block;
    margin-right: 43px;
    margin-bottom: 0px;
    padding-top:17px;
    padding-left: 30px;
}


/* HOME AND ABOUT HEADER */
#header-desc {
    margin-left: 360px;
    padding-top: 16px;
}

#header-desc h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0px;
    color:#3F3E43;
}

#header-desc p a {
    margin-bottom: 0px;
}

#header-desc div p {
    margin-top: 0px;
}

#header-desc div p a.smallArrow {
    position: relative;
    top: 5px;
    left: -4px;
}

/* BLOG HEADER */
#header-blog {
    margin-left: 360px;
    padding-top: 16px;
    padding-right: 30px;
}

#header-blog h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0px;
}

#header-blog p a {
    margin-bottom: 0px;
}

/* OTHER HEADER */
#header-cta {
    float: right;
}

#header-cta #contact { 
    background: none; 
    padding-bottom: 0px;
    width: 495px;
    padding-top: 40px;
}

#header-cta #contact #phone {
    width: 247px;
}

#header-cta #contact #email {
    width: 247px;
}

/* TOP NAVIGATION */
.topnav {
    width: 988px;
    margin-left: 1px;
    margin-right: 1px;
    height: 48px;
    margin-bottom: 1px;
}

.underline {
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 1px;
}

#navigation {
    margin:0px;
    list-style: none;
    padding-left:0px;
}

#navigation li {
    float: left;
}

#navigation a * {
    display: none;
}

#navigation a, #navigation a .hover {
    height: 48px;
    position: relative;
    display: block;
    background-image: url('images/black-navigation.jpg');
    background-repeat: no-repeat;
    background-position: right-top;
    cursor: pointer;
}

/* individual navigation items */
#navigation a.home {
    background-position: 0px 0px;
    width: 164px;
}

#navigation .highlight a.home:hover, #navigation a.home .hover {
    background-position: 0px -49px;
}

#navigation a.about {
    background-position: -164px 0px;
    width: 165px;
}

#navigation .highlight a.about:hover, #navigation a.about .hover {
    background-position: -164px -49px;
}

#navigation a.services {
    background-position: -329px 0px;
    width: 165px;
}

#navigation .highlight a.services:hover, #navigation a.services .hover {
    background-position: -329px -49px;
}

#navigation a.clients {
    background-position: -494px 0px;
    width: 165px;
}

#navigation .highlight a.clients:hover, #navigation a.clients .hover {
    background-position: -494px -49px;
}

#navigation a.portfolio {
    background-position: -659px 0px;
    width: 165px;
}

#navigation .highlight a.portfolio:hover, #navigation a.portfolio .hover {
    background-position: -659px -49px;
}

#navigation a.contact {
    background-position: -824px 0px;
    width: 164px;
}

#navigation .highlight a.contact:hover, #navigation a.contact .hover {
    background-position: -824px -49px;
}

/* SUB NAVIGATION */
/* Styles for the entire LavaLamp menu */
.subnav {
    position: relative;
    height: 34px;
    width: 988px;
    background: url("/css/images/sub-nav-bg.jpg") repeat-x top;
    padding: 0px 0px 0px 0px;
    margin: 0px 1px 0px 1px;
    overflow: hidden;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
}

/* Force the list to flow horizontally */
.subnav li {
    float: left;
    list-style: none;
    
}

/* Styles for each menu-item. */
.subnav li a 
{
    padding-bottom: 11px;
    padding-left: 30px;
    padding-right: 30px;
    padding:10px;    
    font-size: 0.9em;  
    font-family: Georgia, Times New Roman, Serif;
    position: relative; 
    text-align: center;
    display:block;
    background: url('/css/images/sub-nav-spacer.gif') no-repeat top right;
}

.subnav li a.no-spacer {
 background:none;
}

.subnav li a:hover, .subnav li a.current 
{
    color:#fff;
    background-color: #3F3E43;
  /*  background: #3F3E43 url('/css/images/sub-nav-spacer-blk.gif') no-repeat top right;*/
    }

#top-banner {
    width: 988px;
    margin-left: 1px;
    margin-right: 1px;
    height: 160px;
    margin-bottom: 30px;
}

#inner-top-banner, #portfolio-inner-top-banner, #blog-inner-top-banner {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    font-family: Georgia, Times New Roman, Serif;
    color: #FFFFFF;
    position: relative;
    background-color:#3F3D43;
}

#inner-top-banner { 
    height: 74px;
    margin: 0px 1px 1px 1px;
    width: 928px;
}

#inner-top-banner.wmd { background: url("images/web-mob-dev-bg.jpg") no-repeat;}    
#inner-top-banner.di { background: url("images/des-int-bg.jpg") no-repeat; }
#inner-top-banner.im { background: url("images/int-mar-bg.jpg") no-repeat;}

#portfolio-inner-top-banner { 
    margin: 0px 0px 1px 0px;
    width: 930px;
    height: 55px;
}

#blog-inner-top-banner {
    height: 55px;
    width: 928px;
    margin: 0px 1px 1px 1px;
}

#inner-top-banner .overlay {
    position: absolute;
    left: 682px;
    top: 0px;
    width: 306px;
    height: 89px;
}

#experts {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 5px 0px;
    font-size: 0.9em;
}

#inner-top-banner h2, #portfolio-inner-top-banner-content h2 {
    font-weight: normal;
}

#content {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 20px;
    background-color:#fff;
}

.centralise { text-align: center; }

#left {
    width: 435px;
    padding-right: 30px;
}

#right {
    width: 434px;
    padding-left: 30px;
    border-left: 1px solid #E0E0E0;
    margin-left: -1px;
}

.container-bottom {
    background: url('images/container-bottom.jpg') no-repeat top center;
    height: 30px;
}

.portfolio-container-bottom {
    background: url('images/portfolio-container-bottom.jpg') no-repeat top center;
    height: 30px;
}

.grey {
    color: #88878B;
}

/* STACKS */
.stack {
    padding: 0px 0px 30px 0px;
    background: url('images/separator-434.png') no-repeat center bottom;
    position: relative;
}

.stack img {
    margin-right: 15px;
    _margin-right: 0px;
}

.stack h2, .stack h2 a { 
    margin: 0px; 
    font-weight: bold;
    font-size: 1em;
}

.stack-content { 
    margin-left: 55px;
}

.stack p {
    margin-top: 0px;
}

.stack .grey {
    /*font-size: 10px;*/
}

#stack-first { 
    padding-top: 0px; 
}

#stack-last { 
    background: none;
    padding-bottom: 0px;
}

.stack .mt5 { margin-top: 5px }
.noimgstack h2 { margin-bottom: 3px; }

p.small { font-size: 0.9em; }

#design-dev {
    background: url('images/main-icons.jpg') no-repeat top left;
}

#design-dev:hover {
    background-position: 0px 0px;
}

#bespoke-app {
    background: url('images/main-icons.jpg') no-repeat 0px -110px;
}

#bespoke-app:hover {
    background-position: 0px -110px;
}

#onlinemarketing-seo {
    background: url('images/main-icons.jpg') no-repeat 0px -220px;
}

#onlinemarketing-seo:hover {
    background-position: 0px -220px;
}

.green #green-content {
    width: 380px;
    float: left;
    color: #717E2E;
}

.green h3 {
    /*font-size: 16px;*/
    font-weight: normal;
    font-size: 1.4em;
}

/* CONTACT, CASE STUDIES */
.rndcnrlft {
    background: url('images/rounded-corner-left.png');
    width: 7px;
    height: 35px;
    float: left;
}

.popoutrndcrnrlink { float: left; }

#rndcnrlink, .popoutrndcrnrlink a {
    background: #FFFFFF url('images/rounded-corner-middle-top.png') repeat-x;
    margin: 0px;
    padding: 10px 10px 0px 10px;
    height: 25px;
    float: left;
}

.rndcnrrght {
    background: url('images/rounded-corner-right.png');
    width: 4px;
    margin: 0px;
    padding: 0px;
    height: 35px;
    float: left;
}

/* CALL TO ACTION */
.cta {
    text-align: center;
    padding: 15px 20px 0px 20px;
}

#cta-img {
    padding: 0px;
}

#online-marketing-cta-background {
    background: url('/css/images/marketing-ui-cta.png') no-repeat right 0px;
    height: 87px;
    padding: 15px 20px 0px 20px;
}

#web-design-dev-cta-background {
    background: url('/css/images/design-dev-cta.png') no-repeat right 0px;
    height: 61px;
    padding: 20px 20px 0px 20px;
}

.cta h2, .cta h2.sf {
    color: #FFFFFF !important;
    margin-bottom: 10px;
}

.cta .rndcnrlft {
    background: url('images/dbl-rounded-corner-left.png');
    width: 7px;
    height: 41px;
    float: left;
    margin-bottom: 20px;
}

.cta p#rndcnrlink {
    margin: 0px;
    padding: 7px 0px 9px 0px;
    text-align: center;
    background: #FFFFFF url('images/rounded-corner-middle-top.png') repeat-x;
    float: left;
    width: 383px;
}

.cta .rndcnrrght {
    background: url('images/dbl-rounded-corner-right.png');
    width: 4px;
    margin: 0px;
    padding: 0px;
    height: 41px;
    float: left;
}

/* HOME AND CONTACT PGS CONTACT DETAILS */
#contact {
    background: url('images/separator-434.png') no-repeat center bottom;
    padding-bottom: 38px;
}

#contact #phone {
    border-right: 1px solid #E0E0E0;
    width: 216px;
}

#contact #phone img {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#contact #phone #phone-heading {
    margin-bottom: 9px;
}

#contact #email {
    width: 217px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#contact #email #email-heading {
    margin-bottom: 9px;
}

/* SERVICES OVERVIEW AND ERROR/T+C PAGES */
.tleft {
    width: 300px;
}

.tcentre {
    width: 327px;
    margin-left: -1px;
}

.tright {
    width: 301px;
    margin-left: -1px;
}

#top .tleft, #top .tcentre, #top .tright {
    border: none;
    text-align: center;
}

#top .tcentre, #top .tright {
    margin-left: 1px;
}

.tleft ul, .tcentre ul, .tright ul, .tleft ul li, .tcentre ul li, .tright ul li {
    list-style-type: none;
    margin-left: 0px;
    text-align: center;
    padding-left: 0px;
}

.tleft ul li, .tcentre ul li, .tright ul li {
    line-height: 200% !important;
    background: none !important;
    padding-left: 0px !Important;
}

a.imglink { 
    float: none; 
    text-align: center;
    margin: 0px auto 15px auto;
}

#icons img {
    margin-right: 15px;
}

#icons img.nm {
    margin-right: 0px;
}

/* ARROW */
.smallArrow {
    height: 18px;
    width: 18px;
    display: inline-block;
    background: url('images/small-arrow.gif') no-repeat;
    margin-left: 5px;
    position: relative;
    top: -3px;
}

a.smallArrow:hover, .dblLinkActive a.smallArrow {
    background-position: 0px -18px;
}

.dblLinkActive a { color: #3F3E43; }

/* POPOUT CONTACT FORM */
.slide-out-div {
    width: 149px;
    background: #27765c;
    color: White;
    padding: 10px 20px 10px 20px;
    z-index: 1000;
    height: 236px;
    visibility:hidden;
    _display: none;
}

.slide-out-div p {
    margin: 0px;
    padding: 0px 0px 8px 0px;
    line-height: normal;
}

.slide-out-div .hr {
    line-height: normal;
    font-size: 0;
    background: #3F3E42;
    height: 1px;
    width: auto;
    padding-bottom: 0px;
    margin-bottom: 8px;
}

.slide-out-div label {
    margin-bottom: 5px;
    margin-top: 0px;
    padding-top: 0px;
    line-height: normal;
    float: left;
    width: auto;
}

.slide-out-div input {
    width: 140px;
    margin-bottom: 10px;
    float: left;
}

a.handle {
    border-right: 1px solid #3F3E42;
}

.slide-out-div #sendPopout, .slide-out-div #closePopout {
    margin-top: 10px;
    width: 81px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
}

.slide-out-div #sendPopout {
    position: absolute;
    bottom: 20px;
    width: 81px;
    left: 53px;
}

.slide-out-div #sendPopout .popoutrndcrnrlink a {
    padding-left: 19px;
    padding-right: 19px;
}

.slide-out-div .closePopout {
    position: absolute;
    bottom: 12px;
    width: 81px;
    left: 53px;
}

.slide-out-div .closePopout .popoutrndcrnrlink a {
    padding-left: 18px;
    padding-right: 18px;
}

/* --- GLOBAL --- */
h1 {
    /*font-size: 17px;*/
    font-size: 1.5em;
    margin: 0px 0px 10px 0px;
    padding: 0px;
}

h2, h2 a {
    margin: 0px;
    padding: 0px;
    font-weight: normal;
    font-size: 1.5em;
}

h3, h3 a {
	font-weight: bold;
	margin: 0px;
	padding: 0px;
}

.sf { 
    font-family: Georgia, Times New Roman Serif; 
}

a {
    font-family: Georgia, Times New Roman Serif;
    text-decoration: none;
    font-weight: bold;
}

a, a:focus, a:hover { outline: none; color: #3F3E43; }

a:hover, a.selected { color: #3F3E43; }

p {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    line-height: 150%;
}

#content ul {
    margin-left: 0px;
    padding-left: 0px;
}

#content ul, #content ul li {
    line-height: 150%;
    margin-bottom: 10px;
}

#content li {
    /*list-style-type: none;*/
    background: url('images/grey-bullet.gif') no-repeat left 6px;
    padding-left: 15px;
}

.cb {
    clear: both;
    height: 0px;
    font-size: 0%;
    line-height: 0%;
}

.cl { clear: left; }

.cr { clear: right; }

.fl { float: left; }

.fr { float: right; }

.leftmost { margin-left: 0px !important; }

.db { display: block; }

a img, img a { border: 0px; }

.nom-nop {
    margin: 0px;
    padding: 0px;
}

.nmb { margin-bottom: 0px !important; }
.nmt { margin-top: 0px; }
.mt15 { margin-top: 15px; }
.mr9 { margin-right: 9px; }
.mb10 { margin-bottom: 10px; }
.mr5 { margin-right: 5px; }
.mb5 { margin-bottom: 5px; }

.hr {
    background: url('images/separator-434.png') no-repeat center bottom;
    padding-bottom: 37px;
}

div.hr { display: block; height: 0px; clear: both; }

p.hr, ul.hr { margin-bottom: 0px; }

.full-width-hr {
    background: url('images/separator-930.png') no-repeat center bottom;
    height: 20px;
    margin-top: 15px;
    margin-bottom: 20px;
}

p.label, p.label a {
    line-height: normal;
    margin: 0px;
    text-align: center;
    margin: 0px;
    font-weight: normal;
}

p.label a { 
    font-size: 1.4em; 
    display: block;
    _cursor: pointer;
}

/* FORMS */
label {
    width: 125px;
    padding-top: 4px;
    float: left;
    display: block;
    margin-bottom: 15px;
}

input, select, textarea {
    font-family: Verdana, Arial, helvetica, sans-serif;
    font-size: 10px;
    padding: 2px;
    float: left;
    width: 200px;
}

select {
    width: 150px;
}

textarea {
    width: 293px;
    overflow: auto;
    margin-bottom: 20px;
}

.error { color: Red; }

/* THUMBS FOR OUR WORK AND CS OVERVIEW PAGES */
div.csItemThumb {
    border: 1px solid #E0E0E0;
    margin-bottom: 10px;
    width: 225px;
}

div#lastCsItemThumb { margin-bottom: 0px; }

div.csItemThumb img {
    border-bottom: 1px solid #E0E0E0;
    display: block;
    width: 225px;
    height: 118px;
}

div.csItemThumb div {
    padding: 10px 10px 10px 10px;
}

div.csItemThumb div p {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

div.csItemThumb div p a {
    margin-bottom: 2px;
}

div#content div#left.fl ul
{
    padding-top:10px;
}

div#tweet p#twitter_update {margin-top:4px;}

/* FOOTER */
#footer {
    width: 990px;
    margin: 10px auto 10px auto;
    font-family: Georgia, Times New Roman, Serif;
    margin: 0 auto;
    font-size: 0.9em;
    /*height:250px;*/
    background: #3F3E42 url('images/footer-bg-nav.jpg') top center no-repeat;
}

#footer ul { list-style-type: none; padding: 10px 0 0 20px; margin: 0px; width:216px;}
#footer ul li { padding:0 10px 5px 10px;  font-size:1.1em;  font-weight:normal;}
#footer ul li img { padding:0px 7px 0 0;}
#footer ul li a {  color:#fff;  font-weight:normal;}
#footer div.fl ul#social {padding:0px 0 0 27px;}
#footer ul#social li {padding:0 0 0 0;}
#footer ul#social li a {margin-top:-10px;}
#footer ul li a:hover { color:#fff;  border-bottom:0px dotted #fff;   }
#footer ul li#leftborder { border-left: 1px solid #66666A; }
#footer ul li#noborder { border: none; }
#footer ul li.image { border-right: 0px; background: url('images/footer-spacer.gif') no-repeat right 6px;}
#footer ul li img { position: relative;  top: 8px;}
#footer ul li.text { margin-top: 6px;}
#footer ul li#first { padding-left: 30px;}
#footer ul li.last { padding-right: 30px; border-right: none;}
#footer div.col {background:url('images/footer-border-edge.jpg') bottom right no-repeat; margin-top:40px; height:165px; width:244px;}
#footer div.colend { margin-top:40px; height:185px;}
#footer p { font-family: Georgia, Times New Roman, Serif;color:#fff; font-size: 1.1em;  padding-left:30px;}
div#footer div.fl p a {color:#fff;}
div#footer img {padding-left:28px;}
#footer .small { font-family:Arial, Verdana, Sans-Serif; color:#fff;}
#footer div.fterms {clear:both; margin:5px auto 0 auto; width:930px;border-top:1px solid #555458; padding-top:10px;   text-align:center; }
#footer div.fterms ul { width:930px; padding-bottom:20px;}
div#footer div.fterms ul li {color:#fff; display:inline; padding:0 10px;}
div#footer div.fterms ul li.mid {border-left:1px solid #fff; border-right:1px solid #fff;}

/* DOTTED -------------  black underlines */
.dotme, .dblLinkParentParent, span#twitter-readmore a, #latest-blog .headline a, #twitter_update .headline a {border-bottom:1px dotted #666;}
.dotme:hover, .dblLinkParentParent:hover, span#twitter-readmore a:hover, #latest-blog .headline :hover, #twitter_update .headline a:hover {border-bottom:1px solid #666;}

/* white underlines */
#pre-header ul li a {border-bottom: 1px dotted #fff;}
#pre-header ul li a:hover {color:#fff; border-bottom: 1px solid #fff;}

div#footer div.fl p a, #footer ul li a {border-bottom:1px dotted #fff;}
div#footer div.fl p a:hover, #footer ul li a:hover {border-bottom:1px solid #fff;}

div.service-content h2.fl a.dblLink {border-bottom:1px dotted #666;}

a#emailaddr {font-weight:normal; font-size:150%; border-bottom:1px dotted #666;}
a#emailaddr:hover {border-bottom:1px solid #666;}

/*  BLACK STYLES --------------------------------------------- */


html.cufon-active body div#main form#form1 div#main-container div#container div#content div#right.fr div#latest-blog div.mb5 a#blogArrow.smallArrow

a, a:selected, a:visited {color: #252527; }

#navigation a, #navigation a .hover {
    background-image: url('images/black-navigation.jpg');
}

.subnav li.back {
    background: url("images/sub-nav-bg-blue-over.jpg") repeat-x right top;
}

.subnav li.back .left {
    background: url("images/sub-nav-bg-blue-over.jpg") repeat-x top left;
}

#inner-top-banner, #portfolio-inner-top-banner, #blog-inner-top-banner, #submit {
   background-color: #3F3E43
}

#content li {
    background-image: url('images/blue-bullet.png');
}

.subnav li.current a {
    color: #FFFFFF;
}

/* ENQUIRIES EMAIL */
#emailaddr 
{
    color:#262628;
    font-size:140%;
    font-weight:normal;
}

/* SERVICES LH NAV */
#servicesLhs ul li a:hover, #servicesLhs ul li a.selected {
    background: url('/css/images/sub-nav-bg-blue-over.jpg') repeat-x;
}

/* SERVICES CTA */
.cta {
    background: url('/css/images/blue-inner-top-banner.jpg') repeat-y;
}

/* BLOG */
#inner-top-banner-blog {
    background-color: #3F3E43;
}

/* POPOUT */
a.handle {
    background: url('images/contact-tab-green.png') !Important;
}

/* PORTFOLIO */
.caseStudyAvailable {
    background: url('images/case-study-available-blue.png');
}

ul.thumbs li a { background: #1D5385; }

.h-blue {color: #1D5686;}
.h-red {color: #9B142B;}
.h-green {color:#26765B}