/*   

Theme Name: Mike Johnson Design

Theme URI: http://www.mikejohnsondesign.com/

Description: Web 2.0 Design filled with custom colors, images, and layout.

Author: Michael Johnson

Author URI: http://www.mikejohnsondesign.com

*/

*, html, h1, h2, h3, h4, h5, h6, ol, fieldset, blockquote {margin:0; padding:0;}
textarea {overflow:hidden;}
h1 {}
h2 {font-size:26px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-style:normal; color:#23546b;}
h3 {font-size:21px; font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; font-style:normal; color:#F9F9F9;}

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

a, a:active {text-decoration:none; outline:none; color:#1E5067;}
a:hover {text-decoration:underline;}

p {font-size:14px; line-height:19px; color:#0f0f0f; padding-bottom:15px; clear:both;}
p.noClear {clear:none; float:left;}
body {background:#101010; margin:0; padding:0; color:#0f0f0f; text-align:center; width:100%; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;}

#wrap {background:#F0F0F0 url(images/bg-body.jpg) repeat-x top; margin:0; padding:0;}

#container { margin:0 auto; padding:0; width:964px; text-align:left;}

body.home #header {height:119px; width:964px; margin:0; padding:0; background:url(images/bg-logo.jpg) no-repeat left top;}
body.sub #header {height:119px; width:964px; margin:0; padding:0; background:url(images/bg-logo-sub.jpg) no-repeat left top;}
#header h1, #headerSub h1 {text-indent:-99999em; width:514px; height:119px; float:left;}
#header h1 a, #headerSub h1 a {display:block; width:284px; height:84px;}


#header #nav, #headerSub #nav {float:left; width:444px; height:37px; background:url(images/bg-nav.gif) repeat-x; border-left:1px solid #051e2a; border-top:1px solid #051e2a; border-bottom:1px solid #051e2a;margin:38px 0 0;}
#header #nav ul, #headerSub #nav ul{margin:0 0 0 2px; padding:0;}
#header #nav ul li, #headerSub #nav ul li {float:left; list-style:none; border-right:1px solid #051e2a;}
#header #nav ul li.last-child, #headerSub #nav ul li.last-child {border:none;}
#header #nav ul li a, #headerSub #nav ul li a {text-decoration:none; color:#4e92b1; padding:11px 20px 9px; display:block; font-size:15px;}
#header #nav ul li a:hover, #headerSub #nav ul li a:hover {background:url(images/bg-nav-hover.jpg) repeat-x; color:#F9F9F9;}
#header #nav ul li a.active, #headerSub #nav ul li a.active {background:url(images/nav-hover.gif) repeat-x; color:#F9F9F9;}
#header #nav .current_page_item a:link, #headerSub #nav .current_page_item a:link, #header #nav .current_page_item a:visited, #headerSub #nav .current_page_item a:visited, #header #nav .current_page_item a:hover, #headerSub #nav .current_page_item a:hover, #header #nav .current_page_item a:active, #headerSub #nav .current_page_item a:active { background:url(images/bg-nav-hover.jpg) repeat-x; color:#F9F9F9;}
#contentContainer {width:964px; height:427px; min-height:427px; background:url(images/bg-container.jpg) repeat-y right; margin:0; padding:0 0 40px;}
html>body #contentContainer {height:auto;}

#contentContainerSub {width:964px; height:427px; min-height:427px; background:url(images/bg-contentContainer-sub.jpg) repeat-y right; margin:0; padding:0 0 40px;}
html>body #contentContainerSub {height:auto;}

#mainContent {background:url(images/bg-contentContainer.jpg) no-repeat left top; width:615px; float:left; margin:0; padding:0 0 30px;}
#mainContentSub {background:url(images/bg-container-sub.jpg) no-repeat top left; width:590px; float:left; margin:0; padding:0 25px 30px 0; position: relative;}
#mainContent h1, #mainContentSub h1, #mainContent h2, #mainContentSub h2 {padding:40px 35px 15px 0;}
#mainContentSub h2 span.downloadPDF {float:right;}
#mainContentSub h2 span.downloadPDF a {color:#333; font-size:14px; padding:0 0 5px 5px; margin:10px -60px 0 0; *margin:0; display:inline-block; border:none; *border-left:1px solid #CCC; *border-bottom:1px solid #CCC;}
#mainContentSub a.backTop {color:#FFFFFF; clear:both; float:right; text-align:center; background:url(images/nav-hover.gif) repeat-x; width:100px; height:21px; display:block; font-size:15px; padding:7px 0; margin-top:15px; margin-right:18px;}
#mainContent a.backTop {color:#FFFFFF; clear:both; float:right; text-align:center; background:url(images/nav-hover.gif) repeat-x; width:100px; height:21px; display:block; font-size:15px; padding:7px 0; margin-top:15px; margin-right:0;}
#mainContent a.backTop:hover {color:#FFFFFF; text-decoration:none; background:url(images/bg-nav-hover.jpg) repeat-x;}
#mainContentSub a.backTop:hover {color:#FFFFFF; text-decoration:none; background:url(images/bg-nav-hover.jpg) repeat-x;}
#mainContent p a {color:#2e7190;}
#mainContent a img {float:left; margin:20px 15px 10px 0; border:1px solid #CCC;}

#mainContentSub p a img {float:left; margin:-25px 15px 10px 0; border:1px solid #CCC; padding:5px; background:#FFF url(images/bg_header.gif) repeat-x top;}
#mainContentSub h3 {color:#000; font-size:16px; padding-top:10px; font-weight:bold;}
#mainContentSub h4 {color:#000; font-size:14px; padding-top:10px; font-weight:bold;}
#mainContentSub ul li {line-height:22px; list-style:none;}
#mainContentSub ul li a {color:#2e7190; text-decoration:none; font-size:14px; border:none;}
#mainContentSub ul li a:hover {text-decoration:underline;}

#mainContent ul.whatIDo, #mainContentSub ul.whatIDo {float:left; width:285px; list-style:none; margin-top:15px; margin-bottom:25px; display:inline;}
#mainContent ul.whatIDo li, #mainContentSub ul.whatIDo li {background:url(images/check-mark.gif) no-repeat left; padding-left:25px; color:#b74d23; font-size:17px; line-height:32px;}
#mainContent ul.whatIDo li.none, #mainContentSub ul.whatIDo li.none {color:#488aa8; background-image:none; padding-left:0;}

#mainContent .post {clear:both; border-bottom:2px dotted #666; margin-top:25px; position: relative;}
#mainContent .post h2 {color:#1b1b1b;}
#mainContent .post h3 {color:#000;}

#mainContent #homePosts {background:#FFF; padding:15px; border:4px solid #CCC; margin-top:30px;}
#mainContent h2#homePostsH2 {padding:5px 5px 5px 0; border-bottom:1px solid #CCC; font-size:23px; color:#b74d23;}

.navigation {margin:10px 0 0; /*background:url(images/bg-nav-hover.jpg) repeat-x;*/ width:580px; height:33px;}
.navigation .alignright {width:100px; float:right; display:inline; margin-top:8px;}
.navigation .alignleft {width:260px; float:left; display:inline; margin-top:8px;}
.navigation .alignright a, .navigation .alignleft a {color:#000; padding:6px 0px 10px;}
.navigation .alignright a:hover, .navigation .alignleft a:hover {color:#488aa8; /*background:url(images/nav-hover.gif) repeat-x;*/ text-decoration:underline;}

#content {width:590px; float:left; margin:0; padding:0 25px 30px 0;}

.posts .post {border:1px solid #ccc; padding:5px 15px 15px 15px; margin-bottom:25px; background:#FFF url(images/bg-input.jpg) repeat-x top; position: relative;}
.post h2{font:normal 15pt georgia, times;}	
.post h2 a{color: #000;	text-decoration: none;}
	
.post h2 a:hover{color: #777;text-decoration: none;}
.post h3 a, h3 a:visited {color:#4e92b1; text-decoration:none; border:none;}
.post h3 a:hover {color:#ba6510; border:none;}

.posts .post small {margin-bottom:10px; display:block; border-bottom:1px solid #F3F5F7;}

.post .entry p a img {margin-top:35px; clear:both !important;}
.entry p{font-size:14px; line-height:19px; color:#0f0f0f; padding-bottom:15px;}

.postmetadata{clear: both; background:#F7F7F7; border:1px solid #DDDDDD; padding:6px; margin:10px 0 0;}
	
#rssFeed {width:550px; border-bottom:1px solid #CCCCCC; padding:10px 10px 20px 0; }
#rssFeed h2.myTitle {font-size:24px; color:#666; padding-top:10px; border-bottom:2px dotted #666;}
#rssFeed h2 {font-size:18px; color:#666; padding-top:10px;}
#rssFeed h2 a {color:#23546b;}

.myWebsites {width:580px; border-bottom:1px solid #d9d9d9; padding:0 0 20px;}
.myWebsites h3 {padding:20px 20px 0 0; margin:0; color:#061f2a; font-size:14px;}
.myWebsites a.num-of-comments {position:relative; left:-34px; top:15px; font-size:24px; color:#1d4e64; text-align:center; width:35px; height:33px; display:block; background:url(images/bg-num-of-comments.jpg) no-repeat;}
.myWebsites a.num-of-comments:hover {color:#BA6510; text-decoration:none;}
.myWebsites a img.myPortfolio {background:#fbfbfb; padding:5px; margin:-55px 0 0; border:1px solid #d1d1d1;}
.myWebsites p {clear:both;}

/*Pretty much just basic styling for sidebar*/
#sidebar {float:left; width:349px; padding:20px 0;}
#sidebar .search {margin-left:60px; margin-bottom:0; *margin-bottom:25px;}

/*THIS IS THE MAIN SEARCH FORM*/
#sidebar .search .searchform form {padding-bottom:5px; *padding-bottom:25px;}
#sidebar .search .searchform input {width:172px; float:left; padding:6px; background:#E5E5E5; border:1px solid #CCC; margin-right:15px; display:inline; color:#1b1b1b;}
#sidebar .search .searchform input.submit {border:none; padding:0; width:64px; height:30px; float:left; display:inline;}

/*When someone searches, but nothing is found - form*/
.searchAgain {width:550px; float:left;}
.searchAgain form.searchformAgain {width:100%;}
.searchAgain form.searchformAgain input.searchBoxAgain {width:400px; padding:5px 10px; color:#5a5a5a; border:1px solid #5a5a5a; background:#FFF url(images/bg-input.jpg) repeat-x top; font-size:14px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; float:left;}
.searchAgain form.searchformAgain input.submitAgain {width:75px; height:30px; background:#488aa8; border:1px solid #000; padding: 0 0 3px; color:#FFF; cursor:pointer; float:left; display:inline; margin-left:10px;}

#sidebar h3 {background:url(images/bg-sidebar-h3.gif) no-repeat top; height:38px; width:317px; color:#f9f9f9; margin-top:20px; padding:4px 0 5px 30px; position:relative; left:21px;}
#sidebar ul {margin-left:60px; padding:0 20px 15px 0; list-style:none; }
#sidebar ul li a {color:#4e92b1; border-bottom:1px dotted #4e92b1; padding:7px 0; width:264px; display:block;}
#sidebar ul li a:hover {text-decoration:none; color:#BA6510;}

/*The awesome "hire me" form*/
#sidebar .hireMe {margin-left:60px; width:270px;}
#sidebar .hireMe form {margin:0; padding:0; width:270px;}
#sidebar .hireMe form label {width:240px; display:block; padding-bottom:3px;}
#sidebar .hireMe form input, #sidebar .hireMe form textarea {font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; width:240px; float:left; padding:6px; background:#E5E5E5; border:1px solid #CCC; margin-right:15px; margin-bottom:15px; display:block; color:#999;}
#sidebar .hireMe form input.submit {width:75px; height:30px; background:url(images/nav-hover.gif) repeat-x top; border:none; padding: 0 0 3px; color:#F7F7F7; cursor:pointer; float:left; margin-bottom:0; *margin-bottom:25px;}
#sidebar .hireMe form input.submit:hover {background:url(images/bg-nav-hover.jpg) repeat-x;}

/*Latest work styling*/
#sidebar p {width:264px; margin-left:60px; padding-right:20px; line-height:20px;}
#sidebar p img.profilePic {float:right; margin:5px 0 10px 15px;} 
#sidebar p a {color:#4e92b1;}
#sidebar p a:hover {text-decoration:none; color:#BA6510;}
#sidebar .latestWork {width:284px; margin-left:50px;}
#sidebar .latestWork a {float:left;}
#sidebar .latestWork a img {width:125px; height:125px; margin:3px 0 5px 8px; *margin:3px 0 5px 6px; display:inline; border:1px solid #CCC; padding:3px;}

#footerContainer {clear:both; background:#101010; width:964px; margin:0 auto;}
#footer {height:30px; margin-top:40px;}
#footer ul {float:left; width:320px; list-style:none;}
#footer ul li {float:left;}
#footer ul li a {color:#8b8b8b; background:url(images/footer-div.gif) no-repeat right; padding:0 10px; text-decoration:none;}
#footer ul li a:last-child {background:none; padding:0 10px; text-decoration:none; border: none;}
#footer ul li a:hover {color:#fff;}
#footer p {float:left; font-size:11px; color:#666; width:300px; line-height:normal;}
#footer p a {color:#666;}
#footer p a:hover {color:#CCC; text-decoration:none;}

#social {width:300px; float:left; position:relative; top:-10px; left:40px;}
#social a img {display:inline; margin:0 10px; padding:0;}

#sidebar p.pricing {border:1px solid #E5E291; background:#fffdc6; padding:5px; color:#91821e; font-size:14px; margin-left:56px;}

/*COMMENTS*/
.commentMe {width:530px; padding:10px; clear:both;}
.commentMe form#commentform {width:530px;}
.commentMe form#commentform textarea {width:530px; background:#FFF url(images/bg-input.jpg) repeat-x top;}
.commentMe input#commentAuthor, input#commentEmail, input#commentUrl {width:250px; float:left; padding:6px; background:#FFF url(images/bg-input.jpg) repeat-x top; border:1px solid #CCC; margin-right:15px;margin-bottom:7px; display:inline; color:#5a5a5a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}
.commentMe textarea#commentComment {width:530px;padding:6px; background:#FFF url(images/bg-input.jpg) repeat-x top; border:1px solid #CCC; margin-right:15px; display:inline; color:#5a5a5a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}
.commentMe input#commentSubmit {width:75px; height:30px; background:#488aa8; border:1px solid #000; padding: 0 0 3px; color:#FFF; cursor:pointer; float:left;}

#comments_box {background:#000;}

/*Last but not least, the contact page form*/
form.wpcf7-form input.wpcf7-validates-as-required, form.wpcf7-form span.wpcf7-form-control-wrap input {width:250px; float:left; padding:6px; background:#FFF url(images/bg-input.jpg) repeat-x top; border:1px solid #CCC; margin-right:15px;margin-bottom:7px; display:inline; color:#5a5a5a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}
form.wpcf7-form span.wpcf7-form-control-wrap textarea {width:550px;padding:6px; background:#FFF url(images/bg-input.jpg) repeat-x top; border:1px solid #CCC; margin-right:15px; display:inline; color:#5a5a5a; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:13px;}

.alignright {
float: right;
margin: 5px 0 15px 15px;
display: inline;
}

.alignleft {
float: left;
margin: 5px 15px 15px 0;
display: inline;
}

.alignnone {

}

#socialLinks {
position: absolute;
right:5px;
  top:80px;
}

#socialLinks #facebook, #socialLinks #google,#socialLinks #twitter {
display: inline;
}

cite {font-style: normal;}

.commentSection {
clear: both;
}

.commentSection ol {
list-style:none;
}

.allComments {
width: 570px;
margin-top: 10px;
}

.authorLeft {
float: left;
width: 170px;
text-align: left;
}

.authorLeft h3 a {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color:#333;
}

.authorLeft h3 a:hover {
color:#0099CC;
}

.authorLeft p {
font-size: 10px;
color:#333;
}

.commentRight {
float: left;
width: 390px;
height: 50px;
min-height: 50px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
}

.commentRight .arrow {
width: 24px;
height: 50px;
position: absolute;
top: -2px;
left: -24px;
background: url(images/comment-arrow.png) left top;
}

.commentRight .padding {
padding: 10px;
}

html>body .commentRight {height: auto;}

input.text {
background: url(http://mikejohnsondesign.com/wp-content/themes/mjd/images/bg-input.jpg) repeat-x top;
padding:5px;
}



textarea {width: 560px; margin-top: 10px; border:1px solid #CCC; padding: 5px; background: #FFF url(http://mikejohnsondesign.com/wp-content/themes/mjd/images/bg-input.jpg) repeat-x top;}