﻿/*
@font-face {
    font-family: 'KabelBkBTBook';
    src: url('./../media/KABELN.eot');
    src: local('☺'),
    url('./../media/KABELN.woff') format('woff'),
    url('./../media/KABELN.ttf') format('truetype'),
    url('./../media/KABELN.svg') format('svg');
}*/

html, body {
    color:                          #ffffff;
    background-color:               #000000;
    font-size:                      14px;
    margin:                         0 0 0 0;
    padding:                        0 0 0 0;
    text-align:                     left;
}

body { 
    margin:                         0;
    padding:                        0;
}

img { border: 0; }


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

#content {
	
}

#impressum {
	position: absolute;
	top:195px;
	left: 750px;
	font-family: Verdana;
	font-size: 10px;
	color:gray;
}

#impressum a {
	text-decoration: none;
	color: gray;
}

/* MENU */

#footer {
	position:                       absolute;
	top:                            375px;
	background-image:               url('./../images/menu_bg.png');
	width:                          957px;
	height:                         219px;
	z-index: 500;
}

#menu {
	padding:                        137px 157px;
}

#menu ul {
    list-style:                     none;
    margin:                         0;
    padding:                        0;
}

#menu ul li{
    float:                          left;
    margin:                         0 10px 0 0;
}

#menu ul a{

}

#menu ul a:hover{
    color:                          #fff
}

#menu .activ {
    color:                          #fff;
}

.btn1 {
	position: absolute;
	margin-left: 750px;
}
.btn2 {
	position: absolute;
	margin-left: 810px;
}

.btn3 {
    position: absolute;
    margin-left: 800px;
    margin-top: 175px;
}

.btn4 {
	position: absolute;
	margin-left: 678px;
	margin-top: 160px;
}

.btn5 {
	position: absolute;
	margin-left: 814px;
	margin-top: 163px;
}
.btnkiez {
	position: absolute;
	margin-left: 793px;
	margin-top: 380px;
	z-index: 2;
}

#bio {
	position: absolute;
	margin-left: 200px;
	margin-top: 325px;
	z-index: 100;
}

#newsbtn {
	position:						absolute;
	top:							10px;
	left:							665px;
	height:							120px;
	width:							200px;
	z-index:						5;
}

#farce {
	position:						absolute;
	top:							71px;
    left:							680px;
    height:							80px;
    width:							81px;
}

#news {
	position:						absolute;
	top:							52px;
	left:							689px;
	width:							133px;
	height:							74px;
	overflow:						auto;
	color: 							black;
	font-family:					"Verdana";
	font-size:						12px;
	z-index: 						4;
	text-align:						center;
}

#clip-video, #clip-audio {
	position:						absolute;
	top:							73px;
	left:							269px;
}

#clip-menu {
	position:						absolute;
	left:							225px;
	top:							322px;
	z-index:						200;
}

#audio-menu {
	position: absolute;
	top:80px;
	left:727px;
	width:165px;
	transform:rotate(2deg);
	-ms-transform:rotate(2deg); /* IE 9 */
	-moz-transform:rotate(2deg); /* Firefox */
	-webkit-transform:rotate(2deg); /* Safari and Chrome */
	-o-transform:rotate(2deg); /* Opera */
	font-family: "Verdana";
	font-size: 11px;
}

#audio-menu ul {
	list-style-image:url('../images/speaker.jpg');
}

#audio-menu li {
	margin-top: 5px;
}

#audio-menu a {
	text-decoration: none;
	color: #fff;
}

#contact-content {
	color: white;
	text-align: center;
	position: absolute;
	top:0;
	padding: 115px 0 0 240px;
	font-family: "Verdana";
	font-size: 12px;
}

#impressum-content {
	color: white;
	text-align: center;
	position: absolute;
	top:0;
	padding: 115px 0 0 255px;
	font-family: "Verdana";
	font-size: 12px;
}

#plan-content {
	color:#302927;
	font-family: "Verdana";
	font-size: 12px;
	position: absolute;
	top:10px;
	left: 180px;
	width: 310px;
	height: 410px;
	padding-right: 35px;
	transform:rotate(1deg);
	-ms-transform:rotate(1deg); /* IE 9 */
	-moz-transform:rotate(1deg); /* Firefox */
	-webkit-transform:rotate(1deg); /* Safari and Chrome */
	-o-transform:rotate(1deg); /* Opera */
	overflow-y: auto;
}

#news-content {
	color:#ffffff;
	font-family: "Verdana";
	font-size: 12px;
	position: absolute;
	top:130px;
	left: 310px;
	width: 270px;
	height: 308px;
	padding-right: 35px;
	transform:rotate(-3deg);
	-ms-transform:rotate(-3deg); /* IE 9 */
	-moz-transform:rotate(-3deg); /* Firefox */
	-webkit-transform:rotate(-3deg); /* Safari and Chrome */
	-o-transform:rotate(-3deg); /* Opera */
	overflow-y: auto;
	z-index: 900;
}

#news-content a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
}

#pics-thumbs {
	position: absolute;
	top:220px;
	left:200px;
	z-index: 600;
}

#pics-thumbs img {
	border: 0;
}

#pic-q {
	position: absolute;
	top:40px;
	left:273px;
	z-index: 98;
}

#pic-h {
	position: absolute;
	top:105px;
	left:580px;
	z-index: 99;
}

#work-content {
	position: absolute;
	top:60px;
	left:285px;
	width: 490px;
	height: 330px;
	background-image: url('./../images/ref1.png');
	background-position: left;
	background-repeat: no-repeat;
}

#work-text1, #work-text2, #work-text3, #work-text4, #work-text5, #work-text6 {
	width: 280px;
	height: 320px;
	margin-left:220px;
	overflow-y: auto;
	color:#302927;
	font-family: "Verdana";
	font-size: 12px;
	padding-right:10px;
}

#work-text2, #work-text3, #work-text4, #work-text5, #work-text6 {
	display: none;
}

#work-menu {
	position: absolute;
	top:60px;
	left:160px;
}

.work1 {
	margin-left:30px;
}
.work2 {
	margin-top:5px;
	margin-left:0px;
}
.work3 {
	margin-top:4px;
	transform:rotate(4deg);
	-ms-transform:rotate(4deg); /* IE 9 */
	-moz-transform:rotate(4deg); /* Firefox */
	-webkit-transform:rotate(4deg); /* Safari and Chrome */
	-o-transform:rotate(4deg); /* Opera */
}

.work4 {
	margin-top:0px;
	margin-left:0px;
}

.work5 {
	margin-top:2px;
	margin-left:0px;
	transform:rotate(-8deg);
	-ms-transform:rotate(-8deg); /* IE 9 */
	-moz-transform:rotate(-8deg); /* Firefox */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	-o-transform:rotate(-8deg); /* Opera */
}

.work6 {
	margin-top:12px;
	margin-left:0px;
	transform:rotate(-8deg);
	-ms-transform:rotate(-8deg); /* IE 9 */
	-moz-transform:rotate(-8deg); /* Firefox */
	-webkit-transform:rotate(-8deg); /* Safari and Chrome */
	-o-transform:rotate(-8deg); /* Opera */
}

/* SCROLL */
.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
	z-index: 1000;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	width: 3px;
	background: black;
	position: relative;
}

.jspDrag
{
	background: #4874d1;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}