/* Theme Name: Mark Keats' Blog Theme URI: Description: Custom WordPress theme from Mark Keats' blog. Author: Mark Keats Author URI: http://www.keats.me.uk/ Template: H5 */ /* ============================================================================================================================ ** ** A L L M E D I A ** ============================================================================================================================ */ @media all { /* ---------------------------------------------------------------------------------------------------------------------------- == RESET ** ---------------------------------------------------------------------------------------------------------------------------- */ html, body, div, span, object, header, hgroup, nav, footer, section, aside, article, figure, figcaption, time, mark, embed, video, audio, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, address, cite, code, pre, del, em, img, ins, q, small, strong, sub, sup, samp, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {padding:0; border:0; margin:0; font-size:100%; vertical-align:baseline; background:transparent;} header, hgroup, nav, footer, section, aside, article, figure, figcaption {display:block;} /* tables still need 'cellspacing="0"' in the markup */ table {border-collapse:collapse; border-spacing:0;} /* ---------------------------------------------------------------------------------------------------------------------------- == TYPOGRAPHY ** ---------------------------------------------------------------------------------------------------------------------------- */ body {font:100.01%/1 cambria, georgia, times, serif; color:#333; background:#fff;} /* Links */ a:link, a:visited {border-bottom:1px solid #c55500; color:#c55500; text-decoration:none;} a:visited {border-bottom:1px solid #730800; color:#730800;} a:hover, a:focus, a:active {border:0; color:#fff; background:#c55500;} a:visited:hover, a:visited:focus, a:visited:active {color:#fff; background:#730800;} /* Headings */ h1, h2, h3, h4 {font-weight:normal; line-height:1.1em; color:#222;} h1 {font-size:2.5em; line-height:1.2;} /* 40px */ h2 {clear:both; margin:0.96em 0 0.25em; margin:1.5em 0 0.25em; font-size:1.5625em;} /* 25px */ h3 {margin:1.2em 0 0.325em; margin:1.5em 0 0.325em; font-size:1.25em;} /* 20px */ h4 {margin:1.5em 0 0.4em; font-size:1em; font-weight:bold;} /* 16px */ h2 code {font-size:25px; line-height:1em;} h3 code {font-size:20px; line-height:1em;} /* h1 code, h2 code, h3 code {font-weight:bold;} */ /* Paragraphs and quotes */ p, blockquote {margin:0 0 1.5em; font-size:1em; line-height:1.5em;} /* 16px */ blockquote {padding:0 24px; border-left:3px solid #ccc; margin:1em 0 1.5em;} blockquote p {font-size:1em; color:#666;} blockquote, q {quotes:none;} /* blockquote:before {content:"\00ab"; float:left; margin:0 0 0 -14px; color:#aaa;} blockquote>*:last-child:after {content:"\00bb"; padding:0 0 0 5px; color:#aaa;} */ /* Lists */ ul, ol {margin:0 0 1.5em;} ul {list-style:square;} ul li, ol li {padding:0; margin:0 0 0.5em; font-size:1em; line-height:1.5em;} /*16px*/ li li {font-size:1em;} li p {font-size:1em;} /* Code */ p code, li code {font-size:16px; line-height:1em; word-spacing:0; color:#6a8014;} a code {border:0; color:inherit; background:transparent;} blockquote code, blockquote pre {font-size:1em;} pre {padding:15px 20px; border:1px dashed #ccc; margin:1.7143em 0; font-size:14px; line-height:1.5em; white-space:pre-wrap; word-wrap:break-word; color:#6a8014;} li pre code {font-size:14px; line-height:1.5em;} pre code mark {font-weight:bold; color:#000; background:#fe6;} /* Other */ strong {font-weight:bold;} em {font-style:italic;} small {font-size:0.875em;} ins {text-decoration:none;} sup {font-size:0.75em; vertical-align:super; line-height:0;} abbr[title] {border-bottom:1px dotted #333; cursor:help;} /* ---------------------------------------------------------------------------------------------------------------------------- == TEMPLATE ** ---------------------------------------------------------------------------------------------------------------------------- */ body > header, nav ul, body > section, body > article, body > aside section, body > footer, article + nav ul, section + nav ul {position:relative; width:785px; padding:0 100px; margin:0 auto;} /* HEADER ------------------------------------------------------------------------------------------------------------------------------- */ body > header {background:#fff;} body > header h1 {position:relative; z-index:100; float:left; padding:0.533em 0; margin:0 10px 0 0; text-align:left; text-transform:uppercase; font-size:0.9375em; font-weight:bold; line-height:1.5em;} body > header p {position:relative; z-index:100; float:right; margin:11px 0 0 6px;} body > header p + p {margin-left:12px;} body > header p img {display:block; border:1px solid #d86a05;} body > header p + p img {border-color:#6ed7ed;} body > header a:link, body > header a:visited {border:0;} /* NAVIGATION ------------------------------------------------------------------------------------------------------------------------------- */ nav {width:100%; padding:0.5em 0; margin:0;} nav ul {text-align:right;} nav li {display:inline; padding:0; margin:0 12px 0 0; font-size:0.9375em; text-align:center;} nav li a:link, nav li a:visited {position:relative; padding:1px 7px 2px; border:0; color:#c55500; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;} nav li a:hover, nav li a:visited:hover, nav ul li a:focus, nav ul li a:active {color:#fff; background:#c55500;} nav .current_page_item a:link, nav .current_page_item a:visited {color:#000; background:#e5e5e5;} nav .current_page_item a:hover, nav .current_page_item a:focus, nav .current_page_item a:active {color:#666; background:transparent;} /* ARTICLES ------------------------------------------------------------------------------------------------------------------------------- */ /* Main article styles */ body > article {padding-top:4.5em; margin-bottom:2em;} body > article header {position:relative;} body > article h1 a:link, body > article h1 a:visited {border:0; color:#000;} body > article h1 a:hover, body > article h1 a:visited:hover, body > article h1 a:focus, body > article h1 a:active {color:#666; background:transparent;} /* General article styles */ article h1 a:link, article h1 a:visited {border:0; text-decoration:none;} article time {display:block; margin:0 0 2em; font-size:0.875em; letter-spacing:1px; line-height:1.6em; text-transform:uppercase; color:#757575;} article header + p {margin:1.1429em 0; font-size:1.3125em; line-height:1.3333em;} article header + p code {font-size:21px; line-height:1em;} article footer {padding:0.5em 0 0; border-top:1px solid #eee; margin:2em 0 0; font-style:italic;} article footer p {display:inline; padding:0; margin:0; font-size:0.8125em; word-spacing:0;} article footer p + p:before {content:" \00b7\00a0"; color:#000;} article footer p a:link, article footer p a:visited {border:0;} article img {display:block; border:1px solid #ddd; /*margin:1em -31px 1.5em;*/} article pre + p > small:first-child {display:block; margin:-1em 0 0; font-size:0.8125em; word-spacing:0;} article figure {margin:0 0 1.5em;} article figure img {margin-bottom:0.5em;} article figure figcaption {margin:0 -30px; font-size:0.875em; line-height:1.5em;} /* Retweet and Save */ a.social:link, a.social:visited {display:inline-block; border:0; margin:1em 0 0; font-weight:bold; font-style:normal; color:#222; background:transparent;} a.social:hover, a.social:focus, a.social:active {color:#222; background:transparent;} .social span {display:inline-block; padding:1px 5px 2px; border:1px solid #80b62a; margin:0 0 0 3px; font-size:14px; font-weight:normal; line-height:1em; color:#fff; background:#95cd3c; text-shadow:1px 1px rgba(0,0,0,0.25); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4), 1px 1px 2px 0 #bbb; -moz-box-shadow:inset 0 1px 1px rgba(255,255,255,0.4), 1px 1px 2px 0 #bbb; box-shadow:inset 0 1px 1px rgba(255,255,255,0.4), 1px 1px 2px 0 #bbb;} .social:hover span, .social:focus span, .social:active span {color:#6D9B24; background:#fff; text-shadow:1px 1px #ddd; -webkit-box-shadow:1px 1px 2px 0 #ccc; -moz-box-shadow:1px 1px 2px 0 #ccc; box-shadow:1px 1px 2px 0 #ccc;} .delicious span {border-color:#26579C; color:#fff; background:#3274D0;} .delicious:hover span, .delicious:focus span, .delicious:active span {color:#3274D0; background:#fff;} /* User comments - section */ article nav + section {margin-top:4.5em; counter-reset:commentnum;} article nav + section > h1:before {content:""; position:absolute; z-index:20; top:14px; left:0; width:15px; height:10px; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;} article nav + section > h1:after {content:""; position:absolute; z-index:10; top:20px; left:6px; width:0; height:0; border:4px solid transparent; border-left-color:#333;} article nav + section > h1 {position:relative; padding-left:25px; margin-left:-25px; font-size:2em; color:#222;} article nav + section > h1 span {display:block; margin:0.25em 0 0; font-size:0.6875em; color:#555;} /* User comments - entries */ article article {margin:2em 0 2.5em;} article article header {margin:0;} article article h3 {margin:0.25em 0 0.5em; font-size:1.125em;} article article time {display:inline; margin:0; font-size:0.75em;} article article time + a {margin:0.3em 0 0 0; font-size:0.75em;} article article time + a:after {content:counter(commentnum); counter-increment:commentnum;} article article header + p, article article p {margin:0 0 1.4em; font-size:0.875em; line-height:1.4em;} article article p code {font-size:14px; line-height:1em;} /* User comments - moderation message */ article article header p {padding:0; margin:0.5em 0;} article article header p em {padding:0 3px; background:#fe6;} /* User comments - form */ article nav + section + section {margin:3em 0 1em;} article nav + section + section h1 {margin-bottom:0.25em; font-size:1.5625em;} article section form {margin-top:1em;} article section label {display:block; margin:0 0 0.25em; font-style:italic;} article section input, article section textarea {display:block; font:0.8125em arial, sans-serif;} article section label + input {width:250px; padding:3px; border:1px solid #aaa; margin:0.25em 0 1em;} article section textarea {width:530px; padding:3px; border:1px solid #aaa; margin:0 0 1em;} /* INTERNAL NAVIGATION ------------------------------------------------------------------------------------------------------------------------------- */ article + nav, section > nav, article > nav {padding:0; margin:5em 0 2.5em;} article + nav ul {width:600px; padding:0 70px;} section > nav ul, article > nav ul {/* for ie7 ->*/ min-height:0; width:auto; padding:0; margin:0 -20px;} article + nav li, section > nav li, article > nav li {float:right; margin:5px 0; font-size:1.125em; text-align:right; color:#333;} article + nav li:first-child, section > nav li:first-child, article > nav li:first-child {float:left; text-align:left;} section > nav a:visited, article > nav a:visited {color:#730800;} section > nav a:visited:hover, section > nav a:visited:focus, section > nav a:visited:active, article > nav a:visited:hover, article > nav a:visited:focus, article > nav a:visited:active {background:#730800;} /* ARCHIVE & OTHER NON-SINGLES ------------------------------------------------------------------------------------------------------------------------------- */ body > section {padding-top:4em; margin-bottom:1em; width: 485px; float: left;} body > section > h1 {margin:0 0 0.75em; font-size:2.5em;} body > section article {padding:0; margin:0 0 3em;} body > section article header {padding:0;} body > section article time {margin:0 0 0.75em; font-size:0.75em;} body > section article h1 {padding:0; border:0; margin:0; font-size:1.5625em;} body > section article > p {margin:0.5em 0 1.5em; font-size:1em; color:#444;} body > section article > p code {font-size:16px;} body > section article footer {padding:0; border:0; margin:-0.75em 0 0;} /* ASIDE ------------------------------------------------------------------------------------------------------------------------------- */ body > aside {width:234px; padding:2.5em 0 2em; border-top:1px solid #f5f5f5; border-bottom:1px solid #f5f5f5; margin-top:2.5em; margin-bottom:1em; background:#fafafa; float: right;} body > aside h1 {font-size:1.75em; margin:0 0 0.75em;} body > aside p {font-size:0.875em; line-height:1.5em;} body > aside section p:last-child {font-size:1.125em;} body > aside section p:last-child a {border:0;} body > aside section p:last-child span {font-weight:bold;} /* FOOTER NAVIGATION ------------------------------------------------------------------------------------------------------------------------------- */ body > footer {padding-bottom:1em; text-align:center; font-size:0.75em;} body > footer p {margin:0 0 0.75em;} body > footer small {display:block; font-size:1em; line-height:1.4em; color:#777;} body > footer small a:link, body > footer small a:visited {border-color:#333; color:#333;} body > footer small a:hover, body > footer small a:focus, body > footer small a:active {color:#fff;} /* SELF-CLEARING ------------------------------------------------------------------------------------------------------------------------------- */ section > nav ul:after, article > nav ul:after {clear:both; display:block; content:"."; height:0; font-size:0; line-height:0; visibility:hidden;} /* ADMIN CONTROLS ------------------------------------------------------------------------------------------------------------------------------- */ .post-edit-link:link, .post-edit-link:visited, .comment-edit-link:link, .comment-edit-link:visited {border:0; text-transform:uppercase; font-size:13px; font-weight:bold; font-style:italic; color:#c00;} .post-edit-link:hover, .comment-edit-link:hover {color:#fff; background:#c00;} .comment-edit-link:after {content:"\00a0\00b7\00a0"; color:#000;} /* end of @media all */} /* ============================================================================================================================ ** ** P R I N T ** ============================================================================================================================ */ @media print { body>header p, nav, #respond {display:none;} body > aside {border:0; background:transparent;} #comments {page-break-before:always;} body > header h1 a[href]:after, article a[href]:after, aside a[href]:after {border:0 !important; color:#555; content:" (" attr(href) ")"; text-decoration:none;} body > header h1 a[href]:after {content:" \2014 http://nicolasgallagher.com";} body > article header a[href]:after, body > article footer a[href]:after {content:none;} /* end of @media print */} /* ============================================================================================================================ ** ** H A N D H E L D ** ============================================================================================================================ */ @media handheld, screen and (max-width: 480px) { body {font-size:14px;} body > header, nav ul, body > section, body > article, body > aside section, body > footer, article + nav ul, section + nav ul {position:relative; width:auto; padding-left:5px; padding-right:5px;} p code, li code {font-size:14px;} body > nav {clear:both;} body > nav ul {text-align:left;} body > article, body > section {padding-top:2em;} article + nav, section > nav, article > nav {margin:2em 0;} article > nav ul, section > nav ul {padding:0; margin:0;} article nav + section {margin:2em 0;} article article header a {float:none; margin:0;} article section label + input, article section textarea {width:90%;} /* end of @media handheld */}