/* Page Layout  */

:root {
	--barColor: #CDB99C;
	--secondBarColor: rgba(230, 220, 205, 0.95);
	--linkColor:  #2580CB;
	--bgColor:	  white;
	--secondBgColor: #eee;
	--fineLineBeforeBg: #BBBBBB;
	--textColor:  #200;
	--commentColor: #777;
	--linkColorBehindText: #e9f2f9;
	--shadowColor: rgba(0, 0, 0, 0.5);
	--dokuBgColor: #FFFFDD;
	--tableHeaderColor: rgba(220,220,220,0.7);
	--tableRowOddColor: rgba(250,250,250,1);
	--tableRowEvenColor: rgba(230,230,230,1);
	--negativeColor: red;
	--positiveColor: #0b0;
	
	color-scheme: light dark;
}

/* DARK MODE */
@media screen and (prefers-color-scheme: dark) {
	:root {
		--barColor: #665c4e;
		--secondBarColor: rgba(64, 57, 47, 0.95);
		--bgColor:	  black;
		--secondBgColor: #333;
		--fineLineBeforeBg: #777;
		--textColor:  #e0e0e0;
		--commentColor: #bbb;
		--linkColorBehindText: #124066;
		--shadowColor: rgba(255, 255, 255, 0.5);
		--dokuBgColor: #553;
		--tableHeaderColor: rgba(110,110,110,0.7);
		--tableRowOddColor: rgba(50,50,50,1);
		--tableRowEvenColor: rgba(30,30,30,1);
		--negativeColor: #f66;
		--positiveColor: #8f8;
	}
	img.imprint_contact {
		filter: invert();
	}
	img[src*=".svg"]:not(.noDarkMode), svg.wind, img.HiResIcon.bw {
		filter: invert() grayscale(100%) brightness(95%);
	}
	.ui-widget-overlay {
		background: black;
	}
	.ui-widget-content {
		background: var(--secondBgColor);
		color: var(--textColor);
	}
	.ui-widget-content a {
		color: var(--textColor);
	}
}

html {
	font-family: 'PT Sans', sans-serif;
	font-size: 11pt;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
	background-color: var(--bgColor);
}

.nohyphens {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

@media screen and (min-width: 520px) {
	html {
		/* http://www.colorzilla.com/gradient-editor/#2580cb+0,a0d4ff+13,a0d4ff+21,2580cb+47,2580cb+57,a0d4ff+77,a0d4ff+84,2580cb+100;Custom */
		background: rgb(37,128,203); /* Old browsers */
		background: -moz-linear-gradient(-45deg,  rgba(37,128,203,1) 0%, rgba(160,212,255,1) 13%, rgba(160,212,255,1) 21%, rgba(37,128,203,1) 47%, rgba(37,128,203,1) 57%, rgba(160,212,255,1) 77%, rgba(160,212,255,1) 84%, rgba(37,128,203,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(37,128,203,1)), color-stop(13%,rgba(160,212,255,1)), color-stop(21%,rgba(160,212,255,1)), color-stop(47%,rgba(37,128,203,1)), color-stop(57%,rgba(37,128,203,1)), color-stop(77%,rgba(160,212,255,1)), color-stop(84%,rgba(160,212,255,1)), color-stop(100%,rgba(37,128,203,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(-45deg,  rgba(37,128,203,1) 0%,rgba(160,212,255,1) 13%,rgba(160,212,255,1) 21%,rgba(37,128,203,1) 47%,rgba(37,128,203,1) 57%,rgba(160,212,255,1) 77%,rgba(160,212,255,1) 84%,rgba(37,128,203,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(-45deg,  rgba(37,128,203,1) 0%,rgba(160,212,255,1) 13%,rgba(160,212,255,1) 21%,rgba(37,128,203,1) 47%,rgba(37,128,203,1) 57%,rgba(160,212,255,1) 77%,rgba(160,212,255,1) 84%,rgba(37,128,203,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(-45deg,  rgba(37,128,203,1) 0%,rgba(160,212,255,1) 13%,rgba(160,212,255,1) 21%,rgba(37,128,203,1) 47%,rgba(37,128,203,1) 57%,rgba(160,212,255,1) 77%,rgba(160,212,255,1) 84%,rgba(37,128,203,1) 100%); /* IE10+ */
		background: linear-gradient(135deg,  rgba(37,128,203,1) 0%,rgba(160,212,255,1) 13%,rgba(160,212,255,1) 21%,rgba(37,128,203,1) 47%,rgba(37,128,203,1) 57%,rgba(160,212,255,1) 77%,rgba(160,212,255,1) 84%,rgba(37,128,203,1) 100%); /* W3C */

		background-repeat: no-repeat;
    	background-attachment: fixed;
	}
	#page{
		border-radius: 15px;
		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
	}
}

@media screen and (max-width: 639px) {
	body {
		margin: 0;
	}	
	#page{
		border-radius: 0;
	}
	#bottom-spacer{
		display: none;
	}
}

/* DARK MODE */
@media screen and (min-width: 520px) and (prefers-color-scheme: dark) {
	html {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2580cb+0,0f3554+13,0f3554+21,2580cb+47,2580cb+57,0f3554+77,0f3554+84,2580cb+100 */
		background: rgb(37,128,203); /* Old browsers */
		background: -moz-linear-gradient(-45deg,  rgba(37,128,203,1) 0%, rgba(15,53,84,1) 13%, rgba(15,53,84,1) 21%, rgba(37,128,203,1) 47%, rgba(37,128,203,1) 57%, rgba(15,53,84,1) 77%, rgba(15,53,84,1) 84%, rgba(37,128,203,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(-45deg,  rgba(37,128,203,1) 0%,rgba(15,53,84,1) 13%,rgba(15,53,84,1) 21%,rgba(37,128,203,1) 47%,rgba(37,128,203,1) 57%,rgba(15,53,84,1) 77%,rgba(15,53,84,1) 84%,rgba(37,128,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(135deg,  rgba(37,128,203,1) 0%,rgba(15,53,84,1) 13%,rgba(15,53,84,1) 21%,rgba(37,128,203,1) 47%,rgba(37,128,203,1) 57%,rgba(15,53,84,1) 77%,rgba(15,53,84,1) 84%,rgba(37,128,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

		background-repeat: no-repeat;
    	background-attachment: fixed;
	}
}

body:-webkit-full-screen {
	background: none;
}

body {
	height: 100%;
	color: var(--textColor);
}

form {
	height: 100%;
}

h2 , h3,  h4 {
	color: var(--textColor);
}

.box > h2, .box > h3, .box > h4 {
	margin: 5px;
	margin-top: 0;
}

a:hover {
	color: /*linkColor*/#2580CB;
	color: var(--linkColor);
	text-decoration: underline;
}

a, a:visited {
	color: /*linkColor*/#2580CB;
	color: var(--linkColor);
	text-decoration: none;
}

#page{
	min-width: 200px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px;
	background-color: #fff;
	background-color: var(--bgColor);
}

#header {
	margin-bottom: 10px;
}

#header table {
	width: 100%;
}

#header h1 {
	margin: 0;
	overflow: hidden;
}

#footer {
	margin-top: 5px;
	padding-top: 5px;
	text-align: center;
}

#footer a, #footer a:visited {
	color: #2580CB;
	color: var(--linkColor);
	font-size: 80%;
}

@media print {
	#footer {
		display: none;
	}
	.hidePrint {
		display: none;
	}
	html {
		font-size: 8pt;
	}
}

#footer a {
	margin: 0px 5px 0px 5px;
}

img {
	border: none;
}

img.appicon {
	width: 80px;
	height: 80px;
	border-radius: 10px;
	vertical-align: middle;
}

img.appicon.dark {
	display: none;
}

@media screen and (prefers-color-scheme: dark) {
	img.appicon.light {
		display: none;
	}
	img.appicon.dark {
		display: block;
	}
}

img.appicon.mini {
	width: 22px;
	height: 22px;
	border-radius: 3px;
}

img.miniappicon {
	width: 40px;
	height: 40px;
	border-radius: 5px;
	vertical-align: middle;
}

/* Das News-Badge Icon */
div.appIconBadge{
	position: absolute;width:80px;text-align:right;
}

#content {
	min-height:100%;
}

#footer{
	clear: both;
	font-style: italic;
}

/* Menu */

a.selected {
	font-weight: bold;
}

a.unselected {
	font-weight: normal;
}

/* TABLE */
table {
	border-collapse: collapse;
}

/* DATA TABLE */

table.dataTable {
	border-width: 0px;
	border-spacing: 0px;
	border-style: outset;
	border-collapse: collapse;
}
table.dataTable > thead > tr th {
	background-color: rgba(220,220,220,0.7);
	background-color: var(--tableHeaderColor);
	padding: 3px;
	vertical-align: bottom;
}
table.dataTable > thead > tr:first-child th {
	border-radius: 10px 10px 0 0;
}
table.dataTable > thead > tr:first-child th.left {
	border-radius: 0 0 0 10px;
}
table.dataTable > thead > tr:first-child th.right {
	border-radius: 0 0 10px 0;
}
table.dataTable > tbody > tr:nth-child(odd) {
	background-color: rgba(250,250,250,1);
	background-color: var(--tableRowOddColor);
}
table.dataTable > tbody > tr:nth-child(even) {
	background-color: rgba(230,230,230,1);
	background-color: var(--tableRowEvenColor);
}
table.dataTable > tbody > tr:last-child td.left {
	border-radius: 0 0 0 10px;
}
table.dataTable > tbody > tr:last-child td.right {
	border-radius: 0 0 10px 0;
}
table.dataTable td {
	padding: 3px;
	margin: 1px;
	vertical-align: top;
}
table.dataTable td:empty, table.dataTable th:empty {
	padding:0;
	margin:0;
}
td.left {
	text-align: right;
	color: #555555;
}
td.right {
}

div.introBox {
	display:grid;
	grid-template-columns: auto auto;
	grid-column-gap: 10px;
	grid-row-gap: 20px;
	
	border: 1px dashed black;
	border-radius: 20px;
	padding: 10px;
}

@media all and (max-width: 600px) {
	div.introBox {
		grid-template-columns: auto;
		border: none;
		padding: 0;
		border-radius: 0;
	}
}

/* Alternative zu datatable: grid layout */

.gridData {
	display: grid;
	grid-template-columns: minmax(70px, 140px) auto;
  	grid-row-gap: 10px;
}

.gridData .label {
	font-size: 90%;
	padding: 5px;
	
	background-color: #CDB99C;
	background-color: var(--barColor);
	color: white;
	color: var(--bgColor);
	border-radius: 5px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.gridData .content {
	background-color: #eee;
	background-color: var(--secondBgColor);
	border-radius: 5px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	padding: 5px;
}

@media all and (max-width: 500px) {
	.gridData {
		grid-template-columns: auto;
		grid-row-gap: 0;
	}
	.gridData .label {
		padding: 2px 5px 2px 5px;
		border-radius: 5px;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	.gridData .content {
		border-radius: 5px;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		margin-bottom: 10px;
	}
}

/* Matrix */


.highlight {
	font-weight: bold;
}

/* Faces-Messages */
ul#Form\:messages {
	padding: 0;
	list-style-type: none;
}
.messageERROR {
	background-color: red;
	color: #FFF;
	color: var(--bgColor);
	margin-bottom: 1px;
	padding: 4px;
	border-radius: 3px;
}
.detailERROR {
	color: red;
	font-size: 80%;
}
.messageINFO {
	background-color: /*textColor*/ #200;
	background-color: var(--textColor);
	color: #FFF;
	color: var(--bgColor);
	margin-bottom: 1px;
	padding: 4px;
	border-radius: 3px;
}
.messageWARN {
	background-color: #FF0;
	color: #000;
	margin-bottom: 1px;
	padding: 4px;
	border-radius: 3px;
}
.detailWARN {
	color: #aa0;
	font-size: 80%;
}
/* Hilfetexte zu Formularfeldern */
.comment {
	font-size: 80%;
	color: #777;
	color: var(--commentColor);

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* so wie comment nur ohne Farbstile */
.commentSize {
	font-size: 80%;
}

/* Das highlighttextarea plugin kommt sonst durcheinander */
div.highlighter {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* um inaktive Inhalte darzustellen */
.gray {
	color: #777;
	color: var(--commentColor);
}

.floater {
	float: left;
	padding: 0 10px 10px 0;
}

/* DIV, das einen dezenten Rand hat */
div.box {
	border: 1px solid #BBBBBB;
	border: 1px solid var(--fineLineBeforeBg);
	//border-left-color: #DDDDDD;
	//border-top-color: #CCCCCC;
	//border-right-color: #888888;
	//border-bottom-color: #888888;
	border-radius: 10px;
	background-color: #FFFFFF;
	background-color: var(--bgColor);
	margin: 10px 10px 0 0;
	flex: 1;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 1px 1px 4px var(--shadowColor);
	min-width: 220px;
}

div.box.wide {
	flex: 2;
}

div.box h4 {
	padding: 2px;
	text-align: center;
	text-transform: uppercase;
	color: grey;
	color: var(--commentColor);
}

/* Fullscreen-Box start */
div.box.full {
	float: none;
	max-width: none;
}
div.box.full h4 {
	text-align: left;
	padding-left: 10px;
}
/* Fullscreen-Box ende */

.box {
	padding: 8px;
}

div.ui-datepicker {
	z-index: 200 !important;
}

/* für den breadcrumbNavigation Tag */
@media screen {
	#stickyHeader {
		position: sticky;
		position: -webkit-sticky;
		position: -moz-sticky;
		top: 0px;
		z-index: 100;
		border-bottom: 1px solid transparent;
	}
	#stickyHeader.withBorder {
		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
		box-shadow: 0 3px 7px var(--shadowColor);
	}
}
#stickyHeader {
	margin-left: -14px;
	margin-right: -14px;
	margin-bottom: 10px;
	padding: 2px 40px 1px 14px;
	background-color: rgba(230,220,205, 0.95);  /* 50% of lightColor */
	background-color: var(--secondBarColor);
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
#stickyHeader > h2 {
	margin: 0px;
}

#breadcrumb {
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

#breadcrumb > li {
	display: inline;
}

#breadcrumb > li:before {content: "> ";}


/* pagescrolling */
a.pagescroll {
	display: none;
}
@media screen {
	a.pagescroll {
		width: 50px;
		height: 50px;
		text-align: center;
		color: white;
		border-radius: 50px;
		background-color: /*linkColor*/#2580CB;
		font-size: 60px;
		position: fixed;
		right: 30px;
		opacity: 0.5;
		z-index: 200;
	}
	a.pagescroll.up {
		top: 80px;
	}
	a.pagescroll.down {
		transform: rotate(180deg);
		bottom: 50px;
	}
	a.pagescroll:hover {
		opacity: 0.9;
		text-decoration: none;
	}
}

/* Buttons allgemein */

input[type='submit'], input[type='button'] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  
   height: 34px;
   min-width: 70px;
}

input[type="submit"], input[type='button'], input[type='file'] {
	padding: 5px 10px 5px 10px;
	# margin: 5px 0px;
	color: #ffffff;
	border: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 100px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBFF), to(#1570BB),color-stop(0.4, #2580CB));
	background-color: /*linkColor*/#2580CB;
	background: -moz-linear-gradient(top,  #BBBBFF,  #1570BB);
	font-size: 100%;
	border: 1px solid /*linkColor*/#2580CB;
}

input[type="submit"]:hover, input[type='button']:hover, input[type='file']:hover {
	color:#ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBFF), to(#1570BB),color-stop(0.8, #2580CB));
	background-color: /*linkColor*/#3590DB;
	background: -moz-linear-gradient(top,  #CBCBFF,  #2580CB);
	border: 1px solid /*linkColor*/#3590DB;
}

input[type="submit"]:active, input[type='button']:active, input[type='file']:active {
	color:#ffffff;
	background-image: -webkit-gradient(radial, center center, 0, center center, 70, from(#BBBBFF), to(#1570BB),color-stop(0.8, #2580CB));
	background-color: /*linkColor*/#3590DB;
	background: -moz-radial-gradient(#CBCBFF,  #2580CB);
	border: 1px solid /*linkColor*/#3590DB;
}

input[type="submit"]:disabled, input[type='button']:disabled,input[type='file']:disabled {
	background-image: none;
	background: none;
	background-color: #AAA;
	border: 1px solid #999;
}

input[type='file'] { 
	font-size: 10px;	
}

input[type="submit"].delete {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFBBBB), to(#BB7015),color-stop(0.4, #CB8025));
	background-color: /*linkColor*/#CB8025;
	background: -moz-linear-gradient(top,  #FFBBBB,  #BB7015);
	border: 1px solid /*linkColor*/#CB8025;
}

input[type="submit"].delete:hover {
	color:#ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#FFBBBB), to(#BB7015),color-stop(0.8, #CB5025));
	background-color: /*linkColor*/#DB5035;
	background: -moz-linear-gradient(top,  #FFCBCB,  #CB5025);
	border: 1px solid /*linkColor*/#DB5035;
}

input[type="submit"].delete:active {
	background-image: -webkit-gradient(radial, center center, 0, center center, 70, from(#FFBBBB), to(#BB7015),color-stop(0.4, #CB5025));
	background-color: /*linkColor*/#DB5035;
	background: -moz-radial-gradient(#FFCBCB,  #CB5025);
}

input[type="submit"].add {
	background-image: -webkit-gradient(linear, left top, left bottom, from(#AAFFAA), to(#70BB15),color-stop(0.4, #80CB25));
	background-color: /*linkColor*/#80CB25;
	background: -moz-linear-gradient(top,  #AAFFAA,  #70BB15);
	border: 1px solid /*linkColor*/#80CB25;
}

input[type="submit"].add:hover {
	color:#ffffff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#AAFFAA), to(#70BB15),color-stop(0.8, #50CB25));
	background-color: /*linkColor*/#50DB35;
	background: -moz-linear-gradient(top,  #CBFFCB,  #50CB25);
	border: 1px solid /*linkColor*/#50DB35;
}

input[type="submit"].add:active {
	background-image: -webkit-gradient(radial, center center, 0, center center, 70, from(#AAFFAA), to(#70BB15),color-stop(0.4, #50CB25));
	background-color: /*linkColor*/#50DB35;
	background: -moz-radial-gradient(#FFCBCB,  #50CB25);
}

select {
	font-size: 100%;
}

/* Für die Fotogalerie */
div.thumbcontainer{
	margin: 1px 10px 10px 1px;
	display:inline-block;
}
div.microcontainer{
	margin: 0px 5px 5px 0px;
	display:inline-block;
	font-size: 50%;
	
	-webkit-transform: scale(1);
	-webkit-transition-timing-function: ease-out;
	-webkit-transition-duration: 300ms;
}
div.thumbcontainer > img.thumb {
	box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 2px var(--shadowColor);
	border-radius: 3px;
	width:128px;
	height:128px;
}
div.microcontainer > img.thumb {
	box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
	box-shadow: 1px 1px 1px var(--shadowColor);
	border-radius: 2px;
	width:32px;
	height:32px;
}
div.microcontainer:hover {
	-webkit-transform: scale(2);
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;
	z-index: 10;
	position:relative; /* für z-index  */
}

/* Icon Hi Res */
img.HiResIcon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

div.microcontainer .HiResIcon{
	width: 8px;
	height: 8px;
}

div.selected {
	background: url(../resources/images/check.png) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

div.picOverlay {
	position: absolute;
}

div.thumbcontainer div.picOverlay {
	width:128px;
	height:128px;
}

div.microcontainer div.picOverlay {
	width:32px;
	height:32px;
}

/* Cover Check Overlay */

/* Für die Fotogalerie */
div.coverContainer{
	display:inline-block;
}

div.coverOverlay {
	position:absolute;
	width:250px;
	height:166px;
	margin:4px;
	border-radius: 4px;
}

/* Sync Icon */
div.picOverlay  img.sync {
	position: absolute;	
}
div.thumbcontainer div.picOverlay  img.sync {
	width: 22px;
	height: 22px;
	left: 3px;
	bottom: 3px;
}
div.microcontainer div.picOverlay img.sync {
	width: 11px;
	height: 11px;
	left: 1px;
	bottom: 1px;
}

/* VETO */
div.veto {
	background-image: url(../resources/images/veto.png);
	background-size: 128px 128px;
}
div.microcontainer div.veto {
	background-size: 32px 32px;
}
div.vetoPreview {
	position: absolute;
	background-image: url(../resources/images/veto-full.png);
	background-size: 324px 252px;
	width: 324px;
	height: 252px;
}

.preview {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	min-height:120px;
	background-color: #EEEEEE;
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 2px var(--shadowColor);
	border-radius: 3px;
}

input, textarea {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	background-color: #e9f2f9;
	background-color: var(--linkColorBehindText);
}

input[type="radio"]:checked, input[type="checkbox"]:checked {
	background-color: #2580CB;
	border: 1px solid black;
}

div.box h3.hide {
	display: none;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], select, textarea{
	border: 1px solid #2580CB;
	height: 34px;
	width: 100%;
	min-width: 50px;
	border-radius: 4px;
	font-size: 16px;
	padding: 4px 8px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-family: "PT Sans",sans-serif;
    color: #200;
    color: var(--textColor);
    background-color: #e9f2f9;
    background-color: var(--linkColorBehindText);
}

optgroup {
	color: #200;
	color: var(--textColor);
}

input[type="text"]:disabled {
	background-color: #ccc;
}

/* Date Picker */
input.date::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
input.date::-moz-placeholder { /* Firefox 19+ */
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
input.date:-ms-input-placeholder { /* IE 10+ */
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
input.date:-moz-placeholder { /* Firefox 18- */
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
}
input.date {
	max-width: 200px;
}

textarea {
	height: 80px;
}

img.sky {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#216faf+0,66bcff+100 */
	background: #216faf; /* Old browsers */
	background: -moz-linear-gradient(top, #216faf 0%, #66bcff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #216faf 0%,#66bcff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #216faf 0%,#66bcff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#216faf', endColorstr='#66bcff',GradientType=0 ); /* IE6-9 */
}

h1.page {
	text-overflow: ellipsis;
}

img.eventSign {
	width: 400px;
	height: 90px;
}

/* MOBILE WEICHE */
@media all and (max-width: 639px) {
	iframe.autosize {
		width: 100%;
		height: 350px;
	}
	
	h2, h1.page {
		font-family: 'PT Sans Narrow', sans-serif;
	}
	
	div.map {
		width: 100%;
		height: 200px;
	}
	
	.bigView {
		display: none;
	}
	
	img.bigWeather {
		width: 32px;
		height: 32px;
		border-width: 2px;
		border-style: solid;
		background-color: #2580CB;
	}
	
	/* Homescreen Icons */
	div.box h3 img.svg {
		width: 60px;
		height: 60px;
	}
	div.box h3 {
		display: inline-block;
		vertical-align: top;
		text-align: center;
		margin: 3px 0px;
	}
	div.box h3 div.label {
		font-size: 8px;
	}
	div.box div.label img.HiResIcon {
		width: 8px;
		height: 8px;
	}
	.flexbox {
		flex-direction: column;
	}
	img.eventSign {
		width: 200px;
		height: 45px;
	}
	select.pictures {
		width: 210px;
	}
}

@media all and (min-width: 640px) {
	iframe.autosize {
		width: 100%;
		height: 600px;
	}
	
	div.map {
		width: 100%;
		height: 300px;
	}
	.preview {
		min-height:360px;
	}
	.smallView {
		display: none;
	}
	img.bigWeather {
		width: 64px;
		height: 64px;
		border-width: 2px;
		border-style: solid;
		background-color: #2580CB;
	}
	.wordWidthBig {
		min-width: 130px;
	}
	
	/* Homescreen Icons */
	div.box div.label {
		display: inline;
	}
	
	/* das Fav-Icon in der Detailansicht */
	img.maxIcon {
		width: 32px;
		height: 32px;
	}
	
	/* Camera - Overlay */
	img.topFav {
		width: 8px;
		height: 8px;
		vertical-align: top;
	}
	
	select.pictures {
		width: 300px;
		max-width: 500px;
	}
}

/* Eingabefelder: ENDE */

/* Die ungesehen Marker */
.unseenCount {
	color: white;
	background-color: red;
	font-size: 11px;
	font-weight: normal;
	padding-left: 4px;
	padding-right: 4px;
	text-shadow: none;
	border-radius: 30px;
	margin-right: 3px;
	vertical-align: text-top;
}

/* und die zugehörigen TRs */
tr.unseen {
	border-left: 1px solid red;
	border-right: 1px solid red;
}

/* Formulare, die mit panelGrid erstellt wurden und normale Formulare repräsentieren */
.panelForm td {
	vertical-align: top;
}

/* Formatierung des eigenen Nicknames */
.me {
	font-style: italic;
}

/* Formatierung des Organisators */
.org {
	font-weight: bold;
}

/* Formular-Pflichtfeld */
.mandatory {
	font-weight: bold;
}

img.ButtonImage {
	width: 32px;
	height: 32px;
	vertical-align: top;
}

/* Billard-Kugel Style */
.billard {
	color: #200;
	color: var(--textColor);
	margin: 5px 5px 5px 0px;
	border-radius: 7px;
	border-color: #AAAAAA;
	border-color: var(--fineLineBeforeBg);
	border-style: none;
	border-width: 1px;
	padding: 2px 5px 2px 5px;
	white-space: nowrap;
}

/* Participation Hintergrundfarben */

.invited {
	background-color:rgba(128, 128, 128, 0.5);
}
.waitlist {
	background-color:rgba(128, 128, 128, 0.5);
}
.cancelled {
	background-color: rgba(255, 100, 100, 0.5);
}
.requested {
	background-color: rgba(255, 255, 0, 0.5);
}
.booked {
	background-color: rgba(0, 255, 0, 0.5);
}

/* ICONS */
.svg {
	vertical-align: text-bottom;
}
.svg-mini {
	width: 20px;
	height: 20px;
}
.svg-midi {
	width: 28px;
	height: 28px;
}
.svg-normal {
	width: 40px;
	height: 40px;
}

.svg-large {
	width: 128px;
	height: 128px;
}

svg.wind {
	border-radius: 20px;
	padding: 1px;
	vertical-align: bottom;
}

table.weather > tbody > tr:nth-child(odd) svg.wind {
	background-color: rgba(230,230,230,1);
}
table.weather > tbody > tr:nth-child(even) svg.wind {
	background-color: rgba(250,250,250,1);
}

.detect-url, .url-detected{
	/* lange Wörter umbrechen */
	word-wrap: break-word;
	/* Umbruch behalten */
	white-space:pre-line;
	font-style: italic;
	/* Google Webfont has broken italic ligatures: */
	font-variant-ligatures: none;
	-webkit-font-feature-settings:"liga" 0; 
	font-feature-settings:"liga" 0;
	text-rendering: optimizeSpeed;
}

/* Die Avatare */
img.avatar {
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
	border-radius: 10px;
}

img.avatar.large {
	width:64px;
	height:64px;
	border-radius: 64px;
}

/* Für die Minikarten */
.shadow {
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	box-shadow: 2px 2px 5px var(--shadowColor);
	border-radius: 3px;
}

/* Glow-Effekt */
.glow {
     -webkit-animation: glow 1s infinite alternate linear; 
     -moz-animation: glow 1s infinite alternate linear; 
}

@-webkit-keyframes glow {
    0%   { color: gray; } 
    50%  { color: red; }
    100%  { color: gray; }
}

@-moz-keyframes glow {
    0%   { color: gray; } 
    50%  { color: yellow; }
    100%  { color: gray; }
}

/* z.B. für die Projekte-Seite */
@media screen {
	.subHeader {
		position: sticky;
		position: -webkit-sticky;
		position: -moz-sticky;
	}
}
h3.subHeader {
	margin-left: -14px;
	margin-right: -14px;
	padding-left: 10px;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color:  /* lightColor */ #CDB99C;
	background-color: var(--barColor);
}

/* Google Map Style */
.gmap {
	border: 1px solid #CDB99C;
	width:100%;
	padding-bottom:56%;
	position:relative;
}
img.clickable {
	border: 2px solid #2580CB;
	border-radius: 8px;
	padding: 2px;
}

/* Eventinfos */
table.eventinfos th {
	font-weight: normal;
	color: #888888;
}

/* GOOGLE MAP */

a.mapControl{
	background-color: white;
	padding: 2px;
	margin: 10px;
	width: 30px;
	height: 30px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	border: 1px solid #888;
	border-radius: 3px;
}

a.mapControl:hover {
	background-color: #DDDDDD;
}

a.mapControl img.small {
	padding: 7px;
}

/* picture.xhtml */
.navButton {
	white-space: nowrap;
	text-shadow: 1px 1px white;
	text-shadow: 1px 1px var(--bgColor);
}
.navButton a {
	display:block;
	width:100%;
	height:100%;
}

/* Allgemeine Anordnung */
.nowrap {
	white-space: nowrap;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

/* Für automatisch umbrechende Layouts */
.floating {
	display: inline-block;
	vertical-align: top;
}

@media print {
	/* Der Viewport ist beim Drucken nämlich sehr schmal */
	.floating {
		max-width: 400px;
	}	
}

/* Überschriften, die mal fett und mal nicht fett sein sollen */
.ht-true {
	font-weight: bold;
}
.ht-false {
	font-weight: normal;
}
.ht-false img.svg {
	opacity: 0.3;
}

/* Wetter */
img.weather {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	border-width: 2px;
	border-style: solid;
	background-color: #2580CB;
}
table.weather {
	display: inline-block;
	vertical-align: middle;
}
table.weather td {
	vertical-align: middle;
	padding: 0px 3px;
}
table.weather td.icon {
	padding: 0px 0px 3px 0px;
}
table.weather td.degrees {
	white-space: nowrap;
	text-align: center;
	font-size: 95%;
	color: gray;
}

table.weather .veryhot {
	color: #d57039;
	font-weight: bold;
}
img.min-veryhot {
	border-left-color: #d57039;
	border-bottom-color: #d57039;
}
img.max-veryhot {
	border-top-color: #d57039;
	border-right-color: #d57039;
}

table.weather .hot {
	color: #dc9c1c;
	font-weight: bold;	
}
img.min-hot {
	border-left-color: #dc9c1c;
	border-bottom-color: #dc9c1c;
}
img.max-hot {
	border-top-color: #dc9c1c;
	border-right-color:#dc9c1c;
}

table.weather .warm {
	color: #d6b717;
	font-weight: bold;
}
img.min-warm {
	border-left-color: #d6b717;
	border-bottom-color: #d6b717;
}
img.max-warm {
	border-top-color: #d6b717;
	border-right-color: #d6b717;
}

table.weather .chill {
	color: #aec84d;
	font-weight: bold;
}
img.min-chill {
	border-left-color: #aec84d;
	border-bottom-color: #aec84d;
}
img.max-chill {
	border-top-color: #aec84d;
	border-right-color: #aec84d;
}

table.weather .cold {
	color: #77a9b3;	
	font-weight: bold;
}
img.min-cold {
	border-left-color: #77a9b3;
	border-bottom-color: #77a9b3;
}
img.max-cold {
	border-top-color: #77a9b3;
	border-right-color: #77a9b3;
}

table.weather .freeze {
	color: #76bbe4;
	font-weight: bold;
}
img.min-freeze {
	border-left-color: #76bbe4;
	border-bottom-color: #76bbe4;
}
img.max-freeze {
	border-top-color: #76bbe4;
	border-right-color: #76bbe4;
}

table.weather .subfreeze {
	color: #adbdc4;
	font-weight: bold;
}
img.min-subfreeze {
	border-left-color: #adbdc4;
	border-bottom-color: #adbdc4;
}
img.max-subfreeze {
	border-top-color: #adbdc4;
	border-right-color: #adbdc4;
}

/* negativ */
.neg {
	color: red;
	color: var(--negativeColor);
}
/* positiv */
.pos {
	color: #0b0;
	color: var(--positiveColor);
}

/* Ausgaben */
.unconfirmed {
	color: gray;
}
.my {
	font-weight: bold;
}
.number {
	text-align: right;
}

.line {
	border-right: 1px dashed gray;
}

.wordWidth {
	min-width: 100px;
}

.grayscale {
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}

/* Der Button oben rechts */
div.rightCorner {
	position: relative;
	left: 40px;
}

div.rightCorner > div {
	padding-right: 12px;
	position: absolute;
	right:0px;
	z-index: 150; /* > stickyHeader */
}

@media print {
	div.rightCorner {
		display:none;
	}
}

/* Für die Event-Tabelle */
table.eventTable {
	width:100%;
	border-collapse:collapse;
	margin-left:-5px;
}
table.eventTable .hoverRow > td {
	padding: 5px;
}
table.eventTable .fullsize {
	display: block; width: 100%; height: 100%;
}
table.eventTable td.center {
	text-align: center;
}

/* SVG CHARTS */
svg polygon.download {
	fill:/*linkColor*/ #2580CB;
	stroke-width: 0;
}
.download {
	color: /*linkColor*/ #2580CB;
}
svg polygon.upload {
	fill:#0F0;
	fill:var(--positiveColor);
	stroke-width: 0;
}
.upload {
	color: #0F0;
	color: var(--positiveColor);
}
svg polygon.elevation {
	fill: #CDB99C;
}

/* Favicon */
.fav {
	width: 16px;
	height: 16px;
	margin-right: 3px;
	vertical-align: middle;
}

/* Färbt alles unterhalb dieses Elements in Alarmfarbe ein */
.alert, .alert a:hover, .alert a, .alert a:visited {
	color: red;
}

.cite {
	font-style: italic;
	color: #444;
}

div#fullscreen {
	/* overflow: hidden; picture overflow without scrutinizing sticky headers */
}

/* Fullscreen Mode */
:-webkit-full-screen {
	color: white;
    background-color:black;
    overflow: auto;
    width:100%;
    height:100%;
}
:-webkit-full-screen .preview {
	width:auto;
	box-shadow:none;
	background-color: black;
}
:-webkit-full-screen table.dataTable, :-webkit-full-screen #Form\:comments, :-webkit-full-screen .hideinfullscreen {
	display: none;
}
:-webkit-full-screen .navButton {
	text-shadow: none;
}
:-webkit-full-screen a, :-webkit-full-screen h2 {
	color:white;
}
:-webkit-full-screen .maximize {
	height: 100%;
}

/* MOZ-Fullscreen */
 
:-moz-full-screen {
	color: white;
    background-color:black;
    overflow: auto;
    width:100%;
    height:100%;
}
:-moz-full-screen .preview {
	width:auto;
}
:-moz-full-screen table.dataTable, :-moz-full-screen #Form\:comments, :-moz-full-screen .hideinfullscreen {
	display: none;
}
:-moz-full-screen .navButton {
	text-shadow: none;
}
:-moz-full-screen a, :-moz-full-screen h2 {
	color:white;
}
:-moz-full-screen .maximize {
	height: 100%;
}

/* MS-Fullscreen */
 
:-ms-fullscreen {
	color: white;
    background-color:black;
    overflow: auto;
    width:100%;
    height:100%;
}
:-ms-fullscreen .preview {
	width:auto;
}
:-ms-fullscreen table.dataTable, :-ms-fullscreen #Form\:comments, :-ms-fullscreen .hideinfullscreen {
	display: none;
}
:-ms-fullscreen .navButton {
	text-shadow: none;
}
:-ms-fullscreen a {
	color:white;
}
:-ms-fullscreen .maximize {
	height: 100%;
}


/* DEFAULT-Fullscreen */
 
:fullscreen {
	color: white;
    background-color:black;
    overflow: auto;
    width:100%;
    height:100%;
}
:fullscreen .preview {
	width:auto;
}
:fullscreen table.dataTable, :fullscreen #Form\:comments, :fullscreen .hideinfullscreen {
	display: none;
}
:fullscreen .navButton {
	text-shadow: none;
}
:fullscreen a {
	color:white;
}
:fullscreen .maximize {
	height: 100%;
}

hr {
	border: 0;
	color: /*lightColor*/#CDB99C;
	color: var(--barColor);
	background-color: /*lightColor*/#CDB99C;
	background-color: var(--barColor);
	height: 2px;
}

.ui-widget-content .ui-state-focus {
	font-weight: normal;
}

#Tleft, #Tright {
	position:absolute;
	overflow: hidden;
}
#Tleft > img, #Tright > img {
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
	box-shadow: 3px 3px 2px var(--shadowColor);
	border-radius: 3px;
}
#toggleThumbs {
	display:none;
	width:100%;
}

/* AJAX Spinner */
div#spinner {
	pointer-events:none;
	display:none;
	width: 128px;
	height: 128px;
	position: fixed;
	top:50%;
	left:50%;
	margin-left:-64px;
	margin-top:-64px;
	z-index:9999;
	background-image:url('../resources/images/spinner256.png');
	background-size: 128px 128px;
	background-repeat: no-repeat;
	opacity:0.8;
}
html.loading {
	cursor: wait;
}
a.loading {
	cursor: wait;
}

/* STATI */
span.CANCELLED {
	opacity:0.5;
}

/* Groupies */
img.groupie {
	width: 32px;
	height: 32px;
}
img.groupie.mini {
	width: 16px;
	height: 16px;
}

/* Popup */
img.popup-anchor {
	width:25px;
	height:25px;
	pointer-events: none;
}

.dropdown {
    display: inline-block;
    margin: 0px 3px;
    position: relative;
    vertical-align: middle;
}

.dropdown .dropdown_button {
    cursor: pointer;
    width: auto;
    display: inline-block;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: bold;
    color: #2580CB;
    line-height: 13px;
    text-decoration: none !important;
    padding-top: 1px;
    // background: white;
}

.dropdown input[type="checkbox"]:checked +  .dropdown_button {
    color: white;
    background: #200;
    background: var(--textColor);
    border-radius: 3px;
}

.dropdown input[type="checkbox"] + .dropdown_button .arrow {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 5px solid #6B7FA7;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }

.dropdown .dropdown_content {
	right:0px;
    position: absolute;
    border: 1px solid #777;
    padding: 0px;
    background: white;
    background: var(--bgColor);
    margin: 0;
    display: none;
    z-index: 200;
}

.bottomLeft .dropdown .dropdown_content {
	left:0px;
	bottom:32px;
	right: auto;
	z-index: 200;
}

.dropdown .dropdown_content li {
    list-style: none;
    margin-left: 0px;
    line-height: 32px;
    border-top: 1px solid #FFF;
    border-top: 1px solid var(--bgColor);
    border-bottom: 1px solid #FFF;
    border-bottom: 1px solid var(--bgColor);
    margin-top: 1px;
    margin-bottom: 1px;
    background-color: #eee;
    background-color: var(--secondBgColor);
}

.dropdown .dropdown_content li:hover {
    border-top-color: black;
    border-bottom-color: black;
    background: /*linkColor*/#2580CB;
    background: var(--linkColor);
}

.dropdown .dropdown_content li a {
    display: block;
    padding: 2px 7px;
    padding-right: 15px;
    color: #2580CB;
    color: var(--linkColor);
    text-decoration: none !important;
    white-space: nowrap;
}

.dropdown .dropdown_content li:hover a {
    color: white;
    text-decoration: none !important;
}

.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }

.dropdown input[type="checkbox"].popup { display: none }

.ui-autocomplete-loading {
	background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}

/* iCal Download Link */
a.iCalLink {
	color: white;
	background-color: /*linkColor*/#2580CB;
	background-color: var(--linkColor);
	padding: 0px 1px 0px 2px;
	font-size: 12px;
	border-radius: 5px;
}
a.iCalLink:hover, a.iCalLink:VISITED {
	color: white;
	text-decoration: none;
}

/* for suggestions */
td.fav, th.fav {
	background-color: rgba(0,255,0,0.15);
}

/* Doku Boxen */
div.doku {
	background-color: #FFFFDD;
	background-color: var(--dokuBgColor);
	width: 100%;
	border: 2px dashed black;
	border: 2px dashed var(--textColor);
	border-radius: 20px;
	padding: 10px;
	box-sizing: border-box;
	overflow: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

div.doku div {
	display:table-cell;
	vertical-align:middle;
	font-size: 150%;
}

@media all and (max-width: 549px) {
	div.doku div {
		font-size: 120%;
	}
}

html.fullMap #stickyHeader {
	display: none;
}
html.fullMap div.gmap {
	border: none;
	position: fixed;
	padding: 0;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
}
html.fullMap div.dropdown {
	display: none;
}

/* Places Search */
#pac-input {
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 6px var(--shadowColor);
  background-color: rgba(255, 255, 255, 0.5);
  margin: 10px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  max-width: 45%;
}

#pac-input:focus {
  border-color: #4d90fe;
  background-color: #FFF;
}

.alphabeticalHeader {
	color: grey;
	padding: 5px;
}

#sortableList .handle {
	background-color: #888;
	float: right;
	color: #fff;
	width: 30px;
	text-align: center;
	border-radius: 5px;
	margin-left: 10px;
}

.projectPlaceholder {
	background-color: yellow;
}

.flexbox {
	display: flex;
	flex-wrap: wrap;
	margin: -10px -10px 0 0;
}

.center {
	text-align: center;
}

.selectionModeWindow {
	background-color:rgba(255,255,255, 0.5);
	padding:5px 10px 5px 10px;
	margin: 5px;
	border-radius: 10px;
	z-index:1;
	border: 1px solid black;
	border: 1px solid var(--textColor);
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
	box-shadow: 0 3px 7px var(--shadowColor);
}
img.repetition {
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
}
span.passed {
	text-decoration: line-through;
}

table.role {
	margin-bottom:10px;
	background-color: #f5f1eb;
	background-color: var(--secondBgColor); //#f5f1eb
	border-radius: 5px;
}
table.role td {
	padding-left: 5px;
}

/* Vertical Table Header for expenses */
.vertical {
	writing-mode:vertical-lr;
	white-space: nowrap;
	transform: rotate(180deg);
	min-width: 20px;
	padding-bottom: 5px;
}
.vertical img {
    vertical-align: middle;
    transform: rotate(-180deg);
}

iframe.trailer {
	 width: 296px;
	 height: 167px;
}

@media all and (min-width: 800px) {
	iframe.trailer {
		width: 532px;
		height: 300px;
	}	
}