tabs-white.css

/**
	* A modification to the original tabs with the intent to isolate the color pieces
	*
	* Code by
  ______ __                                   __  ___
 /_  __// /_   ___   _____ ____ ___   ____   /  |/  /____ _ ____
  / /  / __ \ / _ \ / ___// __ `__ \ / __ \ / /|_/ // __ `// __ \
 / /  / / / //  __// /   / / / / / // /_/ // /  / // /_/ // / / /
/_/  /_/ /_/ \___//_/   /_/ /_/ /_/ \____//_/  /_/ \__,_//_/ /_/
	*/

/* For the tab border color to be white, the page background needs to be non-white or it just disappears. */
body
{
	background-color: #B0C4DE;
}

/* Visually connect tab and tab body (border around tabs and between tabs and body) */
div.all_tabs > div.tab > a
{
  color: black;                       /* Makes it look more like a button than a link */
	border-color: #E4E4E4;							/* This is color for left, top, and right of tab */
}


/**
	*  These next three classes distinguish between the 4 states a tab can be in.
	*
	* Selected                - this one tab had the emphasis color.
	* Inactive (Not selected) - all of the other tabs are other color.
	* Mouse over              - this one tab is hilighted in another.
	* Disabled                - This tab is unclickable (has no link).  This is not yet implemented.
	*
	* The CSS does not change position or anything else, just the appearance of the tab.
	*/

/* Selected tab color */
div.all_tabs > div.tab:target > a,						/* Apply to the targeted item or... */
:target #default > a													/* ... to the default item          */
{
	/* border-bottom-color: #E4E4E4; */
	border-bottom-color: #FFFFFF;								/* Border bottom color is tricky.  If there is a toolbar it should match */
																							/* the toolbar, otherwise it shuold match the tab body background color  */
																							/* (or perhaps the frame color)                                          */

  color: #999999;															/* Set active tab title font color. */
  background-color: #FFFFFF;									/* Set active tab background color. */
}

/* Inactive tabs color */
div.all_tabs > div.tab:not(:target) > a
{
	/* No change to font color */
	background-image: linear-gradient( 0deg, #CFCFCF 33%, #F2F2F2 66% );	/* Set inactive tab color. */

/* from here: http://www.colorzilla.com/gradient-editor/ */
}

/* Mouse over tab is hilighted */
div.all_tabs > div.tab:not(:target) > a:hover
{
	/* No change to font color */
	background-image: linear-gradient( 0deg, #FAFAFA 33%, #C2C2C2 66% );	/* Set mouse-over tab color. */
}

/**
	* Container for toolbar and contents - nothing else should be in here - this is the thing who's z-order should shift
	*/
div.all_tabs > div.tab > div.container
{
  background-color: #CCCCCC;									/* #CCCCCC is light gray.  This is global for all tabs and toolbars unless overridden */
	border-color: #E0E0E0;
	border-color: #FFFFFF;
}

/** 
	* Set up a toolbar for contents of the tab - this is technically inside the section described immediately above 
	*/
div.all_tabs > div.tab > div.container > div.tab-toolbar
{
  background-color: #FFFFFF;	/* Match the color of the Selected tab */
}

/**
	* This is the background color that informs users that the input field is remembered via cookie.
	* Clear the style to remove the chroma code.
	*/
.remembered_input
{
  background-color: #BBFFBB;	/* original color from old code */
  background-color: #555555;	/* get your attention color that something needs to be done here in the code */
}