/*
    Jumpeye framework    
	Version: 1.0.0
	www.jumpeye.com
	
	Created by Jumpeye Components
 
 
    Tooltip style-8
*/

.jtip.style-8 {
    font-size            : 13px;
    -moz-border-radius   : 4px; 
    -webkit-border-radius: 4px; 
    border-radius        : 4px; 
    padding              : 11px 18px 12px;
}  

.jtip.style-8:before,
.jtip.style-8:after {
    content : '';
    position: absolute;
    width   : 0; height  : 0;
    left    : 10px; /* horizontal position of the arrow */ 
}

.jtip.style-8:before { border  : solid 10px; }
.jtip.style-8:after  { border  : solid 9px; }

/* general for all colors */
.jtip.style-8.gray:before, .jtip.style-8.gray.top-left:before, 
.jtip.style-8.yellow:before, .jtip.style-8.yellow.top-left:before,
.jtip.style-8.blue:before, .jtip.style-8.blue.top-left:before, 
.jtip.style-8.purple:before, .jtip.style-8.purple.top-left:before,
.jtip.style-8.green:before, .jtip.style-8.green.top-left:before,
.jtip.style-8.red:before, .jtip.style-8.red.top-left:before { top: auto !important; bottom: -20px !important; left: 8px; }

.jtip.style-8.gray:after, .jtip.style-8.gray.top-left:after,
.jtip.style-8.yellow:after, .jtip.style-8.yellow.top-left:after,
.jtip.style-8.blue:after, .jtip.style-8.blue.top-left:after,
.jtip.style-8.purple:after, .jtip.style-8.purple.top-left:after,
.jtip.style-8.green:after, .jtip.style-8.green.top-left:after,
.jtip.style-8.red:after, .jtip.style-8.red.top-left:after { top: auto !important; bottom: -17px !important; left: 9px; }    

.jtip.style-8.gray.top-center:before,
.jtip.style-8.yellow.top-center:before,
.jtip.style-8.blue.top-center:before,
.jtip.style-8.purple.top-center:before,
.jtip.style-8.green.top-center:before,
.jtip.style-8.red.top-center:before { margin-left: -10px; left: 50% !important; }

.jtip.style-8.gray.top-center:after,
.jtip.style-8.yellow.top-center:after,
.jtip.style-8.blue.top-center:after,
.jtip.style-8.purple.top-center:after,
.jtip.style-8.green.top-center:after,
.jtip.style-8.red.top-center:after { margin-left: -9px; left: 50% !important; }

.jtip.style-8.gray.top-right:before,
.jtip.style-8.yellow.top-right:before,
.jtip.style-8.blue.top-right:before,
.jtip.style-8.purple.top-right:before,
.jtip.style-8.green.top-right:before,
.jtip.style-8.red.top-right:before { top: auto !important; bottom: -20px !important; left: auto !important; right: 8px !important; }
    
.jtip.style-8.gray.top-right:after,
.jtip.style-8.yellow.top-right:after,
.jtip.style-8.blue.top-right:after,
.jtip.style-8.purple.top-right:after,
.jtip.style-8.green.top-right:after,
.jtip.style-8.red.top-right:after { top: auto !important; bottom: -17px !important; left: auto !important; right: 9px !important; }

.jtip.style-8.gray.bottom-left:before,
.jtip.style-8.yellow.bottom-left:before,
.jtip.style-8.blue.bottom-left:before,
.jtip.style-8.purple.bottom-left:before,
.jtip.style-8.green.bottom-left:before,
.jtip.style-8.red.bottom-left:before { bottom: auto !important; top: -20px !important; }   

.jtip.style-8.gray.bottom-left:after,
.jtip.style-8.yellow.bottom-left:after,
.jtip.style-8.blue.bottom-left:after,
.jtip.style-8.purple.bottom-left:after,
.jtip.style-8.green.bottom-left:after,
.jtip.style-8.red.bottom-left:after { bottom: auto !important; top: -17px !important; }   

.jtip.style-8.gray.bottom-center:before,
.jtip.style-8.yellow.bottom-center:before,
.jtip.style-8.blue.bottom-center:before,
.jtip.style-8.purple.bottom-center:before,
.jtip.style-8.green.bottom-center:before,
.jtip.style-8.red.bottom-center:before { margin-left: -10px; bottom: auto !important; top: -20px !important; left: 50% !important; }

.jtip.style-8.gray.bottom-center:after,
.jtip.style-8.yellow.bottom-center:after,
.jtip.style-8.blue.bottom-center:after,
.jtip.style-8.purple.bottom-center:after,
.jtip.style-8.green.bottom-center:after,
.jtip.style-8.red.bottom-center:after { margin-left: -9px; bottom: auto !important; top: -17px !important; left: 50% !important; }

.jtip.style-8.gray.bottom-right:before,
.jtip.style-8.yellow.bottom-right:before,
.jtip.style-8.blue.bottom-right:before,
.jtip.style-8.purple.bottom-right:before,
.jtip.style-8.green.bottom-right:before,
.jtip.style-8.red.bottom-right:before { bottom: auto !important; top: -20px !important; left: auto !important; right: 8px !important; }

.jtip.style-8.gray.bottom-right:after,
.jtip.style-8.yellow.bottom-right:after,
.jtip.style-8.blue.bottom-right:after,
.jtip.style-8.purple.bottom-right:after,
.jtip.style-8.green.bottom-right:after,
.jtip.style-8.red.bottom-right:after { bottom: auto !important; top: -17px !important; left: auto !important; right: 9px !important; }    

.jtip.style-8.gray.right-top:before,
.jtip.style-8.yellow.right-top:before,
.jtip.style-8.blue.right-top:before,
.jtip.style-8.purple.right-top:before,
.jtip.style-8.green.right-top:before,
.jtip.style-8.red.right-top:before { bottom: auto !important; top: 8px !important; left: -20px !important; right: auto !important; } 

.jtip.style-8.gray.right-top:after,
.jtip.style-8.yellow.right-top:after,
.jtip.style-8.blue.right-top:after,
.jtip.style-8.purple.right-top:after,
.jtip.style-8.green.right-top:after,
.jtip.style-8.red.right-top:after { bottom: auto !important; top: 9px !important; left: -17px !important; right: auto !important; } 

.jtip.style-8.gray.right-center:before,
.jtip.style-8.yellow.right-center:before,
.jtip.style-8.blue.right-center:before,
.jtip.style-8.purple.right-center:before,
.jtip.style-8.green.right-center:before,
.jtip.style-8.red.right-center:before { margin-top: -10px; top: 50% !important; left: -20px !important; right: auto !important; }

.jtip.style-8.gray.right-center:after,
.jtip.style-8.yellow.right-center:after,
.jtip.style-8.blue.right-center:after,
.jtip.style-8.purple.right-center:after,
.jtip.style-8.green.right-center:after,
.jtip.style-8.red.right-center:after { margin-top: -9px; top: 50% !important; left: -17px !important; right: auto !important; }

.jtip.style-8.gray.right-bottom:before,
.jtip.style-8.yellow.right-bottom:before,
.jtip.style-8.blue.right-bottom:before,
.jtip.style-8.purple.right-bottom:before,
.jtip.style-8.green.right-bottom:before,
.jtip.style-8.red.right-bottom:before { top: auto !important; bottom: 8px !important; left: -20px !important; right: auto !important; }

.jtip.style-8.gray.right-bottom:after,
.jtip.style-8.yellow.right-bottom:after,
.jtip.style-8.blue.right-bottom:after,
.jtip.style-8.purple.right-bottom:after,
.jtip.style-8.green.right-bottom:after,
.jtip.style-8.red.right-bottom:after { top: auto !important; bottom: 9px !important; left: -17px !important; right: auto !important; }

.jtip.style-8.gray.left-top:before,
.jtip.style-8.yellow.left-top:before,
.jtip.style-8.blue.left-top:before,
.jtip.style-8.purple.left-top:before,
.jtip.style-8.green.left-top:before,
.jtip.style-8.red.left-top:before { bottom: auto !important; top: 8px !important; right: -20px !important; left: auto !important; }

.jtip.style-8.gray.left-top:after,
.jtip.style-8.yellow.left-top:after,
.jtip.style-8.blue.left-top:after,
.jtip.style-8.purple.left-top:after,
.jtip.style-8.green.left-top:after,
.jtip.style-8.red.left-top:after { bottom: auto !important; top: 9px !important; right: -17px !important; left: auto !important; }

.jtip.style-8.gray.left-center:before,
.jtip.style-8.yellow.left-center:before,
.jtip.style-8.blue.left-center:before,
.jtip.style-8.purple.left-center:before,
.jtip.style-8.green.left-center:before,
.jtip.style-8.red.left-center:before { margin-top: -10px; top: 50% !important; right: -20px !important; left: auto !important; }

.jtip.style-8.gray.left-center:after,
.jtip.style-8.yellow.left-center:after,
.jtip.style-8.blue.left-center:after,
.jtip.style-8.purple.left-center:after,
.jtip.style-8.green.left-center:after,
.jtip.style-8.red.left-center:after { margin-top: -9px; top: 50% !important; right: -17px !important; left: auto !important; }

.jtip.style-8.gray.left-bottom:before,
.jtip.style-8.yellow.left-bottom:before,
.jtip.style-8.blue.left-bottom:before,
.jtip.style-8.purple.left-bottom:before,
.jtip.style-8.green.left-bottom:before,
.jtip.style-8.red.left-bottom:before { top: auto !important; bottom: 8px !important; right: -20px !important; left: auto !important; }

.jtip.style-8.gray.left-bottom:after,
.jtip.style-8.yellow.left-bottom:after,
.jtip.style-8.blue.left-bottom:after,
.jtip.style-8.purple.left-bottom:after,
.jtip.style-8.green.left-bottom:after,
.jtip.style-8.red.left-bottom:after { top: auto !important; bottom: 9px !important; right: -17px !important; left: auto !important; }

/* gray */
.jtip.style-8.gray { 
    border            : 1px solid #878787;
    background        : #c7c7c7;
    background        : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M3YzdjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2VjZWNlYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNWM1YzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background        : -moz-linear-gradient(top,  #c7c7c7 0%, #ececec 32%, #c5c5c5 100%);
    background        : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7c7c7), color-stop(32%,#ececec), color-stop(100%,#c5c5c5));
    background        : -webkit-linear-gradient(top,  #c7c7c7 0%,#ececec 32%,#c5c5c5 100%);
    background        : -o-linear-gradient(top,  #c7c7c7 0%,#ececec 32%,#c5c5c5 100%);
    background        : -ms-linear-gradient(top,  #c7c7c7 0%,#ececec 32%,#c5c5c5 100%);
    background        : linear-gradient(to bottom,  #c7c7c7 0%,#ececec 32%,#c5c5c5 100%);
    filter            : progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7c7c7', endColorstr='#c5c5c5',GradientType=0 );
    -moz-box-shadow   : 1px 1px 0px 0px #dcdcdc inset, -1px -1px 0px 0px #dcdcdc inset;
    box-shadow        : 1px 1px 0px 0px #dcdcdc inset, -1px -1px 0px 0px #dcdcdc inset;  
    -webkit-box-shadow: 1px 1px 0px 0px #dcdcdc inset, -1px -1px 0px 0px #dcdcdc inset;    
    color             : #7e7e7e;
    text-shadow       : 0 1px 0 rgba(255, 255, 255, 0.44);
}

.jtip.style-8.gray:before,
.jtip.style-8.gray.top-left:before,
.jtip.style-8.gray.top-center:before,
.jtip.style-8.gray.top-right:before  { border-color: #878787 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.gray:after,
.jtip.style-8.gray.top-left:after,
.jtip.style-8.gray.top-center:after,
.jtip.style-8.gray.top-right:after { border-color: #c5c5c5 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.gray.bottom-left:before,
.jtip.style-8.gray.bottom-center:before,
.jtip.style-8.gray.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #878787 rgba(255,255,255,0); }

.jtip.style-8.gray.bottom-left:after,
.jtip.style-8.gray.bottom-center:after,
.jtip.style-8.gray.bottom-right:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #cbcbcb rgba(255,255,255,0); }

.jtip.style-8.gray.right-top:before,
.jtip.style-8.gray.right-center:before,
.jtip.style-8.gray.right-bottom:before { border-color: rgba(255,255,255,0) #878787 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.gray.right-top:after    { border-color: rgba(233,233,233,0) #e9e9e9 rgba(233,233,233,0) rgba(233,233,233,0); }
.jtip.style-8.gray.right-center:after { border-color: rgba(224,224,224,0) #e0e0e0 rgba(224,224,224,0) rgba(224,224,224,0); }
.jtip.style-8.gray.right-bottom:after { border-color: rgba(214,214,214,0) #d6d6d6 rgba(214,214,214,0) rgba(214,214,214,0); }

.jtip.style-8.gray.left-top:before,
.jtip.style-8.gray.left-center:before,
.jtip.style-8.gray.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #878787; }

.jtip.style-8.gray.left-top:after    { border-color: rgba(233,233,233,0) rgba(233,233,233,0) rgba(233,233,233,0) #e9e9e9; }
.jtip.style-8.gray.left-center:after { border-color: rgba(224,224,224,0) rgba(224,224,224,0) rgba(224,224,224,0) #e0e0e0; }
.jtip.style-8.gray.left-bottom:after { border-color: rgba(214,214,214,0) rgba(214,214,214,0) rgba(214,214,214,0) #d6d6d6; }


/* yellow */
.jtip.style-8.yellow { 
    border            : 1px solid #eecf43;
    background        : #ffeb95;
    background        : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZWI5NSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2ZmZjRjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmViOTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background        : -moz-linear-gradient(top,  #ffeb95 0%, #fff4c3 32%, #ffeb95 100%);
    background        : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffeb95), color-stop(32%,#fff4c3), color-stop(100%,#ffeb95));
    background        : -webkit-linear-gradient(top,  #ffeb95 0%,#fff4c3 32%,#ffeb95 100%);
    background        : -o-linear-gradient(top,  #ffeb95 0%,#fff4c3 32%,#ffeb95 100%);
    background        : -ms-linear-gradient(top,  #ffeb95 0%,#fff4c3 32%,#ffeb95 100%);
    background        : linear-gradient(to bottom,  #ffeb95 0%,#fff4c3 32%,#ffeb95 100%);
    filter            : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffeb95', endColorstr='#ffeb95',GradientType=0 );
    -moz-box-shadow   : 1px 1px 0px 0px #fff2bc inset, -1px -1px 0px 0px #fff2bc inset;
    box-shadow        : 1px 1px 0px 0px #fff2bc inset, -1px -1px 0px 0px #fff2bc inset;  
    -webkit-box-shadow: 1px 1px 0px 0px #fff2bc inset, -1px -1px 0px 0px #fff2bc inset;    
    color             : #ab9325;
    text-shadow       : 0 1px 0 rgba(255, 255, 255, 0.75);
}

.jtip.style-8.yellow:before,
.jtip.style-8.yellow.top-left:before,
.jtip.style-8.yellow.top-center:before,
.jtip.style-8.yellow.top-right:before { border-color: #eecf43 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.yellow:after,
.jtip.style-8.yellow.top-left:after,
.jtip.style-8.yellow.top-center:after,
.jtip.style-8.yellow.top-right:after { border-color: #ffeb95 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.yellow.bottom-left:before,
.jtip.style-8.yellow.bottom-center:before,
.jtip.style-8.yellow.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #eecf43 rgba(255,255,255,0); }

.jtip.style-8.yellow.bottom-left:after,
.jtip.style-8.yellow.bottom-center:after,
.jtip.style-8.yellow.bottom-right:after  { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #ffeb95 rgba(255,255,255,0); }

.jtip.style-8.yellow.right-top:before,
.jtip.style-8.yellow.right-center:before,
.jtip.style-8.yellow.right-bottom:before { border-color: rgba(255,255,255,0) #eecf43 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.yellow.right-top:after    { border-color: rgba(255,255,255,0) #fff3c1 rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.yellow.right-center:after { border-color: rgba(255,255,255,0) #fff1b5 rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.yellow.right-bottom:after { border-color: rgba(255,255,255,0) #ffefac rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.yellow.left-top:before,
.jtip.style-8.yellow.left-center:before,
.jtip.style-8.yellow.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #eecf43; }

.jtip.style-8.yellow.left-top:after    { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fff3c1; }
.jtip.style-8.yellow.left-center:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fff1b5; }
.jtip.style-8.yellow.left-bottom:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ffefac; }


/* style-8 blue */
.jtip.style-8.blue { 
    border            : 1px solid #78b6f9;
    background        : #8cc0f7;
    background        : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhjYzBmNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2UzZWZmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM4Y2MwZjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background        : -moz-linear-gradient(top,  #8cc0f7 0%, #e3effc 32%, #8cc0f7 100%);
    background        : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8cc0f7), color-stop(32%,#e3effc), color-stop(100%,#8cc0f7));
    background        : -webkit-linear-gradient(top,  #8cc0f7 0%,#e3effc 32%,#8cc0f7 100%);
    background        : -o-linear-gradient(top,  #8cc0f7 0%,#e3effc 32%,#8cc0f7 100%);
    background        : -ms-linear-gradient(top,  #8cc0f7 0%,#e3effc 32%,#8cc0f7 100%);
    background        : linear-gradient(to bottom,  #8cc0f7 0%,#e3effc 32%,#8cc0f7 100%);
    filter            : progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cc0f7', endColorstr='#8cc0f7',GradientType=0 );
    -moz-box-shadow   : 1px 1px 0px 0px #b7d7fa inset, -1px -1px 0px 0px #b7d7fa inset;
    box-shadow        : 1px 1px 0px 0px #b7d7fa inset, -1px -1px 0px 0px #b7d7fa inset;  
    -webkit-box-shadow: 1px 1px 0px 0px #b7d7fa inset, -1px -1px 0px 0px #b7d7fa inset;    
    color             : #618fc2;
    text-shadow       : 0 1px 0 rgba(255, 255, 255, 0.75);
}

.jtip.style-8.blue:before,
.jtip.style-8.blue.top-left:before,
.jtip.style-8.blue.top-center:before,
.jtip.style-8.blue.top-right:before { border-color: #78b6f9 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.blue:after,
.jtip.style-8.blue.top-left:after,
.jtip.style-8.blue.top-center:after,
.jtip.style-8.blue.top-right:after { border-color: #8cc0f7 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.blue.bottom-left:before,
.jtip.style-8.blue.bottom-center:before,
.jtip.style-8.blue.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #78b6f9 rgba(255,255,255,0); }

.jtip.style-8.blue.bottom-left:after,
.jtip.style-8.blue.bottom-center:after,
.jtip.style-8.blue.bottom-right:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #8cc0f7 rgba(255,255,255,0); }

.jtip.style-8.blue.right-top:before,
.jtip.style-8.blue.right-center:before,
.jtip.style-8.blue.right-bottom:before { border-color: rgba(255,255,255,0) #78b6f9 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.blue.right-top:after    { border-color: rgba(255,255,255,0) #dfedfb rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.blue.right-center:after { border-color: rgba(255,255,255,0) #cce2fa rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.blue.right-bottom:after { border-color: rgba(255,255,255,0) #b6d6f9 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.blue.left-top:before,
.jtip.style-8.blue.left-center:before,
.jtip.style-8.blue.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #78b6f9; }

.jtip.style-8.blue.left-top:after    { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #dfedfb; }
.jtip.style-8.blue.left-center:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #cce2fa; }
.jtip.style-8.blue.left-bottom:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #b6d6f9; }

/* style-8 purple */
.jtip.style-8.purple { 
    border            : 1px solid #a073ce;
    background        : #bd9ddd;
    background        : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JkOWRkZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2RiYzVmMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZDlkZGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background        : -moz-linear-gradient(top,  #bd9ddd 0%, #dbc5f1 32%, #bd9ddd 100%);
    background        : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd9ddd), color-stop(32%,#dbc5f1), color-stop(100%,#bd9ddd));
    background        : -webkit-linear-gradient(top,  #bd9ddd 0%,#dbc5f1 32%,#bd9ddd 100%);
    background        : -o-linear-gradient(top,  #bd9ddd 0%,#dbc5f1 32%,#bd9ddd 100%);
    background        : -ms-linear-gradient(top,  #bd9ddd 0%,#dbc5f1 32%,#bd9ddd 100%);
    background        : linear-gradient(to bottom,  #bd9ddd 0%,#dbc5f1 32%,#bd9ddd 100%);
    filter            : progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd9ddd', endColorstr='#bd9ddd',GradientType=0 );
    -moz-box-shadow   : 1px 1px 0px 0px #d6c2ea inset, -1px -1px 0px 0px #d6c2ea inset;
    box-shadow        : 1px 1px 0px 0px #d6c2ea inset, -1px -1px 0px 0px #d6c2ea inset;  
    -webkit-box-shadow: 1px 1px 0px 0px #d6c2ea inset, -1px -1px 0px 0px #d6c2ea inset;    
    color             : #8a5cba;
    text-shadow       : 0 1px 0 rgba(255, 255, 255, 0.75);
}

.jtip.style-8.purple:before, 
.jtip.style-8.purple.top-left:before,
.jtip.style-8.purple.top-center:before,
.jtip.style-8.purple.top-right:before { border-color: #a073ce rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.purple:after, 
.jtip.style-8.purple.top-left:after,
.jtip.style-8.purple.top-center:after,
.jtip.style-8.purple.top-right:after { border-color: #bd9ddd rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.purple.bottom-left:before,
.jtip.style-8.purple.bottom-center:before,
.jtip.style-8.purple.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #a073ce rgba(255,255,255,0); }

.jtip.style-8.purple.bottom-left:after,
.jtip.style-8.purple.bottom-center:after,
.jtip.style-8.purple.bottom-right:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #bd9ddd rgba(255,255,255,0); }

.jtip.style-8.purple.right-top:before,
.jtip.style-8.purple.right-center:before,
.jtip.style-8.purple.right-bottom:before { border-color: rgba(255,255,255,0) #a073ce rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.purple.right-top:after    { border-color: rgba(255,255,255,0) #dac4f0 rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.purple.right-center:after { border-color: rgba(255,255,255,0) #d2b9eb rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.purple.right-bottom:after { border-color: rgba(255,255,255,0) #ccb1e7 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.purple.left-top:before,
.jtip.style-8.purple.left-center:before,
.jtip.style-8.purple.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #a073ce; }

.jtip.style-8.purple.left-top:after    { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #dac4f0; }
.jtip.style-8.purple.left-center:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #d2b9eb; }
.jtip.style-8.purple.left-bottom:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #ccb1e7; }


/* style-8 green */
.jtip.style-8.green { 
    border            : 1px solid #8fb041;
    background        : #c5de8a;
    background        : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M1ZGU4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2UzZjJjMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNWRlOGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background        : -moz-linear-gradient(top,  #c5de8a 0%, #e3f2c1 32%, #c5de8a 100%);
    background        : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5de8a), color-stop(32%,#e3f2c1), color-stop(100%,#c5de8a));
    background        : -webkit-linear-gradient(top,  #c5de8a 0%,#e3f2c1 32%,#c5de8a 100%);
    background        : -o-linear-gradient(top,  #c5de8a 0%,#e3f2c1 32%,#c5de8a 100%);
    background        : -ms-linear-gradient(top,  #c5de8a 0%,#e3f2c1 32%,#c5de8a 100%);
    background        : linear-gradient(to bottom,  #c5de8a 0%,#e3f2c1 32%,#c5de8a 100%);
    filter            : progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5de8a', endColorstr='#c5de8a',GradientType=0 );
    -moz-box-shadow   : 1px 1px 0px 0px #e2efc3 inset, -1px -1px 0px 0px #e2efc3 inset;
    box-shadow        : 1px 1px 0px 0px #e2efc3 inset, -1px -1px 0px 0px #e2efc3 inset;  
    -webkit-box-shadow: 1px 1px 0px 0px #e2efc3 inset, -1px -1px 0px 0px #e2efc3 inset;    
    color             : #7a9d29;
    text-shadow       : 0 1px 0 rgba(255, 255, 255, 0.75);
}

.jtip.style-8.green:before, 
.jtip.style-8.green.top-left:before,
.jtip.style-8.green.top-center:before,
.jtip.style-8.green.top-right:before { border-color: #8fb041 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.green:after, 
.jtip.style-8.green.top-left:after,
.jtip.style-8.green.top-center:after,
.jtip.style-8.green.top-right:after { border-color: #c5de8a rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.green.bottom-left:before,
.jtip.style-8.green.bottom-center:before,
.jtip.style-8.green.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #8fb041 rgba(255,255,255,0); }

.jtip.style-8.green.bottom-left:after,
.jtip.style-8.green.bottom-center:after,
.jtip.style-8.green.bottom-right:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #c5de8a rgba(255,255,255,0); }

.jtip.style-8.green.right-top:before,
.jtip.style-8.green.right-center:before,
.jtip.style-8.green.right-bottom:before { border-color: rgba(255,255,255,0) #8fb041 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.green.right-top:after    { border-color: rgba(255,255,255,0) #e1f1be rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.green.right-center:after { border-color: rgba(255,255,255,0) #dbecb2 rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.green.right-bottom:after { border-color: rgba(255,255,255,0) #d4e8a6 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.green.left-top:before,
.jtip.style-8.green.left-center:before,
.jtip.style-8.green.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #8fb041; }

.jtip.style-8.green.left-top:after    { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #e1f1be; }
.jtip.style-8.green.left-center:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #dbecb2; }
.jtip.style-8.green.left-bottom:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #d4e8a6; }

/* style-8 red */
.jtip.style-8.red { 
    border            : 1px solid #d60001;
    background        : #e24d4e;
    background        : url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UyNGQ0ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMyJSIgc3RvcC1jb2xvcj0iI2Y1YjZiNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlMjRkNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background        : -moz-linear-gradient(top,  #e24d4e 0%, #f5b6b6 32%, #e24d4e 100%);
    background        : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e24d4e), color-stop(32%,#f5b6b6), color-stop(100%,#e24d4e));
    background        : -webkit-linear-gradient(top,  #e24d4e 0%,#f5b6b6 32%,#e24d4e 100%);
    background        : -o-linear-gradient(top,  #e24d4e 0%,#f5b6b6 32%,#e24d4e 100%);
    background        : -ms-linear-gradient(top,  #e24d4e 0%,#f5b6b6 32%,#e24d4e 100%);
    background        : linear-gradient(to bottom,  #e24d4e 0%,#f5b6b6 32%,#e24d4e 100%);
    filter            : progid:DXImageTransform.Microsoft.gradient( startColorstr='#e24d4e', endColorstr='#e24d4e',GradientType=0 );
    -moz-box-shadow   : 1px 1px 0px 0px #ef9c9c inset, -1px -1px 0px 0px #ef9c9c inset;
    box-shadow        : 1px 1px 0px 0px #ef9c9c inset, -1px -1px 0px 0px #ef9c9c inset;  
    -webkit-box-shadow: 1px 1px 0px 0px #ef9c9c inset, -1px -1px 0px 0px #ef9c9c inset;    
    color             : #890c0c;
    text-shadow       : 0 1px 0 rgba(255, 255, 255, 0.44);
}

.jtip.style-8.red:before, 
.jtip.style-8.red.top-left:before,
.jtip.style-8.red.top-center:before,
.jtip.style-8.red.top-right:before { border-color: #d60001 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.red:after, 
.jtip.style-8.red.top-left:after,
.jtip.style-8.red.top-center:after,
.jtip.style-8.red.top-right:after  { border-color: #e24d4e rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.red.bottom-left:before,
.jtip.style-8.red.bottom-center:before,
.jtip.style-8.red.bottom-right:before { border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #d60001 rgba(255,255,255,0); }

.jtip.style-8.red.bottom-left:after,
.jtip.style-8.red.bottom-center:after,
.jtip.style-8.red.bottom-right:after  { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #e24d4e rgba(255,255,255,0); }

.jtip.style-8.red.right-top:before,
.jtip.style-8.red.right-center:before,
.jtip.style-8.red.right-bottom:before { border-color: rgba(255,255,255,0) #d60001 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.red.right-top:after    { border-color: rgba(255,255,255,0) #f4b4b4 rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.red.right-center:after { border-color: rgba(255,255,255,0) #f09a9a rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-8.red.right-bottom:after { border-color: rgba(255,255,255,0) #eb8080 rgba(255,255,255,0) rgba(255,255,255,0); }

.jtip.style-8.red.left-top:before,
.jtip.style-8.red.left-center:before,
.jtip.style-8.red.left-bottom:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #d60001; }

.jtip.style-8.red.left-top:after    { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #f4b4b4; }
.jtip.style-8.red.left-center:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #f09a9a; }
.jtip.style-8.red.left-bottom:after { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #eb8080; }