1/* 2Version: 3.4.6 Timestamp: Sat Mar 22 22:30:15 EDT 2014 3*/ 4.select2-container { 5 margin: 0; 6 position: relative; 7 display: inline-block; 8 /* inline-block for ie7 */ 9 zoom: 1; 10 *display: inline; 11 vertical-align: middle; 12} 13 14.select2-container, 15.select2-drop, 16.select2-search, 17.select2-search input { 18 /* 19 Force border-box so that % widths fit the parent 20 container without overlap because of margin/padding. 21 More Info : http://www.quirksmode.org/css/box.html 22 */ 23 -webkit-box-sizing: border-box; /* webkit */ 24 -moz-box-sizing: border-box; /* firefox */ 25 box-sizing: border-box; /* css3 */ 26} 27 28.select2-container .select2-choice { 29 display: block; 30 height: 26px; 31 padding: 0 0 0 8px; 32 overflow: hidden; 33 position: relative; 34 35 border: 1px solid #aaa; 36 white-space: nowrap; 37 line-height: 26px; 38 color: #444; 39 text-decoration: none; 40 41 border-radius: 4px; 42 43 background-clip: padding-box; 44 45 -webkit-touch-callout: none; 46 -webkit-user-select: none; 47 -moz-user-select: none; 48 -ms-user-select: none; 49 user-select: none; 50 51 background-color: #fff; 52 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff)); 53 background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%); 54 background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%); 55 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); 56 background-image: linear-gradient(to top, #eee 0%, #fff 50%); 57} 58 59.select2-container.select2-drop-above .select2-choice { 60 border-bottom-color: #aaa; 61 62 border-radius: 0 0 4px 4px; 63 64 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff)); 65 background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%); 66 background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%); 67 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); 68 background-image: linear-gradient(to bottom, #eee 0%, #fff 90%); 69} 70 71.select2-container.select2-allowclear .select2-choice .select2-chosen { 72 margin-right: 42px; 73} 74 75.select2-container .select2-choice > .select2-chosen { 76 margin-right: 26px; 77 display: block; 78 overflow: hidden; 79 80 white-space: nowrap; 81 82 text-overflow: ellipsis; 83 float: none; 84 width: auto; 85} 86 87.select2-container .select2-choice abbr { 88 display: none; 89 width: 12px; 90 height: 12px; 91 position: absolute; 92 right: 24px; 93 top: 8px; 94 95 font-size: 1px; 96 text-decoration: none; 97 98 border: 0; 99 background: url('select2.png') right top no-repeat; 100 cursor: pointer; 101 outline: 0; 102} 103 104.select2-container.select2-allowclear .select2-choice abbr { 105 display: inline-block; 106} 107 108.select2-container .select2-choice abbr:hover { 109 background-position: right -11px; 110 cursor: pointer; 111} 112 113.select2-drop-mask { 114 border: 0; 115 margin: 0; 116 padding: 0; 117 position: fixed; 118 left: 0; 119 top: 0; 120 min-height: 100%; 121 min-width: 100%; 122 height: auto; 123 width: auto; 124 opacity: 0; 125 z-index: 9998; 126 /* styles required for IE to work */ 127 background-color: #fff; 128 filter: alpha(opacity=0); 129} 130 131.select2-drop { 132 width: 100%; 133 margin-top: -1px; 134 position: absolute; 135 z-index: 9999; 136 top: 100%; 137 138 background: #fff; 139 color: #000; 140 border: 1px solid #aaa; 141 border-top: 0; 142 143 border-radius: 0 0 4px 4px; 144 145 -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); 146 box-shadow: 0 4px 5px rgba(0, 0, 0, .15); 147} 148 149.select2-drop.select2-drop-above { 150 margin-top: 1px; 151 border-top: 1px solid #aaa; 152 border-bottom: 0; 153 154 border-radius: 4px 4px 0 0; 155 156 -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); 157 box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); 158} 159 160.select2-drop-active { 161 border: 1px solid #5897fb; 162 border-top: none; 163} 164 165.select2-drop.select2-drop-above.select2-drop-active { 166 border-top: 1px solid #5897fb; 167} 168 169.select2-drop-auto-width { 170 border-top: 1px solid #aaa; 171 width: auto; 172} 173 174.select2-drop-auto-width .select2-search { 175 padding-top: 4px; 176} 177 178.select2-container .select2-choice .select2-arrow { 179 display: inline-block; 180 width: 18px; 181 height: 100%; 182 position: absolute; 183 right: 0; 184 top: 0; 185 186 border-left: 1px solid #aaa; 187 border-radius: 0 4px 4px 0; 188 189 background-clip: padding-box; 190 191 background: #ccc; 192 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); 193 background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); 194 background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); 195 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); 196 background-image: linear-gradient(to top, #ccc 0%, #eee 60%); 197} 198 199.select2-container .select2-choice .select2-arrow b { 200 display: block; 201 width: 100%; 202 height: 100%; 203 background: url('select2.png') no-repeat 0 1px; 204} 205 206.select2-search { 207 display: inline-block; 208 width: 100%; 209 min-height: 26px; 210 margin: 0; 211 padding-left: 4px; 212 padding-right: 4px; 213 214 position: relative; 215 z-index: 10000; 216 217 white-space: nowrap; 218} 219 220.select2-search input { 221 width: 100%; 222 height: auto !important; 223 min-height: 26px; 224 padding: 4px 20px 4px 5px; 225 margin: 0; 226 227 outline: 0; 228 font-family: sans-serif; 229 font-size: 1em; 230 231 border: 1px solid #aaa; 232 border-radius: 0; 233 234 -webkit-box-shadow: none; 235 box-shadow: none; 236 237 background: #fff url('select2.png') no-repeat 100% -22px; 238 background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); 239 background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); 240 background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); 241 background: url('select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; 242} 243 244.select2-drop.select2-drop-above .select2-search input { 245 margin-top: 4px; 246} 247 248.select2-search input.select2-active { 249 background: #fff url('select2-spinner.gif') no-repeat 100%; 250 background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)); 251 background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%); 252 background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%); 253 background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; 254} 255 256.select2-container-active .select2-choice, 257.select2-container-active .select2-choices { 258 border: 1px solid #5897fb; 259 outline: none; 260 261 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); 262 box-shadow: 0 0 5px rgba(0, 0, 0, .3); 263} 264 265.select2-dropdown-open .select2-choice { 266 border-bottom-color: transparent; 267 -webkit-box-shadow: 0 1px 0 #fff inset; 268 box-shadow: 0 1px 0 #fff inset; 269 270 border-bottom-left-radius: 0; 271 border-bottom-right-radius: 0; 272 273 background-color: #eee; 274 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee)); 275 background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%); 276 background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%); 277 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); 278 background-image: linear-gradient(to top, #fff 0%, #eee 50%); 279} 280 281.select2-dropdown-open.select2-drop-above .select2-choice, 282.select2-dropdown-open.select2-drop-above .select2-choices { 283 border: 1px solid #5897fb; 284 border-top-color: transparent; 285 286 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee)); 287 background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%); 288 background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%); 289 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); 290 background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); 291} 292 293.select2-dropdown-open .select2-choice .select2-arrow { 294 background: transparent; 295 border-left: none; 296 filter: none; 297} 298.select2-dropdown-open .select2-choice .select2-arrow b { 299 background-position: -18px 1px; 300} 301 302.select2-hidden-accessible { 303 border: 0; 304 clip: rect(0 0 0 0); 305 height: 1px; 306 margin: -1px; 307 overflow: hidden; 308 padding: 0; 309 position: absolute; 310 width: 1px; 311} 312 313/* results */ 314.select2-results { 315 max-height: 200px; 316 padding: 0 0 0 4px; 317 margin: 4px 4px 4px 0; 318 position: relative; 319 overflow-x: hidden; 320 overflow-y: auto; 321 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 322} 323 324.select2-results ul.select2-result-sub { 325 margin: 0; 326 padding-left: 0; 327} 328 329.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } 330.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } 331.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } 332.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } 333.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } 334.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } 335.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } 336 337.select2-results li { 338 list-style: none; 339 display: list-item; 340 background-image: none; 341} 342 343.select2-results li.select2-result-with-children > .select2-result-label { 344 font-weight: bold; 345} 346 347.select2-results .select2-result-label { 348 padding: 3px 7px 4px; 349 margin: 0; 350 cursor: pointer; 351 352 min-height: 1em; 353 354 -webkit-touch-callout: none; 355 -webkit-user-select: none; 356 -moz-user-select: none; 357 -ms-user-select: none; 358 user-select: none; 359} 360 361.select2-results .select2-highlighted { 362 background: #3875d7; 363 color: #fff; 364} 365 366.select2-results li em { 367 background: #feffde; 368 font-style: normal; 369} 370 371.select2-results .select2-highlighted em { 372 background: transparent; 373} 374 375.select2-results .select2-highlighted ul { 376 background: #fff; 377 color: #000; 378} 379 380 381.select2-results .select2-no-results, 382.select2-results .select2-searching, 383.select2-results .select2-selection-limit { 384 background: #f4f4f4; 385 display: list-item; 386 padding-left: 5px; 387} 388 389/* 390disabled look for disabled choices in the results dropdown 391*/ 392.select2-results .select2-disabled.select2-highlighted { 393 color: #666; 394 background: #f4f4f4; 395 display: list-item; 396 cursor: default; 397} 398.select2-results .select2-disabled { 399 background: #f4f4f4; 400 display: list-item; 401 cursor: default; 402} 403 404.select2-results .select2-selected { 405 display: none; 406} 407 408.select2-more-results.select2-active { 409 background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; 410} 411 412.select2-more-results { 413 background: #f4f4f4; 414 display: list-item; 415} 416 417/* disabled styles */ 418 419.select2-container.select2-container-disabled .select2-choice { 420 background-color: #f4f4f4; 421 background-image: none; 422 border: 1px solid #ddd; 423 cursor: default; 424} 425 426.select2-container.select2-container-disabled .select2-choice .select2-arrow { 427 background-color: #f4f4f4; 428 background-image: none; 429 border-left: 0; 430} 431 432.select2-container.select2-container-disabled .select2-choice abbr { 433 display: none; 434} 435 436 437/* multiselect */ 438 439.select2-container-multi .select2-choices { 440 height: auto !important; 441 height: 1%; 442 margin: 0; 443 padding: 0; 444 position: relative; 445 446 border: 1px solid #aaa; 447 cursor: text; 448 overflow: hidden; 449 450 background-color: #fff; 451 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff)); 452 background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%); 453 background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%); 454 background-image: linear-gradient(to bottom, #eee 1%, #fff 15%); 455} 456 457.select2-locked { 458 padding: 3px 5px 3px 5px !important; 459} 460 461.select2-container-multi .select2-choices { 462 min-height: 26px; 463} 464 465.select2-container-multi.select2-container-active .select2-choices { 466 border: 1px solid #5897fb; 467 outline: none; 468 469 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3); 470 box-shadow: 0 0 5px rgba(0, 0, 0, .3); 471} 472.select2-container-multi .select2-choices li { 473 float: left; 474 list-style: none; 475} 476html[dir="rtl"] .select2-container-multi .select2-choices li 477{ 478 float: right; 479} 480.select2-container-multi .select2-choices .select2-search-field { 481 margin: 0; 482 padding: 0; 483 white-space: nowrap; 484} 485 486.select2-container-multi .select2-choices .select2-search-field input { 487 padding: 5px; 488 margin: 1px 0; 489 490 font-family: sans-serif; 491 font-size: 100%; 492 color: #666; 493 outline: 0; 494 border: 0; 495 -webkit-box-shadow: none; 496 box-shadow: none; 497 background: transparent !important; 498} 499 500.select2-container-multi .select2-choices .select2-search-field input.select2-active { 501 background: #fff url('select2-spinner.gif') no-repeat 100% !important; 502} 503 504.select2-default { 505 color: #999 !important; 506} 507 508.select2-container-multi .select2-choices .select2-search-choice { 509 padding: 3px 5px 3px 18px; 510 margin: 3px 0 3px 5px; 511 position: relative; 512 513 line-height: 13px; 514 color: #333; 515 cursor: default; 516 border: 1px solid #aaaaaa; 517 518 border-radius: 3px; 519 520 -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); 521 box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); 522 523 background-clip: padding-box; 524 525 -webkit-touch-callout: none; 526 -webkit-user-select: none; 527 -moz-user-select: none; 528 -ms-user-select: none; 529 user-select: none; 530 531 background-color: #e4e4e4; 532 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0); 533 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee)); 534 background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); 535 background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); 536 background-image: linear-gradient(to top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); 537} 538html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice 539{ 540 margin-left: 0; 541 margin-right: 5px; 542} 543.select2-container-multi .select2-choices .select2-search-choice .select2-chosen { 544 cursor: default; 545} 546.select2-container-multi .select2-choices .select2-search-choice-focus { 547 background: #d4d4d4; 548} 549 550.select2-search-choice-close { 551 display: block; 552 width: 12px; 553 height: 13px; 554 position: absolute; 555 right: 3px; 556 top: 4px; 557 558 font-size: 1px; 559 outline: none; 560 background: url('select2.png') right top no-repeat; 561} 562html[dir="rtl"] .select2-search-choice-close { 563 right: auto; 564 left: 3px; 565} 566 567.select2-container-multi .select2-search-choice-close { 568 left: 3px; 569} 570 571.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { 572 background-position: right -11px; 573} 574.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { 575 background-position: right -11px; 576} 577 578/* disabled styles */ 579.select2-container-multi.select2-container-disabled .select2-choices { 580 background-color: #f4f4f4; 581 background-image: none; 582 border: 1px solid #ddd; 583 cursor: default; 584} 585 586.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { 587 padding: 3px 5px 3px 5px; 588 border: 1px solid #ddd; 589 background-image: none; 590 background-color: #f4f4f4; 591} 592 593.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none; 594 background: none; 595} 596/* end multiselect */ 597 598 599.select2-result-selectable .select2-match, 600.select2-result-unselectable .select2-match { 601 text-decoration: underline; 602} 603 604.select2-offscreen, .select2-offscreen:focus { 605 clip: rect(0 0 0 0) !important; 606 width: 1px !important; 607 height: 1px !important; 608 border: 0 !important; 609 margin: 0 !important; 610 padding: 0 !important; 611 overflow: hidden !important; 612 position: absolute !important; 613 outline: 0 !important; 614 left: 0px !important; 615 top: 0px !important; 616} 617 618.select2-display-none { 619 display: none; 620} 621 622.select2-measure-scrollbar { 623 position: absolute; 624 top: -10000px; 625 left: -10000px; 626 width: 100px; 627 height: 100px; 628 overflow: scroll; 629} 630 631/* Retina-ize icons */ 632 633@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) { 634 .select2-search input, 635 .select2-search-choice-close, 636 .select2-container .select2-choice abbr, 637 .select2-container .select2-choice .select2-arrow b { 638 background-image: url('select2x2.png') !important; 639 background-repeat: no-repeat !important; 640 background-size: 60px 40px !important; 641 } 642 643 .select2-search input { 644 background-position: 100% -21px !important; 645 } 646} 647