/*
Theme Name: Joe Howard Design
Theme URI: http://joehowarddesign.com.com
Description: The totally awesome wordpress theme was designed by Joe Howard)
Version: 2 (WP2.7.1)
Author: Joe Howard
Author URI: http://joehowarddesign.com
Tags: black, blue, clean, basic
*/

@import "style/css/reset.css";

/*
blacks
000000
171717
181818
282828
323232

green:

73d2fc
73d2fc



*/
body {background:#111111 url(style/images/bg310.jpg) repeat fixed 0 0; color:#ffffff; text-align:left; font-size:62.5%; font-family:'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode',Tahoma,Arial,Verdana,sans-serif;margin:0;padding:0; }

h1, h2, h3, h5, h5, h6 { font-weight:normal; letter-spacing:-1pt; font-family:'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode',Tahoma,Arial,Verdana,sans-serif; } 

/* text */
h1, h2, h3, h4, h5 {}
h1 {font-size:2.8em;}
h2 {font-size:2.6em;}
h3 {font-size:2.2em;}
h4 {font-size:1.9em;}
h5 {font-size:1.6em; letter-spacing:0pt;}

p {font-size:1.39em; line-height:1.52em; font-weight:normal; font-family:Arial, Helvetica, sans-serif;}
a {color:#73d2fc; text-decoration:none;}
a:hover {color:#c2c2c2; text-decoration:none;}


/* elements */
ul {list-style-type:none;}
li {list-style-type:none;}
ol {list-style:decimal;}
hr {}

.greenbg {background:#171717; padding:4px; color:#ccc;}

#topbar {height:34px; margin:0; padding:0; }
#mainbar {height:52px;}
#header {width:960px; margin:0 auto; position:relative;}
#logo {width:81px; height:30px; position:absolute; left:10px; top:21px; background:url(style/images/logo25.png) no-repeat;}
#twitter {width:157px; height:23px; position:relative; float:right; top:27px; background:url(style/images/twitterimg.png) no-repeat;}
#navwrapper {height:42px; width:962px; margin:10px auto 0 auto; border-bottom:1px solid #242627;border-top:1px solid #242627;height:42px;}
#mainnavigation {float:left;width:500px; margin:34px 0 0 140px;}
#lowerbar {border-top:1px solid #2E3334;height:30px;margin:10px auto 0;width:960px;}
#wrapper {width:960px; margin:0px auto;}
#col1 {float:left; width:800px; margin:10px 0 0 0;}
#col2 {float:right; width:110px; margin:10px 0 0 10px; background:#000;}
#sb {margin:10px; background:#181818;}
#sbp {padding:10px;}
#footer {width:960px; margin:60px auto; clear:both; }
#twitterbox {height:20px; font-size:1em; width:940px; margin:0 10px 10px 10px; text-align:right;}


.clr {clear:both;}
.left {float:left;}
.right {float:right}


/* alternate h tags */
h2.archive { padding:0 0 0 20px;font-size:1.6em; letter-spacing:.5pt; color:#888;}

/* post stuff */
.postmar {margin:10px 0;}
.postborder {}
.post {width:780px;  padding:10px 20px 0 20px; margin:0 0 60px 0;}
.post img {border:1px solid #000; margin:0 0 10px 0;}
.post h2 {border-bottom:3px solid #181818; margin:0 0 0px 0; font-size:1.6em; letter-spacing:.5pt; color:#b1afaf;}
.post h2 a {background:#212425 none repeat scroll 0 0;color:#cccccc;padding:5px 10px;}
.post h2 a:hover {background:#73d2fc none repeat scroll 0 0;color:#FFFFFF;padding:5px 10px;}
.post p {margin:6px 0 4px 0; font-size:1.23em;}

.date {float:right; color:#999; font-size:1.17em;}

.postedin {margin:20px 0 10px 0;}
.postedin p {font-size:1.1em; margin:4px 0 6px 0; color:#888;}
.postedin a, .postedin a:hover {padding:2px 4px; text-decoration:none;}
.postedin a {background:#1b1b1b; color:#cdcdcd;}
.postedin a:hover {background:#181818; color:#fff;}


.afterpost {margin:20px 0 10px 0;}
.afterpost img {border:0px;}
.afterpost p {font-size:1.12em; margin:4px 0 6px 0;}



.clientlink {width:760px; padding:5px 10px 0 5px; border-top:1px dotted #000; border-bottom:1px dotted #000; font-size:1em; color:#ccc; margin:5px 0 10px 0;}
.clientlink p strong {color:#555;}
.clientlink a, .clientlink a:hover {}
.clientlink a {border-bottom:1px solid #73d2fc;}
.clientlink a:hover {color:#333;}



/* navigation stuff */
#menu {font-size:1.11em; color:#73d2fc; margin:0 0 0 20px;}
#menu li a:visited {color:#fff;}

/* widget stuff */
.sbds {height:15px; width:90px; margin:0; padding:0;background:url(style/images/sidebards25.jpg) repeat-x; }

h2.widgettitle {font-size:1.31em; letter-spacing:-.5pt; }
#sbp ul li {margin:0 0 20px 0;}
#sbp ul li ul li {margin:6px 0; border-bottom:1px dotted #111;}



/* column lists - 4 column */
.column4 {margin:0 0 40px 0;}
.column4 ul {list-style:none; display:list-item; width:190px; float:left; margin:0 0px 0 0px; color:#73d2fc;}
.column4 li {width:170px; padding:4px 0 0 0;}
.column4 li p {margin:1px 5px 8px 5px; border-bottom:2px dotted #222222; font-size:1.26em; color:#fff; }
.column4 li p strong {color:#666;}
.column4 li p a:link {text-decoration:underline; font-size:1.26em; color:#84c32f;}
.column4 li p a:hover {color:#ccc;}

.col2 {float:left; margin:0 40px 50px 0;}
.col2 p {margin:5px 0 15px 0; border-bottom:1px dotted #292929;}





/* comment stuff */	

#comments {color:#eeeeee; font-size:1.3em; width:780px; background:#111111;  border:10px solid #000000; padding:10px 10px 0 10px; margin:80px 0 20px 0;}
#comments p {font-size:1.0em; letter-spacing:.2pt; line-height:1.53em;}
#commentnumber h3 {font-size:1.34em;}
.avatar img {float:left;}
#respond {color:#73d2fc; font-size:1.2em;}
#commentform {}
#comment {}

ol.commentlist {margin:0;padding:0;}
.commentlist li {list-style:none;margin-bottom:14px;}
.commentlist cite {padding: 14px 8px;display:block;font-style:normal;border-top:1px dotted #181919;color:#eee;}	
.commentlist a:link, .commentlist a:visited {color:#73d2fc;}
.commentlist a:hover, .commentlist a:active {color:#eee;}

/* comments */
div.comment{background:#111111 url(style/images/sidebox-bg.jpg) left bottom repeat-x;border:#161616 1px solid;padding:4px 10px 19px 10px;margin:0 0 21px 0;line-height:180%;}
div.comment div.time-comments{border-bottom:#000000 1px dotted;padding:0 0 18px 0;font-size:.9em;color:#999;margin:0 0 10px 0;}
div.comment div.time-comments div.time{float:left;background:url(style/images/clock.png) 0 2px no-repeat;padding:0 0 0 23px;}
div.comment div.time-comments div.time-awaiting{float:left;background:url(style/images/minus.png) 0 2px no-repeat;padding:0 0 0 23px;}
div.comment div.time-comments div.num-comments{float:right;background:url(style/images/comment.png) 0 4px no-repeat;padding:0 0 0 23px;}
div.comment div.time-comments div.num-comments a{color:#888;}
div.comment div.time-comments div.num-comments a:hover{color:#73d2fc; border-bottom:1px solid #888;}
div.comment div.time-comments div.author-name{float:right;}
div.comment div.time-comments div.author-name a:link, div.comment div.time-comments div.author-name a:visited{color:#ccc;text-decoration:none;}
div.comment div.time-comments div.author-name a:hover{color:#73d2fc; border-bottom:1px solid #73d2fc;}
div.comment h1{font-size:250%;font-weight:normal;color:#000000; margin:0 0 20px 0;}
div.comment h1 a:link, div.comment h1 a:visited{color:#000000;}
div.comment h1 a:hover{color:#000000;}
div.comment img{float:left;padding:4px; margin:0px 20px 15px 0;}
div.comment img.avatar{float:left;padding:4px; margin:0px 15px 10px 0;}
div.comment div.icons-readmore{color:#888;margin:15px 0 0 0;}

div.comment div.icons-readmore div.readmore{float:right;margin:5px 0 0 0;}
div.comment div.icons-readmore div.readmore a.more{background:#E1E1E1 url(style/images/readmore-bg.png) 91% 4px no-repeat;padding:2px 35px 3px 10px;border:#CCC 1px solid;color:#666;}

/* auth comments */
div.comment-admin {background:#161616 url(style/images/post-bg.jpg) left top repeat-x;border:#161616 1px solid;padding:19px 25px 19px 25px;margin:0 0 21px 0;line-height:180%;}
div.comment-admin div.time-comments{border-bottom:#CCC 1px solid;padding:0 0 18px 0;font-size:.9em;color:#999;margin:0 0 10px 0;}
div.comment-admin div.time-comments div.time{float:left;background:url(style/images/clock.png) 0 2px no-repeat;padding:0 0 0 23px;}
div.comment-admin div.time-comments div.time-awaiting{float:left;background:url(style/images/minus.png) 0 2px no-repeat;padding:0 0 0 23px;}
div.comment-admin div.time-comments div.num-comments{float:right;background:url(style/images/comment.png) 0 4px no-repeat;padding:0 0 0 23px;}
div.comment-admin div.time-comments div.num-comments a{color:#888;}
div.comment-admin div.time-comments div.num-comments a:hover{color:#73d2fc; border-bottom:1px solid #888;}
div.comment-admin div.time-comments div.author-name{float:right;}
div.comment-admin h1{font-size:250%;font-weight:normal;color:#000000;font-family:Georgia;margin:0 0 20px 0;}
div.comment-admin h1 a:link, div.comment-admin h1 a:visited{color:#000000;}
div.comment-admin h1 a:hover{color:#73d2fc; border-bottom:1px solid #73d2fc;}
div.comment-admin img{float:left;padding:4px;border:#161616 1px solid;margin:0px 20px 15px 0;}
div.comment-admin img.avatar{float:left;padding:4px;border:#161616 1px solid;margin:0px 15px 10px 0;}
div.comment-admin div.icons-readmore{color:#888;margin:15px 0 0 0;}

div.comment-admin div.icons-readmore div.readmore{float:right;margin:5px 0 0 0;}
div.comment-admin div.icons-readmore div.readmore a.more{background:#E1E1E1 url(style/images/readmore-bg.png) 91% 4px no-repeat;padding:2px 35px 3px 10px;border:#CCC 1px solid;color:#666;}
img.wp-smiley{border:none;border:0;padding:0;background:none;float:inherit;margin:0;}
div.comment p img.wp-smiley{border:none;border:0;padding:0;background:none;float:inherit;margin:0;}
div.comment-admin p img.wp-smiley{border:none;border:0;padding:0;background:none;float:inherit;margin:0;}

/* comments form */

div#replyform {color:#eeeeee;}
div#replyform label {}
div#replyform #author, div#replyform #email, div#replyform #url {height:22px; width:220px; padding:4px 6px; color:#ddd; background:#323232; border:1px dashed #000;margin:5px 10px 0 0; font-size:1.1em;}

.respondtbox {width:760px; background:#222; border:1px dashed #000; height:240px; color:#eee; padding:8px 10px; margin:10px 0;}
.respondbtn {width:140px; height:30px; color:#eee; background:#555; border:1px solid #000; text-align:center; font-size:.9em; letter-spacing:.5pt; font-family:'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode',Tahoma,Arial,Verdana,sans-serif; margin:0 0 20px 0;}



/* footer stuff */

#innerfooter {width:940px; margin:10px;  height:174px;}
#emailsignup { padding:10px; border-right:1px solid #000000; width:300px; float:left;}
#emailsignup p {color:#535353; font-size:1.2em; margin:0 0 10px 0;}
#emailsignup label {margin:4px 10px 0 10px;}
#emailsignup .nname, #emailsignup .nemail {width:280px; border:1px dashed #1b1b1b; height:20px; padding:3px; color:#fefefe; background:#535353; margin:4px 0;}
#emailsignup .nbtn {width:80px; border:1px solid #161616; height:20px; padding:2px; color:#171717; background:#73d2fc; margin:4px 0;}

#bottomnav {float:left; width:160px; margin:0px 0 10px 10px; height:174px; border-right:1px solid #000;}
#bottomnav ul {margin:10px 0 0 10px;}
#bottomnav ul li {font-size:1.19em; margin:0 0 2px 0; }
#bottomnav li ul {margin:2px 0 0 0;}
#bottomnav ul li ul li {font-size:.9em; margin:2px 0 2px 8px;}
#bottomnav p {font-size:1.1em; margin:10px 0 8px 0;}

#recentwork {float:left; margin:0 0 0 10px;}
#recentwork h3 {font-size:1.3em; color:#ccc; margin:10px 0 0 0; letter-spacing:0pt;}
#recentwork ul li h5 {font-size:1.19em; color:#333; letter-spacing:0pt;}
#recentwork ul {margin:10px 0 0 0;}
#recentwork ul li {margin:4px 0 4px 10px;}


/*plugin specific */

.amzshcs-item img {margin:0 5px;}

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
br.dirtyLittleTrick { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
div { position:relative } /* This will save you having to declare each div's position as 'relative' and allows you to absolutely position elements inside them */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */