/*************************************
    Colors
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 	paars			6e 004a
 	donker grijs	6D 6F71
 	
 	logo paars		94 0064
	logo grijs  	93 9598
 	
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Layouts
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Init responsive
    <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />	

    Desktop/Large [L] (=default)
    @media only screen and (min-width: 960px)
    NOTE: add _no_ @media for IE8 support

    Tablet/Medium [M]
    @media only screen and (min-width: 600px) and (max-width: 960px)

    Phone/Small [S]
    @media only screen and (max-width: 600px)
    
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Fonts
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~    
	Size mapping for responsive
    font-size:   15px -> 1.0em
    line-height: 22px -> 150%
 
 *************************************/



/*************************************
    Reset defaults
 *************************************/

/*[L][M][S]*/

*
{
	margin: 0px;
	border: 0px;
	border-radius: 0px;
	padding: 0px;
	color: red;
	font: normal normal normal 100% arial;
	line-height: 100%;
	background: transparent;
	text-decoration: none;
}

/*************************************
	Global html elements
 *************************************/

/*[L][M][S]*/

html
{
	scroll: auto;
	scroll-x: auto;
	scroll-y: scroll;
}

body
{
	background: #ffffff;
}

strong
{
	color: inherit;
	font-weight: bold;
}

i
{
	color: inherit;
	font-weight: inherit;
	font-style: italic;
}

/*************************************
    A10: globals area
 *************************************/

/*[L]*/

.dA10
{
	clear: both;
}

.dA10 > div
{
	margin: 0px auto 0px auto;
	padding: 7px 0px 0px 0px;
	width: 960px;
	height: 30px;
	text-align: right;
}

.dA10 p
{
	margin-right: 15px;	
}

.dA10 a
{
	margin-left: 3px;	
	font-size: 0.7em;
	line-height: 100%;
	color: #939598;
}
.dA10 a:hover
{
	color: #940064;
}

.dA10 img
{
	vertical-align: middle;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA10 > div
	{
		width: 100%;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA10 > div
	{
		width: 100%;
	}
}

/*************************************
    A20: logo area
 *************************************/

/*[L]*/

.dA20
{
	clear: both;
	height: 160px;
	background: #940064;
}

.dA20 > div
{
	margin: 0px auto 0px auto;
	width: 960px;
	height: 160px;
	background: transparent url(../img/slider2.png) left top no-repeat;
	text-align: right;
}

.dA20 a
{
	float: right;
	display: block;
	background: #ffffff;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA20 > div
	{
		width: 100%;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA20
	{
		height: auto;
		background: transparent;
		box-shadow: none;
	}

	.dA20 > div
	{
		width: 100%;
		height: auto;
		background: transparent;
	}

	.dA20 a
	{
		margin: 0px;
	}

	.dA20 img
	{
		width: 40%;
	}
}

/*************************************
    A30: content areas
 *************************************/

/*[L]*/

.dA30
{
	clear: both;
}

.dA30 > div
{
	margin: 0px auto 0px auto;
	width: 960px;
	background: #ffffff;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA30 > div
	{
		width: 100%;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA30 > div
	{
		width: 100%;
	}
}

/*** 
     A31: right column
 ***/

/*[L]*/

.dA31
{
	float: right;
	margin-top: 22px;
	width: 275px;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA31
	{
		float: right;
		width: 275px;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA31
	{
		float: none;
		margin-left: 1px;
		width: auto;
	}
}

/*** 
     A32: left column
 ***/

/*[L]*/

.dA32
{
	margin: 0px 275px 0px 0px;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA32
	{
		margin: 0px 275px 0px 0px;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA32
	{
		margin: 0px;		
		border-top: 7px solid #940064;
		padding-top: 15px;
	}
}

/*** 
     A35: navigation
 ***/

/*[L]*/

.dA35
{
	clear: right;
}
/* 	paars			940064
 	donker grijs	939598
*/
.dA35 > a[s="n"],
.dA35 > a[s="y"]
{
	display: block;
	margin-bottom: 1px;
	border-radius: 15px 0px 0px 15px;
	padding: 3px 10px 5px 15px;	
	color: #ffffff;
	background: #939598;
	font-family: clear_sans_mediumregular, arial;
	font-size: 0.9em;
	line-height: 150%;
}
.dA35 > a[s="n"]:hover,
.dA35 > a[s="y"]
{
	background: #940064;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA35
	{
		margin: 0px;
		padding: 5px 0px 0px 0px;
		width: 100%;
	}	
	
	.dA35 > a[s="n"],
	.dA35 > a[s="y"]
	{
	}
}

/*** 
     A36: submenu
 ***/

/*[L]*/

.dA36
{
	padding: 7px 10px 7px 17px;
}

.dA36 > a[s="n"],
.dA36 > a[s="y"]
{
	display: block;
	margin-bottom: 4px;
	padding-left: 10px;
	color: #939598;
	font-size: 0.8em;
	line-height: 150%;
	background: transparent url(../img/subnavbgN.png) left top no-repeat;
}
.dA36 > a[s="n"]:hover,
.dA36 > a[s="y"]
{
	color: #940064;
	background: transparent url(../img/subnavbgY.png) left top no-repeat;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA36
	{
	}	
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA36
	{
	}	
}

/*** 
     A39: floot stopper
 ***/

/*[L]*/

.dA39
{
	clear: both;
	height: 30px;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
}

/*[S]*/
@media only screen and (max-width: 600px)
{
}

/*************************************
    A40: content
 *************************************/

/*[L]*/

.dA40
{
	padding: 20px 90px 0px 30px;
}	

.dA40 .dImage
{
	clear: left;
	float: right;
	margin: 0px 0px 10px 10px;
}

.dA40 .dAs
{
	margin: 0px 0px 10px 0px;
}

.dA40 .dError
{
	margin-bottom: 20px;
	border-radius: 10px;
	padding: 1px 15px 1px 15px;
	width: 92%;
	background: #ffb17b;
}

.dA40 .dOk
{
	margin-bottom: 20px;
	border-radius: 10px;
	padding: 1px 15px 1px 15px;
	width: 92%;
	background: #5aff43;
}

.dA40 h1
{
	margin: 0px 0px 15px 0px;
	color: #940064;
	font-family: clear_sans_mediumregular, arial;
	font-size: 2.0em;
	line-height: 125%;
}

.dA40 h2
{
	margin: 10px 0px 5px 0px;
	color: #940064;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 150%;
	min-height: 27px;
}

.dA40 h3
{
	color: #000000;
	font-family: arial;
	font-weight: bold;
	font-size: 1.2em;
	line-height: 150%;
}

.dA40 h4
{
	margin: 0px 0px 15px 0px;
	color: #000000;
	font-family: arial;
	font-weight: bold;
	font-size: 0.9em;
	line-height: 150%;
}
.dA40 h4[br="n"]
{
	margin-bottom: 3px;
}

.dA40 p
{
	margin: 0px 0px 15px 0px;
	color: #000000;
	font-family: arial;
	font-size: 0.9em;
	line-height: 150%;
}
.dA40 p[br="n"]
{
	margin-bottom: 3px;
}

.dA40 .dA
{
	display: inline-block;
	color: #940064;
	font-family: arial;
	font-size: 0.9em;
	line-height: 150%;
}
.dA40 .dA:hover
{
	text-decoration: underline;
}

.dA40 ul,
.dA40 ol
{
	margin: 0px 0px 0px 20px;
	color: #000000;
}

.dA40 li h4,
.dA40 li p
{
	margin-left: 5px;
	margin-bottom: 0px;
}

.dA40 li[br="n"]
{
	margin: 0px 0px 0px 0px;
	color: inherit;
}
.dA40 li[br="y"]
{
	margin: 0px 0px 15px 0px;
	color: inherit;
}

.dA40 input[type="text"],
.dA40 textarea
{
	margin: 0px;
	border: 1px solid #939598;
	border-radius: 5px;
	padding: 4px;	
	width: 95%;
	line-height: 140%;
	color: #940064;
	background: #ffffff;
	resize: none;
}
.dA40 textarea
{
	height: 100px;
}

.dA40 label
{
	padding: 0px 10px 0px 0px;
	color: inherit;
}

.dA40 button
{
	margin: 0px;
	border-radius: 5px;
	padding: 4px 5px 4px 5px;	
	font-family: arial;
	color: #ffffff;
	background: #939598;
	cursor: pointer;
}
.dA40 button:hover
{
	background: #940064;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA40 .dImage img
	{
		width: 100%;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA40
	{
		padding: 0px 10px 10px 10px;
	}	
		
	.dA40 .dImage img
	{
		width: 100%;
	}
}

/*************************************
    A80: contactinfo
 *************************************/

/*[L]*/

.dA80
{
	clear: both;
}

.dA80 > div
{
	margin: 0px auto 0px auto;
	padding: 25px 0px 0px 0px;
	width: 960px;
	background: #939598;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA80 > div
	{
		width: auto;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA80 > div
	{
		padding: 20px 10px 10px 10px;
		width: auto;
	}
}

/*** 
     A81: infobox
 ***/

.dA81[first="y"],
.dA81[first="n"]
{
	float: left;
	margin: 0px 0px 30px 30px;
}
.dA81[first="n"]
{
	margin-left: 50px;
}

.dA81 h1
{
	color: #ffffff;	
	font-family: clear_sans_mediumregular, arial;
	font-size: 1.1em;
	line-height: 150%;
}

.dA81 p
{
	color: #ffffff;	
	font-size: 0.8em;
	line-height: 140%;
}

.dA81 span
{
	display: inline-block;
	width: 37px;
	color: inherit;	
	font-weight: bold;
	font-size: inherit;
	line-height: inherit;
}

.dA81 a
{
	color: inherit;	
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
}
.dA81 p > a:hover
{
	text-decoration: underline;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA81[first="y"],
	.dA81[first="n"]
	{
		float: none;
		margin: 0px;
		padding: 0px 0px 10px 0px;
	}
	.dA81[first="n"]
	{
	}
}

/*** 
     A89: floot-stopper
 ***/

.dA89
{
	clear: both;
	height: 0px;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
}

/*[S]*/
@media only screen and (max-width: 600px)
{
}

/*************************************
    A90: copyright line
 *************************************/

/*[L]*/

.dA90
{
	clear: both;
	padding: 10px 0px 10px 0px;
}

.dA90 > div
{
	margin: 0px auto 0px auto;
	width: 960px;
}

.dA90 p
{
	padding-left: 30px;
	color: #939598;
	font-size: 0.8em;
	line-height: 150%;
}

.dA90 span
{
	padding: 0px 11px 0px 11px;
	color: #939598;
	font-size: inherit;
	line-height: inherit;
}

.dA90 a
{
	color: #939598;
	font-size: inherit;
	line-height: inherit;
	text-decoration: none;
}
.dA90 a:hover,
.dA90 a[s="y"]
{
	color: #940064;
}

/*[M]*/
@media only screen and (min-width: 600px) and (max-width: 960px)
{
	.dA90 > div
	{
		width: auto;
	}
}

/*[S]*/
@media only screen and (max-width: 600px)
{
	.dA90 > div
	{
		width: auto;
	}

	.dA90 span
	{
		display: none;
	}	
	
	.dA90 p
	{
		padding-left: 10px;
	}

	.dA90 a
	{
		display: block;
	}
}