/** this should only contain XUL dialog and document window widget defaults. Defaults for widgets of
    a particular application should be in that application's style sheet.
	For example style definitions for navigator can be found in navigator.css

   THIS FILE IS LOCKED DOWN.  YOU ARE NOT ALLOWED TO MODIFY IT WITHOUT FIRST HAVING YOUR
   CHANGES REVIEWED BY hyatt@netscape.com.
**/

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to HTML */
@namespace html url("http://www.w3.org/TR/REC-html40"); /* namespace for XUL elements */

/**********************************
 * Window
 **********************************/

/**
 * The is the outer most tag in a xul document all xul
 * content will be inside it.
 */
window { 
  background-color: white;
  font: 3mm arial,helvetica,sans-serif;
  padding: 0px;
}

window[wait-cursor] { cursor: wait !important; }

/**
 * This is a special class of window used for dialogs
 */
window.dialog { 
  background-color: #CCCCCC;
  /* There is a bug preventing this so this will not work property.
  padding-left: 11px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 11px;
  */
}

/**********************************
 * XUL widgets
 **********************************/

/******** Box *********/


/* Conditional debug 

*[debug="true"]:-moz-horizontal-box-debug {
  border: 2px solid blue;
  border-top-width: 10px;
  color: white;
  padding: 2px;
  margin: 2px;
}

*[debug="true"]:-moz-vertical-box-debug {
  border: 2px solid red;
  border-left-width: 10px;
  color: white;
  padding: 2px;
  margin: 2px;
}

*[debug="true"] *:-moz-horizontal-box-debug {
  border: 2px solid blue;
  border-top-width: 10px;
  color: white;
  padding: 2px;
  margin: 2px;
}

*[debug="true"] *:-moz-vertical-box-debug {
  border: 2px solid red;
  border-left-width: 10px;
  color: white;
  padding: 2px;
  margin: 2px;
}

*/

/* comment this in to make all boxes show their
   debug info automatically. Otherwise use debug="true"
   to show it and use the rules above.  */

:-moz-horizontal-box-debug {
  border: 2px solid blue;
  border-top-width: 10px;
  padding: 2px;
  margin: 2px;
  color: white;
}

:-moz-vertical-box-debug {
  border: 2px solid red;
  border-left-width: 10px;
  padding: 2px;
  margin: 2px;
  color: white;
}




/******* Scrollbar *******/

scrollbar { 
  user-focus:ignore; 
} 

/******* ToolBox & ToolBar *******/

toolbox { 
  background-color:#999999; 
  min-width: 1px;
  overflow: hidden;
}

toolbar {
  min-width: 1px;
  overflow: hidden;
} 

:toolbox-normal { 
  background-color: #003366; 
  background-image: url("chrome://global/skin/taskbar-tab.gif"); 
  background-repeat: no-repeat; 
} 

:toolbox-rollover { 
  background-color: #99cccc; 
  background-image: url("chrome://global/skin/taskbar-tab-hover.gif"); 
  background-repeat: no-repeat; 
} 

toolbar.standard {
	color: white;
	background-color: #003366;
	padding: 0px;
	margin: 0px;
	border: none;
	min-height: 46px;
}

/**
 * Navigation Toolbar
 */
toolbar.decorated {
	background-image: url("chrome://global/skin/navbar-bg.gif");
	background-repeat: repeat-x;
	background-position: 0% 0%;
	background-color: #CCCCCC;
	padding: 0px;
	padding-bottom: 4px;
}

toolbar.decorated > #toolbar_throbber_box { 
	background-color: #CCCCCC;
	min-width: 68px;
	max-width: 68px;
	background-image: url("chrome://global/skin/n-box-navbar.gif");
	background-repeat: no-repeat;
	background-position: 100% 0%;
}

toolbar.decorated > #toolbar_throbber_box > titledbutton#Throbber
{
	margin-top: 0px;
	margin-left: 9px;
}

toolbar.decorated > #toolbar_throbber_box > titledbutton#Throbber:active {
	margin-top: 1px;
	margin-left: 10px;
}


/**
 * round buttons used in 'standard toolbar'
 */
titledbutton.button28 {
	background-image: url("chrome://global/skin/button28-bg.gif");
	background-repeat: no-repeat;
	background-position: 50% 4px;
	background-color: transparent;
	color: #CCFFFF;
	border: none;
	padding: 0px;
	min-width: 28px;
	margin: 3px 7px 1px 1px;
	font-size: smaller;
}

titledbutton.button28:hover {
	background-image:url("chrome://global/skin/button28-bg-hover.gif");
	border: none;
	color: #CCFFFF;
	text-decoration: none;
}

titledbutton.button28:active {
	background-image:url("chrome://global/skin/button28-bg-active.gif");
	border: none;
	color: #CCFFFF;
	text-decoration: none;
}

titledbutton.button28[disabled="true"] {
	background-image:url("chrome://global/skin/button28-bg-disabled.gif");
	border: none;
	color: #669999;
	text-decoration: none;
}

titledbutton.button28[disabled="true"]:hover {
	background-image:url("chrome://global/skin/button28-bg-disabled.gif");
	border: none;
	color: #669999;
	text-decoration: none;
}

titledbutton.button28[disabled="true"]:active {
	background-image:url("chrome://global/skin/button28-bg-disabled.gif");
	border: none;
	color: #669999;
	text-decoration: none;
}


/**
 * normal buttons used in 'standard toolbar'
 */
titledbutton.other28 {
	background-image: none;
	background-color: transparent;
	color: #CCFFFF;
	border: none;
	padding: 0px;
	min-width: 28px;
	margin: 3px 7px 1px 1px;
	font-size: smaller;
}

titledbutton.other28:hover {
	background-image:url("chrome://global/skin/otherbutton28-bg-hover.gif");
	background-repeat: no-repeat;
	background-position: 50% 4px;
	color: #CCFFFF;
	border: none;
	text-decoration: none;
}

titledbutton.other28:active {
	background-image:url("chrome://global/skin/otherbutton28-bg-active.gif");
	background-repeat: no-repeat;
	background-position: 50% 4px;
	color: #CCFFFF;
	border: none;
	text-decoration: none;
	margin: 4px 6px 0px 2px;
}

titledbutton.other28[disabled="true"] { 
	margin: 3px 7px 1px 1px;
	color: #669999;
	border: none;
	text-decoration: none;
}

titledbutton.other28[disabled="true"]:hover {
	background-image: none;
	color: #669999;
	border: none;
	text-decoration: none;
}

titledbutton.other28[disabled="true"]:active {
	background-image: none;
	color: #669999;
	border: none;
	text-decoration: none;
}

/**
 * 32px round buttons (used in Navigation Toolbar)
 */
/* have to explicitly set the border and padding to ensure that more specific rules 
   for disabled and active titledbuttons don't apply */
titledbutton.button32 {
	background-repeat: no-repeat;
	background-position: 50% 0px;
	background-color: transparent;
	color: #CCFFFF;
	min-width: 36px;
	min-height: 36px;
        border: 1px solid transparent;
	padding: 0px;
	margin-left: 1px;
	margin-bottom: 1px;
	margin-top: 6px;
	margin-right: 6px;
	font-size: smaller;
	background-image:url("chrome://global/skin/button32-bg.gif");
}

titledbutton.button32:hover {
        border: 1px solid transparent;
	padding: 0px;
	margin-left: 1px;
	margin-bottom: 1px;
	margin-top: 6px;
	margin-right: 6px;
	background-image:url("chrome://global/skin/button32-bg-hover.gif");
}

titledbutton.button32:active {
        border: 1px solid transparent;
	padding: 0px;
	margin-top: 7px;
	margin-left: 2px;
	margin-bottom: 0px;
	margin-right: 5px;
	background-image:url("chrome://global/skin/button32-bg-active.gif");
}

titledbutton.button32[disabled="true"] {
        border: 1px solid transparent;
	padding: 0px;
	margin-left: 1px;
	margin-bottom: 1px;
	margin-top: 6px;
	margin-right: 6px;
	background-image:url("chrome://global/skin/button32-bg-disabled.gif");
}

titledbutton.button32[disabled="true"]:hover {
        border: 1px solid transparent;
	padding: 0px;
	margin-left: 1px;
	margin-bottom: 1px;
	margin-top: 6px;
	margin-right: 6px;
	background-image:url("chrome://global/skin/button32-bg-disabled.gif");
}

titledbutton.button32[disabled="true"]:active {
        border: 1px solid transparent;
	padding: 0px;
	margin-left: 1px;
	margin-bottom: 1px;
	margin-top: 6px;
	margin-right: 6px;
	background-image:url("chrome://global/skin/button32-bg-disabled.gif");
}

/**
 * Throbber
 */
/* FIX ME - move these gifs to global */
titledbutton#Throbber {
	border: none;
	margin-top: 8px;
	margin-left: 9px;
	list-style-image: url("chrome://global/skin/animthrob_single.gif");
	background-image: none;
}

titledbutton#Throbber:active {
	margin-top: 9px;
	margin-left: 10px;
}

titledbutton#Throbber[busy="true"] {
	list-style-image:url("chrome://global/skin/animthrob.gif");
}

/* icons titledbuttons */
titledbutton.message-icon {
  list-style-image: url("chrome://global/skin/message-icon.gif");
}
titledbutton.alert-icon {
  list-style-image: url("chrome://global/skin/alert-icon.gif");
}
titledbutton.error-icon {
  list-style-image: url("chrome://global/skin/error-icon.gif");
}
titledbutton.question-icon {
  list-style-image: url("chrome://global/skin/question-icon.gif");
}


toolbar {
    background-color: #CCCCCC;
}

toolbar.standard #toolbar_throbber_box { 
	background-color: #CCCCCC;
	min-width: 59px;
	max-width: 59px;
	background-image: url("chrome://global/skin/n-box.gif");
	background-repeat: no-repeat;
	background-position: 100% 0%;
}

titledbutton.toolbar {
  border: 1px solid transparent;
}

titledbutton.toolbar:hover {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  color:#333366;
  text-decoration: underline;
}
 
titledbutton.toolbar:hover:-moz-outline {
   border : 1px solid black;
}
 
titledbutton.toolbar:active {
  text-decoration: none;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

titledbutton.toolbar:active:-moz-outline {
   border : 1px solid black;
}
 
titledbutton.toolbar[disabled="true"] {
	border: 1px solid transparent;
}

titledbutton.toolbar[disabled="true"]:hover {
	border: 1px solid transparent;
}

titledbutton.toolbar[disabled="true"]:active {
	border: 1px solid transparent;
	padding: 2px;
}


/**
 * Bookmarks n' stuff
 */

/* These rules style the buttons that appear in the Personal Toolbar
   for leaf bookmarks */
titledbutton.bookmarkbutton { 
  margin: 0px; 
  max-width: 8em; 
  font: inherit; 
  color: #99CCCC; 
  border: none; 
  padding: 1px; 
} 

titledbutton.bookmarkbutton:hover { 
  color: #CCFFFF; 
  background-color: #336699; 
} 

titledbutton.bookmarkbutton:active { 
  color: #CCFFFF; 
  background-color: #336699; 
  padding-left: 2px; 
  padding-top: 2px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
} 

/* These rules style the menus that appear in the Personal Toolbar
   for bookmark folders. */
titledbutton.bookmarkFolder { 
  margin: 0px; 
  max-width: 8em; 
  font: inherit; 
  color: #99CCCC; 
  border: none; 
  padding: 1px; 
  list-style-image: url("chrome://global/skin/toolbar-dropdown.gif");
} 

menu:hover > .bookmarkFolder { 
  color: #CCFFFF; 
  background-color: #336699; 
  list-style-image: url("chrome://global/skin/toolbar-dropdown-hover.gif");
} 

menu:active > .bookmarkFolder { 
  color: #CCFFFF; 
  background-color: #336699; 
  padding-left: 2px; 
  padding-top: 2px; 
  padding-right: 0px; 
  padding-bottom: 0px; 
  list-style-image: url("chrome://global/skin/toolbar-dropdown-hover.gif");
}

/**
 * status-bar
 */
box#status-bar {
  /* Style in XUL used 1px */
	min-width: 1em;
	background-color: #CCCCCC;
	user-focus: ignore;
  overflow:hidden
}

box#toolbar_button_box {
  min-width: 1px; 
  overflow:hidden
}

titledbutton.status-bar {
	border: none;
	padding: 0px;
	margin: 0px;
	min-width: 3em;
}

titledbutton.status-bar:hover {
     text-decoration: none;
}

/* removing margin and padding from normal mousedown titledbutton behavior */
titledbutton.status-bar:active {
	border: none;
	padding: 0px;
	margin: 0px;
}

#status-bar-leftcap {
  /* from XUL */
  width:8px; 
	min-width: 8px;
	max-width: 8px;
	background-image: url("chrome://global/skin/gray-bottomleft.gif");
	background-position: 0% 100%;
	background-repeat: no-repeat;
}

#status-bar-rightcap {
  /* From XUL */
  width:8px;
	min-width: 8px;
	max-width: 8px;
	background-image: url("chrome://global/skin/gray-bottomright.gif");
	background-position: 100% 100%;
	background-repeat: no-repeat;
}

/******* Splitters *******/

splitter {
   cursor: e-resize;
   min-width: 5px;
   min-height: 5px;
}

splitter[state="dragging"]
{
   background-color: gray;
}

grippy{
	margin: 0px;
	border: 2px solid #003366;
	padding: 0px;
	background-color: #6699CC;
	list-style-image: none;
	cursor: pointer;
}

grippy:hover{
	background-color: #99CCFF;
}

grippy:active{
	background-color: #99CCFF;
}

box[align="vertical"]>splitter grippy {
	/* a horizontal splitter */
	min-width: 60px;
	max-height: 4px;
}

box[align="horizontal"]>splitter grippy {
	/* a vertical splitter */
	max-width: 4px;
	min-height: 60px;
}

window[align="vertical"]>splitter grippy {
	/* a horizontal splitter */
	min-width: 60px;
	max-height: 4px;
}

window[align="horizontal"]>splitter grippy {
	/* a vertical splitter */
	max-width: 4px;
	min-height: 60px;
}

box[align="vertical"]>splitter {
	/* a vertical splitter */
    cursor: n-resize;
}

window[align="vertical"]>splitter {
	/* a vertical splitter */
	cursor: n-resize;
}

/**
 * gray horizontal splitter for pane views
 */
splitter.gray-horizontal-splitter { 
	min-height: 8px;
	background-color: #CCCCCC;
	border: none;
	padding: 0px;
}

splitter.gray-horizontal-splitter grippy { 
	margin: 0px;
	border: 2px solid #CCCCCC;
	padding: 0px;
	background-color: #6699CC;
	list-style-image: none;
}
splitter.gray-horizontal-splitter grippy:hover { 
	background-color: #003366;
}

splitter.gray-horizontal-splitter grippy:active { 
	background-color: #003366;
}

splitter.gray-horizontal-splitter #begincap { 
	min-width: 8px;
	max-width: 8px;
	background-image: url("chrome://global/skin/gray-bottomleft.gif");
	background-repeat: no-repeat;
	background-position: 0% 100%;
}

splitter.gray-horizontal-splitter #endcap { 
	min-width: 8px;
	max-width: 8px;
}


/****** Progress Meter ********/

progressmeter[align="horizontal"] {
	height: 1em;
}

progressmeter {
	color : #9999CC;
	background-color: #999999;
}

progressmeter[mode="undetermined"]
{
   //background-color: yellow;
   background-image: url(chrome://global/skin/progressmeter-busy.gif);
}

/********* Box ********/

box 
{
   vertical-align: top;
}

/********* TitledBox **********/

titledbox
{
  display: block;
  border: 2px groove white;
  padding: 5px;
  padding-bottom: 2px;
  margin: 2px;
}

title
{
   display: block;
   font-weight: bold;
}

title > *
{
   margin-left: 5px;
   margin-right: 5px;
}

title > html|*
{
   margin-left: 5px;
   margin-right: 5px;
}

:titledbox-content {
  display: block;
  padding: inherit;
}

/********* XP Menus ***********/

menubar {
  background-color: white;
  min-width: 1px;
  overflow: hidden;
  margin-bottom: 2px;
}

menu {
	color: black;
}

menu[disabled="true"] {
	color: #999999;
}

menuitem {
	color: black;
}

menuitem[disabled="true"] {
	color: #999999;
}

/* XXX menupopups have to have a color explicitly specified. this is a bug */
menupopup, popup {
  background-color: #CCCCCC;
  border: 1px solid #336699;
}

popup {
  background-color: #CCCCCC;
}

menupopup > menu {
  max-width: 250px;
  min-width: 125px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

popup > menu {
  max-width: 250px;
  min-width: 125px;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
}

menupopup > menuitem {
  max-width: 250px;
  min-width: 125px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

popup > menuitem {
  max-width: 250px;
  min-width: 125px;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 0px;
  margin-bottom: 0px;
}

menuseparator {
  border-bottom: 1px #336699 solid; 
  margin: 2px;
}

toolbarseparator { 
  min-width: 2em; 
  max-width: 2em;
  width: 2em; 
}

menubar > menu {
  border: 1px solid transparent;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 3px;
  padding-right: 3px;
  margin-top: 2px;
  margin-bottom: 2px;
}

menupopup > menu {
  border: 1px solid transparent;
  padding: 2px;
}

menupopup > menuitem {
  border: 1px solid transparent;
  padding: 2px;
}

popup > menuitem {
  border: 1px solid transparent;
  padding: 2px;
}

menubar > menu[menuactive="true"] {
  border: 1px solid #FFFFFF;
  background-color: #CCCCCC;
  -moz-border-radius: 4px;
}

menubar > menu[menuactive="true"][open="true"] {
  border: 1px solid #336699;
  border-bottom: 1px solid #CCCCCC;
  background-color: #CCCCCC;
  -moz-border-radius: 4px 4px 0px 0px;
}

menupopup > menu[menuactive="true"] {
  background-color: #336699;
  color: white;
}

popup > menu[menuactive="true"] {
  background-color: #336699;
  color: white;
}

menupopup > menuitem[menuactive="true"] {
  background-color: #336699;
  color: white;
}

popup > menuitem[menuactive="true"] {
  background-color: #336699;
  color: white;
}

.menu-right {
  padding: 0px;
  border: 0px;
  width: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 6px;
  margin-right: 0px;
}

.menu-left {
  color: inherit;
  padding: 0px;
  border: 0px;
  width: 13px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 2px;
}

.menubar-left {
  color: inherit;
  padding: 0px;
  border: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 2px;
}

.menu-text, .menu-accel {
  color: inherit;
  padding: 0px;
  border: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 2px;
}

.menubar-text {
  color: inherit;
  padding: 0px;
  border: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 2px;
}

menuitem > .menu-right {
  list-style-image: none;
}

menuitem > .menu-left {
  list-style-image: none;
}

menuitem[checked="true"] > .menu-left {
  list-style-image: url("chrome://global/skin/menu-check.gif");
}

menuitem[checked="true"][disabled="true"] > .menu-left {
  list-style-image: url("chrome://global/skin/menu-check-disabled.gif");
}

menuitem[checked="true"][menuactive="true"] > .menu-left {
  list-style-image: url("chrome://global/skin/menu-check-hover.gif");
}

menu > .menu-right {
  list-style-image: url("chrome://global/skin/menu-arrow.gif");
}

menu[disabled="true"] > .menu-right {
  list-style-image: url("chrome://global/skin/menu-arrow-disabled.gif");
}

menu[menuactive="true"] > .menu-right {
  list-style-image: url("chrome://global/skin/menu-arrow-hover.gif");
}

/******** Rules for menus on the standard toolbars ***************/

menu.standard {
  color: #99CCCC;
}

menu.standard > .menu-right {
  list-style-image: url("chrome://global/skin/toolbar-menu-arrow.gif");
}

menu.standard:hover > .menu-right {
  list-style-image: url("chrome://global/skin/toolbar-menu-arrow-hover.gif");
}

menu.standard[disabled="true"] > .menu-right {
  list-style-image: url("chrome://global/skin/toolbar-menu-arrow-disabled.gif");
}

menuitem.standard {
  color: #99CCCC;
}

menuseparator.standard {
  border-top: none;
  border-bottom: 1px #99CCCC solid; 
}

menupopup.standard {
  color: #99CCCC;
  background-color: #003366;
  border: 1px #99CCCC solid; 
}

menupopup > menu[menuactive="true"].standard {
  color: #003366;
  background-color: #99CCCC;
}

menupopup > menuitem[menuactive="true"].standard {
  color: #003366;
  background-color: #99CCCC;
}


/******** Titled buttons **********/
titledbutton.toolbar-flat {
   color: #99CCCC;
   font: inherit;
   border: none;
   padding: 1px;
   margin: 0px;
}

titledbutton.toolbar-flat:hover {
	text-decoration: none;
	background-color: #336699;
  color: #CCFFFF;
}

titledbutton.toolbar-flat:active {
	text-decoration: none;
  color: #CCFFFF;
  padding: 2px 0px 0px 2px;
}


/* push button */
titledbutton.push {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  -moz-border-radius: 3px 3px 2px 2px;
  padding: 2px;
  margin: 2px;
  text-align: center;
  background-color: inherit;
  background-image: inherit;
}

titledbutton.push:hover {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  color: #003366;
  padding: 2px;
  text-decoration: underline;
}
 
/*titledbutton.push:hover:-moz-outline {
  outline: 1px solid black;
}*/

titledbutton.push:active {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding: 3px 1px 1px 3px;
  text-decoration: none;
}

/*titledbutton.push:active:-moz-outline {
  outline: 1px solid black;
}*/

titledbutton.push[toggled="1"] {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding: 3px 1px 1px 3px;
}

titledbutton.push[toggled="2"] {
   background-color: lightgray;
   border: 1px solid gray;
}

titledbutton.push[disabled="true"] {
	background-color:inherit;
  	background-image: inherit;
	border : 1px solid #999999;
	color: #999999;
}

titledbutton.push[disabled="true"]:hover {
  	background-color:inherit;
  	background-image: inherit;
	border : 1px solid #999999;
	color: #999999;
}

titledbutton.push[disabled="true"]:active {
  	background-color:inherit;
  	background-image: inherit;
	border : 1px solid #999999;
	color: #999999;
	padding: 2px;
}

titledbutton.dialog {
  min-width: 5em;
}

titledbutton.dialog[default] {
	/* border-color: black; */
	font-weight: bold;
	list-style-image: url("chrome://global/skin/return.gif");
	
	/* FIX ME - temporary workaround to offset the lack of a way to align text and image */
	padding-right: 2em;
}

titledbutton.popup {
	list-style-image:url(chrome://global/skin/taskbar-popup-arrow.gif);
}

/* special class for plain titledbuttons */

titledbutton.plain {
	border: 1px solid transparent;
	padding: 2px;
}

titledbutton.plain:hover {
	border: 1px solid transparent;
	padding: 2px;
	text-decoration: none;
	color: inherit;
}
 
titledbutton.plain:active {
	border: 1px solid transparent;
	padding: 2px;
	text-decoration: none;
	color: inherit;
}

titledbutton.plain[disabled] {
	border: 1px solid transparent;
	padding: 2px;
}

titledbutton.plain[disabled]:hover {
	border: 1px solid transparent;
	padding: 2px;
}

titledbutton.plain[disabled]:active {
	border: 1px solid transparent;
	padding: 2px;
}


/* special class for borderless buttons */
/* titled button on toolbars are automatically set to be borderless (see below) */

titledbutton.borderless {
  border: 1px solid transparent;
}
 
titledbutton.borderless:hover {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  color:#333366;
  text-decoration: underline;
}
  
titledbutton.borderless:hover:-moz-outline {
  border : 1px solid black;
}

titledbutton.borderless:active {
  text-decoration:none;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}
 
titledbutton.borderless:active:-moz-outline {
  border : 1px solid black;
}
 
titledbutton.borderless[disabled] {
  border: 1px solid transparent;
}

titledbutton.borderless[disabled]:hover {
  border: 1px solid transparent;
}

titledbutton.borderless[disabled]:active {
  border: 1px solid transparent;
  padding: 2px;
}

/******** Tree widget **********/

tree {
  background-color: white;
  border: none;
  border-spacing: 0px;
}

tree.inset {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

treeitem[selected="true"] > treerow { 
  color: white;
  background-color: #336699;
}

treecell { 
  white-space: nowrap;
  vertical-align: middle;
} 

treehead > treerow > treecell { 
  background-color: #CCCCCC; 
  color: black;
  border-right: 1px solid white;
  padding-left: 5px;
} 

tree.inset > treehead > treerow > treecell {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
}

tree.inset > treehead > treerow > treecell.sortable:active {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

treecell.image > titledbutton {
  border: 1px solid transparent;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}

treecell.image > titledbutton:hover {
  border: 1px solid transparent;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
 
treecell.image > titledbutton:active {
  border: 1px solid transparent;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}

.tree-icon {
  width: 100%;
}

.tree-button {
 margin: 0px;
 padding: 0px;
 border: none;
 list-style-image: inherit;
 width: 100%;
}

treecell {
 vertical-align: middle;
 padding-left: 2px;
}

/* BEN: make rule for property list cells  */
treecell.propertylist {
  padding-left: 5px;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
}

treeitem > treerow > treecell > .twisty {
 border: none;
 padding: 0px;
 margin: 0px;
 width: 16px;
 list-style-image: url("chrome://global/skin/closedtwisty.gif");
 user-focus:ignore;
}

.twisty:hover {
 text-decoration: none;
}

.twisty:active {
 text-decoration: none;
}

treeitem[empty="true"] > treerow > treecell > titledbutton.twisty {
 list-style-image: none;
}

treeitem > treerow > treecell > .twisty[disabled="true"] {
 list-style-image: none;
}

treeitem[container="true"][open="true"] > treerow > treecell > .twisty {
 list-style-image: url("chrome://global/skin/opentwisty.gif");
}


/********** Tab widget *********/

tab { 
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  color: black; 
  padding: 3px 5px 3px 5px;
}

/* when a tab is selected this is how it should look */
tab[selected="true"] {
	font-weight: bold;
}

tab:hover { 
  color: #003366;
  text-decoration: underline;
}

tab:active { 
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  text-decoration: none;
}

    /* top tabs */
tabcontrol[align="vertical"] tabbox[align="horizontal"] tab { 
  border-bottom: none;
  -moz-border-radius: 8px 9px 0px 0px;
  padding-bottom: 1px;
  margin: 1px 2px 1px 2px;
}

	/* bottom tabs */
tabcontrol[align="vertical"] tabpanel + tabbox[align="horizontal"] tab { 
  border-top: none;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  -moz-border-radius: 0px 0px 8px 8px;
  padding: 1px 5px 3px 5px;
  margin: 1px 2px 1px 2px;
}

	/* left tabs */
tabcontrol[align="horizontal"] tabbox[align="vertical"] tab { 
  border-right: none;
  -moz-border-radius: 8px 0px 0px 8px;
  padding-right: 1px;
  margin: 2px 1px 2px 1px;
}

	/* right tabs */
tabcontrol[align="horizontal"] tabpanel + tabbox[align="vertical"]  tab { 
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: none;
  border-right: 1px solid #666666;
  -moz-border-radius: 0px 9px 8px 0px;
  padding: 3px 5px 1px 5px;
  margin: 2px 1px 2px 1px;
}

tabcontrol { 
  border: none; 
}

deck.tabpanel, tabpanel {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  padding: 5px;
}

/**********************************
 * HTML components in the window tag
 **********************************/

/**
 * removed 2px black border from iframe
 */
html|iframe {
 min-width: 10px;
 min-height: 10px;
 width: 100px;
 height: 100px;
 border: none;
}

html|div.separator[align="horizontal"] { 
	 width: 100%; 
	 max-height: 2px; 
	 vertical-align: middle; 
	 border-bottom: 2px groove white; 
	 margin-top: 0.5em; 
	 margin-bottom: 0.5em; 
	 margin-left: 0.25em; 
	 margin-right: 0.25em; 
} 

html|div.separator[align="vertical"] { 
	 height: 100%; 
	 max-width: 2px; 
	 border-right: 2px groove white; 
	 background-color: yellow; 
	 margin-left: 0.5em; 
	 margin-right: 0.5em; 
	 margin-top: 0.25em; 
	 margin-bottom: 0.25em; 
}


html|fieldset {
	margin-bottom: 6px;
	margin-top: 5px;
	margin-left: 6px;
	margin-right: 5px;
	padding: 5px; 
	border: 2px groove white;
}


html|legend {
	border: none;
	margin-bottom: 5px;
	margin-top: 0px;
	margin-left: 4px;
	margin-right: 3px;
	cursor: default;
}

html|label {
	padding-bottom: 4px;
	background-color: transparent;
	white-space: nowrap;
}

html|textarea {
  font-family: inherit;
  font-size: inherit;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding-top: 1px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 3px;
  margin-top: 1px;
  margin-bottom: 2px;
  margin-left: 4px;
  margin-right: 3px;
  background-color: white;
  color: black;
  cursor: text;
}

html|textarea:active { cursor: text; }

html|textarea:hover { cursor: text; }

html|textarea:focus { cursor: text; }


html|input[type=text] {
  font-family: inherit;
  font-size: inherit;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding: 1px;
  margin: 0px 3px 2px 4px;
  background-color: white;
  color: black;
  min-height: 1.6em;
  cursor: text;
}

html|input[type=text]:active { cursor: text; }

html|input[type=text]:hover { cursor: text; }

html|input[type=text]:focus { cursor: text; }

html|input[type=text][disabled] { color: #999999; }


html|input[type=password] {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding-top: 3px;
  padding-bottom: 2px;
  padding-left: 4px;
  padding-right: 3px;
  margin-top: 1px;
  margin-bottom: 2px;
  margin-left: 4px;
  margin-right: 3px;
  background-color: white;
  color: black;
  min-height: 1.75em;
}

html|input {
  background-color: white;
  text-align: left;
  color: black;
  user-focus: normal;
}

/** 
 * borderless cell for containing lengthy or variable length strings in a dialog
 * where you want permanence (non-editability) but the ability to copy/paste, and
 * fit long strings in a small space.
 */
html|input.scroll-label {
  border: none;
}



/********** radio **********/
html|input[type=radio] {
  margin: 3px 5px 3px 3px;
  color: black;
  width: 12px;
  height: 12px;
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  background-color: #CCCCCC;
  -moz-border-radius: 50%;
}

html|input[type=radio]:focus {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
}

html|input[type=radio]:hover {
  border: 1px solid #003366;
}

html|input[type=radio]:active {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  background-color: #CCCCCC;
}

html|input[type=radio][disabled] {
  border: 1px solid #666666;
}


/********** checkbox **********/
html|input[type=checkbox] {
  padding: 0px 1px 1px 0px;
  margin: 3px 5px 4px 3px;
  background-color: #CCCCCC;
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  color: black;
  width: 13px;
  height: 13px;
  color: black;
  /* FIX ME - we really want the same size radius on each corner,
    but rounding bug seems to cause the corners to be calculated in a different way */
  -moz-border-radius: 3px 3px 2px 2px;
}

html|input[type=checkbox]:focus {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
}

html|input[type=checkbox]:hover {
  border: 1px solid #003366;
}

html|input[type=checkbox]:active {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

html|input[type=checkbox][disabled] {
  border: 1px solid #666666;
}

html|input[type=checkbox][disabled]:hover {
  border: 1px solid #666666;
}

html|input[type=checkbox][disabled]:active {
  border: 1px solid #666666;
}

html|div, html|td {
  cursor: default;
}

/********** SELECT **********/
html|select[size] {
  font-family: inherit;
  font-size: inherit;
  background-color: white;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding: 1px 0px 1px 0px;
}

html|select, html|select[size="1"] {
  font-family: inherit;
  font-size: inherit;
  background-color: #CCCCCC;
  border: none;
  padding: 0px;
}

html|select > html|input[type="button"]:hover {
  border: 1px solid #003366;
}

html|select > html|input#-moz-display:hover {
  border: 1px solid #003366;
  border-right: none;
}

html|select[size]:focus {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  padding: 1px 0px 1px 0px;
}

html|select:focus, html|select[size="1"]:focus {
  border: 1px solid black;
  padding: 0px;
}

html|select[multiple]:focus {
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
}

html|select[size][disabled] {
  background-color: #CCCCCC;
  border: 1px solid #999999;
}

html|select[multiple][disabled] {
  background-color: #CCCCCC;
  border: 1px solid #999999;
}

html|select[disabled], html|select[size="1"][disabled] {
  background-color: #CCCCCC;
  border: 1px solid #999999;
}

/* combobox button */
html|select > html|input[type="button"] {
  background-color: #CCCCCC;
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  /*background-image:url("arrow.gif");*/
  background-repeat: no-repeat;
  background-position: center;
  width: 12px;
  height: 12px;
  -moz-border-radius: 0px 3px 2px 0px;
}

/* combobox button depressed */
html|select > html|input[type="button"]:active {
  background-color: #CCCCCC;
  /*background-image:url("arrowd.gif");*/
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  -moz-border-radius: 0px 3px 2px 0px;
}

html|select[disabled] > html|input[type="button"] {
  background-color: #CCCCCC;
  border: solid 1px #999999;
  -moz-border-radius: 0px 3px 2px 0px;
}


/* combobox display area */
html|select > html|input#-moz-display {
  font-family: inherit;
  font-size: inherit;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: none;
  background-color: #CCCCCC;
  background-image: none;
  padding: 0px 0px 3px 0px;
  margin: 0px;
  vertical-align: bottom;
}

html|select > html|input:button-content {
  text-align: left;
}

html|select[disabled] > html|input#-moz-display {
  font-family: inherit;
  font-size: inherit;
  border: none;
  color: #999999;
  background-color: #CCCCCC;
  background-image: none;
  -moz-border-radius: 0px;
  padding: 0px 0px 3px 0px;
  vertical-align: bottom;
}

/* combbox display area - active */
html|select > html|input#-moz-display:active {
  font-family: inherit;
  font-size: inherit;
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: none;
  background-color: #CCCCCC;
  background-image: none;
  -moz-border-radius: 0px;
  padding: 0px 0px 3px 0px;
  vertical-align: bottom;
}


html|option {
  min-height: 1em;
  display:block;
  font-family: inherit;
  font-size: inherit;
  user-select: none;
}

/* we need to address the part where there is a label */
/* and content. The CSS3 content property would be handy for this */
html|option[label]:before { 
  content:attr(label);
}

html|select[size] html|option {
  padding-left:   3px;
  padding-top:    0px;
  padding-right:  11px;
  padding-bottom: 0px;
}

html|select html|option, html|select[size="1"] html|option {
  padding-left:   3px;
  padding-top:    0px;
  padding-right:  5px;
  padding-bottom: 0px;
}

html|select[disabled] > html|option {
  color: #999999;
  background-color: white; 
}

/* Combobox item style */
html|select html|option[-moz-option-selected] {
 color: white;
 background-color: #336699;
}

/* List box item selected style */
html|select html|option[disabled][-moz-option-selected] {
  color: #999999;
  background-color: #CCCCCC;
}

html|select html|option[disabled] {
  color: #999999;
  background-color: #CCCCCC;
}

html|select[size] html|option[-moz-option-selected] {
  color: white;
  background-color: #336699;
}

html|select[size][disabled] html|option[-moz-option-selected] {
  color: #999999;
  background-color: #CCCCCC;
}

html|select[size="1"] html|option[-moz-option-selected] {
  color: white;
  background-color: #336699;
}

html|select[size="1"][disabled] html|option[-moz-option-selected] {
  color: #999999;
  background-color: #CCCCCC;
}

html|select[multiple] html|option[-moz-option-selected] {
  color: white;
  background-color: #336699;
}

html|select[multiple][disabled] html|option[-moz-option-selected] {
  color: #999999;
  background-color: #CCCCCC;
}

html|select[multiple][size="1"] html|option[-moz-option-selected] {
  color: white;
  background-color: #336699;
}

html|select > html|input[type="button"]#-moz-display:-moz-focus-inner {
   /*border:none;
   padding-left  : 3px;
   padding-right : 0px;
   padding-top   : 0px;
   padding-bottom: 0px;
   margin: 0px;*/
}

html|select > html|input[type="button"]#-moz-display:focus:-moz-focus-inner {
   /*border:none;
   padding-left  : 0px;
   padding-right : 0px;
   padding-top   : 0px;
   padding-bottom: 0px;
   margin: 0px;*/
}

html|optgroup {
  font-family: inherit;
  font-size: inherit;
  display:block;
  font-style: italic;
  font-weight: bold;
}

html|optgroup > html|option {
  display:block;
  padding-left:20px;
  font-style: normal;
  font-weight: normal;
}

html|optgroup:before {
  display: block;
  content:attr(label);
}

html|select:focus > html|input#-moz-display {
  border: none;
}

html|select[size="1"]:focus > html|input#-moz-display {
  border: none;
}

