/* ----------------------------------------
- Online Service CSS 
- 
- Extra stylesheet t.b.v. de online services
- formulieren.
---------------------------------------- */

/* ----------------------------------------
- OS portal stuff 
---------------------------------------- */
body.os-portal #os-portal {
	clear: both;
	margin-left: -44px;
	margin-right: -22px;
	padding-left:0;
	padding-right:0;
}
	body.os-portal #os-portal .columns { 
		position: absolute;
		z-index: 200;
		top: 9em;
		margin: 90px 10px 0 17px;
		width: auto;
	}
	body.os-portal #os-portal .column h2 {
		height:20px;
		font-size: 160%;
		font-weight: normal;
		font-family: "Gill Sans Regular","Gill Sans","Gill Sans MT",Arial,sans-serif;
		background-repeat:no-repeat;
		margin:0;
		padding:0 0 0.6em;
	}
	body.os-portal #os-portal .panel {
		height:auto !important;
		height: 23em;
		min-height: 23em;
		padding-bottom:2em;
	}
	body.os-portal #os-portal #service-aanvragen {
		width: 446px !important;
		background-color: #fff;
		background-image: url("/img/panels/os-portal.gif");
	}
		body.os-portal #os-portal #service-aanvragen h2 {
			color: #000;
		}
		body.os-portal #os-portal #service-aanvragen .group {
			float: left;
			width: 210px;
			margin-bottom: 0;
		}
		body.os-portal #os-portal #service-aanvragen .group.right {
			float: right;
		}
		body.os-portal #os-portal #service-aanvragen .foot {
			clear: both;
			background-image:url("/img/panels/os-portal-foot.gif");
			width: 478px;
		}
	body.os-portal #themas {
		padding-bottom:0;
		height:auto !important;
		height:27em;
		min-height:27em;
		overflow: inherit !important;
		overflow: hidden;
	}
		body.os-portal #themas h2 {
			color: #000;
		}
	body.os-portal #os-portal .panel .foot {
		position:absolute;
		bottom:0;
		left:0;
		margin:0;
	}
	* html body.os-portal #os-portal .panel .foot {
		bottom:-1px;
	}
#advies-wizard {
	background-image: url("/img/panels/os-advies.jpg");
	height: 136px;
}
	#advies-wizard h2 {
		font-size: 160%;
		font-weight: normal;
		font-family: "Gill Sans Regular","Gill Sans","Gill Sans MT",Arial,sans-serif;
	}
	#advies-wizard p {
		margin-left: 80px;
	}
	#advies-wizard .foot {
		position:absolute;
		bottom:0;
		left:0;
		margin:0;
	}
	* html #advies-wizard .foot {
		bottom:-1px;
	}

/* ----------------------------------------
- OS subcontent panel stuff 
---------------------------------------- */
.os-form #subcontent { /* Push subcontent down */
	margin-top: 132px;
}
.os-form #subcontent.nomargin { /* Push subcontent down */
	margin-top: 0px;
}
.os-status {
	color:#666;
	background-color:#fff;
	background-image:url("/img/panels/product.gif");
	padding: 10px 16px 0;
}
	.os-status .foot {
		background-image:url("/img/panels/product-foot.gif");
	}
	.os-status h2 {
		background: #fff url("/img/icons/os-clipboard.gif") no-repeat right top;
		height: 27px;
		line-height: 27px;
		margin-bottom: 12px;
	}
	.os-status h3 {
		color: #999;
	}
	.os-status-ankeiler {
		color: #000;
		margin: 0;
	}
	.os-status-duur {
		background: #fff url("/img/icons/os-status-duur.gif") no-repeat left top;
		padding-left: 15px;
	}
	.os-status-divider {
		height: 1px;
		padding: 0;
		margin: 0;
		background: #fff url("/img/content/border-hor-grey.gif") repeat-x left center;
	}
	.os-status ul.os-status-list { /* Status list */
		background: url("/img/content/border-hor-grey.gif") 0 100% repeat-x;
		margin:0 0 0.5em;
		padding:0 0 1px;
		list-style:none outside;
		height:1%;
		clear:both;
	}
		.os-status ul.os-status-list li {
			background:url("/img/content/border-hor-grey.gif") 0 0 repeat-x;
			height:1%;
			line-height:150%;
			margin:0;
		}
		.os-status ul.os-status-list li span {
			float: none;
			color:#999;
			display: block;
			padding:0.4em 0 0.4em 0;
			height:1%;
		}
			.os-status ul.os-status-list li span strong {
				color: #333;
				font-weight: normal;
			}
		.os-status ul.os-status-list li.os-status-current span {
			color: #333;
			background:url("/img/icons/os-status-current.gif") transparent right center no-repeat;
			padding:0.4em 32px 0.4em 0;
		}
			.os-status ul.os-status-list li.os-status-current span strong {
				color: #f60;
				font-weight: bold;
			}
		.os-status ul.os-status-list li.os-status-finished span {
			background:url("/img/icons/os-status-finished.gif") transparent right center no-repeat;
			padding:0.4em 32px 0.4em 0;
		}
		.os-status ul.os-status-list li.os-status-sent span {
			background:url("/img/icons/os-status-finished.gif") transparent right center no-repeat;
			padding:1.2em 32px 1.2em 0;
		}
		.os-status ul.os-status-list li.os-status-todo span {
			background:url("/img/icons/os-status-check.gif") transparent right center no-repeat;
			padding:0.4em 32px 0.4em 0;
		}
	.os-status ul.os-todo-list { /* Thema todo list */
		background: url("/img/content/border-hor-grey.gif") 0 100% repeat-x;
		margin:0 0 0.5em;
		padding:0 0 1px;
		list-style:none outside;
		height:1%;
		clear:both;
	}
		.os-status ul.os-todo-list li {
			background:url("/img/content/border-hor-grey.gif") 0 0 repeat-x;
			height:1%;
			line-height:150%;
			margin:0;
			padding:0.4em 0 0.4em 0;
			float:none;
			clear: both;
			display:block;
		}
			/* clearfixes */
			.os-status ul.os-todo-list li:after {
				content:".";
				display:block;
				visibility:hidden;
				clear:both;
				height:0;
			}
		.os-status ul.os-todo-list li label {
			display: block;
			float: left;
			width: 170px !important;
			padding: 0;
		}
		.os-status ul.os-todo-list li span {
			background-image: url("/img/icons/os-status-pre.gif") !important;
			background-position: left -1px;
			background-repeat: no-repeat;
			padding-left: 10px;
		}
	#os-todo {
		/* display: none; */
	}

/* ----------------------------------------
- OS cross-sell panel stuff 
---------------------------------------- */
.panel.os-promo {
	color: #666;
	background-color: #fff;
	background-image: url("/img/panels/os-promo.gif");
	padding: 10px 16px 0;
	width: 624px !important;
}
	.panel.os-promo .foot {
		background-image:url("/img/panels/os-promo-foot.gif");
		width: 656px;
	}
	.panel.os-promo h3 {
		margin-top: 15px;
		font-size: 120%;
	}
	.panel.os-promo h3 a {
		color: #000;
		font-weight: normal;
	}
	.panel.os-promo h3 a span {
		background:url("/img/buttons/more-list.gif") transparent 100% 100% no-repeat;
		padding:0.4em 32px 0.4em 0 !important;
	}

/* ----------------------------------------
- OS Form specific stuff 
---------------------------------------- */
body.os-form-althead h1 { /* Single line h1 */
	height: 64px;
}
	.os-form-althead #subcontent { /* Push subcontent down */
		margin-top: 132px;
	}
#formMain .form-title { /* Main form title */
	background: #fff url("/img/content/border-hor-grey.gif") 0 100% repeat-x;
	height: 32px;
	margin-bottom: 13px
}
	#formMain .form-title h3 {
		color: #f60;
		font-size: 140%;
		font-weight: bold;
		float: left;
		margin: 0;
	}
	#formMain .form-title p {
		color: #333;
		font-weight: bold;
		float: right;
		margin: 5px 0 0;
	}
	/* clearfixes */
	#formMain .form-title:after {
		content:".";
		display:block;
		visibility:hidden;
		clear:both;
		height:0;
	}
#formMain .form-title-sub { /* Subtitles in form */
	background: #fff;
	height: 24px;
}
	#formMain .form-title-sub h3 {
		color: #f60;
		font-size: 140%;
		font-weight: bold;
		float: left;
		margin: 0;
	}
	#formMain .form-title-sub p {
		float: right;
		width: 300px;
		margin: 5px 0 0;
	}
	/* clearfixes */
	#formMain .form-title-sub:after {
		content:".";
		display:block;
		visibility:hidden;
		clear:both;
		height:0;
	}
#formMain .infobox { /* Infobox popup - dl */
	display: inline;
	position: relative;
}


* html #formMain .infobox { /* Infobox popup - dl */
	display: inline;
	position: absolute;
}



	#formMain .infobox dt {
		display: inline;
		margin-left: 5px;
		background: url("/img/icons/os-more-info.gif") no-repeat left 1px;
		z-index: 500;
		overflow:hidden;
		width:24px;
		padding:2px !important;

	}	


                * html #formMain .infobox dt {
					background:transparent url(/img/icons/os-more-info.gif) no-repeat scroll left 1px;
					display:inline;
					margin-left:5px;
					padding:2px 5px;
					overflow:none;
					z-index:none;
					width:none;
					top:-3px;

				}		

		#formMain .infobox dt span {
			visibility: hidden;
		}

	#formMain .infobox dd {
		position: absolute;
		top: -.3em;
		left: 2em;
		display: none;
		width: 135px;
		//border: 1px solid #f60;
		background: #fff;
		padding: 4px;
		margin: 4px;
		z-index: 900;
	}

	#formMain .infobox:hover dd,
	#formMain .infobox.infoboxhover dd {
		display: block;
		margin-left:10px;
	}
	
	* html #formMain .infobox:hover dd,
	* html #formMain .infobox.infoboxhover dd {
		margin-left:none;
	}

#os-form-infobox {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 143px;
	z-index: 1000;
}
	#os-form-infobox-msg {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 135px;
		padding: 4px;
		border: 1px solid #f60;
		background: #fff;
		color: #333;
		font-size: 85%;
		text-align: left;
		z-index: 900;
	}
	#os-form-infobox-iframe {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 23px;
		z-index: 800;
	}
#formMain .os-infopopup { /* Infobox popup - a */
	position: relative;
	text-decoration: none;
	color: #000;
	font-weight: normal;
	margin: 0;
	padding: 0;
	margin-left: 5px;
}
	#formMain .os-infopopup.righthand { /* righthandside */
		float: right;
	}
	#formMain .os-infopopup img {
		border: 0;
		margin: 0;
		padding: 0;
		vertical-align: middle;
	}
	#formMain .os-infopopup-text {
		display: block;
		position: absolute;
		width: 135px;
		padding: 4px;
		background-color: #fff;
		border: 1px solid #f60;
		top: -4px;
		left: -9000em;
		z-index: 500;
	}
	#formMain .os-infopopup:hover { /* IE */
		border-width: 0;
	}
	#formMain .os-infopopup:hover .os-infopopup-text {
		left: 20px;
	}
		#formMain .os-infopopup.righthand:hover .os-infopopup-text { /* text on lefthandside */
			left: -150px;
		}
#formMain .os-photogallery { /* Photo gallery icon */
}
	#formMain .os-photogallery img {
		border: 0;
		margin: 0;
		padding: 0;
		vertical-align: middle;
	}
	#formMain .os-photogallery.righthand { /* righthandside */
		float: right;
	}
#formMain fieldset {
	margin: 0;
	margin-bottom: 18px;
	padding: 0;
	border: none;
	clear: both;
	color: #222;
}
	#formMain legend {
		display: block;
		font-weight: bold;
		color: #000;
		margin: 0;
		margin-left: -7px;
		padding: 0;
	}
	#formMain fieldset small { /* Help tekst */
		font-size: 80%;
	}
	#formMain div label {
		display: block;
		float: left;
		width: 185px;
		padding-right: 5px;
	}
		#formMain div.os-explanation label,
		#formMain div .radiogroup label {
			display: block;
			float: left;
			width: 110px;
			padding-right: 5px;
			padding-left: 24px;
		}
		#formMain div label.inline {
			display: inline;
			float: none;
			width: auto;
			padding-left: 0;
		}
		#formMain div label.inline-extra {
			display: inline;
			float: none;
			width: auto;
			padding-left: 7px;
		}
	#formMain div .radiogroup {
		display: block; 
		width: 290px; 
		margin-left: 190px;
	}
	#formMain div .radiogroup div.fixed{
		float:left;
		width: 150px;
	}
	#formMain .os-optional {
			display: none;
	}
	#formMain .os-explanation {
		margin-left: 190px;
		width: 290px;
	}
	#formMain input,
	#formMain select,
	#formMain textarea,
	#formMain option {
		padding: 0 3px;
		font-size: 100%;
		line-height: 130%;
		font-family: Arial,sans-serif;
		vertical-align: middle;
		-moz-box-sizing: border-box;
	}

#formMain select{
   padding: 0px !important;
}


		#formMain input.small {                                             
			width: 80px; 
		}

                               * html #formMain input.small {                                             
		                 width: 70px;                             
		}
                               
		#formMain input.medium,
		#formMain select.medium {
			width: 105px;
		}
		#formMain input.wide,
		#formMain select.wide {
			width: 280px;
		}
		#formMain input.readonly {
			background-color: #fff;
			border: none;
			padding: 1px 5px; 
		}
/* Actions below the form */	
#formMain .form-actions {
	background: #fff url("/img/content/border-hor-grey.gif") 0 0 repeat-x;
	height: 32px;
	padding-top: 20px;
}
	/* clearfixes */
	#formMain .form-actions:after {
		content:".";
		display:block;
		visibility:hidden;
		clear:both;
		height:0;
	}
	#formMain .form-actions input.submit {
		float: none !important;
		margin: 0;
		clear: none;
	}
	#formMain .form-actions a.button {
		clear: none;
		width: 170px;
	}
		#formMain .form-actions a.button span {
			text-align:left;
			padding-top: 3px;
			width: 128px;
		}
		#formMain .form-actions a.button.large span 
		{
		    padding-top: 6px;
		}
		#formMain .form-actions a.button.wide {
			width: 220px;
		}
			#formMain .form-actions a.button.wide span {
				width: 178px;
			}
	#formMain .form-actions a.backbutton {
		font-weight: normal;
		line-height: 150%;
		float: left;
		display: block;
		width: 170px;
		color: #fff;
		background: url("/img/buttons/small-back-r.gif") transparent 100% 3px no-repeat;
		text-decoration:none;
		position:relative;
		margin: -0.15em 0 0 5px;
		cursor:pointer;
		padding: 0;
	}
	* html #formMain a.backbutton,
	* html #formMain a.button {
		line-height: 165%;
		display:inline;
	}
		#formMain .form-actions a.backbutton span {
			text-align:right;
			float: left;
			width: 128px;
			color: #fff;
			background-color: transparent;
			background: url("/img/buttons/small-back-l.gif") 0 3px no-repeat;
			padding: 4px 10px 0 32px;
			margin: 0 0 0 -5px;
			height: auto !important;
			height: 22px;
			min-height: 22px;
			display: block;
			position: relative;
		}
		#formMain .form-actions a.backbutton:hover span {
			color: #ffd9c0;
			background-color: transparent;
		}
		#formMain .form-actions a.backbutton.wide {
			width: 220px;
		}
			#formMain .form-actions a.backbutton.wide span {
				width: 178px;
			}
	#formMain .form-actions .step-prev {
		float: left; 
		width: 60px; 
		text-align: right; 
		line-height: 22px;
	}
	#formMain .form-actions .step-next {
		float: right; 
		width: 75px; 
		line-height: 22px;
	}

#formMain .os-form-divider { /* Simple divider in form */
	background: #fff url("/img/content/border-hor-grey.gif") 0 0 repeat-x;
	height: 1px;
	clear: both;
}

#formMain table { /* Table stuff inside form */
	margin: 0.3em 0 1.4em;
	border: 1px solid #fff;
	border-collapse: collapse;
	line-height: 140%;
}
	#formMain th,
	#formMain td {
		vertical-align: top;
		text-align: left;
		padding: 0.2em 0.5em;
		border: 1px solid #fff;
		color: #222;
		background: #fff;
		font-weight: normal;
	}

.filelist { /* List of downloadable files */
	margin: 0.6em 0 1.8em;
	padding: 0 0 1px;
	list-style: none;
	background: url("/img/content/border-hor-grey.gif") 0 100% repeat-x;
}
	.filelist li {
		background: #fff url("/img/content/border-hor-grey.gif") repeat-x;
		padding: 0;
		margin: 0;
		height: 1%;
	}
	body.javascript-ok .filelist li.collapsed {
	}
		.filelist li .question {
			margin: 0;
			font-weight: bold;
			padding:0.3em 0 0.3em 0.5em;
			position:relative;
		}
		body.collapser-ok .filelist li .question {
			padding: 0;
		}
			.filelist li .question a {
				font-weight: bold;
				outline: 0;
				text-decoration: none;
				color: #f60;
				background: url("/img/buttons/more-list.gif") transparent 100% 100% no-repeat;
				display: block;
				padding: 0.3em 32px 0.3em 0.5em;
				height: 1%;
			}
			.filelist li .question a:hover {
				text-decoration: none;
				background-color: #f0f0f0;
			}
		.filelist li.collapsed {
			padding-bottom:1px;
		}
			.filelist li.collapsed .question a {
				font-weight: bold;
				color: #f60;
				background-color: transparent;
				background-image: url("/img/buttons/more-list-collapsed2.gif");
			}
		body.javascript-ok .filelist li .question {
			font-weight: bold;
		}
		body.javascript-ok .filelist li.collapsed .question {
			font-weight: bold;
			color: #f60;
			background: transparent;
		}
			.filelist li .question a span.artcount {
				font-weight: normal;
				text-decoration: none;
				color: #666;
			}
		.filelist li .answer {
			color: #666;
			background: transparent;
			padding: 0 0.4em 0.4em 0;
		}
		body.javascript-ok .filelist li .answer {
			display:none;
		}
		body.javascript-ok .filelist li.collapsed .answer {
			display:block;
		}
		.filelist li p {
			margin:0 32px 0 0;
		}
		.filelist .answer table {
			width: 100% !important;
		}
			.filelist .answer table th {
				background: #fff url("/img/content/border-hor-darkgrey.gif") repeat-x left bottom !important;
				color: #000 !important;
				padding: .3em .5em !important;
				font-weight: bold !important;
			}
			.filelist .answer table td {
				background: transparent !important;
				color: #666 !important;
				padding: .3em .5em !important;
			}
			.filelist .answer table tr.tr-alt td {
				background: #f0f0f0 !important;
			}
			.filelist .answer table td a.action span {
				color: #f60 !important;
				padding: .1em 0 .1em 25px !important;
				background-position: left top !important;
			}
			.filelist .answer table td a.action:hover span {
				color: #000 !important;
			}
			.filelist .answer a.action.delete {
				display: block !important;
				width: 20px !important;
				height: 20px !important;
				overflow: hidden !important;
				float: right !important;
				margin-top: -1.5em !important;
			}

/* ----------------------------------------
- OS Form validation stuff 
---------------------------------------- */
#os-form-warning {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 290px;
}
	#os-form-warning-container {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 278px;
		padding: 1px 5px;
		border: 1px solid #f60;
		background: #fff;
		color: #f60;
		font-size: 80%;
		font-weight: bold;
		text-align: left;
		z-index: 900;
	}
		#os-form-warning-msg {
			color: #333;
			font-weight: normal;
		}
		#os-form-warning-arrow {
			display: block;
			position: absolute;
			width: 8px;
			height: 17px;
			background: #fff url("/img/icons/warning-arrow.gif") no-repeat left top;
			left: -10px;
			top: -10px;
		}
	#os-form-warning-iframe {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 23px;
		z-index: 800;
	}

/*dag, maand, jaar invoervelden opmaak*/
/* ie6 fix */

* html #formMain .dag, * html #formMain .maand{
   width: 18px;
}

* html #formMain .jaar {
   width: 26px;
}

/*other browser*/
#formMain .dag, #formMain .maand {
   width: 25px;
}

#formMain .jaar {
   width: 37px;
}

.radiogroupLeft{
   float:left !important;
   margin-left: 0px !important;
   width: 200px !important;

}

* html .radiogroupLeft{
   width: 100px;
}