/*right triangle*/ .serverInvalidState { display:none; } .validation-close { font-size: 12px; position: absolute; right: 2px; top: 2px; cursor: pointer; color: #FFFFFF; border: 0px solid #FFFFFF; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; padding: 0px; font-family: monospace; font-weight: normal; font-style: normal; } .Bloom { position:absolute; padding:10px 15px 10px 15px ; color:#FFFFFF; background:#b8b369; /* default background for browsers without gradient support */ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b8b369), to(#b8b369)); background-image: -webkit-linear-gradient(top, #b8b369, #b8b369); /* For Chrome and Safari */ background-image: -moz-linear-gradient(top, #b8b369, #b8b369); /* For old Fx (3.6 to 15) */ background-image: -ms-linear-gradient(top, #b8b369, #b8b369); /* For pre-releases of IE 10*/ background-image: -o-linear-gradient(top, #b8b369, #b8b369); /* For old Opera (11.1 to 12.0) */ background-image: linear-gradient(to bottom, #b8b369, #b8b369); /* Standard syntax; must be last */ -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; border: 1px solid #b2ad56; font-family: inherit; font-size: inherit; font-weight: undefined; font-style: inherit; max-width: 350em; white-space: nowrap; } /* THE POINTER ------------------------------------------------------------------------------------------------------------------------------- */ .Bloom-wrapper { opacity:0.8; position:absolute; top:0; left:0; } .Bloom-before { position:absolute; border-style:solid; display:block; width:0; border-width:17.236067977499786px 34.47213595499957px 0 0; /* vary these values to change the angle of the vertex */ border-style:solid; border-color:#b2ad56 transparent; } .Bloom-after { position:absolute; content:""; border:0; border-width:15px 30px 0 0; border-style:solid; border-color:#b8b369 transparent; display:block; width:0; }