﻿/*
    Jumpeye framework    
	Version: 1.0.0
	www.jumpeye.com
	
	Created by Jumpeye Components
 
 
    Tooltip style-6
*/

.jtip.style-6 {
    font-size            : 13px;
    -moz-border-radius   : 5px; 
    -webkit-border-radius: 5px; 
    border-radius        : 5px; 
    padding              : 9px 24px 9px;    
}

.jtip.style-6:before{
    border  : 9px solid;
    content : '';
    position: absolute;
    width   : 0; height  : 0;  
}

/* general */

.jtip.style-6:before,
.jtip.style-6.top-left:before      { top: auto !important; bottom: -22px !important; left: 6px !important; }
.jtip.style-6.top-center:before    { margin-left: -9px; left: 50% !important; }
.jtip.style-6.top-right:before     { top: auto !important; bottom: -22px !important; left: auto !important; right: 6px !important; }
.jtip.style-6.bottom-left:before   { bottom: auto !important; top: -22px !important; }
.jtip.style-6.bottom-right:before  { bottom: auto !important; top: -22px !important; left: auto !important; right: 6px !important; }
.jtip.style-6.bottom-center:before { bottom: auto !important; top: -22px !important; left: 50% !important; margin-left: -9px; }
.jtip.style-6.right-top:before     { bottom: auto !important; top: 6px !important; left: -22px !important; right: auto !important; }
.jtip.style-6.right-center:before  { margin-top: -9px; top: 50% !important; left: -22px !important; right: auto !important; }
.jtip.style-6.right-bottom:before  { top: auto !important; bottom: 6px !important; left: -22px !important; right: auto !important; }
.jtip.style-6.left-top:before      { bottom: auto !important; top: 6px !important; right: -22px !important; left: auto !important; }
.jtip.style-6.left-center:before   { margin-top: -9px; top: 50% !important; right: -22px !important; left: auto !important; }
.jtip.style-6.left-bottom:before   { top: auto !important; bottom: 6px !important; right: -22px !important; left: auto !important; }

/* dark */
.jtip.style-6.dark {
    background        : rgba(0,0,0,0.6);
    color             : #fff;
    border            : 4px solid #000;
    box-shadow        : 0px 1px 1px 0px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.2);
    -moz-box-shadow   : 0px 1px 1px 0px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.2);    
}

.jtip.style-6.dark:before,
.jtip.style-6.dark.top-left:before,  
.jtip.style-6.dark.top-center:before,
.jtip.style-6.dark.top-right:before     { border-color: #000 transparent transparent transparent; }
.jtip.style-6.dark.bottom-left:before, 
.jtip.style-6.dark.bottom-right:before,
.jtip.style-6.dark.bottom-center:before { border-color: transparent transparent #000 transparent; }
.jtip.style-6.dark.right-top:before,
.jtip.style-6.dark.right-center:before,
.jtip.style-6.dark.right-bottom:before  { border-color: transparent #000 transparent transparent; }
.jtip.style-6.dark.left-top:before,
.jtip.style-6.dark.left-center:before,
.jtip.style-6.dark.left-bottom:before   { border-color: transparent transparent transparent #000; }


/* light */
.jtip.style-6.light {
    background        : #fff;
    background        : rgba(255,255,255,0.6);
    color             : #373737;
    border            : 4px solid #fff;
    box-shadow        : 0px 1px 1px 0px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.05);
    -moz-box-shadow   : 0px 1px 1px 0px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.05);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2), inset 0 1px 1px 0 rgba(0,0,0,0.05);   
}

.jtip.style-6.light:before,
.jtip.style-6.light.top-left:before,
.jtip.style-6.light.top-center:before,
.jtip.style-6.light.top-right:before     { border-color: #fff rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-6.light.bottom-left:before,
.jtip.style-6.light.bottom-right:before,
.jtip.style-6.light.bottom-center:before { border-color: rgba(255,255,255,0) rgba(255,255,255,0) #fff rgba(255,255,255,0); }
.jtip.style-6.light.right-top:before,
.jtip.style-6.light.right-center:before,
.jtip.style-6.light.right-bottom:before  { border-color: rgba(255,255,255,0) #fff rgba(255,255,255,0) rgba(255,255,255,0); }
.jtip.style-6.light.left-top:before,
.jtip.style-6.light.left-center:before,
.jtip.style-6.light.left-bottom:before   { border-color: rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0) #fff; }