contrib/libxo/xohtml/external/jquery.qtip.css

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