/* CSS Document */

* {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

body {
	background-color: blue;
}

h1, h3 {
	font-weight: bold;
	font-size: 20px;
	margin: 0px;
	margin-bottom: 5px;
	color: white;
}

h3 {
	font-size: 16px;
}

.slider_container {
	width: 100%;
}
		
	.animate_container:after {
			clear: both;
			content: " ";
			display: block;
			height: 0;
			visibility: hidden;
	}
	.animate_container {
			margin: 0 auto;
			padding: 0;
			position: relative;
			width: 960px;
			height: 350px;
	}
	
	.slide {
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
	}
	
	.total_container .left, .slide .left,
	.total_container .right, .slide .right {
		float: left;
		position: relative;
		width: 50%;
		height: 160px;
	}
	
		.legenda {
			float: left;
			margin-bottom: 10px;
		}
	
		.total_container .legenda_box {
			width: 30px;
			height: 30px;
			border: 1px solid white;
			float: left;
		}
		
		.total_container p {
			width: 240px;
			float: left;
			margin: 0px;
			margin-left: 10px;
		}
	
	
.slide {
	color: white;
	height: 200px;
}

	.start_btn_container {
		width: 100%;
		float: left;
		margin-top: 20px;
	}
	
	.start_btn {
		width: 295px;
		height: 65px;
		background: none;
		background-image: url(../images/button_bg.png);
		background-repeat: no-repeat;
		color: #4b4b4b;
		font-size: 18px;
		font-weight: bold;
		border: none;
		float: left;
	}
	
.stappen_slide,
.contact_slide {
	display: none;
}

	.stappen_slide .text {
		width: 200px;
		float: left;
	}

	.stappen_slide .month_val,
	.stappen_slide .year_val {
		display: none;
	}
	
.stappen_list_slide {
	display: block;
	float: left;
	width: 50%;
	position: relative;
}

.list_title {
	width: 100%;
	float: left;
	color: white;
	font-size: 20px;
	display: none;
}

.fullwidth {
	width: 100%;
	float: left;
}

	.bar_container {
		width: 200px;
		position: absolute;
		bottom: 0px;
	}
	
		.bar_container .bar {
			width: 100px;
			height: 10px;
			float: left;
			margin-right: 20px;
			width: 68px;
		}
		
		.bar_container .bar.green {
			background-color: green;
		}
			
		.bar_container .bar.red {
			background-color: red;
		}
		
.four_bar_container, .total_container {
	display: none;
}

.four_bar_container {
	width: 600px;
	height: 200px;
	position: absolute;
	right: 0px;
	bottom: 0px;
}

	.four_bar_container #graphField0four_bar_graph,
	.four_bar_container #graphField1four_bar_graph {
		display: none;
	}
	
	.four_bar_container .graphFieldfour_bar_graph {
		margin-left: 20px !important;
	}

.total_container {
	width: 100%;
	float: left;
}


.input_container {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
	float: left;
}

	.input_container .slideri {
		float: left;
		width: 200px;
	}

	.input_container .aantal_keer {
		width: 20px;
		float: left;
	}
	
	.kmentered {
		width: 30px;
		border: none;
		color: white;
		text-align: right;
		background: rgba(255,255,255, 0.3)
	}
	
.contact_container label,
.contact_container input {
	float: left;
}

.contact_container label {
	width: 60px;
}
	
	
.slide7 label {
		width: 30px;
		float: left;
}

.slide7 input {
	float: left;
}

.contact_container {
	margin-top: 20px;
	margin-bottom: 20px;
	float: left;
}

.contact_container label {
	width: 60px;
	float: left;
}

	.contact_container input {
		width: 150px;
		border: 1px solid white;
		background: rgba(255,255,255, 0.3);
		color: white;
		float: left;
	}
	
.hidden_stappen_slide {
	display: none;
}

.akkoord_voorwaarden {
	width: 20px;
}

#akkoord_voorwaarden {
	width: 20px;
}

.contact_container a {
	color: white;
}

.contact_container label.voorwaarden {
	width: 200px;
}

.graphLabelfour_bar_graph {
	position: absolute;
	top: -20px;
	font-size: 9px;
}


.km_totals {
	position: absolute;
	right: 0px;
	height: 50px;
	width: 200px; 
	top: 0px;
}

	.km_totals div {
		float: left;
		width: 100%;
	}
	
		.km_totals div h1 {
			float: right;
			width: auto;
		}