/*

Designed For: SSS
Designed By: SSS
Development Date: December 2008

*/

/* CSS Reset via Meyerweb */

/* Colours: blue:268ed9 . orange:ff7f00 */

body { background: url(../graphics/bg-body.png) repeat 0 0; font: 12px/140% 'Lucida Grande', Arial, Sans-Serif; color: #333; }

h1, h2, h3, h4 { margin: 0 0 1em; }
p { margin: 0 0 2em; }

h1 { font-size: 18px; }
h2 { font-size: 15px; height: 20px; }
h3 { font-size: 14px; }
h4 { font-size: 10px; }

p { text-align: justify; }
p.go-small { font-size: 80%; }

a { color: #268ed9; text-decoration: none; font-weight: bold; }
a:hover { color: #ff7f00; }

blockquote { font-style: italic; }

.clear { clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

#container { width: 940px; margin: 0 auto; }

#header { position: relative; height: 400px; background: url(../graphics/bg-header.png) no-repeat 0 0; padding: 0 80px; }
#header h1 { display: none; }

#mainWrapper { background: url(../graphics/bg-main.png) repeat-y 0 0; }
#main { background: url(../graphics/bg-main-dots.png) no-repeat 440px 0; margin: 0 80px; padding: 30px; }

#content { float: left; width: 445px; }

#sidebar { float: right; width: 210px; }
#sidebar h3 { font-size: 12px; }
#sidebar img { margin: 0 auto; display: block; padding-bottom: 2em; }
ul#sidebarList li { margin-bottom: 10px; }
ul#sidebarList li a { font-size: 14px; font-weight: normal; }
ul#sidebarList li.current-cat a { color: #268ed9; }
ul#sidebarList li ul { margin: 0; padding: 0; }
ul#sidebarList li ul li a { font-size: 12px; font-weight: normal; padding-left: 12px; }

#footer { height: 60px; background: url(../graphics/bg-footer.png) no-repeat 0 0; }

/* # # # # # # # - N a v i g a t i o n - # # # # # # # */

ul#nav { position: absolute; top: 69px; left: 397px; width: 423px; height: 40px; }
ul#nav li { float: left; }
ul#nav li a { text-indent: -9999px; float: left; display: block; background: url(../graphics/sprites-nav.png) no-repeat 0 0; height: 40px; }
ul#nav li a#home { background-position: 0 0; width: 60px; margin-right: 14px; }
ul#nav li a#home:hover { background-position: 0 -40px; }
ul#nav li a#home.active { background-position: 0 -80px; }
ul#nav li a#services { background-position: -74px 0; width: 81px; margin-right: 18px; }
ul#nav li a#services:hover { background-position: -74px -40px; }
ul#nav li a#services.active { background-position: -74px -80px; }
ul#nav li a#portfolio { background-position: -173px 0; width: 67px; margin-right: 22px; }
ul#nav li a#portfolio:hover { background-position: -173px -40px; }
ul#nav li a#portfolio.active { background-position: -173px -80px; }
ul#nav li a#blog { background-position: -262px 0; width: 55px; margin-right: 20px; }
ul#nav li a#blog:hover { background-position: -262px -40px; }
ul#nav li a#blog.active { background-position: -262px -80px; }
ul#nav li a#contact { background-position: -337px 0; width: 86px; }
ul#nav li a#contact:hover { background-position: -337px -40px; }
ul#nav li a#contact.active { background-position: -337px -80px; }

a#getInTouch { display: block; width: 150px; height: 20px; text-indent: -9999px; position: absolute; bottom: 4px; left: 334px; }
a#getInTouch:hover { background: url(../graphics/button-getintouch-hover.png) no-repeat 0 0; }

a#follow-us { display: block; width: 150px; height: 150px; text-indent: -9999px; position: absolute; top: 116px; right: 37px; background: url(../graphics/follow-sss-on-twitter.png) no-repeat 0 0; }
a#follow-us:hover { background: url(../graphics/follow-sss-on-twitter-hover.png) no-repeat 0 0; }

/* # # # # # # # - P a g e : H o m e P a g e - # # # # # # # */

ul#news li { margin-bottom: 20px; }
ul#news h3 { /*margin: 0;*/ }
ul#news h4 { font: 10px Arial, Sans-Serif; }
ul#news img { padding: 4px; background-color: #fff; border: 1px solid #ddd; margin: 0 0 1em; }

ul#offer-list { width: 429px; height: 300px; margin: 0 auto 0; }
ul#offer-list li { float: left; display: block; } 
p.offer-terms { font-size: 9px; }

/* # # # # # # # - P a g e : P o r t f o l i o - # # # # # # # */

#serviceFilter ul { padding: 8px 0 0 140px; margin-bottom: 20px; height: 24px; background: url(../graphics/filter-by.png) no-repeat 0 0; }
#serviceFilter ul li { display: inline; margin-left: 12px; }
#serviceFilter ul li:first-child { margin-left: 0; }
#serviceFilter ul li a { color: #fff; }
#serviceFilter ul li a:hover { color: #268ed9; }

#styleFilter ul { padding: 8px 0 0 140px; margin-bottom: 30px; height: 24px; background: url(../graphics/filter-by.png) no-repeat 0 -32px; }
#styleFilter ul li { display: inline; margin-left: 12px; }
#styleFilter ul li:first-child { margin-left: 0; }
#styleFilter ul li a { color: #fff; }
#styleFilter ul li a:hover { color: #268ed9; }

ul#portfolioListings li { width: 444px; margin-bottom: 20px; }
ul#portfolioListings li div.folioImage { position: relative; border: 2px solid #ccc; height: 130px; }
ul#portfolioListings li div.folioDetails { width: 420px; margin: 0 auto; display: none; border-left: 2px solid #ccc;  border-right: 2px solid #ccc;  background: url(../graphics/bg-wood.jpg) no-repeat 0 0; color: #fff; }
ul#portfolioListings li div.folioDetails a { color: #fff; }
ul#portfolioListings li div.folioDetails a:hover { color: #268ed9; }
ul#portfolioListings li div.folioDetails div.folioDetailsInner { padding: 20px 20px 10px; } /* jQuery slide-jump-bug fix */
ul#portfolioListings li div.folioDetails p { margin: 0 0 1em; }
ul#portfolioListings li div.folioItemTop { height: 5px; background: url(../graphics/folio-item-top.png) no-repeat 0 0; }
ul#portfolioListings li div.folioItemBottom { height: 5px; background: url(../graphics/folio-item-bottom.png) no-repeat 0 0; }

ul#portfolioListings li div.folioImage a { position: absolute; width: 22px; height: 22px; text-indent: -9999px; }
ul#portfolioListings li div.folioImage a.buttonZoom { top: 0; right: 0; background: url(../graphics/button-zoom.png) no-repeat 0 0; }
ul#portfolioListings li div.folioImage a.buttonZoom:hover { background: url(../graphics/button-zoom.png) no-repeat -22px 0; }
ul#portfolioListings li div.folioImage a.buttonDetails { bottom: 0; right: 0; background: url(../graphics/button-details.png) no-repeat 0 0; }
ul#portfolioListings li div.folioImage a.buttonDetails:hover { background: url(../graphics/button-details.png) no-repeat -22px 0; }

/* # # # # # # # - P a g e : B l o g - # # # # # # # */

body#blog #content h2 { margin: 40px 0 0 0; }
body#blog #content h2 a { color: #268ed9; font-variant: small-caps; }
body#blog #content h2 a:hover { color: #ff7f00; }
body#blog #content h2:first-child { margin: 0 0 0 0; }
body#blog #content h4 { font: 10px Arial, Sans-Serif; }

body#blog #content a.more-link { float: right; color: #268ed9; text-transform: uppercase; }
body#blog #content a.more-link:hover { color: #ff7f00; }

body#blog #content img { padding: 4px; background-color: #fff; border: 1px solid #ddd; margin: 0 20px 20px 0; }
body#blog #content img.left { float: left; }
body#blog #content img.center { display: block; margin: 0 auto; }

body#blog #content div.comments-template { margin: 10px 0 0; border-top: 1px solid #ccc; padding: 10px 0 0; }
body#blog #content div.comments-template ol { margin: 0; padding: 0 0 15px; list-style: none; }
body#blog #content div.comments-template ol li { margin: 10px 0 0; line-height: 18px; padding: 0 0 10px; border-bottom: 1px solid #ccc; }
body#blog #content div.commentmetadata { font-size: 10px; font-weight: normal; }
body#blog #content div.comments-template p.nocomments { padding: 0; }
body#blog #content div.comments-template textarea { font-family: Arial, Helvetica, Georgia, Sans-serif; font-size: 12px; width: 100%; }
body#blog #content div.comments-template img { border: 0; padding: 0; margin: 0; display: none; }

body#blog #content ul { padding-bottom: 10px; }
body#blog #content li { list-style-type: disc; padding-left: 10px; margin-left: 30px; padding-bottom: 10px; }

ol.commentlist { margin: 0; padding: 0; }
ol.commentlist li { margin-bottom: 30px; }
ol.commentlist .author { font-size: 16px; }
ol.commentlist .comment-bubble { width: 444px; margin-left: 0px; }
ol.commentlist .commenttextTop { background: url(../graphics/comment-bubble-top.png) no-repeat 0 0; height: 10px; }
ol.commentlist .commenttext { background-color: #e6e6e6; repeat-y 0 0; padding: 10px 30px 0; width: 384px; }
ol.commentlist .commenttext p { margin: 0; padding-bottom: 10px; text-align: justify; }
ol.commentlist .commenttextBottom { background: url(../graphics/comment-bubble-bottom.png) no-repeat 0 0; height: 34px; }
ol.commentlist .time { padding-left: 18px; margin-left: 10px; padding-bottom: 2px; background: url(../graphics/clock-icon.png) no-repeat 0 0; font-size: 80%; color: #555; }
textarea#comment { font: 11px 'Lucida Grande', Arial, Sans-Serif; width: 444px; }

/* # # # # # # # - P a g e : C o n t a c t - # # # # # # # */

#contactDetails p, #contactDetails li { padding-left: 15px; }

#contact-form ul.form li { border-bottom: 1px dashed #ccc; height: 35px; padding: 8px 0; }
ul.form li input[type=text], ul.form li select, ul.form li textarea { padding: 2px; background-color: #ccc; border: 2px solid #bbb; font: 10px 'Lucida Grande', Sans-Serif; -moz-border-radius-bottomleft: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; }
.valid { border: 2px solid #8ad33c !important; }
.invalid { border: 2px solid #c74343 !important; }

#contact-form ul.form li input, #contact-form ul.form li select, #contact-form ul.form li textarea { width: 216px; }
#contact-form ul.form { width: 444px; }
#contact-form ul.form li label { float: left; width: 220px; display: block; }
#contact-form .required { font-size: 10px; color: #ccc; float: left; display: block; clear: left; }
#contact-form ul.form li.message { height: 130px; }
#contact-form ul.form li.message textarea { width: 436px; height: 90px; }
#contact-form ul.form li.submit { text-align: right; border: 0; }
#contact-form ul.form li.submit input { background: url(../graphics/bg-button.png) no-repeat 0 0; color: #fff; text-transform: uppercase; letter-spacing: 10px; font-weight: bold; cursor: pointer; }
#contact-form ul.form li.submit input:hover { color: #ff7f00; border: 2px solid #ff7f00; }

#subscribe-placeholder { height: 280px; }
#form-container { text-align: center; }
form#subscribe-form { padding-top: 15px; background: url(../graphics/pen-lines-yes-please.png) no-repeat 50% 0; }
form#subscribe-form label { display: block; padding-bottom: 3px; }
form#subscribe-form ul.form li { padding-bottom: 10px; }
form#subscribe-form input[type=submit] { margin-top: 75px; }

/* # # # # # # # - M i s c - # # # # # # # */

body#blog #content img.wp-smiley { margin: 0; padding: 0; border: 0; }

ul.standard-list { list-style-type: disc; padding-left: 20px; }
ul.standard-list li { margin-bottom: 10px; }