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