@charset "utf-8"; /* Theme Name: Black Box Theme URI: http://inkhive.com/demo/black-box/ Version: 1.0 License: GNU GPL v2 License URI: license.txt Author: Rohit Tripathi Author URI: http://inkhive.com Description: Black Box is a Very Attractive Dark Theme With Ultra Stylish Features. Make Your Blog Speak Louder with this theme. Tags: fixed-width, black, custom-menu, sticky-post, microformats, post-formats * Built on the Whiteboard Framework * http://whiteboardframework.com */ /* Universal CSS */ @font-face { src: url(fonts/Airstrip.ttf); font-family: Airstrip; } @font-face { src: url(fonts/OpenSans.ttf); font-family: 'Open Sans'; } ::selection { background: #06F; /* Safari */ } ::-moz-selection { background: #06F; /* Firefox */ } a { color: #ccc; text-decoration: none; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; } a:hover { color: #06f; } body { } #main { background: url(images/bg.png); margin: -10px; color: #cacaca; font-family: Arial, Helvetica, sans-serif; } #top-bar { background: url(images/topbar.jpg); height: 60px; margin: -10px; border-bottom: #000 solid 5px; } #social-container { width: 960px; margin: auto; } #socialicons { float: right; } #socialicons img { margin-right: 10px; margin-top: 10px; height: 30px; outline: none; border: none; box-shadow: 0px 0px 3px #FFF; } #socialicons img:hover { box-shadow: 0px 0px 10px #06F; } #header { overflow: auto; } #title { display: inline-block; background: url(images/title.png); margin: auto; padding: 2px 35px; padding-bottom: 1px; margin-top: 25px; background: url(images/titlel.png) top left no-repeat, url(images/titler.png) right top no-repeat,url(images/title.png) repeat left top, #000; } #logo a { font-family: Arial, sans-serif; font-weight: 500; color: #BBB; text-shadow: 2px 0px 2px #000 ; font-size: 46px; text-decoration: none; text-transform: capitalize; } .main-container { width: 940px; margin: auto; padding: 10px; padding-bottom: 0px; } /* Navigation Menu */ #nav-primary { /* The Main Navigation Bar */ width: 960px; margin-top: 30px; background: url(images/menul.png) top left no-repeat, url(images/menur.png) right top no-repeat, url(images/menu.png) repeat; border: solid 3px #222; height: 28px; overflow: auto hidden; } #nav-primary .menu, #nav-primary .menu > ul { /* The Main List. First Level Menu */ padding-left: 0px; margin-top: -15px; } #nav-primary .menu > li { padding: 5px 20px; margin-top: -1px !important; } #nav-primary .menu > li:hover { margin-top: -1px !important; background: url(images/menuher.png) top left no-repeat, url(images/menuhel.png) top right no-repeat, url(images/menuh.png); } #nav-primary .menu > li, #nav-primary .menu > ul:first-child > li { display: inline; float: left; margin: 5px 0px; } #nav-primary .menu > li:first-child a, #nav-primary .menu > ul > li:first-child a { padding-left: 15px; } .menu-item, .page_item { list-style-type: none; } .menu-item a, .page_item a { color: #222; font-family: Airstrip, Calibri, Arial, sans-serif; font-weight: 300; text-transform: uppercase; text-decoration: none; text-shadow: 1px 0px 2px #CCC; } .sub-menu, .menu ul ul, .menu ul ul ul { position: absolute; margin-left: -5px; padding: 10px; padding-left: 0px; text-transform: Capitalize; border-radius: 3px; visibility: hidden; z-index: 999999; } .sub-menu .sub-menu, .menu ul ul ul { margin-left: 17px; position: absolute; top: 33%; z-index: 999999; } .sub-menu .menu-item, .menu ul ul .page_item { padding: 0px 5px; } .sub-menu a, .menu ul ul a { display: block; padding: 5px 10px; background: #c0c; margin-bottom: 5px; background: url(images/dropdownl.png) top left no-repeat, url(images/dropdownr.png) top right no-repeat, url(images/dropdownd.png) repeat; } .sub-menu a:hover, .menu ul ul a:hover { color: #000; text-shadow: #06F 1px 0px 0px; } /*Extreme TOp Nav*/ #topnav { display: inline-block; } #topnav ul { padding-left: 0; } #topnav submenu { display: none !important; } #topnav a { text-decoration: none; text-shadow: none; color: #bbb !important; font-family: Helvetica, Arial, sans-serif !important; text-transform: capitalize; font-size: 14px; margin-right: 12px; } #topnav a:hover { text-decoration: underline; } #topnav ul li { display: inline; } /* Navigations Menu End */ .container { width: 960px; margin: auto; clear: both; } #content { width: 650px; float: left; padding-right: 9px; padding-bottom: 0px; } #content > h1 { /*Edits Heading for Category, tag, search pages */ font-weight: 500; font-size: 22px; background: #313131; border-radius: 3px; padding: 4px; border: dotted 1px #999; } .post-single { clear: both; font-family: Arial, Helvetica, sans-serif; } .post-single > h2 a, article > h2 { font-family: Helvetica, Arial, sans-serif; font-weight: 500; font-size: 26px; color: #000; padding: 10px; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; display: block; margin-top: 35px; background: url(images/ptitler.png) top right repeat-y, url(images/ptitlel.png) top left repeat-y, url(images/ptitlet.png) bottom left repeat-x, url(images/ptitlet.png) top left repeat-x, #ddd; } article h2 { color: #CCC; } article > h2 { color: #333; } .post-single > h2 a:hover { text-shadow: 1px 0px 1px #06f; } .post-single a, article a { color: #AAA; border-bottom: dotted 1px #aaa; font-weight: lighter; font-family: Helvetica, Arial, sans-serif; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } .post-single a:hover, article a:hover { color: #06F; } .read-more, .top-meta a, .bottom-meta a{ border-bottom: none !important; } .postsum { padding: 10px; width: 92%; margin: -20px auto; border-top: none; background: url(images/postboxborderr.png) right top repeat-y, url(images/postboxborderl.png) left top repeat-y, url(images/postsumborder.png) left bottom repeat-x, #313131; margin-bottom: 30px; overflow: auto; } .featured-thumbnail { float: left; margin: 5px 15px 15px 5px; border: solid 3px #eee; box-shadow: 3px 3px 4px #000; width: 150px; height: 150px; } .post-meta { font-family: Arial, Helvetica, sans-serif; color: #CCC; font-size: 12px; } .top-meta { margin-top: 5px; padding-right: 10px; } .sep { margin: 0px 7px; } .bottom-meta { display: block; clear: both; margin-bottom: 30px; } .post-content { font-family: Helvetica, Arial, sans-serif; font-weight: 300; font-size: 15px; color: #CACACA; } article .post-content { font-family: Helvetica, Arial, sans-serif; font-weight: 100; color: #CCC; font-size: 16px; } article .post-content img { border: solid 5px #eee; } .fullpost { background: url(images/postboxborderr.png) right top repeat-y, url(images/postboxborderl.png) left top repeat-y, url(images/postsumborder.png) left bottom repeat-x, #313131; overflow: auto; padding: 15px; width: 90%; margin: -21px auto 20px; } #post-author { border: solid 2px #000; display: block; width: 92%; color: #fff; background: #666; padding: 10px; margin-left: 2%; margin-right: 4% margin-bottom: 20px; font-family: Helvetica, sans-serif; font-weight: 500; } #post-author .gravatar img { display: inline-block; margin-right: 15px; border: solid 4px #eee; } .gravatar strong { display: block; margin-top: 5px; width: 400px; font-size: 20px; font-weight: 500; } #sidebar { padding: 10px; } #sidebar .widget-area > ul { padding-left: 0px; } #sidebar .widget-area > ul ul { padding-left: 22px; } #sidebar .widget-area { } .sidebar_content { background: url(images/postboxborderr.png) right top repeat-y, url(images/postboxborderl.png) left top repeat-y, url(images/postsumborder.png) left bottom repeat-x, #313131; width: 90%; margin: -18px auto 20px; padding: 10px; } .widget-sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-weight: 300; color: #000; background: #ddd; padding: 8px 4px; border: solid 3px #666; } #footer { clear: both; background: url(images/footert.png) top left repeat-x, url(images/footerb.png) bottom left repeat-x, #2f2f2f; overflow: auto; margin: 30px -10px -10px -10px; padding-top: 15px; } #footer container { width: 960px; color: #111; } #footer a { color: #CACACA; font-size: 14px; font-family: Arial, Helvetica, sans-serif; transition: color 0.3s ease; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; } #footer a:hover { color: #06f; } .widget-footer h4 { font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 600; color: #CCC; text-shadow: 1px 0px 0px #000; } .widget-footer h4 a { color: #CCC !important; font-size: 20px !important; font-family: Calibri, Arial, Helvetica, sans-serif; } .widget-footer { font-family: Arial, Helvetica, sans-serif; color: #CCC; margin-bottom: -40px !important; } #footer-left, #footer-center, #footer-right { float: left; width: 312px; margin-right: 10px; } #footer-left, #footer-center { border-right: #999 solid 1px; } #footer-right { margin-right: 0px; } #footer-left { padding-left: 0px !important; } .widget-footer { padding: 15px; padding-left: 5px; width: 285px; } .widget-footer .page_item a{ text-transform: Capitalize; } .widget-footer ul ul { list-style: disc !important; } .widget-footer ul.children { } .widget-footer .page_item, #sidebar .page_item { list-style: disc; } .widget-footer .page_item .page_item , #sidebar .page_item .page_item{ list-style: circle; } a.rsswidget { color: black; } .widget-footer ul { margin-left: -20px; } #footer li a { text-shadow: none !important; } #sidebar { width: 260px; float: right; } #bottom-links { clear: both; width: 960px; padding: 10px; margin: auto; display: block; padding-top: 30px !important; color: #ccc; } #bottom-links a { color: #CCC; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } #bottom-links a:hover { color: #06f; } #copyright { float: none; text-align: center; overflow: auto; background: #666; margin: 10px -10px -10px -10px; color: #CCC; font-family: TimeBurner, Arial, Helvetica, sans-serif; font-size: 13px; } #copyright a { color: #fff; transition: color 0.5s ease; -webkit-transition: color 0.5s ease; -moz-transition: color 0.5s ease; -ms-transition: color 0.5s ease; -o-transition: color 0.5s ease; } #copyright a:hover { color: #06f; } /* Default Wordpress CSS --- */ .sticky { } .bypostauthor { } .none { /* this class is used to hid the skip to content link at the beginning of the document for accessibility */ display: none; } .clear { clear: both; } .left { float: left; } .right { float: right; } .alignleft, img.alignleft { display: inline; float: left; margin-right: 10px; margin-bottom: 5px; } .alignright, img.alignright { display: inline; float: right; margin-left: 10px; margin-bottom: 5px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; margin-bottom: 5px; } .wp-caption { text-align: center; margin-bottom: 10pxem; } .wp-caption img { border: 0 none; margin: 0; padding: 0; } .wp-caption p.wp-caption-text { margin: 0; } .wp-smiley { max-height: 1em; margin:0 !important; } .gallery dl { margin: 0; } .gallery-caption { margin:-1.5em 0 0 0; } /* Always remember to compress your live stylesheet and keep an uncompressed backup */ #comments { background: #222; border-radius: 5px; padding: 10px; padding-right: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: 500; margin-bottom: 30px; } #comments-title { color: #eee; font-size: 14px; font-family: Arial, Helvetica, sans-serif; font-weight: 500; line-height: 2.6em; padding: 0 0 2.6em; text-transform: uppercase; } .commentlist { list-style: none; } .comment-meta .gravatar img { float: left; background: url(images/cbpt.png) top left repeat-x, url(images/cbpb.png) bottom left repeat-x, url(images/cbpl.png) top left repeat-y, url(images/cbpr.png) top right repeat-y; padding: 3px; margin-right: 10px; } .comment-meta { font-size: 13px; } .comment-content { background: url(images/comments.png) top left repeat-x; margin: 15px -12px; padding: 10px; padding-right: 20px; margin-bottom: 5px; width: 98.5%; } .comment{ overflow: hidden; margin-bottom: 20px; border-left: solid 3px #000; background: #313131; padding: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; display: block; overflow: auto; } .comment .comment { margin-bottom: -5px; margin-top: 25px; background-color: #444; } .comment .comment .comment { background: #313131; } .comment .comment .comment .comment { background: #444; } .comment .comment .comment .comment .comment { background: #313131; } .reply { float: right; } .reply a { font-size: 12px; } /* Comment Form */ #respond { background: #444; border: 1px solid #d3d3d3; -moz-border-radius: 3px; border-radius: 3px; margin: 0 auto 1.625em; padding: 1.625em; position: relative; width: 68.9%; } #respond input[type="text"], #respond textarea { background: #ccc; border: 4px solid #222; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95); -moz-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95); box-shadow: inset 0 1px 3px rgba(204,204,204,0.95); position: relative; padding: 10px; text-indent: 80px; } #respond .comment-form-author, #respond .comment-form-email, #respond .comment-form-url, #respond .comment-form-comment { position: relative; } #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-comment label { background: #222; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204,0.8); color: #eee; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; } #respond input[type="text"]:focus, #respond textarea:focus { text-indent: 0; z-index: 1; } #respond textarea { resize: vertical; width: 95%; } #respond .comment-form-author .required, #respond .comment-form-email .required { color: #bd3500; font-size: 22px; font-weight: bold; left: 75%; position: absolute; top: 45px; z-index: 1; } #respond .comment-notes, #respond .logged-in-as { font-size: 13px; } #respond p { margin: 10px 0; } #respond .form-submit { float: right; margin: -20px 0 10px; } #respond input#submit { background: #222; border: none; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3); box-shadow: 0px 1px 2px rgba(0,0,0,0.3); color: #eee; cursor: pointer; font-size: 15px; margin: 20px 0; padding: 5px 42px 5px 22px; position: relative; left: 30px; text-shadow: 0 -1px 0 rgba(0,0,0,0.3); } #respond input#submit:active { background: #1982d1; color: #bfddf3; } #respond #cancel-comment-reply-link { color: #666; margin-left: 10px; text-decoration: none; } #respond .logged-in-as a:hover, #respond #cancel-comment-reply-link:hover { text-decoration: underline; } .commentlist #respond { margin: 1.625em 0 0; width: auto; } #reply-title { color: #EEE; font-size: 24px; font-weight: bold; line-height: 30px; } #cancel-comment-reply-link { color: #888; display: block; font-size: 10px; font-weight: normal; line-height: 2.2em; letter-spacing: 0.05em; position: absolute; right: 1.625em; text-decoration: none; text-transform: uppercase; top: 1.1em; } #cancel-comment-reply-link:focus, #cancel-comment-reply-link:active, #cancel-comment-reply-link:hover { color: #ff4b33; } #respond label { line-height: 2.2em; } #respond input[type=text] { display: block; height: 24px; width: 75%; } #respond p { font-size: 12px; } p.comment-form-comment { margin: 0; } .form-allowed-tags { display: none; } /*-----Search Bar------*/ #searchform { display: block; margin-left: 0px; margin-top: 5px; } #s { background: url(images/searchinput.png); outline: none; border: none; padding-left: 10px; height: 49px; font-size: 14px; width: 189px; } #searchsubmit { position: relative; top: 20px; left: -10px; } /*-------------------------------- [ Page Navigation ] --------------------------------*/ .wp-pagenavi { clear:both; margin: 10px 0 10px 0; padding-top:5px; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 100; } .wp-pagenavi span.pages { border:none; margin-right:5px; margin-bottom: 30px; padding:5px; background:#313131; color: #666; border:1px solid #000; text-decoration:none; border-radius: 3px; /* Firefox 4; browsers with CSS3 support */ -moz-border-radius: 3px; /* Firefox up to version 3.6 */ -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */ } .wp-pagenavi a.page, .wp-pagenavi .page-numbers, .wp-pagenavi span.extend, .wp-pagenavi a.first, .wp-pagenavi a.nextpostslink, .wp-pagenavi a.previouspostslink, .wp-pagenavi a.last { border:none; margin-right:0px; padding:5px 10px; background:#313131; color:#444; border:1px solid #000; text-decoration:none; font-weight:200; } .wp-pagenavi span.current, .wp-pagenavi a:hover { border:none; margin-right:0; padding:5px 10px; background:#BBB; color:black; text-decoration:none; border-radius: 3px; /* Firefox 4; browsers with CSS3 support */ -moz-border-radius: 3px; /* Firefox up to version 3.6 */ -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */ } .navigation { padding-top:10px; } .navigation a { padding:10px; background:#454545; text-decoration:none; color:white; border-radius: 3px; /* Firefox 4; browsers with CSS3 support */ -moz-border-radius: 3px; /* Firefox up to version 3.6 */ -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */ } .navigation a:hover { padding:10px; background:#093f6c; text-decoration:none; color:white; border-radius: 3px; /* Firefox 4; browsers with CSS3 support */ -moz-border-radius: 3px; /* Firefox up to version 3.6 */ -webkit-border-radius: 3px; /* Safari, Chrome (before WebKit version 533) */ } .pagenos { display: inline; margin-top: 20px; text-align: center; } /*---Author Page---*/ .author { background: #313131; padding: 10px; border-radius: 5px; } .author > h1 { font-family: Helvetica, Arial, Sans-serif; font-weight: bold; } #recent-author-comments { background: #333; padding: 10px; } #topad { width: 728px; margin: auto; border: solid 3px #000; height: 90px; } @media screen and (max-width:680px) { #nav-primary { display: none; } body { width: 400px; margin: auto; border: none; padding: 10px; border: solid 3px #999; overflow-x: hidden; overflow-y: scroll; border-top: #FC0 solid 5px; } #header { overflow: hidden; margin-top: -10px; } #logo { margin-left: 20px; } #tagline { margin-left: 20px; } #content { width: 400px; margin: auto; border: none; } #sidebar .widget-area { border: none; } #sidebar { width: 400px; clear: both; float:left; border: none; } #top-bar { display: none; } #main { width: 400px; } #footer { width: 420px; overflow: hidden; } .main-container { border: none; } #footer-right, #footer-left, #footer-center { clear: both; float: left; border: none; } #copyright { width: 420px; } }