@font-face {
     font-family: Cabin;
     src: url('Cabin-Regular.ttf');
}
@font-face {
     font-family: Cabin;
     src: url('Cabin-Bold.ttf');
     font-weight: bold;
}
/*@font-face {
     font-family: Cabin;
     src: url('Cabin-Italic.ttf');
     font-style: italic;
}
@font-face {
     font-family: Cabin;
     src: url('Cabin-BoldItalic.ttf');
     font-weight: bold;
     font-style: italic;
}*/
@font-face {
     font-family: NotoSans;
     src: url('NotoSans-Regular.ttf');
}
@font-face {
     font-family: NotoSans;
     src: url('NotoSans-Bold.ttf');
     font-weight: bold;
}
@font-face {
     font-family: NotoSans;
     src: url('NotoSans-Italic.ttf');
     font-style: italic;
}

@media print {
  .no-print, .no-print * {display: none !important;}
}

/* basis */
.body_normal {width: 100%; margin: 0; padding: 0; font-family: NotoSans,Arial; font-size: 16px;}
div, li, table, td, th, tr {margin: 0; padding: 0;}
img {border: none;}
ul, ol {margin: 0 20px; padding: 0;}
table, td, th, tr {vertical-align: top; text-align: left; align: left;}
th {height: 4px;}
table {border-collapse: collapse; border-spacing: 0; empty-cells: show;}

.tabel td,.tabel th {padding: 3px 10px;}
.tabel tfoot th {padding: 0px 10px; font-size: 0; line-height: 0; height: 2px;}

.footer {}
.wrapper-mobile .content .tabel {width: 100%;}

.link-default:link, .link-default:visited, .link-default:hover,
.link-mail:link, .link-mail:visited, .link-mail:hover,
.link-inside:link, .link-v:visited, .link-inside:hover,
.link-outside:link, .link-outside:visited, .link-outside:hover,
.link-download:link, .link-download:visited, .link-download:hover {color: #EFA333; text-decoration: none;}
.link-meer {padding-right: 38px; background: url(link-meer.png) no-repeat top 2px;}

.__buttonBar input, .__buttonBar button {margin-bottom: 12px;}
.buttonBarMobile {margin-bottom: 20px;}

.robMenu {position: absolute; z-index: 1000; outline: 0;}
 
.spacer {width: 20px;}

fieldset {display: inline-block;}
label {cursor: pointer;}
.pia_action {font-size: 80%; padding: 0px 8px 0px 4px;}

.veldFout {padding: 4px 10px 10px 0px; color: #CD0A0A; font-size: 0.9em; display: inline-block;}


/*layout */
.body_normal #contentWrapper {max-width: 1400px; min-width: 600px; margin: auto; padding: 0 30px;}
@media all and ( min-width: 1460px ) { .body_normal #contentWrapper {max-width: 1400px; min-width: 600px; margin: auto; padding: 0;} }
.center_menu {max-width: 1400px; min-width: 600px; margin: auto;}
.menu_lijn_onder {background-color: #262626;}
.body_mobile #contentWrapper {width: calc(100% - 24px); padding: 130px 12px;}
.content {padding: 70px 0 20px 0;}
.content p { line-height: 200%; margin: 0;}
.content-mobile {padding: 0 0 30px 0;}

.__buttonBar {margin-bottom: 30px;}

.prefoto {margin-bottom: 42px; width: 100%; height: auto;}

/* heading */
.title {text-transform: uppercase; font-family: Cabin; font-size: 35px; font-weight: bold; margin: 0;}
h1 {text-transform: uppercase; color: #262626; font-family: Cabin; font-size: 35px; font-weight: bold; margin: 0;}
h2 {color: #262626; font-family: Cabin; font-size: 33px; font-weight: bold; margin: 20px 0 0 0;}
h3 {color: #262626; font-size: 30px; font-family: Cabin; font-weight: bold; margin: 20px 0 0 0;}
h4 {color: #262626; font-size: 1.6em; font-family: Cabin; font-weight: bold; margin: 0;}
h5 {color: #262626; font-size: 1.2em; font-family: Cabin; font-weight: bold; margin: 0;}
h6 {color: #262626; font-size: 1em; font-family: Cabin; font-weight: bold; margin: 0;}
.body_mobile .title {font-family: Cabin; font-size: 2em;}
.body_mobile h1 {font-family: Cabin; font-size: 2em;}
.body_mobile h2 {font-family: Cabin; font-size: 1.7em;}
.body_mobile h3 {font-family: Cabin; font-size: 1.4em;}


blockquote {background: #E0F1F8 url(quote.png) no-repeat 30px 30px; border-radius: 30px; margin: 30px 0; padding: 30px;}
blockquote p {margin: 0 0 0 50px;}
blockquote p strong {font-size: 2em; color: #262626;}


/* afrondingen */
.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:3px}
.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:3px}
.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:3px}
.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:3px}

/* design button (moet boven JQuery UI fake !!!*/
.ui-button {outline: none; font-size: 1.1em; padding: 4px 8px; color: white; font-weight: normal; background-color: #262626; border: solid 1px #262626;}
.action-button {padding: 0 4px; margin: 1px 8px 1px 0; border: none;}
.action-button .pia_action {padding-left: 24px; font-weight: normal;}
.action-linebreak {display: block; margin-bottom: 4px;}

/* als menu-buttons afwijken van gewone buttons, bv: background-color: red; border: solid 1px red; */
.ui-menubar-link.ui-button {}

/* design menu Moet voor de fake!!*/
.body_normal #menu, .body_normal #menu ul {background-color: white;} 
#menu ul.ui-menu {background-color: white;}
#mobMenu1001 ul.ui-menu {background-color: #262626;}
#mobMenu1001 .itemDepth {background-color: black;}

/* onderstaande voor 'normale' menus */
.ui-menu-item {color: black;}
.ui-menu-item a {padding: 4px 8px; font-weight: normal; color: black;}
.ui-menu-item .ui-state-hover,.ui-menu-item .ui-state-focus {background-color: #262626; color: white;}
.ui-menu-item a.ui-state-active, .ui-menu-item.ui-state-active a {color: #55d171;}

.ui-tabs-anchor, .ui-tabs-anchor:link, .ui-tabs-anchor:hover, .ui-tabs-anchor:visited {color: white;}
.ui-state-default {background-color: #262626; color: white;}
.ui-state-hover {background-color: #262626; color: #55d171;}
.ui-state-active {background-color: #262626; color: #55d171;}
.ui-state-highlight {border: 1px solid #C5B62E;	background: #FFEB3B;	color: #363636;}
.ui-state-qr {border: solid 1px darkgreen;	background: lightgreen;	color: black;}
.ui-state-errorr {border: 1px solid #cd0a0a; background: #fef1ec; color: #cd0a0a;}
.ui-state-error {border: 1px solid #cd0a0a; background: #FD9D96; color: #000000;}
.ui-state-disabled {opacity: .35; filter:Alpha(Opacity=35);	background-image: none;}
.ui-tabs-active {background-color: #ADEBBA;}
.ui-tabs-active .ui-tabs-anchor, .ui-tabs-active .ui-tabs-anchor:link, .ui-tabs-active .ui-tabs-anchor:hover, .ui-tabs-active .ui-tabs-anchor:visited {color: #262626;}


/* */
.ui-menubar {list-style: none outside none; white-space: nowrap;}
.ui-menubar-item {float: left;}

#mainMenuLeft {margin-top: 30px; margin-bottom: 6px; margin-right: 0; text-align: left;}
/* linker / boven menu */
#mainMenuLeft .ui-menubar-item  {margin: 18px 0 0 10px; background-color: rgba(0,0,0,0) !important;}
#mainMenuLeft .ui-menubar-item .ui-button {font-family: Cabin; font-weight: bold; text-transform: uppercase; border: 0px; color: #262626; background-color: rgba(0,0,0,0) !important; display: inline-block;}
#mainMenuLeft .ui-menubar-item .ui-button:hover {color: #55D171;}
/*#mainMenuLeft .ui-menu-item .ui-button {border: 0px; background-color: yellow;}
#mainMenuLeft .ui-menu-item .ui-button:hover {border: 0px; background-color: light-blue;}*/
/*#mainMenuLeft .ui-menubar-item {margin-bottom: -12px;}*/ /* negatieve margin-bottom ter compensatie van die van hier onder */
#mainMenuLeft .ui-menubar-item .ui-button {margin-bottom: 2px;}
#mainMenuLeft .ui-menu-item .ui-button {border: 0px; background-color: #262626 !important; margin: 12px 0; display: block; color: white;}
#mainMenuLeft .ui-menu-item .ui-button:hover {border: 0px; color: #55D171;}
/* rechter / onder menu */
#mainMenuRight {margin: 12px 0px; text-align: left;}

/* hoofdmenu met pijl */
.mainMenuMenu.ui-menu {border: none; background: url(menu_back.png) no-repeat center top;}
.mainMenuMenu .ui-menu-item:first-child {margin-top: 30px;}
.mainMenuMenu .ui-menu-item .ui-button {display: block; color: white; padding: 0 20px;}
.mainMenuMenu .ui-menu-item .ui-button:hover {color: #55D171;}


#mainMenuRight li {height: 40px;  margin-bottom: -6px;}
#mainMenuRight .ui-menubar-item .ui-button {padding-top: 8px; font-family: Cabin; font-weight: bold; text-transform: uppercase; border: 0px; background-color: #262626; display: inline-block;}
#mainMenuRight .ui-menu-item .ui-button {padding-top: 0; height: 25px;}
#mainMenuRight .ui-menubar-item .ui-button:hover {border: 0px; color: #55D171;}
/* vervolg menus */
#mainMenuRight .ui-menu {border: none; background-color: #262626;}
#mainMenuRight .ui-menu-item .ui-button {border: 0px; background-color: #262626; margin: 12px 0; display: block; color: white;}
#mainMenuRight .ui-menu-item .ui-button:hover, #mainMenuRight .ui-menu-item.ui-state-active .ui-button {border: 0px; color: #55D171;}

/* alle mainmenus */
.ui-widget-content.ui-menu-divider {height: 1px;}
.ui-widget-content.ui-menu-divider hr {border: solid 1px white; background-color: white; height: 1px;}
/* mobile menu */
#mobMenu1001 .ui-menu-item a, #mobMenu1001 .ui-menu-item a:link, #mobMenu1001 .ui-menu-item a:visited, #mobMenu1001 .ui-menu-item a:hover {border: 0px; font-size: 1em; margin: 10px 0; display: block; color: white;}
#mobMenu1001 .ui-menu-item {float: left; width: 100%;}
#mobMenu1001 .ui-menu-item:last-child {background: none;}

/* JQuery UI fake */
.ui-button {cursor: pointer; text-decoration: none;}
.voorButton {display: block;}
.ui-icon {width: 16px; height: 16px; position: absolute;}
/* ROB: sommige icons zijn wit en zie je nu niet */
.PIA_simpleIcon {display: inline-block; position: relative;} /* deze moet na ui-icon */
.ui-button-text-icon-primary .ui-button-text {padding-left: 24px;}
.ui-button-icon-primary {margin-right: 8px;}
.ui-button-text-icon-secondary {padding-right: 32px;}
.ui-button-icon-secondary {margin-left: 8px;}
/* ROB: dialoog window: Design er uit halen en mooi maken */
.ui-dialog {position: absolute;	top: 0;	left: 0;	outline: 0;}
.ui-dialog .ui-dialog-titlebar {padding: .7em 1em; position: relative;}
.ui-dialog .ui-dialog-title {margin: .1em 0; white-space: nowrap;	width: 90%;	overflow: hidden;	text-overflow: ellipsis;}
.ui-dialog .ui-dialog-titlebar-close {position: absolute;	right: .3em; top: 50%; width: 21px;	margin: -10px 0 0 0; padding: 1px; height: 20px; font-size: 0;}
.ui-dialog .ui-dialog-content {	position: relative;	border: 0; padding: .5em 1em;	background: none;	overflow: auto;}
.ui-dialog .ui-dialog-buttonpane {text-align: left;	border-width: 1px 0 0 0; background-image: none; margin-top: .5em; padding: .3em 1em .5em .4em;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: right;}
.ui-dialog .ui-dialog-buttonpane button {	margin: .5em .4em .5em 0;	cursor: pointer;}
.ui-dialog .ui-resizable-se {width: 12px; height: 12px;	right: -5px;bottom: -5px;	background-position: 16px 16px;}
.ui-draggable .ui-dialog-titlebar {cursor: move;}
.ui-widget-overlay {position: fixed; top: 0; left: 0;	width: 100%; height: 100%;}
.ui-widget-content {border: 1px solid #aaaaaa; background-color: #ffffff;	color: #222222;}
.ui-widget-header {background-color: #262626; color: white; font-weight: bold;}

.algemene-knop {background: url(algemene-knop.png) no-repeat; width: 171px; height: 54px; border: none; font-family: AmaticSC; font-size: 34px; font-weight: bold; color: #52D472;}

/* design menu Moet na de fake!!*/
#mainMenuLeft {background-color: rgba(0,0,0,0);}

.content img {border-radius: 3px;} 
.content-mobile img {border-radius: 3px;} 
.widget-area-content {}

.widget {}
.widget a {text-decoration: none;}

.widget-kruimelpad {font-size: 14px; font-family: font-family: Cabin; margin-bottom: 16px;}
.widget-kruimelpad span {color: #262626;}
.widget-kruimelpad a {text-decoration: none;}
.widget-kruimelpad a,.widget-kruimelpad a:link, .widget-kruimelpad a:visited {color: #ED9C0F; margin-right: 12px;}
.widget-kruimelpad a:hover {color: #555555;}

.widget-menublok {font-size: 16px; font-family: Cabin; font-weight: bold; text-transform: uppercase;}
.widget-menublok ul {list-style: none inside; margin: 0;}
.widget-menublok li {padding: 14px 0 19px; background: url(menublok-devider.png) no-repeat left bottom;}
.widget-menublok li:last-child {background-image: none;}
.widget-menublok a,.widget-menublok a:link, .widget-menublok a:visited {color: #262626; display: block; background: url(kenmerken-pijl.png) no-repeat top right;}
.widget-menublok a:hover {color: #ED9C0F;}
.menublok-current a, .menublok-current a:link, .menublok-current a:visited, .menublok-current a:hover {color: #ED9C0F;}

.widget-actueel-title {background-color: #262626; border-top-left-radius: 30px; border-top-right-radius: 30px; color: white; font-size: 20px; margin: 0 -30px 30px -30px; padding: 20px 0 20px 50px; font-weight: bold; text-align: left;}
.widget-actueel {font-size: 16px; margin-right: 20px;}
.widget-actueel ul {list-style: none inside; margin: 0;}
.widget-actueel li {padding: 12px 0; background: url(menublok-devider.png) no-repeat left bottom;}
.widget-actueel li:last-child {padding: 6px 0; background-image: none;}
.widget-actueel a,.widget-actueel a:link, .widget-actueel a:visited {color: #262626;}
.widget-actueel a:hover {color: #52D472;}
.widget-actueel-dt {color: #52D472; font-weight: bold;}
.widget-actueel-unpublished {font-size: 0.8em; color: black; font-weight: normal;}
.widget-actueel-titel {font-weight: bold; padding-bottom: 12px;}

/* Actueel = Nieuws */
.actueel {cursor: pointer; float: left; height: 249px; margin-bottom: 40px; margin-right: 40px; max-width: calc(33% - 40px); overflow: hidden;}
.actueel-div-img {height: 90px; overflow: hidden;}
.actueel-img {border-top-left-radius: 30px; border-top-right-radius: 30px; width: 100%; height: auto;}
.actueel-datum {font-weight: bold; color: #52D472; padding: 8px 0;}
.actueel-titel {color: #262626; margin-bottom: 12px;}
.actueel-par1 {}
.actueel-leesmeer {}
.actueel-par2 {}
.actueel-bewerk {float: right;}

/* tabs werking */
.ui-helper-clearfix:before, .ui-helper-clearfix:after {content: "";	display: table;	border-collapse: collapse;}
.ui-helper-clearfix:after {	clear: both;}
.ui-helper-clearfix {	min-height: 0; /* support: IE7 */}
.ui-tabs {position: relative;}
.ui-tabs .ui-tabs-nav {margin: 0;} /*  display: inline-block; width: calc(100% - 0.5em); */ 
.ui-tabs .ui-tabs-nav li {list-style: none;float: left;position: relative;top: 0;border-bottom-width: 0;padding: 0;white-space: nowrap;}
.ui-tabs .ui-tabs-nav li a {float: left;padding: .5em 1em;text-decoration: none;}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,.ui-tabs .ui-tabs-nav li.ui-state-disabled a,.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {cursor: text;}
.ui-tabs .ui-tabs-nav li a,.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {cursor: pointer;}
.ui-tabs .ui-tabs-panel {display: block;border-width: 0;background: none;}
/* tabs design */
.ui-tabs {padding: 0;}
.ui-tabs .ui-tabs-nav {padding: 0 0 0 8px;}
.ui-tabs .ui-tabs-nav li {margin: 0 2px 0 0;}
.ui-tabs .ui-widget-header {border: none;	background-color: white;}
.ui-tabs.ui-widget-content {border: none;	background-color: white;}
.ui-tabs .ui-tabs-panel {display: block; border: solid 1px #aaaaaa; padding: 1em 1.4em;}

/* overlay werking */
.ui-widget-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
/* overlay design */
.ui-widget-overlay {background: #aaaaaa url(ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .8; filter: Alpha(Opacity=80);}

/* datepicker */
.ui-datepicker {width: 17em;padding: .2em .2em 0;display: none;}
.ui-datepicker .ui-datepicker-header {position: relative;padding: .2em 0;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {position: absolute;top: 2px;width: 1.8em;height: 1.8em; text-indent: -10000px;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {top: 1px;}
.ui-datepicker .ui-datepicker-prev {left: 2px;}
.ui-datepicker .ui-datepicker-next {right: 2px;}
.ui-datepicker .ui-datepicker-prev-hover {left: 1px;}
.ui-datepicker .ui-datepicker-next-hover {right: 1px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {display: block;position: absolute;left: 50%;margin-left: -8px;top: 50%;margin-top: -8px;}
.ui-datepicker .ui-datepicker-title {margin: 0 2.3em;line-height: 1.8em;text-align: center;}
.ui-datepicker .ui-datepicker-title select {font-size: 1em;margin: 1px 0;}
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {width: 49%;}
.ui-datepicker table {width: 100%;font-size: .9em;border-collapse: collapse;margin: 0 0 .4em;}
.ui-datepicker th {padding: .7em .3em;text-align: center;font-weight: bold;border: 0;}
.ui-datepicker td {border: 0;padding: 1px;}
.ui-datepicker td span, .ui-datepicker td a {display: block;padding: .2em;text-align: right;text-decoration: none;}
.ui-datepicker .ui-datepicker-buttonpane {background-image: none;margin: .7em 0 0 0;padding: 0 .2em;border-left: 0;border-right: 0;border-bottom: 0;}
.ui-datepicker .ui-datepicker-buttonpane button {float: right;margin: .5em .2em .4em;cursor: pointer;padding: .2em .6em .3em .6em;width: auto;overflow: visible;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {float: left;}
.ui-datepicker.ui-datepicker-multi {width: auto;}
.ui-datepicker-multi .ui-datepicker-group {float: left;}
.ui-datepicker-multi .ui-datepicker-group table {width: 95%;margin: 0 auto .4em;}
.ui-datepicker-multi-2 .ui-datepicker-group {width: 50%;}
.ui-datepicker-multi-3 .ui-datepicker-group {width: 33.3%;}
.ui-datepicker-multi-4 .ui-datepicker-group {width: 25%;}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {border-left-width: 0;}
.ui-datepicker-multi .ui-datepicker-buttonpane {clear: left;}
.ui-datepicker-row-break {clear: both;width: 100%;font-size: 0;}
.ui-slider {position: relative;text-align: left;}
.ui-slider .ui-slider-handle {position: absolute;z-index: 2;width: 1.2em;height: 1.2em;cursor: default;}
.ui-slider .ui-slider-range {position: absolute;z-index: 1;font-size: .7em;display: block;border: 0;background-position: 0 0;}
.ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range {filter: inherit;}
.ui-slider-horizontal {height: .8em;}
.ui-slider-horizontal .ui-slider-handle {top: -.3em; margin-left: -.6em;}
.ui-slider-horizontal .ui-slider-range {top: 0; height: 100%;}
.ui-slider-horizontal .ui-slider-range-min {left: 0;}
.ui-slider-horizontal .ui-slider-range-max {right: 0;}
.ui-slider-vertical {width: .8em; height: 100px;}
.ui-slider-vertical .ui-slider-handle {left: -.3em; margin-left: 0; margin-bottom: -.6em;}
.ui-slider-vertical .ui-slider-range {left: 0; width: 100%;}
.ui-slider-vertical .ui-slider-range-min {bottom: 0;}
.ui-slider-vertical .ui-slider-range-max {top: 0;}



.ui-icon-carat-1-e {background-position: -32px -16px;}
.ui-icon-triangle-1-e {background-position: -32px -16px;}
.ui-icon-triangle-1-w {background-position: -96px -16px;}
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-circle-arrow-n {background-position: -160px -192px;}
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-folder-collapsed {background-position: 0 -96px;}
.ui-icon-folder-open {background-position: -16px -96px;}
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-wrench { background-position: -176px -112px; }

/*.ui-icon {background-image: url("icons_ffffff.png");}*/
#menu .ui-state-focus .ui-icon {background-image: url("icons_ffffff.png");}
#kalender .ui-icon {background-image: url("icons_0080ff.png");}
.ui-icon {background-image: url("icons_0080ff.png");}
.action-button .ui-icon {background-image: url("icons_ffffff.png");}
#mainMenuLeft .ui-icon.ui-icon-triangle-1-s  {background-image: url("menu-pijl.png"); background-position: 0 0; width: 17px; height: 17px; margin-top: 2px;}
#mainMenuRight .ui-icon.ui-icon-triangle-1-s, #mainMenuRight .ui-icon.ui-icon-carat-1-e  {background-image: url("menu-pijl-inv.png"); background-position: 0 0; width: 17px; height: 17px; margin-top: 2px;}
#mainMenuRight .ui-menubar-link.ui-button-text-icon-secondary {padding-right: 42px;}

/* werking menu */
.ui-menu {z-index: 1000; outline: 0;}
ul.ui-menu, ul.mainMenu {list-style-type: none; position: absolute;}
#mainMenuLeft, #mainMenuRight {position: static;}
.ui-menu-item, .ui-menu-item a {cursor: pointer; text-decoration: none; white-space: nowrap; display: block;}
.ui-menu-icon {float: right; position: static;}

/* design tabellen */
.tabel {}
.tabel .ui-widget-content {background-color: #f2f2f2 !important; border: solid 1px #dddddd;}
.mobileTabel.tabel .ui-widget-content td {background-color: #f2f2f2 !important;}
.mobileKlasTabel {border: solid 1px #f2f2f2;}
.tabel th {background-color: #F2F2F2; border-top: solid 1px #DDDDDD; border-left: solid 1px #DDDDDD; border-right: solid 1px #DDDDDD;}
.tabel td {background-color: white; color: #262626; border-left: solid 1px #DDDDDD; border-right: solid 1px #DDDDDD;}
.tabel .ui-state-default {background-color: white; color: #262626;}

.tabel .ui-state-default.action-button, .tabel .ui-state-default.action-button:link, .tabel .ui-state-default.action-button:visited {color: white; background-color: #262626;}
.tabel .ui-state-default.action-button:hover {color: #262626; background-color: #ED9C0F;}

.mobileKlasTabel td, .mobileKlasTabel tr {border: solid 0px rgba(0,0,0,0);}
.mobileKlasA {position: relative;}}

.album tr {cursor: pointer;}
.album-aantal {font-size: 0.8em;}
.album-datum {font-size: 0.8em;}
.album-tekst {}

.actueel-par1 ul {
  list-style-position: inside; 
  overflow: hidden 
}
/* JQuery UI fake einde */

/* page35 */
.focusKlas {border: 3px solid red;}

/* paginering */
.paginering {
}
.paginering_a, .paginering_a:link, .paginering_a:visited {
  background-color: #ed9b0f;
  border: solid 0px #cccccc;
  width: 30px;
  height: 30px;
  padding: 3px 3px;
  border-radius: 3px;
  cursor: pointer;
  color: black;
  margin: 0 1px 0 0;
  text-decoration: none;
  font-weight: normal;
  display: inline-block;
  font-size: 1.3em;
  color: white;
  text-align: center;
}
.paginering_a:hover {
  cursor: pointer;
}
.paginering-inactief, .paginering-inactief:link, .paginering-inactief:visited {
  cursor: default;
}
.paginering-huidig, .paginering-huidig:link, .paginering-huidig:visited {
  cursor: default;
  text-decoration: underline;
}

/* mobile */
.body_mobile {width: 100%; margin: 0; padding: 0; font: 1em Verdana;}

/* ROB: Mobiele menu bevat nu blij uitklaplijn inline-CSS top: 12px dat moet top: -12px worden. */
/* ROB: Mobiele hoofdmenu icoon is niet goed. Kan ook opgelost met kleur van de menubar!! */
/* ROB: Mobiele menu; overlay werkt nu, maar als je daar op klikt vouwt menu niet mooi in. */
.body_mobile #menu {font-size: 1.2em;}
.body_mobile .main_menu, .body_mobile .main_menu .ui-widget-header {background-color: white;}
.mobileUitklapLijn .ui-icon {background-image: url("menu-pijl-inv.png"); background-position: 0 0; width: 17px; height: 17px; margin-top: 4px;}

.mobileMenu {
  width: auto;
  text-align: left;
  font-size: 150%;
}
.mobileMenu select {
  width: 120%;
  background: transparent;
  border: none;
  overflow: hidden;
  -webkit-appearance: none;
}

.ui-accordion .ui-accordion-header {display: block;cursor: pointer;position: relative;margin-top: 2px;padding: .5em .5em .5em .7em;min-height: 0; /* support: IE7 */}
.ui-accordion .ui-accordion-icons {padding-left: 2.2em;}
.ui-accordion .ui-accordion-noicons {padding-left: .7em;}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {padding-left: 2.2em;}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {position: absolute;left: .5em;top: 50%;margin-top: -8px;}
.ui-accordion .ui-accordion-content {padding: 1em 2.2em;border-top: 0;overflow: auto;}


/* page18 narrow casting */ 
.tip_message ol {list-style-type: decimal;}
.tip_message ul {list-style-type: disc;}
.tip_message ol li, .tip_message ul li {display: block;}

/* voor banners die met de ckeditor plugin zijn gemaakt */ 
.banners {display: inline-block;}
.banner div {vertical-align: top;}
.banner_title {font-weight: bold;}
.autoForm .banners {
  border: solid 1px #DDDDDD;
  background-image: url(rbwidget1_txt.png);
  background-repeat: no-repeat;
  margin: 0;
  padding: 0 0 0 60px;
}
.autoForm .widget1_container {
  display: inline-block;
  float: left;
}
.autoForm .widget1_container_clearL {
  clear: left;
}
.widget1_container div {
  border: none;
}

/* Om duidelijk te hebben dat er een input-veld is voor de ckeditor */
.cke_editable div {
  min-width: 20px;
  min-height: 10px;
  border: solid 1px #DDDDDD;
}

/* om in klasselectieschermen aan te geven welke geselectterd is */
.label_focus {
  text-decoration: underline;
}

/* voor de bxslider */
.bxslider {
  margin: 0;
 }
.autoForm .bxslider {
  border: solid 1px #DDDDDD;
  background-image: url(rbslider_txt.png);
  background-repeat: no-repeat;
  margin: 0;
  padding: 0 0 0 60px;
  list-style-type: none;
}
.autoForm .bxslider li img {
  max-width: 70px;
  max-height: 70px;
  width: auto;
  height: auto;
  margin: 0;
}
.autoForm .bxslider li {
/*  border: solid 1px blue;*/
  display: inline;
  width: 70px;
  height: 70px;
  margin-right: 20px;
  padding: 4px 0;
}

/* nodig voor elk formulier met ckediter veld */
.auto_ckeditor {min-width: 100px;}


.ytplayer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

/* class_user_page nu niet gebruikt */ 
.ytplayer iframe,
.ytplayer object,
.ytplayer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* prikbord */
.prikbord .item {
    float: left;
    margin: 20px;
}
.prikbord_mobile .item {
    margin: 0 0 20px 0;
}
.prikbord .sticky {
    width: 380px;
    padding: 30px 30px 40px 40px;
}
.prikbord_mobile .sticky {
    max-width: 100%;
    margin-right: 6px;
    padding: 20px 20px 30px 30px;
}
.sticky {
    font-family: Verdana, Arial;
    font-size: 1.2em;
}
.sticky_0 {
    background: url(sticky-basis+2.png);
    background-size: 100% 100%;
}
.sticky_1 {
    background: url(sticky-basis.png);
    background-size: 100% 100%;
}
.sticky_2 {
    background: url(sticky-basis-2.png);
    background-size: 100% 100%;
}
.sticky_3 {
    background: url(sticky-basis+2.png);
    background-size: 100% 100%;
}
.prikbord .foto {
  max-width: 380px;
  height: auto;
  margin-bottom: -2px;
  border: solid 1px #cccccc;
}
.foto-schaduw {
    background: url(schaduw.png);
    background-size: 100% 100%;
    padding: 0 10px 6px 12px;
}
.prikbord .fotoTitel, .prikbord_mobile .fotoTitel {
  max-width: 380px;
  display: block;
  text-align: center;
  padding: 6px 10px;
  color: white;
  background-color: #555555;
}
.prikbord_mobile .foto {
  max-width: 98%;
  margin-right: 6px;
  height: auto;
}

/* om knoppen van pagina's (bv klas overzicht) retchs boven een lijst uit te kunnen lijnen */ 
.keep-together {display: inline-block;}
/* voor page12 en de implementatie van sizeablke tabellen */
.tabel_overflow_hidden {table-layout: fixed; width: 100%;}
.tabel_overflow_hidden td, .tabel_overflow_hidden th {overflow: hidden; text-overflow: ellipsis;}

/* widgets oude stijl */
.user_page_widget {
  padding: 8px;
  margin: 10px 0;
}
.user_page_widget_header {
  padding: 2px 8px;
  font-size: 0.8em;
  margin: -9px -9px 9px -9px;
  cursor: move;
}
.user_page_widget_sort {
  margin: -10px;
}
.user_page_widget_sort li {
  display: block;
  margin: 10px;
}

/* specifiek voor page90 */
.Mitem, .Msubmenu {
  cursor: move;
}

/* page11 en page12 */
.mobileTabel td { /* Moet onder class tabel */
  padding-top: 8px;
  padding-bottom: 8px;
}
.mobileKlasTabelHide {
  margin-top: 8px;
  width: 100%;
    border: none !important;
}
.mobileKlasTabel {
  width: 100%;
}
.mobileKlasTabel td {
  padding-top: 0px;
  padding-bottom: 0px;
}

/* cookie melding */
.pia_cookies {display: none !important; position: absolute; background-color: rgb(85, 85, 85); color: rgb(255, 255, 255); padding: 4px 0px; display: inline-block; font: bold 12px Arial; width: 100%;}
.pia_cookies DIV {margin: 0 16px;}
.pia_cookies_a {color: #ffffff; font-weight: bold; text-decoration: underline;} 
.pia_cookies_a:hover {color: #dddddd;}
.pia_cookies_a:visited {color: #ffffff;}

/* kalender */
.maand {color: #555555; width: 100%; table-layout: fixed; font-size: 90%;}
.maand th {border: 1px solid #cccccc; background-color: #eeeeee; color: #555555; font-weight: bold; text-align: left; padding: 2px 4px;}
.maand td {border: 1px solid #cccccc; font-weight: normal; text-align: left; overflow: hidden; }
.maand td.KDis,.maand td.KDisVakantie {border: solid 3px #555555;}
.maandWeekendSep {
  background-color: #cccccc;
  height: 1px;
  margin: 16px -4px;
  font-size: 0;
}
.maand td.kalenderHeaderL {
  font-size: 80%;
  border-right: solid 1px transparent;
  padding: 8px 0 8px 2px;
  background-color: #eeeeee; color: #555555; 
}
.maand td.kalenderHeaderR {
  font-size: 80%;
  border-left: solid 1px transparent;
  padding: 8px 2px 0 0;
  text-align: right;
  background-color: #eeeeee; color: #555555; 
}
/*.KDvakantie {background-color: #ffffe8;} */
.KDvoor {background-color: #e8e8e8;}
.KDna {background-color: #f8f8f8;}
.KDvoorVakantie {background-color: #f4f4eb;}
.KDisVakantie {background-color: #ffffe8;}
.KDnaVakantie {background-color: #ffffe8;}
.kalenderDag {padding: 4px;}
.dagHeader {font-weight: bold; cursor: pointer;}
.afspraak-icon-allday {float: left; width: 16px; margin-left: -4px; height: 14px; position: relative;}
.afspraak-icon-normal {float: left; width: 16px; margin-left: -2px; height: 14px; position: relative;}
.afspraak {white-space: normal;}
.afspClc {
    border-radius: 4px 4px 4px 4px;
    color: #000000;
    cursor: pointer;
    margin-top: 4px;
    padding-left: 3px;
}
.tijd {font-size: 80%;}
.afspraak.normal {
  background-color: #F4F4F4;
  border: 1px solid #CCCCCC;
}
.afspraak.allday {
}
.roosterUitz {
  background-color: #FFDDDD;
  border: 1px solid #FF6666;
}
.oudergesprek {
  background-color: #F6DDCC;
  border: 1px solid #CCCCCC;
}
.teamafspraak {
  background-color: #DDFFDD;
  border: 1px solid #CCCCCC;
}

/* oudergesprek page33 */
.ogTS td {
  white-space: nowrap;
}
.ogTS td .ui-icon {
  cursor: pointer;
}
.ogLL {
  cursor: pointer;
  font-weight: bold;
  /*display: inline;*/
}
.ogLLtd {
  padding-bottom: 1px 0;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

/* page65 en page90 */
.Mmenu {
  padding: 8px 20px;/* nodig voor droppable when empty */
}

/* ROB: de gehele timepicker nog uitzoeken */
/* timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

/* email_dialog */
.dialogTable td {padding: 8px 0px;}

/* tonen schoolstructuur */
.groupSubgroupFirst {background: url(treeGHF.png) no-repeat;}
.groupSubgroup {background: url(treeGH.png) repeat-x;}
.groupSubgroupLast {background: url(treeGHL.png) no-repeat;}
.groupChildTeam {padding: 0px 20px 0px 2px;background: url(treeG.png) no-repeat scroll 0px -20px;}
.groupChildFirst {padding: 0px 20px 0px 36px;background: url(treeGF.png) no-repeat;display: block;}
.groupChild {padding: 0px 20px 0px 36px;background: url(treeG.png) no-repeat;display: block;}
.groupChildLast {padding: 0px 20px 0px 36px;background: url(treeGL.png) no-repeat;display: block;}

/* nodig voor structuur-pagina's */
.structBouw {margin-top: 10px;}
.structBouwTitel {cursor: default;}
.structKlas {margin: 4px; padding: 4px 36px;}
.structKlasTitel {cursor: default;}
.structKlasFK {padding: 2px 8px; display: inline; font-size: 80%; margin-left: 6px;}
.structKlasFK LI {list-style: none; display: inline-block; padding: 0 6px;}
.structFKtitel {cursor: default;}
.structKlasUnUsedTitel, .structBouwTitel {padding: 2px 8px;}
.transfer {border: dashed 1px black;}

/* autotabel */
.autoTabelVoegToe td {
  padding: 10px;
}

/* Declaraties tbv styles van CKediter  */
/* de standaard pia-stijl voor lijsten */
ul.pia_list {list-style-type:none;list-style:none;margin-left: 20px;}
ul.pia_list li {background-image:url(pia-list.png); background-position: 0 8px; line-height: 200%; background-repeat: no-repeat; padding-left: 30px; margin-left: -18px !important;}
ul.pia_disc {list-style-type: disc;}
ul.pia_circle {list-style-type: circle;}
ul.pia_square {list-style-type: square;}

/* Je hoeft alleen in een div de class 'uitgelicht_links' of 'uitgelicht_rechts' op te geven */
/* met mobile gebruik is rekening gehouden */
.uitgelicht_links {display: inline-block; float: left; background-color: #f9f9f9; border: 1px solid #D6D6D6; border-radius: 6px 6px 6px 6px; font-size: 13px; margin: 0 20px 20px 0; padding: 20px 20px 8px 20px; font-style: italic;}
.wrapper-mobile .uitgelicht_links {float: none; clear: both; margin: 0; max-width: 100%;}
.uitgelicht_rechts {display: inline-block; float: right; background-color: #f9f9f9; border: 1px solid #D6D6D6; border-radius: 6px 6px 6px 6px; font-size: 13px; margin: 0 0 20px 20px; padding: 20px 20px 8px 20px; font-style: italic;}
.wrapper-mobile .uitgelicht_rechts {float: none; clear: both; margin: 0; max-width: 100%;}
.uitgelicht_links p, .uitgelicht_rechts p {text-align: center;}
.uitgelicht_links h2, .uitgelicht_rechts h2 {margin-top: 0;}

.img-float-left {float: left; margin: 0 20px 20px 0;}
.img-float-right {float: right; margin: 0 0 20px 20px;}


.lid_highlight {color: white !important; background-color: #ED9C0F !important;}

.transactietabel td {padding: 0 12px;}
.transactietabel td.rechts {text-align: right;}

.c39lid {display: none;}
.c39nm {padding-right: 20px;}
.c39lmd {text-align: center; padding: 0 4px;}
.c39v {max-width: 35px;}
.c39v div {transform: rotate(-45deg); transform-origin: 12px 0; width: 300px;font-weight: bold;}
.c39md {text-align: center;font-size: 0.8em;padding: 0 3px;}
.c39dt {text-align: center;font-size: 0.7em;padding: 0 3px;}
.c39tbl {text-align: center;}
.c39ftr {text-align: right; padding-left: 20px;}
.c39ft {text-align: center; padding-top: 20px;}