#pr-box { font: 13px/16px sans-serif; position: absolute; z-index: 1000; display: none; width: 300px; max-width: 90%; border-radius:10px; } #pr-box i { width: 0; height: 0; margin-left: 14px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #333C47; } #pr-box-inner { margin-top: 6px; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 10px rgba(0,0,0,0.2); box-shadow: 0 2px 10px rgba(0,0,0,0.2); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 10px; } #pr-box p { padding: 20px; -webkit-border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0; } #pr-box ul { padding: 7px; -webkit-border-radius: 0 0 2px 2px; -moz-border-radius: 0 0 2px 2px; border-radius: 10px; } #pr-box ul li { list-style: none; padding: 7px; color: #F16063; } #pr-box ul li span { width: 15px; height: 15px; display: block; float: left; border-radius: 100%; margin-right: 10px; margin-left:2px; font-size:15px; } #pr-box.light { color: #2d2f31; } #pr-box.light p { background-color: #23a86d; color: #f1f1f1; } #pr-box.light ul { background-color: #f1f1f1; } #pr-box.light ul li span { background-color: #fff; border: 3px solid #23a86d; } #pr-box.light ul li span.pr-ok { background-color: #23a86d; border: 3px solid #23a86d; } #pr-box.dark { color: #f1f1f1; } #pr-box.dark p { background-color: #23a86d; } #pr-box.dark ul { background-color: #333C47; } #pr-box.dark ul li span { /* background-color: white; border: 3px solid #F16063;*/ } #pr-box.dark ul li span.pr-ok { color: #10BD72; } #pr-box.dark ul li.pr-ok { color: #10BD72; }