/* Theme Name: Butcher Block Author: Thales Training & Consultancy Author URI: http://www.thales-trainingconsultancy.com/ Description: Butcher Block is a responsive (works great on phones!), one-column blog theme for WordPress. Features a customizable background image. Supports all widgets and menus. Built on _s. Version: 1.0 License: GNU General Public License License URI: license.txt Tags: gray, silver, white, light, dark, one-column, flexible-width, fixed-width, custom-background, custom-menu, sticky-post, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. */ /* =Imports -------------------------------------------------------------- */ @import url( http://fonts.googleapis.com/css?family=Signika+Negative:300,700 ); @import url( css/reset.css ); /* =Global ----------------------------------------------- */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body, button, input, select, textarea { color: #333; font-family: sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-family: 'Signika Negative', sans-serif; } /* New micro clearfix hack - http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: ''; display: table; } .cf:after { clear: both; } .cf { zoom: 1; } /* Headings */ h1, h2, h3, h4, h5, h6 { margin: 24px 0; margin: 2.4rem 0; clear: both; font-weight: bold; color: #333; } h1 { font-size: 36px; font-size: 3.6rem; line-height: 1.333333333; } h2 { font-size: 30px; font-size: 3rem; line-height: .8; } h3 { font-size: 24px; font-size: 2.4rem; line-height: 1; } h4, h5, h6 { text-transform: uppercase; letter-spacing: 2px; } h5 { font-size: 14px; font-size: 1.4rem; line-height: 1.714285714; } h6 { font-size: 12px; font-size: 1.2rem; line-height: 2; } hr { background-color: #ccc; border: 0; height: 1px; margin-top: -1px; } /* Links */ a { color: #3B5998; } /* Text elements */ p, ul, ol, dl, blockquote, pre, address { margin: 24px 0; margin: 2.4rem 0; } blockquote, address { color: #999; } ul, ol, blockquote, address { margin-left: 24px; margin-left: 2.4rem; } ul > ul, ol > ol, ul > ol, ol > ul { margin-top: 0; margin-bottom: 0; margin-left: 12px; margin-left: 1.2rem; } .entry-content ul, .comment ul { list-style: disc; } .entry-content ol, .comment ol { list-style: decimal; } dt { font-weight: bold; } b, strong { font-weight: bold; } dfn, cite, em, i { font-style: italic; } pre { padding: 16px; padding: 1.6rem; background: #eee; font-size: 12px; font-size: 1.2rem; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 2; overflow: auto; max-width: 100%; border-radius: 3px; } code, kbd, tt, var { font-size: 12px; font-size: 1.2rem; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; background: #eee; padding: 1px 3px; border-radius: 3px; } abbr, acronym { border-bottom: 1px dotted #ccc; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; padding: 1px 3px; border-radius: 3px; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } small { font-size: 75%; } big { font-size: 125%; } figure { margin: 0; } table { width: 100%; } th { font-weight: bold; } button, input, select, textarea { font-size: 100%; /* Corrects font size not being inherited in all browsers */ margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */ vertical-align: baseline; /* Improves appearance and consistency in all browsers */ *vertical-align: middle; /* Improves appearance and consistency in all browsers */ } button, input { line-height: normal; /* Addresses FF3/4 setting line-height using !important in the UA stylesheet */ *overflow: visible; /* Corrects inner spacing displayed oddly in IE6/7 */ } button, html input[type="button"], input[type="reset"], input[type="submit"] { padding: 6px 12px; padding: .6rem 1.2rem; border: none; border-radius: 3px; background: #fafafa; /* Old browsers */ background: -moz-linear-gradient( top, #fafafa, #e6e6e6 ); /* FF3.6+ */ background: -webkit-linear-gradient( top, #fafafa, #e6e6e6 ); /* Chrome10+, Safari5.1+ */ background: -o-linear-gradient( top, #fafafa, #e6e6e6 ); /* Opera 11.10+ */ background: -ms-linear-gradient( top, #fafafa, #e6e6e6 ); /* IE10+ */ background: linear-gradient( top, #fafafa, #e6e6e6 ); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e6e6e6', GradientType=0 ); /* IE6-9 */ cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */ font-size: 12px; font-weight: bold; line-height: 24px; line-height: 2.4rem; color: #666; box-shadow: inset 0 -1px #bbb, inset 0 0 0 1px #ccc, inset 0 0 10px #fff; text-shadow: 0 1px #fff; -webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */ } button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background: #f5f5f5; /* Old browsers */ background: -moz-linear-gradient( top, #f5f5f5, #dcdcdc ); /* FF3.6+ */ background: -webkit-linear-gradient( top, #f5f5f5, #dcdcdc ); /* Chrome10+, Safari5.1+ */ background: -o-linear-gradient( top, #f5f5f5, #dcdcdc ); /* Opera 11.10+ */ background: -ms-linear-gradient( top, #f5f5f5, #dcdcdc ); /* IE10+ */ background: linear-gradient( top, #f5f5f5, #dcdcdc ); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dcdcdc', GradientType=0 ); /* IE6-9 */ color: #333; } button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, html input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active { box-shadow: inset 0 0 0 1px #bbb, inset 0 3px 6px #ddd; color: #999; } input[type="checkbox"], input[type="radio"] { /* Addresses excess padding in IE8/9 */ padding: 0; } input[type="search"] { /* Addresses appearance set to searchfield in S5, Chrome */ -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */ -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */ border: 0; padding: 0; } input[type=text], textarea { padding: 6px 12px; padding: .6rem 1.2rem; border: none; color: #666; background: #eee; border-radius: 3px; } input[type=text]:focus, textarea:focus { outline: none; color: #333; } textarea { padding: 12px; padding: 1.2rem; overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */ vertical-align: top; /* Improves readability and alignment in all browsers */ } /* Alignment */ .alignleft { display: inline; float: left; } .alignright { display: inline; float: right; } .aligncenter { clear: both; display: block; margin: 0 auto; } /* Text meant only for screen readers */ .assistive-text { clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); position: absolute !important; } /* =Page ----------------------------------------------- */ html { } body { background: url(img/wood-floor.png); } #page { max-width: 768px; max-width: 76.8rem; padding: 0 24px; padding: 0 2.4rem; margin: auto; } /* =Header ----------------------------------------------- */ #masthead { padding-top: 144px; padding-top: 11.4rem; text-shadow: 0 1px 2px rgba( 0, 0, 0, .5 ); } .site-title { font-size: 48px; font-size: 4.8rem; font-weight: bold; letter-spacing: -1px; margin: 0; } .site-title a { color: #fff; text-decoration: none; } .site-description { margin: 0; font-weight: bold; text-shadow: 0 1px 1px rgba( 255, 255, 255, .2 ); font-size: 18px; font-size: 1.8rem; line-height: 1.333333333; color: #333; color: rgba( 0, 0, 0, .75 ); } .menu-toggle { text-transform: uppercase; letter-spacing: 2px; font-size: 16px; font-size: 1.6rem; line-height: 1.5; color: #fff; } .main-navigation, .main-small-navigation { clear: both; display: block; float: left; width: 100%; margin-top: 24px; margin-top: 2.4rem; padding: 0 24px; padding: 0 2.4rem; border-radius: 3px; text-shadow: 0 1px 1px #000; background: #393939; border: solid 1px #222; box-shadow: 0 1px 1px rgba( 0, 0, 0, .4 ), inset 0 0 0 1px #555; color: #fff; } .main-navigation ul { list-style: none; margin: 0; padding-left: 0; } .main-navigation li { float: left; margin-right: 12px; margin-right: 1.2rem; padding: 24px 0; padding: 2.4rem 0; position: relative; } .main-navigation a, .main-small-navigation a { display: block; color: #fff; text-decoration: none; } .main-navigation ul ul { display: none; float: left; position: absolute; top: 72px; top: 7.2rem; left: -24px; left: -2.4rem; z-index: 99999; padding: 0 24px; padding: 0 2.4rem; border-radius: 3px; text-shadow: 0 1px 1px #000; background: #393939; border: solid 1px #222; box-shadow: 0 1px 1px rgba( 0, 0, 0, .4 ), inset 0 0 0 1px #555; color: #fff; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul a { width: 200px; } .main-navigation ul ul li { padding: 0; line-height: 48px; line-height: 4.8rem; } .main-navigation ul li:hover > ul { display: block; } .main-small-navigation ul { list-style: disc; } .main-small-navigation ul ul { margin-top: 0; margin-bottom: 0; } .main-navigation .children .children { margin-top: -1px; } /* Small menu */ .menu-toggle { cursor: pointer; } .main-small-navigation .menu { display: none; } /* =Content ----------------------------------------------- */ .page-title { margin: 48px 0 -24px; margin: 4.8rem 0 -2.4rem; font-weight: bold; text-shadow: 0 1px 1px rgba( 255, 255, 255, .2 ); font-size: 18px; font-size: 1.8rem; line-height: 1.333333333; } .post, .single #content, .page #content { margin: 4.8px 0; margin: 4.8rem 0; padding: 48px 72px; padding: 4.8rem 7.2rem; background: #fff; box-shadow: 0 12px 6px -9px rgba( 0, 0, 0, .2 ), 0 6px 12px rgba( 0, 0, 0, .2 ), inset 0 0 2px #fff, inset 0 0 36px #ddd; border-radius: 3px; color: #666; } .single .post { margin: 0; padding: 0; box-shadow: none; } .entry-title a { text-decoration: none; color: #333; } .entry-meta { margin: 24px 0; margin: 2.4rem 0; color: #999; } .entry-meta a { color: #999; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .entry-meta a:hover { color: #666; } .post-navigation { margin: 72px 0 24px; margin: 7.2rem 0 2.4rem; padding: 6px 24px; padding: .6rem 2.4rem; background: #eee; border-radius: 100px; } .post-navigation a { text-decoration: none; color: #999; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .post-navigation a:hover { color: #666; } .sticky { } .hentry { } .entry-meta { clear: both; } .byline { display: none; } .single .byline, .group-blog .byline { display: inline; } .entry-content, .entry-summary { } .page-links { clear: both; } .blog #nav-below { text-align: right; margin-bottom: 24px; margin-bottom: 2.4rem; font-weight: bold; text-shadow: 0 1px 1px rgba( 255, 255, 255, .2 ); font-size: 18px; font-size: 1.8rem; line-height: 1.333333333; color: rgba( 0, 0, 0, .5 ); } .blog #nav-below .nav-previous { text-align: left; } .blog #nav-below a { text-decoration: none; color: #333; color: rgba( 0, 0, 0, .75 ); } /* =Comments ----------------------------------------------- */ .comments-title, #reply-title { margin: 72px 0 24px; margin: 7.2rem 0 2.4rem; } .commentlist { margin-left: 0; } .commentlist > li:first-child { margin-top: 0; } .comment, .pingback { border-top: solid 1px #eee; padding-top: 47px; padding-top: 4.7rem; margin-top: 48px; margin-top: 4.8rem; } .avatar { position: absolute; margin-left: -72px; margin-left: -7.2rem; border-radius: 3px; } .comment-author { padding-left: 72px; padding-left: 7.2rem; } .comment-meta { padding-left: 72px; padding-left: 7.2rem; color: #999; } .comment-meta a { color: #999; -webkit-transition: color .3s ease; -moz-transition: color .3s ease; -o-transition: color .3s ease; transition: color .3s ease; } .comment-meta a:hover { color: #666; } .pingback .comment-author { padding-left: 0; } .pingback .comment-meta { padding-left: 0; } .pingback .reply, .pingback .says, .pingback .comment-meta { display: none; } .fn { font-style: normal; font-weight: bold; color: #333; } .fn a { color: #333; text-decoration: none; } #commentform input, #commentform textarea { display: block; width: 100%; } /* =Asides ----------------------------------------------- */ .blog .format-aside .entry-title, .archive .format-aside .entry-title { display: none; } /* =Media ----------------------------------------------- */ .site-header img, .entry-content img, .comment-content img, .widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ } .site-header img, .entry-content img, img[class*="align"], img[class*="wp-image-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } .site-header img, .entry-content img, img.size-full { max-width: 100%; width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */ } .alignleft { float: left; margin: 24px 24px 24px 0; margin: 2.4rem 2.4rem 2.4rem 0; } .alignright { float: right; margin: 24px 0 24px 24px; margin: 2.4rem 0 2.4rem 2.4rem; } .aligncenter { margin-top: 24px; margin-top: 2.4rem; margin-bottom: 24px; margin-bottom: 2.4rem; } .entry-content img.wp-smiley, .comment-content img.wp-smiley { border: none; margin-bottom: 0; margin-top: 0; padding: 0; } .wp-caption { max-width: 100%; } .wp-caption.aligncenter, .wp-caption.alignleft, .wp-caption.alignright { } .wp-caption-text { text-align: center; } #content .gallery { } .gallery-caption { } #content .gallery a img { border: none; height: auto; max-width: 90%; } #content .gallery dd { margin: 0; } #content .gallery-columns-4 .gallery-item { } #content .gallery-columns-4 .gallery-item img { } iframe, object { max-width: 100%; } /* =Navigation ----------------------------------------------- */ #content .site-navigation { overflow: hidden; } #content .nav-previous { float: left; width: 50%; } #content .nav-next { float: right; text-align: right; width: 50%; } /* =Comments ----------------------------------------------- */ .bypostauthor { } /* =Widgets ----------------------------------------------- */ #sidebar-1 { width: 50%; padding-right: 12px; padding-right: 1.2rem; float: left; } #sidebar-1.full { width: 100%; padding-right: 0; } #sidebar-2 { width: 50%; padding-left: 12px; padding-left: 1.2rem; float: left; } .widget { padding: 24px; padding: 2.4rem; margin-top: 24px; margin-top: 2.4rem; border-radius: 3px; text-shadow: 0 1px 1px #000; background: #393939; border: solid 1px #222; box-shadow: 0 1px 1px rgba( 0, 0, 0, .4 ), inset 0 0 0 1px #555; color: #fff; } .widget-title { margin-top: 0; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; font-size: 1.6rem; line-height: 1.5; color: #fff; } .widget a { color: #fff; } .widget ul { list-style: disc; } .widget ol { list-style: decimal; } /* Search widget */ #searchsubmit { display: none; } /* =Footer ----------------------------------------------- */ #colophon { text-align: center; padding: 48px 0; padding: 4.8rem 0; color: #fff; font-weight: bold; text-shadow: 0 1px 1px rgba( 0, 0, 0, .5 ); } #colophon a { text-decoration: none; color: #fff; } /* =Responsive stuff ----------------------------------------------- */ @media screen and ( max-width: 768px ) { html { font-size: 55%; } .post { padding: 24px 48px; padding: 2.4rem 4.8rem; margin: 24px 0; margin: 2.4rem 0; } } @media screen and ( max-width: 480px ) { html { font-size: 55%; } .post { padding: 12px 24px; padding: 1.2rem 2.4rem; margin: 24px 0; margin: 2.4rem 0; } #sidebar-1, #sidebar-2 { width: 100%; float: none; margin: 0; padding: 0; } }