@charset: utf-8;



	/* benutzte farben

		standardtext:
		body:
		headline: #94003f:
		border:
		link: rgb(114,0,11) / visited rgb(150,150,154)

	*/
					

	
/* Static ---------------------------------------*/
	
	body {
		background: #fff;
		font-family: helvetica, arial, sans-serif;
	}
	
	#wrapper {
		background: url('../img/xmas_bg.png') no-repeat top left;
		width: 314px;
		height: 367px;
		padding: 113px 0 0 10px;
	}
	#wrapper {
		background: url('../img/xmas_bg.png') no-repeat top left;
		width: 314px;
		height: 367px;
	        padding: 10px 0 0 10px;
	}
	#header {
		height:103px;
		width: 304px;
	}

	#headerlink {
		height: 103px;
		width: 304px;
		display: block;
	}
	
	#footerlink {
		height: 103px;
		width: 304px;
		display: block;
	}

	
	#main_content {
		width: 306px;
		height: 204px;
		clear: both;
		position: absolute;
		z-index: 10;
	}

    #send_content {
		width: 306px;
		height: 204px;
		clear: both;
		position: absolute;
		z-index: 11;
	}

    #preview_content {
		width: 306px;
		height: 204px;
		clear: both;
		position: absolute;
		z-index: 9;
	}
	
	#headline_container {
		height: 20px;
		padding-top: 10px;
		width: 306px;
	}
	
	#headline_container h3 {
		text-transform: uppercase;
		font-size: 10px;
		color: #94003f;
		line-height: 1;
	}
	
	#headline_container img {
		float: left;
		margin-right: 10px;
	}
	
	#submenu {
		height: 25px;
		width: 306px;
		padding-top: 204px;
		overflow:hidden ;
	}
	
		
		#cal_btn {
			margin-right: 2px;
			width: 25px;
			height: 25px;
			float: left;
		}
		
		#cal_btn a {
			color: #fff;
			display: block;
			padding-top: 8px;
			width: 25px;
			height: 17px;
			background: #94003f url('../img/interface.png') no-repeat 0px 0px;
			border: none;
			outline: none;
			text-decoration: none;
			text-align: center;
		}
			
			#cal_btn a.disabled {
				background-position: 0px 0px;
			}
		
			#cal_btn a.active {
				background-position: 0px -25px;
			}

				#cal_btn a.active:hover {
						background-position: 0px -50px;
				} 
					
					
				#cal_btn span {
					display: none;
				}
					
		
				#list_nav {
					margin-right: 2px;
					height: 22px;
					padding: 3px 0 0 0;
					background: #fff url('../img/list_nav_bg.png') no-repeat top left;
					float: left;
					width: 176px;
				        text-align: center;
					overflow: hidden;
				}


			#list_nav a {
				padding: 0 1px;
				 font-size: 11px;
				color: #fff;
				border: none;
				outline: none;
				 text-decoration: none;
			}

			#list_nav a:hover {
				color: #cb5694;
			}

			#list_nav span {
				padding: 1px;
				 font-size: 10px;
				 font-weight: bold;
				color: #fff;
				border: none;
				outline: none;
				 text-decoration: none;
			}

			#list_nav .active {
				color: #cb5694;
			}

		#send_btn {
			margin-right: 2px;
			width: 49px;
			height: 25px;
			float: left;
		}
		
		#send_btn a {
			color: #fff;
			display: block;
			padding-top: 8px;
			width: 49px;
			height: 17px;
			background: #94003f url('../img/interface.png') no-repeat;
			border: none;
			outline: none;
			text-decoration: none;
			text-align: center;
		}
		
		#send_btn span {
			display: none;
		}
				
				#send_btn .disabled  {
					background-position: -25px 0px;
				}
			
				#send_btn .active {
					background-position: -25px -25px;
				}
			
					#send_btn .active:hover {
						background-position: -25px -50px;
					} 
		
				#send_btn .selected {
					background-position: -25px -75px;
				}

		
			

		#prev_btn {
			margin-right: 2px;
			width: 23px;
			height: 25px;
			float: left;
		}
		
		#prev_btn a {
			color: #fff;
			display: block;
			width: 23px;
			height: 25px;
			background-color: #94003f ;
			background-image: url('../img/interface.png'); 
			background-repeat: no-repeat;
		}
			
		#prev_btn span {
			display: none;
		}
			
				#prev_btn .disabled  {
					background-position: -74px 0px;
				}
			
				#prev_btn .active {
					background-position: -74px -25px;
				}

					#prev_btn .active:hover {
						background-position: -74px -50px;
					} 

		
		#next_btn {
			margin-right: 2px;
			width: 23px;
			height: 25px;
			float: left;
		}

		#next_btn a {
			color: #fff;
			display: block;
			width: 23px;
			height: 25px;
			background-color: #94003f ;
			background-image: url('../img/interface.png'); 
			background-repeat: no-repeat;
		}
		
		
		
		#next_btn span {
			display: none;
		}
		
				#next_btn .disabled {
					background-position: -97px 0px;
				}
			
				#next_btn .active {
					background-position: -97px -25px;
				}

					#next_btn .active:hover {
					background-position: -97px -50px;
					} 
		
	
	#footer {
		position: relative;
		background: url('../img/sponsor.gif') no-repeat top left;
		height: 109px
	}
	
	#footer .sponsor {
		text-transform: uppercase;
		color: #b2b2b2;
		font-size: 10px;
		line-height: 1;
		position: absolute;
		top: 10px; left: 0;
	}
	
	#footer .copyright {
		text-transform: uppercase;
		color: #b2b2b2;
		font-size: 10px;
		line-height: 1;
		position: absolute;
		bottom: 0; right: 10px;
	}
	
	
/* Dynamic Content ---------------------------------------*/
	
	
	/* ------------ Step 1 ------------ */

		#calender {
			clear: both;
			height: 204px;
			width: 306px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	
		#calender li {
			width: 49px;
			height: 49px;
			float: left;
			margin: 0 2px 2px 0;
			overflow: hidden;
			position: relative;
		}
		
			#calender li a {
				width: 49px;
				height: 49px;
				display: block;
				position: absolute;
				z-index: 5;
				top: 0;
				left: 0;
				background: transparent;
			}
			
			
			#calender .img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
		
				#calender .icon {
					width: 49px;
					height: 49px;
					top: 0;
					left: 0;
					display: block;
					position: absolute;
					z-index: 10;
					background-image: url('../img/calender_interface.png');
					background-repeat: no-repeat;
					background-color: transparent;
				}
		
				#calender .overlay {
					display: block;
					background: #000;
					width: 49px;
					height: 49px;
					opacity: 0.85;
					position: absolute;
					z-index: 5;
					left: 0;
				}
		
				#calender .default .overlay,
				#calender .active:hover .overlay  {
					top: 0;
				}
				
				#calender .active .overlay {
					top: -50px;
				}
		
	 	#day_1 .default .icon { background-position: 0px 0px; }
		#day_2 .default .icon { background-position: -49px 0px; }
		#day_3 .default .icon { background-position: -98px 0px; }
		#day_4 .default .icon { background-position: -147px 0px; }
		#day_5 .default .icon { background-position: -196px 0px; }
		#day_6 .default .icon { background-position: -245px 0px; }
		#day_7 .default .icon { background-position: 0px -49px; }
		#day_8 .default .icon { background-position: -49px -49px; }
		#day_9 .default .icon { background-position: -98px -49px; }
		#day_10 .default .icon { background-position: -147px -49px; }
		#day_11 .default .icon { background-position: -196px -49px; }
		#day_12 .default .icon { background-position: -245px -49px; }
		#day_13 .default .icon { background-position: 0px -98px; }
		#day_14 .default .icon { background-position: -49px -98px; }
		#day_15 .default .icon { background-position: -98px -98px; }
		#day_16 .default .icon { background-position: -147px -98px; }
		#day_17 .default .icon { background-position: -196px -98px; }
		#day_18 .default .icon { background-position: -245px -98px; }
		#day_19 .default .icon { background-position: 0px -147px; }
		#day_20 .default .icon { background-position: -49px -147px; }
		#day_21 .default .icon { background-position: -98px -147px; }
		#day_22 .default .icon { background-position: -147px -147px; }
		#day_23 .default .icon { background-position: -196px -147px; }
		#day_24 .default .icon { background-position: -245px -147px; }
		
		#calender .default:hover .icon { 
			background-position: 0px -196px;
		}

		#calender .active .icon { 
			background-position: -245px -196px;
		}
	
		#calender .active:hover .icon  { 
			background-position: -49px -196px;
		}
		
			
	/* ------------ Step 2 --------------- */
	
		
		#img_prev {
			background: url('../img/img_prev_bg.png') no-repeat top left;
			height: 202px;
			margin-bottom: 2px;
			width: 304px;
			text-align: center;
			vertical-align: middle;
			overflow: hidden;
			line-height: 200px;
			width: 306px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 5;
		}
		
	
	/* ------------ Step 3 ------------ */
		
		#form_underlay {
			background: #000;
			height: 202px;
			width: 304px;
			overflow: hidden;	
			position: absolute;
			z-index: 9;
			top: 0;
			left: 0;
			opacity: 0.8;
		}
		
		#form_container {
			padding-left: 8px;
			padding-top: 11px;
			height: 191px;
			width: 298px;
			overflow: hidden;	
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}
		
			#form_container h3 {
				font-size: 11px;
				font-weight: bold;
				font-family: Arial;
				text-transform: uppercase;
				color: #fff;
				margin-bottom: 12px;
			}
		
			#send_img_form {
				width: 296px;
			}
			
			#send_img_form fieldset input {
				background: #fff url('../img/input_bg.png') no-repeat top left;
				font-size: 10px;
				line-height: 10px;
				padding: 3px 4px 0 4px;
				margin: 0 2px 0 0;
				margin-bottom: 5px;
				width: 133px;
				height: 17px;
				border: none;
				outline: none;
				color: #535353;
				font-family: Arial, sans-serif;
			}
			
			#send_img_form fieldset p {
				font-size: 10px;
					height: 10px;
				font-family: Arial;
				text-transform: uppercase;
				color: #fff;
				margin-bottom: 11px;
			}
			
			#send_img_form fieldset textarea {
				border: none;
				outline: none;
				color: #535353;
				font-size: 10px;
				padding: 4px 4px 0 4px;
				width: 280px;
				height: 79px;
				line-height: 1.4;
				background: url('../img/textarea_bg.png') repeat-y top left;
				font-family: helvetica, arial, sans-serif;
				margin: 0 0 10px 0;
			}
			
			#submit_btn {
				float: left;
				text-align: left;
				border: 0;
				display: block;
				width: 4em;
				padding: 2px 15px 0 0;
				height: 17px;
				cursor: pointer;
				color: #fff;
				font-size: 14px;
				text-transform: uppercase;
				font-weight: bold;
				background: transparent url('../img/send_icon.gif') no-repeat 0px -400px;
			}
			
			#submit_btn:hover {
				background-position: center right;
			}
			
			#submit_btn.disabled {
				color: #aaa;
				background: transparent;
			}

			#process {
				float: right;
				display:none;
				margin-right: 20px;
			}

	/* ------------ Step 4 ------------ */


			#form_container_sent {
				height: 202px;
				width: 306px;
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 11;
			}

			#form_container_sent p {
				font-size: 11px;
				color: #fff;
				text-align: center;
				margin-top: 90px;
			}