/*
#tipy is the basic ( and only ) element.
The least you have to do, is to style this one.
*/
#tipy {
    position:absolute;
    background:#efefef;
    color:#333;
    border-radius: 1px;
    padding: 10px;
    box-shadow: 1px 1px 3px -1px #000;
    font-size:15px;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
    display:inline-block;
    opacity: 0;
    min-width: 100px;
    max-width: 200px;
    width: auto;
    z-index: 100;
    border: 1px solid #666;
    border: 0 solid rgba(0,0,0,0);
}

/*
The Default Style, uses ::before and ::After to style the little arrow
*/
#tipy:before, #tipy:after {
    background: inherit;
    display: block;
    position: absolute;
}

#tipy:before
{
    box-shadow: 1px 1px 2px -1px #000000;
    height: 10px;
    width: 10px;
}

#tipy:after
{
}
/*
 #tipy gets a class defining it's position in relation to the element that is bound:
    .position-t : on the top of the element
    .position-r : on the right of the element
    .position-b : on the bottom of the element
    .position-l : on the left of the element
    .position-tr : on the top right of the element
    .position-br : on the bottom right of the element
    .position-bl : on the bottom left of the element
    .position-tl : on the top left of the element
 */

/*
Position and Rotate the arrow in relation to #tipy position
*/
#tipy.position-t:before, #tipy.position-b:before, #tipy.position-r:before, #tipy.position-l:before{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    -webkit-transform-origin:center center;
    -moz-transform-origin:center center;
    -o-transform-origin:center center;
    -ms-transform-origin:center center;
    transform-origin:center center;

    border: 1px solid #666;
    border: 0 solid rgba(0,0,0,0);
}

#tipy.position-t:before, #tipy.position-b:before, #tipy.position-t:after, #tipy.position-b:after{
    left: 0; right: 0;
    margin: 0 auto;
    content: '';

}

#tipy.position-r:before, #tipy.position-l:before, #tipy.position-r:after, #tipy.position-l:after{
    top: 0; bottom: 0;
    margin: auto 0;
    content: '';
}

#tipy.position-tr:before, #tipy.position-br:before, #tipy.position-bl:before, #tipy.position-tl:before{ width: 10px;    height: 10px;     content: '';}
#tipy.position-tr:after, #tipy.position-br:after, #tipy.position-bl:after, #tipy.position-tl:after{     width:  6px;    height:  6px;     content: '';}

#tipy.position-tr:before{ bottom: -6px;  left: -6px;  }
#tipy.position-tr:after { bottom:  0  ;  left:  0  ;  }
#tipy.position-br:before{ top:    -6px;  left: -6px;  }
#tipy.position-br:after { top:     0  ;  left:  0  ;  }
#tipy.position-bl:before{ top:    -6px;  right:-6px;  }
#tipy.position-bl:after { top:     0  ;  right: 0  ;  }
#tipy.position-tl:before{ bottom: -6px;  right:-6px;  }
#tipy.position-tl:after { bottom:  0  ;  right: 0  ;  }

/*
The #tipy is always centered to the elements width or height and touches it on the side it is displayed.
If other positioning adjustments should be made, they should be made with margins.
Here, we leave create space for the little arrow to fit it ( otherwise it'll be displayed on top of the bound element ).
*/
#tipy.position-t{ margin-top:  -9px; }
#tipy.position-b{ margin-top:   9px; }
#tipy.position-r{ margin-left:  9px; }
#tipy.position-l{ margin-left: -9px; }

#tipy.position-tr{ margin-left:  7px; margin-top: -7px; }
#tipy.position-br{ margin-left:  7px; margin-top:  7px; }
#tipy.position-bl{ margin-left: -7px; margin-top:  7px; }
#tipy.position-tl{ margin-left: -7px; margin-top: -7px; }

#tipy.position-t:before{ bottom: -5px; }
#tipy.position-b:before{ top:    -5px; }
#tipy.position-r:before{ left:   -5px; }
#tipy.position-l:before{ right:  -5px; }

#tipy.position-t:after {	bottom: 0; height: 10px; width: 20px;}
#tipy.position-b:after {	top:    0; height: 10px; width: 20px;}
#tipy.position-r:after {	left:   0; height: 20px; width: 10px;}
#tipy.position-l:after {	right:  0; height: 20px; width: 10px;}


/* Let the user know that there is a tooltip on this element */
[data-tipy]
{
    cursor: help;
    position: relative;
}
[data-tipy]:after {
    display: inline-block;
    position: absolute;
    content: '?';
    font-size: 9px;
    line-height: 6px;
    height: 6px;
    width: 6px;
    top: 0px;
    right: -6px;
    text-indent: 0;
}

/* Alternate Styles ( e.g to distinguish an alert from a notice)*/
#tipy.red {
    background: #dc143c;
    color: #f5f5f5;
    text-shadow: 0 1px 0  #483d8b;
}
#tipy.yellow {
    background: #ffd700;
    color: #483d8b;
    text-shadow: 0 1px 0 rgba(27, 26, 55, 0.35);
}
#tipy.shaky {
    -moz-animation-delay:.5s;
    -moz-animation-duration: .7s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-name: shaky;
}

@-moz-keyframes shaky {
    10% {
        transform: translate(5px,0);
    }
    20% {
        transform: translate(0px,0);
    }
    30% {
        transform: translate(4px,0);
    }
    40% {
        transform: translate(0,0);
    }
    50% {
        transform: translate(3px,0);
    }
    60% {
        transform: translate(0px,0);
    }
    70% {
        transform: translate(2px,0);
    }
    80% {
        transform: translate(0,0);
    }
    90% {
        transform: translate(1,0);
    }
    100% {
        transform: translate(0,0);
    }
}