/**** Reset all CSS rules ****/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

/**** Common elements ****/

html, body {
	width: 100%;
	height: 100%;
	}

body { background: #eee url(images/body-background.jpg) no-repeat top center; }
body.error { background: #eee url(images/body-background-error.jpg) no-repeat top center; }

#_action { display: none; }
.zindex-9 { z-index: 98; }
.zindex-10 { z-index: 99; }

/**** Full-screen overlay ****/

div.overlay {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 999;
	top: 0;
	left: 0;
	background: transparent url(images/overlay-background.png);
	}

	/* Prepare overlays */
	
	#message-overlay { display: none; }
	
	/* NOSCRIPT popup */

	div.jsinfo {
		position: relative;
		width: 500px;
		height: auto;
		top: 160px;
		margin: 0 auto;
		padding: 10px 10px 10px 60px;
		background: #fff url(images/icon-noscript.png) no-repeat 14px center;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		font: normal 13px arial, helvetica;
		color: #333;
		overflow: hidden;
		}

		div.jsinfo h2 {
			width: 700px;
			position: relative;
			top: -10px;
			left: -60px;
			display: block;
			padding: 5px;
			font: bold 16px arial, helvetica;
			color: #eee;
			background: #880000;
			}

		div.jsinfo button {
			position: relative;
			clear: both;
			display: block;
			margin: 15px 0 10px 0;
			}

	/* Start popup */

	div.start-popup {
		position: relative;
		width: 470px;
		height: 570px;
		top: 140px;
		margin: 0 auto;
		background: transparent url(images/start-popup-background.png) no-repeat top left;
		overflow: hidden;
		}

		div.start-popup .content {
			position: relative;
			top: 90px;
			margin: 0 auto;
			width: 410px;
			height: 470px;
			}

			div.start-popup .content h2 {
				color: #007700;
				font: normal 20px arial, helvetica;
				letter-spacing: -0.5pt;
				margin: 17px 0 17px 0;
				}

				div.start-popup .content h2:first-child { margin-top: 0; }

			div.start-popup .content p {
				font: normal 14px/18px arial, helvetica;
				color: #333;
				margin-bottom: 10px;
				}

			div.start-popup button {
				background: transparent url(images/form-buttons.png) no-repeat top left;
				position: relative;
				display: block;
				width: 135px;
				height: 40px;
				font: bold 15px arial, helvetica;
				color: #fff;
				border: none;
				cursor: pointer;
				margin: 0 auto;
				margin-top: 20px;
				}

		div.start-popup button:hover,
		div.start-popup button:active { background-position: bottom left; }

	/* Message popup */

	div.message {
		position: relative;
		width: 500px;
		height: auto;
		top: 160px;
		margin: 0 auto;
		padding: 10px 10px 10px 60px;
		border-radius: 7px;
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
		font: normal 15px/21px arial, helvetica;
		color: #333;
		overflow: hidden;
		}

		div.message h2 {
			color: #fff; 
			width: 550px;
			position: relative;
			top: -10px;
			left: -60px;
			display: block;
			padding: 10px;
			font: bold 17px arial, helvetica;
			margin-bottom: 10px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			-moz-border-radius-topleft: 5px;
			-moz-border-radius-topright: 5px;
			-webkit-border-top-left-radius: 5px;
			-webkit-border-top-right-radius: 5px;
			}

		div.message p { margin-top: 12px; }
		div.message p:first-child { margin-top: 0; }

		div.message ul.linklist {
			list-style: disc;
			color: #555;
			padding: 0 0 20px 20px;
			}

		.message-ok { background: #fff url(images/icon-message-ok.png) no-repeat 14px 65px; }
		.message-nok { background: #fff url(images/icon-message-nok.png) no-repeat 14px 65px; }

		.message-ok h2 { background: #00aa00; }
		.message-nok h2 { background: #990000; }

		.message span {
			display: block;
			margin: 10px 0 10px 0;
			font: bold 13px courier;
			color: #000;
			padding: 3px;
			border: 1px #ddd solid;
			background: #ffffcc;
			}
			
		div.message button {
			position: relative;
			display: block;
			width: 135px;
			height: 40px;
			font: bold 15px arial, helvetica;
			color: #fff;
			border: none;
			cursor: pointer;
			margin: 0 auto;
			margin-top: 20px;
			margin-bottom: 10px;
			left: -30px;
			}

		div.message button:hover { background-position: bottom left; }

		.message-ok button { background: transparent url(images/form-buttons.png) no-repeat top left; }
		.message-nok button { background: transparent url(images/form-buttons-red.png) no-repeat top left; }
		
/**** Structure ****/

#wrapper {
	width: 880px;
	height: 750px;
	padding: 20px;
	background: transparent;
	position: relative;
	top: 60px;
	margin: 0 auto;
	}

/* Specific wrapper for error messages */

#wrapper.error {
	width: 880px;
	height: 250px;
	padding: 20px;
	background: transparent;
	position: relative;
	top: 340px;
	margin: 0 auto;
	}

	#wrapper.error h1 {
		font: normal 30px arial, helvetica;
		color: #009900;
		letter-spacing: -1pt;
		margin: 0 0 20px 0;
		padding: 0;
		}

	#wrapper.error h2 {
		font: normal 24px arial, helvetica;
		color: #666;
		letter-spacing: -0.5pt;
		margin: 0 0 20px 0;
		padding: 0;
		}
		
	#wrapper.error p {
		font: normal 16px/22px arial, helvetica;
		color: #000;
		margin: 0 0 12px 0;
		padding: 0;
		}
		
	#wrapper.error .large-button {
		display: block;
		width: 250px;
		height: 40px;
		font: bold 15px arial, helvetica;
		color: #fff;
		border: none;
		cursor: pointer;
		background: transparent url(images/large-buttons.png) no-repeat top left;
		margin: 0 auto;
		}
	
	#wrapper-error .large-button:hover { background-position: bottom left; }
		
	/* Header */

	#header {
		width: 880px;
		height: 60px;
		}

		#header img {
			position: relative;
			float: right;
			border: none;
			top: -5px;
			}

		#header img:first-child { float: left; top: -10px; }

		#header div.shadow {
			width: 880px;
			height: 10px;
			background: transparent url(images/container-background.png) no-repeat;
			position: absolute;
			z-index: 99;
			float: left;
			top: 100px;
			}

	/* Container */

	#container {
		width: 880px;
		height: 480px;
		margin-bottom: 20px;
		}

		/* Big picture container */

		#image {
			width: 640px;
			height: 480px;
			overflow: hidden;
			position: relative;
			float: left;
			}

			#image img {
				position: absolute;
				float: left;
				top: 0;
				left: 0;
				z-index: 2;
				}

		/* Carousel */

		#carousel {
			width: 240px;
			height: 480px;
			position: relative;
			float: left;
			}

		/* Flowpane */

		#flowpanes {
			position: relative;
			overflow: hidden;
			clear: both;
			width: 240px;
			height: 480px;
			float: left;
			}

		#flowpanes .items {
			width: 20000em;
			position: absolute;
			clear: both;
			margin: 0;
			padding: 0;
			}

		#flowpanes div {
			float: left;
			display: block;
			width: 240px;
			cursor: pointer;
			font-size: 14px;
			overflow: hidden;
			}

		#flowpanes div img {
			float: left;
			position: relative;
			opacity: 0.5;
			border: none;
			}

			#flowpanes div img:hover { opacity: 1; crop: }

			/* Scrollable buttons */

			a.browse {
				background: url(images/thumbs-buttons.gif) no-repeat;
				position: absolute;
				display: block;
				width: 60px;
				height: 35px;
				float: left;
				cursor: pointer;
				font-size: 1px;
				z-index: 99;
				}

			a.right {
				background-position: top right;
				clear: right;
				margin-right: 0px;
				left: 185px;
				top: 225px;
				}

				a.right:hover { background-position: bottom right; }
				a.right:active { background-position: bottom right; }

			a.left {
				margin-left: 0px;
				left: -6px;
				top: 225px;
				}

			a.left:hover { background-position: bottom left; }
			a.left:active { background-position: bottom left; }

			***a.disabled { visibility: hidden !important; }

	/* Form */

	#formbox {
		width: 880px;
		height: 190px;
		background: transparent url(images/form-background.gif) no-repeat top left;
		}

	div.canvas-formcontrols button {
		background: transparent url(images/form-buttons-small.png) no-repeat top left;
		position: relative;
		float: left;
		display: block;
		width: 85px;
		height: 30px;
		font: bold 13px arial, helvetica;
		color: #fff;
		border: none;
		margin-left: 12px;
		cursor: pointer;
		}

		div.canvas-formcontrols button:first-child { margin-left: 0; }

		div.canvas-formcontrols button:hover,
		div.canvas-formcontrols button:active { background-position: bottom left; }

	div.canvas-form {
		margin: 0 auto;
		width: 880px;
		}

		div.canvas-formzone {
			float: left;
			margin-left: 20px;
			width: 280px;
			}

			div.canvas-formzone:first-child { margin: 0; }

			div.canvas-formzone h3 {
				font: bold 17px arial, helvetica, sans-serif;
				color: #007700;
				letter-spacing: -0.25pt;
				margin: 20px 0 10px 0;
				}

		div.canvas-formzone small,
		div.canvas-formzone small {
			font: normal 10px arial, helvetica, sans-serif;
			color: #555;
			letter-spacing: 0.1pt;
			}

		div.canvas-formzone p,
		div.canvas-formzone p {
			margin: 0 0 8px;
			padding: 0;
			}
	
		div.canvas-form input,
		div.canvas-form textarea,
		div.canvas-form select {
			border: 1px #aaa solid;
			border-bottom: 1px #ddd solid;
			border-right: 1px #ddd solid;
			width: 273px;
			padding: 2px;
			margin-bottom: 4px;
			font: normal 13px arial, helvetica, sans-serif;
			color: #000;
			background: #fff;
			}

		div.canvas-form input:focus,
		div.canvas-form textarea:focus,
		div.canvas-form select:focus { background: #ffffcc; }

		div.canvas-form select { width: 279px; }

		div.canvas-form input.formfield-ok,
		div.canvas-form textarea.formfield-ok {
			border: 1px #009900 solid;
			background: url(images/formfield-ok.png) no-repeat 260px 5px;
			}

		div.canvas-form select.formfield-ok { border: 1px #009900 solid; }

		div.canvas-form input.formfield-error,
		div.canvas-form textarea.formfield-error {
			border: 1px #990000 solid;
			background: url(images/formfield-nok.png) no-repeat 260px 5px;
			}

	/* Footer */

	#footer {
		width: 900px;
		height: 30px;
		margin: 0 auto;
		position: relative;
		margin-top: 75px;
		margin-bottom: 15px;
		background: transparent;
		font: normal 13px arial, helvetica;
		color: #333;
		text-align: center;
		}

		#footer a { color: #007700; }

	#footer.error { top: 300px; }