/**
 * Fork Onsite reset
 * @author	Johan Ronsse <johan@netlash.com>
 * Based on Netlog reset and Eric Meyer's reset
 */

body, form, fieldset, ol, ul, dl, li, dt, dd, td, th ,tr, h1, h2, h3, h4, h5, h6, p, pre, blockquote, address { margin: 0; padding: 0; }
ol, ul { list-style:none; }
img, fieldset { border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table {  border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

/**
 * Stylesheet for <Best of 2008>
 * @author	Johan Ronsse <johan@netlash.com>
 */

html, body {
	height: 100%;
}

body {
	font-family: Georgia, serif;
	font-size: 16px;
	line-height: 1.5;
	color: #333;
	background: #EEE;
}

	#film p, #music p, #catalog p {
		font-family: Arial, sans-serif;
		font-size: 13px;
		line-height: 1.8;
		color: #A6A6A6;
	}
		#music p {
			color: #333;
		}

#container {
	width: 960px;
	border-right: 1px solid #AAA;
	background: white;
}

	#film #container, #catalog #container { border-right-color: #333; }
	#home #container { border-right: none; }
	#home { background: #FFF; }
	
	.colorInverse #container {
		background: black;
	}

.colorInverse {
	color: #CDCDCD;
	background: black;
}

h1, h2, h3, h4 {
	color: #000;
	font-family: "Helvetica", Arial, sans-serif;
	font-weight: 700;
}

h3 {
	font-size: 16px;
}

.colorInverse h1,
.colorInverse h2,
.colorInverse h3,
.colorInverse h4 {
	color: #FFF;
}

h1 {
	font-size: 72px;
	line-height: 1;
}

	#list h1 { color: #999; }
	#film h1 { text-transform: uppercase; }
	#home h1 {
		padding: 0 0 20px;
		margin: 0 0 20px;	
		font-size: 36px;
		white-space: nowrap;
	}
	h1 span {
		font-size: 16px;
	}

hr {
	display: none;
}

div.hr {
	margin: 20px 0;
	border-top: 1px solid #CCC;
}
.colorInverse div.hr {
	margin: 12px 0;
	border-top: 1px solid black;
}
	
#intro {
	margin: 0 0 20px;
}


	#intro .col-7 {
		padding-top: 27px;
		padding-bottom: 27px;
	}
	
	#typography #intro .col-7 { background: #000 url(../images/elementsof.gif) no-repeat 655px 17px; }
	#music #intro .col-7 { background: #000 url(../images/lastgraph.jpg) no-repeat; }
	
	#intro p {
		text-indent: 0;
	}
	
	#typography #intro p { width: 580px; }
	#music #intro p { width: 460px; }
	#film #intro p { width: 340px; font-family: "HelveticaNeue-Light","HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 23px; color: #FFF; font-weight: 100; line-height: 34px; padding-bottom: 8px;}
	
	.navigation {
		padding: 15px 0;
	}
	
	#bottom {
		padding: 60px 0;
		clear: both;
	}

h4 {
	font-size: 16px;
}

	h4 span {
		text-transform: uppercase;
	}
	
	h4 span.marked {
		text-transform: none;
		background: yellow;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
	}

	p.caption {
		text-align: left;
		text-indent: 0;
		padding: 0 0 20px;
	}
	
		p.caption strong {
			color: #000;
		}
	
	#film p.caption {
		text-align: right;
		color: #FFF;
		position: relative;
		font-weight: 700;
		left: 20px;
	}

small {
	font-family: Arial, sans-serif;
	font-size: 11px;
	line-height: 14px;
	display: inline-block;
}

p {
	text-indent: 20px;
	/*text-align: justify;*/
}

	p em {
		font-family: Georgia, serif;
	}
	
	p.notes {
		font-family: Arial, sans-serif;
		font-size: 13px;
		line-height: 1.84;
		color: #666;
	}

.entry p:first-child,
.entry h3 + p,
.entry h3 + img + p,
.entry blockquote + p,
.entry blockquote p,
.entry ul + p,
.entry pre + p,
.entry h4 + p,
.entry table + p,
.entry ul p + p,
.entry object + p,
.entry embed + p,
.entry p.caption + p,
.entry .hr + p {
	text-indent: 0;
}

/* Links */
a:link { text-decoration: none; border-bottom: 1px solid #ABABF9; }
a:visited { text-decoration: none; border-bottom: 1px solid #C7B4D9; /* 33% of original visited color */ }
a:hover, a:active { color: #000; border-bottom: 1px solid #ABABAB; }

/* Links when color inversed */
.colorInverse a:link { color: yellow; border-bottom: 1px solid #545400; }
.colorInverse a:visited { color: yellow; border-bottom: 1px solid #545400; }
.colorInverse a:hover, .colorInverse a:active { color: #FFF; border-bottom: 1px solid #ABABAB; }


#music .colorInverse a:link { color: #33d759; border-bottom: 1px solid #2ea349; }
#music .colorInverse a:visited { color: #33d759; border-bottom: 1px solid #2ea349; }

.noUnderlines a {
	border: none;
}

.col { width: 100px; padding-right: 20px; float: left; }
.col-2 { width: 220px; }
.col-3 { width: 340px; }
.col-4 { width: 460px; }
.col-5 { width: 580px; }
.col-6 { width: 700px; }
.col-7 { width: 820px; }
.col-8 { width: 940px; }
.last { padding-right: 0; }
.first { padding-left: 20px; }


#header {
	padding: 30px 0;
}

	#header .last h4 {
		text-align: right;
		padding-right: 54px;
	}

	#home #header .last h4 { background: url('../images/number_home.gif') no-repeat scroll right 50%; }
	#typography #header .last h4 { background: url('../images/number.gif') no-repeat scroll right 50%; }
	#music #header .last h4 { background: url('../images/number2.gif') no-repeat scroll right 50%; }
	#film #header .last h4 { background: url('../images/number3.gif') no-repeat scroll right 50%; }
	#reading #header .last h4 { background: url('../images/number4.gif') no-repeat scroll right 50%; }
	#catalog #header .last h4 { background: url('../images/number5.gif') no-repeat scroll right 50%; }

	#reading ul li a {
		height: 100px;
		margin: 0 0 20px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		-webkit-transition: background-color 0.3s linear;
		padding: 0;
		display: block;
		background-color: #FFF;
		border: none;
	}
	
	#reading ul li a:first-line {
		font-family: "Lucida Sans", Arial, serif;
		color: #000;
		font-size: 11px;
		font-weight: 700;
	}
 
	#reading ul li a:hover,
	#reading ul li a:active {
		background-image: url(../images/overlay.png);
	}
	
	#reading ul li a b {
		font-family: Georgia, serif;
		font-weight: 300;
		font-size: 15px;
		border-bottom: 1px solid #DDD;
	}
	
	#reading ul li a:link b { border-bottom: 1px solid #ABABF9; }
	#reading ul li a:visited b { border-bottom: 1px solid #C7B4D9; }
	#reading ul li a:hover b, #reading ul li a:active b { color: #000; border-bottom: 1px solid #ABABAB; }

	#reading ul li em {
		font-family: Georgia;
		font-weight: 300;
	}

		#reading p.notes, #film p.notes, #music p.notes {
			font-size: 11px;
		}
		
		#film p.notes {
			color: #CDCDCD;
		}
		
		#music p.notes {
			text-indent: 0;
			padding-top: 20px;
		}

#reading #intro {
	font-size: 13px;
	font-family: Arial, sans-serif;
	color: #000;
}

#reading #intro p + p {
	padding: 0 0 20px;
	font-size: 11px;
	font-family: "Lucida Sans", Georgia, sans-serif;
	font-style: italic;
	color: #666;
	text-indent: 0;
}

.nt {
	text-indent: 0 !important;
}

#gallery img, #gallery a {
	display: block;
	border: none;
}

#gallery a:link img,
#gallery a:visited img {
	opacity: 0.76;
	-webkit-transition: opacity 0.4s ease-in-out;
}

#gallery a:hover img,
#gallery a:active img {
	opacity: 1;
}

#catalog #gallery .cols {
	padding: 0 0 20px;
}

	#catalog  #gallery .first {
		width: 240px;
		padding-left: 0;
	}

/**
 * = Clearfix
 * ----------------------------------------------------------
 * @see http://www.positioniseverything.net/easyclearing.html
 */

.clearfix:after, .cols:after, .gridholder:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#music #albums p {
	text-align: right;
}
tr td {
	background: yellow;
}

tr.odd td {
	background: white;
}

table.datagrid {
	width: 100%;
}

table.datagrid td,
table.datagrid th {
	font-family: Arial, sans-serif;
	font-size: 13px;
	height: 22px;
	line-height: 22px;
	padding: 0 10px 0 0;
}

	table.datagrid td {
		font-weight: 700;
	}
	table.datagrid td.value {
		font-family: Georgia, serif;
		font-size: 11px;
		text-align: right;
		font-weight: 300;
	}
	table.datagrid th {
		font-size: 11px;
		text-transform: uppercase;
	}
	
	table.datagrid th span {
		visibility: hidden;
	}
	
	.gridholder #gridLeft {
		width: 460px;
		float: left;
	}
	
	.gridholder #gridLeft td:first-child {
		padding-left: 104px;
	}
	
	.gridholder #gridRight {
		width: 270px;
		float: left;
	}
	
	.gridholder {
		position: relative;
		margin: 30px 0;
	}
	
	.gridholder img {
		position: absolute;
		top: 0;
		left: 20px;
	}
	
	#hatTip {
		position: relative;
	}
	#hatTip img {
		position: absolute;
		right: -28px;
		top: 0;
	}
	
	/*Experimental*/
	w {
		display: block;
		float: left;
		clear: left;
		text-indent: 0;
	}
	#home h1 img {
		position: relative;
		top: 11px;
	}
	
	
#catalog #intro {
	padding: 20px;
	width: 500px !important;
}