/* ==============================================
   http://meyerweb.com/eric/tools/css/reset/
   ============================================== */
   html,body,div,span,applet,object,iframe,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,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,label,legend,p,blockquote,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;}body{line-height:1;color:black;background:white;}:focus{outline:0;}table{border-collapse:collapse;border-spacing:0;}caption,th,td{text-align:left;font-weight:normal;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}abbr,acronym{border:0;}
   
   

/* ==============================================
   @font-face
   ============================================== */
   
@font-face {
	font-family: 'CartoGothic';
/* 	src: url('fonts/cartogothicstd-bold-webfont.eot'); */
	src: local('☺'), url('../fonts/cartogothicstd-bold-webfont.woff') format('woff'), url('../fonts/cartogothicstd-bold-webfont.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'CartoGothic';
/* 	src: url('fonts/cartogothicstd-book-webfont.eot'); */
	src: local('☺'), url('../fonts/cartogothicstd-book-webfont.woff') format('woff'), url('../fonts/cartogothicstd-book-webfont.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}



/* ==============================================
   Author Styles
   ============================================== */

::selection { background: #8fefcf; text-shadow: none; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.clear:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; }

a { text-decoration: none; -webkit-transition: color 100ms ease-in, opacity 100ms ease-in }
a:hover, a:focus { text-decoration: underline; }
a:active { position: relative; top: 1px; }
a:hover img { -webkit-box-shadow:0 0 4px #999; -moz-box-shadow:0 0 4px #999; box-shadow:0 0 4px #999; }
#content a { color: #444; font-weight: bold; }

h1,h2,h3,h4,h5 { font-weight: bold; }
h1 { font-size: 1.714em; /* 14*1.714=24 */ }
h2 { font-size: 1.429em; /* 14*1.429=20 */ }
h3 { font-size: 1.2857em; /* 14*1.2857=18 */ }
h4 { font-size: 1.143em; /* 14*1.143=16 */ margin: 0 0 0.25em 0; color: #2a2a2a; }
h5 { font-size: 1em; }

p { font-size: 1em; margin-bottom: 0.5em; }
p em { font-style: italic; }
span.amp {
	font-family: Baskerville, HoeflerText, Garamond, "Palatino Linotype";
	font-style: italic;
	font-weight: normal;
	color: #00A99D;
}

img.alignleft { float: left; margin: 0 20px 10px 0; }
img.alignright { float: right; margin: 0 0 10px 0; }



/* ==============================================
   General
   ============================================== */
   
body {
	width: 100%;
	height: 100%;
	background: url(img/bg.jpg);
	font-family: "Myriad Pro", Myriad, CartoGothic, Calibri, "Corbel", Thonburi, Arial, sans-serif;
	font-size: 0.875em; /* 16x.875=14 */
	line-height: 1.6em;
	color: #222;
}

#container {
	overflow: hidden;
	width: 720px;
	margin: 0 auto;
}



/* ==============================================
   Header
   ============================================== */

#header_top_wrap {
	overflow: hidden;
	padding: 1.25em 0 0.75em 0;
	border-bottom: 4px solid #00A99D;
	background: url(img/header_top_wrap_bg.jpg) repeat-x top;
	line-height: 1em;
	color: #bbb;
	text-shadow: 0 1px 0 #000;
	-webkit-box-shadow:-7px -2px 7px #000;
	-moz-box-shadow:-7px -2px 7px #000;
}

#header_top {
	overflow: hidden;
	width: 720px;
	margin: 0 auto;
}

#header_top a {
	color: #ddd;
	font-weight: bold;
}

#header_top p#workload {
	width: 300px;
	float: left;
	font-weight: bold;
}

#header_top p#workload #unavailable {
	color: #CC4F43;
}

#header_top p#workload #available {
	color: #84cc39;
}

#header_top p#contact_details {
	width: 320px;
	float: right;
	text-align: right;
}

.header {
	overflow: hidden;
	padding: 10px 0 30px 0;
	border-bottom: 1px solid #ddd;
}

.header #logo_wrap {
	width: 250px;
	float: left;
	margin: 40px 0 0 0;
}

.header #logo_wrap h1#logo a {
	display: block;
	width: 198px;
	height: 28px;
	margin: 0 0 5px 0;
	background: url(img/logo.png) no-repeat;
	text-indent: -9999px;
}

.header #logo_wrap h1#logo a:hover {
	opacity: 0.6;
}

.header #logo_wrap h2 {
	color: #666;
	font-family: Georgia, sans-serif;
	font-size: 14px;
	font-weight: normal;
	font-style: italic;
}

.header .nav ul {
	width: auto;
	height: 50px;
	float: right;
	margin: 42px 0 0 0;
}

.header .nav ul li {
	display: inline;
	float: left;
	height: 42px;
	padding: 4px;
	margin: 0 0 0 20px;
	font-style: italic;
	line-height: 1.2em;
}

.header .nav ul li a {
	display: block;
	margin: 6px 0 6px 6px;
	background-repeat: no-repeat;
	color: #333;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-align: right;
	text-shadow: 1px 1px 0 #ccc;
	text-transform: uppercase;
}

.header .nav ul li a:hover {
	opacity: 0.75;
	text-decoration: none;
}


.header .nav ul li a span {
	display: block;
	color: #999;
	font-size: 14px;
	font-family: "Myriad Pro", Myriad, CartoGothic, Calibri, "Corbel", Thonburi, Arial, sans-serif;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: normal;
	letter-spacing: normal;
	text-shadow: 0 1px 0 #fff;
	text-transform: none;
}

h3#introduction {
	width: 720px;
	padding: 20px 0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ddd;
	color: #494949;
	font-weight: normal;
	font-size: 1.9em;
	line-height: 1.2em;
	text-shadow: 0 1px 0 #fff;
	text-align: center;
}

h3#introduction em, h3#introduction a {
	color: #333;
	font-weight: bold;
}



/* ==============================================
   Content
   ============================================== */

#content {
	padding: 30px 0 0 0;
	border-top: 1px solid #fff;
	text-shadow: 0 1px 0 #fff;
}

.aside {
	float: right;
	width: 220px;
	margin: 0 10px;
}

.section.wide {
	float: left;
	width: 450px;
	margin: 0 20px 0 10px;
}

.section.full {
	width: 720px;
}

#content h3 {
	margin: 0 0 0.5em 0;
}

.single #content ul li {
	list-style: disc outside;
	margin: 0 0 0.25em 1em;
}

#content .aside p.contact_detail a {
	font-size: 1.29em;
	font-weight: bold;
	color: #333;
}

.section.wide#work h3 {
	margin: 0;
}

.section.wide#work ul li {
	margin: 0 0 30px 0;
}

.section.wide#work ul li img {
	padding: 3px;
	border: solid 1px #ccc;
	background: #fafafa;
}


#content #services {
	overflow: hidden
}

#content #services li {
	margin: 0 0 20px 0;
}

#content #services li img {
	float: left;
	margin: 0px 15px 0px 0px;
	width: 48px;
}

#content h3 a {
	color: #222;
}

#content #services li p {
	width: 400px;
}

#content .aside#testimonials ul li {
	margin: 0 0 20px 0;
}

blockquote.testimonial {
	padding: 0 0 0 10px;
	border-left: 4px solid #91BDB3;
	font-style: italic;
	font-size: 12px;	
}

blockquote.testimonial + cite {
	display: block;
	margin: 4px 0 0 14px;
	font-weight: bold;
	font-size: 12px;
	text-align: right;
}

blockquote.testimonial:before {
	float: left;
	content: "\201C";
	color: #91BDB3;
	font-size: 2.5em;
	line-height: .1em;
	margin-right: .5em;
	margin-top: 16px;
	margin-bottom: -12px;
	vertical-align:-.46em;
	font-family: Georgia, serif;
}

blockquote.testimonial:after {
	color: #91BDB3;
	position: relative;
	top: 0.5em;
	left: 8px;
	content: "\201D";
	font-size: 2.5em;
	line-height: .1em;
	font-family: Georgia, serif;
}



#content .post a img {
	width: 212px;
	padding: 3px;
	border: 1px solid #ddd;
	background: #f8f8f8;
}




/* ==============================================
   Work Single
   ============================================== */

.single .section#work_intro {
	overflow: hidden;
	width: 720px;
	margin: 0 auto 40px auto;
}

.single .section#work_intro .aside {
	overflow: hidden;
	float: left;
	width: 180px;
}

.single .section#work_intro .aside ul {
	font-size: 15px;
}

.single .section#work_intro #work_previews {
	overflow: hidden;
	float: right;
	width: 500px;
	margin: 0 15px 0 0;
}

.single .section#work_intro #work_previews img.work_preview {
	float: left;
	width: 222px;
	height: 160px;
	padding: 3px;
	margin: 0 0 0 20px;
	border: 1px solid #ccc;
	background: #fff;
}

.single blockquote.testimonial {
	border: none;
	font-size: 14px;
	font-style: normal;
}

.single blockquote.testimonial + cite {
	float: right;
	margin: 10px 0 40px 0;
	font-size: 14px;
}

.single blockquote.testimonial:before {
	width: 20px;
	height: 0;
	margin: 16px 12px 0 0;
	font-size: 3.5em;
}

.single blockquote.testimonial:after {
	content: '';
}

.single img.work_full {
	width: 712px;
	padding: 3px;
	margin: 0 auto;
	border: 1px solid #ccc;
	background: #fff;
}



/* ==============================================
   Contact
   ============================================== */

.aside#contact_details img {
	margin: 0 8px 4px 0;
	vertical-align: middle;
	opacity: 0.6;
	-webkit-transition: opacity 100ms ease-in;
}

.aside#contact_details a:hover {
	text-decoration: none;
	color: #222;
}

.aside#contact_details a:hover img {
	opacity: 1;
	-webkit-box-shadow: none;
}

form.wpcf7-form label {
	display: block;
	float: left;
	clear: both;
	width: 100px;
	padding: 4px 0;
	font-size: 16px;
	font-weight: bold;
	line-height: 24px;
}

form.wpcf7-form input, form.wpcf7-form textarea {
	display: block;
	float: left;
	width: 200px;
	padding: 6px 4px 6px 6px;
	margin: 0 10px 10px 0;
	background: #f8f8f8;
	background: rgba(255,255,255,0.6);
	line-height: 1em;
	-webkit-transition: all 100ms ease-out;
}

form.wpcf7-form span.optional {
	float: left;
	display: block;
	width: 100px;
	color: #666;
	font-size: 12px;
	padding: 4px 0;
}

form.wpcf7-form textarea { width: 320px; max-width: 320px; height: 100px; }
form.wpcf7-form input#forename { width: 100px; }

form.wpcf7-form input#submit {
	width: 60px;
	padding: 6px;
	margin: 10px 0 0 100px;
	border: 1px solid #ccc;
	border-top: 1px solid #cfcfcf;
	border-bottom: 1px solid #bbb;
	background: #ddd;
	background: url(img/button.png);
	color: #555;
	text-shadow: 0 1px 0 #fff;
	-webkit-box-shadow: inset 0 0 2px #fff
}

form.wpcf7-form input#submit:hover {
	cursor: pointer;
}

form.wpcf7-form input#submit:active {
	border: 1px solid #bbb;
	border-top: 1px solid #bfbfbf;
	border-bottom: 1px solid #b9b9b9;
	background: #d1d1d1;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(190,190,190, 1)), to(rgba(210,210,210,1)));
	color: #777;
	text-shadow: 0 1px 0 #ddd;
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.2)
}

form.wpcf7-form input:focus, form.wpcf7-form textarea:focus { background: #fdfdfd; -webkit-box-shadow: 0 0 4px rgba(50,50,50,0.095) }


.wpcf7-validation-errors {
	display: block;
	float: left;
	width: 306px;
	padding: 8px 12px !important;
	margin: 20px 0 0 100px !important;
	border: none !important;
	background: #ddd;
	font-size: 12px;
	text-shadow: 0 1px 0 #fff !important;
}

.wpcf7-mail-sent-ok {
	display: block;
	float: left;
	width: 306px;
	padding: 8px 12px !important;
	margin: 20px 0 0 100px !important;
	background: #fff;
}

.ajax-loader {
	float: left;
	margin: 15px 0 0 -88px;
}

/* ===================================================
   FOOTER
   =================================================== */

#footer_wrap {
	overflow: hidden;
	margin: 40px 0 0 0;
	background: url(img/footer_bg.jpg) repeat-x;
}

.footer {
	width: 720px;
	padding: 20px 0 0 0;
	margin: 0 auto;
	color: #999;
	font-size: 0.889em;
	text-shadow: 0 1px 0 #000;
}

.footer .module {
	float: left;
	width: 214px;
	min-height: 100px;
	padding-top: 10px !important;
}

.footer .module:nth-of-type(1) { padding: 0 15px 0 0; border-right: 1px solid #181818; }
.footer .module:nth-of-type(2) { padding: 0 15px; border-left: 1px solid #272727; border-right: 1px solid #181818; }
.footer .module:nth-of-type(3) { padding: 0 0 0 15px; border-left: 1px solid #272727; }

.footer a {
	font-weight: bold;
	color: #aaa;
}

.footer #copyright {
	clear: both;
	float: left;
	width: 720px;
	margin: 30px 0 10px 0;
	color: #666;
	text-align: center;
}

/* - Social media icons -------------------- */
ul#social { width: 220px; margin: 0; }
	ul#social li { display: block; float: left; width: 100px; height: 20px; margin: 0 0 10px 0; border: none; }
		ul#social li a { margin: 6px 0; padding: 3px 0 2px 22px; background-repeat: no-repeat; background-position: top left; }
			#facebook a { background-image: url(img/social/facebook.png); }
			#stumble a { background-image: url(img/social/stumble.png); }
			#delicious a { background-image: url(img/social/delicious.png); }
			#twitter a { background-image: url(img/social/twitter.png); }
			#lastfm a { background-image: url(img/social/lastfm.png); }
			#dribbble a { background-image: url(img/social/dribbble.png); }