/* ------------------------------------------
NEWSRIVER UI
Nicolas Gallagher - http://nicolasgallagher.com
------------------------------------------ */


/* ============================================================================================================================ **
**                                                       A L L   M E D I A
** ============================================================================================================================ */

@media all {

/* =============================================================================================================
** ------------------------------------------------------------------------------------------------------------- BASE
** ============================================================================================================= */

/* ............................................................................................................. UI width */

#header .hgroup,
#stream,
#footer {
    margin-left:auto;
    margin-right:auto;
}

/* =============================================================================================================
** ------------------------------------------------------------------------------------------------------------- HEADER
** ============================================================================================================= */

#header {
    padding:10px 5px;
    margin:0 0 20px;
    background:#1E68A6;
}

#header .hgroup {
    overflow:hidden;
    margin:0 auto;
}

#header h1 {
    float:left;
    margin:0;
    font-size:1em;
    color:#fff;
}

#header h2 {
    float:right;
    margin:0.25em 0 0;
    font-size:0.75em;
    font-weight:normal;
    color:#eee;
}

/* =============================================================================================================
** ------------------------------------------------------------------------------------------------------------- STREAM
** ============================================================================================================= */

#stream {
    min-height:100px;
    padding:0 5px;
    margin:0 auto;
}

.notice { /* loading and errors messages */
    text-align:center; 
    font-size:14px;
}

#loader { /* loading graphic */
    width:32px; 
    height:32px; 
    margin:20px auto; 
    background:url(../images/loader.gif) no-repeat 0 0;
}

/* ............................................................................................................. Stream info */

#stream-header {
    width:100%;
    margin:0 0 20px;
}

#stream-header:after {
    content:"";
    display:block;
    clear:both;
    overflow:hidden;
    height:0;
}

/* Feed's last update */

#stream-updated {
    margin:0;
    font-size:12px;
}
#stream-updated .river-timestamp {
    float:left; 
}
#stream-updated .river-stats {
    float:right;
}

/* Display options */

#stream-view {
    float:left; 
    display:block;
    font-size:12px; 
    line-height:17px; 
    font-weight:bold;
}

#stream-view:before {
    content:""; 
    float:left; 
    width:16px; 
    height:16px; 
    margin:0 6px 0 -22px; 
    background:url(../images/sprite.png) no-repeat -16px 0;
}

.collapsed #stream-view:before {
    background-position:0 0;
}

#stream-notice {
    display:block;
    padding:8px 10px;
    border:1px solid #FFD324;
    margin:0 0 15px;
    font-size:12px;
    text-align:center;
    background:#FFF6BF;
    border-radius:2px;
}

#stream-items {
    margin:0;
}

/* ............................................................................................................. Update blocks */

.section {
    clear:both;
    padding:0.5em 0 0; 
    border-top:1px solid #bbb; 
    margin:1.5em 0 0;
}

.section h2,
.section .header .time {
    float:left; 
    padding:0 8px 0 0;
    margin:-17px 0 0 0; 
    font-size:12px; 
    font-weight:normal; 
    line-height:1.2em; 
}

.section .header .time {
    float:right;
    padding:0 0 0 8px;
    color:#777;
}

/* Source favicon */

.section h2 .icon {
    position:relative;
    top:-1px;
    float:left;
    margin:0 6px 0 0px;
    border:0;
    vertical-align:middle;
}

/* ............................................................................................................. Feed items */

#stream .article {
    clear:both;
    position:relative; 
    padding:10px 0; 
    margin:0;
}

#stream .article .header {
    margin:0 0 3px;
}

/* Item title */

#stream .article h3 {
    margin:0; 
    font-size:1.4em;
    color:#555;
}

#stream .article h3 a:visited {
    color:#819fc7;
}

/* Item content */

#stream .article .description {
    margin:0 0 5px;
    font-size:0.875em;
    line-height:1.2em;
    color:#333;
}

#stream .article .thumbnail {
    float:left; 
    /*border:1px solid #999;*/ 
    margin:2px 8px 3px 0;
}

/* Item date and actions */

#stream .article .footer {
    clear:both;
    margin:0 20px 0 0;
    font-size:0.6875em; 
    color:#666;
}

.last-old .time { /* marker of last update point */
    color:red;
}

.actions {
    display:inline;
    list-style:none; 
    padding:0; 
    margin:0; 
}

.actions li {
    display:inline; 
    margin:0 0 0 4px;
}

.actions li:before {
    content:"\00b7"; 
    font-weight:bold; 
    margin:0 4px 0 -2px;
}

/* Collapsed view */

#stream.collapsed .description,
#stream.collapsed .enclosure,
#stream.collapsed .article .footer {
    display:none;
}

#stream.collapsed .article .header {
    margin:0;
}

/* =============================================================================================================
** ------------------------------------------------------------------------------------------------------------- FOOTER
** ============================================================================================================= */

#footer {
    padding:10px 5px;
    border-top:1px solid #ccc;
    margin:3em auto 0;
}

#footer p {
    margin:0 0 0.5em;
    font-size:0.6875em;
    color:#666;
}

.icon {
    float:right;
    margin:0 0 5px 5px;
}

.icon img {
    display:block;
    border:0;
}

/* end of @media all */}
