/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 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/dayo-mosaic-bg.jpg);
background-repeat: repeat;
background-attachment: fixed;

}

/* >>>>> Deko Container */

#bg-wrapper-dummy { /* soll oben schon am das grosse bild laden (target up already that word picture charged) */
overflow: hidden;
width: 0;
height: 0px;
visibility:hidden;	
}


#bg-wrapper {
position: fixed;
z-index: 50;
top: 0;
left: 0;
margin: 0 auto;
text-align: center;
overflow: hidden;
width: 100%;
}

#footer {
position: fixed;
z-index: 30;
bottom: 0;
left: 0;
margin: 0 auto;
text-align: center;
overflow: hidden;
width: 100%;	
}

#footer-beam {
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;
}



/* >>>>> Navigation */

div.nav-beam dl {
float: right;
margin: 10px 10px 0px 0px;
height:47px;
}

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

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

div.nav-beam dl dd a {
display: block;
float: right;
height: 26px;
margin: 0px 0px 0px 0px;
background-image: url(../images/nav_img.png);
background-repeat: no-repeat;
font-size: 1px;
text-indent: -9999px;
}

div.nav-beam dl dd a.nav-video { width:45px; background-position: 0px 0px; }
div.nav-beam dl dd a.nav-video:hover { width:45px; background-position: 0px -26px; }
div.nav-beam dl dd a.nav-video-active { width:45px; background-position: 0px -26px; cursor: default }

div.nav-beam dl dd a.nav-logo { width:53px; background-position: -44px 0px; }

div.nav-beam dl dd a.nav-about { width:119px; background-position: -97px 0px;}
div.nav-beam dl dd a.nav-about:hover { width:119px; background-position: -97px -26px; }
div.nav-beam dl dd a.nav-about-active { width:119px; background-position: -97px -26px; cursor: default }

div.nav-beam dl dd a.nav-networks { width:127px; background-position: -264px 0px;}
div.nav-beam dl dd a.nav-networks:hover { width:127px; background-position: -264px -26px; }
div.nav-beam dl dd a.nav-networks-active { width:127px; background-position: -264px -26px; cursor: default }



/* >>>>> Layout */

#wrapper {
position: relative;
background-image: url(../images/black-trans-bg-repeat-y.png);
background-position: center top;
background-repeat: repeat-y;
z-index: 90;
margin: 0 auto;
width: 906px;
height: auto;
padding-bottom: 500px;
}

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

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

a.anchor {
display: block;
height: 10px;
width: 50px;
}

div.nav-beam {
height: 47px;
width: 906px;
background: url(../images/bg_nav_bar.png) 0 0 no-repeat;
}

div.nav-beam h2 {
font-size: 1px;
text-indent: -9999px;
height: 36px;
width: 250px;
float: left;
background: url(../images/dayo-icon.png) 10px 10px no-repeat;
}



/* Wrapper Two */

.wrapper-two {
	width: 906px;
	clear:both;
	margin-left:0px;
} 

.wrapper-two .links {
float: left;
width: 490px;
margin: 10px 0px 0px 10px;
position:relative;
} 

.wrapper-two .links .body,
.wrapper-two .center .body,
.wrapper-two .right .body {
margin:10px 0 10px 10px;
padding: 0px;
} 

.wrapper-two p, {
margin: 15px 0px 0px 5px;
position:relative;
}

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

.wrapper-two h3.video { background-image: url(../images/video_dayo.gif); height:26px; width:906px; }
.wrapper-two h3.video-small { background-image: url(../images/video_day_small.gif); height:26px; }
.wrapper-two h3.about { background-image: url(../images/about_dayo.gif); height:26px; }
.wrapper-two h3.blog { background-image: url(../images/blog_dayo.gif); height:26px; }
.wrapper-two h3.twitter { background-image: url(../images/twitter_dayo.png); height:26px; }
.wrapper-two h3.youtube { background-image: url(../images/youtube_dayo.png); height:26px; background-position:center; }
.wrapper-two h3.contact { background-image: url(../images/contact_dayo.png); height:26px; }

.wrapper-two 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-two h4.first {
margin-top: 0px;
}



/* Video */

.wrapper-two .videoLinks {
float: left;
width: 901px;
} 

#flashcontent {
	width:886px;
	margin:10px 10px 0 10px;
}


/* About */

.wrapper-two .aboutLinks {
float: left;
width: 430px;
margin: 10px 0px 0px 0px;
}

.wrapper-two .aboutBody {
float: right;
width: 371px;
height:197px;
margin: 10px 0px 0px 8px;
padding: 15px 20px 10px 20px;
background:url(../images/gray_bg.gif);
font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px;
}


/* Blog */

.wrapper-two .blogDayo {
float: right;
width: 430px;
margin: 0px 0px 0px 10px;
}

.wrapper-two .blogBody {
float: right;
width: 381px;
height:197px;
margin: 10px 10px 0px 0px;
padding:15px 20px 10px 20px;
background:url(../images/gray_bg.gif);
font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px;
}

.wrapper-two .readBlog {
float: right;
width: 200px;
height:16px;
margin-top:30px;
background:url(../images/read-more-blog.png) no-repeat;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px;
}


/* Twitter */


.wrapper-two .twitterBody {
float: left;
width: 252px;
height:140px;
margin: 10px 0px 0px 8px;
padding: 0px 0px 10px 10px;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px;
}

.wrapper-two .twitterLinks {
float: left;
width: 290px;
margin: 10px 0px 0px 0px;
}

p#twitters {
width: 250px;
margin:0px;
padding-left:18px;
background: url(../images/twitter-quote.png) 0 0 no-repeat;
}

p. {
position: relative;
top: 10px;
font-style:italic;
width:250px;
}

p#twitters span.tweetloader {
display: block;
margin: 0;
text-align: left;
font-style: italic;
}

p#twitters span.tweetloader img {
position: relative;
margin-left: 5px;
top: 4px;
}

.link-bottom-twitter {
	width:150;
	margin-left:18px;
}


/* YouTube */

.wrapper-two .youtubeLinks {
float: left;
width: 287px;
margin: 0px 0px 0px 15px;
} 

.wrapper-two .youtubeBody {
float: left;
width: 274px;
height:140px;
margin: 10px 5px 0px 10px;
padding: 0px 0px 10px 5px;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px;
}

p. {
position: relative;
top: 12px;
font-weight: italic;
width: 100px;
background: url(../images/flickr_bg.gif) right center no-repeat;
}

p.link-bottom-youtube {
	width:150;
	margin-left:5px;
}

/* Contact */

.wrapper-two .contactLinks {
float: right;
width: 300px;
margin: 0px 0px 0px 10px;
}

.wrapper-two .contactBody {
float: right;
width: 262px;
height:140px;
margin: 10px 20px 0px 8px;
padding: 0px 0px 10px 10px;
font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height:16px; text-align:right;
}




/* >>>>> Typography */

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.blue,
p#twitters a {
color: #0e9273;
text-decoration: none; 
}
p a.blue: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;
}



/* 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;
}



/* Contact */

#log_res p {
color: #085845;
}

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

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

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

.form select {
padding: 0;
}

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

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