@import url('sliders.css');

.clearBoth {
	clear: both;
}

.instruction {
	color: #69ACD1;
	font-size: 90%;
	text-align: center;
	margin-bottom: 0.5em;
}

* html body#calculator_iframe #calculator {
	position: static;
}

#calculator {
	/* This is the white panel area */
	position: relative;
}

* html #calculator {
	xmargin:  29px 10px 37px 10px;
}

* html body#calculator_iframe #calculator  {
	margin:  15px 10px 37px 10px;
}

#calculator h2 {
	/* main title in calculator form */
	clear: both;
	margin: 0;
	padding: 0;
	font-size: 110%;
	color: #00005E;
}

#calculator fieldset h2 {
	/* field group titles */
	font-size: 100%;
	color: #00005E;  /* restore color */
}

#calculator form {
	width: 90%;
	margin: 0 0 1em 0;
	padding: 0 0 0 20px;
}	

#leftColumn {
	/* this is inside the #calculator */
	border: 1px solid #ff7300; 
	width: 100%;
	padding: 6px 0 0 0;
	float: left;
	margin-top: 4px;
	background: #EBE3DF;
	margin-left: -2px;
}

* html #leftColumn {
	width: 100%;
	margin-left: -4px;
}

* html body#calculator_iframe #leftColumn {
	width: 90%;
	margin-top:4px;
	padding: 0;
}

#rightColumn {
	height: 10%;
	font-size: 90%;
/*	border-left: 1px solid #69ACD1;*/
	padding: 6px 0;
	margin-right: 15px;
}

#rightColumn fieldset {
	border: 1px solid #69ACD1;
	margin: 0 0 1em 0 !important;
	position: relative;
	top: -6px;
}

#rightColumn form#frmPrognose label {
	width: 50%;
}

#rightColumn form#frmPrognose select {
	width: 40%;
	margin: 0 !important;
	float: right;
}

html #rightColumn form#frmPrognose div {
	margin: 0 !Important;
	padding: 0 !Important;
	
}

html #rightColumn form#frmPrognose .footer {
	text-align: right !important;
	width: 100%;
	margin-top: 0.25em !important;
}

html #rightColumn form .footer button {
	float: right;
}

ul#scenarioNavigation {
	font-size: 90%;
	position: relative;
	top: 5px;
	left: 0;
	width: 100%;
}

* html body#calculator_iframe ul#scenarioNavigation {
	position: relative;
	margin-top: 58px;
}

* html body#calculator_iframe ul#scenarioNavigation{
	margin: 0;
}

ul#scenarioNavigation,
ul#scenarioNavigation li {
	margin: 0;
	padding: 0;
	list-style: none;
}

* html ul#scenarioNavigation {
	margin-left: -8px;
}

ul#scenarioNavigation li.first-child {
	margin-left: -2px;
}

* html ul#scenarioNavigation li.first-child {
	margin-left: 0;
}

ul#scenarioNavigation li,
ul#scenarioNavigation li a {
	display: block;
	float: left;
}

ul#scenarioNavigation li {
	margin: 0 0.2em 0 0;
	overflow: hidden;
}

ul#scenarioNavigation li a {
	overflow: hidden;
	float: none;
	padding: 0 0.5em;
	white-space: nowrap;
	line-height: 24px;
	text-decoration: none;
	text-align: center;
	color: white;
	background: #ff7300;
}

ul#scenarioNavigation li a:hover {
	text-decoration: underline;
}

ul#scenarioNavigation li.active a {
	border-top: 1px solid #ff7300;
	border-left: 1px solid #ff7300;
	border-right: 1px solid #ff7300;
	color: #00005E;
	background: #EBE3DF;
	xposition: relative;
}

form div {
	margin: 0;
	padding: 0;

}

form fieldset {
	/* overuled fieldset in forms.css, zet border weer uit */
	padding: 0;
	border: none;
	width: 100%;
	margin: 0 0 1em 0;
	padding-top: 1em;
	padding-left: 1em;
	xpadding-right: 1em;
	xborder: 1px solid red;
}

body#calculator_iframe #calculator form fieldset {
	padding-top: 0;
	clear: both;
}

form fieldset fieldset {
	padding: 0;
	margin: 0;
}

form select {
	xfont-size: 100%;
}

form input {
	xfont-size: 100%;
}

form select#looptijd {
	width: 11em;
}

form input#rente{
	width: 2em;
}

form select#rentevast {
	width: 8.5em;
	margin-left: 0.15em;
}

form div input.text {
	xfont-size: 100%;
	xcolor: #00005E;
}

form div input.sliderValue {
	border: 1px solid #C4C4C4;
	width: 10%;
}

form>div input.sliderValue {
	width: 80%;
}

form#frmCalculator option {
	color: #0E0D6A;
}


/* footer buttons */

.footer {
	margin: 2em 0 0 0;
}

.footer ul, 
.footer ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer ul li {
	text-align: center;
}

.footer ul li#button_back {
	float: left;
	width: 8em
}

.footer ul li#button_direct_een_afspraak {
/*	float: right;*/
}

.footer ul li#button_direct_een_afspraak button {
	width: 150px;
	margin-right: 1em;
	position: relative;
	right: 0.125em;
/*	float: right;*/
	background: #10106A !important;
}

.footer ul li#button_direct_een_afspraak button img {
	position: relative;
	top: 2px;
}

.footer ul li#button_print,
.footer ul li#button_submit {
	float: right;
	width: 8em;
}

.footer ul li a, .footer button {
	text-align: center;
	text-decoration: none !important;
	font-size: 90%;
	line-height: 1.25em;
	display: block;
	margin: 0px auto;
	width: 80px;
	color: white;
	background: #5871B3 !important;
}

.footer ul li a {
	font-size: 105%;
}

/* lists */

dt {
	font-weight: normal
}

dd {
	margin: 0;
	margin-left: 33%;
}

#calculatorResult {
	padding: 20px;
}

#calculatorResult dl {
	xmargin-top: 1em;
	xmargin-left: 1em;
}

#calculatorResult dt {
	xwidth: 25em;  /* same as label */
	float: left;
}

#calculatorResult dd {
	text-align: right;
	
}

#rightColumn dd {
	margin-left: 70%;
	text-align: right;
}

/* #section_contact */

#page_calculator #page_wrapper .rightColumn { /* == #page_actualities, added wrapper for more priority for MSIE */
	/* note the difference between class="rightColumn" and id="rightColumn" */
	/* this compensates div.rightColumn in screen.css */
	width: 165px;
	position: absolute;
	top: 161px;

	/* force entirely to the right */
	left: 99%;
	margin: 0 0 0 -180px;
	padding: 0;
}

* html #page_calculator .rightColumn {
	margin: 0;
}

* html #page_calculator #positionFixed {
	/* compensate fix in screen.css */
	left: 0;
	width: 100%;
}

#section_belMijTerug {
	font-size: 112%;
}

#section_belMijTerug .first-child {
	margin-bottom: 1em;
}

#section_belMijTerug a {
	color: blue;
}

#section_contact a,
#section_chat a {
	color: #0E0D6A;
	text-decoration: none;
	font-size: 110%;
}

#section_chat {
	z-index: 1000;
	background: url(graphics/cornered_banner.png) no-repeat top left;
	height: 59px !important;
	height: 71px;
	height/**/:/**/59px;
	width: 114px !important;
	width: 126px;
	width/**/:/**/114px;
	padding: 6px;
	border: none;
	position: absolute;
	top: 55px;
	line-height: 1.1em;
}

#section_chat {
	margin-right: 147px;
}


#section_chat {
	right: 2%
}


/* form for "De beste wooncalculator" */

#page_secondaryNavigation {
	/* hide sub menu */
	
}

#calculator legend {
	font-size: 100%;
	font-weight: bold;
	color: #0E0D6A;
	position: relative;
	left: -0.6em;
	display: block;
	margin: 0;
	padding: 0;
}

#calculator label { /* increase priority */
	/* normal label */
	xclear: left;
	width: 210px;
	xfont-weight: normal;
	xmargin-right: 1.5em;
	xline-height: 21px;
}

#calculator div.edit input {
	/* normal input */
	width: 13em;
	margin-bottom: 0.125em;
	border: 1px solid #BBA296;
}

#calculator hr {
	clear: both;
	margin: 0.5em 0;
}

#weetboeterente_0 {
	float: left;
}

.result {
	font-weight: bold;
	font-size: 120% !important;
}

html input.percentage {
	position: relative;
	top: -0.1em;
	border: 1px solid #69ACD1 !important;
}

#row_hypotheekrente select {
	width: 31% !important;
}

fieldset#fs_boeterente select {
	width: auto !important;
}

.widthAuto {
	width: auto !important;
}


/* #prognose */

#prognose {
	text-align: center;
	width: 99%;
	border: 1px solid #69ACD1;
	overflow: auto;
	margin-bottom: 1em;
}

/* #message */

#message {
	position: absolute;
	width: 200px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -100px;
	background: white;
	border: 4px solid #0E0D6A;
}

#message div {
	padding: 10px;
}


.error {
	position: relative;
	xtop: 0.5em;
	clear: both;
}

* html .error {
	position: fixed;
}

#row_gemeente .submit {
	background-color: #5871B3;
}


/* prognoseFrame */

#prognoseFrame {
	z-index: 10000;
	display: none;
	position: absolute;
	width: 450px;
	height: 450px;
	top: 60px;
	left: 50%;
	margin: 0 0 0 -225px;
	border-bottom: 1px solid #0E0E69;
}

/* * help */

#calculator div.edit {
	/* quick fix for help icons */
	xposition: relative;  /* for position:absolute below */
}

#calculator div.help {
	/* overrule all, prevent problems with elements re-used elsewhere */
	float: left;
	display: inline;
}

.radiogroup .radiogroupBelow,
.radiogroup .radiogroupBelow div,
.radiogroup .radiogroupBelow input {
  clear: left;
  xfloat: none;
  float: left;
  padding: 0.2em 0;
  /*clear: none;
  margin-right: 0.25em;*/
}

form div.help {
	z-index: 9;
	position: absolute;
	left: 15px; 
	margin: 3px 0;
}

* html form div.help {
	position: fixed;
	margin-left: -12px;
	margin-right: 5px;
}

* html #calculator .bereken .help {
	margin-top: 9px;
	margin-bottom: -25px;
}

form div.help div div {
	z-index: 10;
	display: none;
	position: absolute;
	font: 1em/1.3 Arial, Helvetica, sans-serif;
	width: 15em;
	height: auto;
	padding: 0.5em 0.5em 0.2em 0.5em;
	border: 1px solid #8794BE;
	background: white;

	/* flip to right for MSIE */
	margin-left: 14px;
	margin-top: -3px;
}

form div.hover div div {
	display: block !important;
}

form div.help:hover div div {
	display: block !important;
}

form div.help div div h2 {
	font-size: 1.1em  !important;
	font-weight: bold;
	letter-spacing: normal;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
}

form div.help div div p {
	margin: 0 0 0.5em 0;
	padding: 0;
}

form div.help a.edit {
	display: block;
	color: white;
	background: #7D7AA9;
	width: 5em;
	padding: 0.25em;
	margin-bottom: 0em;
	float: right;
	text-align: center;
	text-decoration: none;
}


/* LET OP */
form div.help div {
	width: 12px;
	height: 12px;
	background: url(graphics/help_popup.png) no-repeat;
}

form div.empty div {
	background-image: url(graphics/help_popup.png);
}

form div.help:hover div {
	background-position: right !important;
}


/* important */

html body div.readonly input {
	border: none
}

/* #contact_banners */

#contact_banners div.first-child,
#contact_banners div.last-child {
	font-size: 80%;
	width: 105px;
	height: 65px;
	float: left;
	background: url(graphics/calculator_banners_bg.png) no-repeat top left;
}

#contact_banners div.first-child {
	margin-right: 10px;
}

#contact_banners div.first-child div,
#contact_banners div.last-child div {
	padding: 4px;
}

#contact_banners h2 {
	color: white;
	font-size: 120%;
}

#contact_banners a {
	color: #10106A;
	text-decoration: none;
}

#contact_banners em {
	font-style: normal;
	color: white;
}

/* #prognoseForm */

#prognoseForm .help {
	position: relative !important;
	top: 6px !important;
}

/* #section_gemeentelijkelasten */

#section_gemeentelijkelasten {
	padding-top: 0.25em;
}

select#gemeente {
	font-size: 100%; width: 70%
}

#section_mijnHypotheek {
	display: none;
}


/* footer buttons */

#footerButtons	{
	clear: both;
	text-align: center;  /* centers divs for MSIE5 */

	/* center align */
	position: relative;
}

#footerButtons ul	{
	margin: 0 0 1em 0;
	padding: 0;
	position: relative;
	margin: 0 auto;  /* auto center */
	width: 100%;

	height: 4em; /* contents is absolute positioned */
}

#footerButtons ul:after {
	/* clear for css2 browsers */
	content: '.';
	display: block;
	clear: left;
	height: 0;
	line-height: 0%;
	visibility: hidden;
}

* html #footerButtons ul {
	/* clear for MSIE */
	height: 0.1em;
}

#footerButtons li	{
	/* left and right use 50%, center is placed on top */
	list-style: none;
}


#footerButtons li.footerCenter {
	/* center is absolute, therefore not interfering with left/right boxes */
	position: absolute;
	left: 50%;
	width: 200px;
	xtop: -15px;
	margin-left: -100px;
	
}

#footerButtons li.footerCenter a {
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap; 
	/* make link appear as block */
	padding: 0.7em 1em;
	display: block;
}

#footerButtons li.footerCenter a {
	background-color: #ff7300;
	color: #fff;
	border: 0;
}

#footerButtons li.footerCenter a:hover {
	background:#00005E;
}


* html #footerButtons li.footerCenter {
	top: 4em;
}

#contentText2 img {
	display: none;
}