/* global styles. for the use of repetetive elements */

/* global layout */
html { width:100%; height:100%; }
body { width:100%; height:100%; font:normal 0.6em Verdana, sans-serif; line-height:1.0em; background-color:#eaeaea; }
	
	/* container */
	.page-container { width:710px; margin:10px auto 0 auto; position:relative; background:#fff url(../img/container-bg.gif) no-repeat top left; padding:120px 20px 0 20px; }
	.page-container span.bottom-decorative { display:block; width:750px; height:3px; background:url(../img/bottom-decorative-bg.gif) no-repeat top left; font-size:1px; line-height:1px; position:absolute; bottom:-3px; left:0; clear:both; } /* <-- absolute positioned bottom- (- height) of the image. */
		
		/* content */
		.page-content { padding:20px 0 25px 0; min-height:250px; height:auto !important; height:250px; }

		
		
		/* global header */
		.page-content h1 { padding:0 0 0 20px; }
		
			/* toelichting and servicedesk  background */
			.header-img { background:url(../img/toelichting-bg.gif) no-repeat top left; margin:20px 0 0 0; }
		.page-content div { margin:0 0 20px 0; }

			/* form wrapper and form process steps */
			.form-wrapper { width:710px; background:#f1f0f1 url(../img/form-heading-bg.gif) no-repeat top left; position:relative; }
			.form-wrapper form { width:708px; border-left:1px solid #e2e2e2; border-right:1px solid #e2e2e2; position:relative;  }
			.form-wrapper form fieldset { }
			.form-wrapper form fieldset em.top-caption { position:absolute; top:15px; right:20px; color:#807f7f; }
			.form-wrapper form fieldset fieldset { /* position:relative; */ width:688px; border-bottom:1px solid #e2e2e2; padding:0 0 20px 20px;  } /* reset padding as it inherits the padding from top fieldset. */
			.form-wrapper span.form-bottom-bg { display:block; width:710px; height:2px; background:url(../img/form-bottom-bg.gif) no-repeat top left; font-size:1px; line-height:1px; position:absolute; bottom:-2px; left:0; clear:both; }

				/* form pagination */
				ol#form-pagination { width:710px; height:89px; background:#fff url(../img/form-pagination-bg.gif) no-repeat top right; }
				ol#form-pagination li { float:left; width:172px; height:29px; padding:20px 0 0 0; background:url(../img/form-pagination-li-bg.gif) no-repeat bottom right; color:#000; font-size:1.1em; line-height:1.1em; text-align:right;  }
				ol#form-pagination li.first { width:350px; }
				/* active step */
				ol#form-pagination li.active { color:#f46e1a; font-weight:bold; background-image:url(../img/form-pagination-li-bg-active.gif) !important; }
				/* finished step. inject a span... */
				ol#form-pagination li span.finished { padding:0 0 0 15px; color:#807f7f; font-weight:bold; background:url(../img/form-pagination-icon-done.gif) no-repeat top left; }

				/* form error messages */
				.error-message { }
				.error-message p { padding:15px 20px; font-weight:bold; color:#ff0000; }
				.error-message ul { border:1px solid #ff0000; padding:20px;}
				.error-message ul li { color:#ff0000; font-size:1.1em; line-height:1.1em; padding:5px 0 5px 10px; background:url(../img/form-error-bg.gif) no-repeat top left;}

				/* element description */

				.form-wrapper form fieldset dl dd label.element-description {clear: left; padding-top: 20px;}

				/* form error/ok icons */
				
				.form-icon { display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; width:20px; height:20px; background-repeat: no-repeat;  vertical-align:top; }
				.form-icon-ok { background: url(../img/form-icon-ok.gif) no-repeat top left; }
				.form-icon-error { background: url(../img/form-icon-error.gif) no-repeat top left; }
				.form-icon-load { background: url(../img/form-icon-load.gif) no-repeat top left; }
				.form-icon-neutral { background: none;}

				.dl-input-radio .form-icon {background-position: 0 -3px;}
				
				.dl-input-selectbox .form-icon {background-position: 0 3px;}
				
				.dl-input-checkbox .form-icon {background-position: 0 3px;}
				
				.dl-input-textarea .form-icon {background-position: 0 -1px; }

				/* form: builder search */
				
				.search_city_results {border: 1px solid red;}
				
				/* form: warnings */
				
				#fieldset_form_aanvraag_personal_separator_project_data p {padding: 20px 20px 0 20px; color: #E20000; font-size: 1.1em; line-height: 1.3em; font-weight: bold;}

				/* form: builder search results */
				
				ul.form-layout-list li .search-results { position: relative; height: 0; width: 0; }
				ul.form-layout-list li .search-results ul { position: absolute; padding: 5px;  z-index: 2; background-color: #EAEAEA; border: 1px solid #f46e1a; width: 350px; display: none; max-height: 283px; height:auto !important; height: 283px; overflow-y: auto;}
				ul.form-layout-list li .search-results ul li { float: left; clear: both; min-height: 14px; width: 100%; cursor: pointer; border-bottom: 1px solid #ddd; padding-top: 2px; padding-bottom: 1px; }
				ul.form-layout-list li .search-results ul li span { float: left; clear: none; width: 65%; font-size: 1.1em; line-height: 14px; }
				ul.form-layout-list li .search-results ul li span.full { width: 100%; clear: both; line-height: 14px; }
				ul.form-layout-list li .search-results ul li em { float: right; clear: none; width: 30%; line-height: 14px; }
				ul.form-layout-list li .search-results ul li small { float: left; clear: both; width: 100%; font-size: 1.1em; line-height: 14px; }
				ul.form-layout-list li .search-results ul li.hover, ul.form-layout-list li .search-results ul li.key-hover { font-weight: bold;}
				
				li.clearfix { clear:both !important; }
				

		/* header */
		.page-header { width:710px; min-height:85px; height:auto !important; height:85px; position:absolute; top:0; left:20px; }
		.page-header a.bouwgarant-link { color:#000; text-decoration:none; display:block; width:147px; height:17px; padding:3px 0 0 40px; background:url(../img/bouwgarant-link-bg.gif) no-repeat top left; position:absolute; top:0; right:-20px; }
		.page-header a.bouwgarant-link strong { font-weight:bold; }

		/* navigation */
		.page-navigation { width:710px; min-height:35px; height:auto !important; height:35px; background:url(../img/navigation-bg.gif) no-repeat top left; position:absolute; top:85px; left:20px; }
		.page-navigation ul { }
		.page-navigation ul li { float:left; margin:0 25px 0 0; }
		.page-navigation ul li a { font-size:1.1em; line-height:1.1em; color:#000; font-weight:bold; text-decoration:none; }
		.page-navigation ul li a:hover, .page-navigation ul li a.active { color:#f46e1a; }
	
		/* footer */
		.page-footer { width:710px; min-height:32px; height:auto !important; height:32px; background:url(../img/footer-bg.gif) no-repeat top left; position:relative; }
		.page-footer strong { font-size:1.3em; color:#f46e1a; position:absolute; top:0; right:0; font-weight:bold; }
		.page-footer ul { padding:10px 0 0 0;}
		.page-footer ul li { float:left; background:transparent url(../img/footer-li-bg.gif) no-repeat top right;  font-size:0.9em; padding:0 10px 0 0; }
		.page-footer ul li.author { color:#807f7f; padding:0 0 0 10px; background:none; }
		.page-footer ul li a { color:#807f7f; }
		.page-footer ul li a.hover { }

/* typography */
h1, h2, h3, h4, h5, h6, cite, blockquote { font-size:1em; }
h1 { font-size:1.8em; color:#f46e1a; }
h2 { color:#f46e1a; }
h3 { }
h4 { }
h5 { }
h6 { }

p { font-size:1.1em; color:#000; line-height:1.4em; padding:0 0 20px 0; }
blockquote { }
cite { }
em { }
strong { }

a { color:#000000; text-decoration:underline; }
a:hover { }
a:visited { }
a:active { }
a:focus { }

/* form elements. use these only for styling of color, borders enz, not for padding margins enz */
fieldset { }
legend { }
label { }
input, textarea, select { border:1px solid #e2e2e2; background-color:#fff; }
button { }
input:focus, textarea:focus, select:focus { -moz-box-shadow: 0px 0px 5px #f46e1a; -webkit-box-shadow: 0px 0px 5px #f46e1a; box-shadow: 0px 0px 5px #f46e1a; }

/* overig */

/* globale skiplinks voor screenreaders */
ul.skip-links, a.skip-links { position:absolute; top:0; left:-9999px; display:none; }

/* project specific styles */

	/* global header */
	.page-content h1 { padding:0 0 0 20px; }

	/* homepage */
	.home-feature { width:708px; border:1px solid #e2e2e2; }
	.home-feature a { font-size:1.9em; color:#000; line-height:1.8em; text-decoration:none; } /* styling alt text in the image link */

	.information-block { float:left; min-height:280px; height:auto !important; height:280px; padding:0 20px; position:relative; }
	.information-block h2 { height:50px; padding:20px 0 0 0; font-size:1.1em; line-height:1.1em; font-weight:bold; }
		/* block sizes */
		.small { width:205px; background:url(../img/information-block-small-bg.gif) no-repeat top left; }
		.small span.bottom-decorative { display:block; width:230px; height:2px; background:url(../img/information-block-small-bottom-bg.gif) no-repeat top left; position:absolute; bottom:-2px; left:0; clear:both; }
		.medium { width:425px; background:url(../img/information-block-medium-bg.gif) no-repeat top left; }
		.medium span.bottom-decorative { display:block; width:465px; height:2px; background:url(../img/information-block-medium-bottom-bg.gif) no-repeat top left; position:absolute; bottom:-2px; left:0; clear:both; }
	.information-block ul { list-style-type:disc; list-style-position:outside; margin:0 0 0 15px; }
	.information-block ul li { font-size:1.1em; color:#000; line-height:1.4em; }
	.information-block ul li a { color:#000; }

	/* general page */
	.general-page { width:480px; }
		/* wysiwyg listings */
		.general-page ul { padding: 0 0 20px 30px; margin-bottom: 10px; margin-left: 13px; }
		.general-page ul li { list-style-type: disc; color: #000000; font-size: 11px; line-height: 14px; }

		/* quicklinks */
		.general-page ul.quicklinks { width:480px; height:33px; margin:50px 0 30px 0; padding:18px 0 0 0; background:url(../img/quicklinks-bg.gif) no-repeat top left; }
		.general-page ul.quicklinks li { list-style-type: none; line-height:1.4em; float:left; padding:0 40px 0 25px; }
		.general-page ul.quicklinks li a { font-size:11px; line-height:14px; color:#000; background:url(../img/quick-link-bg.gif) no-repeat top left; padding:5px 0 5px 10px; }
		.general-page ul.quicklinks li a.icon-pdf { background-image:url(../img/icon-pdf.gif) !important; padding-left:20px;}
		.general-page h2 { color:#000; font-weight:bold; font-size:1.1em; padding:0 0 10px 30px; }
		.general-page p { padding:0 0 20px 30px; }
		.general-page em { font-style:italic; padding:0 30px 15px 30px; display:block; }

	/* form specific */
	.form-wrapper legend { color:#000; font-weight:bold; font-size:1.1em; line-height:4em; padding:0 0 0 20px; }
	.form-wrapper legend.subcategorie { color:#f46e1a; padding:0; }

	/* form layout */
	fieldset#fieldset_form_aanvraag_general_separator_certificate ul li { height:20px; }
	.form-wrapper form fieldset ul li.form-item { float: left; }
	.form-wrapper form fieldset ul li.small-container { width: 145px; }
	.form-wrapper form fieldset ul li.medium-container { width: 165px; }
	.form-wrapper form fieldset ul li.large-container { width: 300px; }

	/*  layout with definition list. global padding added */
	.form-wrapper form fieldset dl { }
	.form-wrapper form fieldset dl dt, .form-wrapper form fieldset dl dd  { padding:5px 0; line-height:1.2em; }
	.form-wrapper form fieldset dl dd label { color:#000000; padding:0 20px 0 0; cursor: pointer;}

		/* form data overview */
		dl.form-data-overview { font-size:1.1em; line-height: 1.1em; margin:0 0 10px 0; }
		dl.form-data-overview dt { float:left; width:300px; }
		dl.form-data-overview dd { font-weight:bold; float:left; width:360px; }
		dl.form-data-overview dd ul { }
		dl.form-data-overview dd ul li { padding:5px 0; }


	/* form input elements enz */
	.form-wrapper form fieldset label { font-size:1.1em; }
	.form-wrapper form fieldset label span.required { color:#f46e1a; }
	.form-wrapper form fieldset input { vertical-align:top; height:15px; padding:2px; color:#000; font-size:1.1em; }
	.form-wrapper form fieldset input.radio, .form-wrapper form fieldset input.checkbox { border:none; background-color:transparent; height:auto !important; /* resetting auto values. default radio height. */ vertical-align:middle; }
	.form-wrapper form fieldset textarea { width:544px; color:#000; padding:2px; }
	.form-wrapper form fieldset select { color:#000; }

		/* action links, copy data enz.. */
		a#edit-personal-data { background:url(../img/submit-bg.gif) no-repeat top left;  font-size:1.1em; line-height:1.2em; color:#000; padding:0 10px 0 10px; float:right; display:block; /* ie6 fix for not defining width on block level elements --> */ display:inline-block; }
		a#edit-project-data { background:url(../img/submit-bg.gif) no-repeat top left;  font-size:1.1em; line-height:1.2em; color:#000; padding:0 10px 0 10px; float:right; display:block; /* ie6 fix for not defining width on block level elements --> */ display:inline-block; }
		
		span#copy-data { background:url(../img/copy-data-a-bg.gif) no-repeat top left; font-size:1.1em; line-height:1.1em; color:#807f7f;  padding: 5px 5px 5px 20px; display:inline-block; float: right; margin: 10px 5px -30px 0; text-decoration: underline; cursor: pointer; display:block; /* ie6 fix for not defining width on block level elements --> */ }

		.form-project-amount { float: left; width: 100%; height:auto !important; display:none; padding: 5px; border: 1px solid #AAA; background: #fff; color: #555;  font-size: 11px; line-height: 15px; margin-top: 5px !important; font-weight: bold; }
		.form-project-amount span { color: #F46E1A; }
		.form-project-amount-error { color: #FF0000; }
		
		span.caption { color:#807f7f; vertical-align:top; line-height:1.8em; /* for ie as it doesn't get correct line-height --> */ display:inline-block; }

		/* input and select widths */
		input.medium-field { width:105px; }
		input.large-field { width:248px; }
		select.medium-select { width:248px; }
		
		.money-field { line-height: 15px; font-size: 1.1em; }
		.money-field em { line-height: 15px; font-size: 15px; padding: 2px; }
		.money-field em, .money-field input { float: left; }
		input.money-field-euros, input.money-field-cents { font-family: 'Courier New', 'Consolas', 'Console', 'Fixed'; font-size: 1.2em !important; }
		input.money-field-euros { width: 80px; text-align: right;}
		input.money-field-cents { width: 20px; text-align: left; }
		
		.enddate-wrapper { float: left; }
		#fieldcontainer_form_aanvraag_project_date_start { padding-top: 15px; }
		#fieldcontainer_form_aanvraag_project_date_end { padding-top: 15px; }

	.submit-form-wrapper { width:668px; height:20px; padding:20px; position:relative; margin:0 !important; }
	.submit-form-wrapper em { color:#807f7f; font-size:1.1em; }
	.submit-form-wrapper span.previous-step { text-align:left; line-height:1.1em; padding:0 0 0 10px; background:url(../img/submit-bg-prev.gif) no-repeat top left; position:absolute; left:20px; top:20px; font-size:1.1em; font-family:Verdana; cursor: pointer; }
	.submit-form-wrapper .printbutton { text-align:right; line-height:1.2em; padding:0 10px 0 0; background:url(../img/submit-bg.gif) no-repeat top right; position:absolute; right:200px; top:20px; font-size:1.1em; font-family:Verdana; cursor: pointer; text-decoration: none; }
	.submit-form-wrapper button.next-step { text-align:right; min-height: 15px; height: auto !important; height: 15px; line-height:1.1em; padding:0 10px 0 0; background:url(../img/submit-bg.gif) no-repeat top right; position:absolute; right:20px; top:20px; font-size:1.1em; font-family:Verdana; }

		/* layout elements */
		ul.form-layout-list { padding:2px 0 0 0; }
		ul.form-layout-list li { }

			/* second level */
			ul.form-layout-list li ul { }
			ul.form-layout-list li ul li { float:left; }

			/* select box used for selecting start/end days */
			.select-wrap { float: left; width:250px; height:50px; background:url(../img/select-wrap-bg.gif) no-repeat top left; position:relative; margin:0 10px 0 0 !important; }
			.select-wrap ul { padding:2px 0 0 10px; }
			.select-wrap ul li { float:left; padding:0 5px 0 0; }
			.select-wrap ul li dd { padding-top:0px !important; }
			.select-wrap ul li input.smallest { width:53px; }
			.select-wrap a.close-panel { position:absolute; top:1px; right:1px; }
			.select-wrap-disabled, .select-wrap-disabled * { color: #999 !important; background-image: none !important; }

		/* li width definitions, form design has different width's all over the place! if someone has better idea of laying out these elements more modular, let me know! */
		/* the build up: i've divided the form field (on sketch) into 4 collumns. some input fields use 3 of these columns others only 1. based on this sketch the values are as defined below. last coll is without width */		li.first-coll { width:135px; } 
		li.second-coll { width:165px; }
		li.third-coll { width:135px; } 
		
		/* combinations */
		li.first-second-combined-coll { width:300px; } /* combination of coll 1 and 2 */

	/* warranty wrapper */
	.warranty-wrapper  { width:628px; height:198px; border:1px solid #e2e2e2; background-color:#fff; padding:20px; overflow:auto; }
	.warranty-wrapper h2 { font-size:2.4em; line-height:2.4em; font-weight:bold; color:#807f7f; }
	.warranty-wrapper h3 { font-size:1.1em; line-height:1.1em;  font-weight:bold; color:#807f7f; }
	.warranty-wrapper p { font-size:1.1em; line-height:1.1em; color:#807f7f; }
	.warranty-wrapper strong { font-weight:bold; }

	/* certificat conditions */
	ul.certificat-conditions { }
	ul.certificat-conditions li { color:#807f7f; line-height:1.1em; padding:2px 0; }
	
	/* calender block */
	.dp-choose-date { display: inline-block; margin: 0 0 0 5px; width: 15px; height: 19px; background: url('../img/icon-calender.gif') no-repeat left top; }

	/* service desk */
	
	.servicedesk-page { padding-top: 30px; }
	
	/* charcount on textarea */
	.charcount { display: block; font-size: 10px; padding: 0 0 6px; text-align: right; line-height: 18px; }
	.charcount-overlimit { color: #E20000; background: url(../img/form-icon-error.gif) no-repeat right top; padding-right: 22px;}
	
	.general-page strong { font-weight: bold;}