/* waarben.ik.nu 2010 design
----------------------------------------------------------

@package:	waarben.ik.nu 2010	
@Author: 	Tim Benniks <tim@timbenniks.com>
@Created: 	08-12-2009

---------------------------------------------------------- */

body {
	background: #191919;
	color: #eee;
	font: 13px/20px "Georgia", Times, serif; /* 20px grid (5 - 10 - 15 - 20 - 25 - 30) */
	letter-spacing: .03em;
}

header, article, aside, video, figure, footer, nav {
	display: block !important;
}


/* Typography
---------------------------------------------------------- */

h1 {
	font-size: 33px;
	line-height: 1;
	font-weight: normal;
	letter-spacing: -.01em;
	font-style: normal;
	font-family: Helvetica, Arial, serif;
	margin: 0 0 15px 0;
}
	
h2 {
	color: #fff;
	font-size: 21px;
	line-height: 25px;
	margin: 0 0 10px 0;
}

	h2 a,
	h2 a:focus {
		color: #fff;
		border: none;
	}
	
	h2 a:hover {
		border: none;
	}

h3 {
	margin: 0;
	font-size: 12px;
	line-height: 20px;
	color: #bbb;
	font-style: normal;
	font-weight: normal;
}

a, a:focus {
	color: #88b5d7;
	text-decoration: none;
	
}

a:hover {
	color: #bbb;
}

p {
	margin: 0 0 20px 0;
}

p.chapeau {
	margin: 0;
	font-size: 12px;
	color: #fff;
	line-height: 20px;
	font-style: normal;
}

p.important:first-letter,
p.intro:first-letter {
	font-size: 43px;
	font-weight: normal;
	line-height: 32px;
	letter-spacing: 5px;
	float: left;
	padding: 5px 0 0 0;
	width: auto;
	font-family: Georgia, Times, serif;
}

p.intro:first-line,
p.important:first-line {
	font-variant: small-caps;
	font-size: 14px;
	text-transform: lowercase;
}

p.link-under-title {
	margin: -10px 0 10px 0;
	font-size: 11px;
	line-height: 1;
}

#sidebar {
	font-size: 12px;
}


/* Grid
---------------------------------------------------------- */

.zp-wrapper {
	width: 960px;
	background: #111;
	border: solid #000;
	border-width: 0 1px 1px;
}

#content-area {
	padding: 0 15px 15px;
}

	.padding {
		padding: 0 70px 0 0;
	}


/* Header
---------------------------------------------------------- */

header {
	position: relative;
	display: block;
	height: 350px;
	width: 960px;
	margin: 0 0 35px 0;
}

header img {
	position: absolute;
	top: 0;
	left: 0;
}

header #image-top-overlay {
	height: 12px;
	width: 960px;
	background: transparent url(../images/quote_bg.png);
	position: absolute;
}

header blockquote {
	position: absolute;
	color: #fff;
	top: 45px;
	left: 30px;
	font-weight: normal;
	width: 600px;
	background: transparent url(../images/quote_bg.png);
	margin: 0;
	padding: 2px 0 2px 3px;
	border: none;
	font-style: normal;
	font-size: 28px;
	letter-spacing: .03em;
	line-height: 1;
}

	header blockquote .begin-quote {
		float: left;
		display: block;
		width: 12px;
	}

	header blockquote .quote {
		float: left;
		display: block;
		width: 585px;
	}
	
		header blockquote a {
			color: #fff;
		}
		
		header blockquote a:hover {
			color: #bbb;
		}

	header blockquote .quote-meta {
		font-size: 15px;
		line-height: 20px;
		display: block;
		margin: 0 0 0 15px;
		letter-spacing: .009em;
	}


/* navigation
---------------------------------------------------------- */

#navigation {
	background: transparent url(../images/nav_bg.png);
	height: auto;
	position: absolute;
	bottom: 0;
	width: 960px;
}

#navigation li {
	display: inline;
}

	#navigation li a {
		display: block;
		float: left;
		margin: 0 0 0 15px;
		padding: 3px 0 0 0;
		color: #fff;
		text-decoration: none;
		text-transform: uppercase;
		font-family: Helvetica, arial, sans-serif;
		border: none;	
		font-weight: bold;
		line-height: 33px;
		height: 33px;
	}

		#navigation li a:hover {
			color: #88b5d7;
		}


/* Footer
---------------------------------------------------------- */

footer {
	width: 960px; 
	margin: 0 auto;
	font-family: Helvetica, arial, sans-serif;
	color: #666;
	line-height: 15px;
	padding: 5px 0 15px 0;
	font-size: 11px;
	letter-spacing: 0.003em;
}

	footer a,
	footer a:focus {
		color: #666;
		border-bottom: 1px dotted #666;
	}


/* Misc
---------------------------------------------------------- */

#ie6-upgrade {
	padding: 5px 10px;
}

#ie6-upgrade h4 {
	color: #000;
	font-weight: bold;
}

#ie6-upgrade a {
	color: #000;
	text-decoration: underline;
	border: none;
}

	#ie6-upgrade a:hover {
		border: none;
		color: #444;
	}
	
header embed,
header object,
header video {
	width: 960px !important;
	height: 350px !important;
}

	.home header embed,
	.home header object,
	.home header video {
		width: 960px !important;
		height: 450px !important;
	}


/* images
---------------------------------------------------------- */

ul.images-list {
	margin: 0 0 20px 0;
}

	ul.images-list li {
		margin: 0 0 20px 0;
		position: relative;
	}
	
		ul.images-list li img {
			display: block;
			margin: 0;
			float: none;
		}
		
		.image-caption {
			position: absolute;
			bottom: 0;
			background: url(../images/quote_bg.png);
			display: block;
			width: 402px;
			padding: 1px 0 0 5px;
			font-size: 11px;
			line-height: 19px;
		}


/* lists
---------------------------------------------------------- */

ul.list {
	margin: 0 0 20px 0;
}

	ul.tags-list li {
		margin: 0;
		font-size: 12px;
		line-height: 20px;
	}
	
ul.shouts-list {
	margin: 0 0 20px 0;
}

	ul.shouts-list li {
		margin: 0 0 20px 0;
	}

	ul.shouts-list li .tweet-date-time {
		font-style: italic;
		font-size: 11px;
		color: #999;
	}

ul.items-list li.item {
	height: 190px;
	margin: 0 0 50px 0;
}

	ul.items-list li.item p.summary {
		margin: 0;
	}

	ul.items-list li.item img {
		float: none;
		margin: 0;
	}

	ul.items-list li.item:last-child {
		margin: 0;
	}


	.photos ul.items-list li.item {
		margin: 0 0 10px 0;
	}


ul.pager li {
	display: inline;
}


/* Pages
---------------------------------------------------------- */

.home #navigation,
.list #navigation,
.page #navigation {
	z-index: 500;
}

.home header {
	height: 450px;
}

	.home header blockquote {
		top: 60px;
		left: 60px;
	}

	.home .padding,
	.list .padding {
		padding: 0 40px 0 0;
	}

.home header figure {
	position: relative;
	display: block;
	width: 960px;
	height: 450px;
}

.home .left-arrow,
.home .right-arrow {
	width: 50px;
	height: 50px;
	background: transparent;
	position: absolute;
	bottom: 100px;
	z-index: 9999;
	cursor: pointer;
	color: #fff;
	font: 27px/27px sans-serif;
	bottom: 120px;
}

.home .left-arrow {
	left: 20px;
	background: url(../images/mediaviewer_left.png);
}

.home .right-arrow {
	right: 20px;
	background: url(../images/mediaviewer_right.png);
}

.home .media-item {
	display: none;
}

	.photos .photo {
		position: relative;
	}
	
	.photos .big-caption .image-caption {
		width: 295px;
		font-size: 20px;
		line-height: 30px;
		bottom: 0;
	}
	
		.photos .small-caption .image-caption {
			width: 295px;
			font-size: 11px;
			line-height: 18px;
			bottom: 0;
		}

	.photos .photo .image-caption a,
	.photos .photo .image-caption a:focus {
		color: #fff;
		border: none;
	}
	
	.photos .photo .image-caption a:hover {
		border: none;
		color: #bbb;
	}


/* Maps
------------------------------------------------- */

.maps-dialog {
	background: transparent url(../images/quote_bg.png);
	padding: 10px;
	font-size: 12px;
	line-height: 15px;
	color: #fff;
	-webkit-box-shadow: 0 4px 8px #000;
	-moz-box-shadow: 0 4px 8px #000;
	box-shadow: 0 4px 8px #000;
}
	
	.maps-dialog-content a {
		color: #ccc;
		border-color: #ccc;
	}

.maps-dialog h3 {
	line-height: 15px;
	font-size: 15px;
	color: #fff;
}
	
.maps-dialog img {
	position: static;
	margin: 10px 0 0 0;
}
	

/* fancybox - crap thats a lot of css...
------------------------------------------------- */

div#fancy_overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 600;
}

div#fancy_loading {
	position: absolute;
	height: 40px;
	width: 40px;
	cursor: pointer;
	display: none;
	overflow: hidden;
	background: transparent;
	z-index: 100;
}

div#fancy_loading div {
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 480px;
	background: transparent url(../images/fancy_progress.png) no-repeat;
}

div#fancy_outer {
	position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
    z-index: 800;
}

div#fancy_inner {
	position: relative;
	width: 100%;
	height: 100%;
	background: #222;
}

div#fancy_content {
	margin: 0;
	z-index: 100;
	position: absolute;
}

div#fancy_div {
	background: #000;
	color: #FFF;
	height: 100%;
	width: 100%;
	z-index: 100;
}

img#fancy_img {
	position: absolute;
	top: 0;
	left: 0;
	border:0; 
	padding: 0; 
	margin: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
}

#fancy_frame {
	position: relative;
	width: 100%;
	height: 100%;
	display: none;
}

#fancy_ajax {
	width: 100%;
	height: 100%;
	overflow: auto;
}

a#fancy_left, a#fancy_right {
	position: absolute; 
	bottom: 0px; 
	height: 100%; 
	width: 35%; 
	cursor: pointer;
	z-index: 111; 
	display: none;
	background-image: url("data:image/gif;base64,AAAA");
	outline: none;
	overflow: hidden;
}

a#fancy_left {
	left: 0px; 
}

a#fancy_right {
	right: 0px; 
}

span.fancy_ico {
	position: absolute; 
	top: 50%;
	margin-top: -15px;
	width: 50px;
	height: 50px;
	z-index: 112; 
	cursor: pointer;
	display: block;
}

span#fancy_left_ico {
	left: 20px;
	background: transparent url(../images/mediaviewer_left.png);
}

span#fancy_right_ico {
	right: 20px;
	background: transparent url(../images/mediaviewer_right.png);
}

#fancy_bigIframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
}

div#fancy_bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}
	
div.fancy_bg {
	position: absolute;
	display: block;
	z-index: 70;
	border: 0;
	padding: 0;
	margin: 0;
}

div#fancy_bg_n {
	top: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent url(../images/fancy_shadow_n.png) repeat-x;
}

div#fancy_bg_ne {
	top: -20px;
	right: -20px;
	width: 20px;
	height: 20px;
	background: transparent url(../images/fancy_shadow_ne.png) no-repeat;
}

div#fancy_bg_e {
	right: -20px;
	height: 100%;
	width: 20px;
	background: transparent url(../images/fancy_shadow_e.png) repeat-y;
}

div#fancy_bg_se {
	bottom: -20px;
	right: -20px;
	width: 20px;
	height: 20px;
	background: transparent url(../images/fancy_shadow_se.png) no-repeat;
}

div#fancy_bg_s {
	bottom: -20px;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent url(../images/fancy_shadow_s.png) repeat-x;
}

div#fancy_bg_sw {
	bottom: -20px;
	left: -20px;
	width: 20px;
	height: 20px;
	background: transparent url(../images/fancy_shadow_sw.png) no-repeat;
}

div#fancy_bg_w {
	left: -20px;
	height: 100%;
	width: 20px;
	background: transparent url(../images/fancy_shadow_w.png) repeat-y;
}

div#fancy_bg_nw {
	top: -20px;
	left: -20px;
	width: 20px;
	height: 20px;
	background: transparent url(../images/fancy_shadow_nw.png) no-repeat;
}

div#fancy_title {
	position: absolute;
	z-index: 1000;
	display: none;
	background: url(../images/quote_bg.png);
	padding: 0 5px;
}


/* Comments */

#comments-form label {
	color: white;
	font-size: 100%
}


#comments-form input {
	background-color: #eee;
	width: 88%;
}

textarea {
	font-family: "Lucida Grande", helvetica, sans-serif;
	background-color: #eee;
	width: 95%
}

fieldset {
	border: solid #888;
	border-width: 0 0 2px 0;
	padding: 0;
}


.comments-list {
	margin: 0 0 18px 0;
}

	.comments-list li {
		padding: 6px;
		border-bottom: 2px solid #ccc;
		margin: 0 0 18px 0;
		background: #222;
	}
	
	.comments-list li p.comment-meta,
	.comments-list li p.comment-body {
		font-size: 11px;
		margin: 0;
	}
	
	.comments-list li p.comment-meta {
		margin: 0 0 6px 0;
		color: #888;
	}
	
	.comments-list li img {
	    border: 1px solid #ccc;
	}
	
.z_validation_message {
	display: none;
}