browser/themes/pinstripe/browser.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 @import url("chrome://global/skin/");
   6
   7 %include shared.inc
   8 %filter substitution
   9 %define forwardTransitionLength 150ms
  10 %define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
  11 %define conditionalForwardWithUrlbarWidth 27
  12
  13 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
  14 @namespace html url("http://www.w3.org/1999/xhtml");
  15
  16 #urlbar:-moz-lwtheme:not([focused="true"]),
  17 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
  18   opacity: .9;
  19 }
  20
  21 #navigator-toolbox toolbarbutton:-moz-lwtheme {
  22   color: inherit;
  23   text-shadow: inherit;
  24 }
  25
  26 #PersonalToolbar:-moz-lwtheme,
  27 #nav-bar:-moz-lwtheme {
  28   -moz-appearance: none !important;
  29   background: none !important;
  30   /* Switching to a lightweight theme shouldn't move the content area,
  31      so avoid changing border widths here. */
  32   border-color: transparent !important;
  33 }
  34
  35 #main-window {
  36   -moz-appearance: none;
  37   background-color: #eeeeee;
  38 }
  39
  40 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
  41   border-top: 1px solid rgba(0,0,0,0.65);
  42 }
  43
  44 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
  45   -moz-box-align: center;
  46   padding: 2px 4px;
  47 }
  48
  49 /* Because of -moz-box-align: center above, separators will be invisible unless
  50    we set their min-height. See bug 583510 for more information. */
  51 toolbarseparator {
  52   min-height: 22px;
  53 }
  54
  55 /* We need more height when toolbar buttons show both icon and text. */
  56 toolbar[mode="full"] toolbarseparator {
  57   min-height: 36px;
  58 }
  59
  60 #nav-bar {
  61   padding-bottom: 4px !important;
  62 }
  63
  64 #PersonalToolbar {
  65   -moz-appearance: none;
  66   margin-top: -2px; /* overlay the bottom border of the toolbar above us */
  67   padding-top: 1px !important;
  68   background-color: -moz-mac-chrome-active;
  69   border-bottom: 1px solid rgba(0, 0, 0, 0.57);
  70 }
  71
  72 #nav-bar[tabsontop=true],
  73 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar,
  74 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar {
  75   -moz-appearance: none;
  76   margin-top: 0; /* don't overlay the bottom border of the tabs toolbar */
  77   padding-top: 4px !important;
  78   border-bottom: 1px solid rgba(0, 0, 0, 0.57);
  79   background-color: -moz-mac-chrome-active;
  80   background-image: -moz-linear-gradient(rgba(255,255,255,.43), rgba(255,255,255,0)) !important; /* override lwtheme style */
  81   background-origin: border-box !important;
  82 }
  83
  84 #PersonalToolbar:-moz-lwtheme,
  85 #nav-bar[tabsontop=true]:-moz-lwtheme,
  86 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:-moz-lwtheme,
  87 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:-moz-lwtheme {
  88   background-color: transparent;
  89   border-bottom-color: transparent;
  90 }
  91
  92 #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive,
  93 #nav-bar[tabsontop=true]:not(:-moz-lwtheme):-moz-window-inactive,
  94 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + toolbar:not(:-moz-lwtheme):-moz-window-inactive,
  95 #nav-bar[tabsontop=true][collapsed=true]:not([customizing]) + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme):-moz-window-inactive {
  96   background-color: -moz-mac-chrome-inactive;
  97   border-bottom-color: rgba(0, 0, 0, 0.32);
  98 }
  99
 100 /* ----- BOOKMARK TOOLBAR ----- */
 101
 102 #personal-bookmarks {
 103   min-height: 17px; /* 16px button height + 1px margin-bottom */
 104 }
 105
 106 toolbarbutton.chevron {
 107   list-style-image: url("chrome://global/skin/icons/chevron.png");
 108   margin: 1px 0 0;
 109   padding: 0;
 110 }
 111
 112 toolbarbutton.chevron > .toolbarbutton-text {
 113   display: none;
 114 }
 115
 116 toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
 117   display: -moz-box; /* display chevron icon in text mode */
 118 }
 119
 120 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon {
 121   transform: scaleX(-1);
 122 }
 123
 124 @media (min-resolution: 2dppx) {
 125   toolbarbutton.chevron {
 126     list-style-image: url("chrome://global/skin/icons/chevron@2x.png");
 127   }
 128
 129   toolbarbutton.chevron > .toolbarbutton-icon {
 130     width: 13px;
 131   }
 132 }
 133
 134 /* ----- BOOKMARK BUTTONS ----- */
 135
 136 toolbarbutton.bookmark-item {
 137   font-weight: bold;
 138   color: #222;
 139   border: 0;
 140   border-radius: 10000px;
 141   padding: 1px 8px;
 142   margin: 0 0 1px;
 143 }
 144
 145 .bookmark-item > .toolbarbutton-menu-dropmarker {
 146   list-style-image: url("chrome://browser/skin/places/folderDropArrow.png");
 147   -moz-image-region: rect(0, 7px, 5px, 0);
 148   margin-top: 1px;
 149   -moz-margin-start: 3px;
 150   -moz-margin-end: -2px;
 151 }
 152
 153 @media (min-resolution: 2dppx) {
 154   .bookmark-item > .toolbarbutton-menu-dropmarker {
 155     list-style-image: url("chrome://browser/skin/places/folderDropArrow@2x.png");
 156     -moz-image-region: rect(0, 14px, 10px, 0);
 157   }
 158
 159   .bookmark-item > .toolbarbutton-menu-dropmarker > .dropmarker-icon {
 160     width: 7px;
 161   }
 162 }
 163
 164 .bookmark-item > .toolbarbutton-text {
 165   display: -moz-box !important; /* prevent [mode="icons"] from hiding the label */
 166   margin: 0 !important;
 167 }
 168
 169 toolbarbutton.bookmark-item:hover,
 170 toolbarbutton.bookmark-item[open="true"] {
 171   background-color: rgba(0, 0, 0, .205);
 172 }
 173
 174 toolbarbutton.bookmark-item:hover,
 175 toolbarbutton.bookmark-item[open="true"] {
 176   color: #FFF !important;
 177   text-shadow: 0 1px rgba(0, 0, 0, .4) !important;
 178 }
 179
 180 .bookmark-item:hover > .toolbarbutton-menu-dropmarker,
 181 .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
 182   -moz-image-region: rect(5px, 7px, 10px, 0);
 183 }
 184
 185 @media (min-resolution: 2dppx) {
 186   .bookmark-item:hover > .toolbarbutton-menu-dropmarker,
 187   .bookmark-item[open="true"] > .toolbarbutton-menu-dropmarker {
 188     -moz-image-region: rect(10px, 14px, 20px, 0);
 189   }
 190 }
 191
 192 toolbarbutton.bookmark-item:active:hover,
 193 toolbarbutton.bookmark-item[open="true"] {
 194   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
 195   background-color: rgba(0, 0, 0, .5);
 196 }
 197
 198 toolbarbutton.bookmark-item > menupopup {
 199   margin-top: 2px;
 200   -moz-margin-start: 3px;
 201 }
 202
 203 .bookmark-item > .toolbarbutton-icon {
 204   width: 16px;
 205   min-height: 16px;
 206   max-height: 16px;
 207 }
 208
 209 .bookmark-item > .toolbarbutton-icon[label]:not([label=""]),
 210 .bookmark-item > .toolbarbutton-icon[type="menu"] {
 211   -moz-margin-end: 5px;
 212 }
 213
 214 .bookmark-item[container] {
 215   list-style-image: url("chrome://global/skin/tree/folder.png");
 216 }
 217
 218 .bookmark-item[container][livemark] {
 219   list-style-image: url("chrome://browser/skin/page-livemarks.png");
 220 }
 221
 222 .bookmark-item[container][livemark] .bookmark-item {
 223   list-style-image: url("chrome://browser/skin/places/livemark-item.png");
 224   -moz-image-region: rect(0px, 16px, 16px, 0px);
 225 }
 226
 227 .bookmark-item[container][livemark] .bookmark-item[visited] {
 228   -moz-image-region: rect(0px, 32px, 16px, 16px);
 229 }
 230
 231 .bookmark-item[container][query] {
 232   list-style-image: url("chrome://browser/skin/places/query.png");
 233 }
 234
 235 .bookmark-item[query][tagContainer] {
 236   list-style-image: url("chrome://browser/skin/places/tag.png");
 237 }
 238
 239 .bookmark-item[query][dayContainer] {
 240   list-style-image: url("chrome://browser/skin/places/history.png");
 241 }
 242
 243 .bookmark-item[query][hostContainer] {
 244   list-style-image: url("chrome://global/skin/tree/folder.png");
 245 }
 246
 247 .bookmark-item[query][hostContainer][open] {
 248   list-style-image: url("chrome://global/skin/tree/folder.png");
 249 }
 250
 251 @media (min-resolution: 2dppx) {
 252   .bookmark-item[container] {
 253     list-style-image: url("chrome://global/skin/tree/folder@2x.png");
 254   }
 255
 256   .bookmark-item[container][livemark] {
 257     list-style-image: url("chrome://browser/skin/page-livemarks@2x.png");
 258   }
 259
 260   .bookmark-item[container][livemark] .bookmark-item {
 261     list-style-image: url("chrome://browser/skin/places/livemark-item.png");
 262   }
 263
 264   .bookmark-item[container][query] {
 265     list-style-image: url("chrome://browser/skin/places/query@2x.png");
 266   }
 267
 268   .bookmark-item[query][tagContainer] {
 269     list-style-image: url("chrome://browser/skin/places/tag@2x.png");
 270   }
 271
 272   .bookmark-item[query][dayContainer] {
 273     list-style-image: url("chrome://browser/skin/places/history@2x.png");
 274   }
 275
 276   .bookmark-item[query][hostContainer] {
 277     list-style-image: url("chrome://global/skin/tree/folder@2x.png");
 278   }
 279
 280   .bookmark-item[query][hostContainer][open] {
 281     list-style-image: url("chrome://global/skin/tree/folder@2x.png");
 282   }
 283 }
 284
 285 /* Workaround for native menubar inheritance */
 286 .openintabs-menuitem,
 287 .openlivemarksite-menuitem,
 288 .livemarkstatus-menuitem {
 289   list-style-image: none;
 290 }
 291
 292 .bookmark-item[cutting] > .toolbarbutton-icon,
 293 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
 294   opacity: 0.5;
 295 }
 296
 297 .bookmark-item[cutting] > .toolbarbutton-text,
 298 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
 299   opacity: 0.7;
 300 }
 301
 302 #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
 303   background: url("chrome://browser/skin/places/bookmarksToolbar.png") no-repeat center;
 304 }
 305
 306 .bookmarks-toolbar-customize {
 307   max-width: 15em !important;
 308   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png") !important;
 309 }
 310
 311 @media (min-resolution: 2dppx) {
 312   #wrapper-personal-bookmarks[place="palette"] > .toolbarpaletteitem-box {
 313     background-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png");
 314     background-size: 16px;
 315   }
 316
 317   .bookmarks-toolbar-customize {
 318     list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png") !important;
 319   }
 320
 321   .bookmarks-toolbar-customize > .toolbarbutton-icon {
 322     width: 16px;
 323   }
 324 }
 325
 326 /* ----- BOOKMARK MENUS ----- */
 327
 328 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
 329   width: 16px;
 330   height: 16px;
 331 }
 332
 333 #bookmarksToolbarFolderMenu,
 334 #BMB_bookmarksToolbar {
 335   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.png");
 336 }
 337
 338 #BMB_unsortedBookmarks {
 339   list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.png");
 340 }
 341
 342 @media (min-resolution: 2dppx) {
 343   #bookmarksToolbarFolderMenu,
 344   #BMB_bookmarksToolbar {
 345     list-style-image: url("chrome://browser/skin/places/bookmarksToolbar@2x.png");
 346   }
 347
 348   #BMB_unsortedBookmarks {
 349     list-style-image: url("chrome://browser/skin/places/unfiledBookmarks@2x.png");
 350   }
 351 }
 352
 353 /* ----- PRIMARY TOOLBAR BUTTONS ----- */
 354
 355 .toolbarbutton-1:not([type="menu-button"]),
 356 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 357 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 358 #restore-button {
 359   -moz-box-orient: vertical;
 360   -moz-appearance: toolbarbutton;
 361   height: 22px;
 362   padding: 0;
 363   border: 0;
 364 }
 365
 366 .toolbarbutton-1:not([type="menu-button"]):-moz-lwtheme,
 367 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-lwtheme,
 368 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
 369 #restore-button:-moz-lwtheme {
 370   -moz-appearance: none;
 371   padding: 0 3px;
 372   border: 1px solid rgba(0, 0, 0, 0.4);
 373   border-radius: @toolbarbuttonCornerRadius@;
 374   background: -moz-linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.2)) repeat-x;
 375   background-origin: border-box;
 376   box-shadow: inset 0 1px rgba(255,255,255,0.3), 0 1px rgba(255,255,255,0.2);
 377 }
 378
 379 .toolbarbutton-1:not([type="menu-button"]):-moz-lwtheme-darktext,
 380 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-lwtheme-darktext,
 381 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-darktext,
 382 #restore-button:-moz-lwtheme-darktext {
 383   background-image: -moz-linear-gradient(rgba(255,255,255,0.3), rgba(50,50,50,0.2) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.13));
 384 }
 385
 386 .toolbarbutton-1[type="menu-button"] {
 387   padding: 0;
 388 }
 389
 390 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 391 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 392   margin: 0;
 393 }
 394
 395 .toolbarbutton-1,
 396 #restore-button {
 397   margin: 0 4px;
 398   list-style-image: url("chrome://browser/skin/Toolbar.png");
 399 }
 400
 401 @media (min-resolution: 2dppx) {
 402   /* Whitelist built-in buttons, instead of .toolbarbutton-1,
 403      to avoid potentially breaking add-on toolbar buttons. */
 404   :-moz-any(@primaryToolbarButtons@):not(#tabview-button) {
 405     list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
 406   }
 407
 408   :-moz-any(@primaryToolbarButtons@):not(#tabview-button) > .toolbarbutton-icon {
 409     width: 20px;
 410   }
 411 }
 412
 413 toolbar:not([mode="icons"]) .toolbarbutton-1:not([type="menu-button"]),
 414 toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 415 toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 416 toolbar:not([mode="icons"]) #restore-button {
 417   -moz-appearance: none;
 418   padding: 0;
 419   height: auto;
 420   border: none;
 421   box-shadow: none;
 422   background: none;
 423 }
 424
 425 .toolbarbutton-1:not([type="menu-button"]),
 426 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 427 #restore-button {
 428   min-width: 28px;
 429 }
 430
 431 toolbar:not([mode="icons"]) .toolbarbutton-1:not([type="menu-button"]),
 432 toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 433 toolbar:not([mode="icons"]) #restore-button {
 434   min-width: 0;
 435 }
 436
 437 .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
 438 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
 439   margin: 2px;
 440 }
 441
 442 .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
 443 .toolbarbutton-1[type="menu-button"] > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
 444 #restore-button[disabled="true"] > .toolbarbutton-icon {
 445   opacity: .4;
 446 }
 447
 448 @media (-moz-mac-lion-theme) {
 449   .toolbarbutton-1[disabled="true"] > .toolbarbutton-icon,
 450   .toolbarbutton-1[type="menu-button"] > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
 451   #restore-button[disabled="true"] > .toolbarbutton-icon,
 452   .toolbarbutton-1[disabled="true"] > .toolbarbutton-menu-dropmarker,
 453   .toolbarbutton-1[disabled="true"] > .toolbarbutton-menubutton-dropmarker,
 454   .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
 455   .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
 456   #restore-button:not(:hover):-moz-window-inactive > .toolbarbutton-icon,
 457   .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menu-dropmarker,
 458   .toolbarbutton-1:not(:hover):-moz-window-inactive > .toolbarbutton-menubutton-dropmarker {
 459     opacity: .5;
 460   }
 461
 462   .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
 463   .toolbarbutton-1:-moz-window-inactive[type="menu-button"] > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon,
 464   #restore-button:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon {
 465     opacity: .25;
 466   }
 467 }
 468
 469 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 470 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 471   list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker.png);
 472 }
 473
 474 @media (min-resolution: 2dppx) {
 475   .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 476   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 477     list-style-image: url(chrome://browser/skin/toolbarbutton-dropmarker@2x.png);
 478   }
 479
 480   .toolbarbutton-1 > .toolbarbutton-menu-dropmarker > .dropmarker-icon,
 481   .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
 482     width: 7px;
 483   }
 484 }
 485
 486 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
 487   -moz-margin-end: 1px;
 488 }
 489
 490 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 491   width: 14px;
 492   padding-top: 2px;
 493   -moz-border-start: none !important;
 494 }
 495
 496 toolbar:not([mode="icons"]) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
 497   width: auto;
 498   padding-top: 0;
 499 }
 500
 501 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
 502 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
 503   border-top-left-radius: 0;
 504   border-bottom-left-radius: 0;
 505 }
 506
 507 .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
 508 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
 509   border-top-right-radius: 0;
 510   border-bottom-right-radius: 0;
 511 }
 512
 513 toolbar:not([mode="icons"]) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-dropmarker {
 514   opacity: .7;
 515 }
 516
 517 .toolbarbutton-1 > .toolbarbutton-text,
 518 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
 519   margin: 2px 0 0;
 520 }
 521
 522 toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):active:hover:-moz-lwtheme,
 523 toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"])[open="true"]:-moz-lwtheme,
 524 toolbar[mode="icons"] .toolbarbutton-1:not([disabled="true"]) > .toolbarbutton-menubutton-button:active:hover:-moz-lwtheme,
 525 toolbar[mode="icons"] .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme,
 526 toolbar[mode="icons"] #restore-button:not([disabled="true"]):active:hover:-moz-lwtheme {
 527   text-shadow: @loweredShadow@;
 528   background-color: rgba(0,0,0,0.2);
 529   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
 530 }
 531
 532 toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:-moz-lwtheme {
 533   background-color: rgba(0,0,0,0.4);
 534   box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), 0 1px rgba(255,255,255,0.2);
 535 }
 536
 537 toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]):not(#fullscreen-button)[checked="true"]:not([disabled="true"]):active:hover:-moz-lwtheme {
 538   background-color: rgba(0, 0, 0, 0.6);
 539   box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.2);
 540 }
 541
 542 toolbar[mode="icons"] .toolbarbutton-1 > menupopup {
 543   margin-top: 1px;
 544 }
 545
 546 #navigator-toolbox > toolbar {
 547   /* force iconsize="small" on these toolbars */
 548   counter-reset: smallicons;
 549 }
 550
 551 /* unified back/forward button */
 552
 553 #unified-back-forward-button {
 554   -moz-box-align: center;
 555 }
 556
 557 #back-button,
 558 #forward-button:-moz-locale-dir(rtl),
 559 toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme {
 560   -moz-image-region: rect(0, 40px, 20px, 20px);
 561 }
 562
 563 @media (min-resolution: 2dppx) {
 564   #back-button,
 565   #forward-button:-moz-locale-dir(rtl),
 566   toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme {
 567     -moz-image-region: rect(0, 80px, 40px, 40px);
 568   }
 569 }
 570
 571 #forward-button,
 572 #back-button:-moz-locale-dir(rtl),
 573 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
 574 toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
 575   -moz-image-region: rect(0, 60px, 20px, 40px);
 576 }
 577
 578 @media (min-resolution: 2dppx) {
 579   #forward-button,
 580   #back-button:-moz-locale-dir(rtl),
 581   #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
 582   toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
 583     -moz-image-region: rect(0, 120px, 40px, 80px);
 584   }
 585 }
 586
 587 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:-moz-locale-dir(rtl),
 588 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button:-moz-locale-dir(rtl),
 589 toolbar[mode="icons"] #back-button:-moz-locale-dir(rtl):-moz-lwtheme,
 590 toolbar[mode="icons"] #forward-button:-moz-locale-dir(rtl):-moz-lwtheme {
 591   transform: scaleX(-1);
 592 }
 593
 594 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
 595   -moz-appearance: none;
 596   -moz-margin-end: -7px;
 597   position: relative;
 598   z-index: 1;
 599   -moz-image-region: rect(0, 20px, 20px, 0);
 600   width: 30px;
 601   height: 30px;
 602   padding: 4px 5px 4px 3px;
 603   border-radius: 10000px;
 604 }
 605
 606 @media (min-resolution: 2dppx) {
 607   #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button {
 608     -moz-image-region: rect(0, 40px, 40px, 0);
 609   }
 610 }
 611
 612 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not(:-moz-lwtheme) {
 613   height: 31px;
 614   padding: 4px 5px 5px 3px;
 615   margin-bottom: -1px;
 616   background: url(chrome://browser/skin/keyhole-circle.png) 0 0 no-repeat;
 617   border-radius: 0;
 618 }
 619
 620 @media (min-resolution: 2dppx) {
 621   #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not(:-moz-lwtheme) {
 622     background-image: url(chrome://browser/skin/keyhole-circle@2x.png);
 623     background-size: 90px;
 624   }
 625 }
 626
 627 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:-moz-window-inactive:not(:-moz-lwtheme) {
 628   background-position: -60px 0;
 629 }
 630
 631 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button:not([disabled="true"]):active:hover:not(:-moz-lwtheme),
 632 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #back-button[open="true"]:not(:-moz-lwtheme) {
 633   background-position: -30px 0;
 634 }
 635
 636 toolbar[mode="icons"] #forward-button {
 637   -moz-margin-start: 0;
 638 }
 639
 640 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button > .toolbarbutton-icon {
 641   /* shift the icon away from the back button */
 642   margin-left: 3px;
 643   margin-right: -1px;
 644 }
 645
 646 #navigator-toolbox[iconsize="large"][mode="icons"] > #nav-bar #forward-button {
 647   clip-path: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-clip-path);
 648 }
 649
 650 @conditionalForwardWithUrlbar@ > #forward-button:not(:-moz-lwtheme) {
 651   -moz-appearance: none;
 652   -moz-padding-start: 2px;
 653   background: -moz-linear-gradient(hsl(0,0%,99%), hsl(0,0%,67%)) padding-box;
 654   border: 1px solid;
 655   border-color: hsl(0,0%,31%) hsla(0,0%,29%,.6) hsl(0,0%,27%);
 656   box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35),
 657               0 1px 0 hsla(0,0%,100%,.2);
 658 }
 659
 660 @conditionalForwardWithUrlbar@ > #forward-button {
 661   border-radius: 0;
 662   -moz-margin-end: 0;
 663 }
 664
 665 @conditionalForwardWithUrlbar@ > #forward-button:-moz-lwtheme {
 666   -moz-padding-start: 2px;
 667   -moz-padding-end: 0;
 668 }
 669
 670 @conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
 671   transition: opacity @forwardTransitionLength@ ease-out;
 672 }
 673
 674 @conditionalForwardWithUrlbar@ > #forward-button:hover:active:not(:-moz-lwtheme) {
 675   background-image: -moz-linear-gradient(hsl(0,0%,74%), hsl(0,0%,61%));
 676   box-shadow: inset rgba(0,0,0,.3) 0 -6px 10px,
 677               inset #000 0 1px 3px,
 678               inset rgba(0,0,0,.2) 0 1px 3px,
 679               0 1px 0 hsla(0,0%,100%,.2);
 680 }
 681
 682 @conditionalForwardWithUrlbar@ > #forward-button:-moz-window-inactive:not(:-moz-lwtheme) {
 683   border-color: hsl(0,0%,64%) hsl(0,0%,65%) hsl(0,0%,66%);
 684   background-image: -moz-linear-gradient(hsl(0,0%,99%), hsl(0,0%,82%));
 685   box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35);
 686 }
 687
 688 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
 689   opacity: 0;
 690 }
 691
 692 @media (-moz-mac-lion-theme) {
 693   @conditionalForwardWithUrlbar@ > #forward-button:not(:-moz-lwtheme) {
 694     background-image: -moz-linear-gradient(hsla(0,0%,100%,.73), hsla(0,0%,100%,.05) 85%);
 695     border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.2);
 696     box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2),
 697                 inset 0 0 1px hsla(0,0%,100%,.1),
 698                 0 1px 0 hsla(0,0%,100%,.2);
 699   }
 700
 701   @conditionalForwardWithUrlbar@ > #forward-button:hover:active:not(:-moz-lwtheme) {
 702     background-image: -moz-linear-gradient(hsla(0,0%,60%,.37), hsla(0,0%,100%,.35) 95%);
 703     border-color: hsla(0,0%,0%,.43) hsla(0,0%,0%,.25) hsla(0,0%,0%,.37);
 704     box-shadow: inset 0 1px 0 hsla(0,0%,0%,.02),
 705                 inset 0 1px 2px hsla(0,0%,0%,.2),
 706                 0 1px 0 hsla(0,0%,100%,.2);
 707   }
 708
 709   @conditionalForwardWithUrlbar@ > #forward-button:-moz-window-inactive:not(:-moz-lwtheme) {
 710     background-image: none;
 711     border-color: hsla(0,0%,0%,.2);
 712   }
 713 }
 714
 715 #navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button {
 716   width: 27px;
 717 }
 718
 719 #navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button:-moz-lwtheme {
 720   padding-left: 2px;
 721 }
 722
 723 toolbar[mode="icons"] #forward-button:-moz-lwtheme {
 724   border-top-left-radius: 0;
 725   border-bottom-left-radius: 0;
 726 }
 727
 728 #navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button {
 729   -moz-margin-end: 0;
 730   width: 26px;
 731 }
 732
 733 #navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #back-button:-moz-lwtheme {
 734   padding-right: 2px;
 735   border-right-width: 0;
 736   border-top-right-radius: 0;
 737   border-bottom-right-radius: 0;
 738 }
 739
 740 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 741 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
 742   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
 743 }
 744
 745 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
 746 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
 747   list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
 748 }
 749
 750
 751 /* reload button */
 752
 753 #reload-button {
 754   -moz-image-region: rect(0, 80px, 20px, 60px);
 755 }
 756
 757 @media (min-resolution: 2dppx) {
 758   #reload-button {
 759     -moz-image-region: rect(0, 160px, 40px, 120px);
 760   }
 761 }
 762
 763 /* stop button */
 764
 765 #stop-button {
 766   -moz-image-region: rect(0, 100px, 20px, 80px);
 767 }
 768
 769 @media (min-resolution: 2dppx) {
 770   #stop-button {
 771     -moz-image-region: rect(0, 200px, 40px, 160px);
 772   }
 773 }
 774
 775 /* home button */
 776
 777 #home-button {
 778   -moz-image-region: rect(0, 120px, 20px, 100px);
 779 }
 780
 781 #home-button.bookmark-item {
 782   list-style-image: url("chrome://browser/skin/home.png");
 783   -moz-image-region: rect(0, 12px, 12px, 0);
 784 }
 785
 786 #home-button.bookmark-item:hover {
 787   -moz-image-region: rect(0, 24px, 12px, 12px);
 788 }
 789
 790 #home-button.bookmark-item > .toolbarbutton-icon {
 791   display: -moz-box !important;
 792   -moz-margin-start: -2px;
 793   -moz-margin-end: 3px;
 794 }
 795
 796 @media (min-resolution: 2dppx) {
 797   #home-button:not(.bookmark-item) {
 798     -moz-image-region: rect(0, 240px, 40px, 200px);
 799   }
 800 }
 801
 802 /* tabview button */
 803
 804 #tabview-button,
 805 #menu_tabview {
 806   list-style-image: url(chrome://browser/skin/tabview/tabview.png);
 807 }
 808
 809 #tabview-button {
 810   -moz-image-region: rect(0, 100px, 20px, 80px);
 811 }
 812
 813 #tabview-button[groups="0"] {
 814   -moz-image-region: rect(0, 20px, 20px, 0);
 815 }
 816
 817 #tabview-button[groups="1"] {
 818   -moz-image-region: rect(0, 40px, 20px, 20px);
 819 }
 820
 821 #tabview-button[groups="2"] {
 822   -moz-image-region: rect(0, 60px, 20px, 40px);
 823 }
 824
 825 #tabview-button[groups="3"] {
 826   -moz-image-region: rect(0, 80px, 20px, 60px);
 827 }
 828
 829 #menu_tabview {
 830   -moz-image-region: rect(2px, 98px, 18px, 82px);
 831 }
 832
 833 #menu_tabview[groups="0"] {
 834   -moz-image-region: rect(2px, 18px, 18px, 2px);
 835 }
 836
 837 #menu_tabview[groups="1"] {
 838   -moz-image-region: rect(2px, 38px, 18px, 22px);
 839 }
 840
 841 #menu_tabview[groups="2"] {
 842   -moz-image-region: rect(2px, 58px, 18px, 42px);
 843 }
 844
 845 #menu_tabview[groups="3"] {
 846   -moz-image-region: rect(2px, 78px, 18px, 62px);
 847 }
 848
 849 /* download manager button */
 850
 851 #downloads-button {
 852   -moz-image-region: rect(0, 140px, 20px, 120px);
 853 }
 854
 855 @media (min-resolution: 2dppx) {
 856   #downloads-button {
 857     -moz-image-region: rect(0, 280px, 40px, 240px);
 858   }
 859 }
 860
 861 /* history sidebar button */
 862
 863 #history-button {
 864   -moz-image-region: rect(0, 160px, 20px, 140px);
 865 }
 866
 867 #history-button[checked="true"] {
 868   -moz-image-region: rect(20px, 160px, 40px, 140px);
 869 }
 870
 871 @media (min-resolution: 2dppx) {
 872   #history-button {
 873     -moz-image-region: rect(0, 320px, 40px, 280px);
 874   }
 875
 876   #history-button[checked="true"] {
 877     -moz-image-region: rect(40px, 320px, 80px, 280px);
 878   }
 879 }
 880
 881 /* bookmark sidebar & menu buttons */
 882
 883 #bookmarks-button,
 884 #bookmarks-menu-button {
 885   -moz-image-region: rect(0, 180px, 20px, 160px);
 886 }
 887
 888 #bookmarks-button[checked="true"] {
 889   -moz-image-region: rect(20px, 180px, 40px, 160px);
 890 }
 891
 892 #bookmarks-menu-button.bookmark-item {
 893   -moz-image-region: rect(2px, 178px, 18px, 162px);
 894   list-style-image: url("chrome://browser/skin/Toolbar.png");
 895 }
 896
 897 @media (min-resolution: 2dppx) {
 898   #bookmarks-button,
 899   #bookmarks-menu-button {
 900     -moz-image-region: rect(0, 360px, 40px, 320px);
 901   }
 902
 903   #bookmarks-button[checked="true"] {
 904     -moz-image-region: rect(40px, 360px, 80px, 320px);
 905   }
 906
 907   #bookmarks-menu-button.bookmark-item {
 908     -moz-image-region: rect(4px, 356px, 36px, 324px);
 909     list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
 910   }
 911
 912   #bookmarks-menu-button.bookmark-item > .toolbarbutton-icon {
 913     width: 16px;
 914   }
 915 }
 916
 917 #bookmarks-menu-button.toolbarbutton-1 {
 918   -moz-box-orient: horizontal;
 919 }
 920
 921 /* print button */
 922
 923 #print-button {
 924   -moz-image-region: rect(0, 200px, 20px, 180px);
 925 }
 926
 927 @media (min-resolution: 2dppx) {
 928   #print-button {
 929     -moz-image-region: rect(0, 400px, 40px, 360px);
 930   }
 931 }
 932
 933 /* toolbar new tab button */
 934
 935 #new-tab-button {
 936   -moz-image-region: rect(0, 220px, 20px, 200px);
 937 }
 938
 939 @media (min-resolution: 2dppx) {
 940   #new-tab-button {
 941     -moz-image-region: rect(0, 440px, 40px, 400px);
 942   }
 943 }
 944
 945 /* new window button */
 946
 947 #new-window-button {
 948   -moz-image-region: rect(0, 240px, 20px, 220px);
 949 }
 950
 951 @media (min-resolution: 2dppx) {
 952   #new-window-button {
 953     -moz-image-region: rect(0, 480px, 40px, 440px);
 954   }
 955 }
 956
 957 /* cut button */
 958
 959 #cut-button {
 960   -moz-image-region: rect(0, 260px, 20px, 240px);
 961 }
 962
 963 @media (min-resolution: 2dppx) {
 964   #cut-button {
 965     -moz-image-region: rect(0, 520px, 40px, 480px);
 966   }
 967 }
 968
 969 /* copy button */
 970
 971 #copy-button {
 972   -moz-image-region: rect(0, 280px, 20px, 260px);
 973 }
 974
 975 @media (min-resolution: 2dppx) {
 976   #copy-button {
 977     -moz-image-region: rect(0, 560px, 40px, 520px);
 978   }
 979 }
 980
 981 /* paste button */
 982
 983 #paste-button {
 984   -moz-image-region: rect(0, 300px, 20px, 280px);
 985 }
 986
 987 @media (min-resolution: 2dppx) {
 988   #paste-button {
 989     -moz-image-region: rect(0, 600px, 40px, 560px);
 990   }
 991 }
 992
 993 /* alltabs button */
 994
 995 #alltabs-button {
 996   -moz-image-region: rect(0, 380px, 20px, 360px);
 997 }
 998
 999 @media (min-resolution: 2dppx) {
1000   #alltabs-button {
1001     -moz-image-region: rect(0, 760px, 40px, 720px);
1002   }
1003 }
1004
1005 /* fullscreen button */
1006
1007 #fullscreen-button {
1008   -moz-image-region: rect(0, 340px, 20px, 320px);
1009 }
1010
1011 #fullscreen-button[checked="true"],
1012 #restore-button {
1013   -moz-image-region: rect(0, 360px, 20px, 340px);
1014 }
1015
1016 @media (min-resolution: 2dppx) {
1017   #fullscreen-button {
1018     -moz-image-region: rect(0, 680px, 40px, 640px);
1019   }
1020
1021   #fullscreen-button[checked="true"],
1022   #restore-button {
1023     -moz-image-region: rect(0, 720px, 40px, 680px);
1024   }
1025 }
1026
1027 /* zoom controls */
1028
1029 #zoom-controls {
1030   -moz-box-align: center;
1031 }
1032
1033 #zoom-out-button {
1034   -moz-image-region: rect(0, 400px, 20px, 380px);
1035 }
1036
1037 #zoom-in-button {
1038   -moz-image-region: rect(0, 420px, 20px, 400px);
1039 }
1040
1041 @media (min-resolution: 2dppx) {
1042   #zoom-out-button {
1043     -moz-image-region: rect(0, 800px, 40px, 760px);
1044   }
1045
1046   #zoom-in-button {
1047     -moz-image-region: rect(0, 480px, 40px, 440px);
1048   }
1049 }
1050
1051 toolbar[mode="icons"] #zoom-out-button {
1052   -moz-margin-end: 0;
1053 }
1054
1055 toolbar[mode="icons"] #zoom-in-button {
1056   -moz-border-start: none;
1057   -moz-margin-start: 0;
1058 }
1059
1060 #zoom-out-button:-moz-locale-dir(ltr),
1061 #zoom-in-button:-moz-locale-dir(rtl) {
1062   border-top-right-radius: 0;
1063   border-bottom-right-radius: 0;
1064 }
1065
1066 #zoom-out-button:-moz-locale-dir(rtl),
1067 #zoom-in-button:-moz-locale-dir(ltr) {
1068   border-top-left-radius: 0;
1069   border-bottom-left-radius: 0;
1070 }
1071
1072 /* sync button */
1073
1074 #sync-button {
1075   -moz-image-region: rect(0, 440px, 20px, 420px);
1076 }
1077
1078 #sync-button[status="active"] {
1079   list-style-image: url("chrome://browser/skin/sync-throbber.png");
1080   -moz-image-region: rect(0, 20px, 20px, 0px);
1081 }
1082
1083 @media (min-resolution: 2dppx) {
1084   #sync-button:not([status="active"]) {
1085     -moz-image-region: rect(0, 880px, 40px, 840px);
1086   }
1087 }
1088
1089 /* feed button */
1090
1091 #feed-button {
1092   -moz-image-region: rect(0, 460px, 20px, 440px);
1093 }
1094
1095 @media (min-resolution: 2dppx) {
1096   #feed-button {
1097     -moz-image-region: rect(0, 920px, 40px, 880px);
1098   }
1099 }
1100
1101
1102 /* ----- FULLSCREEN WINDOW CONTROLS ----- */
1103
1104 #minimize-button,
1105 #close-button,
1106 #fullscreen-button ~ #window-controls > #restore-button {
1107   display: none;
1108 }
1109
1110 /* ::::: nav-bar-inner ::::: */
1111
1112 #urlbar,
1113 .searchbar-textbox {
1114   font: icon;
1115   width: 7em;
1116   min-width: 7em;
1117   -moz-appearance: none;
1118   box-shadow: 0 1px rgba(255, 255, 255, 0.2), inset 0 1px hsla(0,0%,0%,.05);
1119   margin: 0 4px;
1120   padding: 0;
1121   border: 1px solid;
1122   border-color: #626262 #787878 #8c8c8c;
1123   background-clip: padding-box;
1124 }
1125
1126 @media (-moz-mac-lion-theme) {
1127   #urlbar,
1128   .searchbar-textbox {
1129     background-image: -moz-linear-gradient(hsl(0,0%,97%), hsl(0,0%,100%));
1130     border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.15);
1131     box-shadow: 0 1px 0 hsla(0,0%,100%,.2),
1132                 inset 0 0 1px hsla(0,0%,0%,.05),
1133                 inset 0 1px 2px hsla(0,0%,0%,.1);
1134   }
1135 }
1136
1137 @media not all and (-moz-mac-lion-theme) {
1138   #urlbar:-moz-window-inactive,
1139   .searchbar-textbox:-moz-window-inactive {
1140     border-color: @toolbarbuttonInactiveBorderColor@;
1141   }
1142 }
1143
1144 #urlbar[focused="true"],
1145 .searchbar-textbox[focused="true"] {
1146   border-color: -moz-mac-focusring;
1147   box-shadow: @focusRingShadow@;
1148 }
1149
1150 #urlbar {
1151   -moz-padding-end: 4px;
1152   border-radius: @toolbarbuttonCornerRadius@;
1153 }
1154
1155 @conditionalForwardWithUrlbar@ + #urlbar-container {
1156   padding-left: @conditionalForwardWithUrlbarWidth@px;
1157   -moz-margin-start: -@conditionalForwardWithUrlbarWidth@px;
1158   position: relative;
1159   pointer-events: none;
1160 }
1161
1162 @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar {
1163   -moz-border-start: none;
1164   margin-left: 0;
1165   pointer-events: all;
1166 }
1167
1168 @conditionalForwardWithUrlbar@:not([switchingtabs]) + #urlbar-container > #urlbar {
1169   transition: margin-left @forwardTransitionLength@ ease-out;
1170 }
1171
1172 @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(ltr) {
1173   border-top-left-radius: 0;
1174   border-bottom-left-radius: 0;
1175 }
1176
1177 @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) {
1178   border-top-right-radius: 0;
1179   border-bottom-right-radius: 0;
1180 }
1181
1182 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container {
1183   clip-path: url("chrome://browser/content/browser.xul#pinstripe-urlbar-back-button-clip-path");
1184 }
1185
1186 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar {
1187   margin-left: -@conditionalForwardWithUrlbarWidth@px;
1188 }
1189
1190 @conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) + #urlbar-container > #urlbar {
1191   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1192   transition-delay: 100s;
1193 }
1194
1195 @conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar {
1196   /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1197   margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
1198 }
1199
1200 @conditionalForwardWithUrlbar@ + #urlbar-container:-moz-locale-dir(rtl),
1201 @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) {
1202   /* let pinstripe-urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1203   transform: scaleX(-1);
1204 }
1205
1206 #identity-box {
1207   -moz-margin-end: 3px;
1208   padding-top: 1px;
1209   padding-bottom: 1px;
1210   -moz-padding-start: 4px;
1211   -moz-padding-end: 0;
1212   font-size: .9em;
1213 }
1214
1215 #identity-box:-moz-locale-dir(ltr) {
1216   border-top-left-radius: 2px;
1217   border-bottom-left-radius: 2px;
1218 }
1219
1220 #identity-box:-moz-locale-dir(rtl) {
1221   border-top-right-radius: 2px;
1222   border-bottom-right-radius: 2px;
1223 }
1224
1225 #notification-popup-box:not([hidden]) + #identity-box {
1226   -moz-padding-start: 10px;
1227   border-radius: 0;
1228 }
1229
1230 @conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar > #identity-box {
1231   border-radius: 0;
1232 }
1233
1234 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1235   transition: 0s padding-left;
1236   padding-left: 10px;
1237 }
1238
1239 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1240   transition: 0s padding-right;
1241   padding-right: 10px;
1242 }
1243
1244 @conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box {
1245   /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1246   transition-delay: 100s;
1247 }
1248
1249 @conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1250   padding-left: 10.01px;
1251 }
1252
1253 @conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1254   padding-right: 10.01px;
1255 }
1256
1257 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1258   color: hsl(92,100%,30%);
1259   -moz-padding-end: 4px;
1260   background-image: -moz-linear-gradient(hsla(92,81%,16%,0),
1261                                          hsla(92,81%,16%,.2) 25%,
1262                                          hsla(92,81%,16%,.2) 75%,
1263                                          hsla(92,81%,16%,0));
1264   background-position: right;
1265   background-size: 1px;
1266   background-repeat: no-repeat;
1267 }
1268
1269 #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1270   background-position: left;
1271 }
1272
1273 #identity-box:-moz-focusring {
1274   box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
1275               0 0 2px 2px -moz-mac-focusring;
1276   -moz-border-end-style: none;
1277   -moz-padding-end: 5px;
1278 }
1279
1280 #identity-icon-labels {
1281   -moz-margin-start: 4px;
1282 }
1283
1284 .urlbar-input-box {
1285   -moz-margin-start: 0;
1286   padding: 3px 0 2px;
1287 }
1288
1289 .urlbar-history-dropmarker {
1290   padding: 0 3px;
1291   list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker.png");
1292   -moz-image-region: rect(0px, 11px, 14px, 0px);
1293 }
1294
1295 .urlbar-history-dropmarker[open="true"],
1296 .urlbar-history-dropmarker:hover:active {
1297   -moz-image-region: rect(0px, 22px, 14px, 11px);
1298   background-image: -moz-radial-gradient(center, circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
1299 }
1300
1301 @media (min-resolution: 2dppx) {
1302   .urlbar-history-dropmarker {
1303     list-style-image: url("chrome://browser/skin/urlbar-history-dropmarker@2x.png");
1304     -moz-image-region: rect(0px, 22px, 28px, 0px);
1305   }
1306
1307   .urlbar-history-dropmarker[open="true"],
1308   .urlbar-history-dropmarker:hover:active {
1309     -moz-image-region: rect(0px, 44px, 28px, 22px);
1310   }
1311
1312   .urlbar-history-dropmarker > .dropmarker-icon {
1313     width: 11px;
1314   }
1315 }
1316
1317 #urlbar-icons {
1318   -moz-box-align: center;
1319 }
1320
1321 .urlbar-icon {
1322   padding: 2px 3px;
1323 }
1324
1325 .urlbar-icon[open="true"],
1326 .urlbar-icon:hover:active {
1327   background-image: -moz-radial-gradient(center, circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
1328 }
1329
1330 #urlbar-search-splitter {
1331   min-width: 8px;
1332   width: 8px;
1333   background-image: none;
1334   margin: 0 -4px;
1335   position: relative;
1336   height: 22px;
1337 }
1338
1339 #page-proxy-favicon {
1340   width: 16px;
1341   height: 16px;
1342   margin: 0px;
1343   padding: 0px;
1344   list-style-image: url(chrome://browser/skin/identity-icons-generic.png);
1345   -moz-image-region: rect(0, 16px, 16px, 0);
1346 }
1347
1348 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1349   list-style-image: url(chrome://browser/skin/identity-icons-https.png);
1350 }
1351
1352 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1353   list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png);
1354 }
1355
1356 #identity-box:hover:active > #page-proxy-favicon,
1357 #identity-box[open=true] > #page-proxy-favicon {
1358   -moz-image-region: rect(0, 32px, 16px, 16px);
1359 }
1360
1361 @media (min-resolution: 2dppx) {
1362   #page-proxy-favicon {
1363     list-style-image: url(chrome://browser/skin/identity-icons-generic@2x.png);
1364     -moz-image-region: rect(0, 32px, 32px, 0);
1365   }
1366
1367   .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1368     list-style-image: url(chrome://browser/skin/identity-icons-https@2x.png);
1369   }
1370
1371   .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1372     list-style-image: url(chrome://browser/skin/identity-icons-https-ev@2x.png);
1373   }
1374
1375   #identity-box:hover:active > #page-proxy-favicon,
1376   #identity-box[open=true] > #page-proxy-favicon {
1377     -moz-image-region: rect(0, 64px, 32px, 32px);
1378   }
1379 }
1380
1381 #page-proxy-favicon[pageproxystate="invalid"] {
1382   opacity: 0.3;
1383 }
1384
1385 #wrapper-urlbar-container[place="palette"] {
1386   max-width: 20em;
1387 }
1388
1389 #urlbar-display-box {
1390   -moz-border-end: 1px solid #AAA;
1391   -moz-margin-end: 3px;
1392 }
1393
1394 #urlbar-display {
1395   margin-top: 0;
1396   margin-bottom: 0;
1397   color: GrayText;
1398 }
1399
1400 #PopupAutoCompleteRichResult {
1401   margin-top: 2px;
1402 }
1403
1404 /* ----- AUTOCOMPLETE ----- */
1405
1406 #treecolAutoCompleteImage {
1407   max-width: 36px;
1408 }
1409
1410 .ac-result-type-bookmark,
1411 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1412   list-style-image: url("chrome://browser/skin/places/star-icons.png");
1413   -moz-image-region: rect(0, 32px, 16px, 16px);
1414 }
1415
1416 .ac-result-type-keyword,
1417 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1418   list-style-image: url(chrome://global/skin/icons/search-textbox.png);
1419   margin: 2px;
1420   width: 12px;
1421   height: 12px;
1422 }
1423
1424 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1425 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1426   list-style-image: url("chrome://browser/skin/places/star-icons.png");
1427   -moz-image-region: rect(0, 64px, 16px, 48px);
1428 }
1429
1430 .ac-result-type-tag,
1431 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1432   list-style-image: url("chrome://browser/skin/places/tag.png");
1433   width: 16px;
1434   height: 16px;
1435 }
1436
1437 .ac-extra > .ac-comment {
1438   font-size: inherit;
1439 }
1440
1441 .ac-url-text,
1442 .ac-action-text {
1443   color: -moz-nativehyperlinktext;
1444   font: message-box;
1445 }
1446
1447 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1448   list-style-image: url("chrome://browser/skin/actionicon-tab.png");
1449   -moz-image-region: rect(0, 16px, 11px, 0);
1450   padding: 0 3px;
1451 }
1452
1453 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1454   -moz-image-region: rect(11px, 16px, 22px, 0);
1455 }
1456
1457 window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1458   -moz-image-region: rect(0, 32px, 11px, 16px);
1459 }
1460
1461 window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1462   -moz-image-region: rect(11px, 32px, 22px, 16px);
1463 }
1464
1465 @media (min-resolution: 2dppx) {
1466   .ac-result-type-bookmark {
1467     list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
1468     -moz-image-region: rect(0, 64px, 32px, 32px);
1469   }
1470
1471   richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
1472     list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
1473     -moz-image-region: rect(0, 128px, 32px, 96px);
1474   }
1475
1476   .ac-result-type-tag {
1477     list-style-image: url("chrome://browser/skin/places/tag@2x.png");
1478   }
1479
1480   richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1481     list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
1482     -moz-image-region: rect(0, 32px, 22px, 0);
1483     width: 16px;
1484   }
1485
1486   richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1487     -moz-image-region: rect(22px, 32px, 44px, 0);
1488   }
1489
1490   window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
1491     -moz-image-region: rect(0, 64px, 22px, 32px);
1492   }
1493
1494   window[tabsontop="false"] richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
1495     -moz-image-region: rect(22px, 64px, 44px, 32px);
1496   }
1497 }
1498
1499 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
1500   color: GrayText;
1501 }
1502
1503 .ac-comment[selected="true"],
1504 .ac-url-text[selected="true"],
1505 .ac-action-text[selected="true"] {
1506   color: inherit !important;
1507 }
1508
1509 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
1510 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
1511 {
1512   color: GrayText;
1513   font-size: smaller;
1514 }
1515
1516 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
1517   border-top: 1px solid GrayText;
1518 }
1519
1520
1521 /* ----- COMBINED GO/RELOAD/STOP BUTTON IN LOCATION BAR ----- */
1522
1523 #go-button,
1524 #urlbar > toolbarbutton {
1525   margin: 0;
1526   -moz-padding-start: 2px;
1527   -moz-padding-end: 1px;
1528   background-origin: border-box;
1529   list-style-image: url("chrome://browser/skin/reload-stop-go.png");
1530 }
1531
1532 #urlbar > toolbarbutton:not([disabled]):hover:active {
1533   background-image: -moz-radial-gradient(center, circle closest-side, hsla(205,100%,70%,.3), hsla(205,100%,70%,0));
1534 }
1535
1536 #go-button {
1537   padding: 0 3px;
1538 }
1539
1540 #go-button,
1541 #urlbar-go-button {
1542   -moz-image-region: rect(0, 42px, 14px, 28px);
1543 }
1544
1545 #go-button:hover:active,
1546 #urlbar-go-button:hover:active {
1547   -moz-image-region: rect(14px, 42px, 28px, 28px);
1548 }
1549
1550 #go-button:-moz-locale-dir(rtl),
1551 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1552   transform: scaleX(-1);
1553 }
1554
1555 #urlbar-reload-button {
1556   -moz-image-region: rect(0, 14px, 14px, 0);
1557 }
1558
1559 #urlbar-reload-button:not([disabled]):hover:active {
1560   -moz-image-region: rect(14px, 14px, 28px, 0);
1561 }
1562
1563 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1564   transform: scaleX(-1);
1565 }
1566
1567 #urlbar-stop-button {
1568   -moz-image-region: rect(0, 28px, 14px, 14px);
1569 }
1570
1571 #urlbar-stop-button:hover:active {
1572   -moz-image-region: rect(14px, 28px, 28px, 14px);
1573 }
1574
1575 @media (min-resolution: 2dppx) {
1576   #go-button,
1577   #urlbar > toolbarbutton {
1578     list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
1579   }
1580
1581   #go-button,
1582   #urlbar-go-button {
1583     -moz-image-region: rect(0, 84px, 28px, 56px);
1584   }
1585
1586   #go-button:hover:active,
1587   #urlbar-go-button:hover:active {
1588     -moz-image-region: rect(28px, 84px, 56px, 56px);
1589   }
1590
1591   #urlbar-reload-button {
1592     -moz-image-region: rect(0, 28px, 28px, 0);
1593   }
1594
1595   #urlbar-reload-button:not([disabled]):hover:active {
1596     -moz-image-region: rect(28px, 28px, 56px, 0);
1597   }
1598
1599   #urlbar-stop-button {
1600     -moz-image-region: rect(0, 56px, 28px, 28px);
1601   }
1602
1603   #urlbar-stop-button:hover:active {
1604     -moz-image-region: rect(28px, 56px, 56px, 28px);
1605   }
1606
1607   #go-button > .toolbarbutton-icon,
1608   #urlbar > toolbarbutton > .toolbarbutton-icon {
1609     width: 14px;
1610   }
1611 }
1612
1613 /* POPUP BLOCKER BUTTON */
1614 #page-report-button {
1615   list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
1616   -moz-image-region: rect(0, 16px, 16px, 0);
1617 }
1618
1619 #page-report-button:hover:active,
1620 #page-report-button[open="true"] {
1621   -moz-image-region: rect(0, 32px, 16px, 16px);
1622 }
1623
1624 @media (min-resolution: 2dppx) {
1625   #page-report-button {
1626     list-style-image: url("chrome://browser/skin/urlbar-popup-blocked@2x.png");
1627     -moz-image-region: rect(0, 32px, 32px, 0);
1628     width: 22px;
1629   }
1630
1631   #page-report-button:hover:active,
1632   #page-report-button[open="true"] {
1633     -moz-image-region: rect(0, 64px, 32px, 32px);
1634   }
1635 }
1636
1637 /* social recommending panel */
1638
1639 #share-button {
1640   width: 16px;
1641   height: 16px;
1642 }
1643
1644 #socialUserPortrait {
1645   width: 48px;
1646   height: 48px;
1647 }
1648
1649 #socialUserDisplayName,
1650 #socialUserPortrait {
1651   cursor: pointer;
1652 }
1653
1654 #socialUserDisplayName {
1655   -moz-appearance: none;
1656   border: none;
1657   background-color: transparent;
1658   margin: 1px;
1659   padding: 0;
1660   font-size: 130%;
1661   font-weight: bold;
1662 }
1663
1664 #socialUserDisplayName > .button-box {
1665   -moz-padding-start: 0;
1666   padding-top: 0;
1667   border-top-width: 0;
1668 }
1669
1670 #socialUserDisplayName:hover {
1671   color: -moz-nativehyperlinktext;
1672   text-decoration: underline;
1673 }
1674
1675 #unsharePopupText {
1676   height: 48px;
1677 }
1678
1679 #unsharePopupBottomButtons {
1680   margin-top: 1em;
1681 }
1682
1683 /* STAR BUTTON */
1684 #star-button {
1685   list-style-image: url("chrome://browser/skin/places/star-icons.png");
1686   -moz-image-region: rect(0, 16px, 16px, 0);
1687 }
1688
1689 #star-button:hover:active,
1690 #star-button[starred="true"] {
1691   -moz-image-region: rect(0, 32px, 16px, 16px);
1692 }
1693
1694 #star-button:hover:active[starred="true"] {
1695   -moz-image-region: rect(0, 48px, 16px, 32px);
1696 }
1697
1698 @media (min-resolution: 2dppx) {
1699   #star-button {
1700     list-style-image: url("chrome://browser/skin/places/star-icons@2x.png");
1701     -moz-image-region: rect(0, 32px, 32px, 0);
1702     width: 22px;
1703   }
1704
1705   #star-button:hover:active,
1706   #star-button[starred="true"] {
1707     -moz-image-region: rect(0, 64px, 32px, 32px);
1708   }
1709
1710   #star-button:hover:active[starred="true"] {
1711     -moz-image-region: rect(0, 96px, 32px, 64px);
1712   }
1713 }
1714
1715 /* BOOKMARKING PANEL */
1716 #editBookmarkPanelStarIcon {
1717   list-style-image: url("chrome://browser/skin/places/starred48.png");
1718   width: 48px;
1719   height: 48px;
1720 }
1721
1722 #editBookmarkPanelStarIcon[unstarred] {
1723   list-style-image: url("chrome://browser/skin/places/unstarred48.png");
1724 }
1725
1726 #editBookmarkPanelTitle {
1727   font-size: 130%;
1728   font-weight: bold;
1729 }
1730
1731 #editBMPanel_rows > row {
1732   margin-bottom: 8px;
1733 }
1734
1735 #editBMPanel_rows > row:last-of-type {
1736   margin-bottom: 0;
1737 }
1738
1739 /**** Input elements ****/
1740
1741 #editBMPanel_rows > row > textbox,
1742 #editBMPanel_rows > row > hbox > textbox {
1743   -moz-appearance: none;
1744   background: linear-gradient(#fafafa, #fff);
1745   background-clip: padding-box;
1746   border-radius: 3px;
1747   border: 1px solid rgba(0,0,0,.3) !important;
1748   box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
1749               0 1px rgba(255,255,255,.3);
1750   margin: 0;
1751   padding: 3px 6px;
1752 }
1753
1754 #editBMPanel_rows > row > textbox[focused="true"],
1755 #editBMPanel_rows > row > hbox > textbox[focused="true"] {
1756   border-color: -moz-mac-focusring !important;
1757   box-shadow: @focusRingShadow@;
1758 }
1759
1760 /**** HUD style buttons ****/
1761
1762 .editBookmarkPanelHeaderButton,
1763 .editBookmarkPanelBottomButton {
1764   @hudButton@
1765   margin: 0;
1766   min-width: 82px;
1767   min-height: 22px;
1768 }
1769
1770 .editBookmarkPanelHeaderButton:hover:active,
1771 .editBookmarkPanelBottomButton:hover:active {
1772   @hudButtonPressed@
1773 }
1774
1775 .editBookmarkPanelHeaderButton:-moz-focusring,
1776 .editBookmarkPanelBottomButton:-moz-focusring {
1777   @hudButtonFocused@
1778 }
1779
1780 .editBookmarkPanelBottomButton[default="true"] {
1781   background-color: #666;
1782 }
1783
1784 #editBookmarkPanelHeader {
1785   margin-bottom: 6px;
1786 }
1787
1788 .editBookmarkPanelBottomButton:last-child {
1789   -moz-margin-start: 8px;
1790 }
1791
1792 /* The following elements come from editBookmarkOverlay.xul. Styling that's
1793    specific to the editBookmarkPanel should be in browser.css. Styling that
1794    should be shared by all editBookmarkOverlay.xul consumers should be in
1795    editBookmarkOverlay.css. */
1796
1797 #editBMPanel_newFolderBox {
1798   background: linear-gradient(#fff, #f2f2f2);
1799   background-origin: padding-box;
1800   background-clip: padding-box;
1801   border-radius: 0 0 3px 3px;
1802   border: 1px solid #a5a5a5;
1803   box-shadow: inset 0 1px rgba(255,255,255,.8),
1804               inset 0 0 1px rgba(255,255, 255,.25),
1805               0 1px rgba(255,255,255,.3);
1806   margin: 0;
1807   padding: 0;
1808   height:  20px;
1809 }
1810
1811 #editBMPanel_newFolderButton {
1812   -moz-appearance: none;
1813   border: 0 solid #a5a5a5;
1814   -moz-border-end-width: 1px;
1815   padding: 0 9px;
1816   margin: 0;
1817   min-width: 21px;
1818   min-height: 20px;
1819   height:  20px;
1820   color: #fff;
1821   list-style-image: url("chrome://browser/skin/panel-plus-sign.png");
1822   position: relative;
1823 }
1824
1825 #editBMPanel_newFolderButton:hover:active {
1826   background: linear-gradient(rgba(40,40,40,.9), rgba(70,70,70,.9));
1827   box-shadow: inset 0 0 3px rgba(0,0,0,.2), inset 0 1px 7px rgba(0,0,0,.4);
1828 }
1829
1830 #editBMPanel_newFolderButton:-moz-focusring {
1831   @hudButtonFocused@
1832 }
1833
1834 #editBMPanel_newFolderButton .button-text {
1835   display: none;
1836 }
1837
1838 #editBMPanel_folderMenuList {
1839   @hudButton@
1840   background-clip: padding-box;
1841   margin: 0;
1842   min-height: 22px;
1843   padding-top: 2px;
1844   padding-bottom: 1px;
1845   -moz-padding-start: 8px;
1846   -moz-padding-end: 4px;
1847 }
1848
1849 #editBMPanel_folderMenuList:-moz-focusring {
1850   @hudButtonFocused@
1851 }
1852
1853 #editBMPanel_folderMenuList[open="true"],
1854 #editBMPanel_folderMenuList:hover:active {
1855   @hudButtonPressed@
1856 }
1857
1858 #editBMPanel_folderMenuList > .menulist-dropmarker {
1859   -moz-appearance: none;
1860   display: -moz-box;
1861   background-color: transparent;
1862   border: 0;
1863   margin: 0;
1864   padding: 0;
1865   -moz-padding-end: 4px;
1866   width: 7px;
1867 }
1868
1869 #editBMPanel_folderMenuList > .menulist-dropmarker > .dropmarker-icon {
1870   list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
1871 }
1872
1873 /**** folder tree and tag selector ****/
1874
1875 #editBMPanel_folderTree,
1876 #editBMPanel_tagsSelector {
1877   -moz-appearance: none;
1878   background: linear-gradient(#fafafa, #fff);
1879   background-clip: padding-box;
1880   border-radius: 3px;
1881   border: 1px solid rgba(0,0,0,.3);
1882   box-shadow: inset 0 1px 1px 1px rgba(0,0,0,.05),
1883               0 1px rgba(255,255,255,.3);
1884   margin: 0;
1885 }
1886
1887 #editBMPanel_folderTree:-moz-focusring,
1888 #editBMPanel_tagsSelector:-moz-focusring {
1889   border-color: -moz-mac-focusring;
1890   box-shadow: @focusRingShadow@;
1891 }
1892
1893 #editBMPanel_folderTree {
1894   border-bottom: none;
1895   border-bottom-left-radius: 0;
1896   border-bottom-right-radius: 0;
1897   /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
1898   margin: 0 !important;
1899   min-width: 27em;
1900   position: relative;
1901 }
1902
1903 /**** expanders ****/
1904
1905 #editBookmarkPanel .expander-up,
1906 #editBookmarkPanel .expander-down {
1907   @hudButton@
1908   margin: 0;
1909   -moz-margin-start: 4px;
1910   min-width: 27px;
1911   min-height: 22px;
1912 }
1913
1914 #editBookmarkPanel .expander-up:-moz-focusring,
1915 #editBookmarkPanel .expander-down:-moz-focusring {
1916   @hudButtonFocused@
1917 }
1918
1919 #editBookmarkPanel .expander-up:hover:active,
1920 #editBookmarkPanel .expander-down:hover:active {
1921   @hudButtonPressed@
1922 }
1923
1924 #editBookmarkPanel .expander-up {
1925   list-style-image: url("chrome://browser/skin/panel-expander-open.png");
1926 }
1927
1928 #editBookmarkPanel .expander-down {
1929   list-style-image: url("chrome://browser/skin/panel-expander-closed.png");
1930 }
1931
1932 #editBookmarkPanel .expander-up > .button-box > .button-icon,
1933 #editBookmarkPanel .expander-down > .button-box > .button-icon {
1934   margin: 1px 0 0;
1935 }
1936
1937 #editBookmarkPanel .expander-up > .button-box > .button-text,
1938 #editBookmarkPanel .expander-down > .button-box > .button-text {
1939   display: none;
1940 }
1941
1942 @media (min-resolution: 2dppx) {
1943   #editBookmarkPanel .expander-up {
1944     list-style-image: url("chrome://browser/skin/panel-expander-open@2x.png");
1945   }
1946
1947   #editBookmarkPanel .expander-down {
1948     list-style-image: url("chrome://browser/skin/panel-expander-closed@2x.png");
1949   }
1950
1951   #editBookmarkPanel .expander-up > .button-box > .button-icon,
1952   #editBookmarkPanel .expander-down > .button-box > .button-icon {
1953     width: 9px;
1954   }
1955 }
1956
1957 #editBMPanel_tagsField > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input:-moz-placeholder {
1958   color: #bbb;
1959 }
1960
1961 .editBMPanel_rowLabel {
1962   text-align: end;
1963 }
1964
1965 .panel-promo-box {
1966   margin: 8px -16px -16px -16px;
1967   padding: 8px 16px;
1968   background: #e5e5e5;
1969   border-top: 1px solid hsla(0,0%,0%,.1);
1970   border-radius: 0 0 5px 5px;
1971   box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
1972   color: #808080;
1973 }
1974
1975 .panel-promo-icon {
1976   list-style-image: url("chrome://browser/skin/sync-notification-24.png");
1977   -moz-margin-end: 10px;
1978   vertical-align: middle;
1979 }
1980
1981 .panel-promo-closebutton {
1982   list-style-image: url("chrome://global/skin/icons/close.png");
1983   -moz-image-region: rect(0, 16px, 16px, 0);
1984   border: none;
1985   -moz-margin-end: -14px;
1986   margin-top: -8px;
1987 }
1988
1989 .panel-promo-closebutton:hover {
1990   -moz-image-region: rect(0, 32px, 16px, 16px);
1991 }
1992
1993 .panel-promo-closebutton:hover:active {
1994   -moz-image-region: rect(0, 48px, 16px, 32px);
1995 }
1996
1997 .panel-promo-closebutton > .toolbarbutton-text {
1998   padding: 0;
1999   margin: 0;
2000 }
2001
2002 @media (min-resolution: 2dppx) {
2003   .panel-promo-closebutton {
2004     list-style-image: url("chrome://global/skin/icons/close@2x.png");
2005     -moz-image-region: rect(0, 32px, 32px, 0);
2006   }
2007
2008   .panel-promo-closebutton:hover {
2009     -moz-image-region: rect(0, 64px, 32px, 32px);
2010   }
2011
2012   .panel-promo-closebutton:hover:active {
2013     -moz-image-region: rect(0, 96px, 32px, 64px);
2014   }
2015
2016   .panel-promo-closebutton > .toolbarbutton-icon {
2017     width: 16px;
2018   }
2019 }
2020
2021 /* ----- SIDEBAR ELEMENTS ----- */
2022
2023 #sidebar,
2024 sidebarheader {
2025   background-color: #d4dde5;
2026 }
2027
2028 #sidebar:-moz-window-inactive,
2029 sidebarheader:-moz-window-inactive {
2030   background-color: #e8e8e8;
2031 }
2032
2033 sidebarheader {
2034   padding: 2px;
2035   text-shadow: none;
2036 }
2037
2038 #sidebar-box {
2039   -moz-appearance: dialog;
2040   -moz-appearance: none;
2041 }
2042
2043 .sidebar-splitter {
2044   -moz-border-start: none;
2045   -moz-border-end: 1px solid #404040;
2046   min-width: 1px;
2047   width: 3px;
2048   background-image: none !important;
2049   background-color: transparent;
2050   -moz-margin-start: -3px;
2051   position: relative;
2052 }
2053
2054 #appcontent ~ .sidebar-splitter {
2055   -moz-border-start: 1px solid #404040;
2056   -moz-border-end: none;
2057   -moz-margin-start: 0;
2058   -moz-margin-end: -3px;
2059 }
2060
2061 #sidebar-title {
2062   color: #535f6d;
2063   font-weight: bold;
2064 }
2065
2066 #sidebar-throbber[loading="true"] {
2067   list-style-image: url("chrome://global/skin/icons/loading_16.png");
2068 }
2069
2070 sidebarheader > .tabs-closebutton > .toolbarbutton-text {
2071   display: none;
2072 }
2073
2074
2075 /* ----- THROBBER ----- */
2076
2077 #navigator-throbber {
2078   width: 17px;
2079   min-height: 16px;
2080   margin: 0 4px;
2081 }
2082
2083 #navigator-throbber[busy="true"] {
2084   list-style-image: url("chrome://global/skin/icons/loading_16.png");
2085 }
2086
2087 #wrapper-navigator-throbber > #navigator-throbber {
2088   list-style-image: url("chrome://global/skin/icons/notloading_16.png");
2089 }
2090
2091 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2092   display: none;
2093 }
2094
2095 .bookmark-item {
2096   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2097 }
2098
2099 @media (min-resolution: 2dppx) {
2100   .bookmark-item {
2101     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
2102   }
2103
2104   image.bookmark-item {
2105     width: 16px;
2106   }
2107 }
2108
2109 .openintabs-menuitem {
2110   list-style-image: none;
2111 }
2112
2113 /* ::::: tabbrowser ::::: */
2114
2115 .tabbrowser-tabbox {
2116   margin: 0;
2117 }
2118
2119 .tab-throbber,
2120 .tab-icon-image {
2121   width: 16px;
2122   height: 16px;
2123   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2124 }
2125
2126 .tab-throbber {
2127   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
2128 }
2129
2130 .tab-throbber[progress] {
2131   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
2132 }
2133
2134 @media (min-resolution: 2dppx) {
2135   .tab-throbber,
2136   .tab-icon-image {
2137     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
2138   }
2139
2140   .tab-throbber {
2141     list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png");
2142   }
2143
2144   .tab-throbber[progress] {
2145     list-style-image: url("chrome://browser/skin/tabbrowser/loading@2x.png");
2146   }
2147 }
2148
2149 .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-icon-image:not([selected="true"]) {
2150   opacity: .8;
2151 }
2152
2153 .tabbrowser-tab:not([pinned]):not([fadein]) {
2154   transition: min-width 200ms ease-out /* copied from browser/base/content/browser.css */,
2155               max-width 250ms ease-out /* copied from browser/base/content/browser.css */,
2156               opacity 50ms ease-out 100ms /* hide the tab for the last 100ms of the max-width transition */;
2157 }
2158
2159 .tab-stack {
2160   /* ensure stable tab height with and without toolbarbuttons on the tab bar */
2161   height: 26px;
2162 }
2163
2164 .tabbrowser-tab,
2165 .tabs-newtab-button {
2166   -moz-appearance: none;
2167   font: message-box;
2168   font-weight: bold;
2169   text-shadow: @loweredShadow@;
2170   margin: 0;
2171   padding: 0;
2172   border: none;
2173   text-align: center;
2174   -moz-box-align: stretch;
2175 }
2176
2177 %define TABSONTOP_TAB #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab
2178 %define TABSONBOTTOM_TAB #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab
2179 %define TABSONTOP_TAB_STACK #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab > .tab-stack
2180 %define TABSONBOTTOM_TAB_STACK #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-tab > .tab-stack
2181 %define TABSONTOP_NEWTAB_BUTTON #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button
2182 %define TABSONBOTTOM_NEWTAB_BUTTON #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button
2183
2184 @TABSONTOP_TAB_STACK@ > .tab-background {
2185   margin-top: 3px;
2186 }
2187
2188 @TABSONBOTTOM_TAB_STACK@ > .tab-background {
2189   margin-bottom: 3px;
2190 }
2191
2192 @TABSONTOP_TAB_STACK@ > .tab-background:not([selected="true"]):not(:-moz-lwtheme) {
2193   margin-bottom: 2px;
2194 }
2195
2196 @TABSONBOTTOM_TAB_STACK@ > .tab-background:not([selected="true"]) {
2197   margin-top: 2px;
2198 }
2199
2200 .tab-background,
2201 .tab-content,
2202 .tabs-newtab-button > .toolbarbutton-icon {
2203   -moz-margin-start: -5px;
2204   -moz-margin-end: -4px;
2205   pointer-events: none;
2206 }
2207
2208 .tab-close-button {
2209   pointer-events: auto;
2210 }
2211
2212 .tabbrowser-tabs[closebuttons="hidden"] > * > * > * > .tab-close-button:not([pinned]) {
2213   display: -moz-box;
2214   visibility: hidden;
2215 }
2216
2217 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2218   -moz-padding-start: 5px;
2219   -moz-padding-end: 4px;
2220 }
2221
2222 .tab-content,
2223 .tabs-newtab-button > .toolbarbutton-icon {
2224   -moz-box-align: center;
2225   border: solid transparent;
2226   border-width: 0 11px;
2227 }
2228
2229 .tab-background-start,
2230 .tab-background-end {
2231   width: 12px;
2232   height: 21px;
2233 }
2234
2235 .tab-background-middle {
2236   -moz-box-flex: 1;
2237 }
2238
2239 @TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
2240 @TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
2241   clip-path: url(chrome://browser/content/browser.xul#pinstripe-tab-ontop-left-curve-clip-path);
2242 }
2243
2244 @TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
2245 @TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
2246   clip-path: url(chrome://browser/content/browser.xul#pinstripe-tab-ontop-right-curve-clip-path);
2247 }
2248
2249 @TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(ltr),
2250 @TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(rtl) {
2251   clip-path: url(chrome://browser/content/browser.xul#pinstripe-tab-onbottom-left-curve-clip-path);
2252 }
2253
2254 @TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-end:-moz-locale-dir(ltr),
2255 @TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-start:-moz-locale-dir(rtl) {
2256   clip-path: url(chrome://browser/content/browser.xul#pinstripe-tab-onbottom-right-curve-clip-path);
2257 }
2258
2259 .tab-background-start[selected="true"]:not(:-moz-lwtheme),
2260 .tab-background-middle[selected="true"]:not(:-moz-lwtheme),
2261 .tab-background-end[selected="true"]:not(:-moz-lwtheme) {
2262   background-color: -moz-mac-chrome-active;
2263 }
2264
2265 .tab-background-start[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive,
2266 .tab-background-middle[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive,
2267 .tab-background-end[selected="true"]:not(:-moz-lwtheme):-moz-window-inactive {
2268   background-color: -moz-mac-chrome-inactive;
2269 }
2270
2271 .tab-background-start[pinned][titlechanged]:not([selected="true"]),
2272 .tab-background-end[pinned][titlechanged]:not([selected="true"]) {
2273   background-image: -moz-linear-gradient(rgba(148,205,253,.2), rgba(148,205,253,.2)) !important;
2274 }
2275
2276 @TABSONBOTTOM_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
2277   background-image: -moz-radial-gradient(center 99%, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
2278 }
2279
2280 @TABSONTOP_TAB_STACK@ > .tab-background > .tab-background-middle[pinned][titlechanged]:not([selected="true"]) {
2281   background-image: -moz-radial-gradient(center 2px, circle cover, rgba(254,254,255,1) 3%, rgba(210,235,255,.9) 12%, rgba(148,205,253,.6) 30%, rgba(148,205,253,.2) 70%);
2282 }
2283
2284 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-brighttext:not([selected="true"]),
2285 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-brighttext:not([selected="true"]),
2286 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-brighttext:not([selected="true"]) {
2287   background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 50%);
2288 }
2289
2290 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-start:-moz-lwtheme-darktext:not([selected="true"]),
2291 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-middle:-moz-lwtheme-darktext:not([selected="true"]),
2292 .tabbrowser-tab > .tab-stack > .tab-background > .tab-background-end:-moz-lwtheme-darktext:not([selected="true"]) {
2293   background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
2294 }
2295
2296 @TABSONTOP_TAB_STACK@ > .tab-content,
2297 @TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
2298   -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png) 0 11 fill repeat stretch;
2299 }
2300
2301 @TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
2302 @TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
2303   -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png) 0 11 fill repeat stretch;
2304 }
2305
2306 @TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
2307   -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png) 0 11 fill repeat stretch;
2308 }
2309
2310 @TABSONBOTTOM_TAB_STACK@ > .tab-content,
2311 @TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
2312   -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png) 0 11 fill repeat stretch;
2313 }
2314
2315 @media (min-resolution: 2dppx) {
2316   @TABSONTOP_TAB_STACK@ > .tab-content,
2317   @TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
2318     -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-normal-active@2x.png) 0 22 fill repeat stretch;
2319   }
2320
2321   @TABSONTOP_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
2322   @TABSONTOP_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
2323     -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-hover-active@2x.png) 0 22 fill repeat stretch;
2324   }
2325
2326   @TABSONTOP_TAB_STACK@ > .tab-content[selected="true"] {
2327     -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-top-selected-active@2x.png) 0 22 fill repeat stretch;
2328   }
2329 }
2330
2331 @TABSONBOTTOM_TAB@:hover > .tab-stack > .tab-content:not([selected="true"]),
2332 @TABSONBOTTOM_NEWTAB_BUTTON@:hover > .toolbarbutton-icon {
2333   -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png) 0 11 fill repeat stretch;
2334 }
2335
2336 @TABSONBOTTOM_TAB_STACK@ > .tab-content[selected="true"] {
2337   -moz-border-image: url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png) 0 11 fill repeat stretch;
2338 }
2339
2340 /* preloading hack */
2341 #TabsToolbar::after {
2342   content: '';
2343   display: block;
2344   background-image:
2345     url(chrome://browser/skin/tabbrowser/tab-top-normal-active.png),
2346     url(chrome://browser/skin/tabbrowser/tab-top-hover-active.png),
2347     url(chrome://browser/skin/tabbrowser/tab-top-selected-active.png),
2348     url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png),
2349     url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png),
2350     url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png),
2351     url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png),
2352     url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png),
2353     url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png),
2354     url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png);
2355 }
2356
2357 @media (min-resolution: 2dppx) {
2358   #TabsToolbar::after {
2359     content: '';
2360     display: block;
2361     background-image:
2362       url(chrome://browser/skin/tabbrowser/tab-top-normal-active@2x.png),
2363       url(chrome://browser/skin/tabbrowser/tab-top-hover-active@2x.png),
2364       url(chrome://browser/skin/tabbrowser/tab-top-selected-active@2x.png),
2365       url(chrome://browser/skin/tabbrowser/tab-bottom-normal-active.png),
2366       url(chrome://browser/skin/tabbrowser/tab-bottom-hover-active.png),
2367       url(chrome://browser/skin/tabbrowser/tab-bottom-selected-active.png),
2368       url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png),
2369       url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png),
2370       url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png),
2371       url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png);
2372   }
2373 }
2374
2375 .tabbrowser-tab:focus > .tab-stack {
2376   box-shadow: @focusRingShadow@;
2377 }
2378
2379 .tabbrowser-tab:not([selected="true"]):not(:hover):not(:-moz-lwtheme) {
2380   color: #222;
2381 }
2382
2383 .tabbrowser-tab[selected="true"] {
2384   color: #000;
2385   z-index: 1;
2386   position: relative;
2387 }
2388
2389 .tabbrowser-tab:-moz-lwtheme {
2390   color: inherit;
2391   text-shadow: inherit;
2392 }
2393
2394 #navigator-toolbox[tabsontop="true"]:not(:-moz-lwtheme)::before {
2395   /* We want the titlebar to be unified, but we still want to be able
2396    * to give #TabsToolbar a background. So we can't set -moz-appearance:
2397    * toolbar on #TabsToolbar itself. Instead, we set it on a box of the
2398    * right size which is put underneath #TabsToolbar.
2399    */
2400   content: '';
2401   display: block;
2402   -moz-appearance: toolbar;
2403   height: 25px;
2404   margin-bottom: -25px;
2405 }
2406
2407 #TabsToolbar {
2408   -moz-appearance: none;
2409   height: 26px;
2410   background-repeat: repeat-x;
2411 }
2412
2413 #TabsToolbar[tabsontop="false"] {
2414   margin-top: -2px;
2415   padding-top: 2px;
2416 }
2417
2418 /* For tabs-on-top, only fill the bottom 2px with the chrome background
2419  * color, so that the borders in tabbar-top-bg-*.png can mix with it.
2420  * In the top 24px the unified toolbar (from the ::before above) will show.
2421  */
2422 #TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme) {
2423   padding-bottom: 2px;
2424   background: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-active.png),
2425               -moz-linear-gradient(bottom, -moz-mac-chrome-active 2px, transparent 2px);
2426 }
2427
2428 #TabsToolbar[tabsontop="true"]:not(:-moz-lwtheme):-moz-window-inactive {
2429   background: url(chrome://browser/skin/tabbrowser/tabbar-top-bg-inactive.png),
2430               -moz-linear-gradient(bottom, -moz-mac-chrome-inactive 2px, transparent 2px);
2431 }
2432
2433 /* In tabs-on-bottom mode, fill the whole toolbar with the chrome
2434  * background color.
2435  */
2436 #TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme) {
2437   background: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-active.png) -moz-mac-chrome-active;
2438 }
2439
2440 #TabsToolbar[tabsontop="false"]:not(:-moz-lwtheme):-moz-window-inactive {
2441   background: url(chrome://browser/skin/tabbrowser/tabbar-bottom-bg-inactive.png) -moz-mac-chrome-inactive;
2442 }
2443
2444 #tabbrowser-tabs {
2445   -moz-box-align: stretch;
2446   height: 26px;
2447 }
2448
2449 #tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox:not(:-moz-lwtheme) {
2450   margin-bottom: -2px;
2451 }
2452
2453 #tabbrowser-tabs[tabsontop="false"] > .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2454   margin-top: -2px;
2455 }
2456
2457 @TABSONTOP_NEWTAB_BUTTON@ > .toolbarbutton-icon {
2458   padding: 4px 0 2px;
2459 }
2460
2461 @TABSONTOP_TAB_STACK@ > .tab-content {
2462   padding-top: 2px;
2463 }
2464
2465 @TABSONBOTTOM_NEWTAB_BUTTON@ > .toolbarbutton-icon {
2466   padding: 2px 0 4px;
2467 }
2468
2469 @TABSONBOTTOM_TAB_STACK@ > .tab-content {
2470   padding-bottom: 2px;
2471 }
2472
2473 /**
2474  * Tab Drag and Drop
2475  */
2476
2477 .tab-drop-indicator {
2478   list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator.png);
2479   margin-bottom: -8px;
2480 }
2481
2482 @media (min-resolution: 2dppx) {
2483   .tab-drop-indicator {
2484     list-style-image: url(chrome://browser/skin/tabbrowser/tabDragIndicator@2x.png);
2485     width: 12px;
2486   }
2487 }
2488
2489 /**
2490  * In-tab close button
2491  */
2492
2493 .tab-close-button > .toolbarbutton-icon {
2494   -moz-margin-end: 0px !important;
2495 }
2496
2497 .tab-close-button {
2498   list-style-image: url("chrome://global/skin/icons/close.png");
2499   -moz-appearance: none;
2500   border: none !important;
2501   padding: 0;
2502   margin: 0;
2503   background: none;
2504   cursor: default;
2505   -moz-image-region: rect(0, 16px, 16px, 0);
2506 }
2507
2508 .tab-close-button:hover {
2509   -moz-image-region: rect(0, 32px, 16px, 16px);
2510 }
2511
2512 .tab-close-button:hover:active {
2513   -moz-image-region: rect(0, 48px, 16px, 32px);
2514 }
2515
2516 @media (min-resolution: 2dppx) {
2517   .tab-close-button {
2518     list-style-image: url("chrome://global/skin/icons/close@2x.png");
2519     -moz-image-region: rect(0, 32px, 32px, 0);
2520   }
2521
2522   .tab-close-button:hover {
2523     -moz-image-region: rect(0, 64px, 32px, 32px);
2524   }
2525
2526   .tab-close-button:hover:active {
2527     -moz-image-region: rect(0, 96px, 32px, 64px);
2528   }
2529
2530   .tab-close-button > .toolbarbutton-icon {
2531     width: 16px;
2532   }
2533 }
2534
2535 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2536 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2537   -moz-image-region: rect(0, 13px, 20px, 0);
2538   margin: 0;
2539   padding: 0 4px;
2540   border: none;
2541 }
2542
2543 #tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-up,
2544 #tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-down,
2545 #tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon,
2546 #tabbrowser-tabs[tabsontop=false] > .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon {
2547   transform: scaleY(-1);
2548 }
2549
2550 .tabbrowser-arrowscrollbox > .scrollbutton-up {
2551   -moz-border-end: 2px solid transparent;
2552 }
2553
2554 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2555   -moz-border-start: 2px solid transparent;
2556   transition: 1s background-color ease-out;
2557 }
2558
2559 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2560   background-color: Highlight;
2561   transition: none;
2562 }
2563
2564 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr),
2565 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl) {
2566   list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
2567 }
2568
2569 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr),
2570 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) {
2571   list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right.png");
2572 }
2573
2574 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover,
2575 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover {
2576   -moz-image-region: rect(0, 26px, 20px, 13px);
2577 }
2578
2579 .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active,
2580 .tabbrowser-arrowscrollbox > .scrollbutton-down:hover:active {
2581   -moz-image-region: rect(0, 39px, 20px, 26px);
2582 }
2583
2584 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon,
2585 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon {
2586   -moz-image-region: rect(0, 13px, 20px, 0) !important;
2587   opacity: .5;
2588 }
2589
2590 @media (min-resolution: 2dppx) {
2591   .tabbrowser-arrowscrollbox > .scrollbutton-up,
2592   .tabbrowser-arrowscrollbox > .scrollbutton-down {
2593     -moz-image-region: rect(0, 26px, 40px, 0);
2594   }
2595
2596   .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(ltr),
2597   .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(rtl) {
2598     list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left@2x.png");
2599   }
2600
2601   .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr),
2602   .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl) {
2603     list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-right@2x.png");
2604   }
2605
2606   .tabbrowser-arrowscrollbox > .scrollbutton-up:hover,
2607   .tabbrowser-arrowscrollbox > .scrollbutton-down:hover {
2608     -moz-image-region: rect(0, 52px, 40px, 26px);
2609   }
2610
2611   .tabbrowser-arrowscrollbox > .scrollbutton-up:hover:active,
2612   .tabbrowser-arrowscrollbox > .scrollbutton-down:hover:active {
2613     -moz-image-region: rect(0, 78px, 40px, 52px);
2614   }
2615
2616   .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled] > .toolbarbutton-icon,
2617   .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] > .toolbarbutton-icon {
2618     -moz-image-region: rect(0, 26px, 40px, 0) !important;
2619   }
2620
2621   .tabbrowser-arrowscrollbox > .scrollbutton-up > .toolbarbutton-icon,
2622   .tabbrowser-arrowscrollbox > .scrollbutton-down > .toolbarbutton-icon {
2623     width: 13px;
2624   }
2625 }
2626
2627 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(ltr),
2628 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(rtl) {
2629   border-width: 0 2px 0 0;
2630   border-style: solid;
2631   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
2632 }
2633
2634 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
2635 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
2636   border-width: 0 0 0 2px;
2637   border-style: solid;
2638   -moz-border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
2639 }
2640
2641 /**
2642  * Tabstrip & add-on bar toolbar buttons
2643  */
2644
2645 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1,
2646 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
2647 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
2648   -moz-appearance: none;
2649   /* !important flags needed because of bug 561154: */
2650   margin: 0 !important;
2651   padding: 0 !important;
2652   border: none !important;
2653   border-radius: 0 !important;
2654   background: none !important;
2655   box-shadow: none !important;
2656 }
2657
2658 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([type="menu-button"]),
2659 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button,
2660 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
2661   margin: 0;
2662   padding: 0 1px;
2663 }
2664
2665 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
2666 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
2667 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([type="menu-button"]):not([disabled]):not([open]):hover,
2668 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover,
2669 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([disabled]):not([buttonover]):hover > .toolbarbutton-menubutton-dropmarker {
2670   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.15)) !important;
2671 }
2672
2673 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover:active,
2674 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover:active,
2675 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1:not([type="menu-button"]):not([disabled]):hover:active,
2676 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1[type="menu"][open],
2677 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled]):hover:active,
2678 :-moz-any(#TabsToolbar, #addon-bar) .toolbarbutton-1[open]:not([disabled]):hover > .toolbarbutton-menubutton-dropmarker {
2679   background-image: -moz-linear-gradient(transparent, rgba(0,0,0,.3)) !important;
2680 }
2681
2682 .tabs-newtab-button,
2683 #TabsToolbar > #new-tab-button,
2684 #TabsToolbar > toolbarpaletteitem > #new-tab-button {
2685   list-style-image: url(chrome://browser/skin/tabbrowser/newtab.png);
2686   -moz-image-region: rect(0, 18px, 20px, 0);
2687 }
2688
2689 .tabs-newtab-button:hover,
2690 #TabsToolbar > #new-tab-button:hover {
2691   -moz-image-region: rect(0, 36px, 20px, 18px);
2692 }
2693
2694 .tabs-newtab-button:hover:active,
2695 #TabsToolbar > #new-tab-button:hover:active {
2696   -moz-image-region: rect(0, 54px, 20px, 36px);
2697 }
2698
2699 @media (min-resolution: 2dppx) {
2700   .tabs-newtab-button,
2701   #TabsToolbar > #new-tab-button,
2702   #TabsToolbar > toolbarpaletteitem > #new-tab-button {
2703     list-style-image: url(chrome://browser/skin/tabbrowser/newtab@2x.png);
2704     -moz-image-region: rect(0, 36px, 40px, 0);
2705   }
2706
2707   .tabs-newtab-button:hover,
2708   #TabsToolbar > #new-tab-button:hover {
2709     -moz-image-region: rect(0, 72px, 40px, 36px);
2710   }
2711
2712   .tabs-newtab-button:hover:active,
2713   #TabsToolbar > #new-tab-button:hover:active {
2714     -moz-image-region: rect(0, 108px, 40px, 72px);
2715   }
2716
2717   .tabs-newtab-button > .toolbarbutton-icon {
2718     width: 40px;
2719   }
2720
2721   #TabsToolbar > #new-tab-button > .toolbarbutton-icon,
2722   #TabsToolbar > toolbarpaletteitem > #new-tab-button > .toolbarbutton-icon {
2723     width: 18px;
2724   }
2725 }
2726
2727 #TabsToolbar #alltabs-button {
2728   list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon.png);
2729   -moz-image-region: rect(0, 17px, 20px, 0);
2730 }
2731
2732 #TabsToolbar > #alltabs-button:not([disabled="true"]):hover {
2733   -moz-image-region: rect(0, 34px, 20px, 17px);
2734 }
2735
2736 #TabsToolbar > #alltabs-button[type="menu"][open="true"]:not([disabled="true"]),
2737 #TabsToolbar > #alltabs-button:not([disabled="true"]):hover:active {
2738   -moz-image-region: rect(0, 51px, 20px, 34px);
2739 }
2740
2741 @media (min-resolution: 2dppx) {
2742   #TabsToolbar #alltabs-button {
2743     list-style-image: url(chrome://browser/skin/tabbrowser/alltabs-box-bkgnd-icon@2x.png);
2744     -moz-image-region: rect(0, 34px, 40px, 0);
2745   }
2746
2747   #TabsToolbar > #alltabs-button:not([disabled="true"]):hover {
2748     -moz-image-region: rect(0, 68px, 40px, 34px);
2749   }
2750
2751   #TabsToolbar > #alltabs-button[type="menu"][open="true"]:not([disabled="true"]),
2752   #TabsToolbar > #alltabs-button:not([disabled="true"]):hover:active {
2753     -moz-image-region: rect(0, 102px, 40px, 68px);
2754   }
2755
2756   #TabsToolbar #alltabs-button > .toolbarbutton-icon {
2757     width: 17px;
2758   }
2759 }
2760
2761 #alltabs-button[type="menu"] > .toolbarbutton-menu-dropmarker {
2762   display: none;
2763 }
2764
2765 #alltabs-button > .toolbarbutton-icon {
2766   -moz-margin-end: 2px;
2767 }
2768
2769 /* All Tabs Menupopup */
2770 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2771   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2772 }
2773
2774 @media (min-resolution: 2dppx) {
2775   .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2776     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
2777   }
2778 }
2779
2780 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2781   list-style-image: url("chrome://global/skin/icons/loading_16.png") !important;
2782 }
2783
2784 .alltabs-item[tabIsVisible] {
2785   /* box-shadow instead of background-color to work around native styling */
2786   box-shadow: inset -5px 0 ThreeDShadow;
2787 }
2788
2789 /* Tabstrip close button */
2790 .tabs-closebutton {
2791   -moz-padding-end: 4px;
2792   list-style-image: url("chrome://global/skin/icons/close.png");
2793   -moz-image-region: rect(0, 16px, 16px, 0);
2794   border: none;
2795 }
2796
2797 #sidebar-header > .tabs-closebutton {
2798   list-style-image: url("chrome://global/skin/icons/close-sidebar.png");
2799 }
2800
2801 .tabs-closebutton:hover {
2802   -moz-image-region: rect(0, 32px, 16px, 16px);
2803 }
2804
2805 .tabs-closebutton:hover:active {
2806   -moz-image-region: rect(0, 48px, 16px, 32px);
2807 }
2808
2809 @media (min-resolution: 2dppx) {
2810   :not(#sidebar-header) > .tabs-closebutton {
2811     list-style-image: url("chrome://global/skin/icons/close@2x.png");
2812     -moz-image-region: rect(0, 32px, 32px, 0);
2813   }
2814
2815   :not(#sidebar-header) > .tabs-closebutton:hover {
2816     -moz-image-region: rect(0, 64px, 32px, 32px);
2817   }
2818
2819   :not(#sidebar-header) > .tabs-closebutton:hover:active {
2820     -moz-image-region: rect(0, 96px, 32px, 64px);
2821   }
2822
2823   :not(#sidebar-header) > .tabs-closebutton > .toolbarbutton-icon {
2824     width: 16px;
2825   }
2826 }
2827
2828 /* Bookmarks toolbar */
2829 #PlacesToolbarDropIndicator {
2830   list-style-image: url(chrome://browser/skin/places/toolbarDropMarker.png);
2831 }
2832
2833 /* Bookmark drag and drop styles */
2834
2835 .bookmark-item[dragover-into="true"] {
2836   background: Highlight !important;
2837   color: HighlightText !important;
2838 }
2839
2840 /* rules for menupopup drop indicators */
2841 .menupopup-drop-indicator-bar {
2842   position: relative;
2843   /* these two margins must together compensate the indicator's height */
2844   margin-top: -1px;
2845   margin-bottom: -1px;
2846 }
2847
2848 .menupopup-drop-indicator {
2849   list-style-image: none;
2850   height: 2px;
2851   -moz-margin-end: -4em;
2852   background-color: Highlight;
2853 }
2854
2855 #customizeToolbarSheetPopup {
2856   -moz-window-shadow: sheet;
2857 }
2858
2859 /* Popup Icons */
2860 #identity-popup-icon {
2861   height: 64px;
2862   width: 64px;
2863   padding: 0;
2864   list-style-image: url("chrome://browser/skin/identity.png");
2865   -moz-image-region: rect(0px, 64px, 64px, 0px);
2866 }
2867
2868 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2869   -moz-image-region: rect(64px, 64px, 128px, 0px);
2870 }
2871
2872 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2873   -moz-image-region: rect(128px, 64px, 192px, 0px);
2874 }
2875
2876 @media (min-resolution: 2dppx) {
2877   #identity-popup-icon {
2878     list-style-image: url("chrome://browser/skin/identity@2x.png");
2879     -moz-image-region: rect(0px, 128px, 128px, 0px);
2880   }
2881
2882   #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2883     -moz-image-region: rect(128px, 128px, 256px, 0px);
2884   }
2885
2886   #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2887     -moz-image-region: rect(256px, 128px, 384px, 0px);
2888   }
2889 }
2890
2891 /* Popup Body Text */
2892 .identity-popup-description {
2893   white-space: pre-wrap;
2894   -moz-padding-start: 15px;
2895   margin: 2px 0 4px;
2896 }
2897
2898 .identity-popup-label {
2899   white-space: pre-wrap;
2900   -moz-padding-start: 15px;
2901   margin: 0;
2902 }
2903
2904 #identity-popup-content-host ,
2905 #identity-popup-content-owner {
2906   font-weight: bold;
2907   max-width: 300px;
2908 }
2909
2910 #identity-popup-content-host ,
2911 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2912   font-size: 140%;
2913 }
2914
2915 #identity-popup-content-owner {
2916   margin-bottom: 0 !important;
2917 }
2918
2919 #identity-popup-content-verifier {
2920   margin: 4px 0 2px;
2921 }
2922
2923 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2924 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2925   margin-top: 10px;
2926   -moz-margin-start: -24px;
2927 }
2928
2929 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2930 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2931   margin-top: 5px;
2932   list-style-image: url("chrome://browser/skin/Secure-Glyph.png");
2933 }
2934
2935 @media (min-resolution: 2dppx) {
2936   #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2937   #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2938     list-style-image: url("chrome://browser/skin/Secure-Glyph@2x.png");
2939     width: 24px;
2940   }
2941 }
2942
2943 #notification-popup-box {
2944   position: relative;
2945   background-color: #fff;
2946   background-clip: padding-box;
2947   padding-left: 3px;
2948   border-radius: 2px 0 0 2px;
2949   border-width: 0 8px 0 0;
2950   border-style: solid;
2951   -moz-border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 fill;
2952   -moz-margin-end: -8px;
2953 }
2954
2955 @media (min-resolution: 2dppx) {
2956   #notification-popup-box {
2957     -moz-border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
2958   }
2959 }
2960
2961 @conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box {
2962   padding-left: 7px;
2963 }
2964
2965 #notification-popup-box:-moz-locale-dir(rtl),
2966 .notification-anchor-icon:-moz-locale-dir(rtl) {
2967   transform: scaleX(-1);
2968 }
2969
2970 .notification-anchor-icon {
2971   width: 16px;
2972   height: 16px;
2973   margin: 0 2px;
2974 }
2975
2976 .notification-anchor-icon:-moz-focusring {
2977   box-shadow: 0 0 2px 1px -moz-mac-focusring inset,
2978               0 0 3px 2px -moz-mac-focusring;
2979 }
2980
2981 #default-notification-icon {
2982   list-style-image: url(chrome://global/skin/icons/information-16.png);
2983 }
2984
2985 #identity-notification-icon {
2986   list-style-image: url(chrome://mozapps/skin/profile/profileicon.png);
2987 }
2988
2989 #geo-notification-icon {
2990   list-style-image: url(chrome://browser/skin/Geolocation-16.png);
2991 }
2992
2993 @media (min-resolution: 2dppx) {
2994   #geo-notification-icon {
2995     list-style-image: url(chrome://browser/skin/Geolocation-16@2x.png);
2996   }
2997 }
2998
2999 #notification-popup .text-link, .panel-arrowcontent .text-link {
3000   color: #0073e6;
3001   text-decoration: none;
3002 }
3003
3004 .geolocation-text-link {
3005   -moz-margin-start: 0; /* override default label margin to match description margin */
3006 }
3007
3008 #addons-notification-icon {
3009   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric-16.png);
3010 }
3011
3012 #password-notification-icon {
3013   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3014 }
3015
3016 #webapps-notification-icon {
3017   list-style-image: url(chrome://browser/skin/webapps-16.png);
3018 }
3019
3020 @media (min-resolution: 2dppx) {
3021   #webapps-notification-icon {
3022     list-style-image: url(chrome://browser/skin/webapps-16@2x.png);
3023   }
3024 }
3025
3026 #plugins-notification-icon {
3027   list-style-image: url(chrome://mozapps/skin/plugins/pluginGeneric-16.png);
3028 }
3029
3030 .popup-notification-icon {
3031   width: 64px;
3032   height: 64px;
3033   -moz-margin-end: 10px;
3034 }
3035
3036 .popup-notification-icon[popupid="geolocation"] {
3037   list-style-image: url(chrome://browser/skin/Geolocation-64.png);
3038 }
3039
3040 @media (min-resolution: 2dppx) {
3041   .popup-notification-icon[popupid="geolocation"] {
3042     list-style-image: url(chrome://browser/skin/Geolocation-64@2x.png);
3043   }
3044 }
3045
3046 .popup-notification-icon[popupid="xpinstall-disabled"],
3047 .popup-notification-icon[popupid="addon-progress"],
3048 .popup-notification-icon[popupid="addon-install-cancelled"],
3049 .popup-notification-icon[popupid="addon-install-blocked"],
3050 .popup-notification-icon[popupid="addon-install-failed"],
3051 .popup-notification-icon[popupid="addon-install-complete"] {
3052   list-style-image: url(chrome://mozapps/skin/extensions/extensionGeneric.png);
3053   width: 32px;
3054   height: 32px;
3055 }
3056
3057 .popup-notification-icon[popupid="click-to-play-plugins"] {
3058   list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3059 }
3060
3061 .addon-progress-description {
3062   width: 350px;
3063   max-width: 350px;
3064 }
3065
3066 .popup-progress-label,
3067 .popup-progress-meter {
3068   -moz-margin-start: 0;
3069   -moz-margin-end: 0;
3070 }
3071
3072 .popup-progress-cancel {
3073   -moz-appearance: none;
3074   min-height: 16px;
3075   min-width: 16px;
3076   max-height: 16px;
3077   max-width: 16px;
3078   padding: 0;
3079   margin: 0 1px 0 1px;
3080   list-style-image: url(chrome://mozapps/skin/downloads/buttons.png);
3081   -moz-image-region: rect(0px, 16px, 16px, 0px);
3082 }
3083
3084 .popup-progress-cancel:hover {
3085   -moz-image-region: rect(0px, 32px, 16px, 16px);
3086 }
3087
3088 .popup-progress-cancel:active {
3089   -moz-image-region: rect(0px, 48px, 16px, 32px);
3090 }
3091
3092 #indexedDB-notification-icon {
3093   list-style-image: url(chrome://global/skin/icons/question-16.png);
3094 }
3095
3096 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3097 .popup-notification-icon[popupid="indexedDB-quota-prompt"] {
3098   list-style-image: url(chrome://global/skin/icons/question-64.png);
3099 }
3100
3101 .popup-notification-icon[popupid="password-save"],
3102 .popup-notification-icon[popupid="password-change"] {
3103   list-style-image: url(chrome://mozapps/skin/passwordmgr/key-64.png);
3104 }
3105
3106 .popup-notification-icon[popupid="webapps-install"] {
3107   list-style-image: url(chrome://browser/skin/webapps-64.png);
3108 }
3109
3110 /* Popup Buttons */
3111 #identity-popup-more-info-button {
3112   @hudButton@
3113   margin: 10px 0 0;
3114   min-height: 0px;
3115 }
3116
3117 #identity-popup-more-info-button:focus {
3118   @hudButtonFocused@
3119 }
3120
3121 #identity-popup-more-info-button:hover:active {
3122   @hudButtonPressed@
3123 }
3124
3125 #download-monitor {
3126   list-style-image: url("chrome://mozapps/skin/downloads/downloadStatusIcon.png");
3127 }
3128
3129 /* ::::: Keyboard UI Panel ::::: */
3130
3131 .KUI-panel {
3132   -moz-appearance: none;
3133   background: rgba(27%,27%,27%,.9) url(KUI-background.png) repeat-x;
3134   color: white;
3135   border-style: none;
3136   border-radius: 20px;
3137 }
3138
3139 .KUI-panel[level="top"] {
3140   background-color: rgba(27%,27%,27%,.65);
3141   -moz-window-shadow: none;
3142 }
3143
3144 .KUI-panel-closebutton {
3145   list-style-image: url(KUI-close.png);
3146   -moz-appearance: none;
3147   border: none;
3148   padding: 0;
3149   width: 24px;
3150   height: 24px;
3151 }
3152
3153 .KUI-panel-closebutton:not(:hover) {
3154   opacity: .6;
3155 }
3156
3157 .KUI-panel-closebutton > .toolbarbutton-icon {
3158   margin: 0;
3159 }
3160
3161 /* ::::: Ctrl-Tab and All Tabs Panels ::::: */
3162
3163 /* Ctrl-Tab */
3164
3165 #ctrlTab-panel {
3166   padding: 20px 10px 10px;
3167   text-shadow: 0 0 1px rgb(27%,27%,27%), 0 0 2px rgb(27%,27%,27%);
3168 }
3169
3170 .ctrlTab-favicon[src] {
3171   background-color: white;
3172   width: 20px;
3173   height: 20px;
3174   padding: 2px;
3175 }
3176
3177 .ctrlTab-preview-inner > .tabPreview-canvas {
3178   box-shadow: 1px 1px 2px rgb(12%,12%,12%);
3179 }
3180
3181 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3182   margin-bottom: 2px;
3183 }
3184
3185 .ctrlTab-preview-inner {
3186   padding-bottom: 10px;
3187 }
3188
3189 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3190   padding: 10px;
3191   background-color: rgba(255,255,255,.2);
3192   border-radius: .5em;
3193 }
3194
3195 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3196   color: white;
3197   background-color: rgba(0,0,0,.6);
3198   text-shadow: none;
3199   padding: 8px;
3200   border: 2px solid white;
3201   border-radius: .5em;
3202 }
3203
3204 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3205   margin: -10px -10px 0;
3206 }
3207
3208 #ctrlTab-showAll {
3209   margin-top: .5em;
3210 }
3211
3212 /* All Tabs */
3213
3214 #allTabs-panel {
3215   padding-bottom: 10px;
3216   -moz-appearance: none;
3217   border: none;
3218   background: -moz-dialog;
3219   color: -moz-dialogText;
3220 }
3221
3222 #allTabs-meta {
3223   margin: 10px;
3224 }
3225
3226 #allTabs-filter {
3227   -moz-margin-start: 24px;
3228   -moz-margin-end: 0;
3229 }
3230
3231 #allTabs-tab-close-button > .toolbarbutton-icon {
3232   margin: 0;
3233 }
3234
3235 .allTabs-favicon[src] {
3236   background-color: -moz-dialog;
3237   width: 20px;
3238   height: 20px;
3239   padding-bottom: 4px;
3240   -moz-padding-start: 4px;
3241   border-bottom-left-radius: 4px;
3242 }
3243
3244 .allTabs-favicon[src]:-moz-locale-dir(rtl) {
3245   border-bottom-left-radius: 0;
3246   border-bottom-right-radius: 4px;
3247 }
3248
3249 .allTabs-preview:not(:focus) > * > .allTabs-favicon-container > .allTabs-favicon[src] {
3250   width: 22px;
3251   height: 22px;
3252   padding-top: 2px;
3253   -moz-padding-end: 2px;
3254   margin-top: -2px;
3255   -moz-margin-end: -2px;
3256 }
3257
3258 .allTabs-preview-inner > .tabPreview-canvas {
3259   background-color: rgb(60%,60%,60%);
3260   box-shadow: 0 0 1.5px ThreeDShadow;
3261 }
3262
3263 .allTabs-preview:not(:hover):not([closebuttonhover]) > html|canvas {
3264   opacity: .8;
3265 }
3266
3267 .allTabs-preview:focus > * > .allTabs-preview-inner {
3268   box-shadow: @focusRingShadow@;
3269 }
3270
3271 /* Add-on bar */
3272
3273 #addon-bar {
3274   min-height: 18px;
3275   padding-right: 16px; /* replace with -moz-padding-end when/if bug 631729 gets fixed */
3276 }
3277
3278 #addon-bar:not(:-moz-lwtheme) {
3279   -moz-appearance: statusbar;
3280 }
3281
3282 #status-bar {
3283   -moz-appearance: none;
3284   padding-right: 0;
3285 }
3286
3287 #addon-bar[customizing] > #status-bar {
3288   opacity: .5;
3289   background-image: -moz-repeating-linear-gradient(-45deg,
3290                                                    rgba(255,255,255,.3), rgba(255,255,255,.3) 5px,
3291                                                    rgba(0,0,0,.3) 5px, rgba(0,0,0,.3) 10px);
3292 }
3293
3294 #status-bar > statusbarpanel {
3295   border-width: 0;
3296   -moz-appearance: none;
3297 }
3298
3299 #addonbar-closebutton {
3300   padding: 0;
3301   margin: 0 6px;
3302   list-style-image: url("chrome://global/skin/icons/close.png");
3303   border: none;
3304   -moz-image-region: rect(0, 16px, 16px, 0);
3305 }
3306
3307 #addonbar-closebutton:hover {
3308   -moz-image-region: rect(0, 32px, 16px, 16px);
3309 }
3310
3311 #addonbar-closebutton:hover:active {
3312   -moz-image-region: rect(0, 48px, 16px, 32px);
3313 }
3314
3315 @media (min-resolution: 2dppx) {
3316   #addonbar-closebutton {
3317     list-style-image: url("chrome://global/skin/icons/close@2x.png");
3318     -moz-image-region: rect(0, 32px, 32px, 0);
3319   }
3320
3321   #addonbar-closebutton:hover {
3322     -moz-image-region: rect(0, 64px, 32px, 32px);
3323   }
3324
3325   #addonbar-closebutton:hover:active {
3326     -moz-image-region: rect(0, 96px, 32px, 64px);
3327   }
3328
3329   #addonbar-closebutton > .toolbarbutton-icon {
3330     width: 16px;
3331   }
3332 }
3333
3334 /* Status panel */
3335
3336 .statuspanel-label {
3337   margin: 0;
3338   padding: 2px 4px;
3339   background: -moz-linear-gradient(white, #ddd);
3340   border: 1px none #ccc;
3341   border-top-style: solid;
3342   color: #333;
3343   text-shadow: none;
3344 }
3345
3346 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3347 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3348   border-right-style: solid;
3349   border-top-right-radius: .3em;
3350   margin-right: 1em;
3351 }
3352
3353 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3354 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3355   border-left-style: solid;
3356   border-top-left-radius: .3em;
3357   margin-left: 1em;
3358 }
3359
3360
3361 /* Highlighter */
3362
3363 #highlighter-outline {
3364   box-shadow: 0 0 0 1px black;
3365   outline: 1px dashed white;
3366   outline-offset: -1px;
3367 }
3368
3369 #highlighter-outline[locked]  {
3370   box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
3371   outline-color: rgba(255,255,255,0.7);
3372 }
3373
3374 /* Highlighter toolbar */
3375
3376 #inspector-inspect-toolbutton {
3377   list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
3378   -moz-image-region: rect(0px 16px 16px 0px);
3379 }
3380
3381 #inspector-inspect-toolbutton[checked=true] {
3382   -moz-image-region: rect(0px 32px 16px 16px);
3383 }
3384
3385 #inspector-toolbar,
3386 #developer-toolbar {
3387   border-top: 1px solid hsla(210, 8%, 5%, .65);
3388   padding-top: 4px;
3389   padding-bottom: 4px;
3390 }
3391
3392 #inspector-toolbar:-moz-locale-dir(ltr),
3393 #developer-toolbar:-moz-locale-dir(ltr) {
3394   padding-left: 2px;
3395   padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
3396 }
3397
3398 #inspector-toolbar:-moz-locale-dir(rtl),
3399 #developer-toolbar:-moz-locale-dir(rtl) {
3400   padding-left: 4px;
3401   padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
3402 }
3403
3404 #devtools-side-splitter {
3405   background-image: none !important;
3406   border: 0;
3407   -moz-border-start: 1px solid #242b33;
3408   min-width: 0;
3409   width: 3px;
3410   background-color: transparent;
3411   -moz-margin-end: -3px;
3412   position: relative;
3413 }
3414
3415 /* Lion Fullscreen window styling */
3416 @media (-moz-mac-lion-theme) {
3417   #navigator-toolbox[inFullscreen][tabsontop="true"]:not(:-moz-lwtheme)::before {
3418     height: 36px;
3419   }
3420   #main-window[inFullscreen]:-moz-lwtheme {
3421     /* This additional padding matches the change in height in the pseudo-element
3422      * above. The rules combined force the top 22px of the background image to
3423      * be hidden, so there image doesn't jump around with the loss of the titlebar */
3424     padding-top: 11px;
3425     background-position: right -11px;
3426   }
3427 }
3428
3429 #devtools-sidebar-box {
3430   background-color: -moz-Field;
3431 }
3432
3433 /* Highlighter - Node Infobar */
3434
3435 #highlighter-nodeinfobar {
3436   color: hsl(200, 100%, 65%);
3437   border: 1px solid hsla(210, 19%, 63%, .5);
3438   border-radius: 3px;
3439   background: -moz-linear-gradient(hsl(209, 18%, 30%), hsl(210, 24%, 16%)) no-repeat padding-box;
3440 }
3441
3442 /* Highlighter - Node Infobar - text */
3443
3444 #highlighter-nodeinfobar-text {
3445   /* 100% - size of the buttons + margins */
3446   max-width: calc(100% - 2 * (26px + 6px));
3447   padding-bottom: 1px;
3448 }
3449
3450 html|*#highlighter-nodeinfobar-tagname {
3451   color: white;
3452 }
3453
3454 html|*#highlighter-nodeinfobar-id {
3455   color: hsl(90, 79%, 52%);
3456 }
3457
3458 html|*#highlighter-nodeinfobar-pseudo-classes {
3459   color: hsl(20, 100%, 70%);
3460 }
3461
3462 /* Highlighter - Node Infobar - buttons */
3463
3464 .highlighter-nodeinfobar-button {
3465   -moz-appearance: none;
3466   border: 0 solid hsla(210,8%,5%,.45);
3467   padding: 0;
3468   width: 26px;
3469   min-height: 26px;
3470   background-color: transparent;
3471 }
3472
3473 #highlighter-nodeinfobar-inspectbutton {
3474   -moz-border-end-width: 1px;
3475   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
3476   -moz-margin-end: 6px;
3477   list-style-image: url("chrome://browser/skin/devtools/inspect-button.png");
3478   -moz-image-region: rect(0px 16px 16px 0px);
3479 }
3480
3481 #highlighter-nodeinfobar-inspectbutton:-moz-locale-dir(rtl) {
3482   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
3483 }
3484
3485 #highlighter-nodeinfobar-inspectbutton:active:hover,
3486 #highlighter-nodeinfobar-container:not([locked]) >  #highlighter-nodeinfobar >  #highlighter-nodeinfobar-inspectbutton {
3487   -moz-image-region: rect(0px 32px 16px 16px);
3488 }
3489
3490 #highlighter-nodeinfobar-menu {
3491   -moz-border-start-width: 1px;
3492   box-shadow: -1px 0 0 hsla(210,16%,76%,.15), 1px 0 0 hsla(210,16%,76%,.15) inset;
3493   -moz-margin-start: 6px;
3494 }
3495
3496 #highlighter-nodeinfobar-menu:-moz-locale-dir(rtl) {
3497   box-shadow: 1px 0 0 hsla(210,16%,76%,.15), -1px 0 0 hsla(210,16%,76%,.15) inset;
3498 }
3499
3500 #highlighter-nodeinfobar-menu > .toolbarbutton-menu-dropmarker {
3501   -moz-appearance: none !important;
3502   list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3503   -moz-box-align: center;
3504   -moz-margin-start: -1px;
3505 }
3506
3507 /* Highlighter - Node Infobar - box & arrow */
3508
3509 .highlighter-nodeinfobar-arrow {
3510   width: 14px;
3511   height: 14px;
3512   -moz-margin-start: calc(50% - 7px);
3513   transform: rotate(-45deg);
3514   border: 1px solid transparent;
3515   background-clip: padding-box;
3516   background-repeat: no-repeat;
3517 }
3518
3519 #highlighter-nodeinfobar-arrow-top {
3520   margin-bottom: -8px;
3521   margin-top: 8px;
3522   border-right-color: hsla(210, 19%, 63%, .5);
3523   border-top-color: hsla(210, 19%, 63%, .5);
3524   background-image: -moz-linear-gradient(bottom left, transparent 50%, hsl(209, 18%, 30%) 50%);
3525 }
3526
3527 #highlighter-nodeinfobar-arrow-bottom {
3528   margin-top: -8px;
3529   margin-bottom: 8px;
3530   border-left-color: hsla(210, 19%, 63%, .5);
3531   border-bottom-color: hsla(210, 19%, 63%, .5);
3532   background-image: -moz-linear-gradient(top right, transparent 50%, hsl(210, 24%, 16%) 50%);
3533 }
3534
3535 #highlighter-nodeinfobar-container[position="top"] > #highlighter-nodeinfobar,
3536 #highlighter-nodeinfobar-container[position="overlap"] > #highlighter-nodeinfobar {
3537   box-shadow: 0 1px 0 hsla(0, 0%, 100%, .1) inset;
3538 }
3539
3540 #highlighter-nodeinfobar-container[hide-arrow] > #highlighter-nodeinfobar {
3541   margin: 7px 0;
3542 }
3543
3544 #full-screen-warning-message {
3545   background-color: hsl(0,0%,15%);
3546   color: white;
3547   border-radius: 8px;
3548   margin-top: 30px;
3549   padding: 30px 50px;
3550   box-shadow: 0 0 2px white;
3551 }
3552
3553 #full-screen-warning-container[obscure-browser] {
3554   background-color: rgba(0,0,0,0.3);
3555 }
3556
3557 .full-screen-description {
3558   font-size: 150%;
3559 }
3560
3561 #full-screen-domain-text {
3562   font-size: 300%;
3563 }
3564
3565 .full-screen-approval-button,
3566 #full-screen-remember-decision {
3567   font-size: 120%;
3568 }
3569
3570 /* Highlighter toolbar - breadcrumbs */
3571
3572 #inspector-breadcrumbs {
3573   -moz-margin-end: 3px;
3574   /* A fake 1px-shadow is included in the border-images of the
3575      inspector-breadcrumbs-buttons, to match toolbar-buttons style.
3576      This negative margin compensate the extra row of pixels created
3577      by the shadow.*/
3578   margin-bottom: -1px;
3579 }
3580
3581 #inspector-breadcrumbs > .scrollbutton-up,
3582 #inspector-breadcrumbs > .scrollbutton-down {
3583   -moz-appearance: none;
3584   border: 1px solid hsla(210,8%,5%,.45);
3585   background: -moz-linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
3586   box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
3587   margin: 0 0 1px;
3588 }
3589
3590 #inspector-breadcrumbs > .scrollbutton-up {
3591   -moz-border-start-width: 0;
3592 }
3593
3594 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover,
3595 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover {
3596   border-color: hsla(210,8%,5%,.6);
3597   background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3598   box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
3599 }
3600
3601 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon,
3602 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon {
3603   -moz-appearance: none;
3604   list-style-image: url("chrome://browser/skin/devtools/breadcrumbs-scrollbutton.png");
3605   -moz-image-region: rect(0px 7px 16px 0px);
3606   margin: 0 5px;
3607 }
3608
3609 #inspector-breadcrumbs > .scrollbutton-up[disabled] > .toolbarbutton-icon,
3610 #inspector-breadcrumbs > .scrollbutton-down[disabled] > .toolbarbutton-icon {
3611   opacity: 0.5;
3612 }
3613
3614 #inspector-breadcrumbs > .scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
3615 #inspector-breadcrumbs > .scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
3616   -moz-image-region: rect(0px 14px 16px 7px);
3617 }
3618
3619 #inspector-breadcrumbs > .scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
3620 #inspector-breadcrumbs > .scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
3621   transform: scaleX(-1);
3622 }
3623
3624 .inspector-breadcrumbs-button {
3625   -moz-appearance: none;
3626   border-style: solid;
3627   border-width: 1px 13px 2px 13px;
3628   color: hsl(210,30%,85%);
3629   width: 85px; /* Can't use max-width. See bug 723132 */
3630   /* The content of the button can be larger than the button */
3631   overflow: hidden;
3632   min-height: 25px;
3633
3634   margin: 0 -11px 0 0;
3635   padding: 0 9px;
3636 }
3637
3638 .inspector-breadcrumbs-button:-moz-focusring > label {
3639   border-bottom: 1px dotted hsla(210,30%,85%,0.4);
3640 }
3641
3642 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-tag {
3643   color: hsl(208,100%,60%);
3644 }
3645
3646 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-id {
3647   color: hsl(205,100%,70%);
3648 }
3649
3650 .inspector-breadcrumbs-button[checked] > .inspector-breadcrumbs-pseudo-classes {
3651   color: hsl(20, 100%, 70%);
3652 }
3653
3654 .inspector-breadcrumbs-id,
3655 .inspector-breadcrumbs-classes {
3656   color: #8d99a6;
3657 }
3658
3659 .inspector-breadcrumbs-pseudo-classes {
3660   color: hsl(20, 100%, 85%);
3661 }
3662
3663 /* Highlighter toolbar - breadcrumbs - LTR */
3664
3665 .inspector-breadcrumbs-button:-moz-locale-dir(ltr):first-of-type {
3666   border-left-width: 0;
3667 }
3668
3669 .inspector-breadcrumbs-button {
3670   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
3671 }
3672
3673 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]),
3674 .inspector-breadcrumbs-button:not([checked]):hover:active {
3675   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
3676 }
3677
3678 .inspector-breadcrumbs-button[checked] {
3679   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
3680 }
3681
3682 .inspector-breadcrumbs-button[checked][siblings-menu-open],
3683 .inspector-breadcrumbs-button[checked]:hover:active {
3684   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
3685 }
3686
3687 .inspector-breadcrumbs-button:first-of-type {
3688   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
3689 }
3690
3691 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]),
3692 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active {
3693   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
3694 }
3695
3696 .inspector-breadcrumbs-button:first-of-type[checked] {
3697   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
3698 }
3699
3700 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked],
3701 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active {
3702   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
3703 }
3704
3705 .inspector-breadcrumbs-button:last-of-type {
3706   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
3707 }
3708
3709 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:-moz-locale-dir(ltr):last-of-type {
3710   border-right-width: 0;
3711 }
3712
3713 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]),
3714 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active {
3715   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
3716 }
3717
3718 .inspector-breadcrumbs-button:last-of-type[checked] {
3719   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
3720 }
3721
3722 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked],
3723 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active {
3724   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
3725 }
3726
3727 /* Highlighter toolbar - breadcrumbs - RTL */
3728
3729 .inspector-breadcrumbs-button:-moz-locale-dir(rtl):first-of-type {
3730   border-right-width: 0;
3731 }
3732
3733 .inspector-breadcrumbs-button:-moz-locale-dir(rtl) {
3734   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
3735 }
3736
3737 .inspector-breadcrumbs-button[siblings-menu-open]:not([checked]):-moz-locale-dir(rtl),
3738 .inspector-breadcrumbs-button:not([checked]):hover:active:-moz-locale-dir(rtl) {
3739   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
3740 }
3741
3742 .inspector-breadcrumbs-button[checked]:-moz-locale-dir(rtl) {
3743   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
3744 }
3745
3746 .inspector-breadcrumbs-button[checked][siblings-menu-open]:-moz-locale-dir(rtl),
3747 .inspector-breadcrumbs-button[checked]:hover:active:-moz-locale-dir(rtl) {
3748   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
3749 }
3750
3751 .inspector-breadcrumbs-button:first-of-type:-moz-locale-dir(rtl) {
3752   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
3753 }
3754
3755 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type:not([checked]):-moz-locale-dir(rtl),
3756 .inspector-breadcrumbs-button:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
3757   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
3758 }
3759
3760 .inspector-breadcrumbs-button:first-of-type[checked]:-moz-locale-dir(rtl) {
3761   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
3762 }
3763
3764 .inspector-breadcrumbs-button[siblings-menu-open]:first-of-type[checked]:-moz-locale-dir(rtl),
3765 .inspector-breadcrumbs-button:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
3766   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
3767 }
3768
3769 .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
3770   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
3771 }
3772
3773 #inspector-breadcrumbs[overflows] > .inspector-breadcrumbs-button:last-of-type:-moz-locale-dir(rtl) {
3774   border-left-width: 0;
3775 }
3776
3777 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type:not([checked]):-moz-locale-dir(rtl),
3778 .inspector-breadcrumbs-button:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
3779   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
3780 }
3781
3782 .inspector-breadcrumbs-button:last-of-type[checked]:-moz-locale-dir(rtl) {
3783   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
3784 }
3785
3786 .inspector-breadcrumbs-button[siblings-menu-open]:last-of-type[checked]:-moz-locale-dir(rtl),
3787 .inspector-breadcrumbs-button:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
3788   -moz-border-image: url("chrome://browser/skin/devtools/breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
3789 }
3790
3791 /* Highlighter toolbar - HTML Tree */
3792
3793 #inspector-treepanel-toolbutton {
3794   list-style-image: url("chrome://browser/skin/devtools/treepanel-button.png");
3795   -moz-margin-end: 0;
3796   -moz-image-region: rect(0px 18px 16px 0px);
3797 }
3798
3799 #inspector-treepanel-toolbutton[checked] {
3800   -moz-image-region: rect(0px 36px 16px 18px);
3801 }
3802
3803 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(rtl),
3804 #inspector-treepanel-toolbutton:-moz-locale-dir(ltr) {
3805   border-radius: @toolbarbuttonCornerRadius@ 0 0 @toolbarbuttonCornerRadius@;
3806 }
3807
3808 #inspector-breadcrumbs > .scrollbutton-down:-moz-locale-dir(ltr),
3809 #inspector-treepanel-toolbutton:-moz-locale-dir(rtl) {
3810   border-radius: 0 @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0;
3811 }
3812
3813 /* Highlight toolbar - Option menu */
3814
3815 #inspector-option-toolbarbutton:-moz-focusring {
3816   outline: 1px dotted hsla(210,30%,85%,0.4);
3817   outline-offset: -2px;
3818 }
3819
3820 html|*#gcli-tooltip-frame,
3821 html|*#gcli-output-frame {
3822   padding: 0;
3823   border-width: 0;
3824   background-color: transparent;
3825 }
3826
3827 #gcli-output,
3828 #gcli-tooltip {
3829   border-width: 0;
3830   background-color: transparent;
3831   -moz-appearance: none;
3832   margin-bottom: -2px;
3833 }
3834
3835 .gclitoolbar-input-node,
3836 .gclitoolbar-complete-node,
3837 .gclitoolbar-prompt {
3838   margin: 0;
3839   -moz-margin-end: 5px;
3840   -moz-box-align: center;
3841   padding-top: 0;
3842   padding-bottom: 0;
3843   padding-right: 4px;
3844   border: 1px solid transparent;
3845   border-radius: @toolbarbuttonCornerRadius@;
3846   text-shadow: none;
3847 }
3848
3849 .gclitoolbar-input-node {
3850   padding-left: 20px;
3851   background-color: transparent;
3852   -moz-appearance: none;
3853   border-color: hsl(210,11%,10%);
3854   color: hsl(210,30%,85%);
3855   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
3856   box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
3857               0 0 0 1px hsla(210,16%,76%,.1) inset,
3858               0 1px 0 hsla(210,16%,76%,.15);
3859 }
3860
3861 .gclitoolbar-complete-node {
3862   padding-left: 21px;
3863   background-color: transparent;
3864   color: transparent;
3865 }
3866
3867 .gclitoolbar-prompt {
3868   padding-left: 4px;
3869   padding-bottom: 2px;
3870   font-size: 150%;
3871   font-weight: bold;
3872   color: hsl(210,30%,85%);
3873   background-color: hsl(210,11%,16%);
3874 }
3875
3876 .gclitoolbar-prompt-label,
3877 .gcli-in-incomplete,
3878 .gcli-in-error,
3879 .gcli-in-ontab,
3880 .gcli-in-todo,
3881 .gcli-in-closebrace,
3882 .gcli-in-param,
3883 .gcli-in-valid {
3884   margin: 0;
3885   padding: 0;
3886 }
3887
3888 .gcli-in-incomplete {
3889   border-bottom: 2px dotted #999;
3890 }
3891
3892 .gcli-in-error {
3893   border-bottom: 2px dotted #F00;
3894 }
3895
3896 .gcli-in-ontab {
3897   color: hsl(210,0%,35%);
3898 }
3899
3900 .gcli-in-todo {
3901   color: hsl(210,50%,35%);
3902 }
3903
3904 .gcli-in-closebrace {
3905   color: hsl(0,0%,80%);
3906 }
3907
3908 /* Responsive Mode */
3909
3910 .browserContainer[responsivemode] {
3911   background: #222 url("chrome://browser/skin/devtools/responsive-background.png");
3912   padding: 0 20px 20px 20px;
3913 }
3914
3915 .browserStack[responsivemode] {
3916   box-shadow: 0 0 7px black;
3917 }
3918
3919 .devtools-responsiveui-toolbar {
3920   background: transparent;
3921   margin: 10px 0;
3922   padding: 0;
3923   box-shadow: none;
3924 }
3925
3926 .devtools-responsiveui-toolbar > menulist,
3927 .devtools-responsiveui-toolbar > toolbarbutton {
3928   min-width: 22px;
3929   border-radius: 0;
3930 }
3931
3932 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3933 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3934   margin-left: 0;
3935 }
3936
3937 .devtools-responsiveui-resizebar {
3938   width: 7px;
3939   height: 24px;
3940   cursor: ew-resize;
3941   transform: translate(12px, -12px);
3942   background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3943 }
3944
3945 .devtools-responsiveui-resizehandle {
3946   width: 16px;
3947   height: 16px;
3948   cursor: se-resize;
3949   transform: translate(12px, 12px);
3950   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3951 }
3952
3953 /* Web Console */
3954
3955 .web-console-frame {
3956   border-bottom: 1px solid #aaa;
3957 }
3958
3959 .web-console-frame[animated] {
3960   transition: height 100ms;
3961 }
3962
3963 /* Developer Toolbar */
3964
3965 .developer-toolbar-button {
3966   -moz-appearance: none;
3967   min-width: 78px;
3968   min-height: 22px;
3969   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
3970   border-radius: @toolbarbuttonCornerRadius@;
3971   color: inherit;
3972   border: 1px solid transparent;
3973   margin: 0 5px;
3974   padding: 0 10px;
3975   list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
3976 }
3977
3978 .developer-toolbar-button[open=true],
3979 .developer-toolbar-button:active:hover,
3980 .developer-toolbar-button[checked=true] {
3981   border-color: hsla(210,8%,5%,.6);
3982   background: rgba(0,0,0,.6);
3983   box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.15);
3984 }
3985
3986 .developer-toolbar-button[checked=true] {
3987   color: hsl(208,100%,60%) !important;
3988   background: rgba(0,0,0,.4);
3989   text-shadow: 0 0 6px hsl(208,100%,60%);
3990 }
3991
3992 #developer-toolbar-webconsole {
3993   -moz-image-region: rect(0, 16px, 16px, 0);
3994 }
3995
3996 #developer-toolbar-inspector {
3997   -moz-image-region: rect(16px, 16px, 32px, 0);
3998 }
3999
4000 #developer-toolbar-styleeditor {
4001   -moz-image-region: rect(32px, 16px, 48px, 0);
4002 }
4003
4004 #developer-toolbar-debugger {
4005   -moz-image-region: rect(48px, 16px, 64px, 0);
4006 }
4007
4008 #developer-toolbar-other-tools {
4009   -moz-image-region: rect(64px, 16px, 80px, 0);
4010 }
4011
4012 #developer-toolbar-other-tools > .toolbarbutton-menu-dropmarker {
4013   display: none;
4014 }
4015
4016 /* Error counter */
4017
4018 #developer-toolbar-webconsole[error-count]:before {
4019   color: #FDF3DE;
4020   min-width: 16px;
4021   text-shadow: none;
4022   background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
4023   border-radius: 1px;
4024 }
4025
4026 /* === social toolbar button === */
4027
4028 /* button icon for the service */
4029 #social-toolbar-item {
4030   -moz-box-orient: horizontal;
4031 }
4032
4033 #social-toolbar-item > .toolbarbutton-1 {
4034   margin: 0px;
4035 }
4036
4037 .social-notification-icon-hbox {
4038   pointer-events: none;
4039 }
4040
4041 .social-status-button {
4042   list-style-image: none;
4043 }
4044
4045 #social-provider-button > .toolbarbutton-menu-dropmarker {
4046   display: none;
4047 }
4048
4049 .social-notification-icon-stack {
4050   padding: 0;
4051 }
4052
4053 .social-notification-icon-stack > image {
4054   max-height: 16px;
4055 }
4056
4057 .social-notification-icon-hbox {
4058   padding: 0;
4059 }
4060 .social-notification-icon-label {
4061   text-align: end;
4062   font-size: 9px;
4063   font-weight: bold;
4064   padding: 0 1px;
4065   color: white;
4066   margin: 0;
4067   background-color: rgb(240,61,37);
4068   border: 1px solid rgb(216,55,34);
4069   box-shadow: 0 1px 0 rgba(0,39,121,0.77);
4070   -moz-margin-end: -4px;
4071   margin-top: -4px;
4072 }
4073
4074 .social-notification-icon-label[value=""] {
4075   display: none;
4076 }
4077
4078 @media (-moz-mac-lion-theme) {
4079   .social-notification-icon-stack > image:-moz-window-inactive {
4080     opacity: .5;
4081   }
4082 }
4083
4084 @media (min-resolution: 2dppx) {
4085   .social-notification-icon-image {
4086     list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
4087   }
4088 }
4089
4090 /* === end of social toolbar button === */
4091
4092 /* === social toolbar provider menu  === */
4093
4094 #social-statusarea-user {
4095   cursor: default;
4096   font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
4097   font-size: 12px;
4098 }
4099
4100 #social-statusarea-user-portrait {
4101   width: 32px;
4102   height: 32px;
4103   margin: 10px;
4104 }
4105
4106 #social-statusarea-username {
4107   -moz-appearance: none;
4108   color: -moz-nativehyperlinktext;
4109   cursor: pointer;
4110   min-width: 0;
4111   margin: 0 6px;
4112   list-style-image: none;
4113 }
4114
4115 #social-statusarea-username:hover {
4116   text-decoration: underline;
4117 }
4118
4119 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4120   padding: 0;
4121 }
4122
4123 #social-notification-box,
4124 .social-panel-frame {
4125   border-radius: inherit;
4126 }
4127
4128 /* === end of social toolbar provider menu === */
4129
4130 .chat-status-icon {
4131   max-height: 16px;
4132   max-width: 16px;
4133   padding: 0;
4134 }
4135
4136 .chat-toolbarbutton {
4137   -moz-appearance: none;
4138   border: none;
4139   padding: 0;
4140   margin: 0;
4141   background: none;
4142 }
4143
4144 .chat-toolbarbutton > .toolbarbutton-text {
4145   display: none;
4146 }
4147
4148 .chat-close-button {
4149   list-style-image: url('chrome://browser/skin/social/chat-close.png');
4150   -moz-image-region: rect(0, 14px, 14px, 0);
4151 }
4152
4153 .chat-close-button:hover:active {
4154   -moz-image-region: rect(14px, 14px, 28px, 0);
4155 }
4156
4157 .chat-close-button:hover {
4158   -moz-image-region: rect(28px, 14px, 42px, 0);
4159 }
4160
4161 .chat-title {
4162   font-weight: bold;
4163   color: -moz-dialogtext;
4164   cursor: inherit;
4165 }
4166
4167 .chat-titlebar {
4168   background-color: #d9d9d9;
4169   height: 20px;
4170   min-height: 20px;
4171   width: 100%;
4172   margin: 0;
4173   padding: 2px;
4174   -moz-padding-start: 6px;
4175   border: none;
4176   border-bottom: 1px solid #404040;
4177   cursor: pointer;
4178 }
4179
4180 .chat-titlebar[minimized="true"] {
4181   border-bottom: none;
4182 }
4183
4184 .chat-titlebar[activity] {
4185   background-color: #ceeaff;
4186 }
4187
4188 .chat-titlebar[selected] {
4189   background-color: #f0f0f0;
4190 }
4191
4192 .chat-frame {
4193   padding: 0;
4194   margin: 0;
4195   overflow: hidden;
4196 }
4197
4198 .chatbar-button {
4199   background-color: #d9d9d9;
4200   list-style-image: url("chrome://browser/skin/social/social.png");
4201   border: none;
4202   margin: 0;
4203   padding: 2px;
4204   height: 21px;
4205   width: 21px;
4206   border-top: 1px solid #404040;
4207   -moz-border-end: 1px solid #404040;
4208 }
4209
4210 .chatbar-button[open="true"],
4211 .chatbar-button:active:hover {
4212   background-color: #f0f0f0;
4213   box-shadow: inset 0 2px 5px rgba(0,0,0,0.6), 0 1px rgba(255,255,255,0.2);
4214 }
4215
4216 .chatbar-button > .toolbarbutton-text,
4217 .chatbar-button > .toolbarbutton-menu-dropmarker {
4218   display: none;
4219 }
4220
4221 .chatbar-button[activity] {
4222   background-color: #ceeaff;
4223 }
4224
4225 .chatbar-button > menupopup > menuitem[activity] {
4226   font-weight: bold;
4227 }
4228
4229 .chatbar-innerbox {
4230   background: transparent;
4231   margin: -285px -1px 0 -1px;
4232   overflow: hidden;
4233 }
4234
4235 chatbar {
4236   -moz-margin-end: 20px;
4237 }
4238
4239 chatbox {
4240   height: 285px;
4241   width: 260px;
4242   -moz-margin-start: 4px;
4243   background-color: white;
4244   border: 1px solid #404040;
4245   border-bottom: none;
4246 }
4247
4248 chatbox[minimized="true"] {
4249   width: 160px;
4250   height: 20px;
4251 }
4252
4253 panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="top"],
4254 panel[type="arrow"][popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="bottom"] {
4255   list-style-image: url("chrome://global/skin/arrow/panelarrow-light-vertical.png");
4256 }
4257
4258 .click-to-play-plugins-notification-content {
4259   margin: -16px;
4260   border-radius: 5px;
4261 }
4262
4263 .click-to-play-plugins-notification-icon-box {
4264   background: hsla(0,0%,100%,.4);
4265   -moz-border-end: 1px solid hsla(0,0%,100%,.2);
4266   padding-top: 16px;
4267   -moz-padding-end: 12px;
4268   -moz-padding-start: 20px;
4269 }
4270
4271 .click-to-play-plugins-notification-icon-box:-moz-locale-dir(ltr) {
4272   border-bottom-left-radius: 5px;
4273   border-top-left-radius: 5px;
4274 }
4275
4276 .click-to-play-plugins-notification-icon-box:-moz-locale-dir(rtl) {
4277   border-bottom-right-radius: 5px;
4278   border-top-right-radius: 5px;
4279 }
4280
4281 .click-to-play-plugins-notification-separator {
4282   -moz-border-start: 1px solid hsla(211,79%,6%,.1);
4283   border-top: 1px solid hsla(211,79%,6%,.1);
4284 }
4285
4286 .click-to-play-plugins-notification-description-box {
4287   border-bottom: 1px solid hsla(0,0%,100%,.2);
4288   -moz-border-start: 1px solid hsla(0,0%,100%,.2);
4289   max-width: 28em;
4290   padding: 14px 16px 9px 16px;
4291 }
4292
4293 .click-to-play-plugins-notification-center-box {
4294   border-top: 1px solid hsla(0,0%,100%,.2);
4295   border-bottom: 1px solid hsla(0,0%,100%,.2);
4296   background-color: hsla(211,79%,6%,.05);
4297 }
4298
4299 .click-to-play-plugins-notification-button-container {
4300   border-top: 1px solid hsla(0,0%,100%,.2);
4301   -moz-border-start: 1px solid hsla(0,0%,100%,.2);
4302   margin: 0px;
4303   padding: 16px 16px 17px 16px;
4304 }
4305
4306 .center-item-box {
4307   -moz-border-start: 1px solid hsla(0,0%,100%,.2);
4308   padding-top: 7px;
4309   -moz-padding-end: 11px;
4310   -moz-padding-start: 16px;
4311   margin-bottom: -3px;
4312 }
4313
4314 .center-item-box[padbottom="true"] {
4315   padding-bottom: 12px;
4316 }
4317
4318 .center-item-icon {
4319   background-image: url("chrome://mozapps/skin/plugins/pluginGeneric-16.png");
4320   background-repeat: no-repeat;
4321   height: 16px;
4322   width: 16px;
4323   margin-bottom: 4px;
4324   -moz-margin-end: 6px;
4325 }
4326
4327 .center-item-button {
4328   min-width: 0;
4329 }