/* ------------------------------------------------------------------------------------------------------------------
	MAIN STYLESHEET
	DESIGNED BY: Ryan Downie (ryan@bfinternet.com.uk)
	CODED BY: Ryan Downie (ryan@bfinternet.com.uk)
	VERISION: 1.0	DATE:
	
	TABLE OF CONTENTS
	1. BUILDING BLOCKS
		1.1 HTML5 AND RESETS
		1.2 GENERIC STYLES
		1.3 MASTHEAD
		1.4 INTRO AREA
		1.5 SECTION MAIN CONTENT
		1.6 SECTION SUPP AREA
		1.7 SECTION SITE LINKS
	
------------------------------------------------------------------------------------------------------------------ */

/* ------------------- 1.0 BUILDING BLOCKS ----------------------------*/
/* HTML5, YUI RESETS */

section, article, nav, footer, header, figure {
	display:block;
}

ul li {
	list-style:none;
}

ol, ul, dl, blockquote {
	margin:0;
}

strong {
	color:#3A3635;
}

html {
	background:#FFF url(../images/html-bg.jpg) repeat-x 0 0;
}

body {
	line-height:180%;
}

section.wrapper {
	float:left;
	left: 50%;
	margin: 0 0 0 -480px;
	position: relative;
	width: 960px;
}

th, td, tr {
	border: none;
	padding: 0;
}

a {
	text-decoration:underline;
	color:#5F535B;
}

a:visited {
	color:#e85c35; 
	/*-text-decoration:line-through;-*/
}

a:hover {
	text-decoration:none;
	color: #E85C35;
}

h1, h2, h3, h4, h5, h6 {
	font-family:Georgia,"Times New Roman";
}

section#main-content .grid1 ul li {
	list-style:disc; 
	margin:11px -18px 0 3px;
}

hr {display:block;
	height:2px; 
	background:#DFDFDF; 
	border:none;
}

#different-strokes-portfolio hr {
	clear:both;
}

/* --- =MASTHEAD --- */

section#masthead {
	float:left; 
	margin:10px 0 0;
	height: 117px; 
	width: 100%;
}

header h1 {
	background:transparent url(../images/logo.png) no-repeat scroll 0 0;
	float:left;
	height:108px;
	margin:0 0 0 15px;
	width:418px;
}

header h1 a {
	text-indent: -9999px; 
	outline:none; 
	display:block;
}

header p {
	display:none;
}

#nav {
	float:right; 
}

#nav li {
	float:left; 
	font-weight:bold; 
	margin-left: 5px;
	height: 27px;
}

#nav li a {
	display:block; 
	padding:5px 12px;
}

#nav a {
	text-decoration:none;
	color:#FFF;
}

#nav a:hover {
	color:#e85c35;
}

#nav li.selected {
	background: white;
	-moz-border-radius: 5px 5px 0 0;
	margin-top: 5px;
}

#nav li.selected a {
	color:#e85c35;
	padding-top: 0;
}

/* --- =INTRO AREA --- */

section#intro-area {
	width:960px; 
	float:left; 
	margin: 25px 0 15px 0;
	position: relative;
}

section#content {
	width:578px; 
	position:relative; 
	float:left;
}

section#content section {
	background:rgba(0, 0, 0, 0.6) repeat;
	bottom:7px;
	color:#FFFFFF;
	font-size:88%;
	position:absolute;
	padding:1em;
	width:96.2%;
}

section#content header {
	font-family:"Garamond",Georgia,"Times New Roman";
	font-size:158%;
}

section#content header h3 {
	border-bottom:1px dotted #5F533B;
	margin:0 0 0.3em;
	padding-bottom:0.3em;
}

section#content p {
	margin:0;
}

section#intro-area aside {
	background:#56324A url(../images/aside.jpg) repeat-x scroll left bottom;
	color:#FFFFFF; float:right;
	min-height:240px;
	padding:1em 0 1em 2em;
	width:356px;
}

section#intro-area aside h2 {
	font-size:181%;
	font-weight:normal;
	line-height:1.5;
	margin:0.5em 0 0;
	text-transform:uppercase;
}

section#intro-area aside h4 {
	font-size:175%;
	font-weight:normal;
	margin:0.7em 0 0.3em;
}

.button {
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
	border-radius:0.5em;
	background:#563249 url(../images/button-bg.jpg) repeat-x scroll left bottom;
	border:1px solid #5F4758;
	color:#FFFFFF;
	display:block;
	font-size:100%;
	line-height:3;
	text-align:center;
	text-decoration:none;text-transform:uppercase;
	width:6em;
	margin:1.7em 0 0;
	float:left;
}

.button:hover {
	background:#5F4758;
	border:1px solid #150C11;
}

/* SECTION MAIN CONTENT */

section#main-content, section#supp {
	float:left;
}

section article {
	color:#3F3F3F;
	float:left;
	font-size:89%;
	margin:40px 40px 40px 0;
}

html#different-strokes-home section#main-content article.grid1 {
	width:650px;
}

article.grid1 {
	width:340px;
}

section#main-content article.grid1 img {
	background:#DFDAC3 none repeat scroll 0 0;
	float:left;
	margin:0.5em 4em 3em 0;
	padding:0.3em;
}

article.grid2, article.grid3 {
	width:270px;
}

article.grid3 {
	margin:40px 0;
	clear: right;
}

article.grid1 h3, article.grid3 h3 {
	border-bottom:1px dotted #9F9F9F;
	color:#5C565A;
	font-size:24px;
	margin: 0 0 10px 0;
	padding-bottom: 8px;
}

#portfolio img {
	
}

#latest-news {
	float: left;
	width: 270px;
	padding-top: 30px;
}

#latest-news h3, #networks h3 {
	font-size: 24px;
	color: #5C565A;
	border-bottom: 1px dotted #9F9F9F;
	margin: 0 0 10px 0;
	padding-bottom: 5px;
}

#latest-news p {
	padding-top: 5px;
}

#networks {
	padding-top: 25px;
	float: left;
}

#networks iframe {
	padding: 0 0 0 15px;
}

#networks a.linkedin-profileinsider-popup {
	clear: left;
	display: block;
	width: 270px;
	background-position: left!important;
	padding-left: 20px;
}

#networks a.twitter {
	padding-top: 10px;
	clear: left;
}

#footer.grid2 h3, #footer.grid3 h3 {
	margin: 0 0 15px 0;
	border-bottom: 1px dotted #9F9F9F;
}

form#mail-form label {
	color:#5F535B;
	display:block;
	float:left;
	font-size:114%;
	font-style:italic;
	font-weight:bold;
	width:4em;
	margin:.4em 0 0;
}

form#mail-form input {
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
	border-radius:0.5em;
	background:#DFDFDF none repeat scroll 0 0;
	border:1px solid #BFBFBF;
	padding:0.6em;
	width:17em;
}

form#mail-form button {
-moz-border-radius:0.5em; 
	-webkit-border-radius:0.5em; 
	-khtml-border-radius:0.5em; 
	border-radius:0.5em;  
	background:#5F4758; 
	border:1px solid #5F4758; 
	color:#FFFFFF; 
	display:block; 
	float:left; 
	font-size:100%; 
	line-height:3;
 	margin:0 0 0 4.6em; 
 	padding:0.5em; 
 	text-align:center; 
 	text-decoration:none; 
 	text-transform:uppercase; 
 	width:9em;
 }

form#mail-form button:hover {
	background:#AF99A9;
}

/* SECTION SUPP CONTENT */

section#supp-content {
	background:#291723 none repeat scroll 0 0;
	float:left;
	width:100%;
}

section#supp-content article {color:#FFF}
section#supp-content header {color:#DFDFDF;}

section#supp-content article.grid1 ul li {float:left; margin:0 1.3em 1.3em 0}
section#supp-content article.grid1 ul li img {background:#DFDAC3 none repeat scroll 0 0; float:left; padding:0.2em; }
section#supp-content article.grid2 ul li {border-bottom:1px dotted #BFB3BB; float:left; margin:0 14px 0 0; padding-bottom:0.3em; width:121px; }
section#supp-content article.grid3 cite {color:#DFDAC3; margin:0 0 0 0em; font-weight:bold; font-style:italic;}
span#quote-left {background:transparent url(../images/quote-left.jpg) no-repeat scroll 0 0; display:block; float:left; height:21px; margin:0.3em 1em 17em 0; text-indent:-9999px; width:27px; }
span#quote-right {background:transparent url(../images/quote-right.jpg) no-repeat scroll 0 0; display:block; float:right; height:21px; margin:-35px 0 0; text-indent:-9999px; width:27px; }
#footer.grid1 h3, #footer.grid2 h3, #footer.grid3 h3 {color:#FFFFFF; font-size:21px; padding-bottom: 10px; }
#footer.grid3 strong {color:#FFFFFF;}

/* SECTION SITE INFO */
section#site-info {background:#150C11 none repeat scroll 0 0; float:left; width:100%; color:#FFF;}
section#site-info a {color:#DFDAC3;}

section.vcard  {float:left; font-size:87%; padding: 30px 0; width:33em; }
section.vcard h4 {font-size:209%;}
section.vcard h5 {font-size:139%}
section.vcard  p { margin: 0;}
section.vcard span.vcard {width:100%;}
section.vcard span.vcard a {background:transparent url(../images/vcard.jpg) no-repeat scroll 0 0; height:15px; margin:0 0 0 0.3em; padding:0 0 0 2em; width:19px;}

section#links {float:left; font-size:81%; width:53em; padding: 25px 0 0 0; position: relative; z-index: 1; margin: 0;}
section#links ul {float:left; width:100%; position: relative; z-index: 1;}
section#links li {float:left; padding:0 0.5em 0; display: inline;}
section#links p {margin: 0; position: relative; z-index: 1;}

/* About us */
html.inner section#main-content article.grid1 {width:650px;}
html.inner section#main-content article.grid1-contact {margin-top: 0; width:650px;}
html.inner section#main-content article.grid1 header + p {color:#7F7F7F; font-family:georgia; font-size:146%; font-style:italic; font-weight:bold; line-height:1.5; margin:1em 0; word-spacing:3px;}
html.inner section#main-content article.grid2 {margin-right:0;}

html.inner section#intro-area img {float:left;}
html.inner section#intro-area header {color:#FFFFFF; float:left; width:50em;}
/*--html.inner section#intro-area header h3 {font-size:330%; font-weight:normal; margin-bottom:0.4em;}-*/
html.inner section#intro-area header p {display:block;} 
#intro-area h3 {font-size:45px; font-weight:normal; position: absolute; top:0; left: 290px; color: white; line-height: 45px;}
#intro-area.left-align h3 {top:0; left: 45px; line-height: 45px;}
#intro-area.right-align h3 {top:0; left: 420px; line-height: 45px;}
#intro-area h6 {font-family: Arial, Helvetica, sans-serif; font-weight: normal; position:absolute; top: 100px; left: 292px; color: white;}
#intro-area.left-align h6 {top: 100px; left: 45px; width: 600px;}
#intro-area.right-align h6 {top: 100px; left: 420px; width: 500px;}

html#different-strokes-about section#intro-area header {margin:-13em 0 0 19em;} 

/* Portfolio */
html#different-strokes-portfolio section#intro-area header {margin:-13em 0 0 2em;} 
html#different-strokes-portfolio section#main-content article.grid1 li {border-bottom:1px dotted #BFBFBF; float:left; margin:0.5em 0; padding-bottom:1em; list-style: none;}
article.grid1 li a {color:#3A3635}
#portfolio img, #portfolio a img {width: 220px; height: 116px;}
#portfolio-sq img, #portfolio-sq img a {width: 150px; height: 150px;}
#portfolio-ba img, #portfolio-ba img a {width: 250px; height: 150px;}

html#different-strokes-portfolio section#main-content ul#portfolio-area li {margin:0.5em 4em 3em 0; padding-bottom:2em; width:13em;}

/* Testimionals page */
html#different-strokes-testimionials section#intro-area header {color:#5F5A59; float:right; margin:-162px 0 0; width:531px; }
html#different-strokes-testimionials section#main-content article.grid1 li {border-bottom:1px dotted #9F9F9F; padding:1em 0.7em;}
html#different-strokes-testimionials section#main-content article.grid1 li p {margin:0;}
html#different-strokes-testimionials section#main-content article.grid1 li.odd {background:#EFEFEF}
html#different-strokes-testimionials section#main-content article.grid1 li h4 {float:left; font-size:135%; margin:0 0 3em 0; width:12em;}


table#testimonialstable tr.odd td{
	background: #EFEFEF;
	border-bottom: 1px dotted #9F9F9F;
	padding: 1em 0.7em; 
}

table#testimonialstable tr.even td {
	border-bottom: 1px dotted #9F9F9F;
	padding: 1em 0.7em; 
}



/* Contact us */
html#different-strokes-contact section#intro-area header {margin:-13em 0 0 3em;}
form#contact-form {padding-bottom: 25px; width: 650px;}
form#contact-form fieldset {border:1px dotted #9F9F9F; padding:1em;}
form#contact-form label {display:block; float:left; font-size:121%; width:11em; word-spacing:1px; margin-top:.2em;}
form#contact-form input {border:1px solid #BFBFBF; font-style:italic; padding:0.4em; width:30.25em; }
form#contact-form select {border:1px solid #BFBFBF; font-style:italic; padding:0.4em; width:31em;}
form#contact-form textarea {border:1px solid #BFBFBF; font-style:italic; padding:0.4em; width:31em;}
form#contact-form img#verification_img {float:left; margin:0 15em 1em 13.4em; padding:0;}
form#contact-form input#verification_code {width:13.3em;}
form#contact-form button {float:left;line-height:2;margin:0 35em 0 13.3em;padding:0.3em;}
form#contact-form span {color:#AF0A0A;}
form#contact-form h3 {font-size: 14px;}

dt {font-family:georgia; font-size:142%; margin:9px 0 0; }
dl dd {margin:5px 0 10px; }
a.padded-link {background:#9F959C none repeat scroll 0 0; color:#FFFFFF; font-size:93%; font-style:italic; padding:4px 8px; }

#slider {float:left; height:214px; margin:25px 0 0; overflow:hidden; position:relative; width:960px; }
#slider h3 {font-size:190%; }
#slider p {font-size:132%;  line-height:1.6;}
#sliderContent {width: 960px; /* important to be same as image width or wider */ position: absolute; top: 0; margin-left: 0; }
.sliderImage { float: left; position: relative; display: none; }
.sliderImage span {position: absolute; background: url(../images/slider-bg.png) repeat 0 0; font: 10px/15px Arial, Helvetica, sans-serif; padding: 10px 13px; width: 559px; color: #fff;display: none;}
.clear {clear: both;}
.sliderImage span strong {font-size: 14px; }
.top {top: 0; left: 0; }
.bottom { bottom: 0; left: 0; }

ul.ba-photos {float:left; padding:0 20px 10px 0px; width:325px; }
ul.ba-photos img, ul.ba-photos a img { width: 130px; height: 100px; margin: 0 25px 25px 0!important; }
ul.ba-photos li {list-style:none!important;}
ul.ba-photos h2{margin:7px 0 0; }
ul.ba-photos ul.before-after {float:left; }
ul.ba-photos ul.before-after li {float:left; margin:0 5px 7px 0; width:144px; list-style:none!important;}
ul.ba-photos ul.before-after li h3 {margin:0;}

ul.home li {margin:10px 0 0 0;}
ul#logos li {float:left; margin:10px 10px 0 0; list-style:none!important;}
section#main-content article.grid1 ul#logos img {padding:0; background:#FFF; margin: 0;}
section#main-content article.grid1 ul#logos li {margin: 15px 30px 0 0;}

ul#ba-portfolio h3, ul#other-portfolio h3 {margin:0; }
ul#ba-portfolio p {}
html#different-strokes-portfolio section#main-content article.grid1 ul#ba-portfolio li, html#different-strokes-portfolio section#main-content article.grid1 ul#other-portfolio li {border:medium none; margin:0; }
article.grid1 h2 {font-size:161.6%; margin-bottom:5px;}

div#meta {float:left;width:16em;}
html#different-strokes-testimionials section#main-content article.grid1 ul#testimionals li {float:left;}
html#different-strokes-testimionials section#main-content article.grid1 li div#meta h4 {float:left;margin:0;width:100%;}
html#different-strokes-testimionials section#main-content article.grid1 li blockquote {float:right; margin:0 0 0 3em; width:35em;}

ul#ba-portfolio {float:left;}
h5 {margin:21px 0 0 ;}

#services-column {
	float: left;
	width: 305px;	
}