/*
Deze CSS is alleen om de layout van Dispatch te bepalen.
Opmaak voor het "Editable" gedeelte is in content.css gedefineerd!
*/
html {
overflow-y: scroll;
}
BODY {
background-image: url(../../images/v103/navbar.jpg);
background-repeat:repeat-x;
background-position:top;
background-color: #f4f4f4;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333;
margin: 0;
margin-bottom: 30px;
}
BODY.popup {
background-image: none;
background-color: #fff;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration:underline;
}
input, select, textarea {
padding: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
IMG {
border: 0;
}
/*
-- BEGIN - Site indeling
*/
#wrapper {
width: 806px;
margin: 0 auto;
}
#navbar {
height: 84px;
position:relative;
}
#navlogo {
background-image: url(../../images/v103/logo.gif);
background-repeat:no-repeat;
background-position:top left;
width: 339px;
height: 98px;
position: absolute;
top: 20px;
left: 30px;
z-index: 2;
}
#navlogo.navlogo-21 {
background-image: url(../../images/v103/logo-demo.gif);
width: 339px;
}
#navlogo.navlogo-51 {
background-image: url(../../images/v103/logo-ontw.gif);
width: 339px;
}
#navomg {
width: 40px;
height: 50px;
line-height: 50px;
position: absolute;
top: 27px;
left: 330px;
color: #000000;
font-size: 36px;
text-align: left;
font-weight: bold;
}
#navtext {
width: 380px;
height: 50px;
line-height: 50px;
position: absolute;
top: 27px;
right: 100px;
color: #fdfdfd;
font-size: 11px;
text-align: right;
font-weight: bold;
}
#navtext a {
color: #fff;
text-decoration:none;
font-weight: bold;
}
#navtext a.noline {text-decoration:none;}
#navtext a:hover {text-decoration:underline;}
#xbert {
height: 50px;
width: 50px;
position: absolute;
top: 27px;
right: 20px;
}
#menucontainer {
position: relative;
float: left;
width: 160px;
left: 0px;
top: 0px;
min-height: 32px;
text-align:right;
font-size: 13px;
color: #333;
}
/** menu container zorgt ervoor dat menu (ook) links blijft staan??? **/
#leftmenu {
position: relative;
float: left;
width: 160px;
text-align:right;
font-size: 13px;
margin-top: 30px;
color: #333;
}
/**leftmenu wordt vervangen door floatmenu**/
#floatmenu {
width: 160px;
top: 0px;
text-align:right;
font-size: 13px;
margin-top: 30px;
margin-bottom: 8px;
color: #333;
}
#leftmenu h2, #floatmenu h2 {
height: 30px;
background-image: url(../../images/v103/menuhead.gif);
background-position:top left;
background-repeat:no-repeat;
font-size: 12px;
margin-bottom: 0;
padding-top: 4px;
}
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 145px;
margin-right: 15px;
}
#leftmenu ul, #floatmenu ul {
margin-right: 15px;
margin-left: 0px;
margin-top: 2px;
margin-bottom: 20px;
}
#leftmenu li, #floatmenu li {
list-style-type:none;
line-height: 13px;
margin:0;
margin-bottom: 6px;
}
#leftmenu a, #floatmenu a {
color: #333;
text-decoration: none;
}
#leftmenu a:hover, #floatmenu a:hover {text-decoration:underline;}
#leftmenu .inactive, #floatmenu .inactive {
xxcolor: #9C9AA2;
}
#content {
border-left: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
border-right: 1px solid #d0d0d0;
float: left;
width: 600px;
padding-left: 18px;
padding-right: 18px;
padding-bottom: 11px;
background-position:top right;
background-repeat:repeat-y;
background-color: #fff;
height: auto !important;
}
#content.static {
width: 600px;
font-size: 12px;
line-height: 18px;
padding: 20px;
padding-top: 0px;
margin-left: 78px;
margin-right: 80px;
}
#content.inlog {
width: 640px;
font-size: 12px;
line-height: 18px;
padding-left: 0px;
padding-right: 0px;
padding-top: 20px;
padding-bottom: 0px;
margin-left: 78px;
margin-right: 80px;
}
#content.static H1 {
margin-left: 0;
}
.textitem {
border: 1px solid #eaeaea;
background-color: #f9f9f9;
padding: 8px;
margin-top: 10px;
margin-bottom: 20px;
font-size: 11px;
color: #555;
}
#content .options {
float: right;
height: 30px;
line-height: 30px;
margin-top: 16px;
margin-right: 11px;
}
#content .options IMG{
margin-left: 5px;
border: none;
}
#content .options A {
text-decoration: none;
}
#content h1 {
margin-top: 20px;
margin-left: 5px;
font-size: 15px;
color: #333;
}
#inloggen {
position: relative;
background-image: url(../../images/da_inlog_592x500.gif);
background-position:top left;
background-repeat:no-repeat;
width: 100%;
height: 400px;
margin: 20px -20px -20px -20px;
font-size: 13px;
}
#inloggen .Userid, #inloggen .Passwd {
position: absolute;
padding: 2px;
width: 130px;
left: 80px;
}
#inloggen .UseridTxt,  #inloggen .Remember, #inloggen .PasswdTxt, #inloggen .wwreset, #inloggen .voorwaarden, #inloggen .SocialMedia {
position: absolute;
font-size: 12px;
color: #444;
border: 0px;
left: 80px;
}
#inloggen .UseridTxt {
top: 10px;
}
#inloggen .Userid {
top: 28px;
}
#inloggen .Remember {
left: 240px;
top: 28px;
}
#inloggen .PasswdTxt {
top: 53px;
}
#inloggen .Passwd {
top: 71px;
}
#inloggen .submit1 {
position: absolute;
top: 71px;
left: 240px;
width: 84px;
height: 21px;
margin:0;
}
#inloggen .wwreset {
top: 96px;
}
#inloggen .voorwaarden{
position: absolute;
top: 96px;
left: 240px;
width: 320px;
height: 25px;
cursor: pointer;
}
#inloggen .SocialMedia {
left: 600px;
top: 360px;
}
#warning {
position:absolute;
top: 150px;
left: 80px;
padding: 20px;
padding-left: 60px;
border: 2px solid #ccc;
background-color: #f8f8f8;
color: #555;
width: 250px;
margin: 0 auto;
font-weight: normal;
background-image: url(../../images/v103/icons/info_grey.gif);
background-repeat: no-repeat;
background-position:left center;
background-position: 20px;
font-size: 11px;
}
#LayerWarning {
position:absolute;
top: 150px;
left: 80px;
padding: 20px;
padding-left: 60px;
border: 2px solid #ccc;
background-color: #f8f8f8;
color: #555;
width: 280px;
margin: 0 auto;
font-weight: bold;
background-image: url(../../images/v103/icons/info_grey.gif);
background-repeat: no-repeat;
background-position:left center;
background-position: 20px;
font-size: 11px;
}
#warningcaps {
position:absolute;
top: 150px;
left: 370px;
padding: 20px;
padding-left: 60px;
border: 2px solid #ccc;
background-color: #f8f8f8;
color: #555;
width: 160px;
margin: 0 auto;
font-weight: normal;
background-image: url(../../images/v103/icons/info_grey.gif);
background-repeat: no-repeat;
background-position:left center;
background-position: 20px;
font-size: 11px;
}
#footer {
width: 635px;
margin-top: 5px;
margin-left: 160px;
font-size: 10px;
color: #999;
line-height: 20px;
display: block;
clear: both;
}
#footer a {
text-decoration: none;
color: #bcbcbc;
}
.nowrap {
display: block;
font-weight: bold;
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
.trunc {
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
}
.mut * {
filter:alpha(opacity=50);
}
textarea {
resize: none;
}
#nieuws h1 {
font-size: 1em;
margin: 0px;
padding: 0px;
text-decoration: underline;
margin-bottom: 12px;
}
#nieuws h2 {
font-size: 1em;
margin: 0px;
padding: 0px;
margin-top: 8px;
}
#nieuws h3 {
font-size: 1em;
font-weight: normal;
text-decoration: underline;
margin: 0px;
padding: 0px;
margin-top: 8px;
}
#nieuws ul, #nieuws ol {
margin-top: 0px;
margin-bottom: 16px;
}
#nieuws li {
margin-top: 2px;
}
#nieuws {
font-size: 1em;
}
#layerPopup {
display: none;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
/*width: 1224px;*/
/*height: 800px;*/
margin: auto;
background-color: white;
padding: 10px;
z-index: 1002;
}
#layerPopup .popout {
position: absolute;
top: 20px;
right: 220px;
cursor: pointer;
margin: auto;
}
#layerFoto .close {
font-weight: bold;
position: absolute;
top:10px;right:10px;
cursor: pointer;
background-color: #f8f8f8;
}
#layerFotoEditor {
position: absolute;
left: 0px;
top: 0px;
/*width: 1224px;*/
/*height: 800px;*/
border: 10px solid lightgrey;
background-color: lightgrey;
}
#layerFotoEditor .close {
font-weight: bold;
position: absolute;
top:0px;
right:0px;
cursor: pointer;
background-color: lightgrey;
}
#layerFotoEditor .colorbutton {
display: inline-block;
width: 18px;
height: 18px;
padding: 0px;
margin: 1px;
font-size: 18px;
color: #000;
}
#layerFotoEditor .split {
display: block;
height: 6px;
}
#layerFotoEditor .colorbutton.selected:before {
/*border-radius: 50%;*/
display: block;
content: "\2714";
_font-weight: bold;
font-size: 17px;
padding: 0px;
padding-top: 1px;
line-height: 17px;
font-family: Arial;
width: 18px;
height: 17px;
margin: -1px;
border: 1px solid #000;
text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}
#layerFotoEditor input, #layerFotoEditor select {
margin-top: 10px;
}
#toolControl {
clear: left;
}
#layerFotoEditor .undoImg {
cursor: pointer;
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
background: url(../../images/v103/icons/undo.png) no-repeat scroll top center;
}
#layerFotoEditor .redoImg {
cursor: pointer;
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
background: url(../../images/v103/icons/redo.png) no-repeat scroll top center;
}
.touch {
-webkit-overflow-scrolling:touch;
xxoverflow-x: 'hidden';
xxoverflow-y: 'scroll';
}
#layerBackground {
display: none;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
//width: 100%;
//height: 100%;
//width: 400px;
//height: 200px;
//margin: auto;
background-color: #000;
opacity: 0.7;
filter:alpha(opacity=70);
z-index: 1001;
}
#layerLoading {
display: none;
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 114px;
margin: auto;
text-align: center;
z-index: 1002;
}
#layerMain {
font-size: 11px;
}
#layerImg {
float: left;
margin-right: 8px;
}
#layerClose {
float: right; cursor: pointer; font-weight: bold;
}
.link {
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
#floatmenu li .popout, #floatmenu h2 .popout {
display: none;
position: absolute;
margin-top: 1px;
left: 145px;
}
#floatmenu li:hover .popout, #floatmenu h2:hover .popout {
display: inline;
}
.tabs {
width: 600px;
table-layout: fixed;
border-collapse: collapse;
}
.tabs tr:not(:empty) + tr {
height: 16px;
}
.tabs .tab {
background-color: #f4f4f4;
text-align: center;
/* kleur op tabs wordt overgenomen van body/link, kan evt worden overruled:
color: black;
*/
line-height: 22px;
font-family: Verdana;
font-size: 11px;
padding-top: 2px;
border-bottom: 1px solid #a0a0a0;
}
.tabs .tab:not(.active):not(.disabled) {
cursor: pointer;
}
.tabs .tab:not(.active):not(.disabled):hover {
background-color: #e0e0e0;
text-decoration: underline;
}
.tabs .tab.active {
cursor: default;
background-color: white;
border-top: 1px solid #a0a0a0;
border-right: 1px solid #a0a0a0;
border-left: 1px solid #a0a0a0;
border-bottom: 1px solid #fff;
font-weight: bold;
}
.tabs .tab.disabled {
cursor: default;
color: #c0c0c0;
}
.footer-text {
clear: both;
margin-top: 20px;
border-top: 1px solid #bbbbbb;
font-size: 11.25px;
}
.handleidingen {
font-weight: bold;
font-size: 11px;
margin-top: 16px;
}
ul.checklist {
margin:0; padding: 0;
}
ul.checklist li {
list-style: none;
color: green;
}
ul.checklist li::before {
content: '\2714';
padding: 0px 4px;
}
ul.checklist li.err {
color: red;
}
ul.checklist li.err::before {
content: '\2718';
}
body:has(#floatmenu > h2):has(#navlogo.navlogo-21, #navlogo.navlogo-51) > :first-child::before {
display: block;
height: 32px;
width: 100%;
background-color: #ffffae;
border-top: 1px solid #333;
margin: auto;
position: fixed;
color: #333;
height: 18px;
font-family: monospace;
font-size: 8pt;
font-weight: bold;
vertical-align: middle;
line-height: 18px;
text-align: center;
letter-spacing: 0.5pt;
padding: 0px 4px;
text-wrap: nowrap;
overflow: hidden;
left: 0;
top: auto;
bottom: 0;
z-index: 9999;
}
body:has(#floatmenu > h2):has(#navlogo.navlogo-21) > :first-child::before {
content: 'DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO DEMO';
}
body:has(#floatmenu > h2):has(#navlogo.navlogo-51) > :first-child::before {
content: 'ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL ONTWIKKEL';
}
body:has(#floatmenu > h2):has(#navlogo.navlogo-21, #navlogo.navlogo-51) #footer {
margin-bottom: 20px;
}
#layerLoading.progress img:nth-of-type(2) {
display: none;
}
#layerLoading div.progress {
display: none;
}
#layerLoading.progress div.progress {
display: inline-block;
width: 400px;
height: 24px;
background-color: #0004;
position: relative;
color: white;
font-size: 16px;
font-weight: bold;
font-family: monospace;
--progress-width: 0%;
}
#layerLoading.progress div.progress:before {
position: absolute;
content: '';
display: block;
width: var(--progress-width);
left: 0;
height: 100%;
background-color: #1285C870;
transition: width 0.5s linear;
}