/* ============================================= kroc camen of camen design ==============================================
this css is designed for acid2 and above only. there are no ids. no divs. no classes, none. enjoy!
----------------------------------------------------------------------------------------------------------------------- */
/* please note: measurements are in ems. ems are relative to the size of the font. 1em is always the same height as the
current css font-size in pixels. when the font-size is 12px, 1em=12px. browsers have a default font-size of 16px.
because this css is based on ems, if the user increases their text-size the whole website zooms accordingly.
next to each em-size I have given the original pixel size, and the current font-size of that element used to calculate
the em number. when a font-size is changed, the height of the font is calculated from the font-size before the change,
but the line-height and all other sizes are then calculated from the new font-size
e.g. `font-size: .916em;` (11px font from 12px font) .916em=11÷12, `width: 10em;` (110px from 11px font) 10em=110÷11
*/
/* 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%;/*[~16px]*/ font-family: inherit;
}
/* === structure, tag defualts =========================================================================================== */
html {/* background colour cannot be applied to `` when serving as 'application/xhtml+xml' */
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
*/
font: normal .75em/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif;/*[12px@16/18px@12]*/
width: 79.166em;/*[950px@12]*/ margin: 0 auto;}
header, nav, footer,
section, aside, /* convert some html5 elements into structural elements */
article, figure {display: block;}
ul, ol {margin: 0 1.5em 1.5em 1.5em;/*[18px@12]*/}
li {font-size: .916em;/*[11px@12]*/}
p {margin: 0 0 1.5em;/*[18px@12]*/}
a {text-decoration: none;}
a:hover {text-decoration: underline;}
sub {vertical-align: baseline;}
small {font-size: 100%;} /* `` now means "small print" (i.e. side text / legese) */
em {font-style: italic;} /* italic was reset at the top of the page, I wish to keep it */
/* === 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; height: 3em; margin: 1.5em 0 1.5em 3.33em;/*[18px 0 18px 40px@12]*/ z-index: 1;}
/* --- tag cloud --------------------------------------------------------------------------------------------------------- */
header+nav {/* lock the pane to the side when scrolling */
position: fixed; height: 100%; width: 10.833em;/*[130px@12]*/
/* 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: 6em 5.75em 0 1600px;/*[72px 69px@12]*/
border-right: .25em solid #eaeeeb;/*[3px@12]*/
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 directly after the hex number is ignored */
display: inline-block; width: 2.222em;/*[20px@9]*/ margin-left: .333em;/*[3px@9]*/
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 {font-size: .916em;/*[11px@12]*/ float: right; width: 10em;/*[110px@11]*/
margin: 1.636em 0 1.636em .909em;/*[18px 0 18px 10px@11]*/
padding: 0; list-style: square inside; color: #235;}
body>header>ul+ul {width: auto; margin-left: .833em;/*[10px@12]*/}
body>header>ul li {font-size: .909em;/*[10px@11]*/ float: left; width: 4em;/*[40px@10]*/}
body>header>ul+ul li {text-align: right;}
body>header a, /* hyperlink colour, also colours the prev/next page links */
body>nav~nav a {color: #456;}
/* === content entry ===================================================================================================== */
/* 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: 59.166em;/*[710px@12]*/ left: 10em;/*[120px@12]*/}
/* 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: 35.833em;/*[430px@12]*/ height: 1.5em;/*[18px@12]*/
margin: 0 0 0 21.666em;/*[260px@12]*/ padding: 1.5em 0;
background: none; border: 0; text-align: center;}
/* 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: 9.166em;/*[110px@12]*/ margin-right: -10em;/*[-120px@12]*/}
article>aside a {color: #047;}
/* --- datetime ---------------------------------------------------------------------------------------------------------- */
/* beautiful css dates! you’ll love the html too, `