html, body {
	width:100%;
	margin:0px;
	padding:0px;
}

body {
	background-color: #222222;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color:#fff;
}

a {
	color:#fff;
}

a:hover {
	color:#f00;
}

/*----------------------------*/

.invisible, .mask { 
	display:none;
}

#header  {
	width:100%;
	background:url(../files/gui/header_bg.png) repeat-x;
	border-bottom:1px solid #444;
	height: 65px;
	position:fixed;
	top:0px;
	z-index: 20;
}

#header .inside {
	width:1100px;
	margin-left:auto;
	margin-right:auto;
	position:relative;
}

#logo {
	position:absolute;
	left:0px;
	top:20px;
}

#logo  img {
	border:none;
}

#header_links {
	text-transform: uppercase;
	position:absolute;
	right:0px;
	top:26px;
	text-align:right;
}

#header_links  li{
	display:inline;
	padding-left:5px;
	margin-left:5px;
	border-left:1px solid #444;
	font-size:10px
	
}

 #header_links  li.first {
	border:none;
}


#header_links  a{
	text-decoration:none;
}

ul , li{
	list-style:none;
	margin:0px;
	padding:0px;
}


/*----------------------------*/



/*
#ibm-universal-nav-dw {
    background: -moz-linear-gradient(center top , #595C64, #1B1B1C) repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 52px;
    overflow: hidden;
    width: 100%;
}
*/

#container {
	width:1100px;
	margin-left:auto;
	margin-right:auto;
}

ul , li{
	list-style:none;
	margin:0px;
	padding:0px;
}

figure {
	margin:0px;
	padding:0px;
	margin-bottom:10px;
}

img {
	border: #313131 5px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.copyright {
	
	font-size:10px;
	margin-bottom:20px;
	text-align:center;
	width:100%;
}

#main {
	float:right;
	margin-top:55px;
	max-width:900px;
	float:left;
}

#main h1 {
	font-weight:300;
	text-transform:uppercase;
}

#left {
	display:block;
	padding-top: 142px;
	width:200px;
	float:left;
}


#left div.inside {
	width:170px;
}

#untermenu span.active {
	text-transform:uppercase;
}

#untermenu  li{
	height:26px;
	border-top:1px solid #444;
	padding-top:7px;
	padding-left:7px;
	background:#222222;

	-webkit-transition: background .4s, padding .4s;
	-moz-transition: background.4s, padding.4s;
	-o-transition: background .4s, padding .4s;
	-ms-transition: background .4s, padding .4s;
	transition: background .4s, padding .4s;
}


#untermenu li.active {
	background:#444;
}

#untermenu li:hover {
	background:#444;
	padding-left:10px;
}


#untermenu a {
	text-decoration:none;
	text-transform:uppercase;
}

#untermenu a:hover {
	color:#fff;
} 

#untermenu a , #untermenu span {
	font-size:13px;	
}



#untermenu  li.last{
	
}

#untermenu  li.first{
	font-weight:600;
	border-top:none;
}




.keybox_top {
	background:#313131;
	width:100%;
	height:2px;
}

span.key {
	background:#313131;
	-webkit-border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	padding: 3px 10px 3px 10px;
	font-size: 9px;
    text-align: center;
    text-transform: uppercase;
}

.keybox {
	margin-bottom: 15px;
	line-height:0px;
	padding-top:6px;
}

.menu_element {
	display:block;
	width:100%;
}

.clear {clear:both}

.menu_button { 
	display:none;
	position:relative;
	height:30px;
	border-radius:5px;
	background: rgba(49,49,49,0.5);
}

.menu_button:hover {
	background: rgba(49,49,49,1.0);
}	

.menu_button:before, .menu_button:after {
	font-family: "symbol";
}

.menu_button.closed:before  {
	content: '\e805';
	position:absolute;
	left:0px;
	margin-left: 6px;
    margin-top: 5px;
}

.menu_button.open:before  {
	content: '\e806';
	position:absolute;
	left:0px;
	margin-left: 6px;
    margin-top: 5px;
}	

 .menu_button:after {
	content: '\e809';
	position:absolute;
	right:0px;
	margin-right: 7px;
    top: 6px;
}



#footer {
	width:1100px;
	margin-left:auto;
	margin-right:auto;	
}


@media only screen and (max-width: 1100px) {
	#container, #footer {width:94%; margin-left:3%; margin-right:3%;}
	#main {width:77%; margin-left:3%; }
	#left  {width:20%;}
	.image_container img { width:100% !important; height:auto !important;}
	
	#header .inside {width:94%; margin-left:3%; margin-right:3%;}
	.copyright {width:100%}
	
	#left div.inside {width:100%}
	
	
	

}	

@media only screen and (max-width: 880px) {
	
	.menu_content.closed {
		display:none;
	}	
	
	h1 {text-align:center;}
	.menu_button {     
		display: block;
		width: 100%;

		text-align: center; 
		cursor:pointer;
	}
	
	#main , #left  {width:94%; margin-left:3%; margin-right:3%; float:none;}
	#main {margin-top: 12px;}
	#left {padding-top: 85px;}    
	#untermenu li { 
		float:left; 
		border-top:none; 
		border-left:1px solid #444;
		width:24%;
		text-align:center;
		padding-left:0px;
	}
	#untermenu li.viertel_0 { border:none;}
	#untermenu li:hover {padding-left:0px;}
	.keybox { text-align:center;}
}

@media only screen and (max-width: 700px) {
	#untermenu li { width:33%;}
	#untermenu li.viertel_0 { border-left:1px solid #444;}
	#untermenu li.drittel_0 { border:none;}
}

@media only screen and (max-width: 480px) {
	#untermenu li { width:49%;}
	#untermenu li.drittel_0, #untermenu li.halbe_1 { border-left:1px solid #444;}
	#untermenu li.halbe_0 { border:none;}
}