#slideout{position:fixed;top:200px;right:0;width:237px;padding:12px 0;text-align:center;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;z-index:10000;font-size:16px}#slideout_inner{position:fixed;top:200px;right:-600px;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s}#slideout:hover{right:250px}#slideout:hover #slideout_inner{right:0}@media only screen and (max-width:767px) and (min-width:240px){#slideout{position:fixed;top:200px;right:0;width:100px;padding:12px 0;text-align:center;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s;transition-duration:.3s;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;z-index:10000;font-size:16px}}.fragment{font-size:12px;height:140px;border:1px solid #ccc;color:#555;display:block;padding:10px;box-sizing:border-box;text-decoration:none}.fragment:hover{box-shadow:2px 2px 5px rgba(0,0,0,.2)}.fragment img{float:left;margin-right:10px}.fragment h3{padding:0;margin:0;color:#369}.fragment h4{padding:0;margin:0;color:#000}#close1{float:right;display:inline-block;background:#ccc;cursor:pointer;position:absolute;width:20px;height:20px;padding:0 5px 10px;right:10px;border-radius:100%;top:5px}