/* css for customisation */

#logo{	background-image: url(../gfx/custom/logo.jpg);}
#trolleycompact{	background-image: url(../gfx/custom/back.trolleycompact.gif);}
#trolleycompact a{
	background-image: url(../gfx/custom/butt-register.gif);
	text-indent: 20px;
	height: 15px;
	color: #37628f;}
#trolleycompact a:hover, #trolleycompact a:active{ background-image: url(../gfx/custom/butt-register-hover.gif); color: red;}
#language{	background-color: #f8f8f8;	border: 1px solid #bebebe;}
.loginbutton:link, .loginbutton:visited{
	width: 78px;
	height: 19px;
	margin-top: 2px;
	background-image: url(../gfx/custom/butt-login.gif);
	text-align: center;
	color: #37628f;
	font-weight: bold;
	padding-top: 3px;
}
.loginbutton:hover, .loginbutton:active{
	background-image: url(../gfx/custom/butt-login-hover.gif);
	color: Red;
}

#register{
	background-color: #f8f8f8;
	border: 1px solid #bebebe;
	border-top: 0;
	padding: 5px 10px 0px 10px;
	height: 20px;
	/* geen width nodig: volgt automatisch via de
	tekstlengte van '#register a' tenzij IE6:
	daar moet de width voor '#register a' vastgezet worden */}

#register a{
	background-image: url(../gfx/custom/butt-register.gif);
	text-indent: 20px;
	height: 15px;
	color: #37628f;
	width: auto !important;
	width: 200px; /* voor IE6 - afstemmen op tekstbreedte!!!! */}
	

#register a:hover, #register a:active{ background-image: url(../gfx/custom/butt-register-hover.gif); color: red;}
#tablist li{
	height: 15px;
	text-align: center;
	margin: 0 3px 0 0;
	padding: 4px 15px 0 15px;
	background-image: url(../gfx/custom/tab-back.gif);
	border-right: 1px solid #e3e4e4;
}
#tablist li.selected{
	height: 15px;
	margin-top: -4px;
	padding-top: 8px;
	background-image: url(../gfx/custom/tab-back-selected.gif);
	border-right: 1px solid #bebebe;
}
#tablist a{	color: #818181;}
#tablist a:hover, #tablist a:active{	color: Red !important;}
#tablist li:hover, #tablist li:active{
	height: 15px;
	margin-top: -4px;
	padding-top: 8px;
	background-image: url(../gfx/custom/tab-back-selected.gif);
	border-right: 1px solid #bebebe;}
#tablist li.selected a{	font-weight: bold; color: #37628f}
#tabdivider{
	height: 1px; /* IE6 kan niet kleiner dan 10px gaan; vandaar geen backgroundcolor maar een border-top van 1px */
	padding: 0;
	width: 100%;
	margin-bottom: 10px !important;
	margin-bottom: 25px;
	border-top: 1px solid #e3e4e4;}

#zoekfunctie{
		display: block;
		margin: -20px 0 20px 0;
	}
.zoekveld{
	font-size: 7pt; margin: 0 5px 0 13px;background-color:#cec4b7;border:solid 1px #94856d;color:#94856d;
}	
.zoekbutton{
	display: block;
	float:  right;
	margin: -18px 25px 0 0 !important;
	margin: -20px 13px 0 0;
	text-indent: -2000px !important;
	text-align: left !important;
	height:19px;
	width:19px;
	border-width:0px;
	background-image: url(../gfx/custom/butt-zoek.gif) !important;}
	
.zoekbutton:hover, .zoekbutton:active{
	background-image: url(../gfx/custom/butt-zoek-hover.gif) !important;}


#overzichtpix li{
		height: 170px;
		/* height fixen, anders problemen met 2-3 rijen tekst onder de pix */
		/* 170px: laat 3 tekstlijnen toe onder pic in Essefsite*/
		/* indien height > 170: er kan langs onder een gat vallen in IE */
}	
	
.table-overview td.codeveld{}	
.table-overview td.codeveld a:link, .table-overview td.codeveld a:visited{}
.table-overview td.codeveld a:hover, .table-overview td.codeveld a:active{	color: #d60216;}
.table-overview td.produktveld{ 	font-weight: bold;}
 
 

.rowcolor1 td.codeveld{ background-color: #ededee;}
.rowcolor2 td.codeveld{ background-color: #e5e5e5;}
.rowcolor1 td.produktveld{ background-color: #f8f8f8;}
.rowcolor2 td.produktveld{ background-color: #ebecec;}

/*.rowcolor1 td.produktveld a{ border: 1px solid red; height: 100px}*/

.rowcolor1 td.produktveld:hover{ background-color: #d60216;}
.rowcolor1 td.produktveld:hover a{ color: white;}
.rowcolor2 td.produktveld:hover{ background-color: #d60216;}
.rowcolor2 td.produktveld:hover a{ color: white;}

.table-overview tr.selected, .table-overview tr.selected td.codeveld, .table-overview tr.selected td.produktveld{ background-color: #9cb10c; color: #fff;}
.table-overview tr.selected td.codeveld a:link, .table-overview tr.selected td.codeveld a:visited{
	color: #fff;
}
.table-overview tr.selected td.codeveld a:hover, .table-overview tr.selected td.codeveld a:active{
	color: #d60216;
}
tr.selected td.produktveld:hover{ background-color: #d60216}
tr.selected td.produktveld:hover a{ color: white;}

/* background dotpattern from rows repeated on coloured td's, otherwise the dots disappear */
.rowcolor1 td.codeveld, .rowcolor2 td.codeveld, .rowcolor1 td.produktveld, .rowcolor2 td.produktveld{
	background-image: url(../gfx/divider.dotted.gif);	background-repeat: repeat-x;	background-position: bottom;
}