@charset "UTF-8";
/*
 * derkatalogdrucker.de
 * framework.css
 */

/* ============================================================================================== */
/* ===================================================================================// Framwork */
/* ============================================================================================== */
body{
	background-color:#FFF;
	color:#777;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:16px;
	text-align:center;
	}
#globalWrapper{
	margin:0 auto;
	text-align:left;
	width:950px;
	}
a:link,
a:visited,
a:active,
a:hover{
	color:#000;
	}
span.unit{
	padding:0 12px 0 2px;
	}
/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------// header */
/* ---------------------------------------------------------------------------------------------- */
.header{
	background-color:transparent;
	float:left;
	height:65px;
	width:100%;
	}
	.header img.logo{
		margin:36px 0 0 0;
		float:left;
		}
	.header ul.navigation{
		font-size:11px;
		float:left;
		margin:46px 0 0 12px;
		}
		.header ul.navigation li{
			padding:0 15px;
			}
			.header ul.navigation li a:link,
			.header ul.navigation li a:visited{
				color:#777;
				text-decoration:none;
				}
			.header ul.navigation li a:hover,
			.header ul.navigation li a:active,
			.header ul.navigation li a:focus{
				color:#777;
				text-decoration:underline;
				}
		.header ul.navigation li.border{
			padding:0;
			border-color:#E1E1E1;
			border-style:solid;
			border-width:0 2px 0 0;
			width:0;
			}
/* ---------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------// content */
/* ---------------------------------------------------------------------------------------------- */
.content{
	float:left;
	width:772px;
	margin:0 0 12px;
	}
/* -------------------------------------------------------------------------------------// teaser */
	.content .teaser{
		float:left;
		margin:12px 0;
		height:126px;
		width:772px;
		}
/* --------------------------------------------------------------------------------------// title */
	.content .title{
		float:left;
		width:232px;
		margin:50px 0 0 0;
		}
		.content .title h1{
			color:#777;
			padding:0 0 12px 0;
			font-size: 15px;
			}
/* ---------------------------------------------------------------------------------// contentBox */
	.content .contentBox{
		float:right;
		width:534px;
		}
	.content .steps{
		float:right;
		border-style:solid;
		border-color:#E1E1E1;
		border-width:2px;
		width:530px;
		}
		.content .steps .flow{
			background-color:#E1E1E1;
			float:left;
			width:100%;
			}
			.content .steps .flow ul{
				
				}
				.content .steps .flow ul li{
					color:#000;
					padding:6px 20px 6px 20px;
					font-size:10px;
					letter-spacing:1px;
					background-position:top right;
					background-repeat:no-repeat;
					}
					.content .steps .flow ul li.active{
						background-color:#E8401D;
						background-image:url(../../images/backend/layout/arrowFlowActive.gif);
						color:#FFF;
						font-weight:bold;
						}
					.content .steps .flow ul li.last{
						background-image:none!important;
						}
		.content .steps .configurator{
			float:left;
			padding:6px;
			width:518px;
			}
			.content .steps .configurator h2{
				margin:12px 0 6px 0;
				}
			.content .steps .configurator .entry{
				margin:12px 0 0 0;
				}
				.content .steps .configurator .entry .price{
					border:2px solid #E1E1E1;
					margin:3px 0 0 0;
					padding:6px;
					}
				.content .steps .configurator .entry label{
					font-size:14px;
					font-weight:bold;
					line-height:20px;
					}
					.content .steps .configurator .entry label.small{
						font-size:11px;
						font-weight:normal;
						line-height:16px;
						}	
				.content .steps .configurator .entry select{
					margin:12px 0 0 12px;
					width: 120px;
					}
				.content .steps .configurator .entry .option{
					width:70px;
					margin:6px 0 0 6px;
					float:left;
					}
					.content .steps .configurator .entry .option .image{
						border-style:solid;
						border-color:#E1E1E1;
						border-width:2px;
						}
					.content .steps .configurator .entry .option .infoBox{
						width:70px;
						font-size:9px;
						line-height:11px;
						}
						.content .steps .configurator .entry .option .infoBox strong{
							color:#E8401D;
							font-weight:bold;
							}
					.content .steps .configurator .entry .shadow{
						position:absolute;
						width:80px;
						height:80px;
						margin:-6px 0 0 -6px;
						background-image:url(../../images/backend/layout/activeOption.gif);
						display:none;
						z-index:-100;
						}
						.content .steps .configurator .entry div.active{
							display:block!important;
							}
						
				.content .steps .configurator .entry .large{
					width:100px!important;
					}
					.content .steps .configurator .entry .large .infoBox{
						width:100px!important;
						}
				.content .steps .configurator .entry .active{
					border-color:#E8401D!important;
					}
			.content .steps .configurator .customerInfo{
				padding:6px;
				margin:6px;
				border-style:solid;
				border-color:#E1E1E1;
				border-width:2px;
			}
			.content .steps .configurator input.forward{
				float:right;
				margin:0 -6px -6px 0;
				background-image:url(../../images/backend/layout/arrowForward.gif);
				width:90px;
				height:28px;
				border-width:0;
				cursor:pointer;
				font-size:13px;
				text-align:left;
				color:#E8401D;
				font-weight:bold;
				padding:0 0 0 8px;
				}
			.content .steps .configurator input.forwardOrder{
				float:right;
				margin:0 -6px -6px 0;
				background-image:url(../../images/backend/layout/arrowForwardOrder.gif);
				width:112px;
				height:28px;
				border-width:0;
				cursor:pointer;
				font-size:13px;
				text-align:left;
				color:#E8401D;
				font-weight:bold;
				padding:0 0 0 8px;
				}
			.content .steps .configurator input.backward{
				float:left;
				margin:0 0 -6px -6px;
				background-image:url(../../images/backend/layout/arrowBackward.gif);
				width:90px;
				height:28px;
				border-width:0;
				cursor:pointer;
				font-size:13px;
				text-align:right;
				color:#E8401D;
				font-weight:bold;
				padding:0 8px 0 0;
				}
	.content .factsheet{
		float:left;
		width:232px;
		margin:50px 0 0 0;
		}
		.content .factsheet h2{
			color:#777;
			padding:0 0 12px 0;
			font-size: 15px;
			}
			.content .factsheet .price{
				border-style:solid;
				border-color:#E1E1E1;
				border-width:2px;
				float:left;
				padding:8px;
				width:90%;
			}
/* ---------------------------------------------------------------------------------------// form */
form{
	
	}
	form .fieldRow{
		float:left;
		margin:6px 0 0 0;
		width:380px;
		}
		form .fieldRow .labelBox{
			float:left;
			}
		form .fieldRow .inputBox,
		form .fieldRow .submitBox{
			color:#000000;
			float:right;
			width:220px;
			}
		form .fieldRow .submitBox{
			margin:6px 0 0 0;
			}
			form .fieldRow .inputBox p{
				padding:6px 0 0 0;
				}
			form .fieldRow .inputBox input.company,
			form .fieldRow .inputBox input.salutation,
			form .fieldRow .inputBox input.first_name,
			form .fieldRow .inputBox input.last_name,
			form .fieldRow .inputBox input.street,
			form .fieldRow .inputBox input.country,
			form .fieldRow .inputBox input.phone,
			form .fieldRow .inputBox input.email{
				float:left;
				width:200px;
				}
			form .fieldRow .inputBox select.salutation{
				float:left;
				width:70px;
				}
			form .fieldRow .inputBox input.zipcode{
				border-width:1px 0 1px 1px;
				float:left;
				width:70px;
				}
			form .fieldRow .inputBox input.city{
				float:left;
				width:130px;
				}
			form .fieldRow .inputBox textarea.message{
				font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
				font-size:11px;
				line-height:16px;
				float:left;
				width:200px;
				}
			form .fieldRow .inputBox input,
			form .fieldRow .inputBox textarea{
				border-color:#E1E1E1;
				border-style:solid;
				border-width:1px;
				}
input.text{
	border-color:#E1E1E1;
	border-style:solid;
	border-width:1px;
}
input.button{
	border-color:#E1E1E1;
	border-style:solid;
	border-width:1px;
	background-color:#EEE;
	color:#777;
	padding:0;
	cursor:pointer;
}
input.date {
	background:white url(../../images/backend/icons/calendar.png) no-repeat scroll 99% 45%;
	cursor:pointer;
}
select{
	border-color:#E1E1E1;
	border-style:solid;
	border-width:1px;
}
.status{
	width:100%;
	float:left;
	text-align:center;
	background-color:#EEEEEE;
	margin:8px 0 0 0;
	border-color:#FF0000;
	border-style:solid;
	border-width:1px 0;
	font-size:12px;
	}
.error strong{
	color:#FF0000!important;
	}
fieldset{
	padding:10px; 
	border:1px solid #E1E1E1; 
	margin:10px; 
	}
legend{
	color:#777;
	padding:0 10px;
	border:none; 
	}
ul,li{
	margin:0;
	padding:0;
	}
li{
	padding: 4px 0;
	list-style:none;
	}
.transButton {
	border:0px;
	background:transparent;
	font-size:11px;
	cursor:pointer;
	color:#777777;
	}
/* -----------------------------------------------------------------------------------// headline */
h3{
	font-size:13px;
	}
h2{
	font-size:14px;
	
	}
/* ---------------------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------// columnRight */
/* ---------------------------------------------------------------------------------------------- */
.columnRight{
	float:right;
	margin:12px 0 0 0;
	width:166px;
	}
	.columnRight .entry{
		width:100%;
		float:left;
		}
		.columnRight .entry h3{
			background-color:#E8401D;
			background-image:url(../../images/backend/layout/corner_top_right.gif) ;
			background-position:top right;
			background-repeat:no-repeat;
			font-size:10px;
			height:20px;
			padding:0 0 0 6px;
			}
			.columnRight .entry h3 a:link,
			.columnRight .entry h3 a:visited{
				display:block;
				padding:2px 0 0 0;
				color:#FFF;
				text-decoration:none;
				}
			.columnRight .entry h3 a:active,
			.columnRight .entry h3 a:focus,
			.columnRight .entry h3 a:hover{
				display:block;
				padding:2px 0 0 0;
				color:#FFF;
				text-decoration:underline;
				}
		.columnRight .entry .image{
			float:left;
			margin:2px 0;
			width:100%;
			color:#000;
			}
	.columnRight .certification{
		width:100%;
		float:left;
		margin:12px 0 0 0;
		padding:12px 0 0 0;
		border-style:solid;
		border-color:#E1E1E1;
		border-width:2px 0 0 0;
		}
		.columnRight .certification h3{
			color:#000;
			font-size:10px;
			}
		.columnRight .certification img{
			margin:6px 6px 0 0;
			}
		.columnRight .certification .infotext{
			font-size:10px;
			padding:8px;
			background-color:#F2F2F2;
			}
/* ---------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------// footer */
/* ---------------------------------------------------------------------------------------------- */
.footer{
	background-color:transparent;
	float:left;
	margin:24px 0;
	width:772px;
	}
/* --------------------------------------------------------------------------------------// claim */
	.footer p.claim{
		font-size:11px;
		line-height:14px;
		padding:0 0 0 242px;
		text-align:justify;
		}
/* ---------------------------------------------------------------------------------// navigation */
	.footer ul.navigation{
		font-size:11px;
		float:right;
		line-height:14px;
		margin:6px 0 0 0;
		}
		.footer ul.navigation li{
			padding:0 5px;
			}
			.footer ul.navigation li a:link,
			.footer ul.navigation li a:visited{
				color:#777;
				text-decoration:none;
				}
			.footer ul.navigation li a:hover,
			.footer ul.navigation li a:active,
			.footer ul.navigation li a:focus{
				color:#777;
				text-decoration:underline;
				}
		.footer ul.navigation li.border{
			border-color:#E1E1E1;
			border-style:solid;
			border-width:0 2px 0 0;
			padding:0;
			width:0;
			}
/*
 * 
 */
 
.cHelp {
	cursor:help;
}
 
/* dient der spambekämpfung */
div.sp {
	display:none;
}