/* Theme Name: blackzebra Theme URI: http://www.wpthemes.mahjonk.com/blackzebra-themes.html Description: blackzebra is a dark light theme with a mix of black dark and white light elegant colors, this theme has a four column sidebar with lots of features and you can configure in BlackZebra Options, such as custom background, custom favicon, social media ready, translation ready, and compatible for wordpress 3.x.x Version: 1.0.2 Author: Hendra KH Author URI: http://www.wpthemes.mahjonk.com/ License: GNU General Public License V3 License URI: http://www.gnu.org/licenses/quick-guide-gplv3.html Tags: blue, white, black, four-columns, fixed-width, custom-background, theme-options, threaded-comments, translation-ready */ /********************************* * General *********************************/ * {margin: 0;padding: 0;} body { background: #4d4b4c; color: #151515; font-family: Georgia, Verdana, Helvetica; font-size: 72.5%; line-height: 1.4; } a { color: #040410; text-decoration: none; } a img { border: none; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family:'Oswald',sans-serif; font-weight:normal; text-transform:uppercase; padding: 5px 0; clear: both; } h1 {font-size: 26px;} h2 {font-size: 23px;} h3 {font-size: 20px;} h4 {font-size: 16px;} h5 {font-size: 14px;} h6 {font-size: 13px;} abbr, acronym, span.abbr { cursor: help; border-bottom: 1px dotted #000; } blockquote { display: block; border-left: 5px solid #000; padding-left: 10px; color: #808080; } pre { max-width: 90%; font-size: 1.2em; padding: 10px; margin: 0 0 20px; background: #fff; } code { max-width: 90%; font-size: 1.2em; padding: 10px; text-shadow: 0 1px #000; } address { margin: 0 0 20px; } /********************************* * Layout *********************************/ #header_wrap { width: auto; height: auto; background: #000; } #header { width: 900px; height: 200px; background: #000; margin-left: auto; margin-right: auto; } #header h1 a { font-size: 24px; font-weight: bold; color: #fff; text-shadow: 0 1px #000; } #header h1 a:hover{ text-shadow: 0 0 1px #000; } #header_title { float: left; width: 930px; padding: 0 0 50px 0; } #header-desc { color: #fff; } #content_wrap { width: 930px; margin-top: 30px; margin-left: auto; margin-right: auto; } #content { background: #666; font-size: 1.1em; float: left; width: 880px; padding: 0 20px 10px; } #sidebar { float: left; width: 890px; padding: 10px 15px; background: #666; } #footer { clear: left; height: auto; border-top: 1px solid #000; font-size: 12px; padding: 20px 0; margin-top: 30px; text-align: center; color: #fff; background: #000 url(images/footer.jpg) no-repeat center; } #footer a { color: #fff; text-decoration: none; } #footer a:hover { color: #ff0000; text-decoration: none; } #infofooter { text-shadow: 0 0 2px #000; } /********************************* * Menu navigation *********************************/ #menu { width: auto; height: auto; background: #000; margin: 0 auto; } #nav { width: 930px; height: auto; margin: 0; padding: 0; list-style-type: none; list-style-position: outside; line-height:1.5em; background: #000; } #nav a { display: block; margin-top: 0px; padding: 10px 15px; text-decoration: none; color: #fff; } #nav a:hover { background: #fff; color: #000; border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); } #nav a:hover, #nav li.current_page_item a:hover { background: #fff; color: #000; } #nav li { list-style-type: none; list-style-position: outside; float: left; position: relative; } #nav ul { position: absolute; display: none; width: 120px; top: 30px; } #nav li ul a, #nav li.current_page_item ul a { width: 120px; height: auto; float: left; background-color: #cbcbcb; color: #000; } #nav ul ul { top: auto; } #nav li ul ul { left: 12em; margin: 0 0 0 10px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display: none; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display: block; } #nav li.current_page_item a { background: #333; color: #fff; } /* Page navigation ------------------------------------------------------- */ #page-nav { margin-bottom:10px } #page-nav ul { margin:0; list-style-type:none; padding: 10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd } #page-nav li { display:inline } #page-nav li a { padding:5px 10px; background:#fff; } #page-nav li .dots { padding:5px 10px; } #page-nav li a:hover, #page-nav li .current { padding:5px 10px; background:#73A0C5; color:#fff; text-shadow: none; } .single #page-nav { overflow:hidden; padding: 10px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; } .single #page-nav span { width:200px; line-height:1.5em } .single #page-nav .next-post { float:left } .single #page-nav .prev-post { float:right; text-align:right } #post-pages { margin:20px 0 0; padding: 10px 0; border-top:1px solid #ddd; text-align:center } #post-pages a { margin:0 5px } #attachment-nav a{ display:inline-block; margin:0 2px 2px 0 } .navigation { margin: 20px 10px 10px; font-weight: bold; } /********************************* * Wordpress Reserved Functions *********************************/ .alignleft, img.alignleft { float: left; margin: 5px 10px 5px 0; } .alignright, img.alignright { float: right; margin: 5px 0 5px 10px; } .aligncenter, div.aligncenter, img.aligncenter { text-align: center; display: block; margin: 10px auto; } a img.alignright { float: right; margin: 0 0 1em 1em } a img.alignleft { float: left; margin: 0 1em 1em 0 } a img.aligncenter { text-align: center; display: block; margin: 0 auto; } .wp-caption { background: #F0F0F0; border: 1px solid #D2D0C4; color: #333; } .wp-caption img { width: 95%; border: 0 none; margin: 5px auto; padding: 5px; } .wp-caption-dd { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } .wp-caption-text { text-align: center; } img.wp-smiley { border: none; background: none; padding: 0; } #wp-calendar { text-align: center; margin: 0 auto; } .gallery { margin: 0 auto 18px; } .gallery img { border: 2px solid #cfcfcf; } .gallery .gallery-caption { color: #888; font-size: 12px; margin: 0 0 12px; } .gallery img { border: 10px solid #f1f1f1; } /********************************* * Content *********************************/ .entrytitle h3 { font-size: 1.5em; } .entrytitle_wrap, .entrybody, .postinfo { padding: 0; } .entrytitle_wrap { padding-bottom: 1.1em; } .entrytitle { text-align: left; text-shadow: 0 0 2px #fff; } .entrytitle h2 a { text-decoration: none; } .entrytitle h2 a:hover { text-decoration: none; text-shadow: 0 2px #000; } .entrytitle h1, .entrytitle h2 { font-size: 1.5em; text-align: left; font-weight: 600; } .entrydate { color: #333; font-size: 10px; } /********************************* * Entry *********************************/ .entry { padding: 15px 40px; text-align: justify; border-bottom: 1px dashed #CFCFCF; } .entry a { color: #020307; text-decoration: underline; } .entry a:hover { color: #fff; } .entry p { padding: 0 0 20px; } .entry h3 { font-size: 1.5em; padding-bottom: .3em; } .entry img { max-width: 800px; background: #151515; border: 1px solid #151515; } .entrybody { padding-bottom: 6px; } .entrybody a { color: #333; text-decoration: underline; } .entrybody ol { padding: 10px 0 10px 30px; } .entrybody ol li{ padding: 3px 0; } .entrybody ul { padding: 10px 0 10px 30px; } .entrybody ul li{ padding: 3px 0; } .entry code { font-size: 1.1em; text-align: left; padding: .2em; } .entrymeta { padding-top: .3em; margin-bottom: 15px; color: #000; clear: both; font-size: 11px; } .imeta { color: #524406; } .postinfo { margin-top: 3px; } .info { margin-left: 10px; } .postedby { color: #000; } .postedby:hover{ color: #fff; } .categorylink { background-position: 0 -24px; background: url(images/folder.gif) no-repeat; padding: 0 0 0 20px; } .categorylink a { text-decoration: none; } .commentlink { background-position: 0 -52px; background: url(images/comment.gif) no-repeat; padding: 0 0 0 20px; } .commentlink a { text-decoration: none; } /********************************* * Sidebar *********************************/ #sidebar { font-size: 1.1em; } #sidebar ul { list-style-type: none; margin: 0 0 1.2em 0; padding: 0 0 0 30px; } #sidebar ul li, #sidebar ul li a { padding: .4em .2em .4em 0; color: #040410; list-style: disc; } #sidebar ul li { border-bottom: 1px dashed #CFCFCF; } #sidebar li a:hover { color: #fff; } #sidebar ul li ul.children { margin: 20px; } #sidebar ul li ul.children li.cat-item { background: url('images/list.gif') 0 11px no-repeat; padding: .2em .2em .2em 0; padding-left: 11px; margin-top: -2px; border: none; } #sidebar h4 { background: url('images/icon.png') no-repeat #000; height: 25px; padding: 10px 2px 4px 40px; color: #fff; font-size: 1em; text-transform: uppercase; margin-top: 1em; } #sidebar h4:hover { background: url('images/icon_hover.png') no-repeat #000; height: 25px; padding: 10px 2px 4px 40px; color: #fff; font-size: 1em; text-transform: uppercase; margin-top: 1em; } #sidebar img { max-width: 250px; overflow: hidden; } .part { width: 210px; padding: 0 10px; float: left; display: inline; } .part h4 { border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); } .part h4:hover { border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6);; } .part_search { width: 160px; padding: 0 10px; float: left; display: inline; } /********************************* * Comments *********************************/ .commentsblock, .contactform { font-size: 1em; clear: both; margin: 20px 40px 0; } .children { padding-top: 8px; list-style-position: outside; } .commentsblock textarea, .contactform textarea { width: 44em; } .commentsblock input, .commentsblock textarea, .contactform input, .contactform textarea { border: 1px solid #d1d1d1; } .commentlist .bypostauthor { padding-left: 20px; } .commentlist ul { padding-left: 20px; } .commentlist li{ padding: 5px 10px; border: 1px solid #D2D0C4; margin: 5px; background: #ccc; border-color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); } #commentform p { padding: 5px 0; } #commentform textarea, .commentlist textarea { width: 95%; } .alt { background: #F0F0F0; } .even{ background: #E5E5E5; } .commentlist li .avatar { float: right; padding: 2px; margin: 0 0 10px 0; } .commentlist cite, .commentlist cite a { font-weight: bold; font-style: normal; font-size: 1.1em; } .commentlist p { font-weight: normal; line-height: 1.5em; text-transform: none; } .commentmetadata { font-weight: normal; font-size: 11px; } .commentmetadata a { color: #6C6C6C; } .commentsblock textarea:focus, .contactform textarea:focus, .commentsblock textarea:focus, .commentsblock input:focus, .contactform textarea:focus, .contactform input:focus { background: #F0F0F0; border: 1px solid #666; } .comment-content p { margin-bottom: 20px; } .comment-content p a { text-decoration: underline; } .comment-block { margin: 10px; } #submit { margin-top: 15px; background: #F0F0F0; } /********************************* * Table *********************************/ table { margin: 0 0 1px 1px; border-collapse: collapse; border: 1px solid #151515; } td { border: 1px solid #151515; padding: 5px; } td a { text-decoration: underline; } th { background: #151515; text-align: center; border: 1px solid #151515; padding: 5px; color: #fff; } dt { font-weight: bold; padding: 5px 0; } ol { padding-left: 20px; } ul, ol { margin: 3px 0; } .clear { clear: both; } .hide { display: none; } /********************************* * Comment Form *********************************/ #author,#email { padding: 5px; margin: 0 14px; background: #666; border-color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); } #author:focus,#email:focus { border-style: solid; background: #fff; border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); } #url { padding: 5px; margin: 0 10px; background: #666; border-color: rgba(0, 0, 0, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); } #url:focus { border-style: solid; background: #fff; border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); } #comment,#submit { padding: 10px 5px; margin: 5px 0 0 0; } #comment:focus { border-style: solid; border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); } #submit:focus { border-color: rgba(204, 204, 204, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(204, 204, 204, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(204, 204, 204, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(204, 204, 204, 0.6); } #respond { margin-top: 30px; } #respond:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; margin-top: 50px; } .reply { font-size: 20px; text-transform: uppercase; } .sticky {} /********************************* * Search Form *********************************/ #searchform { margin-top: 10px; padding-top: 3px; } input#s { width: 150px; padding: 10px 5px; background: #666 url(images/search.gif) 5px 10px no-repeat; border: 1px solid #000; color: #000; font-size: 100%; } input#s:hover { border: 1px solid #020307; } input#s:focus { background: #fff url(images/search-gray.gif) 5px 10px no-repeat; color: #000; border: 1px solid #020307; } .search { -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.6); } .search:focus { border-style: solid; border-color: rgba(255, 255, 255, 0.8); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(255, 255, 255, 0.6); } .search_title { margin: 20px 20px 10px 40px; font-size: 26px; font-family: 'Open Sans',sans-serif; text-shadow:0 0 2px #fff; } .search_title:hover { color: #fff; text-shadow: 0 2px #000; } h2.search_entrybody{ margin: 20px 20px 10px 40px; font-size: 26px; font-family: 'Open Sans',sans-serif; } .search_entrybody { margin: 20px 20px 10px 40px; font-size: 20px; font-family: 'Open Sans',sans-serif; } /********************************* * Footer Menu navigation *********************************/ .footer-menu { width: 90%; height: 50px; margin: 0 auto; padding: 0 10px; } .footer-nav { margin: 5px 0; line-height: 20px; } .footer-nav li{ float: left; list-style: none; padding: 0 5px; } /* SCROLL TO TOP ------------------------------------------------------- */ #toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:-999px; background:url(images/ui.totop.png) no-repeat left top; } #toTopHover { background:url(images/ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); } #toTop:active, #toTop:focus { outline:none; } /* Social button ------------------------------------------------------------- */ #social-button { margin:0; padding:0; list-style-type:none; overflow:hidden; } #social-button li { border-bottom:none; list-style-type:none; height: 32px; display: inline-block; } #social-button li a{ padding:0; border-bottom:none; list-style-type:none; } #button-twitter, #button-fb, #button-gplus, #button-flickr, #button-linkedin, #button-pinterest, #button-dribbble, #button-github, #button-vimeo, #button-forrst, #button-zerply { width:32px; height:32px; margin:0 5px 5px 0; float:left; } #button-twitter { background:url(images/icons/twitter.png) no-repeat; } #button-fb { background:url(images/icons/facebook.png) no-repeat; } #button-gplus { background:url(images/icons/g+.png) no-repeat; } #button-flickr { background:url(images/icons/flickr.png) no-repeat; } #button-linkedin { background:url(images/icons/linkedin.png) no-repeat; } #button-pinterest { background:url(images/icons/pinterest.png) no-repeat; } #button-dribbble { background:url(images/icons/dribbble.png) no-repeat; } #button-github { background:url(images/icons/github.png) no-repeat; } #button-vimeo { background:url(images/icons/vimeo.png) no-repeat; } #button-forrst { background:url(images/icons/forrst.png) no-repeat; } #button-zerply { background:url(images/icons/zerply.png) no-repeat; } .analytic_code{ display: none; } /* ========================================================== Usefull CSS helper ============================================================= */ .ir { display: inline-block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; } .ir br { display: none; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }