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

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