<div class="container">
   <section class="notif notif-notice">
      <h6 class="notif-title">Congratulations!</h6>
      <p>You found the answer to the ultimate question of life and the universe.</p>
      <div class="notif-controls">
         <a href="index.html" class="notif-minimize">Minimize</a>
         <a href="index.html" class="notif-zoom">Zoom</a>
         <a href="index.html" class="notif-close">Close</a>
      </div>
   </section>
   <section class="notif notif-alert">
      <h6 class="notif-title">Error!</h6>
      <p>No information signal or material object can travel faster than light in vacuum.</p>
      <div class="notif-controls">
         <a href="index.html" class="notif-minimize">Minimize</a>
         <a href="index.html" class="notif-zoom">Zoom</a>
         <a href="index.html" class="notif-close">Close</a>
      </div>
   </section>
   <section class="notif notif-warn">
      <h6 class="notif-title">Warning!</h6>
      <p>There is as yet insufficient data for a meaningful answer.</p>
      <div class="notif-controls">
         <a href="index.html" class="notif-minimize">Minimize</a>
         <a href="index.html" class="notif-zoom">Zoom</a>
         <a href="index.html" class="notif-close">Close</a>
      </div>
   </section>
</div>

body {
   font-family: Verdana, sans-serif;
   color: #404040;
   background: #596778;
}

.container {
   margin: 40px auto;
   width: 400px;
}

.container .notif {
   margin: 20px 0;
}

.notif {
   position: relative;
   padding: 25px 30px 25px 100px;
   min-height: 50px;
   line-height: 22px;
   background: #F4F4F4;
   border-radius: 3px;
   box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.12);
}

.notif:before {
   content: '';
   position: absolute;
   top: 44px;
   left: 30px;
   width: 40px;
   height: 40px;
   border: 5px solid;
   border-radius: 25px;
}

.notif p {
   font-size: 12px;
   color: #666666;
}

.notif-title {
   margin: 0 0 5px;
   font-size: 15px;
   font-weight: bold;
   color: #444444;
}

.notif-title:before,
.notif-title:after {
   content: '';
   position: absolute;
   background: #FFFFFF;
   border-radius: 3px;
}

.notif-notice:before {
   background: #A7D155;
   border-color: #8FB14F;
}

.notif-notice .notif-title:before,
.notif-notice .notif-title:after {
   top: 62px;
   left: 55px;
   width: 4px;
   height: 12px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.notif-notice .notif-title:after {
   top: 68px;
   left: 48px;
   width: 8px;
   height: 4px;
}

.notif-alert:before {
   background: #E34F4F;
   border-color: #C14343;
}

.notif-alert .notif-title:before,
.notif-alert .notif-title:after {
   top: 62px;
   left: 53px;
   width: 4px;
   height: 14px;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.notif-alert .notif-title:after {
   top: 67px;
   left: 48px;
   width: 14px;
   height: 4px;
}

.notif-warn:before {
   background: #F1E472;
   border-color: #CEC260;
}

.notif-warn .notif-title:before,
.notif-warn .notif-title:after {
   top: 60px;
   left: 53px;
   width: 4px;
   height: 11px;
   background: #5C562B;
}

.notif-warn .notif-title:after {
   top: 73px;
   height: 4px;
}

.notif-controls {
   position: absolute;
   top: 0;
   right: 0;
   height: 16px;
   padding: 4px 3px 5px;
   background: #f0f0f0;
   border: solid #dcdcdc;
   border-width: 0 0 1px 1px;
   border-radius: 0 3px;
}

.notif-controls > a {
   position: relative;
   float: left;
   margin: 0 1px;
   width: 16px;
   height: 16px;
   font: 0/0 serif;
   text-shadow: none;
   color: transparent;
}

.notif-minimize:before {
   content: '';
   position: absolute;
   top: 11px;
   left: 4px;
   width: 7px;
   height: 2px;
   background: #bbb;
}

.notif-minimize:hover:before {
   background: #888;
}

.notif-zoom:before {
   content: '';
   position: absolute;
   top: 6px;
   left: 3px;
   width: 5px;
   height: 3px;
   border: 2px solid #bbb;
}

.notif-zoom:hover:before {
   border-color: #888;
}

.notif-close:before,
.notif-close:after {
   content: '';
   position: absolute;
   top: 4px;
   left: 7px;
   width: 2px;
   height: 10px;
   background: #bbb;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
}

.notif-close:after {
   top: 8px;
   left: 3px;
   width: 10px;
   height: 2px;
}

.notif-close:hover:before,
.notif-close:hover:after {
   background: #888;
}


/* IE 8 doesn't support CSS transforms; use Unicode instead. */

.lt-ie9 .notif-notice .notif-title:before {
   content: '\2714';
   display: block;
   top: 25px;
   left: 30px;
   width: 50px;
   font: bold 18px/50px "Arial Unicode MS";
   color: white;
   text-align: center;
   background: none;
}

.lt-ie9 .notif-notice .notif-title:after {
   display: none;
}

.lt-ie9 .notif-alert .notif-title:before {
   content: '\2716';
   display: block;
   top: 25px;
   left: 30px;
   width: 50px;
   font: bold 17px/50px "Arial Unicode MS";
   color: white;
   text-align: center;
   background: none;
}

.lt-ie9 .notif-alert .notif-title:after {
   display: none;
}

.lt-ie9 .notif-close:before {
   content: '\2716';
   display: block;
   top: 0;
   left: 0;
   width: 16px;
   font: 11px/19px 'Arial Unicode MS';
   color: #bbb;
   text-align: center;
   background: none;
}

.lt-ie9 .notif-close:after {
   display: none;
}

.lt-ie9 .notif-close:hover:before {
   color: #999;
}