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

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