.hint, [data-hint] {position:relative;
display:inline-block;}
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {position: absolute;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
visibility:hidden;
opacity:0;
z-index:10000;
-webkit-transition:0.2s ease;-moz-transition:0.2s ease;transition:0.2s ease;
-webkit-transition-delay:0ms;-moz-transition-delay:0ms;transition-delay:0ms;}
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {visibility: visible;opacity:1;}
.hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
-webkit-transition-delay: 50ms;-moz-transition-delay: 50ms;transition-delay: 50ms;}
.hint:before, [data-hint]:before {content: '';
position:absolute;
background:transparent;
border:6px solid transparent;
z-index:10000;}
.hint:after, [data-hint]:after {content: attr(data-hint);
background:#111;
color:white;
border-radius:7px;
padding:6px 8px;
font-size:14px;
font-weight:normal;
text-align:left;
background-image:url('images/pytajnik16.gif');
background-repeat:no-repeat;
background-position:8px 8px;
text-indent:20px;
line-height:18px;}
.hint--top:before {
border-top-color: #111;
margin-bottom: -12px;
margin-left:-3px;}
.hint--top:before, .hint--top:after {bottom: 100%;left: 48%;}
.hint--top:hover:after, .hint--top:hover:before, .hint--top:focus:after, .hint--top:focus:before {
-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px);}
.hint--50:after {width:50px;margin-left:-30px;}
.hint--100:after {width:100px;margin-left:-55px;}
.hint--150:after {width:150px;margin-left:-80px;}
.hint--170:after {width:170px;margin-left:-90px;}
.hint--200:after {width:200px;margin-left:-105px;}
.hint--250:after {width:250px;margin-left:-130px;}
.hint--300:after {width:300px;margin-left:-160px;}