/* Reset-CSS */
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 {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
    font-family: Verdana, sans-serif;
    font-size:13px;
	line-height:16px;
    color:#fff;
}

html, body {height:100%; width:auto;}

body {
    line-height: 1;
	background: #000 url(imgs/bg_03.jpg) 0 0 repeat-x;
}
ol,ul { list-style: none; }

blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

h2 { margin-bottom:10px;}



/* layout elements */
#background {
	position:absolute;
	background:url(imgs/bg_01.jpg) 0 0 no-repeat;
	height:800px;/* = Bildhöhe */
	width:3068px;
}


.hidden {display:none;}

#mailto {
	position:absolute;
	left:304px;
	top:218px;
}

#what {
	position:absolute;
	left:520px;
	top:110px;
	width:316px;
}

#references {
	position:absolute;
	left:918px;
	top:90px;
	white-space:nowrap;
}

#vision, #concept, #text, #design, #motion, #development {
	position:absolute;
	width:270px;
	height:191px;
}

#vision {
	background:url(imgs/vision_01.jpg);
	left:38px;
	top:311px;
}
#concept {
	background:url(imgs/konzept_01.jpg);
	left:328px;
	top:311px;
}
#text{
	background:url(imgs/text_01.png);
	left:618px;
	top:311px;
}
#design {
	background:url(imgs/design_01.jpg);
	left:38px;
	top:523px;
}
#motion {
	background:url(imgs/motion_01.jpg);
	left:328px;
	top:523px;
}
#development {
	background:url(imgs/entwicklung_01.jpg);
	left:618px;
	top:523px;
}

.sample {
	position:absolute;
	top:310px;
	padding-right:60px;
}
.sample_text {
	width:290px;
	padding-top:20px;
}

#footer {
	position:absolute;
	left:90px;
	top:730px;
}

#impressum {
	position:absolute;
	left:38px;
	top:800px;
	width: 821px;
	height: 403px;
}


#impressum p {
	color:#999;
}


#leftImpressum {
	float:left;
	width: 386px;
	padding:60px 0 0 30px;
}

#rightDisclaimer {
	float:left;
	width:384px;
	padding:60px 20px 0 0;
}
	


/* Coda Tooltip */
.bubbleInfo {
	position: relative;
}


/* IE Hack */
* html .popup {width:270px;}

.popup {
	position: absolute;
	max-width:270px;
	min-width:10px;
	height:191px;
	margin-top:99px;
	margin-left:32px;
	display: none;
}

.popup p {
	width:auto;
	margin:5px 5px 0 5px;
	padding:16px;
	font-size: 12px;
	background-color:#000;
	color:#FFF;
}

.bubbleTail {
	width:30px;
	height:19px;
	margin-left:20px;
	background:url(imgs/a_black_bubble-tail2.png) 0 0 no-repeat;
}


/* Modalbox */
#modalOverlay {position:absolute;  z-index:200;  background-color:#000; display:none; top:0; left:0; }
#modalWindow {position:absolute; background-color:#ffffff; display:none; z-index:210; padding:30px;}
#modalWindow p {color:#444;}
.modalCloseButton {position:absolute; width: 10px; height:10px; top:10px; right:30px; background:url(imgs/modalClose.gif) no-repeat 0 0; cursor:pointer;}
#modalImg {position:relative;}
#modalText {display:none; margin-top:20px;}
#modalToLeft {position:absolute; width:40px; height:40px; top:0; left:10px; background:url(imgs/modalLeft.png) no-repeat 0 0 ;  cursor:pointer; z-index:240; display:none;}
#modalToRight {position:absolute; width:40px; height:40px; top:0; right:10px; background:url(imgs/modalRight.png) no-repeat 0 0;  cursor:pointer; z-index:240; display:none;}