/* Theme Name: John C Murphy Theme URI: http://www.olliemccarthy.com Description: Bespoke theme for John C Murphy Version: 1 WP 2.9 Author: Ollie McCarthy Author URI: http://www.olliemccarthy.com Tags: Clean */ @import "style/reset.css"; /* LAYOUT */ /* ----------------------------------------- */ /* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. */ .aligncenter { display:block; margin:0 auto } .alignleft { float:left; margin:5px 15px 5px 0px;} .alignright { float:right ; margin:5px 0px 5px 15px; } .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 */ body {font-family: Helvetica, Arial, sans-serif; font-size:12px;} body p {font-size:12px; line-height:20px; color:#828282;} body a {text-decoration:none;} /***** HEADER *****/ #header {width:100%; background:url(images/nav-bg.png) scroll transparent repeat-x; height:73px; position:relative; z-index:9999;} #header-inner {width:990px; margin:auto; position:relative;} #logo {} a#logo-anchor {display:block; width:440px; height:110px; background:url(images/logo.png) scroll transparent no-repeat; } #navigation {width:550px; position:absolute; top:0px; left:420px; z-index:9;} #navigation ul {margin-top:25px; } #navigation ul li {float:right; margin-left:30px; position:relative; height:70px; } #navigation ul li a {color:#DDD; text-decoration: none; font-size:12px; padding:20px 0px; } #navigation ul li a:hover {color:#FFF; } #navigation ul li ul {display:none; position:absolute; left:-10px; top:23px; width:150px; padding:1px 1px; background:#222; } #navigation ul li ul li {float:left; margin-bottom:1px; margin-left:0px; height:auto; margin-bottom:5px;} #navigation ul li ul li a{width:130px; display:block; padding:10px 10px; background:#000} #navigation ul li ul li a:hover {background:#333;} /******* HOMEPAGE *******/ /*** Featured Area ***/ #homepage-featured-wrapper {height:357px; width:100%; background:url(images/homepage-bg.jpg) top center scroll transparent repeat-x;} #homepage-featured {width:950px; height:357px; margin:auto; position:relative;} .featured-content {position:absolute; top:70px; width:570px;} #homepage-featured h2{color:#FFF; font-size:30px; letter-spacing:1px; text-transform:uppercase} #homepage-featured p {color:#FFF; margin-top:10px; width:500px;} a.cta-button {margin-top:30px; display:block; font-size:14px; background:url(images/cta-bg.png) scroll transparent; width:150px; text-align:center; color:#776e30; border:1px solid #776e30; padding:17px 20px; text-transform:uppercase; letter-spacing:1px; border-radius:5px;} a.cta-button:hover {background-position:0px -90px;} img.featured-image {position:absolute; top:0px; left:500px;} .cycle-pager-featured { z-index: 50; position: absolute; bottom: 20px; right: 0px } .cycle-pager-featured a { background:url(images/featured-pager.png) scroll transparent no-repeat; background-position:-30px 0px; color:#000; margin:0px 10px 0px 0px; padding: 3px 7px; text-decoration: none; opacity:0.5} .cycle-pager-featured a.activeSlide { color:#fbe41d;background:url(images/featured-pager.png) scroll transparent no-repeat; opacity:0.9} .cycle-pager-featured a:focus { outline: none; } /**** Homepage Middle Content ****/ #homepage-middle-wrapper {width:100%; background:url(images/middle-content-bg.png) scroll transparent repeat-x;} #homepage-middle {width:990px; margin:auto; } .homepage-box {float:left; width:330px; margin-top:40px; position:relative; background:url(images/homepage-box.png) scroll transparent no-repeat;} .homepage-box img { margin:28px 0px 0px 30px;} .homepage-box h3 {margin:40px 20px 20px 20px; font-size:18px; letter-spacing:2px; color:#828282; text-transform:uppercase;} .homepage-box p {margin:20px 25px 20px 20px;} .homepage-box a {color:#828282; outline:none;} .homepage-box a:focus {outline:none;} span.striped-border {background:url(images/border.png) scroll transparent repeat-x; height:7px; display:block; margin:0px 20px;} a.read-more {color:#777; padding-right:8px; background:url(images/read-more-arrow.png) right scroll transparent no-repeat; } a.read-more:hover {border-bottom:1px dotted #888; color:#000} a.calc-button {margin-left:20px; text-transform:uppercase; color:#ababab; font-size:14px; margin-top:20px; text-align:center; letter-spacing:1.5px; padding-top:27px; display:block; width:290px; height:51px; background:url(images/calc-btn.png) scroll transparent no-repeat; } #case-study-pager {position:absolute; top:207px; right:20px;} #case-study-pager a {font-size:1px; background:url(images/case-pager.png) scroll transparent no-repeat; background-position:-30px 0px; color:#000; margin:0px 0px 0px 0px; padding: 7px 7px; text-decoration: none; opacity:0.3} #case-study-pager a.activeSlide { color:#fbe41d;background:url(images/case-pager.png) scroll transparent no-repeat; opacity:0.4} #case-study-pager a:focus { outline: none; } /**** Profile Modal Styles ***/ .profile-post {padding:20px 20px;} .profile-post h1 {font-size:30px; letter-spacing:1px; color:#AAA; margin:10px 0px 20px 0px;; text-transform:uppercase; padding-bottom:30px; background:url(images/border.png) bottom repeat-x scroll transparent;} .profile-post p {margin-bottom:20px;} /********* GENERAL PAGE LAYOUT *********/ #general-page-header {width:100%; background:url(images/general-page.jpg) scroll transparent repeat-x; height:227px;} #bread-crumb {margin-left:20px; margin-bottom:80px;} #bread-crumb a {color:#FFF; font-size:14px; text-transform:uppercase; letter-spacing:1px; } #bread-crumb {color:#FFF; font-size:14px; text-transform:uppercase; letter-spacing:1px; } #bread-crumb p a:hover {border-bottom:1px dotted #FFF; } #content-wrap {width:990px; margin:auto; margin-top:-178px; position:relative;} #left-content {float:left; width:590px; margin-left:20px;} #left-content h1 {font-size:30px; letter-spacing:1px; color:#AAA; text-transform:uppercase; padding-bottom:30px; background:url(images/border.png) bottom repeat-x scroll transparent;} #left-content p {margin-top:20px; } #left-content h2 {font-size:24px; margin:30px 0px 20px 0px; text-transform:uppercase; letter-spacing:1px; color:#999; padding-bottom:30px; background:url(images/border.png) bottom repeat-x scroll transparent;} #left-content h3 {font-size:20px; margin:25px 0px 20px 0px; text-transform:uppercase; letter-spacing:1px; color:#999; padding-bottom:30px; background:url(images/border.png) bottom repeat-x scroll transparent;} #left-content h4 {font-size:16px; margin:20px 0px 20px 0px; text-transform:uppercase; letter-spacing:1px; color:#833458; font-weight:bold;} #left-content h5 {font-size:14px; margin:20px 0px 20px 0px; text-transform:uppercase; letter-spacing:1px; color:#833458; font-weight:bold;} #left-content h6 {font-size:12px; margin:20px 0px 20px 0px; text-transform:uppercase; letter-spacing:1px; color:#833458; font-weight:bold;} #left-content strong {color:#000;} #left-content ul {margin-left:60px; margin-top:20px;} #left-content ul li {list-style-type:disc; margin-bottom:10px; color:#888;} #left-content a {color:#833458; border-bottom:1px dashed #833458;} #left-content a:hover {color:#000; border-bottom:1px dashed #000;} /**** FAQ Styles *****/ #left-content .faq-post h4 { text-transform:none; margin:40px 0px 20px 0px; background:none; padding-bottom:0px; font-weight:normal; font-style:italic;} #left-content .faq-post p {margin:0px 0px 20px 0px;} /**** Client Feedback ****/ .feedback-bubble {padding:0px 20px 20px 20px; border:1px solid #DDD; background:#F3F3F3; border-radius:4px; margin-top:40px; position:relative} .feedback-arrow {position:absolute; width:33px; height:24px; background:url(images/feedback-bubble.png) scroll transparent no-repeat; bottom:-21px; right:30px; } span.feedback-author {font-style:italic; color:#444; display:block; text-align:right; margin-top:30px; font-variant:small-caps; letter-spacing:2px; margin-right:30px; margin-bottom:50px;} /**** Blog Page ****/ #left-content .blog-post h2 {font-size:30px; margin-top:0px;} #left-content .blog-post h2 a {border-bottom:none; color:#888;} #left-content .blog-post a {border-bottom:none;} #left-content .blog-post a:hover {color:#833458;} #left-content .blog-post a.image-anchor {border:none;} img.blog-pic {float:left; margin:5px 15px 5px 0px; } .blog-margin {width:100%; height:60px;} /*** Contact Page ***/ iframe {float:right; border:1px solid #000; margin:0px 0px 5px 25px;} form.wpcf7-form {margin-top:20px; } p.left {width:170px; float:left;} p.right {width:150px; float:left;} form.wpcf7-form p {display:block; font-size:11px; margin-right:20px;} form.wpcf7-form input {padding:5px 5px; width:130px } form.wpcf7-form textarea { padding:5px 5px; width:510px;} form.wpcf7-form input.contact-submit {padding:10px 10px; background:#000; border:none; color:#FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px;} form.wpcf7-form input.contact-submit:hover { background:#333; cursor:pointer} /*** Comments Styles ***/ .comment-person {width:95px; float:left; position:relative; font-size:11px;} .comment-person img {margin:0px 0px 0px 0px; border:0px solid #000;} .comment-person cite {font-size:12px; letter-spacing:1px; position:absolute; top:97px; text-align:center; left:0px; width:92px; background:#000; color:#FFF; padding:4px; font-size:10px;} .comment-bubble {width:410px; float:right; background:#EEE; padding:10px 20px 30px; -moz-border-radius: 10px; -webkit-border-radius: 10px;} .comment-list-item {margin-top:60px; background:#FFF;} .comment-arrow {background:url(images/comment-bubble.jpg) scroll transparent no-repeat; width:23px; height:40px; position:absolute; top:30px; left:116px; } p.commenter-name {margin:5px 0px; } h3#respond {margin-top:80px} form#commentform {margin-top:40px;} p.comment-label {float:left; width:260px; margin-right:0px; font-size:12px; color:#000;} p.comment-label em{font-size:10px; font-style:normal; margin-left:10px;} p.comment-area { margin-right:0px; font-size:12px; color:#000;} p.comment-area em{font-size:10px; font-style:normal; margin-left:10px;} input#comment-email, input#comment-author, input#comment-url {padding:5px 5px; width:210px} textarea#comment-textarea {width:470px; padding:5px 5px;} input#comment-submit {padding:10px 10px; margin-top:20px; background:#000; border:none; color:#FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px;} input#comment-submit:hover {cursor:pointer; background:#333;} #left-content a.url {color:#FFF} #left-content cite a.url:hover {color:#FFF} /********** SIDEBAR **************/ #sidebar {float:right; width:330px; background:url(images/sidebar-bg.png) scroll transparent no-repeat; margin-top:-105px;} /** Searchbar **/ .search-wrap {position:relative; height:90px;} form.searchform {} input.search-box {border-radius:3px; border:1px solid #d6d6d6; color:#aaa; letter-spacing:1px; padding:11px 5px; width:240px; position:absolute; top:40px; left:40px;} input#searchsubmit {position:absolute; top:50px; right:48px; border:none; outline:none; padding:0px 0px; width:20px; height:20px; background:url(images/search-bg.png) scroll transparent no-repeat;} input#searchsubmit:hover {cursor:pointer; background-position:0px -40px;} /*** Widgets ***/ .sidebar-widget h3 {padding:11px 0px 0px 40px; margin:20px 0px; display:block; width:330px; background:url(images/widget-bg.png) scroll transparent no-repeat; height:40px; color:#FFF; font-size:17px; letter-spacing:1px; text-transform:uppercase;} .sidebar-widget ul {margin-left:40px;} .sidebar-widget ul li {margin-bottom:20px;} .sidebar-widget ul li a {color:#888; padding-left:15px; background:url(images/widget-arrow.png) scroll transparent no-repeat; letter-spacing:2px;} .sidebar-widget ul li a:hover {color:#000;} .margin20 {height:3px; width:100%;} ul.social-list-sidebar li a{ float:left;} .sidebar-widget ul.social-list-sidebar li a.social-sidebar1 {display:block; width:20px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat;} .sidebar-widget ul.social-list-sidebar li a.social-sidebar2 {display:block; width:20px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat; background-position:-46px 0px;} .sidebar-widget ul.social-list-sidebar li a.social-sidebar3 {display:block; width:20px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat; background-position:-91px 0px;} .sidebar-widget ul.social-list-sidebar li a.social-sidebar4 {display:block; width:20px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat; background-position:-135px 0px;} /********* FOOTER ************/ #footer {width:100%; margin-top:80px; background:url(images/footer-bg.jpg) scroll transparent repeat-x; background-color:#000;} .40-margin {height:40px; width:100%;} #footer-widget-wrapper {width:990px; margin:auto;} .footer-widgets {width:207px; float:left; padding:40px 20px 0px 20px;} .footer-widgets h4 {color:#FFF; text-transform:uppercase; font-size:14px; letter-spacing:1px; margin-bottom:20px;} .footer-widgets p {color:#ac969c;} .footer-widgets p span{color:#FFF; font-weight:bold;} .footer-widgets a{color:#FFF;} a.social-sidebar1 {margin-right:12px;display:block; width:30px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat;} a.social-sidebar2 {margin-right:12px; display:block; width:30px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat; background-position:-46px 0px;} a.social-sidebar3 {margin-right:12px;display:block; width:30px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat; background-position:-91px 0px;} a.social-sidebar4 {display:block; width:30px; height:30px; background:url(images/social-icons.png) scroll transparent no-repeat; background-position:-135px 0px;} .contact-widget p {} #footer #footer-widget-wrapper .footer-widgets .contact-widget input {letter-spacing:1px; width:190px; padding:5px 5px; font-size:10px; margin-bottom:10px; background:url(images/white-trans.png) scroll transparent; color:#FFF; border:0px solid #000; border-radius:4px; } #footer #footer-widget-wrapper .footer-widgets .contact-widget textarea {letter-spacing:1px; width:190px; font-size:10px; padding:5px 5px; font-family:Arial, sans-serif; background:url(images/white-trans.png) scroll transparent ; color:#FFF; border:0px solid #000; border-radius:4px; margin-bottom:10px; } #footer #footer-widget-wrapper .footer-widgets .contact-widget input.footer-submit {letter-spacing:1px; width:200px; opacity:1; background:url(images/cta-bg.png) scroll transparent repeat-x; color:#000} #footer #footer-widget-wrapper .footer-widgets .contact-widget input.footer-submit {cursor:pointer} #footer #footer-widget-wrapper .footer-widgets .contact-widget .wpcf7-response-output {background:#FFF;} /*** Calculator Styles ****/ .heat-calc-wrap {background:#ffb200; padding:40px 20px; margin-top:40px; border-radius:4px; letter-spacing:2px;} .heat-calc-wrap p {color:#FFF; margin:10px 0px; font-weight:bold;} #left-content .heat-calc-wrap h2 {color:#FFF; margin-top:0px;} .big-calc-button {width:150px; text-align:center; padding:15px 20px; letter-spacing:1px; font-size:14px; background:#f5e2b7; float:left; border-radius:4px; margin:20px 20px 0px 0px;} .big-calc-button:hover {cursor:pointer; background:#FFF;} .clear {clear:both;} input.hc-step2a-1 {float:right; width:50px; padding:2px 5px; margin-right:100px;} input.hc-step2a-2 {float:right; width:50px; padding:2px 5px; margin-right:100px;} input.hc-step2a-3 {float:right; width:50px; padding:2px 5px; margin-right:100px;} input.hc-step2b-1 {float:right; width:50px; padding:2px 5px; margin-right:100px;} input.hc-step2b-2 {float:right; width:50px; padding:2px 5px; margin-right:100px;} input.hc-step2b-3 {float:right; width:50px; padding:2px 5px; margin-right:100px;} input.es-input{float:right; width:80px; padding:2px 5px; margin-right:100px; text-align:center;} .hc-step-2a {display:none;} .hc-step-2b {display:none;} .hc-result {display:none;} span.hc-result-text {font-size:20px;} #left-content .heat-calc-wrap h2.es-header {background:none; margin-top:0px;} .es-result-wrap {background:#833458; padding:20px 20px; margin-top:30px; border-radius:4px; display:none; } /**** WP NAVI PAGINATION *********/ .wp-pagenavi {margin-bottom:2px; margin-left:-3px;} #left-content .wp-pagenavi a, .wp-pagenavi a:link {padding: 2px 5px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #000; font-size:10px; color: #fff; background-color: #000; } .wp-pagenavi a:visited {padding: 2px 5px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #000; color: #fff; background-color: #000; } .wp-pagenavi a:hover {border: 1px solid #000000; color: #fff; background-color: #000;} .wp-pagenavi a:active {padding: 2px 5px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #000; color: #fff; background-color: #000;} .wp-pagenavi span.pages { padding: 2px 5px 2px 4px; margin: 2px 2px 2px 2px; color: #fff; border: 1px solid #000000; background-color: #000; font-size:11px; font-variant:small-caps; letter-spacing:1px;} .wp-pagenavi span.current { padding: 2px 5px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #000000; color: #fff; background-color: #000;} .wp-pagenavi span.extend { padding: 2px 6px 2px 4px; margin: 2px; border: 1px solid #000000; color: #fff; background-color: #000;} /* ColorBox Core Style The following rules are the styles that are consistant between themes. Avoid changing this area to maintain compatability with future versions of ColorBox. */ #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;} #cboxOverlay{position:fixed; width:100%; height:100%;} #cboxMiddleLeft, #cboxBottomLeft{clear:left;} #cboxContent{position:relative; overflow:visible;} #cboxLoadedContent{overflow:auto;} #cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;} #cboxTitle{margin:0;} #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;} /* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML, so that the structure easier to understand. */ #cboxOverlay{background:#000;} #colorbox{} #cboxTopLeft{width:14px; height:14px; background:url(images/controls.png) 0 0 no-repeat;} #cboxTopCenter{height:14px; background:url(images/border2.png) top left repeat-x;} #cboxTopRight{width:14px; height:14px; background:url(images/controls.png) -36px 0 no-repeat;} #cboxBottomLeft{width:14px; height:43px; background:url(images/controls.png) 0 -32px no-repeat;} #cboxBottomCenter{height:43px; background:url(images/border2.png) bottom left repeat-x;} #cboxBottomRight{width:14px; height:43px; background:url(images/controls.png) -36px -32px no-repeat;} #cboxMiddleLeft{width:14px; background:url(images/controls.png) -175px 0 repeat-y;} #cboxMiddleRight{width:14px; background:url(images/controls.png) -211px 0 repeat-y;} #cboxContent{background:#FFF;} #cboxLoadedContent{margin-bottom:5px;} #cboxLoadingOverlay{background:url(images/loading_background.png) center center no-repeat;} #cboxLoadingGraphic{background:url(images/loading.gif) center center no-repeat;} #cboxTitle{position:absolute; bottom:-24px; left:0; text-align:center; width:100%; font-weight:normal; font-variant:small-caps; font-size:14px; letter-spacing:1px; color:#7C7C7C;} #cboxCurrent{position:absolute; bottom:-24px; left:58px; font-weight:normal; font-variant:small-caps; font-size:14px; letter-spacing:1px; color:#7C7C7C;} #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(images/controls.png) 0px 0px no-repeat; width:23px; height:23px; text-indent:-9999px;} #cboxPrevious{left:0px; background-position: -51px -25px;} #cboxPrevious.hover{background-position:-51px 0px;} #cboxNext{left:27px; background-position:-75px -25px;} #cboxNext.hover{background-position:-75px 0px;} #cboxClose{right:0; background-position:-100px -25px;} #cboxClose.hover{background-position:-100px 0px;} .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;} .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;} .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;} .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}