Template:Reading/Web/Accessibility for reading/Header/styles.css

.a4r { margin: 1em 0; box-sizing: border-box; clear: both; background: #fff; } .a4r-tabs { display: flex; flex-direction: column; flex-wrap: wrap; text-align: center; /* noflex */ } .a4r-tab { flex:1 1 0; width: 100%; margin: 0; box-sizing: border-box; background-color: inherit; padding: 1em; font-weight: bold; border-top: 0.2em solid #f8f9fa; } .a4r-tab.selected { background-color: #f8f9fa; border-left: 0.5em solid #36c; } .a4r-tab a { color:#36c; } .a4r-tab img { /* min width for responsive sized images */ min-width: 22px; } .a4r-content { font-size: 1.1em; background-color: #f8f9fa; border-bottom: 2px solid #36c; padding: 1em; } .a4r-break { clear:both; }

@media (min-width:550px) { .a4r-tabs { flex-direction: row; padding: 0; margin-top: 0 !important; /* cancels out the sibling styling */ }	.a4r-tabs > .a4r-tab { display: inline-block; /* noflex */ vertical-align:bottom; /* noflex */ white-space: nowrap; width: auto; margin: 0 .2em 0 0; border-top: .5em solid #36c; font-size: 1.5em; }	.a4r-tab.selected { border-left: 0; } } @media (min-width:1000px) { .a4r-tabs > .a4r-tab { flex: 0 1 0; } }