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