/** 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.
**/

/* import the widget style sheets */

@import url(chrome://global/skin/button.css);
@import url(chrome://global/skin/checkbox.css);
@import url(chrome://global/skin/radio.css);
@import url(chrome://global/skin/tree.css);
@import url(chrome://global/skin/menubutton.css);
@import url(chrome://global/skin/menulist.css);
@import url(chrome://global/skin/colors.css);
@import url(chrome://global/skin/textfield.css);

@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;
    padding               : 5px;
  }

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

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

:-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;
}

box {
   overflow: hidden;
}

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

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

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

toolbargrippy { 
  background-color: #003366; 
  background-image: url("chrome://global/skin/taskbar-tab.gif"); 
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
} 

toolbar[collapsed="true"] > toolbargrippy {
  width: 30px;
}

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

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;
}

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:hover: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:hover: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:hover: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;
}

menu:hover > .other28 {
	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;
}

menu:hover:active > .other28 {
	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;
}

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

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

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

/* non-iconic toolbar button (e.g. search) */
titledbutton.toolbar-non-iconic { 
  background-color: #99CCCC;
  padding: 2px;
  margin: 0px 2px 0px 2px;
  border: 1px outset #99CCCC;
  -moz-border-radius: 4px;
  font-weight: bold;
} 

titledbutton.toolbar-non-iconic:active {
  padding: 3px 1px 1px 3px;
  border: 1px inset #CCFFFF;
}

/**
 * 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:hover:active {
	margin-top: 9px;
	margin-left: 10px;
}

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

/* icons titledbuttons */
.message-icon {
  list-style-image: url("chrome://global/skin/message-icon.gif");
}
.alert-icon {
  list-style-image: url("chrome://global/skin/alert-icon.gif");
}
.error-icon {
  list-style-image: url("chrome://global/skin/error-icon.gif");
}
.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:hover: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:hover: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;
}

box > *[collapsed="true"] {
  visibility: collapse;
}

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

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

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

box[orient="vertical"]>splitter grippy {
	/* a horizontal splitter */
	width: 60px;
	height:8px;
}

box>splitter grippy {
	/* a vertical splitter */
	width: 8px;
	height: 60px;
}

window[orient="vertical"]>splitter grippy {
	/* a horizontal splitter */
	width: 8px;
	height: 10px;
}

window>splitter grippy {
	/* a vertical splitter */
	width: 8px;
	height: 60px;
}

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

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

/* for backwards compatibility */
box[align="vertical"]>splitter grippy {
	/* a horizontal splitter */
	width: 60px;
	height: 8px;
}

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

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;
	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;
	width: 8px;
}


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

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

box.progress-bar {
	background-color : #9999cc;
}

box.progress-remainder {
	background-color: #999999;
}

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

progressmeter[mode="undetermined"] > .internal-box > stack > progressbar
{
  display: none;
}

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

box 
{
   vertical-align: top;
}

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

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

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;
}

menubar > toolbargrippy {
  display: none;
}

menu {
	color: black;
	vertical-align: middle;
}

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

menuitem {
	color: black;
	vertical-align: middle;
}

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;
}

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

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

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

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

.menu-right {
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 6px;
  margin-right: 0px;
  width: 8px;
  text-align: center;
}

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

.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;
}

.menu-accel {
  margin-left: 4px;
}

.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"][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");
}


menulist, menubutton {
  padding: 1px 0px 1px 0px;
}

menulist > .menu-text,
menubutton > .menu-text {
  padding-left: 4px;
  padding-right: 4px;
  border: 1px inset #CCCCCC;
}

menubutton > .menu-button {
  border: 1px outset #CCCCCC;
  padding: 2px;
}

menubutton > .menu-button:active {
  border: 1px inset #CCCCCC;
  padding: 3px 1px 1px 3px;
}


menubutton > .menu-dropmarker, 
menulist > .menu-dropmarker {
  border: 1px outset #CCCCCC;
  list-style-image: url("chrome://global/skin/scroll-down.gif");
  padding: 0px 2px 0px 2px;
}

menubutton[open="true"] > .menu-dropmarker,
menulist[open="true"] > .menu-dropmarker {
  border: 1px inset #CCCCCC;
  padding: 1px 1px -1px 3px;
}

menubutton menupopup, menulist menupopup {
  border: 1px outset #CCCCCC;
}

menulist[editable="true"] {
  padding: 0px;
}

menulist[editable="true"] > .menu-text {
  border-left: none;
  border-top: 1px inset #CCCCCC;
  border-right: 1px inset #CCCCCC;
  border-bottom: 1px inset #CCCCCC;
  margin: 0px 2px 0px 0px;
}

menulist[editable="true"] > .menu-dropmarker {
  border: 1px outset #CCCCCC;
}

menulist[editable="true"][open="true"] > .menu-dropmarker {
  border: 1px inset #CCCCCC;
}

menulist[editable="true"] > .menu-icon {
  list-style-image: url("chrome://bookmarks/skin/bookmark-item.gif");
  background-color: white;
  padding: 1px;
  border-left: 1px inset #CCCCCC;
  border-top: 1px inset #CCCCCC;
  border-right: none;
  border-bottom: 1px inset #CCCCCC;
}

menulist menupopup > menuseparator {
  border-bottom: 2px groove #CCCCCC;
}

/******** 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:hover: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;
  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;
  margin: 2px;
}
 
/*titledbutton.push:hover:-moz-outline {
  outline: 1px solid black;
}*/

titledbutton.push:hover: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;
  margin: 2px;
}

/*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;
  margin: 2px;
}

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

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

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

titledbutton.push[disabled="true"]:active {
  	background-color:inherit;
  	background-image: inherit;
	border : 1px solid #999999;
	color: #999999;
	padding: 2px;
	margin: 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: 12px;
}

titledbutton.dialog[default]:hover:active {
	/* FIX ME - temporary workaround to offset the lack of a way to align text and image */
	padding-right: 11px;
}

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:hover: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:hover: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;
}

/********** 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:hover:active { 
  border-top: 1px solid #666666;
  border-bottom: 1px solid white;
  border-left: 1px solid #666666;
  border-right: 1px solid white;
  text-decoration: none;
}

tabbox {
  padding: 0px 2px 0px 2px;
}

    /* top tabs */
tabcontrol[align="vertical"] tabbox[align="horizontal"] tab { 
  border-bottom: none;
  -moz-border-radius: 8px 8px 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 8px 8px 0px;
  padding: 3px 5px 1px 5px;
  margin: 2px 1px 2px 1px;
}

tabcontrol { 
  border: none; 
}

/* border on bottom only, no padding (used in search) */
tabpanel.light {
  border: none;
  border-bottom: 1px outset #CCCCCC;
  padding: 0px;
}

tabpanel {
  border-top: 1px solid white;
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  padding: 0px;
}

/**********************************
 * custom XBL widgets
 **********************************/

/**
 * texttab folder lookalike e.g. for sidebar panel headers
 */

box.texttab{
  behavior: url("chrome://global/content/globalBindings.xml#texttab");
  padding-top: 2px;
  min-height: 10px;
  min-width: 10px;
}


box.texttab[selected="true"] {
  border-bottom: 1px solid white;
}

box.texttab > .remain-space{
  border-bottom:1px solid black;
}

box.texttab > .tab-leftedge {
  list-style-image: url("chrome://global/skin/tab-leftedge.gif");
}

box.texttab > .tab-rightedge {
  list-style-image: url("chrome://global/skin/tab-rightedge.gif");
}

box.texttab[selected="true"] > .tab-leftedge {
  list-style-image: url("chrome://global/skin/seltab-leftedge.gif");
}

box.texttab[selected="true"]  > .tab-rightedge {
  list-style-image: url("chrome://global/skin/seltab-rightedge.gif");
}

box.texttab > .textholder {
  border-top: 1px solid black;
  background-color: #CCCCCC;
}

box.texttab[selected="true"] > .textholder {
  background-color: white;
  font-weight: bold;
}

/**********************************
 * 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|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;
}

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;
}

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:-moz-display-comboboxcontrol-frame: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 3px 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 3px 0px;
}

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


/* combobox display area */
html|select:-moz-display-comboboxcontrol-frame {
  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 1px 3px;
  margin: 0px;
  vertical-align: bottom;
}

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

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

/* combbox display area - active */
html|select:-moz-display-comboboxcontrol-frame: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 1px 3px;
  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|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:-moz-display-comboboxcontrol-frame:focus {
  border: none;
}

html|select[size="1"]:-moz-display-comboboxcontrol-frame:focus {
  border: none;
}

/** separator rules **/
/* standard separators */
  separator, separator[orient="horizontal"] 
    {
      height: 1.5em;
    }
  
  separator[orient="vertical"] 
    {
      width: 1.5em;
    }

/* thinner separators (50% size) */
  separator.thin, separator.thin[orient="horizontal"] 
    {
      height: 0.5em;
    }
  
  separator.thin[orient="vertical"] 
    {
      width: 0.5em;
    }

/* groove separators (50% size) */
  separator.groove,
  separator.groove[orient="horizontal"] 
    {
      border-top: 2px groove #CCCCCC;
      height: 0px;
      margin-top: 0.4em;
      margin-bottom: 0.4em;
    }
  
  separator.groove[orient="vertical"] 
    {
      border-left: 2px groove #CCCCCC;
      margin-left: 0.4em;
      margin-right: 0.4em;
    }
  
/* groove separators (0 padding, for dividing effects) */  
  separator.groove-thin 
    {
      border-top: 2px groove #CCCCCC;
      height: 0px;
    }
  
  separator[orient="vertical"].groove-thin 
    {
      border-left: 2px groove #CCCCCC;
    }

/** text formatting rules **/
/* label (with margins) */
  text.label 
    {
      margin              : 1px 5px 2px 5px;
    }
    
  text[disabled="true"] 
    {
      color                 : #999999;
    }    
    
  html
    {
      margin              : 5px;
      cursor              : default;
    }

  html.header 
    {
      font-weight         : bold;
    }

/** XUL <progressmeter> **/

/* outer frame */
  progressmeter 
    {
      margin              : 0px 4px 0px 4px;
      border              : 1px inset #CCCCCC;
      max-height          : 1.5em;
    }

/* progress indicators */
  box.progress-bar 
    {
	    background-color    : #6699cc;
      border-right        : 1px outset #6699cc;
    }
  
  box.progress-remainder 
    {
	    background-color    : #999999;
    }

  progressmeter[mode="undetermined"] > .internal-box > stack > progressbar
    {
      display             : none;
    }

/* internal frame */
  progressmeter > .internal-box 
    {
      border              : 1px solid #000000;
    }

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

    
    
/** box formatting **/
  box[autostretch="never"][valign="center"] 
    {
      vertical-align      : middle;
    }
  
  box[autostretch="never"][orient="vertical"][halign="center"] 
    {
      text-align          : center;
    }

/** XUL <scrollbar> element **/
  scrollbar 
    { 
      user-focus          : ignore; 
    } 


/* XUL <colorpicker> peices */
spring.colorpickertile {
  width: 20px;
  height: 20px;
  margin: 1px;
  border: 2px inset grey;
}

spring.colorpickertile:hover {
  width: 20px;
  height: 20px;
  margin: 1px;
  border: 2px solid yellow;
}

spring.colorpickertile[selected="true"] {
  width: 20px;
  height: 20px;
  margin: 1px;
  border: 2px solid black;
}
