styles/nb_clean.css

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