/*
	Websitenaam
	***********
	
	Stylesheet for screens by pasz.nl
*/

/*	Basic markup
	************/

html, body {
	margin:0;
	padding:0;
	font:14px/20px "Arial", sans-serif;
}

body {
	padding:0;
	color:black;
	text-align:center;
	background:white;
}



/*	Headings	*/
h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
	font-weight:bold;
  color:#00d2ff;
}

h1 {
	margin:0 0 10px 0;
	padding:7px 0 9px 16px;
	font-size:32px;
	line-height:35px;
	color:black;
	background:#00d2ff;
}

h2 {font-size:14px;line-height:30px;}
h3 {font-size:12px;line-height:15px;}

h1 a,
h2 a,
h3 a {
	text-decoration:none;
}

/*	Basic content	*/
p {
	margin:0 0 1.3em 0;
	padding:0;
}

p.big {
	font-size:24px;
	line-height:28px;
}

a {
	color:#00d2ff;
	text-decoration:underline;
}

a:active	{outline:none}
a:focus		{-moz-outline-style:none}

a:hover {
	text-decoration:none;
}

img {
	border:0;
	margin:0;
	padding:0;
}

ul {
	list-style:none;
	margin:0;
	padding:0;
}

ul li {
	display:block;
	margin:0;
	padding:0;
}



/*	Forms	*/
input.grayedOut {
	color:#979797;
	font-style:italic;
}



/*	Generic classes
	***************/

.displayNone	{display:none}
.displayInline	{display:inline}



/*	Buttons	*/
.btn {
	cursor:pointer;
	cursor:hand;	
}

.btn:active	{outline:none}
.btn:focus	{-moz-outline-style:none}



/*	Basic layout
	************/

#wrapper {
	position:relative;
	width:960px;
	margin:0 auto;
	padding:40px 0 0 0;
	text-align:left;
	background:repeat-y 100% 0 url(../gfx/bg_wrapper.gif);
}

#skipToNav {
	display:none;
}



/*	Logo	*/
#logo {
	display:block;
	position:absolute;
	top:10px;
	left:0;
	width:180px;
	height:20px;
	z-index:10;
	background:no-repeat 0 0 url(../gfx/logo_screen.gif);
}

#logo img {
	display:none;
}


/*	Header	*/
#header {
	position:absolute;
	top:0;
	left:0;
	width:960px;
	height:40px;
	z-index:5;
	overflow:hidden;
	background:white;
}

/*	Issue navigation	*/
#issueNav {
	position:absolute;
	top:0;
	right:190px;
	height:40px;
}

#issueNav h2 {
	margin:11px 39px 0 0;
	line-height:20px;
}

#btnPrevIssue,
#btnNextIssue {
	display:block;
	position:absolute;
	top:14px;
	right:17px;
	width:14px;
	height:14px;
	text-indent:-4096px;
	overflow:hidden;
	background:no-repeat 0 0 url(../gfx/btn_prev_issue.gif);
}

#btnNextIssue.disabled {
	background-position:0 -14px;
}

#btnNextIssue {
	right:1px;
	background-image:url(../gfx/btn_next_issue.gif);
}

/*	Search	*/
#searchForm {
	position:absolute;
	top:0;
	right:0;
	width:180px;
	height:40px;
	background:no-repeat 38px 9px url(../gfx/bg_search.gif);
}

#searchForm label {
	display:block;
	margin:11px 39px 0 0;
	font-weight:bold;
	line-height:20px;
}

#searchForm #searchKeyword {
	position:absolute;
	top:9px;
	left:38px;
	margin:0;
	padding:4px 0 6px 0;
	font-size:11px;
	line-height:14px;
	text-indent:8px;
	border:none;
	background:transparent;
}

/*	Navigation	*/
#nav {
	display:none;
	position:absolute;
	top:18px;
	left:190px;
}

#nav li {
	display:inline;
	margin:0;
	padding:0;
}

#nav li a {
	display:block;
	float:left;
	margin:0 6px 0 0;
	padding:0 0 0 6px;
	height:13px;
	font-size:11px;
	line-height:13px;
	text-decoration:none;
	color:#979797;
	background:no-repeat 0 3px url(../gfx/bg_nav_divider.gif);
}

#nav li.first-child a {
	padding:0;
	background:none;
}

#nav li a:hover,
#nav li.active a {
	color:black;
}



/*	Main	*/
#main {
	position:relative;
	width:770px;
	background:black;
}



/*	Acties	*/
#acties {
	position:absolute;
	top:40px;
	right:0;
	width:180px;
	margin:0;
	padding:0;
	list-style:none;
}

#acties li {
	position:relative;
	margin:0;
	padding:0;
}

#acties li a {
	text-decoration:none;
}

#acties li a strong {
	display:block;
	color:white;
	font-size:14px;
	line-height:16px;
	text-decoration:none;
	padding:7px 7px 7px 15px;
	background:black;
}

#acties li a span {
	display:block;
	position:absolute;
	bottom:9px;
	right:9px;
	width:66px;
	height:18px;
	text-indent:-4096px;
	background:no-repeat 0 0 url(../gfx/btn_klik_hier.png)
}

#acties li img {
	display:block;
}



/*	Page specific
	*************/

/*	Page: Front */
#pageFront {
	
}

#mainTop {
	min-height:300px;
}

#mainTop div.ankeiler {
	float:left;
	padding:12px 80px 12px 15px;
	cursor:pointer;
	cursor:hand;
	background:#00d2ff no-repeat 100% 50% url(../gfx/btn_to_top_story.gif);
}

#mainTop div.ankeiler h1 {
	font-size:24px
	line-height:25px;
	margin:0;
	padding:0;
	background:transparent;
}

#mainTop div.ankeiler h1 a {
	color:black;
}

#mainTop div.ankeiler p {
	line-height:16px;
	margin:0;
}

#mainBottom {
	width:761px;
	padding:40px 0 10px 9px;
	overflow:hidden;
	background:repeat-x 0 0 url(../gfx/bg_main_bottom.png);
}

/*	Onderkant van de front page	*/
#mainBottom div.blok {
	float:left;
	margin:0 10px 0 0;
	border:1px solid white;
	background:white;
}

#mainBottom div.blok h2 {
	height:30px;
	padding:0 11px;
	color:#00d2ff;
	background:black;
}

#mainBottom div.blok h2 span {
	color:white;
}

#mainBottom div.blok div.content {
	padding:12px 16px;
}

/*	Blok: Gezien	*/
#mainBottom #dezeWeek {
	width:469px;
}

#mainBottom #dezeWeek ul li {
	display:block;
	float:left;
	width:234px;
	border-top:1px solid black;
	border-right:1px solid black;
}

#mainBottom #dezeWeek ul li.noBorder {
	border-right:none;
}

#mainBottom #dezeWeek ul li a {
	display:block;
	height:65px;
	padding:10px 11px 0 11px;
	color:white;
	text-decoration:none;
	overflow:hidden;
	background:no-repeat 177px 48px url(../gfx/btn_lees.png);
}

#mainBottom #dezeWeek ul li.big {
	width:469px;
	border-right:none;
}

#mainBottom #dezeWeek ul li.big a {
	background-position:412px 48px;
}

#mainBottom #dezeWeek ul li a span {
	display:block;
	position:relative;
	top:-3px;
	font-size:11px;
	line-height:13px;
}

/*	Blok: Video	*/
#mainBottom #video {
	position:relative;
	width:268px;
	background:white no-repeat 10px 39px url(../gfx/bg_gehoord_descr.gif);
}



/*	Page: Article	*/
#pageArticle #main {
	color:white;
}

/*	Visual	*/
#pageArticle #visual {
	position:relative;
}

#pageArticle #visual img {
	display:block;
}

/*	Previous/Next story knoppen	*/
#btnPrevStory,
#btnNextStory {
	display:block;
	position:absolute;
	bottom:10px;
	height:14px;
	padding:0 0 0 18px;
	font-size:11px;
	line-height:14px;
	text-decoration:none;
	color:white;
	background:no-repeat 0 0 url(../gfx/pijl_links.png);
}

#btnPrevStory {
	float:left;
	left:10px;
}

#btnNextStory {
	float:right;
	right:10px;
	padding:0 18px 0 0;
	text-align:right;
	background:no-repeat 100% 0 url(../gfx/pijl_rechts.png);
}

/*	Text	*/
#pageArticle h1 {
	margin:0 0 10px 0;
	padding:7px 0 9px 16px;
	font-size:32px;
	line-height:35px;
	color:black;
	background:#00d2ff;
}


#articleFoto
{
	float         : left;
  width         : 675px;
	font-weight   : light;
	margin        : 0 20px 0 16px;
	padding       : 10px;
}

#articleFoto a.enlarge
{
	float          : left;
  width          : 200px;
  display        : block;
  text-align     : center;
	margin         : 0 20px 20px 0;
}

/*	Linker kolom: bodytext	*/
#articleText {
	float:left;
	width:445px;
	font-weight:light;
	margin:0 20px 0 16px;
}

/*	Intro	*/
#articleText #intro, #articleFoto #intro {
	font-size:18px;
	line-height:24px;
}

#articleText #credits, #articleFoto #credits {
	margin:0;
	padding:10px 0;
	color:#6d6d6d;
}

/*	Rechter kolom: Sidecontent (Foto's en video's etc)	*/
#articleSide {
	float:left;
	width:280px;
}

#articleSide a.enlarge {
	display:block;
	margin:0 0 10px 0;
}

#articleSide a.enlarge img {
	display:block;
	border:1px solid white;
}

/*	Articlefooter	*/
#articleFooter {
	position:relative;
	clear:both;
	width:445px;
	height:40px;
	padding:0 0 0 16px;
	font-size:11px;
	line-height:14px;
}

#articleFooter a.btnNextPage {
	display:block;
	float:left;
	height:14px;
	padding:0 20px 0 0;
	line-height:14px;
	text-decoration:none;
	color:white;
	background:no-repeat 100% 0 url(../gfx/pijl_rechts.png);
}

/*	Page navigation	*/
div.pageNav {
	position:absolute;
	top:0;
	right:0;
}

div.pageNav h2 {
	display:block;
	float:left;
	font-size:11px;
	line-height:14px;
	font-weight:normal;
	color:white;
}

div.pageNav ul {
	float:left;
	height:14px;
	margin:0;
	padding:0;
}

div.pageNav ul li {
	display:inline;
}

div.pageNav ul li a {
	display:block;
	float:left;
	width:15px;
	height:14px;
	margin:0 0 0 6px;
	text-align:center;
	font-size:11px;
	line-height:14px;
	color:white;
	text-decoration:none;
}

div.pageNav ul li.active a {
	color:black;
	background:#00d2ff;
}



/*	Page: Actie	*/
#pageActie {
	
}

#pageActie h1 {
	
}

#pageActie #intro {
	width:456px;
	padding:12px;
	margin:0 0 0 9px;
	font-size:16px;
	line-height:22px;
	color:white;
	border:1px solid white;
	background:repeat 0 0 url(../gfx/90_procent_zwart.png);
}

#pageActie #intro p:last-child,
#pageActie div.blok p:last-child {
	margin:0;
}

#pageActie strong {
	font-weight:normal;
	color:#00d2ff;
}

/*	Main bottom	*/
#pageActie #mainBottom {
	background:transparent;
}

/*	Instructies	*/
#pageActie #instructies {
	width:480px;
}

#pageActie #instructies p:first-child {
	margin:0;
}

/*	Kosten	*/
#pageActie #kosten {
	width:258px;
	margin:0;
}




/*	Upgrade your browser!	*/
html #upgrade {
	width:940px;
	margin:10px 0;
	padding:10px;
	color:white;
	text-align:left;
	border:2px dotted black;
	background:black;
}

html #upgrade h1 {
	line-height:24px;
	color:red;
	padding:0;
	background:black;
}

html #upgrade h2 {
	color:white;
}

html #upgrade p {
	margin:0 0 5px 0;
}

html #upgrade strong {
	color:#00d2ff;
}

html #upgrade ul li {
	display:block;
	float:left;
	margin:0 10px 0 0;
	border:1px solid silver;
}

html #upgrade ul li a {
	display:block;
	padding:5px 5px 5px 25px;
	text-decoration:none;
	color:white;
	background:no-repeat 7px 50% url(../gfx/btn_download.gif)
}


/*	Hacks
	*****/

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}
.clearfix {display:inline-block;}
/* start commented backslash hack \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* close commented backslash hack */