/**
 * Meyer reset
 * v1.0 | 20080212
 **/

/* v1.0 | 20080212 */

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%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/**
* end Meyer reset
**/

/**
 * Layout
 **/
html { background: darkgrey; }
 
body
	{
		max-width: 960px;
		min-width: 720px;
		margin: 0 auto;
		background-image: url("../images/grid.png");
		background-position: -1px 0;
		background-color: white;
	}

dl#masthead
	{
		width: 720px;
		margin: 0 auto;
	}
	dl#masthead dt
		{
			font-size: 72px;
			line-height: 96px;
			position: static;
		}
	dl#masthead dd
		{
			font-size: 12px;
			line-height: 24px;
			margin-left: 24px;
			margin-top: -24px;
			font-style: italic;
		}

ul#mainnav
	{
		float: right;
		width: 240px;
		margin-right: 120px;
		margin-top: -24px;
		list-style: none;
	}
	ul#mainnav>li
		{
			float: left;
			width: 60px;
			text-align:center;
		}
	ul#mainnav a
		{
			color: silver;
			text-decoration: none;
		}

div#content
	{
		clear: both;
		width: 480px;
		position: relative;
		margin: 0 auto;
		overflow: visible;
	}

/**
 * typography
 **/

body
	{
		font-size: 62.5%;
		line-height: 1.2;
		font-family: Georgia;
	}

/**
 * Lists
 **/
ul#mainnav
	{
		font-size: 16px;
		line-height: 24px;
	}	

ol, ul
	{
		list-style-position: outside;
		font-size: 18px;
		line-height: 24px;
		margin: 24px 0;
	}
ol ol, ul ul
	{
		margin: 0 0 0 24px;
	}
dl
	{
		list-style-position: outside;
		font-size: 18px;
		line-height: 24px;
		margin: 24px 0;
		position: relative;		
	}

dl dl
	{
		margin-top: 0px;
		margin-left: 60px;
	}
dt
	{
		font-weight: bold;
		position: absolute;
		width: 108px;
		left: -120px;
		text-align: right;
	}

p
	{
		font-size: 18px;
		line-height: 24px;
		margin: 24px 0 0 0;
	}
	p+p
		{
			text-indent: 2.66666em;
			margin: 0;
		}
	p.lead-in
		{
			font-size: 1.6em;
			line-height: 1.5;
			font-style: italic;
			margin: 0;
		}
	p.citation
		{
			font: 14px/24px Verdana;
			margin-top: 24px;
			text-indent: 0;
			color: black;
		}


blockquote
	{
		margin: 24px;
		padding-left: 22px;
		margin-left: 0;
		border-left: 2px solid silver;
		color: darkgrey;
	}
	
	q.pullquote
		{
			width: 228px;
			float: left;
			margin: 12px;
			margin-left: -120px;
			border-left: none;
			padding-left: 0;
			color: darkgrey;
			text-align: right;
			font-size: 21px;
			line-height: 24px;
		}
		blockquote.pullquote+p
			{
				margin: 0;
				text-indent: 3em;
			}
		blockquote.pullquote p
			{
				margin: 0;
			}
.sidenote
	{
		display: block;
		position:absolute;
		left: -120px;
		width: 108px;
		text-indent: 0;
		font-size: 14px;
		line-height: 24px;
		text-align: right;
	}
.sidenote.alternate
	{
		left: 492px;
		text-align: left;
	}
q
	{
		quotes:"\201C" "\201D" "\2018" "\2019";
		font-style: italic;
	}
	q:before
		{
			content:open-quote;
		}
	q:after
		{
			content:close-quote;
		}

code
	{
		display: block;
		color: #c0c0c0;
		background-color: #0c0c0c;
		white-space: pre;
		margin: 12px;
		padding: 12px;
	}
var
	{
		font-style: italic;
	}
samp
	{
		color: #0c0c0c;
		background-color: #c0c0c0;
		line-height: 22px;
		font-family: "Courier New";
	}
kbd
	{
		color: #c0c0c0;
		background-color: #0c0c0c;
		line-height: 22px;
		font-family: "Courier New";
	}

h1, h2, h3, h4, h5, h6
	{
		margin-left: -60px;
	}

h1
	{
		font-size: 36px;
		line-height: 48px;
	}

h2
	{
		font-size: 24px;
		line-height: 1;
		margin-top: 1em;
	}
	
h3
	{
		font-size: 21px;
		line-height: 24px;
		margin-top: 48px;
	}

h4
	{
		font-size: 18px;
		line-height: 24px;
		margin-top: 24px;
	}

h5
	{
		font-size: 14px;
		line-height: 24px;
		margin-top: 24px;
	}

h6
	{
		font-size: 12px;
		line-height: 24px;
		margin-top: 24px;
	}
/**
 * figures
 **/

.figure
	{
		font-size: 12px;
		line-height: 24px;
		font-family: verdana;
		background: silver;
		overflow: hidden;
		margin: 12px 0;
	}
	.figure span
		{
			float: none;
			display: block;
			text-indent: 0;
			margin: -7px 12px 0;
		}
	.figure img
		{
			margin: 12px;
		}
	.figure.banner
		{
			min-width: 720px;
			max-width: 960px;
			margin: 24px 0;
			margin-left: -120px;
		}
	.figure.promo
		{
			width: 300px;
		}
	.figure.standalone
		{
			clear: both;
			width: 600px;
			margin: 24px 0;
			margin-left: -60px;
		}
	.figure.inset
		{
			width: 228px;
			float: right;
			clear: right;
			margin-right: -120px;
			margin-left: 12px;
		}
		.figure.inset.cutout
			{
				width: 228px;
				margin-right: -120px;
			}
		.figure.inset.alternate
			{
				float: left;
				margin-left: -120px;
				margin-right: 12px;
			}
			.figure.inset.alternate.cutout
				{
					margin-left: -120px;
				}
		.figure.promo.inset
			{
				width: 288px;
			}
	.figure.cutout
		{
			border: none;
			background: none;
		}
		.figure.cutout img,
		.figure.cutout span
		{
			margin: 0;
		}
		.figure.cutout span
			{
				margin-top: -7px;
			}
	.figure.code span
		{
			margin-top: 0;
		}