h1 {text-align: center;} h2 {text-align: center;} h3 { text-align: center;} h4 { text-align: center; padding-top: 50px; } div.bg { background-color: #EBEBFF; } div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5, input.sheet-tab6:checked ~ div.sheet-tab6, { display: block; } input.sheet-tab { width: 33%; height: 20px; position: relative; top: 5px; left: 6px; margin: -1.5px; cursor: pointer; z-index: 1; } input.sheet-tab::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background: #fff; background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 100%; height: 20px; font-size: 18px; } input.sheet-tab:checked::before { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; } input.sheet-tab:not(:first-child)::before { border-left: none; } div.sheet-tab-content { background: #D6F5FF; border: 1px solid #a8a8a8; border-top-color: #000; margin: 2px 0 0 5px; padding: 5px; } /*drives*/ div.sheet-tab-content { display: none; } input.sheet-tab1:checked ~ div.sheet-tab1, input.sheet-tab2:checked ~ div.sheet-tab2, input.sheet-tab3:checked ~ div.sheet-tab3, input.sheet-tab4:checked ~ div.sheet-tab4, input.sheet-tab5:checked ~ div.sheet-tab5, input.sheet-tab6:checked ~ div.sheet-tab6, { display: block; } input.sheet-drivetab { width: 19%; height: 20px; position: relative; top: 5px; left: 6px; margin: -1.5px; cursor: pointer; z-index: 1; } input.sheet-drivetab::before { content: attr(title); border: solid 1px #a8a8a8; border-bottom-color: black; text-align: center; display: inline-block; background: #fff; background: -moz-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -webkit-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -ms-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: -o-linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8); width: 100%; height: 20px; font-size: 18px; } input.sheet-drivetab:checked::before { background: #dcdcdc; background: -moz-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -webkit-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -ms-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: -o-linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc); border-bottom-color: #fff; } input.sheet-drivetab:not(:first-child)::before { border-left: none; } div.sheet-drivetab-content { background: #D6F5FF; border: 1px solid #a8a8a8; border-top-color: #000; margin: 2px 0 0 5px; padding: 5px; }