/* Basics
------------------------------------------------------------------------ */
@font-face {
	font-family:'Medium';
	src: url('fonts/medium-webfont.eot?') format('eot'),
	url('fonts/medium-webfont.woff') format('woff'),
	url('fonts/medium-webfont.svg#webfontJ1zvcYCH') format('svg');
	font-weight: normal;
	font-style: normal;
}
	
	@font-face {
	font-family:'Light';
	src: url('fonts/light-webfont.eot?') format('eot'),
	url('fonts/light-webfont.woff') format('woff'),
	url('fonts/light-webfont.svg#webfontbHtiTRcY') format('svg');
	font-weight: normal;
	font-style: normal;
	
	}


* { margin:0; padding:0; outline:0; }

html,body { height:100%; }

body, .senden, .inputfield, input, textarea { font-family:Light, Arial, sans-serif; font-size:14px; color:#000; }

body { line-height:22px; background:url(images/bg.png) repeat-x; background-color:#f8f8f8; }

h1,h2,h3,h4 { font-family:Medium, Arial, sans-serif; font-weight:normal; }
h1 { margin-bottom:11px; font-size:18px; line-height:27px; color:#000; font-weight:normal; text-shadow:1px 1px 0 #fff; }
h2 { position:relative; margin-bottom:5px; font-size:16px; color:#000; text-shadow:0 1px 0 #fff; }
	h2 a { color:#333; border:none; }
		h2 a:hover { color:#d31145;
}
h3 { position:relative; margin-bottom:10px; font-size:16px; color:#000; line-height:22px; text-shadow:1px 1px 0 #fff; }
	h3 a { color:#000; }
	h3 span { position:absolute; right:0; font-size:14px; }
		h3 span a { color:#d31145; border-bottom:1px dotted #d31145;
}
h4 { margin-bottom:1px; font-size:14px; }

a { color:#d31145; text-decoration:none; border-bottom:1px dotted #d31145; }
.social a { border:none; }
a.button { display:block; float:left; margin-top:10px; padding-right:35px; height:47px; font-size:14px;	font-family:Medium, Arial, sans-serif; color:#fff; line-height:47px; background:transparent url("images/button-a-right.png") no-repeat top right; border:none; cursor:pointer; }
	a.button span { float:left; padding-left:35px; height:47px; line-height:47px; background:transparent url("images/button-a-left.png") no-repeat;
}
a.referenzen { float:right;	margin:-30px 0 20px 0; }

p { margin-bottom:11px; }

img { border:none; }

ul { margin-bottom:12px; }
#content ul.highlight {	margin:0 0 10px 0; padding:3px 6px;	color:#383734; list-style:none;	background:#efefef;	border:1px solid #e0e0e0; border-bottom:1px solid #fff;	border-right:1px solid #fff; }
	#text-box ul { margin-top:-5px;
}

#content ul { margin:0 0 15px 1px; }
#content li {  padding-left:20px; list-style:none; background:url(images/bg-li-content.png) no-repeat; }

b, strong { font-family:Medium, Arial, sans-serif; color:#000; font-weight:normal; }

.clear { float:none; clear:both; }

/* Container
------------------------------------------------------------------------ */
#wrapper { width:950px;	margin:0 auto -100px auto; min-height:100%;	height:auto !important; height:100%; float:none; clear:both; background:url(images/bg-wrapper.gif) no-repeat  center 120px; }
	#header { margin-bottom:25px; height:95px; }
		#header img { margin-bottom:25px;
	}
	
	#text-box,
	#text-box-leistungen { margin-bottom:25px; padding:15px 20px 15px 160px; background:url(images/bg-alexander-hacke.jpg) no-repeat bottom left; background-color:#efefef;	border:1px solid #e0e0e0; border-bottom:1px solid #fff; border-right:1px solid #fff; position:relative; }	
	#text-box-leistungen { background:url(images/icon-zehn-jahre-webdesigner.png) 30px 22px no-repeat; background-color:#efefef; }	
		#text-box h2,
		#text-box-leistungen h2 { margin-bottom:10px; font-size:14px; }
		#text-box p.telefon { position:absolute; top:21px; right:20px; color:#000; }
	
		#text-box ul { float:left; margin:-10px 0 0 0; padding-top:10px; width:454px; }
			#text-box ul li { margin-bottom:15px; padding:0 0 0 55px; height:40px; list-style:none; }
				#text-box ul li.webdesign { background:url(images/icon-webdesign-mini.png) no-repeat; }
				#text-box ul li.seo { background:url(images/icon-suchmaschinen-optimierung-mini.png) no-repeat; }
				#text-box ul li.cms { background:url(images/icon-content-management-system-mini.png) no-repeat; }
				#text-box ul li.money { background:url(images/icon-webdesign-kosten-preise-mini.png) no-repeat; }
					#text-box ul li strong { display:block;
	}
	
	#navigation { float:left; margin-right:60px; width:220px; }
	
	#content { float:left; padding-bottom:20px; width:670px; }
		
		#content-full #profil-left {
			float:left;
			margin-right:40px;
			padding:15px 20px;
			width:560px;
			background:#efefef;  }
			
		#content-full #kontakt-left {
			float:left;
			margin-right:40px;
			width:600px; }
			
		#content-full #kontakt-right {
			float:left;
			width:310px; }
		
		#content-full #half-left {
			float:left;
			margin-right:40px;
			width:455px; }
			
		#content-full #half-right {
			float:left;
			width:455px; }
		
			#content .teaser-boxen {
				margin:25px 0 20px 0;
				padding-top:30px;
				border-top:1px solid #dedede; }
				
			#content .teaser-boxen-leistungen {
				margin:0 0 20px 0; }
				
				#content .teaser-boxen .teaser,
				#content .teaser-boxen-leistungen .teaser {
					margin-bottom:40px;
					padding:0 0 0 100px;
					min-height:60px; }
						
					#content  .teaser.webdesign-website { background:url(images/icon-webdesign-webgestaltung.png) 0 2px no-repeat; }
					#content  .teaser.webdesign-know-how { background:url(images/icon-webdesign-know-how.png) 0 2px no-repeat; }
					#content  .teaser.webdesign-kommunikationsmittel { background:url(images/icon-kommunikationsmittel.png) 0 2px no-repeat; }
					#content  .teaser.cms { background:url(images/icon-content-management-system.png) 0 2px no-repeat; }
					#content .teaser.cms-arbeitsweise { background:url(images/icon-cms-arbeitsweise.png) 0 2px no-repeat; }
					#content  .teaser.cms-vorteile { background:url(images/icon-content-management-system-vorteile.png) 0 2px no-repeat; }
					#content  .teaser.seo { background:url(images/icon-suchmaschinen-optimierung.png) 0 2px no-repeat; }
					#content  .teaser.statistik { background:url(images/icon-suchmaschinen-optimierung-statistik.png) 0 2px no-repeat; }
					#content  .teaser.seo-arbeitsweise { background:url(images/icon-seo-arbeitsweise.png) 0 2px no-repeat; }
					#content  .teaser.seo-regional { background:url(images/icon-google-maps.png) 0 2px no-repeat; }
					#content .teaser.webdesign-kosten { background:url(images/icon-webdesign-kosten-preise.png) 0 2px no-repeat; }
					#content  .teaser.webdesign { background:url(images/icon-homepage.png) 0 2px no-repeat; }
					#content  .teaser.kosten-website { background:url(images/icon-kosten-website.png) 0 2px no-repeat; }
					#content  .teaser.kosten-web-visitenkarte { background:url(images/icon-kosten-web-visitenkarte.png) 0 2px no-repeat; }
					#content  .teaser.visitenkarte { background:url(images/icon-web-visitenkarte.png) 0 2px no-repeat; }
					#content  .teaser.benutzerfreundlichkeit { background:url(images/icon-benutzerfreundlichkeit.png) 0 2px no-repeat; }
					#content .teaser.webdesigner { background:url(images/icon-webdesigner.png) 0 2px no-repeat;
	}

	.push {
		float:none;
		clear:both;
		height:100px;
}

#footer {
	clear:both;
	float:none;
	padding:20px 0;
	height:60px;
	background-color:#434343; }

	.footer-wrapper {
		margin:0 auto;
		width:950px;
		color:#cbcbcb;
		font-size:13px; }
	
		#footer .left {
			float:left; }
	
		#footer .right {
			float:right;
			padding-top:5px; }
				
			#footer .right a {
				margin-left:2px;
				border:none;
		}

		#footer p {
			margin:0;
			padding:0; }

		#footer a {
			color:#fff;
			font-weight:normal;
			border-bottom:1px dotted #ccc; }
			
			#footer a strong {
				color:#fff;
}
	
/* Navigation Header
------------------------------------------------------------------------ */
#header img { float:left; margin-top:30px; }

#header a.portfolio,
#header a.portfolio-seo,
#header a.service,
#header a.profil,
#header a.kontakt { font-family:Medium, Arial, sans-serif; border:none; }

#header a:hover.portfolio,
#header a:hover.portfolio-seo,
#header a:hover.service,
#header a:hover.kontakt { border-bottom:1px dotted #b6b6b6; }

body.portfolio #header a.portfolio,
body.portfolio-seo #header a.portfolio-seo,
body.service #header a.service,
body.profil #header a.profil,
body.kontakt #header a.kontakt { border-bottom:3px solid #d31145; cursor:default; }

ul.sf-menu, ul.sf-menu * { list-style:none; }
ul.sf-menu ul { position:absolute; top:-9999px; /* left offset of submenus need to match (see below) */ }
ul.sf-menu li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ }
ul.sf-menu li { float:left; position:relative; }
ul.sf-menu a { float:left; border:none;  }
ul.sf-menu li:hover ul, .sf-menu li.sfHover ul { left:0; top:28px; /* match top ul list item height */ z-index:99; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top:-9999px; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { /* match ul width */ top:0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:-9999px; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { /* match ul width */ top:0; }
ul.sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { outline:0; }

ul.sf-menu { float:right; margin:28px 0 0 0; font-size:15px; line-height:28px; }
ul.sf-menu li { padding:0 10px; height:28px; }
ul.sf-menu li a { color:#fff; }

ul.sf-menu li.submenue.sfHover { background:url(images/bg-nav-li.png) no-repeat left top; cursor:pointer; }
ul.sf-menu li.sfHover a.sf-with-ul { background:url(images/bg-nav-li-a.png) no-repeat right top; cursor:pointer; /* reiter-active */ }

ul.sf-menu li ul { background:url(images/bg-nav-sub.png) no-repeat bottom; font-size:13px; padding:15px 11px 25px 11px; width:220px; border-top:3px solid #d31145; /* sub-menue */ }
ul.sf-menu li ul li { float:none; padding:0; border-bottom:1px dotted #fff;  }

/*** arrows **/
.sf-menu a.sf-with-ul { padding-right:20px; min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */ }
.sf-sub-indicator {	position:absolute; display:block; right:12px; top:8px; /* IE6 only */ width:12px; height:14px;	text-indent:-999em; overflow: hidden; background: url('images/navigation-arrows.png') no-repeat -12px -96px; /* 8-bit indexed alpha png. IE6 gets solid image only */ }
a > .sf-sub-indicator {  /* give all except IE6 the correct values */ top: 8px; background-position:0 -96px; /* use translucent arrow for modern browsers*/ }

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator, a:hover > .sf-sub-indicator, a:active > .sf-sub-indicator, li:hover > a > .sf-sub-indicator, li.sfHover > a > .sf-sub-indicator { background-position:-12px -96px; /* arrow hovers for modern browsers*/ }

/* Navigation
------------------------------------------------------------------------ */
#navigation ul { margin-top:4px; padding:15px 0 0 5px; list-style:none;	border-top:16px solid #434343; }
	#navigation ul li {	line-height:28px; border-bottom:1px dotted #ccc; }
		#navigation ul li a { display:block; color:#000; border:none; }
			#navigation ul li a:hover { color:#d31145;
}

body.webdesign #navigation ul li a.webdesign,
body.cms #navigation ul li a.cms,
body.seo #navigation ul li a.seo,
body.kosten #navigation ul li a.kosten { color:#d31145; cursor:default; }

/* Portfolio
------------------------------------------------------------------------ */
.portfolio-box { margin-bottom:80px; }
	.portfolio-box img { width:668px; height:368px; border:1px solid #e0e0e0; }
	.portfolio-image { height:368px; width:668px; display:block;
}

.tooltip { display:none; position:relative; padding:20px 20px 0 354px; height:348px; width:294px; font-size:13px; line-height:20px; color:#fff; background:url(images/bg-tooltip.png) right no-repeat; }

	#content .tooltip ul {
		margin:0 0 17px 1px; }
	
		#content .tooltip ul li {
			padding-left:20px;
			list-style:none;
			background:url(images/bg-li.png) no-repeat;
	}
	
	.tooltip p {
		margin:0 0 10px 0;
	}
	
	.tooltip a {
		color:#fff;
		border-bottom:1px dotted #fff;
}

	.tooltip strong {
		color:#fff;
}

table {
	width:100%;
	font-size:14px;
}

#content .tooltip ul.seo { margin:0 0 15px 0; } 
	#content .tooltip ul.seo li { position:relative; padding:0; background:none; }
		#content .tooltip ul.seo li span { position:absolute; right:0;
}

/* Formular
------------------------------------------------------------------------ */
form.kontakt { margin-bottom:25px; padding:30px 30px 27px 30px;	background:#efefef; }
	fieldset { margin:0 0 10px 0; border:none; }
		label { float:left; margin-right:15px; padding:2px 0 2px 3px; width:115px; text-align:right; font-family:Medium, Arial, sans-serif; }
		.inputfield { padding:7px; margin-bottom:10px; color:#4f4837; width:386px; background:#fff; border:none; }
			
		textarea {
			overflow:auto; }
		
		.senden {
			float:right;
			font-size:14px;
			width:231px;
			height:47px;
			color:#fff;
			font-family:Medium, Arial, sans-serif;
			background:url(images/button-submit.png);
			border:none;
			cursor:pointer; }
			
		form .highlight {
			color:#d31145;
			font-family:Medium, Arial, sans-serif;
}	

/* Formulare Allert
------------------------------------------------------------------------ */
.errMsg { display:none; }
.errFld { background:url(images/error.gif) no-repeat right top; background-color:#fff; }
#alertMessagePlaceHolder { display:none; margin-bottom:20px; padding:10px 20px; color:#fff; background-color:#e03a62; }
	#alertMessagePlaceHolder b { color:#fff;
}