User:Paxed/vector.css

.simpletabs {
   overflow-x: hidden; /* so we could easily hide the radio inputs */
   border: 1px solid #ccc;
   border-left: 1px solid #ccc;
}

.simpletabs [type="radio"] {
   display: none;
}

.simpletabs .tabs {
   display: flex;
   align-items: stretch;
   list-style: none;
   padding: 0;
   margin: 0;
   background-color: #aaa;
}

.simpletabs .tab > label {
   display: block;
   margin-bottom: -1px;
   margin-right: 1px;
   padding: 1em 1em;
   background: #eee;
}

.simpletabs .tab:hover label {
   cursor: pointer;
}

.simpletabs .tab-content {
   display: none;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
.simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
.simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
.simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
.simpletabs [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
   border-bottom: none;
   background: transparent;
   background-color: white;
   cursor: default;
}

.simpletabs [type="radio"]:nth-of-type(1):checked ~ .tabs-content .tab-content:nth-of-type(1),
.simpletabs [type="radio"]:nth-of-type(2):checked ~ .tabs-content .tab-content:nth-of-type(2),
.simpletabs [type="radio"]:nth-of-type(3):checked ~ .tabs-content .tab-content:nth-of-type(3),
.simpletabs [type="radio"]:nth-of-type(4):checked ~ .tabs-content .tab-content:nth-of-type(4) {
   display: block;
   padding: 0.5em;
}







@media screen and (min-width:1200px) {

#wpTextbox1 {
   float:left;
   width: 70%;
}

.editOptions,
.mw-editTools,
.templatesUsed {
    float: right;
    width: 25%;
}

.editOptions {
    border: 1px solid #ccc;
}

#editpage-copywarn,
.mw-editTools div:first-child {
    display: none;
}

}