/* (A) THE BASE */
.bar {
  padding: 10px;
  margin: 10px;
  color: #333;
  background: #fafafa;
  border: 1px solid #ccc;
}

/* (B) THE VARIATIONS */
.plain {
  color: #0a0a0a;
  background: #ecedef;
  border: 1px solid #121213;
}
.info {
  color: #204a8e;
  background: #c9ddff;
  border: 1px solid #4c699b;
}
.success {
  color: #2b7515;
  background: #ecffd6;
  border: 1px solid #617c42;
}
.warn {
  color: #756e15;
  background: #fffbd1;
  border: 1px solid #87803e;
}
.error {
  color: #ba3939;
  background: #ffe0e0;
  border: 1px solid #a33a3a;
}

/* (C) ICONS */
i.ico {
  display: inline-block;
  width: 20px;
  text-align: center;
  font-style: normal;
  font-weight: bold;
}

/* (D) CLOSE BUTTON */
.bar {
  position: relative;
}
div.close {
  position: absolute;
  top: 30%;
  right: 10px;
  color: #888;
  cursor: pointer;
}

/* (X) DOES NOT MATTER */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

/* Grader styles */
var,
code {
  font-family: monospace;
  font-weight: bold;
  font-size: 120%;
}

table.grader td,
table.grader th {
  text-align: center;
  vertical-align: middle;
  padding: 5px;
}
table.grader,
table.grader tr,
table.grader th,
table.grader td {
  border: 1px solid black;
  border-collapse: collapse;
}