git.roojs.org Git - roojs1/blob - examples/bootstrap/elements.css

   1 /* THIS ARE ALL NEW EXTRA ELEMENTS BESIDE TWITTER BOOTSTRAP */
   2 /* glow btn group */
   3 .btn-group.large button.glow {
   4   padding: 6px 15px;
   5   font-size: 13px;
   6 }
   7 .btn-group.large span {
   8   font-size: 13px;
   9 }
  10 .btn-group .dropdown-menu > li > a {
  11   font-size: 12px;
  12 }
  13 .btn-group button.glow {
  14   float: left;
  15   font-size: 11px;
  16   font-family: "Open sans", Helvetica, Arial;
  17   color: #313d4c;
  18   font-weight: 700;
  19   padding: 5px 10px;
  20   line-height: 14px;
  21   background: #fefefe;
  22   /* Old browsers */
  23   background: -moz-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  24   /* FF3.6+ */
  25   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #f7f7f7));
  26   /* Chrome,Safari4+ */
  27   background: -webkit-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  28   /* Chrome10+,Safari5.1+ */
  29   background: -o-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  30   /* Opera 11.10+ */
  31   background: -ms-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  32   /* IE10+ */
  33   background: linear-gradient(to bottom, #fefefe 0%, #f7f7f7 100%);
  34   /* W3C */
  35   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 );
  36   /* IE6-9 */
  37   border: 1px solid #d0dde9;
  38   transition: color .1s linear;
  39   -moz-transition: color .1s linear;
  40   /* Firefox 4 */
  41   -webkit-transition: color .1s linear;
  42   /* Safari and Chrome */
  43   -o-transition: color .1s linear;
  44   /* Opera */
  45 }
  46 .btn-group button.glow.large {
  47   font-size: 12px;
  48 }
  49 .btn-group button.glow:active, .btn-group button.glow.active {
  50   -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
  51   -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
  52   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset;
  53   color: #a8b5c7;
  54 }
  55 .btn-group button.glow:hover {
  56   color: #a8b5c7;
  57 }
  58 .btn-group button.glow.left {
  59   border-radius: 4px 0 0 4px;
  60   border-right: 0;
  61 }
  62 .btn-group button.glow.middle {
  63   border-right: 0;
  64 }
  65 .btn-group button.glow.right {
  66   border-radius: 0 4px 4px 0;
  67 }
  68 .btn-group > .btn.glow {
  69   font-size: 12px;
  70   float: left;
  71   font-weight: 500;
  72   padding: 6px 14px;
  73   color: #313d4c;
  74   line-height: 14px;
  75   border: 1px solid #d0dde9;
  76 }
  77 .btn-group > .btn.glow:hover {
  78   background: #fefefe;
  79   background: -moz-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  80   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #f7f7f7));
  81   background: -webkit-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  82   background: -o-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  83   background: -ms-linear-gradient(top, #fefefe 0%, #f7f7f7 100%);
  84   background: linear-gradient(to bottom, #fefefe 0%, #f7f7f7 100%);
  85   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#f7f7f7',GradientType=0 );
  86 }
  87 .btn-group > .btn.glow.dropdown-toggle {
  88   padding: 6px 9px;
  89 }
  90
  91 /* FLAT BUTTONS */
  92 .btn-flat {
  93   display: inline-block;
  94   margin: 0;
  95   line-height: 15px;
  96   vertical-align: middle;
  97   font-size: 12px;
  98   text-shadow: none;
  99   box-shadow: none;
 100   background-image: none;
 101   border: 0 none;
 102   color: #fff;
 103   font-weight: 500;
 104   border-radius: 4px;
 105   background: #4387bf;
 106   border: 1px solid #3883c0;
 107   cursor: pointer;
 108   padding: 7px 14px;
 109   -webkit-transition: all .1s linear;
 110   -moz-transition: all .1s linear;
 111   transition: all .1s linear;
 112 }
 113 .btn-flat [class^="glyphicon glyphicon-"],
 114 .btn-flat [class*=" glyphicon glyphicon-"] {
 115   margin-right: 3px;
 116 }
 117 .btn-flat:active {
 118   -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset;
 119   -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset;
 120   box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3) inset;
 121   background: #30628b;
 122   opacity: 1;
 123 }
 124 .btn-flat:hover {
 125   text-decoration: none;
 126   opacity: 0.87;
 127   color: #fff;
 128 }
 129 .btn-flat.large {
 130   font-size: 13px;
 131   padding: 10px 16px;
 132 }
 133 .btn-flat.small {
 134   font-size: 11px;
 135   padding: 5px 9px;
 136 }
 137 .btn-flat.inverse {
 138   background: #343e4b;
 139   border: 1px solid #000;
 140 }
 141 .btn-flat.inverse:active {
 142   background: #000;
 143 }
 144 .btn-flat.gray {
 145   background: #7e91aa;
 146   border: 1px solid #888e97;
 147 }
 148 .btn-flat.gray:active {
 149   background: #5d6b7e;
 150   color: #f3f3f3;
 151 }
 152 .btn-flat.primary {
 153   background: #3b9ff3;
 154   border: 1px solid #3596e7;
 155 }
 156 .btn-flat.primary:active {
 157   background: #2b76b6;
 158   color: #edf6fd;
 159 }
 160 .btn-flat.success {
 161   background: #96bf48;
 162   border: 1px solid #7ea13d;
 163   text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
 164   font-weight: 600;
 165 }
 166 .btn-flat.white {
 167   color: #626263;
 168   background: #fff;
 169   border: 1px solid #d0dde9;
 170 }
 171 .btn-flat.white:hover {
 172   border-color: #bbb;
 173   color: #000;
 174 }
 175 .btn-flat.info {
 176   background: #5ba0a3;
 177   color: #fff;
 178   border-color: #5ba0a3;
 179 }
 180 .btn-flat.info:active {
 181   background: #30696c;
 182 }
 183 .btn-flat.danger {
 184   background: #b85e80;
 185   border-color: #b85e80;
 186   color: #fff;
 187 }
 188 .btn-flat.danger:active {
 189   background: #6e354a;
 190 }
 191 .btn-flat.icon {
 192   padding: 7px 10px;
 193   color: #1a2129;
 194   background: #e6ebf3;
 195   border: 1px solid #d8dde4;
 196   box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4) inset, 0px 1px 0px 0px #cccccc;
 197 }
 198 .btn-flat.icon:active {
 199   background: #e0e6ef;
 200   -webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
 201   -moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
 202   box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.3) inset;
 203 }
 204 .btn-flat.icon span {
 205   font-size: 14px;
 206 }
 207
 208 /* GLOW BUTTONS */
 209 .btn-glow {
 210   font-size: 13px;
 211   border-radius: 4px;
 212   color: #333;
 213   padding: 5px 10px;
 214   text-align: center;
 215   box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 1px 0px 0px #cccccc;
 216   display: inline-block;
 217   border: 1px solid #e5e5e5;
 218   vertical-align: middle;
 219   cursor: pointer;
 220   background: #ffffff;
 221   background: -moz-linear-gradient(top, white 0%, #eef0f1 100%);
 222   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #eef0f1));
 223   background: -webkit-linear-gradient(top, white 0%, #eef0f1 100%);
 224   background: -o-linear-gradient(top, white 0%, #eef0f1 100%);
 225   background: -ms-linear-gradient(top, white 0%, #eef0f1 100%);
 226   background: linear-gradient(to bottom, white 0%, #eef0f1 100%);
 227   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eef0f1',GradientType=0 );
 228 }
 229 .btn-glow:hover {
 230   text-decoration: none;
 231   background: #ffffff;
 232   background: -moz-linear-gradient(top, white 0%, #e6e6e6 100%);
 233   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #e6e6e6));
 234   background: -webkit-linear-gradient(top, white 0%, #e6e6e6 100%);
 235   background: -o-linear-gradient(top, white 0%, #e6e6e6 100%);
 236   background: -ms-linear-gradient(top, white 0%, #e6e6e6 100%);
 237   background: linear-gradient(to bottom, white 0%, #e6e6e6 100%);
 238   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#E6E6E6',GradientType=0 );
 239 }
 240 .btn-glow.large {
 241   font-size: 14px;
 242   padding: 9px 16px;
 243 }
 244 .btn-glow.small {
 245   font-size: 11px;
 246   padding: 4px 7px;
 247 }
 248 .btn-glow:active, .btn-glow.active {
 249   -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset !important;
 250   -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset !important;
 251   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset !important;
 252 }
 253 .btn-glow [class^="glyphicon glyphicon-"],
 254 .btn-glow [class*=" glyphicon glyphicon-"] {
 255   margin-right: 3px;
 256 }
 257 .btn-glow span.shuffle {
 258   top: 2px;
 259 }
 260 .btn-glow.inverse {
 261   border-color: #000;
 262   color: #fff;
 263   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
 264   background: #353f4c;
 265   /* Old browsers */
 266   background: -moz-linear-gradient(top, #353f4c 0%, #222a33 100%);
 267   /* FF3.6+ */
 268   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353f4c), color-stop(100%, #222a33));
 269   /* Chrome,Safari4+ */
 270   background: -webkit-linear-gradient(top, #353f4c 0%, #222a33 100%);
 271   /* Chrome10+,Safari5.1+ */
 272   background: -o-linear-gradient(top, #353f4c 0%, #222a33 100%);
 273   /* Opera 11.10+ */
 274   background: -ms-linear-gradient(top, #353f4c 0%, #222a33 100%);
 275   /* IE10+ */
 276   background: linear-gradient(to bottom, #353f4c 0%, #222a33 100%);
 277   /* W3C */
 278   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353f4c', endColorstr='#222a33',GradientType=0 );
 279   /* IE6-9 */
 280 }
 281 .btn-glow.inverse:hover {
 282   background: -webkit-linear-gradient(top, #434c58 0%, #424a53 100%);
 283 }
 284 .btn-glow.primary {
 285   border-color: #2480c2;
 286   color: #fff;
 287   text-shadow: rgba(0, 0, 0, 0.35) 0 1px 0;
 288   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
 289   background: #54b3ff;
 290   background: -moz-linear-gradient(top, #54b3ff 0%, #0078d9 100%);
 291   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #54b3ff), color-stop(100%, #0078d9));
 292   background: -webkit-linear-gradient(top, #54b3ff 0%, #0078d9 100%);
 293   background: linear-gradient(#54b3ff, #0078d9);
 294   background: -o-linear-gradient(top, #54b3ff 0%, #0078d9 100%);
 295   background: -ms-linear-gradient(top, #54b3ff 0%, #0078d9 100%);
 296   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#54b3ff', endColorstr='#0078d9',GradientType=0 );
 297 }
 298 .btn-glow.primary:hover {
 299   background: #389beb;
 300   background: -moz-linear-gradient(top, #389beb 0%, #0078d9 100%);
 301   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #389beb), color-stop(100%, #0078d9));
 302   background: -webkit-linear-gradient(top, #389beb 0%, #0078d9 100%);
 303   background: linear-gradient(#389beb, #0078d9);
 304   background: -o-linear-gradient(top, #389beb 0%, #0078d9 100%);
 305   background: -ms-linear-gradient(top, #389beb 0%, #0078d9 100%);
 306   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(56, 155, 235)', endColorstr='#0078d9',GradientType=0 );
 307 }
 308 .btn-glow.primary:active {
 309   background: #389beb;
 310   background: -moz-linear-gradient(top, #389beb 0%, #0078d9 100%);
 311   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #389beb), color-stop(100%, #0078d9));
 312   background: -webkit-linear-gradient(top, #389beb 0%, #0078d9 100%);
 313   background: linear-gradient(#389beb, #0078d9);
 314   background: -o-linear-gradient(top, #389beb 0%, #0078d9 100%);
 315   background: -ms-linear-gradient(top, #389beb 0%, #0078d9 100%);
 316   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(56, 155, 235)', endColorstr='#0078d9',GradientType=0 );
 317 }
 318 .btn-glow.primary[disabled] {
 319   border: 0px;
 320   box-shadow: none !important;
 321   background: #81b7e2 !important;
 322   cursor: default;
 323 }
 324 .btn-glow.success {
 325   background: #96bf48;
 326   background: linear-gradient(to bottom, #a9d651 0%, #96bf48 100%);
 327   box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.5);
 328   border: 1px solid #99bd56;
 329   text-shadow: rgba(0, 0, 0, 0.24706) 0px 1px 0px;
 330   color: #fff;
 331 }
 332
 333 /* Switch slider button */
 334 .slider-frame {
 335   position: relative;
 336   display: inline-block;
 337   margin: 0 auto;
 338   width: 67px;
 339   background-color: #d5dde4;
 340   height: 23px;
 341   -moz-border-radius: 15px;
 342   border-radius: 15px;
 343   box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
 344 }
 345 .slider-frame.info {
 346   background-color: rgba(92, 160, 163, 0.9);
 347 }
 348 .slider-frame.success {
 349   background-color: rgba(151, 192, 73, 0.9);
 350 }
 351 .slider-frame.primary {
 352   background-color: rgba(91, 158, 214, 0.9);
 353 }
 354 .slider-frame.danger {
 355   background-color: #d94774;
 356 }
 357
 358 .slider-button {
 359   display: block;
 360   width: 37px;
 361   height: 23px;
 362   line-height: 23px;
 363   background: #fff;
 364   border: 1px solid #d0dde9;
 365   -moz-border-radius: 9px;
 366   border-radius: 9px;
 367   -webkit-transition: all 0.25s ease-in-out;
 368   -moz-transition: all 0.25s ease-in-out;
 369   transition: all 0.25s ease-in-out;
 370   color: #000;
 371   font-family: sans-serif;
 372   font-size: 11px;
 373   font-weight: bold;
 374   text-align: center;
 375   cursor: pointer;
 376 }
 377 .slider-button.on {
 378   margin-left: 29px;
 379 }
 380
 381 /* Custom Select */
 382 .ui-select {
 383   width: 137px;
 384   margin-left: 0px !important;
 385   vertical-align: middle;
 386   min-width: 100px;
 387   height: 25px;
 388   min-height: 25px !important;
 389   position: relative;
 390   overflow: hidden;
 391   background: #ffffff;
 392   background: url("../../img/select-bg.png"), -moz-linear-gradient(top, white 0%, #f0f1f2 100%);
 393   background: url("../../img/select-bg.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, #f0f1f2));
 394   background: url("../../img/select-bg.png"), -webkit-linear-gradient(top, white 0%, #f0f1f2 100%);
 395   background: url("../../img/select-bg.png"), -o-linear-gradient(top, white 0%, #f0f1f2 100%);
 396   background: url("../../img/select-bg.png"), -ms-linear-gradient(top, white 0%, #f0f1f2 100%);
 397   background: url("../../img/select-bg.png"), linear-gradient(to bottom, white 0%, #f0f1f2 100%);
 398   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f0f1f2',GradientType=0 );
 399   display: inline-block;
 400   border: 1px solid #cfdde8;
 401   border-radius: 5px;
 402   background-position: 94%;
 403   background-repeat: no-repeat;
 404 }
 405 .ui-select select {
 406   line-height: inherit;
 407   width: 135%;
 408   font-family: "Open Sans", Arial;
 409   font-size: 12px;
 410   border: none;
 411   padding: 1px 30px 0px 7px;
 412   height: 21px;
 413   -webkit-appearance: none;
 414   color: #737f8d;
 415   text-shadow: 1px 1px 1px #fff;
 416   background: transparent;
 417 }
 418
 419 /* jQuery UI Slider overrides */
 420 .ui-slider {
 421   border: 1px solid #cfdde8;
 422   height: 7px;
 423   background: #edeeef;
 424   box-shadow: inset 0px -3px 7px 0px #fff;
 425 }
 426
 427 .ui-state-default,
 428 .ui-widget-content .ui-state-default,
 429 .ui-widget-header .ui-state-default {
 430   background: url("../../img/jquery-ui/slider-handler.png") no-repeat;
 431   border: none;
 432   width: 16px;
 433   height: 17px;
 434   top: -6px;
 435   outline: 0;
 436 }
 437
 438 .ui-slider.vertical-handler .ui-state-default {
 439   background: url("../../img/jquery-ui/slider-handler2.png") no-repeat;
 440   width: 11px;
 441   height: 21px;
 442   top: -8px;
 443 }
 444
 445 .ui-slider .ui-slider-range {
 446   border: 1px solid #30a1ec;
 447   background: #4faeef;
 448   box-shadow: inset 0px 0px 3px 0px white;
 449 }
 450
 451 .ui-slider.success .ui-slider-range {
 452   background: #96bf48;
 453   border: 1px solid #79af5e;
 454 }
 455
 456 .ui-slider.info .ui-slider-range {
 457   background: #5ba0a3;
 458   border: 1px solid #5ba0a3;
 459 }
 460
 461 /* Custom Dialog */
 462 .pop-dialog {
 463   z-index: 10000;
 464   display: inline-block;
 465 }
 466 .pop-dialog.is-visible {
 467   display: block;
 468   -webkit-animation: reveal .2s ease-out;
 469   -moz-animation: reveal .2s ease-out;
 470   animation: reveal .2s ease-out;
 471 }
 472 .pop-dialog .pointer {
 473   position: relative;
 474   top: -22px;
 475   /* pop-dialog with pointer to the right */
 476 }
 477 .pop-dialog .pointer .arrow,
 478 .pop-dialog .pointer .arrow_border {
 479   border-color: transparent transparent #fff;
 480   border-style: solid;
 481   border-width: 8px;
 482   cursor: pointer;
 483   position: absolute;
 484   top: 7px;
 485   z-index: 1002;
 486   left: 25px;
 487 }
 488 .pop-dialog .pointer .arrow_border {
 489   border-color: transparent transparent #a1a1a1;
 490   border-width: 9px;
 491   top: 4px;
 492   z-index: 1001;
 493   left: 24px;
 494 }
 495 .pop-dialog .pointer.right .arrow {
 496   left: auto;
 497   right: 25px;
 498 }
 499 .pop-dialog .pointer.right .arrow_border {
 500   left: auto;
 501   right: 24px;
 502 }
 503 .pop-dialog .body {
 504   width: auto;
 505   background-color: #fff;
 506   border: 1px solid #a1a1a1;
 507   border-radius: 5px;
 508   box-shadow: 0px 0px 9px 0px #d6d6d6;
 509   padding: 10px;
 510 }
 511
 512 /* Dropdown with dialog */
 513 .ui-dropdown {
 514   position: relative;
 515   display: inline-block;
 516 }
 517 .ui-dropdown .head {
 518   color: #272727;
 519   font-size: 13px;
 520   position: relative;
 521   border: 1px solid #dedede;
 522   border-radius: 4px;
 523   padding: 4px 46px 4px 12px;
 524   text-shadow: 1px 1px 1px #fff;
 525   box-shadow: 1px 1px 4px 0px #efefef;
 526   cursor: pointer;
 527   background: #ffffff;
 528   /* Old browsers */
 529   background: -moz-linear-gradient(top, white 0%, #f8f8f8 47%, #f4f4f4 100%);
 530   /* FF3.6+ */
 531   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(47%, #f8f8f8), color-stop(100%, #f4f4f4));
 532   /* Chrome,Safari4+ */
 533   background: -webkit-linear-gradient(top, white 0%, #f8f8f8 47%, #f4f4f4 100%);
 534   /* Chrome10+,Safari5.1+ */
 535   background: -o-linear-gradient(top, white 0%, #f8f8f8 47%, #f4f4f4 100%);
 536   /* Opera 11.10+ */
 537   background: -ms-linear-gradient(top, white 0%, #f8f8f8 47%, #f4f4f4 100%);
 538   /* IE10+ */
 539   background: linear-gradient(to bottom, white 0%, #f8f8f8 47%, #f4f4f4 100%);
 540   /* W3C */
 541   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f4f4f4',GradientType=0 );
 542   /* IE6-9 */
 543 }
 544 .ui-dropdown .head:hover, .ui-dropdown .head.active {
 545   background: #fefefe;
 546   /* Old browsers */
 547   background: -moz-linear-gradient(top, white 0%, #fdfdfd 47%, #f1f1f1 100%);
 548   /* FF3.6+ */
 549   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(47%, #fdfdfd), color-stop(100%, #f1f1f1));
 550   /* Chrome,Safari4+ */
 551   background: -webkit-linear-gradient(top, white 0%, #fdfdfd 47%, #f1f1f1 100%);
 552   /* Chrome10+,Safari5.1+ */
 553   background: -o-linear-gradient(top, white 0%, #fdfdfd 47%, #f1f1f1 100%);
 554   /* Opera 11.10+ */
 555   background: -ms-linear-gradient(top, white 0%, #fdfdfd 47%, #f1f1f1 100%);
 556   /* IE10+ */
 557   background: linear-gradient(to bottom, white 0%, #fdfdfd 47%, #f1f1f1 100%);
 558   /* W3C */
 559   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#F1F1F1',GradientType=0 );
 560   /* IE6-9 */
 561 }
 562 .ui-dropdown .head:active, .ui-dropdown .head.active {
 563   box-shadow: none;
 564   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 565   -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 566   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
 567 }
 568 .ui-dropdown .head span.arrow-down {
 569   position: absolute;
 570   top: 12px;
 571   right: 16px;
 572 }
 573 .ui-dropdown .dialog {
 574   display: none;
 575   position: absolute;
 576   right: 0px;
 577   top: 42px;
 578   z-index: 100;
 579 }
 580 .ui-dropdown .dialog.is-visible {
 581   display: block;
 582   -webkit-animation: reveal .2s ease-out;
 583   -moz-animation: reveal .2s ease-out;
 584   animation: reveal .2s ease-out;
 585 }
 586 .ui-dropdown .dialog .pointer {
 587   position: relative;
 588   top: -22px;
 589 }
 590 .ui-dropdown .dialog .pointer .arrow,
 591 .ui-dropdown .dialog .pointer .arrow_border {
 592   border-color: transparent transparent #fff;
 593   border-style: solid;
 594   border-width: 8px;
 595   cursor: pointer;
 596   position: absolute;
 597   top: 7px;
 598   z-index: 1002;
 599   right: 25px;
 600 }
 601 .ui-dropdown .dialog .pointer .arrow_border {
 602   border-color: transparent transparent #a1a1a1;
 603   border-width: 9px;
 604   top: 4px;
 605   z-index: 1001;
 606   right: 24px;
 607 }
 608 .ui-dropdown .dialog .body {
 609   width: 440px;
 610   background-color: #fff;
 611   border: 1px solid #a1a1a1;
 612   border-radius: 5px;
 613   box-shadow: 0px 0px 9px 0px #d6d6d6;
 614   padding: 8px 10px 8px 10px;
 615 }
 616 .ui-dropdown .dialog .body p.title {
 617   font-weight: 600;
 618   margin-bottom: 10px;
 619   font-size: 13px;
 620 }
 621 .ui-dropdown .dialog .body form select {
 622   display: inline-block;
 623   width: 120px;
 624   vertical-align: top;
 625   height: 27px;
 626   margin-right: 2px;
 627 }
 628 .ui-dropdown .dialog .body form input[type="text"] {
 629   height: 17px;
 630   width: 90px;
 631   margin-right: 2px;
 632 }
 633 .ui-dropdown .dialog .body form a {
 634   vertical-align: top;
 635 }
 636
 637 @-webkit-keyframes reveal {
 638   0% {
 639     margin-left: -999px;
 640     opacity: 0;
 641   }
 642
 643   1% {
 644     margin-left: 0;
 645     opacity: 0;
 646     -webkit-transform: scale(0.98) translateY(-15px);
 647   }
 648
 649   80% {
 650     -webkit-transform: scale(1);
 651   }
 652
 653   100% {
 654     -webkit-transform: translateY(0);
 655   }
 656 }
 657
 658 @-moz-keyframes reveal {
 659   0% {
 660     margin-left: -999px;
 661     opacity: 0;
 662   }
 663
 664   1% {
 665     margin-left: 0;
 666     opacity: 0;
 667     -moz-transform: scale(0.98) translateY(-15px);
 668   }
 669
 670   80% {
 671     -moz-transform: scale(1);
 672   }
 673
 674   100% {
 675     -moz-transform: translateY(0);
 676   }
 677 }