/*
 *             Name:	Tab Progress Bar - Thin & Smooth line at the top
 *
 *           Author:	banthaz
 *
 *    Compatibility:	+ Only tested on Firefox 3.6, Default theme!
 *			+ Mainly developed in:
 *			    Windows 7, Windows Aero theme
 *			+ Also tested on:
 *			    Windows Vista, Windows Aero OS Theme
 *			    Windows XP, Windows Classic OS Theme
 *			    Windows XP, Windows XP (blue) OS Theme
 *			+ I DON'T think it's compatible with Firefox versions prior to 3.6.
 *
 * Requires editing:	In the "PREDEFINED CODE" part you need to enable the code for your
 *			OS theme/OS, and disable the code for other OS theme/OS. If you're
 *			using another OS theme/OS than those listed, try all of them.
 *			It seems like just about anything changes the progress line! That's
 *			the reason for the "CUSTOM CODE" part, which should be used if the
 *			"PREDEFINED CODE" doesn't work correctly. Errors can depend on the
 *			use of: other OS than XP and Vista, other OS theme than Windows
 *			Classic, XP and Aero; other Firefox version than 3.6, other Firefox
 *			theme than Default (Strata), Extensions and/or Userstyles which
 *			(significantly) affects the tabs.
 *			See the homepage of this style for tips on how to edit the "CUSTOM CODE"
 *			part. However, small, regular problems might easier be solved by editing
 *			the "PREDEFINED CODE" part. Take a look after all the comments in the style.
 *
 *          Updated:	Aug 05 2010
 *
 *          Version:	1.1
 *
 *            Notes:	
 */


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


/***********************************************************************/
/*				M A I N                                */
/***********************************************************************/


/* The actual progress line - Color & Shadow */
.tab-progress > .progress-bar
{
background-color: highlight !important;
-moz-box-shadow: 0px 1px 6px 1px highlight !important;
}


/* The background of the progrss line - Color & Thickness */
.tab-progress
{
background-color: transparent !important;	/* ← Remove the background (or type in a color to add a background) */
min-height: 1px !important;			/* ← Thickness (*) */
max-height: 1px !important;			/* ← Thickness (*) */
}
/*
(*) This affects both the background of the progress line AND the actual progress line. I recommend using the default value of 1px - I have not tested anything else!
*/


/* Remove the progress line on selected tab 
.tabbrowser-tab[selected="true"] .tab-progress
{
visibility: hidden !important;
}*/
/*
(*) Please read the information in the next code block for more information.
*/


/* ^(*_*)^ To make it easier to edit the code: Prevent the label of the tab from jumping (*1) */
label.tab-text:not([tabprogressbar-progress]) > .tab-label-inner-box > .tab-progress
{
visibility: hidden !important;			/* ← (*2) Change "hidden" to "visible" when testing/editing (*2) */
background-color: red !important;		/* ← (*3) */
}
/*
(*1) This does not prevent ALL "label jumping" - ONLY the kind of jumping described on (*2). The "^(*_*)^" figure is used to easily idenify this important code block...
(*2) When editing the position of the progress line, it also affects the label of the tab - it might move up or down a bit, but often so little that you hardly notice it. When the page doesn't load the progress line is removed completely (visibility: collapse;). Then there is no progress line that affect the label of the tab anymore - the label goes back to its original position. This makes it look like the label jumps every time the page loads. It could be solved by setting the values of the position of the progrss line very, very precise - but why do that hard work when it can be solved a lot more easier? The line "visibility: hidden !important;" does not remove the progress line completly; it's still there, just not visible.
(*3) As you can see, this code block contains the recommendation "Change "hidden" to "visible" when testing/editing". When you do that progress line will be visible even when the page isn't loading - then you can easily see the effect of your editing. The "background-color: red !important;" is used to color the background of the progress line red during that time, to make it easier to see. If red isn't a visible color for you, simply change it.

NOTE: If this changed viewing of the progress line ("visibility: hidden;" instead of "visibility: collapse;") causes problems for you - simply disable it. Just remember:
  + If you're using predefined, not edited, code only, you should NOT notice any difference.
  + If you edit ANY position code, you must work a little harder, as you must find the perfect conbination of values to not make the label of the tab jump.
  + If you have enabled the "Remove the progress line on selected tab" code block above, you must replace it with:
      .tabbrowser-tab[selected="true"] .tab-progress
      {
      visibility: collapse !important;
      }
  + As you can see, this code block contains the recommendation "Change "hidden" to "visible" when testing/editing". If you have disabled the code block, use this code when testing/editing instead:
      .tabbrowser-tab .tab-progress
      {
      visibility: visible !important;
      background-color: red !important;
      }
*/






/***********************************************************************/
/*			 P R E D E F I N E D   C O D E                 */
/***********************************************************************/


/****************************** TO CHOOSE ******************************/


/********** ONLY ONE TAB **********/
/* Choose ONE of the following code blocks. */


/* Display closebutton 
.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child .tab-close-button
{
display: -moz-box !important;
}
.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}*/


/* OR */


/* Don't dislpay closebutton */
.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child .tab-close-button
{
display: none !important;
}
.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child .tab-progress
{
margin-left: -26px !important;
margin-right: 0px !important;
}




/************ OS THEME ************/
/* The following code blocks affects the position of the progress line. */
/* Choose ONE of the following code blocks - the one that seems to fit you. If you're using another OS theme/OS than those listed, try all of them. */
/* If none of them work correctly, and the progress line all the time is like 1px wrong, I recommend editing one of the follwing code blocks until it works. It simpler than using the "CUSTOM CODE" part. But if your problem isn't regular, you might have to use it anyway. And if you have BIG problems with the width: Use the "CUSTOM CODE" part. */


/* Code tested with Windows Vista with Windows Aero OS Theme */
.tabbrowser-tab .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-progress
{
margin-top: -5px !important;
margin-bottom: 3px !important;
}


/* OR */


/* Code tested with Windows XP with Windows Classic & Windows XP (blue) OS Theme
.tabbrowser-tab .tab-progress
{
margin-top: -7px !important;
margin-bottom: 5px !important;
}
.tabbrowser-tab:not([selected="true"]):not(:hover) .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}*/


/* OR try your own config */





/**************************** AUTOMATIC CODE ***************************/
/*
You don't need to do anything with this code. It's automatic, and works for the 4 values of browser.tabs.closeButtons. It's also compatible with protected tabs (tested with "Tabberwocky", "Tab Utilities" and "Tabloc" extensions (also works with "Tabloc"'s locked tabs)).
All "Width" code blocks affects the width of the progress line. If you have a smaller problem with the width, like that it's for example 1px too long all the time, try editing this code. Just try it and keep on testing! As long as your problem is regular you should be able to solve it by editing this code. Use the "CUSTOM CODE" part as the last way out.
*/


/* Display closebuttons on...*/


/******** SELECTED TAB ONLY *******/
/* browser.tabs.closeButtons value: 0. */


/* Make sure the closebuttons are correctly displayed */
.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"] .tab-close-button
{
display: -moz-box !important;
}
.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]) .tab-close-button
{
display: none !important;
}


/* Width */
.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]) .tab-progress
{
margin-left: -26px !important;
margin-right: 0px !important;
}
.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"] .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}
.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -2px !important;
}




/************ ALL TABS ************/
/*
browser.tabs.closeButtons value: 1.
When the tab width is wider than the value of browser.tabs.tabClipWidth the browser.tabs.closeButtons value changes to 0, and then the code above will be used.
*/


/* Make sure the closebuttons are correctly displayed */
.tabbrowser-tabs[closebuttons="alltabs"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]) .tab-close-button
{
display: -moz-box !important;
}


/* Width */
.tabbrowser-tabs[closebuttons="alltabs"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]) .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}
.tabbrowser-tabs[closebuttons="alltabs"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -22px !important;
}




/************* NO TABS ************/
/* browser.tabs.closeButtons value: 2 and 3. */


/* Make sure the closebuttons are correctly displayed */
.tabbrowser-tabs[closebuttons="noclose"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]) .tab-close-button
{
display: none !important;
}


/* Width */
.tabbrowser-tabs[closebuttons="noclose"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]) .tab-progress
{
margin-left: -26px !important;
margin-right: 0px !important;
}
.tabbrowser-tabs[closebuttons="noclose"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -2px !important;
}




/* When we're breaking the pattern: */


/********* PROTECTED TABS *********/
/*
Tested with "Tabberwocky", "Tab Utilities" and "Tabloc" extensions (also works with "Tabloc"'s locked tabs).
All of these show icons where the closebutton should have been on protected tabs which affects the progress line...
*/


/******* 1 ******/
/* For "Tabberwocky" and "Tab Utilities". */


/* Make sure the "closebuttons" are correctly displayed */
.tabbrowser-tab[protected="true"] .tab-close-button
{
display: -moz-box !important;
}


/* Width */
.tabbrowser-tab[protected="true"] .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}
.tabbrowser-tab[protected="true"]:not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -22px !important;
}



/******* 2 ******/
/* For "Tabloc". */


/* Make sure the "closebuttons" are correctly displayed */
.tabbrowser-tab[__tabloc_protected="true"] .tab-close-button
, .tabbrowser-tab[__tabloc_locked="true"] .tab-close-button
{
display: -moz-box !important;
}


/* Width */
.tabbrowser-tab[__tabloc_protected="true"] .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"] .tab-progress
{
margin-left: -26px !important;
margin-right: -22px !important;
}
.tabbrowser-tab[__tabloc_protected="true"]:not([selected="true"]):not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"]:not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -24px !important;
}




/**** PINNED & FAVICONIZED TABS ***/
/* All "Make sure the closebuttons are correctly displayed" above might make the closebuttons be shown even on pinned and faviconized tabs, which isn't they way we want it. */


/* Make sure the closebuttons are correctly displayed (*) */
.tabbrowser-tab[pinned="true"] .tab-close-button
, .tabbrowser-tab[faviconized="true"]:not([protected="true"]) .tab-close-button
{
visibility: collapse !important;
}
/*
(*) This removes the closebuttons from pinned and faviconized tabs ALWAYS, except for when a faviconized tab gets protected ("Tab Utilities" extension actually adds the closebutton then - but instead of the normal button it's just a lock icon).
*/






/***********************************************************************/
/*			   C U S T O M   C O D E                       */
/***********************************************************************/
/*
+ Use this if the "PREDEFINED CODE" part doesn't work very well for you. Smaller problems, like that the progress line is exactly 2px too short all the time could actually easier be solved be editing the "PREDEFINED CODE" part. Or if only the poition is slightly incorrect etc. But if your problem isn't regular and/or very much wrong: Use this part. All the code is ready for you - you just have to fill in the values!
+ Before starting using this part you must remove the whole "PREDEFINED CODE".
+ Then you must uncomment the whole "CUSTOM CODE" part. To quickly do that, paste it into a text editor with a replace function (like MS Notepad), search for "/ * ?" (without quotes and spaces) and replace it with nothing. Then search for "? * /" (without quotes and spaces) and replace that with nothing too. Then replace the original code in the style, with the one from Notepad (or whichever program you chose). This way you can easily uncomment all the code in seconds! And if you manually enable code: Remember that I've used "/ * ?" and "? * /" (without quotes and spaces) instead of the usual "/ *" and "* /" (without quotes and spaces) to comment out CODE.
+ Things that may make the "PREDEFINED CODE" part not work correctly can be the use of: other OS than XP and Vista, other OS theme than Windows Classic, XP and Aero; other Firefox version than 3.6, other Firefox theme than Default (Strata), Extensions and/or Userstyles which (significantly) affects the tabs.
+ By default, the values below are taken from the following parts and code blocks in the "PREDEFINED CODE" part: "Code tested with Windows Vista with Windows Aero theme", "SELECTED TAB ONLY", "ALL TABS" and "PROTECTED TABS" > "1".
+ "Should I use 'Width 1' or 'Width 2'?" Well, it depends on your browser.tabs.closeButtons setting:
Value 0 users should use "Width 1" and disable "Width 2" or vice versa - it doesn't matter.
Value 1 users should use "Width 1" AND "Width 2". (*)
Value 2 users should use "Width 1".
Value 3 users should use "Width 1".
(*) "Width 1" is used when the tab width is equal to or greater than the value of browser.tabs.tabClipWidth. "Width 2" is used when the tab width is lesser than the value of browser.tabs.tabClipWidth (i.e. "when they get narrow").
*/


/**************************** SELECTED TAB *****************************/


/*********** NORMAL TAB ***********/


/*** NOT HOVER ***/


/* Width 1 */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:not(:hover) .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Width 2 */
/*?.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:not(:hover) .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Position */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:not(:hover) .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}?*/



/***** HOVER *****/


/* Width 1 */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:hover .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Width 2 */
/*?.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:hover .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Position */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:hover .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}?*/




/********** PROTECTED TAB *********/


/*** NOT HOVER ***/


/* Width */
/*?.tabbrowser-tab[protected="true"][selected="true"]:not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"][selected="true"]:not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"][selected="true"]:not(:hover) .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Position */
/*?.tabbrowser-tab[protected="true"][selected="true"]:not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"][selected="true"]:not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"][selected="true"]:not(:hover) .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}?*/



/***** HOVER *****/


/* Width */
/*?.tabbrowser-tab[protected="true"][selected="true"]:hover .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"][selected="true"]:hover .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"][selected="true"]:hover .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Position */
/*?.tabbrowser-tab[protected="true"][selected="true"]:hover .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"][selected="true"]:hover .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"][selected="true"]:hover .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}?*/





/*************************** BACKGROUND TAB ****************************/


/*********** NORMAL TAB ***********/


/*** NOT HOVER ***/


/* Width 1 */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -22px !important;
}?*/


/* Width 2 */
/*?.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -2px !important;
}?*/


/* Position */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):not(:hover) .tab-progress
{
margin-top: -5px !important;
margin-bottom: 3px !important;
}?*/



/***** HOVER *****/


/* Width 1 */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):hover .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Width 2 */
/*?.tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):hover .tab-progress
{
margin-left: -26px !important;
margin-right: 0px !important;
}?*/


/* Position */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"]):not([selected="true"]):hover .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}?*/




/********** PROTECTED TAB *********/


/*** NOT HOVER ***/


/* Width */
/*?.tabbrowser-tab[protected="true"]:not([selected="true"]):not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"]:not([selected="true"]):not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"]:not([selected="true"]):not(:hover) .tab-progress
{
margin-left: -28px !important;
margin-right: -22px !important;
}?*/


/* Position */
/*?.tabbrowser-tab[protected="true"]:not([selected="true"]):not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"]:not([selected="true"]):not(:hover) .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"]:not([selected="true"]):not(:hover) .tab-progress
{
margin-top: -5px !important;
margin-bottom: 3px !important;
}?*/



/***** HOVER *****/


/* Width */
/*?.tabbrowser-tab[protected="true"]:not([selected="true"]):hover .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"]:not([selected="true"]):hover .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"]:not([selected="true"]):hover .tab-progress
{
margin-left: -26px !important;
margin-right: -20px !important;
}?*/


/* Position */
/*?.tabbrowser-tab[protected="true"]:not([selected="true"]):hover .tab-progress
, .tabbrowser-tab[__tabloc_protected="true"]:not([selected="true"]):hover .tab-progress
, .tabbrowser-tab[__tabloc_locked="true"]:not([selected="true"]):hover .tab-progress
{
margin-top: -6px !important;
margin-bottom: 4px !important;
}?*/





/**************************** ONLY ONE TAB *****************************/


/*********** CLOSEBUTTON **********/
/* Choose ONE of the following code blocks. */


/* Display closebutton */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child .tab-close-button
{
display: -moz-box !important;
}?*/


/* OR */


/* Don't dislpay closebutton */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child .tab-close-button
{
display: none !important;
}?*/




/*********** NORMAL TAB ***********/


/*** NOT HOVER ***/


/* Width */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child:not(:hover) .tab-progress
{
margin-left: -26px !important;
margin-right: 0px !important;
}?*/


/* Position
Not needed - Foreground tab code is identical. (*)
*/



/***** HOVER *****/


/* Width */
/*?.tabbrowser-tab:not([protected="true"]):not([__tabloc_protected="true"]):not([__tabloc_locked="true"])[selected="true"]:first-child:last-child:hover .tab-progress
{
margin-left: -26px !important;
margin-right: 0px !important;
}?*/


/* Position
Not needed - Foreground tab code is identical. (*)
*/




/********** PROTECTED TAB *********/
/* Not needed - Foreground tab code is identical. (*) */

/* (*) Please let me know if it isn't. */