﻿@charset "utf-8";

/*___________________________________________________
                  GLOBAL DESIGN CSS 
_____________________________________________________
****************************************************/

/* ---------- [ BODY / HTML elements ] ---------- */

BODY, HTML
{
	margin:0px 0px 0px 0px;
	padding:0px 0px 0px 0px;
	height: 100%;
}

BODY
{
	background-image:url(../images/body_bg.gif);
	background-position:top center;
	background-repeat:repeat-y;
	background-color:#dedede;
	text-align: center; /* centers the site in the screen */
}

/* turns off horizontal scrolling when in backend */
.backendbody
{
	overflow-x:hidden;
}


/* ---------- [ Font definition ] ---------- */

HTML, BODY, TABLE, INPUT, SELECT, TEXTAREA
{   
    font-size:12px; /* this will be defined as 1 em */
    font-family: Arial, Tahoma, Verdana, sans-serif;
    line-height: 1.33em;
	letter-spacing: normal;
	color: #000000;
}

/* ---------- [ Link definition ] ---------- */

a:link,	a:hover, a:active, a:visited, /* standard link */
.cb3contentblock a:link, .cb3contentblock a:active, .cb3contentblock a:visited /* inside the editor */
{
}

a:hover,
.cb3contentblock a:hover
{
    text-decoration:none;
}

/* ---------- [ Tooltip class ] ---------- */
div.tooltip { 
	border: 1px solid #EC8D23!important;
	background: #fff!important;
	color: #000!important;
	padding: 4px!important; 
	z-index:1000!important;
	text-align:left!important;
} 

a.info:link, a.info:active,	a.info:visited
{ 
    z-index: 24;
    position: relative;
}  


/* ---------- [ Element definition ] ---------- */


TABLE, TH, TD, DIV, SPAN
{
    text-align: left; /* resets the alignment to left for every element within the wrapper, can be overruled cascading */
    vertical-align: top;
}

P
{
	margin:0px;
	padding:0px;
    margin-bottom: 1.33em !important;
}

hr
{
	display: block;
	height: 1px;
	border-bottom: 1px solid #000000;
	margin: 1em 0;
}	

ul 
{
    margin-left: 1em;
    margin-bottom: 1.33em;
    list-style-image:none;
    list-style-position:inside;
    list-style-type:disc;
}

ol
{
    margin-left: 1em;
    margin-bottom: 1.33em;
    list-style-image:none;
    list-style-position:inside;
}

* blockquote, blockquote *, blockquote blockquote *
{
    padding-left: 10px;
}

IMG.imgLeft
{
    margin: 0px 5px 5px 0px;
}
IMG.imgCenter
{
	DISPLAY: block;
	text-align:center;
	margin:0px auto;
}
IMG.imgRight
{
    margin: 0px 0px 5px 5px;
}

.hide
{
    display: none;
    height:1px;
    font-size:1px;
}

.clear
{
    display: block;
    height:1px;
    clear:both;
}

.veld, .withWatermarkClass
.radInput_Default INPUT,
TEXTAREA, .form_field, .form_dropdown, .area
{
    font-size: 1em;
    color: #000000;
    border: 1px #0088ea solid;
    background-color: #ffffff;
    line-height: 21px;
}

.veld, .withWatermarkClass
{
    height: 21px;
}

.area
{
	overflow: auto;
}

/* ---------- [ HEADINGS used for frontend as defined for backend in "style.css"  ] ---------- */

H1,.cb3contentblock H1
{
	font-size: 2em;
	line-height: 3em;
	color:#4b2077;
}

H2, .cb3contentblock H2
{
	font-size: 1.66em;
	line-height: 2em;
}

H3, .cb3contentblock H3
{
	font-size: 1.33em;
	line-height: 1.66em;
}

H4, .cb3contentblock H4
{
	font-size: 1.03em;
	line-height: 1.33em;
}

H5, .cb3contentblock H5
{
	font-size: 0.90em;
	line-height: 1.03em;
}

.CenterLeftContent H3
{
    color:#4b2077;
}

/* ---------- [ Custom classes ] ---------- */

.cb3contentblock .Color1
{
    color:#e5297c;
}

.cb3contentblock .Color2
{
    color:#0088ea;
}

.cb3contentblock .Color3
{
    color:#4b2077;
}

.cb3contentblock .Marker
{
    background-color:#fff600;
}




.main_container
{
    width:940px;
    margin-right:auto;
    margin-left:auto;
}

.header
{
    height:319px;
    width:940px;    
    background-position:240px 0px;
    background-repeat:no-repeat;
}

.header_inner
{
    height:319px;
    width:940px;
    float:left;
    background-image:url(../images/header_bg.png);
    background-position:top left;
    background-repeat:no-repeat;
}

.main
{
    width:940px;
    vertical-align:top;
    background-image:url(../images/mainleft_bg.gif);
    background-position:top left;
    background-repeat:repeat-y;
    background-color:#ffffff;
}

.main_left
{
    width:245px;
    float:left;
}

.main_middle
{
    width:520px;
    float:left;
    vertical-align:top;
    background-image:url(../images/main_middle_bg.jpg);
    background-position:top right;
    background-repeat:no-repeat;
}

.main_right
{
    width:175px;
    float:left;
    background-image:url(../images/main_right_bg.jpg);
    background-position:top right;
    background-repeat:no-repeat;
}

.main_middle_full
{
    width:695px;
    float:left;
    vertical-align:top;
    background-image:url(../images/main_middle_full_bg.jpg);
    background-position:top right;
    background-repeat:no-repeat;
}

.footer
{
    background-image:url(../images/mainleft_bg.gif);
    background-position:top left;
    background-repeat:repeat-y;
    background-color:#ffffff;
}

/* ----- header */

.header_left
{
    width:300px;
    height:319px;
    float:left;
}

.header_right
{
    width:580px;
    height:319px;
    float:right;
}

.logo
{
    display:block;
    height:105px;
    width:238px;
    float:left;
    clear:both;
}

.quote
{
    height:200px;
    width:265px;
    float:right;
    clear:both;
    background-position:top left;
    background-repeat:no-repeat;
}

.logincontainer
{
    height:48px;
    width:265px;
    overflow:hidden;
    float:right;
    clear:both;
    vertical-align:top;
    padding:0px;
}

    .logintxt
    {
        display:block;
        height:12px;
        width:31px;
        overflow:hidden;
        float:left;
        background-image:url(../images/txt_login.gif);
        background-position:top left;
        background-repeat:no-repeat;
        border:none;
        padding:0px;
        margin:3px 0px 0px 202px;
    }
    
    .logouttxt
    {
        display:block;
        height:12px;
        width:31px;
        overflow:hidden;
        float:left;
        background-image:url(../images/txt_logout.gif);
        background-position:top left;
        background-repeat:no-repeat;
        background-color:#ffffff;
        color:#ffffff;
        border:none;
        padding:0px;
        margin:3px 0px 0px 202px;
    }
    
/* ----- main left classes */

/* search container */
    .search_container
    {
        width:245px;
        height:82px;
        background-image:url(../images/search_bg.gif);
        background-position:top left;
        background-repeat:no-repeat;
    }

    .search_container_inner
    {
        padding:0px 20px 0px 20px;
    }

    .search_container_inner A
    {
        display:block;
        height:42px;
        width:132px;
        clear:both;
        color:#ffffff;
        line-height:28px;
        font-weight:bold;
    }
    
    .search_container_inner A:hover
    {
        text-decoration:none;
    }
    
    .search_field
    {
        width:139px;
        height:17px;
        line-height:17px;
        border:none;
        padding:0px;
        float:left;
        font-size:0.92em;
        background:#ffffff;
        margin-top:4px;
    }
    
    .search_button
    {
        display:block;
        width:66px;
        height:17px;
        cursor:pointer;
        line-height:17px;
        float:right;
        border:none;
        padding:0px;
        text-align:right;
        font-size:0.92em;
        background:#ffffff;
        margin-top:4px;
    }


.main_left_sticker
{
    display:block;
    height:222px;
    width:241px;
    background-image:url(../images/sticker_opvoedtips.gif);
    background-position:top left;
    background-repeat:no-repeat;
}

.main_left_content
{
    width:245px;
    background-color:#ffffff;
}

.main_left_content_inner
{
    padding:0px 20px 0px 20px;
}

.main_left_calendar
{
    width:245px;
    background-image:url(../images/calendar_top.gif);
    background-position:top left;
    background-repeat:no-repeat;
}

.main_left_calendar_inner
{
    padding:0px 20px 20px 20px;
}

/* ----- main middle classes */

.main_middle_inner
{
    padding:18px 10px 18px 38px;
}

/* -- home blocks */

.CenterLeftContentContainer
{
    width:225px;
    float:left;
}

.CenterRightContentContainer
{
    width:225px;
    float:right;
}



/* ----- main right classes */

.main_right_sticker
{
    display:block;
    height:165px;
    width:165px;
    background-image:url(../images/sticker_24u.png);
    background-position:top left;
    background-repeat:no-repeat;
    margin-bottom:20px;
}

.main_right_inner
{
    padding:20px 10px 20px 0px;
}

/* ----- footer */

.footer_left
{
    width:245px;
    height:20px;
    overflow-x:hidden;
    float:left;    
}

.footer_left_inner
{
    padding:0px 0px 0px 14px;
}


/* ---------- [ Specific ] ---------- */

DIV.breadcrumbs
{
	height: 20px;
	margin-top: 10px;
	font-size: 0.92em;
	color: #2e0b51;
}

    DIV.breadcrumbs SPAN
    {
        font-size: 1em; /* this inherits the font-size defined in the parent element */
    }

    DIV.breadcrumbs a:link, DIV.breadcrumbs a:visited, DIV.breadcrumbs a:hover, DIV.breadcrumbs a:active
    {
	    color: #000000;
	    font-size: 1em; /* this inherits the font-size defined in the parent element */
    }
	
.PageTitle
{
    color: #2e0b51;
    display: block;
	font-size: 1.33em;
	line-height: 2.66em;
	height: 2.66em;
	font-weight: bold;
	width: 80%;
	overflow: hidden;
}

.title
{
    font-family: Segoe UI, Trebuchet MS, Georgia;
	font-size: 1em;
	height: 1.33em;
	font-weight: bold;
}

.IntroText
{
	display: block;
	font-weight: bold;
}

.LiteText,.DateModified
{
    font-size: 0.83em;
	color: #908f92;
	font-weight: lighter;
}

    .DateModified
    {
        display: block;
        clear: both;
        margin-top: 10px;
    }
    	
        .DateModified .date
        {
	        color: #000000;
	        font-size: 1em; /* this inherits the font-size defined in the parent element */
        }
        
        
#infobanklayer, #infobank, .searchResultsIframe
{
    width:640px !important;
    min-height:500px;
    overflow-x:hidden;  
}

/*___________________________________________________
                 CONTENT BLOKKEN
_____________________________________________________
****************************************************/

/* ---- Global -----*/

.WrapText
{
    padding-right: 0px; /* this is the default padding for the contentblock, please define custom classes for custom contentblocks */
}

    /* making the inside editor text look the same as when outside the editor  this is the padding used in 'WrapText' + 2px for the border*/
    .EContentBordered
    {
        text-align: left;
        padding-right:1px;
        padding-top: 1px;
    }
    
    .EContentBordered P
    {
       border: 1px dotted #a5acb2;
    }

cb3contentblock
{
    font-size:12px; /* this will be defined as 1 em */
    font-family: Arial, Tahoma, Verdana, sans-serif;
    line-height: 1.33em;
	letter-spacing: normal;
	color: #000000;
}

/* ----  Custom ContentBlocks  -----*/

.LeftContent, BODY.LeftContent  /* The names of these blocks can be made custom. Fill in anything you like and as much as you want. Copy backgroundcolor or image for the editor from TD#left */
{
    background-color:#ffffff !important;
    background-image:url() !important;
}

.LeftContent A, BODY.LeftContent A
{
    color:#4b2077;
}

.CalendarContent, BODY.CalendarContent
{
    background-color:#00a2fa !important;
    background-image:url() !important;
    color:#ffffff;
}

.CalendarContent A, BODY.CalendarContent A, .CalendarContent *, BODY.CalendarContent *
{
    color:#ffffff;
}

.CenterContent, BODY.CenterContent, .CenterLeftContent, BODY.CenterLeftContent, .CenterRightContent, BODY.CenterRightContent, .RightContent, BODY.RightContent  
{
    background-color:#ffffff !important;
    background-image:url() !important;
}

.CenterContent A, BODY.CenterContent A, .CenterLeftContent A, BODY.CenterLeftContent A, .CenterRightContent A, BODY.CenterRightContent A, .RightContent A, BODY.RightContent A
{
    color:#4b2077;
}


#infobank, #searchframe {
clear:both;
display:inline;
height:600px;
width:640px;
}

#infobank {
height:1500px;
}

/* ---------- [ Extra: Fixes for editor ] ---------- */

/* Disable .anchor image for frontend (removes unwanted margin/padding)	This element is re-enabled in backend... Do not remove!	*/	
.cb3contentblock .anchor
{
    display: none;
}

    .LeftContent P *
    { float:none;}
    
div.radeditor {
	width:auto!important;
}
