﻿/* Allgemeines */
	body { font-family:"Fedra Sans Std", "Myriad Pro", Arial; font-size:16px; background-color:#FFF; text-align:center; margin:0; padding:0; overflow-y: scroll; }
	p {}
	td {}
	a:link { color:#000000; text-decoration:none; }
	a:visited { color:#000000; text-decoration:none; }
	a:hover { color:#525252; text-decoration:none; }
	a:active { text-decoration:none; }
	.master { position:relative; width:95%; max-width:1280px; margin:auto; } 
	.orangertext { color:#E6884C; }
	.fett { font-weight:bold; }
	.headline { font-size:24px; color: #000; }
	.center { text-align:center; }
	.left { text-align:left; }
	.vollebreite { width:100%; }
	.hellblau { background-color:rgb(151, 205, 250);  }
	.uppercase { text-transform: uppercase; }
	.blaueSchrift { color:#4285f5; }
	.weisseSchrift { color: #FFF; }
	.transparenterButton { background-color: transparent;}
	.blauerButton { background-color: #4285f5; color: #FFF; }
/**************/

/* header */
	#header { min-height:50px; }
/**********/

/* main */
	/* #loginContainer { position: relative; width: 80%; min-width:300px; margin: auto; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: #FFF; box-shadow: 1px 1px 20px black; max-width:350px; padding-top:40px; padding-bottom: 40px; padding-left: 5%; padding-right: 5%; border:1px solid rgb(170, 169, 169); border-radius: 20px; color:#4d4c4c; font-size:15px; } */
	#loginContainer { position: absolute; top:25%; left:50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: #FFF; box-shadow: 1px 1px 20px black; max-width:350px; min-width: 300px; padding-top:40px; padding-bottom: 40px; padding-left: 5%; padding-right: 5%; border:1px solid rgb(170, 169, 169); border-radius: 20px; color:#4d4c4c; font-size:15px; }
	@supports (-moz-appearance:none) {
		/* Nur firefox */
		#loginContainer { position: absolute; top:25%; left:50%; transform: translateX(-50%); }
	}
	/* @media screen\0, @media screen\9 { */
		/* Nur IE */
		/* #loginContainer { position: absolute; top:25%; left:50%; transform: translateX(-50%); } */
	/* } */
	#backgroundContainer { position: fixed; left:0; top:0; right: 0; bottom: 0; background-image: url('../design/dschimail_background_1.jpg'); background-repeat:no-repeat; background-size:cover; background-position: center; }
/********/

/* footer */
	#footer { padding-top:20px; padding-bottom:30px; text-align:center; font-size:14px; color:#4d4c4c; }
/**********/

/* postfach */
	#postfachHeader { position: relative; padding-top:20px; padding-bottom: 15px; text-align:left; width:100%; min-width: 370px; height:55px; border-bottom: 2px solid #FFF; }
	.postfachHeaderWhiteBox { display:inline-block; background-color: #FFF; border-radius: 10px; height:50px; padding-left:20px; padding-right:20px; }
	#postfachHeaderSuche { display:inline-block; line-height: 40px; font-size:14px; font-weight: bold; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); }
	#postfachHeaderSucheMobil { display: none; }
	#postfachHeaderLogo { display:inline-block; width:200px; }
	#postfachHeaderDriveLogo { display:inline-block; width:200px; }
	#postfachHeaderDriveText { display: inline-block; border-right: 2px dotted #000; padding-right: 15px; line-height: 40px; font-size:14px; font-weight: bold; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); }

	#postfachContainer { position:relative; width: 100%; margin-top: 15px; }
	#postfachHeadline { position: relative; margin:auto; color:#FFF; margin-top: 15px; }
	#postfachHeadlineMobil { display: none; }
	#postfachContent { position: relative; }
	#postfachMenu { position:absolute; top:0; left:0; width:20%; height:100%; text-align: left; }
	#postfachMenuBackground { position: relative; background-color: rgba(255, 255, 255, 0.5); border-radius: 15px; padding:10px; }
	#postfachMails { position:relative; top:0; margin-top:15px; margin-left:23%; width:77%; padding-bottom: 30px; min-width:350px; min-height:600px; background-color: rgba(255, 255, 255, 0.5); border-radius: 15px; }
	#driveFiles { position:relative; top:0; margin-top:15px; margin-left:23%; width:77%; min-width:350px; min-height:600px; background-color: rgba(255, 255, 255, 0.5); border-radius: 15px; text-align: left; }
	.postfachMenuButton { width:100%; height:35px; border-radius: 10px; border:none; font-weight:bold; font-size: 18px; text-align: left; padding-left: 10%; margin-bottom: 15px; transition-duration:0.4s; cursor: pointer; }
	.postfachMenuButton:hover { background-color:rgb(243, 242, 242); }
	.postfachMenuButton:focus { outline: none; }
	.mailListHeadline {  position:relative; width:100%; height:40px; text-align: left; font-size: 14px; color: #FFF; background-color:#4285f5; border-radius: 10px; margin-bottom: 15px; }
	.mailList { position:relative; width:100%; height:45px; border-bottom: 2px solid #FFF; text-align: left; font-size: 14px; cursor: pointer; }
	.mailList:hover { background-color:rgb(243, 242, 242); }
	.mailListAbsender { position: absolute; width:35%; top:0px; left:45px; padding-top: 10px; }
	.mailListAbsenderMobil { display: none; }
	.mailListBetreff { position: absolute; width:40%; top:0px; margin-left:35%; padding-top: 10px; }
	.mailListDatum { position: absolute; width:25%; top:0px; margin-left:75%; padding-top: 10px; font-style: italic; }
	.mailWhiteBox { background-color: #FFF; padding:15px; border-radius: 20px; }
	.mailPreview { position:relative; display:none; width:94%; margin-bottom: 15px; min-height:300px; text-align: left; padding:3%; padding-top:1%; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; background-color:rgba(243, 242, 242, 0.5); }
	
	#driveLinkBanner { margin-top:50px; width:100%; font-size:20px; min-height:40px; background-color:#eb4236; border-radius: 15px; color:#FFF; padding-top:15px; text-align: center; }
	#driveLink { width:100%; border-radius:15px; background-color: #FFF; cursor: pointer; text-align: center; font-weight: bold; font-size: 20px;}
	
	#mailLinkBanner { display: inline-block; line-height: 44px; width:40%; font-size:18px; height:45px; background-color:#eb4236; border-radius: 15px; color:#FFF; text-align: center; -webkit-transform: translateY(-30%); -ms-transform: translateY(-30%); transform: translateY(-30%); }
	#mailLinkLogo { display: inline-block; width:58%; height: 100%; }
	#mailLink { position: relative; width:100%; height:40px; border: 2px solid #eb4236; border-radius: 15px; background-color: #FFF; cursor: pointer; text-align: left; overflow: hidden; }
	
	.drivFile { position:relative; margin-left:30px; margin-right: 30px; display:inline-block; text-align: center; }
	#driveLoginContainer { width:75%; max-width:400px; margin:auto; border:1px solid rgb(170, 169, 169); border-radius: 10px; color:#4d4c4c; font-size:15px; padding:30px; margin-top:50px; }
	#driveHeadlineMobil { display: none; }

	#driveLinkMobil { display: none; margin: auto; width:90%; max-width:250px; border-radius:15px; background-color: #FFF; cursor: pointer; text-align: center; font-weight: bold; font-size:17px; }
	#driveLinkBannerMobil { margin-top:50px; width:100%; font-size:17px; min-height:40px; background-color:#eb4236; border-radius: 15px; color:#FFF; padding-top:15px; text-align: center; }

	@media only screen and (max-width:1080px) {
		#postfachHeader { height: 110px; }
		.postfachHeaderWhiteBox { margin-bottom: 10px; }
	}

	@media only screen and (max-width:970px) {
		#postfachMenu { display: none; }
		#postfachMails { margin-left: 0; width:100%; min-height:300px; }
		#driveFiles { margin-left: 0; width:100%; min-height:300px; }
		#postfachHeadline { display: none; }
		#postfachHeadlineMobil { display: block; position: relative; margin:auto; background-color: #4285f5; border-radius: 10px; width:100%; max-width: 300px; height:40px; line-height: 40px; color:#FFF; margin-top: 15px; }
		#driveLinkMobil { display: block; }

	}

	@media only screen and (max-width:750px) {
		#postfachHeaderLogo { width:150px; }
		#postfachHeaderDriveText { font-size: 12px; line-height: 30px; }
		#postfachHeaderDriveLogo { width: 150px; }
		.postfachHeaderWhiteBox { height: 40px; margin-right: 0; }
		#postfachHeader { height: 90px; }
		.mailListBetreff { display: none; }
		.mailListAbsender { display: none; }
		.mailListDatum { width:35%; margin-left:65%; }
		.mailListAbsenderMobil { display: block; position: absolute; width:60%; top:0px; left:45px; padding-top: 10px; font-weight: normal; }
		.mailList { height: 70px; }
		#postfachHeaderSucheMobil { display:inline-block; line-height: 30px; font-size:14px; font-weight: bold; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); }
		#postfachHeaderSuche { display:none; }
		#driveFiles { text-align: center; }
	}

	@media only screen and (max-width:576px) {
		.headline { font-size: 22px; }
		.mailListDatum { width:40%; margin-left:60%; }
		.mailListAbsenderMobil { width:50%; }
	}

	@media only screen and (max-width:470px) { 
		.headline { font-size: 20px; }
		#postfachHeaderSucheMobil { font-size: 10px; }
		#loginContainer { top:15%; }
	}
	
/********/

/* Login */
	.login_field { width:90%; height:40px; border:1px solid #1C1C1B; border-radius: 10px; padding-left:10px; font-weight:bold; font-size:16px; -webkit-appearance: none; box-sizing: border-box; }
	.login_field:focus { outline: none; }
	.login_submit { -webkit-appearance: none; width:90%; height:40px; transition-duration:0.4s; font-weight:bold; font-size:16px; color:#FFF; background-color:#1C1C1B; border:1px solid #1C1C1B; border-radius: 10px; text-align:center; text-decoration:none; display:inline-block; box-sizing: border-box; }
	.login_submit:hover { background-color:#FFF; color:#000; }
	.login_submit:focus { outline: none; }
/********/
