/* @override http://www.mid.co.uk/stylesheets/mid */



@font-face {
	font-family: 'GraublauWebRegular';
	src: url('/fonts/graublauweb-webfont.eot');
	src: local('☺'), url('/fonts/graublauweb-webfont.woff') format('woff'), url('/fonts/graublauweb-webfont.ttf') format('truetype'), url('/fonts/raublauweb-webfont.svg#webfontRtcPg7b3') format('svg');
	font-weight: normal;
	font-style: normal;
}




/* @group Basics */

/* reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}


em {
	font-style: italic;
}
a img {
	border: none;
}

a:link {
	color: #6CA614;
	text-decoration: none;
	border-bottom: 1px dotted #6CA614;
}

a:visited {
	color: #6CA614;
		text-decoration: none;
	border-bottom: 1px dotted #6CA614;
}

a:hover {
	color: #6CA614;
	text-decoration: none;
	border-bottom: none;
}

body {color:  #333;
	font-family:"ff-meta-web-pro-1","ff-meta-web-pro-2", "GraublauWebRegular", sans-serif;
	line-height: 1.5;
}


.hide {
	display: none;
}

.clearfix {
	clear: both;
}

/* @end */

/* @group Forms */

form#freeform fieldset {
	padding: 0;
	margin: 0 0 36px 0;
	border: 0;
}

.form-row {
	clear: left;
	margin: 6px 0;
}

.submit-form-row {
	clear: left;
	margin-top: 36px;
}

#freeform em {
	font-style: normal;
	color: #D61C1B;
}

#freeform label {
	display: block;
	clear: left;
	float: left;
	margin: 11px 10px 0 0;
	width: 190px;
	line-height: 18px;
}

#freeform .form-row input {
	font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Graublau Web","Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	padding: 4px;
	margin-right: 10px;
	margin-left: 30px;
	width: 300px;
	line-height: 24px;
	color:  #444;
}

#freeform  textarea {
		font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Graublau Web","Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	padding: 4px;
	margin-left: 30px;
	width: 300px;
	line-height: 24px;
		color:  #444;

}

#freeform .form-row  #captcha {
	width: 110px;
}

#freeform .captcha-row  .note {
	color: #666;
	font-weight: normal !important;
}

#freeform .submit-form-row input {
	margin-left: 210px;
}

.captcha-row img {
	float: left;
	margin: 5px 10px 5px 30px;
}

.error-icon {
	float: left; 	margin: 10px 14px 0 0 ;

}

.error-field {
	background: #fdd;
	margin-left: 0 !important;
}



#errormsg {
	color: #D61C1B;
	margin-left: 225px;
}

#errormsg img {
	float: none;
	margin: 0;
	padding: 0;
}

#submit {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-radius: 20px;
	color: #fff;
	font-family: "Graublau Web","Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 16px;
	
	margin: 15px 7px 10px 0;
	padding: 5px 17px;
	background: #666;
	border: none;
	-webkit-transition-property: background;
	-webkit-transition-duration: 300ms;
	-webkit-transition-timing-function: ease-in-out;
}


#freeform input[type="submit"]:hover{border:0px;background-color:#6CA614; cursor: pointer;}


/* @end */

/*tooltips formatting*/

#tooltip {
	background: #fff;
	color: #000;
	opacity: 0.85;
	border: 5px solid #dedede;
}

#tooltip h3 {
	font: normal 10px;
	margin: 0;
	padding: 6px 2px;
	border: 0;
}

/*
	2010
	*/

body {
	background: url(/site_images/bg.png);
}

.wrapper {
	width: 990px;
	margin: 0 auto;
}




#nav {
	background: #629712 url(/site_images/navbg.jpg);
	color: #2A3D0A;
	}

#nav ul {
	float: right;
		padding: 0;
	text-transform: uppercase;
	font-size: 18px;
	font-weight: bold;
	list-style-type: none;
}

#nav ul li {letter-spacing: 1px;
	float: left;
	padding: 5px;
}

#nav a:link, 
	#nav a:visited {padding: 5px 10px 5px 10px;
	color: #fff;	background: transparent;
	text-decoration: none;
	border-bottom: none;
		-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-radius: 20px;
}

body.welcome li#navhome	a:link, 
body.welcome li#navhome	a:visited ,

body.about li#navabout	a:link, 
body.about li#navabout	a:visited ,

body.portfolio li#navportfolio	a:link, 
body.portfolio li#navportfolio	a:visited ,

body.blog li#navblog	a:link, 
body.blog li#navblog	a:visited ,

body.contact li#navcontact	 a:link, 
body.contact li#navcontact	 a:visited , 
#nav li.current  a:link, 
#nav li.current  a:visited	 {background:#5A8511;}


#nav a:hover, 
#nav a:active
 {background:#629712 !important;}
 	
ul#mainnav {clear:  right;
	margin: 40px 0 0 0;

}

ul#subnav {	margin: 6px 0 0 0;
	font-size: 14px;
	font-weight: normal;

}





a:link#logo,
a:visited#logo,
a:hover#logo,
a:active#logo {
			-moz-border-radius-bottomleft: 0 !important;
	-moz-border-radius-bottomright: 0 !important;
	-moz-border-radius-topleft: 0 !important;
	-moz-border-radius-topright: 0 !important;
	-webkit-border-radius: 0 !important;
	
	display: block;padding:  0 !important;
	float: left;
	text-indent: -9999em;
	width: 224px;
	height: 42px;
	background: transparent url(/site_images/mid2.png) no-repeat !important;
	margin-top: 29px; margin-left: 10px;
}

a:hover#logo,
a:active#logo {
	background-position: 0 -42px !important;

	}



ul#skip {float:  left ; width:  1px;height:  1px;padding: 0;margin:0;
		list-style-type: none; 
}
ul#skip li{padding: 0;margin: 0;
		font-size: 12px;
}
ul#skip li a {text-transform: lowercase; padding: 0;margin: 0; font-weight: normal;
		font-size: 12px;padding: 0;margin: 0;
}




body.welcome #nav .wrapper {
	height: 358px;
	background: url(/site_images/welcome.png) bottom left no-repeat;
}


body.about #nav .wrapper {
	height: 358px;
	background: url(/site_images/about.png) bottom left no-repeat;
}

body.about#inside  #nav .wrapper {
	height:  196px;
	background: url(/site_images/about_light.png) bottom left no-repeat;
}


body.portfolio #nav .wrapper {
	height: 358px;
	background: url(/site_images/portfolio.png) bottom left no-repeat;
}

body.portfolio#inside #nav .wrapper {
		height:  196px;
	background: url(/site_images/portfolio_light.png) bottom left no-repeat;
}



body.contact #nav .wrapper {
	height: 358px;
	background: url(/site_images/contact.png) bottom left no-repeat;
}

body.contact#inside #nav .wrapper {
		height:  196px;
	background: url(/site_images/contact_light.png) bottom left no-repeat;
}


body.blog #nav .wrapper {
	height: 358px;
	background: url(/site_images/blog.png) bottom left no-repeat;
}

body.blog#inside #nav .wrapper {
		height:  196px;
	background: url(/site_images/blog_light.png) bottom left no-repeat;
}


h1 {
	color:  #2A3D0A;
	text-align: right;
	clear: both;
	font-size: 18px;
	line-height: 24px;
	padding-left: 200px;
	padding-right: 15px;
		padding-top: 24px;

}

/* make room for subnav */
 body.portfolio h1 {
	padding-top: 18px;
}

/* make room for subnav */
 body.portfolio h1 {
	padding-top: 18px;
}


h2 {margin:  24px 0 ; padding:  0; text-align: left;
	font-size: 24px; line-height:24px; letter-spacing: -1px;
	
}


 h2.headline , #main h1 {margin:  24px 20px; padding:  0; text-align: left;
	font-size: 20px; line-height:24px; letter-spacing: 0;
}




h3 {
	font-weight: bold;
	font-size: 18px; line-height: 24px;  margin-bottom : 12px  ; 

}

h4 {
	font-size: 18px; line-height: 24px;  margin-bottom : 6px  ; 

}

#main {
	clear: both;
}

#main p, #main ul {
	font-size: 16px;
	line-height: 24px;
	padding-bottom: 12px;}
	
#main  .col-1 ul {
	padding-left:  3em;

}

.col-1 {
	width: 600px;
	float: left;
padding-left:  20px;
}

#footer .col-1 {
		width: 900px;

}
.col-2 {
	width: 300px;
	float: left;
	margin-left: 70px;
}

.col-2 h3 {
	font-weight: normal;
	text-transform: uppercase;
	font-size: 18px;
	color: #666;
	letter-spacing: 2px;
}

.col-2 ul {
	padding-top: 0px;
}

.col-2 li {
	list-style: none;	padding-bottom: 6px;

}

#main .col-1 {
	margin-top: 30px;
}

#main .col-1 p , #main .col-1 ul{
font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2","Graublau Web","Helvetica Neue", Helvetica, Arial, sans-serif;}

#main .col-2 {
	margin-top: 84px;
}

body#inside.portfolio 
#main .col-1  {
	margin-top: 0px;
}

body#inside 
#main .col-2 {
	margin-top: 30px;
}


#footer {
	margin-top: 12px;
	clear: both;
	float: left;
	width: 100%;
	background: #eee;
	font-size: 12px;
}

/* 	background: #ECE6DC;
 */

#footer ul {
	display: block;
	float: none;
	list-style-type: none;
	padding: 24px 0;
}

#footer ul li {
	float: left;
	padding-right: 10px;
}

#footer p {
	clear: left;
	line-height: 18px;
	padding-bottom: 24px;
}

#ee {
	background: url(/site_images/ee.png) no-repeat center left;
	padding-left: 22px;
}

/* @group Blog */

p.author {color:  #666;
font-size:  12px !important;
	text-transform: uppercase;
letter-spacing: 2px;
	margin:  -18px 0 0 0;
}

.col-2 ul li em {
	font-style: normal;color:  #fff;font-size:  10px; background:  #6CA614 ; padding:   0 4px;	margin-left:  4px;
	-moz-border-radius-bottomleft: 2px;
	-moz-border-radius-bottomright: 2px;
	-moz-border-radius-topleft: 2px;
	-moz-border-radius-topright: 2px;
	-webkit-border-radius: 2px;

}

.col-2 ul li a:hover  em  {
	background:  #6CA614 ; 
}
/* @end */

/* @group Portfolio */


.clickable {
	cursor: pointer; cursor:hand;
}

div.portfolio .hover {
	color: #fff;
}

div.portfolio { margin-top: 12px;

	width: 100%; color:  #fff; background-colour:  #666;}

.grey { background: #333 url(/site_images/greygrad.jpg) repeat-x
	
}
.red { background: #333 url(/site_images/redgrad.jpg) repeat-x
	
}
.blue { background: #333 url(/site_images/bluegrad.jpg) repeat-x
	
}
.green { background: #333 url(/site_images/greengrad.jpg) repeat-x
	
}
.pink { background: #333 url(/site_images/pinkgrad.jpg) repeat-x
	
}

.black { background: #333 url(/site_images/blackgrad.jpg) repeat-x
	
}

div.portfolio  .wrapper {background-repeat: no-repeat;
	background-position: bottom right; height: 240px
}


div.clientname {
	float:  left; width:  400px;
}



div.portfolio h3 {
	padding:  48px 0 12px 40px ;font-size:  30px; font-weight: normal;line-height:  30px;letter-spacing:  -1px;
}
div.portfolio p {font-size:  14px !important; line-height: 18px !important;
padding-left: 40px;	}


div.portfolio blockquote{
	text-indent: -0.5em;
}
div.portfolio a:link, 
div.portfolio a:visited {
	color:  #fff; border-bottom: none;
}

div.portfolio p.more {margin: 30px 20px 0 0; 
padding-right: 0;	padding-left: 0; padding-top:  12px;	float: right;
}
 
 
 p.more a:link,
 p.more a:visited {
	-moz-border-radius-bottomleft: 20px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	-webkit-border-radius: 20px;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	padding: 8px 10px 5px 10px;
	background: transparent ;
	border: 3px solid #fff;

}
p.more a:hover , p.more a:active{
	background: #6CA614
}



#screenshot {width: 100%;	height:  416px; ;margin:  6px 0 0 0 ; background: url(/site_images/screenshot_tile.jpg); color:  #fff;float: left;
}

#screenshot a {
	color:  #fff; border-bottom-color: #fff;;
}


p.extlink {color:  #666;
margin:  -12px 0 12px 0;
}
p.client {		font-size:  14px !important;
color:  #444444;
	font-style: italic; 
}
p.client strong{font-style: normal;font-weight:normal;
	text-transform: uppercase;
	letter-spacing: 3px;
}


.col-1 blockquote { margin:  0 30px; color:  #444;
	text-indent: -0.5em !important;
}
.col-2 blockquote { color:  #666;
	text-indent: -1.4em !important;
}
.col-2 blockquote p {
	font-size:  14px !important;
}
div.col-2 blockquote p strong { font-weight: normal;
	color: #6CA614 ; font-size:  36px;
	vertical-align: bottom; line-height:  18px; padding-right: 5px;
}

ul.pagination  {

color:  #666;
	list-style-type: none;
	margin: 36px 0 !important; padding:  0 !important;
	text-transform: uppercase;
letter-spacing: 2px;}

ul.pagination  li { font-family:"ff-meta-web-pro-1","ff-meta-web-pro-2", "GraublauWebRegular", sans-serif;font-size:  12px;
	float: left;
	padding-right: 20px;
}

ul.smallpagination  { 

	list-style-type: none;
	margin: 36px 0;
		padding-left: 10px;
	text-transform: uppercase;
letter-spacing: 2px;}

ul.smallpagination  li {font-size:  12px;
	float: left;
	padding-left: 10px;
}




/* @end */

/* @group AddThis */

div.addthis_toolbox {
	padding:  10px 0 ;
}

div.addthis_toolbox  a{
	border-bottom: none;	color: #6CA614;


}

/* @end */