/*
mix of 
- http://webdesignerhut.com/create-pure-css-tabs/
- http://htmldog.com/techniques/tabs
- https://stackoverflow.com/questions/10551369/how-to-evenly-distribute-menu-items-with-css-when-width-and-quantity-is-not-know
*/

.tabs {
    float: none;
    padding: 0;

    /* automatically adapt element distribution horizontally */
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
}

.tabs input[type=radio] {
    display: none;  /* do not display actual radio button */
}

.tabs label {
    white-space: nowrap;
    flex: 0 1 auto;  /* do not stretch */
    padding: .2em 1em 10px 1em;
    text-align: center;
    font-size: 1.1em;
    color: #e9d7ff;
    background-color: #4d2d73;
    border-style: solid;  /* border-style needs to be declared before border-color */
    border-width: 2px 0px 0px 2px;
    border-color: #4d2d73;
    border-radius: 10px;
}

.tabs [id^='tab']:checked + label {
    background-color: #896aad;
    border-color: #896aad;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
    padding-bottom: 20px;
}

.tabs label:hover {
    padding-bottom: 20px;
}

/* show color gradient when hovering over unchecked labels */
.tabs > :not(:checked) + label:hover {
    background: linear-gradient(#4d2d73, #896aad);
    border-radius: 10px 10px 0 0;
}

#dummylabel {
    background: white;
    color: #1f0938;
    border: none;
    font-weight: bold;
}

.tabfacsimile {
    white-space: nowrap;
    font-size: small;
    color: #e9d7ff;
    background-color: #4d2d73;
    border-style: solid;  /* border-style needs to be declared before border-color */
    border-color: #4d2d73;
    border-radius: 10%;
    cursor: text;
}