/* 
 * The contents of this file are subject to the Netscape Public
 * License Version 1.1 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of
 * the License at http://www.mozilla.org/NPL/
 *  
 * Software distributed under the License is distributed on an "AS
 * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
 * implied. See the License for the specific language governing
 * rights and limitations under the License.
 *  
 * The Original Code is Mozilla Communicator client code, released
 * March 31, 1998.
 * 
 * The Initial Developer of the Original Code is Netscape
 * Communications Corporation. Portions created by Netscape are
 * Copyright (C) 1998-1999 Netscape Communications Corporation. All
 * Rights Reserved.
 * 
 * Contributor(s): 
 */

/* This contains CSS just for editor toolbars */

toolbox#EditorToolbox {
  min-width: 1px;
}

toolbar#FormatToolbar {
  border-bottom: 1px solid #003366;
}

/* SHOULD GO IN XUL.CSS */
box[hidden="true"] {
	display:none;
}

spring.separator_small { 
  width: 1em; 
}

/* end of SHOULD GO IN GLOBAL */

/* A small "toolbar" below content, above status */
box#EditModeToolbar {
  padding:       0px;
  /* Same as "standard" toolbar background */
  border-top:    1px solid #003366;
  border-bottom: 1px solid darkgray;
  margin-bottom: 0px;
  min-width:     1px;
  color:         white;
  background-color: #999999;
  overflow:      hidden;
}

toolbar#FormatToolbar titledbutton.format {
  border: 1px solid transparent;
  margin: 1px 1px 1px 1px;
	padding: 2px;
	text-decoration: none;
	color: inherit;
}

toolbar#FormatToolbar titledbutton.format[toggled="1"] {
  border: 1px white inset;
}

toolbar#FormatToolbar titledbutton.format:hover {
/* What we should use, but this has a blue border that doesn't look good against gray toolbars 
	background-image:url("chrome://global/skin/otherbutton28-bg-hover.gif");
	background-image:url("chrome://editor/skin/images/hover-teal.gif");
	background-repeat: no-repeat;
  background-position: center center;
*/
  border: 1px solid white;
	text-decoration: none;
  /* global class="plain" should do this! */
}

toolbar#FormatToolbar titledbutton.format:active {
  margin: 2px 0px 0px 2px;
}

toolbar#FormatToolbar titledbutton.TextAttribute {
	/* Make these buttons narrower */
  padding: 2px 0px;
  min-width: 16px; 
  width: 16px; 
  font-size: 19px; 
  font-family: arial,helvetica,sans-serif;
  /* font-family: times, serif, sans-serif; */
}

toolbar#FormatToolbar titledbutton#boldButton {
  list-style-image:url(chrome://editor/skin/images/bold.gif); 
  font-weight: bold; 
}

toolbar#FormatToolbar titledbutton#italicButton {
  list-style-image:url(chrome://editor/skin/images/italic.gif); 
  /* font-weight: bold; */
  font-style:  italic;
}

toolbar#FormatToolbar titledbutton#underlineButton {
  list-style-image:url(chrome://editor/skin/images/underline.gif); 
  font-weight: normal; 
  text-decoration: underline;
}

input#PageTitle, input#PageAuthor {
  min-width: 5em;
}

div.toolbar-middle {
  /* trying to center vertically in the toolbar! */
  vertical-align: middle;
}
select.toolbar {
  /* This is ignored! */
	/*font-size: smaller;*/
  max-width: 20em;
  margin: 2px 3px 0px 3px;
}

box#EditModeToolbar titledbutton.DisplayModeButton {
  -moz-border-radius: 0px 0px 8px 8px;
  border-top: 1px solid #CCCCCC; /* Should be same as background */
  border-bottom: 1px solid #666666;
  border-left: 1px solid white;
  border-right: 1px solid #666666;
  padding: 0px 4px 0px 4px;
  margin: 0px;
  color: black;
  background-color: #CCCCCC;
}

box#EditModeToolbar titledbutton.DisplayModeButton:hover {
  border:  1px solid white;
}

box#EditModeToolbar titledbutton.DisplayModeButton:active {
  padding: 1px 5px -1px 3px;
}

box#EditModeToolbar titledbutton.DisplayModeButton[selected="1"] {
  padding: 0px 4px 0px 4px;
  margin: -2px 0px 0px 0px;
  font-weight: bold;
}

box#EditModeToolbar titledbutton.DisplayModeButton[selected="1"]:active {
  padding: 1px 5px -1px 3px;
}

box#EditModeToolbar div.VerticalSeparator { 
	 height: 100%; 
	 max-width: 1px; 
   border-left: 1px solid darkgray;
	 margin: 1px 0px;
}

spring.spacer3 {
      width:  3px;
      height: 3px;
}

spring.spacer5 {
      width:  5px;
      height: 5px;
}

spring.spacer-throbber {
  /* this is throbber box width - 12 */
	width: 56px;
}


/* Image URLs for all Editor toolbar buttons */

#newButton {
	list-style-image:url("chrome://editor/skin/images/newfile.gif");
}
#openButton {
	list-style-image:url("chrome://editor/skin/images/openfile.gif");
}

#saveButton {
	list-style-image:url("chrome://editor/skin/images/savefile.gif");
}
#saveButton[dirty="true"] {
  list-style-image:url(chrome://editor/skin/images/savemod.gif); 
}

#publishButton {
	list-style-image:url("chrome://editor/skin/images/publish.gif");
}
#previewButton {
	list-style-image:url("chrome://editor/skin/images/preview.gif");
}
#printButton {
	list-style-image:url("chrome://editor/skin/images/print.gif");
}
#findButton {
	list-style-image:url("chrome://editor/skin/images/find.gif");
}
#linkButton {
	list-style-image:url("chrome://editor/skin/images/link-white.gif");
}
#imageButton {
	list-style-image:url("chrome://editor/skin/images/image-white.gif");
}
#namedAnchorButton {
	list-style-image:url("chrome://editor/skin/images/anchor-white.gif");
}
#hlineButton {
	list-style-image:url("chrome://editor/skin/images/hline-white.gif");
}
#tableButton {
	list-style-image:url("chrome://editor/skin/images/table-white.gif");
}
#linkButton-dark {
	list-style-image:url("chrome://editor/skin/images/link.gif");
}
#imageButton-dark {
	list-style-image:url("chrome://editor/skin/images/image.gif");
}
#namedAnchorButton-dark {
	list-style-image:url("chrome://editor/skin/images/anchor.gif");
}
#hlineButton-dark {
	list-style-image:url("chrome://editor/skin/images/hline.gif");
}
#tableButton-dark {
	list-style-image:url("chrome://editor/skin/images/table.gif");
}
#spellingButton {
	list-style-image:url("chrome://editor/skin/images/spell.gif");
}

#DecreaseFontSizeButton {
	list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
  border: 1px solid transparent;
  margin:  1px 0px 1px 1px;
  padding: 2px 1px 2px 2px;
}
#DecreaseFontSizeButton:hover {
  border: 1px solid white;
}
#DecreaseFontSizeButton:active {
  border: 1px inset white;
  padding: 3px 0px 1px 3px;
}
#IncreaseFontSizeButton {
	list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
  border: 1px solid transparent;
  margin: 1px 1px 1px 0px;
  padding: 2px 2px 2px 0px;
}
#IncreaseFontSizeButton:hover {
  border: 1px solid white;
}
#IncreaseFontSizeButton:active {
  border: 1px inset white;
  padding: 3px 1px 1px 1px;
}

#ulButton {
	list-style-image:url("chrome://editor/skin/images/bullets.gif");
}
#olButton {
	list-style-image:url("chrome://editor/skin/images/numbers.gif");
}
#outdentButton {
	list-style-image:url("chrome://editor/skin/images/outdent.gif");
}
#indentButton {
	list-style-image:url("chrome://editor/skin/images/indent.gif");
}
#AlignPopupButton {
	list-style-image:url("chrome://editor/skin/images/align.gif");
}
#InsertPopupButton {
	list-style-image:url("chrome://editor/skin/images/object-popup.gif");
}

text.color-caption {
  border: 1px inset white;
}

div#ColorButtons {
  /* Width needs to be enough for overlapping
     buttons. Note: color.gif=14px + 2 for borders.
     We use relative position to move buttons
     to desired positions
  */
  width:       30px;
  max-width:   30px;
  /* Other toolbar buttons are 16px high (+border and margin), 
     so limit total height of color buttons
     region to a compatable height
  */
  height:      22px;
  max-height:  22px;
}

/* The initial layout of these buttons is:
   BackColorPopupButton appears above TextColorPopupButton.
   BackColorPopupButton must be 1st in XUL so that
   TextColorPopupButton is on top after relative positioning,
   which places TextColorPopupButton button in upper left and 
   BackColorPopupButton button at lower right of the ColorButtons div
*/

#TextColorPopupButton {
	list-style-image:url("chrome://editor/skin/images/color.gif");
  border: 1px solid #CCCCCC;
  padding: 0px;
  margin:  0px;
  position: relative;
  top:  -15px;
  left: 1px;

  /* TEMP: Set color here. TODO: Set color from page */
  background-color: #AA0000;
}

#TextColorPopupButton:hover {
  border: 1px solid white;
}

titledbutton#BackColorPopupButton {
	list-style-image:url("chrome://editor/skin/images/color.gif");
  border: 1px solid #CCCCCC;
  padding: 0px;
  margin:  0px;
  position: relative;
  top:  7px;
  left: 12px;

  /* TEMP: Set color here. TODO: Set color from page */
  background-color: yellow;
}
titledbutton#BackColorPopupButton:hover {
  border: 1px solid white;
}

/* For when we use STACK to do overlapping buttons */
image#TextColorPopupButton {
	list-style-image:url("chrome://editor/skin/images/color.gif");
  border: 1px solid #CCCCCC;
  padding: 0px;
  margin: 0px;
}

image#BackColorPopupButton {
	list-style-image:url("chrome://editor/skin/images/color.gif");
  border: 1px solid #CCCCCC;
  padding: 0px;
  margin:  8px 8px 0px 0px;
}

titledbutton#text-align-left {
	list-style-image:url("chrome://editor/skin/images/left.gif");
}
titledbutton#text-align-center {
	list-style-image:url("chrome://editor/skin/images/center.gif");
}
titledbutton#text-align-right {
	list-style-image:url("chrome://editor/skin/images/right.gif");
}
titledbutton#text-align-justify {
	list-style-image:url("chrome://editor/skin/images/justify.gif");
}
