/* ------------------------------------------------------------------------------------------------------------------
	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 {width: 960px; margin:0 auto;}
a {text-decoration:underline; color:#5F535B;}
a:visited {color:#e85c35; text-decoration:line-through;}
a:hover {text-decoration:none;}
h1, h2, h3, h4, h5, h6 {font-family:Georgia,"Times New Roman";}
section#main-content ul.list li {list-style:disc!important; margin:1px 0 9px 16px}
hr {display:block; height:2px; background:#DFDFDF; border:none;  }
#different-strokes-portfolio hr {clear:both;}

/* --- =MASTHEAD --- */
section#masthead {float:left; margin:10px 0 0; width:100%; }
header h1 {background:transparent url(../images/logo.png) no-repeat scroll 0 0;float:left;height:108px;margin:0 0 0 -12px;width:418px;}
header h1 a { width:323px; height:68px; text-indent: -9999px; outline:none; display:block; }
header p {display:none;}
section#masthead nav {float:right; margin:-21px -107px 0 0; width:53em; }
section#masthead nav li {float:left; font-weight:bold; margin-right:10px; }
section#masthead nav li a {-moz-border-radius-bottomleft:0; -moz-border-radius-bottomright:0; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; background:rgba(0, 0, 0, 0.3) none repeat scroll 0 0; display:block; padding:5px 12px; }
section#masthead nav a.current {background:#F2F2F2 none repeat scroll 0 0; color:#4F4545; }
section#masthead a {text-decoration:none; color:#FFF; }
section#masthead a:hover {color:#e85c35;}

/* --- =INTRO AREA --- */
section#intro-area {width:960px; float:left; margin:3em 0 0}

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:3em 3.4em 0 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 1.6em 0 0; padding:0.3em; }
article.grid2, article.grid3 {width:270px;}
article.grid3 {margin:3em 0;}
article header {border-bottom:1px dotted #9F9F9F; color:#5C565A; font-size:199%; margin:0 0 0.2em; padding-bottom:5px; }
article header h3 {margin:0;}

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; margin:3em 0 0; 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; }
section#supp-content h3 {color:#FFFFFF; font-size:93%; }

/* 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%; margin:1em 0; width:33em; }
section.vcard h4 {font-size:209%; margin:0.2em 0;}
section.vcard h5 {font-size:139%}
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; margin:2em 0 0;}
section#links ul {float:left; width:100%;}
section#links li {float:left; padding:0 0.5em 0}

/* About us */
html.inner section#main-content article.grid1 {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;} 

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;}
article.grid1 li a {color:#3A3635}

html.inner section#intro-area img, html.inner section#main-content article.grid1 img { border:0 none; padding:0.2em;}
html#different-strokes-portfolio section#main-content ul#portfolio-area li {margin:0.5em 4em 1em 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;}

/* Contact us */
html#different-strokes-contact section#intro-area header {margin:-13em 0 0 3em;}
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;}

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:23px 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; margin:0 17px 0 -15px; padding:0 1px 10px 17px; width:298px; }
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; }
ul.ba-photos ul.before-after li h3 {margin:0;}

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

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