/* Theme Name: Chromatique Theme URI: http://der-design.com/wpthemes/chromatique-wp.php Description: Wordpress Premium Business/Portfolio Theme, brought to you by derDesign Version: 1.0 Author: Ernesto Mendez Author URI: http://themeforest.net/user/der */ /************************************** * STYLESHEET: Core & Layout * VERSION: 10.24.2009 * UPDATED: - * * ==================================== * T A B L E O F C O N T E N T S * ==================================== 1) GENERAL STYLES 2) HEADER 2.1) SEARCH 2.2) NAVIGATION 2.3) DROPDOWN MENU 3) CONTENT 3.1) TOP SECTION 3.2) SUB NAVIGATION 3.3) BREADCRUMB 4) HOME PAGE 4.1) FEATURED HOME 4.2) SOCIAL 4.3) ARTICLES 4.4) ADVERTISEMENT 5) FOOTER 6) SIDEBAR 6.1) SIDEBAR LAYOUT 6.2) SIDEBAR WRAP 6.3) SIDEBAR TYPOGRAPHY 6.4) SIDEBAR UNORDERED LIST 6.5) RECENT COMMENTS 7) BLOG POST 7.1) POST TYPOGRAPHY & LAYOUT 7.2) PAGINATION 7.3) COMMENTS 8) PORTFOLIO PAGE 9) JAVASCRIPT DEGRADATION /* ================================================================== * 1) G E N E R A L S T Y L E S * ================================================================== */ body { background: url(core/images/bg.gif); } body .container { position: relative; width: 960px; margin: 0 auto; } body .button { display: block; width: 150px; height: 35px; background: url(core/images/common/button.png) no-repeat; text-align: center; line-height: 35px; color: #edeceb; font-weight: bold; font-size: 17px; } body .button:hover { text-decoration: none; color: #fffefd; } body .button-normal, .sidebar input[type="submit"] { position: relative; background: none; width: 150px; height: 35px; font-size: 14px; text-align: center; background: #323232; top: 2px; left: 5px; } body .button-normal:hover, .sidebar input[type="submit"]:hover { cursor: pointer; color:#E6E5E4; } body .cache { display: none; } body .invalid { border-color: red; } body .post-msg { display: none; position: relative; width: 398px; height: 20px; background: #0077CE; margin-bottom: 33px; padding: 10px; border: solid 2px #04689c; font-size: 14px; font-weight: bold; color: white; } body .post-msg a.close-btn { position: absolute; display: block; width: 20px; height: 20px; background: url(core/images/interface/close-btn.png); top: 10px; right: 10px; } body .hidden { display: none; } /* ================================================================== * 2) H E A D E R * ================================================================== */ #header { position: relative; width: 100%; height: 138px; background: url(core/images/common/header-bg.png) repeat-x; z-index: 2; } #header .container { height: 138px; position: relative; } #header .logo { position: absolute; width: 320px; height: 113px; background: url(core/images/logo.png) center left no-repeat; top: 10px; left: 30px; } /* 2.1) S E A R C H * ------------------------------------------- */ #header .container form#searchform { position: absolute; width: auto; height: 30px; top: 71px; right: 50px; } #header .container form#searchform input { margin: 0; padding: 0; border: none; } #header .container form#searchform input#search_query { float: left; width: 186px; height: 20px; padding: 7px 0 3px 10px; background: url(core/images/common/search.png); } #header .container form#searchform input#search_submit { float: left; overflow: hidden; font-size: 100em; width: 45px; height: 30px; background: url(core/images/common/search-btn.png); } #header .container form#searchform input#search_submit:hover { cursor: pointer; } #header .container form#searchform #search-focus-block { position: absolute; display: none; width: 100%; height: 100%; background: url(core/images/blank.gif); z-index: 1; } /* 2.2) N A V I G A T I O N * ------------------------------------------- */ #header .container ul#navigation { position: relative; float: right; z-index: 3; font-size: 12px; } #header .container ul#navigation li { text-align: center; float: left; margin: 0; padding: 0; width: auto !important; width: 57px; min-width: 57px; height: 57px; background: url(core/images/common/nav-middle.png) repeat-x; } #header .container ul#navigation li a { display: block; width: 100%; height: 100%; margin: 0 0 0 0; line-height: 47px; padding: 0; } #header .container ul#navigation li a.active { color: #68b3ea; } #header .container ul#navigation li a.active:hover { color: #259ffa; } #header .container ul#navigation li a:hover { color: #e1e0df; text-decoration: none; } #header .container ul#navigation li.left-block { background: url(core/images/common/nav-left.png) no-repeat; } #header .container ul#navigation li.right-block { background: url(core/images/common/nav-right.png) no-repeat; } #header .container ul#navigation a { color: #c4c4c4; } /* 2.3) D R O P D O W N M E N U * ------------------------------------------- */ #header .container ul#navigation li a:hover { color: #edeceb } #header .container ul#navigation li ul { position: absolute; background: url(core/images/interface/menu-bg.png); display: none; top: 55px; border: solid 1px #414141; margin: 0; padding: 5px 0 5px 0; width: 150px; font-size: 12px; } #header .container ul#navigation li:hover > ul { display: block; } #header .container ul#navigation li ul li { position: relative; display: block; background: none; text-align: left; margin: 0; padding: 0 27px 0 5px; height: auto; } #header .container ul#navigation li ul li a { float: none; color: #aeadab; display: block; width: 118px; height: 100%; line-height: 15px; margin: 0; padding: 10px 10px 10px 10px; border: solid 1px transparent; } #header .container ul#navigation li ul li a:hover { border-color: #4a4a4a; color: #edeceb; border-left-color: #259FFA; } #header .container ul#navigation li ul li ul { position: absolute; top: -6px; left: 150px; margin: 0; padding: 5px 0 5px 0; } #header .container ul#navigation li ul li.dir > a { background: url(core/images/interface/menu-icon.png) center right no-repeat; } #header .container ul#navigation li ul li.dir:hover > a { border-color: #404040; color: #edeceb; border-left-color: #259FFA; } /* ================================================================== * 3) C O N T E N T * ================================================================== */ #content { background: url(core/images/common/content-bg.jpg) center repeat-y; margin-top: -11px; z-index: 1; margin-bottom: -12px; height: auto !important; height: 500px; min-height: 500px; } /* 3.1) T O P S E C T I O N * ------------------------------------------- */ #content #top-section { position: relative; width: 880px; height: 74px; background: url(core/images/common/top-section.png) repeat-x; margin: 0 auto; } #content #top-section h1 { position: absolute; left: 11px; top: 30px; color: #b7b7b7; } /* 3.2) S U B N A V I G A T I O N * ------------------------------------------------------------ */ #content #top-section ul.sub-navigation { position: absolute; bottom: 0px; right: 0; } #content #top-section ul.sub-navigation li { float: left; padding: 0 15px 0 0; } #content #top-section ul.sub-navigation li a { font-size: 14px; color: #b7b7b7; text-indent: 0; } #content #top-section ul.sub-navigation li a:hover { text-decoration: none; color: #e1e0df; } #content #top-section ul.sub-navigation li a.active { color: #68B3EA; } #content #top-section ul.sub-navigation li a.active:hover { color: #68B3EA; } /* 3.3) B R E A D C R U M B * ------------------------------------------- */ #content #breadcrumb { position: relative; width: 880px; margin: 2px auto; font-size: 14px; } #content #breadcrumb p { margin-left: 11px; } #content #breadcrumb p a { color: #323232; } #content #breadcrumb span { color: #0077ce; font-weight: bold; } /* ================================================================== * 4) H O M E P A G E * ================================================================== */ /* 4.1) F E A T U R E D H O M E * ------------------------------------------- */ #content #featured { position: relative; width: 960px; height: 340px; margin-bottom: -10px; } #content #featured #featured-bottom { position: absolute; width: 100%; height: 28px; background: url(core/images/common/featured-bottom.png) no-repeat; bottom: 0px; } #content #featured #featured-body { position: relative; width: 958px; height: 310px; background: url(core/images/common/featured-bg.jpg) repeat-x; border: solid 1px #c2c2c3; z-index: 1; } #content #featured #featured-body .frame { position: absolute; width: 482px; height: 362px; background: url(core/images/common/feat-img-bg.png) no-repeat; top: 14px; left: 40px; z-index: 1; } #content #featured #featured-body img { position: absolute; top: 30px; left: 56px; } #content #featured #featured-body img.front { z-index: 2; } #content #featured #featured-body img.back { z-index: 1; } #content #featured #featured-body a.nav-left { position: absolute; display: block; width: 25px; height: 122px; background: url(core/images/interface/img-nav-left.png) center no-repeat; top: 125px; left: 24px; z-index: 1; } #content #featured #featured-body a.nav-right { position: absolute; display: block; width: 25px; height: 122px; background: url(core/images/interface/img-nav-right.png) center no-repeat; top: 125px; left: 513px; z-index: 1; } #content #featured #featured-body #featured-content { position: absolute; overflow: hidden; width: 378px; height: 275px; top: 10px; right: 40px;} #content #featured #featured-body #featured-content h1 { padding-top: 30px; } #content #featured #featured-body #featured-content p { font-size: 14px; line-height: 1.5em; } #content #featured #featured-body #featured-content a.button { position: absolute; bottom: 0; left: 0; } #content #featured #featured-body #featured-nav-ui { position: absolute; margin: 0; padding: 0; bottom: 25px; right: 40px; } #content #featured #featured-body #featured-nav-ui li { float: left; text-indent: -9999px; margin: 0 0 0 16px; padding: 0; width: 10px; height: 10px; background: url(core/images/interface/feat-inactive.jpg) no-repeat; } #content #featured #featured-body #featured-nav-ui li a { display: block; width: 10px; height: 10px; background: url(core/images/blank.gif); } #content #featured #featured-body #featured-nav-ui li.active { background: url(core/images/interface/feat-active.jpg) no-repeat; } /* 4.2) S O C I A L * ------------------------------------------- */ #content #social { width: auto; height: 48px; margin: 0px 70px 0 0; float: right; } #content #social a { display: block; float: left; width: 48px; height: 48px; margin-left: 8px; } #content #top-section #social { position: absolute; top: 7px; right: -60px; } /* 4.3) A R T I C L E S * ------------------------------------------- */ #content #articles { width: 850px; margin: 67px auto 0 auto; padding-bottom: 25px; } #content #articles .clear { } #content #articles .wrap { border-bottom: solid 1px #cfcecd; margin-bottom: 18px; } #content #articles .wrap .article { display: block; float: left; width: 395px; height: auto !important; height: 200px; min-height: 200px; margin: 0 15px 0 15px; padding-bottom: 20px; } #content #articles .wrap .article img { width: 395px; margin-bottom: 13px; } #content #articles .wrap .article img.article-img { width: 393px; height: 98px; border: solid 1px #c2c2c3; } #content #articles .wrap .article h3 { margin-top: -10px; } /* 4.4) A D V E R T I S E M E N T * ------------------------------------------- */ #content .ad-wide { width: 100%; height: auto; padding-bottom: 25px; } #content .ad-wide a img { display: block; margin: 0 auto 15px auto; } #content .ad-wide .separator { width: 850px; margin: -10px auto 20px; border-top: solid 1px #CFCECD; } /* ================================================================== * 5) F O O T E R * ================================================================== */ #footer-top { position: relative; width: 100%; height: 30px; background: url(core/images/common/footer-bg-top.png) top repeat-x; z-index: 1; } #footer-top a#back-to-top { position: absolute; display: block; text-indent: -9999px; width: 35px; height: 35px; background: url(core/images/interface/back-to-top.png) no-repeat; margin: 0 auto; margin-top: -10px; top: 2px; left: 463px; } #footer { width: 100%; background: url(core/images/common/footer-bg.png) top repeat-x #151515; } #footer .container { width: 840px; color: #7a7a7a;} #footer .container a { color: #68b3ea; } #footer .container .column { float: left; width: 260px; margin: 18px 10px 0 10px; } #footer .container .column p { line-height: 1.6em; } #footer .container .column h3 { color: #bdbcbb; margin: -10px 0 12px 0; } #footer .container .column ul { padding-left: 0; margin-left: 0; left: 0; } #footer .container .column ul li { padding-bottom: 6px; margin-left: 15px; padding-left: 0; } #footer .extra-info { position: relative; width: 820px; margin: 0 auto; height: auto !important; height: 50px; min-height: 50px; padding-bottom: 20px; } #footer .container .column .widget { padding-bottom: 0px; } /* ================================================================== * 6) S I D E B A R * ================================================================== */ #content #main { width: 100%; padding-bottom: 30px; } #content #main.fullwidth { width: 850px; margin: 0 auto; } /* 6.1) S I D E B A R L A Y O U T * ----------------------------------------------------------- */ #content #main #left { width: 618px; float: left; color: #323232; height: auto !important; height: 500px; min-height: 500px; } #content #main .sidebar { position: relative; width: 327px; float: left; left: 15px; margin: -18px 0 -7px 0; } #content #main .sidebar #sidebar-top { width: 100%; height: 38px; background: url(core/images/common/sidebar-top.png) no-repeat; } #content #main .sidebar #sidebar-bottom { width: 100%; height: 12px; background: url(core/images/common/sidebar-bottom.png) bottom no-repeat; } #content #main .sidebar .wrap { width: 262px; padding: 10px 30px 0 35px; background: url(core/images/common/sidebar-bg.png) repeat-y; } #content #main .sidebar .wrap div, #content #main .wrap ul { padding-bottom: 20px; } /* 6.2) S I D E B A R W R A P * ------------------------------------------------------------ */ #content #main .sidebar .wrap .ads { width: 258px; margin: 0 auto; padding-bottom: 10px; } #content #main .sidebar .wrap .ads img { position: relative; width: 125px; height: 125px; float: left; margin: 0 2px 4px 2px; } /* 6.3) S I D E B A R T Y P O G R A P H Y * ------------------------------------------------------------ */ #content #main .sidebar { color: #6b6b6b; } #content #main .sidebar a { color: #0077ce; font-size: 14px; font-weight: normal; } #content #main .sidebar h1, #content #main .sidebar h2, #content #main .sidebar h3, #content #main .sidebar h4, #content #main .sidebar h5, #content #main .sidebar h6 { color: #585858; padding-bottom: 0.7em; } #content #main .sidebar ul li.categories { } /* 6.4) S I D E B A R U N O R D E R E D L I S T * ------------------------------------------------------------ */ #content #main .sidebar .wrap ul { } #content #main .sidebar .wrap ul li { text-indent: 10px; } #content #main .sidebar .wrap ul li.title { padding: 0 0 0 0; text-indent: 0; } #content #main .sidebar .wrap ul li h2 { } #content #main .sidebar .wrap ul li a { } #content #main .sidebar .wrap .widget ul { margin-top: -5px; } /* 6.5) R E C E N T C O M M E N T S * ------------------------------------------------------------ */ #content #main .sidebar .wrap .widget ul#recentcomments { } #content #main .sidebar .wrap .widget ul#recentcomments li { margin-left: 0; padding: 3px 0 6px 0; text-indent: 0; border-bottom: solid 1px #acacac; } #content #main .sidebar .wrap .widget ul#recentcomments li a { font-size: 14px; } #content #main .sidebar .wrap .widget ul#recentcomments li a.author { font-weight: normal; color: #6b6b6b; font-size: 13px; } #content #main .sidebar .wrap .widget ul#recentcomments li a.author:hover { text-decoration: underline; } #content #main .sidebar .wrap .widget ul#recentcomments li a:hover { text-decoration: none; } #content #main .sidebar .wrap .widget ul#recentcomments li:hover { border-bottom-color: #6e8ba0; } /* ================================================================== * 7) B L O G P O S T * ================================================================== */ #content #main #left .post { position: relative; width: 618px; padding-bottom: 20px; } #content #main #left .post .post-top { width: 100%; height: 30px; background: url(core/images/common/post-bg-top.png) no-repeat top; } #content #main #left .post .post-contents { width: 530px; padding: 0 38px 35px 50px; background: url(core/images/common/post-bg-middle.png) repeat-y; } #content #main #left .post .post-bottom { width: 100%; height: 28px; background: url(core/images/common/post-bg-bottom.png) no-repeat bottom; } #content #main #left img.framed { display: block; width: 520px; height: 115px; color: #fff; border: solid 5px #fff; } /* 7.1) P O S T T Y P O G R A P H Y & L A Y O U T * ------------------------------------------------------------ */ #content #main #left .post .post-contents h2.title { width: 431px; padding-left: 68px; margin-bottom: -7px; overflow: hidden; } #content #main #left .post .post-contents h2.title a { font-weight: normal; color: #323232; font-size: 22px; line-height: 27px;} #content #main #left .post .post-contents h2.title a:hover { text-decoration: none; color: #4c4c4c; } #content #main #left .post .post-contents p.info { width: 462px; padding: 0 0 22px 68px; font-size: 12px; } #content #main #left .post .post-contents img.featured { display: block; width: 520px; height: 115px; color: #fff; border: solid 5px #fff; margin-bottom: 20px; } #content #main #left .post .post-contents a.readmore { display: inline-block; padding-top: 5px; } #content #main #left .post .post-contents ul.tags { position: absolute; height: 25px; bottom: 52px; right: 30px; margin: 0; padding: 0; color: #8b8b8b;} #content #main #left .post .post-contents ul.tags li { float: left; margin: 0 0 0 0; padding: 0; text-indent: 0;} #content #main #left .post .post-contents ul.tags li a { color: #8b8b8b; padding-right: 5px; } #content #main #left .post .post-contents ul.tags li a:hover { text-decoration: none; color: #707070; } #content #main #left .post .post-contents ul.tags li.tag-icon { display: block; width: 25px; height: 25px; background: url(core/images/icons/tag-icon.png) no-repeat; margin-right: 7px; } #content #main #left .post .date-info { position: absolute; width: 48px; height: 66px; background: url(core/images/icons/post-date.png) no-repeat; top: 0px; left: 50px; color: #fff; font-size: 24px; font-weight: bold; text-align: center; } #content #main #left .post .date-info * { display: block; width: 100%; } #content #main #left .post .date-info big.month { padding: 13px 0 2px 0; font-size: 14px; } #content #main #left .post .comments-info { position: absolute; width: 66px; height: 42px; background: url(core/images/icons/post-comments.png) no-repeat; top: 30px; right: 0px; text-align: center; font-size: 17px; color: #fff; } #content #main #left .post .comments-info big { display: block; width: 50px; padding: 20px 0 0 0; margin-left: 13px; } #content #main #left .post .comments-info a.comments-link { position: absolute; display: block; width: 66px; height: 42px; background: url(core/images/blank.gif); text-indent: -9999px; } /* 7.2) P A G I N A T I O N * ------------------------------------------------------------ */ /* Wordpress Default */ #content .link-previous, #content .link-next { display: inline-block; } #content .link-previous a, #content .link-next a { color: #7a7a7a; } #content .link-previous { float: left; margin-left: 50px; } #content .link-next { float: right; margin-right: 20px; } /* WP Pagenavi */ #content .wp-pagenavi { margin: 0; padding: 0 0 9px 0; float: left; margin-left: 51px; font-size: 14px; } #content .wp-pagenavi .current { color: #0077ce; background: white; border-color: #c2c2c3; } #content .wp-pagenavi .current:hover { } #content .wp-pagenavi a { color: #323232; background: none; border: none; font-weight: normal; } #content .wp-pagenavi a:hover { } #content .wp-pagenavi .pages { background: none; border: none; } #content .wp-pagenavi .pages:after { content: ": "; } /* 7.3) C O M M E N T S * ------------------------------------------------------------ */ #content #comments-section { position: relative; width: 610px; margin-left: -8px; padding-bottom: 20px; } #content #comments-section .comment { width: 100%; } #content #left #comments, #content #left #respond h4 { margin-left: 50px; color: #7C7C7C; } #content #comments-section .vcard { position: absolute; z-index: 1; width: 135px; height: 100px; background: url(core/images/common/comment-img.png) no-repeat; } #content #comments-section .vcard img { position: absolute; top: 22px; left: 25px; } #content #comments-section .comment { margin-bottom: 25px; } #content #comments-section .comment .comment-body { position: relative; font-style: italic; color: #606060; font-size: 13px; width: 455px; padding: 12px 15px 12px; height: auto !important; height: 80px; min-height: 80px; background: #e6e5e4; margin-left: 130px; border: solid 1px #fafafa; top: 13px; } #content #comments-section .comment .comment-body span { display: block; font-size: 12px; color: #878787; margin-bottom: 15px; font-style: normal; } #content #comments-section .comment .comment-body span a.poster { font-size: 14px; } #content #comments-section .comment .comment-body span a.poster:hover { text-decoration: none; color: #008bf0; } #content #comments-section .comment .comment-body p.date { padding: 0 0 0 0; font-style: normal; color: #a39f9b; text-align: right; } #content #comments-section .comment .comment-body p.date a { display: inline-block; margin-left: 30px; color: #a39f9b; font-size: 11px; } #content #comments-section .comment .comment-body p.date a:hover { color: #94908d; } #content #respond { } #content #left form#commentform { margin-left: 60px; } #content #left form#commentform textarea { margin-top: 10px; } #content #left form#commentform input#submit { width: 150px; height: 35px; background: #E6E5E4; margin-top: -5px; background: url(core/images/common/button.png) no-repeat; border: none; color: #edeceb; font-size: 14px; text-align: center; } #content #left form#commentform input#submit:hover { cursor: pointer; color: #fffefd;} #content #left form#commentform label small { font-size: 12px; color: #585858; } /* ================================================================== * 8) P O R T F O L I O P A G E * ================================================================== */ #content #portfolio-items { width: 885px; margin: 0px auto 0 auto; padding-bottom: 30px; } #content #portfolio-items .block { } #content #portfolio-items .block .item { position: relative; float: left; width: 265px; margin: 0 15px 0 15px; } #content #portfolio-items .block .item .frame {width: 265px; height: 164px; background: url(core/images/common/portfolio-img-bg.png) center no-repeat; } #content #portfolio-items .block .item .frame img { position: absolute; top: 15px; left: 15px; width: 235px; height: 134px; } #content #portfolio-items .block .item .wrap { width: 245px; margin: 0 auto; padding: 0 0 0 0; } #content #portfolio-items .block .item .wrap h4 { margin-top: -3px; } #content #portfolio-items .clear { height: 35px; } /* ================================================================== * 9) J A V A S C R I P T D E G R A D A T I O N * ================================================================== */ #content #featured #featured-body #featured-nav-ui, #content #featured #featured-body a.nav-left, #content #featured #featured-body a.nav-right { display: none; } /* EOF */