html {
 	height: 100%;	
}

body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-size: 100%;
}

#all {
	height: 100%;	
}

#background {
	height: 100%;
	width: 100%;
	background-size: 100%;background-origin: content;
}

.homepage {background-image: url(../images/bg-homepage.jpg)}

.web-design {background-image: url(../images/bg-web-design.jpg)}

.impressum {background-image: url(../images/bg-impressum.jpg)}

.programmierung {background-image: url(../images/bg-programmierung.jpg)}

.support {background-image: url(../images/bg-support.jpg)}

.it-consulting {background-image: url(../images/bg-it-consulting.jpg)}

.datenbanken {background-image: url(../images/bg-datenbanken.jpg)}

.kontakt {background-image: url(../images/bg-kontakt.jpg)}

.error {background-image: url(../images/bg-error.jpg)}


#footer {
	position: fixed; 
	width: 100%;
	height: 100px;
	bottom: 50px;
	z-index: 2;
}

#footer_col1 {
	height:100%;
	width: 200px;
	background-color:black;
	opacity:0.9;
	float:left;
	border-right: 1px solid white;
	z-index: 2;
	color:white;
}

#footer_col2 {
	height:100%;	
	opacity:0.7;
	margin-left: 200px;
	background-color:black;
	z-index: 2;
	
}

#menu_left_spinner {
	margin-top:20px;
	height:22px;
	width: 200px;
	color: white;
}

#menu_left h1 {
	font-size: 1.2em;
	font-weight: normal;
	text-align: right;
} 

#menu_left h1 a{
	display: block;
	text-decoration:none;
	color:white;
}

#menu_left h1 a:hover{
	background:#000;
	background-image: url(../images/go.gif); 
	background-size: 100% Auto;
}


#menu_main {
	overflow: hidden;
	zoom: 1;
	position:absolute; 
	top: 50%;
	margin-top: -35px;
	display: table-cell;
    vertical-align: middle 
}


#menu_main ul {
	margin: 0px;
	left: 20px;
	font-size: 0.8em;
	width: 350px;
}

#menu_main li {
    list-style: none outside none;
	float: left;
	width: 150px;
}

#menu_main a:link {color:white; text-decoration:none}
#menu_main a:visited {color:white; text-decoration:none}
#menu_main a:active {color:white; text-decoration:none}
#menu_main a:hover {color:white; text-decoration:underline}


#content_wrapper {
	position: fixed;
	top: 20%;
	right:20%;	
	width: 620px;
	min-height:400px;
}

#content {
	background: url("../images/bg-content.png") repeat scroll left top transparent;
	z-index: 1;
	color:white;
	padding: 10px;
	margin-left:9px;
	margin-right:9px;
}

#content-box-top, #content-box-bottom {
    background: url("../images/box-corners.gif") no-repeat scroll 0 0 transparent;
    clear: both;
    height: 9px;
    width: 620px;
}

#content-box-bottom {
	background-position: left bottom;
    margin-bottom: 20px;	
}

.preloading {
	width:0px; 
	height:0px;
	display:none;
}

/* Smartphone */
@media only screen and (min-width : 320px) and (max-width: 480px) {
	#content-box-top, #content-box-bottom { display: none;}
	#content_wrapper { top: 0px;right: 0px; width:320px;}
	#content {margin:0;font-size:70%;}
	#footer_col1{display: none;}
	#footer_col2{margin-left: 0px;}
}

@media only screen and (min-width : 320px) and (max-width: 480px) and (orientation : portrait){
	#content_wrapper {width:320px;}	
}

@media only screen and (min-width : 320px) and (max-width: 480px) and (orientation : landscape){
	#content_wrapper { width:480px;}
	#footer {bottom: 0px; height: 75px;}
}

/* Small Tablet*/
@media only screen and (min-width : 600px) and (max-width: 800px) {
	#content_wrapper { top: 5%;right: 5%; }
}

@media only screen and (min-width : 600px) and (max-width: 750px) and (orientation : portrait) {
		#content_wrapper { width: 550px;}
		#content-box-top, #content-box-bottom {display: none;}
}

@media only screen and (min-width : 600px) and (max-width: 800px) and (orientation : landscape) {
		
}