logviewer/static/css/layout.css

   1 /*\r
   2 -----------------------------------------------\r
   3 Grey Box Method - Layout CSS\r
   4 ----------------------------------------------- */\r
   5 \r
   6 body {\r
   7         background: #eee;\r
   8         color: #333;\r
   9         font-size: 11px;\r
  10         padding: 0;\r
  11 }\r
  12 \r
  13 \r
  14 /* anchors\r
  15 ----------------------------------------------- */\r
  16 a {\r
  17         color: #000;\r
  18         font-weight:bold;\r
  19         text-decoration: none;\r
  20 }\r
  21 a:hover {\r
  22         color:#333;\r
  23 }\r
  24 \r
  25 \r
  26 /* 960 grid system container background\r
  27 ----------------------------------------------- */\r
  28 .container_12,\r
  29 .container_16 {\r
  30         background:#fff;\r
  31 }\r
  32 \r
  33 \r
  34 /* headings\r
  35 ----------------------------------------------- */\r
  36 h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}\r
  37 h2 {margin-top:1em;}\r
  38 h5 {font-size:1.2em;}\r
  39 h6 {font-size:1em; text-transform:uppercase;}\r
  40 \r
  41 \r
  42 h1 a {\r
  43         font-weight:normal;\r
  44 }\r
  45 \r
  46 \r
  47 /* branding\r
  48 ----------------------------------------------- */\r
  49 h1#branding {\r
  50         font-weight:normal;\r
  51         font-size:3em;\r
  52         text-align:left;\r
  53         background:#aaa;\r
  54         padding:.7em 1em;\r
  55         margin-bottom:0;\r
  56 }\r
  57 \r
  58 \r
  59 /* page heading\r
  60 ----------------------------------------------- */\r
  61 h2#page-heading {\r
  62         font-weight:normal;\r
  63         padding:.5em;\r
  64         margin:0 0 10px 0;\r
  65         border-bottom:1px solid #ccc;\r
  66 }\r
  67 \r
  68 \r
  69 /* boxes\r
  70 ----------------------------------------------- */\r
  71 .box {\r
  72         background:#ddd;\r
  73         margin-bottom:20px;\r
  74         padding:10px 10px 1px 10px;\r
  75 }\r
  76 .box h2 {\r
  77         font-size:1em;\r
  78         font-weight:normal;\r
  79         text-transform:uppercase;\r
  80         color:#fff;\r
  81         background:#333;\r
  82         margin:-10px -10px 0 -10px;\r
  83         padding:6px 12px;\r
  84 }\r
  85 .box h2 a,\r
  86 .box h2 a.visible {\r
  87         color:#fff;\r
  88         background:#333 url("images/switch_minus.gif") 97% 50% no-repeat;\r
  89         display:block;\r
  90         padding:6px 12px;\r
  91         margin:-6px -12px;\r
  92         border:none;\r
  93 }\r
  94 .grid_4 .box h2 a {\r
  95         background-position: 97% 50%;\r
  96 }\r
  97 .grid_5 .box h2 a {\r
  98         background-position: 98% 50%;\r
  99 }\r
 100 .grid_12 .box h2 a {\r
 101         background-position: 99% 50%;\r
 102 }\r
 103 \r
 104 \r
 105 .box h2 a.hidden,\r
 106 .box h2 a.hidden:hover {\r
 107         background-image: url("images/switch_plus.gif");\r
 108 }\r
 109 .box h2 a:hover {\r
 110         background-color:#111;\r
 111 }\r
 112 .block {\r
 113         padding-top:10px;\r
 114 }\r
 115 div.menu {\r
 116         padding:0;\r
 117 }\r
 118 div.menu h2 {\r
 119         margin:0;\r
 120 }\r
 121 div.menu .block {\r
 122         padding-top:0;\r
 123 }\r
 124 \r
 125 \r
 126 /* paragraphs, quotes and lists\r
 127 ----------------------------------------------- */\r
 128 p {\r
 129         margin-bottom:1em;\r
 130 }\r
 131 blockquote {\r
 132         font-family: Georgia, 'Times New Roman', serif;\r
 133         font-size:1.2em;\r
 134         padding-left:1em;\r
 135         border-left:4px solid #ccc;\r
 136 }\r
 137 blockquote cite {\r
 138         font-size:.9em;\r
 139 }\r
 140 ul, ol {\r
 141         padding-top:0;\r
 142 }\r
 143 \r
 144 \r
 145 /* menus\r
 146 ----------------------------------------------- */\r
 147 ul.menu {\r
 148         list-style:none;\r
 149         border-top:1px solid #bbb;\r
 150 }\r
 151 ul.menu li {\r
 152         margin:0;\r
 153 }\r
 154 ul.menu li a {\r
 155         display:block;\r
 156         padding:4px 10px;\r
 157         border-bottom:1px solid #ccc;\r
 158 }\r
 159 ul.menu li a:hover {\r
 160         background:#eee;\r
 161 }\r
 162 ul.menu li a:active {\r
 163         background:#ccc;\r
 164 }\r
 165 \r
 166 \r
 167 /* submenus\r
 168 ----------------------------------------------- */\r
 169 ul.menu ul {\r
 170         list-style:none;\r
 171         margin:0;\r
 172 }\r
 173 ul.menu ul li a {\r
 174         padding-left:30px;\r
 175 }\r
 176 \r
 177 \r
 178 /* section menus\r
 179 ----------------------------------------------- */\r
 180 ul.section {\r
 181         border-top:0;\r
 182         margin-bottom:0;\r
 183 }\r
 184 ul.section li {\r
 185         text-transform:uppercase;\r
 186 }\r
 187 ul.section li a {\r
 188         background:#bbb;\r
 189 }\r
 190 ul.section li a:hover {\r
 191         background:#aaa;\r
 192 }\r
 193 ul.section li a:active {\r
 194         color:#fff;\r
 195         background:#666;\r
 196 }\r
 197 ul.section li li a {\r
 198         background:#ddd;\r
 199         border-bottom:1px solid #eee;\r
 200 }\r
 201 ul.section li li a:hover {\r
 202         background:#ccc;\r
 203 }\r
 204 ul.section li li a:active {\r
 205         color:#000;\r
 206         background:#fff;\r
 207 }\r
 208 ul.section ul li {\r
 209         text-transform:none;\r
 210 }\r
 211 ul.section ul.current li a {\r
 212         background:#eee;\r
 213         border-bottom:1px solid #fff;\r
 214 }\r
 215 ul.section ul.current li a:hover {\r
 216         background:#ddd;\r
 217 }\r
 218 ul.section ul.current li a:active {\r
 219         background:#fff;\r
 220 }\r
 221 ul.section li a.current {\r
 222         color:#fff;\r
 223         background:#666;\r
 224 }\r
 225 ul.section li a.current:hover {\r
 226         background:#555;\r
 227 }\r
 228 ul.section li a.current:active {\r
 229         background:#444;\r
 230 }\r
 231 ul.section li a.active {\r
 232         background:#fff;\r
 233         cursor:default;\r
 234 }\r
 235 ul.section li.current > a.active,\r
 236 ul.section li.current > a.active:hover {\r
 237         color:#fff;\r
 238         background:#666;\r
 239         cursor:default;\r
 240 }\r
 241 \r
 242 \r
 243 /* table\r
 244 ----------------------------------------------- */\r
 245 table {\r
 246         width:100%;\r
 247         border:1px solid #bbb;\r
 248         margin-bottom:10px;\r
 249 }\r
 250 col.colC {\r
 251         width:8em;\r
 252 }\r
 253 th, td {\r
 254         padding:.2em 1em;\r
 255         text-align:left;\r
 256 }\r
 257 thead th {\r
 258         border-bottom:2px solid #888;\r
 259         background:#bbb;\r
 260         padding:.4em 1em .2em;\r
 261 }\r
 262 thead th.table-head {\r
 263         font-size:1em;\r
 264         font-weight:normal;\r
 265         text-transform:uppercase;\r
 266         color:#fff;\r
 267         background:#555;\r
 268         border:1px solid #555;\r
 269 }\r
 270 tbody th,\r
 271 tbody td {\r
 272         border-top:1px solid #bbb;\r
 273         border-bottom:1px solid #bbb;\r
 274         background:#eee;\r
 275 }\r
 276 tbody tr.odd th,\r
 277 tbody tr.odd td {\r
 278         background:#fff;\r
 279 }\r
 280 tfoot th,\r
 281 tfoot td {\r
 282         border-top:2px solid #666;\r
 283         background:#eee;\r
 284 }\r
 285 tfoot tr.total th,\r
 286 tfoot tr.total td {\r
 287         border-top:6px double #666;\r
 288 }\r
 289 tfoot tr.total th {\r
 290         text-transform:uppercase;\r
 291 }\r
 292 th.currency,\r
 293 td.currency {\r
 294         text-align:right;\r
 295 }\r
 296 \r
 297 \r
 298 /* forms\r
 299 ----------------------------------------------- */\r
 300 form {\r
 301         overflow:hidden;\r
 302 }\r
 303 fieldset {\r
 304         border:1px solid #bbb;\r
 305         padding:10px;\r
 306         position:relative;\r
 307         background:#e9e9e9;\r
 308         margin-bottom:10px;\r
 309 }\r
 310 legend {\r
 311         font-size:1.1em;\r
 312         padding:.4em .8em;\r
 313         background:#fff;\r
 314         border:1px solid #bbb;\r
 315 }\r
 316 fieldset.login p {\r
 317         margin-bottom:1em;\r
 318         margin-top:0pt;\r
 319 }\r
 320 fieldset p label {\r
 321         width:98%;\r
 322 }\r
 323 fieldset p input {\r
 324         width:98%;\r
 325 }\r
 326 fieldset p select {\r
 327         width:99%;\r
 328 }\r
 329 fieldset.login p label {\r
 330         float:left;\r
 331         line-height:2em;\r
 332         margin-right:3%;\r
 333         text-align:right;\r
 334         width:32%;\r
 335 }\r
 336 fieldset.login p input {\r
 337         width:60%;\r
 338 }\r
 339 fieldset.login input.button {\r
 340         margin-left:35%;\r
 341 }\r
 342 form p.notice {\r
 343         font-weight:bold;\r
 344 }\r
 345 input.search.text {\r
 346         width:66%;\r
 347 }\r
 348 input.search.button {\r
 349         width:28%;\r
 350         margin-left:2%;\r
 351 }\r
 352 \r
 353 \r
 354 /* articles\r
 355 ----------------------------------------------- */\r
 356 .articles {\r
 357         padding:0;\r
 358 }\r
 359 .articles h2 {\r
 360         margin:0;\r
 361 }\r
 362 #articles {\r
 363         padding-top:0;\r
 364 }\r
 365 .article {\r
 366         border-top:1px solid #666;\r
 367         padding-top:.5em;\r
 368     min-height:125px;\r
 369 }\r
 370 .box .article {\r
 371         border-top:3px solid #fff;\r
 372         padding:13px 10px 0 10px;\r
 373 }\r
 374 .article h2 {\r
 375         font-size:2em;\r
 376         font-weight:normal;\r
 377         text-transform:none;\r
 378         color:#333;\r
 379         background:transparent;\r
 380         padding:0;\r
 381         margin:0;\r
 382         border:none;\r
 383 }\r
 384 .article h3 {\r
 385         margin-bottom:.2em;\r
 386         font-size:1.6em;\r
 387 }\r
 388 .box .first {\r
 389         border-top:none;\r
 390 }\r
 391 .article h4 {\r
 392         font-size:1.2em;\r
 393         text-transform:uppercase;\r
 394         margin-bottom:.5em;\r
 395 }\r
 396 .article a.image {\r
 397         float:left; \r
 398         margin:3px 10px 3px 0; \r
 399         padding:4px;\r
 400         border:1px solid #bbb;\r
 401         background:#fff;\r
 402 }\r
 403 .article a.image:hover {\r
 404         border:1px solid #666;\r
 405 }\r
 406 .article a.image img {\r
 407         float:left; \r
 408 }\r
 409 .article p.meta {\r
 410         color:#666;\r
 411         border-top:1px dotted #999;\r
 412         border-bottom:1px dotted #999;\r
 413         padding:.3em 0;\r
 414         margin-bottom:.8em;\r
 415 }\r
 416 \r
 417 \r
 418 /* site information\r
 419 ----------------------------------------------- */\r
 420 #site_info .box {\r
 421         color:#ccc;\r
 422         background:#666;\r
 423         margin-bottom:10px;\r
 424 }\r
 425 #site_info a {\r
 426         color:#fff;\r
 427 }\r
 428 #site_info a:hover {\r
 429         color:#000;\r
 430 }\r
 431 \r
 432 \r
 433 /* AJAX sliding shelf\r
 434 ----------------------------------------------- */\r
 435 #loading {float:right; margin-right:14px; margin-top:-2px;}\r
 436 .block {padding-bottom:1px;}\r
 437 \r
 438 \r
 439 /* Accordian\r
 440 ----------------------------------------------- */\r
 441 .toggler {\r
 442         color: #222;\r
 443         margin: 0;\r
 444         padding: 2px 5px;\r
 445         background: #eee;\r
 446         border-bottom: 1px solid #ddd;\r
 447         border-right: 1px solid #ddd;\r
 448         border-top: 1px solid #f5f5f5;\r
 449         border-left: 1px solid #f5f5f5;\r
 450         font-size:1.1em;\r
 451         font-weight: normal;\r
 452 }\r
 453 .element h4 {\r
 454         margin: 0;\r
 455         padding:4px;\r
 456         line-height:1.2em;\r
 457 }\r
 458 .element p {\r
 459         margin: 0;\r
 460         padding: 4px;\r
 461 }\r
 462 .float-right {\r
 463         padding:10px 20px;\r
 464         float:right;\r
 465 }\r
 466 \r
 467 #accordian-block {\r
 468         padding-bottom:10px;\r
 469 }\r
 470 \r
 471 \r
 472 /* Mootools Kwicks\r
 473 ----------------------------------------------- */\r
 474 #kwick-box { \r
 475         padding:0;\r
 476         overflow:hidden;\r
 477 }\r
 478 #kwick-box h2 { \r
 479         margin:0;\r
 480 }\r
 481 #kwick {\r
 482         position: relative;\r
 483 }\r
 484 #kwick .kwicks {\r
 485         display: block;\r
 486         background: #999;\r
 487         height: 120px;\r
 488         list-style:none;\r
 489         margin:0;\r
 490         overflow:hidden;\r
 491 }\r
 492 #kwick li {\r
 493         float: left;\r
 494         margin:0;\r
 495         padding:0;\r
 496 }\r
 497 #kwick .kwick {\r
 498         display: block;\r
 499         cursor: pointer;\r
 500         overflow: hidden;\r
 501         height: 100px;\r
 502         width: 215px;\r
 503         padding: 10px;\r
 504         background: #fff;\r
 505 }\r
 506 #kwick .kwick span {\r
 507         color:#fff;\r
 508 }\r
 509 #kwick .one {\r
 510         background: #666;\r
 511 }\r
 512 #kwick .two {\r
 513         background: #777;\r
 514 }\r
 515 #kwick .three {\r
 516         background: #888;\r
 517 }\r
 518 #kwick .four {\r
 519         background: #999;\r
 520 }\r