.note-plain, .note-important, .note-warning, .note-tip {
  margin: 2em;
  width: 70%;
  min-height: 40px;
  padding: 15px 20px 15px 80px; 
  background-repeat: no-repeat;
  background-position: 20px; 
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
}


.note-code {
  margin: 2em;
  width: 80%;
  min-height: 40px;
  padding: 5px;
  -moz-border-radius: 20px;
  -khtml-border-radius: 20px;
  border-radius: 20px;
  background-color: #e9e9e9;
  color: black;
}

.note-plain {
  background-color: #eeeeff;
  background-image: url(note.png);
}

.note-important {
  background-color: #ffffcc;
  background-image: url(important.png);
}

.note-warning {
  background-color: #ffdddd;
  background-image: url(warning.png);
}

.note-tip {
  background-color: #ddffdd;
  background-image: url(tip.png);
}