oldschool css

oldschool.css

/* Design done by Arthur Steiner (c), the rest by Anne van Kesteren (c) */
@font-face { font-family:anneisawesome; src:url(/fonts/big-noodle-titling) }
html { margin:20px 30px; font:1em/1.5 Verdana, sans-serif; background:#46016a }
body { position:relative; margin:0 0 0 160px; padding:0 1em; border-left:10px solid #7e7a4c; min-width:200px; background:#c2c152 }
h1 { position:absolute; top:5px; left:-155px; margin:0; height:107px; width:282px; z-index:1; content:url(/img/logo) "Weblog 4.2"; font:2.6em/0.4 anneisawesome, Impact, sans-serif; text-indent:-4px }
p#tagline { margin:0; padding-top:5em; font-size:1.2em }
form#search { position:absolute; top:10px; right:20px; z-index:1 }
form#search input[type=search] { border:thin solid #000; vertical-align:top }
form#search input[type=search]:focus { outline:thick solid #000 }
form#search input[type=submit] { margin:2px 0 0; padding:0; border:none; float:right; display:block; content:url(/img/find); width:30px; cursor:pointer }
form#search input[type=submit]:focus { outline:thin dotted #000 }
#nav { position:absolute; top:0; left:-170px; margin:0; padding:130px 16px 20px 15px; height:194px; width:129px; background:#bee5fe; }
#nav::after { margin:20px 0 0 -15px; display:block; content:url(/img/daddy) }
#nav li { display:inline; vertical-align:middle }
#nav li:first-child a { margin-top:0 }
#nav li a { -o-transition:.1s; -webkit-transition:.1s; -moz-transition:.1s; margin-top:6px; border:3px solid #73bac5; display:block; overflow:hidden; height:28px; font:bold 28px/28px anneisawesome, Impact, sans-serif; text-transform:uppercase; text-indent:0.1em; background:#c2c152; color:#fff }
#nav li a:hover { -o-transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); background:#aeae3e }
#nav li + li a { background-color:#f90 }
#nav li + li a:hover { background-color:#ec8d00 }
#nav li + li + li a { background-color:#fb3b26 }
#nav li + li + li a:hover { background-color:#ec1c04 }
#nav li + li + li + li a { background-color:#e10277 }
#nav li + li + li + li a:hover { background-color:#c06 }
#nav li + li + li + li + li a { background-color:#0071ae }
#nav li + li + li + li + li a:hover { background-color:#069 }
h2 { margin:2em 0 0 0; padding-top:.5em; border-top:.1em solid #a5a53a; text-shadow:#7e7a4c .1em .1em .1em; font-variant:small-caps }
h2 + p { margin-top:.1em }
p { margin:1em 0 }
p.meta { clear:left }
p#copyright { margin:2em 0 0; padding-bottom:1em }
p > img { margin:0 1em 1em 0; float:left }
address { font-style:normal }
pre, code { background:#b5b440 }
table { border-collapse:collapse }
tbody > tr:nth-child(even) { background:#d2d17f }
td { padding:.2em; border:solid; border-right:none }
td:first-child { border-left:none }
th { padding:.3em; text-shadow:#7e7a4c .1em .1em .1em }
ins { text-decoration:none }
ins::before { content:"[" }
ins::after { content:"]" }
:link, :visited { -o-transition:.1s; -webkit-transition:.1s; -moz-transition:.1s; font-weight:bold; text-decoration:none }
:link { color:#e10277 }
:visited { color:#46016a }
:link:hover { color:#c2c152; background:#e10277 }
:visited:hover { color:#c2c152; background:#46016a }
:link:hover code { background:#d2025d }
:visited:hover code { background:#410153 }
:link:focus { outline:thick solid #e10277 }
:visited:focus { outline:thick solid #46016a }
:link:active { outline:0; text-decoration:blink }
:visited:active { outline:0; text-decoration:blink }
::selection { color:#c2c152; background:#e10277 }