@import 'fonts.css';

html, body {
	font-size: 16px; 
	line-height:26px; 
	color: #9A9A9A;
	padding: 0;
    margin: 0;
	background-color: #fff;
	font-weight: 400;	
	font-family: 'Merriweather', serif;	
	height: 100%;
	}
	
	body {
		background: url(../gfx/background_body.jpg) no-repeat center center; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	
	a {
		color: #9A9A9A;
		text-decoration: none;
	}
	
		
			#content {
				padding: 5%;
			}
			
			#datenschutz {
				padding-top: 75px;
				padding-bottom: 75px;
			}
					
		#header-wrapper {
			width: 100%;
			min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */
			height: auto !important; /* important Behel (bei modernen Browsern */
			height: 100%; /* IE soll wie gewünscht interpretieren */
			overflow: hidden !important; /* Firefox Scrollleiste */
			top: 100%;
		}
		
		#datenschutz-wrapper {
			width: 100%;
			min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */
			height: auto !important; /* important Behel (bei modernen Browsern */
			height: 100%; /* IE soll wie gewünscht interpretieren */
			overflow: hidden !important; /* Firefox Scrollleiste */
			top: 100%;
			background: #fff;
			color: #6E6E6E;
		}
				
		#header-wrapper address {
			font-style: normal;
		}
		
		#content a {
			color: #9A9A9A;
			opacity: 1.0;
			text-decoration: none;
			-webkit-transition: all 0.2s ease-out, all 0.3s ease-in !important;
			-moz-transition: all 0.2s ease-out, all 0.3s ease-in !important;
			 -o-transition: all 0.2s ease-out, all 0.3s ease-in !important;
			transition: all 0.2s ease-out, all 0.3s ease-in !important;
		}
		
		#content a[href*="mailto:"] {
			border: 1px solid #9A9A9A;
			padding: 6px;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;
			}
					
		
		#content a:hover, #datenschutza:hover {
			color: #fff;
			border-color: #fff;
			opacity: 1.0;			
		}
		
	h1 {
		font-family: 'Merriweather', serif;
		font-size: 38px;
		margin-bottom: 0px;
		padding-bottom: 22px;
	}
	
	h1 small {
		font-family: 'Lato', sans-serif;
		text-transform: uppercase;
   		letter-spacing: 1px;
		display: block;
		margin-top: 10px;
		font-weight: lighter;
		font-size: 16px;
	    padding-top: 5px;
	}
	
	
	h2 {
	    text-transform: uppercase;
		color: #E65014;
		font-size: 24px;
		margin: 0px;
		margin-top: 4px;
		padding: 0px;
		display: inline-block;
	    font-family: 'Lato', sans-serif;
	}
	
	h3 {
	    text-transform: uppercase;
		font-size: 20px;
		font-weight: lighter;
		margin: 0px;
		margin-top: 4px;
		padding: 0px;
		font-family: 'Lato', sans-serif;
	}
				
			.grid-960 {
				width: 1200px;
				overflow: auto;
				padding: 0px;
				margin: 0 auto;
				z-index: 50;
				clear: both;
			}			
			
		#nav a {
		    border: solid 1px #DCDCDC;
			display: inline-block;
			color: #fff;
			-webkit-border-radius: 2px;
			-moz-border-radius: 2px;
			border-radius: 2px;
			padding: 4px 12px 4px 10px;
			font-size: 14px;
			text-transform: uppercase;
			margin-left: 15px;
			font-family: 'Lato', sans-serif;
			-webkit-transition: all 0.2s ease-out, all 0.2s ease-in;
			-moz-transition: all 0.2s ease-out, all 0.2s ease-in;
			-o-transition: all 0.2s ease-out, all 0.2s ease-in;
   			 transition: all 0.2s ease-out, all 0.2s ease-in;
			 opacity: 0.5;
			 padding-left: 35px;
			 float: right;
			 margin-top: 2px;
		}
		
		#nav a:hover {
		    border: solid 1px #E65014;
			color: #fff;
			background-color: #E65014;
			opacity: 1.0;			
		}	
		
		.login {
			background-image: url(../gfx/login.png); background-position: left top; background-repeat: no-repeat;
			background-position: 10px 50%;
			background-color: #798176;
		}
		
		.webmail {
			background-image: url(../gfx/email.png); background-position: left top; background-repeat: no-repeat;
			background-position: 10px 50%;
			background-color: #798176;
		}	
		
		.xing {
			background-image: url(../gfx/xing.png); background-position: left top; background-repeat: no-repeat;
			background-position: 10px 50%;
			background-color: #798176;
		}		
		
		.back {
			background-image: url(../gfx/back.png); background-position: left top; background-repeat: no-repeat;
			background-position: 10px 50%;
			background-color: #798176;
		}	
		
		#datenschutzbox {
			text-align: right;
			padding-top: 73px;
		}
		
		#datenschutzbox a {
			color: #798176;
			font-family: 'Lato', sans-serif;
			font-size: 12px;
			text-transform: uppercase;
			opacity: 0.4;
			-webkit-transition: all 0.2s ease-out, all 0.2s ease-in;
			-moz-transition: all 0.2s ease-out, all 0.2s ease-in;
			-o-transition: all 0.2s ease-out, all 0.2s ease-in;
   			 transition: all 0.2s ease-out, all 0.2s ease-in;
		}
		
			#datenschutzbox a:hover {
				opacity: 1.0;
			}
/*----------------------------------------------------------------*/
/* Footer
-------------------------------------------------------------- */

#login {
	position: fixed;
    width: 350px;
    top: 50%;
    left: 50%;
    margin-left: -175px;
    margin-top: -150px;
    overflow: visible;
    z-index: 40;
    height: 450px;
    text-align: center;
}		

.center-window {
    bottom: 0px;
    left: 0px;
    background: #fff;
    width: 100%;
	overflow: auto;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-background-clip: border-box;
    -moz-background-clip: border-box;
    background-clip: border-box;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.25);
	font-family: 'Lato', sans-serif;
}

input[type='text'], input[type='password'] {
    background: #f0f0f0 !important;
    border: 1px solid #bababa;
    color: #000;
    height: 37px;
    padding-left: 5%;
	width: 95%;
}

input[type='text']:focus, input[type='password']:focus {
  box-shadow: 0 0 5px rgba(217, 217, 217, 1);
  border: 1px solid rgba(230, 80, 20, 1);
  outline: none;
}

.btn.btn-orange {
	border: solid 1px #E65014;
	color: #fff;
	background-color: #E65014;
	opacity: 1.0;			
	font-size: 14px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 6px 14px 6px 12px;
	text-transform: uppercase;
}
		
.hl_hosting {
			background-image: url(../gfx/login_big.png); background-position: left top; background-repeat: no-repeat;
			background-position: 10px 50%;
			padding-left: 50px;
}

.hl_webmail {
			background-image: url(../gfx/email_big.png); background-position: left top; background-repeat: no-repeat;
			background-position: 10px 50%;
			padding-left: 50px;
}

#login h1 {
	padding: 0px;
	margin-bottom: 25px;
	display: inline-block;
    padding-left: 45px;
	padding-right: 24px;
	color: #fff;
	opacity: 0.5;
}
		
/*----------------------------------------------------------------*/
/* Footer
-------------------------------------------------------------- */
		
	#footer-wrapper {
		background-color: #fff;
		color: #726C63;
		overflow: auto;
	}
	
			#footer {
				padding-top: 25px;
				padding-bottom: 45px;
				background-image: url(../gfx/ground_footer.gif); background-position: left top; background-repeat: repeat-x;
			}
	
			#footer p {
				margin-bottom: 0px;
			}
	
	
	 #footer-wrapper address {
			font-style: normal; 
			color: #6E6E6E; 
			line-height: 27px;
			font-size: 15px;
			font-family: 'Merriweather', serif;
			}
			
      #footer-wrapper address a { 
			color: #6E6E6E; 
			text-decoration: none; 
			-webkit-transition: all 0.2s ease-out, all 0.3s ease-in;
			-moz-transition: all 0.2s ease-out, all 0.3s ease-in;
			 -o-transition: all 0.2s ease-out, all 0.3s ease-in;
			transition: all 0.2s ease-out, all 0.3s ease-in;
			}
			
      #footer-wrapper address a:hover, #footer-wrapper address a:focus { 
			color: #000;
			}		
						
       #footer-wrapper address strong { 
			 display: block;
			 margin-bottom: 10px; 
			 padding-bottom: 10px;
			 border-bottom: 1px solid rgba(155,149,150,.2); 
			 text-transform: uppercase; 
			 letter-spacing: 1px; 
			 color: #E65014;
			 font-family: 'Lato', sans-serif;
			 font-weight: normal;
			 }
			 
       #footer-wrapper address p { 
			float: left;
			width: 383.33px; 
			margin-right: 25px; 
			margin-top: 0px;
			}
			
		#footer-wrapper address p:last-child { 
			margin-right: 0px; 
			}
			
        #footer-wrapper address span { 
			display: inline-block; 
			width: 25%; 			
			}	
		
					
/*----------------------------------------------------------------*/
/* Preloader
-------------------------------------------------------------- */

body {
    overflow: hidden;
}

/* Preloader */

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#585858; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}

#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(../gfx/status.gif); /* path to your loading animation */
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}


/*----------------------------------------------------------------*/
/* Responsive
-------------------------------------------------------------- */

@media screen and (max-width: 1220px) {
	body {
		background: url(../gfx/background_body.jpg) no-repeat right bottom; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		background-position: 93% 50%;
	}
	
	#content {
		text-align: center;		
	}
	
	#footer {
		padding-bottom: 0px;
	}
	
	.grid-960 {
		width: auto;
	}
	
	
	
	#nav {
			display: none;
		}
	
		#nav a {
			margin-left: 10px;
			margin-right: 10px;
		}


	#footer address p {
		width: auto;
		margin-right: 0px;
		float: none;
		display: block;
		margin-left: 20px;
		margin-bottom: 25px;
	}
	
	#footer address span {
		width: auto;
		display: block;
	}
	
	#datenschutz {
		padding: 5%;
	}
	
	#datenschutzbox {
		text-align: left;
		padding: 5%;
	}