.margin-bottom { margin-bottom:20px}
.iconcourse { width:auto; float:left; margin-right:30px}
.icontext { width:70%; float:left; font-size:25px; border-bottom:1px solid #CCC; margin:0px; line-height:50px; padding:0px; text-transform:uppercase; font-weight:bolder}

.note {
    position:relative;
    overflow:hidden; /* hides part of the box-shadow */
    padding:20px;
    background-image: -webkit-gradient(
  linear,
  left top,
  left bottom,
  color-stop(0, #F9F9F9),
  color-stop(1, #F0F0F0)
);
background-image: -o-linear-gradient(bottom, #F9F9F9 0%, #F0F0F0 100%);
background-image: -moz-linear-gradient(bottom, #F9F9F9 0%, #F0F0F0 100%);
background-image: -webkit-linear-gradient(bottom, #F9F9F9 0%, #F0F0F0 100%);
background-image: -ms-linear-gradient(bottom, #F9F9F9 0%, #F0F0F0 100%);
background-image: linear-gradient(to bottom, #F9F9F9 0%, #F0F0F0 100%);
   color:#606060;
  
}
.note:hover { color:#fff; background:#0997dc; transition:all 0.3s ease-out}

.note:before {
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    border-width:27px 27px 0px 0;
    border-style:solid;
    border-color:#F0F0F0 #e6e6e6;
    /* css3 extras */
/*    -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), 
                      -1px 1px 1px rgba(0,0,0,0.2);
       -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), 
                      -1px 1px 1px rgba(0,0,0,0.2);
            box-shadow:0 1px 1px rgba(0,0,0,0.3), 
                      -1px 1px 1px rgba(0,0,0,0.2);*/
}
.note:hover:before
{     border-width:27px 27px 0px 0;
    border-style:solid;
    border-color:#0997dc #e6e6e6;transition:all 0.3s ease-out}