html/html/themes/ipfire-new/include/css/style.css

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