@charset "UTF-8";

.mail {
	font-style: italic;
	padding-left: 20px;
	white-space: nowrap;
	background: transparent url(../data/images/icon_mail.png) no-repeat center left;
}

.tel {
	font-style: italic;
	padding-left: 20px;
	white-space: nowrap;
	background: transparent url(../data/images/icon_phone.png) no-repeat center left;
}

.fax {
	font-style: italic;
	padding-left: 20px;
	white-space: nowrap;
	background: transparent url(../data/images/icon_fax.png) no-repeat center left;
}

a[href^="http://"][href*="ttc-muelheim.de"][target="_blank"],
a[href^="https://"][href*="ttc-muelheim.de"][target="_blank"]{
	padding-left: 20px;
	background: transparent url(../data/images/icon_popup.png) no-repeat center left;
}

a:not(.icon)[href^="http://"]:not([href*="ttc-muelheim.de"]),
a:not(.icon)[href^="https://"]:not([href*="ttc-muelheim.de"]){
	padding-left: 20px;
	background: transparent url(../data/images/icon_external.png) no-repeat center left;
}

.centercard
{
	margin-left:5%;
	width:90%;
}

@media screen and (min-width: 800px)
{
	.centercard
	{
		margin-left:10%;
		width:80%;
	}
}
@media screen and (min-width: 1000px) 
{
	.centercard
	{
		margin-left:20%;
		width:60%;
	}
}

.col-container 
{
	color: white;
	display: flex;
	width: 90%;
	flex-wrap: wrap;
	margin-left: 3em;
}

.col 
{
	position:relative;
	width:90%;
	border: #293133 solid 1px;
	background: white;
	box-sizing: border-box;
	border-block: none;
	margin-bottom:1em;
}

@media screen and (min-width: 600px)
{
	.col 
	{
		width:30%;
	}
}

@media screen and (min-width: 800px)
{
	.col 
	{
		width:24%;
	}
}

@media screen and (min-width: 1300px)
{
	.col
	{
		width:14%;
	}
}

.col>.times
{
	color: black;
	position: absolute;
	left: -3em;
	width: 3em;
	height:100%;
}

.col>.times>span
{
	position: absolute;
}

.col-header
{
	background: #293133;
	text-align: center;
	height: 1.5em;
	font-weight: bold;
	font-size: 1em;
}
.col-entry
{
	position: absolute;
	background: #596266;
	width: 100%;
	border-top: #293133 dashed 1px;
    border-bottom: #293133 dashed 1px;
    border-radius: 10px;
}

.col-entry>p
{
	margin: 0;
	margin-left: 5px;
	margin-right: 5px;
}

.fees
{
	display:grid;
}

@media screen and (min-width: 900px)
{
	.fees
	{
		display:grid;
		margin: 0 10%;
	}
}

.oddeven tr:nth-child(even) 
{
	background: #293133;
	color: white;
}

.oddeven tr:nth-child(odd) 
{
	background: #596266;
	color: lightgray;
}

.tooltip
{
	display: inline;
	position: relative;
}

.tooltip:hover:after
{
	background: #333;
	background: rgba(0,0,0,.8);
	border-radius: 5px;
	bottom: 26px;
	color: #fff;
	content: attr(tooltip);
	left: -200px;
	padding: 5px 15px;
	position: absolute;
	z-index: 98;
	width: 300px;
}

.tooltip:hover:before
{
	border: solid;
	border-color: #333 transparent;
	border-width: 6px 6px 0 6px;
	bottom: 20px;
	content: "";
	left: 50%;
	position: absolute;
	z-index: 99;
}