release/src/router/transmission/web/stylesheets/common.css

   1 /*--------------------------------------
   2  *
   3  * G L O B A L
   4  *
   5  *--------------------------------------*/
   6
   7 html {
   8         margin: 0;
   9 /* setting border: 0 hoses ie6 win window inner well border */
  10         padding: 0;
  11         height: 100%;
  12 }
  13
  14 body {
  15         font: 62.5% "lucida grande", Tahoma, Verdana, Arial, Helvetica, sans-serif; /* Resets 1em to 10px */
  16         color: #222;/* !important; */
  17         background: #FFF;
  18         text-align: center;
  19         margin: 0 0 30px;
  20         overflow: hidden;
  21 }
  22
  23 img {
  24         border: none;
  25 }
  26
  27 a {
  28         outline: 0;
  29 }
  30
  31 #toolbar,
  32 #statusbar,
  33 .torrent_footer {
  34         background-color: #B9B9B9; /* fallback color if gradients are not supported */
  35         background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7));
  36         background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7);
  37         background-image:    -moz-linear-gradient(top, #C9C9C9, #A7A7A7);
  38         background-image:     -ms-linear-gradient(top, #C9C9C9, #A7A7A7);
  39         background-image:      -o-linear-gradient(top, #C9C9C9, #A7A7A7);
  40         background-image:         linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */
  41 }
  42
  43 /***
  44 ****
  45 ****  ABOUT DIALOG
  46 ****
  47 ***/
  48
  49 #about-dialog > * {
  50         text-align: center;
  51 }
  52 #about-dialog > #about-title {
  53         font-size: 1.3em;
  54         font-weight: bold;
  55 }
  56
  57 /***
  58 ****
  59 ****  TOOLBAR
  60 ****
  61 ***/
  62
  63 #toolbar {
  64         width: 100%;
  65         height: 75px;
  66         margin: 0;
  67         border: 1px outset #AEBBCB;
  68         overflow: hidden;
  69         -moz-user-select: none;
  70         -webkit-user-select: none;
  71 }
  72
  73 #toolbar ul {
  74         height: 50px;
  75         margin: 0;
  76         padding: 0 7px;
  77         text-align: center;
  78 }
  79
  80 #toolbar ul li {
  81         list-style-type: none;
  82         list-style-image: none;
  83         float: left;
  84         margin: 13px 0 0 0;
  85         height: 50px;
  86         padding: 0 8px;
  87         cursor: pointer;
  88 }
  89
  90 #toolbar #inspector {
  91         float: right;
  92 }
  93
  94 #toolbar ul li > div {
  95         text-shadow: 0 1px 0 #ccc;
  96         min-width: 32px;
  97 }
  98
  99 #toolbar ul li div.toolbar_image {
 100         width: 32px;
 101         height: 32px;
 102         margin: 0 auto 5px;
 103         background-image: url('../images/buttons/toolbar_buttons.png');
 104 }
 105
 106 /* toolbar images */
 107 li#open            div        div.toolbar_image { background-position: left     0px; }
 108 li#open            div:active div.toolbar_image { background-position: right    0px; }
 109 li#remove          div        div.toolbar_image { background-position: left   -32px; }
 110 li#remove          div:active div.toolbar_image { background-position: right  -32px; }
 111 li#resume_selected div        div.toolbar_image { background-position: left   -96px; }
 112 li#resume_selected div:active div.toolbar_image { background-position: right  -96px; }
 113 li#pause_selected  div        div.toolbar_image { background-position: left   -64px; }
 114 li#pause_selected  div:active div.toolbar_image { background-position: right  -64px; }
 115 li#pause_all       div        div.toolbar_image { background-position: left  -128px; }
 116 li#pause_all       div:active div.toolbar_image { background-position: right -128px; }
 117 li#resume_all      div        div.toolbar_image { background-position: left  -160px; }
 118 li#resume_all      div:active div.toolbar_image { background-position: right -160px; }
 119 li#filter          div        div.toolbar_image { background-position: left  -192px; }
 120 li#filter          div:active div.toolbar_image { background-position: right -192px; }
 121 li#inspector       div        div.toolbar_image { background-position: left  -224px; }
 122 li#inspector       div:active div.toolbar_image { background-position: right -224px; }
 123
 124 #toolbar ul li.disabled > div {
 125         text-shadow: 0 1px 0 #fff;
 126         opacity: 0.25;
 127         cursor: default;
 128 }
 129
 130 #toolbar ul li.divider {
 131         width: 0;
 132         border-right: 1px dotted black;
 133         opacity: 0.2;
 134         margin: 14px 4px 0;
 135         height: 49px;
 136 }
 137
 138 /***
 139 ****
 140 ****  STATUSBAR
 141 ****
 142 ***/
 143
 144 #statusbar {
 145         border: 1px outset #AEBBCB;
 146         height: 24px;
 147         width: 100%;
 148         overflow: hidden;
 149         position: relative;
 150 }
 151
 152 #statusbar #speed-info {
 153         margin-top: 5px;
 154         margin-left: 45%;
 155         text-align: left;
 156 }
 157
 158 #statusbar #filter-button {
 159         float: left;
 160         text-shadow: 0 1px 0 #ccc;
 161         margin: 5px 8px;
 162         -moz-user-select: none;
 163         -webkit-user-select: none;
 164 }
 165 #statusbar #filter-button:hover {
 166         cursor: pointer;
 167 }
 168 #statusbar #filter-button .filter-selection {
 169         text-decoration: underline;
 170 }
 171
 172
 173 #statusbar input#torrent_search {
 174         float: right;
 175         height: 15px;
 176         width: 100px;
 177         border: solid 0 #fff;
 178         padding: 2px;
 179         margin: 4px 5px 0 0;
 180         border-radius: 10px;
 181 }
 182 /* Safari-look filter input for Firefox */
 183 @-moz-document url-prefix() {
 184         div#statusbar input#torrent_search {
 185                 background: #FFF url('../images/graphics/filter_icon.png') top left no-repeat;
 186                 border: 1px solid #5D80A1;
 187                 margin-top: 3px;
 188                 padding: 1px 10px 1px 18px;
 189                 width: 76px;
 190                 -moz-border-radius: 10px;
 191         }
 192         div#torrent_filter_bar input#torrent_search.blur {
 193                 border-color: #CCC;
 194         }
 195 }
 196
 197 #statusbar input#torrent_search.blur {
 198         color: #999;
 199 }
 200
 201 /***
 202 ****
 203 ****  FILTER POPUP
 204 ****
 205 ***/
 206
 207 #filter-popup .count {
 208         padding-left: 3px;
 209 }
 210 #filter-popup {
 211         color: #222;/* !important; */
 212         background: #FFF;
 213         z-index: 100;
 214 }
 215
 216 #filter-popup #filter-by-state .row .filter-img {
 217         display: none;
 218 }
 219 div#filter-popup #filter-by-state .row .filter-name {
 220         left: 0px;
 221 }
 222 #filter-popup .row {
 223         text-align: left;
 224         cursor: pointer;
 225         margin: 8px 2px;
 226         position: relative;
 227         height: 18px;
 228         -moz-user-select: none;
 229         -webkit-user-select: none;
 230 }
 231 div#filter-popup .row .filter-img {
 232         border: none;
 233         width: 16px;
 234         height: 16px;
 235         position: absolute;
 236         left: 0px;
 237 }
 238 #filter-popup .row .filter-name {
 239         position: absolute;
 240         left: 20px;
 241 }
 242 #filter-popup .row .count {
 243         float: right;
 244         color: #aaa;
 245 }
 246 #filter-popup li {
 247         text-align: left
 248 }
 249 #filter-popup .row:hover,
 250 #filter-popup .row.selected {
 251         font-weight: bold;
 252 }
 253 #filter-popup #filter-by-state {
 254         float: left;
 255         width: 120px;
 256         overflow: hidden;
 257         text-overflow: ellipsis;
 258 }
 259 #filter-popup #filter-by-tracker {
 260         float: right;
 261         width: 130px;
 262         overflow: hidden;
 263         text-overflow: ellipsis;
 264 }
 265
 266 /***
 267 ****
 268 ****  TORRENT CONTAINER
 269 ****
 270 ***/
 271
 272 div#torrent_container {
 273         position: fixed;
 274         top: 102px;
 275         bottom: 22px;
 276         right: 0px;
 277         left: 0px;
 278         padding: 0px;
 279         margin: 0px;
 280         overflow: auto;
 281 }
 282
 283 ul.torrent_list {
 284         width: 100%;
 285         margin: 0;
 286         padding: 0;
 287         text-align: left;
 288         cursor: pointer;
 289 }
 290
 291 ul.torrent_list li.torrent {
 292         border-bottom: 1px solid #ccc;
 293         padding: 4px 30px 5px 10px; /* Make space for buttons on the right */
 294         color: #666;
 295 }
 296 ul.torrent_list li.torrent.compact {
 297         padding: 4px;
 298 }
 299
 300 ul.torrent_list li.torrent a img {
 301         position: relative;
 302         right: -10px;
 303 }
 304
 305 ul.torrent_list li.torrent.even {
 306         background-color: #EDF3FE;
 307 }
 308
 309 ul.torrent_list li.torrent.selected {
 310         background-color: #3879D7;
 311         color: #FFF;
 312 }
 313
 314 ul.torrent_list li.torrent div.torrent_name {
 315         font-size: 1.3em;
 316         font-weight: bold;
 317         overflow: hidden;
 318         text-overflow: ellipsis;
 319         white-space: nowrap;
 320         color: #222;
 321         margin-top: 2px;
 322         margin-bottom: 2px;
 323 }
 324
 325 ul.torrent_list li.torrent div.torrent_name.compact {
 326         font-size: 1.0em;
 327         font-weight: normal;
 328 }
 329
 330 ul.torrent_list li.torrent div.torrent_name.paused {
 331         font-weight: normal;
 332         color: #777;
 333 }
 334
 335 ul.torrent_list li.torrent.selected div.torrent_name {
 336         color: #fff;
 337 }
 338
 339 ul.torrent_list div.torrent_progress_details,
 340 ul.torrent_list div.torrent_peer_details {
 341         clear: left;
 342         font-size: 1em;
 343         overflow: hidden;
 344         text-overflow: ellipsis;
 345         white-space: nowrap;
 346 }
 347
 348 ul.torrent_list li.torrent div.torrent_progress_details.error {
 349         color: #FF0000;
 350 }
 351 ul.torrent_list li.torrent.selected div.torrent_progress_details.error {
 352         color: #FFF;
 353 }
 354 ul.torrent_list li.torrent div.torrent_peer_details.error {
 355         color: #FF0000;
 356 }
 357 ul.torrent_list li.torrent.selected div.torrent_peer_details.error {
 358         color: #FFF;
 359 }
 360
 361
 362 /**
 363  * Progressbar
 364  *
 365  * Each progressbar has three elemens: a parent container and two children,
 366  * complete and incomplete.
 367  *
 368  * The only thing needed to set the progressbar percentage is to set
 369  * the complete child's width as a percentage. This is because incomplete
 370  * is pinned to the full width and height of the parent, and complete
 371  * is pinned to the left side of the parent and has a higher z-index.
 372  *
 373  * The progressbar has different colors depending on its state, so there
 374  * are five 'decorator' classNames: paused, queued, magnet, leeching, seeding.
 375  */
 376
 377 ul.torrent_list div.torrent_progress_bar_container {
 378         height: 10px;
 379         position: relative;
 380 }
 381 ul.torrent_list div.torrent_progress_bar_container.compact {
 382         width: 50px;
 383         position: absolute;
 384         right: 10px;
 385         margin-top: 2px;
 386         /*float: right;*/
 387 }
 388 ul.torrent_list div.torrent_peer_details.compact {
 389         margin-top: 2px;
 390         margin-right: 65px; /* leave room on the right for the progressbar */
 391         float: right; /* pins it next to progressbar & forces torrent_name to ellipsize when it bumps up against this div */
 392 }
 393 ul.torrent_list div.torrent_progress_bar_container.full {
 394         margin-top: 2px;
 395         margin-bottom: 5px;
 396 }
 397 ul.torrent_list div.torrent_progress_bar {
 398         height: 100%;
 399         position: absolute;
 400         top: 0px;
 401         left: 0px;
 402         background-image: url('../images/progress/progress.png');
 403         background-repeat: repeat-x;
 404         border: 1px solid #888;
 405 }
 406 ul.torrent_list div.torrent_progress_bar.complete {
 407         z-index: 2;
 408 }
 409 ul.torrent_list div.torrent_progress_bar.incomplete {
 410         z-index: 1;
 411         width: 100%;
 412 }
 413 ul.torrent_list div.torrent_progress_bar.complete.paused {
 414         background-position: left -30px;
 415         border-color: #989898;
 416 }
 417 ul.torrent_list div.torrent_progress_bar.incomplete.paused {
 418         background-position: left -20px;
 419         border-color: #CFCFCF;
 420 }
 421 ul.torrent_list div.torrent_progress_bar.complete.magnet {
 422         background-position: left -20px;
 423         border-color: #CFCFCF;
 424 }
 425 ul.torrent_list div.torrent_progress_bar.incomplete.magnet {
 426         background-position: left -50px;
 427         border-color: #D47778;
 428 }
 429 ul.torrent_list div.torrent_progress_bar.complete.leeching {
 430         background-position: left 0px;
 431         border-color: #3D9DEA;
 432 }
 433 ul.torrent_list div.torrent_progress_bar.complete.leeching.queued {
 434         background-position: left -70px;
 435         border-color: #889CA5;
 436 }
 437 ul.torrent_list div.torrent_progress_bar.incomplete.leeching {
 438         background-position: left -20px;
 439         border-color: #CFCFCF;
 440 }
 441 ul.torrent_list div.torrent_progress_bar.incomplete.leeching.queued {
 442         background-position: left -80px;
 443         border-color: #C4C4C4;
 444 }
 445 ul.torrent_list div.torrent_progress_bar.complete.seeding {
 446         background-position: left -40px;
 447         border-color: #269E30;
 448 }
 449 ul.torrent_list div.torrent_progress_bar.complete.seeding.queued {
 450         background-position: left -60px;
 451         border-color: #8A998D;
 452 }
 453 ul.torrent_list div.torrent_progress_bar.incomplete.seeding {
 454         background-position: left -10px;
 455         border-color: #29AD35;
 456 }
 457
 458 /****
 459 *****  START / STOP BUTTON
 460 ****/
 461
 462 li.torrent a {
 463         float: right;
 464         position: relative;
 465         right: -22px;
 466         top: 1px;
 467 }
 468 li.torrent a div {
 469         background: url('../images/buttons/torrent_buttons.png');
 470         height: 14px;
 471         width: 14px;
 472 }
 473 li.torrent a div.torrent_pause {
 474         background-position: left top;
 475 }
 476 li.torrent a:hover div.torrent_pause {
 477         background-position: left center;
 478 }
 479 li.torrent a:active div.torrent_pause {
 480         background-position: left bottom;
 481 }
 482 li.torrent a div.torrent_resume {
 483         background-position: center top;
 484 }
 485 li.torrent a:hover div.torrent_resume {
 486         background-position: center center;
 487 }
 488 li.torrent a:active div.torrent_resume {
 489         background-position: center bottom;
 490 }
 491
 492 /***
 493 ****
 494 ****  PREFERENCES
 495 ****
 496 ***/
 497
 498 #prefs-dialog.ui-tabs .ui-tabs-panel {
 499         padding: 0px;
 500         -moz-user-select: none;
 501         -webkit-user-select: none;
 502 }
 503 .prefs-section {
 504         margin: 10px;
 505         text-align: left;
 506 }
 507 .prefs-section > * {
 508         padding-top: 8px;
 509         padding-left: 8px;
 510 }
 511 .prefs-section .title {
 512         font-weight: bold;
 513         padding-left: 0px;
 514 }
 515 .prefs-section .row .key {
 516         float: left;
 517         padding-top: 3px;
 518 }
 519 .prefs-section .row .key > * {
 520         margin-left: 0px;
 521 }
 522 .prefs-section .row .value {
 523         margin-left: 150px;
 524 }
 525 .prefs-section .row .value > * {
 526         width: 100%;
 527 }
 528 .prefs-section .checkbox-row > input {
 529         margin: 0px;
 530 }
 531 .prefs-section .checkbox-row > label {
 532         margin-left: 5px;
 533 }
 534
 535 /*--------------------------------------
 536  *
 537  * T O R R E N T   I N S P E C T O R
 538  *
 539  *--------------------------------------*/
 540
 541 div#torrent_inspector {
 542         position: fixed;
 543         top: 102px;
 544         bottom: 22px;
 545         right: 0px;
 546         width: 570px;
 547         background-color: #ddd;
 548         border-left: 1px solid #888;
 549         z-index: 5;
 550         text-align: left;
 551         overflow: auto;
 552 }
 553 div#torrent_inspector #torrent_inspector_name {
 554         margin: 0;
 555         overflow: hidden;
 556 }
 557 div#torrent_inspector #torrent_inspector_size {
 558         font-size: 1.2em;
 559         margin: 3px;
 560         display: block;
 561         padding-top: 2px;
 562 }
 563 div#inspector_header {
 564         clear: both;
 565         padding-top: 10px;
 566         padding-left: 10px;
 567         padding-right: 10px;
 568 }
 569 div#inspector_tabs {
 570         width: 283px;
 571         margin: 10px auto 0 auto;
 572 }
 573 .inspector_tab {
 574         float: left;
 575         height: 17px;
 576         background: transparent url('../images/buttons/tab_backgrounds_highlight.png') left -1px repeat-x;
 577         margin: 0px;
 578         padding: 3px 15px; /* 3px == ((bg image height - fg image height) / 2) */
 579         cursor: pointer;
 580 }
 581 #inspector_tabs .selected {
 582         background-position: left -26px; /* the highlighted part of the image */
 583 }
 584
 585 #inspector_tab_info {
 586         background: transparent url('../images/buttons/tab_backgrounds.png') left -1px repeat-x;
 587         border: 1px solid #aaa;
 588         -webkit-border-top-left-radius: 5px;
 589         -webkit-border-top-right-radius: 0px;
 590         -webkit-border-bottom-right-radius: 0px;
 591         -webkit-border-bottom-left-radius: 5px;
 592         -moz-border-radius-topleft: 5px;
 593         -moz-border-radius-topright: 0px;
 594         -moz-border-radius-bottomright: 0px;
 595         -moz-border-radius-bottomleft: 5px;
 596         border-top-left-radius: 5px;
 597         border-top-right-radius: 0px;
 598         border-bottom-right-radius: 0px;
 599         border-bottom-left-radius: 5px;
 600 }
 601
 602 #inspector_tab_info .selected {
 603         background: transparent url('../images/buttons/tab_backgrounds.png') left -26px repeat-x;
 604 }
 605
 606 #inspector_tabs #inspector_tab_info .selected {
 607         background: transparent url('../images/buttons/tab_backgrounds.png') left -26px repeat-x !important;
 608 }
 609
 610 #inspector_tabs #inspector_tab_activity, #inspector_tabs #inspector_tab_peers {
 611         border-top: 1px solid #aaa;
 612         border-bottom: 1px solid #aaa;
 613         border-right: 1px solid #aaa;
 614 }
 615
 616 #inspector_tabs #inspector_tab_activity, #inspector_tabs #inspector_tab_trackers {
 617         border-top: 1px solid #aaa;
 618         border-bottom: 1px solid #aaa;
 619 }
 620
 621 #inspector_tabs #inspector_tab_files {
 622         border: 1px solid #aaa;
 623         -webkit-border-top-left-radius: 0px;
 624         -webkit-border-top-right-radius: 5px;
 625         -webkit-border-bottom-right-radius: 5px;
 626         -webkit-border-bottom-left-radius: 0px;
 627         -moz-border-radius-topleft: 0px;
 628         -moz-border-radius-topright: 5px;
 629         -moz-border-radius-bottomright: 5px;
 630         -moz-border-radius-bottomleft: 0px;
 631         border-top-left-radius: 0px;
 632         border-top-right-radius: 5px;
 633         border-bottom-right-radius: 5px;
 634         border-bottom-left-radius: 0px;
 635 }
 636 .inspector_container {
 637         margin: 0 3%;
 638         width: 96%;
 639 }
 640 .inspector_group {
 641         display: table;
 642         width: 100%;
 643         border-top: 1px solid #888;
 644         margin: 10px 0px;
 645         padding: 10px 0px;
 646 }
 647 .inspector_torrent_label {
 648         display: table-caption;
 649         font-size: 1.2em;
 650         font-weight: bold;
 651 }
 652 .inspector_group_label {
 653         display: table-header-group;
 654         font-weight: bold;
 655 }
 656 .inspector_row {
 657         display: table-row;
 658 }
 659 .inspector_row > .inspector_label {
 660         display: table-cell;
 661         width: 100px; /* this + the next 380 == inspector_container_with */
 662 }
 663 .inspector_row > div {
 664         word-wrap: break-word;
 665         padding-top: 10px;
 666         width: 380px; /* inspector_container_width==480 - inspector_label_width==100 */
 667 }
 668
 669 /* Peers Inspector Tab */
 670 #inspector_peers_list {
 671         padding: 0 0 0 0;
 672         margin: 0 0 0 0;
 673         text-align: left;
 674         cursor: default;
 675         overflow: hidden;
 676 }
 677
 678 #inspector_peers_list > div.inspector_group {
 679         padding-bottom: 0;
 680         margin-bottom: 0;
 681 }
 682
 683 table.peer_list {
 684         width: 100%;
 685         border-collapse: collapse;
 686         text-align: left;
 687         cursor: default;
 688         clear: both;
 689         table-layout: fixed;
 690 }
 691
 692 .peer_list .encryptedCol {
 693         width: 16px;
 694 }
 695
 696 .peer_list .upCol {
 697         width: 70px;
 698 }
 699
 700 .peer_list .downCol {
 701         width: 70px;
 702 }
 703
 704 .peer_list .percentCol {
 705         width: 30px;
 706         padding-right: 5px;
 707 }
 708
 709 .peer_list td.percentCol {
 710         text-align: right;
 711 }
 712
 713 .peer_list .statusCol {
 714         width: 40px;
 715         padding-right: 5px;
 716 }
 717
 718 .peer_list .addressCol {
 719         width: 180px;
 720 }
 721
 722 .peer_list .clientCol {
 723         white-space: nowrap;
 724         overflow: hidden;
 725         text-overflow: ellipsis;
 726 }
 727
 728 tr.inspector_peer_entry {
 729
 730 }
 731
 732 tr.inspector_peer_entry.odd {
 733         background-color: #EEEEEE;
 734 }
 735
 736 /* Trackers Inspector Tab */
 737 #inspector_trackers_list {
 738         padding: 0 0 0 0;
 739         margin: 0 0 0 0;
 740         text-align: left;
 741         cursor: default;
 742         overflow: hidden;
 743 }
 744
 745 #inspector_trackers_list > div.inspector_group {
 746         padding-bottom: 0;
 747         margin-bottom: 0;
 748 }
 749
 750 ul.tier_list {
 751         width: 100%;
 752         margin: 2px 0 8px 0;
 753         padding-left: 0px;
 754         text-align: left;
 755         display: block;
 756         cursor: default;
 757         list-style-type: none;
 758         list-style: none;
 759         list-style-image: none;
 760         clear: both;
 761 }
 762 .tier_list li{
 763         overflow: hidden;
 764 }
 765 .tier_list .tracker_activity{
 766         float: left;
 767         color: #666;
 768         width: 330px;
 769         display: table;
 770         margin-top: 1px;
 771 }
 772 .tier_list .tracker_activity div{
 773         padding: 2px;
 774 }
 775 .tier_list table{
 776         float: right;
 777         color: #666;
 778 }
 779 .tier_list th{
 780         text-align: right;
 781 }
 782
 783 li.inspector_tracker_entry {
 784         padding: 3px 0 3px 2px;
 785         display: block;
 786 }
 787
 788 li.inspector_tracker_entry.odd {
 789         background-color: #EEEEEE;
 790 }
 791 div.tracker_host {
 792         font-size: 1.2em;
 793         font-weight: bold;
 794         color: #222;
 795 }
 796
 797 /* Files Inspector Tab */
 798 #inspector_file_list {
 799         padding: 0 0 0 0;
 800         margin: 0 0 0 0;
 801         text-align: left;
 802         cursor: default;
 803         overflow: hidden;
 804 }
 805 #inspector_tab_files_container #select_all_button_container {
 806         width: 100%;
 807 }
 808 #inspector_tab_files_container .select_all_button {
 809         background: transparent url(../images/buttons/tab_backgrounds.png) repeat-x scroll left -6px;
 810         border: 1px solid #888888;
 811         cursor: pointer;
 812         float: right;
 813         list-style-type: none;
 814         margin: 2px;
 815         padding: 2px 5px;
 816 }
 817
 818 #inspector_file_list {
 819         width: 100%;
 820         margin: 0  0 0 0;
 821         padding-bottom: 10px;
 822         text-align: left;
 823         display: block;
 824         cursor: default;
 825         list-style-type: none;
 826         list-style: none;
 827         list-style-image: none;
 828         clear: both;
 829 }
 830 li.inspector_torrent_file_list_entry {
 831         padding: 3px 0 3px 2px;
 832         display: block;
 833 }
 834
 835 li.inspector_torrent_file_list_entry.skip {
 836         color: #666;
 837 }
 838
 839 li.inspector_torrent_file_list_entry.even {
 840         background-color: #EEEEEE;
 841 }
 842 div.inspector_torrent_file_list_entry_name {
 843         font-size: 1.2em;
 844         font-weight: bold;
 845         color: #222;
 846         margin-left: 20px;
 847 }
 848 li.inspector_torrent_file_list_entry.skip>.inspector_torrent_file_list_entry_name {
 849         color: #666;
 850 }
 851 div.inspector_torrent_file_list_entry_progress {
 852         font-size: 1em;
 853         color: #666;
 854         margin-left: 20px;
 855 }
 856 div.file_wanted_control {
 857         background-position: left -19px;
 858         float: left;
 859         position: absolute;
 860         cursor: pointer;
 861         margin: 3px 0 0 0;
 862         width: 19px;
 863         height: 19px;
 864         background-image: url('../images/buttons/file_wanted_buttons.png');
 865         background-repeat: no-repeat;
 866         background-color: transparent;
 867 }
 868
 869 li.inspector_torrent_file_list_entry.skip>.file_wanted_control {
 870         background-position: left top;
 871 }
 872
 873 li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
 874         background-position: left -19px;
 875 }
 876
 877 ul.single_file li.inspector_torrent_file_list_entry>.file_wanted_control,
 878 li.inspector_torrent_file_list_entry.complete>.file_wanted_control {
 879         background-position: left -38px;
 880         cursor: default;
 881 }
 882
 883 div.file_priority_control {
 884         float: right;
 885         margin: 4px 0 0 0;
 886         width: 35px;
 887         height: 19px;
 888         background-image: url('../images/buttons/file_priority_buttons.png');
 889         background-repeat: no-repeat;
 890         background-color: transparent;
 891         cursor: pointer;
 892 }
 893 div.file_priority_control.normal {
 894         background-position: left top;
 895 }
 896 div.file_priority_control.normal:hover {
 897         background-position: right top;
 898 }
 899 div.file_priority_control.high {
 900         background-position: left -19px;
 901 }
 902 div.file_priority_control.high:hover {
 903         background-position: right -19px;
 904 }
 905 div.file_priority_control.low {
 906         background-position: left -38px;
 907 }
 908 div.file_priority_control.low:hover {
 909         background-position: right -38px;
 910 }
 911 ul.single_file li.inspector_torrent_file_list_entry>.file_priority_control,
 912 li.inspector_torrent_file_list_entry.complete div.file_priority_control {
 913         background-position: left -57px;
 914         cursor: default;
 915 }
 916
 917
 918 /****
 919 *****
 920 *****  MAIN WINDOW FOOTER
 921 *****
 922 ****/
 923
 924 div.torrent_footer {
 925         height: 22px;
 926         border-top: 1px solid #555;
 927         bottom: 0;
 928         position: fixed;
 929         width: 100%;
 930         z-index: 3;
 931 }
 932
 933 div.torrent_footer > * {
 934         position: relative;
 935         float: left;
 936         margin: 2px 4px;
 937 }
 938 div.torrent_footer > *,
 939 div.torrent_footer ul#settings_menu li#button {
 940         height: 18px;
 941         width: 32px;
 942         cursor: pointer;
 943         -moz-user-select: none;
 944         -webkit-user-select: none;
 945 }
 946
 947 div.torrent_footer ul#settings_menu li#button {
 948         background: transparent url('../images/graphics/chrome.png') left top no-repeat;
 949         padding: 0;
 950         position: relative;
 951 }
 952 div.torrent_footer ul#settings_menu li#button:hover,
 953 div.torrent_footer ul#settings_menu li#button:active {
 954         background-position: -32px top;
 955 }
 956
 957 #turtle-button {
 958         background: transparent url('../images/graphics/chrome.png') left -18px no-repeat;
 959 }
 960 #turtle-button:hover,
 961 #turtle-button:active {
 962         background-position: -32px -18px;
 963 }
 964 #turtle-button.enabled {
 965         background-position: left -36px;
 966 }
 967 #turtle-button.enabled:hover,
 968 #turtle-button.enabled:active {
 969         background-position: -32px -36px;
 970 }
 971
 972 #compact-button {
 973         background: transparent url('../images/graphics/chrome.png') left -54px no-repeat;
 974 }
 975 #compact-button:hover,
 976 #compact-button:active {
 977         background-position: -32px -54px;
 978 }
 979 #compact-button.enabled {
 980         background-position: left -72px;
 981 }
 982 #compact-button.enabled:hover,
 983 #compact-button.enabled:active {
 984         background-position: -32px -72px;
 985 }
 986
 987 #prefs-button {
 988         display: none;
 989 }
 990
 991
 992 /****
 993 *****
 994 *****  DIALOGS
 995 *****
 996 ****/
 997
 998 div.dialog_container {
 999         position: absolute;
1000         top: 0;
1001         left: 0px;
1002         margin: 0px;
1003         width: 100%;
1004         height: 100%;
1005         text-align: center;
1006         color: black;
1007         font-size: 1.1em;
1008 }
1009
1010 div.dialog_container div.dialog_window {
1011         background-color: #eee;
1012         margin: 0 auto;
1013         opacity: .95;
1014         border-top: none;
1015         text-align: left;
1016         width: 420px;
1017         z-index: 10;
1018         overflow: hidden;
1019         position: relative;
1020         -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.7);
1021         top: 80px;
1022 }
1023 @media screen and (-webkit-min-device-pixel-ratio:0) {
1024         div.dialog_container div.dialog_window {
1025                 top: 0;
1026                 margin-top: 71px;
1027         }
1028 }
1029
1030 div.dialog_container div.dialog_window img {
1031         margin: 20px 20px 0 20px;
1032         float: left;
1033 }
1034
1035 div.dialog_container div.dialog_window h2.dialog_heading {
1036         display: block;
1037         float: left;
1038         width: 305px;
1039         font-size: 1.2em;
1040         color: black;
1041         margin-top: 20px;
1042 }
1043
1044 div.dialog_container div.dialog_window div.dialog_message {
1045         float: left;
1046         padding-left: 3px;
1047         margin-left: -3px;
1048         width: 305px;
1049         overflow: hidden;
1050 }
1051
1052 div.dialog_container div.dialog_window a {
1053         display: block;
1054         float: right;
1055         margin: 10px 20px 10px -8px;
1056         padding: 5px;
1057         background-color: #EEE;
1058         border: 1px solid #787878;
1059         width: 50px;
1060         height: 15px;
1061         text-align: center;
1062         font-weight: bold;
1063         text-decoration: none;
1064         color: #323232;
1065         -webkit-appearance: button;
1066         font: -webkit-control;
1067         cursor: default;
1068 }
1069
1070 div.dialog_container div.dialog_window a:hover,
1071 div.dialog_container div.dialog_window a:active {
1072         background: #C0C8D6 url('../images/graphics/filter_bar.png') bottom repeat-x;
1073 }
1074
1075 div#upload_container div.dialog_window div.dialog_message label {
1076         margin-top: 15px;
1077         display: block;
1078 }
1079
1080 div#upload_container div.dialog_window div.dialog_message input {
1081         width: 249px;
1082         margin: 3px 0 0 0;
1083         display: block;
1084 }
1085
1086 div#upload_container div.dialog_window div.dialog_message input[type=text] {
1087         width: 245px;
1088         padding: 2px;
1089 }
1090
1091 div#upload_container div.dialog_window div.dialog_message input[type=checkbox] {
1092         margin: 15px 3px 0 0;
1093         display: inline;
1094         width: auto;
1095 }
1096
1097 div#upload_container div.dialog_window div.dialog_message #auto_start_label {
1098         display: inline;
1099 }
1100
1101 div.dialog_container div.dialog_window form {
1102         margin: 0;
1103         padding: 0px;
1104 }
1105
1106 iframe#torrent_upload_frame {
1107         display: block; /* Don't change this : safari forms won't target hidden frames (they open a new window) */
1108         position: absolute;
1109         top: -1000px;
1110         left: -1000px;
1111         width: 0px;
1112         height: 0px;
1113         border: none;
1114         padding: 0;
1115         margin: 0;
1116 }
1117
1118 /****
1119 *****
1120 *****  POPUP MENU
1121 *****
1122 ****/
1123
1124 .trans_menu {
1125         margin: 0;
1126         padding: 0;
1127 }
1128
1129 .trans_menu,
1130 .trans_menu ul {
1131         list-style: none;
1132 }
1133
1134 .trans_menu ul {
1135         /* place it right above the button */
1136         position: relative;
1137         bottom: 18px;
1138
1139         min-width: 210px;
1140         background-color: white;
1141         padding: 5px 0;
1142         text-align: left;
1143         list-style: none;
1144         -webkit-border-radius: 5px;
1145         -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
1146 }
1147
1148 .trans_menu ul ul {
1149         min-width: 150px;
1150 }
1151
1152 .trans_menu ul ul#footer_sort_menu {
1153         min-width: 175px;
1154 }
1155
1156 .trans_menu > * li {
1157         margin: 0;
1158         padding: 3px 10px 3px 20px !important;
1159         color: #000;
1160         cursor: default;
1161         text-indent: auto !important;
1162         width: inherit;
1163 }
1164
1165 .trans_menu li.hover {
1166         z-index: 1 !important; /* the hover z-index has to be below the normal one the hovering items may be drawn over a submenu */
1167         background-color: #24e;
1168         color: #fff;
1169         text-shadow: none;
1170 }
1171
1172 .trans_menu li.separator,
1173 .trans_menu li.separator.hover {
1174         border-top: 1px solid #ddd;
1175         margin: 5px 0;
1176         padding: 0px;
1177         background: transparent;
1178 }
1179
1180 .trans_menu li span.arrow {
1181         float: right;
1182 }
1183
1184 .trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected {
1185         color: white;
1186 }
1187
1188 .trans_menu span.selected {
1189         margin: 0 3px 0 -15px;
1190         color: #666;
1191         float: left;
1192 }
1193
1194 .trans_menu div.outerbox {
1195         display: none;
1196         background: transparent;
1197         border: 1px solid rgba(0,0,0,0.1);
1198         -webkit-border-radius: 5px;
1199 }
1200
1201 .trans_menu div.inner {
1202         left: 0;
1203         margin: 0;
1204 }
1205
1206 .trans_menu li.main li {
1207         z-index: 2;
1208         min-width: 78px;
1209 }
1210
1211 .trans_menu a {
1212         text-decoration: none;
1213         cursor: default;
1214 }
1215
1216 /*--------------------------------------
1217  *
1218  * C O N T E X T   M E N U
1219  *
1220  *--------------------------------------*/
1221
1222 div#jqContextMenu {
1223         -webkit-border-radius: 5px;
1224         border: 1px solid rgba(0,0,0,0.1);
1225         -moz-user-select: none;
1226         -webkit-user-select: none;
1227 }
1228
1229 div#jqContextMenu ul {
1230         filter: alpha(opacity=98);
1231         -moz-opacity: .98;
1232         opacity: .98;
1233         -webkit-box-shadow: 0 10px 25px rgba(0,0,0,0.4);
1234         -webkit-border-radius: 5px;
1235 }
1236
1237 div#jqContextMenu li.separator, div#jqContextMenu li.separator:hover {
1238         background: inherit !important;
1239         border-top: 1px solid #ddd !important;
1240         margin: 5px 0 !important;
1241         padding: 0px;
1242 }