@charset "UTF-8";
/****** CSS Document ******/

/* Clear styles */
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,
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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
/* remember to define focus styles! */
:focus { outline: 0;}
body { line-height: 1; color: black; background: white;}
ol, ul { list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: separate; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}


/*** Main Layout ***/
body { background: #b6d065 url(../images/ignition-bg.png) center repeat-y; font-family: Arial, Helvetica, sans-serif; }

h1 { font-size: 16px; font-weight: bold; color: #68a920; margin-bottom: 10px; line-height: 18px; }
h2 { font-size: 1.5em; font-weight: bold;}
h3 { font-size: 1.3em; font-weight: bold;}
h4 { font-size: 1em; font-weight: bold;}
h5 { font-size: 0.8em; font-weight: bold;}
h6 { font-size: 0.7em; font-weight: bold;}

.wrapper { width: 894px; margin: 0 auto; padding: 0 33px 0 33px; background: #ffffff; }

.clear { display: block; clear:both; height:0px; overflow:hidden; }
.clearfix:after{content: ".";display:block;height:0;clear:both;visibility: hidden;}
.clearfix {display: inline-block;}* html 
.clearfix {height:1%;}.clearfix {display:block;}

a, a:visited { text-decoration: none; font-weight: bold; color: #68a920; font-family:Verdana, Arial, Helvetica, sans-serif; }
a:hover { text-decoration: underline; }

p { font-family:Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size: 13px; line-height: 16px; }

.content ul { list-style: disc; font-family:Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size: 13px; line-height: 16px; margin: 5px 0 5px 30px; }

strong { font-weight: bold; }
em { font-style: italic; }
.left { display:inline; float:left; }
.right { display:inline; float:right; }

/*** Header ***/
.header { margin: 10px; }

.header-right { float: right; width:  400px; }
.header-top {  }

#logo { float: left; width: 259px; height: 66px; display: block; margin: 0; }
#login-button {  width: 400px; margin: 0; text-align: right; }
#login-button a { font-weight: bold; color: #6b6b6d; font-size: 14px; text-decoration: none; display: block; padding: 0 0 2px 20px; width: 110px; margin-left: 270px; text-align: right; background: url(../images/arrow.png) 0 0 no-repeat; }

.intouch { width: 400px; text-align: right; color: #000000; font-weight: bold; font-size: 16px; line-height: 22px; margin-top: 5px; }
.phoneno { color: #63a619; display: block; font-size: 25px; }

/* Main Nav */
ul#nav { margin: 10px 0 0 5px; list-style: none; }
#nav li { float: left; margin-left: 35px; float:left; position:relative; z-index:20; }
#nav li.home { margin: 0; }
#nav li a { color: #6b6b6d; text-transform: uppercase; font-weight: bold; font-size: 14px; display: block; padding: 10px 10px 10px 10px; text-decoration: none; z-index:35; position:relative; }
#nav li a:hover { color: #68a920; }

#home .home a, #about .about a, #services .services a, #buy .buy a, #work .work a, #contact .contact a, #c3 .services a, #bespoke .services a, #overhaul .services a, #website .services a, #starter .services a   { color: #68a920; }

#nav ul a { line-height:20px; padding: 0; font-weight: normal; margin: 0; border-bottom: 1px solid #68a920; }
#nav ul { position:absolute; display:none; width: 185px; top:33px; left:-1px; background: #fff; list-style: none; border-left: 1px solid #68a920; border-right: 1px solid #68a920; margin: 0; padding: 0; border-top: 1px solid #68a920; z-index: 99999; }
#nav ul li { margin: 0; z-index: 100; }
#nav li ul a { width: 175px; float:left; text-align:left; padding:2px 0 2px 10px; font-size: 12px; color: #6b6b6d; margin: 0; }


#nav li.services a { background: url(../images/down-arrow.png) right 5px no-repeat; padding: 10px 20px 9px 0; }
#nav li.services a:hover { background: url(../images/down-arrow.png) right -46px no-repeat; }
#nav li.services ul a { background: #fff; padding:2px 0 2px 10px; }
#nav li.services ul a:hover { background: #fff; padding:2px 0 2px 10px; }

#nav li.work a { background: url(../images/down-arrow.png) right 5px no-repeat; padding: 10px 20px 9px 0; }
#nav li.work a:hover { background: url(../images/down-arrow.png) right -46px no-repeat; }
#nav li.work ul a { background: #fff; padding:2px 0 2px 10px; }
#nav li.work ul a:hover { background: #fff; padding:2px 0 2px 10px; }

#nav li.buy a { background: url(../images/down-arrow.png) right 5px no-repeat; padding: 10px 20px 9px 0; }
#nav li.buy a:hover { background: url(../images/down-arrow.png) right -46px no-repeat; }
#nav li.buy ul a { background: #fff; padding:2px 0 2px 10px; }
#nav li.buy ul a:hover { background: #fff; padding:2px 0 2px 10px; }

#nav li.work ul { width: 140px; } 
#nav li.work ul li { width: 140px;  }
#nav li.work ul a { width: 120px; padding: 2px 10px; }
#nav li.work ul a:hover { padding: 2px 10px; } 

#work li.work ul a , #services li.services ul a, #c3 li.services ul a, #bespoke li.services ul a, #overhaul li.services ul a, #website li.services ul a, #starter li.services ul a, #buy li.buy ul a { color: #6b6b6d; background: #fff; }
#work li.work ul a:hover , #services li.services ul a:hover, #c3 li.services ul a:hover, #bespoke li.services ul a:hover, #overhaul li.services ul a:hover, #website li.services ul a:hover, #starter li.services ul a:hover,
#buy li.buy ul a:hover { color: #68a920; background: #fff; }

#top #nav ul ul{ top:auto; border-top:none; }	

#nav li ul ul { left:200px; top:0px }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display:block; }


/*** Drop In ***/
#dropin { width: 859px; height: 150px; display: none; margin: 10px 0 0 0; padding: 0 11px 0 14px; background: none; }
#dropin h3 { text-transform: uppercase; font-size: 14px; color: #63A619; }

#signup { width: 551px; float: left; padding: 10px 0; }

#c3login { width: 235px; height: 144px; float: right; font-size: 12px; padding: 10px; background: url(../images/login-box.png) no-repeat; } 
#c3login a { color: #63A619; }
#c3login .label { width: 65px; text-align: right; display: inline; float: left; margin-right: 5px; }
#c3login div { margin-top: 6px;  }
#c3login input { width: 145px; background: url(../images/boxgrad.jpg); border:1px solid #d6d6d6; color:#333; font:12px Verdana,Arial,sans-serif; padding:5px 5px 0; margin-bottom:5px; height: 19px; }
#c3login div#subButton { padding: 0 3px; }
#c3login #subButton a { vertical-align: bottom; font-size: 10px; line-height: 14px; display: block; width: 100px; float: left;  color: #68a920; margin: 0 0 0 6px; }
#c3login #subButton input { width: 86px; height: 28px; float: right; background: none; padding: 0; margin: 0; border: none; margin: 0 3px 0 0; }
.block { clear:both; float:left; width:100%; }

/*** Main Content ***/

/* Dock */
.dock-holder { display: block; height: 160px; }
#dock { width: 100%; top: 70px; position: relative; left: 0px; }
.dock-container { position: absolute; height: 60px; padding-left: 20px;}

a.dock-item { display: block; font: bold 11px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; }
.dock-item span { display: none; padding: 0 0 0 20px; color: #6b6b6d; }
.dock-item img { border: none; margin: 5px 10px 0px; width: 100%; }

/* layout */
.content { padding: 20px 10px 5px 50px; font-family:Verdana, Arial, Helvetica, sans-serif; color: #666666; font-size: 13px; line-height: 16px; }
#home .content { background: #fff url(../images/grass-home.jpg) bottom left no-repeat; padding: 0 0 20px 0; position: relative; margin: 0; }
#services .content, #c3 .content, #bespoke .content, #overhaul .content, #starter .content, #website .content, #buy .content, #emailtool .content, #marketing .content, #brand .content, #webdev .content { padding: 0; margin: 0; }

.con-left { width: 400px; float: left; padding: 20px 0 0 130px; position: relative; }
#home .con-left { width: 400px; float: left; padding: 20px 0 0 138px; position: relative; }
#services .con-left, #c3 .con-left, #bespoke .con-left, #overhaul .con-left, #starter .con-left, #website .con-left, #buy .con-left, #emailtool .con-left, #marketing .con-left, #brand .con-left, #webdev .con-left { width: 500px; float: left; padding: 20px 0 0 50px; position: relative; }

.con-right { width: 255px; float: left; margin: 0 0 0 80px; overflow: hidden; display: inline; }
#services .con-right, #c3 .con-right, #bespoke .con-right, #overhaul .con-right, #starter .con-right, #website .con-right, #buy .con-right, #emailtool .con-right, #marketing .con-right, #brand .con-right, #webdev .con-right { width: 255px; float: right; margin: 0 0 0 80px; overflow: hidden; display: inline; }


.black { color: #000000; }
.green { color: #68a920; }

a#brochure { color: #000; margin-top: 20px; display: block; width: 400px; }
#buy-button a { width: 110px; height: 110px; display: block; text-indent: -9999px; position: absolute; bottom: 280px; left: 0; }

/* Meet the Team */

#about .html { width: 600px; }

#slideshow { width: 825px; margin-top: 10px; }

#slideshow ul { margin: 0; padding: 0; list-style-type: none; height: 1%;}

#slideshow ul:after { content: "."; clear: both; display: block; height: 0;visibility: hidden;}            
#slideshow .slides { overflow: hidden; width: 500px;  }
#slideshow .slides ul { width: 6000px;}
#slideshow .slides li { width: 275px; float: left; height: 380px; padding: 0 225px 0 0; }
#slideshow .slides h2 { margin: 0 0 10px 0; color: #68a920; font-size: 16px; line-height: 18px; text-transform: uppercase; font-weight: normal; }
#slideshow .slides h2 .role { color: #000; font-size: 14px; line-height: 16px; }
#slideshow .slides p { }

/* Full body shots */
#slideshow .slides li#mikeb { background: url(../images/mike.jpg) bottom right no-repeat; }
#slideshow .slides li#ben { background: url(../images/ben.jpg) bottom right no-repeat; }
#slideshow .slides li#john { background: url(../images/john.jpg) bottom right no-repeat; }
#slideshow .slides li#rowena { background: url(../images/rowena.jpg) bottom right no-repeat; }
#slideshow .slides li#ken { background: url(../images/ken.jpg) bottom right no-repeat; }
#slideshow .slides li#andy { background: url(../images/andy.jpg) bottom right no-repeat; }
#slideshow .slides li#adam { background: url(../images/adam.jpg) bottom right no-repeat; }
#slideshow .slides li#mikem { background: url(../images/mikem.jpg) bottom right no-repeat; }
#slideshow .slides li#james { background: url(../images/james.jpg) bottom right no-repeat; }  
#slideshow .slides li#rebecca { background: url(../images/rebecca.jpg) bottom right no-repeat; }  
#slideshow .slides li#david { background: url(../images/david.jpg) bottom right no-repeat; }
#slideshow .slides li#glynis { background: url(../images/glynis.jpg) bottom right no-repeat; } 

/* slideshow nav */
#slideshow .slides-nav { float: left; width: 300px; margin-right: 20px;}
#slideshow .slides-nav li { float: left; }
#slideshow .slides-nav li a { display: block; margin: 0 20px 20px 0; width: 80px; height: 80px; outline: none;  text-indent: -9999px; }

/* colour image */
#slideshow .slides-nav li.mikeb { background: url(../images/mike-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.ben { background: url(../images/ben-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.john { background: url(../images/john-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.rowena { background: url(../images/rowena-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.ken { background: url(../images/ken-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.andy { background: url(../images/andy-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.adam { background: url(../images/adam-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.mikem { background: url(../images/mikem-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.james { background: url(../images/james-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.rebecca { background: url(../images/becca-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.david { background: url(../images/david-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.glynis { background: url(../images/glynis-thumb.jpg) 0 -80px no-repeat; }

/* grey image */
#slideshow .slides-nav li.mikeb a { background: url(../images/mike-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.ben a { background: url(../images/ben-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.john a { background: url(../images/john-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.rowena a { background: url(../images/rowena-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.ken a { background: url(../images/ken-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.andy a { background: url(../images/andy-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.adam a { background: url(../images/adam-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.mikem a { background: url(../images/mikem-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.james a { background: url(../images/james-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.rebecca a { background: url(../images/becca-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.david a { background: url(../images/david-thumb.jpg) 0 0 no-repeat; }
#slideshow .slides-nav li.glynis a { background: url(../images/glynis-thumb.jpg) 0 0 no-repeat; }

/* No js hover state */
#slideshow .slides-nav li.mikeb.hover a:hover { background: url(../images/mike-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.ben.hover a:hover { background: url(../images/ben-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.john.hover a:hover { background: url(../images/john-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.rowena.hover a:hover { background: url(../images/rowena-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.ken.hover a:hover { background: url(../images/ken-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.andy.hover a:hover { background: url(../images/andy-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.adam.hover a:hover { background: url(../images/adam-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.mikem.hover a:hover { background: url(../images/mikem-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.james.hover a:hover { background: url(../images/james-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.rebecca.hover a:hover { background: url(../images/becca-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.david.hover a:hover { background: url(../images/david-thumb.jpg) 0 -80px no-repeat; }
#slideshow .slides-nav li.glynis.hover a:hover { background: url(../images/glynis-thumb.jpg) 0 -80px no-repeat; }

#slideshow .slides-nav li.on,
#slideshow .slides-nav li.on a { background-position: 0 -80px; }
#slideshow .slides-nav li.on { background-position: 0 -80px; }


/* buy online */
input#addbasket { margin: 0; padding: 0; }
#leadtable { width: 500px; font-size: 13px; }
#leadtable td { vertical-align: middle; padding: 5px 0; }
#leadtable th { width: 114px; font-weight: bold; }
th#basketcol { width: 158px; }

#contable { width: 500px; font-size: 13px; }
#contable td { vertical-align: middle; padding: 5px 0; }
#contable th { width: 33%; font-weight: bold; }

.boldgreen { color:#68A920; font-weight:bold; }
#leadtable .top-align td { vertical-align: top; }


#vat { color: #999; font-size: 10px; }

#leadterms { display: none; }

/* jQuery lightBox plugin - Gallery style */
#gallery {padding: 0 0 4px; text-align:center;}
#gallery ul { list-style: none; margin-left:0px }
#gallery ul li { display: inline; }
#gallery ul img {border: 4px solid #CCC;}
#gallery ul a:hover img {border: 4px solid #b7d065;color: #FFF;}
#gallery ul a:hover { color: #fff; }

/* our work */
.workscroll { width: 770px; margin: 0 0 0 35px; }
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 680px;
	height:120px;
	/* custom decorations */
	border:1px solid #ccc;
	background:url(/img/global/gradient/h300.png) repeat-x;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}
#image_wrap { margin: 20px 0 0 140px; position: relative; }
#image_caption {
	position: absolute;
	bottom: 0;
    width: 490px; 
    height: 1.3em; 
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0; 
    padding: .25em 5px; 
    background: url(../images/caption-bg.png) repeat; 
    color: #fff; 
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 5px 20px 21px;
	background-color:#fff;
	padding:2px;
	border:1px solid #ccc;
	cursor:pointer;
	width:100px;
	height:75px;
	
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(../images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}

/* right */
a.rightbut 				{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.rightbut:hover 		{ background-position:-30px -30px; }
a.rightbut:active 	{ background-position:-60px -30px; } 


/* left */
a.leftbut				{ margin-left: 0px; } 
a.leftbut:hover  		{ background-position:-30px 0; }
a.leftbut:active  	{ background-position:-60px 0; }

/* up and down */
a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	

/* contact */
#contact .left { width: 280px; }
#contact .right { width: 500px; }
#contact .left a.map { border: 2px solid #dddddd; width: 276; height: 237px; display: block; }
#contact .left a:hover.map { border: 2px solid #999; }

#contact #contactform .left { width: 200px; margin-right: 20px; }
#contact #contactform .right { width: 280px; }

#contactform h3 { font-size: 16px; font-weight: bold; color: #68a920; margin-bottom: 10px; line-height: 18px; text-transform: uppercase; }
#contactform label { color:#555555; display:block; font-size:12px; font-weight:bold; margin-bottom:8px; font:12px Verdana,Arial,sans-serif; }
#contactform label span { color: #cccccc; }
#contactform .left input,
#contactform textarea { background: url(../images/text-area.png); border:1px solid #d6d6d6; color:#333; font:12px Verdana,Arial,sans-serif; padding:5px 5px 0; margin-bottom:14px; height: 19px; width: 188px; }
#contactform textarea { height:190px; overflow:auto; width:268px; }
#contactform .right input { float: right; margin: 10px 0 0 0; }
#newstick { float: left; margin:3px 3px 10px 0; padding:0; width:20px; }
#contactform .block { margin: 10px 0 0 0; }

#contactform label.error span { color: red; }

/* Right Column */
.box { width: 195px; background: url(../images/round-box.png) top center no-repeat; padding: 20px 30px 5px 30px; }
#blogfeed a { margin-bottom: 10px; display: block; font-size: 14px; font-weight: normal; color: #666666; }
#blogfeed h1 { text-transform: uppercase; }
#sidebasket img { margin-top: 10px; }
.box-bot { height: 10px; width: 255px; background: url(../images/round-box.png) bottom center no-repeat; margin-bottom: 25px; }

#blogfeed .description { display: none; }
#blogfeed .publish_date { display: none; }

.feed { height: 80px; overflow: hidden; }
.innerfade { height: 145px; }
#portfolio { list-style: none; margin: 10px; height: 143px; overflow: hidden; }
h1#portheading { text-transform: uppercase; margin-left: 10px; }
a#cast { padding: 0 0 0 12px; }

/*** Footer ***/
.footer { height: 55px; width: 749px; padding: 154px 0 0 145px; background: url(../images/grass-ltgreen.jpg) bottom right no-repeat; }
#c3 .footer { background: url(../images/grass-yellow.jpg) bottom right no-repeat; }
#bespoke .footer { background: url(../images/grass-purple.jpg) bottom right no-repeat; }
#overhaul .footer { background: url(../images/grass-drkblue.jpg) bottom right no-repeat; }
#starter .footer { background: url(../images/grass-ltgreen.jpg) bottom right no-repeat; }
#website .footer { background: url(../images/grass-dkgreen.jpg) bottom right no-repeat; }
#buy .footer { background: url(../images/grass-ltblue.jpg) bottom right no-repeat; }

.footer p { color: #999999; line-height: 16px; font-size: 12px; font-weight: normal; }
#ft-home { width: 550px; color: #999999; line-height: 16px; font-size: 12px; font-weight: normal; margin: 140px 0 0 140px; }