<style>.aart {width:270px; min-height:350px; background-color:#eee; margin: 0 auto; position:relative; padding-top:10px;}
.bart {width:250px; min-height:350px; margin-left:10px; background-color:white; border-bottom: 10px solid #eee;}
.notebar {width:250px; height:25px; background-color:#5C7A99; color:white; font-family:arial; font-weight:bold; text-align:center; text-transform:uppercase; font-size:12px; line-height:25px; letter-spacing:1px; -webkit-animation: blink 4.5s ease-in-out infinite; -moz-animation-: blink 4.5s ease-in-out infinite; animation: blink 4.5s ease-in-out infinite; margin-bottom:10px;}
@keyframes blink { 0% {background-color:#5C7A99;} 50%{background-color:#60995c;} 100% {background-color:#5C7A99;}}
@-webkit-keyframes blink { 0% {background-color:#5C7A99;} 50%{background-color:#60995c;} 100% {background-color:#5C7A99;}}
@-moz-keyframes blink { 0% {background-color:#5C7A99;} 50%{background-color:#60995c;} 100% {background-color:#5C7A99;}}
.messgto, .messgfrom {font-size:11px; font-family:"Courier New", Courier, monospace; color:#666; padding:5px 15px; text-align:left; letter-spacing:-1px;}
.messgto b, .messgfrom b {font-weight:bold; padding-right:5px; font-family:arial; letter-spacing:0px;}
.messgto b {color:#5C7A99;}
.messgfrom b {color:#60995c;}
.btm {height:100px;}
.bxx {position:absolute; bottom:10px; font-size:11px; font-family:"Courier New", Courier, monospace; text-align:left; letter-spacing:-1px; width:60px; height:60px; background-color:rgba(0,0,0,0.5); opacity:0; -webkit-transition: 1s all ease-in-out; -moz-transition: 1s all ease-in-out; -o-transition: 1s  all ease-in-out;}
.btm:hover .bxx{opacity:1;}
.der, .der a {margin-top:5px; font-family:Verdana, Geneva, sans-serif; font-size:6px; text-transform:uppercase; letter-spacing:2px; color:#000; text-align:center; text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.7); font-weight:500; margin-left: auto; margin-right: auto; text-decoration:none;}
#info {margin-top:10px; padding:3px; text-align: center; color:#eee;}
#icon {bottom:10px; position:absolute; border-top:5px solid #eee; border-right:5px solid #eee; width:60px; height:60px;}
.type {width:185px; height:25px; position:absolute; right:10px; bottom:10px; border-top:5px solid #eee; background-color:white;}
.crr {-webkit-animation: wink 1.5s step-end infinite; -moz-animation-: wink 1.5s step-end infinite; animation: wink 1.5s step-end infinite; line-height:25px; padding-left:5px;}
@keyframes wink { 0% {opacity:1;} 50%{opacity:0;} 100% {opacity:1;}}
@-webkit-keyframes wink { 0% {opacity:1;} 50%{opacity:0;} 100% {opacity:1;}}</style><div class="aart"><div class="bart"><div class="notebar">new messages</div>

<div class="messgto"><b>your display name</b> Your message</div>

<div class="messgfrom"><b>their display name</b> Their message</div>

<div class="btm"><img src="IMAGE URL HERE!" id="icon"><div class="bxx">

<div id="info">♫ currently playing/other info! ♫</div>

</div><div class="type"><div class="crr">|</div></div></div></div><div class="der"></div></div>