Module:Subject bar/styles.css

/* {{pp-template}} */
.subjectbar {
	background-color: #f9f9f9;
	border: 1px solid #aaa;
	clear: both;
	box-sizing: border-box;
	font-size: 88%;
}

.subjectbar-row {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
}

.subjectbar-row:not(:last-child) {
    border-bottom: 1px solid #aaa;
}

.subjectbar-heading {
	align-items: center;
    border-bottom: 1px solid #aaa;
	display: flex;
	flex: 0;
	flex-direction: column;
	justify-content: center;
	min-width: 125px;
	padding-left: 3px;
	padding-right: 3px;
}

.subjectbar-cell {
	display: flex;
	flex: 0 auto;
	flex-direction: row;
	flex-wrap: wrap;
	padding-bottom: 0.7em;
}

.subjectbar-item {
	display: flex;
	flex-direction: row;
	margin: 0.7em 0 0 0.7em;
}

.subjectbar-item > div:first-child {
	align-items: center;
	display: flex;
	flex: 0 1;
	justify-content: center;
	min-width: 30px;
}
.subjectbar-item > div:last-child {
	display: flex;
	flex: 1 0;
	flex-direction: column;
	margin-left: 0.5em;
	justify-content: center;
	width: 10em;
}

@media screen and (min-width:720px) {
	.subjectbar-row {
		flex-direction: row;
	}
	
	.subjectbar-heading {
		align-items: flex-start;
	    border-bottom: 0;
		border-right: 1px solid #aaa;
	}
}