.rate-wrapper{ margin-bottom: 20px; position: relative; padding: 22px 25px 20px 25px; border-radius: 3px; border: 1px solid lighten(@color_grey-light, 10%); &:after{ display: block; content: ''; clear: both; } } .rate-symbol{ font-size: 43px; cursor: pointer; margin-right: 4px; } .rate-symbol-filled{ color: @color_blue; } .rate-symbol-empty{ color: #eaeaea; } .rate-results{ float: right; line-height: 43px; } .rate-current, .rate-total{ display: inline-block; zoom: 1; *display: inline; font-size: 16px; font-weight: 300; } .rate-current{ font-size: 36px; font-weight: @font_thin; vertical-align: middle; line-height: 36px; } .rate-total{ line-height: 16px; vertical-align: -8px; } .review-input{ width: 100%; height: 47px; line-height: 19px; border: 1px solid @color_grey-light; border-radius: 3px; padding: 14px 15px 14px 15px; outline: none; font-weight: 300; font-size: 15px; margin-bottom: 20px; .placeholder({ font-size: 14px; color: #555; font-weight: 300; }); } .review-textarea{ width: 100%; height: 105px; line-height: 19px; border: 1px solid @color_grey-light; border-radius: 3px; padding: 14px 15px 14px 15px; outline: none; font-weight: 300; font-size: 15px; margin-bottom: 35px; resize: none; .placeholder({ font-size: 14px; color: #555; font-weight: 300; }); } .media-mixin(@break) when (@break = @break-small){ .rate-wrapper{ padding: 22px 15px 20px; } .rate-symbol{ font-size: 37px; padding-top: 4px; } } .media-mixin(@break) when (@break = @break-small-x){ .rate-results{ float: none; margin-top: 10px; } .rate-wrapper{ text-align: center; } .rate-symbol{ font-size: 35px; padding-top: 4px; } }