div.note {
    background-color: lightyellow;
    padding: 10px;
    border-radius:10px;
    margin-bottom:10px;
    /* font-style: italic; */
}

div.note:before {
    content: "Note: ";
    color: orange;
    font-style: normal;
    font-weight: bold;
}


div.note.idea {
    background-color: #EFFFE0;
}

div.note.idea:before {
    font-weight: bold;
    color:  darkolivegreen;
    content: "Idea: ";
}

div.note.tip {
    background-color: #ffefe0;
}

div.note.tip:before {
    content: "Tip: ";
    color: orangered;
}

div.note.warning {
    background-color: #FFE3E3;
}

div.note.warning:before {
    content: "Warning: ";
    color: red;
}