body {
    height: 100%; width: 100%; margin: 0; background: #ffffff;
    font-family: 'Open Sans', 'Droid Sans', sans-serif, Verdana, Lucida; }

a { text-decoration: none; cursor: pointer; }
.dark { background: #555555; }


/* Topbar */
#topbar {
    /* position: absolute; top: 0; left: 0; right: 0; overflow: hidden; height: 80px; */
    padding: 10px 20px; background: #333333; }
#bottombar { height: 55px; padding: 10px 20px; background: #333333; }
#topbar .btn_popup { position: relative;}
#topbar .popup {
    display: none; position: absolute; z-index: 100;
    margin: 0; top: 0; left: -4px; width: 250px;
    border-radius: 10px; border: 4px solid #cccccc; background-color: #f0f0f0; }
#topbar .popup ul {
    list-style-type: none; margin: 0; padding: 5px; text-align: left;
    color: #333333; font-size: 32px; font-weight: normal; }
#topbar .popup ul li { padding: 10px; }
#topbar .popup img { margin-right: 10px; }
#topbar .bigtext { padding: 0 30px; font-size: 30px; vertical-align: top; color: #888888; }
#topbar .text { margin: 0 20px; font-size: 20px; vertical-align: top; color: #aaaaaa; }
#topbar .btns, #bottombar .btns { float: right; margin: 5px 0; }
#topbar .btns span.text, #bottombar .btns span.text { font-size: 28px; margin: 0 15px; }
#topbar .btn img, #bottombar .btn img { vertical-align: middle; padding: 0 15px; }
#topbar a.btn span, #bottombar a.btn span { vertical-align: middle; padding: 2px 12px;
    font-size: 28px; font-weight: bold;
    background: #444444; color: #888888; border-radius: 8px; }
#bottombar a { margin: 0 25px; }


/* Summary */
/* #summary { position: absolute; top: 80px; left: 0px; right: 0px; bottom: 0px; overflow: auto; } */
#summary .group {
    padding: 15px 20px; font-size: 42px;
    color: #aaaaaa; background: #555555;
    background: linear-gradient(to bottom, #555555 0%,#444444 100%);
    background: -moz-linear-gradient(center top, #555555, #444444) repeat scroll 0px 0px transparent;
    background: -webkit-linear-gradient(top, #555555 0%,#444444 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#444444));
    background: -o-linear-gradient(top, #555555 0%,#444444 100%);
    background: -ms-linear-gradient(top, #555555 0%,#444444 100%); }
#summary .group img, #summary .feed img { margin-right: 10px; }
#summary .group_children { display: none; }
#summary .feed {
    padding: 10px 20px 10px 75px;
    font-size: 36px; color: #cccccc; background: #3e3e3e; }
#summary .num {
    float: right; width: 100px; padding: 5px; border-radius: 10px; 
    font-size: 80%; text-align: center; color: #eeeeee; background: #777777; }


/* Articles */
/* #articles { position: absolute; top: 80px; left: 0; right: 0; bottom: 0; overflow: auto; } */
#articles .art {
    background: linear-gradient(to bottom, #ffffff 0%,#dddddd 100%);
    background: -moz-linear-gradient(center top, #ffffff, #dddddd) repeat scroll 0px 0px transparent;
    background: -webkit-linear-gradient(top, #ffffff 0%,#dddddd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd));
    background: -o-linear-gradient(top, #ffffff 0%,#dddddd 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#dddddd 100%);
    padding: 8px 10px; border-bottom: 1px solid #888888; }
#articles .mnhdr { color: #888888; }
#articles .icon { vertical-align: middle; }
#articles .feedname { padding-left: 5px; vertical-align: middle; font-size: 7px; }
#articles .date2 { float: right; vertical-align: middle; font-size: 18px; }
#articles .icon2 { float: right; margin: 0 10px; vertical-align: middle; }
#articles .mntitle { padding: 0 10px 0 45px; }
#articles .title { font-size: 12px; font-weight: bold; color: #000000; }
#articles .summary { font-size: 9px; color: #666666; }

#articles .actions, #articles .states {
    display: none; position: absolute; z-index: 100; width: 350px;
    border-radius: 10px; border: 4px solid #888888; background: #555555; }
#articles .actions ul, #articles .states ul {
    list-style-type: none; margin: 0; padding: 5px; text-align: left;
    color: #cccccc; font-size: 32px; font-weight: normal; }
#articles .actions li, #articles .states li { padding: 10px; }
#articles .actions img, #articles .states img { margin-right: 10px; }


/* Articles */
#article { padding: 10px 20px; background: #dddddd; }
#article .mnhdr { font-size: 15px; color: #888888; padding: 10px 0px; }
#article .title { font-size: 22px; font-weight: bold; color: #003366; }
#article .feedname { color: #008000; }
#article .date { color: orange; }
#article .content { margin: 5px; font-family: Verdana, Lucida, Arial; font-size: 12px; }


/* Dialogs */
div.loading { margin: 100px auto; text-align: center; font-size: 60px; color: #333333; }
div.message { margin: 100px auto; text-align: center; font-size: 60px; font-weight: bold; color: #444444; }
div.error  { margin: 100px auto; text-align: center; font-size: 45px; color: #660033; }
