/* Theme Name: Boxed Zebra Theme URI: http://hannaranden.com/boxed-zebra/ Description: This is a simple and clean blog theme - make it your own with a custom header image and custom menus. Author: Hanna Randén Author URI: http://hannaranden.com Version: 1.1 License: GNU General Public License License URI: license.txt Tags: black, white, custom-header, custom-menu, two-columns, right-sidebar, theme-options, threaded-comments, translation-ready, fixed-width */ /* = Basics -------------------------------------------------------------- */ * { margin: 0; padding: 0; } p { margin-bottom: 10px; } a { color: #444; } embed { margin: 5px 0; } blockquote { font-size: 16px; font-style: italic; } .wp-caption { } .wp-caption-text { font-size: 12px; font-style: italic; } .sticky { } .gallery-caption { font-style: italic; } .bypostauthor { } /* = Images -------------------------------------------------------------- */ img { border: none; padding: 5px 5px 5px 0; } img a:focus { border: none; } .alignleft, img.alignleft { display: inline; float: left; margin-right: 5px; } .alignright, img.alignright { display: inline; float: right; margin-left: 10px; } .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; } .gallery img { border: none !important; padding: 0; } img.wp-smiley { margin: 0; padding: 0; } /* = Lists -------------------------------------------------------------- */ ul { list-style: disc; } li li li { border: none; margin-bottom: 0; } /* = Body -------------------------------------------------------------- */ body { font-family: georgia; font-size: 13px; line-height: 1.2; } #wrapper { margin: 0 auto; width: 965px; } body.page #comments-off { display: none; } /* = Headings -------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { clear: both; margin-bottom: 5px; } h1 { font-size: 30px; font-style: italic; font-weight: normal; text-transform: uppercase; } h1.blogtitle { margin-bottom: 5px; text-align: center; width: 100%; } h1.blogtitle a { color: #000; text-decoration: none; } h2 { font-size: 25px; font-style: italic; font-weight: lighter; text-transform: uppercase; } h3 { font-size: 20px; font-style: italic; font-weight: lighter; text-transform: uppercase; } h3.pagetitle { border-bottom: #ccc solid 1px; margin-bottom: 20px; padding-bottom: 10px; text-align: center; width: 100%; } h4, h5, h6 { font-size: 18px; font-style: italic; font-weight: lighter; text-transform: uppercase; } /* = Header -------------------------------------------------------------- */ #headerwrap { float: left; margin-bottom: 40px; width: 965px; } /* Top level */ #top-menu { float: left; font-family: arial; margin-top: 10px; width: 100%; } #top-menu ul { list-style: none; } #top-menu li { float: right; font-size: 10px; margin: 0 0 5px 15px; position: relative; text-transform: uppercase; } #top-menu li a { color: #000; display: block; text-decoration: underline; } #top-menu li a:hover { color: #444; text-decoration: none; } #top-menu .current_page_item a { color:#444; text-decoration: none; } /* Dropdown */ #top-menu li ul { display: none; left: 0; margin: 0; padding: 0.30em 0 0 0; position: absolute; top: 1.2em; width: 140px; z-index: 99999; } #top-menu li:hover ul { display: block; } #top-menu li li { width: 140px; } #top-menu li li a { color: #000; height: auto; margin: 0; width: 130px; } #top-menu li:hover > ul a { background: #e9e9e9; color: #444; margin: 0; padding: 5px; text-decoration: none; } #top-menu li:hover > ul a:hover { background: #ccc; } #top-menu ul ul:hover > a, #top-menu a:focus { color: #444; } #top-menu ul :hover > a, #top-menu a:focus { background: #fff; color: #444; text-decoration: none; } /* Flyout */ #top-menu li:hover li ul, #top-menu li li ul { display: none; } #top-menu li:hover li:hover ul { display: block; left: 142px; padding-top: 0; top: 0; } /* Custom header image */ #header { float: left; height: 150px; margin: 10px 0 15px 0; width: 100%; } a#header { text-decoration: none; } #site-title { color: #000; font-size: 70px; font-style: italic; margin: 10px 0; text-align: center; width: 100%; } #site-description { color: #000; font-family: arial; font-size: 12px; text-align: center; text-transform: uppercase; width: 100%; } /* Top level */ #main-menu { float: left; font-size: 14px; width: 100%; } #main-menu ul { list-style: none; } #main-menu li { background-color: #000; float: left; margin: 0 10px 5px 0; position: relative; } #main-menu li a { display: block; color: #fff; font-style: italic; padding: 5px; text-decoration: none; } #main-menu .current_page_item a { background: #333; } /* Dropdown */ #main-menu li ul { display: none; margin: 0; left: 0; position: absolute; top: 1.9em; padding: 0.25em 0 0 0; width: 140px; z-index: 99999; } #main-menu li:hover ul { display: block; } #main-menu li li { margin-bottom: 1px; width: 140px; } #main-menu li li a { color: #fff; height: auto; margin: 0; width: 130px; } #main-menu li:hover > a { background: #000; } #main-menu ul ul :hover > a, #main-menu a:focus { background: #333; } #main-menu ul :hover > a, #main-menu a:focus { background: #333; } /* Flyout */ #main-menu li:hover li ul, #main-menu li li ul { display: none; } #main-menu li:hover li:hover ul { display: block; left: 141px; padding-top: 0; top: 0; } /* = Page content -------------------------------------------------------------- */ #content.page { float: left; width: 965px; } #content.page h1 { margin-bottom: 20px; } #content.page img { height: auto; max-width: 100%; } #content.page ul { margin-bottom: 10px; margin-left: 50px; } #content.page ol { margin-bottom: 10px; margin-left: 50px; } #content.page .postmetadata { margin-top: 30px; text-align: right; width: 965px; } #content.page .postmetadata a:hover { text-decoration: none; } /* = Comments page -------------------------------------------------------------- */ #comment-box { float: left; margin-top: 50px; width: 100%; } #comment-box ol.commentlist { margin: 0; } /* = Blog content -------------------------------------------------------------- */ #content.blog { float: left; width: 680px; } .post { border-bottom: #ccc solid 1px; margin-bottom: 50px; padding-bottom: 50px; width: 100%; } * html .post { width: 680px; } .post .time { font-family: arial; font-size: 12px; text-align: center; text-transform: uppercase; width: 100%; } .post .entry { float: left; margin: 30px 0; width: 100%; } .post .entry img { height: auto; max-width: 100%; } .post .entry a { color: #444; text-decoration: underline; } .post .entry ul { margin: 20px 0 20px 50px; } .post .entry ul li { margin-bottom: 3px; } .post .entry ol { margin: 20px 0 20px 50px; } .post .entry ol li { margin-bottom: 3px; } .post .post-navigation { text-align: center; width: 100%; } .post .post-navigation a:hover { color: #000; } .post ul.postmetadata { font-family: arial; font-size: 12px; margin-top: 30px; text-align: center; width: 100%; } .post ul.postmetadata li { display: inline; font-weight: bold; text-transform: uppercase; } .post ul.postmetadata li.no-bold { font-weight: normal; } .post ul.postmetadata li a { color: #000; text-decoration: none; text-transform: uppercase; } .post ul.postmetadata li a:hover { color: #444; text-decoration: underline; } .post .tags { color: #999; font-family: arial; font-style: italic; font-size: 12px; margin-top: 10px; text-align: center; width: 100%; } .post .tags a { color: #999; text-decoration: none; } .navigation { text-align: center; width: 100%; } .navigation a { color: #000; text-decoration: none; } .navigation a:hover { text-decoration: underline; } /* = Blog content single -------------------------------------------------------------- */ #content.single { float: left; width: 680px; } #content.single .post { border: none; } #content.single .post .entry { border-bottom: #ccc solid 1px; margin-top: 20px; padding-bottom: 30px; } #content.single .attachment .entry { border-bottom: #ccc solid 1px; margin: 30px 0; padding-bottom: 30px; } #content.single .attachment .entry img { max-width: 100%; height: auto; } #content.single .attachment .time { font-family: arial; font-size: 12px; text-align: center; text-transform: uppercase; width: 100%; } /* = Comments blog -------------------------------------------------------------- */ ol.commentlist { float: left; width: 100%; } ol.commentlist img { margin-right: 5px; } ol.commentlist li { border-bottom: #ccc dotted 1px; margin-bottom: 30px; padding-bottom: 30px; } ol.commentlist a { color: #444; text-decoration: underline; } ol.commentlist a:hover { text-decoration: none; } ol.commentlist p { margin: 10px 0; } ol.commentlist ul.children { margin: 20px 0 0 50px; } ol.commentlist ul.children li { border: none; margin: 0; padding: 0; } ol.commentlist ul li { border: none; margin: 0 0 3px 50px; padding: 0; } ol.commentlist ol li { border: none; margin: 0 0 3px 50px; padding: 0; } cite.fn { font-style: italic; text-decoration: underline; } cite.fn a { font-style: italic; text-decoration: underline; } #respond a { color: #444; text-decoration: underline; } #respond a:hover { text-decoration: none; } #comment { clear: both; margin: 5px 0; width: 100%; } p.form-allowed-tags { color: #444; font-style: italic; } input#author, input#email, input#url { margin-left: 5px; width: 300px; } /* = Sidebar -------------------------------------------------------------- */ #sidebar { float: right; text-align: center; width: 220px; } * html #sidebar { margin: 0; padding: 0; overflow: hidden; width: 200px; } #sidebar h3 { background-color: #000; color: #fff; margin-bottom: 20px; padding:5px 0; text-align: center; width: 100%; } #sidebar img { height: auto; margin-bottom: 10px; max-width: 100%; } #sidebar ul { list-style: none; } #sidebar ul li { margin-bottom: 3px; } #sidebar ul li a { color: #000; text-decoration: none; } #sidebar ul li a:hover { text-decoration: underline; } #sidebar div { margin-bottom: 40px; } #sidebar .screen-reader-text { background-color: #000; color: #fff; display: block; font-size: 20px; font-style: italic; margin-bottom: 20px; padding:5px 0; text-align: center; text-transform: uppercase; width: 100%; } /* = Search-box -------------------------------------------------------------- */ input#s { background-color: #fff; border: #000 solid 1px; height: 25px; padding-left: 5px; width: 75%; } input#searchsubmit{ background-color: #fff; border: none; cursor: pointer; text-transform: uppercase; width: 20%; } /* = Footer -------------------------------------------------------------- */ #footer { border-top: #444 solid 1px; float: left; margin-top: 50px; padding: 10px 0 20px 0; text-align: center; width: 965px; } /* = 404 error -------------------------------------------------------------- */ #content.error { float: left; text-align: center; width: 680px; } #content.error h1 a { color: #000; } #content.error a { text-decoration: none; } #content.error p { font-size: 18px; margin-top:30px; } #content.error p a:hover { text-decoration: underline; }