/* Theme Name: Josh Can Help custom v2 Theme URI: http://www.joshcanhelp.com/ Description: A Wordpress theme designed from scratch, built from a completely stripped version of the default theme Version: 2.0 Author: Josh Cunningham Author URI: http://joshcanhelp.com/ */ /*** CSS RESET Adapted from Eric Meyer's CSS Reset Reloaded http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ***/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; line-height: 100%; font-family: inherit; vertical-align: baseline; } :focus {outline: 0;} ol, ul {list-style: none;} table {border-collapse: separate; border-spacing: 0;} caption, th, td { text-align: left; font-weight: normal;} img {border: 0;} /*** universal ***/ h1,h2,h3,h4,h5,h6 {font-size:100%; font-family: georgia, 'times new roman', serif; font-weight: normal} h1 {font-size: 2.2em;} h2 {font-size: 1.8em; margin: 20px 0 10px -10px; line-height: 1.4em} h3 {font-size: 1.6em; margin: 12px 0 8px 0; } h4 {font-size: 1.4em; margin: 0 0 6px 0; } h5 {font-size: 1.2em; margin: 0 0 6px 0; } h6 {font-weight: bold; margin: 0 0 6px 0; } ul,ol {list-style: none;} a:link {color: #0c8188;} a:visited {color: #562c65} img {border: none;} .code {font: 1.2em 'Courier New', Courier, Fixed;} .clear {clear:both;} span.error {font-weight: bold; color: red; font-size: 0.9em; border: line-height: 1.4em; } .aligncenter {display:block;margin-right:auto;margin-left:auto;} .alignleft {margin:8px 8px 8px 0;float:left;} .alignright {margin:8px 0 8px 8px;float:right;} .center{text-align:center;} .block {display: block;} acronym,abbr,span.caps{cursor:help;} acronym,abbr{border-bottom:1px dashed #999;} strong {font-weight: bold;} em {font-style: italic;} a.pdf-link {display: block; padding: 8px 8px 8px 50px ; background: #93b291 url(images/main-sprite.png) 14px -1495px no-repeat; border: solid 1px #789377; color: white; text-decoration: none; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif} a.pdf-link:hover {background: #789377 url(images/main-sprite.png) 14px -1495px no-repeat;} a.download-link {display: block; padding: 8px 8px 8px 40px ; background: #97db94 url(images/main-sprite.png) 15px -1562px no-repeat; border: solid 1px #7eb67b; text-decoration: none; font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; color: black;} a.download-link:hover {background: #7eb67b url(images/main-sprite.png) 15px 12px no-repeat;} a.help-link {background: #3D9B45; border: solid 1px #2C8F35;} a:hover.help-link {background: #2C8F35;} a.about-link {background: #3EAB87; border: 1px solid #319F79;} a:hover.about-link {background: #319F79; } a.portfolio-link {background: #337AA0; border: 1px solid #236B8F;} a:hover.portfolio-link {background: #236B8F; } /*** header.php styles ***/ body {line-height: 1em; font-size:75%; background: #f3f1d9 url(images/body-bg.png) 0 -115px repeat-x; font-family: helvetica, arial, sans-serif;} #content-wrap {width: 960px; height: auto; margin: 0 auto;} #the-header {width: 100%; height: 160px;} #head-left {width: 65%; float: left; padding: 0; } #head-left ul {width: 264px; height: 57px; float: right; margin: 0 30px 0 0; } #head-left ul li {width: 88px; height: 57px; display: block; float: left; font-family: Georgia, "Times New Roman", Times, serif} #head-left ul li.2 {margin-left: -3px} #head-left ul li.3 {margin-left: -6px} #head-left ul li a {width: 100%; height: 30px; padding: 30px 0 0 0; display: block; text-align: center; color: white; font-weight: bold; text-decoration: none; font-style: italic; background: url(images/mini-nav-bg.png) 0 100% no-repeat;} #head-left ul li a:hover {padding-top: 34px;} #head-left ul li a:active {padding-top: 35px;} #head-left ul li a.current {padding-top: 38px;} #head-left p {font-size: 1.1em; clear: both; font-style:italic; padding: 0 0 7px; font-family:Georgia, "Times New Roman", Times, serif} .head-logo {width: 169px; height: 68px; margin: 10px 0 10px 0; float: left; display: block; background: url(images/head-logo2.png) no-repeat;} #head-right {width: 35%; float: left;} #head-right ul {height: 100px; } #head-right ul li {width: 107px; height: 100%; float: left; display: block;font-size: 1.6em; letter-spacing: -1px} #head-right ul li a {width: 107px; height: 40px; padding-top: 70px; text-align: center; display: block; color: white; text-decoration: none; background-position: 0 100%; background-repeat: no-repeat;} #head-right ul li a.gethelp-nav {background-image: url(images/gethelp-nav.png)} #head-right ul li a.about-nav {background-image: url(images/about-nav.png)} #head-right ul li a.portfolio-nav {background-image: url(images/portfolio-nav.png)} #head-right ul li a:hover {padding-top: 74px;} #head-right ul li a:active {padding-top: 75px;} #head-right ul li a.current {padding-top: 80px;} /*** universal styles ***/ #portal-content {width: 885px; margin: 0 0 40px 50px; padding: 20px 0 0 0; float: left; clear: both; } .post {width: 100%; margin: 0 0 70px 0; float: left; clear: both; } .the-meta {width: 110px; float: left; margin: 0 0 0 40px; padding: 14px 10px 10px; background: #DFDDC3; border: 1px solid white; } .the-meta p {padding: 0; margin: 0 0 12px; font-size: 1.6em; font-family: georgia, 'times new roman', serif; letter-spacing: -1px; line-height: 1.2em;} .the-meta span {color: #888; font-size: 0.95em; font-style: italic; display: block; margin: 0; } .the-meta a {margin: 0 0 12px 0; color: black; text-decoration: none; line-height: 1.4em;} .the-meta a:hover {text-decoration: underline; color: #444;} .the-meta img {width: 30px; display: block; margin: 0 6px 6px 0; float: left;} .the-content {width: 660px; float: left; margin: 0 0 0 40px; line-height: 1.5em;} .the-content p {margin: 0 0 1em 0;} .the-content p, .the-content strong, .the-content em, .the-content blockquote {line-height: 1.7em;} #single-content .the-content p.intro, #portal-content .first p.intro {font-size: 1.3em; font-family: georgia; line-height: 1.8em; margin-bottom: 20px} .the-content ul {list-style-type: square; padding: 10px 0 0.7em 40px;} .the-content ol {list-style-type: decimal; padding: 0 0 0.7em 40px;} .the-content li {margin: 0 0 .6em 0; line-height: 1.5em;} .the-content img {padding: 6px; background: white; border: 1px solid #b1af99;} img.clear-style {border: none; padding: 0; background: transparent;} .the-content blockquote {margin: 20px auto; width: 80%; padding: 10px 10px 6px 10px; font-style: italic; border-left: 2px solid #b1af99; } .wp-caption-text {text-align: center; font-style:italic;} /*** index.php and single.php syles ***/ #desc-top {width: 780px; margin: 0 auto;} #desc-top h1 {text-align: center; font-size: 3.6em; } #desc-top p {width: 720px; margin: 0 auto 20px auto; font-size: 1.2em; line-height: 1.6em; padding: 20px 0 0 0;} #desc-top p a {line-height: 1.5em; font-weight: bold} #desc-top h3 {font-size: 1.6em; line-height: 1.5em; padding: 20px 0 0 0; text-align:center; font-weight:bold} #desc-top a.gethelp, #desc-top a.about, #desc-top a.portfolio {width: 214px; height: 65px; margin: 10px 28px 0 0; padding: 45px 10px 0 8px; float: left; display: block; color: white; line-height: 1.3em; text-decoration: none; font-weight: bold} #desc-top a.gethelp:hover, #desc-top a.about:hover, #desc-top a.portfolio:hover {height: 62px; padding-top: 48px; background-position: 0 3px;} #desc-top a.gethelp:active, #desc-top a.about:active, #desc-top a.portfolio:active {height: 61px; padding-top: 49px; background-position: 0 4px;} #desc-top a.gethelp {background-image: url(images/gethelp-box.png); background-repeat: no-repeat;} #desc-top a.about {background-image: url(images/about-box.png); background-repeat: no-repeat;} #desc-top a.portfolio {background-image: url(images/portfolio-box.png); background-repeat: no-repeat; margin-right: 0;} /*** index.php styles ***/ #blog-head {width: 100%; padding: 12px 0; margin: 30px 0 40px 0 ; text-align: center; clear: both; float: left; color: #201815; font-family: georgia, 'times new roman', serif; border-top: 1px dashed #201815; border-bottom: 1px dashed #201815; } #single-content #blog-head {border-top: 1px solid #DFDDC3; border-bottom: 1px solid #DFDDC3; margin-bottom: 0;} #blog-head h2 {text-align: center; font-size: 2.2em; letter-spacing: -1px; margin: 0 0 18px; } #blog-head a, #blog-head span {color: #201815; text-decoration: none; font-size: 1.4em;} #blog-head a.right {padding-left: 14px; margin: 0 0 0 12px; background: url(images/main-sprite.png) 0 -1565px no-repeat;} #blog-head a.down {padding-left: 16px; margin: 0 0 0 60px; background: url(images/main-sprite.png) 0 -20px no-repeat;} #blog-head a:hover {text-decoration: underline; } .the-content h2.headline {margin: 0 0 12px -12px; padding: 0 0 6px 0; font-size: 2.2em;} .the-content h2 a {color: black; text-decoration: none;} .the-content h2 a:hover {color: black; text-decoration: underline;} p.share-it {padding: 15px 0 0 0; text-align: center;} p.share-it img {padding: 6px; background: transparent; border: none;} a.more-link {font-weight: bold; text-decoration: underline; display: inline;} a.more-link:hover {text-decoration: none;} /*** Single post styles ***/ .the-related {width: 660px; margin: 20px 0 0 212px; padding: 20px 0 10px; float: left; clear: both; border-top: 1px dashed #1C1210; } .the-related h3 {margin: 0 0 20px 0;} .the-related a {display: block; border: 1px solid #b1af99; margin: 0 0 10px 20px; padding: 6px 8px 6px 20px; color: #1C1210; text-decoration: none; font-family: georgia, 'times new roman', serif; font-style:italic; background: #dddbc6 url(images/main-sprite.png) 5px -1562px no-repeat; line-height: 1.4em;} .the-related a:hover {background: #b1af99 url(images/main-sprite.png) 5px -1562px no-repeat;} .the-comments {width: 660px; margin: 20px 0 0 212px; padding: 20px 0; float: left; clear: both; border-top: 1px dashed #1C1210; float: left; clear: both;} .comment-box {clear: both; } #comment {width: 100%; } #post-nav {width: 900px; clear: both;} #post-nav p {width: 219px; padding: 30px 0 10px 0; font-size: 0.9em; } #post-nav p.alignleft {margin-left: 220px; } #post-nav p.alignright {margin-right: 17px; } #post-nav p a {height: 100%; line-height: 1.4em; display: block; border: 1px solid #b1af99; color: #1C1210; text-decoration: none; } #post-nav p.alignleft a {padding: 8px; background: #dddbc6 url(images/main-sprite.png) 90px -154px no-repeat; } #post-nav p.alignleft a:hover {background: #b1af99;} #post-nav p.alignright a {padding: 8px; background: #dddbc6 url(images/main-sprite.png) 100px -1628px no-repeat; } #post-nav p.alignright a:hover {background: #b1af99;} .banner-bottom {text-align: center; padding: 20px 0 0;} /*** single.php and all pages ***/ #single-content {width: 910px; float: left; margin: 0 0 40px 40px; } #single-content h1 {border-bottom: 1px solid #1C1210; margin: 0 0 20px 0; padding: 0 0 6px 0; } #single-content div.wide {width: 880px; margin: 20px 0 0 20px; } #single-content #blog-head {margin: 10px 0 50px 0; padding: 4px 0;} #single-content #blog-head ul {margin: 0 auto; padding: 0;} .single-page .the-content {margin: 0 0 0 160px; width: 700px; } .single-page .wide {width: 880px; float: left; margin: 0 0 0 40px; } /*** single page styles ***/ a.post-edit-link {text-transform: uppercase; letter-spacing: -1px; text-decoration: none; color: white; background: #1C1210;} #quick-stats, #client-list, .thank-you, .contact-form {width: 300px; float: left; margin: 0 0 30px 50px; padding: 0 20px 0 0; } #portal-content .contact-form h2, #quick-stats h2, #client-list h2, .thank-you h2 {margin: 0 0 20px 0; font-size: 2em; font-family: Helvetica, Arial, sans-serif; letter-spacing: -1px; font-weight: bold;} #portal-nav {width: 350px; float: left; margin: 0 0 30px 68px; } #portal-nav li {width: 320px; margin: 0 0 10px 0; } #portal-nav li a {width: 100%; height: 100%; display: block; padding: 12px; color: white;line-height: 1.4em; text-decoration: none;} #portal-nav li a strong {font-size: 2em; letter-spacing: -1px; line-height: 1.4em;} #quick-stats ul {list-style-type: none; padding: 10px 0 0.7em 30px; font-size: 1.1em;} #quick-stats li {margin: 0 0 .6em 0; line-height: 1.5em;} a.i-like-u {width: 180px; height: 100px; display: block; padding: 10px; float: left; margin: 0 8px 8px 0; border: 1px solid #b1af99; background: #dddbc6; font-size: 0.9em; color: #1C1210; overflow: hidden; text-decoration: none; line-height: 1.3em;} a.i-like-u:hover {background: #b1af99;} .i-like-u img {width: 30px; float: left; margin: 0 4px 4px 0;} #single-content h1.seach-head {font-family: Arial, Helvetica, sans-serif; font-size: 3em; letter-spacing: -2px; margin: 0 0 30px 0; padding: 0 0 8px 0;} #client-list dl {width: 300px; float: left; padding: 0 0 0 20px; margin: 0 0 20px 0;} #client-list dt {font-size: 1.6em; margin: 0 0 8px 0; letter-spacing: -1px; font-family: georgia, 'times new roman', serif;} #client-list dt span {font-style: italic; font-size: 0.8em; } #client-list dd {line-height: 1.4em; } #client-list dd img {float: left; margin: 0 8px 8px 0; border: 2px solid #292B2F; } /*** portfolio page styles ***/ .portfolio-intro {font-size: 1.2em; font-style: italic;} .portfolio-block {width: 100%; float: left; clear: both; padding: 30px 0 } .portfolio-block img { float: left;} .portfolio-item {width: 530px; float: left; padding: 0 0 30px; } .portfolio-block img { float: left;} .portfolio-item dt { width: 530px; float: left; margin: 0 0 20px 20px; font-family: georgia, 'times new roman', serif; font-size: 1.7em;} .portfolio-item dd { width: 510px; float: left; margin: 0 0 10px 40px; line-height: 1.4em;} .portfolio-item dd span {font-size: 1.4em; font-weight: bold; letter-spacing: -1px; } .portfolio-item .testimonial {border: solid 1px #9BBF8F; background: #BBCFB5; padding: 12px;} .design-item {padding: 30px 0; border-top: 1px dashed #b1af99;} .design-item p.center img {border: 1px black solid; padding: 5px; background: white;} .design-item p {} .pop-up { display:none; border: 1px solid #444;} .pop-up .close {background-image:url(images/close.png);position:absolute;right:-15px;top:-15px;cursor:pointer;height:35px;width:35px; } /*** contact page styles ***/ .project-form {width: 367px; float: left; margin: 0 0 0 30px;} .project-form ul {padding: 20px; background: #DFDDC3; border: 1px solid #AFAD99; } .project-form ul li {margin: 0 0 12px 0; line-height: 1.5em; } .project-form label {font-style: italic; font-weight: bold; } .project-form input, .project-form textarea {display: block; width: 308px; padding: 6px;} .project-form textarea {height: 100px; } .project-form #sendCopy {display: inline; width: auto; } #alt-contact {width: 370px; float: left; padding: 30px 0 0 30px; margin: 0 0 30px 30px; } #alt-contact a, #alt-contact p { margin: 0 0 40px 0; padding: 0 0 0 20px ; font-size: 2.2em; letter-spacing: -2px; color: #1C1210; } #alt-contact img {margin: 0 12px 0 0;} #alt-contact a {display: block; text-decoration: none; } #alt-contact a:hover {color: #CE4E37;} .checkIt, #submitted {display: none;} /*** contact form style ***/ .contact-form label {text-transform: lowercase; font-style: italic; font-weight: bold; } .contact-form input, .contact-form textarea {display: block; margin: 0 0 10px 0; padding: 8px; width: 300px; font-size: 1.2em; font-family: "Times New Roman", Times, serif;} .contact-form textarea {height: 100px; } .contact-form #field0 {display: none;} #save-form {width: 105px; height: 44px; margin: 0 auto; color: white; border: none; background: url(images/main-sprite.png) 6px -1700px no-repeat; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; cursor: pointer; } .thank-you { padding-top: 30px;} .thank-you p, .thank-you strong {line-height: 1.5em; font-size: 1.1em; margin: 0 0 1em;} .thank-you img {padding: 6px; background: white; border: 1px solid #211715;} /*** Services page ***/ .contact-form-right {width: 220px; float: right; margin: 0 0 10px 20px; padding: 10px 20px; background: #DFDDC3; border: 1px solid #AFAD99;} .contact-form-right h3 {margin: 0 0 12px; letter-spacing: -1px;} .contact-form-right ul {list-style: none; padding: 0;} .contact-form-right label {text-transform: lowercase; font-style: italic; font-weight: bold; } .contact-form-right input, .contact-form-right textarea {display: block; margin: 0 0 10px 0; padding: 4px; width: 212px; font-size: 1.1em; font-family: "Times New Roman", Times, serif;} .contact-form-right textarea {height: 100px; } .contact-form-right #field0 {display: none;} /*** archives page ***/ .archive-col-wide {width: 48%; float: left; padding: 20px 30px 0 0;} .archive-col-narrow {width: 23%; float: left; padding: 20px 10px 0 0;} .archive-col-wide li, .archive-col-narrow li {margin: 0 0 6px; } .archive-col-wide li a:hover, .archive-col-narrow li a:hover {text-decoration: none;} /*** comment styles ***/ #commentform input {width: 211px; padding: 4px; margin: 0 0 6px 0} #commentform label {font-weight: bold; font-style: italic} #commentform #submit {width: 105px; height: 44px; color: white; border: none; background: url(images/main-sprite.png) 6px -1700px no-repeat; font-family: Arial, Helvetica, sans-serif; text-transform: lowercase; cursor: pointer; } .commentlist {margin: 40px 0; border-bottom: #ccc 1px dashed;} .commentlist li {border-top: #dddbc6 1px solid; padding: 15px 10px; font-size: 0.9em; } .commentlist span {font-weight: bold; font-style: italic} .commentlist li.alt {background: #FFFEEF;} .commentlist li p {padding: 5px 0; line-height: 1.3em; } .commentlist img.avatar {margin: 0 10px 6px 0; float: left; } .commentmetadata {font-style: italic;} /*** footbar styles ***/ #footbar {width: 920px; padding: 10px 0 40px 38px; float: left; clear: both;} .widget {width: 219px; float: left; margin-right: 3px; color: #201815;} .widget h3 {background: #1C1210; padding: 6px; color: white;} .widget a {color: #201815;} .widget ul {padding: 4px 6px 4px 0; } .widget ul li {width: 100%; position: relative;} .widget ul li a {display: block; text-decoration: none; padding: 4px 4px 4px 6px; } .widget ul li a:hover {background: #dddbc6; } #searchform #s {width: 198px; padding: 6px 10px; border: 1px solid #CFCB9B; } /*** footer ***/ #footer {width: 100%; min-width: 960px; float: left; clear: both; background: #1C1210 url(images/footer-bg.png) repeat-x; color: white; border-top: 1px solid #1C1210; } #footer-wrap {width: 960px; margin: 0 auto; padding: 50px 0;} #footer-wrap ul {width: 180px; float: left; padding: 0 0 40px 42px;} #footer-wrap ul li {margin: 0 0 .5em 0; font-size: } #footer-wrap ul li.header {font-size: 1.4em; font-weight: bold;} #footer-wrap ul li a {text-decoration: none; font-size: 1.1em} #footer-wrap p {width: 690px; margin: 0 0 0 44px; float: left; font-size: 2em; font-style: italic; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.8em; letter-spacing: -1px; } #footer-wrap a {color: white;} #footer-wrap a:hover {color: #17878D;} #footer-wrap img {vertical-align:middle ;} /* Resume styles */ .the-content h2.resume {margin: 18px 0 14px -30px;} .the-content h3.resume {margin: 14px 0 12px 0;} .the-content h4.resume {margin: 8px 0 4px 0; font-size: 1.2em; font-weight:bold} /* WordPress 2.6 Plugin: WP-PageNavi 2.40 Copyright (c) 2008 Lester "GaMerZ" Chan http://lesterchan.net */ div.wp-pagenavi { padding: 0 0 0 186px; float: left; clear: both; display: block; } .wp-pagenavi a, .wp-pagenavi a:link { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #b1af99; color: #1C1210; background: #dddbc6; } .wp-pagenavi a:hover { background: #b1af99; font-weight: bold; border: 1px solid #1C1210; } .wp-pagenavi a:active { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #201815; background: orange; color: #201815; } .wp-pagenavi span.pages { padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; font-style: italic; display: none; } .wp-pagenavi span.current { padding: 2px 4px 2px 4px; margin: 2px; border: 1px solid #b1af99; background: #b1af99; font-weight: bold; font-size: 1.4em; } .wp-pagenavi span.extend { padding: 2px 4px 2px 4px; margin: 2px; } /*** Lightbox CSS ***/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} /* #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } */ #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }