+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+body {
+ margin: 10px;
+ font-family: 'Roboto',Verdana,Geneva,sans-serif;
+ font-size: 16px;
+ color: #000;
+}
+
+h1 span {
+ color #FFF;
+ background: #000;
+ display: inline-block;
+ padding: 0.2em 1em 0.2em 1.2em;
+ font-size: 0.7em;
+ position: relative;
+ top: -1em;
+ left: -1em;
+}
+
+h1 a {
+ color: #FFF;
+ text-decoration: none;
+}
+
+#menu {
+ font-family: 'fontello';
+ position:fixed;
+ z-index: 11;
+ top: 0.7em;
+ right: 0.5em;
+ border:0;
+ font-size: 2em;
+ background: #000;
+ color:#FFF;
+ height: 58px;
+ width: 58px;
+ line-height:58px;
+ border-radius:120px;
+}
+
+#menu:hover, #menu:focus {
+ background: #FFF;
+ color:#000;
+ cursor: pointer;
+}
+
+#menu span {
+ position: absolute;
+ top: -99999px;
+}
+
+#menuContainer ul, #article_toolbar ul {
+ position:fixed;
+ top: 0;
+ left:0;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ text-align:center;
+ height:80px;
+}
+
+/*Inspired by http://tympanus.net/Tutorials/AnimatedBorderMenus/index.html */
+
+#menuContainer, #article_toolbar {
+ position: fixed;
+ top: 0;
+ left:0;
+ width: 100%;
+ height: 0;
+ overflow: hidden;
+ border-width:0;
+ border-style: solid;
+ border-color:#000;
+ background-color: transparent;
+ -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
+ -moz-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
+ transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
+}
+
+#article_toolbar ul {
+ padding: 1.7em;
+}
+
+#menuContainer.open, #article_toolbar.open {
+ border-width:80px;
+ height: 100%;
+ background: rgba(0,0,0,0.5);
+ -webkit-transition: border-width 0.3s, background-color 0.3s;
+ -moz-transition: border-width 0.3s, background-color 0.3s;
+ transition: border-width 0.3s, background-color 0.3s;
+ z-index: 1;
+}
+
+#links li, #article_toolbar li {
+ list-style: none;
+ display: inline-block;
+}
+
+#links li a, #article_toolbar a {
+ color:#FFF;
+ display: block;
+ position:relative;
+ top: -200px;
+ -webkit-transition: top 0.3s ease;
+ -moz-transition: top 0.3s ease;
+ transition: top 0.3s ease;
+ padding:1.85em 1em;
+}
+
+#links li a {
+ text-decoration:none;
+ text-transform:uppercase;
+}
+
+#links li a:hover, #links li a:focus {
+ background: #FFF;
+ color:#000;
+}
+
+#menuContainer.open li a, #article_toolbar.open a {
+ top: 0;
+ -webkit-transition: top 0.3s ease;
+ -moz-transition: top 0.3s ease;
+ transition: top 0.3s ease;
+ -webkit-transition-delay:0.25ms;
+ -moz-transition-delay:0.25ms;
+ transition-delay:0.25ms;
+}
+
+#menuContainer.open li:nth-child(2) a {
+ -webkit-transition-delay:0.50ms;
+ -moz-transition-delay:0.50ms;
+ transition-delay:0.50ms;
+}
+
+#menuContainer.open li:nth-child(3) a {
+ -webkit-transition-delay:1ms;
+ -moz-transition-delay:1ms;
+ transition-delay:1ms;
+}
+
+#menuContainer.open li:nth-child(4) a {
+ -webkit-transition-delay:1.25ms;
+ -moz-transition-delay:1.25ms;
+ transition-delay:1.25ms;
+}
+
+#menuContainer.open li:nth-child(5) a {
+ -webkit-transition-delay:1.55ms;
+ -moz-transition-delay:1.55ms;
+ transition-delay:1.55ms;
+}
+
+#menu:before {
+ content: "\e801";
+ display: block;
+ text-indent: 0;
+}
+
+body > header {
+ position: fixed;
+ top: 0;
+ left: 1em;
+ z-index: 10;
+}
+
+#main {
+ padding:6em;
+}
+
+/* ==========================================================================
+ entrie
+ ========================================================================== */
+
+.entrie, #article {
+ width: 45em;
+ margin: auto;
+ position:relative;
+ padding: 0 0 1em 0;
+ margin-bottom: 1.5em;
+}
+
+#article a {
+ text-decoration: underline;
+ color:#000;
+}
+
+#article a:hover, #article a:focus {
+ text-decoration: none;
+}
+
+.entrie:after {
+ content:"";
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ background: #000;
+ bottom:0;
+ left: -1em;
+}
+
+.entrie p {
+ padding:0 0 0 1.5em;
+}
+
+.entrie:before {
+ content:'';
+ position: absolute;
+ top: 0;
+ left: -1em;
+ width: 4px;
+ height: 100%;
+ background: #000;
+}
+
+.entrie h2:after {
+ content:"";
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: #000;
+ border-width:7px;
+ border-color:transparent transparent transparent #000;
+ border-style: solid;
+ position: absolute;
+ top: 0.8em;
+ right: -0.58em;
+}
+
+.entrie h2 {
+ margin:0;
+ display: inline-block;
+ position: relative;
+ max-width: 78%;
+}
+
+.entrie h2 a {
+ color:#000;
+ text-decoration:none;
+ display: block;
+ background: #000;
+ padding: 0.4em 1em;
+ color:#FFF;
+ margin-left: -0.5em;
+ -webkit-transition: all 0.3s ease-out;
+ -moz-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+}
+
+.entrie h2 a:hover, .entrie h2 a:focus {
+ padding:0.4em 1em 0.4em 2em;
+}
+
+ul {
+ padding:0;
+ margin:0;
+}
+
+ul li {
+ list-style: none;
+}
+
+.tools {
+ display: inline-block;
+ margin-left: 1em;
+ vertical-align: top;
+ padding-top: 1em;
+}
+
+.tools a span {
+ position:absolute;
+ top: -99999px;
+}
+
+.tools li {
+ display: inline-block;
+}
+
+.tools a {
+ display: block;
+ color:#FFF;
+ background: #000;
+ text-decoration:none;
+ height: 1.5em;
+ width: 1.5em;
+ text-align: center;
+ line-height:1.5em;
+ border-radius: 90px;
+}
+
+.tools a:hover, .tools a:focus {
+ background: #FFF;
+ color:#000;
+}
+
+.tools a:before { display: block; font-family: 'fontello'; }
+
+
+.fav-off:before, .fav:before { content: '\e805'; } /* '' */
+.archive-off:before, .archive:before { content: '\e804'; } /* '' */
+.tools .archive, .tools .fav {
+ background: #FFF;
+ color:#000;
+}
+.link:before { content: '\e800'; } /* '' */
+.delete:before { content: '\e803'; } /* '' */
+.reading-time:before { content: '\e802'; } /* '' */
+
+#article_toolbar a:before {
+ display: block;
+ font-family: 'fontello';
+}
+
+#article_toolbar a {
+ display: block;
+ color:#000;
+ background: #FFF;
+ text-decoration:none;
+ height: 1.5em;
+ width: 1.5em;
+ text-align: center;
+ line-height:1.5em;
+ border-radius: 90px;
+ padding: 0;
+}
+
+#article_toolbar a:hover, #article_toolbar a:focus {
+ background: #000;
+ color:#FFF;
+}
+
+#article_toolbar span {
+ position: absolute;
+ top: -99999px;
+}
+
+.email:before { content: '\e80a'; } /* '' */
+.icon-check:before { content: '\e804'; } /* '' */
+.back:before { content: '\e806'; } /* '' */
+.bad-display:before { content: '\e808'; } /* '' */
+.twitter:before { content: '\e807'; } /* '' */
+
+#article_toolbar .flattrli {
+ display: none;
+}
+
+#article_toolbar li {
+ margin: 0 0 0 1em;
+}
+
+
+footer {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ padding: 0 2%;
+ left: 0;
+ text-align:right;
+ font-size: 0.8em;
+ font-style: italic;
+ background: rgba(255,255,255,0.5);
+}
+
+footer a {
+ color:#000;
+}
+
+footer a:hover,footer a:focus {
+ text-decoration: none;
+}
+
+footer p:first-child {
+ float:left;
+}
+
+#loginForm fieldset {
+ border:5px solid #000;
+ padding: 1.5em;
+}
+
+fieldset {
+ border:0;
+ padding: 0;
+}
+
+#loginForm {
+ max-width: 25em;
+ margin: auto;
+}
+
+#loginForm .row {
+ margin-bottom: 0.5em;
+}
+
+form h2 {
+ margin-top: 0;
+}
+
+form label {
+ width: 40%;
+ display: inline-block;
+}
+
+form input[type="text"], form input[type="password"], form input[type='url'], form select {
+ border:1px solid #000;
+ padding:0.5em 1em;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0){
+ form select{
+ -webkit-appearance: none;
+ background: url(../img/bg-select.png) no-repeat right center;
+ padding-right: 2.2em;
+ border-radius: 0;
+ }
+}
+
+form button, form input[type="submit"] {
+ background: #000;
+ color:#FFF;
+ border:0;
+ font-size:1em;
+ padding:0.5em 1em;
+ margin-top: 1em;
+ cursor: pointer;
+}
+
+form button:hover, form button:focus, form input[type="submit"]:hover, form input[type="submit"]:focus {
+ background: #FFF;
+ color: #000;
+}
+
+/* ==========================================================================
+ Config
+ ========================================================================== */
+
+#config {
+ max-width: 60%;
+ margin: auto;
+}
+
+#config a {
+ background: #000;
+ text-decoration: none;
+ color:#FFF;
+ padding: 0.2em 1em;
+}
+
+#config .special {
+ background: none;
+ padding:0;
+ color: #000;
+}
+
+#config a:hover, #config a:focus {
+ background: #FFF;
+ color:#000;
+}
+
+#config li {
+ margin-bottom: 1em;
+}
+
+#plainurl {
+ font-size: 1em;
+}
+
+#config label {
+ width: 20%;
+}
+
+.results {
+ max-width: 62.5%;
+ font-style:italic;
+ margin: 1em auto 2.5em;
+}
+
+#sort {
+ max-width: 62.5%;
+ margin: 0 auto -2.5em;
+ text-align: right;
+ border-bottom:1px dotted #000;
+}
+
+#sort li {
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+ top: -0.1em;
+ margin-left: 1em;
+}
+
+#sort li img {
+ display: none;
+}
+
+#sort a {
+ display: inline-block;
+ font-family: 'fontello';
+ color:#000;
+ text-decoration: none;
+}
+
+#sort a:hover, #sort a:focus {
+ text-decoration: underline;
+}
+
+#sort a:before {
+ display: block;
+}
+
+#sort li a:first-child:before {
+ content: '\e809';
+}
+
+#sort li a:first-child + a:before {
+ content: '\e80b';
+}
+
+@media screen and (max-width: 860px) {
+ .entrie, #article {
+ width: 30em;
+ }
+}
+
+@media screen and (max-width: 650px) {
+ #menuContainer ul, #article_toolbar ul {
+ width: 120px;
+ height: 100%;
+ }
+
+ body > header {
+ position: static;
+ }
+
+ #main {
+ padding: 0 0.5em 6em;
+ }
+
+ #menu {
+ display: none;
+ }
+
+ #main:before {
+ content:none;
+ }
+
+ #menuContainer, #article_toolbar, #menuContainer ul, #article_toolbar ul {
+ position: static;
+ width: 100%;
+ height: auto;
+ }
+
+ #links li a, #article_toolbar a {
+ position: static;
+ color: #000;
+ }
+
+ #links li a {
+ padding: 1em;
+ min-width: 120px;
+ text-align: left;
+ }
+
+ #article_toolbar li {
+ margin-bottom: 1em;
+ margin-left: 0.5em;
+ }
+
+}
+
+@media screen and (max-width: 500px) {
+ .entrie, #article {
+ width: 17em;
+ }
+ .entrie h2 {
+ width: 100%;
+ max-width: none;
+ }
+ .entrie h2 a:hover, .entrie h2 a:focus {
+ padding-left: 1em;
+ background: #FFF;
+ color: #000;
+ }
+ .entrie h2:after {
+ content:none;
+ }
+
+ .messages {
+ width: 100%!important;
+ }
+
+ #sort {
+ margin: 3em auto 0;
+ max-width: none;
+ text-align: center;
+ }
+ #config {
+ margin: 7em auto 0;
+ max-width: none;
+ }
+ #config label { width: 100%; }
+ .results {
+ max-width: none;
+ margin-bottom: 1em;
+ }
+
+ footer p:first-child {
+ float: none;
+ }
+ footer {
+ position:static;
+ }
+}