@font-face
{
	font-family: Candara;
	src: url(fonts/Candara.ttf), url(fonts/Candara.eot);
}

BODY
{
	background-color: #000000;
	margin: 0px 0px 0px 0px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size:16px;
	overflow: hidden;	
}

BODY.inlog
{
	background-color: #000000;
	margin: 0px 0px 0px 0px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size:16px;
	overflow: hidden;	
}

INPUT
{
	background-color: #FFFFFF;
	color: #000000;
	margin: 0px 0px 0px 0px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 16px;
	border-width: 1px 1px 1px 1px;
}

TEXTAREA
{
	background-color: #FFFFFF;
	color: #000000;
	margin: 0px 0px 0px 0px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 16px;
	border-width: 1px 1px 1px 1px;
}

SELECT
{
	background-color: #FFFFFF;
	color: #000000;
	margin: 0px 0px 0px 0px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 14px;
	border-width: 1px 1px 1px 1px;
}


BUTTON
{
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 14px;
	color: #ffffff;
	cursor: hand;
	/* equivalent voor Firefox browser*/
	cursor: pointer;
	background-color: #0069B4;
	height: 31px;
	min-width: 80px;
	padding-top: 2px;
	align: center;
	vertical-align: middle;
	border-style: solid;
	border-width: 1px;
	border-color: #000000;
	border-radius: 6px;
	margin-bottom: 4px;
}

BUTTON:hover
{
	background-color: #F28D4F;
}

HR
{
	color: #E0E0E0;
}

.msgboxtext
{
	min-height: 60px;
	margin-bottom: 8px;
	margin-top: 6px;
}

.msgboxdivider, .dialogdivider
{
	height: 12px;
	border-bottom-style: solid;
	border-bottom-color: #D0D0D0;
	border-bottom-width: 1px;
	margin-bottom: 8px;
}

.msgboxdividerthick, .dialogdividerthick
{
	height: 12px;
	border-bottom-style: solid;
	border-bottom-color: #404040;
	border-bottom-width: 3px;
	margin-bottom: 8px;
}

.msgboxbuttonbar, .dialogbuttonbar
{
	text-align: right;
	height: 32px;
}

.divider
{
	border-width: 1px;
	border-color: #D0D0D0;
	border-top-style: solid;
	font-variant: small-caps;
}

.vastelengte
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.licht
{
	color: #A0A0A0;
}

.vet
{
	font-weight: bold;
}

.centreren
{
	text-align: center;
}

.klein
{
	font-size: 12px;
}

.dropzone
{
	/* vertical-align: middle; */
	border-radius: 10px;
	border-color: #8080C0;
	border-style: dotted;
	border-width: 1px;
	color: #A0A0A0;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 12px;
	min-height: 20px;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	height: auto;
	width: auto;
}

.dropzone.dz-drag-hover
{
	background-color: #F0FFF0;
}

.dropregel
{
	width: 100%;
}

/* Tabellen
*/
.wijdetabel
{
	width: 95%;
	margin-left: 16px;
}

.wijdetabel TD
{
	padding-bottom: 4px;
	padding-top: 4px;
	padding-left: 8px;
	padding-right: 8px;
}

.totaaloverzicht
{
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0;
	background-color: #F4F4FF;
}

.klantregel, .verkoopregel, .inkoopregel, .bankmutatieregel, .orderregel, .declaratieregel
{
	width: 100%;
	border-style: solid;
	border-width: 1px;
	border-color: #C0C0C0;
}

.klantregel_inactief
{
	border-right-color: #C0C0C0;
	border-right-width: 6px;
}

.klantregel_heeftiban
{
	border-right-color: #40A040;
	border-right-width: 6px;
}

.klantregel_fout
{
	border-right-color: #A04040;
	border-right-width: 6px;
}

.belangrijk
{
	font-size: 20px;
	font-weight: bold;
}

.minderbelangrijk
{
	font-size: 12px;
	color: #A0A0A0;
}

.geboekt
{
	/*
	border-left-color: #40A040;
	border-left-width: 6px;
	*/
	background-color: #40A040;
}

.betaald
{
	border-right-color: #40A040;
	border-right-width: 6px;
}

.laat
{
	border-right-color: orange;
	border-right-width: 10px;
}

.telaat
{
	border-right-color: #C04040;
	border-right-width: 16px;
}

.declaratieregel.inkoop
{
	background-color: #FFFFE8;
}

.reservering
{
	border-right-color: #A0A0A0;
	border-right-width: 6px;
}

.ontvangen
{
	color: #40A040;
}

.overschrijving
{
	color: #A04040;
}

.batchbetaling.inkoopregel
{
	background-color: #FFFFE8;
}

.afgeletterd, .later
{
	border-right-color: #40A040;
	border-right-width: 6px;
}

.nietafgeletterd
{
	border-right-color: #E08080;
	border-right-width: 10px;
}

.verklaard
{
	border-right-color: #80D080;
	border-right-width: 8px;
}

.voorstel, .binnenkort
{
	border-right-color: #F0F040;
	border-right-width: 6px;
}

.vandaag
{
	border-right-color: orange;
	border-right-width: 6px;
}

.bedrijflabel
{
	width: 60px;
	/*padding-top: 4px;*/
	border-radius: 6px;
	text-align: center;
}

.belknop
{
	padding: 2px 6px 2px 6px;
	margin-right: 8px;
	border-radius: 6px;
	text-align: center;
	background-color: #E0E0FF;
	color: #000000;
	border-width: 1px;
	border-color: black;
	border-style: dotted;
}

.dh
{
	background-color: #000000;
	color: #ffffff;
}

.snx
{
	background-color: #0069B4;
	color: #ffffff;
}

.ug
{
	background-color: #F28D4F;
	color: #000000;
}

.select
{
	background-color: #FAFAFA;
}

.select:hover
{
	background-color: #FFF0F0;
	cursor: pointer;
}

/* jQuery dialog closebutton verbergen 
*/
.no-close .ui-dialog-titlebar-close
{
  visibility: hidden;
}

.no-close
{
	overflow: hidden;
}

.hand /* globaal, waar hand cursor nodig */
{
	cursor: hand;
	/* equivalent voor Firefox browser*/
	cursor: pointer;
}

.ureninvoerachtergrond
{
	background-color: #F0B0B8;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	height: 100%;
}

.ureninvoer
{
	display: inline;
	color: #000000;
}

.urenvoorstel
{
	display: inline;
	color: #A0A0A0;
}

.uitleg
{
	font-size: 12px;
	padding-right: 16px;
	color: #8080B0;
}

.tablecontainer
{
	overflow: auto;
}

TD.notitie
{
	background-image: url("/images/celmark3.png");
	background-repeat: repeat-y;
}

TD.meervoudig
{
	border-bottom-width: 4px;
	border-bottom-style: dotted;
	border-bottom-color: #0069B4;
}

.vastelengte
{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

TABLE.inlog
{
	background-image: url("/images/inlog.png");
	width: 362px;
	height: 262px;
}

.inlogbghor
{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
}

.inlogbgver
{
	margin-left: -512px;
	position: absolute;
	top: -384px;
	left: 50%;
	width: 1024px;
	height: 768px;}

.inloghor
{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
}

.inlogver
{
	margin-left: -181px;
	position: absolute;
	top: -150px;
	left: 50%;
	width: 362px;
	height: 262px;}

.logo
{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 87px;
	height: 82px;
	background-color: #D8D8FF;
	overflow: hidden;
}

.logoplaatje
{
	position: fixed;
	left: 9px;
	top: 2px;
	width: 78px;
	height: 78px;
	border-width: 0px;
}

.titelbar
{
	position: fixed;
	top: 0px;
	left: 87px;
	right: 0px;
	height: 60px;
	background-color: #D8D8FF;
	color: #FFFFFF;
	padding: 0px 0px 0px 6px;
	margin: 0px 0px 0px 0px;
	font-size: 16px;
	font-weight:normal;
	overflow: hidden;
}

.menu
{
	position: fixed;
	top: 60px;
	right: 0px;
	left: 87px;
	height: 22px;
	background-color: #D8D8FF;
	color: #000000;
	text-align: right;
	padding-top: 2px;
	padding-left: 6px;
	padding-bottom: 6px;
	padding-right: 6px;
	overflow: hidden;
}

.dividerbar
{
	position: fixed;
	top: 82px;
	right: 0px;
	left: 0px;
	height: 20px;
	background-color: #0069B4;
	color: #FFFFFF;
	padding-left: 48px;
	padding-top: 0px;	
	overflow: hidden;
}

.toolbar
{
	position: fixed;
	left: 0px;
	top: 102px;
	width: 48px;
	bottom: 40px;
	background-color: #F0F0F0;
	border-right: solid #000000 1px;
	overflow: auto;
	text-align: center;
}

.toolbarbutton
{
	background-color: #E0E0E0;
	//background-color: #000000;
	width: 48px;
	height: 41px;
	padding-top: 6px;
	align: center;
	vertical-align: middle;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #C0C0C0;
}

.main
{
	position: fixed;
	left: 48px;
	top: 102px;
	right: 0px;
	bottom: 40px;
	background-color: #FFFFFF;
	overflow: auto;
	padding-top: 8px;
	padding-left: 8px;
	}

.bottombar
{
	position: fixed;
	bottom: 0px;
	height: 40px;
	left: 0px;
	right: 0px;
	background-color: #0069B4;
	color: #FFFFFF;
	padding: 0px 0px 0px 6px;
	overflow: hidden;
}

.timerinfo
{
	position: fixed;
	top: 5px;
	left: 50%;
	height: 35px;
	width: 360px;
	margin-left: -180px; // helft vd width
	border-style: solid;
	border-width: 1px;
	border-color: #D0D0D0;
	padding: 3px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 16px;
	background-color: #F0F0F0;
	color: #000000;
	overflow: hidden;
	box-shadow: 3px 3px 1px #888888;	
}

.iconbalk
{
	position: fixed;
	//display: inline;
	min-width: 260px;
	border-style: solid;
	border-width: 1px;
	border-color: #D0D0D0;
	padding: 3px;
	font-family: Candara, Tahoma, Verdana, Arial, Trebuchet MS;
	font-size: 16px;
	background-color: #FFF0F0;
	color: #000000;
	overflow: hidden;
	box-shadow: 3px 3px 1px #888888;	
}

.control
{
	position: fixed;
	overflow: auto;
	height: 214px;
	width: 250px;
}

.actievetaak
{
	color: #0069B4;
}

.menu_item
{
	height: 10px;
	text-decoration: none;
	color: #0069B4;
	display: block;
	font-weight: bold;
	font-size: 14px;
	padding: 0px 0px 10px 0px;
	margin-top: 7px;
	/*border: 1px solid black;*/
	
}
A.submenu_item
{
	text-decoration: none;
	color: #0086CE;
	display: block;
	font-weight: bold;
	padding-left: 4px;
	padding-top: 0px;
	padding-bottom: 3px;
}

.submenu
{
	padding-bottom: 10px;
}

A.menuitem, .menuitem
{
	text-decoration: none;
	cursor: hand;
	color: #0069B4;
	font-weight: bold;
	padding-right: 10px;
}

A:HOVER.menuitem, A:HOVER.submenu_item, .menuitem:HOVER
{
	//text-decoration: underline;
	color: #F28D4F;
}

A.infolink
{
	text-decoration: none;
	cursor: hand;
	color: #F2AD8F;
	padding-right: 10px;
}

A:HOVER.infolink
{
	color: #EEEEEE;
}

A.linkwit
{
	text-decoration: none;
	cursor: hand;
	color: #FFFFFF;
}

A:HOVER.linkwit
{
	color: #F2AD8F;
}

.foutkader
{
	position: fixed;
	bottom: -40px;
	height: 28px;
	left: 200px;
	right: 200px;
	background-color: #F28D4F;
	color: #FFFFFF;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	/* visibility: hidden; */
	opacity: 0;
	filter: alpha(opacity=0); 
	border: 2px solid;
	border-color: #FFFFFF;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

.fouttekst
{
	color: #FF4040;
	font-weight: bold;
}

.menutitel
{
	padding: 14px 0px 0px 0px;
	margin: 0px 0px 12px 0px;
	font-size: 18px;
	font-weight: bolder;
	font-variant: small-caps;
	color: #003280;
}

.titel
{
	font-size: 28px;
	font-weight: bolder;
	font-variant: small-caps;
	color: #00659C;
	padding-bottom: 20px;
}

.subtitel
{
	font-size: 20px;
	font-weight: bolder;
	font-variant: small-caps;
	color: #00659C;
	padding-bottom: 4px;
}

.story
{
	font-size: 14px;
	color: #00659C;
	padding-bottom: 16px;
	max-width: 800px;
}

.label
{
	color: #606060;
	padding-right: 8px;
}

.bluelabel
{
	color: #00659C;
	font-weight: bold;
	//font-size: 10pt;
	padding: 0px 0px 0px 2px;
}

.copyright
{
	position: fixed;
	bottom: 4px;
	height: 18px;
	width: 200px;
	right: 4px;
	text-align: right;
}

.versie
{
	position: fixed;
	bottom: 4px;
	height: 18px;
	width: 100px;
	left: 4px;
}

.userinfo
{
	position: fixed;
	top: 4px;
	right: 16px;
	font-size: 12px;
	color: #F28D4F;
	text-align: right;
}

.reclame
{
	color: #00659C;
	font-weight: bold;
	line-height: 170%;
	text-align: justify;
}

.klok
{
	position: fixed;
	top: 82px;
	right: 16px;
	text-align: right;
	color: #FFFFFF;
}

.tpklant
{
	color: #F28D4F;
	cursor: default;
}

.tpproject
{
	color: #0069B4;
	cursor: default;
}

.tptaak
{
	cursor: default;
}

.vartext
{
	color: #000000;
	font-weight: bold;
}
/* padding voor input velden naast vartext */
.vartext2 
{
	padding-left: 35px;
}
.message
{
	color: #000000;
	font-weight: bold;
	margin-top: 12px;
}
.headertekst
{
	padding: 20px 0px 0px 6px;
	margin: 0px 0px 6px 0px;
	font-size: 14px;
	font-weight: bolder;
	color: #003280;
	clear:both;
}

.info
{
	padding: 12px 10px 0px 6px;
}

/* div element met meldingen m.b.t. controle op input */
.validate_msgbox { 
	display:none;
	clear:both;
	padding:10px;
	margin-top:20px;
	border: 1px solid #00659C;
	color:red;
	font-weight:bold;
	line-height:20px;
}

TABLE.standard
{
	border-collapse: collapse;
	cursor: default;
}

TABLE.metborder
{
	border: 1px black solid;
}

.metborder
{
	border: 1px black solid;
}

TABLE.urenkaart
{
	cursor: default;
}

/*TR.openstaand
{
	color: blue;
}

TR.reservering
{
	color: #C0C0FF;
}
*/
/*
#tabeldeclaraties TR.laat
{
	color: orange;
}

#tabeldeclaraties TR.telaat
{
	color: red;
}

#tabeldeclaraties TR.betaald
{
	color: green;
}
*/
TR.header
{
	background-color: #0069B4;
	color: #FFFFFF;
	border-color: #0069B4;
}

TD.weekendheader
{
	background-color: #0069B4;
	color: #F28D4F;
	border-color: #0069B4;
}

TD.weekendtotaal
{
	color: #F28D4F;
}

TD.weekend
{
	background-color: #FFCDAF;
}

TD.vandaagtotaal
{
	color: #00B000;
}

TD.vandaag
{
	background-color: #B0FFB0;
}

TD.opslottotaal
{
	color: #808080;
}

TD.opslot
{
	background-color: #F0F0F0;
	color: #808080;
}

TD.opslotweekendtotaal
{
	color: #808080;
}

TD.opslotweekend
{
	background-color: #D0D0D0;
	color: #808080;
}

TD.timeraan
{
	background-color: #F2CD9F;
}

TR.detail
{
	cursor: pointer;
}

TR.geselecteerd
{
	cursor: pointer;
	background-color: #00A0A0;
}

TR.urenkaarttotaal, TD.urenkaarttotaal
{
	background-color: #E0E0FF;
}

// Bij support
TR.historie, TD.historie
{
	color: #808080;
}

THEAD
{
	background-color: #5BA4D0;
	color: #FFFFFF;
	border-color: #5BA4D0;
}

TH
{
	padding-left: 3px;
	padding-right: 4px;
	padding-top: 1px;
	padding-bottom: 1px;
}

TD.overzicht
{
	padding-left: 3px;
	padding-right: 8px;
	padding-top: 1px;
	padding-bottom: 1px;
}

TD.zoekregel
{
	border-width: 1px;
	border-color: #D0D0D0;
	border-style: dotted;
	padding-left: 3px;
	padding-right: 8px;
	padding-top: 1px;
	padding-bottom: 1px;
}

TR.zoekregel
{
	cursor: hand;
	/* equivalent voor Firefox browser*/
	cursor: pointer;
}

.sel_stop { /* logeer adres/vervoerindicatie stopzetten */
	float: left;
	padding-left: 0px;
	padding-top: 2px;
	margin-bottom: 2px;
	color: #00659C;
	font-weight: bold;
}
/* table in toonclientinfo.inc */
.hidden_table {
	padding-top: 5px;
	padding-bottom: 5px;
}
/* leerling vervoer nieuwe leerling padding 'wijzig' elementen */
.wpad{
	padding-left:30px;
}
.hide {
	display:none;
}

/* Responsive views */
/* ---------------- */

/* smartphone */
@media only screen and (max-width: 320px)
{
	.logo
	{
		display: none;
	}
	
	.logoplaatje
	{
		display: none;
	}
	
	.titelbar
	{
		top: 0px;
		left: 0px;
		right: 0px;
		height: 22px;
		text-align: center;
	}
	
	.titel
	{
		font-size: 20px;
	}
	
	.menu
	{
		top: 22px;
		right: 0px;
		left: 0px;
		height: 22px;
	}
	
	.dividerbar
	{
		top: 44px;
		right: 0px;
		left: 0px;
		height: 20px;
	}
	
	.toolbar
	{
		display: none;
	}
	
	.main
	{
		left: 0px;
		top: 64px;
		right: 0px;
		bottom: 0px;
		}
	
	.bottombar
	{
		display: none;
	}

	A.menuitem, .menuitem
	{
		font-size: 9px;
		padding-right: 0px;
	}
}