/* Algemene CSS file voor de ganse applicatie */
body {
	font-family:"Roboto",sans-serif;
	font-size:16px;
}

.logo {
	background:url("../images/logo.png");
	width:100%;
	height:200px;
	background-position:center;
	float:left;
	background-repeat:no-repeat;
}

.titel { font-weight:bold; font-size:20px; }

#banner {
	width:100%;
	height:50px;
	background:#000;
	font-size:16px;
	color:#FFF;
	vertical-align:middle;
	line-height:50px;
	float:left;
	position:fixed;
	left:0px;
	top:0px;
	padding:4px;
}

	#banner #banner_titel { width:auto; float:left; font-size:27px; }
	#banner #banner_buttons { width:auto; float:right; margin-right:10px; }
		#banner #banner_buttons img { width:44px; height:44px; margin:3px; }
			#banner #banner_buttons img:hover { cursor:pointer; }
	#banner #banner_user  { width:auto; float:right; margin-right:10px; }

#content {
	width:90%;
	height:100%;
	float:left;
	position:fixed;
	overflow-x:hidden;
	overflow-y:auto;
	left:10%;
	top:60px;
}

.scrollbar::-webkit-scrollbar, .col1 .col_detail::-webkit-scrollbar {
	background: transparent;
	width:10px;
	height:5px;
}
.scrollbar::-webkit-scrollbar-thumb, .col1 .col_detail::-webkit-scrollbar-thumb {
	 -webkit-border-radius: 10px;
	border-radius: 10px;
	background: rgba(0,0,0,0.8); 
	-webkit-box-shadow: inset 0 0 4px rgba(204,204,204,0.5); 
}
.scrollbar::-webkit-scrollbar-thumb:hover, .col1 .col_detail::-webkit-scrollbar-thumb:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

.row { 
	width:100%;
	float:left;
	height:auto;
	vertical-align:middle;
	line-height:30px;
	min-height:30px;
	position:relative;
}

	.row img { width:28px; height:28px; margin:1px; }
		.row img:hover { cursor:pointer; }
		
.error_row { color:#ed1c24; text-align:center; }
.hidden_row { display:none; }

input    { width:90%; height:23px; border:1px solid #CCC; border-radius:4px; font-family:"Roboto"; }
select   { width:90%; height:27px; border:1px solid #CCC; border-radius:4px; font-family:"Roboto"; }
textarea { width:90%; height:23px; border:1px solid #CCC; border-radius:4px; font-family:"Roboto"; }

.mt5 { margin-top:5px; }

.button {
	width:150px;
	vertical-align:middle;
	text-align:center;
	font-size:14px;
	background:#FFC421;
	border-radius:4px;
	color:#000;
	border:1px solid #FFC421;
}

	.button:hover { cursor:pointer; background:#FFF; color: #000; }


#content .header, #content .header_detail {
	font-weight:bold;
	text-transform:italic;
}

	#content .header:hover, #content .header_detail:hover {
		cursor:pointer;
		color:#FFC421;
	}
	
#content .highlight:hover {
	background:#FFC421;
}

.update { display:none; }
.file_upload { display:none; }
/*----------------------------------------------------
	SPINNERS
----------------------------------------------------*/
.spinner {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('../images/spinner.gif') 
                10% 10%
                no-repeat;
	background-position:center;
}

.detail_spinner {
    display:    none;
    position:	absolute;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
                url('../images/spinner.gif')
				no-repeat;
	background-size:5%;
	background-position:center;
}

.detail_filter {
    display:    none;
    position:	absolute;
    z-index:    201;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
				no-repeat;
}

#filter {
	position:fixed;
	width:100%;
	height:100%;
	z-index:10;
	background:#FFF;
	opacity: 0.5;
    filter: alpha(opacity=50);
	display:none;
	left:0px;
	top:0px;
}

/*----------------------------------------------------
	JQUERY DIALOG STYLE
----------------------------------------------------*/
.ui-dialog, #dialog { z-index: 1000 !important ;}
.succes .ui-dialog-titlebar 		{ background:#b4fab4; }
.dialog-error .ui-dialog-titlebar  	{ background:#ed1c24; }
.ui-dialog-titlebar-close 			{ visibility:hidden;  }

/*----------------------------------------------------
	WIDTH STYLES
----------------------------------------------------*/
.w_text  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; }
.w_stext { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; }
.w_nr    { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; }
.w_snr   { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; }
.w_prijs { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; }
.w_limg  { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; }
	.w_limg:hover { cursor:pointer; }
.w_img   { width:30px; float:left; }
	.w_img:hover { cursor:pointer; }

/*----------------------------------------------------
	MENU STYLE
----------------------------------------------------*/
#menu {
	width:10%;
	height:100%;
	float:left;
	position:fixed;
	overflow:hidden;
	border-right:1px solid black;
	top:58px;
	left:0px;
	background:#0099DA;
}

#menu .row {
	border-bottom:1px solid black;
	color:#FFF;
	height:50px;
	line-height:50px;
	vertical-align:middle;
	position:relative;
	font-size:18px;
}

	#menu .row:hover {
		cursor:pointer;
		color:#FFC421;
	}
	
#menu .row img { width:22px; height:22px; margin:16px 14px; vertical-align:middle; }

#menu .sub_menu { 
	display:none;
	width:100%;
	height:auto;
	float:left;
	background:#8a8a8a;
}

	#menu .sub_menu .row { border-bottom:1px solid #FFF; color:#000; padding-left:20%; }
		#menu .sub_menu .row:hover { cursor:pointer; color:#FFC421; }
		
	#menu .selected_menu { color:#FFC421; }
	#menu .sub_menu .selected_menu { color:#FFC421; }