Brief - feed reading extension for Firefox

body {
background: #202020;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
}

/* ---------------------- Header ---------------------- */

#header {
background-color: #666;color: #E0FF00;
text-decoration: none;
display: block;
padding: 5px 5% 5px;
border-bottom: 1px solid #f0f0f0;
overflow: auto; /* Clears contained floats */
}

#feed-image {
border: none;
float: right;
margin: 0 10px 10px;
}

#feed-title {
font-size: 30px;
font-style: italic;
font-weight: bold;
}

#feed-subtitle {
font-size: 13px;
margin-top: 3px;
}

#feed-content {
padding: 1em;
background: #000;
margin: 0 3em 0.8em;
margin-top: 3em;
min-width: 400px;
max-width: 80em;
}

#feed-content a:link { color: darkred; }
#feed-content .article-header a:link {font-size: 1.8em;} /*Title only !!*/
#feed-content a:visited, #feed-content.Visited a:link { color: #D0FFD0; text-decoration: none; }
#feed-content a:hover, #feed-content.Visited { color: #f60; text-decoration: none; }

#message {
font-size: 20px;
color: #f0f0f0;
text-align: center;
display: none;
margin-top: 100px;
}

/* --------------------------- Article ------------------------ */

/* .article-container may have "starred", "read", and "collapsed"
attributes. The first two are self-explanatory while "collapsed"
means that the article's content is folded (headlines-only mode) */
.article-container {
background-color: #E1CA84;
-moz-border-radius: 12px;
font-family: verdana, sans-serif;
font-size: 0.89em;
padding: 0.2em;
margin-top: 10px;
color: #FFFFFF;
padding-bottom: 2px; /* Without this, the article is sometimes cut-off */
overflow: visible; /* This is for the the expand/collapse dropmarker which is
taken outside the box using negative margins */
position: relative;
}

.article-container:hover {
padding: .1em;
border: 1px #F2C20D solid;
-moz-border-radius: 12px;
}

/* ---------------------- Article header ---------------------- */

.article-header {
min-height: 3.5em;
padding: 6px 5px 0 0;
}

.article-title-link {
color: orange;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}

/* ---------------------- Article controls ---------------------- */

.article-controls {
font-family: Arial, sans-serif;
font-size: 12px;
display: table-cell; /* The only way I could find out to keep the buttons aligned
was to use vertical-align. For this we need table-cell. */
float: right;
margin-top: -5px;
}

/* Never change padding of the buttons as it would break many themes */
.article-controls > button {
opacity: 0.8;
min-width: 0;
vertical-align: middle;
}

.article-controls > button:hover {
opacity: 1.0;
}

.star-container {
float: left;
margin: -6px 2px 0 0;
width: 24px;
height: 3.0em;
}

.star-image {
padding: 5px 0 0 5px;
}

.expand-button {
display: none;
position: absolute;
top: 0;
left: -35px;
height: 6em;
width: 42px;
}

/* ---------------------- Article subheader ---------------------- */

.article-subheader {
font-family: "Lucida Grande", Verdana, sans-serif;
color: #f0f0f0;
font-size: 11px;
padding: 0 25px 0 40px;
overflow: auto; /* Clears contained floats */
}

.article-container:hover .article-authors, .article-container:hover .article-subheader, .article-container:hover .article-date {
color: brown;
}

.article-authors, .article-date {
text-align: right;
color: #f0f0f0;
float: right;
font-style: italic;
font-size: 11px;

}

.article-authors {
margin-top: 2px;
clear: right;
}

.article-updated {
color: darkred;
font-weight: bold;
}

/* ---------------------- Article content area ---------------------- */

.article-content {
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 12px;
line-height: 1.4;
color: #000000;
margin-top: 5px;
padding: 0px 5px;
overflow: auto;
}

.article-content {
background-color: #E1CA84;
-moz-border-radius: 12px;
padding-top: 1em;
padding-bottom: .5em;
padding-right: 0em;
padding-left: 0em;
margin-bottom: 1em;
-moz-margin-start: 1em;
-moz-margin-end: 1em;
}
.article-content a {
color: #b0e0e6;
font-size: 1em; /*Link in the article @normal size*/
}

.article-content a:visited {
color: #b0e0e6;
opacity: 0.5;
font-size: 1em;/*Link in the article @normal size*/
}

/* ---------------------- Adjustments for read articles ---------------------- */

.article-container[read] {
opacity: 1em;
}

.article-container[read]:hover {
opacity: 1;
}

/* ---------------------- Adjustments for headlines view ---------------------- */

.article-container[collapsed] {
background-image: none;
background-color: #coffee;
min-height: 5.5em;
}

.article-container[collapsed][read] {

}

.article-container[collapsed]:last-child {

}

.article-container[collapsed] .article-title-link {
font-size: 12px;
}

.article-container[collapsed] .article-controls {
background-color: #666666;
position: absolute;
top: 1px;
right: 5px;
margin: 0;
padding-left: 10px;
}

.article-container[collapsed][read] .article-controls {

}

.article-container[collapsed] .article-date,
.article-container[collapsed] .feed-name {
font-size: 12px;
color: brown;
}

.article-container[collapsed] .article-date {
margin: 12px 8px 0;
clear: right;
}

.article-container[collapsed] .feed-name {
margin: 0 8px;
max-width: 170px;
height: 1.3em; /* Height of a single line */
overflow: hidden;
float: right;
}

/* ---------------------- Adjustments for the selected articles -------------------- */

.article-container[selected] {

}

/* Non-selected articles don't have bottom border, so if we added one now the article
would shift. Therefore, we change the top border color of the NEXT article. */
.article-container[selected] + .article-container {

}

.article-container[selected]:last-child {
border-bottom: 1px solid #1474d6;
}