/*
 *    $Revision$
 *    $Id$
 */


/* bodystyles */
html {
   overflow: auto;
   background-color: white;
   padding: 0;
   margin: 0;
}

body {
   font-family: ==fontfamily==;
   font-size: 0.75em;
   line-height: 1.8em;
   text-align: left;
   margin: 0;
   padding:0;
}
/* @media all and (min-width: 20em) { */
/* body {  font-size: 0.7em;}*/
/* }*/
/* @media all and (min-width: 70em) {*/
/* body {  font-size: 0.8em; }*/
/* }*/

textarea,input,td,th,select { /* Deze moeten afzonderlijk */
   font-family: ==fontfamily==;
}
div {
    border: 0;
    padding: 0;
    margin: 0;
}
table { /* om border om lege cellen te houden */
    border-collapse: collapse;
}
pre {
    line-height: 1.2em;
}
strong{
}
/* IE9 TH links alignen */
th {
    text-align: inherit;
}
#myportalteaser {
    text-align: center;
    font-size: 1.3em;
    padding-top: 70px;
    padding-bottom: 40px;
    width:90%;
}

#loginhtml {
  background-color: #F4F6F9;
  background: url(../appl/Pictures/loginbg.jpg) no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
}
#loginbody {
  background-color: transparent;
}
#loginbody div#dmodal,
#loginbody div#myportalteaser
{
    margin: 0 auto;
}

#ifl_f #buttons {
    margin-top: 10px;
    margin-bottom: 10px;
}
#logintable {
    background-color: transparent;
    border: 0px;
    margin: 0 auto;
}
#logintable td{
    background-color: transparent;
    line-height: 30px;
    font-size: 1.1em;
    padding-top: 2px;
    padding-left: 6px;
}
#logintable #visname,
#logintable #vispswd
{
    width: 250px;
    border: 1px solid #B1B3B4;
    font-size: 1.2em;
    height: 25px;
    color: ==textcolor==;
    border-radius: 4px;
    padding: 4px;
}
#logintable label[for=remember]
{
    font-weight: normal;
}
#logintable #buttons ul li,
#logintable #buttons ul li a {
    border-radius: 4px;
    font-weight: 500;
    font-size: 13px;
    margin-left: 0px;
    padding: 6px 10px 7px 11px;
    border: 0px;
}

#logintable #buttons {
    text-align: center;
    float: none;
    margin-left: 0;
}
#logindiv
{
    margin: 0 auto 10px;
    width: 90%;
    max-width: 320px;
    color:  #B1B3B4;
    background-color: #fff;
    padding-bottom: 1em;
    padding-top: 2em;
    border: 1px solid #CACBCC;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0px 0px 20px #E3E4E4;
    -webkit-box-shadow: 0px 0px 20px #E3E4E4;
    box-shadow: 0px 0px 20px #E3E4E4;
}
#loginfooter {
	position: fixed;
	bottom: 24px;
	height: 24px;
	width: 100%;
	clear: both;
	text-align: center;
	font-size: 12px;
}
#mobkey {
    float: right;
    padding-right: 8px;
}
#mobbutton {
}

#mainbody {
  width: 100%;
  height: 100%;
}

#showbody {
}
#editbody, #rejectbody {
  border-left: 0px solid ==frameheaderbackgroundcolor==;
  border-right: 0px solid ==frameheaderbackgroundcolor==;
  border-radius: 4px;
}

#searchbody {
}

#iconbody {
}

.simpelpage {
    margin: 70px;
    font-size: 14px;
    line-height: 18px;
    font-weight: normal;
    vertical-align: middle;
}
/* generic tag styles */
input, textarea, select {
  font-size: 1em;
  padding: 2px 2px 2px 2px;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 2px;
  background-color: #FFFDF6;
}
td, th {
  font-size: 1em;
  padding: 0px 1px 1px 2px;
  margin: 0;
  border: 0;
  vertical-align: top;
  font-weight: normal;
}
/* Safari is ugly, dan maar zo voor iedereen */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../appl/Pictures/togglerdown.png) ;
  background-repeat: no-repeat;
  background-position: right 6px center;
}

select[multiple]
{
    background-image: none;
}

select::-ms-expand { display: none;}
input[type=text], select {
  background-color: #FFFDF6;
}

input[type=text]:hover,
textarea:hover,
select:hover {
  background-color:#FEFEFE;
}

input[type=file] {
  border:0px solid #ccc;
  background-color: #FFFDF1;
}

input[type=password] {
  border:1px solid #ccc;
  background-color: #FFFDF1;
}

input[type=checkbox], input[type=radio]{
  background-color:transparent;
  margin:0 4px 0 2px;
}
input[type=submit]{
    margin: 0;
    padding: 0;
}
input[readonly], select[readonly], textarea[readonly] {
  background-color: transparent;
  color: ==textcolor==;
  border:0;
  padding: 0;
}
input[readonly], select[readonly], textarea[readonly], td span[readonly], td div[readonly] {
  filter: alpha(opacity=70);
 opacity: 0.7;
}
input[readonly]:hover, select[readonly]:hover, textarea[readonly]:hover {
  background-color: ==backgroundcolor==;
}

/* label tag =  de tekst */
label {
  color: #444;
  margin: 0;
  /*white-space: nowrap;*/
}
label.selector {
  float: left; /* links in de td */
}
span.labelextra {
  float: right; /* rechts in de td */
}
label.compactselector {
    padding: 0 0 2px 4px;
    line-height: 2em;
}
label.lt {
  font-weight: normal;
}
h3 {
    font-size: 12pt;
    font-weight:bold;
    text-align:left;
}
.multi_select_toggle {
    cursor: pointer;
    vertical-align: top;
}
a[href^="mailto:"] {
    text-decoration: none;
    color: ==textcolor==;
}
a:hover {
    text-decoration: underline;
    cursor: pointer;
}
a[href^="mailto:"].fldmailto {
    background-color: ==backgroundcolor==;
}

form {
  margin: 0;
  padding: 0;
}
th {
  color: ==blockheadercolor==;
  padding:  2px 3px 2px 3px;
  background-color: ==blockheaderbackgroundcolor==;
}

/* tabs: sluitkruisje */
.tabclose {
  color: #aaa;
  cursor: pointer;
  font-weight: bold;
}
.tabpinned {
  color: #888;
  cursor: pointer;
  font-weight: bold;
  font-size: 1em;
  line-height:10px;
  padding: 0px;
}
.tabpinned img {
    height:12px;
    width:12px;
    margin:0;
    border:0;
}
.tabcloseall {
  color: #888;
  cursor: pointer;
  font-weight: bold;
  font-size: 2em;
  float: right;
  line-height:31px;
  padding: 0px 5px 3px 3px;
}
.hot {
  color: red;
}
.tabclose:hover,
.tabcloseall:hover {
  color: red;
}


/* headerstyles */
#headerblok {
    width:100%;
    float: right;
    background: url(==headerimage==) no-repeat;
    background-position: left center;
    background-color: ==headerbackgroundcolor==;
    color: ==headercolor==;
}
#headersuggest {
    text-align: right;
    padding-right: 4px;
}
.hsspacer {
    height: 21px;
}
#headersearch {
    text-align: right;
    padding-right: 4px;
}
#productsearch {
}

#headerdate {
    font-weight: normal;
    text-align: right;
    border: 0;
    padding-right: 2px;
}
/*TODO*/
#headerprefix {
    font-weight: bold;
    text-align: center;
    border: 0;
    color: red;
    position: absolute;
    padding-left: 270px;
    padding-top: 30px;
    font-size: 2.0em;
}
#headerfunctions {
    float: right;
    margin-top: 2px;
    font-size: 0.9em;
    color: ==headercolor==;
}
#headerlogout {
    display: inline;
    cursor: pointer;
    padding-right: 20px;
    padding-left: 5px;
}
#headerhelp {
    display: inline;
    cursor: pointer;
    text-align: right;
    padding-right: 5px;
    padding-left: 5px;
}
#loggedinuser {
    display: inline;
    text-align: right;
    padding-right: 30px;
}
#langtoggle {
    display: inline; /* display:none to hide */
    float: right;
    padding-right: 2px;
}
#loggedinuser span {
    cursor: pointer;
}
#headerlogout:hover, #headerhelp:hover, #loggedinuser span:hover {
    text-decoration: underline;
}
#badschema {
    background-color: red;
    font-size: 2.0em;
    z-index: 9999;
    left: 200px;
    position: absolute;
}
#badobjects {
    background-color: red;
    color: white;
    font-size: 10px;
    z-index: 9999;
    left: 100px;
    top: 0px;
    position: absolute;
}

/* VOOR REGELS IN EEN OVERZICHT */
div.allactions {
    position:absolute;
    border:0px;
    padding:5px 3px 9px 3px;
    height:1em;
    border-radius: 4px;
    z-index:10;
}

div.ias {
    visibility:hidden;
    padding:0px;
    white-space: nowrap;
    cursor: default;
    height:1em;
    padding:5px;
}
.rstable tbody tr:hover td div.ias
{
    visibility:visible;
}

.ia { /*inline action span */
    cursor: pointer;
    color: blue;
}

span.ia2 { /*inline action v2 */
    cursor: pointer;
    color: ==inlineactioncolor==;
    border: 1px solid #ccc;
    margin: 1px;
    padding: 2px 4px 2px 4px;
    background-color: ==inlineactionbackgroundcolor==;
    border-radius: 4px;
    box-shadow: 1px 2px 2px #888888;
}

span.ia2:hover {
    background-color: ==inlineactioncolor==;
    color:  ==inlineactionbackgroundcolor==;
}

.afwijkopstel {
    font-weight: bold;
}
tr.updated td .afwijkopstel {
    background-color:#888;
}
.dirty td {
    color: #888;
}
.highlite td {
    color: white;
    background-color: blue;
}

.inlinedetails {
}
.inlinedetails.closed {
}

tr.self {}
span.self {}
tr.trnote {}
tr.trtrack {
    filter: alpha(opacity=80);
    opacity: 0.8;
    font-style: italic;
}
/* blockstyles */

.fcltframe {
    text-align: right;
    padding: 2px;
    margin-bottom: 5px;
/*TODO    border: none;
    background-color: white;*/
}
div.fcltframe {
    font-size: 12pt;
    font-weight:bold;
    text-align:left;
    cursor: pointer; /* it can collapse */
}

.fcltframeheader, .fcltframefooter {
    padding: 3px 5px 3px 8px;
    height: 24px;
    background-color: ==frameheaderbackgroundcolor==;
}
.fcltframeheader span {
   padding-top: 2px;
}

#iframerextratitle {
  font-weight: normal;
  font-style: italic;
  color: ==frameheadercolor==;
  font-size: 8pt;
  padding: 2px 6px 2px 6px;
  margin-left:10px;
  display: none;
}

#autofilter {
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 8px;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    position:relative;
    top: -2px;
    margin-left: 10px;
    border: 1px solid #eee;
}
div.collapsed #autofilter {
    display: none
}

div.fcltframeheader {
    font-size: 1.2em;
    color: ==frameheadercolor==;
    text-align: left;
    cursor: pointer; /* it can collapse */
    overflow-y: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

div.fcltframefooter {
    cursor: default;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.fcltframefooter #buttons {
  float: inherit;
  text-align: center;
}

div.widget {
    border: 0px solid #f1f1f1;
    margin: 2px;
    border-radius: 4px;
}
.widgettitle {
    border-bottom: 0px solid #f1f1f1;
    background-color: white;
    text-align: center;
    font-weight: bold;
    line-height: 20px;
}
/* Modal windows (kalender, popups) */
.ui-dialog {
   box-shadow: 5px 5px 10px rgba(0,0,0, 0.5);
}

/* oude jQuery ui corretie tbv tab menu */
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default {background:#e6e6e6 url(images/ui-bg_flat_75_e6e6e6_40x100.png) 50% 50% repeat-x;}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{background:#dadada url(images/ui-bg_flat_75_dadada_40x100.png);}
.ui-widget-header{border:1px solid #aaa;background:#ccc url(images/ui-bg_flat_75_cccccc_40x100.png) 50% 50% repeat-x;color:#222;font-weight:bold}
.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff url(images/ui-bg_flat_65_ffffff_40x100.png) 50% 50% repeat-x;font-weight:normal;color:#212121}

.ui-widget-header.ui-datepicker-header,
.ui-widget-header.ui-dialog-titlebar {
   background:none;
   background-color: ==frameheaderbackgroundcolor==!important;
   color: ==frameheadercolor==!important;
   border: none;
}

.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:2px; border-top-left-radius:2px;}

.ui-datepicker-calendar th {
   background: ==blockheaderbackgroundcolor== repeat-x left top;
   font-weight: normal;
}
/* Een kader om velden in een view-editscherm */
.fcltblock {
    margin:3px;
    padding:0px;
    text-align:left;
    border-radius: 4px;
}
body.modal .fcltblock {
    background-color: ==backgroundcolor==;
    border:1px solid #eee;
}

.fcltblocktab {
    border: 0;
    margin-top: 0px;
    border-collapse: collapse;
    border-spacing:0;
}

.fcltblocktab td {
    padding-top: 1px;
    padding-right: 4px;
}

.fcltblockhead {
    background-color:==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
    font-weight: normal;
    font-size: 1.1em;
    padding: 1px 0 2px 6px;
    border-style: outset;
}
.fcltblockhead img.details {
   margin-bottom: -3px;
}

#editbody .fcltblockhead {
    background-color:==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
}
body.modal .fcltblockhead{
    background-color:==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
    border:0px;
}
#showbody .fcltblockhead {
    background-color: ==showblockheaderbackgroundcolor==;
    color: ==textcolor==;
}
#showbody td,
#editbody td,
#searchbody td,
.fcltblocktab td  {  /* is wat ik wil bij inspectieschermpje, hoort bij block_start, maar : is daar geen frame oid vergeten ?*/
   line-height:1.9em;
}

td.time {
    line-height:1.2em!important;
    }

.fcltblock .inside {
    padding: 1px 0 2px 0;
    background-color: ==backgroundcolor==;
    border:1px solid #eee;
    border-top: 0;
}

.leftcontainer .fcltblock {
margin-bottom: 5px;
}

#search .inside {
   border: none;
}

img.autoreport {
    padding-left: 8px;
    cursor: pointer;
    vertical-align: top;
}
.besflex {
    padding: 1px 0 2px 0;
}

.info {
    padding: 4px 4px 12px 4px;
    font-size: 1.2em;
    color: #111111;
}

#selfInput.fcltblock td {
    padding: 2px;
}

.inside {
  margin:0;
  padding: 0;
}

.invoerinsp {
}

.uitstelinsp {
}

/* For first use intropage*/
div.wbackground {
    background-image: url(../appl/Pictures/welcomebg.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
    padding:10px 20px 10px 20px;
}
.transbox {
    padding: 15px;
    text-align: center;
    border-radius:4px;
    margin:4px;
    box-shadow: 2px 2px 2px #888888;
    margin: 30px 50px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}

.wwelcome {
}
.wtitle {
    color: #222;
    font-size: 1.8em;
}
.wintro, .wlinebye {
    color: #333;
    font-size: 1.4em;
    padding: 2em 0 1em 0;
}
.wline1, .wline2, .wline3, .wline4, .wline5 {
    color: #444;
    font-size: 1.2em;
    line-height: 1.8em;
    text-align: left;
    padding: 0 10% 0 10%;
}


/* For my personalized homepage*/
#mywelcome , #mymessages, #myactions{
     background-color: #fff;
     color: ==textcolor==;
     height: 10%;
     margin: 5px 3px 0 3px;
     padding: 0;
}
#mywelcomeframe {
    padding: 0;
    height: auto;
}
#mywelcometitle{
   background-color: ==mywelcomebackgroundcolor==;
   color: ==mywelcomecolor==;
   font-size: 1.8em;
   line-height: 1.8em;
   text-align: center;
}
#mynewscontainer {
    display: inline;
}
#mynewsframe {
    padding: 0px;
    /*TODO height: 168px;*/
}
#myactionsinfo, #mywelcomeinfo, #mymessagesinfo {
    padding: 4px;
}
#myactionscontainer {
    display: inline;
}
#myactionsframe {
    padding: 0;
    /*TODO height: 250px;*/
}
#mywelcomeinfo {
   background-color: ==blockheaderbackgroundcolor==;
   color: ==blockheadercolor==;
   margin-top: 1px;
   font-size: 1.2em;
}
.ui-tabs-nav {
   border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   border: 0px;
}

#facforum div {background-color: #FFFF80; background-image: none; }
#facforum h5 {background-color: #FFFF80; background-image: none; font-weight: normal; color:#000;}

#nieuwsbody {background-color: ==backgroundcolor==; padding:0; margin:0;  border: 0px solid #ccc;}
.nieuwstitel {font-weight: bold; font-size:1.6em; padding: 10px 0 4px 14px;}
.nieuwstekst { font-size: 1.1em; margin: 1px 20px 0px 14px; padding-bottom: 12px; line-height: 1.3em;}
#usermess td {line-height:1.7em;}
.usermsgdate { white-space: nowrap;}
.usermessage a {text-decoration: none; cursor:pointer;}
.usermessage a:hover {text-decoration: underline; color: #f26522;}
.newstextFreshRed {font-weight: bold; color: red;}
.newstextFresh {font-weight: normal; color: ==textcolor==;}
.newstext {
    color: ==textcolor==;
    filter: alpha(opacity=70);
    opacity: 0.7;
}
td.markread  {
    width: 24px;
    cursor: pointer;
    background-image: url(../appl/Pictures/bin_closed.png) ;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 10;
}

.flikehead, .flikefoot, .flikeopts, #flike_op {
   font-size: 1.1em;
   padding: 2px;
}
.flikefoot {
    margin-top: 10px;
}

ul.flikeopts  li {
    line-height: 2em;
    list-style-type: none;
}

ul.flikeopts  li a,
ul.flikeopts  li a img {
    margin-left: 10px;
    margin-right: 10px;
}

.flikefoot {}

#satisfaction {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50px;
    left: 100px;
}

.faclisticon {
    height: 16px;
}

/*ZOEKSCHERMEN*/

#search {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  min-width: 645px; /*745px;*/
  max-width: 1000px;
  margin: 2px 2px 2px 2px;
  padding: 0;
  background-color: ==backgroundcolor==;
  border: 1px solid;
  border-color: #eee;
  border-top: 0;
  box-shadow: 0px 0px 0px #888888;
}
#search div.fcltblock {
    margin:0px;
    text-align:left;
}
#search div.fcltblock label {
    color: ==textcolor==;
}

#search div.fcltblockhead {
    background-color: ==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
    padding: 1px 5px 2px 5px;
    margin: 2px;
    line-height: 1.8em;
}
#search div.inside {
    padding: 0 5px 0 5px;
}
#filters {
    padding: 0 5px 0 5px;
}

.searchkolom1, .searchkolom2, .resultkolom {
  vertical-align:top;
  width:50%;
  padding: 0;
  margin: 0;
}

.searchkolom1 {
padding-right: 15px!important;
}

/* zoekvelden die initieel en altijd zichtbaar zijn */
.primsearch {
  display: table-row;
  padding: 0;
  margin: 0;
}
/* zoekvelden die initieel niet en aan te zetten zijn */
.secsearch {
  display: none;
  padding: 2px;
  margin: 0;
}

.wildcard {
    background-color:#F5FAFF;
}
#rejecttable, #accepttable {
    width: 100%;
}

/*
 *  THE BUTTONS
 */
/* het blok waarin de list met buttons  */
#buttons {
    float:right;
    text-align:right;
    margin-left:5px;
    margin-bottom:5px;
    margin-top:0px;
}

#buttons ul {
    padding: 3px 3px;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    white-space: nowrap;
}

/* een button */
#buttons ul li,
#buttons ul li a {
    list-style-type: none;
    display: inline;
    min-width: 100px;
}

#materiallist_button,
#buttons ul li,
#buttons ul li a,
.mv,
input[type=button],
input[type=text].button,
input.button,
span.button {
    cursor: pointer;
    padding: 4px 9px 5px 9px;
    color: ==buttoncolor==;
    background-color:==buttonbackgroundcolor==;
    text-align: center;
    border-radius: 2px;
    font-size: 13px;
    font-weight: normal;
    margin: 1px;
    border: 0px;
}
input.button:hover,
input[type=button]:hover,
input[type=text].button:hover,
span.button:hover {
    color: ==buttonhovercolor==;
    background-color:==buttonhoverbackgroundcolor==;
}

/* Met icons een lichtere achtergrond */
#buttons ul li.hasIcon,
#buttons ul li.hasIcon a {
    background-color: rgba(255,255,255,0.5);
    padding: 7px 10px 0px 11px;
}

#buttons ul li:hover,
.mv:hover {
    background-color:==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
}
#buttons ul li.hasIcon:hover {
    background-color: #fff;
    background-color: rgba(255,255,255,0.9);
}
#buttons ul li.selected {
    text-decoration: underline;
}

#buttons ul li.vertical {
    display: block;
}
#buttons.vertical {
    /* float: none; */
}

#buttons.vertical ul li:hover {
    color: ==blockheaderbackgroundcolor==;
    background-color: transparent;
}

div#buttons.dialog {
   background-color: transparent;
   float: left;
   margin: 4px;
   text-align: left;
}

div#buttons.dialog a {
   margin-right: 20px;
   float: left;
}
div#buttons.dialog img {
   margin-right: 20px;
}

.dialogtext {
    display: inline;
    font-weight: normal;
    cursor: auto;
}

#buttons ul li.dialog,
#buttons ul li.dialog a {
    background-color: transparent;
    color: ==textcolor==;
    text-align: left;
    width: 100%;
    padding: 3px 10px 2px 11px;
}

#buttons ul li.dialog div:hover, #buttons ul li.dialog:hover {
    text-decoration: underline;
    cursor: pointer;
}
/* de submitbutton wil je onzichtbaar hebben, maar niet hidden!*/
#buttons ul li.hiddenbutton,
#buttons ul li.hiddenbutton input[type=submit] {
    background-color: transparent;
    filter: alpha(opacity=0);
    opacity: 0;
    border: 0;
    cursor: default;
    padding:0;
    margin:0;
}

/* een buttonhover */
#buttons ul li a:hover {
    color: ==buttonhovercolor==;
    background-color: ==buttonhoverbackgroundcolor==;
    text-decoration: none;
}
#buttons ul li:hover {
    color: ==buttonhovercolor==;
    background-color: ==buttonhoverbackgroundcolor==;
    text-decoration: none;
}

.btn_disabled
{
    filter: alpha(opacity=60);
    opacity: 0.6;
    color: #808080!important;
}

.mbutton
{
    width: 20px;
    height: 20px;
    background-image: url(../appl/Pictures/folder.png);
    background-repeat: no-repeat;
    border: 0;
    background-color: transparent!important;
}
/* een inline button */
.ilbutton
{
    cursor: pointer;
}

li.dialog span.default,
#buttons .default
{
    font-size: 20px;
}

img.photo {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100px;
}

img.kenmerk {
    border: 1px solid #ccc;
    max-height: 100px;
    max-width: 100px;
    display:block;
}

img.profile {
    border-radius: 2px;
}

#mrkFotoList img.photo {
    height: auto;
    width: 220px;
}

img.details, span.details, tr.details, div.ref {
    border: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
}

img.lendobj {
    padding: 0px;
    margin: 0px;
    margin-left: 5px;
    cursor: auto;
    height: 12px;
}

/* moreinfo als link ipv icon */
input.details, span.details, a.details {
    cursor: pointer;
    color: #2222CC;
}

#mldBehandel a.details, #mldClose a.details {
    color: ==blockheadercolor==;
    }

label.cadselect {
    cursor: pointer;
    color: #2222CC;
    text-decoration: underline;
}
input.details:hover,
span.details:hover,
label.cadselect:hover,
.fcltblockhead .details:hover {
    text-decoration: underline;
    color: #f26522;
}


.mover {
   width: 30px;
   cursor: pointer;
   text-align: center;
   font-weight: normal;
   font-size: 2em;
}

.fileopen {
    width: 16px;
    height: 16px;
    background-image: url(../appl/Pictures/fileopen.png);
    background-repeat: no-repeat;
    background-color: transparent !important;
}
.bijlage, .bijlage1, .materiaal {
    background-repeat: no-repeat;
    background-position: 6px;
    text-align: left;
}

.bijlage:focus, .bijlage1:focus, .fldflexF:focus, button:focus, input.button:focus {
    border: 0px!important;
}

.bijlage1 {
    background-image: url(../appl/Pictures/doc_text_image.png);
}
.bijlage {
    background-image: url(../appl/Pictures/folder.png);
}
.materiaal {
    background-image: url(../appl/Pictures/materiaal.png);
}

.uitvoerenden {
    background-image: url(../appl/Pictures/materiaal.png);
    background-repeat: no-repeat;
    background-position: 3px;
    padding: 4px 0 4px 25px;
    width: 140px;
    text-align: left;
}

#r_objs_button {
    background-image: url(../appl/Pictures/hand_point.png);
    background-repeat: no-repeat;
    background-position: 6px;
}
.fldr_objs{
    background: none;
    border: 0;
}
.frametab {
    width: 100%;
    padding: 0px!important;
}

div#result {
    width: 100%;
}

div#edit {
/*  background-color: #D3EAFF; */
  /* padding: 30px 10px 0 2px; */
}

/* headerstyles, usually to be overruled */
#header
{
    height: 125px;
    background-position: 0 0;
}


/*
 * OVERZICHTEN. Alle lijsten hebben class rstable
 */
#rstable,
#usermess {
   border-spacing: 0;
   /*TODO border-bottom: 1px solid #ccc;*/
}

.rstable
{
  clear: both;
  background-color:#f1f1f1;
  border-style: solid;
  border-color: #ccc;
  border-width: 0px 1px 1px 1px;
  width: 100%;
  padding: 3px 3px 3px 3px;
  /* border-collapse: collapse; */
  margin: 0px;
}
.rstable tr
{
  color: ==textcolor==;
  vertical-align: top;
  padding-bottom: 2px;
  padding-top: 2px;
  padding-left: 4px;
  padding-right: 2px;
}
.rstable thead th
{
  color: ==blockheadercolor==;
  background-color: ==blockheaderbackgroundcolor==;
  font-weight: normal;
  border-right: 1px ridge #ccc;
  white-space: nowrap;
}
.rstable td
{
  border-bottom: 1px solid #eee;
  padding: 4px 3px 7px 3px;
}
td.rsfooter
{
  padding: 3px 3px 2px 3px;
}
.rstable input[type=text]
{
  background-color: #FFF4C3;
}
.rstable tr.selectable
{ /* bijvoorbeeld badgenr */
  cursor: pointer;
}
.E td { background-color: #FFFFFF; }
.O td { background-color: #FAFAFA; }

.rstable.sortable thead
{
  cursor:pointer;
}
.rstable tfoot td
{
  border: 0px;
  color: ==textcolor==;
  background-color: #ddd;
  cursor: auto;
}
.rstable.sortable tfoot td img
{
/*    margin-left:10px;*/
    vertical-align: bottom;
}

/* Voor fin facturen */
.withinmargin td {
  background: linear-gradient(to bottom, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0) 80%); /*#C6EFCE*/
  background-color: #C6EFCE\9;
  color: #006100;
}
.outsidemargin td {
  background: linear-gradient(to top, rgba(255, 199, 207, 0.6), rgba(255, 199, 207, 0.5) 50%); /*#FFC7CE*/
  background-color: #FFC7CE\9; /* IE 8 and below */
  color: #9C0006;
}
tr.rejected td {
  color: red;
  text-decoration: line-through;
}

.tab_mld_materials tr.matline { background-color: ==backgroundcolor==; border-bottom: #ccc; }
.tab_mld_uitvoerenden { width: 100%; }
.tab_mld_uitvoerenden tr.uitvline { background-color: ==backgroundcolor==; border-bottom: #ccc; }

.nowrap { white-space: nowrap;}

/* all resulttables can be overruled by their id, like #algtable {} here */
#resvtabletiny, #resctabletiny {
    width: 55%;
}
#beztabletiny { width: 100%; }
#cntscopetable {width: 100%; }

#faqtable td { padding:  5px 10px 20px 10px;}
.faqq {
    font-size: 1.1em;
    font-weight: bold;
}
.faqa {font-size: 1.1em; font-style: normal;}
#faqfooter {
    line-height: 25px;
    padding: 4px;
    font-size: 1.1em;
    font-weight: bold;
}
#mod_faq {color: ==textcolor==; width:700px;}
#mod_faq ul {list-style-image: url(../appl/Pictures/spot.jpg)}
#faqhead {font-weight: normal; margin: 6px 0 4px 0; font-size: 1.2em;color:#900;}
#faqsubhead {font-weight: normal; font-size: 1.2em; padding-bottom:4px;}
#faqfoot {font-weight: bold;}
#faqsolved {font-weight: normal; padding:2px 0 0 4px; color:#111; font-size:1.2em;}
.faqantwoord {display:none; float:none; padding:4px 0 4px 8px; font-size:1.1em;}
.faqvraag {font-style: normal; font-size:1.1em;}
#faqanswerlist li {margin-bottom: 10px; }

/* flexkenmerken voor alle modules */
#flextable {
    width: 100%;
}

#besfavtable {
    width: 100%;
}
#besfavtable tr td {
    cursor: pointer;
}
#besfavtable tr.selected td {
    background-color: #f4d767;
}
#besfavtable .disabled {
    color: #A0A0A0;
}

.besischange td, .besischange input {
  background-color: #E6FFBB;
}

.beshaschange td, .beshaschange input {
  color: #606060;
  background-color: #FFEEBB;
}

#prodtable td {
    vertical-align: middle;
    padding: 4px;
    border-bottom: 0;
}
#prodtable img {
    height: 80px;
    margin: 0px;
}

span.rater img {
    height: 16px!important;
}
.prodsrchmess {
    margin: 20px;
    font-size: 1.2em;
}
.pscapt {
    font-size: 1.3em;
    font-weight: normal;
}
.pscapt:hover {
    text-decoration: underline;
}

tr.expired2 {
  color: #990000 !important;
}
input.expired2,
span.expired2 {
  color: #CC0000 !important;
  font-weight: normal;
}
.opdrgtmld {
  color: #C05600 !important;
  font-weight: bold;
}
/* for colored rows and others*/ /* PF: ns even aanzien hoe de MS-kleuren uitpakken */
.cntrappel td, .expired1 td {
  background: -webkit-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 80%); /* For Safari 5.1 to 6.0 */
  background: -moz-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.4) 80%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top, rgba(255, 254, 156, 0.6), rgba(255, 254, 156, 0.4) 50%); /* Standard syntax */
  background-color: #FFEB9C\9; /* IE 8 and below */
  color: #9C6500;
}
.cntopzeg td, .expired2 td {
  background: linear-gradient(to top, rgba(255, 199, 207, 0.6), rgba(255, 199, 207, 0.5) 50%); /*#FFC7CE*/
  background-color: #FFC7CE\9; /* IE 8 and below */
  color: #9C0006;
}
.expired3 td {
  background-color: #F1DCF6;
}
.unsolved td {
  background-color: #E4E8F8;
  font-weight: bold;
}
.unready td {
  color: #030407;
  font-weight: bold;
}
.sleepy td {
  color: #101010;
  background-color: #E0E0E0;
}
.orderready td {
  color: #101010;
  background-color: #FFCC88;
}
.past td {
  filter: alpha(opacity=70);
  opacity: 0.7;
}
.today td {
}
.future td {
  filter: alpha(opacity=70);
  opacity: 0.7;
}
.isready td {
}

.notperfect td {
  background-color: #E4E8F8;
}
tr.resR td {
    background-color: #e8e8e8;
}
tr.resC td {
    background-color: #fefefe;
}
tr.resV td {
    background-color: #fcfcfc;
}

tr.updated td {
  background-color: #F9EE6F;
  font-weight: bold;
  color: ==textcolor==;
}
tr.updated.dirty td {
    color: #808080
}
tr.vervolg {
  border-left: 2px solid #666;
}
tr.wfstep {
}
.child td, .child input  {
  color: #606060;
  background-color: #FEFFBB;
}

.cntfuture td {
  background-color: #E0E0E0;
}
.cntactive {
}
.cntrappel {
}
.cntopzeg td {
}
.cntpast td {
  color: #666;
}
.cntinactive td {
  background-color: #76b0f7;
}

#multires {
   color: ==frameheadercolor==;
   font-size: 1.2em;
   font-weight: bold;
}

#resselector {
   background-color: ==frameheaderbackgroundcolor==;
   margin: 2px 2px 5px 2px;
   padding: 2px 5px 4px 5px;
   height: 24px;
}
.resreado {
  color: #E40000;
  font-weight: bold;
}
#resafhbez {
    background-color:#ccc;
    color: ==textcolor==;
}
.facsetreado {
  color: #E40000;
  font-weight: bold;
}

.facmenuheaditem {
    font-weight: bold;
}
#rsMaxHistoryB, #rsMaxHistoryE, .resplanbordlimited {
  clear: both;
  color: blue;
  background-color: white;
  font-weight: bold;
  padding: 1px 8px 1px 1px;
  margin: 0;
  line-height: 15px;
  font-size: 1em;
}

#rsMaxHistoryB A, #rsMaxHistoryE A, .resplanbordlimited A {
  color: red;
  text-decoration: none;
}

div.res_remark {
background-color: #fff;
border-color: #ddd;

}


#rsEndText {
  color: white;
  background-color: #C00;
  font-weight: bold;
  padding: 1px 8px 2px 8px;
  margin: 0;
}

#resSummary {
  background-color: yellow;
  padding: 2px;
}

#statusline {
  background-color: yellow;
  color: red;
  width: 100%;
  text-align: center;
  padding: 2px 4px 2px 4px;
  margin: 0;
}

#multilabel{
    padding-right: 4px;
}

#multiaction{
}

#phonebookteaser {
    font-size: 0.7em;
    padding-left: 78px;
    display: inline;
}
#phonebookteaser a {
    color: white;
}
#ph_gotoFgraph { text-decoration: underline; cursor: pointer; background-color: transparent; }

/* pas op: option's css kent alleen background-color by IE */

/* field colors for required fields */
* html .required,
.required,
.required:focus,
input.required,
input[type=text].required,
input[type=password].required,
select.required, option.required,
textarea.required
{
    background-color: rgba(252, 247, 222, 0.7);
    background-color: #fcf7de\9;  /* IE8 */
    border: 1px solid ==requiredbordercolor==;
}
/* but maintain the button properties even if required */
input[type=button].required, input[type=text].button.required
{
    background-color:==buttonbackgroundcolor==;
    border: 1px solid ==requiredbordercolor==;
}
input[type=button].required:hover, input[type=text].button.required:hover
{
    color: ==buttonhovercolor==;
    background-color:==buttonhoverbackgroundcolor==;
}

* html .missing,
missing,
input[type=text].required.missing,
input[type=button].required.missing,
input[type=password].required.missing,
select.required.missing, option.required.missing,
textarea.required.missing,
.required.missing {
    background-color: #ff5050;
    color: #fff;
}

input.number.bad, input.float.bad, input.currency.bad, input.flddate.bad, input.fldtime.bad,input.fldflexC.bad,input.fldflexC50.bad   {
    background-color:#ffB0B0;
}
input[type=text].nomatch
{
    background-color:#FEB0B0;
}

input[type=text].mldres
{
    background-color:#EFBF2F;
}

/* datepicker calendar */
.ui-datepicker .calselected
{
    background-color:#ff0000;
}
.ui-datepicker-today {
    background-color: green;
    color: #FFFFFF;
    font-weight: bold;
}

td.ui-datepicker-week-end a {
    color: #FFFFFF;
    font-weight: bold;
    filter: alpha(opacity=35) !important;
    opacity: .35 !important;
}
/* zorg dat het kalendertje even hoog verschijnt als het invulveld*/
.hasDatepicker {float:left;}
.ui-datepicker-trigger {
    float:left;
    margin: 2px 10px 0 2px;
}

/* handig om dynamisch toe te voegen? */
.hidden {
  display: none;
}
.visible {
  display: block;
}

/* label class =  de td of div of zo */
@media all and (min-width: 20em){
    .label {
        width: 124px; /* bij 124px past Contactpersoon:+morinfo */

        }
}
@media all and (min-width: 50em) {
    .label {
        width: 170px;
        }
}
@media all and (min-width: 70em) {
    .label {
        width: 200px;
        }
}

.label {
    text-align: left;
    vertical-align: text-top;
    padding: 2px 0 0 4px;
    margin: 0;
    color: ==textcolor==;
}
td.label.flexsearch {
    width: 250px;
}
.opdrfooter {
    font-style: italic;
}

#goegel { margin-left: 12px; color: #fff; }

div#statusboxes {
    text-align:center;
    line-height:3em;
    float:right;
}

.bezflex {
    background-color:#eee;
    margin:4px;
}

.bezBezoek {
    border: 2px;
    border-color: red blue;
}

.bezPoolBinnen td {
    color: #006100;
    background-color: #C6EFCE;
    font-weight:bold;
}

.bezPoolLoketself td {
    font-weight:bold;
}
.bezPoolLoketother td {
    color: #888;
}

/* all other pages */


/* functional field groups (blocks) in edit screens
 * these are mostly just one of two kinds: left or right
 */
/* In div.leftcontainer */
#resPlaats,
#resUser,
#mldCaller,
#mldMelding,
#mldBes,
#mldAlg
{
    width: 100%;
}

/* Mobile first: single column layout at small screens */
@media all and (min-width: 20em) {
    div.leftcontainer,
    #algFlex,
    #algInfo,
    #algLoc1,
    #bedrNaw,
    #bedrSrt,
    #bedrTechn,
    #besArtikel,
    #besHeader,
    #besItemSel,
    #bezAfspraak,
    #cntInfo,
    #cntFlex,
    #facAlg,
    #facCnt,
    #facInfo,
    #finInfo,
    #finInvPartInfo,
    #insFlex,
    #insIns,
    #jobJob,
    #kpnMan,
    #menuStd,
    #mldHand,
    #mldFaqedit,
    #mldOpdrD,
    #mldStdMld,
    #msgBasis,
    #msgPrs,
    #opdrInfo,
    #opdrOpdracht,
    #prjInfo,
    #prsAfd,
    #prsNaw,
    #prsNoti,
    #prsPerslid,
    #prsUsrFlex,
    #prsFlex,
    #mrkInfo,
    #sleInfo,
    #algLoc2,
    #bedrContact,
    #bedrRelatie,
    #besArtikelBestel,
    #besFlex,
    #besInfo,
    #bezAdmin,
    #cntBedrijf,
    #cntData,
    #cntFindata,
    #facBez,
    #finRefInfo,
    #finFlex,
    #insGeo,
    #menuCust,
    #mldFlex,
    #mldInfo,
    #mldFaq,
    #mldIns,
    #mldObjD,
    #mldOverig,
    #mldRef,
    #mldRunTime,
    #mrkFoto,
    #msgAlg,
    #opdrFlex,
    #opdrKosten,
    #opdrMelding,
    #prsAFlex,
    #prsAut,
    #prsFin,
    #prsIns,
    #prsPerslid2,
    #prsSubst,
    #resFlex,
    #resInfo,
    #prjKosten,
    #prjVerdiepingen,
    #jobMld,
    #mrkOmschrijving,
    #scfInfo,
    #scfInfo_F,
    #sleRuimte,
    #insBind,
    #insSymbol,
    #insImage,
    #insRunTime
    {
        clear: left;
        float: left;
        width: 99.3%;
    }
}

/* two columns at wider screens     */
@media all and (min-width: 50em) {
    div.leftcontainer,
    #algFlex,
    #algInfo,
    #algLoc1,
    #bedrNaw,
    #bedrSrt,
    #bedrTechn,
    #besArtikel,
    #besHeader,
    #besItemSel,
    #bezAfspraak,
    #cntInfo,
    #cntFlex,
    #facAlg,
    #facCnt,
    #facInfo,
    #finInfo,
    #finInvPartInfo,
    #insFlex,
    #insIns,
    #jobJob,
    #kpnMan,
    #menuStd,
    #mldHand,
    #mldFaqedit,
    #mldOpdrD,
    #mldStdMld,
    #msgBasis,
    #msgPrs,
    #opdrInfo,
    #opdrOpdracht,
    #prjInfo,
    #prsAfd,
    #prsNaw,
    #prsNoti,
    #prsPerslid,
    #prsUsrFlex,
    #prsFlex,
    #mrkInfo,
    #scfInfo,
    #sleInfo
    {
        clear: left;
        float:left;
        width: 48%;
    }
    #algLoc2,
    #bedrContact,
    #bedrRelatie,
    #besArtikelBestel,
    #besFlex,
    #besInfo,
    #bezAdmin,
    #cntBedrijf,
    #cntData,
    #cntFindata,
    #facBez,
    #finRefInfo,
    #finFlex,
    #insGeo,
    #kpnGrp,
    #menuCust,
    #mldFlex,
    #mldInfo,
    #mldFaq,
    #mldIns,
    #mldObjD,
    #mldOverig,
    #mldRef,
    #mldRunTime,
    #mrkFoto,
    #msgAlg,
    #opdrFlex,
    #opdrKosten,
    #opdrMelding,
    #prsAFlex,
    #prsAut,
    #prsFin,
    #prsIns,
    #prsPerslid2,
    #prsSubst,
    #resFlex,
    #resInfo,
    #prjKosten,
    #prjVerdiepingen,
    #jobMld,
    #mrkOmschrijving,
    #scfInfo_F,
    #sleRuimte,
    #insBind,
    #insSymbol,
    #insImage,
    #insRunTime
    {
        clear: right;
        float: right;
        width: 48%;
    }
}


#algFlex2,
#besFlex2,
#cntFlex2,
#faqFlex2,
#finFlex2,
#insFlex2,
#insMultiEdit2,
#insXcp,
#insUitstel,
#mldFlex2,
#opdrFlex2,
#prsAFlex2,
#prsFlex2,
#resFlex2,
#bezBezoekers,
#bezettingInfo,
#cntSplit,
#finItems,
#mldBehandel,
#mldOmschrijving,
#mldUitvoerenInfo,
#msgMessage,
#prsFlex0,
#prsInzetbaarInfo,
#wpInfo,
#prjOpmerking,
#apiSample
{
    float:left;
    width: 99.3%;
}

#besItemFlex,
#besItems,
#kpnManModal,
#mld_selobj
{
    float: none;
    clear: both;
}

#mldUitvoeren,
#prsInzetbaar
{
    float: none;
    clear: both;
    height: 300px;
}

#inssymbol {
   width: 96px;
   height: 96px;
   border: 1px solid black;
}
#insphoto {
   width: 96px;
   border: 8px solid #fff;
   box-shadow: 3px 3px 2px #ccc;
}
#resphoto {
   width: 218px;
   border: 10px solid #fff;
   border-bottom-width: 40px;
   border-radius: 3px;
   box-shadow: 5px 5px 2px #888;
   cursor: pointer;
}
#resphoto_opstel {
   width: 218px;
   border: 10px solid #fff;
   border-bottom-width: 40px;
   border-radius: 3px;
   box-shadow: 5px 5px 2px #888;
   cursor: pointer;
}
.resroominfo {text-align: center;}
#resdescript {
    text-align: left;
    padding-left: 3px;
}
#resmakedates {
    padding-left: 3px;
    padding-top: 3px;
    font-size: 1.1em;
}
#usrrapinfo {
    font-style: italic;
    padding-left: 130px;
    padding-bottom: 16px;
}
#fldbehandel, #flddienst {
    color: #ADD8E6;
}
#afhaal {
}
.finrtable
{
  width: 100%;
}

.finrtable img
{
  cursor: pointer;
}

#cntSplit {height: 264px;}
select.flddienstfilt { /* de filter van diensten in mldopdr*/
    background-color: #eee;
}

/* functional field classes
   Een width van 250px is lekkerst, maar 218px is de bovengrens voor 1024x768
*/
/* default voor een veld dat evident kort is */
.fldshort {
  width: 100px;
}

.fldnotresponsive {width: 218px !important;}
table#vis_tab .fldflexC {width: 218px !important;}
table#vis_tab .suggest, table#vis_tab .suggestBusy{width: 218px !important;}

/* inputs en suggests */
.fld, .fldkp,
.fldreg, .flddis, .fldloc, .fldbld, .fldflr, .fldroom, .fldworklocation, .fldwpl, .fldpers, .fldcontactpers, .flduitvoerende,
.fldsrch, .flddisc, .flddep, .fldbedr, .fldref, .fldstdm,
.fldcontract, .fldcntnr, .fldorderby, .fldname,
.fldoms, .fldr_objs,
.fldsrtgroup, .fldsrtdeel, .fldsrtdeelmulti, .flditem, .fldsupplier, .fldgroupbysec, .fldordernum,
.mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresdesc,
.fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex,
.fldnewvalue, .fldmldobjs, .flddebtor, .fldfintype, .fldfinstatus, .fldreferentie, .fldfinboekm, .fldfincostsrt,
.fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, #flddelivery_place,
.fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
.fldkpn_module, .fldkpn_grpkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
.fldmgroep, .fldmmodule, .fldprs_dnstkey, .fldprs_bdrkey, .fldlocs, .fldblds, .fldgroup,
.fldscenario, .fldmoverequest, .fldprjstatus, .flddaydate, .fldactivity, .fldplace, .fldstopplace, .fldprincipal, .fldcategorie, .fldonderwerp,
.fldsel_controlemode, .fldartgroep, .fldbesitem, .fldmailto, .fldusrtabkey, .fldmodule, .fldfac_name, .fldfac_path, .fldfac_query,
.fldprsinzetbaardag, .fldmlduitvoerendag, .fldopdr_type_new, .fldcnt_cancel_period, .fldcnt_rappel_period, .fldsrtkenmerk_key, .fldverplicht, .fldstdmelding_key,
.fldsrtgroep, .fldgroep, .fldeenheid, .fldr_objs
{
  width: 218px;
}
/* ouderwetse listboxes */
    select, .fldbedrijf, .fldfunc, .fldact, .fldsortout,  .fldgroupby, .fldbdr_key, .fldopstel, .fldsel_activity,
    select.flddienst, select.fldcontract, .fldt_opdr, .fldaltgroep, .fldaltfunctie, .fldBES_srtgroup,
    select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup, .fldprio, .flddeliveryAddr, .fldmld_adrlkey, .fldmld_adrfkey,
    select.fldbudgeth, select.fldkstplgr, select.fldkpn_module, select.fldkpn_grpkey, .fldfac_prkey, .fldmld_adrkey, .fldsrt, .fldmld_adres,
    .fldroom_srt, .fldbld_srtkey, .fldfintype, .fldfinstatus, .fldter_srkey, .fldmodule, .fldusrtabkey, .fldgroep, .fldverplicht, .fldsrtkenmerk_key,
    .fldsrtgroep, .fldmsggroup, .flddel_address, .fldcategorie, .fldprs_bdrkey, select.fldsrtdeel, .fldmantel, .select.fldsupplier,
    select.fldcnt_cancel_period, select.fldcnt_rappel_period, select.fldgroup
{
  width: 224px;
}
.suggest {
  background-position: right 4px center;
}
.fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
.fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
{
  width: 218px;
}
.fldflexR, .fldSflexR, input.button, input.materiaal
{
  width: 224px;
}

#mod_substitutes .button, #scfcolpicker .button, #sleRuimteList .button, #prodsearchsearch, #mod_bijlagen .button, #showbookmark .button {
  width: auto;
}

#template_css .button {
  width: 130px;
}

.fldresroom {
  width: 204px !important;
}

.fld_dlvrnr {
  max-width: 50px;
}

.fld_cattime {
  max-width: 35px;
}

.fld_catamount {
  max-width: 50px;
}

@media all and (min-width: 60em) {
     /* inputs en suggests */
    .fld, .fldkp,
    .fldreg, .flddis, .fldloc, .fldbld, .fldflr, .fldroom, .fldworklocation, .fldwpl, .fldpers, .fldcontactpers, .flduitvoerende,
    .fldsrch, .flddisc, .flddep, .fldbedr, .fldref, .fldstdm,
    .fldcontract, .fldcntnr, .fldorderby, .fldname,
    .fldoms, .fldr_objs,
    .fldsrtgroup, .fldsrtdeel, .fldsrtdeelmulti, .flditem, .fldsupplier, .fldgroupbysec, .fldordernum,
    .mldstatusmulti, .opdrstatusmulti, .fldgastheer, .flddiscript, .fldmantel, .fldresdesc,
    .fldobjsort, .fldmsgurl, .fldmsggroup, .fldmelder, .fldflex, .fldsrt,
    .fldnewvalue, .fldmldobjs, .flddebtor, .fldfintype, .fldfinstatus, .fldreferentie, .fldfinboekm, .fldfincostsrt,
    .fldusrfilter, .flddienst, .fldmld_adres, .fldbld_srtkey, .fldter_srkey, .fldroom_srt, .flddel_address, #flddelivery_place,
    .fldcntmeldkey, .fldsrttype, .fldordernr, .flddept, .fldprs_srtkey, .fldselect, .fldbudgeth, .fldkstplgr,
    .fldkpn_module, .fldkpn_grpkey, .flddeptDesc, .flddeptName, .fldfav, .fldemails, .fldsubject, .fldcnt_contprs, .fldcnt_bdrkey,
    .fldmgroep, .fldmmodule, .fldprs_dnstkey, .fldprs_bdrkey, .fldlocs, .fldblds, .fldgroup,
    .fldscenario, .fldmoverequest, .fldprjstatus, .flddaydate, .fldactivity, .fldplace, .fldstopplace, .fldprincipal, .fldcategorie, .fldonderwerp,
    .fldsel_controlemode, .fldartgroep, .fldbesitem, .fldmailto, .fldusrtabkey, .fldmodule, .fldfac_name, .fldfac_path, .fldfac_query,
    .fldprsinzetbaardag, .fldmlduitvoerendag, .fldopdr_type_new, .fldcnt_cancel_period, .fldcnt_rappel_period, .fldsrtkenmerk_key, .fldverplicht, .fldstdmelding_key,
    .fldsrtgroep, .fldgroep, .fldeenheid, .fldcontroletype
    {
      width: 340px;
    }
    /* ouderwetse listboxes */
    select, .fldbedrijf, .fldfunc, .fldact, .fldsortout,  .fldgroupby, .fldbdr_key, .fldopstel, .fldsel_activity,
    select.flddienst, select.fldcontract, .fldt_opdr, .fldaltgroep, .fldaltfunctie, .fldBES_srtgroup,
    select.flddisc, select.fldsrtdeelmulti, select.fldsrtgroup, .fldprio, .flddeliveryAddr, .fldmld_adrlkey, .fldmld_adrfkey,
    select.fldbudgeth, select.fldkstplgr, select.fldkpn_module, select.fldkpn_grpkey, .fldfac_prkey, .fldmld_adrkey, .fldsrt, .fldmld_adres,
    .fldroom_srt, .fldbld_srtkey, .fldfintype, .fldfinstatus, .fldter_srkey, .fldmodule, .fldusrtabkey, .fldgroep, .fldverplicht, .fldsrtkenmerk_key,
    .fldsrtgroep, .fldmsggroup, .fldcontroletype, .fldsel_srtcontrole, .flddel_address, .fldcategorie, .fldprs_bdrkey, select.fldsrtdeel, select.fldmantel,
    select.fldsupplier, select.fldcnt_cancel_period, select.fldcnt_rappel_period, select.fldgroup, .fldr_objs
    {
      width: 346px;
    }
    .fldflex, .fldflexC, .fldflexC50, .fldflexX, .fldflexL, .fldflexQ, .fldflexF, .fldflexM, .fldflexE, .fldflexS,
    .fldSflex, .fldSflexC, .fldSflexX, .fldSflexL, .fldSflexQ, .fldSflexF, .fldSflexM, .fldSflexE, .fldSflexS
    {
      width: 340px;
    }
    .fldflexR, .fldSflexR
    {
      width: 346px;
    }
    input.button, input.materiaal {
      width: 346px;
    }
    .fldresroom {
        width: 326px !important;
    }
}
/* In mobile popup, vooralsnog iets korter voor iPhone */
.fldtokenmail
{
  width: 200px;
}
.fldmsgsubj, .fldcanceloms, .fldfac_query
{
  width: 400px;
}
.fldstdopmerk
{
  width: 340px;
}
/* Rapport */
.fldusrrap {
  width: 460px;
  background-position: 448px !important;
}

.flddagbits, .fldweekbits, .flddayofmonth, .flddayofweek {
  width: 109px;
}

.fldobjrestrict {
  font-style: italic;
}

#kostenklant {
    margin-right: 0;
}

select.fldimport_app_key, .fldfinomsch, .flduitvExist
{
  width: 400px;
}

.flddate, .fldtime, .fldfinbtw, .fldprocent {
  width: 90px;
}
.fldtime {
  cursor: pointer;
}

.flddatetime, .fldresstatus, #existingDates, #newDates, .fldmsgprio, .fldafspnum, .flddeel, .fldcnttarief {
  width: 140px;
}

.fldmldnum, .fldopdrnum, .fldresnum, .flddeel, .fldrfonum, .fldordernum, .fldopdrnr, .fldcntnum, .fldfinnum {
  width: 124px;
}

.fldmsgmessage {
  width: 100%;
}

.flduren, .fldgeboekt, .flduurtarief, .fldmatkosten, .fldcorrkosten, .fldtotkosten, .fldtermkosten, .fldbeslimiet, .fldprjraming, .rescat_p_c, .rescat_tp_c, .fldfinsom,
.fldcntprijs, .fldcntopp, .fldmrkprijs, .fldcntamount, .fldalgprijs, .fldfinsumover, .fldfinsumbelow, .fldbessrtweging, .fldbessrtprijs, .fldbestsrttotaal,
.fldmatamount, .fldmatprice, .fldmattotal, .fldkpnlimiet, .fldcntverlengen, .fldroomkosten, .fldvoorzkosten, .fldroomkorting, .fldroomtotaal, .fldrvskosten, .fldrespijt,
.flduitvoertijd1, .flduitvoertijd2, .flduitvoertijd3, .flduitvoertijd4, .fldalg_uitvtijd, .fldbdr_uitvtijd, .fldins_uitvtijd, .fldmld_uitvtijd, .fldmld_accpettijd,
.flddayshours, .flddayshours3, .flddayshours1, .flddayshours2, .flddayshours4, .flddayshourse, .flddayshours_resp, .flddayshours_urg, .fldfreebudget {
  width: 100px;
}
.fldfinbedrag {
  width: 100px;
  text-align:right;
}
.fldbezcnt, .fldflrnum, .fldnrper, .fldfincnt, .fldnoshow {
  width: 26px;
}
.fldbescnt {
  width: 32px;
}
/* compensate for readonly input props */
.fldresroomedit {
  filter: alpha(opacity=100) !important;
  opacity: 1.0 !important;
}

.fldtxt, .fldomschr, .fldremark, .fldresroomchange, .flddatechange, .fldcntperiod {
  width: 99.3%;
}

.fldmlduren, .fldmldkosten {
    width: 30px;
}
.fldmldurentotal {
    width: 30px;
}
#fldmldurentotal.afwijk {
    color: red;
}

/* haltewerkzaamheden: jaar, km,
   bestellingen: retour */
.fldjaar, .fldkm, .fldmaterialen, .fldretour {
  width: 40px;
  text-align:right;
}

/* haltewerkzaamheden weeknummer */
.fldweeknr {
  width: 20px;
}

#fldobjPossible, #fldobjExist {width: 380px;}
.fldobjcolumn {width: 200px; text-align:center}
.fldobjmidcolumn {width: 140px; text-align:center}

.fldlcldata, .fldlcldialect, .fldlclstd
{
  width: 400px;
}
#lcllink
{
    cursor:pointer;
    background-color: #ff00ff;
}

div#lcldialect .label
{
    width: auto;
}

#itemfilter
{
  width: 218px;
}
.iteminfo2 {
    font-weight: bold;
}
.iteminfo1 {
    font-weight: bold;
    font-style: italic;
}
.besitemflex
{
    margin-left:10px;
    color: #888
}
.besphoto {
    width: 100px;
    border: 8px solid #fff;
    box-shadow: 3px 3px 2px #ccc;
}
.besdetailtd {
    border: 0px solid #ccc;
    vertical-align: top;
    padding: 4px;
    box-shadow: 3px 3px 2px #ccc;
}
.besdetailtable {
    width: 100%;
}
/* functional checkbox fields classes */
.fldcheck, .fldmldnew, .fldmldbusy, .fldmldrej, .fldmlddone, .fldmldself, .fldmldafm, .fldmldver, .fldmldfiat, .fldmldkostenklant,
.fldopdrnew, .fldopdrbusy,.fldopdrrej, .fldopdrafm, .fldopdrver, .fldmldacceptex, .fldmldrunex, .fldmldspoed,
.fldresopen, .fldresclosed, .fldroomcat, .fldobjcat, .fldartcat, .fldresactual, .fldresdeleted, .fldresnoshowonly,
.fldrfonew, .fldrfoopen, .fldrfodelivered, .fldrfoclosed, .fldopdrrej, .fldopdropen, .fldopdrdelivered, .fldopdrclosed,
.fldbezexpext, .fldbezinside, .fldbezdepart, .fldbezclosed, .fldbezpark,
.fldcntnew, .fldcnttgoe, .fldcntinact, .fldcntactf, .fldcntactl, .fldcntrap, .fldcntopz, .fldcntverl, .fldinsobjincl, .fldexpobjincl, .fldalgbez, .fldfacnoti, .fldnotingids,
.fldCSflexN, .fldCflexN, .fldmldinform, .fldmldzichtbaarFE, .fldInspZo, .fldInspMa, .fldInspDi, .fldInspWo, .fldInspDo, .fldInspVr, .fldInspZa, .fldInspNoHoli {
}

.flexlabel {
  color: ==labelcolor==;
  background-color: ==labelbackgroundcolor==;
  text-align: left;
  padding: 2px 0px 3px 2px;
  border-bottom: 1px solid #fff;
}
.flexlabellabel {
  color: ==labelcolor==;
  background-color: ==labelbackgroundcolor==;
}

tr.flexcollapsable td {
  cursor: pointer;
  text-decoration: underline;
}

.flexcollapsable .lhint {
  background-image: url(../appl/Pictures/up.png);
  background-repeat: no-repeat;
  background-position: right 7px;
  padding-right: 22px;
}

.flexcollapsed .lhint {
  background-image: url(../appl/Pictures/down.png);
  background-repeat: no-repeat;
  background-position: right 5px;
}

#showbody .lhint {
  background-image: none;
  }

.fldflexD, .fldSflexD {
    width: 196px;
}
input[readonly].fldflexD {
    width: 218px;
}
.fldflexN, .fldSflexN {
    width: 100px;
}
.fldflexF.missing, .fldflexE.missing {
    color: #ff5050;
}
.fldflexR.inactive, .fldflexS.inactive {
    color: #FF4301;
}
.operand {
    background-color: #E1E894;
    width: 60px;
    border:0;
    padding:0;
}
div#besItemSel .fcltblockhead {
    background-color: ==frameheaderbackgroundcolor==;
}

span.besprijsup {
    color:red;
}
span.besprijsdown {
    color:green;
}

tr.unauthorized {
  background-color:#ddd;
  color: red;
}

#plaatsselect {
     border: 0px green solid;
     margin: 0;
}

/* left-to-right and right-to-left selectors */
.mv {
    /* zie #buttons ul li */
}
#mldFrame {height: 800px;}
.mv.r {}
.mv.l {}
/* styling for modal (popup) forms */
body.modal {
    padding:2px;
}
/* for modal-like tabs*/
.likemodal {
   background-color: ==backgroundcolor==;
   margin: 10px 20px 0 20px;
}

body.likemodal {
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    }

.modal th {
   background-color: ==frameheaderbackgroundcolor==;
   border-right: 1px solid #ccc;
}
#mod_ruimtefunctie {width:650px; height:40px;}
#mod_perslidwerkplek {width:450px;}
#mod_substitutes {width: 500px; height: 370px;}
#mod_queuemail {width:600px;}
#mod_history {height: 200px;}
#mod_beslever {width:800px;}
#mod_besretour {width:600px;}
#mod_besweging {width:500px;}
#mod_cntsplit {width:450px;}
#mod_cntsplit .label {width: 180px;}
#mod_req_move {width:500px;}
#mod_req_move2 {width:500px;}
#mod_req_move3 {width:500px;}
#mod_noshow  {width:450px;}
#mod_impbezoekers  {width:800px;}
#mod_rejectbody {width:600px;}
#mod_opdrejectbody {width:600px;}
#mod_dubrejectbody {width:600px;}
#mod_rejectoffertebody {width:600px;}
#mod_acceptofferte {width:600px;}
#besrejectbody {width:500px;}
#localebody {width:550px;}
#mod_mldcontinue {width:600px;}
#mod_mlddouble {width:800px;}
#mod_mldclose {width:600px;}
#mod_mldaccept {width:500px;}
#mod_mldshiftdate {width:550px;}
#mod_opdruren {width: 680px;}
#mod_opdrclose {width:540px; height: 260px;}
#mod_mldfixsla {width:400px; height: 260px;}
#mod_resdelete {width:400px;}
#mod_mldforward {width:600px;}
#mod_tekedit {width:400px;}
#mod_caddoorvoeren {width:400px;}
#mod_prs_pwdchange {width:400px;}
#mod_ruimteafdeling {width:700px;}
#mod_prsinzetbaar {width:500px;}
#mod_resupdateroom {width:430px;}
#mod_resupdateobj {width:400px;}
#mod_mldmat {width:625px;}
#mod_mldstdmsrtruimte {width:400px;}
#mod_authQR {width:500px;}
#mod_bijlagen {width:600px;}
#mod_resmulti_save {width:450px;}
#mod_insmultiedit {width:400px;}
#mod_insxcp {width:500px;}
#mod_mldobj {width:900px;}
body.mod_edit_mandate {width:500px;}
#mod_pass2mail  {width:400px;}
#mod_pnotes   {width:400px;}
#mod_stdmeldingfaq {width:500px;}
#mod_selfreg  {width:410px; height:400px;}
#mod_token2mail {width:250px;}
body#mod_resmulti { width: 690px; }
body#mod_resmulti div#show_date_from { height: 250px }
#mod_respool {width:600px;}
#mod_bes_kenmerk {width:500px;}
.modal.scaffolding {width:500px;}
#mod_mldobj #obj_info {height:99px; padding: 4px; border: 0px solid #ccc;}
#mod_mldobj .label {
    width: 220px !important;
}
#mod_wfexpression { width: 700px; }
#mod_signature { height: 320px; }

div#mldsimilar {
  padding: 4px 4px 4px 10px;
}

/* ==== menu styles ==== */
/* voor de tabjes boven het menu */
.ui-tabs-anchor { padding: 0.45em 0.8em !important;
}

div#menu {
   margin: 0;
   padding: 0;
   overflow: auto;
}

/* Merk op dat heel veel afmetingen hieronder alleen zijn
   voor een initieel rustiger beeld. Vooral frheader.height
   en menutabs.width hebben echt effect */
div#frheader{
    height: 75px;
    width: 100%;
    line-height: 1.2em;
}
div#topdivider{
    position: absolute;
    height: 3px;
    width: 100%;
    z-index: 2;
    cursor: pointer;
    background-color: ==dividercolor==;
}
div#topdivider.dividerclosed{
    height: 0px;
}
div#menutabs{
    position: absolute;
    left: 0px;
    width: 252px; /* Wordt vergroot naar behoefte, nooit verkleind */
    top: 82px;
    border: 0px;
}

div#menudivider{
    position: absolute;
    left: 259px;
    height: 400px;
    width: 3px;
    border: 0px;
    z-index: 2;
    cursor: pointer;
    background-color: ==dividercolor==;
}
div#menudivider.dividerclosed{
    width: 0px;
}

div#maintabs{
    position: absolute;
    left: 265px;
    height: 400px;
    top: 82px;
    width: 800px;
    border: 0px;
}


.toggler {
    position: absolute;
    background-color: ==dividercolor==;
    z-index:10;
    border: 1px solid grey;
    cursor: pointer;
    background-position: center;
    background-repeat: no-repeat;
}

#menutoggler {
    height: 18px;
    width: 13px;
    left: -14px;
    border-right: 0px;
    border-radius: 3px 0px 0px 3px;
    background-image:url(../appl/Pictures/togglerleft.png);
}
#menutoggler:hover {
    background-color:white;
}
#menudivider.dividerclosed #menutoggler {
    left: 0px;
    border-right: 1px solid gray;
    border-left: 1px;
    border-radius: 0px 3px 3px 0px;
    background-image:url(../appl/Pictures/togglerright.png);
}
#headtoggler {
    height: 13px;
    width: 18px;
    top: -14px;
    left: 5px;
    display:none;
    border-bottom: 0px;
    border-radius: 3px 3px 0px 0px;
    background-image:url(../appl/Pictures/togglerup.png);
}
#headtoggler:hover {
    background-color:white;
}
#topdivider.dividerclosed #headtoggler {
    display:block;
    top: 0px;
    border: 1px solid gray;
    border-top: 0px;
    border-radius: 0px 0px 3px 3px;
    background-image:url(../appl/Pictures/togglerdown.png);
}

/* Menu-items tegen linkerkant */
.ui-tabs .ui-tabs-panel {
    padding-left: 0;
    padding-right: 0;
}

div#menutabs .ui-layout-content {
    background-image: none; /* Wit blok halverwege menu weghalen */
    background-color: ==menubackgroundcolor==;
}

div#menutabs li.ui-state-active {
    background-image: none; /* Wit blok halverwege menu weghalen */
    background-color: ==menubackgroundcolor==;
}

/*div#PersFAC ul, div#ProfFAC ul, div#MgtFAC ul {*/
#menutabs .ui-layout-content ul {
    padding: 0px;
    margin: 0px;
}

/*div#PersFAC ul li {*/
#menutabs .ui-layout-content ul li {
    list-style: none;
}
div#PersFAC ul li {
    color: ==persmenucolor==;
    background-color: ==persmenubackgroundcolor==;
}

div#ProfFAC ul li {
    color: ==profmenucolor==;
    background-color: ==profmenubackgroundcolor==;
}

div#MgtFAC ul li {
    color: ==mgtmenucolor==;
    background-color: ==mgtmenubackgroundcolor==;
}
div#PersFAC ul li span.menukop {
  color: ==persmenucolor==;
}
div#MgtFAC ul li span.menukop {
  color: ==mgtmenucolor==;
}
div#ProfFAC ul li span.menukop {
  color: ==profmenucolor==;
}

span.menukop {
  background-repeat:no-repeat;
  background-position:left;
  vertical-align: middle;
}

span.menulinkkop {
  color: #004f80;
  cursor: pointer;
  vertical-align: middle;
  padding-left: 28px;  /* 24+4 van .micon */
}


/* deze is voor kop en item */
li.menu ul li a,
a {
    cursor: pointer;
}

li.mk {
   border-bottom: none;
   border-top: 1px solid #ddd;
   cursor: pointer;
   line-height: 3.1em;
   padding: 1px 4px 4px 4px;
}
li.mk:hover {
    background-color: ==menukophoverbackgroundcolor==!important;
}
li.mk:hover span.menukop {
    color: ==menukophovercolor==!important;
}

li.mi {
    font-size: 0.9em;
    line-height: 1.85em;
    background-color: #fff;
    filter: alpha(opacity=100);
    opacity: 1;
    color: #888;  /*kan dat altijd?*/
}
.mkimg, .mimg {
    border: 0;
    padding: 0;
    margin-right: 2px;
    margin-left: -10px;
    width: 12px;
    height: 12px;
}
li.mklogo img {
    border: 0;
    padding: 0;
}
img.mklogo {
    -webkit-transition: -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
    transition: transform 1s;
}
img.mklogo:hover {
    -ms-transform: scale(1.2,1.2); /* IE9 */
    -webkit-transform: scale(1.2,1.2); /* Chrome, Safari, Opera */
    transform: scale(1.2,1.2);
}

.micon, .nomicon {
  width: 24px;
  margin:0 4px 0 0;
  vertical-align: middle;
}
.micon:hover, .nomicon:hover {
  transition: transform 0.5s;
  transform: scale(1.2,1.2);
}
.nomicon {
  background-color: ==frameheaderbackgroundcolor==;
  border-radius: 2px;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.nomicon:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}
#menutabs .ui-layout-content ul li li {
    font-weight: normal;
    color: ==menuitemcolor==;
    background-color: ==menuitembackgroundcolor==;
    list-style: none;
    border-top: 1px solid #ddd;
    padding: 2px 0 3px 20px;
    text-decoration: none;
}

li.mi:hover {
    background-color:==menuitemhovercolor==!important;
    cursor: pointer;
}


td.iconmenu {
  font-size: 1em;
  text-align:center;
  padding-bottom: 20px;
  vertical-align: top;
  cursor: pointer;
}

td.iconmenu h3 {
    font-weight: normal;
}
td.iconmenu img {
    width: 100px;
    height: 100px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ffffff;
}

.iconlabel {
    background-color: #fcfcfc;
    cursor: pointer;
}

/* portalmenu */
#portalbody {
   background-color: #fff;
}

#portalmenu {
    text-align: center;
}
#portalmenu h2 {
   font-size: 2em;
   color: ==portalkopcolor==;
   margin: 4px;
   padding: 5px 1px 5px 1px;
}

#portalmenu table {
    margin: 0 auto 1px auto;
    width: 100%;
    border-collapse: collapse;
    padding-top: 20px;
}
#portalmenu table tr td
{
    text-align: left;
    border: 0px solid #f1f1f1;
    padding: 1em 0.2em 1em 1.5em;
    vertical-align: top;
    background-color: white;
}

#portalmenu span.menukop {
  background-image:none;
   color: ==portalkopcolor==;
  font-weight: bold;
  font-size: 1.1em;
  cursor: default;
  margin: 0;
  padding: 8px 1px 8px 0px;
}


#portalmenu ul {
   margin: 0 0 5px 0;
   padding: 0 0 0 0;
}
#portalmenu li.mi {
    font-size: 1.1em;
    line-height: 1.3em;
    list-style: none;
}
#portalmenu li.more {
    font-size: 0.9em;
    cursor: pointer;
    color:  #004f80;
}
#portalmenu a {
   color: ==textcolor==;
   text-decoration: none;
}
#portalmenu a:hover,
#portalmenu .more:hover {
   color: #f26522;
}


#portalmenu span.menuimg {
  font-weight: bold;
  line-height: 100px;
  width: 100px;
  display: block;
  vertical-align: middle;
  text-align: center;
  float:left;
  padding-right: 1.5em;
}
#portalmenu div.portalmenukop {
  width:62%;
  float:left;
}


#portalmenu span.menuimg img {
   max-width: 95%;
}

@media all and (max-width: 60em) {
   #portalmenu span.menuimg {
      width: 70px;
   }
   #portalmenu div.portalmenukop {
      width: 50%;
   }
    #portalmenu span.menuimg {
      padding-right: 0.2em;
    }
}

@media all and (min-width: 60em) and (max-width: 75em) {
   #portalmenu span.menuimg {
      width: 80px;
   }
   #portalmenu div.portalmenukop {
      width: 50%;
   }
   #portalmenu span.menuimg {
   padding-right: 0.5em;
   }
}

@media all and (min-width: 75em) and (max-width: 85em) {
   #portalmenu span.menuimg {
      width: 85px;
   }
   #portalmenu div.portalmenukop {
      width: 57%;
   }
   #portalmenu span.menuimg {
   padding-right: 0.9em;
   }
}


.deleted {
  text-decoration: line-through;
}
.alg_deleted, .cnt_deleted, .prs_deleted, .res_deleted, .cnt_inactive, .ins_deleted {
  background-color: red;
  color: white;
  font-weight: bold;
  text-align: center;
  padding: 4px;
  margin-top: 2px;
  font-variant: small-caps;
}
.outofbounds {
  color: red;
  font-weight: bold;
}

input.activeinterval,
span.activeinterval,
input[readonly].activeinterval,
input.notapproved,
span.notapproved {
  font-weight: bold;
  color: red;
}

input.suggest::-ms-clear
{
  width : 0;
  height: 0;
}

input.fldflexF::-ms-clear
{
  width : 0;
  height: 0;
}

input.suggestBusy::-ms-clear
{
  width : 0;
  height: 0;
}

input#materiallist_button::-ms-clear
{
  width : 0;
  height: 0;
}

.fatal {
  background-color: red;
  color: yellow;
  font-weight: bold;
  text-align: center;
}
div.fatal {
  padding: 5px;
}
.warning {
  background-color: orange;
  color: black;
  padding: 2px 5px 4px 5px;
  height: 20px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
tr.listfatal td {
  background-color: red;
  color: yellow;
  font-weight: bold;
}
.noshow, #fldnoshow {
  color: yellow;
  font-weight: bold;
  background-color: red;
}
.rsSummary {
  float: left;
  background-color: #808080;
  color: #FFFFFF;
  padding: 0px; /* moet 0, anders zie je nog iets als-ie hidden is */
}
.rsTruncmore {
    color: #888;
    cursor: pointer;
}

.mldopdruren {
    background-color: #F5F5F5;
}
.mldimpropdruren {
    background-color: #F7C39D;
}
.mldopdrurenkosten {
    background-color: #9EADF6;
}
#legenda {
    background-color: ==backgroundcolor==;
}
.legendatitel {
    font-weight: bold;
    white-space: nowrap;
}
.legendaregel
{
    vertical-align:top;
    width:25px;
    padding:0;
}
.legendakleur {
    width: 16px;
    height: 16px;
    box-shadow: 1px 1px 1px #888888;
    margin-bottom: 2px;
}
.legendatekst {
    white-space: nowrap;
    padding-left: 2px;
}
#meldinglegenda {
    width:100%;
    background-color: #ffffff;
    border: 1px solid #eee;
}
#meldinglegenda tr {
  vertical-align: top;
  padding-left: 2px;
}

/* FG  classes*/
#navigationCell{
    float: left;
    width: 220px;
    overflow: auto;
    overflow-x: hidden;
    background-color: ==backgroundcolor==;
    padding-left:1px;
    padding-right:2px;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    position: absolute;
    top: 0px;
    left: 0px;
}
#LinkerNavi {
    vertical-align: top;
    width: 220px;
    background-color: ==backgroundcolor==;
}

#mapCell  {
      border: 0px;
      margin-left: 223px;
      height: 800px;
}

#mapCell3D {
      border: 0px;
      margin-left: 223px;
      height: 800px;
}
#tabsCell {
   border-top:1px solid black;
}
/* Graphics */
td.selectable {
    padding: 0; cursor:pointer;
}
#docBody {margin:0; padding:0;}

#theTabs {
    height:100%;
    padding-top:1px;
}

.draggable {
    color: red;
    font-weight: bold;
    cursor: move;
}
.drag {
    position: relative;
    cursor: pointer;
    color: red;
}
#navigationCell.collapsed {
    display:none;
}
#fgmenutoggler {
    background-color: white;
    height: 18px;
    width: 13px;
    top: 1px;
    border-right-style: none;
    border-radius: 3px 0px 0px 3px;
    background-image:url(../appl/Pictures/togglerleft.png);
}
#fgmenutoggler.collapsed {
    border-left: 0px;
    border-right-style: solid;
    border-radius: 0px 3px 3px 0px;
    background-image:url(../appl/Pictures/togglerright.png);
}
#fgmenutoggler:hover {
    background-color:#ddd;
}
#fgtabtoggler {
    background-color: white;
    height: 13px;
    width: 18px;
    border-top-style: none;
    border-radius: 0px 0px 3px 3px;
    background-image:url(../appl/Pictures/togglerdown.png);
}
#fgtabtoggler:hover {
    background-color:#ddd;
}
#fgtabtoggler.collapsed {
    border-top-style: solid;
    border-bottom: 1px;
    border-radius: 3px 3px 0px 0px;
    background-image:url(../appl/Pictures/togglerup.png);
}

/* Enkele 'vieze' overrules */
#navigationCell label,
#navigationCell .fldloc,
#navigationCell .fldbld,
#navigationCell .fldflr,
#navigationCell .fldscenario
{
    width: 200px;
}

#navigationCell .fldsDiscsIn,
#navigationCell .fldrooms,
#navigationCell select,
#fLegenda select
{
    width: 199px;
}
.openFG, .closedFG, .fixedFG {
    background-repeat:no-repeat;
    background-position: 4px 5px;
    width: 220px;
}
.openFG, .closedFG {
    background-color: ==frameheaderbackgroundcolor==;
    color: ==frameheadercolor==;
}
.fixedFG {
    background-color: ==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
}
.openFG {
    background-image:url(../appl/Pictures/up.png);
    cursor: pointer;
}
.closedFG {
    background-image:url(../appl/Pictures/down.png);
    color: #ddd;
    cursor: pointer;
}
.fixedFG {
    line-height: 2em;
    border-top: 2px solid white;
    text-align: center;
}
.openFG tr, .closedFG tr {
}
.openFG td, .closedFG td {
    line-height: 2em;
    padding-left: 25px;
    border-top: 2px solid white;
}
.closedFG:hover {
    color: #fff;
}
#toggler {
    float: left;
    width: 12px;
    height: 100%;
    cursor: pointer;
}
#SearchCode, #SearchLbl {
    width: 130px;
    margin-left: 12px;
}

.area_diff {
    color: red;
}

/* facmgtVB */
.PageBODY {
    background-color: #fff;
    color: ==textcolor==;
    margin-left:8px;
    margin-top:8px;
    cursor: auto;
}
.FormTABLE {
    border: none;
    width: 100%;
    font-size: 0.7em;
    background-color: #fafafa;
    margin-bottom: 6px;
}
.FormTABLE input[type=submit] {
    padding: 3px 9px 4px 10px;
    color: ==buttoncolor==;
    background-color:==buttonbackgroundcolor==;
    text-align: center;
    border-radius:4px;
    font-weight: normal;
    margin: 1px;
    border: 0px;
}
.FormTABLE input:hover[type=submit] {
    background-color:==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
}

.FormHeaderTD {
    background-color: ==frameheaderbackgroundcolor==;
    color: #fff;
    font-size: 11pt;
    font-weight: bold;
    text-align: left;
    padding: 2px 5px 4px 5px;
}
.xFormHeaderFONT {
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    padding: 3px;
}
.FieldCaptionTD {
    color:#ccc;
    vertical-align: middle;
    font-weight: bold;
    padding-top: 5px;
    text-align: right;
    border-bottom: 1px solid #ccc;
}
.FieldCaptionFONT {
    font-style:  normal;
    font-weight: bold;
    text-align: right;
    color:  #333;
    margin-top:  2px;
    margin-bottom: 3px;
    padding: 0 8px 2px 4px;
}
.DataTD {
    color: ==textcolor==;
    text-decoration: none;
    padding: 2px;
    background-color: #fafafa;
    border-bottom: 1px solid #ccc;
}
/* gek: opdeenofandere manier werkt [type=text] enzo niet */
.DataTD input,
.DataTD textarea {
    border: 1px solid #ccc;
}
.DataTD input:focus,
.DataTD textarea:focus {
    border: 1px solid #888;
}
.DataTD input[type=checkbox],
.DataTD input[type=radio] {
    border: none;
}
.DataTD a {
    text-decoration: none;
}
.DataTD a:hover .DataFONT {
    color: #f26522;
}
.RecordSeparatorTD {
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    padding: 0 2px;
    background-color: #D6D8E8;
}
.DataFONT {
    font-weight: normal;
    color: ==textcolor==;
    text-decoration: none;
}
.ColumnFONT {
    color: ==blockheadercolor==;
    font-weight: bold;
}
.ColumnTD {
  background-color: ==blockheaderbackgroundcolor==;
  color: ==blockheadercolor==;
  border-right: 1px ridge #ccc;
  padding: 2px 4px 4px 4px;
  font-weight: bold;
  white-space: nowrap;
}
.ColumnTD a {
   text-decoration: none;
}
.ColumnTD a:hover .ColumnFONT {
   color: #f26522;
}

.facmgtmultilang {
    text-decoration: underline;
    cursor: pointer;
    color: blue;
}
.facmgtmultilang font {
    color: blue;
}
.facmgtmultilang:hover font {
    color: #f26522;
}

/* phonebook API */
#phonebookdetails {
    background-color:#fff;
    padding: 5px 5px 10px 5px;
    border: 1px solid #888;
}
#phonebookdetails .label {
    text-align: right;
    padding-right: 5px;
}
#phonebookdetails .value {
}
#phonebookdetails th {
    background-color: #fff;
}
#phonebookdetails .title,
#phonebookdetails .title a {
    text-align: left;
    font-size: 1.1em;
}
#phonebookdetails  td {
    padding: 3px;
}

/* vinder styling */
#vinderNaw {
    padding: 10px;
    clear: left;
    float:left;
    width: 600px;
}

#vinderMelding{
    padding: 10px;
    clear: both;
    width: 600px;
}

table.filter {
    background-color: ==backgroundcolor==;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}
table.filter th {
    background-color: ==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
    font-weight: normal;
    font-size: 1.1em;
    margin-bottom: 2px;
}
table.filter td {
     cursor: pointer;
     padding:3px 2px 1px 4px;
     color: ==textcolor==;
     line-height: 18px;
}
table.filter td.count {
    font-size: 0.9em;
    text-align: right;
}
table.filter td.meer {
    font-size: 0.9em;
    cursor: default;
}
table.filter img {
     padding-right: 4px;
     vertical-align: bottom
}
  span.wisFilter {
     color: #888;
     cursor: pointer;
  }
#searchBox {
     font-size: 1.8em;
     vertical-align: top;
     text-align: center;
     padding: 5px;
}
#searchBox #searchText {
    font-size: 1.0em;
    color: #666;
}
#searchBox input {
    vertical-align: middle;
}
#breadcrums {
 padding: 10px;
}
  .tag {
        color: #3e6d8e;
        margin: 2px 4px 2px 1px;
        padding: 2px 3px 2px 3px;
    }
#prodtable {
   border: 1px solid #f1f1f1;
}
#prodtable th {
  background-color: #fafafa;
  color: ==textcolor==;
  border: none;
  border-bottom: 1px solid #f1f1f1;
}

#mod_authQR
{
    font-size:9pt;
    line-height: 12pt;
}
#mod_authQR #qrurl
{
    font-size:12px;
    font-family: courier;
    white-space: nowrap;
}
.otptoken {
    color: #ddd;
}
.otptokencurrent {
    color: #000;
}
#uitleen_restxt
{
    font-size:9pt;
    line-height: 12pt;
    padding-top: 10px;
    padding-bottom: 10px;
}

span.removetag {
    background-image:url(../appl/Pictures/deletegrey.png);
    background-repeat: no-repeat;
    background-position:-1px -1px;
    padding-right: 10px;
    cursor: pointer;
    width:20px;
}
p.trunc {
	white-space: nowrap;
	width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.filter p { margin: 0px; }

#hidFrame { display: none; }

/* experimentje. is dit leuk? */
input, textarea, select {
    outline: none;
    border-radius: 0px;
}

input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0px #888;
    border: 1px solid #888;
}
input[type=radio]:focus,
input[type=checkbox]:focus {
   border: none;
   box-shadow: 0 0 0px #888;
}
input[readonly], select[readonly], textarea[readonly] {
    box-shadow: none;
    border:none;
}

/* touch colors are defined here to allow customisation */
#tabletmenu {
   color: ==portalkopcolor==;
}
.tabletmenu img {
    background-color: ==frameheaderbackgroundcolor==;
}
.tmenutab {
    background-color: ==blockheaderbackgroundcolor==;
    color: ==blockheadercolor==;
    border: 2px solid ==frameheadercolor==;
}
#tabletmenu #luser {
    color: ==blockheaderbackgroundcolor==;
}
.tmenutabhome {
    color: ==textcolor==;
}

/* floorscreen */
.floorscreen input[type=button] {
    background-color:#a33;
    width: 180px;
    margin: 2px;
    font-weight: bold;
    padding: 12px;
    box-shadow: 2px 2px 2px #888888;
    margin-bottom: 12px;
    font-size: 1.3em;
    border-radius: 4px;
    color: ==backgroundcolor==;
}
.floorscreen input[type=button]:hover {
    background-color:#fff;
}
.floorscreen input[type=button].selected {
    background-color:#d00;
    font-weight:bold;
    text-shadow: 1px 1px #ccc;
}
.floorscreen #fsnavigation {
    width: 220px;
    overflow: auto;
    overflow-x: hidden;
    background-color: ==backgroundcolor==;
    border-right: 1px solid ==textcolor==;
    position: absolute;
    top: 0px;
    left: 0px;
    text-align: center;
    height: 100%;
}
.floorscreen #fslegenda { position:absolute;bottom:20px; left:10px }
.floorscreen #theReport
{
    background-color: #f0f0f0;
    width: 650px;
    position: absolute;
    bottom: 10px;
    right: 25px;
    box-shadow: 2px 2px 2px #888888;
    border: 1px solid #888888;
}

.floorscreen #theClock
{
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  background-color: transparent;
  color: #888;
  text-align: right;
  z-index:999;
}

.rflrscreen #rstable th
{
    background-color: ==backgroundcolor==;
    color: ==textcolor==;
}
.rflrscreen #rstable td
{
  padding: 2px;
  background-color: transparent;
}
.rflrscreen #iframerextratitle
{
    color: ==frameheaderbackgroundcolor==;
}

body.floorscreen3d {
	background-color: #fff;
	margin: 0px;
	overflow: hidden;
}
.bord3d {
    padding: 2px 4px 2px 4px;
    border: 2px outset #666;
    background-color: #fff;
    color: #555;
    font-size: 0.8em;
    font-family: Arial, Helvetica, Sans-serif;
}

#xsldata {
	height:100%;
	font-family: Courier;
	min-height: 550px;
	width:98%;
	margin: 5px;
}
#req_srtnoti { display: inline; }
/* Tabgrootte zetten werkt helaas niet in IE */
#xsldata, pre { -moz-tab-size:4; }
#xsledit label, #xslview label {padding-right: 10px;}
#xslview {padding: 8px 0 10px 0;}
#sDocuments {width: 200px;}

#scfcolpicker {
    padding:10px;
    border:1px solid black;
    position:absolute;top:5px;left:500px;
    background-color:#f0f0f0;
}
#scfcolpicker select {
    width:150px;
}

#scfcolpicker td:hover {
   cursor: move;
}

#scfcolpicker td input {
   cursor: pointer;
}

#buttons ul li.hasIcon,
#buttons ul li.hasIcon a {
   padding: 9px 10px 5px 12px;  /* is vierkant weer bon-ton? */
   border-radius: 2px!important;
}

.ui-widget-content{
   border:0px;
}

li.hiddenbutton {
   padding: 0px 0px 0px 0px!important;
}

.ui-widget {
   font-family: ==fontfamily==;
}

#prodsearchsearch {
   border: 0px;
}

#showlink {
    border: 0px solid #ccc!important;
    box-shadow: 4px 4px 8px rgba(0,0,0, 0.5);
    text-align: right!important;
    }

#showlink input[type=button] {
    background-color:==buttonbackgroundcolor==;
    color: ==buttoncolor==;
    border: 0px;
    cursor: pointer;
    padding: 2px;
}

tr.report_V td {
  background-color: #FEFFBB;
}
tr.report_I td {
  background-color: #FEFFBB;
  color: #606060;
}
tr.report_H td {
  color: #a0a0a0;
}

/* KPI module; niet alles even noodzakelijk */
.kpitcol1, .kpicol1 {
  width: 20%;
}
.kpicol2 {
  width: 45%;
}

table.kpidetails {
  width: 100%;
  margin: 0;
  padding: 0;
}
td.kpidetails {
  font-size: 8pt;
  vertical-align: top;
}
.kpiprim_header {
}
.kpisec_heading {
  background-color: ==blockheaderbackgroundcolor==;
  color: ==blockheadercolor==;
  font-size: 1.8em;
  vertical-align: bottom;
  padding: 4px 0 0 15px;
}
.kpiavg {
  color: #fff;
  font-size: 2em;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 80px;
}
.kpiscore {
  width: 50px;
  text-align: right;
}
.kpioms {
  min-width: 300px;
}