<!-- DROPCAP AND TOOLTIP -->
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus <dfn><abbr class="tooltip">mus<span class="tooltiptext">Musician. The point is I can add a very long text here if I wanted to.</span></abbr></dfn>. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
<span class="dropcap">N</span>ulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>

<!-- MESSAGE BOXES -->
        <div class="info">This is a message box where I have added additional information</div>
        <div class="success">This is a message box where I have added things you should do.</div>
        <div class="error">This is a message box where I have added things you should not do.</div>
        <div class="warning">This is a message box where I have added things you should watch out for.</div>
        <div class="download">This is a message box where I have added things you can download.</div>
        <div class="play">This is a message box where I have added media you can play.</div>

/* DROPCAP */

p:first-child:first-letter { 
    display: inline;
    margin: 0;
    padding: .25em .08em 0 0;
    #padding: 0.25em 0.08em 0.2em 0.00em; /* override for Microsoft Internet Explorer browsers*/
    _padding: 0.25em 0.08em 0.4em 0.00em; /* override for IE browsers 6.0 and older */
    line-height: .4em;
    font-size: 3.2em;
    font-family: "Georgia", "Times New Romans", "Trebuchet MS", "Lucida Grande";
    text-transform: capitalize;
    color: #000;
    float: left; 
}
p.dropcap:first-letter { 
    display: inline;
    margin: 0;
    padding: .25em .08em 0 0;
    #padding: 0.25em 0.08em 0.2em 0.00em; /* override for Microsoft Internet Explorer browsers*/
    _padding: 0.25em 0.08em 0.4em 0.00em; /* override for IE browsers 6.0 and older */
    line-height: .4em;
    font-size: 3.2em;
    font-family: "Georgia", "Times New Romans", "Trebuchet MS", "Lucida Grande";
    text-transform: capitalize;
    color: #000;
    float: left;
}

span.dropcap {
    display: inline;
    margin: 0;
    padding: .25em .08em 0 0;
    #padding: 0.25em 0.08em 0.2em 0.00em; /* override for Microsoft Internet Explorer browsers*/
    _padding: 0.25em 0.08em 0.4em 0.00em; /* override for IE browsers 6.0 and older */
    line-height: .4em;
    font-size: 3.2em;
    font-family: "Georgia", "Times New Romans", "Trebuchet MS", "Lucida Grande";
    text-transform: capitalize;
    color: #c30;
    float: left;
}

/* TOOLTIP */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* MESSAGE BOXES */
.info, .success, .play, .download, .warning, .error  {
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
}
.info {
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}
.success, .play, .download {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.success  {
    background-image:url('success.png');
}
.download {
    background-image:url('download.png');
}
.play {
    background-image:url('play.png');
}
.warning {
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url('warning.png');
}
.error {
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url('error.png');
}