/* 
Stylesheet für wfelder.de
Styles für 2017ff
Copyright 2013-2017 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; }

.h0 { font: 6em/0.7em "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: normal; word-spacing: normal; }
.h1 { font: 1.15em/120% "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; }
.h2 { font: 3em/100% "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 600; letter-spacing: normal; word-spacing: normal; }
.h3 {	font: 1.5em/125% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #000000; }
.rom1 { font: 6em/0.7em "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: -5px; word-spacing: normal; }
.rom2 { font: 6em/0.7em "PT Serif", Georgia, "Times New Roman", Times, serif; font-weight: 400; letter-spacing: 90%; word-spacing: normal; }
.rom3 { font: 3em/110% "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 600; letter-spacing: normal; word-spacing: normal; }
.rom4 { font: 4.2em/0.7em "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 400; letter-spacing: -5px; word-spacing: normal; }
.rom5 { font: 4.3em/0.7em "PT Serif", Georgia, "Times New Roman", Times, serif; font-weight: 400; letter-spacing: 90%; word-spacing: normal; }
.headline { font: 4em/100% "PT Serif", Georgia, "Times New Roman", Times, serif; font-weight: 600; letter-spacing: normal; word-spacing: normal; }
.subsubheadline { font: 1.4em/140% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #000000; }
.menu { font: 1.3em/140% "Open Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; font-weight: 400; }
.titel { font: 1em/120% "Open Sans", "Lucida Grande", Verdana, Arial, Helvetica, serif; color: #999; }
.text { font: 1.1em/140% "PT Serif", Georgia, "Times New Roman", Times, serif; color: #000000; letter-spacing: normal; word-spacing: 1px; }
.text-sserif { font: 0.8em/130% "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 500; }
.text-sserif2 { font: 1em/140% "Open Sans", Verdana, Arial, Helvetica, sans-serif; font-weight: 500;}
.text-anmerkungen { font: 0.65em/140% "Open Sans", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; word-spacing: normal; font-weight: 600; }
.text-klein { font: 0.5em/120% "Open Sans", Verdana, Arial, Helvetica, sans-serif; word-spacing: normal; }
.datum { font: 2.75em/85% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #000000; font-weight: 700; }
.datum-wiederholt { font: 2.75em/85% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #bbbbbb; font-weight: 700; }
.datum-rot { font: 2.75em/85% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #cc0000; font-weight: 700; }
.tag { font: 0.9em/200% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #666666; font-weight: 600; }
.uhrzeit { font: 2.25em/100% "Open Sans", Verdana, Arial, Helvetica, sans-serif; 
	color: #555555; font-weight: 700; padding-bottom: 3px; }
.ort { font: 0.9em/150% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #000000; }
.browse { font: 2em/100% "Open Sans", Verdana, Arial, Helvetica, sans-serif; 
	color: #555555; font-weight: 600; }
.wiederholen { opacity: .15; }
.kalender { font: 1.5em/100% "Open Sans", 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;
}

.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 ); /* IE6-9 */
	}

.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; */
	}


#kopf-wfelder { 
	width: device-width; 
	border-bottom: 1px solid #cccccc;
	z-index: 1; 
	}
#title-wfelder { padding: 20px 0 20px 0; width: 546px; z-index: 2; }

/* Öffentlich/nicht öffentlich-Fläche unter dem Titel */
#pre-inhalt { 
	width: device-width; 
	padding-top: 20px;
	padding-bottom: 20px;
	background: #2980b9;
	border: 0;
	z-index: 1; 
	}

section {
	position: relative;
	padding: 3em 10%;
	background: #2980b9;
	color: #fff;
	text-align: center;
	border: 0;
}

section h2 {
	margin: 0;
	padding: 0;
	font-size: 2.8em;
	font-weight: 400;
	line-height: 1.2em;
	color: #fff;
}

section p {
	color: #333333;
	font-size: 1.3em;
	line-height: 1.5;
}

.col-1 {
	width: 550px;
}

.col-2 .column {
	width: 240px;
}

.column {
	display: inline-block;
	vertical-align: middle;
	padding-left: 15px;
	padding-right: 15px;
}

.icon {
	display: block;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: rgba(0,0,0,0.1);
	color: #fff;
	text-align: center;
	font-size: 7em;
	line-height: 2em;
	margin: 0 auto;
	cursor: pointer;
}

.color {
	background: #3498db;
}

section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

/* Triangle */
.ss-triangle-bottom::after {
	left: 50%;
	width: 80px;
	height: 80px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
	bottom: -40px;
	z-index: 10;
	background: inherit;
}

#inhalt { width: 550px; z-index: 99; }
#inhalt-auf-blau { width: 550px; z-index: 99; }

#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; }

#footer {
	width: device-width;
	/* border-top: 1px solid #cccccc; */
	padding: 20px 0 20px 0;
	z-index: 3;
	background-color: #eeeeee;
}

#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% "Open Sans", Verdana, Arial, Helvetica, sans-serif; color: #aaaaaa; 
	}

#footer a:link { color: #000099; text-decoration:none; }
#footer a:visited { color: #000099; text-decoration:none; }
#footer a:hover { color: #cc0000; }
#footer a:active { color: #cc0000; }


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

#itunes table { 
	width: 546px;
	border: 0px;
	padding: 0px;
	}

#itunes table a, #itunes table a:hover, #itunes table a:visited, #itunes table a:active {
	padding: 0;
	margin: 0;
	text-decoration: none;
	display: block;
}

#itunes tr {
	font: 1em/140% "Open Sans", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	text-align: left;
	vertical-align: top;
	color: #ffffff;
	}

#itunes tr,#itunes th,#itunes td {
	padding: 8px;
	border-top: 0;
	border-right: 0;
	border-bottom: 1px solid #bbbbbb;
	border-left: 0;
}

#itunes th {
	font: .9em/250% "Open Sans", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	font-weight: 600;
	vertical-align: bottom;
	align: left;
	color: #ffffff;
	background-color: #1b3647;
}

#itunes tr a {
	color: #000000;
}

/* #itunes tbody tr:hover td, #itunes tbody tr:hover a {
	background-color: #bbbbbb; 
	text-decoration: none;
	box-shadow:0px 0px 15px #999999; 
}  

#itunes tbody tr:hover {
	background-color: transparent;
	text-decoration: none;
}  */

#itunes p { 
	font: .9em/140% "Open Sans", "Lucida Sans", Verdana, Arial, Helvetica, sans-serif;
	font-weight: 400;
	text-align: left;
}

#itunes tr.odd {
	color: #000000;
	background-color: #eeeeee;
}

#itunes tr.even {
	color: #000000;
	background-color: #dddddd;
}

/* Nicht öffentliche Veranstaltungen */

#itunes tr.n_oe {
	color: #000000;
	background-color: rgba(255, 255, 140, 0.2);;
}

/* Veranstaltungen zum Ferien(s)pass */

#itunes tr.ferienspass {
	color: #000000;
	background-color: #b4df5b;
}

/* einfache Listen */

#liste table { 
	width: 546px;
	border: 0px;
	padding: 0px;
	}

#liste tr,#liste th,#liste td {
	padding: 5px;
	border: 0px;
	}

#liste tr.hell {
	color: #000000;
	background-color: #e8e8e8;
	}

#liste tr.dunkel {
	color: #000000;
	background-color: #d8d8d8;
	}

#adressliste table { 
	width: 100%;
	border: 0px;
	padding: 0px;
	}

/* Seiten-Auswahl */

#auswahl table { 
	}

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

#auswahl td { width: 100%;
	}

#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: '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% "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;
}