/* *********************************************************************************************************************
	BaseNet - intranet 
	fluid & mobile ready

	Dit is het hoofd stijl bestand. Hierin zitten de meeste elementen verwerkt voor visuele vorm.
	Het onepcssgrid.css bestand bevat de layout van grid collomen en afwijkingen in stijl voor
	verschillende devices met behulp van media queries.
	Deze media queries worden afgevangen voor oudere browsers met behulp van javascript.

*/





/* *********************************************************************************************************************
 * Global
 */
body {
	background: #FFF;
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

hr {
	border-top: 1px solid #F6F6F6;
	border-bottom: none;
	border-right: none;
	border-left: none;
	margin-top: 1.5em;
	margin-bottom: 2em;
}

h1 {}

h2 {
	color: #666;
	font-size: 1.5em;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	margin: 0 0 0.2em 0;
	line-height: 1.5em;
}
h2:before {
	content: "";
	width: 30px;
	display: inline-block;
}
	h2 span.light { color: #999; }
	
h2.collapse {
	position: relative;
	cursor: pointer;
	padding-left: 30px;
}
h2.collapse[minimized=true]:before, h2.collapse[minimized=false]:before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 1.5em;	
	background-image: url(img/ico_right.svg);
	background-repeat: no-repeat;
	background-position:left center;
	position: absolute;
	top: 0;
	left: 0;
}
h2.collapse[minimized=false]:before {
	background-image: url(img/ico_down.svg);
}

h3 {
	color: #666;
	font-size: 0.9em;
	background: #F9F9F9;
	border-top: 1px solid #DDD;
	border-bottom: 1px solid #DDD;
	padding: 6px 3px;
	font-weight: bold;
	margin-bottom: 1em;
}

p {
	margin: 0 0 0.8em 0;
	line-height: 1.4em;
}

form {
	margin: 0 0 2em 0;
}

legend {
	padding: 0 5px 0 5px;
	font-weight: bold;
	font-size: 0.9em;
	margin-left: -0.4em;
}

fieldset {
	border: 1px solid #E6E6E6;
	padding: 1.2em;
	
	-webkit-border-radius: 3px;		/* Safari/Chrome, other WebKit */
	-moz-border-radius: 3px;		/* Firefox, other Gecko */
	border-radius: 3px;				/* Default */
}

button, submit, input[type=button], input[type=submit] {
	padding: 0.2em 0.6em;
	margin: 1em 0 0 0;
	
	border: 1px solid #CCC;
	color: #666;
	cursor: pointer;
	
	background: #F2F2F2; /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(242,242,242,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(242,242,242,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-8 */
}

button:hover, submit:hover, input[type=button]:hover, input[type=submit]:hover {
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);		/* Safari/Chrome, other WebKit */
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);	/* Firefox, other Gecko */
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);			/* Default */	
}

button:disabled {
	background: #F2F2F2;
	border: 1px solid #DDD;
	cursor: not-allowed;
	color: #999;
}

button:disabled:hover {
	-moz-box-shadow: none;		/* Safari/Chrome, other WebKit */
	-webkit-box-shadow: none;	/* Firefox, other Gecko */
	box-shadow: none;			/* Default */
}

input[type=text], input[type=password], textarea {
	border: 1px solid #E6E6E6;
	padding: 0.3em 0.4em;
	color: #999;
}

input[type=text]:hover, input[type=password]:hover, textarea:hover {
	border-color: #CCC;
	color: #666;
}

input[type=text]:focus, input[type=password]:focus, textarea:focus {
	border-color: #1DCCC5;
	color: #333;
}

textarea {
	resize: vertical;
}
ul.normal {
	margin-left: 20px;
}
.widgetWindow ul {
	margin-bottom: 10px;
}

.widgetWindow ol {
	margin-left: 20px;
	margin-bottom: 10px;
}
.widgetWindow ul li {
	list-style: disc;
}

.widgetWindow ol li {
	list-style: decimal;
}


/* *********************************************************************************************************************
 * Header
 */
#header {
	position: relative;
	padding: 0 0 0 0;
	border-bottom: 3px solid #1DCCC5;
}

#header:before {
	content: "";
	position: absolute;
	background: #FFF;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1px;
}

#header:after, #content:after, #footer:after {
	content: "";
	display: table;
	clear: both;
}

/* login user menu */
.loginbar {
	background: #1DCCC5;
	height: 34px;
	width: 100%;
}
.login {
	margin: 0.3em 3% 0.3em 0;
}
	.login a {
		text-decoration: none;
		white-space: nowrap;
		line-height: 1.4em;
		color: #EEE;
	}
	.login a:hover {
		color: #FFF;
	}
	div.logged {
		cursor: pointer;
		color: #999;
	
		height: 24px;
		width: 24px;
		float: right;
		margin-right: 5px;
		margin-left: 25px;
		
		background-image: url(img/menu-user.svg);
		background-repeat: no-repeat;
		background-position: center right;
	}		
	div.loggedMenu {
		z-index: 1000;
		position: absolute;
		top: 0;
		right: 30px;
		text-align: left;
		background: #FFF;
		border: 1px solid #F2F2F2;
		padding: 1em;
		
		-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);		/* Safari/Chrome, other WebKit */
		-webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);	/* Firefox, other Gecko */
		box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.45);			/* Default */	
	}
		div.loggedMenu ul li {
			border-top: 1px solid #DDD;
			line-height: 1.5em;
			font-size: 0.9em;
			padding: 0.5em 0 0.5em 1.5em;
			background-image: url(img/bullet.svg);
			background-repeat: no-repeat;
			background-position: center left;
		}
		div.loggedMenu ul li:first-child {
			border-top: none;
		}
		div.loggedMenu ul li.logout {
			background-image: url(img/logout.svg);
		}
		div.loggedMenu ul li.settings {
			background-image: url(img/gear.svg);
		}
		div.loggedMenu ul li.username {
			color: #999;
			background-image: url(img/user.svg);
		}
		div.loggedMenu ul li a, div.loggedMenu ul li a:hover {
			color: #333;
		}
#menuButton {
	cursor: pointer;
	color: #999;

	height: 24px;
	width: 24px;
	float: right;
	margin: 5px 5px 5px 25px;
	border: none;
	
	background-image: url(img/menu.svg);
	background-repeat: no-repeat;
	background-position: center right;
}

#miniLogo {
	height: 24px;
	padding-left: 28px;
	background-image: url(img/ico_barrenstone.png);
	background-size: contain;
	background-repeat: no-repeat;
	float: left;
	white-space: nowrap;
	line-height: 1.4em;
	color: #FFF;
}





/* *********************************************************************************************************************
 * Content container
 */
#content {
	background: #FFF;
	padding: 3em 0 4em 0;
	font-size: 0.8em;
}

/* form & validation style */
.singleField {
	margin: 0 0 0.3em 0;
	padding: 3px;
}
	.singleField label {
		display: inline-block;
		width: 45%;
	}
	.singleField label.error {
		margin-top: 0.3em;
		color: #DD2007;
		font-size: 0.85em;
	}
	.singleField label.check {
		width: 90%;
	}
	.singleField input[type=text], .singleField input[type=password] {
		width: 50%;
	}
	.singleField textarea {
		width: 96%;
		display: block;
		margin-top: 0.3em;
	}
.singleFieldFocus {
	/*background-color: #FADEDA;*/
	background-color: #F2F2F2;
	-webkit-border-radius: 3px;		/* Safari/Chrome, other WebKit */
	-moz-border-radius: 3px;		/* Firefox, other Gecko */
	border-radius: 3px;				/* Default */
}
	
.tableStatic {
	margin: -0.8em 0 1.8em 0;
}
.tableStatic td, .tableStatic th {
	border-bottom: 1px dotted #ddd;
	padding: 0.3em 0 0.3em 0;
	line-height: 1.2em;
	vertical-align: top;
}
.tableStatic th {
	min-width: 30%;
}
td.tdHoursNotOnInvoice {
	background-image:url(img/bg-td-hours-not-on-invoice.svg);
	background-position:2px 8px;
	background-repeat:no-repeat;
}
.tableLegenda {
	padding:2px 0 0 20px;
	background-image:url(img/bg-td-hours-not-on-invoice.svg);
	background-position:0px 2px;
	background-repeat:no-repeat;
}

/* linked projects (related to intranetuser) */
.favorite {
	background-image: url(img/star.svg);
	background-repeat: no-repeat;
	background-position: center center;
	text-indent: -9001em;
}
.favorite.active {
	background-image: url(img/star-active.svg);
}

/* widgetWindow */
.widgetHeader {
	padding: 1em 25px 0 25px;
	margin: -25px -25px 25px -25px;
	background: #F9F9F9;
	border-bottom: 1px solid #DDD;
}
	.widgetHeader ul {overflow: auto; margin-bottom: -1px;}
	.widgetHeader ul li {
		list-style: none;
		float: left; 
		margin-right: 5px;
	}
	.widgetHeader ul li a {
		position: relative;
		display: block;
		border: 1px solid #DDD;
		padding: 0.4em;
		
		color: #999;
		text-decoration: none;

		-webkit-border-radius: 3px 3px 0 0;		/* Safari/Chrome, other WebKit */
		-moz-border-radius: 3px 3px 0 0;		/* Firefox, other Gecko */
		border-radius: 3px 3px 0 0;				/* Default */
		
		background: rgb(221,221,221); /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZWVlZWUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  rgba(221,221,221,1) 0%, rgba(238,238,238,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=0 ); /* IE6-8 */
		outline: none;
	}
	.widgetHeader ul li a:hover {
		background: rgb(238,238,238); /* Old browsers */
		/* IE9 SVG, needs conditional override of 'filter' to 'none' */
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWVlZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZGRkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
		background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 ); /* IE6-8 */
		outline: none;
	}
	.widgetHeader ul li a.active {
		color: #666;
		background: #F1F1F1;
		border-bottom: 1px solid #F1F1F1;
		outline: none;
	}

.widgetWindow {
	position: relative;
	overflow: auto;
	
	-webkit-box-sizing: border-box;	/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box; 		/* Default */
	
	padding: 25px;
	margin: 0 0 2em 0;
	background: #F1F1F1;
}
.widgetWindow:before {
	content: "";
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	pointer-events:none;
}

/* WidgetFooter */
.widgetFooter {
	padding: 0.5em 25px 0.5em 25px;
	margin: 25px -25px -25px -25px;
	background: #F9F9F9;
	border-top: 1px solid #DDD;
	line-height: 24px;
	text-transform: uppercase;
	font-size: 0.8em;
	color: #999;
	clear: both;
}
	.widgetFooter span {
		font-weight: bold;
		color: #666;
	}

/* table overflow container */
.tableContainer {
	/*overflow: auto; /* kan niet permanent op overflow-x: scroll; maar moet zo wel GAAN functioneren wanneer de tabel te gek wordt. */
	overflow-x: scroll;
}
	
/* widgetTabs (dossier details tabs) */
#tabs li {
	display: none;
	list-style: none;
}
#tabs li:first-child {
	display: block;
}

/* vorderingen edited values*/
.editedValue {
	color: #CC3333;
}

.gridcell {
	display: inline-block;
}

.formContainer {
	margin-top: 1em;
}

/* searchQuery */
.searchQuery {
	width: 98.5%;
	position: relative;
	background-image: url(img/search-padded.svg);
	background-repeat: no-repeat;
	background-position: center right;
}
.searchQueryFormTabContainer {
	margin-bottom: 20px;
}
/* system messages & errors (html in page) */
.systemError, .systemInfo, .systemSucces {
	padding: 1em 1em 1em 4em;
	border-width: 1px;
	border-style: dotted;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	background-position: 10px center;
	margin-top: 1em;
}
.systemError {
	border-color: #DD2108;
	color: #DD2108;
	background-image: url(img/system-error.svg);
}
.systemInfo {
	border-color: #39F;
	color: #39F;
	background-image: url(img/system-info.svg);
}
.systemSucces {
	border-color: #9C0;
	color: #690;
	background-image: url(img/system-succes.svg);
}

.tooltip {
	cursor: help;
}

/* Date picker (hidden element fix) */
.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
	display: none;
}

/* *********************************************************************************************************************
 * Footer
 */
#footer {
	position: relative;
	background: #1DCCC5;
	padding: 4em 0 4em 0;
	font-size: 0.8em;
	color: #FFF;
}
	a#BaseNet {
		color: #FFF;
	}
	a#BaseNet span {
		color: #FFF;
	}
	a#BaseNet:hover {
		text-decoration: none;
	}





/* *********************************************************************************************************************
 * Special effects & helpers
 */
.hidden {
	display: none;
}

#overlay {
	display: none;
	position: fixed;
	background: rgba(0,0,0,0.0);
	z-index: 500;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#lightbox {
	display: none;
	position: fixed;
	background: rgba(0,0,0,0.75);
	z-index: 500;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
	#lightbox-container {
		position: absolute;
		top: 0;
		z-index:1000;
		display: none;
		left: 50%;
		top: 0;
		margin-top: 3.5em;
	}
	.lightboxHeader {
		text-align: right;
		padding: 0 1em 1em 1em;
		margin: -25px -25px 25px -25px;
		background: #F9F9F9;
		border-bottom: 1px solid #DDD;
	}
	.lightboxHeader span {
		float: left;
		margin: 1em;
		line-height: 1em;
		font-size: 1.4em;
	}
	
#lightbox-widget {
	font-size: 0.8em;
}

.veldjes {
	display: none;
}