/* ------------------------------------------
RIVERS OF NEWS
nicolasgallagher.com/rivers/

DEFAULT.CSS

Description:    River of News interface
Author:         Nicolas Gallagher (http://nicolasgallagher.com)
Updated:        9 February 2011
Version:        0.2.2
------------------------------------------ */


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

@media all {

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

html, 
body, 
div {
    padding:0;
    margin:0;
}

body {
    font:100.01%/1 Arial, sans-serif; 
    color:#333; 
    background:#fff;
}

/* ............................................................................................................. Links */

a:link, 
a:visited {
    text-decoration:none;
    color:#1E68A6; 
}

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


/* ............................................................................................................. Default typography */

h1,
h2,
h3 {
    line-height:1.1em; 
    color:#222;
}

p {
    margin:0 0 1.4em; 
    font-size:0.875em; 
    line-height:1.4em;
}

/* ............................................................................................................. HTML5 elements */

header, 
hgroup, 
footer, 
section,
aside, 
article {
    display:block;
}

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

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

#header hgroup {
    max-width:500px;
    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 {
    max-width:500px;
    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(http://static.newsriver.org/beautiful/loader.gif) no-repeat 0 0;
}

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

.info {
    margin:0 0 30px;
}

.info:after {
    content:".";
    display:block;
    visibility:hidden;
    font-size:0;
    clear:both;
    line-height:0;
}

/* Feed's last update */

.updated {
    float:right; 
    margin:0;
    font-size:12px;
}

/* Display options */

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

#display:before {
    content:""; 
    float:left; 
    width:16px; 
    height:16px; 
    margin:0 6px 0 -22px; 
    background:url(http://static.newsriver.org/beautiful/sprite.png) no-repeat -16px 0;
}

.compact #display:before {
    background-position:0 0;
}

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

.section {
    clear:both;
}

.section {
    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; 
    background:#fff;
}

.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 -22px;
    border:0;
    vertical-align:middle;
}

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

.section .header + .article {
    border-top:0;
}

.article {
    clear:both;
    position:relative; 
    padding:10px 0; 
    border-top:1px solid #eee;
    margin:0;
}

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

/* Item title */

.article h3 {
    margin:0; 
    font-size:1em;
}

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

/* Item content */

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

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

/* Item date and actions */

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

.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;
}

/* Compact display */

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

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

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

#footer {
    max-width:500px;
    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;
}

/* =============================================================================================================
** ------------------------------------------------------------------------------------------------------------- IE HACKS
** ============================================================================================================= */

/* IE6 */

* html #header {
    height:0;
}

* html .info {
    width:100%;
}

* html #header hgroup,
* html #stream,
* html #footer {
    width:500px;
}

/* end of @media all */}


/* ============================================================================================================================ **
**                                                       M O B I L E
** ============================================================================================================================ */

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

#header h2 {
    display:none;
}

.info {
    margin-bottom:10px;
}

.updated,
#display {
    float:none;
    margin:0 0 10px;
}

/* Feed and items */

.section .header h2 {
    float:none;
    margin-top:0;
}

.section .header .time {
    float:none;
    padding:0;
    margin-top:0;
}

.section {
    margin-top:1em;
}

.article h3 {
    font-size:0.875em;
}

.article .description {
    font-size:0.8125em;
}

#footer p {
    font-size:0.6875em;
}

/* end of @media screen and (max-width : 340px) */}