.tip-darkgray {
    opacity:0.95;
    z-index:2147483647;
    text-align:left;
    text-shadow:#444 0 1px 1px;
    border:1px solid #888;
    padding:8px;
    min-width:50px;
    max-width:530px;
    color:#fff;
    background-color: #888;
    background-image:url(/images/poshytip/tip-darkgray.png); /* bgImageFrameSize >= 11 should work fine */
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-darkgray th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-darkgray .tip-inner {
    font:bold 12px/18px arial,helvetica,sans-serif;
    margin-top:-1px;
    padding:0 4px 3px 4px;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-darkgray .tip-arrow-top {
    margin-top:-7px;
    margin-left:15px;
    top:0;
    left:0;
    width:16px;
    height:10px;
    background:url(/images/poshytip/tip-darkgray_arrows.png) no-repeat;
}
.tip-darkgray .tip-arrow-right {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-7px;
    top:50%;
    left:100%;
    width:11px;
    height:21px;
    background:url(/images/poshytip/tip-darkgray_arrows.png) no-repeat -22px 0;
}
.tip-darkgray .tip-arrow-bottom {
    margin-top:-7px;
    margin-left:15px;
    top:100%;
    left:0;
    width:22px;
    height:13px;
    background:url(/images/poshytip/tip-darkgray_arrows.png) no-repeat -44px 0;
}
.tip-darkgray .tip-arrow-left {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-6px;
    top:50%;
    left:0;
    width:11px;
    height:21px;
    background:url(/images/poshytip/tip-darkgray_arrows.png) no-repeat -66px 0;
}




.tip-green {
    z-index:2147483647;
    text-align:left;
    border:1px solid #bdde98;
    padding:7px 10px;
    min-width:50px;
    max-width:300px;
    color:#860404;
    background-color:#dff6c6;
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-green th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-green .tip-inner {
    font:bold 12px/14px arial,helvetica,sans-serif;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-green .tip-arrow-top {
    margin-top:-10px;
    margin-left:6px;
    top:0;
    left:0;
    width:10px;
    height:10px;
    background:url(/images/poshytip/tip-green_arrows.gif) no-repeat;
}
.tip-green .tip-arrow-right {
    margin-top:6px;
    margin-left:0;
    top:0;
    left:100%;
    width:10px;
    height:10px;
    background:url(/images/poshytip/tip-green_arrows.gif) no-repeat -10px 0;
}
.tip-green .tip-arrow-bottom {
    margin-top:0;
    margin-left:6px;
    top:100%;
    left:0;
    width:10px;
    height:10px;
    background:url(/images/poshytip/tip-green_arrows.gif) no-repeat -20px 0;
}
.tip-green .tip-arrow-left {
    margin-top:6px;
    margin-left:-10px;
    top:0;
    left:0;
    width:10px;
    height:10px;
    background:url(/images/poshytip/tip-green_arrows.gif) no-repeat -30px 0;
}



.tip-skyblue {
    z-index:2147483647;
    text-align:left;
    padding:8px 10px;
    min-width:50px;
    max-width:300px;
    color:#37356c;
    background-color:#b9f3f8;
    background-image:url(/images/poshytip/tip-skyblue.png); /* bgImageFrameSize == 9 works fine */
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-skyblue th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-skyblue .tip-inner {
    font:bold 13px/15px 'trebuchet ms',arial,helvetica,sans-serif;
    padding:0 3px 1px 3px;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-skyblue .tip-arrow-top {
    margin-top:-12px;
    margin-left:0;
    top:0;
    left:0;
    width:11px;
    height:19px;
    background:url(/images/poshytip/tip-skyblue_arrows.png) no-repeat;
}
.tip-skyblue .tip-arrow-right {
    margin-top:0;
    margin-left:-7px;
    top:0;
    left:100%;
    width:18px;
    height:13px;
    background:url(/images/poshytip/tip-skyblue_arrows.png) no-repeat -20px 0;
}
.tip-skyblue .tip-arrow-bottom {
    margin-top:-8px;
    margin-left:0;
    top:100%;
    left:0;
    width:11px;
    height:20px;
    background:url(/images/poshytip/tip-skyblue_arrows.png) no-repeat -40px 0;
}
.tip-skyblue .tip-arrow-left {
    margin-top:0;
    margin-left:-11px;
    top:0;
    left:0;
    width:18px;
    height:13px;
    background:url(/images/poshytip/tip-skyblue_arrows.png) no-repeat -60px 0;
}




.tip-twitter {
    opacity:0.8;
    z-index:2147483647;
    text-align:left;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    padding:8px 8px;
    max-width:200px;
    color:#fff;
    background-color:#000;
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-twitter th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-twitter .tip-inner {
    font:bold 11px/14px 'Lucida Grande',sans-serif;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-twitter .tip-arrow-top {
    margin-top:-5px;
    margin-left:-5px; /* approx. half the width to center it */
    top:0;
    left:50%;
    width:9px;
    height:5px;
    background:url(/images/poshytip/tip-twitter_arrows.gif) no-repeat;
}
.tip-twitter .tip-arrow-right {
    margin-top:-4px; /* approx. half the height to center it */
    margin-left:0;
    top:50%;
    left:100%;
    width:5px;
    height:9px;
    background:url(/images/poshytip/tip-twitter_arrows.gif) no-repeat -9px 0;
}
.tip-twitter .tip-arrow-bottom {
    margin-top:0;
    margin-left:-5px; /* approx. half the width to center it */
    top:100%;
    left:50%;
    width:9px;
    height:5px;
    background:url(/images/poshytip/tip-twitter_arrows.gif) no-repeat -18px 0;
}
.tip-twitter .tip-arrow-left {
    margin-top:-4px; /* approx. half the height to center it */
    margin-left:-5px;
    top:50%;
    left:0;
    width:5px;
    height:9px;
    background:url(/images/poshytip/tip-twitter_arrows.gif) no-repeat -27px 0;
}




.tip-violet {
    z-index:2147483647;
    text-align:left;
    border:1px solid #afafaf;
    padding:7px;
    min-width:50px;
    max-width:530px;
    color:#860404;
    background-color:#f2e7fd;
    background-image:url(/images/poshytip/tip-violet.png); /* bgImageFrameSize >= 9 should work fine */
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-violet th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-violet .tip-inner {
    font:bold 12px/18px 'trebuchet ms',arial,helvetica,sans-serif;
    margin-top:-1px;
    padding:0 3px 2px 3px;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-violet .tip-arrow-top {
    margin-top:-7px;
    margin-left:15px;
    top:0;
    left:0;
    width:16px;
    height:10px;
    background:url(/images/poshytip/tip-violet_arrows.png) no-repeat;
}
.tip-violet .tip-arrow-right {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-4px;
    top:50%;
    left:100%;
    width:10px;
    height:20px;
    background:url(/images/poshytip/tip-violet_arrows.png) no-repeat -16px 0;
}
.tip-violet .tip-arrow-bottom {
    margin-top:-6px;
    margin-left:15px;
    top:100%;
    left:0;
    width:16px;
    height:13px;
    background:url(/images/poshytip/tip-violet_arrows.png) no-repeat -32px 0;
}
.tip-violet .tip-arrow-left {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-6px;
    top:50%;
    left:0;
    width:10px;
    height:20px;
    background:url(/images/poshytip/tip-violet_arrows.png) no-repeat -48px 0;
}




.tip-yellow {
    z-index:2147483647;
    text-align:left;
    border:1px solid #939393;
    padding:7px;
    min-width:50px;
    max-width:530px;
    color:#8c3901;
    background-color:#fef9d9;
    background-image:url(/images/poshytip/tip-yellow.png); /* bgImageFrameSize >= 10 should work fine */
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-yellow th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-yellow .tip-inner {
    font:bold 13px/18px 'trebuchet ms',arial,helvetica,sans-serif;
    margin-top:-2px;
    padding:0 3px 1px 3px;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-yellow .tip-arrow-top {
    margin-top:-7px;
    margin-left:15px;
    top:0;
    left:0;
    width:16px;
    height:10px;
    background:url(/images/poshytip/tip-yellow_arrows.png) no-repeat;
}
.tip-yellow .tip-arrow-right {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-4px;
    top:50%;
    left:100%;
    width:10px;
    height:20px;
    background:url(/images/poshytip/tip-yellow_arrows.png) no-repeat -16px 0;
}
.tip-yellow .tip-arrow-bottom {
    margin-top:-6px;
    margin-left:15px;
    top:100%;
    left:0;
    width:16px;
    height:13px;
    background:url(/images/poshytip/tip-yellow_arrows.png) no-repeat -32px 0;
}
.tip-yellow .tip-arrow-left {
    margin-top:-9px; /* approx. half the height to center it */
    margin-left:-6px;
    top:50%;
    left:0;
    width:10px;
    height:20px;
    background:url(/images/poshytip/tip-yellow_arrows.png) no-repeat -48px 0;
}




.tip-yellowsimple {
    z-index:2147483647;
    text-align:left;
    border:1px solid #c7bf93;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    padding:6px 8px;
    min-width:50px;
    max-width:300px;
    color:#000;
    background-color:#fff9c9;
    /**
     * - If you set a background-image, border/padding/background-color will be ingnored.
     *   You can set any padding to .tip-inner instead if you need.
     * - If you want a tiled background-image and border/padding for the tip,
     *   set the background-image to .tip-inner instead.
    */
}
.tip-yellowsimple th, .tip-darkgray td {
    border: none;
    padding: 0;
}
.tip-yellowsimple .tip-inner {
    font:12px/16px arial,helvetica,sans-serif;
}

/* Configure an arrow image - the script will automatically position it on the correct side of the tip */
.tip-yellowsimple .tip-arrow-top {
    margin-top:-6px;
    margin-left:-5px; /* approx. half the width to center it */
    top:0;
    left:50%;
    width:9px;
    height:6px;
    background:url(/images/poshytip/tip-yellowsimple_arrows.gif) no-repeat;
}
.tip-yellowsimple .tip-arrow-right {
    margin-top:-4px; /* approx. half the height to center it */
    margin-left:0;
    top:50%;
    left:100%;
    width:6px;
    height:9px;
    background:url(/images/poshytip/tip-yellowsimple_arrows.gif) no-repeat -9px 0;
}
.tip-yellowsimple .tip-arrow-bottom {
    margin-top:0;
    margin-left:-5px; /* approx. half the width to center it */
    top:100%;
    left:50%;
    width:9px;
    height:6px;
    background:url(/images/poshytip/tip-yellowsimple_arrows.gif) no-repeat -18px 0;
}
.tip-yellowsimple .tip-arrow-left {
    margin-top:-4px; /* approx. half the height to center it */
    margin-left:-6px;
    top:50%;
    left:0;
    width:6px;
    height:9px;
    background:url(/images/poshytip/tip-yellowsimple_arrows.gif) no-repeat -27px 0;
}