resources/oojs-ui/oojs-ui.svg.css

   1 /*!
   2  * OOjs UI v0.1.0-pre-svg (064484f9af)
   3  * https://www.mediawiki.org/wiki/OOjs_UI
   4  *
   5  * Copyright 2011–2014 OOjs Team and other contributors.
   6  * Released under the MIT license
   7  * http://oojs.mit-license.org
   8  *
   9  * Date: Wed Feb 26 2014 12:12:11 GMT-0800 (PST)
  10  */
  11 /*csslint vendor-prefix:false */
  12
  13 /* Textures */
  14
  15 .oo-ui-texture-pending {
  16         /* @embed */
  17         background-image: url(images/textures/pending.gif);
  18 }
  19
  20 .oo-ui-texture-transparency {
  21         /* @embed */
  22         background-image: url(images/textures/transparency.png);
  23 }
  24
  25 /* RTL Definitions */
  26
  27 /* @noflip */
  28 .oo-ui-rtl {
  29         direction: rtl;
  30 }
  31 /* @noflip */
  32 .oo-ui-ltr {
  33         direction: ltr;
  34 }
  35 .oo-ui-dialog {
  36         position: fixed;
  37         top: 0;
  38         right: 0;
  39         bottom: 0;
  40         left: 0;
  41         padding: 1em;
  42         line-height: 1em;
  43         background-color: #fff;
  44         background-color: rgba(255,255,255,0.5);
  45
  46         opacity: 0;
  47
  48         -webkit-transition: all 250ms ease-in-out;
  49         -moz-transition: all 250ms ease-in-out;
  50         -o-transition: all 250ms ease-in-out;
  51         transition: all 250ms ease-in-out;
  52 }
  53
  54 .oo-ui-dialog .oo-ui-window-frame {
  55         position: fixed;
  56         top: 1em;
  57         right: 0;
  58         bottom: 1em;
  59         left: 0;
  60         margin: auto;
  61         width: 800px;
  62         min-height: 12em;
  63         max-height: 600px;
  64         background-color: #fff;
  65         border: solid 1px #ccc;
  66         border-radius: 0.5em;
  67         box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3);
  68         overflow: hidden;
  69
  70         -webkit-transform: scale(0.5);
  71         -moz-transform: scale(0.5);
  72         -ms-transform: scale(0.5);
  73         -o-transform: scale(0.5);
  74         transform: scale(0.5);
  75
  76         -webkit-transition: all 250ms ease-in-out;
  77         -moz-transition: all 250ms ease-in-out;
  78         -o-transition: all 250ms ease-in-out;
  79         transition: all 250ms ease-in-out;
  80 }
  81
  82 .oo-ui-dialog-open {
  83         opacity: 1;
  84 }
  85
  86 .oo-ui-dialog-open .oo-ui-window-frame  {
  87         -webkit-transform: scale(1);
  88         -moz-transform: scale(1);
  89         -ms-transform: scale(1);
  90         -o-transform: scale(1);
  91         transform: scale(1);
  92 }
  93
  94 .oo-ui-dialog .oo-ui-window-frame.oo-ui-window-frame-small {
  95         max-width: 600px;
  96         max-height: 400px;
  97 }
  98
  99 .oo-ui-dialog .oo-ui-frame {
 100         width: 100%;
 101         height: 100%;
 102 }
 103
 104 .oo-ui-dialog-content .oo-ui-window-head,
 105 .oo-ui-dialog-content .oo-ui-window-body,
 106 .oo-ui-dialog-content .oo-ui-window-foot {
 107         position: absolute;
 108         left: 0;
 109         right: 0;
 110         -webkit-box-sizing: border-box;
 111         -moz-box-sizing: border-box;
 112         box-sizing: border-box;
 113         overflow: hidden;
 114 }
 115
 116 .oo-ui-dialog-content .oo-ui-window-head {
 117         top: 0;
 118         height: 3.8em;
 119         padding: 0.5em;
 120 }
 121
 122 .oo-ui-dialog-content .oo-ui-window-foot {
 123         bottom: 0;
 124         height: 4.8em;
 125         padding: 1em;
 126 }
 127
 128 .oo-ui-dialog-content .oo-ui-window-body {
 129         box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
 130         top: 3.8em;
 131         bottom: 4.8em;
 132 }
 133
 134 .oo-ui-dialog-content-footless .oo-ui-window-body {
 135         bottom: 0;
 136 }
 137
 138 .oo-ui-dialog-content-footless .oo-ui-window-foot {
 139         display: none;
 140 }
 141
 142 .oo-ui-dialog-content .oo-ui-window-icon {
 143         width: 2.4em;
 144         height: 2.8em;
 145         line-height: 2.8em;
 146 }
 147
 148 .oo-ui-dialog-content .oo-ui-window-title {
 149         line-height: 2.8em;
 150 }
 151
 152 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed {
 153         float: left;
 154         margin: 0.125em 0.25em;
 155 }
 156
 157 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary,
 158 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive,
 159 .oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-destructive {
 160         float: right;
 161 }
 162
 163 .oo-ui-dialog-content .oo-ui-window-closeButton {
 164         float: right;
 165         margin: 0.25em 0.25em;
 166 }
 167
 168 /* OO.ui.ButtonedElement */
 169
 170 a.oo-ui-buttonedElement-button {
 171         color: #333;
 172         cursor: pointer;
 173         display: inline-block;
 174         vertical-align: middle;
 175         -webkit-touch-callout: none;
 176         -webkit-user-select: none;
 177         -moz-user-select: none;
 178         -ms-user-select: none;
 179         user-select: none;
 180 }
 181
 182 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator,
 183 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 184         display: none;
 185 }
 186
 187 .oo-ui-buttonedElement.oo-ui-indicatedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator,
 188 .oo-ui-buttonedElement.oo-ui-iconedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 189         opacity: 0.8;
 190         display: inline-block;
 191         vertical-align: middle;
 192         background-position: center center;
 193         background-repeat: no-repeat;
 194         width: 1.9em;
 195         height: 1.9em;
 196 }
 197
 198 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 199         margin-left: 0;
 200 }
 201
 202 .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator {
 203         margin-right: -0.75em;
 204 }
 205 .oo-ui-buttonedElement.oo-ui-widget-disabled .oo-ui-buttonedElement-button {
 206         cursor: default;
 207 }
 208
 209 .oo-ui-buttonedElement-frameless {
 210         display: inline-block;
 211         position: relative;
 212         -webkit-transition: opacity 200ms;
 213         -moz-transition: opacity 200ms;
 214         -o-transition: opacity 200ms;
 215         transition: opacity 200ms;
 216 }
 217
 218 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:hover > .oo-ui-iconedElement-icon,
 219 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:focus > .oo-ui-iconedElement-icon {
 220         opacity: 1;
 221 }
 222
 223 .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 224         opacity: 0.2;
 225 }
 226
 227 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 228         display: inline-block;
 229         vertical-align: middle;
 230         margin-left: 0.25em;
 231         color: #333;
 232 }
 233
 234 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:hover > .oo-ui-labeledElement-label,
 235 .oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button:focus > .oo-ui-labeledElement-label {
 236         color: #000;
 237 }
 238
 239 .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 240         color: #ccc;
 241 }
 242
 243 /* OO.ui.ButtonWidget */
 244
 245 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
 246         display: inline-block;
 247         font-size: 1em;
 248         margin: 0.1em 0;
 249         padding: 0.2em 0.8em;
 250         border-radius: 0.3em;
 251         vertical-align: top;
 252         text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 253         text-align: center;
 254
 255         /* Animation */
 256         -webkit-transition: border-color 100ms;
 257         -moz-transition: border-color 100ms;
 258         -o-transition: border-color 100ms;
 259         transition: border-color 100ms;
 260
 261         /* Gray */
 262         border: 1px #c9c9c9 solid;
 263         background-color: #dddddd;
 264         filter: progid:DXImageTransform.Microsoft.gradient(
 265                 GradientType=0,startColorstr=#ffffff, endColorstr=#dddddd
 266         );
 267         background-image: -webkit-gradient(
 268                 linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)
 269         );
 270         background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 271         background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 272         background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 273         background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
 274         background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
 275 }
 276
 277 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button:hover,
 278 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button:focus {
 279         border-color: #aaa;
 280 }
 281
 282 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button:active,
 283 .oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active .oo-ui-buttonedElement-button {
 284         box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
 285         color: black;
 286
 287         /* Gray */
 288         border-color: #c9c9c9;
 289         background-color: #dddddd;
 290         filter: progid:DXImageTransform.Microsoft.gradient(
 291                 GradientType=0,startColorstr=#dddddd, endColorstr=#ffffff
 292         );
 293         background-image: -webkit-gradient(
 294                 linear, right top, right bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff)
 295         );
 296         background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 297         background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 298         background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 299         background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
 300         background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
 301 }
 302
 303 .oo-ui-buttonedElement-framed.oo-ui-iconedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 304         margin-left: -0.5em;
 305         margin-right: -0.5em;
 306 }
 307
 308 .oo-ui-buttonedElement-framed.oo-ui-iconedElement.oo-ui-labeledElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon {
 309         margin-left: -0.5em;
 310         margin-right: 0;
 311 }
 312
 313 .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label {
 314         display: inline-block;
 315         vertical-align: middle;
 316         line-height: 1.9em;
 317 }
 318
 319 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button {
 320         /* Red text */
 321         color: #d45353;
 322 }
 323
 324 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button {
 325         /* Green */
 326         border: solid 1px #b8d892;
 327         background-color: #f0fbe1;
 328         filter: progid:DXImageTransform.Microsoft.gradient(
 329                 GradientType=0,startColorstr=#f0fbe1, endColorstr=#c3e59a
 330         );
 331         background-image: -webkit-gradient(
 332                 linear, right top, right bottom, color-stop(0%,#f0fbe1), color-stop(100%,#c3e59a)
 333         );
 334         background-image: -webkit-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 335         background-image: -moz-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 336         background-image: -ms-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 337         background-image: -o-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 338         background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%);
 339 }
 340
 341 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button:hover,
 342 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button:focus {
 343         border-color: #adcb89;
 344 }
 345
 346 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button:active,
 347 .oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button {
 348         /* Green */
 349         border: solid 1px #b8d892;
 350         background-color: #c3e59a;
 351         filter: progid:DXImageTransform.Microsoft.gradient(
 352                 GradientType=0,startColorstr=#c3e59a, endColorstr=#f0fbe1
 353         );
 354         background-image: -webkit-gradient(
 355                 linear, right top, right bottom, color-stop(0%,#c3e59a), color-stop(100%,#f0fbe1)
 356         );
 357         background-image: -webkit-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 358         background-image: -moz-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 359         background-image: -ms-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 360         background-image: -o-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 361         background-image: linear-gradient(top, #c3e59a 0%, #f0fbe1 100%);
 362 }
 363
 364 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button {
 365         /* Blue */
 366         border: solid 1px #a6cee1;
 367         background-color: #eaf4fa;
 368         filter: progid:DXImageTransform.Microsoft.gradient(
 369                 GradientType=0,startColorstr=#eaf4fa, endColorstr=#b0d9ee
 370         );
 371         background-image: -webkit-gradient(
 372                 linear, right top, right bottom, color-stop(0%,#eaf4fa), color-stop(100%,#b0d9ee)
 373         );
 374         background-image: -webkit-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 375         background-image: -moz-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 376         background-image: -ms-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 377         background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 378         background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%);
 379 }
 380
 381 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button:hover,
 382 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button:focus {
 383         border-color: #9dc2d4;
 384 }
 385
 386 .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button:active,
 387 .oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button {
 388         /* Blue */
 389         border: solid 1px #a6cee1;
 390         background-color: #b0d9ee;
 391         filter: progid:DXImageTransform.Microsoft.gradient(
 392                 GradientType=0,startColorstr=#b0d9ee, endColorstr=#eaf4fa
 393         );
 394         background-image: -webkit-gradient(
 395                 linear, right top, right bottom, color-stop(0%,#b0d9ee), color-stop(100%,#eaf4fa)
 396         );
 397         background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 398         background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 399         background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 400         background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 401         background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
 402 }
 403
 404 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button,
 405 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:active,
 406 .oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-widget-disabled .oo-ui-buttonedElement-button:active {
 407         opacity: 0.5;
 408         cursor: default;
 409         box-shadow: none;
 410         color: #333;
 411         background: #eee;
 412 }
 413
 414 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:hover,
 415 .oo-ui-buttonedElement-framed.oo-ui-widget-disabled .oo-ui-buttonedElement-button:focus {
 416         border-color: #ccc;
 417         box-shadow: none;
 418 }
 419
 420 /* OO.ui.LabeledElement */
 421
 422 .oo-ui-labeledElement-label {
 423         display: block;
 424 }
 425
 426 .oo-ui-clippableElement-clippable {
 427         -webkit-box-sizing: border-box;
 428         -moz-box-sizing: border-box;
 429         box-sizing: border-box;
 430 }
 431 .oo-ui-frame {
 432         margin: 0;
 433         padding: 0;
 434 }
 435
 436 .oo-ui-frame-body {
 437         margin: 0;
 438         padding: 0;
 439         background: none;
 440 }
 441
 442 .oo-ui-frame-content {
 443         font-family: sans-serif;
 444         font-size: 0.8em;
 445 }
 446 /* OO.ui.GridLayout */
 447 /* OO.ui.PanelLayout */
 448
 449 .oo-ui-gridLayout,
 450 .oo-ui-panelLayout {
 451         position: absolute;
 452         top: 0;
 453         left: 0;
 454         right: 0;
 455         bottom: 0;
 456 }
 457
 458 .oo-ui-panelLayout-scrollable {
 459         overflow-y: auto;
 460 }
 461
 462 .oo-ui-panelLayout-padded {
 463         padding: 2em;
 464 }
 465
 466 /* OO.ui.FieldsetLayout */
 467
 468 .oo-ui-fieldsetLayout {
 469         position: relative;
 470         border: none;
 471         margin: 0;
 472         padding: 0;
 473 }
 474
 475 .oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout {
 476         margin-top: 2em;
 477 }
 478
 479 .oo-ui-fieldsetLayout-labeled {
 480         margin-top: -0.75em;
 481 }
 482
 483 .oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label {
 484         font-size: 1.5em;
 485         margin-bottom: 0.5em;
 486         padding-left: 0;
 487 }
 488
 489 .oo-ui-fieldsetLayout.oo-ui-iconedElement > legend.oo-ui-labeledElement-label {
 490         padding-left: 1.75em;
 491 }
 492
 493 .oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon {
 494         display: block;
 495         position: absolute;
 496         left: 0;
 497         top: 0.5em;
 498         width: 2em;
 499         height: 2em;
 500         background-position: center center;
 501         background-repeat: no-repeat;
 502 }
 503
 504 /* OO.ui.FieldLayout */
 505
 506 .oo-ui-fieldLayout {
 507         margin-bottom: 1em;
 508 }
 509
 510 .oo-ui-fieldLayout:last-child {
 511         margin-bottom: 0;
 512 }
 513
 514 .oo-ui-fieldLayout:before,
 515 .oo-ui-fieldLayout:after {
 516     content: " ";
 517     display: table;
 518 }
 519
 520 .oo-ui-fieldLayout:after {
 521     clear: both;
 522 }
 523
 524 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labeledElement-label,
 525 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label {
 526         display: block;
 527         float: left;
 528         width: 35%;
 529         padding-top: 0.5em;
 530         margin-right: 5%;
 531 }
 532
 533 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field,
 534 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field {
 535         display: block;
 536         float: left;
 537         width: 60%;
 538 }
 539
 540 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label {
 541         text-align: right;
 542 }
 543
 544 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labeledElement-label {
 545         display: inline-block;
 546         vertical-align: middle;
 547         padding: 0.75em 0.5em 0.5em 0.5em;
 548 }
 549
 550 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field {
 551         display: inline-block;
 552         vertical-align: middle;
 553         padding: 0.5em 0;
 554 }
 555
 556 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label {
 557         padding: 0.5em 0;
 558 }
 559
 560 /* OO.ui.BookletLayout */
 561
 562 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout {
 563         padding: 1.5em;
 564         width: 100%;
 565         -webkit-box-sizing: border-box;
 566         -moz-box-sizing: border-box;
 567         box-sizing: border-box;
 568 }
 569
 570 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-scrollable {
 571         overflow-y: auto;
 572 }
 573
 574 .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-padded {
 575         padding: 2em;
 576 }
 577
 578 .oo-ui-bookletLayout-outlinePanel {
 579         border-right: solid 1px #ddd;
 580 }
 581
 582 .oo-ui-bookletLayout-outlinePanel-editable .oo-ui-outlineWidget {
 583         position: absolute;
 584         top: 0;
 585         left: 0;
 586         right: 0;
 587         bottom: 3em;
 588         overflow-y: auto;
 589 }
 590
 591 .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget {
 592         position: absolute;
 593         bottom: 0;
 594         left: 0;
 595         right: 0;
 596         box-shadow: 0 0 0.25em rgba(0,0,0,0.25);
 597 }
 598
 599 .oo-ui-stackLayout > .oo-ui-panelLayout {
 600         display: none;
 601 }
 602
 603 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
 604         display: block;
 605         position: relative;
 606         margin-bottom: 1em;
 607         box-shadow: 0 0 0.5em rgba(0,0,0,0.25);
 608 }
 609
 610 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout:last-child {
 611         margin-bottom: 0;
 612 }
 613 /* OO.ui.PopupTool */
 614
 615 .oo-ui-popupTool .oo-ui-popupWidget {
 616         margin-left: 1.25em;
 617         font-size: 0.8em;
 618 }
 619
 620 .oo-ui-popupTool .oo-ui-popupWidget-popup,
 621 .oo-ui-popupTool .oo-ui-popupWidget-tail {
 622         z-index: 4;
 623 }
 624 .oo-ui-toolbar {
 625         clear: both;
 626 }
 627
 628 .oo-ui-toolbar-bar {
 629         border-bottom: solid 1px #ccc;
 630         background-color: white;
 631         /* @embed */
 632         background-image: url(images/fade-up.png);
 633         background-position: left bottom;
 634         background-repeat: repeat-x;
 635         padding-bottom: 1px;
 636         line-height: 1em;
 637 }
 638
 639 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
 640         border: none;
 641         background: none;
 642 }
 643
 644 .oo-ui-toolbar-bottom .oo-ui-toolbar-bar {
 645         position: absolute;
 646 }
 647
 648 .oo-ui-toolbar-actions {
 649         float: right;
 650 }
 651
 652 .oo-ui-toolbar-tools {
 653         float: left;
 654 }
 655
 656 .oo-ui-toolbar-tools,
 657 .oo-ui-toolbar-actions,
 658 .oo-ui-toolbar-shadow {
 659         -webkit-user-select: none;
 660         -moz-user-select: none;
 661         -ms-user-select: none;
 662         -o-user-select: none;
 663         user-select: none;
 664 }
 665
 666 .oo-ui-toolbar-actions .oo-ui-popupWidget {
 667         -webkit-touch-callout: default;
 668         -webkit-user-select: all;
 669         -moz-user-select: all;
 670         -ms-user-select: all;
 671         user-select: all;
 672 }
 673
 674 .oo-ui-toolbar-shadow {
 675         /* @embed */
 676         background-image: url(images/toolbar-shadow.png);
 677         background-position: left top;
 678         background-repeat: repeat-x;
 679         position: absolute;
 680         bottom: -9px;
 681         height: 9px;
 682         width: 100%;
 683         pointer-events: none;
 684         -webkit-transition: opacity 500ms ease-in-out;
 685         -moz-transition: opacity 500ms ease-in-out;
 686         -o-transition: opacity 500ms ease-in-out;
 687         transition: opacity 500ms ease-in-out;
 688         opacity: 0.125;
 689 }
 690 /* OO.ui.ToolGroup */
 691
 692 .oo-ui-toolGroup {
 693         display: inline-block;
 694         margin: 0.3em;
 695         vertical-align: middle;
 696         border-radius: 0.25em;
 697         border: solid 1px transparent;
 698         -webkit-transition: border-color 300ms;
 699         -moz-transition: border-color 300ms;
 700         -o-transition: border-color 300ms;
 701         transition: border-color 300ms;
 702 }
 703
 704 .oo-ui-toolGroup:hover {
 705         border-color: rgba(0,0,0,0.1);
 706 }
 707
 708 .oo-ui-toolGroup-empty {
 709         display: none;
 710 }
 711
 712 .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-tool-title {
 713         color: #000;
 714 }
 715
 716 .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 717         background-position: center center;
 718         background-repeat: no-repeat;
 719 }
 720
 721 /* OO.ui.BarToolGroup */
 722
 723 .oo-ui-barToolGroup > .oo-ui-iconedElement-icon,
 724 .oo-ui-barToolGroup > .oo-ui-iconedElement-label {
 725         display: none;
 726 }
 727
 728 .oo-ui-barToolGroup .oo-ui-tool {
 729         display: inline-block;
 730         position: relative;
 731         vertical-align: top;
 732         margin: -1px 0 -1px -1px;
 733         border: solid 1px transparent;
 734 }
 735
 736 .oo-ui-barToolGroup .oo-ui-tool-link {
 737         display: block;
 738         height: 1.5em;
 739         padding: 0.25em;
 740         cursor: pointer;
 741 }
 742
 743 .oo-ui-barToolGroup
 744         .oo-ui-tool-active:not(.oo-ui-widget-disabled) +
 745         .oo-ui-tool-active:not(.oo-ui-widget-disabled)
 746 {
 747         border-left-color: rgba(0,0,0,0.1);
 748 }
 749
 750 .oo-ui-barToolGroup .oo-ui-tool:first-child {
 751         border-top-left-radius: 0.25em;
 752         border-bottom-left-radius: 0.25em;
 753 }
 754
 755 .oo-ui-barToolGroup .oo-ui-tool:last-child {
 756         margin-right: -1px;
 757         border-top-right-radius: 0.25em;
 758         border-bottom-right-radius: 0.25em;
 759 }
 760
 761 .oo-ui-barToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) {
 762         border-color: rgba(0,0,0,0.2);
 763 }
 764
 765 .oo-ui-barToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled) {
 766         border-color: rgba(0,0,0,0.2);
 767 }
 768
 769 .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 770         display: block;
 771         height: 1.5em;
 772         width: 1.5em;
 773         opacity: 0.8;
 774 }
 775
 776 .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 777         display: none;
 778 }
 779
 780 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link {
 781         cursor: default;
 782 }
 783
 784 .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 785         opacity: 0.2;
 786 }
 787
 788 .oo-ui-barToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
 789         opacity: 0.8;
 790 }
 791
 792 .oo-ui-barToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
 793         opacity: 1;
 794 }
 795
 796 .oo-ui-barToolGroup .oo-ui-tool-title {
 797         display: none;
 798 }
 799
 800 /* OO.ui.PopupToolGroup */
 801
 802 .oo-ui-popupToolGroup {
 803         position: relative;
 804         height: 2em;
 805         min-width: 2.5em;
 806 }
 807
 808 .oo-ui-popupToolGroup.oo-ui-indicatedElement.oo-ui-iconedElement {
 809         min-width: 3.5em;
 810 }
 811
 812 .oo-ui-popupToolGroup-handle {
 813         display: block;
 814         cursor: pointer;
 815 }
 816
 817 .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator,
 818 .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
 819         position: absolute;
 820         top: 0;
 821         width: 2em;
 822         height: 2em;
 823         background-position: center center;
 824         background-repeat: no-repeat;
 825         opacity: 0.8;
 826 }
 827
 828 .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator {
 829         right: 0;
 830 }
 831
 832 .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon {
 833         left: 0.25em;
 834 }
 835
 836 .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
 837         line-height: 2.6em;
 838         font-size: 0.8em;
 839         margin: 0 1em;
 840 }
 841
 842 .oo-ui-popupToolGroup.oo-ui-iconedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
 843         margin-left: 3.25em;
 844 }
 845
 846 .oo-ui-popupToolGroup.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label {
 847         margin-right: 2.25em;
 848 }
 849
 850 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
 851         display: none;
 852         position: absolute;
 853         top: 2em;
 854         left: -1px;
 855         z-index: 4;
 856         border: solid 1px #ccc;
 857         background-color: white;
 858         box-shadow: 0 0.25em 1em rgba(0,0,0,0.25);
 859 }
 860
 861 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools .oo-ui-iconedElement-icon {
 862         background-repeat: no-repeat;
 863         background-position: center center;
 864 }
 865
 866 .oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) > .oo-ui-toolGroup-tools {
 867         display: block;
 868 }
 869
 870 .oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) {
 871         border-bottom-left-radius: 0;
 872         border-bottom-right-radius: 0;
 873 }
 874
 875 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 876         display: inline-block;
 877         vertical-align: middle;
 878         height: 2em;
 879         width: 2em;
 880         margin-right: 0.5em;
 881 }
 882
 883 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
 884         display: inline-block;
 885         vertical-align: middle;
 886         line-height: 2em;
 887         font-size: 0.8em;
 888 }
 889
 890 .oo-ui-popupToolGroup .oo-ui-tool-accel {
 891         display: none;
 892 }
 893
 894 /* OO.ui.ListToolGroup */
 895
 896 .oo-ui-listToolGroup .oo-ui-toolGroup-tools {
 897         padding: 0.25em;
 898 }
 899
 900 .oo-ui-listToolGroup .oo-ui-tool {
 901         display: inline-block;
 902         width: 100%;
 903         -webkit-box-sizing: border-box;
 904         -moz-box-sizing: border-box;
 905         box-sizing: border-box;
 906         border: solid 1px transparent;
 907         margin: -1px 0;
 908 }
 909
 910 .oo-ui-listToolGroup .oo-ui-tool-link {
 911         display: block;
 912         cursor: pointer;
 913         white-space: nowrap;
 914         padding-right: 0.5em;
 915 }
 916
 917 .oo-ui-listToolGroup.oo-ui-popupToolGroup-active {
 918         border-color: rgba(0,0,0,0.2);
 919 }
 920
 921 .oo-ui-listToolGroup
 922         .oo-ui-tool-active:not(.oo-ui-widget-disabled) +
 923         .oo-ui-tool-active:not(.oo-ui-widget-disabled)
 924 {
 925         border-top-color: rgba(0,0,0,0.1);
 926 }
 927
 928 .oo-ui-listToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) {
 929         border-color: rgba(0,0,0,0.2);
 930 }
 931
 932 .oo-ui-listToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled) {
 933         border-color: rgba(0,0,0,0.2);
 934 }
 935
 936 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link {
 937         cursor: default;
 938 }
 939
 940 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title {
 941         color: #ccc;
 942 }
 943
 944 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon {
 945         opacity: 0.2;
 946 }
 947
 948 .oo-ui-listToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
 949         opacity: 0.8;
 950 }
 951
 952 .oo-ui-listToolGroup .oo-ui-tool:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon {
 953         opacity: 1;
 954 }
 955
 956 /* OO.ui.MenuToolGroup */
 957
 958 .oo-ui-menuToolGroup {
 959         border-color: rgba(0,0,0,0.1);
 960 }
 961
 962 .oo-ui-menuToolGroup:hover {
 963         border-color: rgba(0,0,0,0.2);
 964 }
 965
 966 .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active {
 967         border-color: rgba(0,0,0,0.25);
 968 }
 969
 970 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
 971         min-width: 8em;
 972 }
 973
 974 .oo-ui-menuToolGroup .oo-ui-tool {
 975         display: block;
 976 }
 977
 978 .oo-ui-menuToolGroup .oo-ui-tool-link {
 979         display: block;
 980         cursor: pointer;
 981         white-space: nowrap;
 982         padding: 0.25em 1em 0.25em 0.25em;
 983 }
 984
 985 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon {
 986         background-image: none;
 987 }
 988
 989 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconedElement-icon {
 990         /* @embed */
 991         background-image: url(images/icons/check.png);
 992 }
 993
 994 .oo-ui-menuToolGroup .oo-ui-tool:hover {
 995         background-color: #e1f3ff;
 996 }
 997
 998 /* Common */
 999
1000 .oo-ui-barToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled),
1001 .oo-ui-listToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled),
1002 .oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) {
1003         /* @embed */
1004         background-image: url(images/fade-down.png);
1005         background-position: left top;
1006         background-repeat: repeat-x;
1007         box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07);
1008 }
1009 /* OO.ui.ButtonWidget */
1010
1011 .oo-ui-buttonWidget {
1012         display: inline-block;
1013         vertical-align: middle;
1014 }
1015
1016 /* OO.ui.PopupButtonWidget */
1017
1018 .oo-ui-popupButtonWidget {
1019         position: relative;
1020 }
1021
1022 .oo-ui-popupButtonWidget .oo-ui-popupWidget {
1023         position: absolute;
1024         left: 1em;
1025         cursor: auto;
1026 }
1027
1028 /* OO.ui.ButtonGroupWidget */
1029
1030 .oo-ui-buttonGroupWidget {
1031         display: inline-block;
1032         white-space: nowrap;
1033         border-radius: 0.3em;
1034 }
1035
1036 .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button {
1037         border-radius: 0;
1038         margin-bottom: -1px;
1039         margin-left: -1px;
1040 }
1041
1042 .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child .oo-ui-buttonedElement-button {
1043         border-bottom-left-radius: 0.3em;
1044         border-top-left-radius: 0.3em;
1045         margin-left: 0;
1046 }
1047
1048 .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:last-child .oo-ui-buttonedElement-button {
1049         border-bottom-right-radius: 0.3em;
1050         border-top-right-radius: 0.3em;
1051 }
1052
1053 /* OO.ui.SelectWidget */
1054
1055 .oo-ui-selectWidget {
1056         list-style: none;
1057         margin: 0;
1058         padding: 0;
1059 }
1060
1061 /* OO.ui.OptionWidget */
1062
1063 .oo-ui-optionWidget {
1064         position: relative;
1065         display: block;
1066         border: none;
1067         list-style: none;
1068         margin: 0;
1069         padding: 0.5em 2em 0.5em 3em;
1070         cursor: pointer;
1071 }
1072
1073 .oo-ui-optionWidget .oo-ui-labeledElement-label {
1074         line-height: 1.5em;
1075         white-space: nowrap;
1076         text-overflow: ellipsis;
1077         overflow: hidden;
1078 }
1079
1080 .oo-ui-optionWidget-highlighted {
1081         background-color: #e1f3ff;
1082 }
1083
1084 .oo-ui-optionWidget-selected {
1085         background-color: #a7dcff;
1086 }
1087
1088 .oo-ui-optionWidget.oo-ui-widget-disabled {
1089         cursor: default;
1090 }
1091
1092 .oo-ui-optionWidget .oo-ui-iconedElement-icon,
1093 .oo-ui-optionWidget .oo-ui-indicatedElement-indicator {
1094         position: absolute;
1095         top: 50%;
1096         width: 2em;
1097         height: 2em;
1098         margin-top: -1em;
1099         background-repeat: no-repeat;
1100         background-position: center center;
1101 }
1102
1103 .oo-ui-optionWidget .oo-ui-iconedElement-icon {
1104         left: 0.5em;
1105 }
1106
1107 .oo-ui-optionWidget .oo-ui-indicatedElement-indicator {
1108         right: 0.5em;
1109 }
1110
1111 /* OO.ui.OutlineItemWidget */
1112
1113 .oo-ui-outlineItemWidget {
1114         position: relative;
1115         padding: 0.75em 0.75em 0.75em 3.5em;
1116         -webkit-user-select: none;
1117         -moz-user-select: none;
1118         -ms-user-select: none;
1119         user-select: none;
1120         cursor: pointer;
1121         font-size: 1.1em;
1122 }
1123
1124 .oo-ui-outlineItemWidget-level-1 {
1125         padding-left: 5em;
1126 }
1127
1128 .oo-ui-outlineItemWidget-level-2 {
1129         padding-left: 6.5em;
1130 }
1131
1132 .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected {
1133         background-color: #a7dcff;
1134         text-shadow: 0 1px 1px rgba(255,255,255,0.5);
1135 }
1136
1137 .oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon {
1138         left: 1em;
1139 }
1140
1141 .oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon {
1142         left: 2.5em;
1143 }
1144
1145 .oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon {
1146         left: 4em;
1147 }
1148
1149 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-important {
1150         font-weight: bold;
1151 }
1152
1153 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder {
1154         font-style: italic;
1155 }
1156
1157 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon,
1158 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator {
1159         opacity: 0.5;
1160 }
1161 .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label {
1162         color: #698AA0;
1163 }
1164
1165 /* OO.ui.OutlineControlsWidget */
1166
1167 .oo-ui-outlineControlsWidget {
1168         height: 3em;
1169         background-color: #fff;
1170 }
1171
1172 .oo-ui-outlineControlsWidget-adders,
1173 .oo-ui-outlineControlsWidget-movers {
1174         float: left;
1175         -webkit-box-sizing: border-box;
1176         -moz-box-sizing: border-box;
1177         box-sizing: border-box;
1178         height: 3em;
1179         padding: 0.5em;
1180 }
1181
1182 .oo-ui-outlineControlsWidget-adders {
1183         float: left;
1184 }
1185 .oo-ui-outlineControlsWidget-movers {
1186         float: right;
1187 }
1188
1189 .oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget {
1190         float: left;
1191 }
1192
1193 .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget {
1194         float: right;
1195 }
1196
1197 .oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget:first-child,
1198 .oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget:first-child:hover {
1199         opacity: 0.25;
1200         cursor: default;
1201 }
1202
1203 /* OO.ui.LabelWidget */
1204
1205 .oo-ui-labelWidget {
1206         padding: 0.5em 0;
1207 }
1208
1209 /* OO.ui.TextInputWidget */
1210
1211 .oo-ui-textInputWidget {
1212         -webkit-box-sizing: border-box;
1213         -moz-box-sizing: border-box;
1214         box-sizing: border-box;
1215         width: 20em;
1216         position: relative;
1217 }
1218
1219 .oo-ui-textInputWidget input,
1220 .oo-ui-textInputWidget input:focus[readonly],
1221 .oo-ui-widget-disabled.oo-ui-textInputWidget input:focus,
1222 .oo-ui-textInputWidget textarea,
1223 .oo-ui-textInputWidget textarea:focus[readonly],
1224 .oo-ui-widget-disabled.oo-ui-textInputWidget textarea:focus {
1225         display: inline-block;
1226         font-size: 1em;
1227         font-family: sans-serif;
1228         background-color: #fff;
1229         border: solid 1px #ccc;
1230         box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
1231         padding: 0.5em;
1232         border-radius: 0.25em;
1233         -webkit-box-sizing: border-box;
1234         -moz-box-sizing: border-box;
1235         box-sizing: border-box;
1236         width: 100%;
1237         resize: none;
1238
1239         /* Animation */
1240         -webkit-transition: border-color 200ms, box-shadow 200ms;
1241         -moz-transition: border-color 200ms, box-shadow 200ms;
1242         -o-transition: border-color 200ms, box-shadow 200ms;
1243         transition: border-color 200ms, box-shadow 200ms;
1244 }
1245
1246 .oo-ui-textInputWidget-pending input,
1247 .oo-ui-textInputWidget-pending textarea {
1248         background-color: transparent;
1249 }
1250
1251 .oo-ui-textInputWidget input:focus,
1252 .oo-ui-textInputWidget textarea:focus {
1253         outline: none;
1254         border-color: #a7dcff;
1255         box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white;
1256 }
1257
1258 .oo-ui-textInputWidget input[readonly],
1259 .oo-ui-textInputWidget textarea[readonly] {
1260         color: #777;
1261         text-shadow: 0 1px 1px #fff;
1262 }
1263
1264 .oo-ui-widget-disabled.oo-ui-textInputWidget input,
1265 .oo-ui-widget-disabled.oo-ui-textInputWidget input:focus,
1266 .oo-ui-widget-disabled.oo-ui-textInputWidget textarea,
1267 .oo-ui-widget-disabled.oo-ui-textInputWidget textarea:focus {
1268         color: #ccc;
1269         border-color: #ddd;
1270         text-shadow: 0 1px 1px #fff;
1271 }
1272
1273 .oo-ui-textInputWidget-decorated input,
1274 .oo-ui-textInputWidget-decorated textarea {
1275         padding-left: 2em;
1276 }
1277
1278 .oo-ui-textInputWidget-icon {
1279         position: absolute;
1280         top: 0;
1281         left: 0;
1282         width: 2em;
1283         height: 100%;
1284         background-position: right center;
1285         background-repeat: no-repeat;
1286 }
1287
1288 /* OO.ui.MenuWidget */
1289
1290 .oo-ui-menuWidget {
1291         position: absolute;
1292         background: #fff;
1293         margin-top: -1px;
1294         border: solid 1px #ccc;
1295         border-radius: 0 0 0.25em 0.25em;
1296         box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2);
1297 }
1298
1299 .oo-ui-menuWidget input {
1300         position: absolute;
1301         width: 0;
1302         height: 0;
1303         overflow: hidden;
1304         opacity: 0;
1305 }
1306
1307 /* OO.ui.InlineMenuWidget */
1308
1309 .oo-ui-inlineMenuWidget {
1310         position: relative;
1311         display: inline-block;
1312         margin: 0.25em 0;
1313         min-width: 20em;
1314 }
1315
1316 .oo-ui-inlineMenuWidget-handle {
1317         display: inline-block;
1318         width: 100%;
1319         height: 2.5em;
1320         border: solid 1px rgba(0,0,0,0.1);
1321         border-radius: 0.25em;
1322         -webkit-box-sizing: border-box;
1323         -moz-box-sizing: border-box;
1324         box-sizing: border-box;
1325         -webkit-touch-callout: none;
1326         -webkit-user-select: none;
1327         -moz-user-select: none;
1328         -ms-user-select: none;
1329         user-select: none;
1330         cursor: pointer;
1331 }
1332
1333 .oo-ui-inlineMenuWidget-handle:hover {
1334         border-color: rgba(0,0,0,0.2);
1335 }
1336
1337 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator,
1338 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
1339         position: absolute;
1340         top: 0;
1341         width: 2.5em;
1342         height: 2.5em;
1343         background-position: center center;
1344         background-repeat: no-repeat;
1345         opacity: 0.8;
1346 }
1347
1348 .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator {
1349         right: 0;
1350 }
1351
1352 .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon {
1353         left: 0.25em;
1354 }
1355
1356 .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label {
1357         line-height: 2.5em;
1358         margin: 0 0.5em;
1359 }
1360
1361 .oo-ui-inlineMenuWidget.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label {
1362         margin-left: 3em;
1363 }
1364
1365 .oo-ui-inlineMenuWidget.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label {
1366         margin-right: 2em;
1367 }
1368
1369 .oo-ui-inlineMenuWidget .oo-ui-menuWidget {
1370         width: 100%;
1371 }
1372
1373 /* OO.ui.MenuItemWidget */
1374
1375 .oo-ui-menuItemWidget {
1376         position: relative;
1377 }
1378
1379 .oo-ui-menuItemWidget .oo-ui-iconedElement-icon {
1380         display: none;
1381 }
1382
1383 .oo-ui-menuItemWidget.oo-ui-optionWidget-selected .oo-ui-iconedElement-icon {
1384         display: block;
1385 }
1386
1387 .oo-ui-menuItemWidget.oo-ui-optionWidget-selected {
1388         background-color: transparent;
1389 }
1390
1391 .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted {
1392         background-color: #e1f3ff;
1393 }
1394
1395 /* OO.ui.MenuSectionItemWidget */
1396
1397 .oo-ui-menuSectionItemWidget {
1398         padding: 0.33em 0.75em;
1399         color: #888;
1400         cursor: default;
1401 }
1402
1403 /* OO.ui.ButtonSelectWidget */
1404
1405 .oo-ui-buttonSelectWidget {
1406         display: inline-block;
1407         white-space: nowrap;
1408         border-radius: 0.3em;
1409 }
1410
1411 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
1412         border-radius: 0;
1413         margin-left: -1px;
1414 }
1415
1416 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button {
1417         border-bottom-left-radius: 0.3em;
1418         border-top-left-radius: 0.3em;
1419         margin-left: 0;
1420 }
1421
1422 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button {
1423         border-bottom-right-radius: 0.3em;
1424         border-top-right-radius: 0.3em;
1425 }
1426
1427 /* OO.ui.ButtonOptionWidget */
1428
1429 .oo-ui-buttonOptionWidget {
1430         display: inline-block;
1431         padding: 0;
1432         background-color: transparent;
1433 }
1434
1435 .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button {
1436         position: relative;
1437         height: 1.9em;
1438 }
1439
1440 .oo-ui-buttonOptionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon,
1441 .oo-ui-buttonOptionWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator {
1442         position: static;
1443         display: inline-block;
1444         vertical-align: middle;
1445         height: 1.9em;
1446         margin-top: 0;
1447 }
1448
1449 /* OO.ui.PopupWidget */
1450
1451 .oo-ui-popupWidget-popup {
1452         position: absolute;
1453         overflow: hidden;
1454         border: solid 1px #ccc;
1455         border-radius: 0.25em;
1456         background-color: #fff;
1457         box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
1458 }
1459
1460 .oo-ui-popupWidget-tail {
1461         display: none;
1462 }
1463
1464 .oo-ui-popupWidget-tailed .oo-ui-popupWidget-popup {
1465         margin-top: 7px;
1466 }
1467
1468 .oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail {
1469         display: block;
1470         position: absolute;
1471         /* @embed */
1472         background-image: url(images/tail.svg);
1473         background-repeat: no-repeat;
1474         width: 15px;
1475         height: 8px;
1476         margin-left: -7px;
1477 }
1478
1479 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
1480         -webkit-transition: width 100ms, height 100ms, left 100ms;
1481         -moz-transition: width 100ms, height 100ms, left 100ms;
1482         -o-transition: width 100ms, height 100ms, left 100ms;
1483         transition: width 100ms, height 100ms, left 100ms;
1484         -webkit-transition-timing-function: ease-in-out;
1485         -moz-transition-timing-function: ease-in-out;
1486         -o-transition-timing-function: ease-in-out;
1487         transition-timing-function: ease-in-out;
1488 }
1489
1490 .oo-ui-popupWidget-head {
1491         height: 2.5em;
1492         -webkit-touch-callout: none;
1493         -webkit-user-select: none;
1494         -moz-user-select: none;
1495         -ms-user-select: none;
1496         user-select: none;
1497 }
1498
1499 .oo-ui-popupWidget-head .oo-ui-buttonWidget {
1500         float: right;
1501         margin: 0.25em;
1502 }
1503
1504 .oo-ui-popupWidget-head .oo-ui-labeledElement-label {
1505         float: left;
1506         margin: 0.75em 1em;
1507         cursor: default;
1508 }
1509
1510 .oo-ui-popupWidget-body {
1511         box-shadow: 0 0 0.66em rgba(0,0,0,0.25);
1512 }
1513
1514 /* OO.ui.SearchWidget */
1515
1516 .oo-ui-searchWidget-query {
1517         position: absolute;
1518         top: 0;
1519         left: 0;
1520         right: 0;
1521         height: 4em;
1522         padding: 0 1em;
1523         box-shadow: 0 0 0.5em rgba(0,0,0,0.2);
1524 }
1525
1526 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
1527         width: 100%;
1528         margin: 0.75em 0;
1529 }
1530
1531 .oo-ui-searchWidget-results {
1532         position: absolute;
1533         top: 4em;
1534         bottom: 0;
1535         left: 0;
1536         right: 0;
1537         padding: 1em;
1538         overflow-x: hidden;
1539         overflow-y: auto;
1540         line-height: 0;
1541 }
1542
1543 /* OO.ui.ToggleSwitchWidget */
1544
1545 .oo-ui-toggleSwitchWidget {
1546         position: relative;
1547         display: inline-block;
1548         vertical-align: middle;
1549         height: 2em;
1550         width: 3em;
1551         border-radius: 1em;
1552         overflow: hidden;
1553         box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd;
1554         border: solid 1px #ccc;
1555         cursor: pointer;
1556         -webkit-box-sizing: border-box;
1557         -moz-box-sizing: border-box;
1558         box-sizing: border-box;
1559         -webkit-transform: translateZ(0px);
1560         -moz-transform: translateZ(0px);
1561         -ms-transform: translateZ(0px);
1562         -o-transform: translateZ(0px);
1563         transform: translateZ(0px);
1564
1565         /* Gray */
1566         background-color: #dddddd;
1567         filter: progid:DXImageTransform.Microsoft.gradient(
1568                 GradientType=0,startColorstr=#dddddd, endColorstr=#ffffff
1569         );
1570         background-image: -webkit-gradient(
1571                 linear, right top, right bottom, color-stop(0%,#dddddd), color-stop(100%,#ffffff)
1572         );
1573         background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1574         background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1575         background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1576         background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%);
1577         background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%);
1578 }
1579
1580 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
1581         opacity: 0.5;
1582         cursor: default;
1583 }
1584
1585 .oo-ui-toggleSwitchWidget-grip {
1586         -webkit-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1587         -moz-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1588         -o-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1589         transition: left 200ms ease-in-out, margin-left 200ms ease-in-out;
1590 }
1591
1592 .oo-ui-toggleSwitchWidget-grip {
1593         position: absolute;
1594         display: block;
1595         top: 0.25em;
1596         left: 0.25em;
1597         width: 1.5em;
1598         height: 1.5em;
1599         border-radius: 1em;
1600         box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1);
1601         -webkit-box-sizing: border-box;
1602         -moz-box-sizing: border-box;
1603         box-sizing: border-box;
1604
1605         /* Gray */
1606         border: 1px #c9c9c9 solid;
1607         background-color: #ffffff;
1608         filter: progid:DXImageTransform.Microsoft.gradient(
1609                 GradientType=0,startColorstr=#ffffff, endColorstr=#dddddd
1610         );
1611         background-image: -webkit-gradient(
1612                 linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#dddddd)
1613         );
1614         background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1615         background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1616         background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1617         background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
1618         background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%);
1619 }
1620
1621 .oo-ui-toggleSwitchWidget:not(.oo-ui-widget-disabled):hover,
1622 .oo-ui-toggleSwitchWidget:not(.oo-ui-widget-disabled):hover .oo-ui-toggleSwitchWidget-grip {
1623         border-color: #aaa;
1624 }
1625
1626 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
1627         left: 1.25em;
1628         margin-left: -2px;
1629 }
1630
1631 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
1632         left: 0.25em;
1633         margin-left: 0;
1634 }
1635
1636 .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-on {
1637         position: absolute;
1638         top: 0;
1639         bottom: 0;
1640         right: 0;
1641         left: 0;
1642         border-radius: 1em;
1643         box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
1644         -webkit-touch-callout: none;
1645         -webkit-user-select: none;
1646         -moz-user-select: none;
1647         -ms-user-select: none;
1648         user-select: none;
1649
1650         -webkit-transition: opacity 200ms ease-in-out;
1651         -moz-transition: opacity 200ms ease-in-out;
1652         -o-transition: opacity 200ms ease-in-out;
1653         transition: opacity 200ms ease-in-out;
1654
1655         /* Blue */
1656         background-color: #eaf4fa;
1657         filter: progid:DXImageTransform.Microsoft.gradient(
1658                 GradientType=0,startColorstr=#b0d9ee, endColorstr=#eaf4fa
1659         );
1660         background-image: -webkit-gradient(
1661                 linear, right top, right bottom, color-stop(0%,#b0d9ee), color-stop(100%,#eaf4fa)
1662         );
1663         background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1664         background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1665         background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1666         background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1667         background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%);
1668 }
1669
1670 .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-on {
1671         opacity: 1;
1672 }
1673
1674 .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-on {
1675         opacity: 0;
1676 }
1677 .oo-ui-window-head {
1678         -webkit-touch-callout: none;
1679         -webkit-user-select: none;
1680         -moz-user-select: none;
1681         -ms-user-select: none;
1682         user-select: none;
1683 }
1684
1685 .oo-ui-window-body {
1686         padding: 0 0.75em;
1687 }
1688
1689 .oo-ui-window-icon {
1690         float: left;
1691         width: 2em;
1692         height: 2em;
1693         line-height: 2em;
1694         margin-right: 0.5em;
1695         background-position: right center;
1696         background-repeat: no-repeat;
1697 }
1698
1699 .oo-ui-window-title {
1700         float: left;
1701         line-height: 2em;
1702         color: #333;
1703         white-space: nowrap;
1704         cursor: default;
1705 }
1706
1707 .oo-ui-window-overlay {
1708         font-family: sans-serif;
1709         line-height: 1.5em;
1710         font-size: 1em;
1711         position: absolute;
1712         top: 0;
1713         left: 0;
1714 }
1715 /* Icons */
1716
1717 .oo-ui-icon-add-item {
1718         /* @embed */
1719         background-image: url(images/icons/add-item.svg);
1720 }
1721
1722 .oo-ui-icon-advanced {
1723         /* @embed */
1724         background-image: url(images/icons/advanced.svg);
1725 }
1726
1727 .oo-ui-icon-alert {
1728         /* @embed */
1729         background-image: url(images/icons/alert.svg);
1730 }
1731
1732 .oo-ui-icon-check {
1733         /* @embed */
1734         background-image: url(images/icons/check.svg);
1735 }
1736
1737 .oo-ui-icon-clear {
1738         /* @embed */
1739         background-image: url(images/icons/clear.svg);
1740 }
1741
1742 .oo-ui-icon-close {
1743         /* @embed */
1744         background-image: url(images/icons/close.svg);
1745 }
1746
1747 .oo-ui-icon-code {
1748         /* @embed */
1749         background-image: url(images/icons/code.svg);
1750 }
1751
1752 .oo-ui-icon-collapse {
1753         /* @embed */
1754         background-image: url(images/icons/collapse.svg);
1755 }
1756
1757 .oo-ui-icon-comment {
1758         /* @embed */
1759         background-image: url(images/icons/comment.svg);
1760 }
1761
1762 .oo-ui-icon-expand {
1763         /* @embed */
1764         background-image: url(images/icons/expand.svg);
1765 }
1766
1767 .oo-ui-icon-help {
1768         /* @embed */
1769         background-image: url(images/icons/help.svg);
1770 }
1771
1772 .oo-ui-icon-link {
1773         /* @embed */
1774         background-image: url(images/icons/link.svg);
1775 }
1776
1777 .oo-ui-icon-menu {
1778         /* @embed */
1779         background-image: url(images/icons/menu.svg);
1780 }
1781
1782 .oo-ui-icon-next {
1783         /* @embed */
1784         background-image: url(images/icons/move-ltr.svg);
1785 }
1786
1787 .oo-ui-icon-picture {
1788         /* @embed */
1789         background-image: url(images/icons/picture.svg);
1790 }
1791
1792 .oo-ui-icon-previous {
1793         /* @embed */
1794         background-image: url(images/icons/move-rtl.svg);
1795 }
1796
1797 .oo-ui-icon-redo {
1798         /* @embed */
1799         background-image: url(images/icons/arched-arrow-ltr.svg);
1800 }
1801
1802 .oo-ui-icon-remove {
1803         /* @embed */
1804         background-image: url(images/icons/remove.svg);
1805 }
1806
1807 .oo-ui-icon-search {
1808         /* @embed */
1809         background-image: url(images/icons/search.svg);
1810 }
1811
1812 .oo-ui-icon-settings {
1813         /* @embed */
1814         background-image: url(images/icons/settings.svg);
1815 }
1816
1817 .oo-ui-icon-tag {
1818         /* @embed */
1819         background-image: url(images/icons/tag.svg);
1820 }
1821
1822 .oo-ui-icon-undo {
1823         /* @embed */
1824         background-image: url(images/icons/arched-arrow-rtl.svg);
1825 }
1826
1827 .oo-ui-icon-window {
1828         /* @embed */
1829         background-image: url(images/icons/window.svg);
1830 }
1831
1832 /* Indicators */
1833
1834 .oo-ui-indicator-down {
1835         /* @embed */
1836         background-image: url(images/indicators/down.svg);
1837 }
1838
1839 .oo-ui-indicator-required {
1840         /* @embed */
1841         background-image: url(images/indicators/required.svg);
1842 }
1843
1844 .oo-ui-indicator-up {
1845         /* @embed */
1846         background-image: url(images/indicators/up.svg);
1847 }