/*
  The BODY element can have a smaller width and height than the HTML element allowing the user to click inside the HTML
  element but outside of the BODY element. In IE this leads to the HTML element being activated and the selection
  within the BODY element being cleared. This is very annoying for the user which expects to see the caret when he
  clicks inside the rich text area. Also, GWT's rich text area listens to DOM events generated within the BODY element
  and thus events triggered by the HTML element are ignored. We cannot prevent the activation of the HTML element
  because this will make scrolling with the mouse impossible. The best way to avoid this problem is to ensure through
  CSS that the BODY element has at least the width and height of the HTML element. In other words, initially when the
  document is empty the BODY should have the width and height of the rich text area. Once the user starts adding
  content and this content grows beyond the height/width of the rich text area requiring the vertical/horizontal scroll
  bar then the BODY element should increase its height/width to be able to wrap the content.
*/
html {
  height: 100%;
  width: 100%;
}

* html {
  overflow-y: scroll;
}

body.UIWikiPortletWysiwygCss { /*
    We force the background color to white because the Albatross skin uses a dark background color which makes the text
    difficult to read. The best solution would be to have a separate style sheet which affects only the page content
    and to import it without the rest of the style sheets.
  */
  background-color: #FFFFFF !important;
  background-image: none !important;
  /*
    We use float:left in order to remove the body from the normal flow and thus prevent collapsing margins between
    body and its first in-flow block-level child. Otherwise the vertical scroll bar would be visible because of the
    min-height:100% rule. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
  */
  float: left;
  height: auto;
  margin: 0;
  min-height: 100%;
  min-width: 100%;
  overflow: visible;
  padding: 0;
  position: static;
  width: auto;
}

* html body.UIWikiPortletWysiwygCss {
  height: 100%;
  width: 100%;
}

/*
  Overwrite no matter what list-style-position to outside position to avoid the Firefox issues with editing lists
  with inside list style. 
*/
.UIWikiPortletWysiwygCss ul,.UIWikiPortletWysiwygCss ol {
  list-style-position: outside !important;
}

/*
  XWiki 2.0 renderer places the contents of a header inside a span, which is styled in the skin. Since this is not
  common to all the syntaxes and the CSS rules can be applied directly to the header, the editor doesn't generate this
  span when applying header style to the selection. In order to view headers as in view mode we have to block some of
  the CSS rules applied to the span and add then to the header. 
*/
.UIWikiPortletWysiwygCss h1 span,.UIWikiPortletWysiwygCss h2 span,.UIWikiPortletWysiwygCss h3 span,.UIWikiPortletWysiwygCss h4 span {
  border-bottom: 0 none;
  margin: 0;
  /* IE behaves strangely when the span is displayed as block. */
  display: inline;
  /*
    IE behaves strangely when the span doesn't have static position.
    See XWIKI-3339: New TOC overlaps with titles in WYSIWYG edition in IE6
  */
  position: static;
}

.UIWikiPortletWysiwygCss h1,.UIWikiPortletWysiwygCss h2,.UIWikiPortletWysiwygCss h3,.UIWikiPortletWysiwygCss h4 {
  border-bottom: 1px solid #CCCCCC;
  margin: 20px 0;
}

.UIWikiPortletWysiwygCss h1 {
  margin: 25px 0 20px 0;
  /* Letter spacing affects the behavior of the Delete and Backspace keys in IE */
  letter-spacing: normal;
}

.UIWikiPortletWysiwygCss .macro {
  background-color: transparent;
  border: 1px dashed #CCCCCC;
  font-size: 100%;
  /* Prevent vertical resizing in IE */
  height: auto !important;
  /* Remove button padding in IE */
  overflow: visible;
  padding: 1px;
  text-align: left;
  /* Prevent word wrapping inside a macro container in IE */
  white-space: nowrap;
}

.UIWikiPortletWysiwygCss .macro-inline {
  display: inline;
  margin: 0px;
  /* Prevent horizontal resizing in IE */
  width: auto !important;
}

.UIWikiPortletWysiwygCss .macro-block {
  display: block;
  margin-right: auto;
  /*
    In IE6 the horizontal scroll bar appears even if we remove the padding and the border from the macro. In IE7 the
    horizontal scroll bar appears when the macro is selected and the resize handlers are shown. Using a width of 99%
    seems to prevent the horizontal scroll bar in IE.
  */
  width: 99% !important;
}

.UIWikiPortletWysiwygCss .macro-selected {
  background-color: #E8F2FE;
}

.UIWikiPortletWysiwygCss .macro .macro-placeholder {
  background-image: url(images/macro.gif);
  background-position: left center;
  background-repeat: no-repeat;
  color: gray;
  font-size: 87.5%;
  font-style: italic;
  padding-left: 20px;
}

.UIWikiPortletWysiwygCss .xEmbeddedObject {
  background-image: url(images/embed.gif);
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid #CCC;
  height: 20px;
  width: 40px;
}

.UIWikiPortletWysiwygCss table {
  table-layout: fixed;
  border-spacing: 0;
  border: 1px solid #dddddd;
  border-right: none;
}

.UIWikiPortletWysiwygCss th {
  border-right: 1px solid #dddddd;
  background: #f5f5f5;
  padding: 5px;
}

.UIWikiPortletWysiwygCss td {
  border-right: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  padding: 5px;
}