/*============================*/
/* General
/*============================*/
html, body {
    background: #fff;
    margin: 0;
    padding: 0;
	/* test marking: */ 
	/* border-left: 5px solid #f00;*/
}

#container {            
    padding: 10px 0 10px 0;
	margin: 0 auto;
    /*width: 980px;*/
	
}


#header {          
    margin: 0;
    overflow: hidden;
    padding: 0 0 20px;
}


#errorbanner {
	width: 100%;
	float:none;
	background-image:url(../images/errorbanner.png);
	background-repeat:repeat-x;
	height:100px;
	margin-top:2em;
}

#logo {
	float:left;
	margin-right: 20px;
}

#estitle {
	float:left;
}
	
/*============================*/
/* Header
/*============================*/



/*============================*/
/* Content
/*============================*/

#Maincontent {
	padding-top:2em;
	padding-bottom:2em;
	clear:both;
	margin: 0;
}

#Leftcolumn {
	width: 60%;
	float:left;
}

#LeftH1 {
	width: 32%;
	float:left;
}

#Rightcolumn {
	/*width: 60%;*/
	float:right;
	padding-bottom: 2em;
	margin: 0;
}

#Wide {
	clear:both;
	padding: 1em 0;
	margin: 0;
}

#FormArea {
	width: 96%;
	height:auto;
	background-color: #f0f0f0;
	border: 2px solid #d5d5d5;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
	padding: 1.5em 1em;
}

#Sidecolumn {
	float: right;
	padding: 1em;
	border: 1px solid #D6EFFF; /*#9BE7FF;*/
	background-color: #EFF9FF; /*#EEF6FF; /*#E9F8FF; */
	height:auto;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
	margin-bottom: 1em;
	/*margin:0 0 1em 1.3em;*/
}

#Attentionbox {
	padding: 0 1em;
	border: 1px solid #9BE7FF;
	background-color: #EFF9FF; /*#E9F8FF; */
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
	margin:1em 0.5em;
	width: 95%;
}

#AttentionboxYellow {
	padding: 1.5em 1em;
	border: 1px solid #11ADF2; /*#FFA602;*/
	background-color: #FFFFee; /*#E9F8FF; */
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
	margin:1em 0;
	width: 97%;
}

#Maintenancebox {
	padding: 0 1em;
	border: 1px solid #FFA602;
	background-color: #FFFFC2; /*#E9F8FF; */
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
	margin:1em 0;
	width: 96%;
}

#InsertAnnouncement a {
	/* clear:both;*/
	margin: 0;
	width: 90%;
	height: auto;
	/*font-weight:bold;*/
	-webkit-border-radius: 0.3em; 
    -moz-border-radius: 0.3em; 
    border-radius: 0.3em;
	background: #ffd;
	border: solid 1px #11ADF2;
	text-align:center;
	display: block;
	padding: 0.2em 0.2em 0.5em 0.2em;
}

#InsertAnnouncement a:hover {
	background: #ffa;
}

#InsertItem a {
	padding: 0.5em 1em;
	border: 1px solid #9BE7FF;
	background-color: #EFF9FF; /*#E9F8FF; */
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
	margin:0.5em 0;
	width: 95%;
	display: block;
}

#InsertItem a:hover {
	background-color: #DDF2FF;
	text-decoration: none;
	transition: background-color 0.3s;
}

#FormArea H4.formgroup, #FormArea H4.submitgroup, #FormArea H4.recordgroup {
	padding: 0.3em 1em;
}

#FormArea H4.formgroup {
	background-color:#11ADF2;
	display:inline;
}

#FormArea H4.submitgroup {
	background-color:#36B341;
	display:inline;
}

#FormArea H4.recordgroup {
	background-color:#C44127;
	display:inline;
}

/*------------- calculator----------*/
td {
	padding:0;
}


#Maincontent P.calculator {
	line-height:1.2;
	margin: 0.3em 0.2em;
	font-size:90%;
}

#Maincontent h2.calc_input {
	color:#003399;
}

input.calc_input {
	line-height: 130%;
	padding: 0 3px 1px 3px;
	border: 1px solid #008CAF;
	background-color: #FFFFE8;
} 

input.calc_output {
	line-height: 130%;
	padding: 0 3px 1px 3px;
	border: 0px;
	text-align:right;
	background-color: transparent;
}

input.outputtext {
	line-height: 150%;
	border: 1px solid #66FFFF;
	text-align:right;
	background-color: transparent;
	color:#FFFF99;
	border-radius: 0.2em;
	margin: 0 0.2em;
}

p.output, #Maincontent H2.output, #Maincontent input.outputtext, #Maincontent p.calcbutton {
	padding: 0.2em 8px !important;
	margin: 0;
	}

#Maincontent p.output, input.outputtext {
	font-size:90%;
	}
	
select.dropdownlist {
	border: 1px solid #008CAF;
	background-color: #FFFFE8;
	font-size:90%;
	margin: 5px 5px 5px 0;
}


/*============================*/
/* Bottom
/*============================*/
#bottom {
	clear:both;
	margin: 0;
	padding-top: 1em;
	border-top: 0.4em solid #11ADF2;
	height:80px;
	position:relative;
	background-image:url(../images/logo-dgenergy-web-horizontal-color-en.png);
	background-position:center left;
	background-repeat:no-repeat;
	text-align: right;
	line-height:60px;
}

/* ========================== */
/* Other objects */
/* ========================== */
.button {
    background-color: #11ADF2;
    border: 1px solid #377;
    border-radius: 0.2em;
    color: white;
    font-size: 1em;
    margin: 0;
    padding: 0.5em;
}

table.glossary {
	border: solid;
	border-width: 2px 0 2px 0;
	border-color:#11ADF2;
	border-collapse:collapse;
}

th, thead, thead th {
    background-color:#11ADF2;
}

td.glossary, th {
    padding: 0.2em 0.5em;
    /* vertical-align: top; */
	border: solid;
	border-width: 0 0 1px 0;
	border-color:#ddf;
	/*background-color:#F9F9F9;*/
	margin-top:0.2em;
}  

table.formTBL {
	border: solid;
	border-width: 2px;
	border-color:#11ADF2;
	border-collapse:collapse;
}


td.formTD {
    padding: 0.4em 0.8em;
    /* vertical-align: top; */
	border: solid;
	border-width: 0 0 1px 0;
	border-color:#9BD7FF;
	background-color:#F9FDFF;
	margin-top:0.2em;
}

#FormArea th.formTD {
	background-color:#60CAF7;
	text-align:left;
}

table.submitTBL {
	border: solid;
	border-width: 2px;
	border-color:#36B341;
	border-collapse:collapse;
}

td.submitTD {
    padding: 0.4em 0.8em;
    /* vertical-align: top; */
	border: solid;
	border-width: 0 0 1px 0;
	border-color:#9BD7FF;
	background-color:#F7FFF7;
	margin-top:0.2em;
}

table.recordTBL {
	border: solid;
	border-width: 2px;
	border-color:#C44127;
	border-collapse:collapse;
}

#FormArea th.recordTD {
	background-color:#CC7D70;
	text-align:left;
}

td.recordTD {
	background-color:#FFFDF7;
}

td.recordTD, th.recordTD {
    padding: 0.4em 0.8em;
    /* vertical-align: top; */
	border-color:#EAD2CE;
	border: solid;
	border-width: 0 0 1px 0;
	border-color:#EAD2CE;
	background-color:#FFFDF7;
}

td.recordTDdata {
	background-color:#EDF5F9;
	padding: 0.4em 0.8em;
	margin:0.2em;
	border-color:#EAD2CE;
	border: solid;
	border-width: 0 0 1px 0;
	border-color:#EAD2CE;
}

input.textfield, select {
	height: 2.3em;
}

input.textfield, textarea, select {
	padding: 0 0.3em;
	background-color: #E5F7FF;
	border: 1px solid #11ADF2;
	border-radius: 0.2em;
	-moz-radius:0.2em;
	-webkit-radius:0.2em;
	margin-right: 0.3em;
} 

input.textfield:focus {
	background-color: white;
	border: 1px solid #007CB2;
	transition: background-color 0.5s;
	/* box-shadow: inset 2px 2px 6px #AAA; 
	-webkit-box-shadow: inset 2px 2px 6px #AAA;
	-moz-box-shadow: inset 2px 2px 6px #AAA; */
}

input.formTextfield, select.formTextfield {
	height: 2em;
}

input.formTextfield, textarea.formTextfield, select.formTextfield {
	padding: 0 0.3em;
	background-color: #E5F7FF;
	border: 1px solid #C4E7FF;
	border-radius: 0.2em;
	-moz-radius:0.2em;
	-webkit-radius:0.2em;
	margin-right: 0.3em;
} 


input.formTextfield:focus {
	background-color: white;
	border: 1px solid #007CB2;
	transition: background-color 0.5s;
	/* box-shadow: inset 2px 2px 6px #AAA; 
	-webkit-box-shadow: inset 2px 2px 6px #AAA;
	-moz-box-shadow: inset 2px 2px 6px #AAA; */
}

textarea:focus {
	background-color:white;
	border: 1px solid #007CB2;
	transition: background-color 0.5s;
	/* box-shadow: inset 2px 2px 6px #AAA; 
	-webkit-box-shadow: inset 2px 2px 6px #AAA;
	-moz-box-shadow: inset 2px 2px 6px #AAA; */
}

input[type=submit], input[type=reset], input[type=button] {
	margin: 0.5em;
	-webkit-border-radius: 0.3em; 
    -moz-border-radius: 0.3em; 
    border-radius: 0.3em;
	border: 1px solid;
    height: 2.3em;
	padding: 0 0.8em 0.2em 0.8em ;
}

input[type=submit], input[type=button] {
	border-color: #36B341;
	background: #36B341;
}

input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
	transition: background-color 0.5s ease;
}

input[type=submit]:hover, input[type=button]:hover {
    background-color:#007F04;
}

input[type=submit]:active, input[type=button]:active {
    background-color:#007F04;
	border: 1px white solid; /* #00EF13*/
	/*margin: 0.5em 0 0 0;*/ /*--- geparkeerd voor calculator ---*/
}

input[type=reset] {
	border-color: #FF7B5E;
	background: #FF7B5E;
}

input[type=reset]:hover {
    background-color:#D33313;
}

input[type=reset]:active {
    background-color:#D33313;
	border: 1px white solid; /* #00EF13*/
	margin: 0.5em 0 0 0;
}

/* -------------- tooltiphelp -------------- */

a.tooltiphelp {
  position: relative;
  display: inline;
}
a.tooltiphelp span {
  position: absolute;
  width:28em;
  background: #FFFEE8;
  border: 2px solid #0091E5;
  /*height: 30px;
  line-height: 30px;*/
  text-align: left;
  visibility: hidden;
  padding: 0.5em;
  border-radius: 0.3em;
  box-shadow: 3px 3px 8px #8E8E8E;
}
a.tooltiphelp span:before { /* pointer */
  content: '';
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -12px;
  width: 0; height: 0;
  border-top: 12px solid #0091E5;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
}
a.tooltiphelp span:after { /* pointer */
  content: '';
  position: absolute;
  top: 100%;
  left: 20%;
  margin-left: -10px;
  width: 0; height: 0;
  border-top: 10px solid #FFFEE8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
a:hover.tooltiphelp span {
  visibility: visible;
  opacity: 1;
  bottom: 30px;
  left: 20%;
  margin-left: -76px;
  z-index: 100;
}


@media only screen and (min-width: 0px) and (max-width: 800px) {
	#container {
	width: 96%;
	}
	
	#Sidecolumn, #Leftcolumn, #Rightcolumn, #LeftH1 {
	float: none;
	width: 96%;
	}
	
/*	#Leftcolumn {
	float: none;
	width: 96%;
	}
	
	#Rightcolumn {
	float: none;
	width: 96%;
	}
*/

	#InsertAnnouncement {
	width: 70%;
	margin: 0 auto;
	}
}

@media only screen and (min-width: 801px) and (max-width: 1024px) {
	#container {
	width: 96%;
	}
	#Sidecolumn {
	width: 33%;
	}
	#LeftH1 {
	width: 96%;
	}
	#InsertAnnouncement {
	width: 70%;
	}
}

@media only screen and (min-width: 1025px) and (max-width: 1460px) {
	#container {
	width: 96%;
	}
	#Sidecolumn {
	width: 35%;
	}
	#Rightcolumn {
	float: right;
	width: 60%;
	}
	#InsertAnnouncement {
	width: 90%;
	}
	#LeftH1 {
	width: 35%;
	}
}

@media only screen and (min-width: 1461px)  and (max-width: 3840px) {
	#container {
	width: 1400px;
	}
	#Sidecolumn {
	width: 35%;
	}
	#LeftH1 {
	width: 35%;
	}
	#InsertAnnouncement {
	width: 90%;
	}
	#Rightcolumn {
	float: right;
	width: 60%;
	}
}