@import url(slimbox.css);

/* =reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: normal; vertical-align: baseline; background: transparent;
}
body { line-height: 1; }
ul { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; } /* remember to define focus styles! */
ins { text-decoration: none; } /* remember to highlight inserts somehow! */
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; } /* tables still need 'cellspacing="0"' in the markup */

/* =general */

#head, #layout, #search ul, #foot ul { width: 900px; }
#head, #layout, #search ul, #foot ul, #slide-foot { margin: 0 auto; }
#main, #menu li, #classic, #archive, #tags, #license, #john-wrana { float: left; }
#side, #impressum { float: right; }
#search, #foot { width: 100%; }
h1, h3, #search, #foot, *.clear:after, #slide-foot { clear: both; float: none; }
#logo, #feed, #slide-search, #slide-foot, *.clear:after, a.close { display: block; }
#head, #tags, #impressum, div.date { position: relative }
#menu, #feed, a.close { position: absolute }

/* =specials */

#skip { display: none; }
*.clear:after { content: "."; height: 0; visibility: hidden; }
a#habari { width: 240px; height: 20px; margin-top: 50px; display: block; background: #fff url(../i/habari.png) 0 0 no-repeat; }
a#habari:hover { background-position: 0 -20px; }

/* =tag navigation */

div#main ul.tags { margin: 25px 0 25px 0; padding-left: 7px; }
div#main ul.tags li { float: left; }
div#main ul.tags li:before { content: ""; }
div#main ul.tags a { display: block; color: #888; margin-left: -7px; padding-right: 9px; background: transparent url(../i/tag-right.png) right 0 no-repeat; }
div#main ul.tags a:hover { background: transparent url(../i/tag-right.png) right -16px no-repeat; color: #669; }
div#main ul.tags	a span { font: 10px/17px Trebuchet MS, sans-serif; height: 16px; display: block; background: transparent url(../i/tag-left.png) 0 0 no-repeat;	padding: 0 6px 0 12px; }
div#main ul.tags li:first-child a span { padding-left: 8px; background: transparent url(../i/tag-left-first.png) 0 0 no-repeat; }
div#main ul.tags a:hover span { background: transparent url(../i/tag-left.png) 0 -16px no-repeat; }
div#main ul.tags li:first-child a:hover span { background: transparent url(../i/tag-left-first.png) 0 -16px no-repeat; }

/* =page navigation */

#nav a { display: block; }
#lnav, #rnav { position: relative; float: left; width: 120px; height: 88px; }
#lnav { text-align: left; }
#rnav { text-align: right; }
#larr, #rarr, #lnum, #rnum, #lhint, #rhint { position: absolute; left: 2px; }
#larr, #rarr { top: 20px; font-weight: bold; font-size: 150px; color: #f5f5f5; }
#lnum, #rnum { top: 15px; font-size: 24px; color: #ededed; }
#lhint, #rhint { top: 51px; font-size: 11px; font-family: Trebuchet MS, sans-serif; text-transform: uppercase; color: #e0e0e0; }
#larr { left: -7px; }
#rarr { right: -7px; }
#rnum { top: 50px; right: 0px; }
#rhint { top: 16px; right: 0px; }
a #larr, a #rarr { color: #f0f0f0; }
a #lhint, a #rhint { color: #777; }
a #lnum, a #rnum { color: #555; }
a:hover #lhint, a:hover #rhint { color: #dd7000; }
a:hover #larr, a:hover #rarr { color: #f5f0e0; }
a:hover #lnum, a:hover #rnum { color: #b02000; }

/* searchsubmit */

#s { height: 16px; width: 165px; text-transform: uppercase; font: 11px/22px "Trebuchet MS", Helvetica, Arial, sans-serif; }
#searchsubmit { text-transform: uppercase; font: 11px/22px "Trebuchet MS", Helvetica, Arial, sans-serif; margin: 0 -3px 0 13px; border: none; background: url(../i/go.png) 0 1px no-repeat; width: 54px; height: 28px; }
#searchform { margin: 0 0 0 -2px; }
#searchsubmit:hover { background-position: 0 -30px; }

/* =selection */
#selection { margin-top: 22px; padding: 0 0 22px 44px; font: 10px/22px Trebuchet MS, sans-serif; text-transform: uppercase; text-align: right; color: #999; letter-spacing: 1px; }
#selection strong { font-weight: bold; color: #895; }

/* =layout */

p.topic { margin: 22px 0 0 0; }
h2, h3, p { margin-bottom: 22px; }
#head {	padding: 50px 0; height: 102px; }
#main { padding-top: 22px; }
#menu { bottom: 70px; right: 0; }
#menu li { margin-left: 50px; }
#layout { padding: 50px 0 0 0; }
#side { width: 240px; margin-bottom: 75px; }
#side p img { margin-bottom: -1px; }
#classic { width: 240px; padding-right: 60px; }
#searchfield { width: 175px; }
#tags { width: 600px }
#license { width: 450px; }
#impressum { width: 390px; }
#logo { width: 309px; height: 102px; }
#feed { width: 34px; height: 50px; top: 0; right: 0; }
#slide-search { width: 14px; height: 17px; }
#slide-foot { width: 154px; height: 29px; }
#john-wrana { width: 100px; height: 119px; margin: 5px 22px 0 0; }
a.close { top: 24px; right: 0; width: 16px; height: 16px; }
#tags sup { padding-left: 2px; }
div.date { margin: -22px 0 0 -100px; width: 100px; }
span.day { position: absolute; top: 0; left: 0; }
span.month { position: absolute; top: 21px; left: 26px; }
span.year { position: absolute; top: 50px; left: 10px; }
input[type="text"], textarea { padding: 3px; }
input[type="text"]:focus, textarea:focus { padding: 3px; }

/* =typo */

body, h1, h2, h3, img, p, a, span, ul, li { line-height: 22px; }
body { font: 12px/22px Helvetica, Arial, "Trebuchet MS", sans-serif; }
h1, h1 a { font-size: 17px; }
h2, h2 a, p.topic, #menu, #main, #menu a, p.topic a, #menu li { font-size: 14px; }
a { font-size: 12px; }
a, #side #colours ul li a { text-decoration: none; text-transform: uppercase; font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-style: italic; }
h1 a, h2 a, h3 a, #menu a, #tags a, p.topic a, #side ul li a, textarea, #smallprint ul li a { text-transform: none; font-family: Helvetica, Arial, "Trebuchet MS", sans-serif; font-style: normal; }
p { text-align: justify; }
strong { font-weight: bold !important; }
#skip, #logo, #feed, #slide-search, #habari { text-indent: -2000em; }
#tags sup { font-size: 10px; vertical-align: top; }
#tags { word-spacing: 1em; }
span.day { font-size: 24px; }
span.month { font-size: 36px; }
span.year { font-size: 16px; }
input[type="text"]:focus, textarea:focus { color: #222; }

/* =colours */

body { color: #444; background-color: #fff; }
#search, #foot, #foot ul.clear:after { background-color: #f5f5f5; }
p.topic, p.topic a { color: #bbb; }
a:hover, #head ul li a:hover, #search a:hover, p.topic a:hover, #side ul li a:hover, #smallprint ul li a:hover { color: #dd7000; }
#menu a { color: #777; }
#tags a, #side ul li a, #smallprint ul li a { color: #444; }
h1, h1 a, h2, h3, h2 a, h3 a { color: #191919; }
a { color: #889955; }
#tags sup { color: #999; }
span.day { color: #bbb; }
span.month, span.year { color: #ddd; }
input[type="text"], textarea { background-color: #ffffff; }
input[type="text"]:focus, textarea:focus { background-color: #f5f5f5; }

/* =design */

#search { border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; }
#foot { border-top: 1px solid #cccccc; }
input[type="text"], textarea { border: 1px solid #ccc; }
/*input[type="text"]:focus, textarea:focus { border: 1px solid #999; }*/
hr { height: 22px; border: none; border-bottom: 1px solid #999; }

/* =images */

#slide-foot { background: #ffffff url(../i/smallprint.png) 0 0 no-repeat; }
#slide-foot:hover { background-position: 0 -35px; }
#logo { background: #ffffff url(../i/jowra.png) 0 0 no-repeat; }
#feed { background: #ffffff url(../i/feedicon.png) 0 0 no-repeat; }
#feed:hover { background-position: -34px 0; }
#slide-search { background: #ffffff url(../i/search.png) 0 4px no-repeat; }
#slide-search:hover { background: #ffffff url(../i/search.png) -14px 4px no-repeat; }
a.close { background: #f5f5f5 url(../i/symbols.png) -64px 0 no-repeat; }
a.close:hover { background-position: -64px -16px; }

/* smallprint */

div#smallprint, div#smallprint p.topic { margin-top: 100px; text-align: right; }