Vorlage:Styles-Startseiten.css: Unterschied zwischen den Versionen

Version vom 16. Dezember 2019, 14:20 Uhr

/*** 	Bei Verwendung dieses css-Styles dürfen keine Tabellenüberschriften mit »!« formatiert werden
	Tabellenlayout: 2-Spaltig, jede 2. Zeile als Überschrift ***/


/*** Formatierungen für Alle ***/

a {
	color: #1b599b;
 	}

a:visited {
	color: #636;
	}


.padding10 td {
  padding: 10px!important;
  }

ul {
	margin: 0 0 0 3.1em;
	list-style: none;
	}

dl {
	/* padding-top: 1em!important;
	padding-bottom: 0px!important; */
	margin-bottom: 0px !important;
	break-inside: avoid;
	margin-top: 1em;
	}


dt {
	margin: 0;
	font-weight: bold;
	margin-bottom: 0em;
	}


dd {
	margin-top: 0.3em;
	margin-bottom: 0;
	}

li::before {
	content: "  ";
	font-family: 'Font Awesome 5 Pro';
	font-size: small;
	}

.spgrid {
	background-color:white;
	color: #222;
	margin: 1em 0em;
	width: 100%;
	}

.spgrid td {
	background-color: #f8f9fa;
	padding: 0.2em 0.1em;
	line-height:1.4;
	}

.spgrid .Leerzeile {
	border-left: 0; 
	border-right: 0; 
	background: white;
	}

.spgrid tr {
	display: grid;
	grid-template-columns: 50% 50%;
	width: 100%;
	}
.spgrid .colspan2 {
	border-right: 0!important;
	}

.startbox-flex {
	display: flex;
	flex-flow: wrap;
	}

.startbox {
	display: block;
	width: 31%;
	margin: 15px;
	background: #fff;
	/* border-top: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1;
	border-left: 1px solid #a2a9b1; */
	/* margin: 10px 5px 0px 5px; */
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
	border-radius: 3px 3px 0px 0px;
	}

.startbox.breit {
	width: calc(64% + 20px - 1em);
	}

.startbox-body-breit {
	column-count: 2;
	column-gap: calc( 2em + 20px);
	column-rule: thin solid rgba(0,0,0,0.1);
	padding: 1em;
	}


.startbox-head {
	background-color: #eaecf0;
	height: 3em;
	padding: 1em;
	}

.startbox-body {
	padding: 1em;
	}

.startbox-body-breit-col {
	width: 45%;
	}



/*** Ende Formatierungen für Alle ***/

/*** Formatierungen Standard (=Monitor) ***/

table { border: 0; }

.wikitable2 tr:nth-child(2n) {
  background: green!important;
  }

.spgrid tr > td:nth-child(1) {
	padding: 15px;
	grid-column: 1 / 2;
	grid-row: 1;
	background-color: #eaecf0;
	/* border-top: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1;
	border-left: 1px solid #a2a9b1; */
	margin: 10px 5px 0px 5px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
	border-radius: 3px 3px 0px 0px;
	}

.spgrid tr > td:nth-child(2) {
	padding: 15px;
	grid-column: 2 / 3;
	grid-row: 1;
	background-color: #eaecf0;
	/* border-top: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1; */
	margin: 10px 5px 0px 5px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
	border-radius: 3px;
	}

.spgrid tr > td:nth-child(3) {
	padding: 15px;
	grid-column: 1 / 2;
	grid-row: 2;
	/* background-color: #f8f9fa;
	border-top: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1;
	border-left: 1px solid #a2a9b1; */
	border-spacing: 5px;
	margin: 0px 5px 10px 5px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
	border-radius: 0px 0px 3px 3px;
	background: #fff;
	}

.spgrid tr > td:nth-child(4) {
	padding: 15px;
	grid-column: 2 / 3;
	grid-row: 2;
	/* background-color: #f8f9fa;
	border-top: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1; */
	border-spacing: 5px;
	margin: 0px 5px 10px 5px;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
	border-radius: 0px 0px 3px 3px;
	background: #fff;
	}


.spgrid tr:last-child > td:nth-child(3) {
	padding: 15px;
	grid-column: 1 / 2;
	grid-row: 2;
	background-color: #f8f9fa;
	border-top: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1;
	border-bottom: 1px solid #a2a9b1;
	border-left: 1px solid #a2a9b1;
	}

.spgrid tr:last-child > td:nth-child(4) {
	padding: 15px;
	grid-column: 2 / 3;
	grid-row: 2;
	background-color: #f8f9fa;
	border-top: 1px solid #a2a9b1;
	border-bottom: 1px solid #a2a9b1;
	border-right: 1px solid #a2a9b1;
	}



/*** Ende Formatierungen Standard ***/


/*** Formatierungen für Breakpoint xs ***/

@media (max-width:576px) {

table { border: 0; }

.spgrid tr > td:nth-child(1) {
	padding: 15px;
	grid-column: 1 / 3;
	grid-row: 1;
	background-color: #eaecf0;
	border: 1px solid #a2a9b1;
	border-bottom: 0;
	margin-top: 5px;
}

.spgrid tr > td:nth-child(2) {
	padding: 15px;
	grid-column: 1 / 3;
	grid-row: 3;
	background-color: #eaecf0;
	border: 1px solid #a2a9b1;
	border-bottom: 0;
	margin-top: 5px;
}

.spgrid tr > td:nth-child(3), .spgrid tr:last-child > td:nth-child(3) {
	padding-top: 15px;
	grid-column: 1 / 3;
	grid-row: 2;
	background-color: #f8f9fa;
	border: 1px solid #a2a9b1;
}

.spgrid tr > td:nth-child(4), .spgrid tr:last-child > td:nth-child(4) {
	padding-top: 15px;
	grid-column: 1 / 3;
	grid-row: 4;
	background-color: #f8f9fa;
	border: 1px solid #a2a9b1;
}

.spgrid .colspan2 {
	border-right: 1px solid #a2a9b1!important;
	}

.spgrid .frei {
	display: none;
	}

.spgrid .noborderbottom {
	border-bottom: 0!important;
	}

.spgrid .nobordertop {
	border-top: 0!important;
	}


} /*** Ende Formatierungen für Breakpoint xs ***/