/* 
	-----------------------------------------------------
	Stylesheet zur Darstellung auf dem Bildschirm für Homepage "USABILITYPRAXIS".
	Getestet auf und Optimiert für:
	WIN: IE >= 6, FF >= 1.5, Opera >= 9, Safari 3.1
	MAC: Safari 3.1, FF >= 2, Opera >= 9.2
	author: Monika Sommer
	Stand: 27.07.2009
	-----------------------------------------------------
*/
/* 	
	Globales aufheben der default Abstände aller Elemente basierend auf 
	Eric Meyers "reset reloaded" 
	http://aktuell.de.selfhtml.org/weblog/browserstyles-zuruecksetzen-reset-css
*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	/*font-weight:inherit;
	font-style:inherit;*/
	vertical-align:baseline;
}
:focus {
	outline:0;
}
body {
	height: 100.1%; /* verhindert ein "springen" in FF - Scrollbars werden immer angezeigt */
	font-family: "Verdana", "Tahoma", "Arial", "Trebuchet MS","Helvetica",sans-serif;
	background-color:#ffffff;
	/*text-align: center;*/
}

/*  Aufheben von Floats ohne zusaetzliches Markup 
	http://www.jassesnee.de/easyclear/  */    
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}

/*  Behelfsklassen: clearer, kein Hintergrundbild, keine Abstaende  */
.clearer {
	clear: both;
	line-height: 1px;
	font-size: 1px;
	height: 1px;
}

/* ------------------------- Layout ------------------------------ */
#wrapperHome {
	margin: 0 auto 40px auto;
	width: 992px;
	height:817px;
	background-color:#f5fafe;
	background-repeat:no-repeat;
	background-position:center 503px;
	background-image:url(../images/bg_home.gif);
	}
	
#wrapper {
	margin: 0 auto 20px auto;
	width: 992px;
	background-repeat:no-repeat;
	background-position:center bottom;
	background-image:url(../images/bg_site.gif);
	padding-bottom:20px;
	}
	
/* ------------------------- HEADER ------------------------------ */
#header_home {
	width:992px;
	height:88px;
	background:url(../images/bg_header_home.gif) 0 0 no-repeat;
	}

#header_content {
	width:992px;
	height:88px;
	background:url(../images/bg_header_content.gif) 0 0 no-repeat;
	}
	.logo {
		padding: 10px 0 0 60px;
		display: block;
		float:left;
		}
	.dmexcoLogo {
		width:77px;
		height:41px;
		float:left;
		margin: 35px 0 0 180px;
		}

.loud {
	position: relative;
	float:right;
	margin: 5px 10px 0 0;
	}

/* ------------------------- PRIMNAV ------------------------------ */
.primNav {
	width:992px;
	height:70px;
	background:url(../images/bg_primnav.png) 0 0 no-repeat;
	}
	
.primNavUl {
		padding: 19px 0 0 0;
		text-align:center;
		}
		
	.primNavUl li {
		display:inline;
		font-size:12px;
		color:#ffffff;
		padding: 0 0 0 0;
		}
		
		.primNavUl li a {
			cursor: pointer;
			}
		/*.primNavUl li a:hover,
		.primNavUl li a.active {
			color: #ffffff;
			font-weight: bold;
			background-color:#af0917;
			padding: 1px 4px 1px 4px;
			}*/
		.primNavUl li span {
			display:none;
			}
		
/* ------------------------- CONTENT ------------------------------ */
#contentBox {
	width: 992px;
	}
	
	/* --- startseite --- */
	#contentBox .leftColumn {
		width:248px;
		float:left;
		}
		.leftColumn .bg_left {
			width:248px;
			height:295px;
			background:url(../images/bg_left_home.png) 0 0 no-repeat;
			}
		/*  .bg_left-2, wenn keine news vorhanden sind  */
		.leftColumn .bg_left-2 {
			width:248px;
			height:295px;
			background:url(../images/bg_left_home-2.png) 0 0 no-repeat;
			}
	
	/* --- startseite --- */
	#contentBox .middleColumn {
		width:496px;
		float:left;
		}
		/*.middleColumn .bg_middle {
			width:496px;
			height:278px;
			background:url(../images/bg_middle_home.png) 0 0 no-repeat;
			}*/
		.middleColumn .content {
			font-size:12px;
			line-height:16px;
			color:#2c343b;
			padding:0 20px 20px 20px;
			}
			.content a,
			.content a:hover {
				font-size:12px;
				line-height:16px;
				color:#b5152b;
				text-decoration:underline;
				}
			.content h1 {
				color:#006a95;
				font-size:16px;
				line-height:22px;
				font-weight: bold;
				padding-bottom:5px;
				}
				.content .distance {
					margin-top:8px;
					}
				
	/* --- contentseite --- */
	#contentBox .contentColumn {
		width:682px; /*padding von der breite abgezogen*/
		float:left;
		padding: 25px 31px 15px 31px;
		}
		/*inhalt wird zentriert, wenn keine rechte spalte vorhanden ist z.b. bei formularen*/
		.center {
			margin-left:124px;
			}
		.contentColumn .content {
			font-size:12px;
			line-height:16px;
			color:#2c343b;
			}
		.contentColumn .description {
			display:block;
			font-size:12px;
			line-height:16px;
			font-weight:bold;
			color:#2c343b;
			padding-bottom:20px;
			}
		.contentColumn .content a,
		.contentColumn .content a:hover {
			font-size:12px;
			line-height:16px;
			color:#b5152b;
			text-decoration:underline;
			}
		.contentColumn .content h1 {
			color:#006a95;
			font-size:16px;
			line-height:22px;
			font-weight: bold;
			padding-bottom:5px;
			}
		.contentColumn ul, ol {
			width:667px;
			margin: 15px 0 10px 0;
			list-style: none;
			}
			.contentColumn li {
				background:url(../images/liststyle.png) 0 3px no-repeat;
				font-size: 12px;
				line-height:16px;
				color: #2c343b;
				margin: 0 0 8px 0;
				padding: 0 0 0 15px;
				}
			.contentColumn li span {
				padding: 0 0 0 0;
				}
				
			.contentImg {
				width:198px;
				height:140px;
				margin: 0 15px 10px 0;
				float: left;
				border: 1px solid #006a95;
				}
			
			.backLink {
				display:block;
				margin-top:20px;
				}
			.backLink a,
			.backLink a:hover {
				background:url(../images/link_cross.gif) 0 0 no-repeat;
				color:#b5152b;
				padding: 0 0 0 8px;
				}
	
	
	/* --- start- und contentseite --- */
	#contentBox .rightColumn {
		width:248px;
		margin-top: 10px;
		float:left;
		}
	#contentBox .rightColumnHome {
		width:248px;
		float:left;
		}
		.rightColumn .bg_right {
			width:248px;
			height:278px;
			background:url(../images/bg_right_home.png) 0 0 no-repeat;
			}
			
	.rightContact {
		width:226px;
		background:url(../images/bg_right-contact.gif) 0 bottom repeat-x;
		background-color:#ffffff;
		border:1px solid #b5152b;
		font-size:12px;
		line-height:16px;
		color:#2c343b;
		padding:10px;
		}
		.rightContact .name {
			color:#006a95;
			font-size:14px;
			line-height:18px;
			font-weight: bold;
			display:block;
			}
		.rightContact .distance {
			margin-top:8px;
			}
		.rightContact a.linkCross,
		.rightContact a:hover.linkCross {
			background:url(../images/link_cross.gif) 0 0 no-repeat;
			color:#b5152b;
			line-height:18px;
			padding: 0 0 0 8px;
			display:block;
			margin-top:5px;
			}
		
			
			
	/* --- content teaser (video & flippingbook) --- */
	.ctTop {
		width:682px;
		height:15px;
		background:url(../images/teaser_top.gif) 0 0 no-repeat;
		}
	.ctMiddle {
		width:682px;
		background:url(../images/bg_contentteaser.gif) 0 0 no-repeat;
		}
	* html .ctMiddle {
		margin-top: -3px;
		}
	.ctBottom {
		width:682px;
		height:15px;
		background:url(../images/teaser_bottom.gif) 0 top no-repeat;
		}
		
	.contentTeaser {
		width:298px; /*padding von der breite abgezogen*/
		padding:0 13px 13px 14px;
		color:#2c343b;
		font-size:11px;
		line-height:15px;
		float:left;
		}
	* html .contentTeaser {
		padding:0 13px 13px 17px;
		}
		.teaserDistance {
			margin-left:32px;
			}
		.contentTeaser .distanceTop-m {
			margin-top:10px;
			}
		.contentTeaser a.linkCross,
		.contentTeaser a:hover.linkCross,
		.teaserCompany a.linkCross,
		.teaserCompany a:hover.linkCross {
			background:url(../images/link_cross.gif) 0 0 no-repeat;
			color:#b5152b;
			padding: 0 0 0 8px;
			line-height:18px;
			display:block;
			margin-top:5px;
			}
		* html .contentTeaser {
			margin-right: -3px;
			}
			
	.seperateLine {
		width:682px;
		height:2px;
		background:url(../images/seperateline.gif) 0 0 repeat-x;
		margin-top:30px; 
		}
			
	/* --- company teaser --- */
	.teaserCompany,
	.teaserState {
		width:682px;
		margin-top:30px;
		}
		.teaserCompany img,
		.teaserState img {
			width:198px;
			margin-right:16px;
			border: 1px solid #006a95;
			float:left;
			}
		.teaserCompany .content,
		.teaserState .content {
			width:466px;
			color:#2c343b;
			font-size:12px;
			line-height:18px;
			float:left;
			}
		.teaserCompany .content-large,
		.teaserState .content-large {
			width:682px;
			color:#2c343b;
			font-size:12px;
			line-height:18px;
			}
			.teaserCompany .headline-m,
			.teaserState .headline-m {
				color:#006a95;
				font-size:16px;
				line-height:20px;
				font-weight: bold;
				display:block;
				}
			.teaserCompany .headline-s,
			.contentTeaser .headline-s {
				color:#006a95;
				font-size:12px;
				line-height:20px;
				font-weight: bold;
				display:block;
				}
			.teaserCompany .subheadline-s {
				color:#404c56;
				font-size:11px;
				line-height:16px;
				display:block;
				}
			.teaserState .name {
				color:#404c56;
				font-style:italic;
				padding-top:10px;
				display:block;
				}
			.teaserState .position {
				color:#404c56;
				font-style:italic;
				display:block;
				}
			.teaserCompany .distance {
				padding-top:10px;
				}
				
				
	/* --- contact teaser --- */
	.teaserContact {
		width:341px; /*padding von der breite abgezogen*/
		padding:0;
		color:#2c343b;
		font-size:11px;
		line-height:15px;
		margin-top:20px;
		float:left;
		}
		.teaserContact img {
			width:93px;
			height:140px;
			margin-right:16px;
			float:left;
			}
		.teaserContact .content {
			width:219px;
			color:#2c343b;
			font-size:11px;
			line-height:16px;
			padding-right:13px;
			float:left;
			}
			.teaserContact .headline-s {
				color:#006a95;
				font-size:12px;
				line-height:16px;
				font-weight: bold;
				padding-bottom:2px;
				display:block;
				}
			.teaserContact .seperator {
				padding-top:2px;
				}
				
			.teaserContact a.linkCross,
			.teaserContact a:hover.linkCross{
				background:url(../images/link_cross.gif) 0 0 no-repeat;
				color:#b5152b;
				padding: 0 0 0 10px;
				line-height:20px;
				font-size:11px;
				line-height:16px;
				}
				
				
/* --- content success banner --- */
	div.banner {
		width:682px;
		height:200px;
		margin: 10px 0;
		}

/* ------------------------- CONTENT FORMULARE ------------------------------ */

.contentForm {
	width:682px;
	}
	.contentForm h2 {
		color:#006a95;
		font-size:14px;
		line-height:18px;
		font-weight: bold;
		padding-bottom:10px;
		}
	.contentForm label {
		display: block;
		font-size: 12px;
		color: #2c343b;
		width:174px;
		margin-bottom: 3px;
		margin-top:4px;
		padding-left: 12px;
		float: left;
		}
		label.large {
			width:558px;
			padding:0;
			float:none;
			}
	.mandatoryfield {
		background:url(../images/mandatoryfield.png) 0 0 no-repeat;
		}
	.contentForm label.error,
	.contentForm .formError {
		color: #b5152b;
		font-weight:bold;
		}
		
	.contentForm input.contactbox {
		background: url(../images/input_large.png) 0 0 no-repeat;
		width: 362px;
		height: 26px;
		border: none;
		color: transparent;
		margin-bottom:2px;
		float: left;
		}
	.contentForm input.contactboxerror {
		background: url(../images/input_large-error.png) 0 0 no-repeat;
		width: 362px;
		height: 26px;
		border: none;
		color: transparent;
		margin-bottom:2px;
		float: left;
		}
		
	.contentForm input.txinpt {
		display: block;
		text-decoration: none;
		color: #2c343b;
		line-height: 22px;
		height: 26px;
		font-size: 11px;
		padding: 0 5px 0 5px;
		}
		*html .contentForm input.txinpt {
			padding: 5px 5px 0 5px;
			}
			
	.contentForm select.txinpt {
		display: block;
		text-decoration: none;
		color: #2c343b;
		line-height: 22px;
		height: 26px;
		font-size: 12px;
		padding: 5px 5px 0 5px;
		}
		* html select.txinpt {
			padding: 2px 5px 0 5px;
			}
			
	.contentForm .textarea-width {
		width: 357px;
		height: 60px;
		display: block;
		font-family: "Verdana", "Tahoma", "Arial", "Trebuchet MS","Helvetica",sans-serif;
		font-size:11px;
		line-height:15px;
		background:url(../images/bg_textarea.gif) 0 0 no-repeat;
		border: 1px solid #82888a;
		margin:10px 0 10px 0;
		padding: 3px 5px 0 5px;
		float:left;
		}
		*html .contentForm .textarea-width {
			width:353px;
			}
			
	.chk {
		cursor: pointer;
		background: url(../images/select_checkbox_normal.gif) 0 0 no-repeat;
		line-height:20px;
		padding: 0 0 10px 19px;
		font-size: 12px;
		color: #2c343b;
		line-height: 14px;
		}
	.chk_checked {
		cursor: pointer;
		background: url(../images/select_checkbox_active.gif) 0 0 no-repeat;
		line-height:20px;
		padding: 0 0 10px 19px;
		font-size: 12px;
		color: #2c343b;
		line-height: 14px;
		}
	span.chk  {
		display: block;
		width: 357px;
		font-size: 12px;
		color: #2c343b;
		}
	span.chk_checked  {
		display: block;
		width: 357px;
		font-size: 12px;
		color: #2c343b;
		}
		
	input.radio {
		float:left;
		margin: 3px 0 0 0;
		padding: 0;
		}
		*+html input.radio {
			margin: 0 0 0 -4px;
			}
		*html input.radio {
			margin: -2px 0 0 0;
			}
		
		span.radioTxt {
			width: 70px;
			font-weight: normal;
			font-size: 12px;
			line-height: 16px;
			color: #2c343b;
			margin: 1px -3px 0 5px;
			float:left;
			}
			*+html span.radioTxt {
				margin: 2px 10px 0 0;
				}
			
	.contentForm .distanceLeft {
		margin-left:186px;
		}
	.contentForm .distanceTop-s {
		margin-top:5px;
		}
	.contentForm .distanceTop-m {
		margin-top:10px;
		}
	.contentForm .distanceTop-l {
		margin-top:20px;
		}
	.contentForm .distanceTop-2 {
		margin-top:30px;
		}
		
	.codeBox {
		width:186px;
		height:60px;
		background-color:#FF33CC;
		margin-top:10px;
		}
		
	.contentForm a,
	.contentForm a:hover {
		font-size:12px;
		line-height:16px;
		color:#b5152b;
		text-decoration:underline;
		}

	.formButton {
		width:315px;
		padding-left:347px;
		}
	.formButton2 {
		width:315px;
		padding-left:312px;
		}
		.formButton img {
			margin-right:10px;
			}
			
	.contentForm .successLogo {
		display:block;
		margin-bottom:5px;
		text-align:right;
		}


/* ------------------------- RIGHT ------------------------------ */
#contentBox .rightColumn {
	width:248px;
	float:left;
	}
		
/*--- CONTACTBOX ---*/
/*.rightColumn .bg_right {
		width:248px;
		height:278px;
		background:url(../images/bg_right_home.png) 0 0 no-repeat;
		} */
		
.contactBox {
	/*position:absolute;*/
	width: 248px;
	margin:15px 0 20px 0;
	}
	.contactBox img {
		display: block;
		}
	/*.contactBox .rightContactForm {
		width: 226px;
		border-left: 1px solid #b5152b;
		border-right: 1px solid #b5152b;
		border-bottom: 1px solid #b5152b;
		padding: 10px 10px 10px 10px;
		background:url(../images/bg_contactbox.gif) 0 bottom repeat-x;
		}
				
		label {
			display: block;
			font-size: 11px;
			color: #2c343b;
			width:58px;
			margin-bottom: 3px;
			margin-top:5px;
			float: left;
			}
		input.contactbox {
			background: url(../images/input_contactbox.png) 0 0 no-repeat;
			width: 155px;
			height: 26px;
			border: none;
			color: transparent;
			margin-bottom:2px;
			float: left;
			}
		input.txinpt {
			display: block;
			text-decoration: none;
			color: #2c343b;
			line-height: 22px;
			height: 26px;
			font-size: 12px;
			padding: 3px 5px 0 5px;
			}
			*html input.txinpt {
				padding: 0 5px 0 5px;
				}
		.textarea-width {
			width: 224px;
			height: 30px;
			display: block;
			border: 1px solid #82888a;
			margin:10px 0 10px 0;
			}
			*html .textarea-width {
				width: 217px;
				}
		.arrow {
			margin: 3px 0 0 0;
			float: right;
			}
		
		.formQuery {
			width:226px;
			font-size: 11px;
			color: #2c343b;
			line-height: 14px;
			margin-top: 10px;
			}
			
			.formQuery a,
			.formQuery a:hover {
				font-size:11px;
				line-height:16px;
				color:#b5152b;
				text-decoration:underline;
				}
				
		*html .rightContactForm,
		*html .formQuery {
			width: 222px;
			}
			
		.chk {
			cursor: pointer;
			background: url(../images/select_checkbox_normal.gif) 0 0 no-repeat;
			line-height:20px;
			padding: 0 0 10px 19px;
			}
			*/

/*--- SERVICEBOX ---*/

.serviceBox {
	/*margin-top:180px;*/
	margin-top:20px;
	}
	
a.serviceLink {
	display:block;
	width:220px;
	color:#b5152b;
	font-size:12px;
	line-height:20px;
	font-weight:bold;
	padding: 0 0 10px 28px;
	text-decoration:none;
	}
	.calendar {
		background:url(../images/icon_calendar.png) 0 0 no-repeat;
		}
	.twitter {
		background:url(../images/icon_twitter.png) 0 0 no-repeat;
		}
	.injection {
		background:url(../images/icon_injection.png) 0 0 no-repeat;
		}
	.advise {
		background:url(../images/icon_advise.png) 0 0 no-repeat;
		}
	.success {
		background:url(../images/icon_success.png) 8px 0 no-repeat;
		}
		
.serviceBox .cbf {
	display:block;
	width:230px;
	height:140px;
	margin: 10px 0 0 9px;
	}	

/* ------------------------- LEFT ------------------------------ */

/*--- NEWSBOX ---*/
#newsbox {
	width:228px;
	height:290px;
	background:url(../images/bg_newsbox.png) 0 0 repeat-x;
	background:url(../images/bg_line_right_newsbox.gif) right top no-repeat;
	padding: 0 10px 0 10px;
	}
	ul .newsContentBox{
		width:228px;
		height: 204px;
		overflow:hidden;
		}
	.imgHeadline {
		margin-top:10px;
		}
	.news {
		width: 228px;
		color:#2c343b;
		font-size:11px;
		line-height:15px;
		margin: 9px 0 0 0;
		}
		.news a.linkCross,
		.news a:hover.linkCross{
			background:url(../images/link_cross.gif) 0 0 no-repeat;
			color:#b5152b;
			padding: 0 0 0 8px;
			line-height:18px;
			}
		p.date {
			display:inline;
			background-color:#99a3aa;
			padding: 1px 5px 1px 5px;
			color:#fff;
			font-size:11px;
			line-height:20px;
			}
		/*p.headline {
			display:block;
			color:#b5152b;
			font-size:11px;
			line-height:14px;
			font-weight:bold;
			padding:3px 0 2px 0;
			}
			p.headline a {
				font-size:11px;
				line-height:16px;
				color:#b5152b;
				text-decoration:none;
				}
			p.headline a:hover {
				text-decoration:underline;
				}*/
		.arrow {
			float: right;
			margin: 5px 0 5px 0;
			}
				
				
/* ------------------------- FOOTER ------------------------------ */
.footer {
	margin: 0 auto 20px auto;
	width: 992px;
	color:#404c56;
	font-size:11px;
	line-height:14px;
	}
	.footer .bookmarks {
		width:125px;
		padding-right: 10px;
		float:right;
		}
	ul.funcnavFooter {
		display:block;
		padding:0 10px 0 10px;
		float:left;
		}
	.funcnavFooter li {
		display:inline;
		line-height: 16px;
		}
		
		.funcnavFooter li a {
			text-decoration:none;
			color:#404c56;
			cursor: pointer;
			}
		.funcnavFooter li a:hover {
			text-decoration: underline;
			}
		.funcnavFooter .active {
			text-decoration:none;
			color:#ff8c00;
			font-weight:bold;
			}
			
	ul.primnavFooter {
		padding:0 0 10px 0;
		margin:0 0 0 0;
		text-align:center;
		}
	.primnavFooter li {
		display:inline;
		font-size:10px;
		color:#9fa5aa;
		line-height: 16px;
		}
		
		.primnavFooter li a {
			text-decoration:none;
			color:#9fa5aa;
			cursor: pointer;
			}
		.primnavFooter li a:hover {
			text-decoration: underline;
			}
		.primnavFooter .active {
			text-decoration:none;
			color:#9fa5aa;
			font-weight:bold;
			}
		
		
.package {
	position:absolute;
	margin-left:40px;
	display:block;
	}
	

#medialinks {
	position: relative;
	}	
	#medialinks .medialink {
		display: block !important;
		position: absolute;
		width: 248px;
		height: 376px;
		z-index: 999;
		top: 0;
		text-indent: -9999em;
		background-color:#transparent;
		}
			
	#medialinks .link1 {
		left: 0;
		width: 248px;
		height: 376px;
		}
	#medialinks  .link2 {
		left: 248px;
		width: 248px;
		height: 376px;
		}
	#medialinks  .link3 {
		left: 496px;
		width: 248px;
		height: 376px;
		}
	#medialinks  .link4 {
		left: 744px;
		width: 248px;
		height: 376px;
		}
		.link1,
		.link2,
		.link3,
		.link4 {
			background-color:#ffffff;
			opacity: 0;
			-moz-opacity:0.0; /* MOZ */
 			-ms-filter: "alpha(opacity=0)"; /* IE8 */
            }
            /* ie6 */
            * html .link1,
			* html .link2,
			* html .link3,
			* html .link4 {
				background-color:#ffffff;
                filter: alpha(opacity=0); 
            }
            /* ie7 */
            *+html .link1,
			*+html .link2,
			*+html .link3,
			*+html .link4 {
				background-color:#ffffff;
                filter: alpha(opacity=0); 
            }