/* General
----------------------------------------------- */
body {
	margin: 0 0 72px;
	font-size: 13px;
	line-height: 18px;
	background-color: #eeeee2;
	color: #333;
	}
.container_16 {
	background-color: #fff;
	padding-bottom: 36px;
	}
#header {
	padding-top: 24px;
	border-top: 16px #ddddd2 solid;
	}
.dim {
	background-color: #ddddd2;
	color: #333;
	}
.dim .container_16 { background-color: #fcfcf3; }
.dim, .dim .upp { text-align: center; }

.dark {
	background-color: #111112;
	color: #fff;
	}
.dark .container_16 { background-color: #000; }

#footer {
	padding-bottom: 36px;
	border-top: 24px #ddddd2 solid;
	font: 13px/21px Verdana;
	color: #888882;
	}
#footer span { margin: 0; }


/* Type
----------------------------------------------- */
h1 {
	font-size: 96px;
	line-height: 96px;
	font-weight: normal;
	border-bottom: 2px #eeeee2 solid;
	}
h2 {
	font-weight: normal;
	font-size: 13px/18px;
	color: #c00;
	}
h3 {
	font-size: 24px;
	line-height: 24px;
	font-weight: normal;
	}
h4 {
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	}
h5 + p { margin-top: 0; }
h2, p, ul, ol { margin: 18px 0; }
ul {
	list-style-type: square;
	margin-left: 28px;
	}
ol {
	list-style-type: decimal;
	margin-left: 28px;
	}
.dropcap:first-letter {
	float: left;
	margin: 0 10px 4px 0;
	font-size: 48px;
	line-height: 48px;
	font-variant: normal;
	}
.dropcap:first-line {
	font-variant: small-caps;
	letter-spacing: 1px;
	}
	

/* Links
-----------------------------------------*/
a {
	text-decoration: none;
	padding: 3px 0;
	}
a:link,
a:visited {
	color: #888882;
	background-color: #eeeee2;
	}
a:hover {
	background-color: #fffff2;
	}
a:active {
	color: #fff;
	background-color: #000;
	}
	
	
/* Body size comparison
-----------------------------------------*/
p.char-compare {
	font-size: 72px;
	line-height: 96px;
	color: #ddd;
	text-decoration: underline;
	}
.char-compare .typeface1 {
	margin-right: 0;
	color: #333;
	border-bottom: 1px #999 solid;
	border-top: 1px #999 solid;
	}
.char-compare .typeface2 {
	color: #333;
	background-color: #eeeee2;
	border-bottom: 1px #999 solid;
	border-top: 1px #999 solid;
	}


/* Leading
-----------------------------------------*/
.l-less { line-height: 16px; }
.l-mid { line-height: 18px; }
.l-more { line-height: 21px; }
.l-most { line-height: 24px; }


/* Measure
-----------------------------------------*/
.m-widest { width: 900px; }
.m-wide { width: 700px; }
.m-mid { width: 450px; }
.m-narrow { width: 300px; }

.small {
	font-size: 11px;
	line-height: 14px;
	}
.small .m-mid { width: 350px; }
.small .m-narrow { width: 250px; }
.small .m-mini {
	font-size: 9px;
	line-height: 13px;
	width: 200px;
	}
	

/* Size
-----------------------------------------*/
.s { line-height: 1.5em; }
.s9 { font-size: 9px; }
.s10 { font-size: 10px; }
.s11 { font-size: 11px; }
.s12 { font-size: 12px; }
.s13 { font-size: 13px; }
.s14 { font-size: 14px; }
.s16 { font-size: 16px; }
.s18 { font-size: 18px; }
.s21 { font-size: 21px; }
.s24 { font-size: 24px; }
.s30 { font-size: 30px; }
.s36 { font-size: 36px; }
.s42 { font-size: 42px; line-height: 60px; }
.s96 { font-size: 96px; line-height: 96px; }
.s300 { font-size: 300px; line-height: 300px;}

.container_16 span {
	margin-right: 6px;
	color: #999;
	}
.s span {
	display: block;
	float: left;
	width: 80px;
	margin-left: -96px;
	margin-right: 0;
	text-align: right;
	color: #999;
	}


/* Uppercase
-----------------------------------------*/
.upp {
	text-align: right;
	text-transform: uppercase;
	letter-spacing: 1px;
	}
.upp span {
	display: block;
	float: right;
	width: 80px;
	margin-right: -96px;
	text-align: left;
	}


/* Grayscale
-----------------------------------------*/
.c000 { color: #000; }
.c333 {	color: #333; }
.c666 {	color: #666; }
.c999 {	color: #999; }
.cCCC {	color: #ccc; }
.cFFF {	color: #fff; }


/* Color
-----------------------------------------*/
.c {
	padding: 0 12px;
	border: 1px #eee solid;
	color: #000;
	}
.c h2 { color: #000; }
.c000-fff {
	color: #000;
	background-color: #fff;
	}
.cfff-000 {
	color: #fff;
	background-color: #000;
	border-color: #000;
	}
.cfff-000 h2 { color: #c00; }
.cf00-fff {
	color: #f00;
	background-color: #fff;
	}
.cf00-000 {
	color: #f00;
	background-color: #000;
	border-color: #000;
	}
.cf00-000 h2 { color: #eee; }
.c0ff-fff {
	color: #0ff;
	background-color: #fff;
	}
.c0ff-000 {
	color: #0ff;
	background-color: #000;
	border-color: #000;
	}
.c0ff-000 h2 { color: #eee; }
.cfff-f00 {
	color: #fff;
	background-color: #f00;
	border-color: #f00;
	}
.c000-f00 {
	color: #000;
	background-color: #f00;
	border-color: #f00;
	}
.cfff-0ff {
	color: #fff;
	background-color: #0ff;
	border-color: #0ff;
	}
.c000-0ff {
	color: #000;
	background-color: #0ff;
	border-color: #0ff;
	}