/* CSS Document */

body {
	width:					100%;
	height:					100%;
	background:				#B7B7B7;
	font-family:			Georgia, "Times New Roman", Times, serif;
	font-size:				11px;
	line-height:			130%;
	margin:					0px auto 0px auto;
	padding:         		0;
	text-align:				left;
	color:					#333333;
	cursor:default;
}

div#bg {
	background:				url(tmp_bg.jpg) top repeat-x;
	margin:					0px auto 0px auto;
	width:					100%;
height:800px;
}
div#bla {
	background:				url(bla.jpg) top no-repeat;
	width:					986px;
	height:135px;
	position:absolute;
	top:660px;
	left:0;
}
div#embed {
	width:					986px;
	position:absolute;
	top:50px;
	left:0;
}
img {
	border:					0px;
}
div#head {
	width:					200px;
	position:absolute;
	top:65px;
	left:770px;
}
div#head p {

	font-size:16px;
	line-height:120%
}
p {
	padding:                0;
	margin:					10px 0px 15px 0px;
}

div, ul, li, img, span {
	padding:				0px 0px 0px 0px;
	margin:					0px 0px 0px 0px;
}

li {
	list-style:				none;
	display:				block;
}

a {
	text-decoration:		none;
	color:					#F63758;
}

a:hover {
	text-decoration:		underline;
}
div#main {
	margin:					0px auto 0px auto;
	width:					986px;
	position:relative;
}
div#ausrichten {
	width:					940px;
	margin:					0px auto 0px auto;
	padding:                10px 0px 5px 0px;
	position:				relative;
}

.c_brown {
	color:					#4E4023;
}
.c_pink {
	color:					#F63758;
}

/* HEADER */
	div#header {
	}
	div#header img,
	div#header a {
		font-size:				10px;
		margin:					3px 0px 0px 5px;
		float:					left;
	}
	div#header img:hover { cursor:pointer; }
	div#header ul {
		float:					right;
		width:					500px;
		display:				block;
		padding:0;
		margin:					20px -8px 0px 0px;
	}
	div#header ul li {
		display:				inline;
	}
	div#header ul li a {
		display:				inline;
		width:					123px;
		height:					38px;
		margin:0;padding:0;
	}
	div#header ul li a:hover {
		text-decoration:		none;
	}
	div#header ul li a#home {
		background:				url(nav-home.gif) top left no-repeat;
		width:					125px;
	}
	div#header ul li.aktiv a#home,
	div#header ul li a#home:hover {
		background:				url(nav-home-over.gif) no-repeat;
	}
	div#header ul li a#work {
		background:				url(nav-work.gif) top left no-repeat;
	}
	div#header ul li.aktiv a#work,
	div#header ul li a#work:hover {
		background:				url(nav-work-over.gif) no-repeat;
	}
	div#header ul li a#blog {
		background:				url(nav-blog.gif) top left no-repeat;
	}
	div#header ul li.aktiv a#blog,
	div#header ul li a#blog:hover {
		background:				url(nav-blog-over.gif) no-repeat;
	}
	div#header ul li a#kontakt {
		background:				url(nav-kontakt.gif) top left no-repeat;
	}
	div#header ul li.aktiv a#kontakt,
	div#header ul li a#kontakt:hover {
		background:				url(nav-kontakt-over.gif) no-repeat;
	}
	
	ul.subnav {
		position:absolute;
		top:50px;
		left:573px;
		border-top:				0px;
		width:					120px;
		z-index:				100;
		display:				block;
		border-bottom:5px solid #ffffff;
	}
	ul.subnav li { float:none;}
	ul.subnav li a {
		color:					#ffffff;
		font-size:				12px;
		border-left:			5px solid #ffffff;
		border-right:			5px solid #ffffff;
		padding-left:11px; padding-bottom:5px;
		display:block;
		background:				#9DCE04;
		float:none;
	}
	ul.subnav li#hidden {
		background:				url(nav-portfolio-over2.gif) top left no-repeat #9DCE04;
		height:					30px;
		border:0px;
	}
/* ENDE --------------------------------------------- HEADER */

div#content div#spalte1 {
	width:						243px;
	margin:						10px 10px 0px 0px;
	padding:                    0;
	color:						#ffffff;
	float:						left;
}
body#home div#content div#spalte1 {

}
div#content div#spalte1 p {
	background:					url(home-hi.gif) top left no-repeat #A0D204;
	border:						5px solid #ffffff;
	line-height:				145%;
	padding-top:                85px;
	height:						105px;
	font-size:					11px;
	padding-right:5px;  padding-left:15px;
	margin:				0px;
}
body#kontakt div#content div#spalte1 div.hmm,
body#home div#content div#spalte1 a { /* BOX #weiter Informationen# */
	border:						5px solid #ffffff;
	border-top:					0px;
	display:					block;
	height:						35px;
	background:					#4E4023;
	color:						#ffffff;
	padding-left:15px;
	font-size:					16px;
	padding-top:13px;
}
div#content div#spalte1 div.newsletter {
	background:					url(title-newsletter.gif) top left no-repeat #F63758;
	height:						115px;
	border:						5px solid #ffffff;
	margin-top:					10px;
	padding:55px 10px 0px 15px;
}

/*
div#content div.special ul {
	margin:						10px 0px 0px 10px;
}
div#content div.special ul li {
	height:						18px;
}
div#content div.special ul li a {
	color:						#ffffff;
}
div#content div.special ul li a:hover,
div#content div.special ul li.aktiv a,
div#content div.special ul li.aktiv {
		color:					#F63758;
		text-decoration:		none;	
}*/


div#content div#spalte2 {
	width:						686px;
	float:						left;
	margin-top:					10px;	
}

/* {{ FEATURE IMAGE JQUERY */
		div#stapel {
			border:						5px solid #ffffff;	
			height:						243px;
			background:					#ffffff;
		}
		div#stapel img {
			position:					absolute;
			height:						243px;
			width:						676px;
			z-index:					1;
		}
		div#stapel img.obersteebene {	z-index:3;	}
		div#stapel img.mittlereebene {	z-index:2;	}
		div#stapel img#bild1 {			z-index:2;	}
		div#stapelTitle {
			position:					relative;
			top:						-240px;
			left:						451px;
			background:					#ffffff;
			height:						22px;
			width:						220px;
			padding:                    8px 0px 0px 10px;
			z-index:					4;
			margin-bottom:				-30px;
		}
		div#stapelTitle a { /* TITEL */
			position:					absolute;
			font-size:					12px;
			z-index:					5;
			background:					#ffffff;
			width:						200px;
		}
		div#stapelTitle a.obersteebene {z-index:7;	}
		div#stapelTitle a.mittlereebene {z-index:6;	}
/* }} FEATURE IMAGE JQUERY */

div#spalte2 div#news div {
	width:						212px;
	border:						5px solid #ffffff;
	margin:						10px 10px 0px 0px;
	height:						170px;
	float:						left;
	background:					#ffffff;
}
div#spalte2 div#news div#skills {
	width:						222px;
	border:						0;
	margin:						10px 0px 0px 0px;
	height:						180px;
	float:						left;
	background:					#ffffff;
}

div#news div h2 {
	color:						#F63758;
	font-size:					12px;
	margin:0; padding:0;
	margin-top:					4px;
}
div#content div#news div img:hover {
	cursor:						pointer;
}	
div#content div#news div h2:hover {
	text-decoration:			underline;
	cursor:						pointer;
}
div#news div p a,
div#news div p {
	line-height:				135%;
	font-size:					11px;
	margin-top:					3px;
	margin-bottom:				0px;
}

/* {{ KONTAKT */
	body#kontakt div#content div#spalte1 p {
		background:					url(title-kontakt.gif) top left no-repeat #A0D204;
		border:						5px solid #ffffff;
		line-height:				145%;
		padding-top:                50px;
		height:						140px;
		font-size:					11px;
		padding-right:5px;  padding-left:15px;
		margin:				0px;
	}
	body#kontakt div#content div#spalte1 p a {
		color:						#4E4023;
	}
	body#kontakt div#content div#spalte1 div.hmm {
		font-size:					10px;
		padding-top:	            10px;
		height:						38px;
	}
	body#kontakt div#content div#news div h2:hover {
		text-decoration:			none;
		cursor:						default;
	}
	body#kontakt div#feature {
		border:						5px solid #ffffff;	
		height:						188px;
		background:					url(formular-kontakt-bg.jpg) top left no-repeat #ffffff;
		padding:10px;
		padding-top:45px;
	}
	form#kontaktformular {
		padding:0;margin:0;
		margin-left:5px;
	}
	form#kontaktformular textarea {
		height:						180px;
		float:						left;
	}
	form#kontaktformular table {
		float:						left;
		margin:						0px 0px 0px 17px;
		width:160px;
	}
	form#kontaktformular table tr td {
		padding-bottom:5px;
		text-align:left;
	}
	form#kontaktformular table tr td label,
	form#kontaktformular table tr td input {
		width:						150px;
		display:					block;
	}
	form#kontaktformular table tr td input#checkbox {
		width:						12px;
		height:						12px;
		float:						left;
	}

/* }} KONTAKT */
/* {{ BLOG */
	body#blog div#content div#spalte1 ul.kategorien {
		background:					url(title-kategorien.gif) top left no-repeat #4E4023;
		border:						5px solid #ffffff;
		line-height:				145%;
		padding-top:                50px;
		height:						140px;
		font-size:					11px;
		padding-right:5px;  padding-left:15px;
		margin:				0px;
	}
	body#blog div#content div#spalte1 ul.kategorien li {
		padding-left:10px;
		height:20px;
	}
	body#blog div#content div#spalte1 ul.kategorien li a {
		padding-left:3px;
		color:#ffffff;
	}
	div.inspiration {
		background:					url(title-inspiration.gif) top left no-repeat #F63758;
		height:						auto;
		border:						5px solid #ffffff;
		margin-top:					10px;
		padding:40px 10px 10px 15px;
	}
	div.inspiration h4 {
		margin:						10px 0px 5px 0px;
		font-size:					14px;
	}
	div.inspiration ul {
		margin:0; padding:0; margin-left:10px;
	}
	div.inspiration ul li a {
		color:						#ffffff;
	}
	body#blog div#spalte2 {
		background:					#ffffff;
	}
	div.blogspacer {
		background:					#FFFFFF;
		height:						10px;
		font-size:					1px;
		border-bottom:            10px solid #E5E5E5;
	} 
	div.blogeintrag {
		padding:10px 20px 10px 20px;
	}
	div.blogeintrag h2,
	div.blogeintrag span.datum {
		color:						#F63758;
		font-size:					14px;
		line-height:				130%;
		float:						left;
		margin:0;padding:0;
	}
	div.blogeintrag span.datum {
		font-size:					12px;
		float:						right;
		padding-left:               10px;
		color:						#4E4023;
		text-align:					center;
		margin-top:					-8px;
		font-weight:				bold;
	}
	div.blogeintrag a.comment {
		font-size:					12px;
		float:						right;
		color:						#ffffff;
		text-align:					center;
		margin-top:					-3px;
		font-weight:				bold;
		width:						24px; height:24px;
		background:					url(bubble-comment.gif) top left no-repeat;
	}	
	div.blogeintrag span {
		font-size:					9px;
		margin-top:					-4px;
		display:					block;
		clear:						both;
	}
	div.blogeintrag span a {
		color:						#AED9CF;
	}
	div.blogeintrag p {
		font-size:					11px;	
	}
	div.blogeintrag p.column3 {
		-moz-column-count: 3;
		-moz-column-gap: 1em;
		-moz-column-rule: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 1em;
		-webkit-column-rule: 0px;
	}
/* }} BLOG */

/* {{ PORTFOLIO */
	div#content div#einspaltig {
		margin:						10px 0px 0px 0px;
		padding:                    5px;
		background-color:			#ffffff;
	}
	div.title {
		background:					#4E4023;
		padding:5px 0px 5px 10px;						
	}
	body#grafikdesign div.work {
		margin:						5px 5px 0px 0px;	
		width:						218px;
		height:						218px;
		border:						5px solid #E5E5E5;
		float:						left;
	}
	body#grafikdesign div.work:hover {
		border:						5px solid #F63758;
		cursor:						pointer;
	}
	body#grafikdesign div.work div.stapel {
		width:						218px;
		height:						218px;
		border:0;
	}
	body#grafikdesign div.work div.stapel img {
		position:					absolute;
		z-index:					1;
		width:						218px; 
		height:						218px;
	}
	body#grafikdesign div.work div.stapel img.obersteebene {	z-index:3;	}
	body#grafikdesign div.work div.stapel img.mittlereebene {	z-index:2;	}
	body#grafikdesign div.work div.stapelTitle {
		position:					relative;
		top:						-42px;
		left:						0px;
		background:					#ffffff;
		height:						22px;
		width:						190px;
		padding:                    8px 0px 0px 10px;
		z-index:					4;
		border:0;
	}
	body#grafikdesign div.work div.stapelTitle a { /* TITEL */
		color:						#F63758;
		font-size:					12px;
		z-index:					5;
		background:					#ffffff;
		width:auto;
		border:0;
	}
	body#grafikdesign div.work:hover div.stapelTitle {
		background:					#F63758;
		border:0;
	}
	body#grafikdesign div.work:hover div.stapelTitle a {
		color:						#FFFFFF;
		background:					#F63758;
		border:0;
	}
/* }} GRAFIKDESIGN PORTFOLIO */

/* {{ ILLUSTRATION */
	body#illustration div.work {
		margin:						5px 5px 0px 0px;	
		width:						140px;
		height:						140px;
		border:						5px solid #E5E5E5;
		float:						left;
	}
	body#illustration div.work:hover {
		border:						5px solid #F63758;
		cursor:						pointer;
	}
	body#illustration div.work div.stapel {
		width:						140px;
		height:						140px;
		border:0;
	}
	body#illustration div.work div.stapel a img {
		position:					absolute;
		z-index:					1;
		width:						140px; 
		height:						140px;
	}
	body#illustration div.work div.stapelTitle {
		position:					relative;
		top:						-36px;
		left:						0px;
		background:					#ffffff;
		height:						22px;
		width:						120px;
		padding:                    8px 0px 0px 10px;
		z-index:					4;
		border:0;
	}
	body#illustration div.work div.stapelTitle a { /* TITEL */
		color:						#F63758;
		font-size:					12px;
		z-index:					5;
		background:					#ffffff;
		width:auto;
		border:0;
	}
	body#illustration div.work:hover div.stapelTitle {
		background:					#F63758;
		border:0;
	}
	body#illustration div.work:hover div.stapelTitle a {
		color:						#FFFFFF;
		background:					#F63758;
		border:0;
	}
/* }} ILLUSTRATION */

/* {{ FOTOGRAFIE */
	body#fotografie div.work {
		margin:						5px 5px 0px 0px;	
		width:						88px;
		height:						88px;
		border:						5px solid #E5E5E5;
		float:						left;
	}
	body#fotografie div.work:hover {
		border:						5px solid #F63758;
		cursor:						pointer;
	}
	body#fotografie div.work div.stapel {
		width:						88px;
		height:						88px;
		border:0;
	}
	body#fotografie div.work div.stapel a img {
		position:					absolute;
		z-index:					1;
		width:						88px; 
		height:						88px;
	}
/* }} FOTOGRAFIE */

form#newsletter input {
	width:						200px;
	border:						1px solid #CCCCCC;
	height:						16px;
	line-height:				14px;
	font-size:					10px;
	padding:                    2px 0px 0px 5px;
	color:						#666666;
	margin-top:					2px;
}
form#newsletter input#button {
	width:						214px; 
	height:						38px;
	margin-top:					3px;
	padding:0;border:0;
	background:					url(button-abo.jpg);
	margin-left:-2px;
}



div#footer {
	background:						url(background_bottom.gif) center top no-repeat;
	height:							50px;
	width:							998px;
	margin:							0px auto 0px auto;
}
div#footer a {
	float:						right;
	color:						#ffffff;
	margin:						10px 20px 0px 0px;
	font-size:					10px;
}
.clr { clear: both; float: none; width: 0px; height: 0px; overflow:hidden;line-height:0px;}

#hide img {
	width:						0px;
	height:						0px;
}

#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}

body#grafikdesign div.description,
body#grafikdesign div.description:hover {
	margin:						5px 5px 0px 0px;	
	width:						218px;
	height:						218px;
	border:						5px solid #E5E5E5;
	float:						left;
	padding-left:6px;
	background:#E5E5E5;
	color:#333333;
	cursor:default;
}
.blog_comment,
.blog_comment div#main {
	background: #E5E5E5;
}
.blog_comment div#main div#ausrichten {
	width:300px;
}
form#comment table {
	margin:0;
}
form#comment textarea {
	float:none;
	height:100px;
	margin-bottom:6px;
	width:300px;
}
#comment #button { margin-top:6px; }
.blog_comment div.blogeintrag,
.blog_comment .blogspacer {
	width:300px;

}
.press {margin-bottom:10px;}
.press img { float:left;}
.info {
	width:220px;
	float:left;
	margin-left:10px
}
.pressImg { width:710px;float:left;background:#ffffff}
.press p {margin-top:0;}