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
 369 /* Main */
 370
 371 #main
 372 {
 373 position: relative;
 374 width: 910px;
 375 margin: 0 auto;
 376 margin-top: 1em;
 377 padding-left: 20px;
 378 padding-right: 20px;
 379 border-radius: 8px 8px 8px 8px;
 380 -webkit-border-radius: 8px 8px 8px 8px;
 381 background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
 382 border: 1px solid black;
 383 }
 384
 385 #main_inner p
 386 {
 387 text-align: justify;
 388 margin-bottom: 2.0em;
 389 }
 390
 391 #main_inner ul
 392 {
 393 margin-bottom: 2.0em;
 394 }
 395
 396 #main_inner
 397 {
 398 position: relative;
 399 width: 910px;
 400 margin: 0 auto;
 401 padding-top: 1.5em;
 402 }
 403
 404 #main_inner h1 {
 405         margin-bottom: 1em;
 406 }
 407
 408 #main_inner h3,h4
 409 {
 410 border-bottom: dotted 1px #E1E1E1;
 411 position: relative;
 412 }
 413
 414 #main_inner h3
 415 {
 416 font-size: 2.1em;
 417 padding-bottom: 0.1em;
 418 margin-bottom: 0.8em;
 419 }
 420
 421 #main_inner h4
 422 {
 423 font-size: 1.2em;
 424 padding-bottom: 0.175em;
 425 margin-bottom: 1.4em;
 426 margin-top: 0.95em;
 427 }
 428
 429 #main_inner .post
 430 {
 431 position: relative;
 432 border-radius: 8px 8px 8px 8px;
 433 -webkit-border-radius: 8px 8px 8px 8px;
 434 border: 1px solid silver;
 435 padding-left: 2em;
 436 padding-right: 2em;
 437 padding-bottom: 1em;
 438 padding-top: 1em;
 439 }
 440
 441 #main_inner .post h3
 442 {
 443 font-size: 1.7em;
 444 padding-bottom: 1.2em;
 445 }
 446
 447 #main_inner .post ul.post_info
 448 {
 449 list-style: none;
 450 position: absolute;
 451 top: 3em;
 452 font-size: 0.8em;
 453 }
 454
 455 #main_inner .post ul.post_info li
 456 {
 457 background-position: 0em 0.2em;
 458 background-repeat: no-repeat;
 459 display: inline;
 460 padding-left: 18px;
 461 }
 462
 463 #main_inner .post ul.post_info li.date
 464 {
 465 background-image: url('/themes/ipfire-new/images/n5.gif');
 466 }
 467
 468 #main_inner .post ul.post_info li.comments
 469 {
 470 background-image: url('/themes/ipfire-new/images/n6.gif');
 471 margin-left: 1.1em;
 472 }
 473
 474 /* Footer */
 475
 476 #footer
 477 {
 478 width: 930px;
 479 margin: 0 auto;
 480 text-align: center;
 481 clear: both;
 482 border-top: dotted 1px #E1E1E1;
 483 margin-top: 1.0em;
 484 margin-bottom: 1.0em;
 485 padding-top: 1.0em;
 486 text-transform: lowercase;
 487 }
 488
 489 /* Search */
 490
 491 input
 492 {
 493 margin: 0.2em;
 494 }
 495
 496 input.button
 497 {
 498 background: #CA2F2F url('/themes/ipfire-new/images/n3.gif') repeat-x;
 499 color: #fff;
 500 border: solid 1px #A94B4B;
 501 font-weight: bold;
 502 text-transform: lowercase;
 503 font-size: 0.8em;
 504 height: 2.0em;
 505 }
 506
 507 input.text
 508 {
 509 border: solid 1px #F1F1F1;
 510 font-size: 1.0em;
 511 padding: 0.25em 0.25em 0.25em 0.25em;
 512 }
 513
 514 #search
 515 {
 516 width: 100%;
 517 margin-bottom: 2.0em;
 518 }
 519
 520 #search input.text
 521 {
 522 position: absolute;
 523 top: 0em;
 524 left: 0em;
 525 width: 9.5em;
 526 }
 527
 528 #search input.button
 529 {
 530 position: absolute;
 531 top: 0em;
 532 right: 0em;
 533 min-width: 2.0em;
 534 max-width: 2.5em;
 535 }
 536
 537 #traffic
 538 {
 539 margin-top: -2.2em;
 540 margin-left: 60em;
 541 }
 542 /* LAYOUT - 3 COLUMNS */
 543
 544         /* Primary content */
 545
 546         #primaryContent_3columns
 547         {
 548         margin-right: 34em;
 549         }
 550
 551         #columnA_3columns
 552         {
 553         float: left;
 554         width: 100%;
 555         margin-right: -34em;
 556         padding-right: 2em;
 557         }
 558
 559         /* Secondary Content */
 560
 561         #secondaryContent_3columns
 562         {
 563         float: right;
 564         }
 565
 566         #columnB_3columns
 567         {
 568         width: 13.0em;
 569         float: left;
 570         padding: 0em 2em 0.5em 2em;
 571         border-left: dotted 1px #E1E1E1;
 572         }
 573
 574         #columnC_3columns
 575         {
 576         width: 13.0em;
 577         float: left;
 578         padding: 0em 0em 0.5em 2em;
 579         border-left: dotted 1px #E1E1E1;
 580         }
 581         #columnC_2columns
 582         {
 583         float: left;
 584         width: 100%;
 585         }
 586
 587 /* LAYOUT - COLUMNLESS */
 588
 589         /* Primary content */
 590
 591         #primaryContent_columnless
 592         {
 593         position: relative;
 594         }
 595
 596         #columnA_columnless
 597         {
 598         position: relative;
 599         margin-left: -5em;
 600         }
 601
 602 /* status */
 603 .statusdisplay {
 604
 605         border-radius: 8px 8px 8px 8px;
 606         -webkit-border-radius: 8px 8px 8px 8px;
 607         padding-left: 20px;
 608         padding-right: 20px;
 609         margin: 0 auto;
 610         width: 950px;
 611         height:100px;
 612         margin-left: -1.6em;
 613         margin-top: 1em;
 614         margin-bottom: 1em;
 615         background: #fff url('/themes/ipfire-new/images/n2.gif') 0px 0px repeat-x;
 616 }
 617 /* Bandwidth Calculation */
 618
 619 #bandwidthCalculationContainer {
 620         display: block;
 621 }