/* highlight elements, this layer covers the whole element that has to be highlighted */
/* if you change dimensions, e.g. border-width - you have to change the javascript! */
.cmsHighlightElementActive {
  display: none; /* it's not shown by default */
  z-index: 101;
  position: absolute;
  border: 2px solid #003366;
  background: #c3d2e3;
  filter:alpha(opacity=30); /* set alpha for ie */
  -moz-opacity: 0.3; /* set alpha for mozilla */
}

.cmsHighlightElementInActive {
  display: none; /* it's not shown by default */
  z-index: 101;
  position: absolute;
  background: transparent url(../space.gif); /* it's very important to use a transparent background image!
  to be able to completely cover the editable html element and to be able to right click on every place within
  this highlighting layer */
}

.cmsHighlightElementDisabled {
  display: none; /* it's not shown by default */
  z-index: 101;
  position: absolute;
  border: 2px solid #ff0000;
  background: #ff8080;
  filter:alpha(opacity=30); /* set alpha for ie */
  -moz-opacity: 0.3; /* set alpha for mozilla */
}


/* right click menu */
.cmsMenu {
  position: absolute;
  display: none;
  z-index: 102;
  text-align: left;
  width: 140px;
  height: 200px;
}
.cmsMenu h3 {
  padding: 2px 5px;
  background: #659ACB;
  font-size: 110%;
  color: #ffffff !important;
}
.cmsMenu div.cmsMenuBody { /* only if a div has this class */
  border-top: 1px solid #4D6175;
  border-right: 1px solid #4D6175;
  border-bottom: 1px solid #4D6175;
  border-left: 1px solid #4D6175;
  padding: 2px 2px;
  background: #ccc;
}

.cmsMenu div.cmsMenuEntry, .cmsMenu .cmsMenuEntryHighlighted {
  padding: 2px 10px;
  cursor:pointer;
}


.cmsMenu .cmsMenuEntryHighlighted, .cmsMenu div.cmsMenuEntryHighlighted a:hover {
  background: #EAEAEA;
}

div.cmsMenuEntry a, div.cmsMenuEntryHighlighted a  { /* menu content links  */
  text-decoration: none;
}

div.cmsMenu span.cmsMenuEntryDisabled {
  color:gray;
}


.cmsMenu div.cmsMenuSeparator {
  background-color: #ffffff;
  height:1px;
  border-top: 1px solid #4D6175;
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 3px;
  margin-right: 3px;
}

/* gray out page */
#cmsEditGrayOut {
  display: none;
  position: absolute;
  z-index: 103;
  top: 0;
  left: 0;
  background: #ccc;
  filter:alpha(opacity=50); /* set alpha for ie */
  -moz-opacity: 0.5; /* set alpha for mozilla */
}

/* edit panel */
#cmsEditPanel {
  display: none;
  position:absolute;
  z-index: 104;
  top:50%;
  left:50%;
  width:644px;
  height:474px;
  margin-left:-322px;
  margin-top:-237px;
  background-color: #fff;
  text-align: left;
}

/* form dialog styles */
#form-dialog {
  position: absolute;
  top: -2000px;
  left: -3000px;
  display: none;
  border: solid 2px #6699CB;
  background-color: #FFFFFF;
  z-index: 120;
}

/* dialog title */
#form-dialog-topline {
  background-color: #6699CB;
  height: 18px;
}

/* dialog title */
#form-dialog-header {
  color: #ffffff;
  padding-left: 6px;
  padding-top: 2px;
  font-weight: bold;
  text-align: left;
}

/* close button */
#form-dialog-ok-button {
  float:right;
  padding: 2px;
  text-align: right;
}

#form-dialog-content {
  padding-top: 0px;
}


/*** visualization of empty slots ***/
div.cmsEditModeEmpty {
  width: 100%;
  height: 100%;
  background: #FFEE00;
  color: #000000;
  margin-bottom: 7px;
}

/* this explicit declaration is necessary for Firefox to visualize slots with fixed heights over the whole area, if such slots are not declared here
they will just be colored over the area that is filled with text. IE works fine with only the above defined style. */
div.catFixed div.mainmiddle1 div.cmsEditModeEmpty, div.catFixed div.mainmiddle2 div.cmsEditModeEmpty, div.catFixed div.mainmiddle3 div.cmsEditModeEmpty,
div.catFixed div.maindown1 div.cmsEditModeEmpty, div.catFixed div.maindown2 div.cmsEditModeEmpty, div.catFixed div.maindown3 div.cmsEditModeEmpty,
div.homeFixed div.maindown1 div.cmsEditModeEmpty, div.homeFixed div.maindown2 div.cmsEditModeEmpty, div.homeFixed div.maindown3 div.cmsEditModeEmpty
{
  position: absolute;
  left: 0px;
  top: 0px;
}

p.cmsEditModeText, #workingTemplate div.cmsEditModeEmpty p.cmsEditModeText {
  margin: 0px;
  padding: 3px;
  color: #000000;
}