Module:Subject bar/styles.css

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