@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Unset bottom border, instead let's have a border on the right-hand
   side, much like the sidebar does. */
.tabbrowser-strip:not(.treestyletab-tabbar-placeholder)[treestyletab-mode="vertical"],
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"] {
	border-top: 1px solid #404040;
	border-bottom: none !important;
}
#main-window:-moz-window-inactive
  .tabbrowser-strip:not(.treestyletab-tabbar-placeholder):not([treestyletab-style~="aero"])[treestyletab-mode="vertical"],
#main-window:-moz-window-inactive
  .treestyletab-tabbar-toolbar:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"] {
	border-top: 1px solid #868686;
}


/* Background colour for the tree sidebar (light blue when window is
   active, grey otherwise) */
.tabbrowser-strip[treestyletab-mode="vertical"] {
	background: transparent !important;
	background-color: #d4dde5 !important;
}
#main-window:-moz-window-inactive
  .tabbrowser-strip:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"] {
	background-color: #e8e8e8 !important;
}
/* autohide */
.treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide][treestyletab-mode="vertical"]
  #treestyletab-tabbar-resizer-box {
	background: rgba(212, 221, 229, 0.75);
}
#main-window:-moz-window-inactive
  .treestyletab-tabbar-toolbar[treestyletab-tabbar-autohide]:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"]
  #treestyletab-tabbar-resizer-box {
	background: rgba(232, 232, 232, 0.75);
}

/* Don't display unnecessary clutter */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabs-bottom,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabs-left,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-text-shadow,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .treestyletab-splitter grippy,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  .treestyletab-splitter grippy {
	display: none !important;
}

/* Disable pseudo elements introduced by Australis */
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
  .tab-background-start::before,
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
  .tab-background-start::after,
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
  .tab-background-end::before,
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
  .tab-background-end::after {
	content: none;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
  :-moz-any(.tab-background-start,
            .tab-background-end) {
	min-height: 0;
	width: 0;
}
.tabbrowser-tabs:not([treestyletab-tabbar-position="top"])
  .tabbrowser-tab:hover .tab-background:not([selected="true"]) {
	background-image: none;
}

/* Use the splitter to display the border of .tabbrowser-strip */
tabbrowser[treestyletab-mode="vertical"]
  .treestyletab-splitter,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  .treestyletab-splitter {
	width: 1px !important;
	min-width: 1px !important;
	background-image: none;
	background-color: #404040;
}
#main-window:-moz-window-inactive
  tabbrowser:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"]
  .treestyletab-splitter,
#main-window:-moz-window-inactive
  .treestyletab-tabbar-toolbar:not([treestyletab-style~="aero"])[treestyletab-mode="vertical"]
  .treestyletab-splitter {
	background-color: #868686;
}
.tabbrowser-strip[treestyletab-tabbar-position="left"][treestyletab-tabbar-fixed="true"] {
	border-right: 1px solid #404040;
}
#main-window:-moz-window-inactive
  .tabbrowser-strip[treestyletab-tabbar-position="left"][treestyletab-tabbar-fixed="true"] {
	border-right-color: #868686;
}
.tabbrowser-strip[treestyletab-tabbar-position="right"][treestyletab-tabbar-fixed="true"] {
	border-left: 1px solid #404040;
}
#main-window:-moz-window-inactive
  .tabbrowser-strip[treestyletab-tabbar-position="right"][treestyletab-tabbar-fixed="true"] {
	border-left-color: #868686;
}

/* Style tabs themselves.  Get rid of most of the initial XUL styling */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab {
	appearance: none !important;
	-moz-appearance: none !important;
	border: none;
	border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-top: 1px solid transparent !important;
	box-align: stretch !important;
	-moz-box-align: stretch !important;
	height: 21px !important;     /* height including border! */
	margin: 0 !important;
	padding: 1px 3px 2px 10px !important;
	text-align: left !important;
	-moz-border-top-colors: none !important;
	-moz-border-bottom-colors: none !important;
	-moz-border-right-colors: none !important;
	-moz-border-left-colors: none !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not([pinned]):not([selected="true"]),
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[pinned]:not([titlechanged]):not([selected="true"]) {
	background: transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  :-moz-any(.tabbrowser-tab[pinned],
            .tab-background[pinned]) {
	padding: 0 !important;
	line-height: 1 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  :-moz-any(.tab-throbber[pinned],
            .tab-icon-image[pinned],
            .tab-background[pinned]) {
	margin: 0 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[pinned]
  .tab-stack {
	max-height: 24px !important;
}

.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"] {
	border-top: 1px solid #94A1C0 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"] {
	background: -moz-linear-gradient(top, #A0B0CF, #7386AB) repeat-x !important;
}

#main-window:-moz-window-inactive
  .tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"] {
	border-top: 1px solid #979797 !important;
	background: -moz-linear-gradient(top, #B4B4B4, #8A8A8A) repeat-x !important;  
}

/* Keep the close button at a safe distance from the tab label. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button {
	margin-left: 3px;
	background: none;
}

.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button
  image {
	list-style-image: url("closetab.png");
	opacity: 0.27;  /* turn black into #b9b9b9 */
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button:active
  image {
	opacity: 0.46;  /* turn black into #8a8a8a */
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"]
  .tab-close-button
  image {
	list-style-image: url("closetab-white.png");
	opacity: 1;
}

/* Always display the favicon at 100% opacity */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not(:hover):not([selected="true"])
  .tab-icon-image,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not(:hover):not([selected="true"])
  .tab-throbber {
	opacity: 1.0 !important;
}

.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not(:hover):not([selected="true"])
  .tab-close-button {
	display: none !important;
}

/* Tab label is without special decoration except when selected: then
   the text is white and bold. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-text {
	font-size: 11px;
	font-weight: normal !important;
	color: #000000 !important;
	text-align: start;
	text-shadow: none !important;
	margin-bottom: 1px;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"] .tab-text {
	font-weight: bold !important;
	color: #ffffff !important;
	text-shadow: 0 1px #404040 !important;
}


/* Make the tab counter look like the bubbles in Mail.app et.al. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .treestyletab-counter-container {
	background-color: #91a0c0 !important;
	border-radius: 8px !important;
	-moz-border-radius: 8px !important;
	padding: 0 6px !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .treestyletab-counter {
	color: #ffffff !important;
	font-weight: bold !important;
	text-shadow: none !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"]
  .treestyletab-counter-container {
	background-color: #ffffff !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"]
  .treestyletab-counter {
	color: #91a0c0 !important;
}

#main-window:-moz-window-inactive
  .tabbrowser-tabs[treestyletab-mode="vertical"]
  .treestyletab-counter-container {
	background-color: #b5b5b5 !important;
}
#main-window:-moz-window-inactive
  .tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"]
  .treestyletab-counter-container {
	background-color: #ffffff !important;
}
#main-window:-moz-window-inactive
  .tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"]
  .treestyletab-counter {
	color: #929292 !important;
}




/* Drag'n'drop styling:
   First we need to disable the standard settings from TreeStyleTab.
   Its initial CSS rules are quite explicit. :( */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[treestyletab-drop-position="self"][selected="true"],
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[treestyletab-drop-position="self"][selected="true"]:hover,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[treestyletab-drop-position="self"]:not([selected="true"]),
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[treestyletab-drop-position="self"]:not([selected="true"]):hover {
	-moz-border-top-colors: none !important;
	-moz-border-bottom-colors: none !important;
	-moz-border-right-colors: none !important;
	-moz-border-left-colors: none !important;
}

/* Round blue rectangle around tabs that are dropping targets. */
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="self"]:not([selected="true"]) {
	background: #d0def5 !important;
	border: 2px solid #577bf3 !important; /* not OSX's colour but Firefox's */
	border-radius: 8px !important;
	-moz-border-radius: 8px !important;
	padding: 0 1px 0 8px !important;
}

/* White-blue-white separator for drop indicator. */
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"],
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"][selected="true"]:hover,
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]),
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="before"]:not([selected="true"]):hover {
	-moz-border-image: url("dropmarker.png") 12 0 0 11 fill / 12px 0 0 11px !important;
	-moz-border-image-outset: 6px 0 0 0 !important;
	border-image: url("dropmarker.png") 12 0 0 11 fill / 12px 0 0 11px !important;
	border-image-outset: 6px 0 0 0 !important;
}

.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"],
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"][selected="true"]:hover,
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]),
.tabbrowser-tabs[treestyletab-mode="vertical"][treestyletab-style]
  .tabbrowser-tab:not([pinned="true"])[treestyletab-drop-position="after"]:not([selected="true"]):hover {
	-moz-border-image: url("dropmarker.png") 0 0 12 11 fill / 0 0 12px 11px !important;
	-moz-border-image-outset: 0 0 6px 0 !important;
	border-image: url("dropmarker.png") 0 0 12 11 fill / 0 0 12px 11px !important;
	border-image-outset: 0 0 6px 0 !important;
}



/* changed from original SidebarStyleTab */

.treestyletab-tabbar-toolbar:not([treestyletab-tabbar-position="top"]),
.treestyletab-tabbar-toolbar[treestyletab-tabbar-position="top"]:not([treestyletab-tabbar-fixed="true"]) {
	appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	border: 0 none !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tabbrowser-tabs[treestyletab-mode="vertical"]
  .treestyletab-counter-paren {
	display: none !important;
}

.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabs-newtab-button:not(:hover),
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabs-newtab-button:hover,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  > toolbarbutton:not(:hover),
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  > toolbarbutton:hover,
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  > toolbarpaletteitem
  > toolbarbutton:not(:hover),
.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  > toolbarpaletteitem
  > toolbarbutton:hover {
	appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	border: 0 none !important;
}

.treestyletab-tabbar-toolbar[treestyletab-mode="vertical"]
  > * {
	border: 0 none !important;
}

/* for rightside tab bar: "display:none" breaks the order of tab contents. */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not(:hover):not([selected="true"])
  .tab-close-button {
	display: -moz-box !important;
	visibility: collapse !important;
}

/* for Windows (Winstrip/Strata) */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button
  image,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button:active
  image,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button:hover
  image,
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[selected="true"]
  .tab-close-button
  image {
	-moz-image-region: auto !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"] {
	appearance: none !important;
	-moz-appearance: none !important;
	background: transparent !important;
	margin: 0;
}

/* for Linux (Gnomestrip) */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-close-button {
	appearance: none !important;
	-moz-appearance: none !important;
}

/* for Mac OS X */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  :-moz-any(.tab-content:not([selected="true"]):not([pinned]),
            .tab-content:not([selected="true"])[pinned]:not([titlechanged]),
            .tab-content[selected="true"]) {
	border: 0 none !important;
	background: transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  :-moz-any(.tab-background-start:not([selected="true"]),
            .tab-background-middle:not([selected="true"]),
            .tab-background-end:not([selected="true"]),
            .tab-background-start[selected="true"],
            .tab-background-middle[selected="true"],
            .tab-background-end[selected="true"]) {
	mask: none !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  :-moz-any(.tab-background-start:not([selected="true"]),
            .tab-background-middle:not([selected="true"]):not([pinned]),
            .tab-background-middle:not([selected="true"])[pinned]:not([titlechanged]),
            .tab-background-end:not([selected="true"]),
            .tab-background-start[selected="true"],
            .tab-background-middle[selected="true"],
            .tab-background-end[selected="true"]) {
	background: transparent !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-background-middle {
	margin: 0 !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  :-moz-any(.tab-background-start[pinned][titlechanged],
            .tab-background-end[pinned][titlechanged]) {
	visibility: collapse !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tab-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
	-moz-border-image: none !important;
	border-image: none !important;
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not([treestyletab-drop-position])
  .tab-content {
	border: 0 none !important;
}

/* highlighted pinned tabs */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
	background-image: radial-gradient(circle farthest-corner at 50% 3px,
	                                  Highlight 3%,
	                                  rgba(255, 255, 255, 0) 80%);
}
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
	background-image: radial-gradient(circle farthest-corner at 50% 3px,
	                                  Highlight 3%,
	                                  rgba(255, 255, 255, 0) 100%);
}


/* for Multiple Tab Handler */
.tabbrowser-tabs[treestyletab-mode="vertical"]
  .tabbrowser-tab:not(:hover):not([selected="true"])[multipletab-ready-to-close="true"]
  .tab-close-button {
	visibility: visible !important;
}
