/* Copyright @ Eigenwijs Kinderdagverblijf */





/*****************************************/
/*              HTML TAGS                */
/*                                       */
/*****************************************/

a {
	text-decoration:none;
}

body{
	padding:0;
	margin:0;
	font:normal 16px/22px "Calibri", Arial, Helvetica, sans-serif;
	color:#6b6a6a;
	background:url(../images/toop-bg.jpg) center top repeat-x #ffffff;
}

h1, h2, h3, h4, h5, h6, p, ul, li, a, img, form, td, div, table, tr{
	padding:0;
	margin:0;
}

h1, h2, h3, h4, h5, h6{
	padding:0;
	margin:0;
	display: inline;
}

button {
	margin: 0;
	padding: 0;
}

img {
	border-style: none;
}





/*****************************************/
/*              FONT FACE                */
/*                                       */
/*****************************************/


@font-face {
    font-family: 'hvd_comic_serif_proregular';
    src: url('../font/hvd_comic_serif_pro_1-webfont.eot');
    src: url('../font/hvd_comic_serif_pro_1-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../font/hvd_comic_serif_pro_1-webfont.woff') format('woff'),
         url('../font/hvd_comic_serif_pro_1-webfont.ttf') format('truetype'),
         url('../font/hvd_comic_serif_pro_1-webfont.html#hvd_comic_serif_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('../font/proximanova-regular-webfont.eot');
    src: url('../font/proximanova-regular-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-regular-webfont.woff') format('woff'),
         url('../font/proximanova-regular-webfont.ttf') format('truetype'),
         url('../font/proximanova-regular-webfont.html#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'proxima_nova_ltbold';
    src: url('../font/proximanova-semibold-webfont.eot');
    src: url('../font/proximanova-semibold-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-semibold-webfont.woff') format('woff'),
         url('../font/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../font/proximanova-semibold-webfont.html#proxima_nova_ltbold') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'nillandregular';
    src: url('../font/nilland-webfont.html');
    src: url('../font/nilland-webfontd41d.html?#iefix') format('embedded-opentype'),
         url('../font/nilland-webfont.woff') format('woff'),
         url('../font/nilland-webfont.ttf') format('truetype'),
         url('../font/nilland-webfont-2.html#nillandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'proxima_nova_ltbold_italic';
    src: url('../font/proximanova-semibolditalic-webfont.eot');
    src: url('../font/proximanova-semibolditalic-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('../font/proximanova-semibolditalic-webfont.woff') format('woff'),
         url('../font/proximanova-semibolditalic-webfont.ttf') format('truetype'),
         url('../font/proximanova-semibolditalic-webfont.html#proxima_nova_ltbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}





/*****************************************/
/*                 DIVS                  */
/*                                       */
/*****************************************/


#holder {
	position: relative;
	top:0px;
	left: 0px;
	height: auto;
	width: 100%;
}


/* WRAPPER .. HOLDS ALL CONTAINERS TOGETHER */
#wrapper {
	position: relative;
	top: 10px;
	left: 50%;

	width: 960px;
	height: auto;

	margin-left: -470px;

	z-index: 100;
}



/* CLEAR .. ADDS SPACING BETWEEN CONTAINERS */
#clear {
	position: relative;
	left: 0px;
	top: 0px;
	height: 0;
	width: 100%;

	margin-top: 15px;
	margin-bottom: 15px;

	font-size:0;
	line-height:0;
	clear:both;
}



/* CONTAINER .. HOLDS DIVS RELATIVE FROM EACHOTHER */
#container {
	position: relative;
	top: 0px;
	left: 0px;

	width: 100%;
	height: auto;
}

#notification {
	position: relative;
	top: 0px;
	left: 0px;

	width: auto;
	min-height: 50px;
	box-shadow: 0px 2px 8px #666666;

	background: #BBEF66;
	border: 1px solid #AAEA55;
	padding: 1px;

	cursor: pointer;

}

#notification p{	font-size: 20px; color: #545454; margin: 0; margin-bottom: 10px; padding: 15px 25px 0px 25px;}
#notification a{	color: #545454;	font-weight: bold;}


/* HEADER .. HOLDS LOGO */
#header {
	position: relative;
	top: 0px;
	left: 0px;

	width: auto;
	height: 130px;
}

#header #left {
	position: absolute;
	background-image: url(../images/logo.png);
	background-repeat: no-repeat;
	background-position: center;

	width: 390px;
	height: 100%;
	top:0;
	left:0;
}

#header #right {
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;

	width: 237px;
	height: 68px;
	top:30px;
	left:400px;
}



/* NAV .. HOLDS BUTTONS FOR NAVIGATION */
#nav {
	position: relative;
	top: 0px;
	left: 0px;

	width: auto;
	height: 41px;
}

#nav ul{
	padding:0;
	margin:0;
	text-align:center;
	float:none;
	margin-left: 20px;
}

#nav ul li{
	font:normal 17px/38px 'nillandregular', Arial, Helvetica, sans-serif;
	font-family: 'nillandregular' !important;
	color:#fff;
	list-style:none;
	/*padding:0 15px 0 ;*/
	float:left;
	padding-right:13px;
	text-align:center;
	margin:0;
}

@media \0screen {
	#nav ul li{
		font:normal 17px/38px 'nillandregular', Arial, Helvetica, sans-serif;
		font-family: 'nillandregular' !important;
		color:#fff;
		list-style:none;
		/*padding:0 15px 0 ;*/
		float:left;
		padding-right:17px;
		text-align:center;
		margin:0;
	}
}

#nav ul li a{
	text-decoration:none;
	color:#fff;
	display:block;
	padding:0 15px 0 ;
	background:url(../images/nav-bg-norm.jpg) center top repeat-x;
	text-shadow:2px 2px 1px #888;
	border-right:3px solid #fff;
	border-left:3px solid #fff;
	border-top:3px solid #fff;
}

#nav ul li a:hover{
	background:url(../images/nav-bg-hover.jpg) center top repeat-x;
	display:block;
}



/* BANNER .. HOLDS BANNER IMAGE AND BUTTONS */
#banner {
	position: relative;
	top: 0px;
	left: 0px;

	width: auto;
	height: 210px;

	border-style: solid;
	border-width: 8px;
	border-color: #FFFFFF;

	background: url(../images/banner.jpg) center top repeat-x;
	box-shadow: 0px 2px 8px #666666;
}

#banner a{
	text-decoration:none;
	cursor:pointer;
}

#banner #account-knop{
	position:absolute;
	right:-32px;
	top:20px;
	padding:0;
	margin:0;
	background:url(../images/account.png) right top no-repeat;
	width:276px;
	height:90px;
}

#banner #account-knop:hover{
	position:absolute;
	right:-32px;
	top:20px;
	padding:0;
	margin:0;
	background:url(../images/account-hover.png) right top no-repeat;
	width:276px;
	height:90px;
}

#banner #account-knop h1{
	font:bold 28px/32px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:2px 3px 2px #20a8c7;
	text-transform:uppercase;
	text-align:right;
	padding-right:25px;
	margin:0;
	display: block;
}

#banner #account-knop h2{
	font:bold 18px/20px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:2px 2px 2px #20a8c7;
	text-transform:uppercase;
	text-align:right;
	padding:20px 27px 3px 0;
	margin:0;
	display: block;
}

#banner #login-knop{
	position:absolute;
	right:-32px;
	top:110px;
	padding:0;
	margin:0;
	background:url(../images/login.png) right top no-repeat;
	width:276px;
	height:90px;
}

#banner #login-knop:hover{
	position:absolute;
	right:-32px;
	top:110px;
	padding:0;
	margin:0;
	background:url(../images/login-hover.png) right top no-repeat;
	width:276px;
	height:90px;
}

#banner #login-knop h1{
	font:bold 28px/32px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:2px 3px 2px #85ab1f;
	text-transform:uppercase;
	text-align:right;
	padding-right:25px;
	margin:0;
	display: block;
}

#banner #login-knop h2{
	font:bold 18px/20px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:2px 2px 2px #85ab1f;
	text-transform:uppercase;
	text-align:right;
	padding:20px 27px 3px 0;
	margin:0;
	display: block;
}



/* MAIN .. HOLDS MAIN CONTENT*/
#main {
	position: relative;
	top: 0px;
	left: 0px;

	width: auto;
	min-height: 500px;
	height: auto;
}


/* FOOTER .. HOLDS FOOTER AND STUFF */
#footer {
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 960px;
	margin-left: -470px;
	height: 70px;
}

.footer-nav{
	padding:0;
	margin:0;
}

.footer-nav ul{
	font:normal 13px/18px Arial, Helvetica, sans-serif;
	color:#fff;
	padding:0;
	margin:0;
}

.footer-nav ul li{
	list-style:none;
	float:left;
	padding:0 14px 0 0;
}

.footer-nav ul li a{
	text-decoration:none;
	color:#fff;
}

.footer-nav ul li a:hover{
	color:#495d08;
}

.copy-right{
	font:normal 13px/18px Arial, Helvetica, sans-serif;
	color:#d7f087;
	padding:0;
	margin:0;
	text-align:right;
}

.copy-right a{
	text-decoration:none;
	color:#d7f087;
}

.copy-right a:hover{
	text-decoration:underline;
	color:#ffffff;
}


#footer_background {
	position: relative;
	top: 0px;
	left: 0px;

	width: 100%;
	height: 343px;

	background:url(../images/footer-bg.jpg) center bottom repeat-x #ffffff;
	z-index: 0;
}




/*******************************/
/*            INDEX            */
/*******************************/


/* TEXT .. HOLDS MAIN TEXT AREA */
#main #text {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 550px;
	height: auto;
}

#main #text.groen {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 506px;
	height: auto;
	padding: 20px;
	background-color: #ACCF3D;
	border-style: solid;
	border-width: 4px;
	border-color: #FFFFFF;
	box-shadow: 0px 2px 2px #888888;
}

#main #text h1{
	font:normal 35px/32px 'hvd_comic_serif_proregular', Arial, Helvetica, sans-serif;
	color:#0cbfe2;
	padding-bottom:10px;
	display: block;
}

#main #text h3{
	font:normal 20px/24px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#7fb8c3;
	display: block;
}

#main #text.groen h3.white{
	font:normal 20px/24px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	display: block;
}

#main #text p{
	font:normal 17px/25px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#6b6a6a;
	padding-bottom:7px;
}

#main #text a{
	color:#D96902;
}



/* MAIN NEWS .. HOLDS MAIN NEWS AREA */
#main #news	{
	position: absolute;
	right: 0px;
	top: 0px;
	background:url(../images/latest-news-bg.png) right top no-repeat;
	width: 350px;
	height: 330px;
	padding-top: 30px;
}

#main #news h2{
	font:normal 30px/32px 'hvd_comic_serif_proregular', Arial, Helvetica, sans-serif;
	color:#eb539e;
	padding:0;
	margin:0 0 0 30px;
}

#main #news #date-container{
	width:266px;
	padding:0;
	margin:0;
	margin-left: 30px;
}

#main #news #date{
	padding-top:10px;
	margin:0 10px 0 0;
	text-align:center;
	background:url(../images/date-bg.jpg) 0 0 no-repeat;
	width:78px;
	height:75px;
	float:left;
}	

#main #news #date h2{
	font:bold 40px/31px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif !important;
	color:#ffffff;
	padding:0;
	margin:13px 0 0 0;
}

#main #news #date h3{
	font:bold 18px/20px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-transform:uppercase;
	padding:0;
	margin:0;
}

#main #news #latest-post{
	width:178px;
	padding:0;
	margin:0; 
	float:right;
}

#main #news #latest-post h5{
	font:normal 18px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#02a8c8;
	padding:0 0 5px 0;
	margin:0;
}

#main #news #latest-post h5 a{
	font:normal 18px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#02a8c8;
	text-decoration:none;
}

#main #news #latest-post h5 a:hover{
	font:normal 18px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#eb539e;
	text-decoration:none;
	cursor:pointer;
}

#main #news #latest-post p{
	font:normal 13px/18px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#464646;
	padding:0;
	margin:0;
}



/* CONTACT .. HOLDS CONTACT BANNER */
#contact{
	position: absolute;
	background: url(../images/contact-bg.png) center top no-repeat;
	height:173px;
	padding:40px;
	margin:0;
	top: 400px; 
	left: 0px;
	width: auto;
}
#contact p{
	font:normal 18px/26px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#ffffff;
	padding:0;
	margin-left:350px;
	text-align:right;	
	width: 550px;
	right: 0;
}

#contact a{
	text-decoration:none;
	text-transform:uppercase;
	color:#fedb01;
}

#contact a:hover{
	text-decoration:none;
	text-transform:uppercase;
	color:#01fefb;
	cursor:pointer;
}

#spacer {
	position: absolute;
	top: 600px;
	width: 100%;
	left: 0px;
	height: 50px;
}



/*******************************/
/*            PAGE             */
/*******************************/



/*******************************/
/*            KIND BANNER      */
/*******************************/

#kind_b{
	height:150px;
	padding: 0px;
	margin: 2px 0px 8px 0px;
	width: auto;
	border:5px solid #FFF;
	box-shadow: 0px 2px 2px #888;
}

#kind_b.nr1{
	background-color: #8968AF;
}
#kind_b.nr1:hover{
	background-color: #9473BA;
}

#kind_b.nr2{
	background-color: #2BC2DF;
}
#kind_b.nr2:hover{
	background-color: #37C9E6;
}

#kind_b.nr3{
	background-color: #ACCF3D;
}
#kind_b.nr3:hover{
	background-color: #B6D94A;
}

#kind_b.nr4{
	background-color: #DF482B;
}
#kind_b.nr4:hover{
	background-color: #E8563A;
}

#kind_b.nr5{
	background-color: #B33820;
	border-color: #D17260;
}
#kind_b.nr5:hover{
	background-color: #D17260;
	border-color: #B33820;
}

#kind_b img {
	float: left;
	margin-top: 15px;
	margin-left: 10px;
	height: 115px;
	border-style: solid;
	border-width: 2px;
	border-color: #FFF;
	background-color: lightgrey;
}

#kind_b #cont {
	position: absolute;
	height: 120px;
	width: auto;
	margin-top: 25px;
	left: 140px;
}

#kind_b #cont h1 {
	font:bold 32px/36px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:right;
	margin:0;
	display: block;
}

#kind_b #cont p{
	font:normal 18px/26px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#ffffff;
	padding:0;
	text-align:left;	
	width: 700px;
	margin-top: 25px;
	position: absolute;
}

#kind_b #cont p a{
	text-decoration:none;
	text-transform:uppercase;
	color:#fedb01;
}

#kind_spacer {
	height: 100px;
}

#kind_b a:hover{
	text-decoration:none;
	text-transform:uppercase;
	color:#01fefb;
	cursor:pointer;
}


/* OUDER BANNER */
#ouder_b{
	height:55px;
	padding: 0px;
	margin: 2px 0px 8px 0px;
	width: auto;
	border:5px solid #FFF;
	box-shadow: 0px 2px 2px #888;
	cursor: pointer;
}

#ouder_b.nr1{
	background-color: #8968AF;
}
#ouder_b.nr1:hover{
	background-color: #9473BA;
}

#ouder_b.nr2{
	background-color: #2BC2DF;
}
#ouder_b.nr2:hover{
	background-color: #37C9E6;
}

#ouder_b.nr3{
	background-color: #ACCF3D;
}
#ouder_b.nr3:hover{
	background-color: #B6D94A;
}

#ouder_b.nr4{
	background-color: #DF482B;
}
#ouder_b.nr4:hover{
	background-color: #E8563A;
}

#ouder_b.nr5{
	background-color: #B33820;
	border-color: #D17260;
}
#ouder_b.nr5:hover{
	background-color: #D17260;
	border-color: #B33820;
}

#ouder_b #cont {
	height: 50px;
	width: auto;
	margin-left: 20px;
	margin-top: 2px;
}

#ouder_b #cont h1 {
	font:bold 26px/30px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#fff;
	text-align:right;
	margin:0;
}

#ouder_b #cont p{
	font:normal 18px/21px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	color:#ffffff;
	text-align:left;	
	width: 700px;
}



/*****************************************/
/*                CLASS                  */
/*                                       */
/*****************************************/
.berichtbg { 
	background-color: #2BC2DF; 
	color: #FFF;
}

.berichtbg td { 
	padding: 8px 0px 8px 0px;
	border-bottom-style: solid;
	border-bottom-color: #336699;
	border-bottom-width: 1px;
}

.berichtbg1 { 
	background-color: #E8F3FA; 
	cursor: pointer;
}

.berichtbg2 { 
	background-color: #D2E9FA; 
	cursor: pointer;
}

.berichtbg1:hover, .berichtbg2:hover { 
	background-color: #2BC2DF; 
	cursor: pointer;
	color: #FFF;
}

.berichtbg1 td, .berichtbg2 td { 
	padding: 4px 5px 4px 0px;
}

.sendMailTextArea {
	position: absolute;
	height: auto;
	width: auto;
	margin: 0px;
	padding-left: 8px;
	border-style: none;
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 45px;
}

.sendMailTextArea:focus {
	outline: 0;
}

.unread {
	font-weight: bold;
}


/* BERICHTBG .. BERICHT BACKGROUNDS */
.nav_b {
	margin: 0px;
	padding: 0px;
}

.nav_b td {
	margin: 10px;
	text-align: center;
	width: 120px;
	height: 120px;
	border-style: solid;
	border-width: 1px;
	border-color: rgba(40, 40, 150, 0.1);
}

.nav_b td:hover {
	background-color: rgba(40, 40, 200, 0.1);
	border-style: solid;
	border-width: 1px;
	border-color: rgba(40, 40, 150, 0.4);
}

header.h1_banner {
	width: 949px;
	height: 32px;
	padding: 7px 0px 0px 5px;
	background:url(../images/nav-bg-norm.jpg) center top repeat-x;
	text-shadow:2px 2px 1px #888;
	border:3px solid #FFF;
	color: white;
	box-shadow: 0px 2px 2px #888;
	margin-bottom: 5px;
}

/* Account menu */
ul.account {
	list-style-type: none;
	padding: 0px;
	margin: 20px 0px 0px 0px;
}

ul.account li {
	width: 954px;
	height: 30px;
	border:3px solid #FFF;
	color: #F2F2F2;
	box-shadow: 0px 2px 2px #888;
	background-color: #DE842A;
	padding-top: 1px;
	margin: 5px 0px 5px 0px ;
}

ul.account li img{
	float: left;
	margin: 2px 10px 0px 10px;
	height: 25px;
}

ul.account li p.left{
	margin: 0px 0px 0px 0px;
	width: 600px;
	height: 30px;
	font:bold 26px/30px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	float: left;
}
ul.account li p.right{
	margin: 0px 20px 0px 0px;
	width: 250px;
	height: 30px;
	font:bold 26px/30px 'proxima_nova_rgregular', Arial, Helvetica, sans-serif;
	text-align: right;
	float: right;
}

ul.account li:hover {
	background-color: #E6913C;
}

img.kind_pag {
	float: right;
	margin-right: 10px;
	height: 145px;
	border-style: solid;
	border-width: 2px;
	border-color: #FFF;
	background-color: lightgrey;
}


ul.foto {
	list-style-type: none;
	width: 960px;
    vertical-align: top;
    height: auto;
	padding: 0px;
	margin: 0px;
	display: block;
}

#fotoalbum {
	width: 100%;
	height: auto;
	clear: both;
	position: relative;
	margin-top: 10px;
}