/**
  * Standaard-stylesheet voor STEMMENTRACKER
  *
  * @copyright 2008 Slik BV  * @version $Id$
  */

/* Copyright (c) 2009, Yahoo! Inc. All rights reserved.Code licensed under the BSD License:http://developer.yahoo.net/yui/license.txt version: 2.7.0 */
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

/* setting defaults */

table { border-collapse: collapse; border-spacing: 0; }
html { height: 100%; background: #f3f3f3; 
}
hr { display: none; }
h1 em, h2 em, h3 em, a.vote em, ul#procedure li em, td.myChoice em { display: none; }
span.clear { display: block; clear: both; }
h1, h2, h3, h4, h5 { font-family: 'Arial Narrow', 'Helvetica Narrow', sans-serif; }
strong { font-weight: bold; }
a { text-decoration: none; outline: none; cursor: url(../gfx/pencil.png), auto; }
.hidden { display: none !important; }


/* containers */
body { 
	overflow-y:scroll ; /* show vertical scrollbar in IE and FF (tested in IE8 en FF3.5)  */
	margin: 0; 
	background: #f3f3f3 url(../gfx/backgr_body.gif) repeat-x center top; 
	color: black; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 12px; 
	text-align: center;
	min-height: 100%;}
	#main {
		position: relative;
		text-align: left;
		width: 920px;
		margin: 0 auto; }
		#main #header {	height: 73px; margin: 0 15px; }
		#main #surveyContainer { background: url('../gfx/backgr_survey.gif') no-repeat center top; }
			#main #survey {
				background: white url('../gfx/backgr_survey2.gif') no-repeat center top;
				min-height: 354px; /* IE6: min-height replaced by height */
				margin: 0 15px; }
			#main #surveyBottom { background: url('../gfx/backgr_survey3.gif') no-repeat center top; height: 15px; }
		#main #surveyFooterContainer { background: url('../gfx/backgr_footer1.gif') no-repeat center top; }
			#main #surveyFooter {
				background: white url('../gfx/backgr_footer2.gif') no-repeat center top;
				min-height: 89px; /* IE6: min-height replaced by height */
				margin: 0 16px;
				position: relative; }
			#main #surveyFooterBottom { background: url('../gfx/backgr_footer3.gif') no-repeat center top; height: 3px; }
		#main #procedure {
			background: #ddd;
			height: 54px;
			margin: 18px 53px; }
		#main .text { padding-bottom: 30px; }
			#main .text.intro {
				float: left;
				width: 500px;
				padding-left: 53px; }
			#main .text.ipp {
				float: left;
				width: 270px;
				padding-left: 44px; }
			#main .text.whatsnext {
				float: left;
				width: 610px;
				padding-left: 80px; }
				body#scorespage .text.whatsnext {
					padding-left: 50px;
					width: 640px; }
			#main .text.networks {
				float: left;
				width: 170px;
				padding-left: 40px;	}
		#main .context { }
			#main .context .content {
				float: left;
				width: 500px;
				padding-left: 53px; }
			#main .context .multimedia {
				float: left;
				width: 270px;
				padding-left: 44px;
				margin-top:54px; }
		#main #resultContainer { background: url('../gfx/backgr_result.gif') no-repeat center top; }
			#main #result {
				background: white url('../gfx/backgr_result2.gif') no-repeat center top;
				min-height: 200px; /* IE6: min-height replaced by height */
				margin: 0px 15px 0 16px; }
			#main #resultBottom { background: url('../gfx/backgr_result3.gif') no-repeat center top; height: 15px; }
/* header */
#header h2 a {
	position: absolute;
	top: 20px;
	left: 28px;
	width: 229px;
	height: 32px;
	background: url('../gfx/logo_stemmentracker.gif') no-repeat; }
#header h3 {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	top: 29px;
	right: 17px; }
	#header h3 a { color: black; border-bottom: 2px solid #eee; }
		#header h3 a:hover { border-bottom: 2px solid #aaa;}
/* survey and result header */
#survey { position: relative; }
	#survey h1, #result h1 {
		font-family: 'Helvetica Narrow', 'Arial Narrow', sans-serif;
		width: 570px;
		padding: 30px 0 30px 40px;
		font-size: 40px;
		font-weight: bold; }
		#survey h1 span.count {
			display:block;
			color: #c6cad5; }
		#survey h1 span.controls {
			white-space: nowrap;
			display:inline;
			 }
			#survey h1 span.controls a {
				white-space: nowrap; 
				color: white;
				background: #c6cad5;
				vertical-align: middle;
				padding: 3px 8px;
				margin: 10px 0 0 0;
				font-size: 20px; }
				#survey h1 span.controls a.moreInfo { background: black; }
				#survey h1 span.controls a:hover { color: #65a90a; }
			#survey h1 span.count a.control { 
				background: #c6cad5;
				margin: 0 0 0 10px;
				font-size: 20px;
				padding: 3px 8px;
				color: white;
				vertical-align: middle; }
				#survey h1 span.count a.control:hover { color: #65a90a; }
				#survey h1 span.controls a#Skip { 
					position: relative;
					top:0.8em;
				}
	#survey a.vote {
		position: absolute;
		width: 160px;
		height: 160px;
		display:block;
		left: 696px;
		background: #ff9; }
		#survey a.vote.pro { top: 16px; background: transparent url('../gfx/button_voor.gif'); }
		#survey a.vote.con { top: 176px; background: transparent url('../gfx/button_tegen.gif'); }
			#survey a.vote:hover { background-position: 0 160px !important; }

/* textpage header */
body#textpage h1 { 
	color: white;
	width: 700px;
	font-size: 30px;
	padding: 100px 40px 0 40px; }
body#textpage h2 {
	color: white;
	width: 700px;
	padding: 0 40px; }
body#textpage #main #result { 
	min-height: 185px; /* IE6: min-height replaced by height */
	overflow: hidden; }
	body#textpage.uitleg #main #result { 
		background: url('../gfx/header_uitleg.jpg') no-repeat center top; height: 15px; }
	body#textpage.ippinfo #main #result { 
		background: url('../gfx/header_ipp.jpg') no-repeat center top; height: 15px; }

/* frontpage: procedure */
ul#procedure {
	background: #d7d7d7;
	border: 1px solid #b2abab; }
	ul#procedure li, ul#procedure li a { display: block; float: left; height: 52px;  }
		ul#procedure li.step1 a { background: url('../gfx/procedure_step1.gif') no-repeat; width: 222px; }
		ul#procedure li.step2 { background: url('../gfx/procedure_step2.gif') no-repeat; width: 239px; }
		ul#procedure li.step3 { background: url('../gfx/procedure_step3.gif') no-repeat; width: 350px; }
		
/* frontpage : text */
.text { line-height: 150%; }
.text h2, .text h3 {
	font-family: 'Helvetica Narrow', 'Arial Narrow', sans-serif;
	font-weight: bold;
	font-size: 18px;
	margin: 10px 0 12px 0; }
.text a {
	padding: 0 2px 1px 2px;
	background: black;
	color: white; }
	.text.ipp { background: url('../gfx/logo_ipp.gif') no-repeat right top;}
	.text.ipp a { background: #c6cad5; }
	.text a:hover { background: #65a90a; }
	
/* question : progress bar */
dl.bar { height: 20px; }
	dl.bar.progress {
		position: absolute;
		top: 30px;
		right: 17px;
		height: 20px; }
	dl.bar dt {
		display: block;
		float: left;
		clear: left;
		padding: 0; }
		dl.bar.progress dt { width: 60px; }
		dl.bar.scores dt { width: 90px; height: 20px; }
			dl.bar.scores dt.myvote { font-weight: bold; }
	dl.bar dd { /* IE6: added overflow: hidden */
		display: block;
		float: left;
		height: 14px;
		background: #e7e6e6;
		border: 1px solid white; }
		dl.bar.progress dd { width: 210px; }
		dl.bar.scores dd { width: 479px; }
			dl.bar.scores dd.myvote { background: white; border: 1px solid #e5e5e5;}
		
/* question : context */
.context { line-height: 150%; text-align: justify; }
.context h2, .context h3 {
	font-family: 'Helvetica Narrow', 'Arial Narrow', sans-serif;
	font-weight: bold;
	font-size: 20px;
	margin: 20px 0 7px 0; }
.context a {
	padding: 0 2px 1px 2px;
	color: #797979;
	text-decoration: underline; }
	.context a:hover { background: #65a90a; }
.context p {
	margin: 10px 0 20px 0;
}
.context ul li {
	display: block;
	padding: 2px 2px 2px 23px;
	background: url('../gfx/bullet_pencil.gif') no-repeat 0 9px; }
	.context ul li a { color: #777; text-decoration: none; }
	.context ul li:hover a {
		color: black;
		background: transparent; } 

/* question: surveyFooter */
#surveyFooter a.vote {
	position: absolute;
	width: 64px;
	height: 64px;
	display:block;
	top: 10px;
	background: #ff9; }
	#surveyFooter a.vote.pro { right: 98px; background: transparent url('../gfx/button_voor_footer.gif'); }
	#surveyFooter a.vote.con { right: 34px; background: transparent url('../gfx/button_tegen_footer.gif'); }
		#surveyFooter a.vote:hover { background-position: 0 64px !important; }
#surveyFooter h1 {
		font-family: 'Helvetica Narrow', 'Arial Narrow', sans-serif;
		width: 680px;
		padding: 13px 0 23px 40px;
		font-size: 24px;
		font-weight: bold; }
		#surveyFooter h1 span.count {
			color: #c6cad5; }
		#surveyFooter h1 a {
			color: white;
			background: #c6cad5;
			vertical-align: middle;
			padding: 3px 8px;
			margin: 10px 0 0 10px;
			font-size: 16px; }
			#surveyFooter h1 a:hover { color: #65a90a; }

/* question : page navigation */
ul#pages {
	padding: 20px 17px 0 51px;
	height: 50px; }
	ul#pages li {
		display: block;
		float: left;
		margin-right: 5px; }
		ul#pages li a {
			font-size: 10px;
			font-weight: bold;
			display: block;
			float: left;
			width: 23px;
			text-align: center;
			padding: 6px 0;
			background: white;
			border: 1px solid #e5e5e5;
			color: black; }
			ul#pages li.current a { background: #e5e5e5; }
			ul#pages li.finished a { background: black; color: white; }
			ul#pages li a:hover { background: #65a90a; border: 1px solid #d0380a; color: white; }
/* results: header */
#result h1 { /* see #survey h1 for styling */ 
	padding: 10px 0 17px 40px; }
#result h2 { 
	font: bold 20px 'Helvetica Narrow', 'Arial Narrow';
	color: #6d7078;
	padding: 30px 0 0 40px; }
#result img.logo { float: right; padding: 28px; }
#result span.controls { padding-left: 40px;
		padding-bottom:10px;
		clear: both;
		display: block; }
	#result span.controls a {
				font-weight: bold;
				color: white;
				background: #c6cad5;
				vertical-align: middle;
				padding: 3px 8px;
				margin-right: 5px;
				font-size: 14px; }
				#result span.controls a.compare { background: black; }
				#result span.controls a:hover { color: #65a90a; }

/* results : table */
table#surveyResults {
	background: #f3f3f3;
	border-collapse: separate;
	border-spacing: 5px;
	position: relative;
	width: 904px;
	margin: 20px auto; }
	table#surveyResults th, table#surveyResults td { padding: 5px; vertical-align: top;}
	table#surveyResults th {
		font-family: 'Helvetica Narrow', 'Arial Narrow', sans-serif;
		font-weight: bold;
		font-size: 14px;
		text-align: center; }
		table#surveyResults th.count { font-size: 24px; }
		table#surveyResults th.first { text-align: left; }
	table#surveyResults td.fit { 
		background: white url('../gfx/backgr_result_fit.gif') repeat-y center top;
		padding: 6px 37px;
		font-size: 10px; }
		table#surveyResults td.fit p.left { float: left; }
		table#surveyResults td.fit p.right { float: right; }
	table#surveyResults td.question { 
		width: 172px; 
		background: #b3b3b3 url('../gfx/backgr_results_question.gif') repeat-x center top;
		border: 1px solid white;}
	table#surveyResults td.myChoice { width: 60px; }
		table#surveyResults td.myChoice.pro { background: url('../gfx/button_voor_small.gif') no-repeat 5px 6px; }
		table#surveyResults td.myChoice.con { background: url('../gfx/button_tegen_small.gif') no-repeat 5px 6px; }
	table#surveyResults td.resultDetail { 
		width: 44px; 
		height: 78px;
		text-align: center;
		background: url('../gfx/backgr_opinion_same6.gif') no-repeat center top; }
		table#surveyResults td.resultDetail.pro { background-image: url('../gfx/backgr_opinion_pro.gif'); }
		table#surveyResults td.resultDetail.con { background-image: url('../gfx/backgr_opinion_con.gif'); }
		table#surveyResults span.choice {
			display: block;
			padding: 8px 0 44px 0;
			color: black;
			text-transform: lowercase; }
			table#surveyResults a:hover {
				background: #ff9; }
		/* loose the relevance gradient
		table#surveyResults td.resultDetail.same0 { background-image: url('../gfx/backgr_opinion_same0.gif'); }
		table#surveyResults td.resultDetail.same1 { background-image: url('../gfx/backgr_opinion_same1.gif'); }
		table#surveyResults td.resultDetail.same2 { background-image: url('../gfx/backgr_opinion_same2.gif'); }
		table#surveyResults td.resultDetail.same3 { background-image: url('../gfx/backgr_opinion_same3.gif'); }
		table#surveyResults td.resultDetail.same4 { background-image: url('../gfx/backgr_opinion_same4.gif'); }
		table#surveyResults td.resultDetail.same5 { background-image: url('../gfx/backgr_opinion_same5.gif'); }
		/*
/* results : networks */
#main .text.networks a { background: transparent; color: black; }
	#main .text.networks img { padding-right: 4px; }
		#main .text.networks img.mini { padding: 6px 0 0 15px; }
/* puff bubbles */
.resultInfo { position: relative; }

/* Bubble pop-up */
.popup { /* IE6+7: replace .png for .gif versions to allow animation+transparency */
	position: absolute;
	display: none;
	text-align: left;
	z-index: 5;
	width: 373px;
	min-height: 200px; /* IE6: min-height replaced by height */
	padding-bottom: 49px;
	background: url('../gfx/popup_bottom.png') no-repeat center bottom; }
	.popup h3 { background: url('../gfx/popup_header.png') no-repeat center top; width: 373px; height: 43px; }
	.popup .popupText { 
		background: url('../gfx/backgr_popup.png') repeat-y center top; 
		width: 333px; 
		padding: 0 20px; 
		min-height: 157px; /* IE6: min-height replaced by height */ }
		.popup .popupText img { float: right; padding: 6px; }
		.popup dl { padding: 12px 0; }
			.popup dt { display: block; float: left; width: 80px; }
			.popup dd.pro { font-weight: bold; color: #65a90a; }
			.popup dd.con { font-weight: bold; color: #d0380a; }
			
/* Result, more then one */
#result .stemadvies .partieSmall
{
	padding: 10px 0 0 40px;
	float: left;
}