Template:Reading/Web/Desktop Improvements/Header/styles.css

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

@media (min-width:550px) { .dip-tabs { flex-direction: row; padding: 0; margin-top: 0 !important; /* cancels out the sibling styling */ }	.dip-tabs > .dip-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.3em; }	.dip-tab.selected { border-left: 0; } } @media (min-width:1000px) { .dip-tabs > .dip-tab { flex: 0 1 0; } }