@charset "utf-8";

html, body {
	height				: 100%;
	background			: none;
}

div#calculator {
	position			: relative;
	width				: 697px;
	height				: 362px;
	background-image	: url(bg-calculator.png);
	background-repeat	: no-repeat;
	font-family			: Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------ // calculator menu */

div#calculator ul.menu {
	position			: absolute;
	top					: 30px;
	left				: 40px;
	list-style			: none;
	width				: 610px;
	height				: 26px;
	border-bottom		: 1px dotted #9e9e9e;
}
div#calculator ul.menu li {
	float				: left;
	margin-right		: 30px;
}
div#calculator ul.menu li a {
	color				: #9e9e9e;
	font-size			: 14px;
	text-decoration		: none;
}
div#calculator ul.menu li a.active {
	color				: #ffe14f;
	font-weight			: bold;
}
div#voorwaarden {
	position			: absolute;
	bottom				: 40px;
	left				: 40px;
	color				: #9e9e9e;
	font-family			: Helvetica, Arial, sans-serif;
	font-size			: 9px;	
}

/* ------------------------------------------------ // rekenmodel */

table.rekentabel {
	color				: white;
	width				: 270px;
}
table.top {
	border-bottom		: 1px dotted #9e9e9e;
	margin-bottom		: 15px;
}
table.rekentabel td {
	color				: white;
	font-family			: Helvetica, Arial, sans-serif;
	font-size			: 14px;
	height				: 30px;
	line-height			: 30px;
}
table.bottom td {
	height				: 20px;
	line-height			: 20px;
}
table.rekentabel input {
	background-color	: #ffe14f;
	width				: 100px;
	text-align			: center;
	border				: 1px solid black;
}
table.rekentabel select {
	background-color	: #ffe14f;
	width				: 104px;
	text-align			: center;
	border				: 1px solid black;	
}
table.rekentabel input.readonly {
	background			: none;
	border				: none;
	color				: white;
	text-align			: right;
	width				: 60px;
}
table.rekentabel input.readonly-result {
	background			: none;
	border				: none;
	color				: #ffe14f;
	text-align			: right;
	width				: 50px;
	font-weight			: bold;
}

/* ------------------------------------------------ // vermogen */

div#vermogen {
	position			: absolute;
	top					: 80px;
	left				: 40px;
	width				: 610px;
	height				: 200px;
	display				: block;
}

/* ------------------------------------------------ // stroom */

div#stroom {
	position			: absolute;
	top					: 80px;
	left				: 40px;
	width				: 610px;
	height				: 200px;
	display				: none;
}

/* ------------------------------------------------ // kVA tabel */

div#kva-tabel {
	position			: absolute;
	right				: 45px;
	top					: 80px;
	width				: 305px;
	height				: 250px;
	font-family			: Helvetica, Arial, sans-serif;
}
div#kva-tabel h3 {
	color				: #ffe14f;
	font-size			: 14px;
}
div#kva-tabel p {
	color				: white;
	font-size			: 14px;
	line-height			: 17px;
}
div#kva-tabel table {
	margin-top			: 20px;
	border				: 1px solid #9e9e9e;
	background-image	: url(bg-table.jpg);
	background-position	: bottom right;
	background-repeat	: no-repeat;
}
div#kva-tabel table td {
	height				: 26px;
	font-size			: 9px;
	width				: 17%;
}
div#kva-tabel table a {
	color				: #9e9e9e;
	font-size			: 9px;
	text-decoration		: none;
	line-height			: 26px;
	width				: 100%;
	display				: block;
	text-align			: center;
}
div#kva-tabel table a:hover {
	color				: white;
	font-weight			: bold;
}
div#kva-tabel table a.highlight {
	color				: #ffe14f;
}