/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Reset */

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;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

legend {
position: relative;
left: -5px;
}

strong, b { font-weight: bold; }
em, i { font-style: italic; }


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Helper */

/* >>> Clearfix */
.clearfix:after {
content: ".";
visibility: hidden;
display: block; 
clear: both; 
height: 0;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* >>> Clear */
.clear {
visibility: hidden;
clear: both;
height: 0;
line-height: 0;
}

.clear-left {
clear: left;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> Custom styles */

body {
font-family: Arial, Helvetica, "Helvetica Neue", sans serif;
font-size: 62.5%;
color: #d5d2d7;
background-color: #0d0814;
background-image: url(../images/bg_top_kachel.gif);
background-repeat: repeat-x;
background-attachment: fixed;

}

/* >>>>> Deko Container */

#bg-wrapper-dummy { /* soll oben schon am das grosse bild laden */
background-image: url(../images/bg_top.jpg);
overflow: hidden;
width: 0;
height: 0px;
visibility:hidden;	
}


#bg-wrapper {
position: fixed;
z-index: 50;
top: 0;
left: 0;
margin: 0 auto;
background-image: url(../images/bg_top.jpg);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
text-align: center;
overflow: hidden;
width: 100%;
height: 402px;	
}

#balken-oben {
position: fixed;
z-index: 999;
top: 0;
left: 0;
margin: 0 auto;
background-image: url(../images/balken_oben.gif);
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
height: 63px;	
}

#footer {
position: fixed;
z-index: 30;
bottom: 0;
left: 0;
margin: 0 auto;
text-align: center;
overflow: hidden;
background-image: url(../images/bg_footer.jpg);
background-position: center top;
background-repeat: no-repeat;
width: 100%;
height: 201px;	
}

#footer-balken {
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
margin: 0 auto;
text-align: center;
overflow: hidden;
background-color: #e70286;
width: 100%;
height: 5px;
}

.opacity {
opacity: .85;
}

/* >>>>> Layout */

#wrapper {
position: relative;
z-index: 90;
margin: 5px auto;
width: 906px;
height: auto;
padding-bottom: 500px;
}

#banner {
background: url(../images/banner_top.png) 6px 0 no-repeat;
height: 210px;
width: 906px; 
margin: -60px 0px 0px 0px;
}

#banner h1, #banner h2 {
visibility: hidden;
}

a.anchor {
display: block;
height: 60px;
}

div.nav-balken {
height: 47px;
width: 906px;
background: url(../images/bg_nav_balken.png) 0 0 no-repeat;
margin: 0px 0px 20px 0px;
}

div.nav-balken h2 {
font-size: 1px;
text-indent: -9999px;
height: 36px;
width: 250px;
float: left;
background: url(../images/logo_klein.gif) 10px 16px no-repeat;
}

div.nav-pfeil {
position: relative;
background: url(../images/nav_active_pfeil.gif) 0px 0px no-repeat;
margin: 0px 0px 0px -160px;
height: 17px; 
width: 10px;
top: 32px;
}



/* >>>>> Zwei, Drei Spalten und vier Spalten  */


.wrapper-zwei {
width: 906px;
} 

.wrapper-zwei .links {
float: left;
width: 448px;
margin: 0px 10px 0px 0px;
} 

.wrapper-zwei .rechts {
float: left;
width: 448px;
margin: 0px 0px 0px 0px;
} 

.wrapper-zwei .links .body,
.wrapper-zwei .rechts .body {
margin: 2px 0px 0px 0px;
padding: 20px 15px 20px 20px;
background: #000
} 

.wrapper-zwei .imprint small {
font-size: 0.9em
} 

.wrapper-zwei .imprint p {
margin: 0px 0px 10px 0px;
} 


.wrapper-drei {
width: 906px;
background: url(../images/bg_dreier_teaser.gif) 0 28px no-repeat;
} 

.wrapper-drei .links {
float: left;
width: 295px;
margin: 0px 10px 0px 0px;
} 
.wrapper-drei .mitte {
float: left;
width: 295px;
margin: 0px 10px 0px 0px;

} 
.wrapper-drei .rechts {
float: left;
width: 295px;
margin: 0px 0px 0px 0px;
} 

.wrapper-drei .links .body,
.wrapper-drei .mitte .body,
.wrapper-drei .rechts .body {
margin: 2px 0px 0px 0px;
padding: 20px 15px 20px 20px;
} 

.wrapper-zwei p,
.wrapper-drei p,
.wrapper-vier p {
margin: 0px 0px 0px 0px;
}

.wrapper-zwei h3,
.wrapper-drei h3,
.wrapper-vier h3 {
width: 100%;
height: 26px;
margin: 0px 0px 0px 0px;
background-color: #000;
background-repeat: no-repeat;
background-position: 6px 7px;
font-size: 1px;
text-indent: -9999px;
}

.wrapper-zwei h3.contact { background-image: url(../images/bg_h3_e_mail_senden.gif); }
.wrapper-zwei h3.impressum { background-image: url(../images/bg_h3_impressum.gif); }
.wrapper-drei h3.intro { background-image: url(../images/bg_h3_intro.gif); }
.wrapper-drei h3.news { background-image: url(../images/bg_h3_news.gif); }
.wrapper-drei h3.blog { background-image: url(../images/bg_h3_blog.gif); }
.wrapper-drei h3.xing { background-image: url(../images/bg_h3_xing.gif); }
.wrapper-drei h3.twitter { background-image: url(../images/bg_h3_twitter.gif); }
.wrapper-drei h3.flickr { background-image: url(../images/bg_h3_flickr.gif); }
.wrapper-drei h3.profile { background-image: url(../images/bg_h3_profile.gif); }

.wrapper-drei h3.blog a { display: block; height: 20px; width: 150px; }

.wrapper-zwei h4,
.wrapper-drei h4,
.wrapper-vier h4 {
color: #fff;
font-size: 1.3em;
margin-top: 10px;
padding-left: 12px;
background: url(../images/bg_h3_strich.gif) 0px 0px no-repeat;
}
.wrapper-drei h4.first {
margin-top: 0px;
}

.wrapper-vier {
width: 906px;
margin-bottom: 10px;
background: url(../images/bg_dreier-vierer_teaser.gif) 229px 0px no-repeat;
} 

.wrapper-vier .links .body,
.wrapper-vier .mitte-links .body,
.wrapper-vier .mitte-rechts .body,
.wrapper-vier .rechts .body {
margin: 0px 0px 0px 0px;
padding: 20px 15px 20px 20px;
} 

.wrapper-vier .links,
.wrapper-vier .mitte-links,
.wrapper-vier .mitte-rechts {
float: left;
width: 219px;
margin: 0px 10px 0px 0px;
} 

.wrapper-vier .rechts {
float: left;
width: 219px;
margin: 0px 0px 0px 0px;
} 

.wrapper-vier h3.screen { background-image: url(../images/bg_h3_screendesigns.gif); }
.wrapper-vier h3.identity { background-image: url(../images/bg_h3_identity.gif); }
.wrapper-vier h3.cdcover { background-image: url(../images/bg_h3_cd_cover.gif); }

.wrapper-vier .links .sample,
.wrapper-vier .mitte-links .sample,
.wrapper-vier .mitte-rechts .sample,
.wrapper-vier .rechts .sample {
margin: 0px 0px 0px 0px;
padding: 10px 10px 0px 10px;
background: #000;
} 


/* >>>>> Zwei Spalten  */

/* >>>>> Navi */

div.nav-balken dl {
float: right;
margin: 18px 10px 0px 0px;
}

div.nav-balken dl dt {
display: none;
}

div.nav-balken dl dd {
display: inline;
}

div.nav-balken dl dd a {
display: block;
float: left;
height: 13px;
margin: 0px 0px 0px 15px;
background-image: url(../images/bg_navi.gif);
background-repeat: no-repeat;
font-size: 1px;
text-indent: -9999px;
}

div.nav-balken dl dd a.nav-home { width:39px; background-position: 0px 0px; }
div.nav-balken dl dd a.nav-home:hover { width:39px; background-position: 0px -14px; }
div.nav-balken dl dd a.nav-home-active { width:39px; background-position: 0px -14px; cursor: default }

div.nav-balken dl dd a.nav-portfolio { width:57px; background-position: -57px 0px;}
div.nav-balken dl dd a.nav-portfolio:hover { width:57px; background-position: -57px -14px; }
div.nav-balken dl dd a.nav-portfolio-active { width:57px; background-position: -57px -14px; cursor: default }

div.nav-balken dl dd a.nav-network { width:55px; background-position: -130px 0px;}
div.nav-balken dl dd a.nav-network:hover { width:55px; background-position: -130px -14px; }
div.nav-balken dl dd a.nav-network-active { width:55px; background-position: -130px -14px; cursor: default }

div.nav-balken dl dd a.nav-kontakt { width:48px; background-position: -200px 0px;}
div.nav-balken dl dd a.nav-kontakt:hover { width:48px; background-position: -200px -14px; }
div.nav-balken dl dd a.nav-kontakt-active { width:48px; background-position: -200px -14px; cursor: default }

div.nav-balken dl dd a.nav-blog { width:39px; background-position: -268px 0px;}
div.nav-balken dl dd a.nav-blog:hover { width:39px; background-position: -268px -14px; }
div.nav-balken dl dd a.nav-blog-active { width:39px; background-position: -268px -14px;  cursor: default }


/* >>>>> Typo */

p {
margin: 15px 0px 30px 0px;
font-size: 1.2em;
line-height: 150%; 
}

p a {
color: #cb0077;
text-decoration: none; 
}
p a:hover {
color: #fff;
background: #cb0077;
}
p a.blau,
p#twitters a {
color: #0e9273;
text-decoration: none; 
}
p a.blau:hover,
p#twitters a:hover {
color: #fff;
background: #0e9273;
}

a.bloglink {
color: #0e9273;
text-decoration: none; 
}

a.bloglink:hover {
color: #fff;
background: #0e9273;
}

/* XING Box */

p.link-bottom-xing {
position: relative;
top: 12px;
font-weight: bold;

}


/* Twitter Box */

.wrapper-drei .tweet {
height: 200px;
background: url(../images/tweet.gif) bottom right no-repeat;
}

p#twitters {
width: 190px;
height: 86px;
padding: 3px 35px 0px 30px;
background: url(../images/tweet_bg.gif) 0 0 no-repeat;
}

p.link-bottom-twitter {
position: relative;
top: 32px;
font-weight: bold;
}

p#twitters span.tweetloader {
display: block;
margin: 15px 0;

text-align: center;
font-style: italic;
font-weight: bold;
}
p#twitters span.tweetloader img {
position: relative;
margin-left: 5px;
top: 4px;
}


/* Flickr Box */

.flickr-body {
padding: 24px 0px 20px 20px
}

.flickr-body img {
margin: 0px 11px 11px 0px;
border: 1px solid #d5d2d7;
}

p.link-bottom-flickr {
position: relative;
top: 12px;
font-weight: bold;
width: 170px;
background: url(../images/flickr_bg.gif) right center no-repeat;
}

/* Friends Box */

.friends {
width: 905px;
height: 66px;
background: #000;
margin: 20px 0px 0px 0px;
}

.friends dl {
margin: 0px 0px 0px 0px;
}

.friends dl dt {
display: none;
}

.friends dl dd {
display: inline;
}

.friends dl dd a {
display: block;
text-indent: -9999px;
font-size: 1px;
color: #000;
float: left;
height: 45px;
margin: 10px 0px 0px 15px;
}

.friends dl dd a.wtk { width: 29px; background: url(../images/friend_wtk.gif) 0 0 no-repeat; }
.friends dl dd a.neck { width: 25px; background: url(../images/friend_neck.gif) 0 0 no-repeat; }
.friends dl dd a.para { width: 25px; background: url(../images/friend_para.gif) 0 0 no-repeat; }
.friends dl dd a.dp { width: 44px; background: url(../images/friend_dp.gif) 0 0 no-repeat; }
.friends dl dd a.ecb { width: 37px; background: url(../images/friend_ecb.gif) 0 0 no-repeat; }
.friends dl dd a.designmeltdown { width: 69px; background: url(../images/friend_designmeltdown.gif) 0 0 no-repeat; }
.friends dl dd a.dn { width: 30px; background: url(../images/friend_dn.gif) 0 0 no-repeat; }
.friends dl dd a.webcreme { width: 89px; background: url(../images/friend_webcreme.gif) 0 0 no-repeat; }
.friends dl dd a.apple { width: 30px; background: url(../images/friend_apple.gif) 0 0 no-repeat; }

/* tooltipps */

.glt-elm{
	position: absolute;
	left: 0;
	top: 0;
	width: auto;
	color: #fff;
	opacity: 0.9;
	visibility: hidden;
	z-index: 999;
	border: 1px solid #666;
}

.glt-elm p{
	background: #000;
	margin: 0;
	padding: 0.5em;
}

.glt-elm img{
	display: block;
}




/* Growl / roar */

.roar-body {
position: absolute;
z-index: 999;
}

.roar {
position: absolute;
width: 200px;
cursor:	pointer;
}
.roar-bg {
position: absolute;
z-index: 1000;
width: 100%;
height:	100%;
left: 0;
top: 0;
background-color:#000;
-moz-border-radius:	10px;
-webkit-border-radius: 5px;
-webkit-box-shadow:	0 0 5px rgba(0, 0, 0, 0.5);
}
.roar-body-ugly .roar {
background-color: #333;
}
.roar-body-ugly .roar-bg {
display: none;
}
.roar h3 {
position: relative;
padding: 15px 10px 0;
margin: 0px 0px 0px 0px;
font-size: 1.3em;
font-weight: bold;
color:#fff;
z-index: 1002;
}
.roar p {
position: relative;
padding: 10px 10px 15px;
margin: 0px 0px 0px 0px;
font-size: 1.2em;
color: #fff;
z-index: 1002;
}

/* Kontakt */

#log_res p {
color: #085845;
}

input[type="hidden"] {
float: none;
display: none;
}

.formular input, .formular textarea, .formular select {
font-size: 1.2em;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
border: 1px inset #abadb3;
padding: 2px 2px;
}

.formular label {
font-size: 1.2em;
}

.formular select {
padding: 0;
}

.formular input.submit {
width: auto !important;
border: 0 !important;
padding: 0 !Important;
margin: 0;
}

span.pflicht {
color: #cb0077;
font-weight: bold;
}



/* Formulare */

.formular fieldset {
border-bottom: 0;
margin-bottom: 0;
padding: 10px 0 0 0;
}

.formular label {
display: block;
float: left;
width: 80px;
padding-top: 4px;
}

.formular label.captcha {
display: block;
float: left;
width: 200px;
padding-top: 4px;
margin-left: 80px;
}


.formular input,
.formular textarea {
margin: 0 4px 10px 0;
width: 260px;
display: inline;
float: left;
padding: 2px 4px 3px 4px;
border: 1px solid #38353d;
background: #000;
color: #fff;
}

.formular input:focus,
.formular textarea:focus {
background: #061013;
}

.formular input.captchafield {
margin: 0 0 0 4px;
width: 56px;
text-align: center;
font-weight: bold;
display: inline;
float: left;
padding: 2px 4px 3px 4px;
}

.formular textarea {
height: 80px;
overflow: auto;
}

.formular input.submit {
margin: 10px 61px 0 0;
padding: 0;
float: right;
}

/* disclaimer */

div.disclaimer {
padding: 20px;
}

div.disclaimer h1 {
font-size: 2.0em;
}


.LV_validation_message{
	display: block;
	float: left;
    font-weight:bold;
    margin:5px 0 0 5px;
}

.LV_valid {
    color: #085845;
}
	
.LV_invalid {
    color:#cb0077;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
    border: 1px solid #38353d;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
    border: 1px solid #cb0077;
}