/* //////////////////////////////////////////////////////////////////////
QP-site 
Design by Roderick Peters <roderick dot peters AT gmail dot com>
//////////////////////////////////////////////////////////////////////*/

body {
	margin:				0;
	padding:			0;
	width:				100%;
	height:				100%;
	font:	 			10pt Arial, Verdana, Helvetica, sans-serif; 
	color: 				#ddd; 		
	line-height: 		19px; 
	text-align: 		center;
	background:			#1E1E1E url(../images/behang.gif);	
	}


/* ///////////////////////////////////////
Headers									*/
	
h1 {
	font: 				bold 26px Georgia, Arial, verdana, sans-serif;
	color:				#ffe403;
	text-decoration: 	none;
	}
	
h2 { 
	font:				bold 20px Georgia, Verdana, Arial, Helvetica, sans-serif;
	color:				#FEE229;
	padding-bottom:		10px;
	border-bottom:		1px solid #FEE229;
	}
	
h3 { 
	font:				bold 16px Georgia, Verdana, Arial, Helvetica, sans-serif;
	color:				#FEE229;
	padding:			20px 0 5px 0;
	}

/* ///////////////////////////////////////
Paragrafen								*/

p {
	text-align:			justify;
	}
	
p a {
	color:				#ddd;
	text-decoration:	underline;
	}
	
p a:hover {
	color:				#FEE229;
	text-decoration:	underline;
	}
	
.small {
	font-size:			8px;
	}
	
a {
	color:				#ddd;
	text-decoration:	underline;
	}
	
a:hover {
	color:				#fff;
	text-decoration:	underline;
	}
	
.inactive {
	color:				#777 !important;
	}

/* ///////////////////////////////////////
Paginaopmaak							*/

#wrapper {
	display: 			block;
	min-height: 		100%;
	width: 				100%;
	position: 			absolute;
	top: 				0;
	left: 				0;
	z-index: 			0;
	background:			url(../images/header.jpg) top center no-repeat;
	}

#container {
	margin:				0 auto;
	padding:			0;
	text-align:			left;
	width:				840px;
	}
		
#header{
	height:				130px;
	}

/* Navigatie 
---------------------------------------*/
	
#topmenu {
	margin:				0;
	padding:			107px 0 0 0;
	}

#topmenu ul {
	margin:				0;
	padding:			0;
	}
	
#topmenu li {	
	padding:			0;
	margin:				0;
	float:				left;
	list-style-type:	none;
	}

#topmenu li a {
	color:				#999;
	font:				bold 11px Arial, Helvetica, sans-serif;
	text-decoration:	none;
	padding:			3px 8px 2px 8px;
	margin:				0 8px 4px 0;
	display:			block;
	}
	
#topmenu li a:hover {
	color:				#000;
	background:			#FEE229;
	}

#topmenu li ul { /* second-level lists */
	display:			none;
	position: 			absolute;
	background:			#FEE229;
	padding:			2px;
	/*margin-top:			4px; fix voor FF3 */
	width:				150px;
}

#topmenu li li { /* second-level lists */
	display:			block;
	float:				none;
}

#topmenu li li a {
	color:				#000;
	font:				bold 11px Arial, Helvetica, sans-serif;
	text-decoration:	none;
	display:			block;
	padding:			5px 0 5px 5px;
	margin:				0;
	}
	
#topmenu li li a:hover {
	color:				#000;
	background:			#FCF7C0;
	}

#topmenu li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
	top: 				auto;
	left: 				auto;
}

#topmenu li:hover ul, #topmenu li.over ul { /* lists nested under hovered list items */
	display: 			block;
}


/* Midden 
---------------------------------------*/
	
#middle {
	margin-top:			5px;
	padding:			20px 20px 20px 20px;
	background:			#101010 url(../images/level.gif) repeat-x top left;
	}			
	
/* rechterkolom 
---------------------------------------*/
	
#rechter_kolom {
	width:				220px;
	float:				right;
	padding:			0 0 0 20px;
	border-left:		1px solid #3C3C3C;
	}

/* linkerkolom 
---------------------------------------*/

#linker_kolom {
	width:				540px;
	min-height:			530px;
	padding-bottom:		50px;
	background:			url(../images/background.jpg) repeat-y top left;
	}
	
#clear {
	clear:				both;
	margin:				15px 0;
	}

/* footer 
---------------------------------------*/
	
#footer_content {
	margin:				10px 0 0 0;
	text-align:			center;
	padding:			7px 10px;
	color:				#555;
	background:			#202020 url(../images/comment.gif) repeat-x top left;
	}
	
#footer_content p {
	text-align:			center;
	padding:			2px 0 2px 0;
	margin:				0;
	}

#footer_content p a {
	color:				#555;
	}


/* Tooltip 
---------------------------------------*/

.tooltip {
	background:			#000;
	border:				1px solid #fff;
	text-align:			left;
	color:				#fff
	}	

.tooltip .avatar {
	border:				1px solid #000;
	padding:			2px;
	background:			0;
	margin:				0;
	}

.tooltip_schaduw {
	position:			absolute;
	z-index:			600;
	border:				0;
	margin:				0;
	padding:			0;
	display:			none;
	}
	
.tooltip_tabel {
	border-collapse:	collapse;
	border: 			0;
	}

.tooltip_tabel tr, 
.tooltip_tabel td {
	padding:			0;
	margin:				0;
	border:				0;
	} 

#dhtmltooltip{
	position: 			absolute;
	left: 				-350px;
	width: 				auto;
	border: 			1px solid black;
	padding: 			2px;
	background-color:	lightyellow;
	visibility: 		hidden;	
	text-align:			left;
	padding:			5px;
	filter: 			progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

#dhtmlpointer{
	position:			absolute;
	left: 				-350px;
	z-index: 			101;
	visibility: 		hidden;
}

/* Classes 
---------------------------------------*/

.avatar {
	border:				1px solid #b30909;
	padding:			1px;
	background:			#fff;
	margin:				10px;
	}
	

.edit {
	background:			url(../images/edit.gif); 
	border:				0;
	font:				0px verdana;
	color:				#fff;
	height:				16px;
	width:				16px;
	cursor:				pointer;
	}
	
.delete {
	background:			url(../images/delete.gif); 
	border:				0;
	font:				0px verdana;
	color:				#fff;
	height:				16px;
	width:				16px;
	cursor:				pointer;
	}
	
.ja {
	background:			url(../images/ja.gif); 
	border: 			0;
	font: 				0px verdana; 
	color:				#fff;
	height:				21px;
	width:				21px;
	cursor:				pointer;
	}
	
.nee {
	background:			url(../images/nee.gif); 
	border: 			0;
	font: 				0px verdana; 
	color:				#fff;
	height:				21px;
	width:				21px;
	cursor:				pointer;
	}
	
.ajax-loader {
	margin:				10px 75px 0px 75px;	
	}
	
/* tabellen 
---------------------------------------*/
	
table {
	border:				1px solid #3c3c3c;
	background:			#202020 url(../images/comment.gif) repeat-x top left;
	padding:			1px;
	border-collapse:	collapse;
	}
	
th {
	background:			#FEE229 url(../images/th_background.gif) top repeat-x;
	color:				#000;
	text-align:			left;
	padding:			3px 5px;
	}
	
td {
	text-align:			left;
	background:			#202020;
	border-bottom:		1px solid #3c3c3c;
	}

.width100p {
	width:				550px;
	}
	

.hiliteRow {
	background:			#FEE229;
	}
	
.hiliteRowtwee {
	background:			#FCF7C0;
	padding-bottom:		20px;
	}			


.w25 {
	width:				35px;
	text-align:			center;
	}
	
.w25-1 {
	width:				25px;
	text-align:			right;
	}
	
.w25-2 {
	width:				35px;
	text-align:			left;
	}

.w50 {
	width:				50px;
	}
	
.w75 {
	width:				90px;
	}
	
.w100 {
	width:				100px;
	}
	
.w150 {
	width:				150px;
	}
	
.w200 {
	width:				200px;
	}	
	
.w250 {
	width:				250px;
	}

.aanwezigheid {
	border:				0;
	margin:				0;
	}
	
/* forms 
---------------------------------------*/	

fieldset {
	border:				0px solid #3c3c3c;
	background:			#202020 url(../images/comment.gif) repeat-x top left;
	padding:			10px 5px 10px 20px;
	margin:				0 0 20px 0;
	}
	
fieldset fieldset{
	border:				0;
	background:			#202020;
	padding:			0;
	margin:				0;
	}
	
legend {
	font-weight:		bold;
	font-size:			10pt;
	padding:			0 10px;
	color:				#FEE229;
	}
	
legend a {
	font-weight:		bold;
	font-size:			10pt;
	color:				#FEE229;
	}
	
label {
	display:			block;
	width:				150px;
	padding:			1px 0;
	margin:				0 0 5px 0;
	float:				left;
	clear:				left;
	}
	
.longlabel {
	width:				500px;
}
	
input[type="text"] {	
	width:				225px;
	height:				16px;
	padding-left:		2px;
	margin:				0 0 5px 0;
	border:				1px solid #777;
	}
	
select {	
	border:				1px solid #777;
	}
	
.multiple {
	width:				100px;
	height:				100px;
	}
	
input[type="password"] {	
	width:				225px;
	height:				16px;
	padding-left:		2px;
	margin:				0 0 5px 0;
	border:				1px solid #777;
	}

textarea {
	font:				12px Verdana, Arial, Helvetica, sans-serif;
	padding:			0 0 0 2px;
	}
	
input[type="submit"] {
	width:				150px;
	height:				23px;
	background:			url(../images/button_bg.gif);
	color:				#FFFFFF;
	font-size:			12px;
	border:				0;
	margin-right:		5px;
	}
	
input[type="button"] {
	width:				150px;
	height:				23px;
	background:			url(../images/button_bg.gif);
	color:				#FFFFFF;
	font-size:			12px;
	border:				0;
	margin-right:		5px;
	}
	
input[type="reset"] {
	width:				150px;
	height:				23px;
	background:			url(../images/button_bg.gif);
	color:				#FFFFFF;
	font-size:			12px;
	border:				0;
	margin-right:		5px;
	}	
	
input.ja {
	background:			url(../images/ja.gif); 
	border: 			0;
	font: 				0px verdana; 
	color:				#fff;
	height:				21px;
	width:				21px;
	cursor:				pointer;
	}
	
input.nee {
	background:			url(../images/nee.gif); 
	border: 			0;
	font: 				0px verdana; 
	color:				#fff;
	height:				21px;
	width:				21px;
	cursor:				pointer;
	}
	
input.edit {
	background:			url(../images/edit.png); 
	border:				0;
	font:				0px verdana;
	color:				#fff;
	height:				16px;
	width:				16px;
	cursor:				pointer;
	}
	
input.delete {
	background:			url(../images/delete2.png); 
	border:				0;
	font:				0px verdana;
	color:				#fff;
	height:				16px;
	width:				16px;
	cursor:				pointer;
	}

.toggle_link {
	border:				0;
	}	
	
/* LOGIN */

#login_wrapper {
	width:				400px;
	height:				200px;
	position:			absolute;
	top:				50%;
	left:				50%;
	margin:				-150px 0 0 -200px;
	text-align:			left;
	}		

#login_wrapper fieldset {
	padding-top:		20px;
	}
	
#login_wrapper label {
	float:				left;
	display: 			block;
	width:				100px;
	text-align:			left;
	height:				16px;
	margin-bottom:		15px;
	}
	
#login_wrapper #username, #login_wrapper #password {
	width:				200px;
	display:			block;
	background:			#3C3C3C;
	color:				#FFFFFF;
	height:				16px;
	margin:				0 0 15px 140px;
	}

#login_wrapper #submit {
	display:			block;
	margin:				0 0 10px 0;
	}
	
#login_wrapper p {
	text-align:			left;
	}
	
.warning {
	color:				#FF0000;
	}

/*prompt
---------------------------------------*/	

#prompt_overlay {
	background: 		#000;
	top: 				0; 
	left: 				0; 
	position: 			fixed;
	width: 				100%; 
	height:				100%; 
	z-index: 			99;
}
#prompt_window { 
	position: 			fixed; 
	z-index: 			100; 
	top: 				0; 
	left: 				0; 
	width: 				100%; 
	height: 			100%; 
	text-align: 		center;
	color:				#000;
}
#prompt_div { 
	margin: 			20% auto 0 auto; 
	width: 				260px; 
	text-align: 		left;
	background:			#FFF;
	padding:			20px;
	border:				2px solid #fee53b;
}
#prompt_prompt{
	display:			block;
	font-weight:		bold;
	margin:				5px 0 10px 0;
}
#prompt_warning {
	color:				red;
	font-weight:		bold;
}
#prompt_div input {
	width:				125px;
}
#prompt_div input#prompt_text {
	width:				250px;
	display:			block;
}