.tipsy { font-size: 13px; position: absolute; padding: 5px; word-wrap: break-word; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 360px; padding: 5px 8px 4px 8px; text-align: center; }

/* Rounded corners */
.tipsy-inner {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: -1px 2px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: -1px 2px 1px rgba(0, 0, 0, 0.35);
    box-shadow: -1px 2px 1px rgba(0, 0, 0, 0.35);
}

/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/

.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }

/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }

.tipsy.red .tipsy-inner   { background-color:    #F21C0A; color: #ffffff; }
.tipsy.red .tipsy-arrow   { border-color:        #F21C0A; }
.tipsy.red .tipsy-arrow-n { border-bottom-color: #F21C0A; }
.tipsy.red .tipsy-arrow-s { border-top-color:    #F21C0A; }
.tipsy.red .tipsy-arrow-e { border-left-color:   #F21C0A; }
.tipsy.red .tipsy-arrow-w { border-right-color:  #F21C0A; }



.tipsy.green .tipsy-inner   { background-color:    #E6E6E6; color: #222;}
.tipsy.green .tipsy-arrow   { border-color:        #E6E6E6; }
.tipsy.green .tipsy-arrow-n { border-bottom-color: #E6E6E6; }
.tipsy.green .tipsy-arrow-s { border-top-color:    #E6E6E6; }
.tipsy.green .tipsy-arrow-e { border-left-color:   #E6E6E6; }
.tipsy.green .tipsy-arrow-w { border-right-color:  #E6E6E6; }


.tipsy.addition .tipsy-inner, .tipsy.subtraction .tipsy-inner {
    padding: 8px 8px;
    text-transform: uppercase;
    max-width: 440px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

.tipsy.light .tipsy-inner   { background-color:    #ffffff; color: #222; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); }
.tipsy.light .tipsy-arrow   { border-color:        #ffffff; }
.tipsy.light .tipsy-arrow-n { border-bottom-color: #ffffff; }
.tipsy.light .tipsy-arrow-s { border-top-color:    #ffffff; }
.tipsy.light .tipsy-arrow-e { border-left-color:   #ffffff; }
.tipsy.light .tipsy-arrow-w { border-right-color:  #ffffff; }

.tipsy.dw .tipsy-inner   { background-color:    #70B62F; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2); text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); }
.tipsy.dw .tipsy-arrow   { border-color:        #70B62F; }
.tipsy.dw .tipsy-arrow-n { border-bottom-color: #70B62F; }
.tipsy.dw .tipsy-arrow-s { border-top-color:    #70B62F; }
.tipsy.dw .tipsy-arrow-e { border-left-color:   #70B62F; }
.tipsy.dw .tipsy-arrow-w { border-right-color:  #70B62F; }


html .tipsy.tipsy-n  .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
html .tipsy.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
html .tipsy.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
html .tipsy.tipsy-s  .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
html .tipsy.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
html .tipsy.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
html .tipsy.tipsy-e  .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
html .tipsy.tipsy-w  .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }




*html body .tipsy-e .tipsy-arrow,
*html body .tipsy-w .tipsy-arrow {
  border-top-color: pink;
  border-bottom-color: pink;
  filter: chroma(color=pink);
}

*html body .tipsy-n  .tipsy-arrow,
*html body .tipsy-nw .tipsy-arrow,
*html body .tipsy-ne .tipsy-arrow,
*html body .tipsy-s  .tipsy-arrow,
*html body .tipsy-sw .tipsy-arrow,
*html body .tipsy-se .tipsy-arrow {
  border-left-color: pink;
  border-right-color: pink;
  filter: chroma(color=pink);
}