/*----------------------------------------------------------------------------------------------------------------------------------------------------------------
LISTS
Opsommigen en lijsten in diverse maten en vormen
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

	/*----------------------------------------------------------------------------
	popupMenu
	----------------------------------------------------------------------------*/
	
		dl.popupMenu{display:inline-block; position:relative; cursor:pointer; z-index:1000; }
		dl.popupMenu dt{}
		dl.popupMenu dt strong{display:inline-block; text-indent:-4000px; overflow:hidden; width:14px; height:14px; background: url(../images/popupMenu.png) no-repeat top left; }
		dl.popupMenu:hover ol{display:block; }
		
		dl.popupMenu dd{}
		dl.popupMenu dd ol{display:none; border:1px solid #7b7b7b; padding:10px 5px; background-color:#f7f7f7; position:absolute; top:5px; right:5px;}
		dl.popupMenu dd ol li{}
		dl.popupMenu dd ol li a{padding:3px 12px 3px 17px; display:block; white-space:nowrap;}
		dl.popupMenu dd ol li.active a{background: url(../images/icoCheck.png) no-repeat 5px 6px; }
		dl.popupMenu dd ol li:hover{background-color:#ebebeb; }

	/*----------------------------------------------------------------------------
	menuList
	----------------------------------------------------------------------------*/
		.menuList{}
		.menuList li{padding:3px 0px; color:#b5b5b5; }
		.menuList li.active{color:white; }
		.menuList li span{display:inline-block; width:40px; }

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------
BUTTONS
Declaratie van buttons en speciaal gestijlde links
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

	/*----------------------------------------------------------------------------
	button2
	----------------------------------------------------------------------------*/
		
		.button2{border:1px solid #b4b4b4; font-size:11px; display:inline-block; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
		.button2 span{border:1px solid #fff; display:block; padding:3px 7px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;  background: rgb(242,242,242);background: -moz-linear-gradient(top, rgba(242,242,242,1) 0%, rgba(207,207,207,1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(242,242,242,1)), color-stop(100%,rgba(207,207,207,1)));background: -webkit-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(207,207,207,1) 100%);background: -o-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(207,207,207,1) 100%);background: -ms-linear-gradient(top, rgba(242,242,242,1) 0%,rgba(207,207,207,1) 100%);background: linear-gradient(top, rgba(242,242,242,1) 0%,rgba(207,207,207,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cfcfcf',GradientType=0 );}
		.button2 i{margin:0px 0px 0px 5px; }
		.button2:active span{-moz-box-shadow:inset 0px 3px 5px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0px 3px 5px rgba(0,0,0,0.1); box-shadow:inset 0px 3px 5px rgba(0,0,0,0.1);}

		.button2.blockRight{width:120px; text-align:right; margin:0px 0px 5px 0px;  }

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------
BOXES
Gestijlde boxen die veelal hergebruikt worden en waarin zich andere objecten bevinden
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

	/*----------------------------------------------------------------------------
	borderBox
	----------------------------------------------------------------------------*/

		.borderBox{border:1px solid #000000; padding:10px 10px; margin:10px 0px 0px 0px; }

	/*----------------------------------------------------------------------------
	contentbox
	----------------------------------------------------------------------------*/

		.contentbox.clickable.border > p{border-bottom:1px solid #000; margin:10px 0px 0px 0px;  }
		.contentbox.clickable.border > p span{background-color:#fff; margin:0px 0px 0px 10px; padding:0px 10px; display:inline-block; position:relative; top:6px;  }
		.contentbox.clickable.border > p a{padding:0px 0px 0px 15px; color:black; display:block; background:url(../images/ico-contentbox.png) no-repeat center left; }
		.contentbox.clickable.border.on > p a{background: url(../images/ico-contentbox-on.png) no-repeat center left; }
		
		.contentbox.clickable.border .content{padding:10px 0px; }
		
	/*----------------------------------------------------------------------------
	extrabox
	----------------------------------------------------------------------------*/
		.extrabox.matrix{z-index:10000; position:relative; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none; }
		.extrabox.matrix h1{font-size:14px;}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------
OBJECTS
Objecten die meestal uit een verzameling van diverse tags bestaan en 1 object vormen (vb. tagcloud)
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

	/*----------------------------------------------------------------------------
	figureBorder
	----------------------------------------------------------------------------*/

		.figureBorder{border:1px solid #000000; display:table-cell; vertical-align:middle; text-align:center; padding:20px 20px; -moz-box-shadow:2px 2px 3px rgba(0,0,0,0.7); -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.7); box-shadow:2px 2px 3px rgba(0,0,0,0.7);}
		.figureBorder.noPadding{padding:0px 0px 0px 0px; }
		.figureBorder.noPadding img{display:block; top:0px; }
		
		.figureBorder img{position:relative; top:2px; }

	/*----------------------------------------------------------------------------
	ico
	----------------------------------------------------------------------------*/

		.ico{text-indent:-4000px; overflow:hidden; display:inline-block; vertical-align:middle;}
		
		.ico.trash{width:10px; height:14px; background: url(../images/icoTrash.png) no-repeat top left; }
		.ico.refresh{width:10px; height:12px; background: url(../images/icoRefresh.png) no-repeat top left; }
		.ico.delete{width:7px; height:7px; background: url(../images/icoDelete.png) no-repeat top left; }
		.ico.move{width:13px; height:13px; background: url(../images/icoMove.png) no-repeat top left; cursor:move;}
		.ico.menu{width:12px; height:7px; background: url(../images/icoMenu.png) no-repeat top left;}
		.ico.plus{width:14px; height:14px; background: url(../images/icoPlus.png) no-repeat top left;}
		.ico.plus{width:14px; height:14px; background: url(../images/icoPlus.png) no-repeat top left;}
		.ico.question{width:11px; height:18px; background: url(../images/icoQuestion.png) no-repeat top left;}
		.ico.print{width:17px; height:18px; background: url(../images/icoPrint.png) no-repeat top left;}

	/*----------------------------------------------------------------------------
	bijlagen
	----------------------------------------------------------------------------*/

		.bijlagen{}
		.bijlagen span{margin:0px 20px 0px 0px; }
		.bijlagen span, .bijlagen a{text-decoration:underline; }

	/*----------------------------------------------------------------------------
	labelLinks
	----------------------------------------------------------------------------*/

		.labelLinks{margin:10px 0px;}
		.labelLinks a{background-color:#f2f2f2; margin:0px 5px 0px 0px;  padding:5px 10px; display:inline-block; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; }
		.labelLinks a i{margin-left:3px; position:relative; top:-2px;}

	/*----------------------------------------------------------------------------
	hr2
	----------------------------------------------------------------------------*/
		.hr2{border-bottom:1px solid #d9d9d9; margin:5px 0px 5px 0px; }
		
	/*----------------------------------------------------------------------------
	article
	----------------------------------------------------------------------------*/
	
		article h1{font-size:24px; color:#000000; font-weight:normal; border-bottom:1px solid #c9c9c9; padding:0px 0px 3px 0px; margin:0px 0px 10px 0px; }
		article h2{}
		article h3{}
		article h4{}
		article h5{}
		article h6{}
		
		article textarea{height:auto;}
	
	/*----------------------------------------------------------------------------
	linkSet
	----------------------------------------------------------------------------*/

		.linkSet{padding:10px 0px;}
		.linkSet a{color:#0a2db1; }
	
	/*----------------------------------------------------------------------------
	articleList
	----------------------------------------------------------------------------*/

		.articleList{}
		.articleList li{border-bottom:3px solid #e5e5e5; padding:25px 0px 25px 0px; position:relative; }
		.articleList li:hover .toolTip{display:block; }
		.articleList li:last-child{border-bottom:0px; padding-bottom:10px;}
		.articleList li:first-child{padding-top:10px;}
		.articleList .floatleft{margin-right:15px;}
		.articleList .date{color:#808080; text-align:right; padding:5px 0px;}
		
		.articleList.border{border-left:1px solid #e5e5e5; padding-left:15px;}

		.articleList.alt .figureBorder{-moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}
		.articleList.alt li{padding:10px 10px; border:0px; }
		.articleList.alt li:hover{background-color:#d9e1e3; }
		
		.articleList.scroll{overflow-y:scroll; height:370px;}
		.articleList.scroll li{}

		.articleLdist:after{visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;}

	/*----------------------------------------------------------------------------
	colonList
	----------------------------------------------------------------------------*/

		.colonList{}
		.colonList .push{width:30px; display:inline-block;  }

	/*----------------------------------------------------------------------------
	toolTip
	----------------------------------------------------------------------------*/

		.toolTip{display:none; position:absolute; z-index:100; background-color:#ffffff;  top:0px; left:-225px; width:200px;  border:1px solid #000000; padding:10px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  -moz-box-shadow:2px 2px 3px rgba(0,0,0,0.2); -webkit-box-shadow:2px 2px 3px rgba(0,0,0,0.2); box-shadow:2px 2px 3px rgba(0,0,0,0.2);}
		.toolTip:after{width:10px; height:19px; content:""; display:block; background: url(../images/tooltip.png) no-repeat top left; position:absolute; top:10px; right:-10px;}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------
TABLES
De tabellen gebruikt in deze site
----------------------------------------------------------------------------------------------------------------------------------------------------------------*/

	/*----------------------------------------------------------------------------
	formTable
	----------------------------------------------------------------------------*/

		.formTable{}
		.formTable th{text-align:left; font-weight:normal; width:200px; padding:5px 0px;}

	/*----------------------------------------------------------------------------
	radioTable
	----------------------------------------------------------------------------*/

		.radioTable{}
		.radioTable td{padding:3px 5px;}

	/*----------------------------------------------------------------------------
	matrix
	----------------------------------------------------------------------------*/

		.matrix{font-size:10px;}
		.matrix .head{background-color:#303030; color:white; border-right:1px solid #646464;}
		.matrix td{border-right:1px solid #000; height:20px; width:27px; color:black;  background-color:#fff; padding:2px 0px; border-bottom:1px solid #000; text-align:center; vertical-align:middle;}
		.matrix td input{width:20px; border:0px; text-align:center; margin:0px auto 0px auto; }
		.matrix div{position:relative; }
		
		.matrix .leftSide{text-align:left; width:190px;}
		.matrix .leftSide.title{ vertical-align:bottom; padding-bottom:5px;}
		.matrix .verticalText{width:20px; margin:15px 0px 0px 0px; position:relative; left:2px;   -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg);	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
		.matrix .aboutColumns{padding:10px 0px 5px 0px; }
		.matrix .number{height:50px; border-right:1px solid #646464; border-top:1px solid #646464;}
		.matrix .number .verticalText{top:-6px;}
		.matrix .divider{border-right-width:4px;}
		.matrix .bigTitle{font-size:14px; font-weight:bold; padding:0px 0px 0px 0px; }
		.matrix .subTitle{padding-left:10px;}
		.matrix .question{padding-left:30px;}
		.matrix .addNew{color:#6f6f6f; border-right:0px;}
		.matrix .addNew + td{background-color:#303030; }
		.matrix th.active{background-color:#cbcbcb; color:black; }
		.matrix .ico.move{position:absolute; top:0px; left:-25px;}
		.matrixBox.view .ico.trash{position:absolute; top:0px; right:5px;}
		.matrix .ico.trash{position:absolute; top:0px; right:20px;}
		.matrix .opgave{background-color:#303030; border:0px; width:90%; color:#6f6f6f; padding:2px 0px;}
		.matrix .opgave:focus{background-color:#303030; border:0px; background-color:#fff;}
		.matrix .alignRight{text-align:right; padding-right:15px;}
		.matrix .popupMenu{position:absolute; top:-3px; right:5px; color:#000000; text-align:left; }
		
		.matrixBox{background-color:#303030; white-space:nowrap; width:170px; overflow:hidden;  position:relative; z-index:100;  padding:10px 65px 40px 15px; margin:-50px 30px 0px 0px;  border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;  -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out;}
		.matrixBox.view{width:920px;  }
		.matrixBox.view .iconBar{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity:1;  -webkit-transition: all 800ms ease-in-out; -moz-transition: all 800ms ease-in-out; -o-transition: all 800ms ease-in-out; -ms-transition: all 800ms ease-in-out; transition: all 800ms ease-in-out;}
		
		.matrixBox.view .matrix .leftSide{border-bottom:1px solid #646464;}
		.matrixBox .matrix th.head.alignRight{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0;}
		.matrixBox.view .matrix th.head.alignRight{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity:1;}
		
		
		/*.matrixBox .viewField{width:920px; overflow:hidden; }*/
		.matrixBox .viewField .viewMatrix{width:1500px; }
		.matrixBox .rightSide{position:absolute; top:0px; bottom:0px; right:0px; width:50px; border-right:15px solid #303030;}
		.matrixBox .fold{width:14px; height:37px; display:block; margin-top:-18px; background: url(../images/matrixFold.png) no-repeat top left; position:absolute; top:50%; right:-15px; -moz-box-shadow:0px 5px 10px rgba(0,0,0,0.3); -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.3); box-shadow:0px 0px 10px rgba(255,255,255,0.5);}
		
		.matrixBox .iconBar{position:absolute; color:black;  top:103px; bottom:41px; left:0px; width:25px; background:#fff url(../images/toetsmatrijs.png) no-repeat center center;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity:0;}
		.matrixBox .iconBar .title{position:absolute; top:0px; bottom:0px; left:0px; right:0px; width:25px; display:block; color:#bfbfbf;  -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg);	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
		.matrixBox .iconBar .bottom{text-align:center; position:absolute; bottom:0px; left:0px; width:25px; }
		.matrixBox .iconBar .bottom .ico{margin:3px 0px 3px 0px; }
		.matrixBox .iconBar .popupMenu{position:absolute; top:5px; right:5px;}

	/*----------------------------------------------------------------------------
	defTable
	----------------------------------------------------------------------------*/

		.defTable{}
		.defTable th{color:#b5b5b5; font-weight:normal; text-align:right; padding:3px 10px 7px 0px; vertical-align:top;}
		.defTable td{color:white; vertical-align:top; padding:3px 0px 7px 0px;}