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

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