body {
 counter-reset: tipcount;
 counter-reset: hovertipcount;
}
.tip {
 display: inline-block;
 position: relative;
 padding: 0;
 margin: 0;
 outline: 0;
 border: 0;
 height: 0;
 width: 1px;
 background: transparent;
 float: left;
}
.tipbubble {
 display: none;
 position: absolute;
 z-index: 9998;
 cursor: default;
 text-align: left;
 white-space: normal;
 min-height: 50px;
 width: 250px;
 }
.tipbubble img {
 max-width: 60%;
 height: auto;
 margin: 3px;
 float: left;
}
.tipbubble > .close {
 display: inline-block;
 position: absolute;
 top: 0;
 font: normal bold 14px/14px Comic Sans MS;
 cursor: pointer;
 margin: 2px;
 padding: 0 2px;
 text-align: center;
}
.tipbubble.right-tip-pos > .close {
 right:0;
}
.tipbubble.left-tip-pos > .close {
 left:0;
}
.tipbubble.right-tip-pos {
 left: 100%;
 margin-left: 10px;
 margin-top: -25px;
 padding: 20px;
}
.tipbubble.left-tip-pos {
 right: 100%;
 margin-right: 10px;
 margin-top: -25px;
 padding: 5px 7px 7px 20px;
}
.tipbubble.upper-pos {
    top: 50px;
    left: -34px;

}

.tipbubble.right-tip-pos:before  {
 border-width: 8px 12px 8px 0;
 left: -11px;
 top: 10px;
}
.tipbubble.left-tip-pos:before {
 border-width: 8px 0 8px 12px;
 right: -11px;
 top: 10px;
}
.tipbubble.right-tip-pos:after {
 border-width: 8px 10px 8px 0;
 left: -9px;
 top: 10px;
}
.tipbubble.left-tip-pos:after {
 border-width: 8px 0 8px 10px;
 right: -9px;
 top: 10px;
}
.tipbubble.upper-pos:before,
.tipbubble.upper-pos:after {
 top: 100%;
 margin-top: -30px;
}
a.hovertip{
 cursor: pointer;
}
.hovertip {
 display:inline-block;
 position:relative;
 cursor: pointer;
 float: left;
 top: 6px;
}
.wikitip:after {
 counter-increment: tipcount;
 content: "["counter(tipcount)"]";
}
.hoverwikitip:after {
 counter-increment: hovertipcount;
 content: "["counter(hovertipcount)"]";
}

/*Dising*/
.hoverbuttontip,
.qtip {
 background: #ffaf4b;
 background: -moz-linear-gradient(top,  #ffaf4b 0%, #ff7b00 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffaf4b), color-stop(100%,#ff7b00));
 background: -webkit-linear-gradient(top,  #ffaf4b 0%,#ff7b00 100%);
 background: -o-linear-gradient(top,  #ffaf4b 0%,#ff7b00 100%);
 background: -ms-linear-gradient(top,  #ffaf4b 0%,#ff7b00 100%);*/
 background: linear-gradient(to bottom,  #ffaf4b 0%,#ff7b00 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff7b00',GradientType=0 );
 text-align: center;
 border-radius: 50px;
 cursor: pointer;
 padding: 0 4px;
 border-radius: 50px;
 border: 1px solid #B24700;
 color: #F6F6FF;
 font: normal normal 16px Arial;
 text-shadow: 1px 1px 0 #4C1F00, 0 0 5px #AEAEB2;
}
.hoverbuttontip:hover,
.qtip:hover {
 background: #f77f6a;
 background: -moz-linear-gradient(top,  #f77f6a 0%, #e73827 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f77f6a), color-stop(100%,#e73827));
 background: -webkit-linear-gradient(top,  #f77f6a 0%,#e73827 100%);
 background: -o-linear-gradient(top,  #f77f6a 0%,#e73827 100%);
 background: -ms-linear-gradient(top,  #f77f6a 0%,#e73827 100%);
 background: linear-gradient(to bottom,  #f77f6a 0%,#e73827 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77f6a', endColorstr='#e73827',GradientType=0 );
}
.hoverwikitip,
.wikitip {
 font: normal normal 100% Arial;
 color: #000;
 text-shadow: 1px 1px 0 #CCC;
 cursor: help;
}
.wikitip,
.wikitip:hover {
 background: 0;
 border-radius: 0;
 border: 0;
}
.wikitip:after ,
.hoverwikitip:after  {
 font: normal normal 75% Serif;
 vertical-align: top;
 color: #4775D1;
}
.tipbubble {
background: #ffffff;
    border-radius: 3px;
    color: #373737;
    font: normal 85% Arial;
    line-height: 16px;
}
.tipbubble.right-tip-pos {
 box-shadow: 0px 0px 0.8em -0.1em rgba(0,0,6,0.3);
}
.tipbubble.left-tip-pos {
 box-shadow: -5px 5px 0.5em -0.1em rgba(0,0,6,0.5);
}
.tipbubble > .close {
 color: #808080;
}
.tipbubble > .close:hover {
 color: #FF3300;
}
.tipbubble.right-tip-pos:before  {
 border-color: transparent #CCCCCC transparent transparent;
}
.tipbubble.left-tip-pos:before {
 border-color: transparent transparent transparent #CCCCCC;
}
.tipbubble.right-tip-pos:after {
 border-color: transparent #fff transparent transparent;
}
.tipbubble.left-tip-pos:after {
 border-color: transparent transparent transparent #fff;
}