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: 950px !important;
  21 }
  22
  23 /* Basic Stuff */
  24
  25 *
  26 {
  27 margin: 0em;
  28 padding: 0em;
  29 }
  30
  31 body
  32 {
  33 background-color: #fff;
  34 color: #585858;
  35 font-size: 9pt;
  36 font-family: "trebuchet ms", helvetica, sans-serif;
  37 }
  38
  39 h1,h2,h3,h4,h5,h6
  40 {
  41 font-weight: normal;
  42 letter-spacing: -1px;
  43 text-transform: lowercase;
  44 }
  45
  46 h3,h4,h5,h6
  47 {
  48 color: #66000F;
  49 }
  50
  51 h1 span
  52 {
  53 font-weight: bold;
  54 }
  55
  56 h3 span
  57 {
  58 font-weight: bold;
  59 }
  60
  61 h4 span
  62 {
  63 font-weight: bold;
  64 }
  65
  66 br.clear
  67 {
  68 clear: both;
  69 }
  70
  71 img
  72 {
  73 padding: 3px;
  74 }
  75
  76 img.floatTL
  77 {
  78 float: left;
  79 margin-right: 1.5em;
  80 margin-bottom: 1.5em;
  81 margin-top: 0.5em;
  82 }
  83
  84 img.floatTR
  85 {
  86 float: right;
  87 margin-left: 1.5em;
  88 margin-bottom: 1.5em;
  89 margin-top: 0.5em;
  90 }
  91
  92 img.symbol
  93 {
  94 float: left;
  95 margin-bottom: 0em;
  96 }
  97
  98 a
  99 {
 100 text-decoration: underline;
 101 color: #D90000;
 102 }
 103
 104 a:hover
 105 {
 106 text-decoration: none;
 107 }
 108
 109 ul.links
 110 {
 111 list-style: none;
 112 }
 113
 114 ul.links li
 115 {
 116 line-height: 2em;
 117 }
 118
 119 ul.links li.first
 120 {
 121 }
 122
 123 p
 124 {
 125 line-height: 1.8em;
 126 }
 127
 128 /* Header */
 129
 130 #header
 131 {
 132 width:100%;
 133 height:122px;
 134 background: #440000 url('images/n1.gif') repeat-x;
 135 }
 136
 137 #header_inner
 138 {
 139 position: relative;
 140 width: 950px;
 141 height:122px;
 142 margin: 0 auto;
 143 }
 144
 145 /* Logo */
 146
 147 #logo
 148 {
 149 position: absolute;
 150 bottom: 0.6em;
 151 }
 152
 153 #logo h1
 154 {
 155 display: inline;
 156 color: #fff;
 157 font-size: 2.6em;
 158 }
 159
 160 #logo h2
 161 {
 162 display: inline;
 163 padding-left: 0.5em;
 164 color: #E5CCD0;
 165 font-size: 1.0em;
 166 }
 167
 168 /* Lang */
 169
 170 #lang
 171 {
 172 position: absolute;
 173 right: 0em;
 174 top: 0em;
 175 }
 176
 177 #lang img
 178 {
 179 float: left;
 180 border: none;
 181 margin-right: 0.5em;
 182 margin-bottom: 1.5em;
 183 margin-top: 0.5em;
 184 width: 30px;
 185 }
 186
 187 /* Menu */
 188
 189 #menu
 190 {
 191 position: absolute;
 192 right: 0em;
 193 bottom: 0em;
 194 }
 195
 196 #menu ul
 197 {
 198 list-style: none;
 199 }
 200
 201 #menu li
 202 {
 203 float: left;
 204 }
 205
 206 #menu li a
 207 {
 208 margin-left: 0.5em;
 209 display: block;
 210 padding: 1.1em 1.4em 1.0em 1.4em;
 211 background: #fff url('images/n4.gif') repeat-x;
 212 border: solid 1px #fff;
 213 color: #616161;
 214 font-weight: bold;
 215 font-size: 1.0em;
 216 text-transform: lowercase;
 217 text-decoration: none;
 218 }
 219
 220 #menu li a.active
 221 {
 222 background: #CA2F2F url('images/n3.gif') repeat-x;
 223 color: #fff;
 224 border: solid 1px #A94B4B;
 225 }
 226
 227 /* Main */
 228
 229 #main
 230 {
 231 background: #fff url('images/n2.gif') 0px 1px repeat-x;
 232 }
 233
 234 #main_inner p
 235 {
 236 text-align: justify;
 237 margin-bottom: 2.0em;
 238 }
 239
 240 #main_inner ul
 241 {
 242 margin-bottom: 2.0em;
 243 }
 244
 245 #main_inner
 246 {
 247 position: relative;
 248 width: 950px;
 249 margin: 0 auto;
 250 padding-top: 3.5em;
 251 }
 252
 253 #main_inner h3,h4
 254 {
 255 border-bottom: dotted 1px #E1E1E1;
 256 position: relative;
 257 }
 258
 259 #main_inner h3
 260 {
 261 font-size: 2.1em;
 262 padding-bottom: 0.1em;
 263 margin-bottom: 0.8em;
 264 }
 265
 266 #main_inner h4
 267 {
 268 font-size: 1.2em;
 269 padding-bottom: 0.175em;
 270 margin-bottom: 1.4em;
 271 margin-top: 0.95em;
 272 }
 273
 274 #main_inner .post
 275 {
 276 position: relative;
 277 }
 278
 279 #main_inner .post h3
 280 {
 281 position: relative;
 282 font-size: 1.7em;
 283 padding-bottom: 1.2em;
 284 }
 285
 286 #main_inner .post ul.post_info
 287 {
 288 list-style: none;
 289 position: absolute;
 290 top: 3em;
 291 font-size: 0.8em;
 292 }
 293
 294 #main_inner .post ul.post_info li
 295 {
 296 background-position: 0em 0.2em;
 297 background-repeat: no-repeat;
 298 display: inline;
 299 padding-left: 18px;
 300 }
 301
 302 #main_inner .post ul.post_info li.date
 303 {
 304 background-image: url('images/n5.gif');
 305 }
 306
 307 #main_inner .post ul.post_info li.comments
 308 {
 309 background-image: url('images/n6.gif');
 310 margin-left: 1.1em;
 311 }
 312
 313 /* Footer */
 314
 315 #footer
 316 {
 317 width: 950px;
 318 margin: 0 auto;
 319 text-align: center;
 320 clear: both;
 321 border-top: dotted 1px #E1E1E1;
 322 margin-top: 1.0em;
 323 margin-bottom: 1.0em;
 324 padding-top: 1.0em;
 325 text-transform: lowercase;
 326 }
 327
 328 /* Search */
 329
 330 input.button
 331 {
 332 background: #CA2F2F url('images/n3.gif') repeat-x;
 333 color: #fff;
 334 border: solid 1px #A94B4B;
 335 font-weight: bold;
 336 text-transform: lowercase;
 337 font-size: 0.8em;
 338 height: 2.0em;
 339 }
 340
 341 input.text
 342 {
 343 border: solid 1px #F1F1F1;
 344 font-size: 1.0em;
 345 padding: 0.25em 0.25em 0.25em 0.25em;
 346 }
 347
 348 #search
 349 {
 350 position: relative;
 351 width: 100%;
 352 margin-bottom: 2.0em;
 353 }
 354
 355 #search input.text
 356 {
 357 position: absolute;
 358 top: 0em;
 359 left: 0em;
 360 width: 9.5em;
 361 }
 362
 363 #search input.button
 364 {
 365 position: absolute;
 366 top: 0em;
 367 right: 0em;
 368 min-width: 2.0em;
 369 max-width: 2.5em;
 370 }
 371
 372 .thumbnail{
 373 position: relative;
 374 z-index: 0;
 375 }
 376
 377 .thumbnail:hover{
 378 background-color: transparent;
 379 z-index: 50;
 380 }
 381
 382 .thumbnail span{ /*CSS for enlarged image*/
 383 position: absolute;
 384 background-color: lightyellow;
 385 padding: 5px;
 386 left: -1000px;
 387 border: 1px dashed gray;
 388 visibility: hidden;
 389 color: black;
 390 text-decoration: none;
 391 }
 392
 393 .thumbnail span img{ /*CSS for enlarged image*/
 394 border-width: 0;
 395 padding: 2px;
 396 }
 397
 398 .thumbnail:hover span{ /*CSS for enlarged image on hover*/
 399 visibility: visible;
 400 top: 0;
 401 left: 60px; /*position where enlarged image should offset horizontally */
 402
 403 }
 404
 405 .feed {
 406   margin-left: 3px;
 407   padding: 0 0 0 19px;
 408   background: url("images/feed.png") no-repeat 0 50%;
 409 }
 410
 411 /* LAYOUT - 3 COLUMNS */
 412
 413         /* Primary content */
 414
 415         #primaryContent_3columns
 416         {
 417         position: relative;
 418         margin-right: 34em;
 419         }
 420
 421         #columnA_3columns
 422         {
 423         position: relative;
 424         float: left;
 425         width: 100%;
 426         margin-right: -34em;
 427         padding-right: 2em;
 428         }
 429
 430         /* Secondary Content */
 431
 432         #secondaryContent_3columns
 433         {
 434         float: right;
 435         }
 436
 437         #columnB_3columns
 438         {
 439         width: 13.0em;
 440         float: left;
 441         padding: 0em 2em 0.5em 2em;
 442         border-left: dotted 1px #E1E1E1;
 443         }
 444
 445         #columnC_3columns
 446         {
 447         width: 13.0em;
 448         float: left;
 449         padding: 0em 0em 0.5em 2em;
 450         border-left: dotted 1px #E1E1E1;
 451         }
 452
 453 /* LAYOUT - 2 COLUMNS */
 454
 455         /* Primary content */
 456
 457         #primaryContent_2columns
 458         {
 459         position: relative;
 460         margin-right: 17em;
 461         }
 462
 463         #columnA_2columns
 464         {
 465         position: relative;
 466         float: left;
 467         width: 100%;
 468         margin-right: -17em;
 469         padding-right: 2em;
 470         }
 471
 472         /* Secondary Content */
 473
 474         #secondaryContent_2columns
 475         {
 476         float: right;
 477         }
 478
 479         #columnC_2columns
 480         {
 481         width: 13.0em;
 482         float: left;
 483         padding: 0em 0em 0.5em 2em;
 484         border-left: dotted 1px #E1E1E1;
 485         }
 486
 487 /* LAYOUT - COLUMNLESS */
 488
 489         /* Primary content */
 490
 491         #primaryContent_columnless
 492         {
 493         position: relative;
 494         }
 495
 496         #columnA_columnless
 497         {
 498         position: relative;
 499         width: 100%;
 500         }