/*** VdJ Adapted from alistapart.com */ 
/* @import "menu.css";      /* hidden from nearly all v4 browsers  */
/* @import "tabs.css";      /* hidden from nearly all v4 browsers  */

@import "popup.css";      /* hidden from nearly all v4 browsers  */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
	width:50px;
}

.vervang_artikel:link { color:black;}
.vervang_artikel:active { color:black;}
.vervang_artikel:visited { color:black;}

.bewaar_button {background:url(/img/bewaar.gif) no-repeat; align:center;height:24px;width:60px;border:0 }
.bewaar_button:active {background:url(/img/bewaar_active.gif) no-repeat; align:center;height:24px;width:60px;border:0 }

.print_button {background:url(/img/print.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.print_button:active {background:url(/img/print_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }

.setup_button {background:url(/img/setup_ppl.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.setup_button:active {background:url(/img/setup_ppl_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }

.artikelnummers_button {background:url(/img/artikelnummers.gif) no-repeat; align:center;height:24px;width:110px;border:0 }
.artikelnummers_button:active {background:url(/img/artikelnummers_active.gif) no-repeat; align:center;height:24px;width:110px;border:0 }

.add2ppl {background:url(/img/add2ppl.gif) no-repeat; align:center;height:24px;width:150px;border:0 }
.add2ppl:active {background:url(/img/add2ppl_active.gif) no-repeat; align:center;height:24px;width:150px;border:0 }
.bestel_button {background:url(/img/bestel.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.bestel_button:active {background:url(/img/bestel_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.go_button {background:url(/img/go.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.go_button:active {background:url(/img/go_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.wijzig_button {background:url(/img/wijzig.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.wijzig_button:active {background:url(/img/wijzig_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.verwijder_button {background:url(/img/verwijder.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.verwijder_button:active {background:url(/img/verwijder_active.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.afsluit_button {background:url(/img/afsluiten.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.afsluit_button:active {background:url(/img/afsluiten_active.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.verzend_button {background:url(/img/verzend.gif) no-repeat; align:center;height:24px;width:95px;border:0 }
.verzend_button:active {background:url(/img/verzend_active.gif) no-repeat; align:center;height:24px;width:95px;border:0 }
.ppl_button {background:url(/img/ppl.gif) no-repeat;background-color:#fe6403; color:#ffffff; align:center;height:24px;width:95px;border:0 }
.ppl_button:active {background:url(/img/ppl_active.gif) no-repeat;background-color:#fe6403; color:#ffffff; align:center;height:24px;width:95px;border:0 }
.reset_button {background:url(/img/reset.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.reset_button:active {background:url(/img/reset_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.select_button {background:url(/img/selecteer.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.select_button:active {background:url(/img/selecteer_active.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.dselect_button {background:url(/img/dselect.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.dselect_button:active {background:url(/img/dselect_active.gif) no-repeat; align:center;height:24px;width:75px;border:0 }
.login_button {background:url(/img/login.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.login_button:active {background:url(/img/login_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.add2basket_button {background:url(/img/add2basket.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.add2basket_button:active {background:url(/img/add2basket_active.gif) no-repeat; align:center;height:24px;width:55px;border:0 }
.basket {background:url(/img/basket.gif) no-repeat; align:center;height:50px;width:50px;border:0 }
.basket:active {background:url(/img/basket_active.gif) no-repeat; align:center;height:50px;width:50px;border:0 }

#logo_in{
	float:right;
	position:relative;
    right: 10px;
    top: -15px;
	z-index:3;
}

#budget_tool{
    float: left;
    position:absolute;
    left: 400px;
    top: 5px;
	z-index:3;
}

.login_txt{
	color:#000000;
	background-color:#ddffdd;
	border:1px solid #DDEEE4;
	margin: 3px 6px 3px 6px;
	padding:3px;
	font-weight:normal;
	width:100px;
}

#logo{
	float:left;
	position:relative;
    right: -10px;
    top: 15px;
	z-index:3;
}

#basket{
	float:right;
	position:relative;
    right: 10px;
    top: 10px;
	z-index:3;
}

.delete_button{
	background:url(/img/fout.gif) no-repeat;
	width:18px;
	height:18px;
	border:none;
	align:center;
	valign:center;
}

/* main stuff */
/* error message */
/*.tooltip {
	display:none;
	background:transparent url(/img/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	

}
*/

.error em {
	display:block;
	width:0;
	height:0;
	border:10px solid;
	border-color:#FFFE36 transparent transparent;

	/* positioning */
	position:absolute;
	bottom:-17px;
	left:60px;
}

.error {
	/* supply height to ensure consistent positioning for every browser */
	height:15px;
	background-color:#FFFE36;
	border:1px solid #E1E16D;
	font-size:11px;
	color:#000;
	padding:3px 10px;
	margin-left:-2px;


	/* CSS3 spicing for mozilla and webkit */
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	-moz-border-radius-bottomleft:0;
	-moz-border-radius-topleft:0;
	-webkit-border-bottom-left-radius:0;
	-webkit-border-top-left-radius:0;

	-moz-box-shadow:0 0 6px #ddd;
	-webkit-box-shadow:0 0 6px #ddd;
}

body {
    background-color: #F2F2F2;
	background-image:url(/img/behang.jpg);
    color: #353535;
    font-size: 12px;
    font-family: verdana, helvetica, sans-serif;
    padding:0px;
    margin:0px;
    text-align: center;
    min-width: 90%;
    border-collapse: collapse
}

div.tree div.parent div {
	display:none;
  	cursor:default;
}

tr.child-{
	display:none;
}

table.detail, table.detail td, table.detail th { 
	border-collapse:collapse; 
	border:1px solid black; 
}

iframe#dagboek{
	height:550px;
}

.more{
	display:none;
}

.pager{
	align:center;
}

.thzoek { 
	text-align: center; 
	padding: 8px; 
	background-color: #4DBD33; 
	cursor:default; font-size:8pt; 
	font-size-adjust:none; 
	font-stretch:normal; 
	font-style:normal; 
	font-variant:normal; 
	color:#FFFFFF;
	font-weight:bold; 
	left:0pt; 
	line-height:normal; 
	padding:3px 5px; 
} 

th.ppl_header { 
	text-align: center; 
	padding: 8px; 
	background-color: #4DBD33; 
	cursor:default; font-size:8pt; 
	font-size-adjust:none; 
	font-stretch:normal; 
	font-style:normal; 
	font-variant:normal; 
	color:#FFFFFF;
	font-weight:bold; 
	left:0pt; 
	line-height:normal; 
	padding:3px 5px; 
} 

th.label { 
	text-align: center; 
	padding: 8px; 
	background-color: #4DBD33; 
	cursor:default; font-size:8pt; 
	font-size-adjust:none; 
	font-stretch:normal; 
	font-style:normal; 
	font-variant:normal; 
	color:#FFFFFF;
	font-weight:bold; 
	left:0pt; 
	line-height:normal; 
	padding:3px 5px; 
} 

th.header { 
	background-image: url(/img/small.gif);
	cursor: pointer; 
	font-weight: bold; 
	background-repeat: no-repeat; 
	background-position: center right; 
    background-color: #4DBD33; 
	color:#FFFFFF;
	padding-right: 20px; 
} 

th.headerSortDown { 
    background-image: url(/img/small_asc.gif); 
    background-repeat: no-repeat; 
	background-position: center right; 
    background-color: #4DBD33; 
	padding-right: 20px;
	color:#FFFFFF;
	font-weight: bold; 
}

th.headerSortUp { 
    background-image: url(/img/small_desc.gif); 
    background-repeat: no-repeat; 
	background-position: center right; 
    background-color: #4DBD33; 
	padding-right: 20px;
	color:#FFFFFF;
	font-weight: bold; 
}

.overzicht_selector{
	position:absolute;
	top:130px; left:120px;width:250px;
}


.dateclass{
	text-align:center;
}

.numclass{
	margin-right:10px;
	text-align:right;
}

h1 {
	font-size: 16px;
    text-align:center;
}

h2 {
	font-size: 14px;
    text-align:center;
}

h3{
	font-size: 12px;
    text-align:left;
}

h3.lokatie_naam{
	font-size: 12px;
    text-align:center;
}

pre {
    font-size: 12px;
}

a {	
	color: #0000ff;
}

.error {
	color: #FF0000
}

table {
    border-collapse: collapse;
}
td {
    vertical-align:top;
}

td.right{
    vertical-align:top;
    text-align:right;
}

td.left{
    vertical-align:top;
    text-align:left;
}

td.center{
    vertical-align:top;
    text-align:center;
}


/* main classes */
.bold{
    font-weight: bold;
}
.nodecor{
	text-decoration:none;
	border:0px;
}

.red{
	text-decoration:none;
	font-weight:bold;
	color: #ff0000;
	
}

.comboselect_input{
    background-color: #FFFFFF;
	border: 1px solid #353535;
	height:18px;
	width:298px;
}
.comboselect_select{
   	background-color: #FFFFFF;
	border: 1px solid #353535;
}

.col0{
    width:0px;
}

.col1{
    width:150px;
}

.col2{
    width:300px;
}

.col3{
    width:450px;
}

.col4 {
    width:600px;
}   

.col5 {
    width:750px;
}

.col6 {
    width:900px;
}

.journaal_menu{
    background:#dddddd;
    vertical-align:top;
    width:150px;
	height:20px;
}

.login{
    background:#4DBD33;
	color:#ffffff;
	text-align:center;
    vertical-align:middle;
}

#login_screen{
	background-image:url('/img/gras.jpg'); 
    background-repeat: no-repeat;
}

.label{
	background-image:url('/img/gras.jpg');
    background:#4DBD33;
    vertical-align:top;
}

.data{
    vertical-align:top;
}

#box {
    border: 1px solid #BBBBBB;
    
}

#notebox {
    border: 1px solid #BBBBBB;
	display:none;
}

/* other stuff */
#header {
    width: 90%;
    height: 120px;
    margin: 0px auto;
    text-align: left;
    background-color: #FFFFFF;
    background-image: url('/img/cloud.jpg');
    background-repeat: repeat;
    border: 1px solid #DDEEE4;
    border-collapse: collapse
}

#systemMessage{
	width:100%;
	height:20px;
	text-align:center;
	font-weight:bold;
	color:#000080;
	border: 1px solid #FF9900;
	background-color:#FFFF00;
}

#balk{
	width: 90%;
	height: 12px;
    margin: 0px auto;
}

#header .text {
    position:absolute;
	font-weight:bold;
	color: #FFFF17;
    margin-left: 90px;
    margin-top:  30px;
    font-size:   18px;
}

#topmenu {
    width: 90%;
    height: 22px;
    margin: 0px auto;
    padding: 0px 0px 0px 0px;
    text-align: left;
    vertical-align:middle;
    background-color: #ffffff;
    color: #ffffff;
    border: 0px solid #DDEEE4;
    border-left: 1px solid #DDEEE4;
    border-right: 1px solid #DDEEE4;
    border-collapse: collapse;
    z-index: 2000;
}

#menuleft {
    float:right;
    color: #353535;
    margin-right:5px;
    z-index: 2000;
}

#ppl_container {
    text-align: left;
    vertical-align: top;
    margin: 0px auto;
    padding: 0px;
    width: 90%;
    background-color: #FFFFFF;
    border: 1px solid #353535;
    border-collapse: collapse
}

#container {
    text-align: left;
    vertical-align: top;
    margin: 0px auto;
    padding: 0px;
    width: 90%;
    min-height:600px;
    background-color: #FFFFFF;
    border: 1px solid #DDEEE4;
    border-collapse: collapse
}

#content {
    text-align: left;
    vertical-align: top;
    margin: 5px;
    padding: 0px;
}

#center {
    margin: 100px auto;
    text-align: center;
    width: 500px;
    min-height:90%;
    background-color: #DDDDDD;
    border: 1px solid #DDEEE4;
    border-collapse: collapse;
}


#info {
    text-align: center;
}

#login {
    font-size:100%;
    margin:5px;
    text-align: center;

}

/* form and field css */
.fieldWrapper {
	background-color: #EEEEEE;
	border: 1px solid #353535;
}

/* editable area */
.noborder {
	border:none;
}
.hidden {
	display:none;
}
.float_left {
	float:left;
}

.float_right {
	float:right;
}

.inline {
	display:inline;
}
.auto_margin{
	margin: 0px auto;
	text-align: center;
}
.block {
	display:block;
}



/* editable field settings */
.required {
	border: 1px solid #353535;
	background-color: #ddffdd;
	margin:1px;
	padding:1px;
 	z-index:1;	
}

.timebox {
	border: 1px solid #353535;
	background-color: #ddffdd;
	margin:1px;
	padding:1px;
 	z-index:1;	
}

.editable {
	border: 1px solid #353535;
	background-color: #ddffdd;
	margin:1px;
	padding:1px;
 	z-index:1;	
}

.editable_input input{
	margin:0px;
	padding:0px;
	border:solid 0 #000;
	background: transparent;
	font-family: verdana, helvetica, sans-serif;
	font-size: 11px;
   	z-index:2;	
}
.ul_horizontal ul{
	list-style:none;
}
.ul_horizontal li{
	float:left;
}

#genome_view{
	width:350px;
	height:350px;
	border: 1px solid #F53535;
	float :right;
}

#tooltip {
	position: relative;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.85;
}

/*
th div.tablefilter-column { padding-left:16px; float:left; cursor:pointer; background:url(/img/filter_off.png) no-repeat left center; }
th.filtered div.tablefilter-column { background:url(/img/filter_on.png) no-repeat left center; } 
#tablefilter-field { padding:3px; }
#tablefilter-clear,
#tablefilter-close { padding:3px; font-weight:bold; float:left; cursor:pointer; }
#tablefilter-input { float:left; clear:both; } 
*/


/*-----------------------------------------------------------------------------------------------*/
/*                                            TOOLTIP                                            */
/*-----------------------------------------------------------------------------------------------*/

.toolTip { /* This is the hook that the jQuery script will use */
	padding-right: 20px; /* This is need to make sure that the help icon is always visible */
	background: transparent url(http://system.maxivers.nl/img/help.gif) no-repeat right;
	color: #3366FF;
	cursor: help; 
	position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
}

	.toolTipWrapper { /* The wrapper holds its insides together */
		width: 175px;
		position: absolute; /* Absolute will make the tooltip float above other content in the page */
		top: 20px;
		display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
		color: #FFF;
		font-weight: bold;
		font-size: 9pt; /* A font size is needed to maintain consistancy */
	}
	
		.toolTipTop { /* Top section of the tooltip */
			width: 175px;
			height: 30px;
			background: transparent url(http://system.maxivers.nl/img/bubbleTop.gif) no-repeat;
		}

		.toolTipMid { /* Middle section of the tooltip */
			padding: 8px 15px;
			background: #A1D40A url(http://system.maxivers.nl/img/bubbleMid.gif) repeat-x top;
		}
		
		.toolTipBtm { /* Bottom Section of the tooltip */
			height: 13px;
			background: transparent url(http://system.maxivers.nl/img/bubbleBtm.gif) no-repeat;
		}

a:hover { color: #FF0000;}
a:visited { color: #969696; }