601 lines
11 KiB
CSS
601 lines
11 KiB
CSS
|
/*
|
||
|
|
# -- BEGIN LICENSE BLOCK ----------------------------------
|
||
|
|
#
|
||
|
|
# This file is part of Vertigo, a Dotclear 2 theme.
|
||
|
|
#
|
||
|
|
# Copyright (c) 2003-2008 Olivier Meunier and contributors
|
||
|
|
# Licensed under the GPL version 2.0 license.
|
||
|
|
# See LICENSE file or
|
||
|
|
# http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
|
||
|
|
#
|
||
|
|
# -- END LICENSE BLOCK ------------------------------------
|
||
|
|
*/
|
||
|
|
|
||
|
|
/* Initial --------------------------------------------- */
|
||
|
|
html, body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font: normal 62.5% "Helvetica Neue",Helvetica,Arial,sans-serif;
|
||
|
|
background: #2d2526 url(img/body-bg.png) repeat-x fixed top left;
|
||
|
|
color: #bfbfbf;
|
||
|
|
}
|
||
|
|
h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address {
|
||
|
|
margin: 1em 0;
|
||
|
|
padding: 0;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
h1, h2, h3, h4, h5, h6 {
|
||
|
|
margin-top: 1.4em;
|
||
|
|
margin-bottom: 0.7em;
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font: normal 1.7em "New York",serif;
|
||
|
|
}
|
||
|
|
h2 {
|
||
|
|
font: normal 1.5em Helvetica,sans-serif;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
font: normal 1.3em Helvetica,sans-serif;
|
||
|
|
}
|
||
|
|
h4 {
|
||
|
|
}
|
||
|
|
h5 {
|
||
|
|
}
|
||
|
|
h6 {
|
||
|
|
}
|
||
|
|
ul, ol {
|
||
|
|
display: block;
|
||
|
|
padding: 0;
|
||
|
|
margin: 1em 0;
|
||
|
|
}
|
||
|
|
ul ul, ul ol, ol ol, ol ul {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
li, dd, blockquote {
|
||
|
|
padding-left: 0;
|
||
|
|
margin-left: 1em;
|
||
|
|
}
|
||
|
|
ol li {
|
||
|
|
margin-left: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
form, fieldset {
|
||
|
|
display: block;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
label {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
fieldset {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
input, select, textarea {
|
||
|
|
font-size: 1em;
|
||
|
|
font-family: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
white-space: pre;
|
||
|
|
white-space: -moz-pre-wrap;
|
||
|
|
white-space: -hp-pre-wrap;
|
||
|
|
white-space: -o-pre-wrap;
|
||
|
|
white-space: -pre-wrap;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
white-space: pre-line;
|
||
|
|
word-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
table {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
a img {
|
||
|
|
border: none;
|
||
|
|
}
|
||
|
|
:focus {
|
||
|
|
outline: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: #a4a52b;
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover, a:focus, a:active {
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Layout ---------------------------------------------- */
|
||
|
|
#page {
|
||
|
|
position: relative;
|
||
|
|
width: 860px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
#top {
|
||
|
|
height: 130px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
#top h1 {
|
||
|
|
font: normal 40px/1 Palatino,serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 40px 0 0 0;
|
||
|
|
height: 130px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#prelude {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
margin: 0;
|
||
|
|
color: #2D2526;
|
||
|
|
}
|
||
|
|
#prelude a {
|
||
|
|
color: #2D2526;
|
||
|
|
}
|
||
|
|
#prelude a:hover, #prelude a:focus {
|
||
|
|
color: red;
|
||
|
|
background: yellow;
|
||
|
|
}
|
||
|
|
|
||
|
|
#wrapper {
|
||
|
|
width: 860px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 0 0;
|
||
|
|
overflow: hidden;
|
||
|
|
font-size: 1.3em;
|
||
|
|
background: #000 url(img/wrapper-bg.png) repeat-y top left;
|
||
|
|
color: inherit;
|
||
|
|
}
|
||
|
|
#main {
|
||
|
|
float: left;
|
||
|
|
width: 530px;
|
||
|
|
background: #fff url(img/main-bg.png) no-repeat top left;
|
||
|
|
color: #505050;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content {
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
#content a:hover, #content a:focus, #content a:active {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar {
|
||
|
|
width: 329px;
|
||
|
|
float: right;
|
||
|
|
background: transparent url(img/sidebar-bg.png) no-repeat top right;
|
||
|
|
}
|
||
|
|
#blognav, #blogextra {
|
||
|
|
padding: 0 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#footer {
|
||
|
|
width: 860px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 5px 0 2em 0;
|
||
|
|
font-size: 1.1em;
|
||
|
|
}
|
||
|
|
#footer p {
|
||
|
|
margin: 0;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Sidebar --------------------------------------------- */
|
||
|
|
#sidebar h2 {
|
||
|
|
border-bottom: 1px solid #333;
|
||
|
|
font-size: 24px;
|
||
|
|
margin: 1em 0 0 0;
|
||
|
|
}
|
||
|
|
#sidebar li {
|
||
|
|
list-style: square;
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
#search h2 {
|
||
|
|
font-size: 14px;
|
||
|
|
margin-top: 32px;
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
#search p {
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
#search p * {
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
#search #q {
|
||
|
|
border: 1px solid #fff;
|
||
|
|
background: #bfbfbf url(img/search.png) no-repeat 5px center;
|
||
|
|
width: 130px;
|
||
|
|
padding: 2px 2px 2px 20px;
|
||
|
|
}
|
||
|
|
#search input.submit {
|
||
|
|
margin: 0 0 0 5px;
|
||
|
|
/* defined by input.submit */
|
||
|
|
}
|
||
|
|
|
||
|
|
#topnav ul {
|
||
|
|
margin-top: 2em;
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
#topnav li {
|
||
|
|
display: inline;
|
||
|
|
margin: 0 30px 0 0;
|
||
|
|
font-size: 24px;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
#topnav span {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#sidebar .tags ul {
|
||
|
|
list-style: none;
|
||
|
|
font-size: 1.1em;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
#sidebar .tags ul li {
|
||
|
|
list-style: none;
|
||
|
|
display: inline;
|
||
|
|
margin: 0 5px 0 0;
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
#sidebar .tags p {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.tag0 { font-size: 85%; }
|
||
|
|
.tag10 { font-size: 90%; }
|
||
|
|
.tag20 { font-size: 95%; }
|
||
|
|
.tag30 { font-size: 100%; }
|
||
|
|
.tag40 { font-size: 105%; }
|
||
|
|
.tag50 { font-size: 110%; }
|
||
|
|
.tag60 { font-size: 115%; }
|
||
|
|
.tag70 { font-size: 120%; }
|
||
|
|
.tag80 { font-size: 125%; }
|
||
|
|
.tag90 { font-size: 130%; }
|
||
|
|
.tag100 { font-size: 135%; }
|
||
|
|
|
||
|
|
/* Feeds */
|
||
|
|
#sidebar .syndicate li {
|
||
|
|
display: block;
|
||
|
|
list-style: none;
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
#sidebar .syndicate li, #content a.feed {
|
||
|
|
padding-left: 16px;
|
||
|
|
background: transparent url(img/feed.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Post ------------------------------------------------ */
|
||
|
|
#content div.post {
|
||
|
|
position: relative;
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
#content div.post-excerpt *, #content div.post-content * {
|
||
|
|
line-height: 1.4;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Post title */
|
||
|
|
#content div.post h2.post-title {
|
||
|
|
font-size: 32px;
|
||
|
|
margin: 1em 0 0 0;
|
||
|
|
margin-right: 95px;
|
||
|
|
line-height: 1;
|
||
|
|
border-bottom: 1px solid #ccc;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
#content div.post h2.post-title a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: inherit;
|
||
|
|
line-height: inherit;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Day date */
|
||
|
|
#content p.post-date {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 90px;
|
||
|
|
margin: 0;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
#content p.post-date span {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
line-height: inherit;
|
||
|
|
display: block;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
#content p.post-date span.date-d {
|
||
|
|
float: left;
|
||
|
|
margin-right: 2px;
|
||
|
|
font-size: 35px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
#content p.post-date span.date-m {
|
||
|
|
font-size: 20px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
#content p.post-date span.date-y {
|
||
|
|
font-size: 12px;
|
||
|
|
clear: left;
|
||
|
|
position: absolute;
|
||
|
|
top: 24px;
|
||
|
|
left: 0;
|
||
|
|
background: #fff;
|
||
|
|
width: 90px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Post information */
|
||
|
|
#content p.post-info {
|
||
|
|
margin: 5px 0 7px 0;
|
||
|
|
}
|
||
|
|
#content p.post-info-co {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
#content p.post-info-co a.comment_count {
|
||
|
|
padding-left: 18px;
|
||
|
|
margin-right: 5px;
|
||
|
|
background: transparent url(img/comment.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
#content p.post-info-co a.ping_count {
|
||
|
|
padding-left: 16px;
|
||
|
|
background: transparent url(img/ping.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
#content p.post-info-co a.attach_count {
|
||
|
|
padding-left: 16px;
|
||
|
|
background: transparent url(img/attach.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Attachments */
|
||
|
|
#attachments li {
|
||
|
|
list-style: square;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Post misc */
|
||
|
|
#content ul.post-tags {
|
||
|
|
margin: 5px 0 1em 0;
|
||
|
|
}
|
||
|
|
#content ul.post-tags li {
|
||
|
|
display: inline;
|
||
|
|
margin: 0 5px 0 0;
|
||
|
|
padding: 0 0 0 20px;
|
||
|
|
background: transparent url(img/tag.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
|
||
|
|
#content div.post blockquote {
|
||
|
|
display: block;
|
||
|
|
padding: 1px 1em;
|
||
|
|
margin: 0;
|
||
|
|
background: #f6f6f6 url(img/quote-bg.png) no-repeat top right;
|
||
|
|
border-left: 2px solid #a4a52b;
|
||
|
|
}
|
||
|
|
#content div.post blockquote p {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
}
|
||
|
|
#content #ping-url {
|
||
|
|
padding-left: 18px;
|
||
|
|
background: transparent url(img/ping.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Navigation links ------------------------------------ */
|
||
|
|
#navlinks {
|
||
|
|
margin: 2em -10px 0 -10px;
|
||
|
|
padding: 0;
|
||
|
|
border-top: 1px solid #8a8a8a;
|
||
|
|
|
||
|
|
}
|
||
|
|
#navlinks span {
|
||
|
|
display: block;
|
||
|
|
width: 255px;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
#navlinks span.nav-prev {
|
||
|
|
float: left;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
#navlinks span.nav-next {
|
||
|
|
float: right;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
#navlinks span a {
|
||
|
|
display: block;
|
||
|
|
padding: 0.5em;
|
||
|
|
font-weight: bold;
|
||
|
|
background-color: transparent;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: left center;
|
||
|
|
}
|
||
|
|
#navlinks span.nav-prev a {
|
||
|
|
padding-left: 24px;
|
||
|
|
background-image: url(img/prev.png);
|
||
|
|
}
|
||
|
|
#navlinks span.nav-next a {
|
||
|
|
padding-right: 24px;
|
||
|
|
background-image: url(img/next.png);
|
||
|
|
background-position: right center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#navlinks a:hover, #navlinks a:focus, #navlinks a:active {
|
||
|
|
background-color: #a4a52b;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
#navlinks span.nav-prev a:hover, #navlinks span.nav-prev a:focus, #navlinks span.nav-prev a:active {
|
||
|
|
background-image: url(img/prev-h.png);
|
||
|
|
}
|
||
|
|
#navlinks span.nav-next a:hover, #navlinks span.nav-next a:focus, #navlinks span.nav-next a:active {
|
||
|
|
background-image: url(img/next-h.png);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Tagd ------------------------------------------------ */
|
||
|
|
#content ul.tags {
|
||
|
|
list-style: none;
|
||
|
|
font-size: 1.3em;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
#content ul.tags li {
|
||
|
|
list-style: none;
|
||
|
|
display: inline;
|
||
|
|
margin: 0 5px 0 0;
|
||
|
|
line-height: 1.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Comments -------------------------------------------- */
|
||
|
|
#attachments, #comments, #comment-form, #pings {
|
||
|
|
clear: both;
|
||
|
|
}
|
||
|
|
#comments dl, #pings dl {
|
||
|
|
margin: 1em 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
#comments dt, #pings dt {
|
||
|
|
margin: 0;
|
||
|
|
float: right;
|
||
|
|
clear: right;
|
||
|
|
width: 90px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
#comments dd, #pings dd, #pr dd {
|
||
|
|
margin: 0 100px 1em 0;
|
||
|
|
padding: 1px 20px 1px 0.5em;
|
||
|
|
background: #eee url(img/comment-bg.png) no-repeat top right;
|
||
|
|
}
|
||
|
|
#comments dd.me {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
#comments dd cite {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 1em;
|
||
|
|
font-style: normal;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
#comments span.comment-date, #pings span.comment-date {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
width: 90px;
|
||
|
|
margin: 0;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
#comments span.comment-date span, #pings span.comment-date {
|
||
|
|
font-family: Arial,sans-serif;
|
||
|
|
line-height: inherit;
|
||
|
|
display: block;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
#comments span.comment-date span.date-d, #pings span.comment-date span.date-d {
|
||
|
|
float: left;
|
||
|
|
margin-right: 2px;
|
||
|
|
font-size: 35px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
#comments span.comment-date span.date-m, #pings span.comment-date span.date-m {
|
||
|
|
font-size: 20px;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
#comments span.comment-date span.date-y, #pings span.comment-date span.date-y {
|
||
|
|
font-size: 12px;
|
||
|
|
clear: left;
|
||
|
|
position: absolute;
|
||
|
|
top: 24px;
|
||
|
|
left:0;
|
||
|
|
background: #fff;
|
||
|
|
width: 90px;
|
||
|
|
}
|
||
|
|
#comments span.comment-date span.date-h, #pings span.comment-date span.date-h {
|
||
|
|
font-size: 12px;
|
||
|
|
position: absolute;
|
||
|
|
top: 24px;
|
||
|
|
left: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Messages -------------------------------------------- */
|
||
|
|
#pr.error {
|
||
|
|
border: 2px solid #a00;
|
||
|
|
padding: 1em;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #a00;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Forms ----------------------------------------------- */
|
||
|
|
input.preview, input.submit {
|
||
|
|
width: auto;
|
||
|
|
padding: 2px 3px;
|
||
|
|
outline: none;
|
||
|
|
background: #a4a52b;
|
||
|
|
color: #fff;
|
||
|
|
border: none;
|
||
|
|
-moz-border-radius: 3px;
|
||
|
|
-webkit-border-radius: 3px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
input.submit {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
input.preview:focus, input.submit:focus, input.preview:hover, input.submit:hover {
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
#comment-form fieldset {
|
||
|
|
display: block;
|
||
|
|
padding: 0 1em;
|
||
|
|
}
|
||
|
|
#comment-form h3.add-comment {
|
||
|
|
margin: 1em 0;
|
||
|
|
padding-left: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 1em;
|
||
|
|
background: transparent url(img/comment.png) no-repeat center left;
|
||
|
|
}
|
||
|
|
#comment-form h3.add-comment a span {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
#comment-form h3.add-comment a:hover span, #comment-form h3.add-comment a:focus span {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
#comment-form fieldset {
|
||
|
|
display: block;
|
||
|
|
background: #eee url(img/form-bg.png) repeat;
|
||
|
|
}
|
||
|
|
#comment-form fieldset label {
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
#comment-form fieldset p {
|
||
|
|
margin: 0.5em 0;
|
||
|
|
line-height: 1.2;
|
||
|
|
}
|
||
|
|
#comment-form fieldset p.remember * {
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
#comment-form p.field input, #comment-form p.field textarea {
|
||
|
|
border: 1px solid #bfbfbf;
|
||
|
|
padding: 2px 1px;
|
||
|
|
background: #fff;
|
||
|
|
display: block;
|
||
|
|
color: #666;
|
||
|
|
}
|
||
|
|
#comment-form fieldset textarea {
|
||
|
|
width: 98%;
|
||
|
|
}
|
||
|
|
#comment-form #c_name, #comment-form #c_mail, #comment-form #c_site {
|
||
|
|
background-position: 3px center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding-left: 20px;
|
||
|
|
}
|
||
|
|
#comment-form #c_name {
|
||
|
|
background-image: url(img/c-name.png);
|
||
|
|
}
|
||
|
|
#comment-form #c_mail {
|
||
|
|
background-image: url(img/c-mail.png);
|
||
|
|
}
|
||
|
|
#comment-form #c_site {
|
||
|
|
background-image: url(img/c-site.png);
|
||
|
|
}
|
||
|
|
#c_name:hover, #c_mail:hover, #c_site:hover, #c_content:hover,
|
||
|
|
#c_name:focus, #c_mail:focus, #c_site:focus, #c_content:focus {
|
||
|
|
color: #000;
|
||
|
|
}
|