html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } html { line-height: 1; font: inherit; font-size: 100%; vertical-align: baseline; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; } strong { font-weight: bold; } /* * Font awesome */ @font-face { font-family: 'FontAwesome'; src: url("../fonts/fontawesome-webfont.eot?v=4.1.0"); src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.1.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.1.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } header nav li > a:before, .page-header ul li a, .items .item-menu li a { font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Open Sans * */ @font-face { font-family: "OpenSansLight"; src: url(../fonts/OpenSans-Light-webfont.eot); src: url(../fonts/OpenSans-Light-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Light-webfont.woff) format("woff"), url(../fonts/OpenSans-Light-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Light-webfont.svg#OpenSansLight) format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "OpenSansRegular"; src: url(../fonts/OpenSans-Regular-webfont.eot); src: url(../fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Regular-webfont.woff) format("woff"), url(../fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "OpenSansRegular"; src: url(../fonts/OpenSans-Bold-webfont.eot); src: url(../fonts/OpenSans-Bold-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/OpenSans-Bold-webfont.woff) format("woff"), url(../fonts/OpenSans-Bold-webfont.ttf) format("truetype"), url(../fonts/OpenSans-Bold-webfont.svg#OpenSansBold) format("svg"); font-weight: bold; font-style: normal; } /* * Oxygen * */ @font-face { font-family: 'Oxygen-Sans'; src: url("oxygen-sans-webfont.eot"); src: url("oxygen-sans-webfont.eot?#iefix") format("embedded-opentype"), url("oxygen-sans-webfont.woff") format("woff"), url("oxygen-sans-webfont.ttf") format("truetype"), url("oxygen-sans-webfont.svg#oxygen-sanssans-book") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Oxygen-Sans'; src: url("oxygen-sans-bold-webfont.eot"); src: url("oxygen-sans-bold-webfont.eot?#iefix") format("embedded-opentype"), url("oxygen-sans-bold-webfont.woff") format("woff"), url("oxygen-sans-bold-webfont.ttf") format("truetype"), url("oxygen-sans-bold-webfont.svg#oxygen-sanssans-bold") format("svg"); font-weight: bold; font-style: normal; } form input, form button, form textarea, form select { font-family: "Oxygen-Sans", sans-serif; font-size: 1em; color: #595959; } form input, form textarea, form select { background-color: white; border: 1px solid #f2f2f2; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; padding: 5px; } form label, form input, form select { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } form label[for*="form-"] { width: 26.35432%; } form input[type="submit"], form button[type="button"], form button[type="submit"] { background-color: #009463; color: #f2f2f2; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; cursor: pointer; padding: 10px; border: 1px solid #f2f2f2; } form ul { list-style-type: square; margin: 10px 40px; } .alert { padding: 5px 10px; border: 1px solid #f2f2f2; margin: 10px 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } .alert.alert-error { background-color: rgba(253, 242, 213, 0.7); color: rgba(77, 16, 10, 0.8); font-size: .8em; } .alert.alert-normal { border-width: 0px; } .alert.alert-normal ul { list-style-type: square; margin: 10px 40px; } .alert.alert-info { background-color: rgba(183, 229, 234, 0.7); color: rgba(13, 43, 47, 0.8); } .alert.alert-success { background-color: rgba(222, 242, 233, 0.7); color: rgba(31, 76, 56, 0.8); border-color: #001a11; } .alert#shortcuts li strong:before { content: " ' "; } .alert#shortcuts li strong:after { content: " ' "; } .hide-desktop { display: none; } body { font-family: "Oxygen-Sans", sans-serif; font-size: 1em; font-weight: normal; } body > header, body > section { bottom: 0; top: 0; } body > section { overflow: auto; position: absolute; } header { background-color: #009966; left: 0; position: fixed; overflow: hidden; width: 14.64129%; } header nav { margin: 20px auto; position: relative; width: 150px; } header nav > ul { margin-top: 30px; } header nav li { line-height: 30px; } header nav li > a { color: white; font-family: "Oxygen-Sans", sans-serif; margin-left: 5px; text-decoration: none; } header nav li > a:before { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; color: white; margin-right: 10px; text-align: center; width: 24px; } header nav li > a[href="?action=unread"]:before { content: "\f0e0"; } header nav li > a[href="?action=bookmarks"]:before { content: "\f02e"; } header nav li > a[href="?action=history"]:before { content: "\f1da"; } header nav li > a[href="?action=feeds"]:before { content: "\f143"; } header nav li > a[href="?action=config"]:before { content: "\f1de"; } header nav li > a[href="?action=logout"]:before { content: "\f08b"; } header nav li > a[href="?action=more"]:before { content: "\f009"; } header .logo { color: white; display: block; font-size: 1.6em; margin: 0 auto; text-align: center; text-decoration: none; width: 70%; } header .logo span { color: #b3e6cc; } section.page { right: 0; width: 85.35871%; padding: 10px 20px; } section.page .page-header { position: relative; } section.page a { color: #009966; } .page-header { margin: 0 0 15px; } .page-header ul { position: absolute; right: 0; top: 5px; } .page-header ul li { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; text-align: center; } .page-header ul li a, .page-header ul li a:after { overflow: hidden; display: block; height: 25px; text-decoration: none; width: 25px; } .page-header ul li a { background-color: #f2f2f2; color: #008055; position: relative; text-indent: -999px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; } .page-header ul li a:after { position: absolute; top: 0; left: 0; line-height: 25px; z-index: 999; text-indent: 0; } .page-header ul li a[href*="action=unread"][href*="direction=asc"]:after, .page-header ul li a[href*="action=feed-items"][href*="direction=asc"]:after { content: "\f162"; } .page-header ul li a[href*="action=unread"][href*="direction=desc"]:after, .page-header ul li a[href*="action=feed-items"][href*="direction=desc"]:after { content: "\f163"; } .page-header ul li a[href*="mark-as-read"]:after, .page-header ul li a[href*="mark-feed-as-read"]:after { content: "\f058"; } .page-header ul li a[href="?action=add"]:after { content: "\f067"; } .page-header ul li a[href="?action=import"]:after { content: "\f093"; } .page-header ul li a[href="?action=export"]:after { content: "\f019"; } .page-header ul li a[href="?action=refresh-all"]:after { content: "\f021"; } .page-header ul li a[href="?action=confirm-flush-history"]:after { content: "\f014"; } .page-header ul li a[href="?action=feeds"]:after { content: "\f143"; } .items article { -webkit-box-shadow: 0 3px 0 #006644; -moz-box-shadow: 0 3px 0 #006644; box-shadow: 0 3px 0 #006644; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: rgba(242, 242, 242, 0.29); margin-bottom: 15px; padding: 20px; } .items article[data-item-status="read"][data-item-page="feed-items"] { background-color: rgba(153, 153, 153, 0.7); } .items article > h2, .items article > p.preview { display: block; font-family: "OpenSansRegular", Helvetica, Arial, sans-serif; } .items article h2 { font-size: 1em; font-weight: normal; } .items article h2 a { color: #000; font-weight: bold; text-decoration: none; } .items article h2 .feed-last-checked { font-size: .8em; } .items article p.preview { color: #4d4d4d; font-size: 1em; font-weight: normal; } .items .item-menu { font-size: .8em; } .items .item-menu li { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } .items .item-menu li:before { content: " / "; padding-right: 5px; padding-left: 5px; } .items .item-menu li:first-child:before { display: none; } .items .item-menu li a { color: #008055; text-decoration: none; } .items .item-menu li a:before { margin-right: 2px; } .items .item-menu li a:first-child:before { content: "\f0b0"; } .items .item-menu li a[id*="original-"]:before { content: "\f08e"; } .items .item-menu li a[href*="action=confirm-remove-feed"]:before { content: "\f014"; } .items .item-menu li a[href*="action=edit-feed"]:before { content: "\f044"; } .items .item-menu li a[href*="action=refresh-feed"]:before { content: "\f021"; } .items .item-menu li a[id*="bookmark-"]:before { content: "\f088"; } .items .item-menu li a[id*="bookmark-"][data-reverse-label*="remove"]:before { content: "\f087"; } .items .item-menu li a[href*="action=mark-item-removed"]:before { content: "\f014"; margin-right: 2px; } .items .item-menu li a[id*="status-"]:before { content: "\f058"; } .items .item-menu li a[href*="action=disable-grabber-feed"]:before { content: "\f057"; } .items .item-menu li a[href*="action=enable-grabber-feed"]:before { content: "\f058"; } .items .item-menu li a[href*="action=confirm-disable-feed"]:before { content: "\f05c"; } .items .item-menu li a[href*="action=enable-feed"]:before { content: "\f05d"; } .items #bottom-menu { display: none; visibility: hidden; } #current-item { position: relative; } #current-item > nav { position: absolute; right: 0; top: 0; *zoom: 1; } #current-item > nav:after { content: ""; display: table; clear: both; } #current-item > nav span { -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #f2f2f2; display: block; padding: 5px 10px; color: #7f7f7f; } #current-item > nav span a { text-decoration: none; color: #009966; } #current-item > nav span.nav-left { float: left; margin-right: 10px; } #current-item > nav span.nav-right { float: right; } #current-item > h1 { font-size: 1.6em; } #current-item > h1 a { color: black; text-decoration: none; } #current-item .item-infos { border-bottom: 1px solid #b2b2b2; border-top: 1px solid #b2b2b2; margin: 10px 0; padding: 5px 0; } #current-item .item-infos li { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; font-size: 0.9em; } #current-item .item-infos li:before { content: " / "; } #current-item .item-infos li:first-child:before { display: none; } #current-item .item-infos li a { color: #009966; text-decoration: none; } #current-item .item-infos li a:hover { text-decoration: underline; } #current-item #item-content { padding: 10px 0; *zoom: 1; } #current-item #item-content:after { content: ""; display: table; clear: both; } #current-item #item-content #item-content-enclosure { display: none; } #current-item #item-content h1, #current-item #item-content h2, #current-item #item-content h3, #current-item #item-content h4 { padding: 15px 0 5px 0; } #current-item #item-content h1 { font-size: 1.5em; margin-left: 5px; } #current-item #item-content h2 { font-size: 1.4em; margin-left: 10px; } #current-item #item-content h3 { font-size: 1.3em; margin-left: 15px; } #current-item #item-content h4 { font-size: 1.2em; margin-left: 20px; } #current-item #item-content p, #current-item #item-content li { line-height: 1.5; } #current-item #item-content pre { background-color: #f2f2f2; border: 1px solid #b2b2b2; padding: 10px; margin: 10px 0; } #current-item #item-content ul { padding: 0 0 0 30px; margin: 10px 0; list-style-type: square; } #current-item #item-content img { margin: 15px auto 15px auto; max-width: 95%; width: 50%; display: block; } #current-item #item-content p, #current-item #item-content br { line-height: 30px; } #login-page { background-color: #fff; } #login-page section { width: auto; position: relative; overflow: visible; } #login-page section.page { margin: 20px; width: 480px; } #login-page .page-header { visibility: hidden; } #login-page form { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; background-color: rgba(216, 216, 216, 0.9); margin-left: 20px; padding: 10px; } #login-page form > * { margin: 10px; } #login-page form [type="text"], #login-page form [type="password"] { width: 380px; } @media only screen and (max-width: 480px) { #login-page section.page { margin: 5px; width: auto; } #login-page form { margin: 0 auto; padding: 10px; } #login-page form [type="text"], #login-page form [type="password"] { width: 220px; } } @media only screen and (max-width: 960px) { #login-page { background: url("../images/bg-small.jpg") repeat center center; } body > header { top: 5px; left: 20px; bottom: inherit; width: auto; z-index: 999; background-color: transparent !important; } body > .page { width: 100%; position: relative; } header nav { width: auto; margin: auto; } header nav .logo { display: none; } header nav > ul { margin: auto; } header nav li { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; padding: 5px 0; } header nav li:first-child { display: none; } header nav li a { display: block; color: #009966; } header nav li a[href*="action=more"] { width: 35px; height: 35px; line-height: 35px; -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #f2f2f2; } header nav li a[href*="action=more"]:before { height: 100%; width: 100%; line-height: inherit; } header nav li a:before { color: #009966; } .page .page-header h2 { visibility: hidden; } .page .page-header ul li a, .page .page-header ul li a:after { width: 35px; height: 35px; line-height: 35px; } .menu-more { margin-top: 50px; } .menu-more li { display: block; -webkit-box-shadow: 0 3px 0 #009966; -moz-box-shadow: 0 3px 0 #009966; box-shadow: 0 3px 0 #009966; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; background-color: #f2f2f2; margin: 10px auto; } .menu-more li a { display: block; padding: 10px 20px; text-decoration: none; width: 100%; } .items article p.preview { display: none; } #current-item { padding-top: 35px; } form label { display: block; } form label[for*="form-"] { width: auto; } .alert.alert-normal ul { margin: 10px 5px; } .hide-mobile { display: none !important; } .hide-desktop { display: block; } }