Template:MultiTabBox/styles.css

/* The main CSS that enables tab selection */

.tab-folder > .tab-content:target ~ .tab-content:last-child, .tab-folder > .tab-content { display: none; } .tab-folder > :last-child, .tab-folder > .tab-content:target { display: block; }

/* CSS for the tab menu box */

margin: auto; margin-top: calc(0.8607128226136831vw + 0.5164276935682098vh); width: 70%; border-style: solid; border-width: 0.25em; border-radius: 0.25em; text-align: center; font-size: 1rem;
 * 1) tabMenu {

}

margin: 0; background-color: #BEEBFE; }
 * 1) menuTitle {

padding-left: calc(0.8607128226136831vw + 0.5164276935682098vh); padding-right: calc(0.8607128226136831vw + 0.5164276935682098vh); display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
 * 1) tabContent {

}

.menuText { margin: 0; }

.tabText { margin: 0 calc(0.8607128226136831vw + 0.5164276935682098vh) 0 calc(0.8607128226136831vw + 0.5164276935682098vh); }

/* Optional CSS to reverse the ordering of the tab content and menu box */ .reverse-col { display: flex; flex-direction: column-reverse; }

/* If .reverse-col is active, flip the margin CSS for #tabMenu */ .reverse-col #tabMenu { margin-top: auto; margin-bottom: calc(0.8607128226136831vw + 0.5164276935682098vh); }

/* CSS specific to mobile devices */ @media only screen and (max-width: 630px) { .tabText:before { content: " • "; }	#tabMenu { margin-top: calc(0.8607128226136831vw + 1.8164276935682098vh); }	.reverse-col #tabMenu { margin-bottom: calc(0.8607128226136831vw + 1.8164276935682098vh); } }