/* 
Stylesheet für wfelder.de
Copyright 2013-2023 Heino Hansen
*/

/* Reparaturarbeiten... Damit Textzeilen mit <sup> und <sub> die Zeilenhöhe nicht beeinflussen */

sub, sup { 
	font-size: 65%;
	font-weight: 600;
	line-height: 0; 
	position: relative; 
	vertical-align: baseline; 
}
sup { top: -0.6em; 
}
sub { bottom: -0.25em; 
}

/* Jetzt geht’s los, jetzt ... */

a:link { color: #000099; text-decoration:underline; }
a:visited { color: #000099; text-decoration:underline; }
a:hover { color: #cc0000; }
a:active { color: #cc0000; }
a:none { text-decoration:none; border-bottom: 0px; }

.h1 { font: 4em/110% "Roboto", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; }
.h2 { font: 2.5em/120% "Roboto", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; }
.h3 { font: 1.7em/125% "Roboto", Verdana, Arial, Helvetica, sans-serif; font-weight: 400 }
.h4 { font: 1.5/125% "Roboto", Verdana, Arial, Helvetica, sans-serif; font-weight: 700 }
.headline { font: 4em/100% Georgia, "Times New Roman", Times, serif; font-weight: 700; letter-spacing: normal; word-spacing: normal; }
.subsubheadline { font: 1.4em/140% Roboto, Verdana, Arial, Helvetica, sans-serif; color: #000000; }
.menu { font: 1.6em/140% Roboto, Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; font-weight: 400; }
.titel { font: 1em/120% Roboto, Verdana, Arial, Helvetica, serif; color: #999; }
.text { font: 1.1em/160% Roboto, Verdana, Arial, Helvetica, sans-serif; color: #000000; font-weight: 400; letter-spacing: normal; word-spacing: 1px; }
.text-liste { font: .95em/160% Roboto, Verdana, Arial, Helvetica, sans-serif; font-weight: 400; }
.text-serif { font: 1.05em/160% Georgia, "Times New Roman", Times, serif; color: #000000; }
.text-sserif { font: 0.85em/150% "Roboto", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; }
.text-sserif2 { font: 1em/140% "Roboto", Verdana, Arial, Helvetica, sans-serif; font-weight: 400;}
.text-anmerkungen { font: 0.65em/140% "Roboto", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; word-spacing: normal; font-weight: 700; }
.text-klein { font: 0.5em/120% "Roboto", Verdana, Arial, Helvetica, sans-serif; word-spacing: normal; }
.datum-wiederholt { font: 2.75em/85% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: #bbbbbb; font-weight: 700; }
.datum-rot { font: 2.75em/85% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: #cc0000; font-weight: 700; }
.tag { font: 0.8em/150% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: #666666; font-weight: 700; }
.uhrzeit { font: 2em/125% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: black; font-weight: 700; }
.ort { font: 0.9em/150% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: #000000; }
.browse { font: 2em/100% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: #555555; font-weight: 700; }
.wiederholen { opacity: .15; }
.kalender { font: 1em/100% "Roboto", Verdana, Arial, Helvetica, sans-serif; color: #666666; font-weight: 400; letter-spacing: 2px; align: center;}

.ferientag { background-color: #abd1ef; }
.ferientag-feiertag { background-color: #deeffc; }

.bildrahmen { 
	margin:8px 0px 12px 0px;
	padding: 0px; 
	border: solid 5px #ffffff; 
	box-shadow:2px 3px 12px #666666;
}

.hellgrau { color: #aaaaaa; }
.grau { color: #888888; }
.dunkelgrau { color: #555555; }
.rot { color: #C00000; }
.dunkelgruen { color: #007733; }
.weiss { color: #ffffff; }

.uni-body { background-color: #ffffff; border: 0px; padding: 0px; margin: 0px; } 
.gradient-blau {
	border: 0px; padding: 0px; margin: 0px; 
	background: #44a0fc; /* Old browsers */
	background: -moz-linear-gradient(left,  #44a0fc 0%, #3781cc 81%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#44a0fc), color-stop(81%,#3781cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #44a0fc 0%,#3781cc 81%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #44a0fc 0%,#3781cc 81%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #44a0fc 0%,#3781cc 81%); /* IE10+ */
	background: linear-gradient(to right,  #44a0fc 0%,#3781cc 81%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44a0fc', endColorstr='#3781cc',GradientType=1 ); 
	}

.gradient-hellblau {
	border: 0px; padding: 0px; margin: 0px; 
	background: #abd1ef; /* Old browsers */
	background: -moz-linear-gradient(left,  #abd1ef 15%, #7fbce7 80%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(15%,#abd1ef), color-stop(80%,#7fbce7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  #abd1ef 15%,#7fbce7 80%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #abd1ef 15%,#7fbce7 80%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  #abd1ef 15%,#7fbce7 80%); /* IE10+ */
	background: linear-gradient(to right,  #abd1ef 15%,#7fbce7 80%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abd1ef', endColorstr='#7fbce7',GradientType=1 ); /* IE6-9 */
	/* border-bottom: 1px solid #ffffff; */
	}

.white-space {
	border-bottom: 5px solid #ffffff;
	}
	
#kopf-wfelder { 
	width: device-width; 
	border-bottom: 1px solid #cccccc;
	z-index: 1; 
	}
	
#inhalt a:link 		{ color: #000099; text-decoration:none; }
#inhalt a:visited 	{ color: #000099; text-decoration:none; }
#inhalt a:hover 	{ color: #cc0000; text-decoration:none; }
#inhalt a:active 	{ color: #000000; text-decoration:none; }
#inhalt a:none 		{ color: #000000; text-decoration:none; border-bottom: 0px; }

#inhalt-auf-blau a:link 	{ color: #d7ddff; text-decoration:none; }
#inhalt-auf-blau a:visited 	{ color: #d7ddff; text-decoration:none; }
#inhalt-auf-blau a:hover 	{ color: #cc0000; text-decoration:none; }
#inhalt-auf-blau a:active 	{ color: #000000; text-decoration:none; }
#inhalt-auf-blau a:none 	{ color: #000000; text-decoration:none; border-bottom: 0px; }

#freunde a:link 	{ color: #000099; text-decoration:none; }
#freunde a:visited 	{ color: #000099; text-decoration:none; }
#freunde a:hover 	{ color: #cc0000; text-decoration:none; }
#freunde a:active 	{ color: #000000; text-decoration:none; }
#freunde a:none 	{ color: #000000; text-decoration:none; border-bottom: 0px; }

#footer {
	width: device-width;
	padding: 20px 0 20px 0;
	z-index: 3;
	background-color: #eeeeee;
}

#footer a:link 		{ color: #000000; text-decoration: none; }
#footer a:visited 	{ color: #000000; text-decoration: none; }
#footer a:hover 	{ color: #cc0000; }
#footer a:active 	{ color: #cc0000; }
#footer a:none 		{ color: #000000; text-decoration: none; border-bottom: 0px; }

#kreis {
	background-color: #0066cc;
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	border-bottom-left-radius: 50%;
	border-bottom-right-radius: 50%;
	font: 1.5em/125% Roboto, "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #aaaaaa; 
	}

/*  Tabellen im alten iTunes-Stil nach den alten Stilvorlagen von Michael Preidel, qxm.de */

/* Seiten-Auswahl */

#auswahl table { 
	}

#auswahl a:link, #auswahl a:hover, #auswahl a:visited, #auswahl a:active {
	color: #ffffff;
	text-decoration: none;
	padding-left: 10px;
	display: block;
	}

#auswahl tr, #auswahl th, #auswahl td {
	border: 0px;
}

#auswahl tbody td:hover, #auswahl tbody td:hover a {
/*	background-color: #1691be; */
	opacity: .8;
	color: #ffffff;
	text-decoration: none;
	z-index: 1;
}

button {
	border: none;
	padding: 0.6em 1.2em;
	color: #fff;
	font-family: Roboto, 'Open Sans', Myriad, Arial, sans-serif;
	font-size: 1em;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-block;
	margin: 3px 2px;
	border-radius: 3px;
}

button:hover {
	background: #cc0000;
}

.button-green { background: #009933; }
.button-red { background: #9c1e18; }

.md-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255,255,255,0.7);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 100ms ease-in;
	-moz-transition: opacity 100ms ease-in;
	transition: opacity 100ms ease-in;
	pointer-events: none;
}

.md-modal:target {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.md-modal > div {
	width: 600px;
	position: relative;
	margin: 10% auto;
	background: #ffcc00; /* e68a00 */
	}

.md-modal-header {
	font: 2.5em/120% Roboto, "Open Sans", Arial, Helvetica, sans-serif; font-weight: 400;
	color: white; 
	background: #505050;
	padding: 8px 20px 8px 20px;
	}
	
.md-modal-content {
	padding: 5px 20px 13px 20px;
}