browser/themes/winstripe/browser/browser.css

   1 /* ***** BEGIN LICENSE BLOCK *****
   2  * Version: MPL 1.1/GPL 2.0/LGPL 2.1
   3  *
   4  * The contents of this file are subject to the Mozilla Public License Version
   5  * 1.1 (the "License"); you may not use this file except in compliance with
   6  * the License. You may obtain a copy of the License at
   7  * http://www.mozilla.org/MPL/
   8  *
   9  * Software distributed under the License is distributed on an "AS IS" basis,
  10  * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
  11  * for the specific language governing rights and limitations under the
  12  * License.
  13  *
  14  * The Original Code is mozilla.org code.
  15  *
  16  * The Initial Developer of the Original Code is
  17  * Netscape Communications Corporation.
  18  * Portions created by the Initial Developer are Copyright (C) 1998-1999
  19  * the Initial Developer. All Rights Reserved.
  20  *
  21  * Contributor(s):
  22  *   Joe Hewitt (hewitt@netscape.com)
  23  *   Jason Kersey (kerz@netscape.com)
  24  *   Pierre Chanial (chanial@noos.fr)
  25  *   Dean Tessman (dean_tessman@hotmail.com)
  26  *   Blake Ross (blake@cs.stanford.edu)
  27  *   Pamela Greene (pamg.bugs@gmail.com)
  28  *   Dão Gottwald (dao@mozilla.com)
  29  *   Jim Mathies (jmathies@mozilla.com)
  30  *
  31  * Alternatively, the contents of this file may be used under the terms of
  32  * either the GNU General Public License Version 2 or later (the "GPL"), or
  33  * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  34  * in which case the provisions of the GPL or the LGPL are applicable instead
  35  * of those above. If you wish to allow use of your version of this file only
  36  * under the terms of either the GPL or the LGPL, and not to allow others to
  37  * use your version of this file under the terms of the MPL, indicate your
  38  * decision by deleting the provisions above and replace them with the notice
  39  * and other provisions required by the GPL or the LGPL. If you do not delete
  40  * the provisions above, a recipient may use your version of this file under
  41  * the terms of any one of the MPL, the GPL or the LGPL.
  42  *
  43  * ***** END LICENSE BLOCK ***** */
  44
  45 @import url("chrome://global/skin/");
  46
  47 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  48 @namespace html url("http://www.w3.org/1999/xhtml");
  49
  50 %filter substitution
  51 %define toolbarHighlight rgba(255,255,255,.5)
  52 %define navbarTextboxCustomBorder border-color: rgba(0,0,0,.25) rgba(0,0,0,.32) rgba(0,0,0,.37);
  53
  54 #menubar-items {
  55   -moz-box-orient: vertical; /* for flex hack */
  56 }
  57
  58 #main-menubar {
  59   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
  60 }
  61
  62 #navigator-toolbox {
  63   -moz-appearance: none;
  64   border-top: none;
  65   background-color: transparent;
  66 }
  67
  68 #navigator-toolbox[tabsontop="true"] {
  69   border-bottom: 1px solid ThreeDShadow;
  70 }
  71
  72 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
  73   -moz-appearance: none;
  74   border-style: none;
  75   background-color: -moz-Dialog;
  76 }
  77
  78 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[iconsize="small"],
  79 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar)[defaulticonsize="small"]:not([iconsize]) {
  80   padding-top: 1px;
  81   padding-bottom: 1px;
  82 }
  83
  84 #nav-bar:not(:-moz-lwtheme),
  85 #navigator-toolbox[tabsontop="true"] > #nav-bar {
  86   background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
  87 }
  88
  89 #navigator-toolbox[tabsontop="false"] > #toolbar-menubar:not(:-moz-lwtheme) {
  90   background-image: -moz-linear-gradient(@toolbarHighlight@, @toolbarHighlight@);
  91 }
  92
  93 #personal-bookmarks {
  94   min-height: 24px;
  95 }
  96
  97 #print-preview-toolbar:not(:-moz-lwtheme) {
  98   -moz-appearance: toolbox;
  99 }
 100
 101 statusbarpanel#statusbar-display {
 102   -moz-padding-start: 0;
 103 }
 104
 105 /* ::::: app menu button ::::: */
 106
 107 #appmenu-button {
 108   -moz-appearance: none;
 109   background-color: rgb(228,120,14);
 110   background-image: -moz-linear-gradient(rgba(255,255,255,.7),
 111                                          rgba(255,255,255,.4) 10%,
 112                                          rgba(255,255,255,0) 50%);
 113   background-clip: padding-box;
 114   border: 1px solid rgba(0,0,0,.5);
 115   border-top-style: none;
 116   -moz-border-radius-bottomleft: 4px;
 117   -moz-border-radius-bottomright: 4px;
 118   -moz-box-shadow: 0 0 5px rgba(255,255,255,.5) inset;
 119   color: white;
 120   text-shadow: 0 0 2px #333;
 121   font-weight: bold;
 122   padding: .1em 1.5em;
 123   margin: 0;
 124 }
 125
 126 #appmenu-button:hover:not(:active):not([open]) {
 127   background-color: rgb(248,140,34);
 128 }
 129
 130 #appmenu-button:hover:active,
 131 #appmenu-button[open] {
 132   background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2) 10%, transparent 60%);
 133   -moz-box-shadow: 0 0 4px rgba(0,0,0,.3) inset;
 134 }
 135
 136 #appmenu-button > .button-box {
 137   border-style: none;
 138   padding: 0;
 139 }
 140
 141 #appmenu-button > .button-box > .button-menu-dropmarker {
 142   list-style-image: url(appmenu-dropmarker.png);
 143   width: auto;
 144   height: auto;
 145   padding: 0;
 146   margin: 0;
 147   -moz-margin-start: .5em;
 148 }
 149
 150 #appmenu-button > menupopup > menuitem {
 151   -moz-padding-end: 16px;
 152 }
 153
 154 .split-menuitem-item[_moz-menuactive="true"],
 155 .split-menuitem-menu[_moz-menuactive="true"] {
 156   background-color: -moz-menuhover;
 157   color: -moz-menuhovertext;
 158 }
 159
 160 /* ::::: titlebar ::::: */
 161
 162 #titlebar {
 163   -moz-appearance: -moz-window-titlebar;
 164   /* we only need to the middle section, hide the edges of the
 165   theme background beyond the window frame. */
 166   margin-left: -15px;
 167   margin-right: -15px;
 168 }
 169
 170 #main-window[sizemode="maximized"] > #titlebar {
 171   -moz-appearance: -moz-window-titlebar-maximized;
 172 }
 173
 174 #titlebar-content {
 175   margin-left: 15px;
 176   margin-right: 15px;
 177 }
 178
 179 /* aesthetic - push the fx button off the top window border */
 180 @media not all and (-moz-windows-classic) {
 181   #main-window[sizemode="normal"] > #titlebar > #titlebar-content > #appmenu-button-container {
 182 %ifndef WINSTRIPE_AERO
 183     margin-top: 1px;
 184 %else
 185     margin-top: 2px;
 186 %endif
 187   }
 188 }
 189
 190 #titlebar-buttonbox {
 191   -moz-appearance: -moz-window-button-box;
 192   -moz-box-align: start;
 193 }
 194
 195 #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox {
 196   -moz-appearance: -moz-window-button-box-maximized;
 197 }
 198
 199 /* titlebar command buttons */
 200
 201 #titlebar-min {
 202   -moz-appearance: -moz-window-button-minimize;
 203 }
 204
 205 #titlebar-max {
 206   -moz-appearance: -moz-window-button-maximize;
 207 }
 208
 209 #main-window[sizemode="maximized"] > #titlebar > #titlebar-content > #titlebar-buttonbox > #titlebar-max {
 210   -moz-appearance: -moz-window-button-restore;
 211 }
 212
 213 #titlebar-close {
 214   -moz-appearance: -moz-window-button-close;
 215 }
 216
 217 @media not all and (-moz-windows-classic) {
 218   #titlebar-min {
 219     -moz-margin-end: 1px;
 220   }
 221
 222   #titlebar-max {
 223     -moz-margin-start: 1px;
 224     -moz-margin-end: 1px;
 225   }
 226
 227   #titlebar-close {
 228     -moz-margin-start: 1px;
 229     -moz-margin-end: 0;
 230   }
 231 }
 232
 233 @media all and (-moz-windows-classic) {
 234   #titlebar-close {
 235     -moz-margin-start: 2px !important;
 236   }
 237 }
 238
 239 /* ::::: bookmark buttons ::::: */
 240
 241 toolbarbutton.bookmark-item {
 242   margin: 0;
 243   padding: 2px 3px;
 244 }
 245
 246 toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
 247 toolbarbutton.bookmark-item[open="true"] {
 248   padding-top: 3px;
 249   padding-bottom: 1px;
 250   -moz-padding-start: 4px;
 251   -moz-padding-end: 2px;
 252 }
 253
 254 .bookmark-item > .toolbarbutton-icon {
 255   width: 16px;
 256   height: 16px;
 257 }
 258
 259 /* Prevent [mode="icons"] from hiding the label */
 260 .bookmark-item > .toolbarbutton-text {
 261   display: -moz-box !important;
 262 }
 263
 264 .bookmark-item > .toolbarbutton-menu-dropmarker {
 265   display: none;
 266 }
 267
 268 #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
 269   width: 16px;
 270   height: 16px;
 271   background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat;
 272 }
 273
 274 .bookmarks-toolbar-customize {
 275   max-width: 15em !important;
 276   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
 277 }
 278
 279 /* ::::: bookmark menus ::::: */
 280
 281 menu.bookmark-item,
 282 menuitem.bookmark-item {
 283   min-width: 0;
 284   max-width: 26em;
 285 }
 286
 287 .bookmark-item > .menu-iconic-left {
 288   margin-top: 0;
 289   margin-bottom: 0;
 290 }
 291
 292 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
 293   -moz-padding-start: 0px;
 294 }
 295
 296 /* ::::: bookmark items ::::: */
 297
 298 .bookmark-item  {
 299   list-style-image: url("chrome://global/skin/icons/folder-item.png");
 300   -moz-image-region: rect(0px, 16px, 16px, 0px);
 301 }
 302
 303 .bookmark-item[container] {
 304   -moz-image-region: rect(0px, 32px, 16px, 16px);
 305 }
 306
 307 .bookmark-item[container][open] {
 308   -moz-image-region: rect(16px, 32px, 32px, 16px);
 309 }
 310
 311 .bookmark-item[container][livemark] {
 312   list-style-image: url("chrome://browser/skin/livemark-folder.png");
 313   -moz-image-region: auto;
 314 }
 315
 316 .bookmark-item[container][livemark] .bookmark-item {
 317   list-style-image: url("chrome://browser/skin/livemark-item.png");
 318   -moz-image-region: auto;
 319 }
 320
 321 .bookmark-item[container][query] {
 322   list-style-image: url("chrome://browser/skin/places/query.png");
 323   -moz-image-region: auto;
 324 }
 325
 326 .bookmark-item[query][tagContainer] {
 327   list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
 328   -moz-image-region: auto;
 329 }
 330
 331 .bookmark-item[query][dayContainer] {
 332   list-style-image: url("chrome://browser/skin/places/calendar.png");
 333   -moz-image-region: auto;
 334 }
 335
 336 .bookmark-item[query][hostContainer] {
 337   list-style-image: url("chrome://global/skin/icons/folder-item.png");
 338   -moz-image-region: rect(0px, 32px, 16px, 16px);
 339 }
 340
 341 .bookmark-item[query][hostContainer][open] {
 342   list-style-image: url("chrome://global/skin/icons/folder-item.png");
 343   -moz-image-region: rect(16px, 32px, 32px, 16px);
 344 }
 345
 346 /* ::::: primary toolbar buttons ::::: */
 347
 348 .toolbarbutton-menubutton-button,
 349 .toolbarbutton-menubutton-dropmarker,
 350 .toolbarbutton-1 {
 351   -moz-appearance: none;
 352   padding: 1px 5px;
 353   background: rgba(151,152,153,.05)
 354               -moz-linear-gradient(rgba(251,252,253,.95), rgba(246,247,248,.47) 49%,
 355                                    rgba(231,232,233,.45) 51%, rgba(225,226,229,.3));
 356   background-clip: padding-box;
 357   -moz-border-radius: 4.5px;
 358   border: 1px solid;
 359   border-color: rgba(0,0,0,.12) rgba(0,0,0,.19) rgba(0,0,0,.38);
 360   -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
 361                    0 0 0 2px rgba(255,255,255,.1) inset,
 362                    0 1px 0 rgba(0,0,0,.15);
 363   color: black;
 364   text-shadow: 0 0 3px white;
 365 }
 366
 367 .toolbarbutton-menubutton-dropmarker,
 368 toolbar[iconsize="small"][mode="icons"] .toolbarbutton-menubutton-button,
 369 toolbar[iconsize="small"][mode="icons"] .toolbarbutton-1 {
 370   padding-left: 3px;
 371   padding-right: 3px;
 372 }
 373
 374 .toolbarbutton-1 {
 375   -moz-box-orient: vertical;
 376   list-style-image: url("chrome://browser/skin/Toolbar.png");
 377 }
 378
 379 toolbarbutton[type="menu-button"] {
 380   -moz-appearance: none;
 381   padding: 0;
 382   background: none !important;
 383   border: none !important;
 384   -moz-box-shadow: none !important;
 385 }
 386
 387 .toolbarbutton-1,
 388 toolbarbutton[type="menu-button"] {
 389   margin: 1px 3px;
 390 }
 391
 392 toolbar[iconsize="small"][mode="icons"] .toolbarbutton-1,
 393 toolbar[iconsize="small"][mode="icons"] toolbarbutton[type="menu-button"] {
 394   margin-left: 2px;
 395   margin-right: 2px;
 396 }
 397
 398 .toolbarbutton-menubutton-dropmarker {
 399   -moz-border-start-style: none;
 400 }
 401
 402 .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
 403 .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
 404   -moz-border-radius-topright: 0;
 405   -moz-border-radius-bottomright: 0;
 406 }
 407
 408 .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
 409 .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
 410   -moz-border-radius-topleft: 0;
 411   -moz-border-radius-bottomleft: 0;
 412 }
 413
 414 .toolbarbutton-menubutton-button[disabled="true"],
 415 .toolbarbutton-menubutton-dropmarker[disabled="true"],
 416 .toolbarbutton-1[disabled="true"] {
 417   opacity: .8;
 418 }
 419
 420 .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
 421 .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon {
 422   opacity: .5;
 423 }
 424
 425 .toolbarbutton-menubutton-button:not([disabled="true"]):not(:active):hover,
 426 toolbarbutton[type="menu-button"]:not([open="true"]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
 427 .toolbarbutton-1:not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
 428   background-color: hsla(190,60%,70%,.5);
 429   border-color: hsla(190,50%,65%,.8) hsla(190,50%,50%,.8) hsla(190,50%,40%,.8);
 430   -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
 431                    0 0 0 2px rgba(255,255,255,.1) inset,
 432                    0 1px 0 rgba(0,0,0,.1),
 433                    0 0 5px hsl(190,90%,80%);
 434   -moz-transition: background-color .4s ease-in,
 435                    border-color .3s ease-in,
 436                    -moz-box-shadow .3s ease-in;
 437 }
 438
 439 .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
 440 toolbarbutton[type="menu-button"]:hover:active > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
 441 toolbarbutton[type="menu-button"][open="true"] > .toolbarbutton-menubutton-dropmarker,
 442 .toolbarbutton-1:not([disabled="true"]):hover:active,
 443 .toolbarbutton-1[checked="true"],
 444 .toolbarbutton-1[open="true"] {
 445   background-color: transparent;
 446   border-color: rgba(0,0,0,.65) rgba(0,0,0,.55) rgba(0,0,0,.5);
 447   -moz-box-shadow: 0 0 9px rgba(0,0,0,.4) inset,
 448                    0 0 3px rgba(0,0,0,.4) inset,
 449                    0 1px 0 rgba(255,255,255,.4);
 450   text-shadow: none;
 451 }
 452
 453 .toolbarbutton-1[checked="true"]:not(:active):hover {
 454   background-color: rgba(90%,90%,90%,.4);
 455   -moz-transition: background-color .4s;
 456 }
 457
 458 .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 459 .toolbarbutton-1 > .toolbarbutton-icon {
 460   -moz-margin-end: 0;
 461   width: 18px;
 462   height: 18px;
 463 }
 464
 465 toolbar[iconsize="small"] .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 466 toolbar[iconsize="small"] .toolbarbutton-1 > .toolbarbutton-icon {
 467   margin: 1px;
 468   width: 16px;
 469   height: 16px;
 470 }
 471
 472 /* Default icons have a built-in glow, so they are 18*18px even in small mode,
 473    except for the large back icon, which is why the code below uses 'auto' rather
 474    than 18px. This will pick the correct size based on the image region. */
 475 :-moz-any(
 476     #back-button, #forward-button, #reload-button, #stop-button,
 477     #home-button, #print-button, #downloads-button, #history-button,
 478     #bookmarks-button, #bookmarks-menu-button, #new-tab-button,
 479     #new-window-button, #cut-button, #copy-button, #paste-button,
 480     #fullscreen-button) > .toolbarbutton-icon {
 481   margin: 0 !important;
 482   width: auto !important;
 483   height: auto !important;
 484 }
 485
 486 toolbar[mode="full"] .toolbarbutton-1,
 487 toolbar[mode="full"] .toolbarbutton-menubutton-button {
 488   min-width: 57px;
 489 }
 490
 491 #TabsToolbar > .toolbarbutton-1,
 492 #TabsToolbar > toolbarpaletteitem > .toolbarbutton-1,
 493 #TabsToolbar > #bookmarks-menu-button-container > #bookmarks-menu-button {
 494   -moz-appearance: toolbarbutton;
 495   margin: 0;
 496   padding: 0 3px;
 497   border: none !important;
 498   color: inherit !important;
 499   background: transparent !important;
 500   text-shadow: inherit !important;
 501   -moz-box-shadow: none !important;
 502 }
 503
 504 /* unified back/forward button */
 505
 506 #back-button {
 507   -moz-image-region: rect(0, 18px, 18px, 0);
 508   -moz-margin-end: 0;
 509 }
 510
 511 #forward-button {
 512   -moz-image-region: rect(0, 36px, 18px, 18px);
 513   border-left: none;
 514   -moz-margin-start: 0;
 515 }
 516
 517 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
 518 #forward-button:-moz-locale-dir(rtl) {
 519   -moz-transform: scaleX(-1);
 520 }
 521
 522 #back-button:-moz-locale-dir(ltr) {
 523   -moz-border-radius-topright: 0;
 524   -moz-border-radius-bottomright: 0;
 525 }
 526
 527 #back-button:-moz-locale-dir(rtl),
 528 #forward-button {
 529   -moz-border-radius-topleft: 0;
 530   -moz-border-radius-bottomleft: 0;
 531 }
 532
 533 toolbar:not([iconsize="small"])[mode="icons"] #back-button {
 534   -moz-border-radius: 100%;
 535   padding: 0;
 536   width: 30px;
 537   height: 30px;
 538   position: relative;
 539   z-index: 1;
 540   margin-top: -2px;
 541   margin-bottom: -2px;
 542   border: none;
 543   background-image: -moz-linear-gradient(rgba(251,252,253,.97), rgba(246,247,248,.5) 49%,
 544                                          rgba(231,232,233,.45) 51%, rgba(225,226,229,.2));
 545   -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
 546                    0 0 0 2px rgba(255,255,255,.1) inset,
 547                    0 0 0 1px rgba(0,0,0,.15),
 548                    0 1px 0 rgba(0,0,0,.4),
 549                    0 1px 1px rgba(0,0,0,.3),
 550                    1px 2px 1px rgba(0,0,0,.2);
 551   -moz-image-region: rect(18px, 20px, 38px, 0);
 552 }
 553
 554 toolbar:not([iconsize="small"])[mode="icons"] #back-button:not([disabled="true"]):not([checked="true"]):not(:active):hover {
 555   -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.3) inset,
 556                    0 0 0 2px rgba(255,255,255,.1) inset,
 557                    0 0 0 1px hsla(190,50%,40%,.3),
 558                    0 1px 0 rgba(0,0,0,.4),
 559                    0 1px 1px rgba(0,0,0,.3),
 560                    1px 2px 1px rgba(0,0,0,.2),
 561                    0 0 5px 1px hsl(190,90%,80%);
 562 }
 563
 564 toolbar:not([iconsize="small"])[mode="icons"] #back-button:not([disabled="true"]):hover:active {
 565   -moz-box-shadow: 0 0 9px rgba(0,0,0,.4) inset,
 566                    0 0 3px rgba(0,0,0,.4) inset,
 567                    0 0 0 1px rgba(0,0,0,.65),
 568                    0 2px 0 rgba(255,255,255,.4);
 569 }
 570
 571 toolbar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
 572 #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
 573   padding-top: 3px;
 574   padding-bottom: 5px;
 575 }
 576
 577 #navigator-toolbox[tabsontop="true"] > toolbar:not([iconsize="small"])[mode="icons"][currentset*="unified-back-forward-button"],
 578 #navigator-toolbox[tabsontop="true"] > #nav-bar:not([iconsize="small"])[mode="icons"]:not([currentset]) {
 579   padding-top: 5px;
 580 }
 581
 582 toolbar:not([iconsize="small"])[mode="icons"] #forward-button {
 583   /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
 584   mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask);
 585   -moz-margin-start: -6px;
 586   padding-left: 7px;
 587   padding-right: 3px;
 588 }
 589
 590 toolbar:not([iconsize="small"])[mode="icons"] #forward-button:not([disabled="true"]):not(:active):hover {
 591   /*mask: url(keyhole-forward-mask.svg#mask-hover);*/
 592   mask: url(chrome://browser/content/browser.xul#winstripe-keyhole-forward-mask-hover);
 593   /* Don't animate the box shadow, as the blur and spread radii affect the mask. */
 594   -moz-transition: background-color .4s ease-in;
 595 }
 596
 597 #back-forward-dropmarker {
 598   -moz-appearance: none;
 599   padding: 0;
 600   -moz-padding-end: 2px;
 601   -moz-margin-start: -3px;
 602   border: none;
 603   list-style-image: url(mainwindow-dropdown-arrow.png);
 604   -moz-image-region: rect(0, 13px, 11px, 0);
 605 }
 606
 607 #back-forward-dropmarker:not([disabled="true"]):hover:active,
 608 #back-forward-dropmarker[open="true"] {
 609   -moz-image-region: rect(0, 26px, 11px, 13px);
 610 }
 611
 612 #back-forward-dropmarker[disabled="true"] {
 613   opacity: .6;
 614 }
 615
 616 #back-forward-dropmarker > .toolbarbutton-icon {
 617   display: -moz-box;
 618   margin: 0;
 619 }
 620
 621 #back-forward-dropmarker > .toolbarbutton-menu-dropmarker {
 622   display: none;
 623 }
 624
 625 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 626 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
 627   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
 628 }
 629
 630 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
 631 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
 632   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
 633 }
 634
 635 /* stop button */
 636
 637 #stop-button {
 638   -moz-image-region: rect(0, 54px, 18px, 36px);
 639 }
 640
 641 /* reload button */
 642
 643 #reload-button {
 644   -moz-image-region: rect(0, 72px, 18px, 54px);
 645 }
 646
 647 /* home button */
 648
 649 #home-button.bookmark-item {
 650   list-style-image: url("chrome://browser/skin/Toolbar.png");
 651 }
 652 #home-button {
 653   -moz-image-region: rect(0, 90px, 18px, 72px);
 654 }
 655
 656 /* download manager button */
 657
 658 #downloads-button {
 659   -moz-image-region: rect(0, 108px, 18px, 90px);
 660 }
 661
 662 /* history sidebar button */
 663
 664 #history-button {
 665   -moz-image-region: rect(0, 126px, 18px, 108px);
 666 }
 667
 668 /* bookmark sidebar & menu buttons */
 669
 670 #bookmarks-button,
 671 #bookmarks-menu-button {
 672   -moz-image-region: rect(0, 144px, 18px, 126px);
 673 }
 674
 675 #bookmarks-menu-button.bookmark-item {
 676   list-style-image: url("chrome://browser/skin/Toolbar.png");
 677 }
 678
 679 #bookmarks-menu-button.toolbarbutton-1 {
 680   -moz-box-orient: horizontal;
 681 }
 682
 683 /* print button */
 684
 685 #print-button {
 686   -moz-image-region: rect(0, 162px, 18px, 144px);
 687 }
 688
 689 /* toolbar new tab button */
 690
 691 #new-tab-button {
 692   -moz-image-region: rect(0, 180px, 18px, 162px);
 693 }
 694
 695 /* new window button */
 696
 697 #new-window-button {
 698   -moz-image-region: rect(0, 198px, 18px, 180px);
 699 }
 700
 701 /* cut button */
 702
 703 #cut-button {
 704   -moz-image-region: rect(0, 216px, 18px, 198px);
 705 }
 706
 707 /* copy button */
 708
 709 #copy-button {
 710   -moz-image-region: rect(0, 234px, 18px, 216px);
 711 }
 712
 713 /* paste button */
 714
 715 #paste-button {
 716   -moz-image-region: rect(0, 252px, 18px, 234px);
 717 }
 718
 719 /* fullscreen button */
 720
 721 #fullscreen-button {
 722   -moz-image-region: rect(0, 270px, 18px, 252px);
 723 }
 724
 725 /* ::::: fullscreen window controls ::::: */
 726
 727 #minimize-button,
 728 #restore-button,
 729 #close-button {
 730   list-style-image: url("chrome://global/skin/icons/windowControls.png");
 731   padding: 0;
 732 }
 733
 734 #minimize-button {
 735   -moz-image-region: rect(0, 16px, 16px, 0);
 736 }
 737 #minimize-button:hover {
 738   -moz-image-region: rect(16px, 16px, 32px, 0);
 739 }
 740 #minimize-button:hover:active {
 741   -moz-image-region: rect(32px, 16px, 48px, 0);
 742 }
 743 #restore-button {
 744   -moz-image-region: rect(0, 32px, 16px, 16px);
 745 }
 746 #restore-button:hover {
 747   -moz-image-region: rect(16px, 32px, 32px, 16px);
 748 }
 749 #restore-button:hover:active {
 750   -moz-image-region: rect(32px, 32px, 48px, 16px);
 751 }
 752 #close-button {
 753   -moz-image-region: rect(0, 48px, 16px, 32px);
 754   -moz-appearance: none;
 755   border-style: none;
 756   margin: 2px;
 757 }
 758 #close-button:hover {
 759   -moz-image-region: rect(16px, 48px, 32px, 32px);
 760 }
 761 #close-button:hover:active {
 762   -moz-image-region: rect(32px, 48px, 48px, 32px);
 763 }
 764
 765 /* ::::: Location Bar ::::: */
 766
 767 #urlbar {
 768   width: 7em;
 769   min-width: 7em;
 770 }
 771
 772 #urlbar,
 773 .searchbar-textbox {
 774   -moz-appearance: none;
 775   margin: 1px 3px;
 776   padding: 2px;
 777   background-clip: padding-box;
 778   border: 1px solid ThreeDDarkShadow;
 779   -moz-border-radius: 4px;
 780   -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset,
 781                    0 1px 0 rgba(255,255,255,.4);
 782 }
 783
 784 @media all and (-moz-windows-default-theme) {
 785   #urlbar,
 786   .searchbar-textbox {
 787     @navbarTextboxCustomBorder@
 788   }
 789 }
 790
 791 #urlbar:-moz-lwtheme,
 792 .searchbar-textbox:-moz-lwtheme {
 793   background-color: rgba(255,255,255,.8);
 794   @navbarTextboxCustomBorder@
 795   color: black;
 796 }
 797
 798 /*
 799 #urlbar:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:-moz-placeholder,
 800 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:-moz-placeholder {
 801   color: #777;
 802 }
 803 */
 804
 805 #urlbar:-moz-lwtheme[focused="true"],
 806 .searchbar-textbox:-moz-lwtheme[focused="true"] {
 807   background-color: white;
 808 }
 809
 810 #urlbar-container {
 811   -moz-box-orient: horizontal;
 812   -moz-box-align: stretch;
 813 }
 814
 815 #urlbar-icons {
 816   height: 18px;
 817   -moz-box-align: center;
 818 }
 819
 820 .urlbar-icon {
 821   padding: 0 2px !important;
 822 }
 823
 824 .urlbar-icon:-moz-system-metric(touch-enabled) {
 825   -moz-margin-end: 1px !important;
 826   padding: 0 3px !important;
 827 }
 828
 829 #urlbar-search-splitter {
 830   min-width: 6px;
 831   -moz-margin-start: -3px;
 832   border: none;
 833   background: transparent;
 834 }
 835
 836 #urlbar-search-splitter + #urlbar-container > #urlbar ,
 837 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
 838   -moz-margin-start: 0;
 839 }
 840
 841 #wrapper-urlbar-container > #urlbar-container > #urlbar > .autocomplete-history-dropmarker {
 842   display: none;
 843 }
 844
 845 #urlbar > .autocomplete-textbox-container {
 846   direction: ltr;
 847   -moz-box-align: stretch;
 848 }
 849
 850 #urlbar-display {
 851   margin-top: -2px;
 852   margin-bottom: -2px;
 853   padding-top: 3px;
 854   padding-bottom: 2px;
 855   -moz-padding-end: 3px;
 856   color: GrayText;
 857   -moz-border-end: 1px solid #AAA;
 858   -moz-margin-end: 3px;
 859 }
 860
 861 /* identity box */
 862
 863 #identity-box {
 864   background-color: -moz-dialog;
 865   background-image: -moz-linear-gradient(rgba(255,255,255,.25), rgba(0,0,0,.15));
 866   color: -moz-dialogText;
 867   -moz-border-radius: 2px;
 868 }
 869
 870 #identity-box:hover {
 871   background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(50%,50%,50%,.2), rgba(0,0,0,.15));
 872 }
 873
 874 #identity-box[open="true"],
 875 #identity-box:hover:active {
 876   background-image: -moz-linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.1));
 877 }
 878
 879 #identity-box.verifiedDomain,
 880 #identity-box.verifiedIdentity {
 881   color: white;
 882   text-shadow: 0 1px 0 rgba(0,0,0,.25);
 883   -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.2) inset;
 884 }
 885
 886 #identity-box.verifiedDomain {
 887   background-color: hsl(219,45%,60%);
 888 }
 889
 890 #identity-box.verifiedIdentity {
 891   background-color: hsl(92,45%,52%);
 892 }
 893
 894 #identity-box:focus {
 895   outline: 1px dotted -moz-DialogText;
 896   outline-offset: -3px;
 897 }
 898
 899 #identity-box.verifiedDomain:focus ,
 900 #identity-box.verifiedIdentity:focus {
 901   outline-color: white;
 902 }
 903
 904 #identity-icon-labels {
 905   -moz-margin-start: 1px;
 906   -moz-margin-end: 3px;
 907   -moz-transform: translate(0, -1px);
 908 }
 909
 910 /* Location bar dropmarker */
 911
 912 #urlbar > .autocomplete-history-dropmarker {
 913   -moz-appearance: none;
 914   padding: 0 1px;
 915   background-color: transparent;
 916   border: none;
 917   width: auto;
 918   list-style-image: url(mainwindow-dropdown-arrow.png);
 919   -moz-image-region: rect(0, 13px, 11px, 0);
 920 }
 921
 922 #urlbar > .autocomplete-history-dropmarker:-moz-system-metric(touch-enabled) {
 923   min-width: .64cm;
 924 }
 925
 926 #urlbar > .autocomplete-history-dropmarker:hover:active,
 927 #urlbar > .autocomplete-history-dropmarker[open="true"] {
 928   -moz-image-region: rect(0, 26px, 11px, 13px);
 929 }
 930
 931 /* page proxy icon */
 932
 933 #page-proxy-favicon,
 934 #urlbar-throbber {
 935   width: 16px;
 936   height: 16px;
 937 }
 938
 939 #page-proxy-stack {
 940   width: 24px;
 941   height: 18px;
 942   padding: 1px 4px;
 943   background: url(urlbar-favicon-glow.png) center center no-repeat;
 944 }
 945
 946 #page-proxy-favicon:not([src]) {
 947   list-style-image: url("chrome://global/skin/icons/folder-item.png");
 948   -moz-image-region: rect(0px, 16px, 16px, 0px)
 949 }
 950
 951 #page-proxy-favicon[pageproxystate="invalid"] {
 952   -moz-image-region: rect(32px, 16px, 48px, 0px);
 953 }
 954
 955 #urlbar-throbber {
 956   list-style-image: url("chrome://browser/skin/places/searching_16.png");
 957 }
 958
 959 /* autocomplete */
 960
 961 #PopupAutoComplete,
 962 #PopupAutoCompleteRichResult {
 963   direction: ltr !important;
 964 }
 965
 966 #PopupAutoComplete:-moz-locale-dir(rtl) > tree > treerows {
 967   direction: rtl;
 968 }
 969
 970 #PopupAutoComplete .autocomplete-treebody {
 971   direction: ltr;
 972 }
 973
 974 #treecolAutoCompleteImage {
 975   max-width: 36px;
 976 }
 977
 978 .ac-result-type-bookmark,
 979 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
 980   list-style-image: url("chrome://browser/skin/places/editBookmark.png");
 981   -moz-image-region: rect(0px 16px 16px 0px);
 982   width: 16px;
 983   height: 16px;
 984 }
 985
 986 .ac-result-type-keyword,
 987 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
 988   list-style-image: url(chrome://global/skin/icons/Search-glass.png);
 989   -moz-image-region: rect(0px 32px 16px 16px);
 990   width: 16px;
 991   height: 16px;
 992 }
 993
 994 .ac-result-type-tag,
 995 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
 996   list-style-image: url("chrome://browser/skin/places/tag.png");
 997   width: 16px;
 998   height: 16px;
 999 }
1000
1001 .ac-comment {
1002   font-size: 1.15em;
1003 }
1004
1005 .ac-extra > .ac-comment {
1006   font-size: inherit;
1007 }
1008
1009 .ac-url-text {
1010   color: -moz-nativehyperlinktext;
1011 }
1012
1013 %ifndef WINSTRIPE_AERO
1014 .ac-url-text:-moz-system-metric(windows-default-theme) {
1015   color: #006600;
1016 }
1017 %endif
1018
1019 richlistitem[type="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1020   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1021 }
1022
1023 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1024   color: GrayText;
1025 }
1026
1027 .ac-comment[selected="true"], .ac-url-text[selected="true"] {
1028   color: inherit !important;
1029 }
1030
1031 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1032 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1033 {
1034   color: GrayText;
1035   font-size: smaller;
1036 }
1037
1038 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1039   border-top: 1px solid GrayText;
1040 }
1041
1042 /* go button */
1043
1044 #go-button {
1045   list-style-image: url("chrome://browser/skin/Go-arrow.png");
1046   -moz-image-region: rect(0px 16px 16px 0px);
1047 }
1048
1049 #go-button:hover {
1050   -moz-image-region: rect(16px 16px 32px 0px);
1051 }
1052
1053 /* star button */
1054
1055 #star-button {
1056   list-style-image: url("chrome://browser/skin/places/bookmark.png");
1057   -moz-image-region: rect(0px 16px 16px 0px);
1058 }
1059
1060 #star-button:hover {
1061   -moz-image-region: rect(0px 32px 16px 16px);
1062 }
1063
1064 #star-button:hover:active {
1065   -moz-image-region: rect(0px 48px 16px 32px);
1066 }
1067
1068 #star-button[starred="true"] {
1069   list-style-image: url("chrome://browser/skin/places/editBookmark.png");
1070 }
1071
1072 /* bookmarking panel */
1073
1074 #editBookmarkPanel {
1075   -moz-appearance: menupopup;
1076   color: MenuText;
1077   padding: 4px;
1078 }
1079
1080 #editBookmarkPanelStarIcon {
1081   list-style-image: url("chrome://browser/skin/places/starred48.png");
1082   width: 48px;
1083   height: 48px;
1084 }
1085
1086 #editBookmarkPanelStarIcon[unstarred] {
1087   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
1088 }
1089
1090 #editBookmarkPanelTitle {
1091   font-size: 130%;
1092 }
1093
1094 #editBookmarkPanelHeader,
1095 #editBookmarkPanelContent {
1096   margin-bottom: .5em;
1097 }
1098
1099 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
1100 #editBMPanel_folderTree {
1101   min-width: 27em;
1102 }
1103
1104 /* ::::: content area ::::: */
1105
1106 #sidebar {
1107   background-color: Window;
1108 }
1109
1110 #sidebar-title {
1111   -moz-padding-start: 0px;
1112 }
1113
1114 #status-bar {
1115   border-top: none;
1116 }
1117
1118 #security-button[level="high"],
1119 #security-button[level="low"] {
1120   list-style-image: url("chrome://browser/skin/Secure.png");
1121 }
1122
1123 #security-button[level="broken"] {
1124   list-style-image: url("chrome://browser/skin/Security-broken.png");
1125 }
1126
1127 #page-report-button {
1128   width: 20px;
1129   list-style-image: url("chrome://browser/skin/Info.png");
1130 }
1131
1132 /* ::::: throbber ::::: */
1133
1134 #navigator-throbber {
1135   width: 16px;
1136   min-height: 16px;
1137   margin: 0 3px;
1138 }
1139
1140 #navigator-throbber[busy="true"] {
1141   list-style-image: url("chrome://global/skin/icons/loading_16.png");
1142 }
1143
1144 #navigator-throbber,
1145 #wrapper-navigator-throbber > #navigator-throbber {
1146   list-style-image: url("chrome://global/skin/icons/notloading_16.png");
1147 }
1148
1149 /* Tabstrip */
1150 #TabsToolbar {
1151   min-height: 0;
1152   padding: 0;
1153 }
1154
1155 #TabsToolbar:not(:-moz-lwtheme),
1156 #TabsToolbar[tabsontop="false"] {
1157   -moz-box-shadow: 0 -1px ThreeDShadow inset;
1158   background-image: -moz-linear-gradient(transparent, transparent 10%,
1159                                          rgba(0,0,0,.03) 50%, rgba(0,0,0,.1) 90%, rgba(0,0,0,.2));
1160 }
1161
1162 .tabbrowser-tabs:-moz-system-metric(touch-enabled) {
1163   min-height: .73cm;
1164 }
1165
1166 .tabbrowser-tabs:not([overflow="true"]) {
1167   -moz-margin-start: 3px;
1168 }
1169
1170 /* Tabs */
1171 .tabbrowser-tab,
1172 .tabs-newtab-button {
1173   -moz-appearance: none;
1174   background: -moz-linear-gradient(hsla(0,0%,50%,.1), hsla(0,0%,37%,.1) 50%);
1175   background-position: -5px -2px;
1176   background-repeat: no-repeat;
1177   background-size: 200%;
1178   margin: 0;
1179   padding: 0;
1180   -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 / 4px 5px 3px 6px;
1181   -moz-border-radius: 10px 8px 0 0;
1182 }
1183
1184 .tabbrowser-tab:hover,
1185 .tabs-newtab-button:hover {
1186   background-image: -moz-linear-gradient(hsla(0,0%,100%,.4), hsla(0,0%,75%,.4) 50%);
1187 }
1188
1189 .tabbrowser-tab[selected="true"] {
1190   background-image: -moz-linear-gradient(rgba(255,255,255,.7), @toolbarHighlight@ 30%),
1191                     -moz-linear-gradient(-moz-dialog, -moz-dialog);
1192 }
1193
1194 .tabbrowser-tab:-moz-lwtheme {
1195   color: inherit;
1196 }
1197
1198 .tabbrowser-tab[selected="true"]:-moz-lwtheme {
1199   background-image: -moz-linear-gradient(rgba(255,255,255,.7), @toolbarHighlight@ 30%);
1200 }
1201
1202 .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
1203 .tabs-newtab-button:-moz-lwtheme-brighttext {
1204   background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 50%);
1205 }
1206
1207 .tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover,
1208 .tabs-newtab-button:-moz-lwtheme-brighttext:hover {
1209   background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 50%);
1210 }
1211
1212 .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]),
1213 .tabs-newtab-button:-moz-lwtheme-darktext {
1214   background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
1215 }
1216
1217 .tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover,
1218 .tabs-newtab-button:-moz-lwtheme-darktext:hover {
1219   background-image: -moz-linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 50%);
1220 }
1221
1222 .tabbrowser-tab[busy] > .tab-icon-image {
1223   list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
1224   -moz-image-region: rect(0, 16px, 16px, 0);
1225 }
1226 .tabbrowser-tab[busy][stalled] > .tab-icon-image {
1227   list-style-image: url("chrome://browser/skin/tabbrowser/progress-pulsing.png") !important;
1228 }
1229 .tabbrowser-tab[busy][progress="1"] > .tab-icon-image {
1230   -moz-image-region: rect(0, 32px, 16px, 16px);
1231 }
1232 .tabbrowser-tab[busy][progress="2"] > .tab-icon-image {
1233   -moz-image-region: rect(0, 48px, 16px, 32px);
1234 }
1235 .tabbrowser-tab[busy][progress="3"] > .tab-icon-image {
1236   -moz-image-region: rect(0, 64px, 16px, 48px);
1237 }
1238 .tabbrowser-tab[busy][progress="4"] > .tab-icon-image {
1239   -moz-image-region: rect(0, 80px, 16px, 64px);
1240 }
1241 .tabbrowser-tab[busy][progress="5"] > .tab-icon-image {
1242   -moz-image-region: rect(0, 96px, 16px, 80px);
1243 }
1244 .tabbrowser-tab[busy][progress="6"] > .tab-icon-image {
1245   -moz-image-region: rect(0, 112px, 16px, 96px);
1246 }
1247 .tabbrowser-tab[busy][progress="7"] > .tab-icon-image {
1248   -moz-image-region: rect(0, 128px, 16px, 112px);
1249 }
1250 .tabbrowser-tab[busy][progress="8"] > .tab-icon-image {
1251   -moz-image-region: rect(0, 144px, 16px, 128px);
1252 }
1253
1254 .tab-icon-image {
1255   width: 16px;
1256   height: 16px;
1257   list-style-image: url("chrome://global/skin/icons/folder-item.png");
1258   -moz-image-region: rect(0px, 16px, 16px, 0px);
1259 }
1260
1261 .tabbrowser-tab:not([pinned]) > .tab-icon-image {
1262   -moz-margin-end: 3px;
1263 }
1264
1265 /* tabbrowser-tab focus ring */
1266 .tabbrowser-tab > .tab-text {
1267   border: 1px dotted transparent;
1268 }
1269
1270 .tabbrowser-tab:focus > .tab-text {
1271   border: 1px dotted -moz-DialogText;
1272 }
1273
1274 /* Tab DnD indicator */
1275 .tab-drop-indicator {
1276   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
1277 }
1278
1279 /* Tab close button */
1280 .tab-close-button {
1281   -moz-appearance: none;
1282   -moz-image-region: rect(0, 64px, 16px, 48px);
1283   border: none;
1284   padding: 0px;
1285   list-style-image: url("chrome://global/skin/icons/close.png");
1286 }
1287
1288 .tab-close-button:-moz-system-metric(touch-enabled) {
1289   -moz-transform: scale(1.2);
1290 }
1291
1292 .tab-close-button:hover,
1293 .tabbrowser-tab[selected="true"] > .tab-close-button:hover {
1294   -moz-image-region: rect(0, 32px, 16px, 16px);
1295 }
1296
1297 .tab-close-button:hover:active,
1298 .tabbrowser-tab[selected="true"] > .tab-close-button:hover:active {
1299   -moz-image-region: rect(0, 48px, 16px, 32px);
1300 }
1301
1302 .tabbrowser-tab[selected="true"] > .tab-close-button {
1303   -moz-image-region: rect(0, 16px, 16px, 0);
1304   /* Make this button focusable so clicking on it will not focus the tab while
1305      it's getting closed */
1306   -moz-user-focus: normal;
1307 }
1308
1309 .tab-close-button:focus {
1310   outline: none !important;
1311 }
1312
1313 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
1314
1315 @media all and (-moz-touch-enabled) {
1316   .tabbrowser-arrowscrollbox > .scrollbutton-up,
1317   .tabbrowser-arrowscrollbox > .scrollbutton-down,
1318   #TabsToolbar > toolbarbutton,
1319   #TabsToolbar > toolbarpaletteitem > toolbarbutton,
1320   #TabsToolbar > #bookmarks-menu-button-container > #bookmarks-menu-button {
1321     min-width: .81cm;
1322   }
1323
1324   .tabs-newtab-button {
1325     min-width: 1cm;
1326   }
1327 }
1328
1329 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1330 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1331   list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
1332   -moz-image-region: rect(0, 15px, 17px, 0);
1333   margin: 0;
1334   padding-top: 0;
1335   padding-bottom: 0;
1336 }
1337
1338 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled="true"],
1339 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled="true"] {
1340   opacity: .4;
1341 }
1342
1343 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled="true"]):hover:active,
1344 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled="true"]):hover:active {
1345   -moz-image-region: rect(0, 30px, 17px, 15px);
1346 }
1347
1348 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1349 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) > .toolbarbutton-icon {
1350   -moz-transform: scaleX(-1);
1351 }
1352
1353 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1354   -moz-transition: 1s background-color ease-out;
1355 }
1356
1357 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
1358   background-color: Highlight;
1359   -moz-transition: none;
1360 }
1361
1362 .tabs-newtab-button > .toolbarbutton-icon,
1363 #TabsToolbar > #new-tab-button > .toolbarbutton-icon,
1364 #TabsToolbar > toolbarpaletteitem > #new-tab-button > .toolbarbutton-icon,
1365 #alltabs-button > .toolbarbutton-icon {
1366   width: auto;
1367   height: auto;
1368 }
1369
1370 .tabs-newtab-button > .toolbarbutton-icon {
1371   margin-top: -1px;
1372   margin-bottom: -1px;
1373 }
1374
1375 .tabs-newtab-button,
1376 #TabsToolbar > #new-tab-button,
1377 #TabsToolbar > toolbarpaletteitem > #new-tab-button {
1378   list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
1379   -moz-image-region: rect(0, 16px, 18px, 0);
1380 }
1381
1382 .tabs-newtab-button {
1383   width: 31px;
1384 }
1385
1386 .tabs-newtab-button:hover:active,
1387 #TabsToolbar > #new-tab-button:hover:active {
1388   -moz-image-region: rect(0, 32px, 18px, 16px);
1389 }
1390
1391 #alltabs-button {
1392   list-style-image: url("chrome://browser/skin/tabbrowser/alltabs.png");
1393   -moz-image-region: rect(0, 14px, 16px, 0);
1394 }
1395
1396 #alltabs-button:hover:active {
1397   -moz-image-region: rect(0, 28px, 16px, 14px);
1398 }
1399
1400 #alltabs-button[type="menu"] {
1401   list-style-image: url("chrome://browser/skin/mainwindow-dropdown-arrow.png");
1402   -moz-image-region: rect(0, 13px, 11px, 0);
1403 }
1404
1405 #alltabs-button[type="menu"] > .toolbarbutton-icon {
1406   margin: 3px 0;
1407 }
1408
1409 #alltabs-button[type="menu"] > .toolbarbutton-menu-dropmarker {
1410   display: none;
1411 }
1412
1413 #alltabs-button[type="menu"]:hover:active,
1414 #alltabs-button[type="menu"][open="true"] {
1415   -moz-image-region: rect(0, 26px, 11px, 13px);
1416 }
1417
1418 /* All tabs menupopup */
1419 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
1420   list-style-image: url("chrome://global/skin/icons/folder-item.png");
1421   -moz-image-region: rect(0px, 16px, 16px, 0px);
1422 }
1423
1424 .alltabs-item[selected="true"] {
1425   font-weight: bold;
1426 }
1427
1428 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
1429   list-style-image: url("chrome://global/skin/icons/loading_16.png");
1430 }
1431
1432 /* Tabstrip close button */
1433 .tabs-closebutton {
1434   -moz-appearance: none;
1435   list-style-image: url("chrome://global/skin/icons/close.png");
1436   -moz-image-region: rect(0, 16px, 16px, 0);
1437   padding: 4px 2px;
1438   margin: 0px;
1439   border: none;
1440 }
1441
1442 .tabs-closebutton > .toolbarbutton-icon {
1443   -moz-margin-end: 0px !important;
1444   -moz-padding-end: 2px !important;
1445   -moz-padding-start: 2px !important;
1446 }
1447
1448 .tabs-closebutton:hover {
1449   -moz-image-region: rect(0, 32px, 16px, 16px);
1450 }
1451
1452 .tabs-closebutton:hover:active {
1453   -moz-image-region: rect(0, 48px, 16px, 32px);
1454 }
1455
1456 toolbarbutton.chevron {
1457   list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
1458 }
1459
1460 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1461   -moz-transform: scaleX(-1);
1462 }
1463
1464 toolbarbutton.chevron > .toolbarbutton-text,
1465 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
1466   display: none;
1467 }
1468
1469 toolbarbutton.chevron > .toolbarbutton-icon {
1470   margin: 0;
1471 }
1472
1473 toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
1474   display: -moz-box; /* display chevron icon in text mode */
1475 }
1476
1477 #sidebar-throbber[loading="true"] {
1478   list-style-image: url("chrome://global/skin/icons/loading_16.png");
1479   -moz-margin-end: 4px;
1480 }
1481
1482 /* Feed icon */
1483 #feed-button,
1484 #feed-button > .button-box,
1485 #feed-button:hover:active > .button-box {
1486   padding: 0px;
1487   margin: 0px;
1488   border: 0px;
1489   background-color: transparent;
1490 }
1491
1492 #feed-button {
1493   -moz-appearance: none;
1494   min-width: 0px;
1495   list-style-image: url("chrome://browser/skin/feeds/feed-icons-16.png");
1496   -moz-image-region: rect(0px 16px 16px 0px);
1497 }
1498
1499 #feed-button:hover {
1500   -moz-image-region: rect(0px 32px 16px 16px);
1501 }
1502
1503 #feed-button[open="true"],
1504 #feed-button:hover:active {
1505   -moz-image-region: rect(0px 48px 16px 32px);
1506 }
1507
1508 /* ::::: About Popup Blocking dialog ::::: */
1509 #pageReportFirstTime statusbarpanel.statusbar-resizerpanel {
1510   visibility: collapse;
1511 }
1512
1513 #checkForUpdates[loading="true"] {
1514   list-style-image: url("chrome://global/skin/icons/loading_16.png");
1515 }
1516
1517 /* Bookmarks toolbar */
1518 #PlacesToolbarDropIndicator {
1519   list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
1520 }
1521
1522 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
1523   -moz-appearance: none;
1524   background: Highlight !important;
1525   color: HighlightText !important;
1526 }
1527
1528 /* rules for menupopup drop indicators */
1529 .menupopup-drop-indicator-bar {
1530   position: relative;
1531   /* these two margins must together compensate the indicator's height */
1532   margin-top: -1px;
1533   margin-bottom: -1px;
1534 }
1535
1536 .menupopup-drop-indicator {
1537   list-style-image: none;
1538   height: 2px;
1539   -moz-margin-end: -4em;
1540   background-color: Highlight;
1541 }
1542
1543 /* ::::: Identity Indicator Styling ::::: */
1544
1545 /* Popup Icons */
1546 #identity-popup-icon {
1547   height: 64px;
1548   width: 64px;
1549   padding: 0;
1550   list-style-image: url("chrome://browser/skin/identity.png");
1551   -moz-image-region: rect(0px, 64px, 64px, 0px);
1552 }
1553
1554 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
1555   -moz-image-region: rect(64px, 64px, 128px, 0px);
1556 }
1557
1558 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
1559   -moz-image-region: rect(128px, 64px, 192px, 0px);
1560 }
1561
1562 /* Popup Body Text */
1563 .identity-popup-description {
1564   white-space: pre-wrap;
1565   -moz-padding-start: 15px;
1566   margin: 2px 0 4px;
1567 }
1568
1569 .identity-popup-label {
1570   white-space: pre-wrap;
1571   -moz-padding-start: 15px;
1572   margin: 0;
1573 }
1574
1575 #identity-popup-content-host ,
1576 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
1577   font-size: 1.2em;
1578 }
1579
1580 #identity-popup-content-host {
1581   margin-top: 3px;
1582   margin-bottom: 5px;
1583   font-weight: bold;
1584   max-width: 300px;
1585 }
1586
1587 #identity-popup-content-owner {
1588   margin-top: 4px;
1589   margin-bottom: 0 !important;
1590   font-weight: bold;
1591   max-width: 300px;
1592 }
1593
1594 .verifiedDomain > #identity-popup-content-owner {
1595   font-weight: normal;
1596 }
1597
1598 #identity-popup-content-verifier {
1599   margin: 4px 0 2px;
1600 }
1601
1602 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
1603 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
1604   margin-top: 10px;
1605   -moz-margin-start: -24px;
1606 }
1607
1608 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
1609 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
1610   list-style-image: url("chrome://browser/skin/Secure24.png");
1611 }
1612
1613 #identity-popup-more-info-button {
1614   margin-top: 6px;
1615   margin-bottom: 0;
1616   -moz-margin-end: 0;
1617 }
1618
1619 /* Popup Bounding Box */
1620 #identity-popup,
1621 #notification-popup {
1622   -moz-appearance: menupopup;
1623   color: MenuText;
1624 }
1625
1626 /* Notification popup */
1627 #notification-popup {
1628   padding: 10px;
1629   margin-top: 3px;
1630 }
1631
1632 .popup-notification-icon {
1633   width: 64px;
1634   height: 64px;
1635   -moz-margin-end: 10px;
1636 }
1637
1638 .popup-notification-icon[popupid="geolocation"] {
1639   list-style-image: url(chrome://browser/skin/Geolocation-64.png);
1640 }
1641
1642 .popup-notification-icon[popupid="xpinstall-disabled"],
1643 .popup-notification-icon[popupid="addon-install-blocked"],
1644 .popup-notification-icon[popupid="addon-install-failed"],
1645 .popup-notification-icon[popupid="addon-install-complete"] {
1646   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
1647   width: 32px;
1648   height: 32px;
1649 }
1650
1651 /* Notification icon box */
1652 #notification-popup-box {
1653   margin: 0 3px;
1654 }
1655
1656 .notification-anchor-icon {
1657   width: 16px;
1658   height: 16px;
1659 }
1660
1661 #geo-notification-icon {
1662   list-style-image: url(chrome://browser/skin/Geolocation-16.png);
1663 }
1664
1665 #addons-notification-icon {
1666   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
1667 }
1668
1669 #identity-popup-container {
1670   min-width: 280px;
1671   padding: 9px;
1672 }
1673
1674 #download-monitor {
1675   list-style-image: url("chrome://browser/skin/Toolbar.png");
1676   -moz-image-region: rect(0, 108px, 18px, 90px);
1677 }
1678
1679 /* Bookmarks roots menu-items */
1680 #bookmarksToolbarFolderMenu,
1681 #BMB_bookmarksToolbarFolderMenu {
1682   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
1683   -moz-image-region: auto;
1684 }
1685
1686 #BMB_unsortedBookmarksFolderMenu {
1687   list-style-image: url("chrome://browser/skin/places/unsortedBookmarks.png");
1688   -moz-image-region: auto;
1689 }
1690
1691 /* ::::: Keyboard UI Panel ::::: */
1692
1693 .KUI-panel {
1694   -moz-appearance: none;
1695   background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
1696   color: white;
1697   border-style: none;
1698   -moz-border-radius: 20px;
1699 }
1700
1701 .KUI-panel[level="top"] {
1702   background-color: rgba(27%,27%,27%,.65);
1703 }
1704
1705 .KUI-panel-closebutton {
1706   list-style-image: url(KUI-close.png);
1707   -moz-appearance: none;
1708   border: none;
1709   padding: 0;
1710   width: 24px;
1711   height: 24px;
1712 }
1713
1714 .KUI-panel-closebutton:not(:hover) {
1715   opacity: .6;
1716 }
1717
1718 .KUI-panel-closebutton > .toolbarbutton-icon {
1719   margin: 0;
1720 }
1721
1722 /* ::::: Ctrl-Tab and All Tabs Panels ::::: */
1723
1724 /* Ctrl-Tab */
1725
1726 #ctrlTab-panel {
1727   padding: 20px 10px 10px;
1728   font-weight: bold;
1729   text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 3px rgb(27%,27%,27%);
1730 }
1731
1732 .ctrlTab-favicon[src] {
1733   background-color: white;
1734   width: 20px;
1735   height: 20px;
1736   padding: 2px;
1737 }
1738
1739 .ctrlTab-preview-inner > .tabPreview-canvas {
1740   -moz-box-shadow: 1px 1px 3px rgb(12%,12%,12%);
1741 }
1742
1743 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
1744   margin-bottom: 2px;
1745 }
1746
1747 .ctrlTab-preview-inner {
1748   padding-bottom: 10px;
1749 }
1750
1751 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
1752   padding: 10px;
1753   background-color: rgba(255,255,255,.2);
1754   -moz-border-radius: .5em;
1755 }
1756
1757 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
1758   color: white;
1759   background-color: rgba(0,0,0,.6);
1760   text-shadow: none;
1761   padding: 8px;
1762   border: 2px solid white;
1763   -moz-border-radius: .5em;
1764 }
1765
1766 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
1767   margin: -10px -10px 0;
1768 }
1769
1770 #ctrlTab-showAll {
1771   margin-top: .5em;
1772 }
1773
1774 /* All Tabs */
1775
1776 #allTabs-panel {
1777   padding-bottom: 10px;
1778   -moz-appearance: none;
1779   border: none;
1780   background: -moz-dialog;
1781   color: -moz-dialogText;
1782 }
1783
1784 #allTabs-meta {
1785   margin: 10px;
1786 }
1787
1788 #allTabs-filter {
1789   -moz-margin-start: 24px;
1790   -moz-margin-end: 0;
1791 }
1792
1793 #allTabs-tab-close-button > .toolbarbutton-icon {
1794   margin: 0;
1795 }
1796
1797 .allTabs-favicon[src] {
1798   background-color: -moz-dialog;
1799   width: 22px;
1800   height: 22px;
1801   padding-top: 1px;
1802   padding-bottom: 5px;
1803   -moz-padding-start: 1px;
1804   -moz-padding-end: 5px;
1805   margin-top: -2px;
1806   -moz-margin-start: -2px;
1807   -moz-border-radius-bottomright: 4px;
1808 }
1809
1810 .allTabs-favicon[src]:-moz-locale-dir(rtl) {
1811   -moz-border-radius-bottomright: 0;
1812   -moz-border-radius-bottomleft: 4px;
1813 }
1814
1815 .allTabs-preview-inner > .tabPreview-canvas {
1816   background-color: rgb(60%,60%,60%);
1817   -moz-box-shadow: 0 0 2px ThreeDShadow;
1818 }
1819
1820 .allTabs-preview:not(:hover):not([closebuttonhover]) > html|canvas {
1821   opacity: .8;
1822 }
1823
1824 .allTabs-preview:focus > * > .allTabs-preview-inner {
1825   outline: 1px dotted -moz-dialogText;
1826 }
1827
1828 /* Inspector / Highlighter */
1829
1830 #highlighter-panel {
1831   -moz-appearance: none;
1832   -moz-window-shadow: none;
1833 }
1834
1835 listitem.style-selector {
1836   background-color: DarkGray;
1837   color: white;
1838 }
1839
1840 listitem.style-section {
1841   background-color: LightGray;
1842   color: black;
1843   font-weight: bold;
1844 }
1845
1846 panel[dimmed="true"] {
1847   opacity: 0.5;
1848 }
1849