User.css stylesheet for the Reddit Enhancement Suite Dashboard, adding a 2 column layout as well as various other tweaks.

resdashboard.user.css

#RESDashboard .RESDashboardComponent {
    /* 2 columns */
    display: inline-block;
    float: left;
    margin: 0.6%;
    vertical-align: top;
    width: 48.5%;
}

#RESDashboardAddComponent {
    /* Condense the Add Widget header */
    padding-bottom: 0;
    padding-top: 0;
}

#REScommentNavBox {
    bottom: 2em;
    /* Reposition the comment navigation box to the bottom right corner */
    right: 320px;
    top: auto;
}

#dashboardContents {
    /* Condense some more of the dashboard */
    padding-top: 0;
}

#header-bottom-right {
    padding: 2px;
}

#header-img.default-header {
    /* I know I am on Reddit; I don't need the alien header image */
    display: none;
}

.RESDashboardComponent .thing {
    /* Let's condense things a bit */
    margin: 0;
    padding: 0.5em;
}

.RESDashboardComponent .thing .title {
    /* Hide the title after 2 lines */
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.RESDashboardComponent .thing .title:hover {
    /* Show the rest of the title when hovering over it */
    max-height: inherit;
}

.RESDashboardComponent .widgetSortButtons li {
    /* Hide all the Widget's Sort buttons ... */
    display: none;
}

.RESDashboardComponent .widgetSortButtons li.active {
    /* ... apart from the Active sort button and ... */
    display: inherit;
}

.RESDashboardComponent .widgetSortButtons:hover li {
    /* ... re-display the widget's sort buttons again when hovering over one of its buttons */
    display: inherit;
}

.RESDashboardComponent a.widgetPath {
    /* Limit the widget name so the rest aligns better */
    margin: 0.5em;
    width: 22%;
}

.RESDashboardComponent a.widgetPath, .RESDashboardComponentHeader ul {
    /* Condense the Dashboard widget header */
    display: inline-block;
    margin: 0;
    padding: 0 0 0 0;
    vertical-align: top;
    width: auto;
}

.RESDashboardComponentContainer {
    /* Condense the container too */
    padding: 0;
}

.RESDashboardComponentContents .expando > *, .RESDashboardComponentContents div.madeVisible > * {
    /* Add a border to the expanded element */
    margin: 3em;
}

.RESDashboardComponentContents .expando, .RESDashboardComponentContents div.madeVisible {
    background-color: #001;
    border: 2px groove #336;
    /* Generally I am only watching a single item expanded, so let's center it above everything in the middle of the page ... */
    /*  min-height: 480px;*/
    /*  opacity: 0.75;*/
    /* Enable this rule if you want to make the expando element see-through */
    max-height: 80%;
    overflow: auto;
    position: fixed;
    right: 20%;
    top: 10%;
    z-index: 998;
}

.RESDashboardComponentContents .expando-button.expanded {
    background-color: #fff;
    border: 1px solid #336;
    border-bottom: 1px solid #666;
    /* ... along with the expando close button */
    margin-top: -18px;
    position: fixed;
    right: 20%;
    top: 10%;
    z-index: 999;
}

.RESDashboardComponentContents .expando:hover, .RESDashboardComponentContents div.madeVisible:hover {
    /*opacity: 1;*/
    /* enable this rule if you use lower opacity in the above rule, to make it opaque when hovering over it. */
}

.RESDashboardComponentContents .sitetable {
    /*
I do want multiple rows per dashboard component, but I don't want a single dashboard hogging all the space. 
This also ensures the dashboards line up nicely. 
Adds a scrollbar to the component if there are more rows that fit in the assigned height.*/
    height: 170px;
    overflow: auto;
}

.RESDashboardComponentContents .sitetable:hover {
    /* Show more of the currently hovered-over widget */
    /* height: 390px; */
}

.RESDashboardComponentContents .thing:hover {
    background-color: rgba(0,0,50,0.3);
    /* I like a little highlight when I hover over an item */
}

.RESDashboardComponentHeader ul.widgetSortButtons li[sort=controversial] {
    /* That Controversial sort button is too wide; let's truncate it ... */
    max-width: 5.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.RESDashboardComponentHeader ul.widgetSortButtons:hover + * {
    /* Temporarily hide the (next) sibling elements when hovering over the sort buttons to free up some space */
    display: none;
}

.RESDashboardComponentHeader ul.widgetSortButtons:hover li[sort=controversial] {
    /* ... but show the rest of the text when hovering over the sort buttons */
    max-width: inherit;
}

.account-activity-box {
    background-color: black;
    bottom: 0px;
    /* Fix the Account Activity box at the bottom right corner*/
    padding: 0.5em;
    position: fixed;
    right: 0px;
    z-index: 10;
}

.listing-page .drop-choices {
    background-color: inherit;
    border: none;
    display: inline-block;
    position: inherit;
}

.listing-page .drop-choices .choice {
    border: 1px solid;
    display: inline-block;
    margin: 0.3em;
}

.listing-page .drop-choices .choice.selected {
    background-color: #c7def7;
}

.listing-page .drop-choices .choice:hover {
    background-color: #e7fef7;
}

.listing-page .dropdown.lightdrop {
    display: none;
}

.md h6 {
    /* Reposition a header that was obscuring some of the text */
    margin-top: -0.5em;
}

.recent-trophywinner img {
    height: 2.5em;
    width: auto;
}

.res-nightmode #previoussearch input[type=text] {
    color: #fff;
    /* Make previoussearch input field legible in nightmode */
}

.side input {
    border-radius: 3px;
    /* I like rounded corners ;-) */
}

.widgetStateButtons .refreshAll {
    /* The 'Refresh All' button is way too wide because of its long text. Truncate it, ... */
    max-width: 3.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widgetStateButtons .refreshAll:hover {
    /* ... but temporarily display it in full when hovering over it ... */
    max-width: inherit;
}

.widgetStateButtons .refreshAll:hover + * {
    /* ... (at the expense of the sibling element).*/
    display: none;
}

.widgetStateButtons li.updateTime {
    /* I don't really care about the update time, so let's hide it */
    display: none;
}

/* Enable this block if you want to hide most of the side bar till you hover over it. To be honest, it doesn't really work as intended yet. (Hence why it's commented out...)
.side {
    position: absolute;
    right: -240px;
    z-index: 10;
}

.side:hover {
    right: 0px;
}
*/

/*#RESDashboardAddComponent { left: -70%;}
#RESDashboardAddComponent:hover { left: inherit;}*/