.checkblock { display: inline-block; float: left; width: 200px; } .check[type="checkbox"]{ display:none; } .checkbox{ padding: 5px; margin: 5px 5px 10px; display: inline-block; color:#777777; text-shadow: 0 1px 0px rgba(255,255,255,.4); border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; height: 30px; position: relative; cursor: pointer; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); } .checkbox .check-icon { display: none; position: absolute; width: 26px; height: 26px; background: url(<%= asset_path "check.png" %>) no-repeat left top; right: -10px; top: -5px; } .checkbox .member-name { cursor: pointer; font-family: helvetica; font-size: 12px; line-height: 30px; padding: 0 10px 0 40px; color: #333333; display: inline-block; margin-bottom: 0; } .member-avatar { position: absolute; width: 34px; height: 34px; overflow: hidden; margin-top: -2px; } img.member-img { max-width: 100%; } .checked .check-icon { display: block; } .popover-inner { width: auto; display: inline-block; text-align: center; } .popover-title { display: block; font-size: 12px; font-weight: normal; padding: 3px 10px; } .popover-content { padding: 3px 10px; color: #898989; } .popover-content p { font-size: 12px; }