/*
 * (c) 2015 Frank T. (ASGSPEZ) <14frthie@asgspez.de>
 * Project: ASGCMS
 * File: style.css
 * Description: stylesheet for ASGCMS
 *******************************************************************************
 * The MIT License
 *
 * Copyright 2017 Frank Thiemicke; 2018 editted by Johannes Süpke
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 * THE SOFTWARE.
 */

/*global settings (all media)*/
@font-face {
	font-family: 'Candara';
	src: url('./CANDARA.eot');
	src: local('Candara'), url('./CANDARA.woff') format('woff'), url('./CANDARA.ttf') format('truetype');
}

/*screen devices*/
@media (min-width: 800px){
	/*changing all elements*/
	*{
		margin: 20;
		padding: 0;
		font-size: 12pt;
		font-family: Candara,Consolas,Verdana,Helvetica,Arial;
	}

	/*body itself (distance to top)*/
	body{
		margin-top: 20px;
		margin-left: 20px;
		background: #e9e9e9;
	}

	/*changing only the site*/
	#site{
		width: 85%;
		margin: 0 auto;
		min-height: 500px;
	}

	/*header area*/
	#header{
		color: #333;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 45px;
		padding: 15px;
	}
	#header a{
		text-decoration: none;
	}
	#header a img{
		height: 20vh;
		min-height: 100px;
		width: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	#wheader{
		font-size: 2.5em;
		color: #333;
		font-style: normal;
		text-align: center;
	}

	/*references on the top*/
	#links{
		position: absolute;
		right: 10%;
		top: 25px;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		border: solid 1px darkgray;
		border-radius: 20px;
		padding: 5px;
	}
	#links ul {
		list-style:none;
		position:relative;
		float:left;
		margin:0;
		padding:0;
	}
	#linkrefs li{
		float: left;
		margin-left: 5px;
		margin-right: 5px;
	}
	#linkrefs li a{
		display: block;
		text-align: center;
		font-size: 8pt;
		color: #ddd;
	}

	/*mainmenu*/
	#mmenu{
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		margin-top: 10px;
		margin-right: 5%;
		margin-left: 5%;
		border: solid 1px gray;
		border-radius: 2px;
		font-size: 14pt;
		line-height: 12pt;
		min-height: 24pt;
		padding-left: 12px;
		padding-right: 12px;
	}
	#mmenu hr {
		border: none;
		height: 1px;
		background-color: black;
	}
	#mmenu ul.under{
		border-radius: 2px;
		list-style:none;
		position:relative;
		float:left;
		margin:0;
		padding:0;
		/*width: 100%;*/
	}
	#mmenu ul.main{
		border-radius: 2px;
		list-style:none;
		position:absolute;
		float:left;
		margin:0;
		padding:0;
		width: 90%;
	}
	#mmenu ul a, #mmenu ul span{
		display:block;
		color:#333;
		text-decoration:none;
		font-weight:700;
		font-size:14px;
		line-height:32px;
		padding:0 15px;
	}
	#mmenu ul li{
		border-radius: 2px;
		z-index: 100000;
		position:relative;
		float:left;
		margin:0;
		padding:0;
	}
	#mmenu ul li.active{
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
	#mmenu ul li:hover{
		/*background: #6c767f;*/
		background: #8C96A0;
		background: linear-gradient(top, #6f7986 0%, #7f8997 40%);
		background: -moz-linear-gradient(top, #6f7986 0%, #7f8997 40%);
		background: -webkit-linear-gradient(top, #6f7986 0%,#7f8997 40%);
	}
	#mmenu ul li span:hover{
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		border-radius: 2px;
	}
	#mmenu ul li span span {
		margin-top: -13px;
		padding: auto 1px;
	}
	#mmenu ul li span span:hover {
		background:none;
	}
	#mmenu ul.main ul{
		display:none;
		position:absolute;
		top:100%;
		left:0;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		padding:0;
	}
	#mmenu ul ul li{
		border-radius: 2px;
		float:none;
		min-width:200px;
	}
	#mmenu ul ul a{
		line-height:120%;
		padding:10px 15px;
	}
	#mmenu ul ul ul{
		border-radius: 2px;
		top:0;
		left:100%;
	}
	#mmenu ul li ul li{
		border-radius: 2px;
		/*top:0;*/
		/*left:100%;*/
		min-width:200px;
		display:block;
	}
	#mmenu ul li:hover > ul{
		display:block;
		border-radius: 2px;
	}
	#mmenu ul li.active a{
		color: #ddd;
	}
	#mmenu ul li.active ul li a{
		color: #333;
	}
	#mmenu li a.username{
		color: #c6058f;
	}
	#mmenu ul.main li:last-child{
		float:right;
		margin-right:5%;
	}
	
	#mmenu ul.under li:last-child{
		float:none;
		margin-right:0px;
	}
	
	h1 {
		color: #c6058f;
		font-weight: bold; 
		font-size: 16pt;
	}
	
	
	/*search*/
	#search {
		float: right;
	}
	#searchtext {
		float: left;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 10px;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		color: #ddd;
		height: 20px;
		margin-top: 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
	#submitsearch {
		display:block;
		float: right;
		margin-top: 7px;
		height: 18px;
		width: auto;
	}

	/*warning system*/
	#warning {
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		margin-top: 3px;
		border: solid 1px gray;
		border-radius: 25px;
		line-height: 12pt;
		min-height: 24pt;
		padding-left: 12px;
		padding-right: 12px;
	}
	#warntext {
		text-align: center;
		margin-top: 5pt;
		font-size: 18pt;
		color: firebrick;
	}

	/*contentarea (content+sidebar)*/
	#contentarea{
		height: 60vh;
		min-height: 400px;
		margin-top: 10px;
	}
	/*only content*/
	#content{
		min-width: 72%;
		width: 72%;
		height: 100%;
		min-height: 400px;
		overflow: auto;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 25px;
		float: left;
		padding: 10px;
		color: #333;
	}
	#content #box{
		width: 40%;
		min-height: 125px;
		padding-top: 5px; padding-bottom: 5px;
		padding-left: 10px; padding-right: 10px;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 10px;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		color: #ddd;
		position: absolute;
		top: 50%;
		left: 20%;
	}
	#content #abox {
		width: 50%;
		height: 40%;
		overflow: auto;
		padding-top: 5px; padding-bottom: 5px;
		padding-left: 10px; padding-right: 10px;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 10px;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		color: #ddd;
		position: absolute;
		top: 40%;
		left: 22.5%;
	}
	#content #box input, #content #abox input {
		display: block;
		margin-top: 5px; margin-bottom: 5px;
		width: 96%;
	}
	#content #box #sbutton, #content #abox #sbutton{
		width: auto;
		margin-bottom: 10px;
	}
	#content #abox #sbutton {
		width: 97%;
	}
	#content #whitelist {
		width: 48%;
		float: left;
	}
	#content #blacklist {
		width: 48%;
		float: right;
	}
	#content #whitelist select, #content #blacklist select {
		width: 100%;
	}
	#content .button-right {
		float:right;
		margin-top: -16pt !important;
		margin-bottom: 0pt !important;
	}
	#msg-inbox {
		width: 49%;
		display: block;
	}
	#msg-outbox {
		display: block;
		width: 49%;
		float: right;
		padding-top: 10pt;
		margin-top: -59.8vh !important;
	}
	#msg-inbox h3, #msg-outbox h3 {
		margin-bottom: 20pt !important;
	}
	#msg-inbox ul, #msg-outbox ul {
		height: 54vh;
		overflow: auto;
	}
	#msg-inbox ul li, #msg-outbox ul li {
		width: 98%;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 10pt;
		padding: 5pt;
		margin-bottom: 5pt;
	}
	#msg-inbox ul .msg-unread, #msg-outbox ul .msg-unread {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		color: #ddd;
	}
	#content h2{
		font-weight: bolder;
		border-bottom: solid 1px gray;
		margin-bottom: 10px;
		font-size: 14pt;
	}
	#content h2 a {
		font-weight: bolder;
		text-decoration: none;
		font-size: 14pt;
		color: #333;
	}
	#content h3{
		font-weight: bolder;
		border-bottom: solid .5px gray;
		margin-bottom: 10px;
	}
	#content h3 a {
		font-weight: bolder;
		text-decoration: none;
		color: #333;
	}
	#content #right {
		display: block;
		margin-top: 6px;
		margin-right: 5px;
		font-size: 9pt;
		text-align: right !important;
		float: right !important;
	}
	#content #right a {
		font-size: 8pt;
		color: inherit;
	}
	#content #conf label{
		width: 20%;
		display: block;
		float: left;
	}
	#content #conf input {
		width: 70%;
		display: block;
	}
	#content #conf #cb {
		display: inline;
		width: auto;
		margin-right: 5px;
	}
	#content #conf #submit {
		width: auto;
	}
	#content del {
		text-decoration: line-through;
	}
	#content #icongroup {
		margin-bottom: -10pt !important;
		float: right;
	}
	#content #icongroup img {
		margin-right: 5px;
	}
	#content p{
		font-size: 12pt;
		margin-bottom: 12pt;
		padding-bottom: 1px;
	}
	#content p a {
		color: inherit;
		text-decoration: underline;
	}
    #content p code {
        font-family: monospace;
    }
	#content p img {
		display: block;
		width: 60%;
		height: auto;
		margin: 10px auto 10px;
		border: solid 1px gray;
		border-radius: 10px;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	}
	#content p iframe, #content iframe {
		display: block;
		width: 92%;
		height: 400px;
		margin: 10px auto 10px;
		border: solid 1px gray;
		border-radius: 10px;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	}
	#content p .calframe {
		width:95%;
		height:53vh;
		border: none;
		box-shadow: none;
		padding: 5px;
	}
	#content p embed {
		display: block;
		width: 50%;
		height: 400px;
		margin: 10px auto 10px;
		border: solid 1px gray;
		border-radius: 10px;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	}
	#content p small {
		font-size: 8pt;
	}
	#content p small a {
		font-size: inherit;
	}
	#content ul, #content ol {
		margin-left: 30px;
		margin-top: -5px;
	}
	#content ul li ul {
		margin-top: 0px;
		margin-left: 20px;
	}
	#content ul li a, #content ol li a {
		color: inherit;
		text-decoration: underline;
	}
	#content ul li small a, #content ol li small a {
		font-size: inherit;
	}
	#content ul li small {
		font-size: 8pt;
	}
	#content table {
		width: 100%;
		border-spacing: 5px 3px;
		border-collapse: separate;
		margin-top: -5px;
	}
	#content .tablenomargintop {
		margin-top: 0px;
	}
	#content .plan-day {
		width: 19.5% !important;
	}
	#content .plan-innertableo {
		width: 40% !important;
	}
	#content .borderless {
		border: none !important;
		box-shadow: none !important;
	}
	#content .plan-innertablem {
		width: 28% !important;
	}
	#content table th {
		border: solid 1px darkgray;
		border-radius: 20px;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		font-weight: bold;
		color: #ddd;
		margin: 3px;
	}
	#content table td {
		border: solid 1px gray;
		border-radius: 45px;
		color: #333;
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		padding-left: 10px;
		padding-right: 10px;
		margin: 3px;
	}
	#content table td img {
		margin: 0px 2px;
	}
	#content table td a {
		color: inherit;
		text-decoration: underline;
	}
	#content table table {
		margin-top: auto;
	}
	#content table table td {
		border: none;
		box-shadow: none;
	}
	#content hr {
		margin-top: 5px;
		margin-bottom: 3px;
	}
	#content form {
		margin-bottom: 10px;
	}
	#content form textarea, #content form #nice {
		display: block;
		width: 100%;
		min-height: 100px;
		margin-bottom: 20px;
	}
	#content form label {
		display: block;
		width: 13%;
		float: left;
	}
	#content form fieldset {
		border: 1px solid #333;
		border-radius: 10px;
		padding-left: 10px;
		padding-right: 10px;
		margin-bottom: 3px;
	}
	#content form .kf {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		color: #ddd;
		margin-top: 10px; margin-bottom: 10px;
		padding-top: 5px; padding-bottom: 5px;
		padding-left: 10px; padding-right: 10px;
	}
	#content form .form-ico {
		width: 12pt !important;
		border: none !important;
		background: none;
		box-shadow: none;
		margin-top: -1.5em !important;
		float: right;
	}
	#content form .form-ico-pdf {
		width: 16pt !important;
		border: none !important;
		background: none;
		box-shadow: none;
		margin-top: -1.5em !important;
		float: right;
	}
	#content form input, #content form select {
		border: solid 1px darkgray;
		border-radius: 20px;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		color: #ddd;
		padding-left: 10px;
		padding-right: 10px;
	}
	#content form select {
		-moz-appearance: none;
		-webkit-appearance: none;
		background: url('../img/dropdown.png') no-repeat right #5f6975;
		background-size: 14pt 10pt;
	}
	#content form select option {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: #333;
		background: #efefef;
		border: none;
	}
	#content form span img {
		padding-top: 7px;
		margin-left: 5px;
		margin-right: 5px;
	}
	#content form .right {
		display: block;
		width: 80%;
		float: right;
	}
	#content form .right-small {
		display: block;
		width: 25.85%;
		float: right;
	}
	#content form .table-right {
		display: block !important;
		width: 80%;
		float: right;
	}
	#content form .table-right tr {
		width: 100%;
	}
	#content form .table-right tr td {
		width: 100%;
	}
	#content form .cb {
		margin-right: 5px;
	}
	#content form fieldset {
		display: inline !important;
		border: none !important;
	}
	/*info part (sidebar)*/
	#newsandnonsense{
		min-width: 20%;
		width: 23%;
		height: 100%;
		min-height: 400px;
		margin-left: 5px;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		border: solid 1px gray;
		border-radius: 25px;
		float: right;
		padding: 10px;
	}
	#newsandnonsense div{
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		border: solid 1px darkgray;
		border-radius: 20px;
		padding: 10px;
		margin-bottom: 5px;
		color: #ddd;
	}
	#newsandnonsense div h2{
		color: #ddd;
		font-weight: bolder;
		border-bottom: solid 1px gray;
		font-size: 12pt;
	}
	#newsandnonsense div p{
		color: #ddd;
		font-size: 12pt;
		margin: 5px 0 2px 0;
	}
	#newsandnonsense a{
		color: #ddd;
		font-size: 12pt;
		text-decoration: underline;
	}
	#newsandnonsense #login input, #login select, #logout input {
		display: block;
		border: solid 1px gray;
		border-radius: 45px;
		color: #333;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		height: 22px;
		margin-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
	}
	#newsandnonsense #login input {
		width: 94%;
	}
	#newsandnonsense #login select {
		width: 100%;
		height: 25px;
	}
	#newsandnonsense #login select option {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		color: #333;
		background: #efefef;
		border: none;
	}
	#newsandnonsense #login #sbutton {
		margin: 5px auto 0px;
	}

	/*marquee*/
	#dmarquee {
		margin-top: 10px;
		margin-bottom: 10px;
		border: solid 1px gray;
		border-radius: 45px;
		color: #333;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		text-align: center;
		padding: 3px;
	}

	/*footer with copyright and links*/
	#seitenfuss{
		margin-top: 10px;
		margin-bottom: 10px;
		border: solid 1px gray;
		border-radius: 45px;
		color: #333;
		background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
		text-align: center;
		padding: 3px;
	}
	#cptext, #footertext{
		font-size: 8pt;
	}
	#footertext a {
		font-size: 8pt;
		text-decoration: underline;
		font-style: none;
		color: #333;
	}

	/*class defs*/
	.clearer{
		clear: both;
	}
	.ico {
		width: 12pt !important;
		border: none !important;
	}
	.msg-counter-container {
		height: 24pt;
	}
	.msg-counter {
		position: relative;
		transform: translateY(-175%) translateX(215%);
		width: 20pt !important;
		height: 12pt;
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
		border: solid 1px darkgray;
		border-radius: 10pt !important;
		padding: 0pt !important;
		text-align: center !important;
	}
	.msg-counter:hover {
		background: #4b545f !important;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%) !important;
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%) !important;
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%) !important;
		border: solid 1px darkgray !important;
	}
	.msg-counter span {
		font-size: 6pt !important;
		color: #ddd !important;
		position: absolute;
		top: 35%;
		left: -25%;
	}
	
	/* Own content*/
	div.contentalt{
		min-width: 76%;
		width: 76%;
		height: 100%;
		/*min-height: 400px;*/
		overflow: auto;
		margin: 15px 12% 15px;
		/*background: #efefef;
		background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
		background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
		box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
		border: solid 1px gray; 
		border-radius: 2px;*/
		float: left;
		padding: 10px;
		color: #333;
	}
	
	div.contentwithgrid{
		margin: 15px 12% 15px;
	}

	
	#tabmenue {
		padding: 2px;
		border-bottom: 2px solid #222; 
	}
	
	#tabmenue li {
		display: inline; 
	}
	
	#tabmenue li a {
		padding: 2px 10px;
		margin-left: 0.5em;
		border: 2px solid #777;
		border-bottom: 0px;
		text-decoration: none; 
		background-color:#A9E8E4;
	}
	
	#tabmenue li a#aktuell {
		padding-bottom:4px; 
		border-bottom: 2px solid #fc0;
	}
    
    
	
	select {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
	}
	
	input[type="text"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="number"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="password"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="date"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="submit"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="reset"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="button"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="email"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
    input[type="time"] {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	#submitbutton {
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
		-webkit-appearance:none;
	}
	input[type="text"]:focus {
		background-color: lightblue;
	}
	
	/* Formatting search box */
    .search-box{
        /*width: 300px;*/
        position: relative;
        display: inline-block;
		margin: 3px 0;
        font-size: 15px;
    }
    .search-box input[type="text"]{
        /*height: 32px;
        padding: 4px 8px;
        border: 1px solid;
        font-size: 15px; */
		width: 100%;
		padding: 4px 8px;
		margin: 3px 0;
		box-sizing: border-box;
		border: 1px solid;
    }
    .result{
        position: absolute;        
        z-index: 999;
        top: 100%;
        left: 0;
    }
    .search-box input[type="text"], .result{
        width: 100%;
        box-sizing: border-box;
    }
    /* Formatting result items */
    .result option{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
        cursor: pointer;
		background: #e9e9e9;
    }
    .result option:hover{
        background: #f2f2f2;
    }
	.result p{
        margin: 0;
        padding: 7px 10px;
        border: 1px solid #CCCCCC;
        border-top: none;
		background: #e9e9e9;
    }
    .result p:hover{
        background: #f2f2f2;
    }
	
	.bordered {
		border-width: 2px;
		border-style: solid;
		border-color: #c6058f;
		border-radius: 2px;
		padding-top: 15px;
		padding: 15px;
		margin: 5px;
	}
	.colored {
		color: #c6058f;
		font-weight: bold;
	}
	
	/* Links in Spaltenköpfen besser lesbar */
	a.tableheada:link {
		color: #FFFFFF; 
		font-weight: bold;
	}
	a.tableheada:visited {
		color: #FFFFFF; 
		font-weight: bold;
	}
	
	/* Links zu Schülerportfolio */
	a.portfolio:link {
		color: #5a0134;
		text-decoration: none;
	}
	a.portfolio:visited {
		color: #5a0134;
		text-decoration: none;
	}
	a.portfolio:hover {
		color: #c8029a;
		font-weight: bold;
	}
	a.mailto:link {
		color: #c8029a;
		text-decoration: none;
	}
	a.mailto:visited {
		color: #c8029a;
		text-decoration: none;
	}
	a.mailto:hover {
		color: #c8029a;
		font-weight: bold;
	}
	
	/* Schöne Tabellen; auf: http://tablestyler.com/ */
	.datagrid table { 
		border-collapse: collapse; 
		text-align: left; 
		width: 100%; 
	} 
	.datagrid {
		font-family: Candara,Consolas,Verdana,Helvetica,Arial;
		/*font: normal 12px/150% Arial, Helvetica, sans-serif; */
		background: #fff; 
		overflow: hidden; 
		-webkit-border-radius: 4px; 
		-moz-border-radius: 4px; 
		border-radius: 4px;
		overflow-x: auto;
		overflow-y: auto;
		max-height: 85vh; /* höchstens 85% der viewport-Höhe */
		max-width: 100vw; 		
	}
	
	.datagrid table td, .datagrid table th { 
		padding: 8px 7px; 
	}
	.datagrid table thead th {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420) );
		background:-moz-linear-gradient( center top, #36752D 5%, #275420 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
		background-color:#a015bf; 
		color:#FFFFFF; 
		font-size: 18px; 
		font-weight: bold; 
		border-left: 2px solid #8e15cf; 
	} 
	
	/* damit der Kopf der Tabelle (thead) immer sichtbar bleibt */
	.datagrid table thead tr { 
		background-color:#36752D;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 0;
    } 
	
	.datagrid table thead th:first-child {
		border: none;
	}
	.datagrid table tbody td {
		color: #275420; 
		border-left: 2px solid #C6FFC2;
		font-size: 12px;
		border-bottom: 1px solid #E1EEF4;
		font-weight: bold; 
	}
	.datagrid table tbody .alt td { 
		background: #DFFFDE; 
		color: #275420; 
	}
	.datagrid table tbody td:first-child {
		border-left: none; 
	}
	.datagrid table tbody tr:last-child td { 
		border-bottom: none; 
	}
	
	
	/* Alternative Farbe */
	
	.altgrid table { 
		border-collapse: collapse; 
		text-align: left; width: 100%; 
	} 
	.altgrid {
		font: normal 15px/150% Arial, Helvetica, sans-serif; 
		background: rgb(249, 246, 249); 
		overflow: hidden; 
		-webkit-border-radius: 4px; /* Ab hier wichtig, damit Tabellenkopf immer sichtbar bleibt */
		-moz-border-radius: 4px; 
		border-radius: 4px;
		overflow-x: auto;
		overflow-y: auto;
		max-height: 85vh; /* höchstens 85% der viewport-Höhe */
		max-width: 100vw; 
	}
	.altgrid table td, .altgrid table th { 
		padding: 5px 10px; 
	}
	.altgrid table thead th {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ab275c), color-stop(1, #91129b) );
		background:-moz-linear-gradient( center top, #fa0fb0 5%, #9c0284 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#369992', endColorstr='#4A5F7F');
		background-color:#8e178c; 
		color:#f8f5f5; 
		font-size: 15px; 
		font-weight: bold; 
		border-left: 1px solid #8e0b4c; 
	} 
	/* damit der Kopf der Tabelle (thead) immer sichtbar bleibt */
	.altgrid table thead tr { 
		background-color:#993655;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		position: sticky;
		top: 0;
    }
    
	.altgrid table thead th:first-child {
		border: none; 
	}
	.altgrid table tbody td { 
		color: #2a000e; 
		border-left: 1px solid #E1EEF4;
		font-size: 14px;
		border-bottom: 1px solid #E1EEF4;
		font-weight: normal; 
	}

	.altgrid table tbody .alt td { 
		background: #f6cff1; 
		color: #050505; 
	}
	.altgrid table tbody .date td { 
		background: #01A894; 
		color: #00557F; 
	}
	.altgrid table tbody td:first-child { 
		border-left: none; 
	}
	.altgrid table tbody tr:last-child td { 
		border-bottom: none; 
	}
	
	 /* Style the tab */
	.tab {
		overflow: hidden;
		border: 1px solid #ccc;
		background-color: #f1f1f1;
	}

	/* Style the buttons that are used to open the tab content */
	.tab button {
		background-color: inherit;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
	}

	/* Change background color of buttons on hover */
	.tab button:hover {
		background-color: #ddd;
	}

	/* Create an active/current tablink class */
	.tab button.active {
		background-color: #ccc;
	}

	/* Style the tab content */
	.tabcontent {
		display: none;
		padding: 6px 12px;
		border: 1px solid #ccc;
		border-top: none;
	} 

	.tabcontent {
		animation: fadeEffect 1s; /* Fading effect takes 1 second */
	}

	/* Go from zero to full opacity */
	@keyframes fadeEffect {
		from {opacity: 0;}
		to {opacity: 1;}
	}
    
    /* Style List for termine.php */
    
    ul.termine li:before { 
        list-style: none;  
        content: '';   
        display: inline-block;   
        height: 35px;   
        width: 30px;    
        background-size: 25px;      
        background-repeat: no-repeat;   
        margin-right: 5px; 
    }
    
    .if{
        list-style: none;
        background: url("picsfree/info3.png") no-repeat left 5px;
    }
    
    .bio{
        list-style: none;
        background: url("picsfree/bio3.png") no-repeat left 5px;
    }
    
    .ma{
        list-style: none;
        background: url("picsfree/ma2.png") no-repeat left 5px;
    }
    
    .phy{
        list-style: none;
        background: url("picsfree/phy3.png") no-repeat left 5px;
    }
    
    .che{
        list-style: none;
        background: url("picsfree/nawi3.png") no-repeat left 5px;
    }
    
     /* Style buttons */
    .btnrmv {
      background-color: red; /* Blue background */
      border: none; /* Remove borders */
      color: white; /* White text */
      padding: 12px 16px; /* Some padding */
      font-size: 16px; /* Set a font size */
      cursor: pointer; /* Mouse pointer on hover */
    }

    /* Darker background on mouse-over */
    .btnrmv:hover {
      background-color: mediumvioletred;
    } 
    .btnadd {
      background-color: green; /* Blue background */
      border: none; /* Remove borders */
      color: white; /* White text */
      padding: 12px 16px; /* Some padding */
      font-size: 16px; /* Set a font size */
      cursor: pointer; /* Mouse pointer on hover */
    }

    /* Darker background on mouse-over */
    .btnadd:hover {
      background-color: greenyellow;
    } 
	
}