/* * STYLESHEET: Core & Layout flyingpixelstudios.com * 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 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: 980px; 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: 128px; 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; } #wood { position: relative; width: 100%; height: 100%; background: url(../images/background.png) center repeat-x; } #headerclose { position: relative; width: 100%; height: 7px; background: url(../images/common/header-bg2.png) repeat-x; z-index: 2; } /* 2.1) S E A R C H * ------------------------------------------- */ #header .container form#searchform { position: absolute; width: 220px; 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: 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 .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(../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(../images/common/nav-left.png) no-repeat; } #header .container ul#navigation li.right-block { background: url(../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(../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(../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(../images/common/content-bg.jpg) center repeat-y; 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: 960px; height: 150px; background: url(../images/common/top-section.png) repeat-x; margin: 0 auto; } #content #top-section h1 { position: absolute; left: 20px; top: 57px; color: #b7b7b7; width: 460px; height: 38px; } /* 3.2) S U B N A V I G A T I O N * ------------------------------------------------------------ */ #content #top-section ul.sub-navigation { position: absolute; bottom: 11px; right: 333px; width: 608px; } #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 { 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: 980px; height: 340px; margin-bottom: -10px; } #featured #featured-bottom { width: 100%; height: 28px; bottom: 0px; } #featured #featured-body { position: relative; width: 980px; height: 310px; background: url(../images/common/feature-bg.jpg) repeat-x; } #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; } #featured #featured-body .frame img { position: absolute; top: 15px; left: 16px; } #featured #featured-body .frame img.front { z-index: 2; } #featured #featured-body .frame img.back { z-index: 1; } #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; } #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; } #featured #featured-body #featured-content { position: absolute; overflow: hidden; width: 378px; height: 275px; top: 10px; right: 40px;} #featured #featured-body #featured-content h1 { padding-top: 30px; } #featured #featured-body #featured-content p { font-size: 14px; line-height: 1.5em; } #featured #featured-body #featured-content a.button { position: absolute; bottom: 0; left: 0; } #featured #featured-body #featured-nav-ui { position: absolute; margin: 0; padding: 0; bottom: 25px; right: 40px; } #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; } #featured #featured-body #featured-nav-ui li a { display: block; width: 10px; height: 10px; background: url(../images/blank.gif); } #featured #featured-body #featured-nav-ui li.active { background: url(../images/interface/feat-active.jpg) no-repeat; } #content #indexmain #left .post { position: relative; width: 618px; padding-bottom: 20px; padding-left: 20px; padding-top: 20px; } #content #indexmain #left .post .post-top { width: 100%; height: 30px; background: url(../images/common/post-bg-top.png) no-repeat top; } #content #indexmain #left .post .post-contents { width: 530px; padding: 0 38px 0px 50px; background: url(../images/common/post-bg-middle.png) repeat-y; } #content #indexmain #left .post .post-bottom { width: 100%; height: 28px; background: url(../images/common/post-bg-bottom.png) no-repeat bottom; } /* 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; } #content #articles .clear { } #content #articles .article { display: block; float: left; width: 395px; height: auto !important; height: 200px; min-height: 200px; margin: 0 15px 18px 15px; padding-bottom: 20px; border-bottom: solid 1px #cfcecd; } #content #articles .article img { width: 395px; margin-bottom: 13px; } #content #articles .article img.article-img { width: 393px; height: 98px; border: solid 1px #c2c2c3; } #content #articles .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: 100px; height: 64px; background: url(../images/interface/back-to-top.png) no-repeat; margin: 0 auto; margin-top: -10px; top: -15px; left: 467px; } #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; } #footer .container .columnS { float: left; width: 260px; margin: 18px 10px 0 10px; } #footer .container .columnS p { line-height: 1.1em; } #footer .container .columnS h3 { color: #bdbcbb; margin: -10px 0 12px 0; } #footer .container .columnS ul { padding-left: 0; margin-left: 0; left: 0; } #footer .container .columnS ul li { padding-bottom: 6px; margin-left: 15px; padding-left: 0; } #footer .container .columnL { float: left; width: 520px; margin: 18px 10px 0 10px; } #footer .container .columnL p { line-height: 1.1em; } #footer .container .columnL h3 { color: #bdbcbb; margin: -10px 0 12px 0; } #footer .container .columnL ul { padding-left: 0; margin-left: 0; left: 0; } #footer .container .columnL ul li { padding-bottom: 6px; margin-left: 15px; padding-left: 0; } /* ================================================================== * 6) INDEX S I D E B A R * ================================================================== */ #content #indexmain { width: 100%; padding-bottom: 30px; } /* 6.1) INDEX S I D E B A R L A Y O U T * ----------------------------------------------------------- */ #content #indexmain #left { width: 640px; float: left; color: #323232; height: auto !important; height: 500px; min-height: 500px; } #content #indexmain .sidebar { position: relative; width: 327px; float: right; left: 15px; margin: -18px 0 -7px 0; padding-top: 20px; } #content #indexmain .sidebar #sidebar-top { width: 100%; height: 38px; background: url(../images/common/sidebar-top.png) no-repeat; } #content #indexmain .sidebar #sidebar-bottom { width: 100%; height: 12px; background: url(../images/common/sidebar-bottom.png) bottom no-repeat; } #content #indexmain .sidebar .wrap { width: 262px; padding: 10px 30px 0 35px; background: url(../images/common/sidebar-bg.png) repeat-y; } #content #indexmain .sidebar .wrap div, #content #main .wrap ul { padding-bottom: 20px; } #content #indexmain #left .post .post-contents h2 { width: 431px; padding-left: 68px; margin-bottom: -7px; overflow: hidden; } #content #indexmain #left .post .post-contents h2 a { font-weight: normal; color: #323232; font-size: 22px; } #content #indexmain #left .post .post-contents h2 a:hover { text-decoration: none; color: #4c4c4c; } #content #indexmain #left .post .post-contents p.info { width: 462px; padding: 0 0 22px 68px; font-size: 12px; } #content #indexmain #left .post .post-contents img.featured { display: block; width: 520px; height: 115px; color: #fff; border: solid 5px #fff; margin-bottom: 20px; } #content #indexmain #left .post .post-contents a.readmore { display: inline-block; padding-top: 5px; } #content #indexmain #left .post .post-contents ul.tags { position: absolute; height: 25px; bottom: 52px; right: 30px; margin: 0; padding: 0; color: #8b8b8b;} #content #indexmain #left .post .post-contents ul.tags li { float: left; margin: 0 0 0 0; padding: 0; text-indent: 0;} #content #indexmain #left .post .post-contents ul.tags li a { color: #8b8b8b; padding-right: 5px; } #content #indexmain #left .post .post-contents ul.tags li a:hover { text-decoration: none; color: #707070; } #content #indexmain #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 #indexmain #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 #indexmain #left .post .date-info * { display: block; width: 100%; } #content #indexmain #left .post .date-info big.month { padding: 13px 0 2px 0; font-size: 14px; } #content #indexmain #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 #indexmain #left .post .comments-info big { display: block; width: 50px; padding: 20px 0 0 0; margin-left: 13px; } #content #indexmain #left .post .comments-info a.comments-link { position: absolute; display: block; width: 66px; height: 42px; background: url(../images/blank.gif); text-indent: -9999px; } /* 6.2) INDEX Bottom W R A P * ------------------------------------------------------------ */ #content #indexbottom-items { width: 618px; margin: 0px auto 0 auto; padding-bottom: 40px; } #content #indexbottom-items .item { position: relative; float: left; width: 280px; margin: 0 20px 0 0; } #content #indexbottom-items .itemL { position: relative; float: left; width: 216px; margin: 0 30px 0 15px; } #content #indexbottom-items .itemL h2 { margin-left: 20px} #content #indexbottom-items .item .frame {width: 260px; height: 164px; background: url(../images/common/portfolio-img-bg.png) center no-repeat; } #content #indexbottom-items .item .frame img { position: absolute; top: 15px; left: 15px; width: 213px; height: 118px; } #content #indexbottom-items .wrap { width: 280px; margin: 0 auto; padding: 0 0 0 0; } #content #indexbottom-items .wrap h4 { margin-top: -3px; } #content #indexbottom-items .clear { height: 35px; } /* 6.2) INDEX S I D E B A R W R A P * ------------------------------------------------------------ */ #content #indexmain .sidebar .wrap .ads { width: 258px; margin: 0 auto; padding-bottom: 10px; } #content #indexmain .sidebar .wrap .ads img { position: relative; width: 125px; height: 125px; float: left; margin: 0 2px 4px 2px; } /* 6.3) INDEX S I D E B A R T Y P O G R A P H Y * ------------------------------------------------------------ */ #content #indexmain .sidebar { color: #6b6b6b; } #content #indexmain .sidebar a { color: #0077ce; font-size: 14px; font-weight: normal; } #content #indexmain .sidebar h1, #content #main .sidebar h2, #content #main .sidebar h3, #content #indexmain .sidebar h4, #content #main .sidebar h5, #content #main .sidebar h6 { color: #585858; padding-bottom: 0.7em; } /* 6.4) INDEX S I D E B A R U N O R D E R E D L I S T * ------------------------------------------------------------ */ #content #indexmain .sidebar .wrap ul { } #content #indexmain .sidebar .wrap ul li { text-indent: 10px; } #content #indexmain .sidebar .wrap ul li.title { padding: 0 0 0 0; text-indent: 0; } #content #indexmain .sidebar .wrap ul li h2 { } #content #indexmain .sidebar .wrap ul li a { } #content #indexmain .sidebar .wrap .widget ul { margin-top: -5px; } /* 6.5) INDEX R E C E N T C O M M E N T S * ------------------------------------------------------------ */ #content #indexmain .sidebar .wrap .widget ul#recentcomments { } #content #indexmain .sidebar .wrap .widget ul#recentcomments li { margin-left: 0; padding: 3px 0 6px 0; text-indent: 0; border-bottom: solid 1px #acacac; } #content #indexmain .sidebar .wrap .widget ul#recentcomments li a { font-size: 14px; } #content #indexmain .sidebar .wrap .widget ul#recentcomments li a.author { font-weight: normal; color: #6b6b6b; font-size: 13px; } #content #indexmain .sidebar .wrap .widget ul#recentcomments li a.author:hover { text-decoration: underline; } #content #indexmain .sidebar .wrap .widget ul#recentcomments li a:hover { text-decoration: none; } #content #indexmain .sidebar .wrap .widget ul#recentcomments li:hover { border-bottom-color: #6e8ba0; } /* 6.5) INDEX W E L C O M E I M G * ------------------------------------------------------------ */ #content #indexmain #left .post .post-contents img.featured { display: block; width: 520px; height: 200px; color: #fff; border: solid 5px #fff; margin-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: right; 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 .insidebar .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; padding-left: 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: 120px; 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 #growtitles { width: 840px; font-size: 22px; color: #323232; margin-left: 40px; } #content #growtitles p { margin-left: 11px; } #content #growtitles p a { color: #323232; } #content #growtitles span { color: #0077ce; font-weight: bold; } #content #portfolio-items { width: 885px; margin: 0px auto 0 auto; padding-bottom: 10px; } #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; } #content #calendar { width: 900px; margin: 0px auto 0 auto; padding-bottom: 10px; } #content #calendar .item { position: relative; float: left; width: 265px; margin: 0 15px 0 15px; } #content #calendar .item .frame {width: 265px; height: 164px; background: url(../images/common/portfolio-img-bg.png) center no-repeat; } #content #calendar .item .frame img { position: absolute; top: 15px; left: 15px; width: 235px; height: 134px; } #content #calendar .wrap { width: 245px; margin: 0 auto; padding: 0 0 0 0; } #content #calendar .wrap h4 { margin-top: -3px; } #content #calendar .clear { height: 35px; } #content #staffportfolio ul { margin: 90px 0px 0px; } #content #staffportfolio li { list-style: none; display: inline; margin: 4px; float:left; } .staff-img { clear: both; margin-bottom: 5px; } #staff { width:550px; float: left; margin-top: 10px; background: #FFFFFF; margin-bottom: 10px; padding: 40px; } #staffcol-left { width: 510px; float: left; margin-right: 20px; } /* ================================================================== * 9) G E N E R I C P A G E L A Y O U T * ================================================================== */ #content #main #left .generic-page { width: 618px; padding-bottom: 20px; float: left; left: 15px; padding-left: 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; } #portfolio ul { margin: 90px 0px 0px; } #portfolio li { list-style: none; display: inline; margin: 4px; float:left; } #video { background: url(../../images/sermonpcast/videoback.jpg) center repeat-y; z-index: 1; height: auto !important; height: 383px; min-height: 383px; padding-top: 8px; }