/*-----------------------------------------------------------------------------
[wika] Screen Stylesheet

version:   1.0
date:      24/06/08
author:    Manuel Boy
email:     manuel@polargold.de

website:   ?

version history: ?
-----------------------------------------------------------------------------*/


/* Remove margin, padding and border from everything
-----------------------------------------------------------------------------*/

* {
	margin: 0;
	padding: 0;
}

img {
	border: 0;
	outline: none;
}

a {
	outline: none;
}

/* Styles for layout
-----------------------------------------------------------------------------*/

.clear {
	clear: both;
}

img, div { behavior: url(js/iepngfix.htc) }

/* Set up the document
-----------------------------------------------------------------------------*/

body {
	font: 62.5%  "Trebuchet MS", Arial, Verdana, "Lucida Grande", "Lucida Sans", Tahoma, sans-serif;
}

	body.js {
		overflow: hidden;
		color: #FFF;
		background: #000 url(../images/body-bg.gif) 0 600px repeat-x;
	}

#wrapper {
	width: 100%;
	display: none;
}

#imprint-link {
	margin-top: 10px;
	text-align: right;
	font-size: 11px;
	margin-right: 10px;
}

	#imprint-link a {
		text-decoration: none;
		color: #999;
	}

	#imprint-link a:hover {
		text-decoration: none;
		color: #FFF;
	}
	
	#no-javascript {
		border: 2px solid #900;
		padding: 10px;
		color: #900;
		font-size: 12px;
		margin: 20px;
	}
	
/* Slider
-----------------------------------------------------------------------------*/
 
#slider-header {
	top: 0;
	left: 0;
	position: absolute;
	z-index: 9999;
	height: 70px;
	overflow: hidden;
	width: 100%;
}

	#slider-header a {
	}

#slider {
    width: 100%;
    position: relative;
}
 
.scroll {
	margin-top: 30px;
    height: 570px;
    width: 800px;
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    clear: left;
}
 
.scrollContainer div.panel {
    height: 570px;
    width: 1470px;
	background: url(../images/container-bg.jpg) 800px 0px no-repeat;
}
 
.hide {
    display: none;
}

.panel-inner {
	width: 800px;
	height: 570px;
}

	.panel-inner h1 {
		display: none;
	}
	
/* Counter
-----------------------------------------------------------------------------*/
.counter {
	position: absolute;
	z-index: 8000;
	top: 3px;
	left: 587px;
	width: 60px;
	height: 20px;
}

	#counter-application {
		left: 666px;
	}

	.counter p {
		display: none;
	}
	
		.counter .digit {
			width: 15px;
			height: 20px;
			overflow: hidden;
			float: left;
			margin-right: 3px;
		}

/* Panel: Start
-----------------------------------------------------------------------------*/
#start {
	background: url(../images/start-bg.jpg) 800px 0px no-repeat;
}

#start div.panel-inner {
	background: url(../images/content/bg-start.jpg) top left no-repeat;
}
	
	#start #link-chance {
		display: block;
		height: 50px;
		position: absolute;
		top: 230px;
		left: 690px;
		width: 80px;
	}
	
		#start #link-chance a {
			display: block;
			height: 50px;
			width: 80px;
			background-image: url(../images/buttons/btn_start.jpg);
			background-repeat: no-repeat;
			background-position: left top;
		}

		#start #link-chance a:hover {
			background-position: bottom left;
		}
		
			#start #link-chance a span {
				display: none;
			}


/* Panel: Chance
-----------------------------------------------------------------------------*/
#chance div.panel-inner {
	background: url(../images/content/bg-chance.jpg) top left no-repeat;
}

	#chance #link-you-expect {
		display: block;
		height: 35px;
		position: absolute;
		top: 500px;
		left: 60px;
		width: 290px;
	}

		#chance #link-you-expect a {
			display: block;
			height: 35px;
			width: 290px;
			background-image: url(../images/buttons/btn_chance.jpg);
			background-repeat: no-repeat;
			background-position: left top;
		}

		#chance #link-you-expect a:hover {
			background-position: left bottom;
		}
	
			#chance #link-you-expect a span {
				display: none;
			}
			
	#chance div.headline-wrapper {
		position: absolute;
		width: 400px;
		top: 255px;
		left: 60px;
	}
	
	#chance div.content-wrapper {
		position: absolute;
		width: 400px;
		top: 330px;
		left: 60px;
	}

/* Panel: You Expect
-----------------------------------------------------------------------------*/
#you-expect div.panel-inner {
	background: url(../images/content/bg-you-expect.jpg) top left no-repeat;
}

	#you-expect div.list-container {
		width: 320px;
		position: absolute;
		top: 248px;
		left: 85px;
	}
	
		#you-expect ul.content {
			list-style: none;
		}

			#you-expect ul.content li {
				
			}

	#you-expect #link-we-expect {
		display: block;
		height: 35px;
		position: absolute;
		top: 500px;
		left: 60px;
		width: 250px;
	}	

		#you-expect #link-we-expect a {
			display: block;
			height: 35px;
			width: 250px;
			background-image: url(../images/buttons/btn_you-expect.jpg);
			background-repeat: no-repeat;
			background-position: left top;
		}

			#you-expect #link-we-expect a:hover {
				background-position: left bottom;
			}

			#you-expect #link-we-expect a span {
				display: none;
			}

/* Panel: We Expect
-----------------------------------------------------------------------------*/
#we-expect div.panel-inner {
	background: url(../images/content/bg-we-expect.jpg) top left no-repeat;
}

	#we-expect div.list-container {
		width: 300px;
		position: absolute;
		top: 265px;
		left: 85px;
	}

		#we-expect ul.content {
			list-style: none;
		}

			#we-expect ul.content li {
			
			}
				#we-expect #link-application {
					display: block;
					height: 35px;
					position: absolute;
					top: 500px;
					left: 60px;
					width: 260px;
				}

					#we-expect #link-application a {
						display: block;
						height: 35px;
						width: 260px;
						background-image: url(../images/buttons/btn_we-expect.jpg);
						background-repeat: no-repeat;
						background-position: left top;
					}

						#we-expect #link-application a:hover {
							background-position: left bottom;
						}

						#we-expect #link-application a span {
							display: none;
						}

/* Panel: Application
-----------------------------------------------------------------------------*/
#application div.panel-inner {
	background: url(../images/content/bg-application.jpg) top left no-repeat;
}

	#application form {
		
	}

		#application form fieldset {
			border: 0;
			
		}

			#application form fieldset label {
				display: none;
			}
			
				#application form fieldset label#agreed-label {
					display: block;
				}		

				#application form fieldset div.checkbox-container {
					position: absolute;
					top: 433px;
					left: 111px;
					width: 250px;
				}

			#application form fieldset input {
				border: 0;
				position: absolute;
				background: transparent;
				color: #333;
				font-size: 15px;
				font-weight: bold;
				font-family: 'Trebuchet MS';
			}
			
			#application form fieldset input.help-active {
				color: #999 !important;
			}

				#application form fieldset input#lastname {
					width: 140px;
					top: 272px;
					left: 90px;
					padding: 0 5px;
				}

				#application form fieldset input#firstname {
					width: 140px;
					top: 272px;
					left: 275px;
					padding: 0 5px;
				}
		
				#application form fieldset input#email {
					width: 140px;
					top: 322px;
					left: 90px;
					padding: 0 5px;
				}

				#application form fieldset input#phone {
					width: 140px;
					top: 322px;
					left: 275px;
					padding: 0 5px;
				}

				#application form fieldset input#zip {
					width: 60px;
					top: 372px;
					left: 90px;
					padding: 0 5px;
				}

				#application form fieldset input#city {
					width: 220px;
					top: 372px;
					left: 195px;
					padding: 0 5px;
				}

				#application form fieldset input#agreed {
					top: 430px;
					left: 88px;
				}

				#application form button {
					top: 402px;
					left: 394px;
					border: 0;
					position: absolute;
					display: block;
					cursor: pointer;
					width: 360px;
					height: 135px;
					background-image: url(../images/buttons/btn_send.jpg);
					background-repeat: no-repeat;
					background-position: left top;
				}

						#application form button.hover {
							background-position: left bottom;
						}

					#application form button span {
						display: none;
					}
					
				#application .form-overlay {
					height: 155px;
					width: 463px;
					position: absolute;
					z-index: 9998;
					top: 250px;
					left: 60px;
					background: #000;
					filter:alpha(opacity=90);
				 	-moz-opacity:0.9;
					opacity: 0.9;
				}
				
					#application .form-overlay h4 {
						font-size: 20px;
						margin: 5px 0 10px 0;
					}
				
					#application .form-overlay-inner {
						margin: 20px;
					}

							#application .overlay-content-wrapper {
								width: 300px;
							}
					
					#application .form-overlay a.close-box {
						color: #CCC;
						font-size: 12px;
						text-decoration: none;
						top: 12px;
						right: 10px;
						position: absolute;
						z-index: 9995;
						padding-right: 26px;
						background: url(../images/bullet-close.gif) right center no-repeat;
						display: block;
						height: 20px;
						padding-top: 3px;
					}
					
					#application .form-overlay a.continue-box {
						color: #CCC;
						font-size: 12px;
						text-decoration: none;
						top: 37px;
						right: 10px;
						position: absolute;
						z-index: 9995;
						padding-right: 26px;
						background: url(../images/bullet-continue.gif) right center no-repeat;
						display: block;
						height: 20px;
						padding-top: 3px;
					}
					
					
/* Panel: Imprint
-----------------------------------------------------------------------------*/
#imprint div.panel-inner {
	background: url(../images/content/bg-imprint.jpg) top left no-repeat;
}

	#imprint #imprint-main {
		margin-left: 60px;
		margin-top: 140px;
		position: absolute;
		width: 300px;
	}

		#imprint #imprint-main h4 {
			font-size: 13px;
		}
		
		#imprint #imprint-main h5 {
			font-size: 12px;
		}

		#imprint #imprint-main .content-container {
			margin-top: 30px;
			overflow: auto;
			height: 320px;
			padding-right: 10px;
		}
		
	#imprint #imprint-additional {
		float: left;
		margin-left: 455px;
		width: 300px;
		position: absolute;
		margin-top: 140px;
	}

		#imprint #imprint-additional .content-container {
			margin-top: 70px;
		}
		
	#imprint #logo-container {
		width: 225px;
		height: 45px;
		background: url(../images/logo-polargold.jpg) top left no-repeat;
		position: absolute;
		z-index: 9000;
	}	
	
	#imprint #logo-container h4 {
		display: none;
	}
		
	#imprint p {
		font-size: 11px;
		margin-bottom: 10px;
		line-height: 1.3;
	}
		
		#imprint p a {
			text-decoration: none;
			color: #EEE;
		}
		
	#imprint #imprint-back {
		height: 36px;
		width: 170px;
		position: absolute;
		top: 50px;
		left: 580px;
	}
		
		#imprint #imprint-back a {
			height: 36px;
			width: 170px;
			display: block;
			background-image: url(../images/buttons/btn_back.jpg);
			background-repeat: no-repeat;
			background-position: top left;
		}
		
		#imprint #imprint-back a:hover {
			background-position: bottom left;
		}
			
			#imprint #imprint-back a span {
				display: none;
			}
			
		
	#imprint #imprint-website {
		height: 35px;
		width: 270px;
		margin-bottom: 20px;
	}
		
		#imprint #imprint-website a {
			height: 35px;
			width: 270px;
			display: block;
			background-image: url(../images/buttons/btn_website.jpg);
			background-repeat: no-repeat;
			background-position: top left;
		}
		
		#imprint #imprint-website a:hover {
			background-position: bottom left;
		}
			
			#imprint #imprint-website a span {
				display: none;
			}