@charset "utf-8";
/* CSS Document */
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	outline: none;
}



/* ------------------ BODY CSS -------------------- */
a {text-decoration:underline; color: #fffdd8;}
a:hover {text-decoration:none;}

body {background-color:black; font-family:Verdana, Geneva, sans-serif; font-size:15px; color:#fef4dc; text-decoration:none;}
body#index {background:#000000;}
body#profile {background:#a61d1d;}
body#arbeiten {background:#21773d;}
body#kontakt {background:#37283E;}


@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('Chunkfive-webfont.eot');
    src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('Chunkfive-webfont.woff') format('woff'),
         url('Chunkfive-webfont.ttf') format('truetype'),
         url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    
}






/* ------------------- BOXEN CSS --------------------- */
#wrapper {width: 900px; margin: 30px auto; }
#header {width: 900px; height: 130px;}


#logo {width: 900px; height: 110px; background-image: url(images/logo.png); background-repeat: no-repeat; margin-top: 30px; float: left; position: absolute; z-index: 1;} 
#navigation {width: 380px; height: 110px; margin-top: -5px; float: right; position: relative; top: 0; z-index: 2; overflow: hidden;} 


#content {width: 900px; height: 580px;; margin:60px auto;}

#footer {width: 900px; background:url(images/footer.png) no-repeat;  position: absolute;}
.ftext {width: 300px; margin: 38px 0 0 0; float:left; font-size:10px;}
.fkontakt {width: 600px; margin: 38px 0 0 0; float:right; font-size:10px; text-align:right;}



/* ------------------- NAVIGATION CSS ---------------------- */

li.nav {float:left; font-family:'ChunkFiveRegular', 'Old Standard TT', serif; display:block; color:#fffdd8; list-style:none; margin-left:20px; margin-top:80px; font-size:28px; font-weight:100;}
 
li.nav a {color:#fffdd8; text-decoration:none;}
li.nav div {height:100px; margin-top:-50px; text-align:center; opacity:0; }


li.nav a:hover div {margin-top:-100px;
				-moz-transition: all 0.2s linear;
				-o-transition: all 0.2s linear;
				-webkit-transition: all 0.2s linear; 
				transition: all 0.2s linear; 
				opacity:1;}
				
li.nav.current div {margin-top:-100px;
				-moz-transition: all 0.2s linear;
				-o-transition: all 0.2s linear;
				-webkit-transition: all 0.2s linear; 
				transition: all 0.2s linear;
				opacity:1;}



li.nav a:hover h2 {  
				margin-top:30px;
				-moz-transition: margin-top 0.2s linear;
				-o-transition: margin-top 0.2s linear;
				-webkit-transition: margin-top 0.2s linear;
				transition: margin-top 0.2s linear;}
								

li.nav .currenth2 {margin-top:30px; opacity:0;}



#navigation li.nav:nth-of-type(1) div {background-image:url(images/profil.png); background-repeat:no-repeat; background-position:top;}
#navigation li.nav:nth-of-type(2) div {background-image:url(images/arbeiten.png); background-repeat:no-repeat; background-position:top;}
#navigation li.nav:nth-of-type(3) div {background-image:url(images/kontakt.png); background-repeat:no-repeat; background-position:top;}


/* -------------------- SCHRIFTEN CSS ----------------------- */
h1 {font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:100px; color: #fffdd8; letter-spacing:2px; text-align:right;}
h2 {font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:28px;  font-weight:100;}
h4 {font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:40px;  font-weight:100; line-height:30px;}
h8 {font-size:16px; font-weight:bold; margin-bottom:15px;}



/* -------------------- KONTAKT FORMULAR -------------------- */
.kontakt_wrap {/*background:url(images/stempel.png) no-repeat top right;*/}
#contact {width: 650px; height: 350px; margin: 30px 0 0 0; padding: 10px 10px; border: 1px solid #fffdd8; border-radius: 3px; }
.details {background:url(images/briefmarke.png) no-repeat top right;  width: 240px; padding: 220px 10px 0 0; float:right; text-align:left;}
.nachricht {width: 400px; margin: 5px 0 0 0; float:left; text-align:left; overflow:hidden;}



h3 {font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:20px; font-weight:100; margin: 0 0 0 0;}

label {float: left;  margin: 5px 100px 5px 0; width:95px;
	    text-align:left; font-size: 16px; font-weight:bold;  color: #fffdd8; 
		text-transform: lowercase; }
		
input {width: 220px; height: 20px; padding: 2px 20px 0px 10px; margin: 0 0 10px 0; background:#37283E;
		border-radius: 3px; border: 1px dashed #fffdd8;
		font-family: sans-serif; font-size:16px; color:#fffdd8;}
		
textarea {
	width: 310px; height: 230px; padding: 10px 20px 0px 10px; margin: 0 0 20px 0; 
	background: #37283E;
	border-radius: 3px;
	border: 1px dashed #fffdd8;
	font-family: sans-serif; font-size: 16px; color: #fffdd8;  
	resize:none;
}

input:focus, textarea:focus {
	background-color: #37283E;
	border: 1px solid #fffdd8;
}
	
input[type=submit] {
	width: 150px; height: 40px; float:left; padding: 10px 15px; margin: 0 15px 0 0;
	font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:20px; font-weight:100;
	border: 1px solid #fffdd8;
	background:#37283E;
	cursor: pointer;
}

input[type=submit]:hover {background:#fffdd8; color:#37283E; cursor: pointer; font-weight:bold;}




/*--------------------------- PROFIL -------------------------*/
#image {width: 180px;  float:right;}
#text  {width: 700px;  float:left;}
.skill { background:#fffdd8; color:#B52626; padding: 30px 0 30px 0;}
.columns {
	 width:900px;
	    -webkit-column-count:2;
		-moz-column-count:2;
		-o-column-count:2;
		column-count:2;
		
		-webkit-column-width: 300px;
		-moz-column-width: 300px;
		-o-column-width: 300px;
		column-width: 300px;
		
		-webkit-column-gap:49px;
		-moz-column-gap:49px;
		-o-column-gap:49px;
		column-gap:49px;
		
		-webkit-column-rule: 1px solid #fffdd8;
		-moz-column-rule: 1px solid #fffdd8;
		-o-column-rule: 1px solid #fffdd8;
		column-rule: 1px solid #fffdd8;
		}
		
h9 {font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:28px;  font-weight:100; line-height:30px; padding-left: 15px;}
h10 { /*text-shadow: #FFF 1px 1px 2px ;*/ font-weight:bold;}
li {text-align:left; list-style:disc; margin-left:30px;}		



/*--------------------------- INDEX -------------------------*/

#baum {width:1200px; height: 580px;  position:relative; z-index:9;}
#hallo {width:300px; position:relative; z-index:10; margin-top: -580px;}



/*--------------------------- PORTFOLIO -------------------------*/




h5 {font-family: 'ChunkFiveRegular', 'Old Standard TT', serif; font-size:20px; font-weight:100; color:#fffdd8;}
/* #page-wrap {width: 900px; margin: -610px 0 0 0;position:relative; z-index:7; }*/
/*.lineal {width:900px; height:650px; background:url(images/toolbar.png) no-repeat;  position:relative; z-index:6;}*/
h7 {font-family:Verdana, Geneva, sans-serif; font-size:13px; color:#fffdd8;}






.info-col { float:right; width: 200px; height: 100%; padding: 0 0 30px 0; }
.info-col h5 { text-align:left; font-weight: normal; padding: 25px 0; adding: 0 0 0 15px; }

.image { height: 80px; text-indent: -9999px; display: block; border-left: 1px solid #fffdd8;}

dt { padding: 5px;  color: #fffdd8; /*border-bottom: 1px solid white;*/ border-left: 1px solid #fffdd8; }
dd { position: absolute; left: -9999px; top: -9999px; width: 429px;  padding: 10px; color: #fffdd8; border-left: 1px solid #fffdd8;}

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }

.daxlueg { background: url(images/screens/daxlueg_1_small.jpg) right center no-repeat; }
.holzkunst { background: url(images/screens/holzkunst_1_small.jpg) left center no-repeat; }
.partywerkstatt { background: url(images/screens/partywerkstatt_1_small.jpg) left center no-repeat; }
.wicklund { background: url(images/screens/wicklund_1_small.jpg) left center no-repeat; }