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

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

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

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

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

/* @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: #D4470A;
	text-decoration: none;
}

a:visited {
	color: #D4470A;
		text-decoration: none;
}

a:hover {
	color: #B02F06;
	text-decoration: none;border-bottom:  1px dotted #B02F06;
}

h1 {
	font-family:"Droid Sans", Arial, Helvetica, sans-serif;
font-size: 24px; line-height: 36px;font-weight: 400;
}


h2 {
	font-family:"Droid S", Arial, Helvetica, sans-serif;
font-size:18px; line-height: 36px;
}


.doublecol h3 ,
.triplecol h3 {font-weight: bold;
	font-size: 14px ;line-height: 24px;margin-bottom: 12px;
font-family:"Droid Sans", Arial, Helvetica, sans-serif;}

.col-1 h3, .col-2 h3, .col-3 h3, .sidebar h3 {font-weight: bold;
	font-size: 16px ;line-height: 18px;margin-bottom: 6px;
}

.sidebar h3 {
	padding-top: 12px;
}

.sidebar h4 {	font-family:"Droid Sans", Arial, Helvetica, sans-serif;	color: #83A1AF; 

font-weight: normal;text-transform: uppercase;
	font-size: 12px ;line-height: 24px;margin: 6px 0;
}

p {
	margin-bottom: 12px; line-height:  1.5;
}




ul {
	padding-left:  1.5em;margin-bottom: 12px;
}



blockquote {
	text-indent: -0.5em;
}

 blockquote strong {font-weight: normal;
	display: block;float: left;width: 0.5em;
}



body {color:  #585958;
	font-family:"Droid Sans", Arial, Helvetica, sans-serif;
	background-color: #fff;
	background-image:  url(/images/styles/squares_bg.png) ;
	background-repeat: repeat-x;
	background-position: center top;}
	
	
	
.wrapper {	width: 990px;
	margin: 0 auto;}




.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: 10px 0 0 0;
}

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

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

#freeform label {font-size: 14px;
	display: block;
	clear: left;
	float: left;
	padding: 6px 10px 6px 10px;
	width: 210px;
	line-height: 24px;
	background: #DADFDF;}

#freeform .form-row input {
	font-family:"Droid Sans", Arial, Helvetica, sans-serif;

	font-size: 14px;
	padding: 4px;
	margin-right: 0;
	margin-left: 10px;
	width: 320px;
	height: 24px;
	color:  #444;
}

#freeform  textarea {
		font-family:"Droid Sans", Arial, Helvetica, sans-serif;

	font-size: 14px;
	padding: 4px;
	margin-left: 10px;
	width: 320px;
	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: 230px;
}

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

.error-icon {
	float: right; 	margin: 9px 0 0 0 ;

}

.error-field {
	background: #fdd;
}



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

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

#submit {
	/* My Comment -moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-radius: 5px;
		border: none;
	-webkit-transition-property: background;
	-webkit-transition-duration: 300ms;
	-webkit-transition-timing-function: ease-in-out;
		color: #fff;

	background: #666;
	padding: 5px 10px;
	*/
	
	font-family:"Droid Sans", Arial, Helvetica, sans-serif;

	font-size: 14px;
	

}

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

 */




/* @end */


/* @group Glider */


.screen {height:  370px;padding-top: 7px;
	float: left;width:  605px;}
	
.portfoliosummary{width:  270px; margin:  0 40px 0 40px;
	float: left; color:  #fff; 
}
	
	.portfoliosummary a{color:  #fff;}


		.portfoliosummary a:hover,
				.portfoliosummary a:active {border-bottom: none;}
	.portfoliosummary a.details{border-bottom: 1px dotted  #fff;}
	
	.portfoliosummary h3 {font-weight: normal;		font-size:  36px;line-height:  36px;;margin:30px 0  12px 0
} /* for client name */ 


.portfoliosummary h2 {font-weight: bold;text-transform: uppercase;
		font-size:  16px;line-height:  18px;;margin:30px 0  12px 0
}


		.portfoliosummary h1,
		.portfoliosummary p {
		font-size:  14px;line-height:  18px;margin-bottom:  12px;
}/* h1 for pfolio detail pages */ 
		.portfoliosummary img{margin-top:  18px;}

.glidecontentwrapper, 
.outerglidewrapper {	background:  #A4AEB0  url(/images/styles/slider_bg.jpg) no-repeat center bottom;position: relative; /* Do not change this value */
width: 990px;
height: 370px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;

} /* outerglidewrapper provides bg for pfolio detail */

.smallglidecontentwrapper{	background:  #A4AEB0  url(/images/styles/slider_bg.jpg) no-repeat center bottom;position: relative; /* Do not change this value */
width: 605px;
height: 370px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;

}/* for pfolio detail pages - only image rotates */


/*
	Total wrapper width: 350px+5px+5px=360px
	Or width of wrapper div itself plus any left and right CSS border and padding
	Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: #A4AEB0 url(/images/styles/slider_bg.jpg) no-repeat center bottom;
visibility: hidden;
width: 990px;
	height: 370px;
}




.smallglidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: #A4AEB0 url(/images/styles/slider_bg.jpg) no-repeat center bottom;
visibility: hidden;
width:  605px;
	height: 370px;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
	Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 940px;
height:  30px;padding:  10px 50px 0 0;
text-align: right; 

	background: url(/images/styles/slider_bg.jpg) no-repeat center top;
	/*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
}
/*
 Total contenttoggler width: 350px+5px+5px=360px
	Or total width of wrapper div (counting wrapper border/padding)
*/


body.portfolio .glidecontenttoggler {
	background: url(/images/styles/slider_bg.jpg) no-repeat center -10px;
}

.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
background:  url(/images/styles/dot_light.png) no-repeat center bottom ;
margin-right: 3px;
font-weight: bold;
text-decoration: none;
height:  20px;
width:  10px;
outline: 0;
border-bottom:  none
}

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
background:  url(/images/styles/dot_dark.png)  no-repeat center bottom ;
}

.glidecontenttoggler a:hover{
background:  url(/images/styles/dot_dark.png) no-repeat center bottom ;

}

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}

.glidecontenttoggler a.prev:hover, .glidecontenttoggler a.next:hover{
background: #1A48A4;
color: white;
}

/* @end */

/* @group Header */

#header { height: 130px;	
background: url(/images/styles/header_bg.png) repeat-x;
}



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




a#logo {display: block; float: left;text-indent: -999em;
	width:  140px; height: 60px;margin: 49px 70px 0 20px ;
	background: url(/images/styles/MID-140.png) no-repeat;
}

a#logo:hover, 
a#logo:active
 {border-bottom:  none;}
 	

ul#mainnav  {
	float: left;
		padding: 0;
margin-left: 220px; /* adjust width */
	font-size: 14px;
	line-height: 1;
	list-style-type: none;
}


ul#mainnav li {	float: left; margin-right:  13px;

}

ul#mainnav  a:link, 
ul#mainnav a:visited {padding: 79px 12px 20px 2px;
	background: transparent;
	text-decoration: none;
float: left;
}

ul#mainnav a:hover, 
ul#mainnav a:active
 {border-bottom:  none;}
 	


body.home li#navhome	, 
body.home li#navhome	 ,

body.about li#navabout	, 
body.about li#navabout	 ,

body.portfolio li#navportfolio	, 
body.portfolio li#navportfolio	 ,

body.blog li#navblog	, 
body.blog li#navblog	 ,

body.contact li#navcontact	 , 
body.contact li#navcontact	  , 
#nav li.current  , 
#nav li.current  	 {color:  #fff;background:  url(/images/styles/at_tab.png) no-repeat left bottom; padding-left:  10px;}



body.home li#navhome	a:link, 
body.home 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	 {color:  #fff;background: #fff url(/images/styles/at_tab.png) no-repeat right bottom;}


.hassubnav {
	float: left; width:  330px;
} /* ... for category nav in fact */


.subnavbar {
	width: 990px;
	background: #fff  }


.subnavbar ul {
	
		padding: 10px 0 0 20px;
	font-size: 12px;
	line-height: 1;
	list-style-type: none;
	height:  27px;
	margin-bottom: 0;
}


.subnavbar ul li {	float: left; margin-right:  13px;

}


.subnavbar ul li.current {
	background: url(/images/styles/at_tab_sub.png) no-repeat left top; 
} 

.subnavbar ul li a {display: block;width: auto;height: 27px;line-height: 27px;
	margin-left: 5px; padding-right:  5px;
}


.subnavbar ul li.current a {
		background: url(/images/styles/at_tab_sub.png) no-repeat right top;margin-left: 10px; padding-right:  10px;color:  #fff;

}



.subnavbar ul li a:hover,
.subnavbar ul il a:active {
border-bottom: none;
}

.subnavbar ul li.current a:hover,
.subnavbar ul li.current a:active {
border-bottom: none;color:  #fff;
}



/* @group category nav */

.headingbar ul {
	float: right;
	
		padding: 20px 0 0 0;
	font-size: 12px;
	line-height: 1;
	list-style-type: none;
}


.headingbar ul li {	float: left; margin-right:  13px;

}


.headingbar ul li.current {
	background: url(/images/styles/at_button.png) no-repeat left top; 
} 

.headingbar ul li a {display: block;width: auto;height: 27px;line-height: 27px;
	color:  #fff;
	margin-left: 5px; padding-right:  5px;
}


.headingbar ul li.current a {
		background: url(/images/styles/at_button.png) no-repeat right top;margin-left: 10px; padding-right:  10px;color:  #585958;

}


.headingbar ul li a:hover,
.headingbar ul li a:active {
border-bottom: none;color: #ffc;}



.headingbar ul li.current a:hover,
.headingbar ul li.current a:active {
border-bottom: none;color:  #585958;
}

/* @end */


/* @end */

/* @group Cols */


.headingbar
 {color:  #fff;
	background: #D4470A url(/images/styles/bar.jpg) ; height:  50px; padding:  10px  20px 10px 20px  ;


}


.headingbar p{ font-size: 40px;
font-weight:bold ;	margin-bottom: 6px;}

.headingbar h1 {
	font-family: "Droid Serif", Georgia, serif; font-size: 14px; line-height: 1;font-weight: 400;
}

body.home .headingbar
 {	height:  60px; background-position: 0-10px  ;padding:  18px  20px 10px 20px  ;

}
body.home 
.headingbar p {
	font-size: 30px;line-height: 1
}

.underbar {
	width: 990px;padding-top:  24px;;
	background: transparent url(/images/styles/halftone.png) top left repeat-x;
}




.main {
	width: 990px;padding: 0 0 24px 0;
	background: #fff url(/images/styles/main_grad.jpg) repeat-x bottom left;
}


 .triplecol {
	margin:  0 20px;
}

.doublecol  {
	margin:  0 50px 0 20px;
}


.doublecol {
	width:  600px; float: left;padding-top:  10px;}
	
	.doublecol p, .triplecol p{font-size: 14px;
line-height: 24px;margin-bottom: 18px;
}
	
	
	.doublecol ul li, .triplecol ul li {
	font-size: 14px;
line-height: 24px;
}
	.doublecol h1, .triplecol h1{
line-height: 30px;margin: 18px 0 ;
}

	.doublecol  blockquote {
	margin-left:  2em;margin-right: 2em;
	color: #83A1AF; 
}





.sidebar {	font-family: "Droid Serif", Georgia, serif; font-size: 12px; line-height: 18px;	width: 270px;float: left; padding: 12px 0 16px  20px;	margin-top:  12px; border-left:  1px dotted #434443;

}


.sidebar blockquote {
	margin-left:  0.5em;
}




p.author {	font-family:"Droid Sans", Arial, Helvetica, sans-serif;
color: #83A1AF; text-transform: uppercase;margin-top:-18px; font-size: 12px;}
	
	
	
p.client {	font-family:"Droid Sans", Arial, Helvetica, sans-serif;
color: #83A1AF;}
	
	
p.client strong {
	text-transform: uppercase;
}	


p.launch {
	font-weight: bold;
}

p.launch a {
	background: url(/images/styles/right_dark.png) no-repeat left center; padding-left:  12px;
}

p.launch a:hover,
p.launch a:active {
	border-bottom: none;
}

#the_web_design_process { 
	background:  #DADFDF url(/images/styles/cog.png) no-repeat 30px 100px;
}

#costs_and_time_scale { 
	background:  #DADFDF url(/images/styles/pound_sign.png) no-repeat 80px 60px;
}

#expressionengine { 

	background:  #DADFDF url(/images/styles/ee_logo.png) no-repeat 40px 80px;
}

#references {
	background: #DADFDF url(/images/styles/heart.png) no-repeat 30px 90px;
}

.boxwrapper {
	margin:   0 ;
}

.box h2 {font-weight: bold;
	font-size: 14px; line-height: 18px;text-transform: uppercase;margin-bottom:  36px;
}
.box p {display: none;
		font-size: 14px; line-height: 18px;
}

.box a {
	color:  #4C4D4C;
}

.box a:hover, .box a:active, .hover a {
	border-bottom: none;
	}
	
.last {
	margin-right: 0 !important;
}

/* @group Box */

.box {
	background: #DADFDF; float:  left; margin:  10px 10px 0 0 ;width:  194px;height:  194px;padding: 18px; overflow: hidden;
}

.box.hover {
	background-color: #4C4D4C !important; cursor:  pointer;
}

body.portfolio .box.hover {
background-image: none !important;}




body.portfolio .box h2 a {font-weight: bold;
background: #D4470A;color:  #fff;
}


body.portfolio .box.hover h2 a {background: #333}


.box.hover, 
.box.hover a{
color:  #fff;}

.box.hover p {
	display: block; color:  #DADFDF;
	
}

/* @end */

/* @group Potrfolio Listing Square */

.square {margin:  1px 0 0 0; padding:  0;
 }


.square h3  {	background: #D4470A url(/images/styles/bar.jpg) center top; 
font-weight: bold; padding:  6px 5px;margin:  0;;
color:  #fff; width:  290px ; 


}

.square p {width:  290px ; height:  250px;

	padding: 0 5px ; margin:  0;
	font-family:"Droid Sans", Arial, Helvetica, sans-serif;
	}

.square p img {
width:  300px !important;
height:  185px;
margin:  6px 0 6px -5px;}


.square.hover  h3 {background-position: center bottom;	background-color: #4C4D4C !important; cursor:  pointer;
}

.square a:link,
.square a:visited,
.square a:hover,
.square a:active,

.square.hover a {
	color:  #4C4D4C ;text-decoration: none;border: none;
}

.square.hover a{
	
}


/* @end */


.col-1, .col-2, .col-3 {width: 285px; float: left; padding: 12px 15px;
font-family: "Droid Serif", Georgia, serif; font-size: 12px; line-height: 18px;
	
}

.col-1 {clear:  both;
	margin-left: 0px;
}
.col-2, .col-3 {
	border-left:  1px dotted #434443;margin-left:  14px;
}


#footer {padding-top: 18px;
	font-size: 12px;line-height: 18px;;
}
#footer p.address {	margin:  24px 0 24px 20px ;
	font-size: 12px;line-height: 18px;
	
}
#footer ul {padding-left:  0;
	list-style: none;
}

#footer ul li {font-size: 12px;line-height: 12px;
	float: left; margin: 0  0 0 5px;padding: 0 6px; border-left: 1px solid #434443 
}


#footer ul li.first {
	border: none;margin-left:  14px;
}

.addthis_toolbox {
	float: right;margin: 0 20px 0 0;white-space: nowrap;
}

.addthis_toolbox a {float:left}
.addthis_toolbox a:hover,
.addthis_toolbox a:active {
	border-bottom: none;
}


em#ee {
	background: url(/images/styles/ee.png) no-repeat left center;padding-left:  24px;
}

/* @end */

/* @group Sidenav */

ul.sidenav{
	list-style: none;padding-left: 0;margin-bottom: 0;
}

ul.sidenav li {
	
	line-height: 18px;margin-bottom: 6px; 
}

ul.sidenav li a {padding: 3px 0; margin:  3px 0;		background: #fff; 
}
ul.sidenav li a:hover,
ul.sidenav li a:active {
	border-bottom: none;
} 

ul.sidenav li em {display: block; padding: 3px; margin:  3px 0;		float: left;background: #DADFDF; width:60px; text-align: right;
}

/* @end */




	
	div.twitter  {clear: both;
	 margin: 1px 20px 0px 0;
	 
 }
		
		div.twitter p {padding-left: 20px;
			background: url('/images/styles/bird_16_blue.png') no-repeat;	margin-left: 20px;font-size: 12px;
		}
		
	div.twitter em {font-style: normal; padding-right: 10px;
		margin-right: 10px;border-right: 1px solid #434443; 
	}