/***********************************************\
Document:		Stylesheet (CSS)
Author:			Koen Kuijk for Princen-group
\***********************************************/

.imageMouseOverImage{
	display:none;
}
/* accordion edit thingy */
.accordionHeader, .accordionHeaderSelected{
	width:99%;
	padding: 0;
	border:1px solid #bbb;
	border-width:1px 0;
}
.accordionHeaderSelected .accordionLink{
	color:#78235C;
}
.accordionLink{
	color:#000;
	background:#eee;
	display:block;
	height:25px;
	line-height:25px;
	width:100%;
	font-size:12px;
	text-indent:10px;
	font-weight:bold;
	text-decoration:none;
}
.accordionContent{
	padding:10px;
}
.accordionContent td{
	line-height:18px;
}
/*  PageEdit mode styles */
.pageEdit, .moduleEdit{
	width:600px;
}
.pageEdit td, .moduleEdit td{
	vertical-align:top;
	line-height:18px;
	padding:0 5px 0 0;
}
.pageEdit .checkbox, .moduleEdit .checkbox{
	padding:4px 0 0 0;
}
.edit th{
	text-align:left;
	line-height:25px;
	color:#000;
	font-weight:bold;
	border:1px solid #eee;
	border-width:0 0 1px 0;
}
.apply{
	padding:10px 0;
	margin-left: 100px;
}
.UpdatingProgress{
	display:none;
}
/* treeview */
.selectPage{
	padding:5px 0;
}
.tree table td{
	padding:0;
	margin:0;
}
.tree table td a{
	text-decoration:none;
}
/* text in the Breadcrumb bar */
#breadCrumbs, #breadCrumbs a{
	font-size:12px;
	color:#000;
	text-transform:lowercase;
	text-decoration:none;
	line-height:30px;
}
#breadCrumbs{
	cursor:default;
}
#breadCrumbs .current{
	font-weight:bold;
}
.ModuleBorderHeader span, .ModuleBorderEditHeader span {
    font-size: 15px;
    position: relative;
    top: -10px;
}
/* fix voor kalender linkjes */
.calendar table td{
	padding:0;
	margin:0;
}
/* SubMenu link list */
.Sublinklist a{
	text-decoration:none;
	line-height:20px;
	color:#000;
	font-weight:bold;
}
/* links module */
.LinkPanel a{
	color:#78235C;
	font-weight:bold;
	text-decoration:none;
	padding:2px 15px 2px 0;
}
.LinkPanel a:hover{
	padding:2px 0 2px 15px;
	background:url(images/linkhoverbg.png) no-repeat left 6px;
}
/* submenu links */
.subMenuList{
	list-style:none;
	padding:0;
}
.subMenuList li{
	line-height:18px;
}
.subMenuList li a{
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	color:#78235C;
	padding:0 15px 0 0;
}
.subMenuList li a:hover{
	padding:0 0 0 15px;
	background:url(images/linkhoverbg.png) no-repeat left 6px;
}
/* edit screens */
.edit td, .module td{
	padding:2px 5px 2px 0;
}
/* contactForm */
.contactForm{
}
.contactForm td{
	padding:2px 10px 0 0;
	line-height:18px;
}
.contactForm .required{
	font-size:110%;
}
/* imagelinks */
.imageLinks td{
	padding:10px;
	text-align:center;
}
.imageLinks .editButtons{
}
.imageLinks .text, imageLinks .image{
	display:block;
	margin:0 auto;
}
.imageLinks .text{
	text-decoration:none;
	color:#000;
	font-size:13px;
	font-weight:bold;
	line-height:20px;
}
/* vacature */
.vacature{
}
.vacature .row1{
	background:#efefef;
}
.vacature .row2{
}
.vacature .row1o, .vacature .row2o{
	background:#ccc;
}
.vacature .vacatureHeader td{
	line-height:18px;
	font-weight:bold;
	border:1px solid #000;
	border-width:0 0 1px 0;
	padding:0 5px;
}
.vacatureList{
	line-height:20px;
}
.vacatureList td, .vacatureShow td{
	padding:2px 5px 2px 0;
}
.vacatureLink{
	display:block;
	text-indent:5px;
	text-decoration:none;
	color:#000;
	width:100%;
	height:100%;
}
.vacatureShow{	
}
.vacatureShow h1{
	line-height:25px;
	font-size:14px;
}
.vacatureShow th{
	line-height:25px;
	text-align:left;
}
/* aanmeld module */
.signIn ul{
	line-height:20px;
	list-style:none;
}
.signIn{
}
.autoLogin{
	padding:5px 0;
}
.forgotPassword{
}
.user{

}
.userTextbox{
}
.pass{
	padding-top:5px;
}
.userTextbox input, .passTextbox input{
	width:200px;
	border:1px solid #000;
}
.passTextbox
.autoLogin{
}
.forgotPassword{
	color:#000;
}
/* usermanagement */
.users{
	width:850px;
}
/* News */
.news{
}
.news .future, .news .archive, .news .current{
	display:block;
}
.future{
}
.archive{
}
.current{
}
.titleLink{
	display:inline-block;
	padding:0 2px;
	text-decoration:none;
	line-height:20px;
}
/* news Show */
.showNews{
}
/* siteMap */
.siteMap{
}
/* menu in adminitration */
.menu{
}
.menuButtons{
	list-style:none;
	padding-right:10px;
}
.menuButtons li{
	text-align:center;
}
/* html */
.html{
}
/* Rating */
.rating{
	padding:5px;
	height:15px;
	width:250px;
}
.rating .ratingStars{
	width:70px;
	height:12px;
	display: inline-block;
}
.rating .ratingText{
	line-height:12px;
	font-size:10px;
}
.ratingStar{
    cursor: pointer;
    display: block;
	width:13px;
	height:12px;
}
.filledRatingStar{
    background: url(/images/StarFilled.png) no-repeat;
}
.emptyRatingStar{
    background: url(/images/StarEmpty.png) no-repeat;
}
.savedRatingStar{
    background: url(/images/StarSaved.png) no-repeat;
}

.news, .showNews {
	padding: 0px 10px;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.news .rating {
	padding-left: 10px;
}

.news .rating .ratingStars {
	margin-top: 3px;
}

.news .rating .ratingText {
	line-height: 19px;
}

.news .header .titleH, .showNews .header .titleH{
	padding: 0px;
	margin: 0px;
}

.news .title, .showNews .title {
	font-weight: bold;
	font-size: 16px;
	float: left;
}

.news .date, .showNews .date {
	font-size: 10px;
	float: left;
	clear: left;
}

.news .shortContent {
	float: left;
	clear: both;
	margin-top: 8px;
	margin-bottom: 6px;
}

.news .shortContent tr{
	border-bottom: none;
}

.showNews .description {
	float: left;
	clear: both;
	margin-top: 8px;
	margin-bottom: 6px;
	border-top: 1px dotted #ccc;
	margin-top: 3px;
	padding-top: 7px;
	width: 100%;
}

.showNews #divSocialMedia {
	float: left;
	clear: left;
	margin-bottom: 15px;
	margin-top: 10px;
}

.showNews .apply {
	float: right;
	clear: right;
	padding: 10px 0px 0px 0px;
}

.showNews .discussion {
	float: left;
	clear: both;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 14px;
	box-shadow: 3px 3px 3px #ccc;
}

.showNews .discussion table {
	padding: 15px 21px;
}

.showNews .discussion table tr table {
	padding: 0px;
}

.showNews .discussion .ModuleBorderHeader {
	font-weight: bold;
}

.showNews .discussion .GridHeader {
	text-decoration: underline;
}

.showNews .discussion .NewsDate {
	font-style: italic;
}

.showNews .discussion .Normal {
	float: left;
    margin-bottom: 14px;
    margin-top: 5px;
    width: 100%;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 6px;
}

.news .readOn {
	float: left;
	clear: left;
	margin-bottom: 15px;
}

.news div table tr:nth-child(even) {
	background: #ccc;
}

.news div table tr td {
	padding: 10px;
}

.EditControlHtmlPanel .pagesContainer ul li{
	list-style:none;
}

.EditControlHtmlPanel .pagesContainer .pageHeader h2{
	font-size: 18px;
	margin-left: -10px;
	text-transform:uppercase;
}
.EditControlHtmlPanel .pagesContainer .pageContent{
	margin-left:20px;
	margin-top: 15px;
	margin-bottom: 15px;
}
.EditControlHtmlPanel .pageLinks{
	font-size:15px;
	text-transform:capitalize;
}
.EditControlHtmlPanel .pageLinks ul li{
	list-style:none;
}

.EditControlHtmlPanel .pageSelector{
	font-style:italic;
	font-size:15px;
	color:gray;
	
}
.EditControlHtmlPanel .pageSelector ul li{
	list-style:none;
	font-style:normal;
	display:inline;
	margin-left:10px;
	cursor: pointer;
	border:1px solid gray; 	
	padding:1px 3px;
	border-radius: 3px;
}
.EditControlHtmlPanel .pageSelector ul li:hover{
	background-color:pink;
}



/*----twitter module ---------*/

.TwitterContent {
	
}

.THeader .twitterIconKlein{
	font-size: 2.5em;
}

.THeader .THeaderNaam {
	font-size: 2.5em;
}

.TMessage {
	float: left;
	width: 100%;
	margin: 0px;
	border-bottom: 1px dotted #ccc;
	padding: 10px 12px 10px 12px;
	position: relative;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.TMessage:nth-child(even){
	background: rgba(204, 204, 204, 0.7);
	box-shadow: 1px 2px 3px -2px #666;
}

.TMessage img {
	float: left;
	margin-right: 5px;
}

.TMessage .TMessageText img, .TMessage .TSettings img {
	float: none;
}

.TMessageText {
	
}

.TSettings {
	float: left;
	clear: left;
	margin-left: 53px;
}

.TwitterScroll .LiteralTwitter {
	overflow: hidden;
	height: 120px;
	display: block;
	position: relative;
}

.twitter_up {
	width: 26px;
	height: 14px;
	left: 10px;
	position: absolute;
	bottom: 0px;
	cursor: pointer;
	background:url('images/twitter_up.png') no-repeat;
}

.twitter_down {
	width: 26px;
	height: 14px;
	left: 32px;
	position: absolute;
	bottom: 1px;
	cursor: pointer;
	background:url('images/twitter_down.png') no-repeat;
}


.TwitterScroll .TMessage {
	height: 100px;
	margin-bottom: 70px;
}

/*---einde twitter module-----*/



/*contactformulier*/

.contactForm tr {
	float: left;
	position: relative;
	clear: both;
}

.contactForm td {
	float: left;
	position: relative;
	min-width: 85px;
	min-height: 20px;
}

.contactForm td:nth-child(1) {
	clear:left;
}

.contactForm td:nth-child(2) {
	float: left;
	position: relative;
	min-width: 95px;
}

.contactForm td.required {
	
}

#ctl15_ReqPhone {
}

.contactForm input {
	float: left;
	position: relative;
	max-width: 300px;
	width: 100%!important;
}

.contactForm select {
	float: left;
	position: relative;
	max-width: 300px;
	width: 100%!important;
}

.contactForm textarea {
	float: left;
	position: relative;
	max-width: 300px;
	width: 100%!important;
}

.CartListItem td,
.ShopHeadCart td {
	padding: 6px 20px 0px 0px;
}

/*.contactForm .apply input, 
.formCreator .apply input,
.shopCartSmall .apply input,
.mailingRegister .apply input {
	top: 0px;
	opacity: 0;
	position: relative;
	width: 17px;
	height: 20px;
}

.formCreator .apply input {
	top: -20px;
}

.contactForm .apply, 
.formCreator .apply,
.shopCartSmall .apply,
.mailingRegister .apply {
	position: relative;
	padding:0px;
	width: 20px;
	margin: 10px 0px;
	height: 20px;
}

.contactForm .apply:before, 
.formCreator .apply:before,
.shopCartSmall .apply:before,
.mailingRegister .apply:before {
	content: "\e2bb";
	font-family: 'icomoon';
	font-size: 26px;
	position: absolute;
	text-align: left;
	width: 100%;
	display: block;
	top:0px;
	transition: all 0.1s;
	line-height: 20px;
}

.contactForm .apply:hover:before, 
.formCreator .apply:hover:before,
.shopCartSmall .apply:hover:before,
.mailingRegister .apply:hover:before {
	font-size: 30px;
	transition: all 0.1s;
}*/

/*einde contactformulier*/



/* terugknop nieuws aanpassen*/
.showNews .apply input {
	opacity: 0;
	position: absolute;
	right: 0px;
	top:0px;
	width: 24px;
	height: 24px;
}

.showNews .apply {
	position: relative;
	width:24px;
	height: 24px;
}

.showNews .apply:before {
	content:'\e2eb';
	font-family: 'icomoon';
	font-size: 24px;
	position: absolute;
	right: 0px;
	top: 0px;
}
/*einde terugknop nieuws aanpassen*/


/*smoelenboek aanpassingen*/

.edit .contacts .moduleContent > div > div > table > tbody > tr > td:nth-of-type(1)
{
	min-width: 20px;
} 

.contacts .moduleContent > div > div center table {
	display: block;
	width: 100%;
	float: left;
}

.contacts .moduleContent > div > div center table > tbody {
	display: block;
	width: 100%;
	float: left;
}

.contacts .moduleContent > div > div center table > tbody > tr {
	display: block;
	width: 100%;
	float: left;
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.contacts .moduleContent > div > div center table > tbody > tr > td {
	display: block;
	float: left;
	height: auto!important;
	padding: 5px;
	margin: 5px;
	text-align: center;
	
	-webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

.contacts .moduleContent > div > div center table > tbody > tr > td .contpic {
	/*float: left;*/
	display: inline-block;
}

.contacts .moduleContent > div > div center table > tbody > tr > td .contpic a{
	float: left;
	display: block;
}



.contacts .ButtonBar input {
	opacity: 0;
	position: absolute;
	right: 0px;
	top:0px;
	width: 24px;
	height: 24px;
}

.contacts .ButtonBar  dt > div {
	position: relative;
	width:24px;
	height: 24px;
}

.contacts .moduleContent > div {
	position: relative;
}

.contacts .ButtonBar {
	padding-left: 40px;
	float: left;
	width: 100%;
	margin: 10px 0px;
}

.contacts .ButtonBar:before {
	content:'\e311';
	font-family: 'icomoon';
	font-size: 24px;
	position: absolute;
	left: 0px;
	top: 10px;
}

.contacts .ButtonBar dl {
	position: relative;
	float: left;
	display: block;
}

.contacts .ButtonBar dl dt {
	position: relative;
	float: left;
	display: block;
	margin-right: 7px;
}

.contacts .ButtonBar  dt:nth-of-type(1) > div:before {
	content:'\e207';
	font-family: 'icomoon';
	font-size: 24px;
	position: absolute;
	right: 0px;
	top: 0px;
}

.contacts .ButtonBar  dt:nth-of-type(2) > div:before {
	content:'\e214';
	font-family: 'icomoon';
	font-size: 24px;
	position: absolute;
	right: 0px;
	top: 0px;
} 

.contacts .ButtonBar  dt:nth-of-type(3) > div:before {
	content:'\e262';
	font-family: 'icomoon';
	font-size: 24px;
	position: absolute;
	right: 0px;
	top: 0px;
}


/* einde smoelenboek aanpassingen*/


/* rss aanpassingen*/
.rss .moduleContent tr {
	margin: 15px 0px 30px 0px;
	display: inline-block;
	width: 100%;
}

.RssImage {
	float: left;
	margin-right: 10px;
	margin-bottom: 7px;
	margin-top: 3px;
	max-width: 200px;
	max-height: 142px;
    object-fit: cover;
    display: block;
    width: 100%;
    height: 100%;
}

.RssDescription {
	display: block!important;
    float: right;
    height: 142px;
    overflow: hidden;
    width: calc(100% - 230px);
    margin-top:0;
}

.rss .Normal > a {
    margin-bottom: 10px;
    display: block;
	font-weight: bold;
}

/* video responsive aanpassingen*/

.iframeResponsiveContainer {
	padding-bottom: calc(100% / (16 / 9));
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
}

.iframeResponsiveContainer iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/* rss feed aanpassingen */

.rssContent article {
	margin-bottom: 10px;
    margin-top: 20px;
	
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}


.rssContent article > h4 {
	-webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
	margin-bottom: 15px;
}

.rssContent article > h4 span {
	line-height: 24px;
}

.rssContent .RssImage {
	float: none;
    margin-right: 10px;
    margin-bottom: 7px;
    margin-top: 3px;
    object-fit: cover;
	
	max-width: none;
    max-height: none;
    display: block;
    width: auto;
    height: 142px;
	
	-webkit-flex: 0 0 200px;
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}

.rssContent .RssImage img {
	object-fit: contain;
    height: 100%;
    width: 100%;
	object-position: top;
}

.rssContent .RssDescription {
    display: block!important;
    float: none;
    height: 142px;
    overflow: hidden;
    margin-top: 0;
	position: relative;
	
	-webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}

.rssContent .RssDescription:before {
	content: '';
	display: block;
	width: 100%;
	height: 75px;
	position: absolute;
	bottom: 0;
	left: 0;
	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

}

.rssContent > span > span {
    margin-bottom: 40px;
    display: none;
}

.rssContent .RssReadmore {
	-webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
	padding-left: 210px;
	margin-top: 15px;
}

.rssContent .RssReadmore:after {
	content: '...';
	display: inline-block;
	margin-left: 3px;
}

.rssContent .show {
	display: block;
}

.rssContent .hidden {
	display: none;
}

.rssContent .showAll {
	display: block;
}

.rssContent .show .RssDescription {
	height: auto;
}

.rssContent .show h4 a {
	pointer-events: none;
	cursor: text;
}

.RssOptionalOverlayLink {
	display: none;
}

.rssContent .show .RssReadmore,
.rssContent .show .RssOptionalOverlayLink {
	display: none;
}

.customRssBack {
	cursor: pointer;
}

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px)
{
	.rssContent .RssImage {
		-webkit-flex: 1 1 100%;
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}
	
	.rssContent .RssReadmore {
		padding-left: 0;
	}
	
	.rssContent .RssImage img {
		object-fit: cover;
	}
}



@media only screen and (max-width: 1100px), only screen and (max-device-width: 1100px)
{
	
}

/* form valid check */
.FormCheckPopup {
	display: none;
}

.edit .FormCheckPopup {
	display: block;
}

.formPopup {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000000;
}

.formPopupBgr {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.6);
	cursor: pointer;
}

.formPopupPosition {
	width: 100%;
	height: 100%;
	display: flex;
	align-content: center;
    justify-content: center;
    align-items: stretch;
}

.formPopupContent {
	padding: 30px;
	position: relative;
	align-self: center;
	background: #ffffff;
	width: 700px;
    max-width: 90vw;
	max-height: 90vh;
    overflow: auto;
}

.formPopupClose {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 15px;
    height: 15px;
	cursor: pointer;
}

.formPopupClose:before,
.formPopupClose:after {
	content: '';
	width: 1px;
	height: 15px;
	background: #000000;
	transform: rotate(45deg);
	display: block;
	position: absolute;
	left: 8px;
}

.formPopupClose:after {
	transform: rotate(-45deg);
}

.errorElem {
    -webkit-animation: blink 2.0s linear infinite;
    -moz-animation: blink 2.0s linear infinite;
    -ms-animation: blink 2.0s linear infinite;
    -o-animation: blink 2.0s linear infinite;
    animation: blink 2.0s linear infinite;
}

@keyframes blink {
    0% {
        font-weight: normal;
    }
    25% {
        font-weight: bold;
    }
    50% {
        font-weight: normal;
    }
	75% {
        font-weight: bold;
    }
    100% {
        font-weight: normal;
    }
}
@-webkit-keyframes blink {
    0% {
        font-weight: normal;
    }
    25% {
        font-weight: bold;
    }
    50% {
        font-weight: normal;
    }
	75% {
        font-weight: bold;
    }
    100% {
        font-weight: normal;
    }
}
/* end form valid check */