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 { display: block; }



input.sheet-tab {

    width: 150px;

    height: 45px;

    position: float: none;

    top: 350px;

    left: 6px;

    margin: -1.5px;

    cursor: pointer;

    z-index: 1;

    opacity: 0;

}



input.sheet-tab + span::before {

    content: attr(title);

    border: solid 1px #a8a8a8;

    border-bottom-color: #000;

    text-align: center;

    display: inline-block;

    background: #fff;

    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);

    width: 150px;

    height: 50px;

    font-size: 18px;

    position: absolute;

    top: 346px;

    left: 13px;

}



input.sheet-tab:checked + span::before {

    background: #dcdcdc;

    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);

    border-bottom-color: #fff;

}



input.sheet-tab:not(:first-child) + span::before { border-left: none; }



input.sheet-tab2 + span::before {

    background: #dcdcdc;

    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);

    left: 163px;



}



input.sheet-tab2:checked + span::before {

    background: #dcdcdc;

    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);

    border-bottom-color: #fcecec;

}



input.sheet-tab3 + span::before { left: 313px; }



input.sheet-tab4 + span::before { left: 463px; }



div.sheet-tab-content {

    border: 2px solid #000;

    border-top-color: #000;

    margin: 2px 0 0 4px;

    padding: 5px;

}



div.sheet-tab1 { background-color: #eee; }

div.sheet-tab2 { background-color: #69BE45; }

div.sheet-tab3 { background-color: #acecec; }

div.sheet-tab4 { background-color: #2A0D39; }