#browser-bottombox {
    border-color: #000 !important;
    background: #000 !important;
}
#browser /* This is the "page" element. The content is displayed inside this. */ {
    border-top: 1px solid #000 !important; /* set a 1px thin black border on top of it */
    margin-top: 1px !important; /* sets a margin, making it 1px away from the top */
}
.tabbrowser-tabs tab /* This is the tab element. This will change a tab's appearance. */ {
    border: solid #000 !important;
    border-width: 1px 1px 0px 0px !important;
    background: #FFF !important;
    transition: all .5s !important; /* CSS transitions, you should read about it */
    height: 21px !important;
    max-height: 21px !important;
    min-height: 21px !important;
    padding: 3px !important;
    padding-top: 3px !important;
    text-align: center !important;
    margin-top: 0px !important;
    line-height: 21px !important;
}
/*.tabbrowser-tabs tab:hover {
    background: #fffce4 !important;
} I'm not using this anymore. */
.tabbrowser-tabs tab[selected] /* The [selected] thing here states that this is the appearance of the active tab. The one you're looking at right now. */ {
    background: #eee !important;
}
.tabbrowser-tabs tab:first-child /* The first-child selector will change the appearance for the first child of tab. The rest will follow the default one. */ {
    border-left: 1px solid #000 !important;
}
/*.tabbrowser-tabs tab:last-child nth-child(2) changes appearance for the second tab child, like the first-child selector does to the first one {
    border-right: 1px solid #000 !important;
}*/
.tabbrowser-tabs tab:only-child /* For when there is only ONE tab, this will change its appearance. */ {
    background: #FFF !important;
    opacity: 0 !important; /* I am making this tab invisible. */
    height: 0px !important; /* So it doesn't occupy any space */
    min-height: 0px !important;
    max-height: 0px !important;
    overflow: hidden !important; /* If something inside the element seems to stay outside of it, hide that. Like a straw coming out of a cup. overflow: hidden would hide the part of the straw that stands outside of it. */
    transition: all .4s linear, opacity .23s ease !important; /* Different durations for different properties. Read on CSS transitions. */
    margin-top: -1px !important; /* So it doesn't keep a 1px line from the top. */
}
.tabbrowser-tabs /* This is the tab container, also known as Tab bar. */ {
    background: #e8eac6 !important;
   /* border-right: 1px solid #000 !important;*/
    margin-left: -4px !important; /* Here I'm adjusting it to fit the whole width of the window */
    margin-right: -4px !important; /* Same as above. */
}
#main-window /* The entire window element. This treats the whole window as a "CSS box". Edit it carefully. */ {
    background: #000 !important;
    margin-top: -18px !important;
    border-color: #000 !important;
}
.tabs-newtab-button /* New tab button. The name says it all. */ {
    display: none !important; /* Getting rid of it completely. */
}
#browser-border-start, #browser-border-end /* These are annoying borders set on the sides. */ {
    background: #000 !important;
    border-color: #000 !important;
}
.tab-close-button /* The name says it all. Got rid of it. */ {
    display: none !important;
}
#main-window #tabbrowser-tabs tab .tab-throbber,
#main-window #tabbrowser-tabs tab .tab-icon-image,
.tabbrowser-tab:not([pinned]) .tab-icon-image /* This will get rid of the favicons in all tabs. */ {
display: none !important;
}
#addonbar-closebutton /* Close button for the addon-bar, that is hidden by default. Ctrl + / to toggle it. */ {
    display: none !important;
}
#urlbar /* URL bar. The name says it all. This is where the address for the current page is displayed. */ {
    border: none !important;
    font: 8pt Open Sans !important;
    height: 20px !important;
    padding: 0px !important;
    padding-left: 0px !important;
    margin-top: 0px !important;
    text-align: center !important;
}
#addon-bar /* The addon-bar style. */ {
    border-top: 1px solid #000 !important;
    height: 20px !important;
    background: #FFF !important;
}
#navigator-toolbox:after /* This is a pseudo-selector. There is a line after the navigation bar, be it hidden or not. Here, I'm getting rid of it. */ {
    background: #e8eac6 !important;
    height: 0px !important;
}
#notification-popup-box,
#identity-box,
#urlbar-reload-button,
#urlbar-stop-button,
#star-button,
#go-button,
.autocomplete-history-dropmarker /* These remove elements from the url bar to give space for just the address. */ {
    display: none !important;
}
statuspanel[type="overLink"] /* This gets rid of the bottom panel for when you hover a link. */ {
    display: none !important;
}
statuspanel .statuspanel-label /* This styles the bottom panel. It appears when connecting to servers, etc. */ {
    border-color: #000 !important;
    background: #FFF !important;
    color: #000 !important;
}