public/assets/qtip2-3-0-3/dist/jquery.qtip.css

   1 /*
   2  * qTip2 - Pretty powerful tooltips - v3.0.3
   3  * http://qtip2.com
   4  *
   5  * Copyright (c) 2016
   6  * Released under the MIT licenses
   7  * http://jquery.org/license
   8  *
   9  * Date: Wed May 11 2016 10:31 GMT+0100+0100
  10  * Plugins: tips modal viewport svg imagemap ie6
  11  * Styles: core basic css3
  12  */
  13 .qtip{
  14         position: absolute;
  15         left: -28000px;
  16         top: -28000px;
  17         display: none;
  18
  19         max-width: 280px;
  20         min-width: 50px;
  21
  22         font-size: 10.5px;
  23         line-height: 12px;
  24
  25         direction: ltr;
  26
  27         box-shadow: none;
  28         padding: 0;
  29 }
  30
  31         .qtip-content{
  32                 position: relative;
  33                 padding: 5px 9px;
  34                 overflow: hidden;
  35
  36                 text-align: left;
  37                 word-wrap: break-word;
  38         }
  39
  40         .qtip-titlebar{
  41                 position: relative;
  42                 padding: 5px 35px 5px 10px;
  43                 overflow: hidden;
  44
  45                 border-width: 0 0 1px;
  46                 font-weight: bold;
  47         }
  48
  49         .qtip-titlebar + .qtip-content{ border-top-width: 0 !important; }
  50
  51         /* Default close button class */
  52         .qtip-close{
  53                 position: absolute;
  54                 right: -9px; top: -9px;
  55                 z-index: 11; /* Overlap .qtip-tip */
  56
  57                 cursor: pointer;
  58                 outline: medium none;
  59
  60                 border: 1px solid transparent;
  61         }
  62
  63                 .qtip-titlebar .qtip-close{
  64                         right: 4px; top: 50%;
  65                         margin-top: -9px;
  66                 }
  67
  68                 * html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */
  69
  70                 .qtip-titlebar .ui-icon,
  71                 .qtip-icon .ui-icon{
  72                         display: block;
  73                         text-indent: -1000em;
  74                         direction: ltr;
  75                 }
  76
  77                 .qtip-icon, .qtip-icon .ui-icon{
  78                         -moz-border-radius: 3px;
  79                         -webkit-border-radius: 3px;
  80                         border-radius: 3px;
  81                         text-decoration: none;
  82                 }
  83
  84                         .qtip-icon .ui-icon{
  85                                 width: 18px;
  86                                 height: 14px;
  87
  88                                 line-height: 14px;
  89                                 text-align: center;
  90                                 text-indent: 0;
  91                                 font: normal bold 10px/13px Tahoma,sans-serif;
  92
  93                                 color: inherit;
  94                                 background: transparent none no-repeat -100em -100em;
  95                         }
  96
  97 /* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
  98 .qtip-focus{}
  99
 100 /* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
 101 .qtip-hover{}
 102
 103 /* Default tooltip style */
 104 .qtip-default{
 105         border: 1px solid #F1D031;
 106
 107         background-color: #FFFFA3;
 108         color: #555;
 109 }
 110
 111         .qtip-default .qtip-titlebar{
 112                 background-color: #FFEF93;
 113         }
 114
 115         .qtip-default .qtip-icon{
 116                 border-color: #CCC;
 117                 background: #F1F1F1;
 118                 color: #777;
 119         }
 120
 121         .qtip-default .qtip-titlebar .qtip-close{
 122                 border-color: #AAA;
 123                 color: #111;
 124         }
 125
 126
 127 /*! Light tooltip style */
 128 .qtip-light{
 129         background-color: white;
 130         border-color: #E2E2E2;
 131         color: #454545;
 132 }
 133
 134         .qtip-light .qtip-titlebar{
 135                 background-color: #f1f1f1;
 136         }
 137
 138
 139 /*! Dark tooltip style */
 140 .qtip-dark{
 141         background-color: #505050;
 142         border-color: #303030;
 143         color: #f3f3f3;
 144 }
 145
 146         .qtip-dark .qtip-titlebar{
 147                 background-color: #404040;
 148         }
 149
 150         .qtip-dark .qtip-icon{
 151                 border-color: #444;
 152         }
 153
 154         .qtip-dark .qtip-titlebar .ui-state-hover{
 155                 border-color: #303030;
 156         }
 157
 158
 159 /*! Cream tooltip style */
 160 .qtip-cream{
 161         background-color: #FBF7AA;
 162         border-color: #F9E98E;
 163         color: #A27D35;
 164 }
 165
 166         .qtip-cream .qtip-titlebar{
 167                 background-color: #F0DE7D;
 168         }
 169
 170         .qtip-cream .qtip-close .qtip-icon{
 171                 background-position: -82px 0;
 172         }
 173
 174
 175 /*! Red tooltip style */
 176 .qtip-red{
 177         background-color: #F78B83;
 178         border-color: #D95252;
 179         color: #912323;
 180 }
 181
 182         .qtip-red .qtip-titlebar{
 183                 background-color: #F06D65;
 184         }
 185
 186         .qtip-red .qtip-close .qtip-icon{
 187                 background-position: -102px 0;
 188         }
 189
 190         .qtip-red .qtip-icon{
 191                 border-color: #D95252;
 192         }
 193
 194         .qtip-red .qtip-titlebar .ui-state-hover{
 195                 border-color: #D95252;
 196         }
 197
 198
 199 /*! Green tooltip style */
 200 .qtip-green{
 201         background-color: #CAED9E;
 202         border-color: #90D93F;
 203         color: #3F6219;
 204 }
 205
 206         .qtip-green .qtip-titlebar{
 207                 background-color: #B0DE78;
 208         }
 209
 210         .qtip-green .qtip-close .qtip-icon{
 211                 background-position: -42px 0;
 212         }
 213
 214
 215 /*! Blue tooltip style */
 216 .qtip-blue{
 217         background-color: #E5F6FE;
 218         border-color: #ADD9ED;
 219         color: #5E99BD;
 220 }
 221
 222         .qtip-blue .qtip-titlebar{
 223                 background-color: #D0E9F5;
 224         }
 225
 226         .qtip-blue .qtip-close .qtip-icon{
 227                 background-position: -2px 0;
 228         }
 229
 230
 231 .qtip-shadow{
 232         -webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
 233         -moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
 234         box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
 235 }
 236
 237 /* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
 238 .qtip-rounded,
 239 .qtip-tipsy,
 240 .qtip-bootstrap{
 241         -moz-border-radius: 5px;
 242         -webkit-border-radius: 5px;
 243         border-radius: 5px;
 244 }
 245
 246 .qtip-rounded .qtip-titlebar{
 247         -moz-border-radius: 4px 4px 0 0;
 248         -webkit-border-radius: 4px 4px 0 0;
 249         border-radius: 4px 4px 0 0;
 250 }
 251
 252 /* Youtube tooltip style */
 253 .qtip-youtube{
 254         -moz-border-radius: 2px;
 255         -webkit-border-radius: 2px;
 256         border-radius: 2px;
 257
 258         -webkit-box-shadow: 0 0 3px #333;
 259         -moz-box-shadow: 0 0 3px #333;
 260         box-shadow: 0 0 3px #333;
 261
 262         color: white;
 263         border: 0 solid transparent;
 264
 265         background: #4A4A4A;
 266         background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,black));
 267         background-image: -webkit-linear-gradient(top,#4A4A4A 0,black 100%);
 268         background-image: -moz-linear-gradient(top,#4A4A4A 0,black 100%);
 269         background-image: -ms-linear-gradient(top,#4A4A4A 0,black 100%);
 270         background-image: -o-linear-gradient(top,#4A4A4A 0,black 100%);
 271 }
 272
 273         .qtip-youtube .qtip-titlebar{
 274                 background-color: #4A4A4A;
 275                 background-color: rgba(0,0,0,0);
 276         }
 277
 278         .qtip-youtube .qtip-content{
 279                 padding: .75em;
 280                 font: 12px arial,sans-serif;
 281
 282                 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);
 283                 -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
 284         }
 285
 286         .qtip-youtube .qtip-icon{
 287                 border-color: #222;
 288         }
 289
 290         .qtip-youtube .qtip-titlebar .ui-state-hover{
 291                 border-color: #303030;
 292         }
 293
 294
 295 /* jQuery TOOLS Tooltip style */
 296 .qtip-jtools{
 297         background: #232323;
 298         background: rgba(0, 0, 0, 0.7);
 299         background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
 300         background-image: -moz-linear-gradient(top, #717171, #232323);
 301         background-image: -webkit-linear-gradient(top, #717171, #232323);
 302         background-image: -ms-linear-gradient(top, #717171, #232323);
 303         background-image: -o-linear-gradient(top, #717171, #232323);
 304
 305         border: 2px solid #ddd;
 306         border: 2px solid rgba(241,241,241,1);
 307
 308         -moz-border-radius: 2px;
 309         -webkit-border-radius: 2px;
 310         border-radius: 2px;
 311
 312         -webkit-box-shadow: 0 0 12px #333;
 313         -moz-box-shadow: 0 0 12px #333;
 314         box-shadow: 0 0 12px #333;
 315 }
 316
 317         /* IE Specific */
 318         .qtip-jtools .qtip-titlebar{
 319                 background-color: transparent;
 320                 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
 321                 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
 322         }
 323         .qtip-jtools .qtip-content{
 324                 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
 325                 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
 326         }
 327
 328         .qtip-jtools .qtip-titlebar,
 329         .qtip-jtools .qtip-content{
 330                 background: transparent;
 331                 color: white;
 332                 border: 0 dashed transparent;
 333         }
 334
 335         .qtip-jtools .qtip-icon{
 336                 border-color: #555;
 337         }
 338
 339         .qtip-jtools .qtip-titlebar .ui-state-hover{
 340                 border-color: #333;
 341         }
 342
 343
 344 /* Cluetip style */
 345 .qtip-cluetip{
 346         -webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
 347         -moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
 348         box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
 349
 350         background-color: #D9D9C2;
 351         color: #111;
 352         border: 0 dashed transparent;
 353 }
 354
 355         .qtip-cluetip .qtip-titlebar{
 356                 background-color: #87876A;
 357                 color: white;
 358                 border: 0 dashed transparent;
 359         }
 360
 361         .qtip-cluetip .qtip-icon{
 362                 border-color: #808064;
 363         }
 364
 365         .qtip-cluetip .qtip-titlebar .ui-state-hover{
 366                 border-color: #696952;
 367                 color: #696952;
 368         }
 369
 370
 371 /* Tipsy style */
 372 .qtip-tipsy{
 373         background: black;
 374         background: rgba(0, 0, 0, .87);
 375
 376         color: white;
 377         border: 0 solid transparent;
 378
 379         font-size: 11px;
 380         font-family: 'Lucida Grande', sans-serif;
 381         font-weight: bold;
 382         line-height: 16px;
 383         text-shadow: 0 1px black;
 384 }
 385
 386         .qtip-tipsy .qtip-titlebar{
 387                 padding: 6px 35px 0 10px;
 388                 background-color: transparent;
 389         }
 390
 391         .qtip-tipsy .qtip-content{
 392                 padding: 6px 10px;
 393         }
 394
 395         .qtip-tipsy .qtip-icon{
 396                 border-color: #222;
 397                 text-shadow: none;
 398         }
 399
 400         .qtip-tipsy .qtip-titlebar .ui-state-hover{
 401                 border-color: #303030;
 402         }
 403
 404
 405 /* Tipped style */
 406 .qtip-tipped{
 407         border: 3px solid #959FA9;
 408
 409         -moz-border-radius: 3px;
 410         -webkit-border-radius: 3px;
 411         border-radius: 3px;
 412
 413         background-color: #F9F9F9;
 414         color: #454545;
 415
 416         font-weight: normal;
 417         font-family: serif;
 418 }
 419
 420         .qtip-tipped .qtip-titlebar{
 421                 border-bottom-width: 0;
 422
 423                 color: white;
 424                 background: #3A79B8;
 425                 background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
 426                 background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
 427                 background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
 428                 background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
 429                 background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
 430                 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
 431                 -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
 432         }
 433
 434         .qtip-tipped .qtip-icon{
 435                 border: 2px solid #285589;
 436                 background: #285589;
 437         }
 438
 439                 .qtip-tipped .qtip-icon .ui-icon{
 440                         background-color: #FBFBFB;
 441                         color: #555;
 442                 }
 443
 444
 445 /**
 446  * Twitter Bootstrap style.
 447  *
 448  * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
 449  * Does not work with IE 7.
 450  */
 451 .qtip-bootstrap{
 452         /** Taken from Bootstrap body */
 453         font-size: 14px;
 454         line-height: 20px;
 455         color: #333333;
 456
 457         /** Taken from Bootstrap .popover */
 458         padding: 1px;
 459         background-color: #ffffff;
 460         border: 1px solid #ccc;
 461         border: 1px solid rgba(0, 0, 0, 0.2);
 462         -webkit-border-radius: 6px;
 463         -moz-border-radius: 6px;
 464         border-radius: 6px;
 465         -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 466         -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 467         box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 468         -webkit-background-clip: padding-box;
 469         -moz-background-clip: padding;
 470         background-clip: padding-box;
 471 }
 472
 473         .qtip-bootstrap .qtip-titlebar{
 474                 /** Taken from Bootstrap .popover-title */
 475                 padding: 8px 14px;
 476                 margin: 0;
 477                 font-size: 14px;
 478                 font-weight: normal;
 479                 line-height: 18px;
 480                 background-color: #f7f7f7;
 481                 border-bottom: 1px solid #ebebeb;
 482                 -webkit-border-radius: 5px 5px 0 0;
 483                 -moz-border-radius: 5px 5px 0 0;
 484                 border-radius: 5px 5px 0 0;
 485         }
 486
 487                 .qtip-bootstrap .qtip-titlebar .qtip-close{
 488                         /**
 489                          * Overrides qTip2:
 490                          * .qtip-titlebar .qtip-close{
 491                          *   [...]
 492                          *   right: 4px;
 493                          *   top: 50%;
 494                          *   [...]
 495                          *   border-style: solid;
 496                          * }
 497                          */
 498                         right: 11px;
 499                         top: 45%;
 500                         border-style: none;
 501                 }
 502
 503         .qtip-bootstrap .qtip-content{
 504                 /** Taken from Bootstrap .popover-content */
 505                 padding: 9px 14px;
 506         }
 507
 508         .qtip-bootstrap .qtip-icon{
 509                 /**
 510                  * Overrides qTip2:
 511                  * .qtip-default .qtip-icon {
 512                  *   border-color: #CCC;
 513                  *   background: #F1F1F1;
 514                  *   color: #777;
 515                  * }
 516                  */
 517                 background: transparent;
 518         }
 519
 520                 .qtip-bootstrap .qtip-icon .ui-icon{
 521                         /**
 522                          * Overrides qTip2:
 523                          * .qtip-icon .ui-icon{
 524                          *   width: 18px;
 525                          *   height: 14px;
 526                          * }
 527                          */
 528                         width: auto;
 529                         height: auto;
 530
 531                         /* Taken from Bootstrap .close */
 532                         float: right;
 533                         font-size: 20px;
 534                         font-weight: bold;
 535                         line-height: 18px;
 536                         color: #000000;
 537                         text-shadow: 0 1px 0 #ffffff;
 538                         opacity: 0.2;
 539                         filter: alpha(opacity=20);
 540                 }
 541
 542                 .qtip-bootstrap .qtip-icon .ui-icon:hover{
 543                         /* Taken from Bootstrap .close:hover */
 544                         color: #000000;
 545                         text-decoration: none;
 546                         cursor: pointer;
 547                         opacity: 0.4;
 548                         filter: alpha(opacity=40);
 549                 }
 550
 551
 552 /* IE9 fix - removes all filters */
 553 .qtip:not(.ie9haxors) div.qtip-content,
 554 .qtip:not(.ie9haxors) div.qtip-titlebar{
 555         filter: none;
 556         -ms-filter: none;
 557 }
 558
 559
 560 .qtip .qtip-tip{
 561         margin: 0 auto;
 562         overflow: hidden;
 563         z-index: 10;
 564
 565 }
 566
 567         /* Opera bug #357 - Incorrect tip position
 568         https://github.com/Craga89/qTip2/issues/367 */
 569         x:-o-prefocus, .qtip .qtip-tip{
 570                 visibility: hidden;
 571         }
 572
 573         .qtip .qtip-tip,
 574         .qtip .qtip-tip .qtip-vml,
 575         .qtip .qtip-tip canvas{
 576                 position: absolute;
 577
 578                 color: #123456;
 579                 background: transparent;
 580                 border: 0 dashed transparent;
 581         }
 582
 583         .qtip .qtip-tip canvas{ top: 0; left: 0; }
 584
 585         .qtip .qtip-tip .qtip-vml{
 586                 behavior: url(#default#VML);
 587                 display: inline-block;
 588                 visibility: visible;
 589         }
 590
 591
 592 #qtip-overlay{
 593         position: fixed;
 594         left: 0; top: 0;
 595         width: 100%; height: 100%;
 596 }
 597
 598         /* Applied to modals with show.modal.blur set to true */
 599         #qtip-overlay.blurs{ cursor: pointer; }
 600
 601         /* Change opacity of overlay here */
 602         #qtip-overlay div{
 603                 position: absolute;
 604                 left: 0; top: 0;
 605                 width: 100%; height: 100%;
 606
 607                 background-color: black;
 608
 609                 opacity: 0.7;
 610                 filter:alpha(opacity=70);
 611                 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 612         }
 613
 614
 615 .qtipmodal-ie6fix{
 616         position: absolute !important;
 617 }