div.tabButton {
    /* Avoid rounding down to less than one pixel under scaling */
    border: 1.985px solid;
    border-image: linear-gradient(#3698f9, #a7d0f9) 1 stretch;
    border-right: 0px none;
    width: 70px; 
    height: 20px; 
    display: inline-block;
    vertical-align: bottom;
    
    /* Offset the bottom's border */
    padding-bottom: -1.985px;
}

.dliEdition div.tabButton {
    border-image: linear-gradient(#76b900, #ddedbf) 1 stretch;
}

div.tabPane {
    padding-top: 0px;
}

.activeTabButton {
    background-image: linear-gradient(#a7d0f9, white) !important;
    font-weight: 600;
    height: 21.985px !important;
    border-bottom: 0px none !important;
    padding-bottom: 0px !important;
}

.dliEdition .activeTabButton {
    background-image: linear-gradient(#ddedbf, white) !important;
}

div.tabBefore {
    width: 70px;
    height: 20px;
    display:inline-block;
    border-right: 0px none;
    border-top: 0px none;
    border-left: 0px none;
    border-bottom: 1.985px solid;
    border-image: linear-gradient(270deg, #a7d0f9, white) 1 stretch;
    vertical-align: bottom;
    /* Offset the bottom's border */
    padding-bottom: -1.985px;
}

.dliEdition div.tabBefore {
    border-image: linear-gradient(270deg, #ddedbf, white) 1 stretch;
}

div.tabAfter1 {
    /* Avoid rounding down to less than one pixel under scaling */
    border: 1.985px solid;
    border-image: linear-gradient(#3698f9, #a7d0f9) 1 stretch;
    background-image: linear-gradient(#deecf9, white, white);
    /* Offset the bottom's border */
    padding-bottom: -1.985px;
    
    border-right: 0px none;
    width: 0px; 
    height: 20px; 
    display: inline-block;
    vertical-align: bottom;
}

.dliEdition div.tabAfter1 {
    border-image: linear-gradient(#76b900, #ddedbf) 1 stretch;
    background-image: linear-gradient(#ddedbf, white, white);
}

div.tabAfter2 {
    /* Offset the bottom's border */
    padding-bottom: -1.985px;
    width: 70px;
    height: 20px;
    display: inline-block;
    border-left: 0px none;
    border-top: 0px none;
    border-right: 0px none;
    border-bottom: 1.985px solid;
    border-image: linear-gradient(90deg, #a7d0f9, white) 1 stretch;
    vertical-align: bottom;
}

.dliEdition div.tabAfter2 {
    border-image: linear-gradient(90deg, #ddedbf, white) 1 stretch;
}

@-moz-document url-prefix(http://graphicscodex.com) {
    /* Firefox has a known bug with border-image gradients                                                                 
       https://bugzilla.mozilla.org/show_bug.cgi?id=709587                                                                 
       http://stackoverflow.com/questions/7783061/proper-border-gradient-syntax-for-opera-and-firefox-i-have-the-webkit-sy\
ntax-wo*/
    div.tabAfter2, div.tabAfter1, div.tabBefore {
        border-color: #3698f9;
    }

    .dliEdition div.tabAfter2, .dliEdition div.tabAfter1, .dliEdition div.tabBefore {
        border-color: #76b900;
    }
}