/* ################################################## */
/*  Made by: www.DIRECT BASING.com                    */
/*  Semantisch correcte xHTML Basing                  */
/* ################################################## */

/* ### general ### */
html, body, table {
	font-size: 12px;
}
#aantal {
	margin-right:20px!important;
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

.invoeren {font-size:11px!important;}

.navSelect {
    float: right;
    margin-top: -44px;
    margin-right: 70px;
}
/*  DATATABLES */
	table.dataTable tbody tr:nth-child(odd) { background-color: #E2E4FF!important; }
	table.dataTable tbody tr:nth-child(even) { background-color: white!important; }
	
	.dataTables_wrapper input {padding:5px;}
	.dataTables_wrapper select {padding:5px;}
	
	.invoeren input,select {	padding:5px;
						border:1px solid black; 
					}

	table.dataTable thead th {
		text-align:left;
	}
table.dataTable,table.tabel {
	margin-bottom: 33px !important;
	}

	
.message {
        background-color: #0193d7;
        color: #fff;
        height: 23px;
        font-size: 15px;
        font-family: monospace;
        position: absolute;
        width: 100%;
        z-index: 10000;
        top: 0;
        left: 0;
        text-align:center;
    }
.dataTables_paginate {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 9998;
}
.dataTables_wrapper .dataTables_paginate {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.dataTables_info {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9998;
}
.dataTables_wrapper .dataTables_info {
    padding-top: 0 !important;
    line-height: 33px;
padding-left: 10px;
}

/* ORDER POP-UP */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}


.color1{background-color:#a8e6cf!important;}
.color2{background-color:#ffaaa5!important;}
.color3{background-color:#dcedc1!important;}
.color4{background-color:#ffd3b6!important;}
.color5{background-color:#ff8b94!important;}
.color6{background-color:#dcedc1!important;}
.color7{background-color:#a8e6cf!important;}
.color8{background-color:#ffd3b6!important;}
.color9{background-color:#dcedc1!important;}
.color10{background-color:#ff8b94!important;}

.padding5 {padding:5px;}
.margin10 {margin:10px;}
.center {text-align:center;}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
  height:75vh;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}


.mouseover:hover{
	background-color:#e1e1e1!important;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}



/* Navbar container */
.navbar {

  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
[type=submit] {
text-align:center;
	position: relative;
	display:inline-block;
	padding: 7px 15px ;
	margin: 7px;
	color: #000;
	font-size:15px;
	background-color: #A5DC86;
	border: solid 1px #808080;
	clear: both;
	border-radius: 4pt;	
    cursor:pointer;
}
/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

.subnavbar {

  overflow: hidden;
  background-color: #ccc;
  font-family: Arial;
}

/* Links inside the navbar */
.subnavbar a {
  float: left;
  font-size: 16px;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
}
.dropdown-content.custom {
	min-width: 100%;
}

.small a{
	font-size:15px!important;
	padding: 6px 8px!important;
}
/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content.custom a {
  display: inline-block;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

.button {
	text-align:center;
	position: relative;
	display:inline-block;
	padding: 10px 20px ;
	margin: 7px;
	color: #000;
	font-size:20px;
	background-color: #A5DC86;
	border: solid 1px #808080;
	clear: both;
	border-radius: 4pt;	
    cursor:pointer;
	text-decoration: none;
}

.red {
  background-color: #E71837!important;	
}

.small_button {
    border: none;
    color: white;
    padding: 5px 7px;
    margin: 5px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
}


footer{
	position:fixed;
    left: 0;
    bottom: 0px;
    width: 100%;
	font-size:12px;
    background-color: #efefef;
    line-height: 33px;
    text-align: center;
	height: 33px;
z-index:9997;
border-top: 1px solid #111;
}



/* ###################### */



* { margin: 0px; padding: 0px; }
html, body { font-family: Verdana; font-size: 12px; color: #3f454c; }
input, select, textarea { padding:5px; font-family: Verdana; font-size: 12px; color: #3f454c; }
body { background: #fff; }
img { border: 0px; display: block; }
a, input { outline: none; }

a.TopGreenButton {
    text-align: center;
    position: relative;
    display: inline-block;
    padding: 10	px ;
    margin: 3px;
    color: #000!important;
    font-size: 16px;
    background-color: #A5DC86;
    border: solid 1px #808080;
    clear: both;
    border-radius: 4pt;
	padding:10px;
}
a.TopGreenButton:hover {
	color:white!important;
    background-color: #A5DC86;

}

.greenButton {
	z-index: -100;    
    text-align: center;
    position: relative;
    display: inline-block;
    padding: 10px;
    margin: 100px 0px 0px 0px;
    color: #000;
    font-size: 16px;
    background-color: #A5DC86;
    border: solid 1px #808080;
    clear: both;
    border-radius: 4pt;
}

.greenButton100 {
    width:100%;
    text-align: center;

    display: inline-block;
    padding: 0px;
    margin: 0px 0px 0px 0px;
    color: #000;
    font-size: 16px;
    background-color: #A5DC86;
    border: solid 1px #808080;
    clear: both;
    border-radius: 4pt;
	z-index:100;
}


::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #BBBBBB;
  opacity: 1; /* Firefox */
}

.active {background-color:#FFCCCB!important; }

.tabel {   
  padding: 0 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;}

.filter-table {
margin:5px;

}
.filter-table input {padding:3px;}
.tabel  thead tr {background-color:black!important;color:white!important;font-weight:bold  }
.tabel th {padding:4px;text-align:center;}

.tabel  tr:nth-child(even) {background: #e1e1e1;  }
.tabel   tr:nth-child(odd) {background: #FFF;  }
.tabel   tr:hover {background: #ffffcd;  }

.tabel td {padding:4px;}


.tabel2  thead tr {background-color:black!important;color:white!important;font-weight:bold  }
.tabel2 td {padding:4px;}

.tabel-content {
		font-size:11px;
		width:100%;
}

.tabel-content td {padding:0px;}

/* ### global classes ### */
.clear { clear: both; height: 0; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; }

/* ### main container ### */
#mainCntr { margin: 0 0px; width: 100%; }

	/* ### header container ### */
	#headerCntr { position: relative; width: 100%; height: 100px; }
	#headerCntr a.logo { position: absolute; top: 44px; left: 0px; display: block; width: 272px; height: 99px; text-indent: -9999px;  }
	/* background: url('../images/logo.png') no-repeat;*/
	
		/* ### menu box ### */
		.menuBox { position: fixed; top: 0; width:100%;z-index:9999}
		.menuBox ul { list-style: none; }
		.menuBox li { float: left; text-transform: uppercase; font-size: 12px;  }
		.menuBox li a { display: block; padding:0px 5px;  background: url('../images/green.png') no-repeat 0 bottom; color: #fff; text-decoration: none; line-height: 25px; height: 25px; text-align: center; }
		.menuBox li.blue a { background: url('../images/blue.png') no-repeat 0 bottom; }
		.menuBox li.yellow a { background: url('../images/yellow.png') no-repeat 0 bottom; }
		.menuBox li.orange a { background: url('../images/orange.png') no-repeat 0 bottom; }
		.menuBox li.red a { background: url('../images/red.png') no-repeat 0 bottom; }
		.menuBox li a:hover, .menuBox li.active a { height: 34px; }
		
		.menuBox .dropdown-content a#all {
			float: left;
			width: 20%;
		}
		.menuBox .dropdown-content ul {
			float: left;
			width: 100%;
		}
		.menuBox .dropdown-content li {
			width: 100%;
		}		
		.menuBox .dropdown-content.custom li {
			max-width: 12.5%;
		}
		.menuBox .dropdown-content li a {
			display: block;
			color: #000;
			text-align: left;
		}
		.menuBox .dropdown-content li a:hover, .dropdown-content .custom li.active a {
			height: auto;
		}
		
		/* ### lang box ### */
		.langBox { position: absolute; top: 70px; right: 15px; }
		.langBox ul { list-style: none; }
		.langBox li { color: #3f454c; margin: 0 5px; float: left; }
		.langBox li a { color: #3f454c; text-decoration: none; }
		.langBox li a:hover { text-decoration: underline; }
		.langBox li.active { font-weight: bold; }
		
		/* ### search box ### */
		.searchBox { position: absolute; top: 100px; right: 0; }
		.searchBox fieldset { border: none; }
		.searchBox input.field { width: 266px; height: 26px; padding: 0 10px; background: url('../images/bg1.png') no-repeat; float: left; color: #9f0245; font-size: 16px; border: none; }
		.searchBox input.button { float: left; width: 19px; height: 22px; border: none; cursor: pointer; background: url('../images/button1.png') no-repeat; margin-left: 5px; margin-top: 2px; }
	
	
	/* ### content container ### */
	#contentCntr {  width: 100%; }
	
		/* ### left container ### */
		#leftCntr { float: left; width: 125px; }
		
			/* ### nav box ### */
			.navBox { width: 125px; margin-bottom: 80px; }
			.navBox ul { list-style: none; }
			.navBox li { padding-bottom: 24px; font-size: 16px; }
			.navBox li a { display: inline-block; width: 110px; text-align: center; line-height: 34px; min-height: 34px; color: #9f0245; text-decoration: none; }
			.navBox li a:hover, .navBox li.active a { background: #9f0245; color: #fff; }

		/* ### right container ### */
		#FullWidthCntrBig { width: 100%; min-height:350px }
	
		#rightCntrBig { float: right; width: 940px; min-height:350px }
		#rightCntrBig .left { float: left; margin: 0 51px 0 15px; width: 336px; }
		#rightCntrBig.right { float: left; width: 438px; overflow: hidden; } 

		
			/* ### contact box ### */
			.contactBox { float: left; width: 210px; margin: 0 42px 0 7px; }
			.contactBox h3 { font-size: 14px; padding-bottom: 12px; }
			.contactBox img { margin-bottom: 14px; } 
			.contactBox address { line-height: 18px; font-style: normal; } 
			.contactBox address a { color: #3f454c; text-decoration: none; }
			.contactBox address a:hover { text-decoration: underline; }
			.contactBox address span { float: left; width: 38px; }
			
			/* ### slider box ### */
			.sliderBox { background: url(../images/banner_bg2.png) no-repeat; width: 438px; min-height: 274px; padding: 5px 0 0 5px; position: relative; margin-bottom: 60px; }
			.sliderBox #slider { width: 427px; height: 256px; position: relative; }
			.sliderBox #slider ul { list-style: none; width: 427px; height: 256px; } 
			.sliderBox #slider li { float: left; width: 427px; height: 256px; } 
			.sliderBox .nav { position: absolute; bottom: -25px; right: -3px; z-index: 100; }
			.sliderBox .nav a { float: left; margin-left: 4px; display: block; text-decoration: none; background: url('../images/paging_button.png') no-repeat; width: 14px; height: 14px; text-indent: -9999px; }
			.sliderBox .nav a:hover, .sliderBox .nav a.activeSlide { background-position: 0 -14px; }
			.sliderBox ul.buttons { position: absolute; bottom: 23px; right: 14px; list-style: none; z-index: 100; } 
			.sliderBox ul.buttons li { float: left; margin-left: 4px; font-weight: bold; }
			.sliderBox ul.buttons li a { color: #fff; text-decoration: none; display: block; width: 186px; min-height: 26px; line-height: 26px; text-align: center; background: #9f0245; } 
			.sliderBox ul.buttons li a.small { width: 134px; }
			.sliderBox ul.buttons li a:hover { background: #fff; color: #9f0245; }
			
			/* ### welcome box ### */
			.welcomeBox { padding-top: 10px; }
			.welcomeBox h3 { color: #3f454c; font-size: 15px; padding-bottom: 28px; }
			.welcomeBox p { color: #3f454c; line-height: 22px; padding-bottom: 20px; }
			
			/* ### banner box ### */
			.bannerBox { height: 335px; position: relative; }
			.bannerBox .inner { padding: 3px; overflow: hidden; background: url('../images/banner_bg1.png') repeat-x; }
			.bannerBox .slider { float: left; width: 533px; height: 259px; }
			.bannerBox .slider ul { list-style: none; }
			.bannerBox .slider li { width: 533px; height: 259px; }
			.bannerBox div.nav { position: absolute; top: 275px; right: 0; }
			.bannerBox div.nav a { float: left; width: 14px; height: 14px; background: #9f0245; text-indent: -9999px; margin-left: 4px; }
			.bannerBox div.nav a:hover, .bannerBox div.nav a.activeSlide { background: #b5b5b5; } 
			.bannerBox .list { float: left; width: 280px; margin: 12px 0 0 20px; }
			.bannerBox .list ul { list-style: none; }
			.bannerBox .list li { overflow: hidden; padding-bottom: 25px; }
			.bannerBox .list li img { float: left; margin-right: 20px; }
			.bannerBox .list li a { color: #9f0245; text-decoration: none; float: left; }
			.bannerBox .list li a:hover { text-decoration: underline; }
			.bannerBox .buttons { overflow: hidden; }
			.bannerBox .buttons a { float: left; font-size: 11px; font-weight: bold; line-height: 26px; min-height: 26px; padding: 0 5px; text-decoration: none; background: #9f0245; color: #fff; margin-right: 5px; }
			.bannerBox .buttons a.last { margin-right: 0; }
			.bannerBox .buttons a:hover { color: #9f0245; background: #fff; }
			
			/* ### carousel box ### */
			.carouselBox { height: 345px; overflow: hidden; position: relative; }
			.carouselBox .buttons { position: absolute; top: 245px; left: 260px; z-index: 100; }
			.carouselBox .buttons a { float: left; line-height: 26px; min-height: 26px; padding: 0 15px; background: #fff; color: #058ab6; font-weight: bold; text-decoration: none; box-shadow: 0px 1px 2px #000; margin: 0 1px }
			.carouselBox .buttons a:hover { background: #058ab6; color: #fff; }
			
			/* ### text box ### */
			.textBoxBig {  float: left; width: 100%; }
			.textBoxBig h3 { font-size: 16px; color: #3f454c; padding-bottom: 15px; font-weight: normal; }
			.textBoxBig p { line-height: 22px; padding-bottom: 20px; }
			.textBoxBig a { color: black; text-decoration: none; }
			.textBoxBig a:visited { color: black; text-decoration: none; }
			.textBoxBig a:hover { text-decoration: underline; }

			.textBox { overflow: hidden; float: left; width: 855px; }
			.textBox h3 { font-size: 16px; color: #3f454c; padding-bottom: 15px; font-weight: normal; }
			.textBox p { line-height: 22px; padding-bottom: 20px; }
			.textBox a { color: black; text-decoration: underline; }
			.textBox a:visited { color: black; text-decoration: underline; }
			.textBox a:hover { text-decoration: none; }
			
			/* ### twitter box ### */
			.twitterBox { width: 175px; float: right; padding-right: 30px; }
			.twitterBox.sub { padding-right: 0; }
			.twitterBox h3 { font-size: 16px; color: #3f454c; padding-bottom: 20px; font-weight: normal; }
			.twitterBox p { line-height: 22px; padding-bottom: 20px; }
			.twitterBox p a { color: #058ab6; text-decoration: none; }
			.twitterBox p a:hover { text-decoration: underline; }
			.twitterBox ul { list-style: none; }
			.twitterBox li { float: left; padding-right: 15px; }
			
		/* ### product box ### */
		.productBox { overflow: hidden; height: 592px; background: url('../images/bg2.png') no-repeat; margin-top: 50px; }
		.productBox .product { float: left; width: 146px; height: 572px; padding: 10px 18px; color: #fff; margin-left: 37px; }
		.productBox .product:first-child { margin-left: 0; }
		.productBox h3 { font-size: 14px; letter-spacing: 2px; min-height: 100px; text-decoration: underline; }
		.productBox p { font-size: 12px; min-height: 185px; }
		.productBox p a { color: #fff; }
		.productBox p a:hover { text-decoration: none; }
		.productBox img { margin: -45px 0 0 -17px; }
	
		/* ### bottom container ### */
		#bottomCntr { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;   
						background: #eeeeee; padding: 10px; overflow: hidden; margin-top: 50px; width:100% }
		#bottomCntr .links { float: left; }
		#bottomCntr ul { list-style: none; width: 165px; float: left; }
		#bottomCntr li { line-height: 22px; }
		#bottomCntr li a { color: #3f454c; text-decoration: none; }
		#bottomCntr li a:hover { text-decoration: underline; }
		#bottomCntr .contact { float: right; }
		#bottomCntr address { padding-left: 80px; float: left; font-style: normal; line-height: 18px; }
		#bottomCntr address a { color: #3f454c; text-decoration: none; }
		#bottomCntr address a:hover { text-decoration: underline; }
	
	/* ### footer container ### */
	#footerCntr { overflow: hidden; width: 100%; background: #058ab6; height: 20px; }
	#footerCntr.group { background: #9f0245; }
	#footerCntr p { color: #fff; text-align: center; line-height: 20px; }
	#footerCntr p span { padding: 0 10px; }