.tri-t,.tri-t-b{ font-size:0; height:0; overflow:hidden; position:absolute; width:0 ;} .tri-t{ border-color:transparent transparent #0ea0d2 transparent; border-style:dashed dashed solid dashed; border-width:15px; right:80px; top:-30px; z-index:3 ;} .tri-t-b{ border-color:transparent transparent #fff transparent; border-style:dashed dashed solid dashed; border-width:15px; right:80px; top:-26px; z-index:4 ;} .addons{ background:#f0f0f0; border:1px solid #c6c6c6; border-radius:4px; box-shadow:2px 2px 4px rgba(120,120,120,0.5),-2px -2px 4px rgba(120,120,120,0.5); width:404px; position:absolute; z-index:1; display:none;} @media screen and (max-width:480px) { .addons{width:80%;} } .addons.layer-emotions{ margin-left:20px ;} .addons b{ width:0; height:0; font-size:0; overflow:hidden; position:absolute ;} .addons .tri-b{ border-color:transparent transparent #c6c6c6 transparent; border-style:dashed dashed solid dashed; border-width:10px; top:-20px; left:5px ;} .addons .tri-t{ border-color:transparent transparent #f0f0f0 transparent; border-style:dashed dashed solid dashed; border-width:10px; top:-19px; left:5px ;} .addons .layer-tab{ color:#666 ;} .addons .layer-tab span{ display:inline-block; margin:5px 12px ;} .addons .layer-tab .close{ float:right; background:url() no-repeat 0 -176px; width:20px; height:20px; display:inline-block; margin:3px 8px; *margin:3px 4px; _margin:3px 4px ;} .addons .layer-tab .close:hover{ background-position:0 -196px ;} .addons .layer-content{ background:#fff; padding:10px; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px ;} .addons .layer-content .emotions li{ border:1px solid #e8e8e8; cursor:pointer; float:left; width:26px; overflow:hidden; padding:4px 2px; text-align:center; margin:0 ;} .addons .layer-content .emotions li:hover{ border:1px solid #0095cd; background:#fff9ec ;}