@charset "utf-8";
/******************************************* XS = DEFAULT *******************************************/

/*********************** COMMON ***********************/
html {
	/* themakleur groen */
	background: url('../images/bg_html.png') repeat-x #FFFFFF;
}

body {
	font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #666666;
}

.clearfix:before, .clearfix:after {
	display: table;
	line-height: 0;
	content: "";
}

.clearfix:after {
	clear: both;
}

.left {
	float: left;
	display: inline;
	padding: 0;
	margin: 0;
}

.right {
	float: right;
	display: inline;
	padding: 0;
	margin: 0;
}

h1, h2, h3, h4 {
	font-weight: normal;
	padding: 0;
	margin: 0;
}

input, select, textarea, input[type="text"], input[type="password"] {
	padding: 8px;
	font-family: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

form {
	padding: 0;
	margin: 0;
}

.btn {
	display: inline-block;
	color: #ffffff;
	border: none;
	font-size: 14px;
	text-decoration: none;
	padding: 8px 15px;
	background-color: #222222;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.btn:hover {
	color: #ffffff;
	text-decoration: none;
	background-color: #444444;
}

.cright #content div.wrapper.clearfix, .innerpage #content div.wrapper.clearfix, .cleft #content div.wrapper.clearfix {
	background-color: #ffffff;
}

/*********************** CONTAINERS ***********************/
.homepage .headercontainer {
	padding: 0;
}

#content .container {
	background-color: #ffffff;
	padding-top: 30px;
}

.container {
	padding-left: 0;
	padding-right: 0;
}

#content .contentLeftInside {
	padding: 0 20px;
}

/*********************** HEADER ***********************/
#header #logo, #subheader #logo {
	background-image: url('../images/bg_logo_xs.png');
}

#subheader .container {
	background-color: #ffffff;
}
/*********************** FOOTER ***********************/
#footer .footertoptop, #footer .footermiddle {
	height: 25px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
}

#footer .footertoptop {
	background-color: #ffffff;
}

#footer .footermiddle {
	background-color: #dbdbdb;
}

#footer .footertop {
	padding: 40px 0;
}

#footer .contentLeft .btn {
	display: inline-block;
	color: #ffffff;
	border: none;
	font-size: 14px;
	text-decoration: none;
	padding: 8px 15px;
	margin: 0 0 10px 0;
	background-color: #666666;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#footer .contentLeft .btn:hover {
	display: inline-block;
	color: #ffffff;
	border: none;
	font-size: 14px;
	text-decoration: none;
	padding: 8px 15px;
	margin: 0 0 10px 0;
	background-color: #888888;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

#footer .contentLeft ul.social {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer .contentLeft ul.social li {
	float: left;
	display: inline;
}

#footer .contentLeft ul.social li a.twitter {
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/bg_social_icons.png') 5px 0 no-repeat;
	padding: 0;
	margin: 8px 0 0 10px;
	text-indent: -9999em;
}

#footer .contentLeft ul.social li a.facebook {
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/bg_social_icons.png') -35px 0 no-repeat;
	padding: 0;
	margin: 8px 0 0 10px;
	text-indent: -9999em;
}

#footer .contentLeft ul.social li a.googleplus {
	display: block;
	width: 20px;
	height: 20px;
	background: url('../images/bg_social_icons.png') -75px 0 no-repeat;
	padding: 0;
	margin: 8px 0 0 10px;
	text-indent: -9999em;
}

#footer .copyright {
	padding: 10px 0 0 0;
	color: #cccccc;
}

#footer .copyright a {
	color: #cccccc;
	text-decoration: none;
}

#footer .copyright a:hover {
	text-decoration: underline;
}

#footer .contentLeft h2, .footer .contentRight h2 {
	padding: 0;
	margin: 0 0 10px 0;
}

#footer #footerLogo a {
	margin-left: 10px;
	margin-right: 10px;
	height: inherit;
}

#footer .footerbottom {
	padding-bottom: 10px;
}

/*********************** MENUS ***********************/
/*********************** HOMEPAGE ***********************/
/*** Other ***/
#subheader .container {
	position: relative;
}

.cright.homepage #content .contentLeft.margintop {
	z-index: 10;
}

.cright.homepage #content .contentRight {
	margin-top: 0px;
	background-color: #ffffff;
	padding-top: 20px;
	z-index: 1;
}

/*** Kids ***/
#kids {
	/* themakleur licht bij groen */
	background: url('../images/bg_box_bottom_right.png') right bottom no-repeat #f5fbe9;
}

#kids .header {
	/*themakleur groen */
	background: #9fdc29;
}

#kids .header h2 {
	text-shadow: 2px 2px 0px #6fca14;
	color: #ffffff;
}

#kids ul li {
	color: #9fdc29;
}

#kids ul li a {
	color: #9fdc29;
	font-size: 14px;
	text-decoration: none;
}

#kids ul li a:hover {
	text-decoration: underline;
}

/*** Parents ***/
#parents {
	background: url('../images/bg_box_bottom_right.png') right bottom no-repeat #e5f8fd;
}

#parents .header {
	background: #00bfe9;
}

#parents .header h2 {
	text-shadow: 2px 2px 0px #009fde;
	color: #ffffff;
}

#parents ul li {
	color: #00bfe9;
}

#parents ul li a {
	color: #00bfe9;
	font-size: 14px;
	text-decoration: none;
}

#parents ul li a:hover {
	text-decoration: underline;
}

/** Agenda ***/
#agenda h2 {
	color: #8748ab;
}

#agenda table th {
	color: #8748ab;
}

/*** Calendar ***/
#calendar {
	background: url('../images/bg_box_bottom_right.png') right bottom no-repeat #f6e5ff;
}

#calendar .header {
	background: #8748ab;
	padding: 10px 10px 8px 20px;
}

#calendar .header h2 {
	text-shadow: 2px 2px 0px #4b2481;
}

#calendar .header h2 a {
	text-shadow: 2px 2px 0px #4b2481;
}

#calendar table th {
	border-right: solid 1px #ebd5f6;
}

#calendar table td {
	border-right: solid 1px #f3ecf6;
	border-bottom: solid 1px #f3ecf6;
}

#calendar table td.kids {
	background: url('../images/bg_table_cat.png') top right no-repeat #9fdc29;
}

#calendar table td.parent {
	background: url('../images/bg_table_cat.png') top right no-repeat #00bfe9;
}

#calendar .btn {
	background: #8748ab;
}

#calendar .btn:hover {
	background: #9257b3;
}

#calendar ul li .legendaKids {
	background: #9fdc29;
}

#calendar ul li .legendaAdult {
	background: #00bfe9;
}

/*** Teachers ***/
#teachers .carousel .carousel-inner>.item>.photowrapper>.imageoverlay {
	background-image: url('../images/bg_teacher_photo_holder.png');
}

#teachers .carousel  .carousel-inner>.item>.description {
	background-image: url('../images/bg_teacher_description_holder_bottom.png');
	margin-top: -50px;
	padding-top: 60px;
}

/*********************** COMPONENTS ***********************/
/*** Menus ***/
.contentLeftInside ul {
	padding: 20px 0 20px 20px;
	margin: 0;
}

#content .contentRightInside {
	padding: 0 20px;
	border-left: 1px solid #dddddd;
}

.subnavi, #content .contentLeftInside .subnavi {
	list-style: none outside none;
	margin: 0 0 20px;
	padding: 0;
}

.contentLeftInside ul.subnavi {
	list-style: none;
	padding: 0;
	margin: 0 0 20px 0;
}

.contentLeftInside ul.subnavi li {
	padding: 0;
	margin: 0 0 1px 0;
}

.contentLeftInside ul.subnavi li a {
	display: block;
	padding: 9px 0 7px 10px;
	background: #e5f8fd;
	color: #00bfe9;
	text-decoration: none;
}

.contentLeftInside ul.subnavi li>a:hover, .contentLeftInside ul.subnavi li.active>a {
	background: #cdf0f9;
}

.newsoverview {
	margin: 0;
}

.newsoverview h2, h2 {
	color: #00bfe9;
	padding: 0;
	margin: 0 0 10px 0;
}

.newsoverview .item {
	margin-bottom: 20px;
}

.newsoverview .item h3, .item h3 {
	color: #00bfe9;
	padding: 0;
	margin: 0;
}

div.detailimgwrap.leftfloat img {
	margin: 10px 20px 20px 0px;
}

.footerWrapper {
	padding: 0;
	margin: 0 auto;
}

div.left.special {
	width: 100%;
}

#content .contentLeft.margintop {
	margin-top: 0;
}

.innerpage #content .contentLeftInside, .innerpage #content .contentRightInside {
	margin-top: 0px;
	padding-top: 10px;
}

#logo a {
	background: url("../images/logo_dummy.png") no-repeat scroll center top transparent;
}

/******************************************* SMALL (SM) *******************************************/
@media ( min-width : 650px) {
	/*********************** CONTAINERS ***********************/
	/*********************** HEADER ***********************/
	#headercarrousel {
		display: block;
		height: 280px;
	}
	/*********************** FOOTER ***********************/
	#footer .footertoptop, #footer .footermiddle {
		height: 45px;
	}
	#footer .footertop {
		padding: 30px 0;
	}
	#footer #footerLogo, #footer #footerSearchContainer {
		padding-left: 20px;
		padding-right: 20px;
	}
	/*********************** MENUS ***********************/
	/*********************** HOMEPAGE ***********************/
	.homepage #subheader .container {
		padding-bottom: 0;
	}
	#teachers .carousel  .carousel-inner>.item>.description {
		background-image: url('../images/bg_teacher_description_holder_right.png');
		margin: 0 0 0 -30px;
		padding: 25px 15px 15px 60px;
	}
	/*********************** OTHER ***********************/
}
/******************************************* MEDIUM (MD) *******************************************/
@media ( min-width : 992px) {
	/*********************** CONTAINERS ***********************/
	#content .contentLeft.margintop {
		margin-top: -150px;
	}
	#content .container {
		padding-top: 35px;
	}
	/*********************** HEADER ***********************/
	#header {
		background-image: none;
	}
	#header .logocontainer {
		margin-left: 5px;
		margin-bottom: -40px;
	}
	#header #logo, #subheader #logo {
		padding: 6px 30px 45px;
		background-image: url('../images/bg_logo.png');
	}
	#header #logo a, #subheader #logo a {
		width: 220px;
		height: 110px;
	}
	#headercarrousel {
		height: 335px;
	}
	#headercarrousel .carrouselDescriptions {
		display: block;
		top: 195px;
		right: 15px;
		width: 320px;
		height: 150px;
		color: #ffffff;
		padding-bottom: 20px;
		background: url('../images/bg_box_bottom_right.png') right bottom no-repeat #E63323;
	}
	#headercarrousel .carrouselDescriptions .carrouseltitle {
		text-shadow: 2px 2px 0px #c72c1e;
		font-size: 20px;
		color: #ffffff;
	}
	.cleft #headercarrousel .carrouselDescriptions {
		right: auto;
		left: 20px;
		top: 165px;
		width: 280px;
	}
	/*********************** FOOTER ***********************/
	#footer .footertoptop, #footer .footermiddle {
		height: 75px;
	}
	#footer .footertop {
		padding: 10px 0;
	}
	#footer #footerLogo, #footer #footerSearchContainer {
		padding-left: 30px;
		padding-right: 30px;
	}
	/*********************** MENUS ***********************/
	.mainmenu {
		float: left;
	}
	.mainmenu ul {
		padding-left: 0;
	}
	.mainmenu ul li {
		margin-bottom: 0;
	}
	.mainmenu .subnavi {
		margin-bottom: 0;
	}
	.mainmenu .subnavi li {
		margin: 0;
	}
	.mainmenu .subnavi li a {
		padding: 20px 10px;
	}
	/*********************** HOMEPAGE ***********************/
	/*********************** OTHER ***********************/
}
/******************************************* LARGE (LG) *******************************************/
@media ( min-width : 1200px) {
	/*********************** CONTAINERS ***********************/
	.container {
		width: 1170px;
	}
	/*********************** HEADER ***********************/
	#header {
		margin: auto;
	}
	/*********************** FOOTER ***********************/
	/*********************** MENUS ***********************/
	/*********************** HOMEPAGE ***********************/
	/*********************** OTHER ***********************/
}