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

/* classes for container div  for layer and header*/
.cmsHighlightElementInActive {
  display: none; /* it's not shown by default */
  z-index: 101;
  position: absolute;
  background: transparent url(../images/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 */
}

.cmsHighlightElementActive {
  display: none; /* it's not shown by default */
  z-index: 101;
  position: absolute;
}

/* classes for layer*/
.cmsHighlightElementActiveLayer{
  display: none;
  z-index: 102;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 2px solid #003366;
  background: #c3d2e3;
  filter:alpha(opacity=50); /* set alpha for ie */
  opacity: 0.5; /* set alpha for firefox >= 1.7 */
  -moz-opacity: 0.5; /* set alpha for older mozilla */
}

.cmsHighlightElementDisabledLayer{
  display: none; /* it's not shown by default */
  z-index: 102;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  border: 2px solid #ff0000;
  background: #ff8080;
  filter:alpha(opacity=50); /* set alpha for ie */
  opacity: 0.5; /* set alpha for firefox >= 1.7 */
  -moz-opacity: 0.5; /* set alpha for older mozilla */
}

/* classes for header*/
.cmsEditareaHeader{
	display: none;
	z-index: 103;
	position: absolute; 
	top: 0px; 
	left: 0px; 
	right: 0px; 
	background-color: #63778A;
	color: #FFFFFF; 
	font-size: 110%;
	padding: 2px;
	text-align: left;
	cursor: inherit;
}
.cmsEditareaHeader h3 {
  padding: 3px 5px 3px 25px !important;
}

/* right click menu */
.cmsMenu {
  position: absolute;
  display: none;
  z-index: 102;
  text-align: left;
  width: 186px;
  height: 200px;
}
.cmsMenu h3 {
  padding: 3px 5px 3px 25px !important;
  background-color: #659ACB !important;
  font-size: 110% !important;
  color: #ffffff !important;
}
h3.category {
	background: url(../images/ic_cat.gif) no-repeat scroll 5px 2px;
}
h3.product {
	background: url(../images/ic_product.gif) no-repeat scroll 5px 2px;
}
h3.page {
	background: url(../images/ic_page.gif) no-repeat scroll 5px 2px;
}
h3.slot {
	background: url(../images/ic_slot.gif) no-repeat scroll 5px 2px;
}
h3.component {
	background: url(../images/ic_comp.gif) no-repeat scroll 5px 2px;
}

.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 */
  opacity: 0.5; /* set alpha for firefox >= 1.7 */
  -moz-opacity: 0.5; /* set alpha for older 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;
}

/*** styles for page editing messages ***/
div.pageEditingMessage {
	border-bottom: 1px solid #CCCCCC;
	background: url(../images/warning.gif) no-repeat 7px 7px;
	padding: 0px 0px 0px 30px;
}
div.pageEditingMessage p {
	border-left: 1px solid #CCCCCC;
	padding: 8px;
	text-align: left;
	color: #FF0000;
	font-weight: bold;
}

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