HTML, BODY  {
margin: 0px;
padding: 0px;
height:100%;
overflow: hidden;
-webkit-backface-visibility: hidden; /*bugfix => https://code.google.com/p/chromium/issues/detail?id=437025*/ 
}

FORM {
margin: 0px;
}

BODY, TD {
font-family: "Arial";
font-size: 12px;
color:#303030;
}

/* GENERAL */

H1 {
	margin: 0px;
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: bold;
}


H4{
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: bold;
	border-bottom: solid 1px #ccc;
	padding-bottom: 5px;
}

A  {
	color: #666;
}

A:HOVER {
	color: #000;
}


INPUT, SELECT, TEXTAREA, OPTION, OPTGROUP {
margin: 0px;
outline:none;
}

INPUT, SELECT, OPTGROUP, TEXTAREA {
font-family: "Arial";
font-size: 13px;
color: #050505;
}

INPUT, TEXTAREA, SELECT  {
border-style: solid;
border-width: 1px;
border-color: #d2d2d2;
background-color: #fff;
color: #121212;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0px;
}

INPUT {
height: 26px;
padding: 0px 3px;
text-indent: 2px;
}

OPTGROUP {
color :#121212;
font-style:normal;
}

SELECT {
height: 28px;
padding: 4px;
}
	SELECT OPTION {
		padding: 3px;
	}


INPUT[type='file'] {
color: #000;
padding: 0px;
padding-bottom: 3px;
}

INPUT[type=radio], INPUT[type=checkbox] {
border-style:none;
background-color: transparent;
height: 20px;
vertical-align: bottom
}

INPUT[disabled=disabled] {
background-color: #f0f0f0;
}

INPUT[readonly=readonly] {
background-color: #f0f0f0;
}

INPUT[readonly=readonly].datepicker {
background-color: #fff;
}

INPUT[type=file] {
border-style:none;
background-color: transparent;
}

INPUT[type=button], INPUT[type=submit] {
	background-color: #fff;
	height: 28px;
	padding: 0px 4px;
	margin-top: 5px;
	line-height: 27px;
	width: 90px;
	border: solid 1px #ccc;
	cursor: pointer;
	color: #333;
}		
		INPUT[type=button]:HOVER, INPUT[type=submit]:HOVER {
			background-color: #111;
			color:#fff;
			border-color: #000;
		}
		
		INPUT[type=button]:disabled, INPUT[type=submit]:disabled, INPUT[type=button]:disabled:hover, INPUT[type=submit]:disabled:hover {
			cursor: default;
			background-color: #f0f0f0;
			border: solid 1px #ccc;
			color: #333;
		}


TABLE  TD {
padding: 3px;
vertical-align: top;
}

TABLE  TD.label {
padding: 3px;
padding-top: 9px !important;
vertical-align: top;
}


TEXTAREA.error, INPUT.error, SELECT.error {
	border-color: #ee0000;
}

LABEL.error {
padding: 5px;
background-color: #ee0000;
display: block;
margin-top: 2px;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

.content .bottomerror {
background-color: #ff0000;
display: inline;
margin-top: 1px;
padding: 5px;
padding-right: 12px;
padding-left: 23px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: url('/admin/html/images/icons/info.png');
background-repeat: no-repeat;
background-position: 5px center;
cursor: pointer;
}

/* JAVASCRIPT CODE HOLDER */

.javascriptcode {
	display: none;
}

/* ALIGNMENT */

.direction_horizontal {

}

		.direction_horizontal DIV, .direction_vertical DIV.direction_horizontal  {
		float: left;
		}
		
		.direction_horizontal DIV.direction_vertical, .direction_horizontal DIV.direction_vertical DIV, .direction_vertical DIV {
			 float: none;
			 
		}
		
.forceleft, .direction_horizontal DIV.forceleft {
	float: left!important;
}

.forceright, .direction_horizontal DIV.forceright {
	float: right!important;
}

	.forceright TABLE {
		float: right;
	}
		

		
		

/* STATIC */

#root {
position: relative;
height: 100%;
width: 100%;
}

#page_login {
	position: absolute;
	top: 50%;
	width: 300px;
	height: 125px!important;
	left: 50%;
	margin-left: -150px!important;
	margin-top: -100px!important;
	background-color: #fafafa;
	padding: 25px;
	border: solid 1px #ddd;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

	#page_login INPUT[type=text],#page_login INPUT[type=password] {
		width: 96%!important;
	}

	#page_login .buttonStandard {
		float: right;
	}

#header {
width: 100%;
position: absolute;
top: 0px;
z-index: 4;
}
		
		#menu {
			border-bottom: solid 1px #000;
			background-color: #fff;
		}
		
				#topMenu {
					float: left;
				}
				
				#logOutMenu {
					float: right;
				}
				
						#topMenu A  {
							float: left;
							display: block;
							height: 28px;
							line-height: 28px;
							padding-left: 15px;
							padding-right: 15px;
							background-color: #ccc;
							margin-right: 4px;
							color: #000;
							text-decoration: none;
							margin-top: 5px;
							-webkit-border-top-left-radius: 5px;
							-webkit-border-top-right-radius: 5px;
							-moz-border-radius-topleft: 5px;
							-moz-border-radius-topright: 5px;
							border-top-left-radius: 5px;
							border-top-right-radius: 5px;
						}
						
						#topMenu A:first-child {
							margin-left: 5px;
						}
						
						#topMenu A:HOVER {
							background-color: #999;
							color: #fff;
						}
						
						#topMenu A.mainMenuButtonSelected {
							background-color: #000;
							color: #fff;
							font-weight: bold;
						}
						
						#logOutMenu A {
							float: left;
							display: block;
							height: 32px;
							line-height: 32px;
							padding-left: 8px;
							padding-right: 8px;
							font-size: 11px;
							color: #999;
							text-decoration: none;
						}
						
						#logOutMenu A:HOVER {
							background-color: #f0f0f0;
							color: #333;
						}
						
				#subMenu {
					background-color: #f0f0f0;
					height: 24px;
					font-weight: bold;
					font-size: 12px;
						white-space: nowrap;
				}
				
					#subMenu A {
						height: 100%;
						line-height: 25px;
						margin-right: 15px;
						text-decoration: none;
						color: #666;
						text-shadow: #fff 0px 1px 0px;
					}
					
					#subMenu A:first-child {
						margin-left: 10px;
					}
					
					#subMenu A:hover {
						color: #000;
					}
		
#page {
background-color: #fff;
position: absolute;
overflow: auto;
left: 0px;
border-top: solid 1px #ddd;
-webkit-tranform:translate3d(0,0,0);
z-index: 1;
}
	#content {
		padding: 10px;
		float:none;
	}
	

#footer {
background-color: #f2f2f2;
position: absolute;
bottom: 0px;
z-index: 2;
}

	#footer IMG {
		vertical-align: bottom; 
		align: left;
	}
	
	#footer TABLE {
		margin: 0px;
		width: 100%;
	}
	
	#footer TABLE TD {
		padding: 0px;
	}

	
	
	
.buttonRow {
	margin-bottom: 10px;
	white-space: nowrap;
}

		.buttonRow A {
			float: left; 
			padding: 5px;
			padding-left: 28px;
			padding-right: 10px;
			background-color: #f0f0f0;
			background-repeat: no-repeat;
			background-position: 5px 5px;
			color: #000;
			text-decoration:none;
			margin-right: 1px;
			margin-bottom: 1px;
		}
		
		.buttonRow.forceright, .buttonRow.forceleft {
			margin: 0px;
		}
		
		.buttonRow.forceright {
			float: right;
		}
		.buttonRow.forceright A {
			float: right;
		}

	
	
	.dataGrid {
		width: 100%;
		margin-bottom: 5px;
	}
	
	.dataGrid .notice {
		padding: 20px;
		background-color: #f5f5f5;
		text-align: center;
		cursor: default;
		font-style: italic;
	}
	
	.dataGrid DIV {
		float:none!important;
	}
	
	.dataGrid TABLE {
		background-color: #f0f0f0;
		width: auto;
		border: solid 1px #ccc;
		border-left: none;
		border-bottom: none;
	}
	
	
	.datagrid_wrapper  {
		width: 100%;
		border-bottom: solid 1px #ccc;
		border-top: solid 1px #ccc;
		background-image: url('../images/datagrid-header-bg.png');
		background-color: #e8e8e8;
		background-repeat: repeat-x;
		border-right: solid 1px #ccc;
		border-collapse: collapse;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		min-height:0%;
	}
	
	.datagrid_header {
		overflow: hidden;
		height: 25px;
		height: auto;
	}
	
			.dataGrid .datagrid_header_divcontainer {
				/*position: relative;*/
				width: 100%;
				display: block;	
			}
	
	.datagrid_content {
		height: 100%;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		overflow-x: visible;
		border-top: solid 1px #ccc;
		background-color: #fff;
	
	}
	
		.datagrid_content  TABLE {
			border-top: none;
		}
		

	 .dataGrid .datagrid_header .item, .dataGrid .datagrid_header .item.filler:HOVER { /*.filler:HOVER*/
		padding: 5px;
		font-weight: bold;
		border: none;
		border-left: solid 1px #ccc;		
		font-size: 11px;
		border-top: solid 1px #fff;
		/* min-width: 80px; */

		background-image: url('../images/datagrid-header-bg.png');
		background-repeat: repeat-x;
		display: block;
		text-shadow: #fff 0px 1px 0px;

	}
	
	.dataGrid .datagrid_header .item {
		position: relative;
		float: left !important;
	}
	
	.dataGrid .datagrid_header .item:HOVER {
		background-image: none;
		background-color: #f0f0f0;
		color: #000;
		cursor: pointer;
	}
	
	.dataGrid .datagrid_header .item.filler  {
		cursor: default;
	}
	
	.dataGrid .datagrid_header .item .arrow {
		display: block;
		float: left;
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 5px;
		border-color: transparent transparent  #666 transparent ;
		margin-top: 0px;
		margin-right: 7px;
	}
	
	.dataGrid .datagrid_header .item.ASC .arrow {
		/* inherit from default */
	}
	
	.dataGrid .datagrid_header .item.DESC .arrow  {
		
		border-color: #666 transparent transparent transparent;
		margin-top: 4px;
		margin-right: 7px;
	}
	
	
	.dataGrid TBODY TR {
		background-color: #f0f0f0;
		cursor: default;
	}
	
			.dataGrid TBODY TR.switchcolor {
				background-color: #fff;
			}
			
			.dataGrid TBODY TR:HOVER {
				background-color: #DFF1F5 ;
			}
	
	.dataGrid TBODY TD {
		padding: 5px;
		border-left: solid 1px #ccc;
		overflow: hidden;

	}
	
	.dataGrid tbody td.active,
	.dataGrid tbody tr.switchcolor td.active {
		background: #b5d2d6;
		color: #303030;
		border-left: 1px solid #99c4ca;
	}
	
	.dataGrid TBODY TD.filler {
		padding: 0px;
	}
	
	
	.dataGridForm {
		position: absolute;
		right: 0px;
		top: 0px;
		border-top: solid 1px #ddd;
		background-color: #eee;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		
	}	
	
		.dataGridForm .inner {
			padding: 10px;
			float:none;
		}
		
		.dataGridForm INPUT {
			margin-right: 5px
		}
		
		
	.dataGrid .datagrid_pager {
		margin-top: 5px;
	}
	
		.dataGrid .datagrid_pager A {
			display: block;
			float: left;
			height: 22px;
			line-height: 22px;
			background-color: #ddd;
			margin-right: 1px;
			padding: 0px 8px;
			text-decoration: none;
			color: #333;
		}
		
		.dataGrid .datagrid_pager A:HOVER {
			background-color: #eee;
		}
		
		.dataGrid .datagrid_pager A.active {
			background-color: #000;
			color: #fff;
		}
		
		.dataGrid .datagrid_pager .spacer {
			float: left;
			width: 22px;
			height: 22px;
			text-align: center;
			background-color: #f0f0f0;
			cursor: default;
		}
		
		.dataGrid .datagrid_pager A.next , .dataGrid .datagrid_pager A.prev {
			padding: 0px;
			width: 20px;
			text-align: center;
			background-image: url('../images/arrow-left.png');
		}
		
		 .dataGrid .datagrid_pager A.next {
			background-image: url('../images/arrow-right.png');
		 }
		 
	

	
/* POPUPS */

#popups {
	position: absolute;
	z-index: 10;
}

	#popups .popup {
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 1;
		-moz-box-shadow: 0px 10px 15px #aaa;
		-webkit-box-shadow: 0px 10px 15px #aaa;
		box-shadow: 0px 10px 15px #aaa;
	}
	
		#popups .popup.noshadow {
		-moz-box-shadow: 0px 0px 0px #aaa;
		-webkit-box-shadow: 0px 0px 0px #aaa;
		box-shadow: 0px 0px 0px #aaa;
		}
			
			#popups .popup .head {
				background-color: #333;
				height: 25px;
				padding-left: 8px;
				line-height: 25px;
				color: #FFF;
				font-weight: bold;
				-webkit-border-top-left-radius: 5px;
				-webkit-border-top-right-radius: 5px;
				-moz-border-radius-topleft: 5px;
				-moz-border-radius-topright: 5px;
				border-top-left-radius: 5px;
				border-top-right-radius: 5px;
				cursor: move;
			}
			
			#popups .popup .content {
				background-color: transparent;
				background-image: url('../images/fades_EEEEEE_90.png');
				padding: 5px;

			}
			
						#popups .popup .content .tabContainer {
								height: auto;
						}
								#popups .popup .content .tabContainer  .tabBlock {
									background-color: #fff;
									height: 100%;
								}
								#popups .popup .content .tabContainer UL {
									background-color: transparent;
									margin: 0px;
									padding: 0px;
								}
								
									#popups .popup .content .tabContainer UL LI {
										margin: 0px;
										padding: 0px;
										list-style-type: none;
										float: left;
									}
						
									
									#popups .ui-state-default  A {
										display: block;
										height: 25px;
										line-height: 25px;
										padding-left: 10px;
										padding-right: 10px;
										color: #000;
										font-weight: bold;
										text-decoration:none;
										background-color: #ccc;
										-webkit-border-top-left-radius: 5px;
										-webkit-border-top-right-radius: 5px;
										-moz-border-radius-topleft: 5px;
										-moz-border-radius-topright: 5px;
										border-top-left-radius: 5px;
										border-top-right-radius: 5px;
										margin-right: 5px;
									}
									
								
									#popups .ui-state-hover A {
										background-color: #ddd;
									}								
														
									#popups .ui-state-active A {
										background-color: #fff;
									}
														
									#popups .ui-tabs-panel  {
										background-color: #fff;
										bottom: 0px;
									}
									
									#popups .ui-tabs-hide {
										display: none;
									}
									
									#popups .buttonRow {
										margin: 10px;
										margin-bottom: 0px;
										margin-top: 0px;
										padding-top: 10px;
									}
									
												#popups .buttonRow.forceright, #popups .buttonRow.forceleft {
													/* margin: 0px;
													padding: 0px; */
												}
												
	
									#popups .dataGrid {
										padding: 10px;
									}
									
									#popups  FORM { /* buttonrow default */
										text-align: right;
									}
									
									#popups  FORM TABLE {
										margin: 0px;
									}
																		
									#popups  FORM INPUT[type=button], #popups  FORM INPUT[type=submit]  {
										margin-left: 5px;
									}
									
									#popups .ui-tabs-panel   {
										overflow-y: auto;
										-webkit-overflow-scrolling: touch;
									}
									
									
									#popups .ui-tabs-panel  FORM { /* override for form content */
										padding: 10px;
										margin-top: 0px;
										text-align: left;
									}
															
									#popups .ui-tabs-panel  TD {
										padding: 5px;
										text-align: left;
									}
									
									#popups .ui-tabs-panel  TD INPUT {
										margin-right: 3px;
									}
									
									#popups .ui-tabs-panel  TD SELECT {
										min-width: 130px;
									}
									
										#popups .ui-tabs-panel  TD.label {
											text-align: right;
										}
	
	
/* INDICATOR  */

#indicator {
z-index: 1000;
position: absolute;
display: none;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
color: #121212;
}

#indicator .filler {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000;
opacity: 0.70; 
filter:alpha(opacity=70); 
-khtml-opacity: 0.70; 
opacity: 0.70; 
}

#indicator .holder {
position: absolute;
left: 50%;
top: 0px;
background-color: #fff;
margin-left: -100px;
width: 200px;
text-align: center;
height: 80px;
line-height: 80px;
font-size: 20px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
cursor: default;
}

/* MESSENGER */

#messenger {
z-index: 999;
display: none;
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
width: 100%;
height: 100%;
color: #121212;
}

		#messenger .filler {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background-color: #000;
		opacity: 0.70; 
		filter:alpha(opacity=70); 
		-khtml-opacity: 0.70; 
		opacity: 0.70; 
		}


		#messenger .holder {
		position: absolute;
		left: 50%;
		top: 0px;
		background-image: url('../images/fades_000000_50.png');
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
		margin-left: -250px;
		width: 500px;
		padding: 6px;
		}

		#messenger .messenger {
		background-color: #fff;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		padding: 15px;
		}

		#messenger .messenger .buttons {
		margin-top: 15px;
		}

		#messenger .messenger .buttons INPUT {
		padding-left: 10px;
		padding-right: 10px;
		border: solid 1px #ccc;
		background-color: #f0f0f0;
		color: #888;
		height: 28px;
		line-height: 80%;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		cursor: pointer;
		margin-right: 5px;
		}

		#messenger .messenger .buttons INPUT:HOVER {
		background-color: #111;
		color: #fff;
		border-color: #000;
		}


/* autocomplete */
.autocomplete {
	z-index: 10;
	position: relative;
	cursor: default;
}

.ui-autocomplete-input {
margin-bottom: 2px;
outline:none;
background-color: #fff;
background-image: url('../images/search-icon.png');
background-repeat: no-repeat;
background-position: 96% 5px;
padding-right: 25px;
border-top-color: #aaa;
border-left-color: #aaa;
color: #666;
position: relative;
display: inline-block;
}	

.searchIcon {
background-image: url('../images/icons/report_magnify.png');
background-repeat: no-repeat;
background-position: 4px 6px;
width: 20px;
height:22px;	
display: none;
position: absolute;
cursor: pointer;
}

.ui-autocomplete-input.active {
	-webkit-border-radius: 0px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius: 0px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-radius: 0px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-bottom: solid 1px #f0f0f0;
}

	.ui-autocomplete-input.failed {
		background-color: #FFFAFC;
		text-decoration: none;
	}
	
	.ui-autocomplete-input.found {
		background-color: #FcFFFF;
		color: #000;
		text-decoration: underline;
	}

.ui-autocomplete {
	border: solid 1px #d2d2d2;
	border-top: none;
	border-left-color: #aaa;
	background-color: #fff;
	
	position: absolute;
	list-style-type: none;
	list-style: none;
	padding: 0px;
	color: #fff;
	
	-webkit-border-bottom-left-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	
	margin-top: -3px;
	
	/*scrollbars zoek*/
	max-height: 300px;
	overflow-y: auto;
	
	
}

	.ui-autocomplete LI A{
		display: block;
		padding: 5px;
		cursor: default;
		outline: none;
		-webkit-border-bottom-left-radius: 0px;
			-webkit-border-bottom-right-radius: 0px;
			-moz-border-radius-bottomleft: 0px;
			-moz-border-radius-bottomright: 0px;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
	}
	
	.ui-autocomplete LI:last-child A.ui-state-hover {
			-webkit-border-bottom-left-radius: 4px;
			-webkit-border-bottom-right-radius: 4px;
			-moz-border-radius-bottomleft: 4px;
			-moz-border-radius-bottomright: 4px;
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
	}
	
	.ui-autocomplete LI A.ui-state-hover {
		color: #fff;
		background-color: #333;
	}

/* Upload  */

.filesetter {
	display:none;
	padding: 7px;
	width: 70%;
	background-color: #ccc;
	color: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

		.filesetter .button {
			display: block;
			float: right;
		}
		
			.filesetter .button IMG {
				vertical-align: bottom;
				border: none;
			}
			
			.filesetter A {
				color: #fff;
			}
			
			
/* Radio */

.radio-horizontal .item {
	float: left !important;text-align: center;
}

.radio-horizontal .item LABEL{
	text-align: center;width: 100%;padding-right: 4px;cursor: pointer;
	display: block;
}


.radio-vertical .item {
	width: 100% !important;
}

.radio-vertical .item LABEL{
	padding-right: 15px;cursor: pointer;
}

.noPadding {
padding: 0px !important;
}

/* MP Checkbox */
.MP_Checkbox		{
	position: relative;
	padding-left: 20px;
}

.MP_Checkbox:hover {
	cursor: pointer;
}

		.MP_Checkbox input	{
			position: absolute;
			top: 2px;
			left: 0;
			height: auto;
			line-height: normal;
		}


/* MP Radiobutton */
.MP_Radio		{
	position: relative;
	padding-left: 20px;
}

.MP_Radio:hover {
	cursor: pointer;
}

		.MP_Radio input	{
			position: absolute;
			top: 2px;
			left: 0;
			height: auto;
			line-height: normal;
		}

/* SiteStatus */
#header #siteStatus	{
	background: #000;
	background: rgba(0,0,0,0.9);
	padding: 10px 15px;
	box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

		#header #siteStatus td {
			color: #fff;
			font-weight: bold;
		}