Vorlage:Sternensystem/Struktur/style.css

.system-wrapper {
	border-radius: 1rem;
    color: #72777d;
    background: #f8f9fa;
	padding: 1rem;
	justify-content: space-around;
	clear: both;
}

h2 ~ style ~ .system-wrapper {
    margin-top: 0.8rem;
}

.system-wrapper .system-label {
	display: block;
	width: 100%;
	padding-bottom: 0.35em;
}

.system-wrapper .system-entry-label {
	display: block;
	padding-bottom: 0.15em;
	flex-basis: 100%;
}

.system-wrapper .system-content {
	display: flex;
	flex-wrap: wrap;
}

.system-wrapper .system-content .system-entry {
	background: rgba(10, 10, 10, 0.1);
	padding: 1rem;
	margin: 0.6rem;
	flex-grow: 1;
    flex-basis: 25%;
	border-radius: 1rem;
	align-self: flex-start;
}

.system-wrapper .system-content .system-entry.system-entry-STAR,
.system-wrapper .system-content .system-entry.system-entry-BLACKHOLE {
	flex-basis: 100%;
}

.system-wrapper .system-content .system-entry.system-entry-JUMPPOINT {
	flex-basis: 20%;
}

.system-wrapper .system-content .system-entry.system-entry-PLANET {
	display: flex;
    flex-wrap: wrap;
}

.system-wrapper .system-content .system-entry.system-entry-INFO {
	flex-basis: 100%;
    text-align: center;
    margin-top: 2rem;
}

.system-wrapper .system-content .system-entry.system-entry-INFO > .system-entry-label {
	flex-basis: 100%;
    font-size: 1rem;
    color: #5b84d6;
}

.system-wrapper .system-content .system-entry.system-entry-INFO div {
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
}

.system-wrapper .system-content .system-entry.system-entry-INFO div .system-entry-label {
    flex-basis: 33%;
    margin-top: 0.5em;
    text-align: left;    
}

.system-wrapper span.mw-collapsible-toggle.mw-collapsible-toggle-default::before,
.system-wrapper span.mw-collapsible-toggle.mw-collapsible-toggle-default::after {
	content: '';
}

.system-wrapper span.mw-collapsible-toggle a::after {
    content: '▶';
    margin-left: 5px;
}

.system-wrapper span.mw-collapsible-toggle.mw-collapsible-toggle-expanded a::after {
    content: '▼';
    margin-left: 5px;
}

html.skin-citizen-dark .system-wrapper {
	background: #1f262c;
	color: #a0a1a5;
}

@media screen and (max-width: 460px) {
	.system-wrapper .system-content .system-entry {
		flex-basis: 50%;
	}
}