styles/nb_default.css

   1 /*
   2
   3  NanoBlogger Default
   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: #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; text-decoration: underline; }
  30 a:hover         { color: #999999; 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: large;
  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: 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         overflow: auto;
  77         max-height: 300px;
  78         }
  79
  80 #header {
  81         background-color: #FFF;
  82         margin: 0px;
  83         padding: 15px;
  84         border-top: 1px solid #999;
  85         border-bottom: 1px solid #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: #999999;
 101         text-decoration: none;
 102         }
 103
 104 .description {
 105         color: #999999;
 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         /* width: 65%; */
 139         padding: 10px 10px 10px 40px;
 140         background-color: #FFF;
 141         /* padding-bottom: 140px; */
 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         /* padding-bottom: 140px; */
 151         }
 152
 153 #links {
 154         float: right;
 155         background-color: #FFF;
 156         width: 210px;
 157         padding: 10px;
 158         margin-left: 30px;
 159         margin-bottom: 20px;
 160         /* padding-bottom: 140px; */
 161         border-left: 1px dashed #999;
 162         border-bottom: 1px dashed #999;
 163         }
 164
 165 #wrap {
 166         margin-top: 0px;
 167         margin-left: 0px;
 168         }
 169
 170 #menu, .menu {
 171         text-align: center;
 172         margin-bottom: 15px;
 173         }
 174
 175 #footer {
 176         clear: both;
 177         position: relative;
 178         background-color: #FFF;
 179         bottom: 0;
 180         min-height: 10%;
 181         height: 10%;
 182         width: 860px;
 183         margin: auto;
 184         padding: 10px;
 185         text-align: center;
 186         border-top: 1px solid #999;
 187         border-bottom: 1px solid #999;
 188         /* box model parse hack
 189         hides next rule from IE */
 190         voice-family: "\"}\"";
 191         voice-family: inherit;
 192         width: 840px;
 193         }
 194
 195 html>body #footer {
 196         height: auto;
 197         width: 820px;
 198         }
 199
 200 .intro {
 201         border-bottom: 1px solid #999999;
 202         background-color: #FFF;
 203         color: #333;
 204         font-weight: normal;
 205         padding: 10px;
 206         margin-bottom: 45px;
 207         }
 208
 209 .intro a {
 210         font-weight: normal;
 211         text-decoration: underline;
 212         color: #333;
 213         }
 214
 215 .blog, .archives, .pages {
 216         color: #333;
 217         padding: 0px;
 218         font-weight: normal;
 219         line-height: 1.2em;
 220         }
 221
 222 .draft {
 223         background: url(../images/draft.png);
 224 }
 225
 226 .blogbody {
 227         padding: 0px 30px 0px 0px;
 228         }
 229
 230 .blogbody p {
 231         text-align: justify;
 232         }
 233
 234 .blogbody a,
 235 .blogbody a:link,
 236 .blogbody a:visited,
 237 .blogbody a:active,
 238 .blogbody a:hover {
 239         font-weight: normal;
 240         text-decoration: underline;
 241         }
 242
 243 .title  {
 244         text-transform: none;
 245         color: #003366;
 246         margin-bottom: 15px;
 247         font-family: palatino, georgia, times new roman, serif;
 248         font-size: small; /* for IE 5.5 */
 249         f\ont-size: medium; /* for compliant browsers */
 250         }
 251
 252 .date   {
 253         color: #666;
 254         margin-bottom: 10px;
 255         width: 550px;
 256         text-align: left;
 257         line-height: 1.7em;
 258         font-family: palatino, georgia, times new roman, serif;
 259         font-weight: bold;
 260         font-size: small; /* for IE 5.5 */
 261         f\ont-size: large; /* for compliant browsers */
 262         border-bottom: 1px solid #999;
 263         }
 264
 265 .posted {
 266         color: #000000;
 267         margin-bottom: 25px;
 268         font-size: xx-small; /* for IE 5.5 */
 269         f\ont-size: x-small; /* feed to compliant browsers */
 270         }
 271
 272 .calendar {
 273         color: #003366;
 274         padding: 2px;
 275         text-align: right;
 276         letter-spacing: 0.2em;
 277         font-family: palatino, georgia, times new roman, serif;
 278         font-weight: normal;
 279         }
 280
 281 .calendar a,
 282 .calendar a:link,
 283 .calendar a:active,
 284 .calendar a:hover {
 285         font-weight: bold;
 286         text-decoration: underline;
 287 }
 288
 289 .calendarhead {
 290         color: #003366;
 291         padding: 2px;
 292         text-align: center;
 293         font-weight: bold;
 294         letter-spacing: .3em;
 295         text-transform: uppercase;
 296         border-bottom: 1px solid #999;
 297         }
 298
 299 .calendarday {
 300         font-weight: bold;
 301         text-align: center;
 302 }
 303
 304 .side {
 305         color: #333;
 306         padding: 2px;
 307         line-height: 1.7em;
 308         text-align: right;
 309         font-size: xx-small; /* for IE 5.5 */
 310         f\ont-size: small; /* feed to compliant browsers */
 311         overflow: hide;
 312         }
 313
 314 .sidetitle {
 315         color: #003366;
 316         padding: 2px;
 317         margin-top: 10px;
 318         text-align: center;
 319         text-transform: lowercase;
 320         letter-spacing: .1em;
 321         border-bottom: 1px dotted #999;
 322         }
 323
 324 .syndicate {
 325         background-color: #EEE;
 326         padding: 2px;
 327         margin-top: 10px;
 328         text-align: center;
 329         font-size: x-small; /* for IE 5.5 */
 330         f\ont-size: small; /* feed to compliant browsers */
 331         }
 332
 333 .metainfo {
 334         background-color: #FFF;
 335         color: #666;
 336         text-align: center;
 337         padding: 10px;
 338         font-size: xx-small; /* for IE 5.5 */
 339         f\ont-size: x-small; /* feed to compliant browsers */
 340         }
 341
 342 .metainfo a {
 343         font-weight: bold;
 344         }
 345
 346 /* --- tools --- */
 347
 348 .clear { clear: both; }
 349 .right { float: right; margin: 0 0 10px 10px; }
 350 .left { float: left; margin: 0 10px 10px 0; }
 351
 352 img.left {
 353         float: left;
 354         margin: 0 10px 10px 0;
 355         }
 356
 357 img.right {
 358         float: right;
 359         margin: 0 0 10px 10px;
 360         }
 361
 362 .center {
 363         text-align: center;
 364         }
 365
 366 .block {
 367         display: block;
 368         }
 369
 370 /* class to hide elements */
 371 .hide {
 372         display: none;
 373         }
 374
 375 /* used to clear the floats: http://www.positioniseverything.net/easyclearing.html */
 376 .clearfix:after {
 377         content: ".";
 378         display: block;
 379         height: 0;
 380         clear: both;
 381         visibility: hidden;
 382         }
 383
 384 /* "auto-clearing" IE hack and non-javacsript IE-mac float fix */
 385 .clearfix { display: inline-table; }
 386
 387 /* hides float from IE-mac \*/
 388 * html .clearfix { height: 1%; }
 389 .clearfix { display: block; }
 390 /* end hide from IE-mac */
 391
 392 * html body {
 393         font-size: x-small;
 394         /* be nice to opera */
 395         }
 396
 397 /* IE hack to fix font size in tables */
 398 * html table {
 399         font: 1em palatino, georgia, times new roman, serif; /* IE5 */
 400         }
 401
 402 /* --- extras --- */
 403
 404 .comments-body {
 405         color: #666;
 406         padding-bottom: 10px;
 407         padding-top: 10px;
 408         font-size: small;
 409         font-weight: normal;
 410         border-bottom: 1px dotted #999;
 411         }
 412
 413 .comments-post {
 414         color: #666;
 415         font-size: x-small;
 416         font-weight: normal;
 417         }
 418
 419
 420 .trackback-url {
 421         color: #666;
 422         padding: 5px;
 423         font-size: small;
 424         font-weight: normal;
 425         border: 1px dotted #999;
 426         }
 427
 428
 429 .trackback-body {
 430         color: #666;
 431         padding-bottom: 10px;
 432         padding-top: 10px;
 433         font-size: small;
 434         font-weight: normal;
 435         border-bottom: 1px dotted #999;
 436         }
 437
 438 .trackback-post {
 439         color: #666;
 440         font-size: x-small;
 441         font-weight: normal;
 442         }
 443
 444
 445 .comments-head  {
 446         color: #666;
 447         margin-top: 20px;
 448         font-size: small;
 449         font-weight: bold;
 450         border-bottom: 1px solid #999;
 451         }
 452
 453 #header-commentspop {
 454         color: #FFF;
 455         padding: 5px 5px 15px 15px;
 456         font-size: large;
 457         font-weight: bold;
 458         border-left: 1px solid #FFF;
 459         border-right: 1px solid #FFF;
 460         border-top: 1px solid #FFF;
 461         }