www/css/jquery-0.6.1.smallipop.css

   1 /* smallipop css */
   2 .smallipop-hint {
   3   display: none;
   4 }
   5
   6 #smallipop-tour-overlay {
   7   position: fixed;
   8   left: 0;
   9   top: 0;
  10   bottom: 0;
  11   right: 0;
  12 }
  13
  14 .smallipop-instance {
  15   position: absolute;
  16   display: none;
  17   top: 0;
  18   left: 0;
  19   background-color: #314b64;
  20   border: 1px solid #0f161e;
  21   color: #d2dfe7;
  22   z-index: 9999;
  23   max-width: 400px;
  24 }
  25 .smallipop-instance font {
  26   size: 11px;
  27   family: arial;
  28 }
  29 .smallipop-instance a {
  30   color: #98cbea;
  31 }
  32 .smallipop-instance:before, .smallipop-instance:after {
  33   content: '';
  34   position: absolute;
  35   left: 50%;
  36   height: 0;
  37   width: 0;
  38   pointer-events: none;
  39 }
  40 .smallipop-instance:before {
  41   bottom: -20px;
  42   margin-left: -10px;
  43   border: 10px solid transparent;
  44 }
  45 .smallipop-instance:after {
  46   bottom: -24px;
  47   margin-left: -12px;
  48   border: 12px solid transparent;
  49 }
  50
  51 .smallipop-align-left:before, .smallipop-align-left:after {
  52   margin-left: 0;
  53   left: auto;
  54   right: 20px;
  55 }
  56 .smallipop-align-left:after {
  57   right: 18px;
  58 }
  59
  60 .smallipop-align-right:before, .smallipop-align-right:after {
  61   margin-left: 0;
  62   left: 20px;
  63   right: auto;
  64 }
  65 .smallipop-align-right:after {
  66   left: 18px;
  67 }
  68
  69 .smallipop-bottom:before, .smallipop-bottom:after {
  70   bottom: auto;
  71   top: -20px;
  72 }
  73 .smallipop-bottom:after {
  74   top: -24px;
  75 }
  76
  77 .smallipop-left:before, .smallipop-left:after,
  78 .smallipop-right:before,
  79 .smallipop-right:after {
  80   right: -16px;
  81   left: auto;
  82   top: 50%;
  83   bottom: auto;
  84   border-width: 8px;
  85   margin: -8px 0 0;
  86 }
  87 .smallipop-left:after,
  88 .smallipop-right:after {
  89   right: -20px;
  90   border-width: 10px;
  91   margin: -10px 0 0;
  92 }
  93
  94 .smallipop-right:before, .smallipop-right:after {
  95   left: -16px;
  96   right: auto;
  97 }
  98 .smallipop-right:after {
  99   left: -20px;
 100 }
 101
 102 .smallipop-content {
 103   padding: 10px;
 104 }
 105
 106 .smallipop-tour-content {
 107   padding: 5px 0;
 108   min-width: 150px;
 109 }
 110
 111 .smallipop-tour-footer {
 112   padding-top: 5px;
 113   position: relative;
 114   overflow: hidden;
 115   *zoom: 1;
 116 }
 117
 118 .smallipop-tour-progress {
 119   color: #bbb;
 120   text-align: center;
 121   position: absolute;
 122   left: 50%;
 123   width: 80px;
 124   margin-left: -40px;
 125   top: 8px;
 126 }
 127
 128 .smallipop-tour-close-icon {
 129   position: absolute;
 130   right: -8px;
 131   top: -8px;
 132   width: 16px;
 133   height: 16px;
 134   padding-top: 0px;
 135   font-size: 11px;
 136   background: #555;
 137   color: #ccc;
 138   text-align: center;
 139   text-shadow: 0 -1px 1px #666666;
 140   text-decoration: none;
 141   -webkit-border-radius: 8px;
 142   -moz-border-radius: 8px;
 143   -ms-border-radius: 8px;
 144   -o-border-radius: 8px;
 145   border-radius: 8px;
 146   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 147   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 148   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 149 }
 150 .smallipop-tour-close-icon:hover {
 151   text-decoration: none;
 152   background: #666;
 153   color: #fff;
 154 }
 155
 156 .smallipop-tour-prev,
 157 .smallipop-tour-next,
 158 .smallipop-tour-close {
 159   color: #ccc;
 160   display: block;
 161   padding: 3px 4px 2px;
 162   line-height: 1em;
 163   float: left;
 164   background: #203142;
 165   -webkit-border-radius: 3px;
 166   -moz-border-radius: 3px;
 167   -ms-border-radius: 3px;
 168   -o-border-radius: 3px;
 169   border-radius: 3px;
 170   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 171   -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 172   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
 173 }
 174 .smallipop-tour-prev:hover,
 175 .smallipop-tour-next:hover,
 176 .smallipop-tour-close:hover {
 177   color: #fff;
 178   background: #293e53;
 179   text-decoration: none;
 180 }
 181
 182 .smallipop-tour-next,
 183 .smallipop-tour-close {
 184   float: right;
 185 }
 186
 187 /* default theme */
 188 .smallipop-theme-default {
 189   text-shadow: 0 -1px 1px #0f161e;
 190   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 191   -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 192   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 193   -webkit-border-radius: 12px;
 194   -moz-border-radius: 12px;
 195   -ms-border-radius: 12px;
 196   -o-border-radius: 12px;
 197   border-radius: 12px;
 198   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(49, 75, 100, 0.9)), color-stop(100%, rgba(26, 38, 52, 0.9)));
 199   background: -webkit-linear-gradient(rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9));
 200   background: -moz-linear-gradient(rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9));
 201   background: -o-linear-gradient(rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9));
 202   background: linear-gradient(rgba(49, 75, 100, 0.9), rgba(26, 38, 52, 0.9));
 203   /* Fallback for opera */
 204   background: -webkit-gradient(radial, 50% -100px, 0, 50% -100px, 150, color-stop(66.66667%, rgba(49, 75, 100, 0.9)), color-stop(86.66667%, rgba(33, 50, 66, 0.9)), color-stop(100%, rgba(26, 38, 52, 0.9)));
 205   background: -webkit-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px);
 206   background: -moz-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px);
 207   background: -o-radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px);
 208   background: radial-gradient(50% -100px, circle contain, rgba(49, 75, 100, 0.9) 100px, rgba(33, 50, 66, 0.9) 130px, rgba(26, 38, 52, 0.9) 150px);
 209 }
 210 .smallipop-theme-default a {
 211   text-shadow: 0 -1px 1px #0f161e;
 212 }
 213 .smallipop-theme-default .smallipop-content {
 214   border-top: 1px solid #586d82;
 215   -webkit-border-radius: 12px;
 216   -moz-border-radius: 12px;
 217   -ms-border-radius: 12px;
 218   -o-border-radius: 12px;
 219   border-radius: 12px;
 220 }
 221 .smallipop-theme-default:before {
 222   border-color: #1a2634 transparent transparent transparent;
 223 }
 224 .smallipop-theme-default:after {
 225   border-color: #0f161e transparent transparent transparent;
 226 }
 227 .smallipop-theme-default.smallipop-bottom:before {
 228   border-color: transparent transparent #1a2634 transparent;
 229 }
 230 .smallipop-theme-default.smallipop-bottom:after {
 231   border-color: transparent transparent #0f161e transparent;
 232 }
 233 .smallipop-theme-default.smallipop-left:before {
 234   border-color: transparent transparent transparent #1a2634;
 235 }
 236 .smallipop-theme-default.smallipop-left:after {
 237   border-color: transparent transparent transparent #0f161e;
 238 }
 239 .smallipop-theme-default.smallipop-right:before {
 240   border-color: transparent #1a2634 transparent transparent;
 241 }
 242 .smallipop-theme-default.smallipop-right:after {
 243   border-color: transparent #0f161e transparent transparent;
 244 }
 245
 246 .cssgradients.rgba .smallipop-theme-default {
 247   background-color: transparent;
 248 }
 249
 250 /* blue theme */
 251 .smallipop-theme-blue {
 252   background: transparent;
 253   color: #111;
 254   border: 10px solid rgba(0, 100, 180, 0.9);
 255   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 256   -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 257   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 258   -webkit-border-radius: 7px;
 259   -moz-border-radius: 7px;
 260   -ms-border-radius: 7px;
 261   -o-border-radius: 7px;
 262   border-radius: 7px;
 263 }
 264 .smallipop-theme-blue a {
 265   color: #2276aa;
 266 }
 267 .smallipop-theme-blue:after {
 268   bottom: -34px;
 269   border-color: rgba(0, 100, 180, 0.9) transparent transparent transparent;
 270 }
 271 .smallipop-theme-blue:before {
 272   display: none;
 273 }
 274 .smallipop-theme-blue.smallipop-bottom:after {
 275   top: -34px;
 276   border-color: transparent transparent rgba(0, 100, 180, 0.9) transparent;
 277 }
 278 .smallipop-theme-blue.smallipop-left {
 279   right: -26px;
 280 }
 281 .smallipop-theme-blue.smallipop-left:after {
 282   border-color: transparent transparent transparent rgba(0, 100, 180, 0.9);
 283 }
 284 .smallipop-theme-blue.smallipop-right {
 285   left: -26px;
 286 }
 287 .smallipop-theme-blue.smallipop-right:after {
 288   border-color: transparent rgba(0, 100, 180, 0.9) transparent transparent;
 289 }
 290 .smallipop-theme-blue .smallipop-content {
 291   border: 0;
 292   background: #fcfcfc;
 293 }
 294 .smallipop-theme-blue .smallipop-tour-progress {
 295   color: #777;
 296 }
 297 .smallipop-theme-blue .smallipop-tour-prev,
 298 .smallipop-theme-blue .smallipop-tour-next,
 299 .smallipop-theme-blue .smallipop-tour-close {
 300   color: #222;
 301   background: #efefef;
 302 }
 303 .smallipop-theme-blue .smallipop-tour-prev:hover,
 304 .smallipop-theme-blue .smallipop-tour-next:hover,
 305 .smallipop-theme-blue .smallipop-tour-close:hover {
 306   color: #111;
 307   background: #f7f7f7;
 308 }
 309
 310 /* black theme */
 311 .smallipop-theme-black {
 312   background-color: #222222;
 313   border-color: #111;
 314   text-shadow: 0 -1px 1px #111111;
 315   color: #f5f5f5;
 316   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 317   -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 318   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 319   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #333333), color-stop(100%, #222222));
 320   background: -webkit-linear-gradient(#333333, #222222);
 321   background: -moz-linear-gradient(#333333, #222222);
 322   background: -o-linear-gradient(#333333, #222222);
 323   background: linear-gradient(#333333, #222222);
 324   -webkit-border-radius: 5px;
 325   -moz-border-radius: 5px;
 326   -ms-border-radius: 5px;
 327   -o-border-radius: 5px;
 328   border-radius: 5px;
 329 }
 330 .smallipop-theme-black a {
 331   color: #eef8ff;
 332   text-shadow: 0 -1px 1px #111111;
 333 }
 334 .smallipop-theme-black:before {
 335   border-color: #222222 transparent transparent transparent;
 336 }
 337 .smallipop-theme-black:after {
 338   border-color: #111111 transparent transparent transparent;
 339 }
 340 .smallipop-theme-black.smallipop-bottom:before {
 341   border-color: transparent transparent #222222 transparent;
 342 }
 343 .smallipop-theme-black.smallipop-bottom:after {
 344   border-color: transparent transparent #111111 transparent;
 345 }
 346 .smallipop-theme-black.smallipop-left:before {
 347   border-color: transparent transparent transparent #222222;
 348 }
 349 .smallipop-theme-black.smallipop-left:after {
 350   border-color: transparent transparent transparent #111111;
 351 }
 352 .smallipop-theme-black.smallipop-right:before {
 353   border-color: transparent #222222 transparent transparent;
 354 }
 355 .smallipop-theme-black.smallipop-right:after {
 356   border-color: transparent #111111 transparent transparent;
 357 }
 358 .smallipop-theme-black .smallipop-content {
 359   border-top: 1px solid #666;
 360   -webkit-border-radius: 5px;
 361   -moz-border-radius: 5px;
 362   -ms-border-radius: 5px;
 363   -o-border-radius: 5px;
 364   border-radius: 5px;
 365 }
 366 .smallipop-theme-black .smallipop-tour-progress {
 367   color: #888;
 368 }
 369 .smallipop-theme-black .smallipop-tour-prev,
 370 .smallipop-theme-black .smallipop-tour-next,
 371 .smallipop-theme-black .smallipop-tour-close {
 372   color: #ccc;
 373   background: #333;
 374 }
 375 .smallipop-theme-black .smallipop-tour-prev:hover,
 376 .smallipop-theme-black .smallipop-tour-next:hover,
 377 .smallipop-theme-black .smallipop-tour-close:hover {
 378   color: #fff;
 379   background: #3a3a3a;
 380 }
 381
 382 .cssgradients .smallipop-theme-black {
 383   background-color: transparent;
 384 }
 385
 386 /* orange theme */
 387 .smallipop-theme-orange {
 388   background-color: #f9aa18;
 389   border-color: #e17500;
 390   text-shadow: 0 1px 1px #fff24d;
 391   color: #714900;
 392   background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff24d), color-stop(100%, #f9aa18));
 393   background: -webkit-linear-gradient(#fff24d, #f9aa18);
 394   background: -moz-linear-gradient(#fff24d, #f9aa18);
 395   background: -o-linear-gradient(#fff24d, #f9aa18);
 396   background: linear-gradient(#fff24d, #f9aa18);
 397   -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 398   -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 399   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 400   -webkit-border-radius: 10px;
 401   -moz-border-radius: 10px;
 402   -ms-border-radius: 10px;
 403   -o-border-radius: 10px;
 404   border-radius: 10px;
 405 }
 406 .smallipop-theme-orange a {
 407   color: #145d95;
 408   text-shadow: 0 1px 1px #fff24d;
 409 }
 410 .smallipop-theme-orange:before {
 411   border-color: #f9aa18 transparent transparent transparent;
 412 }
 413 .smallipop-theme-orange:after {
 414   border-color: #e17500 transparent transparent transparent;
 415 }
 416 .smallipop-theme-orange.smallipop-bottom:before {
 417   border-color: transparent transparent #f9aa18 transparent;
 418 }
 419 .smallipop-theme-orange.smallipop-bottom:after {
 420   border-color: transparent transparent #e17500 transparent;
 421 }
 422 .smallipop-theme-orange.smallipop-left:before {
 423   border-color: transparent transparent transparent #f9aa18;
 424 }
 425 .smallipop-theme-orange.smallipop-left:after {
 426   border-color: transparent transparent transparent #e17500;
 427 }
 428 .smallipop-theme-orange.smallipop-right:before {
 429   border-color: transparent #f9aa18 transparent transparent;
 430 }
 431 .smallipop-theme-orange.smallipop-right:after {
 432   border-color: transparent #e17500 transparent transparent;
 433 }
 434 .smallipop-theme-orange .smallipop-content {
 435   border-top: 1px solid #fffabc;
 436   -webkit-border-radius: 10px;
 437   -moz-border-radius: 10px;
 438   -ms-border-radius: 10px;
 439   -o-border-radius: 10px;
 440   border-radius: 10px;
 441 }
 442 .smallipop-theme-orange .smallipop-tour-progress {
 443   color: #444;
 444 }
 445 .smallipop-theme-orange .smallipop-tour-prev,
 446 .smallipop-theme-orange .smallipop-tour-next,
 447 .smallipop-theme-orange .smallipop-tour-close {
 448   color: #444;
 449   background: #f19f06;
 450 }
 451 .smallipop-theme-orange .smallipop-tour-prev:hover,
 452 .smallipop-theme-orange .smallipop-tour-next:hover,
 453 .smallipop-theme-orange .smallipop-tour-close:hover {
 454   color: #333;
 455   background: #f9a509;
 456 }
 457
 458 /* white theme */
 459 .smallipop-theme-white {
 460   background-color: #fcfcfc;
 461   border-color: #ccc;
 462   text-shadow: 0 1px 1px #eee;
 463   color: #444;
 464   width: 200px;
 465   max-width: 200px;
 466   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 467   -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 468   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 469   -webkit-border-radius: 6px;
 470   -moz-border-radius: 6px;
 471   -ms-border-radius: 6px;
 472   -o-border-radius: 6px;
 473   border-radius: 6px;
 474 }
 475 .smallipop-theme-white:before {
 476   border-color: #fcfcfc transparent transparent transparent;
 477 }
 478 .smallipop-theme-white:after {
 479   border-color: #cccccc transparent transparent transparent;
 480 }
 481 .smallipop-theme-white.smallipop-bottom:before {
 482   border-color: transparent transparent #fcfcfc transparent;
 483 }
 484 .smallipop-theme-white.smallipop-bottom:after {
 485   border-color: transparent transparent #cccccc transparent;
 486 }
 487 .smallipop-theme-white.smallipop-left:before {
 488   border-color: transparent transparent transparent #fcfcfc;
 489 }
 490 .smallipop-theme-white.smallipop-left:after {
 491   border-color: transparent transparent transparent #cccccc;
 492 }
 493 .smallipop-theme-white.smallipop-right:before {
 494   border-color: transparent #fcfcfc transparent transparent;
 495 }
 496 .smallipop-theme-white.smallipop-right:after {
 497   border-color: transparent #cccccc transparent transparent;
 498 }
 499 .smallipop-theme-white .smallipop-content {
 500   text-align: center;
 501   -webkit-border-radius: 6px;
 502   -moz-border-radius: 6px;
 503   -ms-border-radius: 6px;
 504   -o-border-radius: 6px;
 505   border-radius: 6px;
 506 }
 507 .smallipop-theme-white .smallipop-tour-progress {
 508   color: #777;
 509 }
 510 .smallipop-theme-white .smallipop-tour-close-icon {
 511   background: #fafafa;
 512   color: #555;
 513   text-shadow: 0 1px 1px #fff;
 514 }
 515 .smallipop-theme-white .smallipop-tour-close-icon:hover {
 516   background: #f5f5f5;
 517   color: #222;
 518 }
 519 .smallipop-theme-white .smallipop-tour-prev,
 520 .smallipop-theme-white .smallipop-tour-next,
 521 .smallipop-theme-white .smallipop-tour-close {
 522   color: #666;
 523   background: #f0f0f0;
 524 }
 525 .smallipop-theme-white .smallipop-tour-prev:hover,
 526 .smallipop-theme-white .smallipop-tour-next:hover,
 527 .smallipop-theme-white .smallipop-tour-close:hover {
 528   color: #333;
 529   background: #f4f4f4;
 530 }
 531
 532 /* white theme extended, requires rgba support */
 533 .smallipop-theme-white-transparent {
 534   background-color: rgba(255, 255, 255, 0.8);
 535 }
 536 .smallipop-theme-white-transparent:before {
 537   bottom: -21px;
 538   border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
 539 }
 540 .smallipop-theme-white-transparent:after {
 541   border-color: transparent;
 542 }
 543 .smallipop-theme-white-transparent.sipAlignBottom:before {
 544   top: -21px;
 545   border-color: transparent transparent rgba(255, 255, 255, 0.8) transparent;
 546 }
 547 .smallipop-theme-white-transparent.sipPositionedLeft:before {
 548   border-color: transparent transparent transparent rgba(255, 255, 255, 0.8);
 549 }
 550 .smallipop-theme-white-transparent.sipPositionedRight:before {
 551   border-color: transparent rgba(255, 255, 255, 0.8) transparent transparent;
 552 }
 553
 554 /* fat shadow extension theme */
 555 .smallipop-instance.smallipop-theme-fat-shadow {
 556   -webkit-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
 557   -moz-box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
 558   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.8);
 559 }
 560
 561 /* wide content extension theme */
 562 .smallipop-instance.smallipop-theme-wide {
 563   max-width: 600px;
 564 }