/*

klusjes dients jeroen css 

Basscolor: WhiteSmoke
Scheme: Triadic Colors of WhiteSmoke
Reference: http://www.html-color-names.com/whitesmoke.php

Triadic Colors of WhiteSmokeTriadic:
#f5f5f5
#a89898
#f7f6de
#afbbc2
#98a2a8

WhiteSmoke to Black Gradient
#f5f5f5
#dedede
#c8c8c8
#b2b2b2
#9b9b9b
#858585
#6f6f6f
#595959
#424242
#2c2c2c
#161616
#000000

*/

a:link {text-decoration: none; color:#363636; font-weight: bold;}
a:visited {text-decoration: none; color: #363636; font-weight: bold;}
a:active {text-decoration: none; color: #363636; font-weight: bold;}
a:hover {text-decoration: underline; color: #363636; font-weight: bold;}


html{

    height:100%;
    position:relative;
    margin:0px;

}

body{
	height: 100%;
	margin:0px;
	padding:0px;
	font-family: Verdana, Helvetica, sans-serif;
	font-size: 16px;
	background-color: #f5f5f5;
}


#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100%;
  position:absolute;
    top:0;
    left:0;
    right:0;
    	align-items: center;
}
/*
	Header 
*/

#header {
	display: flex;
	flex-direction: row;
	
	height: 100px;
	width: 100%;
	background-color: #ffffff;
	border-color: #98a2a8;
	border-style: solid;
	border-width: 0px 0px 1px 0px;
	-webkit-box-shadow: 0px 4px 4px 0px rgba(152,162,168,0.55);
	-moz-box-shadow: 0px 4px 4px 0px rgba(152,162,168,0.55);
	box-shadow: 0px 4px 4px 0px rgba(152,162,168,0.55);
	margin-bottom: 14px;
}

#header #headerTitle{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px;
	

	color: #f7f6de;
}

#header #headerMenu{
	display: flex;
	flex-grow: 2;


}

#header #headerLogin{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 250px;
	margin: 30px;
	background-color: #f5f5f5;
	font-size: 1.3em;
	color: #f7adad;
	
	 cursor: pointer; 
	 
	 border-radius: 30px 30px 30px 30px;
	-moz-border-radius: 30px 30px 30px 30px;
	-webkit-border-radius: 30px 30px 30px 30px;
	border: 2px solid #f7adad;
	

}

#headerLogin a:link {text-decoration: none; color:#755252; font-weight: bold;}
#headerLogin a:visited {text-decoration: none; color: #755252; font-weight: bold;}
#headerLogin a:active {text-decoration: none; color: #755252; font-weight: bold;}
#headerLogin a:hover {text-decoration: none; color: #755252; font-weight: bold;}


	
ul li, ol li {
  line-height: 1.5;
}
li {
margin: 0 0 5px 0;
}

#AlgemeneVoorwaarden{
font-size: 24px;

margin: 0 50px 5px 50px;
}
	


/*
 
login button and overlay

*/

#loginOverlay{
	width: 500px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#loginOverlay  ul{
	list-style-type: none;
}

input[type=submit],input[type=button]{
	padding: 2px;
	font-weight: bold;
	margin: 10px auto;

	border:1px solid  #98a2a8;
	padding: 5px;
	background-color:#f5f5f5;

	align-items: center;
	justify-content: center;
	

	text-align: center;
	text-decoration: none;
	display: flex;
	font-size: 16px;
	
	cursor: pointer;
}

#loginOverlay input[type=submit],input[type=button]{

width: 200px;
height: 50px;
font-size: 30px
padding: 2px 10px 2px 10px;

}

#loginOverlay fieldset{
border:none;
}

/*
 content 
 
 */
#content{
	width: 1000px;
	display: flex;
	flex-grow:1;
	
	
	background-color: #ffffff;	
	border-width: 1px 1px 0px 2px;
	border-style: solid;
	border-color: #dedede;
	
	justify-content: center;
}



/*  
	Footer
*/

#footer{
	 position: relative;
	 clear: both;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: 1080px;

	background-color:  #dedede;
	border-width: 0px 1px 0px 2px;
	border-style: solid;
	border-color: #dedede;
}


#footerCopyright{
text-align:center;
font-weight: bold;
color:#777777;	
height: 20px;	
}




/*
	Overlay dialog 
*/

#overlay_opacity{
	
	position: absolute;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	width: 100%;
	top:0;
	left: 0;
	
	background-color: gray;
	z-index: 998;
	display: none;
}

#overlay_wrapper{
	position: absolute;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	width: 100%;
	top:0;
	left: 0;	
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
} 
  
#overlay_content{
	
	background-color:#fbe9e1;
	border-color:#98a2a8; 
	border-style: solid;
	border-width: 2px;
	padding: 10px;
	z-index: 999;
	display: none;
	display: flex;
	 flex-direction:  column;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
}


#overlay_content input[type=submit],input[type=button]{

}



/*
global forms
*/



label{
width: 6em;
display: inline-block;
line-height: 10px;
text-align: right;
margin-right: 0.5em;
font-weight: bold;
}

input, textarea{
	border:1px solid  #afbbc2;
	padding: 5px;
	font-size: 16px;
	background-color:#f7f6de; 
	margin-top: 3px;	
	font-family: Arial, Helvetica, sans-serif;
}

/*		
	validation
*/

.toolTip{
	border:1px solid  #755252;
	background-color:#f7adad; 
	padding: 2px;
	text-align: center;

}

.inputHighlight{
	border:1px solid  #755252;
	background-color:#f7adad; 
}


/*
^
background-color: #f9f9f9;
-moz-box-shadow: 		0px 0px 8px #80b3ff;
-webkit-box-shadow: 	0px 0px 8px #80b3ff;
box-shadow: 			0px 0px 8px #80b3ff;	

-moz-box-shadow: 		0px 0px 20px #c2c8d2 inset;
-webkit-box-shadow: 	0px 0px 20px #c2c8d2 inset;
box-shadow: 			0px 0px 20px #c2c8d2 inset;
*/


/*
	Box 
*/

.box{
	
	background-color:#ffffff; 
	padding: 0px;
	display: flex;
 	flex-direction:  column;
	justify-content: top;
	border-color: #dbdbdb;
	border-width: 0px 1px 0px 2px;
	border-style: solid;
}

.boxTitle{
	background-color:#f7f6de; 
	border-width: 0px 0px 3px 0px; 
	border-color: #dbdbdb;
	border-style:solid;
}






/* login page*/
.login
{
margin: 0 auto;
width:350px;	
}

 .login fieldset{
border:none;
}

.login  .button{
display: block;
margin: 5px auto;
width: 100px;
}







.verify_submit{
	pointer-events: none;
   cursor: default;
}



.dTable    { display: table; }
.dTableRow       { display: table-row; }
.dTableHeading    { display: table-header-group; }
.dTableBody    { display: table-row-group; }
.dTableFoot    { display: table-footer-group; }
.dTableCell, .dTableHead{
	display: table-cell; 
	padding: 1px 2px 1px 2px; }