/* 	
	Company Name	CSS Stylesheet
	Auteur			Mike Schenkel
	Versie			v1.0 | dd-mm-yyyy
..................................................................................*/

/*	=CSS Reset
..................................................................................*/
html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,
abbr,cite,code,del,em,img,ins,small,
dl,dt,dd,ol,ul,li,fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure, 
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video { font-family: inherit; font-size: 20px; font-style: inherit; font-weight: inherit; 
border: 0; margin: 0; outline: 0; padding: 0; }
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { display: block; }
blockquote { quotes: none; }
blockquote:before,blockquote:after { content: no-open-quote; content: no-close-quote; }
abbr[title] { border-bottom: 1px dotted #000; cursor: help; }
table { border-collapse:collapse; border-spacing:0; width: 100%; }
caption,th,td { font-weight: normal; text-align: left; }
input,select { vertical-align: middle; }
ol,ul,nav ul { list-style: none; }
em { font-style: italic; }
del { text-decoration: line-through; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff9; color: #000; font-style: italic; font-weight: bold; }
hr { background: #000; border: 0; color: #000; display: block; height: 1px; margin: 0; padding: 0; }
a { background: transparent; border: 0; font-size: 100%; margin: 0; padding: 0; color:#333; }
a img { border: none }
a:active { outline:none }
:focus { outline: 0; }

/* = Ajax resultaten div
..................................................................................*/
#versturenResultDiv {
	width: 50%;
	margin: 0 auto;
}

#versturenTotalResult {
	color: green;
}

#versturenErrorsDiv {
	font-size: 18px;
	color: red;	
}

#versturenErrorsDiv li{
	color: red;	
}

/*	=Main Styles
..................................................................................*/
body {
	background: #ddd;
	color: #000;
	font: 62.5%/1.8em Helvetica, "Helvetica Neue", Arial, sans-serif;
}

#container { 
	background: #f0f0f0;
	font-size: 1.2em; 
	overflow: hidden;
}

/*	=Header
..................................................................................*/
#header {
	background: url('../images/body-bg.jpg') no-repeat;
	background-position: bottom right;
	border-bottom: 1px solid #ddd;	
	color: #fff;
	height:90px;
	background-color:#015033;
}

.logo { float: left; }
.controls { 
	color: #ffffff;
	float: right; 
	font-size: 1.2em; 
	padding: 5px 10px; 
	text-shadow: #666 1px 1px;
}
.controls a { color: #fff; text-decoration: none; text-shadow: #666 1px 1px; }
.controls a:hover { text-decoration: underline; }
.user { color: #fff; text-shadow: #f18c19 1px 1px; }

/*	=Navigation
..................................................................................*/
#navigation {
	background: #f0f0f0;
	float: left;
	padding: 10px;
	width: 200px;
}

.nav {
	background: #fff;
	border: 1px solid #ddd;
	border-top: 0;
	margin-bottom: 10px;
}
.nav li { border-bottom: 1px dotted #eee; }
.nav li:last-child { border: 0; }
.nav li:hover { background: #fafafa; cursor: pointer; }
.nav a { color: #666; display: block; padding: 5px; text-decoration: none; }
.nav a:hover { color: #333; }

/*	=Content
..................................................................................*/
#content { 
	background: #fff;
	padding: 10px 10px 10px 10px; 
}
#content p { line-height: 1.8em; }

.message {
	border: 1px solid green;
	font-weight:bold;
	margin-bottom: 20px;
	padding: 5px;
}
.ok { background:#eef4d3; border:solid 1px #90ac13;  color:#6b800d; }
.error { background:#F7CBCA; border:solid 1px #CC0000;  color:#CC0000; }

/*	=Footer
..................................................................................*/
#footer {
	background: #ddd;
	border-top: 2px solid #ccc; 
	color: #666;
	font-size: 1.1em;
	text-align: center;	
	text-shadow: #fff 1px 1px;
	padding-top: 5px;
}

/*	=Forms
..................................................................................*/
abbr[title="Verplicht"] { 
	border-bottom: none; 
	color: #ff0000; 
	cursor: pointer; 
	position: relative; 
	top: -5px; 
}
form { margin-top: 10px; }
label {
	display: block;
	font-size: 20px;
	float: left;
}
input[type="text"],input[type="number"],input[type="date"],input[type="password"] {	
	border: 1px solid #999;
	border-radius: 2px 2px;
	font-size: 20px;
	height: 40px;
	margin-bottom: 20px;
	padding: 5px;
	width: 70%;
	-moz-border-radius: 2px 2px;
	-moz-transition: .3s ease-in-out;
	-webkit-border-radius: 2px 2px;
	-webkit-transition: .3s ease-in-out;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="password"]:focus { border-color: #666; 	box-shadow: 0px 0px 4px #007eff;
	-webkit-box-shadow: 0px 0px 4px #007eff;
	-moz-box-shadow: 0px 0px 4px #007eff;
}

textarea { width: 100%; }

label select label {
	display: inline;
}
textarea {
	border: 1px solid #999;
	border-radius: 2px 2px;
	display: block;
	font-size: 20px;
	padding: 5px;
	width: 75%;
	-moz-border-radius: 2px 2px;
	-moz-transition: .3s ease-in-out;
	-webkit-border-radius: 2px 2px;
	-webkit-transition: .3s ease-in-out;
}
textarea:focus { 
	border: 1px solid #666; 
	box-shadow: 0px 0px 4px #007eff;
	-webkit-box-shadow: 0px 0px 4px #007eff;
	-moz-box-shadow: 0px 0px 4px #007eff;
}
select { width: 150px; font-size: 20px; margin-bottom: 20px; }
.button {
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
	border-radius: 2px;
	border: 1px solid black;
	display: inline-block;
	cursor: pointer;
	font-size: 20px;
	margin-top: 10px;
	outline: none;
	padding: 5px 10px;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.active { background-color: #21998f; }
.button:hover { text-decoration: none; }
.button:active { position: relative; top: 1px; }
.small { font-size: 20px; padding: 5px; }

.blue {
	color: #fff;
	border: 1px solid #0076a3;
	background: #0095cd;
	background-image: -moz-linear-gradient(top, #00adee, #0078a5);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #00adee),color-stop(1, #0078a5));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#00adee', EndColorStr='#0078a5'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00adee', EndColorStr='#0078a5')";
}
.blue:hover {
	background: #007ead;
	background-image: -moz-linear-gradient(top, #0095cc, #00678e);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0095cc),color-stop(1, #00678e));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#0095cc', EndColorStr='#00678e'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0095cc', EndColorStr='#00678e')";
}
.blue:active {
	color: #80bed6;
	background-image: -moz-linear-gradient(top, #0078a5, #00adee);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #0078a5),color-stop(1, #00adee));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#0078a5', EndColorStr='#00adee'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#0078a5', EndColorStr='#00adee')";
}

.green {
	color: #fff;
	border: 1px solid #72A631;
	background: #84C035;
	background-image: -moz-linear-gradient(top, #84C035, #7DB634);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #84C035),color-stop(1, #7DB634));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#84C035', EndColorStr='#7DB634'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#84C035', EndColorStr='#7DB634')";
}
.green:hover {
	background: #7DB634;
	background-image: -moz-linear-gradient(top, #7DB634, #6D9F2F);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7DB634),color-stop(1, #6D9F2F));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#7DB634', EndColorStr='#6D9F2F'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7DB634', EndColorStr='#6D9F2F')";
}
.green:active {
	background-image: -moz-linear-gradient(top, #7DB634, #84C035);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #7DB634),color-stop(1, #84C035));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#7DB634', EndColorStr='#84C035'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7DB634', EndColorStr='#84C035')";
}

.cancel { display: inline-block; position: relative; top: 10px; left: 5px; }
.cancel a { color: #DB4343; text-decoration: none; }
.cancel a:hover { border-bottom: 2px solid #DB4343; }

/*	=Tables
..................................................................................*/
table {
	border-top: 1px solid #efefef;
	border-right: 1px solid #efefef;
	border-left: 1px solid #efefef;
	margin-top: 10px;
	width: 100%;
}

.table_header, .table_header th {
	background: #efefef;
	color: #333;
	font-weight: bold;
	padding: 5px 20px 5px 5px;
	text-shadow: 0 1px 0 #fff;
}

table td { border-bottom: 1px solid #efefef; line-height: 1.5em; padding: 5px 20px 5px 5px; }
table tr.odd { background-color: #f9f8f8; }

table a { color: #0088CC; font-weight: bold; text-decoration: none; }
table a:hover { border-bottom: 1px solid #0088CC; }

table .actions a { margin-right: 5px; }
table .actions:hover a { border: 0; text-decoration: none; }

/*	=Headings
..................................................................................*/
h1 { font-size: 2.5em; padding: 25px 10px;	}
h1 span { font-size: 0.5em; color:#FFF; padding: 25px 80px;	}
h2 { border-bottom: 1px solid #E7E9EB; color: #f08400; font-size: 24px; padding: 0 0 10px; }
h3 {
	background: #82D2F5;
	border: 1px solid #333;
	border-bottom: 0;
	color: #FFF;
	font-size: 22px;
	line-height: 30px;
	padding: 0 10px;
	text-shadow: #666 1px 1px;
	background-image: -moz-linear-gradient(top, #00763a, #129e5b);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #00763a),color-stop(1, #129e5b));
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#00763a', EndColorStr='#129e5b'); 
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00763a', EndColorStr='#129e5b')"; 
}
h4 { color: #666; font-size: 1.3em; padding: 10px 0 0 0; }
h5 { font-size: 2.5em; padding: 20px 10px;	}

/*	=Links
..................................................................................*/
#content a:link, #content a:visited, #content a:active { }
#content a:hover { }

#content p a:link, #content p a:visited, #content p a:active { }
#content p a:hover { }

/*	=Lists
..................................................................................*/
#content ul { list-style: disc; margin: 0px; }
#content ul li { margin-bottom: 5px; }

/*	=Icons
..................................................................................*/
a.add {
	color: #666;
	background: url(../images/add.png) center left no-repeat;
	font-size: 1.2em;
	margin-top: 10px;
	line-height: 23px;
	height: 20px;
	padding: 3px 0 3px 20px;
	text-decoration: none;
}
a.add:hover { border-bottom: 2px solid #7DB634; color: #72A631; }

a.icon {
	display: inline-block;
	padding-left: 22px;
}
li a.icon { margin-left: 5px; }

/* Icons */
a.clients { background: url(../images/clients.png) center left no-repeat; }

a.klanten { background: url(../images/klanten.png) center left no-repeat; }
a.werknemers { background: url(../images/werknemers.png) center left no-repeat; }
a.ondernemingen { background: url(../images/ondernemingen.png) center left no-repeat; }
a.vragenlijsten { background: url(../images/vragenlijsten.png) center left no-repeat; }
a.mailing { background: url(../images/mail.png) center left no-repeat; }
a.nieuws { background: url(../images/nieuws.png) center left no-repeat; }
a.instellingen { background: url(../images/settings.png) center left no-repeat; }
a.agenda { background: url(../images/agenda.png) center left no-repeat; }
a.overzicht { background: url(../images/overzicht.png) center left no-repeat; }
a.contact { background: url(../images/contact.png) center left no-repeat; }
a.rapportages { background: url(../images/rapportages.png) center left no-repeat; }
a.evaluaties { background: url(../images/evaluaties.png) center left no-repeat; }
a.go { background: url(../images/go.png) center left no-repeat; }
a.predicaat { background: url(../images/predicaat.png) center left no-repeat; }
a.plus { background: url(../images/plus.png) center left no-repeat; }

/* Miss */
.slice { width:250px; height:125px; border:2px dashed #999; margin:10px;float:left; }
.b { background-color:#eee; }
.ahead { background-color:#ddd; }

/*	=Misc
..................................................................................*/
.clear { clear: both; }
#header:after, #content:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html #header, * html #content { zoom: 1; }
*:first-child+html #header, *:first-child+html #content { zoom: 1; } 

/* Fixes issue here http://code.google.com/p/jcrop/issues/detail?id=1 */
.jcrop-holder { text-align: left; }

.jcrop-vline, .jcrop-hline
{
        font-size: 0;
        position: absolute;
        background: white url('/admin/images/Jcrop.gif') top left repeat;
}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
        font-size: 1px;
        width: 7px !important;
        height: 7px !important;
        border: 1px #eee solid;
        background-color: #333;
        *width: 9px;
        *height: 9px;
}

.jcrop-tracker { width: 100%; height: 100%; }

.custom .jcrop-vline,
.custom .jcrop-hline
{
        background: yellow;
}
.custom .jcrop-handle
{
        border-color: black;
        background-color: #C7BB00;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
}

.tabblad { margin-right: 10px; margin-bottom: 10px; min-height: 21px; border-bottom: 1px #333333 solid; border-left: 1px #333333 solid; border-right: 1px #333333 solid; padding-top: 8px; padding-bottom: 8px; padding-left: 20px; padding-right: 20px; float:left; }
.tabblad:hover { background-color: #F6F6F6; }
.tabblad a { color: #000000; text-decoration: none; }
.tabblad a:hover { color: #000000; text-decoration: none; }
.tabblad a:active { color: #000000; text-decoration: none; }
.tabblad a.verwijderen { color: #000000; text-decoration: none; }

.floatLeft { float:left; }
.floatRight { float:right; }

.tabbladen { width: 100%; float:none; margin-bottom: 10px; overflow: hidden; }

.chatwindow { height: 480px; width: 560px; overflow:auto; padding:10px; margin-left: 7px; margin-top:7px; border: 1px #333333 solid; }
.typbalk { height: 60px; width: 460px; float:left; padding:10px; margin:0; }
.verzenden { height: 60px; width: 60px; float:left; padding:10px; margin:0; }
.chatwindow p { padding-bottom: 10px; width: 480px; }


/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }


/* calendar */
table.calendar		{ border-left:1px solid #999; }
tr.calendar-row	{  }
td.calendar-day	{ min-height:80px; font-size:11px; position:relative; } * html div.calendar-day { height:80px; }
td.calendar-day:hover	{ background:#eceff5; }
td.calendar-day-np	{ background:#eee; min-height:80px; } * html div.calendar-day-np { height:80px; }
td.calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
div.day-number		{ background:#999; padding:5px; color:#fff; font-weight:bold; float:right; margin:-5px -5px 0 0; width:20px; text-align:center; }
/* shared */
td.calendar-day, td.calendar-day-np { width:120px; padding:5px; border-bottom:1px solid #999; border-right:1px solid #999; }


.foto { width: 100px; }

.vorige {  margin-right:40px; display:block; float:right; margin-top:-23px; display:none; }
.volgende { float:right; margin-right:40px; margin-top:-23px; }

.blokje { width:72px; height:25px; float:left; font-size:17px; margin:4px; border:1px solid #999; text-align:center; padding-top:25px; display:block; }
.block_button { width:35%; margin:5%; font-size:24px; height:100px; text-align:center; padding-top:7%; border:1px solid #999; display:block; float:left; }

.photodiv {
	width:200px;
	height:200px;
	text-align:center;
	float:left;
	border:1px dotted #999;
	margin:35px 10px 10px 0px;
	overflow:hidden;
}

.bdiFoto{ position:absolute; margin-top: -25px; margin-left: 60px;}

.homeLabel{
	position:absolute;	
	font-size: 14px;
	margin-top: 45px;
	margin-left: 12px;
	font-weight: bold;
}

.radio_empty{
	background-color: #FF0000;
	 outline: 1px solid red;
}

.activeLang{
	border: 1px solid #21998f;	
}

.red {
	background-color: #ff1919;	
}

.outline-left{
	float:left;	
}