@charset "utf-8";

html {
	scrollbar-face-color: #FFFFFF;
	scrollbar-shadow-color: #990000;
	scrollbar-highlight-color: #FFEEEE;
	scrollbar-3dlight-color: #EEEEEE;
	scrollbar-darkshadow-color: #660000;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #666666;
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 5px;
	margin-bottom: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	background-color: #FFFFFF;
}

a, a:link, a:visited {
	color: #CC0000;
	text-decoration: underline;
	/*font-style: italic; */
}

a:hover {
	color: #FFFFFF;
	background-color: #CC0000;
	text-decoration: none;
	/*font-style: italic;*/
}

form {
	margin-bottom : 0;
}

ul li {
	margin-left: -12px;
	font-size: 14px;
	list-style-position: outside;
	padding-left: 10px;
	padding-bottom: 0px;
	list-style-image: url(../grafisch/dot-rood.jpg);
	line-height:160%;
}

ol li {
	margin-left: -14px;
	list-style-position: outside;
	padding-left: 0px;
	line-height:150%;
}

table {
	font-size: 12px; 
	font-weight: 300; 
}

caption {
	font-size: 12px; 
	font-weight: bold; 
	font-style: italic;
	padding-top: 5px;
	padding-bottom: 5px;
}

.normaal {
	font-size: 12px;
	font-weight: 300;
	line-height:110%;
}



.kleiner {
	font-size: 11px;
	font-weight: 300;
}

.kleinerrood {
	font-size: 11px;
	font-weight: 300;
	color: #CC0000;
}


.klein {
	
	font-size: 10px;
	font-weight: 300;
	font-style: italic;
}

.kleinrood {
	
	font-size: 10px;
	font-weight: 300;
	color: #CC0000; 
	background-color: transparent;
	font-style: italic;
}
a.kleinrood:link { color: #CC0000; background-color: transparent;text-decoration: underline;}
a.kleinrood:visited { color: #CC0000; background-color: transparent;text-decoration: underline;}
a.kleinrood:hover {color:  #000000; background-color: #CC0000;text-decoration: none;}


.vet {
	
	font-size: 12px;
	font-weight: 600;
}

.vetrood {
	font-size: 12px;
	font-weight: 600;
	color: #CC0000;
}

.kopje {
	font-size: 14px;
	font-weight: 600;
	color: #000000;
	/*font-style: italic;*/
}

.kop {
	font-family: "Arial Black", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #CC0000;
	padding-top: 2px;
	padding-left: 0px;
	padding-right: 5px;
	padding-bottom: 6px;
	margin-top: 0px;
	background-color:transparent;
	
}

.knop {  font-size: 12pt; font-weight: 300; color: #FFFFFF; background-color: #999999; width: 200px; margin: 3px; border: 1px solid #CC0000;}

.knopbreed {  font-size: 12pt; font-weight: 600; color: #FFFFFF; background-color: #999999; width: 300px; margin: 3px; border: 1px solid #CC0000;}

.knopzeerbreed {  font-size: 12pt; font-weight: 600; color: #FFFFFF; background-color: #999999; width: 400px; margin: 3px; border: 1px solid #CC0000;}

.knopklein {  font-size: 11pt; font-weight: 300; color: #FFFFFF; background-color: #999999; width: 140px; margin: 3px; border: 1px solid #CC0000;}

.knopkleiner {  font-style: italic; font-size: 11pt; font-weight: 300; color: #FFFFFF; background-color: #999999; width: 180px; margin: 3px; border: 1px solid #CC0000;}


.rand {
	border: 1px solid #CC0000;
}

.vullinglicht {
	background-color: #CCCCCC;
}

.vullingdonker {
	background-color: #666666;
}

/* Nodig voor app */

.clearfloat { 
Deze class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt een zwevend object volledig dient te bevatten */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/* Zorg dat alle plaatjes in ui-grid-a automatisch de gehele breedte opvullen, maar niet breder dan de foto zelf is */
.ui-grid-a img, .ui-grid-solo img {
    max-width  : 96%;
    height : auto;
}

/* Zorg dat de video in het device past
uitgeschakeld: gaat fout op ipad3, daar wordt de video net zo breed als de ipad en de hoogte van de video wordt erg laag
video {
    max-width  : 100%;
    height : auto;
} */


/* Panel */
.ui-panel { 
	width: 15em;
}

.headerstijl {	
	border:none; 
	padding:0; 
	margin:0; 
	background-image:url(../grafisch/si-logo.gif); 
	background-position: 10px 4px; 
	background-repeat:no-repeat;
	background-color:#656565;
}

.headerboven {
	height: 64px; 
	width:100%;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1) !important;
}

.headeronder {
	margin: 0; 
	padding: 0px 0px 6px 14px; 
	border-top:#d31129 solid 4px;
	background-color:#c3c3c3;
	height:25px;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1) !important;
	
}

.kop {
	margin-top: 3px;
	font-size:20px;
	color:#000000;
	/* De text-shadow van data-theme="a" werkt heel leuk met witte letters maar maakt zwarte letters onleesbaar vet */
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1) !important;
    /* box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; */
}

.menuknopopenen {
	padding-top: 6px;
	background-color:#cf152d;
	color:#FFF;
	border:#cf152d solid medium;
	border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-bottom-right-radius: 10px;
	width:40px;
	height:20px;
	float:right;
	padding:0px;
	margin: 0px 10px 0px 0px;
	text-align:center;
	font-size:12px;
	text-shadow: 0px 0px 0px rgba(0, 0, 0, 1) !important;
}

.ui-content {
	margin-top:0px; !important;
}