/* begin: reset + common */
* {font-family: Arial, sans-serif; font-size: 10pt;}
html {height: 100%; margin-bottom: 1px;}
body, table, td, div, input, select, textarea {font-family: Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0;}
a img {border: none;}
/* end: reset + common */

ul.menu {margin: 0; padding: 0;}
ul.menu li {margin: 0; padding: 0; list-style: none;}
ul.menu li a {display: block;}
ul.menu li a img {border: none;}
ul.menu li ul {margin: 0; padding: 0;}
/* end: reset + common */

/* begin: layout */
body {margin: 0;}
#box {position: relative; margin: 0 auto; width: 98%;}
	#head {clear: both; height: 72px; border-bottom: 1px solid #66CC00;}
		#head h1 {display: none;}
			#logo {position: absolute; top: 2px; background: transparent url(logo.png) 0 50% no-repeat; background-size: contain;}
			#logo a img {border: none; width: 253px; height: 60px; }
	#body {clear: both; margin-top: 16px;}
		#main {}
			#nav {position: relative; z-index: 19; top: -15px; left: 0; height: 68px;}
			#content {clear: both; position: relative; top: -10px; min-height: 200px;}
				#content h2 {top: 8px; font-size: 20px; color: black; font-weight: bold; padding-bottom: 10px;: }
				#content div.dtl.employee {float: left; width: 386px;}
				#content div.dtl.worksheet {float: right; width: 386px;}
				#content div.frm {clear: both;}
				#content div.dtl.options {clear: both; text-align: center;}
					#content div.dtl.options ul {margin: 0; padding: 0; list-style: none;}
					#content div.dtl.options ul li {float: left; width: 184px; margin: 4px; background-color: #0392CE;}
					#content div.dtl.options ul li a {display: block; line-height: 32px; color: white; font-weight: bold; text-decoration: none;}
			#info {position: absolute; top: 0; right: 0;}
				#info li {list-style: none;}
	#foot {clear: both;}
		#foot div {float: left;}
		#foot .webdevelopment {float: right;}
/* end: layout */

/* begin: tlb-info */
.tlb-info li {float: left; margin: 0 4px;}
/* end: tlb-info */

/* begin: message (msg) */
.msg {clear: both; position: relative; border: 3px solid #FF9933; background-color:#FFFFCC; padding: 0; margin: 4px 0;}
.msg div.close {position: absolute; right: 16px;}
.fw-msg-container {bottom: 0; position: fixed; width: 100%; z-index: 1000;}
@media screen and (min-width: 480px) {
	.fw-msg-container {bottom: 0; left: 1%; width: 40%;}
}
.fw-msg-container .alert {margin: 2px; padding: 8px 32px 8px 12px;}
/* end: message (msg) */

/* begin: mod_menu, mod_user_menu */
#mod_menu {display: block; min-height: 29px; border-bottom: 1px solid #66CC00;}
#mod_menu ul {float: left;}
#mod_menu ul li {float: left; line-height: 24px; padding: 0;}
#mod_menu ul li ul {display: none;}
#mod_menu a {text-decoration: none; color: #66CC00; font-size: 10pt; padding: 0 8px; border-bottom: 4px solid white;}
#mod_menu a:hover {color: #5BB104; border-bottom: 4px solid #66CC00;}
#mod_menu ul ul {position: absolute; z-index: 20; background-color: #EFEFEF; border: 1px solid #CCC; display: none;}
#mod_menu ul ul li {float: none; border: none; background-image: url(shim.gif); line-height: 200%;}
#mod_menu ul ul li a {font-family: Arial, Helvetica; color: black; font-size: 10pt; border-top: 1px solid #CCCCCC; border-bottom: none;}
#mod_menu ul ul li:first-child a {border-top: none;}
#mod_menu ul ul li:hover {background-color: white; color: white border: none;}
#mod_menu ul ul li a:hover {color: black; border-bottom: none;}
/* end: mod_menu, mod_user_menu */

/* begin: mod_breadcrumbs */
#mod_breadcrumbs {position: absolute; top: 40px; left: 8px;}
#mod_breadcrumbs a {color: green;}
#mod_breadcrumbs ul {margin: 0; padding: 0; list-style: none;}
#mod_breadcrumbs ul li {float: left; margin: 0 8px 0 0; padding: 0; line-height: 20px; background: white url(breadcrumbs-sep.png) 0 50% no-repeat;}
#mod_breadcrumbs ul li span {display: block; padding: 0 0 0 20px;}
#mod_breadcrumbs ul li:first-child {background-image: url(shim.gif);}
/* end: mod_breadcrumbs */

/* begin: form (frm) */
div.frm {clear: both; border: 1px solid #DFDFDF; margin: 8px 0; padding: 4px; background-color: white;}
div.frm fieldset {border: 1px solid #DFDFDF; margin: 0; padding: 4px; background: white;}
div.frm fieldset fieldset {border: none; margin: 0; padding: 2px 0;}
div.frm fieldset fieldset.text label {width: 250px; float: left;}
div.frm fieldset fieldset.textarea label {width: 250px; float: left;}
div.frm fieldset fieldset.editor label {width: 250px; float: none;}
div.frm fieldset fieldset.password label {width: 250px; float: left;}
div.frm fieldset fieldset.select label {width: 250px; float: left;}
div.frm fieldset fieldset.file label {width: 250px; float: left;}
.c-search-label {margin-left: 250px;}
div.frm .required {color: #F00;}
div.frm fieldset.missing {font-weight: bold;}
div.frm fieldset input.missing {border: 1px solid #F00;}
div.frm fieldset textarea.missing {border: 1px solid #F00;}
div.frm fieldset select.missing {border: 1px solid #F00;}
div.frm fieldset password.missing {border: 1px solid #F00;}
div.frm fieldset.invalid {font-weight: bold; color: #F00;}
div.frm fieldset input.invalid {border: 1px solid #F00; background-color: #FFC;}
div.frm fieldset textarea.invalid {border: 1px solid #F00; background-color: #FFC;}
div.frm fieldset select.invalid {border: 1px solid #F00; background-color: #FFC;}
div.frm fieldset password.invalid {border: 1px solid #F00; background-color: #FFC;}
div.frm fieldset fieldset .readonly {border: none;}

div.frm fieldset fieldset.radio label {float: left; width: 250px;}
div.frm fieldset fieldset.radio div {float: left;}
div.frm fieldset fieldset.radio div fieldset {float: left;}
div.frm fieldset fieldset.radio div fieldset label {float: none; width: inherit;}
div.frm input[type=submit] {padding: 0 16px; height: 24px; color: white; font-weight: bold; background-color: #666666; border: none; border-radius: 4px; cursor: pointer;}
div.frm input[type=submit]:hover {background-color: #AAAAAA;}
div.frm input[type=button] {padding: 0 16px; height: 24px; color: white; font-weight: bold; background-color: #666666; border: none; border-radius: 4px; cursor: pointer;}
div.frm input[type=button]:hover {background-color: #AAAAAA;}
/* end: form (frm) */

/* begin: details (dtl) */
div.dtl {border: 1px solid #DFDFDF; margin: 8px 0; padding: 4px; background-color: white;}
div.dtl fieldset {border: 1px solid #DFDFDF; margin: 0; padding: 4px; background: white;}
.dtl fieldset {margin: 5px; padding: 5px; border: 1px solid #6593CF;}
.dtl dl {margin: 0; padding: 0;}
.dtl dl dt {margin: 0; padding: 0; font-weight: bold; float: left; width: 80px;}
.dtl dl dd {margin: 0; padding: 0;}
/* end: details (dtl) */

/* begin: toolbar (itlb) */
div.itlb {border: 1px solid #DFDFDF; margin: 8px 0; padding: 4px; background-color: white;}
div.itlb fieldset {border: 1px solid #DFDFDF; margin: 0; padding: 4px; background: white;}
div.itlb.icon-32 h2 {line-height: 46px;}
div.itlb.icon-32 span.icon.icon-downloadxls {background-image: url(/gfx/bd/32x32/shadow/row.png);}
/* end: toolbar (itlb) */


/* begin: list (lst) */
div.lst {border: 1px solid #DFDFDF; margin: 8px 0; padding: 4px; background-color: white;}
div.lst fieldset {border: 1px solid #DFDFDF; margin: 0; padding: 4px; background: white;}
div.lst table {border-collapse: collapse; width: 100%;}
div.lst thead {background: #EFEFEF;}
div.lst th {border-bottom: 1px solid #5D5D5E; text-align: left; vertical-align: top;}
div.lst td {vertical-align: top;}
div.lst td p.small {font-size: 80%; color: #666666; margin: 4px 0;}
div.lst tr.dummy {display: none;}
div.lst th.num, 
div.lst th.bedrag, 
div.lst td.bedrag, 
div.lst td.num {text-align: right; padding-right: 4px;}
div.lst td.icon {width: 16px;}
div.lst td.icon a img {border: none;}
div.lst .opt {text-align: right;}
div.lst .opt a img {border: none;}
div.lst tbody tr:hover {background-color: #FAFAFA;}
/*div.lst tbody tr:hover td {color: white;}*/
div.lst tbody td {border-bottom: 1px solid #EFEFEF;}
div.lst tfoot td {border-top: 1px solid #5D5D5E;}
div.lst .list-nav ol {margin: 0; padding: 0; list-style: none;}
div.lst .list-nav ol li {float: left;}
div.lst .list-nav ol li a img {border: none;}
div.lst .list-nav ol li img {width: 16px; height: 16px;}
div.lst .list-nav ol li.info {float: right;}
div.lst .totaal td {font-weight: bold}
#list-overlay {background: url("EFEFEF-alpha80.png") repeat scroll 0 0 transparent; font-weight: bold; text-align: center;}

div.lst tr.afspr_eigen {background-color: #E5FFC3;}
div.lst tr.afspr_eigen:hover {background-color: #D1FF96;}
div.lst tr.afspr_cc {background-color: #FFE5C3;}
div.lst tr.afspr_cc:hover {background-color: #FFD196;}
div.lst tr.afspr_annu {background-color: #66CCFF;}
div.lst tr.afspr_annu:hover {background-color: #FFD196;}
div.lst td.num {text-align: right;}
div.lst td.parent {padding-left: 20px; background: transparent url(/gfx/expand.png) 0 50% no-repeat;}
div.lst td.sub {padding-left: 20px; background: transparent url(/gfx/sub.png) 0 50% no-repeat;}

div.lst td div.tooltip {display: none; position: absolute; max-width: 300px; background-color: #FFFFCC; border: 1px solid grey; padding: 2px; font-size: 80%;}
div.lst td:hover div.tooltip {display: block;}
div.lst a.tooltip-indicator {font-weight: bold; color: navy; text-decoration: none; padding: 0 4px; border: 1px solid navy; background-color: #FFFFCC;}

div.lst tr.subitem {background-color: #FFFFCC;}
div.lst tr#dummy-row {display: none;}
div.lst td.chk {width: 20px;}
div.lst td.icon {width: 16px;}

.fw-dummy-row {display: none;}
.fw-parent-row {background-color: LightGrey;}
.fw-child-row {background-color: LightYellow;}
.fw-stopped {text-decoration: line-through; color: red;}
.fw-stopped td {color: black;}
.fw-parent-row a.fw-expand-link {background: transparent url(/gfx/expand.png) 50% 50% no-repeat;}
.fw-parent-row.fw-row-expanded a.fw-expand-link {background-image: url(/gfx/collapse.png);}
.fw-parent-row a.fw-expand-link img {width: 16px; height: 16px; border: none;}
/* end: list (lst) */

/* begin: sortable */
div.sortable {clear: both; margin: 10px 0; padding: 4px; border: 1px solid #EFEFEF; background: #FFF url(/gfx/gradient-topdown-FFFFFF-EFEFEF-20x50.gif) 0 100% repeat-x;}
div.sortable fieldset {margin: 2px; padding: 4px; border: 1px solid #EFEFEF; background: #FFF;}
div.sortable fieldset legend {color: #000; font-weight: bold;}
div.sortable table {border-collapse: collapse; width: 100%;}
div.sortable table td {vertical-align: top;}
div.sortable table td fieldset {border: 1px solid #EFEFEF; background: #FFF url(/gfx/gradient-topdown-FFFFFF-EFEFEF-20x50.gif) 0 100% repeat-x;}
div.sortable table td fieldset ol {margin: 0; padding: 0; list-style: none; height: 300px; overflow-y: scroll;}
div.sortable table td fieldset ol li {margin: 2px; padding: 0 8px; border: 1px solid #EFEFEF; line-height: 24px; background-color: #FFF;}
div.sortable table td fieldset ol li.selected {border-color: #A2BCCF;}
div.sortable table td fieldset ol li.on {border-color: red;}
div.sortable table td fieldset ol li:hover {background-color: #FFC;}
div.sortable table td fieldset ol li span.dtl {background: #FFC;}
div.sortable table td.buttons {width: 40px; text-align: center; vertical-align: middle;}
div.sortable table td.buttons input {width: 30px; height: 30px; font-weight: bold; margin: 5px;}
div.sortable div.opt {float: right;}
/* end: sortable */

/* begin: overlay */
#ed-overlay {position: fixed; z-index: 970; background-color: #000; left: 0; top: 0; width: 100%; height: 100%;}
* html #ed-overlay {position: absolute; width: 3000px; height: 3000px;}
#ed-o-container {position: fixed; z-index: 980; left: 50%; top: 50%; margin: -240px 0 0 -240px; left: 50%; top: 50%;}
* html #ed-o-container {position: absolute;}
#ed-o-container div.ed-overlay {position: absolute; width: 480px; padding: 8px;}
#ed-o-content {position: absolute; z-index: 2; background: #FFF; border: 1px solid #000; overflow-y: auto;}
#ed-o-shadow {position: absolute; z-index: 1; background: #000; margin: 8px 0 0 8px;}
/* end: overlay */

#fs_frm-filter_bdat {float: left;}
#lbl_frm-filter_edat {width: inherit; margin: 0 3px;}
input.num {text-align: right; width: 40px;}
.center, div.lst td.center, div.lst th.center {text-align: center;}

div #help {
	border: 1px solid #006;
	color: #006;
	font-weight: bold;
	background-color: #FFC;
	padding: 0 4px;
}

span.help {
	border: 1px solid #006;
	color: #006;
	font-weight: bold;
	background-color: #FFC;
	padding: 0 4px;
	float: right;
	margin-right: 180px;
}
div.fltr fieldset fieldset span.help {float: none;}
fieldset.js_hide {display: none;}

p.warning.js {background-color: red; color: white; font-weight: bold; padding: 20px;}
p.tip {background: transparent url(/gfx/ab/16x16/plain/lightbulb_on.png) 0 0 no-repeat; padding-left: 20px;}
.tab-content {padding: 8px 0;}
label span.fw-required {color: red; margin-left: 4px;}
.help-block {display: none;}

.fw-rating-option {text-decoration: none;}
.fw-rating-option:hover {text-decoration: none;}
.fw-rating-option span {font-size: 3em; line-height: .5em; color: white;}
.fw-rating-option:hover span {color: yellow;}
.fw-rating-option.on span {color: #4da64d;}
.fw-rating-option span::before {content: '\2606'; position:absolute; color: grey;}

@font-face {
	font-family: 'Smileyface Font 3';
	src: url('fonts/subset-SmileyfaceFont3.eot');
	src: url('fonts/subset-SmileyfaceFont3.eot?#iefix') format('embedded-opentype'),
		url('fonts/subset-SmileyfaceFont3.woff2') format('woff2'),
		url('fonts/subset-SmileyfaceFont3.woff') format('woff'),
		url('fonts/subset-SmileyfaceFont3.ttf') format('truetype'),
		url('fonts/subset-SmileyfaceFont3.svg#SmileyfaceFont3') format('svg');
	font-weight: normal;
	font-style: normal;
}
.fw-icon {display: inline-block; line-height: 1; position: relative; font-family: 'Smileyface Font 3'; font-size: 4em; text-decoration: none;}
a:hover .fw-icon {text-decoration: none;}
.fw-icon::before {color: white;}
.fw-icon::after {position: absolute; left: 0; top: 0; color: lightgrey;}
a.on .fw-icon::before {color: Gold;}
a.on .fw-icon::after {color: black;}
.fw-icon-smiley1::before {content: 'Å';}
.fw-icon-smiley1::after {content: 'A';}
.fw-icon-smiley3::before {content: 'Ï';}
.fw-icon-smiley3::after {content: 'F';}
.fw-icon-smiley5::before {content: 'Ô';}
.fw-icon-smiley5::after {content: 'J';}
/* on colors */
a.on .fw-icon-smiley1::before {color: YellowGreen;}
a.on .fw-icon-smiley3::before {color: Gold;}
a.on .fw-icon-smiley5::before {color: OrangeRed;}
/* begin: tabs */
.nav-tabs li a .fw-indicator {margin-left: .5em;}
.nav-tabs li a .fw-indicator.glyphicon-ok {color: green;}
/* end: tabs */
/* begin: fw-edit-inline */
.fw-edit-inline {border: 1px solid grey; border-radius: 2px; display: inline-block; padding: 2px 4px;}
.fw-edit-inline.fw-success {border-color: Green; background-color: rgba(154, 205, 50, 0.6);}
.fw-edit-inline.fw-error {border-color: Maroon; background-color: rgba(128, 0, 0, .3);}
.fw-edit-inline.fw-pending {border-color: SteelBlue; background-color: rgba(70, 130, 180, .3);}
.fw-edit-inline input {border: none; background-color: transparent;}
.fw-edit-inline a img {margin-left: 4px; vertical-align: middle;}
/* end: fw-edit-inline */