/* ######################## */
/* #   Generic elements   # */
/* ######################## */

/* Generic thumb | Generic image header */
.thumb, .map
{
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
display: block;
position: relative;
box-sizing: border-box;
}

.noImage
{
background-color: #DDD;
background-image: url(../images/default.svg);
background-size: auto 60%;
background-position: center center;
}

.thumb { width: 25%; float: left; margin-right: 3%; }

.thumb:before, .imageheader:before, .map:before { content: " "; display: block; }
.thumb:before { padding-top: 75%; }
.map:before { padding-top: 66%; }

.cloud .thumb, .cloud .imageheader { border-radius: 5px; }



/* ############################ */
/* #   Base widget elements   # */
/* ############################ */

/* Base widget container */
.widget, .widget > *,
.titlebar, .content, .footer, .button, .item /* For single elements */
{
box-sizing: border-box;
position: relative;
}

.base
{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

/* Equal offset in widget */
.titlebar, .content, .footer, .button
{
padding: 5px 15px;
}

/* Titlebar */
.titlebar
{
line-height: 30px;
font-size: 1.3rem;
}
	/* Combinations */
	.titlebar a, .titlebar h2, .titlebar h3
	{
	text-decoration: none;
	margin: 0px;
	line-height: 30px;
	font-size: 1.3rem;
	}
	
	.titlebar .button
	{
	float: right;
	position: absolute;
	top: 0px;
	right: 0px;
	background: rgba(255,255,255,0.2);
	font-size: 1rem;
	height: 100%;
	}
	
	.titlebar .button:hover { background: rgba(255,255,255,0.35); }
	.air .titlebar .button:hover { background-color: transparent; opacity: 0.7; }
	.bigrain .titlebar .button:hover { text-decoration: underline; }
	
@media print {
	#wrapper .titlebar { background: transparent; border-bottom: 1px solid #E4E4E4; }
	#wrapper .titlebar, #wrapper .titlebar h3 { color: #666666; }
	.titlebar .button { display: none; }
}

/* Content */
/* In base not much, used mostly for other styles */
.content {  }
.widget .content span.date { display: block; }

.widget .content .imgLabel img, .widget .content p img  { height: auto; }

/* Footer */
/* In base not much, used mostly for other styles */
.footer { display: block; clear: both; }
.footer .more { text-align: right; }

/* Placeholder */
.widget.placeholder
{
padding: 20px;
text-align: center;
color: #CCC;
font-size: 2rem;
line-height: 60px;
box-shadow: none!important;
background-color: transparent!important;
display: none;
}

.widget.placeholder.showborder { border: 1px dotted rgba( 0,0,0,0.15); min-height: 100px; }

@media (min-width: 400px) {
	.widget.placeholder { display: block; }
}

.placeholder.buttons { padding-top: 10px; }

.placeholder.bigrain .titlebar, .placeholder.bigrain.base { background: transparent; box-shadow: none; }

/* ####################### */
/* #   Widget specific   # */
/* ####################### */

/* ############### */
/* #   Banners   # */
/* ############### */

/* Button banner */

.banner, .textbanner
{
background-color: #DDD;
display: block;
margin-bottom: 10px;
}

.banner:hover, .textbanner:hover .bannercontent { opacity: 0.7; }

.banner
{
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
}

.banner:before
{
content: " ";
display: block;
padding-top: 30%;
}

.banner.noImage
{
background-color: #DDD!important;
background-image: url(../images/default.svg);
background-size: auto 60%;
background-position: 20px center;
}

/* Variant textbanner */
.textbanner { background-color: #DDD; }
.textbanner .thumb { width: 30%; }
.textbanner .bannercontent { width: 67%; }

.textbanner .bannercontent .title { font-size: 1.3rem; }
.textbanner .overlay {  padding: 10px; }

.textbanner .overlay:after 
{
content: " ";
display: block;
clear: both;
}

	/* Apply styles */
	.bigrain .banner, .bigrain .textbanner { margin-bottom: 20px; }
	.air .textbanner .bannercontent .title { font-size: 1.4rem; }
	
/* ############### */
/* #   Twitter   # */
/* ############### */
.twitter .thumb { width: 60px; height: 60px; }

.twitter .thumb.noImage
{
background-image: url(../images/defaultUser.svg);
background-size: cover;
background-color: transparent;
}

.twitter .user { font-size: 1.2rem; display: block; text-decoration: none; color: #000000; }
.twitter .user:hover { text-decoration: underline; }
.twitter .time { position: absolute; right: 0px; top: 0px; }
.twitter .footer { text-align: right; }

	/* Apply styles */
	.rain.twitter .time { top: 5px; right: 10px;}
	.rain.twitter .content { padding: 0px; }
	.rain.twitter .footer { background: rgba(0,0,0,0.05); }
	
	.air.twitter .item, .bigrain.twitter .item { margin: 20px 0px; }
	
/* #################### */
/* #   Live meeting   # */
/* #################### */	

/* Hardcoded based on html of risbis :( */
.rain.meeting .content { padding: 0px; }
.rain.meeting .next, .rain.meeting #next_live { padding: 10px 15px; }

.meeting .next a,
.meeting #next_live a
{
float: right;
position: absolute;
top: -40px;
right: 0px;
background: rgba(255,255,255,0.2);
font-size: 1rem;
padding: 5px 15px;
text-decoration: none;
line-height: 30px;
}

.meeting .next a:before, .meeting .next ul:before,
.meeting #next_live a:before, .meeting #next_live ul:before
{

font-family: "FontAwesome";
position: relative;
margin-right: 5px;
display: inline-block;
}

.meeting .next a:hover, .meeting #next_live a:hover { background: rgba(255,255,255,0.35); }
.meeting .next h3, .meeting #next_live h3 { margin-bottom: 15px; }
.meeting .next h3 span, .meeting #next_live h3 span { font-size: 1.1rem; display: block; }
.meeting .next ul, .meeting #next_live ul { list-style: none; margin: 0px; font-style: normal; }
.meeting .next li, .meeting #next_live li { display: inline-block; margin-right: 10px;}
.meeting .next a:before, .meeting #next_live a:before { content: "\f0ca"; }
.meeting .next .meta:before, .meeting #next_live .meta:before { content: "\f017"; }
.meeting .next li span, .meeting #next_live li span { display: none; }

.meeting #uitzending { width: 100%; position: relative; }

.meeting #live_player
{
width: 100%;
height: auto;
min-height: 90px;
background-color: #DDD;
margin-bottom: 10px;
}

.meeting .footer { text-align: right; }

/* Live widget ( current agenda item ) */
.meeting ul.agenda li { display: block; clear: both; }
.meeting ul.agenda span { display: inline-block; }

.meeting ul.agenda li.title { padding-bottom: 0px; border-bottom: 1px solid rgba( 0, 0, 0, 0.1 ); }
.meeting ul.agenda li.title span { font-weight: bold; font-size: 0.9rem; }
.meeting ul.agenda li.active { border-bottom: 1px solid rgba( 0, 0, 0, 0.1 ); }

.meeting ul.agenda li.active .nr
{
display: inline-block;
min-width: 20px;
margin-right: 10px;
font-weight: bold;
border-right: 1px dotted rgba( 0, 0, 0, 0.3 );
}

.meeting #live_player~#next { display: none; }
.meeting #live_player { position: absolute; top: 0px; }
.meeting #live_meta:before { content: " "; padding-top: 60%; display: block; }
	
	/* Size specifics */
	.meeting.single .meta li { margin-right: 2px; padding-top: 0px; font-size: 0.8rem}
	
	
	/* Style specifics */
	.air.meeting .next a, .bigrain.meeting .next a { background-color: transparent; }
	.air.meeting .next a:hover { background-color: transparent; opacity: 0.7; }
	.bigrain.meeting .next a:hover { text-decoration: underline; }

	.cloud.meeting .next a, .rain.meeting .next a { color: #FFFFFF; }
	.cloud.meeting .next a, .cloud.meeting #next_live a { right: -15px; top: -50px; }

	.rain.meeting .content { padding: 0px; }
	.rain.meeting .next { padding: 10px 15px; }
	
	.bigrain.meeting .next a { top: -47px }

/* ################# */
/* #   Risevents   # */
/* ################# */

.risevents #next a
{
position: relative;
top: auto;
right: 0px;
bottom: 33px;
}

.risevents .calendar { clear: both; }
.risCalendar { padding: 10px; }
.risevents .when { color: #303F4C; }

	/* Style specific tweaks */
	
	.cloud .calendarHolder { border-radius: 0px 0px 7px 7px; }
	.air.risevents .tabs { padding: 0px 15px; }
	
/* ################ */
/* #   Calendar   # */
/* ################ */	

/* Basic calendar */
.calendar {  }

.calendar .titlebar { padding: 0px; text-align: center;}

.calendar .titlebar a.previous_month,
.calendar .titlebar a.next_month
{
background: rgba(255,255,255,0.2);
padding: 5px;
display: inline-block;
font-size: 1rem;
}
.calendar .titlebar a.previous_month { padding-left: 0; }
.calendar .titlebar a.next_month { padding-right: 0; }

.calendar .titlebar .previous_month span,
.calendar .titlebar .next_month span
{
display: none;
}

.calendar .titlebar .previous_month:before,
.calendar .titlebar .next_month:after
{
display: inline-block;
font-family: "FontAwesome";
}

.calendar .titlebar .current_month { padding: 5px 0px; display: inline-block; font-size: 1.1rem; }
.calendar .titlebar .next_month {float: right;  }
.calendar .titlebar .previous_month { float: left; }

.calendar .titlebar .previous_month:before { content: "\f053\f053"; }
.calendar .titlebar .next_month:after { content: "\f054\f054"; }

.calendar .titlebar .previous_month:hover,
.calendar .titlebar .next_month:hover
{
background: rgba(255,255,255,0.35);
}

@media print {
	.calendar .titlebar a.previous_month,
	.calendar .titlebar a.next_month
	{ display: none; }
	
	.calendar .titlebar a.current_month:after { display: none; }
	#wrapper .calendar .titlebar a.current_month span
	{
		color: #666;
	}
}

.monthContainer ul { list-style: none; position: relative; margin: 0px; }
.monthContainer ul:after { display: block; content: " "; clear: both; margin: 0px; }
.monthContainer li
{
display: block;
width: calc( 100% / 7 );
box-sizing: border-box;
float: left;
border-left: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
text-align: right;
position: relative;
font-size: 0.9rem;
}

.monthContainer li span, .monthContainer li a
{
display: block;
text-align: right;
position: relative;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 5px;
color: inherit;
text-decoration: none;
}

.monthContainer li a:before
{
display: block;
content: " ";
position: absolute;
border-radius: 20px;
background-color: #F47721; /* To client CSS */
width: 16px;
height: 16px;
margin: 2px;
bottom: 2px;
}

.monthContainer li:not(.empty) span:after, .monthContainer li a:after, .monthContainer li.empty:after
{
content: " ";
padding-top: 65%;
display: block;
z-index: -1;
}
.monthContainer li.empty span{ padding:1.7px 0; }

.monthContainer ul li:first-of-type { border-left: 1px solid transparent; }
.monthContainer ul:last-of-type li { border-bottom: 0px; }

.monthContainer #today:before
{
content: " ";
display: block;
width: calc(100% + 2px);
height: calc( 100% + 2px );
position: absolute;
left:-1px;
top: -1px;
border: 2px solid #F47721; /* To client CSS */
box-sizing: border-box;
}

.monthContainer .empty span { opacity: 0.6; }

.monthContainer .days { background-color: rgba(0,0,0,0.05); }
.monthContainer .days li { border: 0px; }
.monthContainer .days li span { text-align: center; }
.monthContainer .days li span:after { display: none; padding: 0px; }

	/* Style specific */
	/* Titlebar */
	
	.air.calendar .titlebar a, .bigrain.calendar .titlebar a,
	.air.calendar .titlebar a:hover, .bigrain.calendar .titlebar a:hover
	{ background: transparent; }
	
	.air.calendar a:hover { background-color: transparent; opacity: 0.7; }
	.bigrain.calendar a:hover { text-decoration: underline; }
	
	.air.calendar .current_month, .bigrain.calendar .current_month { font-family: inherit; }
	.air.calendar a.current_month, .bigrain.calendar a.current_month,
	.air.calendar a.current_month span, .bigrain.calendar a.current_month span { color: #303F4C; font-size: 1.4rem; }
	
	.bigrain.calendar .titlebar a.current_month { font-family: inherit; }
	
	.cloud.calendar .titlebar a.previous_month { border-radius: 7px 0px 0px 0px; }
	.cloud.calendar .titlebar a.next_month { border-radius: 0px 7px 0px 0px; }
	
	/* Day labels */
	.bigrain .monthContainer .days, .air .monthContainer .days { border-top: 3px solid rgba( 0,0,0,0.1); }
	.bigrain.calendar .titlebar.caption a { margin-bottom: 0px; }
	
/* #################### */
/* #   Producticons   # */
/* #################### */	
.producticons .content { text-align: center; font-size: 0rem; }

.icon
{
text-decoration: none;
display: inline-block;
width: 150px;
padding: 20px;
box-sizing: border-box;
font-size: 1rem;
}

.icon span { color: #6f7576; }
.icon .fa { display: block; margin-bottom: 10px; }
.icon .label { font-size: 1.2rem; }
.icon:hover .fa { color: inherit; }
	
	/* Style specific */
	.rain .icon:hover { background-color: rgba(0,0,0,0.05); color: #6f7576; }

/* ################ */
/* #   Tagcloud   # */
/* ################ */

.tagcloud ul { list-style: none; margin: 0px; }
.tagcloud li { display: inline; line-height: 2; }
.tagcloud li a { display: inline-block; color: #6a7276; }

.tagcloud .step1 { font-size: 0.9rem; }
.tagcloud .step2 { font-size: 1.1rem; }
.tagcloud .step3 { font-size: 1.3rem; }
.tagcloud .step4 { font-size: 1.5rem; }
.tagcloud .step5 { font-size: 1.7rem; }



/* ################## */
/* #   Tabcontent   # */
/* ################## */

/* Base (for mobile) */
.tabcontent .tabs { display: none; }
.tabcontent .tab { margin-bottom: 10px; }

/* Switching content for mobile */
.tab .content { display: none; }
.tabcontent .active .content { display: block; }

.tabcontent .tabtitle { cursor: pointer; }
.tabcontent .tabtitle h3, .tabcontent .tabtitle span { pointer-events: none; } /* For javascript */

.tabcontent .tabtitle .fa { font-size: 1.2rem; position: relative; margin-right: 0px; }
.tabcontent .tabtitle .fa-caret-up { top: 5px; } 

.tabcontent .tabtitle .fa-caret-up { display: none; }
.tabcontent .active .tabtitle .fa-caret-up { display: block; }
.tabcontent .active .tabtitle .fa-caret-down { display: none; }

.cloud.tabcontent .tabtitle { border-radius: 7px; }
.cloud.tabcontent .active .tabtitle { border-radius: 7px 7px 0px 0px; }

/* For iPad */
@media (min-width: 600px) {
	.tabcontent .tabs { display: block; float: left; width: 20%; }
	.tabcontent .tab { margin-bottom: 0px; min-height: 100px; }
	.tabcontent .contentholder { float: left; width: 100%;  }
	.tabcontent .tabtitle { display: none; }
	
	/* Swtiching content */
	.tab .content { display: block; }
	.tab { display: none; }
	.tab.active { display: block; }
	
}

/* Minor repsonsive tabs */
@media (max-width: 899px) {
	.tabcontent .tabs a, .tabcontent .tabs span { width: 100%; float: none; }
}


@media (min-width: 900px) {
	.tabcontent .tabs { width: 100%; float: none; }
	.tabcontent .contentholder { float: none; width: 100%; }
	
	.air.tabcontent .tabs a, .air.tabcontent .tabs span { min-width: 100px; }
	.air.tabcontent .tabs { padding: 0px 15px; }
}

@media print {
	.tabcontent .tabs { display: none; }
	#wrapper .tabcontent .contentholder .tab { display: block; }
	#wrapper .tabcontent .tab .content { display: block; }
	.tabcontent .contentholder .tab+.tab { border-top: 1px solid #E4E4E4; }
	.tabcontent .tabtitle { display: block; }
}

/* ############### */
/* #   Address   # */
/* ############### */

.address {  }
.address .map { margin-bottom: 10px; }
.address address { font-style: normal; }

.address address a { text-decoration: none; color: inherit; }
.address address a:hover { text-decoration: underline; }

.address .general
{
width: 50%;
float: left;
box-sizing: border-box;
padding-right: 10px;
padding-top: 5px;
}

.address .general > a, .address .general > span { display: block; }

.address .phone
{
width: 50%;
float: right;
font-size: 1.4rem;
text-align: center;
border-left: 1px solid rgba( 0,0,0,0.05);
box-sizing: border-box;
}

.address .phone .fa { font-size: 5rem; margin-bottom: 10px; clear: both; display: block;}

/* ############ */
/* #   Poll   # */
/* ############ */

.poll {  }

.poll input.button { margin-top: 10px; }

.poll .results { list-style: none; margin: 10px 0px 0px 0px; padding-right: 20px; }
.poll .results .label { font-weight: bold; }

.poll .barholder
{
display: block;
position: relative;
margin-bottom: 10px;
}

.poll .bar
{
display: block;
background: #F47721;/* To client CSS */
height: 5px;
width: auto;
transition: width 1s ease-in-out;
position: relative;
}

.poll .perc
{
position: absolute;
right: -30px;
top: -8px;
font-size: 0.8rem;
line-height: 20px;
}

/* ################# */
/* #   Slideshow   # */
/* ################# */
/* BASE */
.baseSlideshow { position: relative; }
.baseSlideshow ul { list-style: none; margin: 0px; position: relative; }
.baseSlideshow .content { padding: 0px; }
.baseSlideshow .content .imageheader { margin: 0px; }

/* Relative height */
.baseSlideshow:after { content: " "; display: block; }
.baseSlideshow:after { padding-top: 33%; }
.baseSlideshow.h4x3:after { padding-top: 75%; }
.baseSlideshow.h16x9:after { padding-top: 56%; }
.baseSlideshow.h1x1:after { padding-top: 100%; }
.baseSlideshow.h2x1:after { padding-top: 50%; }
.baseSlideshow.h3x1:after { padding-top: 33%; }

.baseSlideshow .noImage { background-size: 100px auto; background-position: center center; }

/* Fixed height */
.titlebar+.baseSlideshow .nav
{
right: 5px;
top: -30px;
left: auto;
background-color: transparent;
}

	/* Style specific tweaks */
	.cloud .baseSlideshow li { border-radius: 0px 0px 7px 7px; }
	.air .titlebar+.baseSlideshow .nav, .bigrain .titlebar+.baseSlideshow .nav { color: #F47721; /* To client css */ }
	.bigrain .titlebar+.baseSlideshow .nav { top: -40px; }
	.bigrain .overlay { padding: 15px; }

	
	
	
/* Twitter widget */
.widget.twitter .itemcontent { width: calc(97% - 60px); float: right; }
.widget.twitter .accountname { font-size: 0.8rem; color: inherit; }
.widget.twitter .tweet h4 { margin-bottom: 10px; }

.widget.twitter.showColumns
{
	
}


@media ( min-width: 460px ) and ( max-width: 991px ){
	
	.widget.twitter.showColumns .item { float: left; border: 0px; }
	
	.widget.twitter.showColumns.half .item { 	width: calc( 100% / 2 ); }
	.widget.twitter.showColumns.half .item:nth-of-type( 2n+1 ) { clear: left; }
	
	.widget.twitter.showColumns.threequarter .item { 	width: calc( 100% / 2 ); }
	.widget.twitter.showColumns.threequarter .item:nth-of-type( 2n+1 ) { clear: left; }
	
	.widget.twitter.showColumns.full .item { 	width: calc( 100% / 2 ); }
	.widget.twitter.showColumns.full .item:nth-of-type( 2n+1 ) { clear: left; }
	
	
}


@media ( min-width: 992px ){
	
	.widget.twitter.showColumns .item { float: left; border: 0px; }
	
	.widget.twitter.showColumns.half .item { 	width: calc( 100% / 2 ); }
	.widget.twitter.showColumns.half .item:nth-of-type( 2n+1 ) { clear: left; }
	
	.widget.twitter.showColumns.threequarter .item { width: calc( 100% / 3 ); }
	.widget.twitter.showColumns.threequarter .item:nth-of-type( 3n+1 ) { clear: left; }
	
	.widget.twitter.showColumns.full .item { width: calc( 100% / 4 ); }
	.widget.twitter.showColumns.full .item:nth-of-type( 4n+1 ) { clear: left; }
	
	
}