.display-content content {
  padding: 1rem;
  border: 2px dashed #BODY_ACCENT_COLOR_1#;
  position: relative;
  display: block;
}

.display-content content:before {
  text-align: center;
  display: block;
  color: #BODY_ACCENT_COLOR_1#;
  font-weight: bold;
  margin-bottom: 1em;
}

.display-content content:after {
  content: "Edit content in this area by clicking the Login button at the top";
  overflow: auto;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px;
  position: absolute;
  background: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
  padding: 10px;
  transition: 0.5s all;
  text-align: center;
}

.display-content content:hover:after {
  background: #NAVIGATION_HOVER_BACKGROUND#;
  color: #FFF;
  opacity: 0.9;
}

.display-content content[area="1"]:after {
  content: 'Content area 1 can be edited by visiting this page in "Manage Webpages"';
}

.display-content content[area="2"]:after {
  content: 'Content area 2 can be edited by visiting this page in "Manage Webpages"';
}

.display-content content[area="3"]:after {
  content: 'Content area 3 can be edited by visiting this page in "Manage Webpages"';
}

.display-content content[area="1"]:before {
  content: 'Content Area 1';
}

.display-content content[area="2"]:before {
  content: 'Content Area 2';
}

.display-content content[area="3"]:before {
  content: 'Content Area 3';
}