/******************************
    GLOBAL
******************************/
    
    * {
        padding: 0;
        margin: 0;
        font-family: Arial,Helvetica,sans-serif;
    }
    
    body.disabled * {
    	color: #ccc;
    }
    
    html, body {
    	height: 100%;
    	width: 100%;
    	overflow: hidden;
    }
    
    html, body, td, th, li, div, p {
        font-size: 10pt;
    }
    
    html body * {
        line-height: 12pt;
    }
    
    .clear {
        clear: both;
		font-size: 0pt;
		height: 0pt;
		line-height: 0pt;
		overflow: hidden;
    }
    
    h1, h2, h3, h4 {
        color: #164452;
    }
    
    h2 {
    	margin: 18px 0 12px;
    }
    
    h3 {
    	margin: 18px 0 5px;
    }
    
    p {
        margin: 8px 0;
    }
    
    input {
    	border: 1px solid gray;
    }
    
    fieldset {
    	padding: 10px;
    }
    
    fieldset legend {
    	line-height: 12pt;
    }
    
    .noborder {
    	border: 0;
    }
	
	span.notice {
		color: #0CACDC;
	}
    
/******************************
    CONTAINER
******************************/
    
    div#container {
    	background: #EFEFEF;
    	height: auto !important;
    	height: 100%;
    	min-height: 100%;
    	position: relative;
    }
    
/******************************
    HEADER
******************************/

    div#header {
    	width: 100%;
        background: #fff;
        border-bottom: 1px solid #9F9F9F;
    }
    
/******************************
    CENTER
******************************/

    div#center {
        width: 100%;
        overflow: hidden;
        background: white;
    }
    
    div#center div#leftPanel {
    	background: #dedddd;
        border-right: 1px solid #9F9F9F;
    	width: 200px;
        float: left;
    	height: auto !important;
        height: 100%;
    	min-height: 100%;
    }
    
    div#center div#rightPanel {
    	height: auto !important;
        height: 100%;
    	min-height: 100%;
    	float: right;
    	overflow: auto;
    	position: relative;
    }
    
    div#center div#rightPanel div#contentWrap {
    	height: auto !important;
        height: 100%;
    	min-height: 100%;
    }
    
    
/******************************
    FOOTER
******************************/

    div#footer {
        text-align: right;
        padding: 10px;
        border-top: 1px solid #9F9F9F;
    }
    
    div#footer div.buttonContainer {
        float: right;
    }
    
    div#footer a.button {
        float: left;
    }
    
/******************************
    OBJECTS
******************************/

    /***** BUTTON *****/
    
        a.button {
			background: url(/images/boek/button_left_bg.gif) no-repeat left;
			width: 120px;
			margin: 0 2px;
			display: block;
			text-decoration: none;
			border: 0;
			outline: 0;
		}

		a.button:hover {
			background-image: url(/images/boek/button_over_left_bg.gif);
		}
		
		a.button.disabled {
			background: #fff;
			border: 1px solid #c6c5c9;
		}
		
		a.button:active {
			background-image: url(/images/boek/button_active_left_bg.gif);
		}
		
		a.button.disabled:active {
			background: #fff;
		}
		
		a.button input {
			border: 0;
			display: block;
			width: 100%;
			font-size: 10pt;
			background: url(/images/boek/button_right_bg.gif) no-repeat right;
			height: 21px;
			outline: 0;
		}
		
		a.button.disabled input {
			background: none;
			color: #c6c5c9;
		}
		
		a.button:hover input {
			background-image: url(/images/boek/button_over_right_bg.gif);
			cursor: pointer;
		}
		
		a.button:active input {
			background-image: url(/images/boek/button_active_right_bg.gif);
			cursor: pointer;
		}
		
		a.button.disabled:hover input {
			background: none;
			cursor: default;
		}
		
		a.button.disabled:active input {
			background: none;
			cursor: default;
		}
		
    /***** WINDOW *****/
    
        div.window {
            background: #FFF;
            border: 1px solid #2a313c;
            position: relative;
            overflow: hidden;
        }
    
        div.window div.title {
            color: white;
            cursor: move;
            font-size: 10pt;
            line-height: 28px;
            padding-left: 8px;
            height: 27px;
            background: url(/images/boek/window_head_left_bg.gif) no-repeat left;
        }
        
        div.window div.title div.controlBox {
            float: right;
            padding-right: 6px;
            line-height: 27px;
            height: 27px;
            background: url(/images/boek/window_head_right_bg.gif) no-repeat right;
        }
        
        div.window div.title div.controlBox img {
            cursor: pointer;
            margin-top: 6px;
        }
        
        div.window div.contentWrap {
            overflow: auto;
            position: relative;
            width: 100%;
        }
        
        div.window div.contentWrap div.content {
            padding: 10px;
            position: relative;
        }
        
        div.window.loading div.contentWrap div.content {
            height: 20px;
            background: url(/images/boek/popup_load.gif) no-repeat 5px 5px;
        }
        
        div.window div.footer {
            background: #EFEFEF;
            padding: 4px;
            border-top: 1px solid #9f9f9f;
        }
        
        div.window.resizable div.footer {
            padding-right: 12px;
        }
        
        div.window div.footer div.buttonContainer {
            float: right;
        }
        
        div.window div.footer div.buttonContainer a.button {
            float: left;
        }
        
    /***** CROPPER *****/
    
        .imgCrop_wrap {
        	position: relative;
        	cursor: crosshair;
        }
        
        .imgCrop_wrap.opera8 .imgCrop_overlay,
        .imgCrop_wrap.opera8 .imgCrop_clickArea { 
        	background-color: transparent;
        }
        
        .imgCrop_wrap,
        .imgCrop_wrap * {
        	font-size: 0;
        }
        
        .imgCrop_overlay {
        	background-color: #000;
        	opacity: 0.5;
        	filter:alpha(opacity=50);
        	position: absolute;
        	width: 100%;
        	height: 100%;
        }
        
        .imgCrop_selArea {
        	position: absolute;
        	cursor: move;
        	z-index: 2;
        }
        
        .imgCrop_clickArea {
        	width: 100%;
        	height: 100%;
        	background-color: #FFF;
        	opacity: 0.01;
        	filter:alpha(opacity=01);
        }
        
        .imgCrop_marqueeHoriz {
        	position: absolute;
        	width: 100%;
        	height: 1px;
        	background: transparent url(/images/boek/marqueeHoriz.gif) repeat-x 0 0;
        	z-index: 3;
        }
        
        .imgCrop_marqueeVert {
        	position: absolute;
        	height: 100%;
        	width: 1px;
        	background: transparent url(/images/boek/marqueeVert.gif) repeat-y 0 0;
        	z-index: 3;
        }
        
        .imgCrop_marqueeNorth { top: 0; left: 0; }
        .imgCrop_marqueeEast  { top: 0; right: 0; }
        .imgCrop_marqueeSouth { bottom: 0px; left: 0; }
        .imgCrop_marqueeWest  { top: 0; left: 0; }
        
        .imgCrop_handle {
        	position: absolute;
        	border: 1px solid #333;
        	width: 6px;
        	height: 6px;
        	background: #FFF;
        	opacity: 0.5;
        	filter:alpha(opacity=50);
        	z-index: 4;
        }
        
        /* fix IE 5 box model */
        * html .imgCrop_handle {
        	width: 8px;
        	height: 8px;
        	wid\th: 6px;
        	hei\ght: 6px;
        }
        
        .imgCrop_handleN {
        	top: -3px;
        	left: 0;
        	cursor: n-resize;
        }
        
        .imgCrop_handleNE { 
        	top: -3px;
        	right: -3px;
        	cursor: ne-resize;
        }
        
        .imgCrop_handleE {
        	top: 0;
        	right: -3px;
        	cursor: e-resize;
        }
        
        .imgCrop_handleSE {
        	right: -3px;
        	bottom: -3px;
        	cursor: se-resize;
        }
        
        .imgCrop_handleS {
        	right: 0;
        	bottom: -3px;
        	cursor: s-resize;
        }
        
        .imgCrop_handleSW {
        	left: -3px;
        	bottom: -3px;
        	cursor: sw-resize;
        }
        
        .imgCrop_handleW {
        	top: 0;
        	left: -3px;
        	cursor: w-resize;
        }
        
        .imgCrop_handleNW {
        	top: -3px;
        	left: -3px;
        	cursor: nw-resize;
        }
        
        .imgCrop_dragArea {
        	width: 100%;
        	height: 100%;
        	z-index: 200;
        	position: absolute;
        	top: 0;
        	left: 0;
        }
        
        .imgCrop_previewWrap {
        	overflow: hidden;
        	position: relative;
        }
        
        .imgCrop_previewWrap img {
        	position: absolute;
        }
        
/******************************
    CONTENT
******************************/

    /***** LEFT PANEL *****/
    
        ul {
            margin-top: 10px;
            position: absolute;
            z-index: 999;
            width: 220px;
            list-style-type: none;
        }
        
        ul li {
            margin-left: 8px;
            padding-left: 6px;
            height: 24px;
            line-height: 23px;
            font-size: 10pt;
            color: #b1b1b1;
        }
        
        ul li.enabled {
            color: black;
            cursor: pointer;
        }
        
        ul li.activated.enabled {
            cursor: default;
        }
        
        ul li.mouseover {
            text-decoration: underline;
        }
        
        ul li.activated {
            color: black;
            background: url(/images/boek/current_step_bg.gif) no-repeat;
            text-decoration: none;
        }
        
    /***** CONTENT CONTAINER *****/
    
        div#contentContainers {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 100%;
            overflow: hidden;
        }
        
        div.contentContainer {
            position: absolute;
            background: white;
            padding: 10px 10px 10px 25px;
        }
        
        div#contentContainers div.contentContainer div.innerContent {
        }
        
    /***** START *****/
	
		div.startContainer {
			width: 550px;
		}
	
		div.startContainer img {
			float: right;
			margin-left: 15px;
		}
		
    /***** VOORPAGINA *****/
    
        dl.voorpagina {
            margin-top: 10px;
            width: 660px;
            height: 670px;
            display: block;
        }
        
        dl.voorpagina dt {
            float: left;
            width: 210px;
            height: 160px;
            margin: 0 10px 10px 0;
            overflow: hidden;
            position: relative;
        }
        
        dl.voorpagina dt.purple {
            background: #b48bb8;
        }
        
        dl.voorpagina dt.image {
            background: #eee;
        }
        
        dl.voorpagina dt a.button {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 160px;
        }
        
        dl.voorpagina dt.green {
            background: #72c15b;
        }
        
        dl.voorpagina dt.orange {
            background: #f2ae30;
        }
        
        dl.voorpagina dt.orangebrown {
            background: #e77235;
        }
        
        dl.voorpagina dt.blue {
            background: #00a5d9;
        }
        
        dl.voorpagina dt.bluegray {
            background: #718189;
        }
        
        dl.voorpagina dt.yellow {
            background: #f3d556;
        }
        
        dl.voorpagina dt a.button {
            z-index: 100;
        }
        
    /***** INTRODUCTION *****/
    	
    	div.introduction a#replaceIntroductionImageButton {
    		width: 150px;
    	}
    	
    	div.introduction div.leftContainer {
    		float: left;
    		width: 270px;
    	}
    	
    	div.introduction div.rightContainer {
    		float: left;
			margin-left: 10px;
    	}
        
    /***** EXTRA *****/
    	
    	div.extra span.notice {
    		font-weight: bold;
    		font-style: italic;
    	}
    	
    /***** COSTS *****/
    
    	div.costs div.amountInputContainer {
    		float: left;
    		margin-right: 50px;
    	}
    	
    	div.costs div.costsContainer {
    		float: left;
    		width: 300px;
    	}
		
		div.costs a#previewLink {
			color: #007D9F;
			font-weight: bold;
			font-size: 12pt;
		}
    	
    	div.costs div.costsContainer .priceText {
    		float: left;
    	}
    	
    	div.costs div.costsContainer .price {
    		float: right;
    	}
		
		div.costs div.costsContainer div#totalCostsContainer {
			margin-top: 5px;
			border-top: 1px solid black;
			font-weight: bold;
		}
    	
    /***** PERSONAL DATA *****/
    
    	div.personalData div.leftContainer {
    		float: left;
    		width: 300px;
    	}
    	
    	div.personalData div.rightContainer {
    		float: left;
    	}
    	
    	div.personalData div.label {
    		float: left;
    		width: 120px;
    		margin-bottom: 2px;
    	}
    	
    	div.personalData div.field {
    		float: left;
    		margin-bottom: 2px;
    	}
    	
    	div.personalData div.costsContainer {
    		width: 300px;
    	}
    	
    	div.personalData div.costsContainer .priceText {
    		float: left;
    	}
    	
    	div.personalData div.costsContainer .price {
    		float: right;
    	}
		
		div.personalData div.costsContainer div#totalCostsContainer_2 {
			margin-top: 5px;
			border-top: 1px solid black;
			font-weight: bold;
		}
        
    /***** IMAGESELECTOR *****/
    
        div.window.imageSelector dt.picturesContainer dl {
            border: 1px solid white;
            margin: 0 5px 5px 0;
        }
        
        div.window.imageSelector dt.picturesContainer dl.over {
            background: #f2f2f2;
            border-color: #adacac;
        }
        
        div.window.imageSelector dt.picturesContainer dl.selected {
            background: #c7e3f3;
            border-color: #5e8ea9;
        }
        
        div.window.imageSelector dt.picturesContainer dl img {
            border: 1px solid #cbcbcb;
        }
        
        div.window.imageSelector dt.picturesContainer dl.over img {
            border-color: #adacac;
        }
        
        div.window.imageSelector dt.picturesContainer dl.selected img {
            border-color: #5e8ea9;
        }
        
    /***** AGREEMENTS *****/
    
        div.window.agreements h2 {
            line-height: 20pt;
            font-size: 14pt;
        }
    
        div.window.agreements h3 {
            line-height: 15pt;
            font-size: 12pt;
            margin-top: 20px;
        }
    
        div.window.agreements ol {
        	margin-left: 20px;
        }