/* ---------------  ------------------*/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}
@media screen and (orientation: landscape) {
* {
-webkit-text-size-adjust: 100%;
}
}
/* --------------- standaard html ------------------*/
HTML {
	font-family: 'Ubuntu', sans-serif;
	font-size: 100%;
}
BODY {
	background-color: #444444;
	background-image: url(/z73/images/schoolbord.jpg);
    background-repeat: repeat-y; 
    background-position: center center;
    background-size: auto;
	font-size: 100%;
	font-family: 'Ubuntu', sans-serif;
	color: #cccccc;
	padding: 0px;
	margin: 0px;
	overflow: auto;
}
PRE {
	font-family: 'Ubuntu', sans-serif;
}
DIV {
 	width: 100%;
}
P {
 	margin-top: 0px;
 	margin-bottom: 0.5em;
}
BLOCKQUOTE {
	width: 100%;
	background-image: url(/z73/images/steunkleur.png);
	font-size: 120%;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	padding: 10px;
	margin: 3px 0px 3px 0px;
	font-style: oblique;
	text-align: center;
	border-radius: 5px;
}
TH {
	background-color: #888888;
	font-size: 90%;
	color: #ffffe0;
	padding-right: 3px;
	padding-left: 3px;
	padding-bottom: 1px;
	padding-top: 1px;
}
TABLE {
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
}
TD {
    font-size: 100%;
    padding: 0px;
}
HR {
	border-left: 2px solid #cc9933;
	border-top: 2px solid #cc9933;
	border-right: 0px solid #cc9933;
	border-bottom: 0px solid #cc9933;
	border-radius: 5px;
}
UL {
	display: inline-block;
	text-align: left;
	margin: 0px;
	padding: 0px;
	margin-left: 5px;
	padding-left: 10px;
	list-style-type: disc;
}
OL {
	display: inline-block;
	text-align: left;
	margin: 0px;
	padding: 0px;
	margin-left: 5px;
	padding-left: 10px;
}
LI {
	margin: 0px;
	padding: 0px;
	margin-left: 20px;
	padding-left: 0px;
}
FORM {
	margin: 0px;
}
INPUT,
INPUT:-webkit-autofill::first-line,
INPUT:-webkit-autofill,
INPUT:-webkit-autofill:hover,
INPUT:-webkit-autofill:focus,
INPUT:-webkit-autofill:active {
	font-family: 'Ubuntu', sans-serif;
	font-size: 100%;
}
INPUT[type="text"] {
    width: 100%;
	font-size: 100%;
	border: none;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
	border-radius: 5px;
}
INPUT[type="password"] {
    width: 100%;
	font-size: 100%;
	border: none;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
	border-radius: 5px;
}
INPUT[type="checkbox"] {
    width: 20px;
    height: 20px;
	vertical-align: middle;
	color: #222222;
	margin: 3px;
}
SELECT {
	font-family: 'Ubuntu', sans-serif;
	font-size: 100%;
	width: auto;
	border: none;
	margin-top: 0px;
	margin-bottom: 0px;
	color: #222222;
	background-color: #f0f0f0;
	padding: 5px;
	border-radius: 5px;
} 
TEXTAREA {
	font-size: 100%;
	font-family: 'Ubuntu', sans-serif;
	width: 100%;
	border: none;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
    border-radius: 5px;
    min-height: 10em;
}
TEXTAREA[type="text"], DIV[type="text"] {
	font-size: 100%;
	font-family: 'Ubuntu', sans-serif;
	width: 100%;
	border: none;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
    border-radius: 5px;
    min-height: 20em;
}
TEXTAREA[type="column"], DIV[type="column"] {
	font-size: 100%;
	font-family: 'Ubuntu', sans-serif;
	width: 100%;
	border: none;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
    border-radius: 5px;
    min-height: 10em;
}
H1 {
	font-family: 'Norse', 'Ubuntu', sans-serif;
	color: #000000;
	font-size: 220%;
	font-weight: bold;
	display: inline;
}
H2 {
	font-family: 'Norse', 'Ubuntu', sans-serif;
	color: #000000;
	font-size: 170%;
	font-weight: bold;
	display: inline;
}
H3 {
	font-family: 'Norse', 'Ubuntu', sans-serif;
	color: #000000;
	font-size: 145%;
	font-weight: bold;
	display: inline;
}
H4 {
	font-family: 'Norse', 'Ubuntu', sans-serif;
	color: #000000;
	font-size: 120%;
	font-weight: bold;
	display: inline;
}
A {
	color: #cc9933;
	text-decoration: none;
}
A:visited {
	color: #cc9933;
}
A:hover {
	color: #eebb55;
	text-decoration: none;
}
IMG {
	border: none;
}
IFRAME {
	padding: 0px;
    margin: 0px;
    border: none;
}
/* --------------- custom html ------------------*/
#colorfilter {
	z-index: -1;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0.3;
	background-color: #444444;
    animation-name: color;
    animation-duration: 60s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}
@keyframes color {
    0%   { background-color: #444444; }
    25%  { background-color: #996633; }
    50%  { background-color: #0092af; }
    75%  { background-color: #cc3300; }
    100% { background-color: #444444; }
}
/* --------------- header ------------------*/
#header {
    position: relative;
    overflow: hidden;
    width: 100vw;
    min-height: 600px;
    height: 50vh;
    text-align: center;
    vertical-align: middle;
    background-color: transparent; 
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
@keyframes breathe {
    0%   { height: 100%; }
    50%  { height: 120%; }
    100%  { height: 100%; }
}
#headermedia {
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* animation-name: breathe;
    animation-duration: 30s;
    animation-delay: 0s;
    animation-iteration-count: infinite; */
}
#headerfilter {
    z-index: 2;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#headerelements {
    z-index: 3;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding-top: 60px;
}
#headermessage {
    position: relative;
	overflow: hidden;
    width: 100%;
    height: 1.5em;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 130%;
    margin: 10px 0px 0px 0px;
	color: #ffffff;
	font-style: oblique;
	text-shadow: 1px 1px 2px #111111;
}
#headertitle {
    position: relative;
	overflow: hidden;
	z-index: 10;
    width: 100%;
    height: 1.5em;
    margin: 10px 0px 10px 0px;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 220%;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 1px 1px 2px #111111;
}
#logo {
    display: none;
}
/* For smaller displays */
@media (max-width: 1024px), (orientation: portrait) {
	#logoimage {
        max-width: 327px;
		width: 50%;
		height: auto;
	}
}
/* For larger displays */
@media (min-width: 1025px), (orientation: landscape) {
	#logoimage {
        max-width: 327px;
		width: 30%;
		height: auto;
	}
}
/* --------------- menu balk ------------------*/
#navigation {
	position: fixed;
	z-index: 101;
	top: 0px;
	left: 0px;
    min-height: 50px;
	background-color: #222222;
}
#navigationmenu {
    display: none;
	position: fixed;
    width: 100%;
    height: 100vh;
	z-index: 100;
	padding-top: 50px;
	vertical-align: top;
	background-color: #222222;
    overflow-y: auto;
}
#navigationmenubutton {
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 150%;
	font-weight: bold;
	border: none;
	color: #cc9933;
	cursor: pointer;
	border-right: 1px solid #444444;
}
#navigationmenubutton:hover {
	color: #eebb55;
	background-image: url(/images/transparant_wit_10.png);
}
DIV.navigationcolumn { 
    display: inline-block;
	vertical-align: top;
}
DIV.navigationblock { 
	padding: 10px;
	vertical-align: top;
}
DIV.navigationitems {
	background-image: url(/images/transparant_wit_10.png);
	padding: 0px;
	text-align: center;
	width: 100%;
	min-height: 0px;
	border-radius: 0px 0px 5px 5px;
}
.navigationtitle {
	min-height: 25px;
	line-height: 25px;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 110%;
	font-weight: bold;
	background-color: #cc9933;
	color: #dddddd;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
    vertical-align: middle;
    text-align: center;
	text-decoration: none;
	display: inline-block;
	text-shadow: none;
	border-radius: 5px 5px 0px 0px;
}
A.navigationitem {
	min-height: 35px;
	line-height: 35px;
	font-size: 90%;
	color: #dddddd;
	margin: 0px;
	margin-bottom: 1px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	display: block;
	border-radius: 5px;
	text-shadow: none;
}
A.navigationitem:active {
	background-image: url(/images/transparant_wit_40.png);
	color: #dddddd;
	border-radius: 5px;
}
A.navigationitem-active {
	min-height: 35px;
	line-height: 35px;
	font-size: 90%;
	background-image: url(/images/transparant_wit_40.png);
	color: #dddddd;
	margin: 0px;
	margin-bottom: 1px;
	padding-left: 10px;
	padding-right: 10px;
	text-decoration: none;
	display: block;
	border-radius: 5px;
}
A.navigationitem:visited {
    color: #dddddd;
}
A.navigationitem-active:visited {
    color: #dddddd;
}
A.navigationitem:hover {
	background-image: url(/images/transparant_wit_10.png);
	color: #dddddd;
}
A.navigationitem-active:hover {
	color: #dddddd;
}
/* --------------- pagina balk ------------------*/
#page {
	vertical-align: top;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	padding-top: 0px;
}
#pagebackground {
    width: 100%;
    height: 100%;
	vertical-align: top;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: 0px;
}
#pagetextarea {
	height: 100%;
    padding: 0px;
    vertical-align: top;
}
/* For smaller displays */
@media (max-width: 1024px) {
	.pagetextrow {
		vertical-align: top;
		padding: 10px;
	}
}
/* For larger displays */
@media (min-width: 1025px) {
	.pagetextrow {
		vertical-align: top;
		padding: 10px;
		padding-left: 20%;
		padding-right: 20%;
	}
}
.pagewiderow {
    text-align: center;
    vertical-align: top;
    padding: 20px;
}
.pageextrarow {
	text-align: center;
	vertical-align: top;
	padding: 20px;
	background-image: url(/images/transparant_wit_10.png);
}
.prologue {
	width: 100%;
}
/* --------------- footer ------------------*/
#footer {
	background-image: url(/images/transparant_zwart_90.png);
	position: relative;
	min-height: 200px;
	font-size: 90%;
	color: #aaaaaa;
}
#footer TD {
	font-size: 100%;
}
#footer H1 {
    font-size: 150%;
	color: #cc9933;
}
#footer A {
	color: #cccccc;
	text-decoration: none;
}
#footer A:visited {
	color: #cccccc;
}
#footer A:hover {
	color: #cc9933;
	text-decoration: none;
}
#credits, #credits TD {
	font-family: 'Norse', 'Ubuntu', sans-serif;
    font-size: 120%;
	color: #666666;
}
#credits A {
	color: #666666;
}
#credits A:visited {
	color: #666666;
}
#credits A:hover {
	color: #ffffff;
	text-decoration: none;
}
#recaptcha-disclaimer {
	background-image: url(/images/transparant_zwart_85.png);
	height: 40px;
	text-align: center; 
	color: #555555;
	font-size: 30%;
	padding: 0px 10px 0px 10px;
}
#recaptcha-disclaimer A {
	color: #555555;
}
#recaptcha-disclaimer A:visited {
	color: #555555;
}
#recaptcha-disclaimer A:hover {
	color: #aaaaaa;
	text-decoration: none;
}
/* --------------- tekst ------------------*/
.error {
	width: 100%;
	color: #ffffff;
	background-image: none;
	background-color: #aa0000;
	font-weight: bold;
}
.noerror {
	width: 100%;
	color: #ffffff;
	background-image: none;
	background-color: #008800;
	font-weight: bold;
}
.groot {
	font-size: 110%;
}
.groter {
	font-size: 120%;
}
.klein {
	font-size: 90%;
}
.kleiner {
	font-size: 80%;
}
.bold {
	font-weight: bold;
}
.balk {
	border-radius: 5px;
}
.block {
    display: block;
}
.inline {
    display: inline;
}
.editoritemtitle {
    position: relative;
    height: 35px;
    line-height: 35px;
    background-image: url(/images/transparant_zwart_60.png);
    margin: 0px 0px 3px 0px;
    padding: 0px 5px 0px 5px;
    vertical-align: middle;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px;
}
#editor_status {
    width: 50%;
    border-radius: 5px;
}
#editor_status DIV {
    text-align: center;
    padding: 5px;
    border-radius: 5px;
}
/* --------------- lijsten ------------------*/
OL.cijfers {
	list-style-type: decimal;
}
OL.letters {
	list-style-type: lower-alpha;
}
.listitem {
    padding: 5px 10px 5px 10px;
    margin: 0px 0px 3px 0px;
    background-image: url(/images/transparant_zwart_25.png);
    font-size: 90%;
	border-radius: 5px;
}
.editoritem {
    min-height: 40px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 3px 0px;
    background-image: url(/images/transparant_zwart_25.png);
    font-size: 90%;
    border-radius: 5px;
}
.editoritemspecial {
    background-image: url(/images/transparant_groen_30.png);
}
.editoriteminactive {
	background-image: url(/images/transparant_oranje_20.png);
	color: #aa4444;
}
.editoritemarea {
    text-align: center;
}
.editoritemchange {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 3px 0px;
    font-size: 90%;
    border-radius: 5px;
}
.editoritemheader {
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 3px 0px;
    background-image: url(/images/transparant_zwart_40.png);
    font-size: 90%;
	border-radius: 5px;
}
.editoritem_thumb {
    display: inline-block;
    position: relative;
    width: 32%;
    height: auto;
    margin: 0.5%;
    background-color: #222222;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 80%;
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
}
@media (max-width: 1024px), (orientation: portrait) {
    .editoritem_thumb {
        width: 48%;
        padding: 48% 0px 0px 0px;
    }
}
@media (min-width: 1025px), (orientation: landscape) {
    .editoritem_thumb {
        width: 24%;
        padding: 24% 0px 0px 0px;
    }
}
.editoritem_thumb_header {
    position: absolute;
    top: 0px;
    background-image: url(/images/transparant_zwart_60.png);
    padding: 3px;
    text-align: left;
    z-index: 1;
}
.editoritem_thumb_footer {
    position: absolute;
    overflow: hidden;
    bottom: 0px;
    background-image: url(/images/transparant_zwart_60.png);
    padding: 5px 3px 7px 3px;
    color: #eeeeee;
    z-index: 1;
}
.editorphotopreview {
    display: inline-block; 
    position: relative;
    background-color: #ffffff;
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: cover;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.editorphotoselection {
    display: inline-block; 
    position: relative;
    margin: 0px 5px 3px 0px;
    background-color: #ffffff;
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: contain;
	border-radius: 5px;
	overflow: hidden;
    cursor: pointer;
}
.editorphotoselectionnavigation {
    position: absolute;
    bottom: 0px;
    margin: 0px 5px 0px 0px;
	border-radius: 5px;
}
/* For smaller displays */
@media (max-width: 1024px), (orientation: portrait) {
    .editorphotopreview {
        width: 30%;
        padding-top: 30%;
    }
    .editorphotoselection {
        width: 30%;
        padding-top: 30%;
    }
}
/* For larger displays */
@media (min-width: 1025px), (orientation: landscape) {
    .editorphotopreview {
        width: 12%;
        padding-top: 12%;
    }
    .editorphotoselection {
        width: 12%;
        padding-top: 12%;
    }
}
/* --------------- formulieren ------------------*/
SELECT.selectdagmaandtijd {
	width: 7ex;
}
INPUT.invuljaar {
	width: 6ex;
}
INPUT[mandatory="yes"] {
    width: 100%;
	font-size: 100%;
	border: none;
    border-left: 8px solid #00aa00;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
	border-radius: 5px;
}
INPUT[mandatory="error"] {
    width: 100%;
	font-size: 100%;
	border: none;
    border-left: 8px solid #dd0000;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
	border-radius: 5px;
}
TEXTAREA[mandatory="yes"] {
    width: 100%;
	font-family: 'Ubuntu', sans-serif;
	font-size: 100%;
	border: none;
    border-left: 8px solid #00aa00;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
	border-radius: 5px;
}
TEXTAREA[mandatory="error"] {
    width: 100%;
	font-family: 'Ubuntu', sans-serif;
	font-size: 100%;
	border: none;
    border-left: 8px solid #dd0000;
	color: #222222;
	background-color: #f0f0f0;
	padding: 7px;
	border-radius: 5px;
}
.question {
    margin: 10px 0px 5px 0px;
    font-size: 90%;
    font-style: oblique;
    color: #888888;
}
.answer {
    margin: 5px 0px 10px 0px;
}
.comment {
    margin: 10px 0px 10px 0px;
    font-size: 110%;
}
#editoractionarea {
    display: inline-block;
    width: auto;
    padding: 5px;
    border-radius: 5px;
}
#editormovetoarea {
    display: none;
    width: auto;
    padding: 0px 0px 0px 5px ;
}
.editortextcodebuttonarea {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background-image: url(/images/transparant_zwart_40.png);
    font-size: 90%;
    border-radius: 5px;
    overflow: hidden;
}
.editortextcodesubbuttonarea {
    display: none;
    padding: 5px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    background-image: url(/images/transparant_zwart_35.png);
    font-size: 100%;
	border-radius: 5px;
}
@keyframes actioncolor {
    0%  {background-color: transparent;}
    50%   {background-color: #009933;}
    100%   {background-color: transparent;}
}
.editoractionneeded {
    background-color: transparent; 
    animation-name: actioncolor;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
/* --------------- buttons ------------------*/
BUTTON, .button, .button:visited, .button:active, .button:link, .button:focus {
	display: inline-block;
	cursor: pointer;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 120%;
	color: #ffffff;
	background-color: #888888;
	padding: 6px;
    margin: 1px;
	border: none;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #444444;
}
BUTTON:hover, .button:hover {
	font-size: 120%;
    color: #ffffff;
	background-color: #cc9933;
	box-shadow: 2px 2px 5px #222222;
}
.buttonactief, .buttonactief:visited, .buttonactief:active, .buttonactief:link, .buttonactief:focus, .buttonactief:hover {
	display: inline-block;
	cursor: pointer;
	font-size: 120%;
    color: #ffffff;
	background-color: #cc9933;
    padding: 6px;
    margin: 1px;
    border-radius: 5px;
	box-shadow: 2px 2px 5px #222222;
}
.redbutton, .redbutton:visited, .redbutton:active, .redbutton:link, .redbutton:focus {
	cursor: pointer;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 120%;
	color: #ffffff;
	background-color: #666666;
	padding: 6px;
	border: none;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #444444;
}
.redbutton:hover {
	cursor: pointer;
	font-size: 120%;
	color: #ffffff;
	background-color: #aa0000;
	padding: 6px;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #222222;
}
.editortextcodebutton {
	min-width: 8ex;
	color: #ffffff;
	background-color: #888888;
	padding: 5px 7px 5px 7px;
    margin: 0px 2px 0px 0px;
	border-radius: 0px;
}
.editortextcodebutton:hover {
    color: #ffffff;
	background-color: #aaaaaa;
}

/* --------------- icon ------------------*/
.icon {
    width: auto;
    height: 36px;
}
.iconshare {
    width: auto;
    height: 30px;
	margin: 0px 7px 0px 0px; 
}
.iconsocial {
    width: auto;
    height: 30px;
    margin: 0px 7px 0px 0px;
    vertical-align: top;
}
.iconprevious {
    width: auto;
    height: 36px;
    margin: 0px 1px 0px 0px;
}
.iconnext {
    width: auto;
    height: 36px;
    margin: 0px 0px 0px 1px;
}
.iconcrumb {
    width: auto;
    height: 30px;
    margin: 0px 0px 0px 0px;
}
.iconeditor {
    cursor: pointer;
    width: auto;
    height: 30px;
    margin: 0px 1px 0px 1px;
    vertical-align: middle;
}
#slideupbutton {
    float: right; 
    width: 30px;
    height: 30px;
    cursor: pointer;
    vertical-align: middle;
    margin: auto;
}
/* --------------- foto ------------------*/
.foto {
    position: relative; 
    display: inline-block;
    background-image: url(/images/transparant_zwart_90.png);
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
    overflow: hidden;
}
.slidefoto {
    background-image: url(/images/transparant_zwart_90.png);
	box-shadow: 2px 2px 5px #222222;
    border-radius: 5px;
    overflow: hidden;
}
.fotomargin {
	margin: 3%;
}
.fotomargin_album {
	margin: 1%;
}
.fototekst {
    position: absolute; 
    bottom: 0px; 
    z-index: 1; 
    width: 100%;
    min-height: 2em;
    height: auto;
	font-size: 90%;
	font-style: oblique;
    text-align: center;
    background-image: url(/images/transparant_wit_30.png);
    color: #eeeeee;
	text-shadow: 1px 1px 3px #222222;
    padding: 5px;
}
.fotoraam {
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
}
.fotoalbum {
    display: inline-block; 
    background-image: url(/images/transparant_zwart_90.png);
    position: relative;
    padding-top: 56.25%;
	border-radius: 5px;
}
.fotoalbum_pagina {
    position: absolute;
    top: 0px;
    left: 0px;
}
.fotoalbum_fotolinks {
	box-shadow: 2px 2px 5px #222222;
}
.fotoalbum_fotorechts {
	box-shadow: 2px 2px 5px #222222;
}
.fotopreviewarea {
    background-color: #222222; 
    text-align: center; 
    overflow: hidden;
	border-radius: 5px;
}
.fotopreview {
    cursor: pointer; 
    width: 100%; 
    padding-top: 75%; 
    background-color: #222222; 
    background-position: center center;
    background-repeat: no-repeat; 
    background-size: contain;
	border-radius: 5px;
}
.thumb_100 {
    display: inline-block; 
    position: relative;
    width: 12%;
    padding-top: 12%;
    background-color: #222222;
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: cover;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
	overflow: hidden;
}
.thumb_150 {
    display: inline-block; 
    position: relative;
	width: 18%;
    padding-top: 18%;
	background-color: #222222;
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: cover;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
	overflow: hidden;
}
.thumb_250 {
    display: inline-block; 
    position: relative;
	width: 30%;
    padding-top: 30%;
	background-color: #222222;
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: cover;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
	overflow: hidden;
}
.thumb_500 {
    display: inline-block; 
    position: relative;
	width: 30%;
    padding-top: 30%;
	background-color: #222222;
    background-repeat: no-repeat; 
    background-position: center center;
    background-size: cover;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
	overflow: hidden;
}
.geotag {
    width: 36px;
    height: 36px;
}
.links {
	float: left; 
}
.rechts {
	float: right; 
}
.midden {
	text-align: center;
}
/* -----------------------------< Video >----------------------------- */
DIV.videobox {
    display:inline-block;
    position: relative;
	background-color: #000000;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
    overflow: hidden;
}
DIV.video {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #000000;
}
.videomargin {
	margin: 3%;
}
.videotekst {
    position: absolute; 
    top: 0px; 
    z-index: 1; 
    width: 100%;
    min-height: 2em;
    height: auto;
	font-size: 90%;
	font-style: oblique;
    text-align: center;
    background-image: url(/images/transparant_wit_30.png);
    color: #eeeeee;
	text-shadow: 1px 1px 3px #222222;
    padding: 5px;
}
/* --------------- nieuws ------------------*/
.item {
	margin-top: 10px;
	margin-bottom: 10px;
	background-image: url(/images/transparant_zwart_10.png);
	border-radius: 5px;
}
/* For smaller displays */
@media (max-width: 1024px) {
    .item_foto {
        cursor: pointer;
        width: 20%;
        padding-top: 20%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        border-radius: 5px 0px 0px 5px;
    }
    .item_tekst {
        width: auto;
        font-size: 90%;
        padding: 10px;
    }
}
/* For larger displays */
@media (min-width: 1025px) {
    .item_foto {
        cursor: pointer;
        width: 15%;
        padding-top: 15%;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        border-radius: 5px 0px 0px 5px;
    }
    .item_tekst {
        width: auto;
        font-size: 100%;
        padding: 10px;
    }
}
.item_info {
	font-size: 80%;
	color: #222222;
}
.item_datum {
    width: auto;
}
.item_bron {
    width: auto;
}
.item_categorie {
    width: auto;
}
.item_kop {
    font-size: 150%;
	margin-top: 5px;
	margin-bottom: 0px;
	display: block;
}
.item_kop_artikel {
    font-size: 200%;
	margin-top: 5px;
	margin-bottom: 0px;
	display: block;
}
.item_link {
    font-size: 90%;
    font-style: oblique;
}
DIV.topstory {
	padding: 0px;
	margin-bottom: 20px;
}
DIV.item_klein {
	padding: 2px;
	margin-bottom: 5px;
	clear: both;
}
/* --------------- tabblad ------------------*/
A.tab {
	display: block;
	cursor: pointer;
	background-color: #cc9933;
	font-size: 90%;
	color: #ffffff;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	margin-right: 1px;
	border-radius: 10px 10px 0px 0px;
}
A.tab:visited {
	color: #ffffff;
}
A.tab:hover {
	background-color: #52b66d;
	color: #ffffff;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
}
A.tabactief {
	display: block;
	font-size: 90%;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 5px;
	color: #cc9933;
	font-weight: bold;
	background-image: url(/images/transparant_zwart_20.png);
	margin-right: 1px;
	border-radius: 10px 10px 0px 0px;
}
A.tabactief:visited {
	color: #cc9933;
}
A.tabactief:hover {
	color: #cc9933;
}
.tab_blok {
	background-image: url(/images/transparant_zwart_20.png);
	padding: 10px;
	border-radius: 0px 10px 10px 10px;
}
.tab_leeg {
    width:auto;
}
/* --------------- taalkeuze ------------------*/
DIV.taalkeuze {
    width:auto;
}
.vlag {
    width: 25px;
    height: 25px;
    margin: 0px 0px 0px 7px;
	padding: 0px;
}
.editor_vlag {
    cursor: pointer;
    width: 25px;
    height: 25px;
    margin: 0px 5px 0px 0px;
    padding: 0px;
    vertical-align: middle;
    border: solid 2px transparant;
    border-radius: 50%;
}
.editor_vlag_active {
    border: solid 2px #ffffff;
}
.editor_vlag_area {
    float: right;
    width: auto;
    max-height: 25px;
    margin: auto;
    padding: 0px;
    vertical-align: middle;
    font-size: 50%;
}
/* --------------- zoeken ------------------*/
.zoekformulier {
	margin-top: 0px;
}
.zoekblok {
	display: inline-block;
	width: 50%;
	padding: 10px;
	vertical-align: middle;
}
/* --------------- google ------------------*/
IFRAME.google_agenda {
    width: 100%; 
    height: 500px;
	padding: 0px;
	margin: 0px;
}
.maps {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    box-shadow: 2px 2px 5px #222222;
    border: none;
	border-radius: 5px;
	overflow: hidden;
}
/* --------------- shop ------------------*/
.shop_categorie {
	background-image: url(/images/transparant_zwart_25.png);
	padding: 5px;
	box-shadow: 2px 2px 5px #222222;
    border-radius: 5px;
    display: inline-block; 
    width: 160px; 
    height: auto;
    margin: 5px;
}
.shop_product_listview {
	font-size: 100%;
	background-image: url(/images/transparant_zwart_25.png);
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	box-shadow: 2px 2px 5px #222222;
    border-radius: 5px;
    overflow: hidden;
}
.shop_product_listview_titel {
	font-size: 130%;
}
.shop_product_listview_tekst {
	font-size: 90%;
}
.shop_product_thumbview {
    display: inline-block;
	font-size: 100%;
	background-image: url(/images/transparant_zwart_25.png);
	width: 170px; 
	height: 430px;
	margin: 7px; 
	margin-left: 0px;
	overflow: hidden;
	padding: 0px;
	box-shadow: 2px 2px 5px #222222;
	border-radius: 5px;
    overflow: hidden;
}
.shop_product_thumbview_titel {
	font-size: 120%;
}
.shop_product_thumbview_tekst {
    font-size: 90%;
    margin: 0px;
}
.shop_productfoto {
    overflow: hidden; 
    height: 160px;
    width: 20%;  
    background-position: center; 
    background-size: cover;
}
#shop_kruimelpad {
	padding: 0px;
	margin: 0px;
	margin-bottom: 10px;
	vertical-align: middle;
}
#shop_kruimelpad p {
	line-height: 1.5em;
	font-size: 90%;
	margin: 5px;
}
.shop_viewbalk {
	background-image: url(/images/transparant_zwart_35.png);
	border-radius: 5px 5px 0px 0px;
    padding: 3px;
    vertical-align: middle;
}
.shop_viewicon {
    width: 30px;
    height: 30px;
    margin: 3px 3px 3px 0px;
    text-align: middle;
}
.shop_ordericon {
    position: absolute; 
    bottom: 5px; 
    left: 5px;
    width: 36px;
    height: 36px;
    z-index: 1;
}
.shop_icon {
    width: auto;
}
.shop_urlpadactief {
	font-size: 90%;
}
.shop_prijskaartje {
	position: relative;
	width: 100%;
	height: 100px;
	background-image: url(/images/transparant_zwart_25.png);
	margin: 0px;
	padding: 5px;
	text-align: center;
	vertical-align: middle;
	border-radius: 5px;
}
.shop_aanbiedingsimage {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 3px;
	left: 3px;
	margin: 0px;
}
#shop_winkelwagen {
	background-image: url(/images/transparant_zwart_25.png);
	font-size: 100%;
	padding: 10px;
	border-radius: 0px 0px 5px 5px;
}
#shop_winkelwagen td, th {
	font-size: 80%;
}
.shop_advertentie_liggend_titel {
	text-align: left;
	padding: 5px;
	padding-left: 60px;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 170%;
	font-weight: bold;
	color: #ffffff;
	background-image: url(/images/transparant_zwart_40.png);
}
.shop_advertentie_liggend_image {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 10px;
	left: 10px;
	z-index: 1;
}
.shop_advertentie_liggend_prijs {
	position: absolute;
	bottom: 0px;
	padding: 5px;
	font-size: 180%;
	font-weight: bold;
	color: #ffffff;
	background-image: url(/images/transparant_zwart_40.png);
}
.shop_advertentie_staand_titel {
	padding: 5px;
	padding-top: 10px;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	background-image: url(/images/transparant_zwart_40.png);
}
.shop_advertentie_staand_image {
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 40px;
	right: 10px;
	z-index: 1;
}
.shop_advertentie_staand_prijs {
	position: absolute;
	bottom: 0px;
	padding: 5px;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	background-image: url(/images/transparant_zwart_40.png);
}
.shop_advertentie_vierkant_titel {
	padding: 5px;
	font-family: 'Norse', 'Ubuntu', sans-serif;
	font-size: 150%;
	font-weight: bold;
	color: #ffffff;
	background-image: url(/images/transparant_zwart_40.png);
}
.shop_advertentie_vierkant_image {
	position: absolute;
	width: 40px;
	height: 40px;
	bottom: 40px;
	left: 10px;
	z-index: 1;
}
.shop_advertentie_vierkant_prijs {
	position: absolute;
	bottom: 0px;
	padding: 5px;
	font-size: 180%;
	font-weight: bold;
	color: #ffffff;
	background-image: url(/images/transparant_zwart_40.png);
}
/* ---------------- voor slideshow required --------------------- */
.container {
    position: relative;
	padding: 0px;
	margin: 0px;
}
.slider {
	background-image: url(/images/transparant_zwart_95.png);
	padding: 0px;
}
.slide {
    display: none; 
    position: absolute; 
    top: 0px;
    left: 0px;
    width: 100%; 
    height: 100%;
    background-size: cover; 
    background-position: center center;
    white-space: nowrap;
}
/* ---------------- screen sliding --------------------- */
@keyframes topmovebottomtotop {
    0%   { top: 0vh; }
    100%   { top: -100vh; }
}
@keyframes topmovetoptobottom {
    0%   { top: -100vh; }
    100%   { top: 0vh; }
}
@keyframes bottommovebottomtotop {
    0%   { top: 100vh; }
    100%   { top: 0vh; }
}
@keyframes bottommovetoptobottom {
    0%   { top: 0vh; }
    100%   { top: 100vh; }
}
@keyframes leftmovelefttoright {
    0%   { left: -100vw; }
    100%   { left: 0vw; }
}
@keyframes leftmoverighttoleft {
    0%   { left: 0vw; }
    100%   { left: -100vw; }
}
@keyframes rightmoverighttoleft {
    0%   { right: 0vw; }
    100%   { right: -100vw; }
}
@keyframes rightmovelefttoright {
    0%   { right: -100vw; }
    100%   { right: 0vw; }
}
.topmovefrombottomtotop {
    animation-name: topmovebottomtotop;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.topmovefromtoptobottom {
    animation-name: topmovetoptobottom;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.bottommovefrombottomtotop {
    animation-name: bottommovebottomtotop;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.bottommovefromtoptobottom {
    animation-name: bottommovetoptobottom;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.leftmovefromlefttoright {
    animation-name: leftmovelefttoright;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.leftmovefromrighttoleft {
    animation-name: leftmoverighttoleft;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rightmovefromlefttoright {
    animation-name: rightmovelefttoright;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.rightmovefromrighttoleft {
    animation-name: rightmoverighttoleft;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
/* ---------------- session --------------------- */
#session_counter_area {
	padding: 2px 5px 2px 5px;
	font-size: 70%;	
	text-align: center;
	background-color: #ffffff;
	color: #444444;
	border-radius: 10%;
	cursor: pointer;
}
#session_counter {
	font-size: 130%;
	font-weight: bold;
}
/* --------------- jquery ------------------*/
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea {
	font-size: 100%;
	font-family: 'Ubuntu', sans-serif;
}
.ui-widget button {
	font-size: 90%;
	font-family: 'Norse', 'Ubuntu', sans-serif;
}
.ui-dialog {
	font-size: 100%;
	font-family: 'Ubuntu', sans-serif;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0px;
	outline: 0;
	box-shadow: 0px 0px 5px 1px #222222;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	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: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: 15px 15px 10px 15px;
	background: none;
	overflow: auto;
	text-align: center;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: center;
	border-width: 0px 0px 0px 0px;
	background-image: none;
	margin-top: 0px;
	padding: 0px;
	text-align: center;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: 0px 2px 10px 2px;
	cursor: pointer;
}
.dialog_item_label {
	font-size: 90%;
	font-weight: bold;
	padding: 3px 0px 1px 0px;
	background-image: url(/images/transparant_zwart_35.png);
	border-radius: 3px;
}
.dialog_item {
	padding: 0px 0px 3px 0px;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dialog_item_click {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 90%;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 5px 0px;
	background-image: url(/images/transparant_zwart_15.png);
	border-radius: 5px;
	border-style: none none solid solid;
	border-width: 0px 0px 1px 1px;
	border-color: #cccccc;
	cursor: pointer;
}
.dialog_item_click_active {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 90%;
	padding: 5px 5px 5px 5px;
	margin: 0px 0px 5px 0px;
	border-radius: 5px;
	background-image: url(/images/transparant_zwart_35.png);
	border-style: none none solid solid;
	border-width: 0px 0px 1px 1px;
	border-color: #cccccc;
	cursor: pointer;
}
.dialog_photo_click {
	display: inline-block;
	width: 72px;
	height: 72px;
	padding: 0px 0px 0px 0px;
	margin: 0px 1px 1px 0px;
	background-image: url(/images/transparant_zwart_15.png);
	background-size: cover;
	border-radius: 5px;
	border-style: solid solid solid solid;
	border-width: 2px 2px 2px 2px;
	border-color: #ffffff;
	cursor: pointer;
}
.dialog_photo_click_active {
	display: inline-block;
	width: 72px;
	height: 72px;
	padding: 0px 0px 0px 0px;
	margin: 0px 1px 1px 0px;
	border-radius: 5px;
	border-style: solid solid solid solid;
	border-width: 2px 2px 2px 2px;
	border-color: #cc9933;
	cursor: pointer;
}
/* ---------------- director --------------------- */
.directorpath {
    clear: both;
	border-radius: 5px;
	background-image: url(/images/transparant_zwart_25.png);
	color: #444444;
    font-size: 90%;
	vertical-align: middle;
	margin: 10px 0px 10px 0px;
	padding: 3px 10px 3px 10px;
}
/* ---------------- textcode --------------------- */
TABLE.tabel {
	width: auto; 
	table-layout: fixed;
	padding: 0px;
	border-spacing: 3px; 
	border-collapse: separate;
	border: none;
}
TABLE.rand, TH.rand, TD.rand {
	padding: 2px;
	vertical-align: top;
	border-collapse: collapse;
	border: 1px solid #888888;
}
/* ---------------- other --------------------- */
DIV.sociaal {
    display: inline-block;
    width: auto;
	vertical-align: middle;
    text-align: left;
    margin: auto;
}
DIV.prevnext {
    clear: both;
    font-size: 90%;
    font-weight: normal;
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
}
.prevnext_previous {
	display: inline-block;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin: 2px;
    cursor: pointer;
}
.prevnext_current, .prevnext_current:visited, .prevnext_current:hover {
	display: inline-block;
	min-width: 30px;
	height: 30px;
    width: auto;
	padding: 5px;
	border-radius: 50% 50% 50% 50%;
	background-color: #cc9933;
	color: #ffffff;
	vertical-align: middle;
	margin: 2px;
    cursor: pointer;
}
.prevnext_page, .prevnext_page:visited, .prevnext_page:hover {
	display: inline-block;
	min-width: 30px;
    height: 30px;
    width: auto;
	padding: 5px;
	border-radius: 50% 50% 50% 50%;
	background-image: url(/images/transparant_zwart_30.png);
	color: #444444;
	vertical-align: middle;
	margin: 2px;
    cursor: pointer;
}
.prevnext_page_invert, .prevnext_page_invert:visited, .prevnext_page_invert:hover {
	background-image: url(/images/transparant_wit_90.png);
	color: #444444;
}
.prevnext_next {
	display: inline-block;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	margin: 2px;
    cursor: pointer;
}
DIV.advertentie {
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}
.aanbieding {
	color: #000000;
	padding-left: 3px;
	padding-right: 3px;
	margin-bottom: 2px;
}
.aanbiedingslider {
	background-image: url(/images/transparant_zwart_30.png);
    margin: 10px 0px 10px 0px;
    display: inline-block;
    border-radius: 5px;
    overflow: hidden;
}
.popup {
	display: none;
	z-index: 10;
	width: 440px;
	position: absolute;
	left: 100px;
	top: 100px;
	background-image: url(/images/transparant_wit_85.png);
	padding: 3px;
	border-left: 1px solid #bbbbbb;
	border-top: 1px solid #cccccc;
	border-right: 1px solid #aaaaaa;
	border-bottom: 1px solid #999999;
	padding: 2px;
}
.hidden {
	display: none;
}
@keyframes blur {
    0%   { filter: blur(0px); }
    100%  { filter: blur(7px); }
}
.blur {
    animation-name: blur;
    animation-duration: 0.5s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
#overlay {
    z-index: 900;
    position: fixed;
    top: 0px; 
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: auto;
    display: none;
    background-image: url(/images/transparant_zwart_90.png);
    text-align: center; 
    vertical-align: middle;
}
.overlayfoto_houder {
    width: auto;
    vertical-align: bottom;
    display: inline-block;
}
.overlayitem_houder {
    display: none;
    position: relative;
    width: 95vw;
    height: 95vh;
    vertical-align: top;
    display: inline-block;
}
.overlayfoto {
	cursor: pointer;
	border-radius: 5px;
    vertical-align: top;
    max-width: 80vw;
    max-height: 85vh;
}
A.overlay_vorige {
	background-color: #ffffff;
	color: #000000;
	font-size: 150%;
	font-weight: bold;
	padding: 1px;
	padding-left: 10px;
	padding-right: 10px;
}
A.overlay_vorige:hover {
	color: #aaaaaa;
}
A.overlay_volgende {
	background-color: #ffffff;
	color: #000000;
	font-size: 150%;
	font-weight: bold;
	padding: 1px;
	padding-left: 10px;
	padding-right: 10px;
}
A.overlay_volgende:hover {
	color: #aaaaaa;
}
#slideshow {
	padding: 0px;
	margin: 0px;
	filter: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); 
}
.sharearea {
    width: auto; 
    clear: both;
    margin: 40px 0px 20px 0px;
}
.soundcloud {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000000;
    box-shadow: 2px 2px 5px #222222;
    border: none;
	border-radius: 5px;
	overflow: hidden;
}
.popup_message {
	display: none;
	position: fixed;
	z-index: 50;
	top: 40%;
	left: 25%;
	width: 50%;
	height: auto;
	background-color: #444444;
	background-image: url(/z73/images/schoolbord.jpg);
	background-position: bottom center;
	border: solid 3px #cc9933;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 2px 2px 5px #222222;
	text-align: center;
}
.popup_message_link, .popup_message_link:hover, .popup_message_link:visited {
	display: inline-block;
	background-color: #cc9933;
	color: #ffffff;
	border-radius: 5px;
	padding: 3px 10px 3px 10px;
}
.popup_message_exit {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	font-size: 120%;
	font-weight: bold;
	cursor: pointer;
}
.popup_message_counter_area {
	z-index: 10;
	position: absolute;
	top: -20px;
	left: -20px;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	vertical-align: middle;
	background-color: #cc9933;
	color: #ffffff;
	font-size: 130%;
	margin: 5px;
	border-radius: 50%;
	overflow: hidden;
}
.popup_message_counter {
	z-index: 1;
}
.popup_message_counter_piepiece {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 40px;
	height: 40px;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}
@keyframes popup_message_counter_animate {
	0%   { transform: rotate(0deg); }
	100%  { transform: rotate(-360deg); }
}
.nobr { 
	white-space: nowrap; 
}