.ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; -webkit-box-shadow: 0 0 5px #aaa; box-shadow: 0 0 5px #aaa; }
body .ui-tooltip { border-width: 2px; }

.ui-tooltip, .tiparrow:after { background: #FFF; border: 1px solid #CCC; }
.ui-tooltip { padding: 5px 10px; color: #333; border-radius: 5px; font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif; box-shadow: 0 0 7px #000; }
.tiparrow { width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -36px; }
.tiparrow.top { top: -16px; bottom: auto; }
.tiparrow.left { left: 20%; }
.tiparrow:after { content: ""; position: absolute; left: 20px; top: -20px; width: 20px; height: 20px; box-shadow: 6px 5px 9px -9px black; }
.tiparrow:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } 
.tiparrow.top:after { bottom: -20px; top: auto; }


.ui-dialog { position: fixed; top: 30px; background: #FFF; padding: 2px; border: 1px solid #999; opacity: 0.9;}
.ui-dialog-titlebar { background: #444; color: #FFF; width: 100%; }
.ui-dialog-titlebar .ui-button { float: right; }
.ui-dialog-titlebar span { padding: 4px; }
.ui-dialog-content  { height: auto; }
.ui-dialog-content p { color: #333; }