/* Theme Name: Watt Works Theme URI: http://wattworks.devstars.net Description: Custom WP theme for Watt Works Version: 2.8 Author: Devtars Author URI: http://devstars.com */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} img {-ms-interpolation-mode: bicubic;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;} .clear {clear: both;} ol,ul,li {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym { border:0;} * {outline: none; -webkit-text-size-adjust: none;} /* We'll need to refrence this later */ @font-face {font-family: 'JournalRegular'; src: url('fonts/journal.eot'); src: local('Journal Regular'), local('Journal'), url('fonts/journal.ttf') format('truetype'); } /***** LAYOUT *****/ body {font-family: Arial, sans-serif; font-size: 80%; background: #fff url(images/bg.jpg) top center repeat-x;} #wrap {width: 960px; margin: 0 auto; overflow: hidden;} #wrapHome {width: 960px; margin: 0 auto;} #main {float: left; width: 463px;} #sidebar {float: right; width: 178px; padding: 8px 22px; margin: 10px 0 23px 0; border-left: 2px dashed #bfbfbf;} #sidebarLeft {float: left; width: 213px; padding: 8px 22px 0 15px; margin: 0 0 23px 0;} #sidebarRight {float: right; width: 178px; padding: 8px 22px; margin: 10px 0 23px 0; border-left: 2px dashed #bfbfbf;} #footer {background: #bbb; clear: both; padding: 8px 10px;} /* Header */ #header {position: relative; height: 357px;} #contactTab {width: 104px; height: 26px; display: block; position: absolute; top: -1px; right: 20px; background: url(images/sprite.png) 0px -246px; text-indent: -4000px;} #facebookTab {position: absolute; top: -1px; right: 151px; text-indent: -4000px; background: url(images/sprite.png) -218px -890px; width: 28px; height: 26px;} #twitterTab {position: absolute; top: -1px; right: 122px; text-indent: -4000px; background: url(images/sprite.png) -186px -890px; width: 28px; height: 26px;} #contactTab:hover, #facebookTab:hover, #twitterTab:hover {top: 0px;} /* General Header */ #headerNav {position: absolute; top: 37px; left: 20px;} #headerNav ul {position: relative; top: -3px;} #headerNav ul li {list-style: none; margin: 0 0 3px 0;padding:0px;height:23px;overflow:hidden;width:141px;} #headerNav a {width: 152px; height: 22px; display: block; text-indent: -4000px;} #headerNav #index {background: url(images/wattnav.png) -153px -261px;} #headerNav .active #index, #headerNav #index:hover {background: url(images/wattnav.png) -13px -261px;} #headerNav #consulting {background: url(images/wattnav.png) -153px -287px;} #headerNav .active #consulting, #headerNav #consulting:hover {background: url(images/wattnav.png) -13px -287px;} #headerNav #coaching {background: url(images/wattnav.png) -153px -313px;} #headerNav .active #coaching, #headerNav #coaching:hover{background: url(images/wattnav.png) -13px -313px;} #headerNav #training {background: url(images/wattnav.png) -153px -339px;} #headerNav .active #training, #headerNav #training:hover{background: url(images/wattnav.png) -13px -339px;} #headerNav #courses {background: url(images/wattnav.png) -153px -365px;} #headerNav .active #courses, #headerNav #courses:hover {background: url(images/wattnav.png) -13px -365px;} #headerNav #about-us {background: url(images/wattnav.png) -153px -391px;} #headerNav .active #about-us, #headerNav #about-us:hover{background: url(images/wattnav.png) -13px -391px;} #headerNav #our-clients {background: url(images/wattnav.png) -153px -417px;} #headerNav .active #our-clients, #headerNav #our-clients:hover {background: url(images/wattnav.png) -13px -417px;} #headerNav #blog {background: url(images/wattnav.png) -153px -443px;} #headerNav .active #blog, #headerNav #blog:hover {background: url(images/wattnav.png) -13px -443px;} /* Main */ #main p {margin: 0 0 10px 0; text-align: left !important;} /* Home Footer */ #footer {background: url(images/footerBg.png) repeat-x; height: 122px; position: relative; *bottom: -120px; _bottom: 0px;} #footerIn {width: 918px; margin: 0 auto; position: relative; font-size: 10px;} #footerContact {clear: both; padding: 96px 0 0 0;} #footerContact span {font-size: 10px; border-right: 1px solid #bfbfbf; display: inline; padding: 5px;} #footerContact .lastSpan {border-right: 0;} #footerContact span a {color: #000;} /*#footerIn a.one {position: absolute; top: 86px; left: 612px; display: block; background: url(images/sprite.png) 0 -851px; width: 111px; height: 32px;} #footerIn a.dev {position: absolute; top: 95px; right: 0; color: #000;} #footerIn #ccLicense {position: absolute; top: 95px; right: 104px; }*/ #footerCourses {position: absolute; top: 12px; left: 0;} #footerCourses h3 {position: absolute; top: 0; left: 0; height: 30px; width: 114px; background: url(images/sprite.png) 0 -99px; text-indent: -4000px;} #footerCourses p {position: absolute; top: -4px; left: 125px; width: 410px; font-weight: bold;} #footerNewsletter {position: absolute; top: 12px; right: 0; width: 340px;} #footerNewsletter h3 {position: absolute; top: 0; left: 0; height: 24px; width: 131px; background: url(images/sprite.png) 0 -132px; text-indent: -4000px;} #footerNewsletter form {position: absolute; top: 0; right: 0; text-align: right;} #footerNewsletter form .email {padding: 2px; color: #666; width: 180px; margin: 0 0 5px 0;} #footerContact #links {position: absolute; top: 96px; right: 5px;} #footerContact #links a {color:#000000; font-size:10px;} #footerContact #links1 {position: absolute; top: 115px;} #footerContact #links1 a.one {position: absolute; top: 5px; left: 612px; display: block; background: url(images/sprite.png) 0 -851px; width: 111px; height: 32px;} #footerContact #links1 a.dev {position: absolute; top: 15px; left: 830px; width:100px; color: #000;} #footerContact #links1 #ccLicense{position: absolute; top: 15px; left: 740px; } /* General Footer */ #bigFooter {height: 303px; background: url(images/bigFooterBg.png) repeat-x; margin: 50px 0 0 0;} #bigFooterIn {width: 918px; margin: 0 auto; position: relative;} #bigFooterIn h3 {position: absolute; top: -33px; left: 0; font-size: 20px;} #bigFooterContact {clear: both; padding: 25px 0 0 0;} #bigFooterContact span {font-size: 10px; border-right: 1px solid #bfbfbf; display: inline; padding: 5px;} #bigFooterContact .lastSpan {border-right: 0;} #bigFooterContact span a {color: #000;} #bigFooterIn iframe {width: 120px; height: 240px; float: left; border: 0; margin: 3px 79px 0 0; overflow: hidden;} #bigFooterIn iframe#footerFrame4 {margin-right: 0;} #bigFooterContact #links {position: absolute; top:272px; right: 5px;} #bigFooterContact #links a {color:#000000; font-size:10px;} #bigFooterContact #links1 {position: absolute; } #bigFooterContact #links1 a.one {position: absolute; top:5px; left: 612px; display: block; background: url(images/sprite.png) 0 -851px; width: 111px; height: 32px;} #bigFooterContact #links1 a.dev {position: absolute; top:15px; left: 830px; width:100px; color: #000; font-size: 10px;} #bigFooterContact #links1 #ccLicense {position: absolute; top:15px; left: 740px; } /***** PAGES *****/ /* Home */ #wrapHome #headerLogo {text-indent: -4000px;} #homeLogo {position: absolute; top: 8px; right: 30px;} #home {margin: 0 0 23px; height: 302px;} #header #logo {position: absolute; top: 141px; right: 265px; width: 394px;} #homeContent {width: 206px; float: left; padding: 0 22px 0 22px;} #homeContent p {margin: 0 0 23px 0;} #homeConsulting {width: 188px; padding: 0 23px 51px 23px; border-left: 2px dashed #bebebe; float: left; position: relative;} #homeConsulting h2 {width: 150px; height: 29px; text-indent: -4000px; background: url(images/sprite.png) 0px 0px; margin: 0 0 20px 0;} #homeConsulting a.arrowLink {height: 23px; width: 98px; background: url(images/sprite.png) 0px -160px; display: block; text-indent: -4000px; position: absolute; bottom: 10px; left: 23px;} #homeCoaching {width: 188px; padding: 0 23px 51px 23px; border-left: 2px dashed #bebebe; float: left; position: relative;} #homeCoaching h2 {width: 150px; height: 29px; text-indent: -4000px; background: url(images/sprite.png) 0px -33px; margin: 0 0 20px 0;} #homeCoaching a.arrowLink {height: 23px; width: 98px; background: url(images/sprite.png) 0px -184px; display: block; text-indent: -4000px; position: absolute; bottom: 10px; left: 23px;} #homeTraining {width: 188px; padding: 0 23px 51px 23px; border-left: 2px dashed #bebebe; border-right: 2px dashed #bebebe; float: left; position: relative;} #homeTraining h2 {width: 115px; height: 29px; text-indent: -4000px; background: url(images/sprite.png) 0px -67px; margin: 0 0 20px 0;} #homeTraining a.arrowLink {height: 23px; width: 98px; background: url(images/sprite.png) 0px -208px; display: block; text-indent: -4000px; position: absolute; bottom: 10px; left: 23px;} #home p a:link, #home p a:visited, #home p a:active, #home p a:focus, #home p a:hover {color: #ff630f;} /* Courses */ .mainCourses {width: 713px !important;} .coursesTitle {margin: 0 0 23px 23px !important;} .coursesTable {width: 690px; border-color: #bfbfbf !important; margin: 0 0 23px 23px !important;} .coursesTable tr td {vertical-align: text-top;} .coursesTable p {margin: 10px 0 0 0 !important; color: #666;} .coursesTable a {display: block;} .coursesTable .soldOut, .coursesTable .soldOut p {color: #ccc !important;} .coursesTable caption {font-family: "JournalRegular", Arial, sans-serif; font-size: 25px; letter-spacing: 1px; margin: 0 0 7px 0;} .coursesTable thead tr th {color: #FFBD36;} .coursesTable .col1 {width: 90px;} .coursesTable .col2 {} .coursesTable .col3 {width: 60px;} .coursesTable .col4 {width: 40px;} .coursesTable .col5 {width: 75px;} .coursesTable .col6 {width: 90px;} /* General Page Layout */ #wrap #headerLogo {text-indent: -4000px;} #pageLogo {position: absolute; top: 98px; right: 299px;} #main {margin: 30 0 0 0;} #main #pageTitle {margin: 0 0 23px 0;} #main p {margin: 0 0 23px 0;} /* Sidebar Left */ .sidebarPageRight h3 {margin: 0 0 5px 0; color: #FFBD36; font-size: 26px; line-height: 28px;} .sidebarPageRight h5 {margin: 0 0 20px 0; color: #FFBD36; font-size: 18px; line-height: 20px;} .sidebarPageRight a {padding: 4px 0 4px 7px; background: url(images/sprite.png) -161px -779px; display: block; margin: 23px 0 0 0; color: #fff !important; font-weight: bold;} .sidebarPageRight #quote {border-top: 2px dashed #BFBFBF; padding: 20px 0 0 0; margin: 20px 0 0 0;} .sidebarPageRight blockquote {padding: 0 0 0 10px; font-style: italic; font-size: 15px; margin: 0 0 35px 0;} .sidebarPageRight .quoteName {font-size: 25px; font-family: "JournalRegular", Arial, sans-serif; line-height: 25px; letter-spacing: 1px; display: block;} .sidebarPageRight .quoteRole {font-size: 12px; color: #666;} .sidebarPageRight .photos {font-size: 20px; color: #000;} .sidebarPageRight img {margin: 0 0 10px 0;} /* Sidebar Right */ #sidebarLeft #subpageArrow {display: block; height: 23px; width: 216px; background: url(images/sprite.png) 0px -826px; margin: 0 0 23px 0;} #sidebarLeft #subpageArrow a{color: #fff; padding: 4px 0 0 16px; font-weight: bold; display: block;} #sidebarLeft ul {margin: 0 0 0 15px;} #sidebarLeft ul li {border-top: 2px dashed #BFBFBF; padding: 10px 0; color: #aaa;} #sidebarLeft ul li:first-child {border: none !important;} #sidebarLeft ul li a {color: #000; font-weight: bold;} #sidebarLeft ul li a:hover {color: #FFBD36;} #sidebarLeft ul li.current_page_item a {color: #FFBD36;} #sidebarLeft #icfLogo {width: 183px; display: block; height: 82px; background: url(images/sprite.png) -2px -948px; margin: 0 0 0 15px;} /* Contact */ .contactPhone {margin: 23px 0 0 0;} #clean_contact .CleanContact {border: 0; padding: 0;} #clean_contact_from_name, #clean_contact_from_email, #clean_contact_subject {width: 451px; padding: 5px; border: 1px solid #bfbfbf; font-size: 12px;} #clean_contact_body {width: 451px; height: 100px; padding: 5px; border: 1px solid #bfbfbf; font-family: Arial, sans-serif; font-size: 12px;} #clean_contact_send {margin: 10px 0 0 0;} /***** BLOG *****/ .blogMain .post h2.title {font-family: "JournalRegular", Arial, sans-serif; font-size: 50px; font-weight: normal; line-height: 50px; letter-spacing: 1px; margin: 0 0 10px 0;} .post {margin: 0 0 20px 0; padding: 0 0 13px 0; overflow: hidden;} .blogMain .post {border-bottom: 2px dashed #bfbfbf;} .post .date {color: #999; font-size: 0.9em; margin: 0 0 10px 0; display: block;} /* Blog Left Sidebar */ #categoriesList li {border-top: 2px dashed #BFBFBF;} #categoriesTitle {color: #000; font-size: 20px; margin: 0 0 10px 15px;} #searchTitle {color: #000; font-size: 20px; margin: 15px 0 5px 15px;} #searchBox label {display: none;} #searchBox #s {padding: 5px; border: 1px solid #BFBFBF; display: inline; width: 153px; margin: 0 5px 0 15px;} #searchBox #searchSubmit {display: inline; position: relative; top: 4px;} .archiveTitle {margin: 23px 0 10px 15px;} .archiveList li {border-top: 2px dashed #bfbfbf;} #social {overflow: hidden; border-top: 2px dashed #bfbfbf; padding: 20px 0 0 0; zoom: 1;} #social h3 {float: left;} #social div {float: right; display: block; z-index: 200; position: relative; right: -15px;} #social div a {text-indent: -4000px; margin: 0 0 0 10px; display: block; width: 16px; height: 16px;} #socialDelicious a {background: url(images/sprite.png) -325px -62px;} #socialStumble a {background: url(images/sprite.png) -325px -26px;} #socialFacebook a {background: url(images/sprite.png) -325px -80px;} #social iframe {float: right;} #social .tweetmeme {position: relative; right: -27px; z-index: 150;} #social .digg {position: relative; right: -168px; z-index: 100;} /* Blog Right Sidebar */ #rss {overflow: hidden;} #rss h3 {color: #000; font-size: 20px; overflow: hidden; padding: 2px 0 0 0; margin: 0;} #rss .rss {background: 0; height: auto; width: auto; color: #FFBD36 !important; font-weight: normal; margin-top: 10px !important; padding: 0;} #rss .rss span {display: block; float: left; width: 16px; height: 16px !important; background: url(images/sprite.png) -325px -8px; padding: 0; margin: -1px 5px 0 0 !important;} #rss .facebook {background: url(images/facebook_16.png) no-repeat top left; padding: 0 0 0 22px; margin: 25px 0 0 0;} #rss .facebook img {margin: 0 0 3px 0; padding: 0;} #rss .facebookText {padding: 0 0 0 23px; font-size: 11px;} #rss .twitter {background: url(images/twitter_16.png) no-repeat top left; padding: 0 0 0 22px; margin: 8px 0 10px 0; color: #FFBD36 !important; font-weight: normal !important; height: 16px;} #tagCloud {text-align: justify; clear: both; margin: 23px 0 0 0;} #tagCloud h3 {color: #000; font-size: 20px;} #tagCloud a {text-indent: 0; background: none; height: auto; width: auto; margin: 0; padding: 0; display: inline; color: #FFBD36 !important; font-weight: normal;} #twitter {margin: 30px 0 0 0;} #twitter h3 {color: #000; font-size: 20px;} #twitter li {margin: 0 0 10px 0;} #twitter a {background: 0; padding: 0; margin: 0; color: #FFBD36 !important; display: inline;} #aboutThisBlog {margin: 30px 0 0 0;} #aboutThisBlog h3 {font-size: 20px; color: #000;} #aboutThisBlog p {margin: 0 0 10px 0;} #aboutThisBlog a {width: auto; height: auto; padding: 0; margin: 0; font-weight: normal; background: 0; color: #FFBD36 !important;} #blogRoll {margin: 23px 0 0 15px;} #blogRoll h3 {font-size: 20px; color: #000; margin-bottom: 10px;} #blogRoll a {width: auto; height: auto; padding: 0; margin: 0; font-weight: normal; background: 0; color: #FFBD36 !important; padding-bottom: 10px; display: block;} /* Archive */ #archiveHeader {margin: 0 0 15px 0; word-spacing: 5px;} /* Comment & Form */ #comments {text-indent: -4000px; height: 17px; width: 95px; background: url(images/sprite.png) -2px -929px; margin: 0 0 20px 0;} #commentList {margin: 0 !important;} #commentList li {list-style: none outside !important; margin: 0 !important;} #commentList li p {margin: 0 !important;} #commentList li.oddComment {border-top: 1px solid #ccc;} #commentList li.evenComment {border-top: 1px solid #ccc; background: #eee;} #commentList li.lastComment {border-bottom: 1px solid #ccc;} #commentList li {overflow: hidden; padding: 7px 10px; position: relative;} #commentList li .commentMeta {width: 120px; float: left;} #commentList li .commentText {width: 300px; float: right;} #commentList li .commentnumber {color: #ccc; margin: 0 0 0 10px; display: inline;} #commentList li .commentDate {margin: 2px 0 0 0; display: inline; color: #999;} #commentList li .authorLink {display: block; margin: 0 0 5px 0;} #commentform {position: relative;} #commentform div label {display: block; font-size: 0.8em; color: #666; margin: 0 0 2px 0;} #commentform div input {padding: 5px; border: 1px solid #ccc; margin: 0 0 10px 0; width: 451px; font-size: 11px;} #commentform div input:hover {border-color: #999;} #commentform div input:focus {background: #eee; border-color: #666;} #commentform div textarea {padding: 5px; border: 1px solid #ccc; margin: 0 0 10px 0; width: 451px; font-family: Arial, sans-serif; font-size: 11px; height: 80px;} #commentform div textarea:hover {border-color: #999;} #commentform div textarea:focus {background: #eee; border-color: #666;} #commentform #submit {margin: 0 0 50px 0;} #respond h3 {margin: 20px 0 15px 0; color: #000; font-size: 20px;} #respond p {margin: 0;} #commentluv {position: absolute; bottom: 41px; right: 0; width: 270px; text-align: right;} #commentluv img {position: relative; top: 4px;} .commentText .cluv {background: #ddd; border: 0; margin: 8px 0 3px 0;} .commentLoggedIn #commentluv {position: absolute; top: 137px; right: 0; width: 270px; text-align: right;} .commentLoggedOut #commentluv {position: absolute; top: 275px; right: 0; width: 270px; text-align: right;} /* Next Previus Links */ #nextPrev {height: 15px; position: relative;} #nextPrevNewer {position: absolute; right: 0; bottom: 0px;} #nextPrevOlder {position: absolute; left: 0; bottom: 0px;} /***** BASE TYPOGRAPHY *****/ h1,h2,h3,h4,h5,h6 {font-family: Arial, sans-serif; font-weight: bold;} h1 {font-size: 2.2em;} h2 {font-size: 2em;} h3 {font-size: 1.7em;} h4 {font-size: 1.5em;} h5 {font-size: 1.3em;} h6 {font-size: 1.2em;} p {line-height: 1.4em; font-size: 12px;} a:link, a:visited {text-decoration: none; color: #FFBD36;} a:hover {text-decoration: underline;} a:active {text-decoration: underline;} strong, b {font-weight: bold;} em, i {font-style: italic;} #main acronym, abbr {border-bottom: 1px dashed #ccc;} #main code {font-size: 12px; font-family: Courier, monospace; color: #900;} #main del {color: #666;} #pageTitle {font-family: "JournalRegular", Arial, sans-serif; font-size: 50px; font-weight: normal; line-height: 50px; letter-spacing: 1px; margin: 0 0 20px 0;} /***** OTHER BASIC FORMATTING FOR #main *****/ #main blockquote {margin: 10px; padding: 2px 0 2px 10px; border-left: 3px solid #ccc; color: #666; _border-bottom: solid 1px #fff;} #main blockquote p {margin: 0; color: #666;} #main hr {clear: both;} /* This makes sense to me, make all horizontal rules full width by clearing all floats */ /* Forms */ #main fieldset {border: 1px solid #999; padding: 5px 10px 10px 10px;} #main fieldset legend {padding: 0 5px;} /* Lists */ #main ol, #main ul {margin: 10px;} #main ol li ol, #main ul li ul, #main ol li ul, #main ul li ol {margin: 0 0 0 10px;} #main ol li {list-style: outside decimal; margin: 0 0 0 10px;} #main ul li {list-style: outside disc; margin: 0 0 0 10px;} #mainul li ul li {list-style: outside circle;} /* Tables */ #main table {border: 1px solid; border-color: #999; text-align: left; margin: 0 0 23px 0;} /* border-color definded sepratly to fix some (typical) screwed up IE bug */ #main table th, #main table td {padding: 5px;} #main table th {font-weight: bold;} /* Selection Colours */ ::selection {background: #FFBD36; color: #000;} ::-moz-selection {background: #FFBD36; color: #000;} /* blog snipits */ .blog { position:relative; margin:0 auto; width:960px; } ul.blogposts h2{ font-size: 13px; } ul.blogposts li{ border-right:2px dashed #BEBEBE; padding:0 23px 51px; position:relative; width:188px; }