/**
 * Name: tooltip.css
 * Description: implements a tooltip to moviesite pages
 * Date: 20 Aug 2015
 * Copyrights openbrolly.com
 * @version 1.0
 * @author William Nyffeler.
 * 
 * 	Implementation example
 *
 *	<script type="text/javascript" src="/digitalsite/www/commonv21/js/tooltip/tooltip.js"></script>
 * 	<link rel="stylesheet" type="text/css" href="/digitalsite/www/commonv21/js/tooltip/tooltip.css">
 *
 * 	<span class="tooltip fa fa-info-circle" title="MYTEXT" ></span>
 *
 * 	Further information 
 * 		https://jqueryui.com/tooltip/
 * 		http://fortawesome.github.io/Font-Awesome/icons/
 */


.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.ui-tooltip, .arrow:after {
    background: #ee2b7b;
    border: 2px solid white;
}

/*** Tooltip color of icon ***/
.mytooltip{
    color:#ee2b7b;
}


.ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 16px "Helvetica Neue", Sans-Serif;
    box-shadow: 0 0 7px black;
}
.arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
}
.arrow.top {
    top: -16px;
    bottom: auto;
}
.arrow.left {
    left: 20%;
}
.arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
}
.arrow.top:after {
    bottom: -20px;
    top: auto;
}
/* color and size of mandatory asterix */

.asterixstyle{
    font-size: .7em;
    color:red;
}