@charset "UTF-8";
/* CSS Document 
OPNEMEN IN SKIN CSS!! weg dus straks
body{
	font-family:Arial;
	font-size:12px;
}
H1{
	color:#0a5599;
}
*/

/*LAY-OUT*/
#wrap {
position:relative;
width:950px;
height:530px;
margin: 20px auto;
/*border: solid black thin;*/
box-shadow: 0px 0px 5px #000;
background:white;
color:rgb(0,0,0);
font-size:105%;
}

#content1, #content2, #content3, #content4, #content5 {
position:absolute;
width:950px;
height:530px;
margin:0px;
padding:0px;
background-size:100%;

/*background-color:lightgrey;
*/}

/*kolom links, volle hoogte*/
#links {
position:absolute;
left:10px;
top:10px;
width:440px;
height:470px;
padding:10px;
background-color: 
rgba(255,255,255,0.66);
border-radius: 15px;
}
/*kolom rechts, volle hoogte*/
#rechts, #rechts2, #rechts3, #rechts4, #rechts5 {
position:absolute;
top:10px;
width:440px;
left:480px;
height:490px;
padding:10px;
background-color: rgba(255,255,255,0.66);
border-radius: 15px;
padding:10px;
overflow:hidden;
}

#content1.s #rechts, #content2.s #rechts, #content3.s #rechts,#content4.s #rechts, #content5.s #rechts{
border-bottom:60px solid rgba(255,255,255,0);
height:430px;

}

/*volle hoogte, mET scroll, staat binnen kolom rechts of links, na header*/
#kolom_scroll {
position:absolute;
/*width:440px;*/
padding-right:10px;
overflow-y: scroll;
overflow-x: hidden;
height:450px;
}
/*kolom links, geen hoogte*/
.links_bg, #links_gh, #links_gh1, #links_gh2, #links_gh3, #links_gh4, #links_gh5, #links_gh6, #links_gh7, #links_gh8, #links_gh9, #links_gh10, #links_gh11, #links_gh12{
position:absolute;
width:420px;
left:10px;
top:10px;
padding:10px;
border: 10px solid rgba(255, 255, 255, 0.66);
background-color: rgba(255,255,255,0.66);
background-clip:padding-box;
border-radius: 15px;
margin: 0 auto;
background-position:center center;
}

#links_balkjes {
width:420px;
margin-left:10px;
margin-top:10px;
padding:10px;
background-color: rgba(255,255,255,0.66);
background-position:center;
border: 10px solid rgba(255, 255, 255, 0.66);
border-radius: 15px;

}
#links_balkjes2 {
	width: 420px;
	margin-left: 10px;
	margin-top: 10px;
	padding: 10px;
	background-color: rgb(255,255,255);
	background-position: center;
	border: 10px solid rgba(255, 255, 255, 0.66);
	border-radius: 15px;
}

/*kolom rechts, rond*/
#links_rond {
position:absolute;
width:430px;
height:430px;
/*left:470px;*/
padding:10px;
background-color: rgb(255,255,255);
background-position:center;
border-radius: 215px;
box-shadow: 2px 2px 15px;
}

.img_container {
position:absolute;	
top:10px;
padding:0;
}
.img_container.rechts {
left:480px;
}
.img_container.links {
left:10px;
}
.img_container.balkjesimg {
	
left:10px;
}
.onderschrift    {
	padding: 5px 10px;
	font-size: 90%;
	font-style: italic;
	color: #fff;
}
/*kolom rechts, geen hoogte*/
.img, #rechts_gh, #rechts_gh, #rechts_gh1, #rechts_gh2, #rechts_gh3, #rechts_gh4, #rechts_gh5, #rechts_gh6, #rechts_gh7, #rechts_gh8, #rechts_gh9, #rechts_gh10, #rechts_gh11, #rechts_gh12 {
	position:relative;
padding:10px;
background-color: rgb(255,255,255);
background-position:center;
border: 10px solid rgba(255, 255, 255, 0.66);
border-radius: 15px;

width:420px;
}
#video {
	width:100%;
	height:100%;
	margin: 30px auto;
}

#video iframe {
	border-radius: 15px;
	background-color: rgba(255,255,255,0.66);
	padding:10px;
}

#heel {
	margin: 0 auto;
	text-align: center;
	background-color: rgba(255,255,255,0.66);
	margin: 10px;
	padding: 10px;
	border-radius: 15px;
	overflow: hidden;
}

/*EINDE LAY-OUT*/

/*COMPONENTEN*/
/*ronde knopjes voor links*/
div.knopjes {
	position:absolute;
	top:470px;
	left:490px;
	margin-bottom:10px;
	height:30px;
	
}

div.knopjesfotoslinks {
	position:absolute;
	left:30px;
	width:430px;
	top:340px;
	margin-bottom:10px;
	height:30px;
	
}

div.knopjesfotosrechts {
	position:absolute;
	left:485px;
	width:430px;
	top:340px;
	margin-bottom:10px;
	height:30px;
	
}


.knopje {
	float:left;
	width:30px;
	height:30px;
	background-color:#0a5599;
	margin-right:10px;
	color:white;
	font-weight: bold;	
	font-size:16px;
	border-radius:15px;
	padding:5px 10px;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	cursor:pointer;
	box-shadow: 2px 2px 5px #000;
	/*text-shadow: 2px 2px 5px #000;*/
}
.knopjes .sel, .knopjesfotoslinks .sel, .knopjesfotosrechts .sel {
	background-color:rgb(176,15,69);
}

/*BALKJES INTWERP*/
div.balkjes {
	margin:10px;
	width:460px;
}
.balkjes .sel {
	color: rgb(176,15,69);
}
.balkjes h3 {
	margin-top:0;
	margin-bottom:0;	
}
.balkje {
	padding:9px 10px;
	background-color: rgba(255,255,255,0.66);
	border-radius: 15px;
	margin: 5px 3px;
	cursor:pointer;
	color:#0a5599;
	font-size:120%;
	font-weight:bold;
}

/* EINDE BALKJES INTWERP*/

/* overige... */

/*een tabel opmaken. gebruik de th in je tabel voor kopcellen - headercells  */

.table{
border-right: thin dotted green;
border-spacing:0;

}
.table th{
color:white;
padding:5px;
border: solid thin white;
background-color:#090;

}
.table td{
padding:5px;
border-left:thin dotted green;
border-bottom:thin dotted green;
background-color: rgba(207,228,194,0.66);
}

.tekstkader {
border: dotted 3px grey;
background-color:#FFE174;
padding:7px;
margin: 10px 0;
}

/* testje */
#test{
	border-radius:10px;
	background-color:rgba(255,248,208,0.4);
}
#test input {margin:7px; }
#test #keuzes {text-transform:capitalize;}
#test #volgende.knop, #test #opnieuw.knop, #test #bekijk.knop {padding:5px; margin:3px;}

/* ongeordende lijst met vinkje */
ul.vinkje
{
list-style-type: none;
list-style-image:url(/content/sparagf/algemeen/vinkje.png);
}


/*@keyframes #content2_ani {
from { top:500px} to {top:0px;}	
}

#content2 {
animation:content1_ani 5s;	
}*/
/*EINDE COMPONENTEN*/