tabzilla.css

/* Fonts */

@font-face {
    font-family: 'Open Sans';
    src: url('http://www.mozfr.org/fonts/OpenSans-Regular-webfont.eot');
    src: url('http://www.mozfr.org/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.mozfr.org/fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('http://www.mozfr.org/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('http://www.mozfr.org/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('http://www.mozfr.org/fonts/OpenSans-Semibold-webfont.eot');
    src: url('http://www.mozfr.org/fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://www.mozfr.org/fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('http://www.mozfr.org/fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('http://www.mozfr.org/fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

/* Tab */

#tabzilla {
    float: right;
    display: block;
    background: url(./img/tab.png);
    height: 44px;
    width: 150px;
    position: relative;
    text-indent: -2000px;
    overflow: hidden;
    z-index: 999;
}

#tabzilla:after {
    background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEX%2F%2F%2F9ISEhr7AOpAAAAAXRSTlMAQObYZgAAACVJREFUCNdjYEACHAIMMhYMdjUM8j8Y%2BD8wsD9gYD7AwNiArAQAd4oFaCu14IQAAAAASUVORK5CYII%3D);
    content: " ";
    position: absolute;
    height: 16px;
    width: 16px;
    top: 11px;
    right: 23px;
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
}

#tabzilla.tabzilla-opened:after {
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Tab panel */

#tabzilla-panel {
    height: 0;
    background: #fff;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1.3;
    font-size: 11px;
    color: #484848;
    position: relative;
    overflow: hidden;
    direction: ltr;
    zoom: 1;
}

#tabzilla-panel:focus {
    outline:none;
}

#tabzilla-contents {
    width: 960px;
    margin: 0 auto;
    padding: 0 10px;
    text-align: left;
    position: relative;
    display:none;
}

#tabzilla-panel.open #tabzilla-contents {
    display: block;
}

* html #tabzilla-contents             { zoom: 1; } /* IE6 */
*:first-child+html #tabzilla-contents { zoom: 1; } /* IE7 */

#tabzilla-contents:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

#tabzilla-promo {
    float: left;
    display: inline;
    width: 300px;
    height: 210px;
    margin: 0 10px;
    background: #f8f8f8;
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}

#tabzilla-promo .snippet img {
    position: absolute;
    top: 40px;
    left: 20px;
}

#tabzilla-promo .snippet {
    padding: 40px;
}

#tabzilla-promo .snippet h4,
#tabzilla-panel #tabzilla-nav,
#tabzilla-panel #tabzilla-nav h2 {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    color: #484848;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    border: 0;
}

#tabzilla-panel #tabzilla-nav {
    float: left;
    display: inline;
    width: 620px;
    margin: 0 10px;
}

#tabzilla-promo .snippet h4 {
    line-height: 1.1;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 0.4em;
}

#tabzilla-panel #tabzilla-nav h2 {
    font-weight: bold;
    font-size: 13px;
    margin: 0 20px 0.4em 0;
    white-space: nowrap;
}

#tabzilla-panel #tabzilla-nav ul {
    margin: 0;
    padding: 0;
    font-size: inherit;
}

#tabzilla-panel #tabzilla-nav ul li {
    float: left;
    display: inline;
    list-style-type: none;
    width: 17%;
    margin: 40px 3% 0 -1px;
    padding: 0;
    line-height: 1.1;
    border-right: 1px dotted #ccc;
}

* html #tabzilla-panel #tabzilla-nav ul li {
    margin-right: 10px; /* IE6 width oddity workaround */
}

#tabzilla-panel #tabzilla-nav ul li ul li {
    float: none;
    margin: 0;
    height: auto;
    border: 0;
}

#tabzilla-panel #tabzilla-nav a {
    color: #484848;
    display: block;
    padding: 0.4em 20px 0.4em 0;
    outline: 0;
}

#tabzilla-panel a,
#tabzilla-panel a:link,
#tabzilla-panel a:visited {
    text-decoration: none;
}

#tabzilla-panel a:hover,
#tabzilla-panel a:active,
#tabzilla-panel a:focus {
    text-decoration: underline;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search {
    border: 0;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search a {
    padding-top: 0;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search form  {
    margin: 0.4em 20px 0.4em 0;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input {
    width: 90px;
    background: #fafafa;
    color: #484848;
    border: 1px solid #ddd;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
    -webkit-box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.02) inset;
    -webkit-appearance: none;
    padding: 4px;
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:hover {
    border-color: #ccc;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:focus {
    outline: 0;
    border-color: #999;
}

#tabzilla-search label{
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}
.html-rtl #tabzilla-search label{
    left:auto;
    right:-10000px;
}

#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input::-webkit-input-placeholder { color: #ddd; }
#tabzilla-panel #tabzilla-nav ul li#tabzilla-search input:-moz-placeholder           { color: #ddd; }

/* Firefox Flicks Promo */

#tabzilla-promo .snippet {
    padding: 0;
}

#tabzilla-promo .snippet a {
    display: block;
    padding: 40px 35px 40px 95px;
    height: 130px;
    background-image: url(//www.mozilla.org/tabzilla/media/img/promo-flicks.png);
    background-position: 20px 37px;
    background-repeat: no-repeat;
    color: #484848;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#tabzilla-promo .snippet a:hover,
#tabzilla-promo .snippet a:active {
    text-decoration: none;
    background-color: #f0f0f0;
}

#tabzilla-promo .snippet p {
    margin: 0;
    color: inherit;
    font-family: inherit;
}

#tabzilla-promo .snippet#tabzilla-promo-beta a {
    background-image: url(img/promo-beta.jpg);
    background-position: 0 0;
    background-color: #226aa7;
    color: #fff;
    font-size: 12px;
    padding: 50px 15px 30px 145px;
    line-height: 20px;
}

#tabzilla-promo .snippet#tabzilla-promo-beta a b {
    white-space: nowrap;
}


@media only screen and (min-width: 720px) and (max-width: 979px) {

    #tabzilla-contents {
        width: 90%;
        margin: 0 5%;
        padding: 0;
        position: static;
    }

    #tabzilla-promo {
        display: none;
    }

    #tabzilla-panel #tabzilla-nav {
        width: 100%;
    }

    #tabzilla-panel #tabzilla-nav ul li {
        margin-bottom: 40px;
    }

}

@media only screen and (max-width: 719px) {

    /*#tabzilla-panel.tabzilla-opened {
      xheight: auto;
    }*/

    #tabzilla-contents {
        width: 100%;
        position: static;
        margin-left: 0;
        padding: 0;
    }

    #tabzilla-promo {
        display: none;
    }

    #tabzilla-panel #tabzilla-nav {
        width: 100%;
        margin: 0;
    }

    #tabzilla-panel #tabzilla-nav h2,
    #tabzilla-panel #tabzilla-nav a {
        padding: 10px 20px;
        margin: 0;
        text-shadow: 0 1px rgba(255,255,255,0.5);
    }

    #tabzilla-panel #tabzilla-nav h2 {
        position: relative;
        cursor: pointer;
        border: 0; /* for Android devices to not show a dotted border */
    }

    #tabzilla-panel #tabzilla-nav h2:after {
        background: url(img/menu-arrow.png);
        content: " ";
        position: absolute;
        height: 15px;
        width: 15px;
        top: 10px;
        right: 20px;
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        border-radius: 8px;
    }

    #tabzilla-panel #tabzilla-nav h2[aria-expanded=true]:after {
        -moz-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    #tabzilla-panel #tabzilla-nav h2:hover,
    #tabzilla-panel #tabzilla-nav h2:focus,
    #tabzilla-panel #tabzilla-nav h2:active,
    #tabzilla-panel #tabzilla-nav a:hover,
    #tabzilla-panel #tabzilla-nav a:focus,
    #tabzilla-panel #tabzilla-nav a:active {
        background: #43a6e2;
        background: -moz-linear-gradient(top, #43a6e2 0%, #247ac1 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#43a6e2), color-stop(100%,#247ac1));
        background: -webkit-linear-gradient(top, #43a6e2 0%,#247ac1 100%);
        background: -o-linear-gradient(top, #43a6e2 0%,#247ac1 100%);
        background: -ms-linear-gradient(top, #43a6e2 0%,#247ac1 100%);
        background: linear-gradient(top, #43a6e2 0%,#247ac1 100%);
        color: #fff;
        text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        text-decoration: none;
    }

    #tabzilla-panel #tabzilla-nav ul li {
        display: block;
        float: none;
        width: auto;
        margin: 0;
        border-top: 1px solid #eee;
    }

    #tabzilla-panel #tabzilla-nav ul li ul {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }

    #tabzilla-panel #tabzilla-nav ul li ul li {
        border-color: #cdd2d5;
        background-color: #dee3e6;
        background-repeat: repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAACXZwQWcAAAAwAAAAMADO7oxXAAAAG1BMVEUAAAAgICBAQEBgYGCAgICfn5+/v7/f39////8Qa11jAAAACXRSTlMICAgICAgICAj5MN6qAAAAAWJLR0QIht6VegAAA51JREFUGBkFwU13mkwYANBJe07LslVjWVZBM8tXEJxlRMHZRj6cZRXFWSZqDEvnk+dnv/eiIVxTzY8ZYyXF4t24IgrgACe0O6zduP8idNNtyzNJPLHpigW3yHBF8GaiJWhMBTnQ/VOm/AlH110Wk9Z/tXEV281TNLokoyosY+QRqPxLbmxT2++REXW32BApMFKMsQySUxm3eM5UaXMQ3mbgos/2S2XxA1ZAdf1V0CVefQ6dnz0E8jtwdhBqOlBF4G7I6sBVJQMEbchhAaSfZafqneQNfDZc12cEx34LmGpOSa9tQzNfk1SN8xatTYuPLz/B/OPHrrXqeao62Ws95L74Q2Gu9sCjTEYzamrc6aAF5Lvwxy6Xe7dIYAQ96rjxgYPjIr2SgbzOwHwj5vxe65e5OnluQxHMTc6jYqsk/DJEKZ12w2DiO8hhZwC73WHaPhEVwuljDFKSAepyzXXKD1THQeW4zgje00JnFwQdrHRtRUXJoxNjM/As68wdI0TH+aa7j4+aRmAxXXeWzZtCILn+XN3LrWHcQmhtU9Z0Apn1UXiZ01j/4zgCOWpZzjiEPkt99IiLPO3lk3UIcNOJ1NkUl6vRARErW2Cb9BZZ4VDMZ23V7DIo0BuHGF/hFnmv110XG9sDc4s2FJFkiZmnEnEdyAVQuhLDcD1wF0ipVMI6CCgAa8bmKt02A7tpUED2NG9o/sUTSbeLv+xVpBgkIGtJSSh0Z9mUFXz063IqJx4JkPlxt/GIyJuloeBAuMcnsHUWqAQl4NnZ0n5IwNXb5cPRHyYBJAMtFOsXdl/gAh64vjY9eakCNG32obudUT5aUTsFDUc/wQwMMu6UAcAUV/zGDGjZZvpW/EcRfiE6myi++UgPy9uxf/sRVRaEQE/0LaJ0550KPAX9h+TctMnJF2jeASln69JcgjA6l7R8s/DALESSy4c4jeEidIQV2csC//YL0yEXXn0w3CF99eN4GCt9TPuwgRFS9f2GL/SVKnAZmwB4fx01sN8QpKrEHtVnPZ2dBr+521GAEb2juhiwY2RhzPgWJO+r1oa08xdIc7pfKwIZmCn8faxa1ukS0zViZPjS5vA8A/sVDOccRPekkvVvtORGjLH8XJ7oWxDw6Lu3I2lysuj5QOweQ7X+BPiYSlqDQ2wAGv0Bo+vwxDmSWn/4Nj0VcA/OgBh3AaDfnj+CEYyypQndTpukQgL2fMtBd+RyoNfBiC0f6fPG2v8ByUSIGTjBt+QAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDMtMTJUMTM6MDU6MTgrMDE6MDB2bJGmAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTAzLTEyVDEzOjA0OjU1KzAxOjAwDW4tHgAAAABJRU5ErkJggg==);
    }

    #tabzilla-panel #tabzilla-nav ul li ul li:first-child {
        border-top: 0;
    }

    #tabzilla-panel #tabzilla-nav #tabzilla-search > a {
        display: none;
    }

    #tabzilla-panel #tabzilla-nav ul li#tabzilla-search form {
        margin: 20px;
    }

    #tabzilla-panel #tabzilla-nav ul li#tabzilla-search input {
        width: 100%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

}