/********************************************
   HTML ELEMENTS
********************************************/
@alternate_row_background_color: #DDD;
/* top elements */
* {
	padding: 0;
	margin: 0;
}

body {
	/* position: fixed; */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	/* font: normal 13px calibri, arial, sans-serif; */
	font: normal 0.8vw calibri, arial, sans-serif;
	color: black;
	background: #FFF url(../img/bg.jpg) repeat-x;
}

/* links */
a {
	background: inherit;
	color: #72A545;
	text-decoration: none;
}

a:hover {
	background: inherit;
	color: #006699;
	text-decoration: underline;
}

/* headers */
h1, h2, h3 {
	font: bold calibri, arial, sans-serif;
	color: #118981;
}
/* h1 { font-size: 24px; padding-bottom: 13px; } */
h1 {
	font-size: 1.6vw;
	padding-bottom: 0.5vw;
}
/* h2 { font-size: 20px; text-transform: uppercase; } */
h2 {
	font-size: 1.33vw;
	padding-top: 10px;
	padding-bottom: 10px;
}
/* h3 { font-size: 16px; padding-top: 10px; padding-bottom: 10px; } */
h3 {
	font-size: 1.07;
	padding-top: 10px;
	padding-bottom: 10px;
}
/* h4 { font-size: 14px; padding-top: 10px; padding-bottom: 10px; } */
h4 {
	font-size: 0.93;
	padding-top: 10px;
	padding-bottom: 10px;
}

p, h1, h2, h3 {
	margin: 10px 15px;
}

ul, ol {
	margin: 10px 30px;
	padding: 0 15px;
}

/* images */
img {
	border: 0px;
	width: 16px;
	height: 16px;
}

acronym {
	cursor: help;
	border-bottom: 1px solid #777;
}

blockquote {
	margin: 15px;
	padding: 0 0 0 20px;
	/* background-color: #FAFAFA;
	background-position: 8px 10px; 
	border: 1px solid #f2f2f2; */
	border-left: 3px solid #13C3B7;
	font: 0.8vw calibri, arial, sans-serif;
	color: #666666;
}

blockquote.error {
	border-left: 3px solid red;
	color: red;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px 15px;
}

th strong {
	color: black;
}

th {
	background: #13C3B7;
	height: 1.33vh;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	text-align: left;
	/* border-left: 1px solid #13C3B7; */
}

tr.colored:nth-child(odd) {
      background-color: #d0fffb;
}
tr.colored:nth-child(even) {
      background-color: white;
}

td {
	padding: 5px 5px 5px 5px;
	/* padding-top: 5px; */
	/* padding-bottom: 5px; */
	/* border-left: 1px solid #FFE1C3; */
	/* border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff; */
}

td.first, th.first {
	border-left: 0px;
}

td.totaalkolom input {
	background-color: #13C3B7;
	font-weight: bold;
	color: white;
}

tr.row-a, input.row-a {
	background: white;
}

tr.row-b {
	background: #d0fffb; /* was eafffd */
}
/* end - table */

/* form elements */
form {
	margin: 10px 15px;
	padding: 0;
	border: 1px solid #eafffd;
	background-color: #eafffd; 
}

label {
	display: block;
	font-weight: bold;
	margin: 5px 0;
}

input {
	padding: 5px 5px 5px 5px;
	border: 1px solid #333;
	/* font: normal 13px calibri, arial, sans-serif; */
	font: normal 0.8vw calibri, arial, sans-serif;
	/* color:#777; */
	margin-bottom: 4px;
}

input[type="checkbox"] {
	width: 18px; /*Desired width*/
	height: 18px; /*Desired height*/
}

#verlof, #approve {
	font: normal 0.6vw calibri, arial, sans-serif;
}

/* Normaal werkt readonly niet voor checkboxes echter met onderstaande 
   wordt de checkbox niet aanpasbaar
   Je kan ook disabled gebruiken in de form maar dan woordt de value
   van POST niet gebruikt. */
input[type='checkbox'][readonly] {
	pointer-events: none;
}

input:focus {
	background-color: #f4f9f9;
	border: 2px solid #13C3B7;
}
/* Selects any <input> element that is read-only */
/* Supported in Firefox with a prefix */
input:-moz-read-only {
	background-color: #e4e4e4;
}

/* Supported in Blink/WebKit/Edge without a prefix */
input:read-only {
	background-color: #e4e4e4;
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button
	{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

select {
	padding: 5px 5px 5px 5px;
	border: 1px solid #333;
	/* font: normal 13px calibri, arial, sans-serif; */
	font: normal 0.8vw calibri, arial, sans-serif;
	/* color:#777; */
	margin-bottom: 4px;
}

select:focus {
	background-color: #f4f9f9;
	border: 2px solid #13C3B7;
}

textarea {
	width: 100%;
	padding: 5px;
	/* font: normal 13px calibri, arial, sans-serif; */
	font: normal 0.8vw calibri, arial, sans-serif;
	border: 1px solid #333;
	min-height: 100px;
	/* op commentaar ivm scrollbars overflow: hidden; */
	/*vdisplay: block;v*/
	color: black;
}

textarea:read-only {
	background-color: #e4e4e4;
}

textarea:focus {
	background-color: #f4f9f9;
	border: 2px solid #13C3B7;
}

input.button {
	margin-left: 10px;
	/* margin-right: 10px; */
	/* font: bold 13px calibri, arial, sans-serif; */
	font: bold 0.8vw calibri, arial, sans-serif;
	/* background: #FFF url(../img/gradientbg.jpg) repeat-x; */
	padding: 5px 8px 5px 8px;
	color: black;
	cursor: pointer;
	border: 1px solid #DADADA;
	border-radius: 5px;
}

img.button {
	width: 1.1vw;
	height: 1.1vw;
}

/***********************
	  LAYOUT
************************/
#header-content, #content, #footer-content {
	width: 95%;
}

/* header */
#header {
	height: 110px;
	/* height: 40.5vh; */
	text-align: left;
	background-color: black;
}

#header-content {
	margin: 0 auto;
	padding: 0;
	position: relative;
}

#header-content h1#logo {
	position: absolute;
	/* font: bold 45px calibri, arial, sans-serif; */
	font: bold 3vw calibri, arial, sans-serif;
	letter-spacing: -2px;
	color: #FFF;
	margin: 0;
	padding: 0;
	/* change the values of left and top to adjust the position of the logo */
	top: 0;
	left: 0px;
}

#header-content h1#logo a {
	text-decoration: none;
	color: #FFF;
}

#header-content #slogan {
	position: absolute;
	/* font: bold 13px calibri, arial, sans-serif; */
	font: bold 1.1vw calibri, arial, sans-serif;
	text-transform: none;
	color: #FFF;
	margin: 1vw 0 0 0;
	padding: 0;
	/* change the values of left and top to adjust the position of the slogan */
	top: 55px;
	left: 40px;
}

/* header menu */
#header-content ul {
	position: absolute;
	/* right: 0px; top: 15px; */
	left: 27%;
	top: 55px;
	/* font: bolder 17px calibri, arial, sans-serif; */
	font: bolder 1.3vw calibri, arial, sans-serif;
	color: #FFF;
	list-style: none;
	margin: 0;
	padding: 0;
}

#header-content li {
	display: inline;
}

#header-content li a {
	float: left;
	display: block;
	padding: 3px 12px;
	color: #FFF;
	background-color: black;
	text-decoration: none;
	border-right: 1px solid #272727;
}

#header-content li a:hover {
	background: #13C3B7;
	color: #FFF;
}

#header-content li a#current {
	background: #13C3B7;
	color: #FFF;
}

/* content */
#content-wrap {
	margin: 10px 0 10px 0;
	clear: both;
	float: right;
	width: 100%;
}

#content {
	text-align: left;
	padding: 0;
	margin: 0 auto;
}

/* sidebar */
#sidebar {
	float: left;
	width: 20%;
	margin: 0 10px 10px 0;
	padding: 0;
}

#sidebar h1 {
	padding: 10px 0px 5px 10px;
	margin: 0;
	/* font: bold 18px calibri, arial, sans-serif; */
	font: bold 1vw calibri, arial, sans-serif;
}

.sidebox {
	background: #F5F5F5;
	border: 1px solid #EFEDED;
	margin-bottom: 10px;
}

/* sidebar menu */
#sidebar ul.sidemenu {
	list-style: none;
	margin: 10px 0 15px 0;
	padding: 0;
	background: #F2F2F2;
}

#sidebar ul.sidemenu li {
	padding: 0px 10px;
}

#sidebar ul.sidemenu a {
	display: block;
	font: normal 0.8vw calibri, arial, sans-serif;
	/* font-weight:normal; */
	color: #333;
	height: 1.5em;
	padding: .3em 0 0 15px;
	line-height: 1.5em;
	border-bottom: 1px dashed #D4D4D4;
	text-decoration: none;
}

#sidebar ul.sidemenu a.top {
	border-top: 1px dashed #D4D4D4;
}

#sidebar ul.sidemenu a:hover {
	padding: .3em 0 .3em 10px;
	border-left: 5px solid #0c726b;
	color: #0c726b;
}
#sidebar_sub li ul {
	display:none;
}
#sidebar_sub li:hover ul {
	display: block;
}

/* main */
#main {
	float: left;
	width: 78%;
	margin: 0 0 10px 0;
	padding: 0;
	border: 2px solid;
	border-color: #0c726b;
}

#main h1 {
	padding: 10px 0px 13px 5px;
	margin: 0 0 0 10px;
	border-bottom: 1px solid #f2f2f2;
	/* font: bold 24px calibri, arial, sans-serif; */
	font: bold 1.6vw calibri, arial, sans-serif;
}

#main ul li {
	list-style-image: url(../img/bullet.gif);
}

#main p.errmsg {
	margin: 10px;
	padding: 0 0 0 10px;
	background-color: #FAFAFA;
	background-position: 8px 10px;
	border: 1px solid #f2f2f2;
	border-left: 3px solid red;
	font: 0.8vw calibri, arial, sans-serif;
	color: red;
}

#main p.infmsg {
	margin: 15px;
	padding: 0 0 0 20px;
	background-color: #FAFAFA;
	background-position: 8px 10px;
	border: 1px solid #f2f2f2;
	border-left: 3px solid #0c726b;
	font: 0.8vw calibri, arial, sans-serif;
	font-weight: bold;
}

/* footer */
#footer {
	float: right;
	clear: both;
	margin: 0;
	padding: 0;
	font: normal 0.6vw calibri, arial, sans-serif;
	text-align: right;
	width: 33%;
	padding: 0 0 30px 0;
}

/* additional classes */
.clear {
	clear: both;
}

.gray {
	color: #BFBFBF;
}