body {
	background-color: black;	
	margin: 0;
	padding: 0;
}

* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #4a4a4a;
}

a {
	text-decoration: none;
}

a.active, a:hover {
	color: #888;
}

img {
	border: none;
}

.hidden {
	display: none;
}

.left-button, .right-button {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
}

.left-button span, .right-button span {
	display: none;
}

.left-button {
	background-image: url('../img/layout/arrow2_left.gif');
}

.right-button {
	background-image: url('../img/layout/arrow2_right.gif');
}

#index-links {
	margin: auto;
}

.index-link, .index-link-active {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-repeat: no-repeat;
	margin-right: 3px;
}

.index-link {
	background-image: url('../img/layout/index_link_inactive.gif');
}

.index-link-active {
	background-image: url('../img/layout/index_link_active.gif');
}

.index-link span, .index-link-active span {
	display: none;
}

/*  
    root element for the scrollable.  
    when scrolling occurs this element stays still.  
*/ 
div.scrollable { 
    /* required settings */ 
    position:relative; 
    overflow:hidden;          
    width: 300px;
    height: 20px;
} 
 
/*  
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items {     
    /* this cannot be too large */ 
    width:20000em;     
    position:absolute; 
	clear:both;
} 
 
/*  
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left;	
} 
 
/* you may want to setup some decorations to active item */ 
div.items div.active a {
	color: #888;
}

#contact {
	text-align: left;
}

#container {
	position: absolute;
	
	height: 480px;
	width: 1100px;
	
	top: 50%;
	left: 50%;
	
	padding: 0;
	margin: 0;
	
	margin-top: -240px;
	margin-left: -600px;
}

#main {
	z-index: 2;
	position: absolute;
	
	left: 50%;
	
	height: 480px;
	width: 450px;
	
	margin-left: -225px;
}

/* Vertical alignment with CSS is a pain in the ass. Vivan los tables! (Sarcasm alert!) */

#main table {
	width: 450px;
	height: 480px;
}

#main table td {
	vertical-align: middle;
	text-align: center;
}

#main table, #main table tr, #main table td {
	margin: 0;
	padding: 0;
}

.nieder {
	height: 28px;
	margin-top: -15px;
}

.quadrat {
	height: 200px;
	margin-top: -100px;
}

#text {
	position: absolute;
	
	top: 0;
	left: 50%;
	width: 300px;
	
	margin-left: -150px;

	font-size: 11px;
	line-height: 130%;
}

.text p {
	padding: 0;
	margin: 0;
}

.justified {
	text-align: justify;
}

#content {
	/* Hide content, since fancybox shows the content now. */
	display: none;
	
	text-align: center;
	margin: auto;
	margin-left: -4px;
}

#content a {
	padding: 0;
	margin: 0;
}

#content img {
	border: none;
}

#description {
	display: none;
}

.text {
	padding-top: 10px;
	font-size: 12px;
	line-height: 140%;
	text-align: left;
}

.description {
	padding-top: 10px;
	font-size: 12px;
	line-height: 140%;
	text-align: justify;
}

#left-button {
	position: absolute;
	/*right: 14px;*/
	right: -45px;
	top: 2px;
	text-align: right;
	width: 20px;
	z-index: 500;
	
	display: none;
}

#right-button {
	position: absolute;
	/*left: 14px;*/
	left: -45px;
	top: 2px;
	width: 20px;
	z-index: 500;
	
	display: none;
}

#mainnav a, #subnav a {
	font-weight: bold;
}

#mainnav {
	position: absolute;
	
	top: 50%;
	left: 0;
	width: 300px;
	height: 20px;
	
	margin-top: -10px;
	padding-right: 45px;
}

#mainnav .buttons {
	position: absolute;
	top: 2px;
	right: -3px;
	text-align: right;
}

#mainnav .buttons .left-button {
	position: absolute;
	left: -345px;
}

#mainnav .buttons .right-button {
	position: absolute;
	left: -5px;
}

#mainnav li {
	padding-right: 5px;
}

#mainnav .scrollable div {
	padding-left: 6px;
}

#subnav {
	position: absolute;
	
	top: 50%;
	left: 850px;
	width: 300px;
	height: 20px;
	
	margin-top: -10px;
	padding-left: 45px;
}

#subnav > div {
}

#subnav .buttons {
	position: absolute;
	left: -3px;
	top: 2px;
}

#subnav .buttons .left-button {
	position: absolute;
	left: 18px;
}

#subnav .buttons .right-button {
	position: absolute;
	left: 362px;
}

#subnav li {
	padding-left: 5px;
}

#subnav .scrollable div {
	padding-right: 6px;
}

#mainnav .items {
	right: 0;
}

#mainnav .items div {
	float: right;
}

.buttons {
	width: 32px;
	height: 14px;
}

.buttons a span {
	display: none;
}

.buttons img {
	margin: 0;
	padding: 0;
}

#subnav .buttons a {
	margin-right: 2px;
}

#mainnav .buttons a {
	margin-left: 2px;
}

.nav {
	height: 50px;
}

.nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.nav li {
	display: inline;
	font-weight: bold;
}


.outer {
	display: table;
	height: 430px;
	/*
	#position: relative;
	*/
	overflow: hidden;
}

.middle {
	/*
	#position: absolute;
	#top: 50%;
	*/
	display: table-cell;
	vertical-align: middle;
}

.inner {
	position: relative;
	/*
	#top: -50%;
	*/
}


#start {
	position: absolute;
	
	width: 400px;
	height: 50px;
	text-align: center;
	
	left: 50%;
	top: 50%;
	
	margin-left: -200px;
	margin-top: -25px;
	
	text-align: center;
}

/*
#start h1, #content h1 {
	font-size: 100%;
	margin: 0;
	padding: 0;
}*/

#start a {
	font-size: 100%;
	font-weight: bold;
}

.scrollable-text {
	height: 430px;
	width: 350px;
}