styles/nb_spring.css

   1 /*
   2
   3  NanoBlogger Spring
   4  box model hack with 2 column layout
   5
   6  see suggestions for proper display on ie 5 mac here:
   7  http://www.alistapart.com/articles/footers/
   8
   9 */
  10
  11 html, body  {
  12         background-color: #CCC;
  13         /* footerStickAlt
  14            http://www.themaninblue.com/writing/perspective/2005/08/29/
  15         */
  16         height: 100%;
  17         }
  18
  19 body {
  20         margin: 0 auto;
  21         padding: 0;
  22         text-align: center;
  23         font: 12px/1.5 verdana, arial, helvetica, sans-serif;
  24         }
  25
  26 a               { color: #57933a; text-decoration: none; }
  27 a:link          { color: #57933a; text-decoration: none; }
  28 a:visited       { color: #57933a; text-decoration: none; }
  29 a:active        { color: #7fd754; text-decoration: underline; }
  30 a:hover         { color: #ee9d00; text-decoration: underline; }
  31
  32 h1 {
  33         margin-top: 25px;
  34         margin-bottom: -0.25em;
  35         padding-top: 10px;
  36         font-size: large; /* for IE 5.5 */
  37         f\ont-size: x-large; /* for compliant browsers */
  38         }
  39
  40 h2 {
  41         color: #999999;
  42         margin-bottom: 1.5em;
  43         padding: 0;
  44         text-align: center;
  45         font-family: vedana, arial, helvetica, sans-serif;
  46         font-size: medium;
  47         font-weight: bold;
  48         }
  49
  50 h3 {
  51         margin-top: 1.5em;
  52         margin-bottom: -0.75em;
  53         padding: 0;
  54         color: #003366;
  55         font-size: small;
  56         }
  57
  58 h4, h5, h6 {
  59         margin-top: 1.5em;
  60         margin-bottom: -0.75em;
  61         font-size: x-small;
  62         }
  63
  64 blockquote {
  65         background-color: #EEE;
  66         padding: 2mm;
  67         border-left: 5px solid #BBB;
  68         }
  69
  70 img { border: 0; }
  71
  72 pre {
  73         background-color: #EEE;
  74         padding: 2mm;
  75         border: 1px solid #999;
  76         }
  77
  78 #header {
  79         background-color: #FFF;
  80         margin: 0px;
  81         padding: 15px;
  82         border-top: 1px solid #999;
  83         border-bottom: 1px solid #999;
  84         }
  85
  86 #header h1 {
  87         margin: 0;
  88         padding: 0 0 0 10px;
  89         font-size: large; /* for IE 5.5 */
  90         f\ont-size: x-large; /* for compliant browsers */
  91         }
  92
  93 #header a,
  94 #header a:link,
  95 #header a:visited,
  96 #header a:active,
  97 #header a:hover {
  98         color: #ee9d00;
  99         text-decoration: none;
 100         }
 101
 102 .description {
 103         color: #57933a;
 104         font-size: small;
 105         font-weight: bold;
 106         text-transform: lowercase;
 107         margin: 0;
 108         padding: 0 0 0 10px;
 109         font-size: x-small; /* for IE 5.5 */
 110         f\ont-size: small; /* for compliant browsers */
 111         }
 112
 113 #container {
 114         position: relative;
 115         background-color: #FFF;
 116         margin: 0 auto;
 117         /* set special width for IE */
 118         width: 860px;
 119         min-height: 90%;
 120         height: 90%;
 121         /* recover from center-alignment IE hack */
 122         text-align: left;
 123         /* box model parse hack
 124         hides next rule from IE */
 125         voice-family: "\"}\"";
 126         voice-family: inherit;
 127         width: 840px;
 128 }
 129
 130 html>body #container {
 131         height: auto;
 132         width: 840px;
 133 }
 134
 135 #content {
 136         float: left;
 137         width: 65%;
 138         padding: 10px 10px 10px 40px;
 139         background-color: #FFF;
 140         /* border: 1px solid red; */
 141         }
 142
 143 /* #widecolumn deprecated
 144 only here for backwards compat. */
 145 #altcontent, #widecolumn {
 146         background-color: #FFF;
 147         padding: 10px 40px 10px 40px;
 148         }
 149
 150 #links {
 151         float: right;
 152         background-color: #FFF;
 153         width: 25%;
 154         padding: 10px;
 155         border-left: 1px dotted #999;
 156         }
 157
 158 #wrap {
 159         margin-top: 0px;
 160         margin-left: 0px;
 161         }
 162
 163 #menu, .menu {
 164         text-align: center;
 165         margin-bottom: 15px;
 166         }
 167
 168 #footer {
 169         clear: both;
 170         position: relative;
 171         background-color: #FFF;
 172         bottom: 0;
 173         min-height: 10%;
 174         height: 10%;
 175         width: 860px;
 176         margin: auto;
 177         padding: 10px;
 178         text-align: center;
 179         border-top: 1px solid #999;
 180         border-bottom: 1px solid #999;
 181         /* box model parse hack
 182         hides next rule from IE */
 183         voice-family: "\"}\"";
 184         voice-family: inherit;
 185         width: 840px;
 186         }
 187
 188 html>body #footer {
 189         height: auto;
 190         width: 820px;
 191         }
 192
 193 .intro {
 194         border-bottom: 1px solid #999999;
 195         background-color: #FFF;
 196         color: #333;
 197         font-weight: normal;
 198         padding: 10px;
 199         margin-bottom: 45px;
 200         }
 201
 202 .intro a {
 203         font-weight: normal;
 204         text-decoration: underline;
 205         color: #333;
 206         }
 207
 208 .blog, .archives, .pages {
 209         color: #333;
 210         padding: 0px;
 211         font-weight: normal;
 212         line-height: 1.2em;
 213         }
 214
 215 .blogbody {
 216         padding: 0px;
 217         }
 218
 219 .blogbody a,
 220 .blogbody a:link,
 221 .blogbody a:visited,
 222 .blogbody a:active,
 223 .blogbody a:hover {
 224         font-weight: normal;
 225         text-decoration: underline;
 226         }
 227
 228 .title  {
 229         text-transform: none;
 230         color: #57933a;
 231         margin-bottom: 15px;
 232         font-size: small; /* for IE 5.5 */
 233         f\ont-size: medium; /* for compliant browsers */
 234         }
 235
 236 .date   {
 237         color: #666;
 238         margin-bottom: 10px;
 239         text-align: left;
 240         line-height: 1.7em;
 241         font-weight: bold;
 242         font-size: x-small; /* for IE 5.5 */
 243         f\ont-size: small; /* for compliant browsers */
 244         border-bottom: 1px solid #999;
 245         }
 246
 247 .posted {
 248         color: #000000;
 249         margin-bottom: 25px;
 250         font-size: xx-small; /* for IE 5.5 */
 251         f\ont-size: x-small; /* feed to compliant browsers */
 252         }
 253
 254 .calendar {
 255         color: #57933a;
 256         padding: 2px;
 257         text-align: right;
 258         letter-spacing: 0.2em;
 259         font-family: verdana, arial, helvetica, sans-serif;
 260         font-weight: normal;
 261         }
 262
 263 .calendar a,
 264 .calendar a:link,
 265 .calendar a:active,
 266 .calendar a:hover {
 267         font-weight: bold;
 268         text-decoration: underline;
 269 }
 270
 271 .calendarhead {
 272         color: #57933a;
 273         padding: 2px;
 274         text-align: center;
 275         font-weight: bold;
 276         letter-spacing: 0.3em;
 277         text-transform: uppercase;
 278         border-bottom: 1px solid #999;
 279         }
 280
 281 .calendarday {
 282         font-weight: bold;
 283         text-align: center;
 284 }
 285
 286 .side {
 287         color: #333;
 288         padding: 2px;
 289         line-height: 1.7em;
 290         text-align: right;
 291         font-size: xx-small; /* for IE 5.5 */
 292         f\ont-size: small; /* feed to compliant browsers */
 293         }
 294
 295 .sidetitle {
 296         color: #ee9d00;
 297         padding: 2px;
 298         margin-top: 10px;
 299         text-align: center;
 300         text-transform: lowercase;
 301         letter-spacing: .1em;
 302         border-bottom: 1px dotted #999;
 303         }
 304
 305 .syndicate {
 306         background-color: #EEE;
 307         padding: 2px;
 308         margin-top: 10px;
 309         text-align: center;
 310         font-size: x-small; /* for IE 5.5 */
 311         f\ont-size: small; /* feed to compliant browsers */
 312         }
 313
 314 .metainfo {
 315         background-color: #FFF;
 316         color: #666;
 317         text-align: center;
 318         padding: 10px;
 319         font-size: xx-small; /* for IE 5.5 */
 320         f\ont-size: x-small; /* feed to compliant browsers */
 321         }
 322
 323 .metainfo a {
 324         font-weight: bold;
 325         }
 326
 327 /* --- tools --- */
 328
 329 .clear { clear: both; }
 330 .right { float: right; margin: 0 0 10px 10px; }
 331 .left { float: left; margin: 0 10px 10px 0; }
 332
 333 img.left {
 334         float: left;
 335         margin: 0 10px 10px 0;
 336         }
 337
 338 img.right {
 339         float: right;
 340         margin: 0 0 10px 10px;
 341         }
 342
 343 .center {
 344         text-align: center;
 345         }
 346
 347 .block {
 348         display: block;
 349         }
 350
 351 /* class to hide elements */
 352 .hide {
 353         display: none;
 354         }
 355
 356 /* used to clear the floats: http://www.positioniseverything.net/easyclearing.html */
 357 .clearfix:after {
 358         content: ".";
 359         display: block;
 360         height: 0;
 361         clear: both;
 362         visibility: hidden;
 363         }
 364
 365 /* "auto-clearing" IE hack and non-javacsript IE-mac float fix */
 366 .clearfix { display: inline-table; }
 367
 368 /* hides float from IE-mac \*/
 369 * html .clearfix { height: 1%; }
 370 .clearfix { display: block; }
 371 /* end hide from IE-mac */
 372
 373 * html body {
 374         font-size: x-small;
 375         /* be nice to opera */
 376         }
 377
 378 /* IE hack to fix font size in tables */
 379 * html table {
 380         font: 1em verdana, arial, helvetica, serif; /* IE5 */
 381         }
 382
 383 /* --- extras --- */
 384
 385 .comments-body {
 386         color: #666;
 387         padding-bottom: 10px;
 388         padding-top: 10px;
 389         font-size: small;
 390         font-weight: normal;
 391         border-bottom: 1px dotted #999;
 392         }
 393
 394 .comments-post {
 395         color: #666;
 396         font-size: x-small;
 397         font-weight: normal;
 398         }
 399
 400
 401 .trackback-url {
 402         color: #666;
 403         padding: 5px;
 404         font-size: small;
 405         font-weight: normal;
 406         border: 1px dotted #999;
 407         }
 408
 409
 410 .trackback-body {
 411         color: #666;
 412         padding-bottom: 10px;
 413         padding-top: 10px;
 414         font-size: small;
 415         font-weight: normal;
 416         border-bottom: 1px dotted #999;
 417         }
 418
 419 .trackback-post {
 420         color: #666;
 421         font-size: x-small;
 422         font-weight: normal;
 423         }
 424
 425
 426 .comments-head  {
 427         color: #666;
 428         margin-top: 20px;
 429         font-size: small;
 430         font-weight: bold;
 431         border-bottom: 1px solid #999;
 432         }
 433
 434 #header-commentspop {
 435         color: #FFF;
 436         padding: 5px 5px 15px 15px;
 437         font-size: large;
 438         font-weight: bold;
 439         border-left: 1px solid #FFF;
 440         border-right: 1px solid #FFF;
 441         border-top: 1px solid #FFF;
 442         }
 443