@charset "utf-8";
/*--------------------------------------------------------------------------------------------------
CSS Styles for <hausfabrik>.

version:   1.0
--------------------------------------------------------------------------------------------------*/

/* =CSS Reset
--------------------------------------------------------------------------------------------------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body{
	background-color:#000;}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* End CSS Reset
--------------------------------------------------------------------------------------------------*/

/* =Toolkit
--------------------------------------------------------------------------------------------------*/

/* Micro Clearfix Hack by Nicholas Gallagher (http://nicolasgallagher.com/micro-clearfix-hack/) */
/* For modern browsers */ 
.cf:before, .cf:after {
	content:"";
	display:table;
}
.cf:after {
	clear:both;
}
.clear {
	clear: both;
	overflow: hidden;
	width: 100%;
}
/* End Toolkit
--------------------------------------------------------------------------------------------------*/

html, body {
	height: 100%;
	width: 100%;
}
.container {
	width: 906px;
	margin: 0 auto;
}
/* =Typography
--------------------------------------------------------------------------------------------------*/

/* Setting up the fonts */
body {
	font-family: Georgia, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color:#000;
	background: url(../img/main_bg.jpg) no-repeat;
}
/* End Typography
--------------------------------------------------------------------------------------------------*/

/* =Links
--------------------------------------------------------------------------------------------------*/
a {
	outline: none !important;
	text-decoration: none;
}
/*a:hover {
	text-shadow: 0 0 0.2em #a5d45b, 0 0 0.2em #a5d45b, 0 0 0.2em #a5d45b;
}*/
/* End Links
--------------------------------------------------------------------------------------------------*/

#page{
    
    
}


/*sections*/

/*Header*/
header { height:255px; background-color:#26282A;}



#logo {position:absolute; top:57px; z-index:2;}
#logo_glow {position:absolute; left:-118px; z-index:1; display:none;}

#HeaderContent{
    height:254px;
    width:1100px;
    margin:0% auto;
    position:relative;
}



#nav { 
    height: 80px;
    list-style: none outside none;
    position: fixed;
    top: 284px;
    width: 235px;
    z-index: 100;
    margin-left:850px;
}

/*Navigation*/



#nav li {
  margin-bottom: 2px;
  float:left;
  margin-right:15px;
}

#nav a {
  display: block;
  font-size: 11px;
  padding: 5px 10px;
   height: 48px;
    padding-left: 10px;
    width: 40px;
}


#nav #nav-me{
    width:61px;
    height:61px;
    background: url(../img/nav-me.png) no-repeat;
}
#nav #nav-me.current{
    width:61px;
    height:61px;
    background: url(../img/nav-me-a.png) no-repeat;
}
#nav #nav-me :hover{
    width:61px;
    height:61px;
    background: url(../img/nav-me-a.png) no-repeat;
}

#nav #nav-portfolio{
    width:61px;
    height:61px;
    background: url(../img/nav-port.png) no-repeat;
}
#nav #nav-portfolio.current{
    width:61px;
    height:61px;
    background: url(../img/nav-port-a.png) no-repeat;
}
#nav #nav-portfolio :hover{
    width:61px;
    height:61px;
    background: url(../img/nav-port-a.png) no-repeat;
}

#nav #nav-contact{
    width:61px;
    height:61px;
    background: url(../img/nav-cont.png) no-repeat;
}
#nav #nav-contact.current{
    width:61px;
    height:61px;
    background: url(../img/nav-cont-a.png) no-repeat;
}
#nav #nav-contact :hover{
    width:61px;
    height:61px;
    background: url(../img/nav-cont-a.png) no-repeat;
}



/*ME*/

#MeContent{
    margin:0% auto;
    position:relative;
    width:1100px;
}



#me {height: 661px; background:#26282A url(../img/me_bg.png)}
#bubbles { z-index:-1; background-color:#26282A; background: url(../img/bubbles.png) no-repeat center 255px fixed; height: 666px; }
#meImg {position:absolute; left:338px; top:170px; z-index: 2; }
#meTxt {position:absolute;top:180px;left:445px;width:380px; height:380px; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background: #fff; text-align: center; padding: 60px; }
#meTxt p {
   position: absolute;
    font-size: 20px;
    border-radius: 50% 50% 50% 50%;
    width: 390px;
    height: 440px;
    left: 60px;
    line-height: 28px;
    top: 110px;
    }
#mebubble{position:absolute; top:217px; left:100px;height:108px; width:108px; background: url(../img/me-bubble.png) no-repeat; z-index: 2;}
#Line{position:absolute;left:153px;height:2189px; width:647px; background: url(../img/line.png) no-repeat; z-index: 2;}


/*Portfolio*/
#portfolio { 
    background: url(../img/portfolio-bg.gif);
    height: 783px; 
}


#PortfolioContent{
    height:254px;
    width:1100px;
    margin:0% auto;
    position:relative;
}

#portbubble{
    position:absolute; 
    top:27px; 
    left:735px;
    height:256px; 
    width:256px; 
    background: url(../img/portfolio-bubble.png) no-repeat; 
    z-index: 2;
}

/*Gallery*/
/*Gallery Navigation*/

.galNavItem{
    position:absolute;
    top:202px;
    z-index:10;
    height:80px;
    width:61px;
    text-align: center;
    color:#fff;
    font-size:18px;
    font-family:georgia;
}

#Show1{
    left:270px;
    background: url(../img/btn_filter-all.png) no-repeat scroll 0 20px transparent;
	cursor:pointer;
}
#Show1.current, #Show1:hover{
    background: url(../img/btn_filter-all-click.png) no-repeat scroll 0 20px transparent;
}
#Show2{
    left:350px;
    background: url(../img/btn_filter-website.png) no-repeat scroll 0 20px transparent;
	cursor:pointer;
}
#Show2.current, #Show2:hover{
    background: url(../img/btn_filter-website-click.png) no-repeat scroll 0 20px transparent;
}
#Show3{
    left:430px;
    background: url(../img/btn_filter-photo.png) no-repeat scroll 0 20px transparent;
	cursor:pointer;
}
#Show3.current, #Show3:hover{
    background: url(../img/btn_filter-photo-click.png) no-repeat scroll 0 20px transparent;
}
#Show4{
    left:510px;
    background: url(../img/btn_filter-app.png) no-repeat scroll 0 20px transparent;
	cursor:pointer;
}
#Show4.current, #Show4:hover{
    background: url(../img/btn_filter-app-click.png) no-repeat scroll 0 20px transparent;
}
#Show5{
    left:590px;
    background: url(../img/btn_filter-logo.png) no-repeat scroll 0 20px transparent;
	cursor:pointer;
}
#Show5.current, #Show5:hover{
    background: url(../img/btn_filter-logo-click.png) no-repeat scroll 0 20px transparent;
}
#galleries{
    position:absolute; 
    top:180px; 
    width:1100px;
    height:500px;
    z-index:5;
    background: url(../img/gallery-bg.png) no-repeat scroll 25px 136px transparent;
}
.itemContainer{
    padding:136px 0px 0px 25px;
}

ul.itemContainer li{
    list-style:none;
    float:left;
    width:350px;
    height:175px;
    background-color:#1a1b1c;
    margin:0px 5px 5px 0px;
}

ul.itemContainer li img{
   height:175px;
   width:350px;
}


/*Contact*/

#ContactContent{
    height:860px;
    width:1100px;
    margin:0% auto;
    position:relative;
    z-index: 50;
}

#Contbubble{
    position:absolute; 
    top:54px; 
    left:370px;
    height:220px; 
    width:221px; 
    background: url(../img/contact-bubble.png) no-repeat; 
    z-index: 2;
}

#contact { 
    background: url(../img/contact-bg.jpg);
    height: 860px; 
    }
#contactForm {width: 615px; background: url(../img/form_bg.png) 120px 0px no-repeat;  
position:absolute; 
    top:360px; 
    left:56px;
    padding-top:53px;
    }
#contactForm label, #contactForm input, #contactForm textarea { float: left; }
#contactForm label { text-align: right; width: 100px; font-size: 25px; color: #fff; padding: 18px 18px 0 0; }
#contactForm input { font-size: 25px; width:490px; border: none; margin-top: 3px; }
#contactForm input.submit { border: none; margin: 15px 0 0 568px; width: 36px; height: 36px; }
#contactForm textarea { width:488px; height: 175px; font-size: 25px; border: none; margin-top: 3px; }
#contactDetails { float: left; margin: 0px 0 0 30px; padding:18px 0 0 17px;
position:absolute; 
    top:392px; 
    left:673px;
    height:349px;
}
#contactDetails p { font-size: 22px; line-height: 32px; padding-left: 20px; }
#contactDetails p.name { font-size: 33px; line-height: 52px; padding-left: 0px; }
#contactForm label.textlabel{
    padding-top:13px;
}

#contactForm textarea, #contactForm input{
    font-family:Arial;
}

.formelement{
    margin-top:13px;
}
input#name, input#mail{
    height:44px;
    border:0px;
    padding:0px 0px 0px 0px;
}
textarea#text{
    resize:none;
    width:490px;
}

#contactImpressum{
    float: left; margin: 0px 0 0 0px; padding:0px 0 0 0px;
    position:absolute; 
    top:833px; 
    left:476px;
    height:15px;
}
#contactImpressum a{
    color:#000;
}


@-moz-keyframes move {
	0%   { width:0px;}
	100% { width:200px; box-shadow:0px 0px 0px 0px rgba(255,255,255,1.0); }
}

@-moz-keyframes move1 {
	0%   { width:0px;}
	100% { width:50px; box-shadow:0px 0px 0px 0px rgba(255,255,255,1.0); }
}

.mailToLink{
    font-size: 22px;
    line-height: 32px;
    padding-left: 20px;
    color:#000;
    position:relative;
    top:10px;
}

.contactContent{
    position:relative;
}


#Impressum #contact{
    padding-top:45px;
}
.back{
    float:left;
    width:50px;
    padding: 90px 20px 0 37px;
}
.contact{
    width:220px;
    font-size:14px;
    height:100%;
}
.contact h1{
    font-size:36px;
    padding-bottom:35px;
}
.impressum{
    padding-top: 55px;
    font-size:12px;
    line-height:18px;
}
#Impressum{
    padding-top:35px;
    max-width: 1100px;
    margin:auto;
}
#ImpressumBody{
    background-color:#b6bec6;
}
.tmg, .rstv{
    line-height:22px;
}