/* pesticide-style code */

body.visualize-grid header, body.visualize-grid footer, body.visualize-grid main {
  border: 1px solid blue;
}

body.visualize-grid header:before, body.visualize-grid footer:before, body.visualize-grid section:before, body.visualize-grid .row:before, body.visualize-grid .col:before {
  font-family: monospace;
  font-size: 11px;
}

body.visualize-grid header:before {
  content: '<header>';
  background: blue;
  color: white;
  padding: 2px;
  margin-top: -20px;
  display: inline-block;
  float: left;
}

body.visualize-grid footer:before {
  content: '<footer>';
  background: blue;
  color: white;
  padding: 2px;
  margin-top: -60px;
  display: inline-block;
  float: left;
}

body.visualize-grid .col {
  border: 1px solid yellow;
}

body.visualize-grid .row {
  border: 1px solid lightgreen;
}

body.visualize-grid section {
  border: 1px solid tomato;
  position: relative;
}

body.visualize-grid section:before {
  background: red;
  color: white;
  padding: 2px;
  margin-top: -50px;
  display: inline-block;
  float: left;
}

body.visualize-grid section.text:before {
  content: 'Sektion: 1 - 3 Textblöcke';
}

body.visualize-grid section.intro:before {
  content: 'Sektion: Einleitung';
}

body.visualize-grid section.grid-list:before {
  content: 'Sektion: Text mit Gridliste';
}

body.visualize-grid .row:before {
  content: 'R';
  background: lightgreen;
  color: #111;
  padding: 0px;
  display: inline;
  position: absolute;
  float: left;
  padding: 2px;
  margin-left: -20px;
}

body.visualize-grid .row-small:before {
  content: 'S';
}

body.visualize-grid .row-extra-small:before {
  content: 'XS';
}

body.visualize-grid .row-full:before {
  content: 'F';
}

/* END pesticide-style code END */