/* * STYLESHEET: Core & Layout * VERSION: 10.24.2009 * UPDATED: 01.06.2010 * * ==================================== * 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 8) PORTFOLIO PAGE 9) GENERIC PAGE LAYOUT 10) JAVASCRIPT DEGRADATION /* ================================================================== * 1) G E N E R A L S T Y L E S * ================================================================== */ body { background: url(../images/bg.gif); } body .container { position: relative; width: 960px; margin: 0 auto; } body .button { display: block; width: 150px; height: 35px; background: url(../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 .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(../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(../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(../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#query { float: left; width: 150px; height: 20px; padding: 7px 0 3px 10px; background: url(../images/common/search.png); } #header .container form#searchform input#search_submit { float: left; overflow: hidden; font-size: 100em; width: 45px; height: 30px; background: url(../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(../images/blank.gif); z-index: 1; } /* 2.2) N A V I G A T I O N * ------------------------------------------- */ #header ul#navigation { /* Navigation Top Coordinate */ top: 0px; /* Equal to the Links Separation (5) */ right: 0px; } #header ul#navigation { position: relative; float: right; margin: 0; padding: 0; z-index: 3; /* Menu Font Family */ font-family: "Trebuchet MS"; /* Menu Font Size */ font-size: 12px; /* Menu Link Kerning */ letter-spacing: 0px; /* Menu Text Transform */ text-transform: none; /* Menu Background */ background: none; } #header ul#navigation li { float: left; margin: 0; padding: 0 0 10px 0; background: url(../images/common/nav-middle.png) repeat-x transparent; } #header ul#navigation li.left-block, #header ul#navigation li.right-block { display: block; width: 57px; height: 50px; } #header ul#navigation li.left-block { background: url(../images/common/nav-left.png) no-repeat; } #header ul#navigation li.right-block { margin-left: -20px; background: url(../images/common/nav-right.png) no-repeat; } #header ul#navigation li a { display: block; margin: 0; padding: 0 20px 0 0; /* Menu Links Separation (right) (5) */ margin-right: 0px; /* Normal Menu Link's Color (2) */ color: #C4C4C4; /* Menu Height (1) */ line-height: 50px; /* Menu Font Weight */ font-weight: bold; } #header ul#navigation li a:hover { /* Normal Menu Link's Color (Hover) (2) */ color: #EDECEB; /* Menu Link's Text Decor (Hover) (2) */ text-decoration: none; } #header ul#navigation li a.active { /* Menu Link's Active Color (3) */ color: #68b3ea; } #header ul#navigation li a.active:hover { /* Menu Link's Active Color (Hover) (3) */ color: #259ffa; } #header ul#navigation li ul { position: absolute; margin: 0 0 0 0; /* Submenu Padding (to keep hover) (1) */ padding: 0 0 0 0; /* Submenu Font Size */ font-size: 13px; /* Submenu Link Kerning */ letter-spacing: 0.4px; /* Submenu Top Offset (1) */ top: 48px; /* Set to block to Show Submenus */ visibility: hidden; /* Outer Menu Width (4) */ width: 150px; /* Submenu Text Transform */ text-transform: none; /* Submenu Background */ background: none; /* Submenu Border */ border: solid 1px #414141; } #header ul#navigation li:hover > ul { visibility: visible; } #header ul#navigation li ul li { position: relative; display: block; margin: 0; padding: 0; height: auto; background: url(../images/interface/menu-bg.png); } #header ul#navigation li ul li a { float: none; display: block; height: 100%; margin: 0; /* Submenu Font Weight */ font-weight: normal; /* Submenu Link Width (4) */ width: 130px; /* Submenu Link Horizontal Padding (4) */ padding: 7px 10px; /* Submenu Link Height */ line-height: 20px; /* Submenu Link Color */ color: #c4c4c4; /* Submenu Link Background */ background: none; } #header ul#navigation li ul li.dir { background: url(../images/interface/menu-bg.png); } #header ul#navigation li ul li.dir > a { background: url(../images/interface/menu-icon.png) 96% 50% no-repeat; } #header ul#navigation li ul li a:hover, #header ul#navigation li ul li.dir:hover > a { /* Submenu Link's Color (Hover) */ color: #edeceb; /* Submenu Link's Background (Hover) */ background: url(../images/interface/menu-bg-hover.png); } #header ul#navigation li ul li ul { position: absolute; top: 0px; margin: 0; padding: 0; /* Submenu Left Offset (4) */ left: 150px; } /* ================================================================== * 3) C O N T E N T * ================================================================== */ #content { background: url(../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(../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(../images/common/featured-bottom.png) no-repeat; bottom: 0px; } #content #featured #featured-body { position: relative; width: 958px; height: 310px; background: url(../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(../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(../images/interface/img-nav-left.png) center no-repeat; top: 125px; left: 23px; z-index: 1; } #content #featured #featured-body a.nav-right { position: absolute; display: block; width: 25px; height: 122px; background: url(../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: 17px; right: 30px; } #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(../images/interface/feat-inactive.jpg) no-repeat; } #content #featured #featured-body #featured-nav-ui li a { display: block; width: 10px; height: 10px; background: url(../images/blank.gif); } #content #featured #featured-body #featured-nav-ui li.active { background: url(../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 { 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; } /* ================================================================== * 5) F O O T E R * ================================================================== */ #footer-top { position: relative; width: 100%; height: 30px; background: url(../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(../images/interface/back-to-top.png) no-repeat; margin: 0 auto; margin-top: -10px; top: 2px; left: 463px; } #footer { width: 100%; background: url(../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; } /* ================================================================== * 6) S I D E B A R * ================================================================== */ #content #main { width: 100%; padding-bottom: 30px; } /* 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(../images/common/sidebar-top.png) no-repeat; } #content #main .sidebar #sidebar-bottom { width: 100%; height: 12px; background: url(../images/common/sidebar-bottom.png) bottom no-repeat; } #content #main .sidebar .wrap { width: 262px; padding: 10px 30px 0 35px; background: url(../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; } /* 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(../images/common/post-bg-top.png) no-repeat top; } #content #main #left .post .post-contents { width: 530px; padding: 0 38px 35px 50px; background: url(../images/common/post-bg-middle.png) repeat-y; } #content #main #left .post .post-bottom { width: 100%; height: 28px; background: url(../images/common/post-bg-bottom.png) no-repeat bottom; } /* 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 { width: 431px; padding-left: 68px; margin-bottom: -7px; overflow: hidden; } #content #main #left .post .post-contents h2 a { font-weight: normal; color: #323232; font-size: 22px; } #content #main #left .post .post-contents h2 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(../images/icons/tag-icon.png) no-repeat; margin-right: 7px; } #content #main #left .post .date-info { position: absolute; width: 48px; height: 66px; background: url(../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(../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(../images/blank.gif); text-indent: -9999px; } /* 7.2) P A G I N A T I O N * ------------------------------------------------------------ */ #content ul.pagination { margin: 0; padding: 0 0 20px 0; float: left; margin-left: 51px; font-size: 14px; } #content ul.pagination li { width: 20px; height: 20px; float: left; margin: 0; padding: 0 5px 0 0; } #content ul.pagination li.text { padding-right: 40px; } #content ul.pagination li a { font-weight: normal; color: #323232; display: block; width: 18px; height: 18px; border: solid 1px transparent; text-align: center; line-height: 20px; } #content ul.pagination li a:hover { text-decoration: none; border-color: #c2c2c3; } #content ul.pagination li.active a { color: #0077ce; background: white; border-color: #c2c2c3; } #content ul.pagination li.active a:hover { } /* ================================================================== * 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 .item { position: relative; float: left; width: 265px; margin: 0 15px 0 15px; } #content #portfolio-items .item .frame {width: 265px; height: 164px; background: url(../images/common/portfolio-img-bg.png) center no-repeat; } #content #portfolio-items .item .frame img { position: absolute; top: 15px; left: 15px; width: 235px; height: 134px; } #content #portfolio-items .wrap { width: 245px; margin: 0 auto; padding: 0 0 0 0; } #content #portfolio-items .wrap h4 { margin-top: -3px; } #content #portfolio-items .clear { height: 35px; } /* ================================================================== * 9) G E N E R I C P A G E L A Y O U T * ================================================================== */ #content #main #left .generic-page { position: relative; width: 618px; padding-bottom: 20px; } #content #main #left .generic-page .generic-page-top { width: 100%; height: 30px; background: url(../images/common/post-bg-top.png) no-repeat top; } #content #main #left .generic-page .generic-page-contents { width: 530px; padding: 0 38px 20px 50px; background: url(../images/common/post-bg-middle.png) repeat-y; } #content #main #left .generic-page .generic-page-bottom { width: 100%; height: 15px; background: url(../images/common/post-bg-bottom.png) no-repeat bottom; } #content #main #left .generic-page .generic-page-contents img { margin-top: 10px; margin-bottom: 23px; } #content #main #left .generic-page .generic-page-contents img.framed { display: block; width: 520px; height: 115px; color: #fff; border: solid 5px #fff; } #content #main #left .generic-page .generic-page-contents ul, #content #main #left .generic-page .generic-page-contents ol { text-indent: 10px; } #content #main #left .generic-page .generic-page-contents ul li { list-style-type:disc; } /* ================================================================== * 10) 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 */