@charset "UTF-8";

/* Generic reset by Mr. Meyer plus some extensions by me */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

address, cite, q, dfn {
  font-style: normal;
}

article, aside, dialog, figure, footer, header, 
hgroup, nav, section { 
  display: block;
}

h1, h2, h3, h4, h5, h6, th {
  font-weight: normal;
}

a, ins, del {
  text-decoration: none
}

q, blockquote {
	quotes: none;
}

q:after, q:before,
blockquote:after, blockquote:before {
	content: "";
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td {
  vertical-align: top;
}

th {
  text-align: left;
}

button, input, select, textarea {
  font: inherit;
}

/*
 * The fonts included are copyrighted by the vendor listed below.
 * @vendor:     Apostrophic Labs
 * @vendorurl:  http://moorstation.org/typoasis/designers/lab/index.htm
 * @licenseurl: http://www.fontsquirrel.com/license/Steinem
 */

@font-face {
	font-family: "SteinemRoman";
	src: local("Steinem Roman"), local("Steinem"), url("f/STEINEM_.ttf") format("truetype");
}

@font-face {
	font-family: "SteinemBold";
	src: local("Steinem Bold"), local("Steinem-Bold"), url("f/STEINEMB.ttf") format("truetype");
}

/* Following code is copyrighted by me. Learn if you like, but don't steal. */

a {
  font-weight: bold;
  color: #b61665;
  -webkit-transition: color 0.25s linear;
  -moz-transition: color 0.25s linear;
}

a:hover,
a:focus {
  color: #df3187;
}

a:active {
  position: relative;
  top: 1px;
}

del { text-decoration: line-through; }

button,
input[type="submit"],
input[type="image"],
label,
label > input[type="checkbox"],
label > input[type="radio"] {
  cursor: pointer;
}

html {
  background: #232834 url("i/page.png") repeat-y;
}

body {
  font: normal 14px/22px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
  background: url("i/background.png") repeat-x 0 -2px;
  color: #fff;
  padding: 27px 0 0 0;
}

p, blockquote, ul, ol, dl, table {
  margin-bottom: 22px;
}

pre,
blockquote {
  background-color: #c4c9d7;
  color: #515766;
  text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0;
  padding: 22px 20px 22px 40px;
  margin: 0 -20px 0 -40px;
}

pre {
  margin-bottom: 22px;
}

blockquote p {
  margin-bottom: 0;
  margin-top: 22px;
}

blockquote p:first-child {
  margin-top: 0;
}

blockquote + p {
  margin-top: 22px;
}

blockquote:before {
  content: "Quote";
  line-height: 22px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: block;
}

blockquote[cite]:before {
  content: attr(cite) ":";
}

p.image:after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

p.image img,
p.image a {
  float: left;
}

p.image a img {
  -webkit-transition: opacity 0.5s linear;
}

p.image a:hover img {
  opacity: 0.15;
}

p.image a {
  background: url("i/image.png") no-repeat 50% 50%;
}

p.image a[href^="http://www.flickr.com/"] {
  background-image: url("i/flickr.png");
}

li {
  list-style-position: outside;
}

ul li {
  list-style-type: square;
}

ol li {
  list-style-type: decimal;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
  margin-left: 40px;
}

article {
  margin-top: 44px;
  padding-bottom: 44px;
  background: url("i/article.png") 0 100% no-repeat;
}

#main > :first-child + article {
  margin-top: 0;
}

article header {
  float: right;
  width: 240px;
  padding-left: 20px;
  margin-right: -300px;
  font: bold 24px/22px "SteinemRoman", "Georgia", serif;
  color: #c4c9d7;
  text-shadow: #000 0 0 2px; 
}

article header time {
  font: normal 12px/22px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
  color: #515766;
}

.structural {
  position: absolute;
  left: -999em;
}

#site {
  width: 700px;
  padding-right: 260px;
}

#site > header {
  background-color: #232834;
  padding-bottom: 9px;
}

#site > header p,
#site > header h1 {
  margin: 0 0 0 29px;
  width: 135px;
  height: 52px;
  position: relative;
  line-height: 52px;
  font-size: 36px;
  font-weight: bold;
  color: #929bb2;
}

#site > header h1 a {
  display: block;
  width: 100%;
  height: 100%;
  color: #929bb2;
}

#site > header p span,
#site > header h1 span {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("i/riddled.png") no-repeat;
}

#main {
  background: #fff;
  border-top: 22px solid #737b91;
  padding: 44px 40px;
  color: #232834;
}

/* =Developer
---------------------------------------------------------------------- */

#b, #g {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.1;
}

#b { background: url("i/baseline.png"); }
#g { background: url("i/grid.png"); opacity: 0.05; }