www/include/style.css

   1 /*
   2
   3         Nonzero1.0 by nodethirtythree design
   4         http://www.nodethirtythree.com
   5         missing in a maze
   6
   7 */
   8
   9 /* This controls the width of the fluid width layouts */
  10
  11 div.fluid
  12 {
  13 width: 90% !important;
  14 }
  15
  16 /* This controls the width of the fixed width layouts */
  17
  18 div.fixed
  19 {
  20 width: 980px !important;
  21 margin: 0;
  22 }
  23
  24 /* Basic Stuff */
  25
  26 *
  27 {
  28 margin: 0em;
  29 padding: 0em;
  30 }
  31
  32 body
  33 {
  34 background-color: #fff;
  35 color: #585858;
  36   font-family: "Verdana", "Deja-Vu Sans", "Bitstream Vera Sans", sans-serif;
  37 font-size: 0.9em;
  38 background: #f0f0f0 url(/images/bg.png) repeat;
  39 }
  40
  41 h1,h2,h3,h4,h5,h6
  42 {
  43 font-weight: normal;
  44 letter-spacing: -1px;
  45 text-transform: lowercase;
  46 }
  47
  48 h3,h4,h5,h6
  49 {
  50 color: #66000F;
  51 }
  52
  53 h1 span
  54 {
  55 font-weight: bold;
  56 }
  57
  58 h3 span
  59 {
  60 font-weight: bold;
  61 }
  62
  63 h4 span
  64 {
  65 font-weight: bold;
  66 }
  67
  68 br.clear
  69 {
  70 clear: both;
  71 }
  72
  73 img
  74 {
  75 padding: 3px;
  76 }
  77
  78 img.floatTL
  79 {
  80 float: left;
  81 margin-right: 1.5em;
  82 margin-bottom: 1.5em;
  83 margin-top: 0.5em;
  84 }
  85
  86 img.floatTR
  87 {
  88 float: right;
  89 margin-left: 1.5em;
  90 margin-bottom: 1.5em;
  91 margin-top: 0.5em;
  92 }
  93
  94 img.symbol
  95 {
  96 float: left;
  97 margin-bottom: 0em;
  98 border: 0;
  99 }
 100
 101 a
 102 {
 103 text-decoration: underline;
 104 color: #D90000;
 105 border-style: none;
 106 }
 107
 108 a:hover
 109 {
 110 text-decoration: none;
 111 }
 112
 113 ul.links
 114 {
 115   /* list-style: none; */
 116   padding-left: 1em;
 117 }
 118
 119 ul.links li
 120 {
 121 line-height: 1.5em;
 122 font-size: 0.9em;
 123 /* display: inline; */
 124 }
 125
 126 ul.links li.first
 127 {
 128 }
 129
 130 p
 131 {
 132 line-height: 1.5em;
 133 }
 134
 135 /* Header */
 136
 137 #header
 138 {
 139 width:100%;
 140 height:102px;
 141 background: #440000 url('/images/bg1.png') repeat-x;
 142 }
 143
 144 #header_inner
 145 {
 146 position: relative;
 147 width: 980px;
 148 height:102px;
 149 margin: 0 auto;
 150 }
 151
 152 img.symbol
 153 {
 154 margin: 0;
 155 padding: 0;
 156 }
 157
 158 /* Logo */
 159
 160 #logo
 161 {
 162 position: absolute;
 163 top: 0;
 164 float: left;
 165 }
 166
 167 #header h1
 168 {
 169 float: left;
 170 margin-left: 105px;
 171 color: #eee;
 172 font-size: 150%;
 173 }
 174
 175 #header h2
 176 {
 177 float: left;
 178 margin-left: 105px;
 179 color: #E5CCD0;
 180 font-size: 1.0em;
 181 vertical-align: bottom;
 182 }
 183
 184 /* Header Line's */
 185 #line1
 186 {
 187 height: 37px;
 188 }
 189
 190 #line2
 191 {
 192 height: 32px;
 193 }
 194
 195 #line3
 196 {
 197 height: 31px;
 198 }
 199
 200 /* Lang */
 201
 202 #lang
 203 {
 204 position: absolute;
 205 right: 0em;
 206 top: 0em;
 207 }
 208
 209 #lang img
 210 {
 211 float: left;
 212 border: none;
 213 margin-right: 0.5em;
 214 margin-bottom: 1.5em;
 215 margin-top: 0.5em;
 216 width: 30px;
 217 }
 218
 219 /* Menu */
 220
 221 #menu
 222 {
 223 position: absolute;
 224 left: 105px;
 225 top: 0em;
 226 }
 227
 228 #menu ul
 229 {
 230 list-style: none;
 231 }
 232
 233 #menu li
 234 {
 235 float: left;
 236 }
 237 #menu li
 238 {
 239 vertical-align: middle;
 240 background: #333 url('/images/btn-break.png') center;
 241 }
 242 #menu li a
 243 {
 244 margin-left: 1px; /*0.5em;*/
 245 margin-right: 1px;
 246 display: block;
 247 padding: 10px 5px 0 8px;
 248 height: 26px;
 249 background: #333 url('/images/btn-empty.png') repeat-x center;
 250 color: #ddd;
 251 font-weight: bolder;
 252 vertical-align: middle;
 253 font-size: 0.8em;
 254 text-decoration: none;
 255 }
 256
 257 #menu li a.active
 258 {
 259 background: #CA2F2F url('/images/btn-red2.png') repeat-x center;
 260 color: #ddd;
 261 }
 262
 263 #menu li a:hover
 264 {
 265 background: #333 url('/images/btn-red2.png') repeat-x center;
 266 color: #fff;
 267 }
 268
 269 /* Main */
 270
 271 #main
 272 {
 273 /* background: #fff url('images/n2.gif') 0px 1px repeat-x; */
 274 }
 275
 276 #main_inner p
 277 {
 278 text-align: justify;
 279 margin-bottom: 0.5em;
 280 font-size: 0.9em;
 281 }
 282
 283 #main_inner ul
 284 {
 285 margin-bottom: 2.0em;
 286 }
 287
 288 #main_inner
 289 {
 290 position: relative;
 291 width: 950px;
 292 margin: 0 auto;
 293 }
 294
 295 #main_inner h3,h4
 296 {
 297 border-bottom: dotted 1px #E1E1E1;
 298 position: relative;
 299 }
 300
 301 #main_inner h3
 302 {
 303 font-size: 2.1em;
 304 padding-bottom: 0.1em;
 305 margin-bottom: 0.5em;
 306 }
 307
 308 #main_inner h4
 309 {
 310 font-size: 1.2em;
 311 padding-bottom: 0.175em;
 312 margin-bottom: 0.25em;
 313 margin-top: 0.95em;
 314 }
 315
 316 #main_inner .post
 317 {
 318 position: relative;
 319 margin-bottom: 2.0em;
 320 }
 321
 322 #main_inner .post h3
 323 {
 324 position: relative;
 325 font-size: 1.7em;
 326 padding-bottom: 0.25em;
 327 }
 328
 329 #main_inner .post ul.post_info , #main_inner .post .post_info
 330 {
 331 list-style: none;
 332 position: absolute;
 333 top: 3em;
 334 font-size: 0.8em;
 335 }
 336
 337 #main_inner .post .post_info
 338 {
 339 width: 100%;
 340 text-align: right;
 341 margin-top: -1.5em;
 342 }
 343 #main_inner .post ul
 344 {
 345 padding-left: 1.0em;
 346 }
 347
 348 #main_inner .post ul.post_info li
 349 {
 350 background-position: 0em center;
 351 background-repeat: no-repeat;
 352 display: inline;
 353 padding-left: 15px;
 354 }
 355
 356 #main_inner .post ul.post_info li.date
 357 {
 358 background-image: url('images/n5.gif');
 359 }
 360
 361 #main_inner .post ul.post_info li.comments
 362 {
 363 background-image: url('images/n6.gif');
 364 margin-left: 1.1em;
 365 }
 366
 367 table {
 368   border: 0px;
 369   border-collapse: collapse;
 370   border-spacing: 0px;
 371   margin: 0em;
 372   padding: 0em;
 373   width: 980px;
 374   max-width: 980px;
 375 }
 376 .post table {
 377   width: 900px;
 378   max-width: 900px;
 379 }
 380 #sh-tl {
 381   background: url(/images/sh-tl.png) no-repeat right bottom;
 382 }
 383 #sh-top {
 384   background: url(/images/sh-top.png) repeat-x bottom;
 385 }
 386 #sh-tr {
 387   background: url(/images/sh-tr.png) no-repeat left bottom;
 388 }
 389 #sh-lft {
 390   background: url(/images/sh-lft.png) repeat-y right;
 391 }
 392 #sh-rgt {
 393   background: url(/images/sh-rgt.png) repeat-y left;
 394 }
 395 #sh-bl {
 396   background: url(/images/sh-bl.png) no-repeat right top;
 397 }
 398 #sh-btn {
 399   background: url(/images/sh-btn.png) repeat-x top;
 400 }
 401 #sh-br {
 402   background: url(/images/sh-br.png) no-repeat left top;
 403 }
 404 #no-sh {
 405 background-color: #f5f5f5;
 406 }
 407 #sh-tl, #sh-top, #sh-tr, #sh-lft, #sh-rgt, #sh-bl, #sh-btn, #sh-br {
 408   width: 16px;
 409   height: 16px;
 410   padding: 0px;
 411   border-width: 0px;
 412   border-style: none;
 413 }
 414 .banner {
 415   border: 0;
 416 }
 417
 418
 419 /* Footer */
 420
 421 #footer
 422 {
 423 clear: both;
 424 width: 100%;
 425 height: 26px;
 426 color: #ddd;
 427 text-align: center;
 428 background: url(/images/ft.png) left top;
 429 margin-top: 0em;
 430 margin-bottom: 0em;
 431 padding-top: 1.0em;
 432 text-transform: lowercase;
 433 }
 434
 435 /* Search */
 436
 437 input.button
 438 {
 439 background: #CA2F2F url('images/n3.gif') repeat-x;
 440 color: #fff;
 441 border: solid 1px #A94B4B;
 442 font-weight: bold;
 443 text-transform: lowercase;
 444 font-size: 0.8em;
 445 height: 2.0em;
 446 }
 447
 448 input.text
 449 {
 450 border: solid 1px #F1F1F1;
 451 font-size: 1.0em;
 452 padding: 0.25em 0.25em 0.25em 0.25em;
 453 }
 454
 455 #search
 456 {
 457 position: relative;
 458 width: 100%;
 459 margin-bottom: 2.0em;
 460 }
 461
 462 #search input.text
 463 {
 464 position: absolute;
 465 top: 0em;
 466 left: 0em;
 467 width: 9.5em;
 468 }
 469
 470 #search input.button
 471 {
 472 position: absolute;
 473 top: 0em;
 474 right: 0em;
 475 min-width: 2.0em;
 476 max-width: 2.5em;
 477 }
 478
 479 .thumbnail{
 480 position: relative;
 481 z-index: 0;
 482 }
 483
 484 .thumbnail:hover{
 485 background-color: transparent;
 486 z-index: 50;
 487 }
 488
 489 .thumbnail span{ /*CSS for enlarged image*/
 490 position: absolute;
 491 background-color: lightyellow;
 492 padding: 5px;
 493 left: -1000px;
 494 border: 1px dashed gray;
 495 visibility: hidden;
 496 color: black;
 497 text-decoration: none;
 498 }
 499
 500 .thumbnail span img{ /*CSS for enlarged image*/
 501 border-width: 0;
 502 padding: 2px;
 503 }
 504
 505 .thumbnail:hover span{ /*CSS for enlarged image on hover*/
 506 visibility: visible;
 507 top: 0;
 508 left: 60px; /*position where enlarged image should offset horizontally */
 509
 510 }
 511
 512 .feed {
 513   margin-left: 3px;
 514   padding: 0 0 0 19px;
 515   background: url("/images/feed.png") no-repeat 0 50%;
 516 }
 517
 518 /* LAYOUT - 3 COLUMNS */
 519
 520         /* Primary content */
 521
 522         #primaryContent_3columns
 523         {
 524         position: relative;
 525         margin-right: 34em;
 526         }
 527
 528         #columnA_3columns
 529         {
 530         position: relative;
 531         float: left;
 532         width: 100%;
 533         margin-right: -34em;
 534         padding-right: 2em;
 535         }
 536
 537         /* Secondary Content */
 538
 539         #secondaryContent_3columns
 540         {
 541         float: right;
 542         }
 543
 544         #columnB_3columns
 545         {
 546         width: 13.0em;
 547         float: left;
 548         padding: 0em 2em 0.5em 2em;
 549         border-left: dotted 1px #E1E1E1;
 550         }
 551
 552         #columnC_3columns
 553         {
 554         width: 13.0em;
 555         float: left;
 556         padding: 0em 0em 0.5em 2em;
 557         border-left: dotted 1px #E1E1E1;
 558         }
 559
 560 /* LAYOUT - 2 COLUMNS */
 561
 562         /* Primary content */
 563
 564         #primaryContent_2columns
 565         {
 566         position: relative;
 567         /* margin-right: 17em; */
 568         }
 569
 570         #columnA_2columns
 571         {
 572         position: relative;
 573         float: left;
 574         padding: 1em 0.5em 0.5em 1em;
 575         width: 710px;
 576         }
 577
 578         /* Secondary Content */
 579
 580         #secondaryContent_2columns
 581         {
 582         float: right;
 583         }
 584
 585         #columnC_2columns
 586         {
 587         width: 13.0em;
 588         float: left;
 589         padding: 0em 0.5em 0.5em 0.5em;
 590         border-left: dotted 1px #E1E1E1;
 591         }
 592
 593 /* LAYOUT - COLUMNLESS */
 594
 595         /* Primary content */
 596
 597         #primaryContent_columnless
 598         {
 599         position: relative;
 600         }
 601
 602         #columnA_columnless
 603         {
 604         position: relative;
 605         width: 100%;
 606         }