/*
Theme Name: SJL Web Design Perth
Theme URI: http://www.sjlwebdesign.com.au
Version: 1.0
Author: Sam Logan
Author URI: http://www.sjlwebdesign.com.au
*/

body { font-family: Arial, Helvetica, sans-serif; font-size:62.5%; color:#585858; margin:0px; background-color:#302f2f; min-width:1200px; }
.wrap { width:960px; margin:0px auto; }
#navigation { width:612px; height:55px; float:right; margin-top:60px; }
#navigation ul { width:612px; height:55px; list-style-type:none; margin:0px; padding:0px; }
#navigation li { height: 52px; display: block; padding: 0; cursor: pointer; float:left; }
#navigation a { display:block; width:95px; height:52px; text-indent:-9999px; background-image:url(img/nav-sprite1.jpg); background-repeat:no-repeat; }

#sub-header { width:100%; background-image:url(img/sub-header-bg.jpg); background-repeat:repeat-x; background-color: #FFF;}
#sub-header .wrap { position: relative; } 

#nav1 { background-position: 0px 0px; }
#nav1:hover { background-position: 0px -51px; }
#nav2 { background-position: -95px 0px; width:123px!important; }
#nav2:hover { background-position: -95px -51px; width:123px!important; }
#nav3 { background-position: -220px 0px; width:178px!important; }
#nav3:hover { background-position: -220px -51px; width:178px!important; }
#nav4 { background-position: -398px 0px; width:102px!important; }
#nav4:hover { background-position: -398px -51px; width:102px!important; }
#nav5 { background-position: -500px 0px; width:114px!important; }
#nav5:hover { background-position: -500px -51px; width:114px!important; }

#sub-head-box { width:1030px; height:157px; background-image:url(img/blog-head.jpg); background-repeat:no-repeat; margin:12px auto 0px; padding:110px 0px 0px 170px; }
#sub-head-box .text { width:470px }
#sub-head-box .text p { font-size:1.7em; font-family: Arial, Helvetica, sans-serif; color:#bbbbbb; }
#sub-head-box .text strong{ color: #d2d2d2; text-shadow: #222222 1px 1px 1px; background: url(img/latest-news.jpg) left center no-repeat; padding: 8px 0px 8px 42px; }
#sub-head-box .text a { color: #d2d2d2; margin-left: 4px; text-decoration: none; text-shadow: #222222 1px 1px 1px; }
#sub-head-box .text a:hover{ color: #00b1da; }
#sub-head-box .text span.latest{ height: 50px; width: 140px; float: left; font-size: 1.6em; }
#sub-head-box .text span.postlink{ height: 50px; width: 330px; float: left; font-size: 1.6em; font-style: italic; }

#content { background-color:#FFF; }

#blog{ padding-top: 20px; }
#blog .post{ padding: 20px 0px; border-bottom: #CCC 1px dashed; }
#blog .left{ width: 630px; float: left; padding: 0px 60px 0px 20px; }
#blog .right{ width: 250px; float: left; }
#blog .right h2{ margin: 15px 0px 10px; }
#blog .right ul{ list-style-type: none; padding: 0px; margin: 0px; }
#blog .right ul a{ font-size: 1.2em; margin-bottom: 4px; display: block; background: url(img/bullet.gif) center left no-repeat; padding-left: 25px; }

#blog .navigation{ width: 590px; background: url(img/nav-bg.jpg) no-repeat; padding: 18px 20px 20px; height: 20px; font-size: 1.1em; text-transform: uppercase; }
#blog .navigation a{ text-decoration: none; text-shadow: #FFF 1px 1px 1px; }
.postmetadata{ background-color: #EFEFEF; border: #CCC 1px dashed; padding: 10px; clear: both; margin-top: 30px; }
div.comments{ padding-top: 30px; border-top: #CCC 1px dashed; }
ol.commentlist{ list-style-type: none; }
ol.commentlist li{ border-bottom: #CCC 1px dashed; padding: 15px 0px; }
.avatar{ float: left; margin-right: 10px; }
.blogger{ font-size: 1.3em; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; }
.commentmetadata{ margin-top: -20px!important; padding: 0px; clear: both; }
div.comments label{ text-indent: 0px; font-size: 1.2em; display: block;}
div.comments input[type='text']{ width: 300px; border: #999 1px solid; padding: 8px; display: block; }
div.comments textarea{ width: 300px; border: #999 1px solid; padding: 8px; display: block; }
#respond{ margin-top: 15px; }
.archivetitle{ margin-bottom: 20px; }
h2 a{ color: #00b1da; }
h2 a:hover{ background: url(img/read-more.gif) right center no-repeat; padding-right: 22px; }

#footer { height:355px; width:100%; background-image:url(img/footer-bg.jpg); background-repeat:repeat-x; padding-top:0px; padding-bottom:40px; }
#footer .wrap { background-image:url(img/footer-wrap.jpg); background-repeat:no-repeat; height:315px; padding-top:30px; }
#footer img { margin:25px 450px; }
#footer ul { list-style-type:none; color:#FFF; margin: 0px 0px 0px 275px; text-transform:uppercase; }
#footer li { display:inline; margin-right:20px; padding:0px; }
#footer a { color:#FFF; text-decoration:none; }
#footer a:hover { color: #00b1da; }
#footer p { margin: 10px 0; color:#FFF; text-align:center; text-transform:uppercase; font-size:1.1em; padding:0px 0px 0px 30px; }
#footer .top { width:200px; height:185px; float:left; margin-right:40px; position: relative; }
#footer .top h3 { font-size:1.5em; color:#FFF; border-bottom:1px solid #565656; padding-top:10px; }
#footer .top h3.rss { background-image:url(img/rss-h3.png); background-position:left; padding:10px 0px 0px 30px; background-repeat:no-repeat; }
#footer .top h3.tweet {background-image:url(img/tweet-h3.png); background-position:left 5px; padding:10px 0px 0px 30px; background-repeat:no-repeat; }
#footer .top ul { list-style-type:none; color:#FFF; margin:10px 0px 0px; padding:0px; text-transform:none; font-size:1.2em; }
#footer .top li { display:block; line-height:1.5em; }
#footer .top li.margin-top { margin-top:20px; } 
#footer .top li span { color:#eeeeee; }
#footer .top ul.news li { margin-bottom:5px; }
#footer .top ul.twitter { }
#footer .top ul.twitter span { display:block; margin-top:5px; }
#footer .check { width:200px; height:100px;   }
.check ul, .check li { margin: 0px; padding:0px; list-style:none; margin-left:-20px; text-align:center; }
.check { overflow: hidden; height:169px; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:1.1em; padding-top:11px; }
.check li{ width:200px; height:169px; overflow:hidden;  }
#checkprev, #checknext{ display:block; width:30px; height:77px; position:absolute; left:15px; top:120px; z-index:1000; }
#checknext { left:165px; }
#checkprev a, #checknext a { display:block; position:relative; width:30px; height:77px; background:url(img/prev-button.png) no-repeat 0 0; }
#checknext a { background:url(img/next-button.png) no-repeat 0 0; }
.top .more { position:absolute; top:125px; left:42px; color:#FFF; font-size:1.2em;}


h1, h2, h3, h4 { color:#00b1da; margin:0px; font-family: Arial, Helvetica, sans-serif; font-weight:normal;}
h2 { font-size:2em; }
h3 { font-size:2em; }
p { font-size:1.3em; line-height: 1.6em; color:#545353; }
a img { border:none; }
a {  color:#585858; outline:none; }
a:hover { color:#00b1da; }
#blog .left ul, #blog .left ol{ font-size: 1.2em; }
code{ font-size: 1.4em; line-height: 2em; }
#blog li{ margin-bottom: 6px; }
.clear { clear:both; }
label { display: block; text-indent: -9999px; font-size: 1px; }
label.contact { font-size:1.2em; text-indent:0px; display: block; margin-top: 8px; color:#999797;}
noscript{ font-size: 1.4em; text-align: center; margin: 5px 0px; display: block; color: #999; }
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:72px; height:88px; border:none; text-indent:-999px; background:url(img/slide-sprite.png) no-repeat 0px -725px; }
#toTopHover { background:url(img/slide-sprite.png) no-repeat 0px -816px; width:72px; height:88px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus { outline:none; }

img.centered { display: block; margin-left: auto; margin-right: auto; }
img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
.alignright { float: right; }
.alignleft { float: left }