/* 
 * 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): 
 */

@import url(chrome://global/skin/);

iframe#content-frame { 
  min-width: 10px; 
  min-height: 10px;
  height: 400px;
} 


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

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

/* A small "toolbar" below content, above status */
box#DisplayModeBar {
  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#DisplayModeBar titledbutton.DisplayModeButton {
  border: 1px solid transparent;
  border-left: 1px solid darkgray;
  padding: 0px 4px 0px 4px;
  margin: 0px;
  color: black;
  background-color: #CCCCCC;
}

box#DisplayModeBar titledbutton.DisplayModeButton:hover {
  border:  1px solid white;
  /* Alternate hover style: change background
  color: white;
  background-color: #66AAAA;
  */
}

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

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

box#DisplayModeBar titledbutton.DisplayModeButton[selected="1"]:hover {
  border:  1px solid white;
  /* Alternate hover style: change background
  background-color: #66AAAA;
  color: white;
  */
}

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

box#DisplayModeBar 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 */

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

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

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

titledbutton#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;
}
titledbutton#DecreaseFontSizeButton:hover {
  border: 1px solid white;
}
titledbutton#DecreaseFontSizeButton:active {
  border: 1px inset white;
  padding: 3px 0px 1px 3px;
}
titledbutton#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;
}
titledbutton#IncreaseFontSizeButton:hover {
  border: 1px solid white;
}
titledbutton#IncreaseFontSizeButton:active {
  border: 1px inset white;
  padding: 3px 1px 1px 1px;
}

titledbutton#ulButton {
	list-style-image:url("chrome://editor/skin/images/bullets.gif");
}
titledbutton#olButton {
	list-style-image:url("chrome://editor/skin/images/numbers.gif");
}
titledbutton#outdentButton {
	list-style-image:url("chrome://editor/skin/images/outdent.gif");
}
titledbutton#indentButton {
	list-style-image:url("chrome://editor/skin/images/indent.gif");
}
titledbutton#AlignPopupButton {
	list-style-image:url("chrome://editor/skin/images/align.gif");
}
titledbutton#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 >= 2x color button width 
     (color.gif=14px + 2 for border) 
     for initial layout.
     Then use relative position to move buttons
     to desired overlapping locations
  */
  width:       32px;
  max-width:   32px;
  height:      19px;
  /* This compensates for remaining gap 
     on right after relative button positioning
  */
  margin-right: -3px;
}

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

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

titledbutton#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;
  /* Position lower right */
  top:  9px;
  left: 12px;

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

titledbutton#BackColorPopupButton:hover {
  border: 1px solid white;
}

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