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

/* (B) THE VARIATIONS */
.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;
}