* { margin: 0; padding: 0; } html, body { height: 100%; } /* LIENS */ a { color: #0062BE; text-decoration: none; } a:hover { text-decoration: underline; } /* LISTES */ ul, ol { margin: 10px 0 10px 30px; line-height: 190%; } /* TITRES */ h1, h2, h3 { min-height: 40px; padding: 10px 0 0; line-height: 40px; } /* IMG */ img { max-width: 100%; vertical-align: middle; } /* FORMULAIRES */ form { width: 450px; max-width: 100%; margin: 20px auto; padding: 20px; background: #f0f0f0; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 1px 3px #aaa; } label { display: block; margin: 20px 0 0; padding: 0 20px 0 0; font-weight: bold; } input:focus, textarea:focus { color: #3366cc !important; border: 1px solid #3366cc !important; } input[type="text"], input[type="url"], input[type="email"], input[type="number"], textarea { display: block; height: 30px; width: 430px; max-width: 95%; margin: 5px 0 5px; padding: 5px 10px; background: #fff; border: 1px solid #ccc; border-radius: 5px; font-size: 90%; } textarea { min-height: 100px; font-size: 110%; line-height: 150%; font-family: Monospace; } input[type="submit"], button { display: block; height: 40px; width: 100%; margin: 5px 0 5px; padding: 5px 0; } select { width: 100%; padding: 5px; } .radio_group { line-height: 35px; } .radio_group label { display: inline-block; margin: 0; padding: 0 0 0 5px; font-weight: normal; } /* STRUCTURE */ #global { display: table; width: 100%; height: 100%; } .aside { display: table-cell; height: 100%; width: 250px; vertical-align: top; border-right: 1px solid #aaa; background: #fff; } .aside ul { margin: 0; list-style: none; } .aside li { width: 100%; height: 50px; overflow: hidden; line-height: 50px; } .aside li > a, .aside li > span { display: block; width: 230px; padding: 0 10px; } .aside li > a:hover, .aside li > span:hover { text-decoration: none; background: #f0f0f0; } .aside li.disable > span { background: #fff; } .aside li > a > span { float: right; padding: 0 5px; font-size: 80%; } .aside li.active > a { background: #0062BE; color: #fff; } .aside li > h2 { height: 50px; padding: 0; text-align: center; background: #eee; line-height: 50px; } .aside form { display: table; width: 250px; margin: 0; padding: 0; background: #f0f0f0; border: none; border-bottom: 1px solid #aaa; border-radius: 0; box-shadow: none; } .aside form input { display: inline-block; height: 48px; line-height: 48px; } .aside form input[type="url"] { width: 200px; margin: 0; padding: 0; border: none !important; border-radius: 0; } .aside form input[type="submit"] { width: 50px; margin: 0; padding: 0; border: none; border-radius: 0; } #main_aside { position: fixed; } #categories { height: 69%; overflow: auto; border-top: 1px solid #aaa; } #main { display: table-cell; height: 100%; max-width: 800px; padding: 0 0 0 250px; line-height: 180%; background: #fafafa; vertical-align: top; } #top { width: 100%; background: #eee; border-bottom: 1px solid #aaa; box-shadow: 0 1px 3px #aaa; text-align: center; } #top a { display: inline-block; height: 50px; width: 50%; line-height: 50px; font-weight: bold; } #top a:hover { background: #fafafa; text-decoration: none; } #stream { padding: 20px 0; } #main .table { display: table; width: 100%; height: 100%; } #main .nothing { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } .post { width: 90%; margin: 0 auto; } .post.flux { margin: 40px auto; font-family: Palatino, "Times New Roman", serif; line-height: 170%; border-left: 5px solid #aaa; background: #eee; border-radius: 5px; box-shadow: 0 1px 3px #aaa; } .post.flux .before { padding: 20px; color: #666; font-size: 80%; text-align: center; } .post.flux .after { margin: 50px 0 0; font-size: 80%; text-align: center; border-top: 1px solid #aaa; } .post.flux .after a { display: inline-block; height: 50px; line-height: 50px; width: 50%; } .post.flux .after a:hover { background: #fff; text-decoration: none; border-radius: 0 0 5px 5px; box-shadow: 0 1px 3px #aaa; } .post.flux > h1 { padding: 10px 20px; } .post.flux .content { padding: 10px 20px; } .post.flux .content h1, .post.flux .content h2, .post.flux .content h3 { margin: 20px 0; } .post.flux .content p { margin: 20px 0; } .post.flux .content img { margin: 10px; border-radius: 5px; } .post.flux .content pre { width: 90%; margin: 10px auto; padding: 10px; overflow: auto; background: #666; border: 1px solid #000; color: #fafafa; border-radius: 5px; } .post.flux .content q, .post.flux .content blockquote { display: block; margin: 10px 0; padding: 0 20px; font-style: italic; border-left: 4px solid #ccc; color: #666; } .post.flux.not_read { border-left: 5px solid #FF5300; background: #FFF3ED; } .post.flux.favorite { border-left: 5px solid #FFC300; background: #FFF6DA; } .post.flux.active { border-left: 5px solid #0062BE; } /*** PAGINATION ***/ .pagination { margin: 20px 0; list-style: none; text-align: center; font-size: 100%; } .pagination li { display: inline-block; width: 30px; height: 30px; } .pagination li.pager-next, .pagination li.pager-previous, .pagination li.pager-first, .pagination li.pager-last { width: 100px; } .pagination li.pager-current { font-weight: bold; } .pagination li a { display: block; color: #F09600; }