Information blocks - alerts

alertboxes-alerts

<div style="width:500px; margin:0 auto">
  <div class="alertbox alertbox-info">
    This is an information message
  </div>

  <div class="alertbox alertbox-success">
    We have successfully processed your request!
  </div>

  <div class="alertbox alertbox-warning">
    The button you clicked has no action associated!
  </div>

  <div class="alertbox alertbox-error">
    Direct access to this location is not allowed!
  </div>
</div>

style.css

.alertbox {
    border: 1px solid;
    margin: 10px 0px;
    padding: 15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    border-radius: 3px;
  }
  .alertbox-info {
    color: #00529b;
    background-color: #bde5f8;
    background-image: url("info.png");
  }
  .alertbox-success {
    color: #4f8a10;
    background-color: #dff2bf;
    background-image: url("success.png");
  }
  .alertbox-warning {
    color: #9f6000;
    background-color: #feefb3;
    background-image: url("warning.png");
  }
  .alertbox-error {
    color: #d8000c;
    background-color: #ffbaba;
    background-image: url("error.png");
  }