/* Theme Name: FRESH01 Version: 3.0 Description: Designed by FRESH01. Author: FRESH01 Author URI: http://fresh01.co.za */ /*------------------------------------------------------------------------------------------- INDEX: 1. SETUP --1.1 Defaults --1.2 Hyperlinks 2. BACKGROUND IMAGES 3. CONTAINERS 4. SECTIONS, NAMES AND GRAPHICS 5. QUICKLINKS 6. HEADER 7. NAVIGATION 8. POSTS --8.1 Typographic Elements --8.2 Images 9. PAGENAVI 10. COMMENTS --10.1 Comments --10.2 Comments Form 11. SEARCH 12. LINKS 13. FOOTER 14. GENERAL STYLES -------------------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------*/ /* 1. SETUP */ /*-------------------------------------------------------------------------------------------*/ /* 1.1 Defaults */ body { position: relative; font: 13px Helvetica,Arial,Sans-serif; line-height: 1.5; color: #2a2a2a; background: url(images/bodytile.jpg) repeat top left; height: 100%; } h1, h2, h3, h4, h5, h6 { margin: 0; color: #000; } h1 {font-size: 18px} h2 {font-size: 16px} h3 {font-size: 14px} h4 {font-size: 14px} h5 {font-size: 12px} h6 {font-size: 12px} p {margin: 0;} /* 1.2 Hyperlinks */ a:link, a:visited { text-decoration: none; color: #e00b0b; } a:hover {} h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited { text-decoration: none; color: #00aad4; } h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {text-decoration: underline;} /*-------------------------------------------------------------------------------------------*/ /* 2. BACKGROUND IMAGES */ /*-------------------------------------------------------------------------------------------*/ #bg #top { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 270px; background: url(images/header.png) no-repeat center top; } #bg #bottom { position: fixed; top: 270px; left: 0; z-index: 1; width: 100%; height: 100%; background: url(images/overlaytile.jpg) repeat left top; } #strings { position: relative; width: 778px; margin: 0 auto; } #strings .left, #strings .right { position: absolute; top: 125px; z-index: -2; width: 140px; } #strings .left { left: 0; background: url(images/stringleft.jpg) repeat-y left top; } #strings .right { right: 0; background: url(images/stringright.jpg) repeat-y left top; } /*-------------------------------------------------------------------------------------------*/ /* 3. CONTAINERS */ /*-------------------------------------------------------------------------------------------*/ #container { position: relative; height: 100%; } .toplevel { position: relative; z-index: 4;} #content { width: 460px; margin: 0 auto; } /*-------------------------------------------------------------------------------------------*/ /* 4. SECTIONS, NAMES AND GRAPHICS */ /*-------------------------------------------------------------------------------------------*/ .section { position: relative; } .name { display: none; position: fixed; top: 82px; width: 109px; padding: 45px 0; text-align: center; text-transform: uppercase; font-size: 18px; color: #fff; letter-spacing: 2px } .graphic { display: none; position: fixed; top: 79px; width: 100px; height: 110px; } .post .graphic { display: none; position: fixed; } .post .graphic.video { background: url(images/graphic_video.png) no-repeat center center; } .post .graphic.picture { top: 82px; background: url(images/graphic_picture.png) no-repeat center center; } .post .graphic.article { background: url(images/graphic_article.png) no-repeat center center; } .post .graphic.link { top: 83px; background: url(images/graphic_link.png) no-repeat center center; } .post .graphic.quote { background: url(images/graphic_quote.png) no-repeat center center; } .post .graphic.about { background: url(images/graphic_about.png) no-repeat center center; } .post .graphic.downloads { background: url(images/graphic_downloads.png) no-repeat center center; } .post .graphic.contact { background: url(images/graphic_contact.png) no-repeat center center; } .comment-container .graphic { top: 105px; width: 53px; height: 65px; } #respond .graphic { background: url(images/graphic_respond.png) no-repeat center center; } #search .graphic { background: url(images/graphic_search.png) no-repeat center center; } #links .graphic { background: url(images/graphic_links.png) no-repeat center center; } #footer .graphic { background: url(images/graphic_footer.png) no-repeat center center; } /*-------------------------------------------------------------------------------------------*/ /* 5. QUICKLINKS */ /*-------------------------------------------------------------------------------------------*/ #tip { display:none; position: fixed!important; top: 30px!important; padding: 3px 8px 1px 8px; font-size:11px; font-weight: bold; text-transform: uppercase; color:#fff; background: #000; } #quicklinks { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; } #quicklinks .inside { width: 468px; margin: 0 auto; padding: 9px 10px 6px 10px;} #quicklinks li { float: left; display: block; overflow: hidden; height: 0; width: 18px; margin: 0 10px; padding-top: 20px; cursor: pointer; background-repeat: no-repeat; background-position: 0 -20px; } #quicklinks li.top { background-image: url(images/ico-top.png); } #quicklinks li.bottom { background-image: url(images/ico-bottom.png); } #quicklinks li.search { background-image: url(images/ico-search.png); } #quicklinks li.links { background-image: url(images/ico-links.png); } #quicklinks li.post { background-image: url(images/ico-post.png); } #quicklinks li.comments { background-image: url(images/ico-comments.png); } #quicklinks li.prev { background-position: 0 -18px; background-image: url(images/ico-prev.png); } #quicklinks li.prev:hover { background-position: 0 2px; } #quicklinks li.next { background-position: 0 -18px; background-image: url(images/ico-next.png); } #quicklinks li.next:hover { background-position: 0 2px; } #quicklinks li.seperate { width: 1px; margin: 0 20px; background-position: 0 0!important; background-image: url(images/ico-seperate.png); } #quicklinks li:hover { background-position: 0 0; } #quicklinks li.home a { background-image: url(images/ico-home.png); } #quicklinks li.rss a { background-image: url(images/ico-rss.png); } #quicklinks li.home, #quicklinks li.rss { height: auto; width: auto; margin: 0; padding: 0; } #quicklinks li.home a, #quicklinks li.rss a { float: left; display: block; overflow: hidden; height: 0; width: 18px; margin: 0 10px; padding-top: 20px; cursor: pointer; background-repeat: no-repeat; background-position: 0 -20px; } #quicklinks li.home a:hover, #quicklinks li.rss a:hover { background-position: 0 0; } /*-------------------------------------------------------------------------------------------*/ /* 6. HEADER */ /*-------------------------------------------------------------------------------------------*/ #header { position: relative; width: 780px; margin: 0 auto 50px auto; text-align: center; } #header h1, #header h2 { display: none; } #header img { margin: 90px 0 0 0; } #header a.logo { display: block; } #header a.logo:active {padding-top: 2px; margin-bottom: -2px;} #header .xleft { position: absolute; z-index: -1; top: 105px; left: 38px; width: 63px; height: 64px; background: url(images/mainx.png) no-repeat center center; } #header .xright { position: absolute; z-index: -1; top: 105px; right: 38px; width: 63px; height: 64px; background: url(images/mainx.png) no-repeat center center; } /*-------------------------------------------------------------------------------------------*/ /* 7. NAVIGATION */ /*-------------------------------------------------------------------------------------------*/ #navigation { width: 460px; margin: 0 auto; text-align: center; border-top: 1px solid #d8d8d8; } #navigation ul { border-bottom: 1px solid #d8d8d8; margin: 0 0 1px 0;} #navigation ul li { display: inline; margin: 0 15px; } #navigation ul li a:link, #navigation ul li a:visited { padding: 0 7px 11px 7px; line-height: 40px; font-size: 14px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: #969696; } #navigation ul li a:hover, #navigation ul li.current_page_item a { color: #e00b0b; } /*-------------------------------------------------------------------------------------------*/ /* 8. POSTS */ /*-------------------------------------------------------------------------------------------*/ .archive_header { display: block; padding: 50px 0 0 0; text-align: center; text-transform: uppercase; font-size: 15px; } .page { padding-bottom: 50px; } .post .toplevel { padding: 50px 0 10px 0; } #post-5 .toplevel { padding-bottom: 30px; } .post .meta { display: block; margin: 0 0 10px 0; text-align:center;} .post .meta a { padding: 0 8px 0 0; line-height: 12px; font-size: 11px; text-transform: uppercase; color: #969696; } .post .meta a:hover { color: #000; } .post .meta .comments a { padding: 0 0 0 22px; background: url(images/redstar.png) no-repeat left top; } .post h2.title { letter-spacing: 2px; margin-bottom: 40px; font-size: 24px; text-transform: uppercase; text-align: center; } .post h2.title a:link, .post h2.title a:visited { color: #000; text-decoration: none!important;} .entry { line-height: 24px; } /* 8.1 Typographic Elements */ .entry a:link, .entry a:visited { font-weight: bold; } .entry a:hover { color: #000; } .entry h1 {} .entry h2 {} .entry h3 {} .entry h4 {} .entry h5 {} .entry h6 {} .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 { margin: 30px 0 10px 0; text-transform: uppercase; } .entry p { margin: 0 0 20px 0; } .entry blockquote { font-family: Georgia, Serif; padding: 0 0 0 30px; color: #666; font-size: 16px; font-style: italic; } .entry blockquote:before { display: block;margin: 0 0 -90px -20px;line-height: 100px; color: #d8d8d8; content: '"'; font-size: 100px; } .entry blockquote p {} .entry ul { margin: 0 0 15px 0; } .entry ul ul { margin: 0; } .entry ul li { list-style-position: inside; list-style-type: circle; line-height: 18px; } .entry ul ul li { list-style-type: disc; padding: 0 0 0 15px; } .entry ol { margin: 0 0 15px 0; } .entry ol ol { margin: 0; } .entry ol li { list-style-position: inside; list-style-type: upper-latin; line-height: 18px; } .entry ol li li { list-style-type: lower-latin; padding: 0 0 0 15px; } /* 8.2 Images */ .entry img { zoom:1; margin: 0 0 20px 0; border-bottom: 5px solid #e00b0b; } .entry a:hover img { border-bottom: 5px solid #000; } img.wp-smiley { padding: 0; border: none; } .entry .alignleft { float: left; width: auto; margin: 10px 15px 10px 0; } .entry .alignright { float: right; width: auto; margin: 10px 0 10px 15px; } .entry .aligncenter { text-align: center; } .entry .wp-caption { padding: 1px; text-align:center; background:#F8F8F4; border: dotted 1px #e6e6e6; } .entry .wp-caption img{ margin:0; padding:4px 0; background:none; border:0; } .entry .wp-caption-text { margin:0; padding:0; font-size:11px; text-align:center; } /*-------------------------------------------------------------------------------------------*/ /* 9. PAGENAVI */ /*-------------------------------------------------------------------------------------------*/ #pagenavi { margin: 0; } div.wp-pagenavi { margin: 1px 0; padding: 0 0 40px 19px; text-align: center; line-height: 38px; font-size: 15px; border-bottom: 1px solid #d8d8d8; } .wp-pagenavi .current { padding: 4px 7px 2px 7px; color: #e00b0b; font-weight: normal; } .wp-pagenavi a:link, .wp-pagenavi a:visited { padding: 0 6px; color: #969696; } .wp-pagenavi a:hover { color: #e00b0b; } /*-------------------------------------------------------------------------------------------*/ /* 10. COMMENTS */ /*-------------------------------------------------------------------------------------------*/ /* 10.1 Comments */ .comment-container .graphic img { border: 3px solid #fff; } #comments { padding-top: 30px; } #comments h3, #respond h3 { text-align: center; font-size: 18px; text-transform: uppercase; } #comments ol.commentlist { width: 100%; padding-top: 20px; background: url(images/stars.png) no-repeat bottom center; } #comments .comment, #comments .comment-container { width:100%; position: relative; } #comments .comment-head { margin: 0 0 15px 0; padding: 5px 10px 7px 10px; border-bottom: 1px solid #d8d8d8; } #comments .comment-head .comment-author { display: block; margin: 0 0 -5px 0; line-height: 30px; font-weight: bold; font-size: 16px; } #comments .comment-head .date, #comments .comment-head .edit, #comments .comment-head .perma { font-size: 11px; } #comments .comment-entry { padding: 0 10px; } #comments .comment-entry p { margin: 0 0 10px 0;} #comments ul.children{ margin:10px 0 0 0; padding:0 0 0 25px; background: url(images/commentreply.png) no-repeat 5px 13px; } #comments .reply { padding-bottom: 30px; } #comments .reply, #comments .cancel-comment-reply {font-weight: bold; text-transform: uppercase; font-size: 11px; } #comments .cancel-comment-reply { margin:0 0 10px 8px; text-align: center;} /* 10.2 Comments Form */ #respond .toplevel { padding: 60px 0; border-bottom: 1px solid #d8d8d8; } #respond h3.toplevel { padding: 60px 0 0 0; border-bottom: none; } #comments li #respond .toplevel { padding: 10px 0; } #comments li #respond .graphic { background: none; } #commentform {text-align: center;} #commentform input.txt, #commentform textarea, .CleanContact strong input, .CleanContact strong textarea { width: 90.5%; margin: 0 0 10px 0; padding: 9px 0 4px 10px; font-family: Helvetica, Arial, Sans-serif; font-size: 13px; color: #b2b2b2; background-color: #f3f3f3; border: 2px solid #dadada; } #commentform input.txt:focus, #commentform textarea:focus, .CleanContact strong input:focus, .CleanContact strong textarea:focus { background-color: #fff; border: 2px solid #e00b0b; color: #2a2a2a; } .CleanContact strong input, .CleanContact strong textarea { width: 113%!important; } #commentform #submit { overflow: hidden; width: 178px; height: 0px; margin: 10px 0 0 0; padding: 26px 0 0 0; border: none; background: url(images/submitcomment.png) no-repeat left top; cursor: pointer; } #commentform #submit:hover { background: url(images/submitcomment_hover.png) no-repeat left top; cursor: pointer; } #clean_contact_send { overflow: hidden; width: 178px; height: 0px; margin: 10px 0 0 0; padding: 26px 0 0 0; border: none; background: url(images/sendmessage.png) no-repeat center top; cursor: pointer; } #clean_contact_send:hover { background: url(images/sendmessage_hover.png) no-repeat center top; cursor: pointer; } #clean_contact_msg { text-transform: uppercase; font-style: italic; color: #e00b0b; font-weight: bold; font-size: 12px; } .CleanContact_msg.err { background-color: #e00b0b!important; color: #fff!important; text-align: center!important; } .CleanContact_msg.ok { background-color: #000!important; color: #fff!important; text-align: center!important; } /*-------------------------------------------------------------------------------------------*/ /* 11. SEARCH */ /*-------------------------------------------------------------------------------------------*/ #searchform { margin-top: 1px; padding: 30px 20px 30px 20px; border-top: 1px dotted #d8d8d8; border-bottom: 1px dotted #d8d8d8; } #searchform .field { float: left; width: 287px; margin: -1px 19px 0 0; padding: 12px 0 7px 10px; font-family: Helvetica, Arial, Sans-serif; font-size: 14px; color: #2a2a2a; background-color: #f3f3f3; border: 2px solid #dadada; } #searchform .field:focus { background-color: #fff; border: 2px solid #e00b0b; } #searchform .button { float: right; overflow: hidden; width: 100px; height: 0px; padding: 37px 0 0 0; border: none; background: url(images/submit_search.png) no-repeat left top; cursor: pointer; } #searchform .button:hover { background: url(images/submit_search_hover.png) no-repeat left top; cursor: pointer; } /*-------------------------------------------------------------------------------------------*/ /* 12. LINKS */ /*-------------------------------------------------------------------------------------------*/ #links .toplevel { margin: 1px 0 1px 0; padding: 30px 0; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } #links .list { float: left; width: 140px; margin: 0 20px 0 0; font-size: 12px; line-height: 24px; } #links .list h3 { margin: 0 0 15px 0; font-size: 14px; text-align: center; line-height: 10px; text-transform: uppercase; } #links .list.last { margin-right: 0; } #links .list ul { border-top: 2px solid #d8d8d8; } #links .list li { padding: 0 5px; text-align: right; border-bottom: 1px dotted #d8d8d8; list-style-type: none; } #links .list.last li { text-align: left; } #links .list.last li a { float: none; } #links .list a:link, #links .list a:visited { float: left; color: #2a2a2a; } #links .list a:hover { color: #e00b0b; } #links .tags ul li { text-align: left; padding: 0; border: none; } #links .tags ul li a:link, #links .tags ul li a:visited { display: block; float: none; padding: 0 5px; font-size: 12px!important; border-bottom: 1px dotted #d8d8d8; } /*-------------------------------------------------------------------------------------------*/ /* 13. FOOTER */ /*-------------------------------------------------------------------------------------------*/ #footer { font-size: 12px; font-weight: bold; text-transform: uppercase; } #footer .toplevel { border-top: 1px dotted #d8d8d8; border-bottom: 1px solid #d8d8d8; } #footer .toplevel .b { margin: 0 0 1px 0; padding: 15px 0; border-bottom: 1px dotted #d8d8d8; } #footer .toplevel .minilogo { float: left; width: 200px; margin: 0 0 0 10px; } #footer .toplevel .minilogo a { padding: 5px 17px 5px 0; background: url(images/minilogo.png) no-repeat right 3px; } #footer .toplevel .minilogo a span { color: #2a2a2a; } #footer .toplevel .copyright { float: right; width: 200px; margin: 0 10px 0 0; text-align: right; } /*-------------------------------------------------------------------------------------------*/ /* 14. GENERAL STYLES */ /*-------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }