/* ============================================= kroc camen of camen design ==============================================
this css is designed for acid2 and above only. there are no ids. no divs. no classes, none. enjoy!
----------------------------------------------------------------------------------------------------------------------- */
/* reset browser default differences, this could be done with `* {...}` but that badly affects ``s.
this list taken from */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del,
dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: none; vertical-align: baseline;
font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit;
}
/* === structure, tag defualts =========================================================================================== */
/* background colour cannot be applied to `` when serving as 'application/xhtml+xml' */
html {background: #93a3b9 url('backgrounds/html-bg.png') no-repeat fixed top center;
/* correction if non-default foreground color, with thanks to CJ van den Berg */
color: black;}
body {/* a strict reading-rhythm is maintained, every line is always 18px or a multiple thereof
*/
width: 950px; margin: 0 auto;
font: normal 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif;}
header, nav, footer, section, /* convert some html5 elements into structural elements */
aside, article, figure {display: block;}
ul, ol {margin: 0 18px 18px 18px; font-size: 11px;}
p {margin: 0 0 18px;}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
sup {vertical-align: text-top;} /* `` extends the line-height */
sub {vertical-align: baseline;} /* and `` too */
small {font-size: 100%;} /* now means "small print" (i.e. side text / legese) */
em {font-style: italic;} /* was reset at the top of the page, I wish to keep it */
i {font-style: normal;} /* i does not mean italic in HTML5, it's spare */
cite {font-style: normal;} /* a reference to a "body of work", project names &c. */
/* === header ============================================================================================================ */
/* logo. this is a bit of a hack, as the logo does not appear in the side pane in the html, but appears there visually */
body>header h1 {position: fixed; margin: 18px 0 18px 40px; height: 36px; z-index: 1;}
/* --- tag cloud --------------------------------------------------------------------------------------------------------- */
header+nav {/* lock the pane to the side when scrolling */
position: fixed; height: 100%; width: 130px;
/* this trick gives us a wide background colour extending off the left, so that the page
appears to be divided into an orange half and a blue half (even when the window is
resized), without using a wide background-image */
margin-left: -1600px; padding: 72px 70px 0 1600px; border-right: 3px solid #eaeeeb;
background: #be6718 url('backgrounds/aside-bg.png') no-repeat top right;}
/* add the tag count to the right of the tag, left aligned so that '10' doesn't shunt the tags out compared to 0-9 &c. */
header+nav li {text-align: right;}
header+nav li:after {content: ' \00B7'' ' attr(value); /* bug: a space after the hex number is ignored */
display: inline-block; width: 2.3em; margin-left: 3px; text-align: left;}
header+nav li:hover:after {content: ' \00b7'' \25B6';}
header+nav a {color: #740}
header+nav a[rel=tag] {color: #fcfcfc;} /* "you are here" */
/* --- header links 'html, css, php' &c. --------------------------------------------------------------------------------- */
body>header>ul {float: right; width: 110px; margin: 18px 0 18px 10px; padding: 0;
list-style: square inside; color: #235;}
body>header>ul+ul {width: auto; margin-left: 10px;}
body>header>ul li {float: left; width: 40px; font-size: 10px;}
body>header>ul+ul li {text-align: right;}
/* hyperlink colour, also colours the prev/next page links */
body>header a, body>nav~nav a {color: #456;}
/* =======================================================================================================================
C O N T E N T
======================================================================================================================= */
/* no div for the column, all the content sits at the body level! `position: relative` is used so that you can click-through
to the links in the side pane, below the main 'column' elements */
body>nav~* {position: relative; clear: both; width: 710px; left: 120px;}
/* previous page link tucks in at the top (we have to override a lot of styles from the sidepane unfortunately) */
body>nav~nav {position: absolute; left: auto; width: 430px; height: 18px; margin: 0 0 0 260px;
padding: 18px 0; border: 0; text-align: center; background: none;}
/* next page link at the bottom of the page, this is just in addition to the declaration above */
body>nav+*~nav {position: relative;}
article>aside, /* date/tag-list aside the entry */
form>aside {float: right; width: 110px; margin-right: -120px;}
/* --- datetime ---------------------------------------------------------------------------------------------------------- */
/* beautiful css dates! you'll love the html too, `