app/assets/stylesheets/common.css.scss

   1 /* Parameters */
   2 $lineheight: 20px;
   3 $typeheight: 14px;
   4
   5 $offwhite: #f4f4ff;
   6 $blue: #7092FF;
   7 $lightblue: #B8C5F0;
   8 $grey: #AAA;
   9 $keyline: #CCC;
  10 $hovercolor: 20%;
  11
  12 /* Styles common to large and small screens */
  13
  14 /* Minimal CSS reset */
  15
  16 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {
  17   margin: 0;
  18   padding: 0;
  19   border: 0;
  20   font-size:100%;
  21 }
  22
  23 fieldset,img { border: 0; }
  24
  25 legend { color: #000; }
  26
  27 sup { vertical-align: text-top; }
  28
  29 sub { vertical-align: text-bottom; }
  30
  31 table {
  32   border-collapse: collapse;
  33   border-spacing: 0;
  34 }
  35
  36 li { list-style: none; }
  37
  38 input,
  39 select,
  40 textarea,
  41 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }
  42
  43 abbr, acronym {
  44   border-bottom: .1em dotted;
  45   cursor: help;
  46 }
  47
  48 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
  49
  50 .clearfix:before,
  51 .clearfix:after {
  52     content: " ";
  53     display: table;
  54 }
  55
  56 .clearfix:after {
  57     clear: both;
  58 }
  59
  60 /* Default rules for the body of every page */
  61
  62 * {
  63   -moz-box-sizing: border-box;
  64   -webkit-box-sizing: border-box;
  65   box-sizing: border-box;
  66 }
  67
  68 body {
  69   font-family: 'Helvetica Neue',Arial,sans-serif;
  70   font-size: $typeheight;
  71   line-height: 1.6666;
  72   color: #222;
  73   background-color: #fff;
  74   margin: 0px;
  75   padding: 0px;
  76   text-align: left;
  77 }
  78
  79 body.slim {
  80   background-color: #f0f0f0;
  81 }
  82
  83 h1, h2, h3 {
  84   margin-top: $lineheight/2;
  85   margin-bottom: $lineheight;
  86   font-weight: bold;
  87   line-height: 1.2;
  88 }
  89
  90 h1, h2 {
  91   font-size: 32px;
  92 }
  93
  94 #content h2 {
  95   font-size: 21px;
  96 }
  97
  98 h3 {
  99   font-size: 21px;
 100   margin-top: $lineheight/2;
 101   margin-bottom: $lineheight;
 102 }
 103
 104 h4,h5,h6 {
 105   font-size: $typeheight;
 106   margin-top: $lineheight/2;
 107   margin-bottom: $lineheight/2;
 108   font-weight: bold;
 109   line-height: 1.5;
 110 }
 111
 112 p, ul {
 113   margin-bottom: $lineheight;
 114 }
 115
 116 p > img {
 117   width: auto;
 118   max-width: 100%;
 119 }
 120
 121 small, aside {
 122   font-size: 12px;
 123 }
 124
 125 h1:first-child,
 126 h2:first-child,
 127 h3:first-child,
 128 h4:first-child,
 129 h5:first-child,
 130 h6:first-child {
 131   margin-top: 0;
 132 }
 133
 134 .column-1 {
 135   width: 50%;
 136   margin: 0 0 $lineheight/2 0;
 137 }
 138
 139 .small_icon {
 140   vertical-align: middle;
 141   margin-right: $lineheight/4;
 142 }
 143
 144 /* Rules for icons */
 145
 146 .icon {
 147   display:inline-block;
 148   vertical-align:top;
 149   width:20px;
 150   height:20px;
 151   background:transparent image-url("sprite.png") no-repeat 0 0;
 152   text-indent:-9999px;
 153   overflow:hidden;
 154   }
 155
 156 .icon-pre-text {
 157     margin-right: 5px;
 158 }
 159
 160 .icon.search      { background-position: 0 0; }
 161 .icon.donate      { background-position: -20px 0; }
 162 .icon.zoomin      { background-position: -40px 0; }
 163 .icon.zoomout     { background-position: -60px 0; }
 164 .icon.geolocate   { background-position: -80px 0; }
 165 .active .icon.geolocate   { background-position: -80px -20px; }
 166 .icon.layers      { background-position: -100px 0; }
 167 .icon.key         { background-position: -120px 0; }
 168 .icon.share       { background-position: -140px 0; }
 169 .icon.clipboard   { background-position: -160px 0; }
 170 .icon.link        { background-position: -180px 0; }
 171 .icon.close       { background-position: -200px 0; }
 172 .icon.check       { background-position: -220px 0; }
 173 .icon.note        { background-position: -240px 0; }
 174
 175 /* Rules for links */
 176
 177 a {
 178   color: #00f;
 179   text-decoration: none;
 180   &:hover {
 181     text-decoration: underline;
 182   }
 183 }
 184
 185 /* Rules for horizontal lines */
 186
 187 hr {
 188   border: none;
 189   background-color: #ccc;
 190   color: #ccc;
 191   height: 1px;
 192 }
 193
 194 /* General styles for tables */
 195
 196 table {
 197   width: 100%;
 198   margin-bottom: $lineheight;
 199   th, td {
 200     text-align: left;
 201     padding: $lineheight/4;
 202     line-height: $lineheight;
 203   }
 204   th {
 205     font-weight: bold;
 206     vertical-align: top;
 207   }
 208   td {
 209     vertical-align: middle;
 210   }
 211 }
 212
 213 /* Rules for the whole left sidebar, including the logo */
 214
 215 #left {
 216   position: absolute;
 217   height: 100%;
 218   width: 185px;
 219   font-size: 11px;
 220   line-height: 1.1;
 221   z-index: 100;
 222   border-right: 1px solid #ccc;
 223 }
 224
 225 /* Rules for the OpenStreetMap logo in the top left corner */
 226
 227 #logo {
 228   display: block;
 229   width: 170px;
 230   min-width: 170px;
 231   padding: $lineheight $lineheight/4;
 232   text-align: center;
 233   margin: auto;
 234 }
 235
 236 #logo h1 {
 237   font-size: 18px;
 238   line-height: 1;
 239   text-align: center;
 240   margin: 0;
 241 }
 242
 243 #logo h2 {
 244   font-size: $lineheight/2;
 245   line-height: 15px;
 246   margin: 0;
 247 }
 248
 249 /* Rules for the site name */
 250
 251 #small-title {
 252   display: none;
 253 }
 254
 255 /* Rules for the introductory text displayed in the left sidebar to new users */
 256
 257 .sidebar-copy {
 258   padding: $lineheight/4 $lineheight/2;
 259   p {
 260     margin: $lineheight/4 0;
 261   }
 262 }
 263 .sidebar-copy.intro {
 264   border-top: 1px solid #ccc;
 265 }
 266
 267 /*
 268  * Rules for alert boxes shown in the left sidebar when important
 269  * information needs to be conveyed such as when the site is
 270  * undergoing maintenance.
 271  */
 272
 273 .sidebar-alert {
 274   padding: $lineheight/4;
 275   border-top: 1px solid #ccc;
 276   margin-top: 4px;
 277   margin-bottom: -5px;
 278   background: #e00;
 279   font-size: 12px;
 280   font-weight: bold;
 281   p {
 282     margin: $lineheight/4;
 283   }
 284 }
 285
 286 /*
 287  * Rules for notice boxes shown in the left sidebar when important, but
 288  * non-critical information needs to be conveyed such as notices about
 289  * donation drives.
 290  */
 291
 292 .sidebar-notice {
 293   padding: $lineheight/4;
 294   border-top: 1px solid #ccc;
 295   margin-top: 4px;
 296   margin-bottom: -5px;
 297   background: #ea0;
 298   font-size: 12px;
 299   p {
 300     margin: $lineheight/4;
 301   }
 302 }
 303
 304 /* Rules for the menu displayed in the left sidebar */
 305
 306 .left_menu {
 307   left: 0px;
 308   margin: 0;
 309   padding: $lineheight/4 $lineheight/2;
 310   font-size: 12px;
 311   line-height: 1.25;
 312   list-style-type: none;
 313   border-bottom: 1px solid #ccc;
 314   border-top: 1px solid #ccc;
 315   img {
 316     margin: $lineheight/2 0px;
 317   }
 318
 319   ul {
 320     padding: 0;
 321     margin: 0;
 322   }
 323
 324   li {
 325     list-style-type: none;
 326     padding: 0;
 327     margin: 0;
 328   }
 329
 330   h4 {
 331     padding: $lineheight/4 0 $lineheight/4 0;
 332     font-size: 12px;
 333     margin: 0;
 334   }
 335
 336   li:last-child h4 {
 337     padding-top: 0;
 338   }
 339 }
 340
 341 /*
 342  * Rules for "optional boxes" which appear in the left sidebar on
 343  * certain pages. Current users are the seach box on the main page
 344  * and the tag cloud on the traces pages.
 345  */
 346
 347 .optionalbox {
 348   left: 0px;
 349   padding: $lineheight/4 $lineheight/2;
 350   margin: $lineheight/4 0;
 351   text-align: left;
 352 }
 353
 354 /* Rules for the search box */
 355
 356 #search_field {
 357   position: relative;
 358
 359   form {
 360     width: 165px;
 361   }
 362
 363   input[type="text"] {
 364     width: 165px;
 365     padding: 3px;
 366     font-size: $typeheight;
 367     line-height: 1.1;
 368     height: 25px;
 369     padding: 2px 0px 2px $lineheight/4;
 370     box-shadow: inset #DDD 0px 1px 3px;
 371   }
 372
 373   input[type="text"]:focus {
 374     outline: none;
 375     border: 1px solid #000;
 376   }
 377
 378   input[type="submit"] {
 379     border: 0;
 380     margin: 0;
 381     padding: 0;
 382     width: 15px;
 383     height: 15px;
 384     min-width: 0;
 385     text-indent: -1000px;
 386     overflow: hidden;
 387     background: image-url("sprite.png") 0 0 no-repeat;
 388     position: absolute;
 389     top: $lineheight/4;
 390     right: $lineheight/4;
 391     cursor: pointer;
 392   }
 393 }
 394
 395 .search_help {
 396   margin: $lineheight/4 0 0 0;
 397 }
 398
 399 /* Utility for de-emphasizing content */
 400
 401 .deemphasize {
 402   color: #999;
 403   a {
 404     color: $blue;
 405   }
 406 }
 407
 408 /* Rules for donation request box */
 409
 410 a.donate {
 411   display: block;
 412   width: 163px;
 413   padding: $lineheight/4;
 414   border: 1px solid #AED1A0;
 415   background: #cbeea7;
 416   font-size: $typeheight;
 417   line-height: 1.4;
 418   text-align: center;
 419   border-radius: 2px;
 420   color: #222;
 421   margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
 422
 423   &:hover {
 424     background: #9ed485;
 425     text-decoration: none;
 426   }
 427 }
 428
 429 /* Rules for Creative Commons logo button */
 430
 431 #cclogo {
 432   margin: $lineheight/2 0;
 433   float: right;
 434 }
 435
 436 /* Rules for tabbed navigation bar */
 437
 438 #top-bar {
 439   position: relative;
 440   margin-left: 185px;
 441   height: 30px;
 442   border-bottom: 1px solid #ccc;
 443   background: white;
 444   z-index: 100;
 445 }
 446
 447 .site-edit #top-bar,
 448 .site-index #top-bar,
 449 .site-export #top-bar {
 450   position: fixed;
 451   left: 0;
 452   right: 0;
 453 }
 454
 455 #tabnav {
 456   height: 29px;
 457   margin-bottom:0;
 458   overflow: hidden;
 459   li {
 460     display: inline;
 461   }
 462   a, a:link, a:visited {
 463     float: left;
 464     font-weight: bold;
 465     padding: 3px $lineheight/2;
 466     text-decoration: none;
 467     color: #333;
 468     float: left;
 469     margin-right: 1px;
 470     -webkit-transition: color 200ms ease-in;
 471        -moz-transition: color 200ms ease-in;
 472          -o-transition: color 200ms ease-in;
 473             transition: color 200ms ease-in;
 474   }
 475 }
 476
 477 .site-index #tabnav a#viewanchor,
 478 .site-edit #tabnav a#editanchor,
 479 .changeset-list #tabnav a#historyanchor,
 480 .site-export #tabnav a#exportanchor {
 481   border-bottom: 1px solid #aaa;
 482   background: #9ed485;
 483   color: #000;
 484 }
 485
 486 #tabnav a:link:hover, #tabnav a:visited:hover {
 487   text-decoration: underline;
 488 }
 489
 490 #tabnav a:link.disabled,
 491 #tabnav a:visited.disabled,
 492 #tabnav a:link:hover.disabled,
 493 #tabnav a:visited:hover.disabled {
 494   color: #ccc;
 495   cursor: default;
 496   &:hover {
 497     text-decoration: none;
 498   }
 499 }
 500
 501 /* Utility for styling notification numbers */
 502
 503 .count-number {
 504   padding: 2px $lineheight/4;
 505   border-radius: 2px;
 506   background: #d7d7ff;
 507   margin: 0 2px;
 508   font-size: 11px;
 509   color: #333;
 510 }
 511
 512 /* Rules for greeting bar in the top right corner */
 513
 514 #greeting {
 515   float: right;
 516   padding-top: 3px;
 517   margin-right: $lineheight/4;
 518 }
 519
 520 .greeting-bar-unread {
 521   font-weight: bold;
 522 }
 523
 524 /* Rules for the message shown in place of the map when javascript is disabled */
 525
 526 #noscript {
 527   z-index: 20000000;
 528   position: absolute;
 529   top: 15px;
 530   left: 15px;
 531 }
 532
 533 /* Rules for Leaflet maps */
 534
 535 .leaflet-control .control-button {
 536   display: block;
 537   height: 40px;
 538   width: 40px;
 539   background-color: white;
 540   background-color: rgba(255,255,255,.8);
 541   border-radius: 4px;
 542   margin-bottom: 10px;
 543 }
 544
 545 .leaflet-control .zoomin,
 546 .control-layers .control-button {
 547   margin-bottom: 0px;
 548   border-radius: 4px 4px 0px 0px;
 549 }
 550
 551 .site .leaflet-control .zoomout,
 552 .control-key .control-button {
 553   margin-bottom: 0px;
 554   border-radius: 0px;
 555 }
 556
 557 .leaflet-control .zoomout,
 558 .control-locate .control-button,
 559 .control-share .control-button {
 560   border-radius: 0px 0px 4px 4px;
 561 }
 562
 563 .leaflet-control .control-button:hover {
 564   background-color: white;
 565 }
 566
 567 .leaflet-control .control-button .icon {
 568   margin: 10px;
 569 }
 570
 571 /* Rules for the home page */
 572
 573 .site-export #map,
 574 .site-index #map,
 575 .site-edit #map {
 576   height: 100%;
 577   overflow: hidden;
 578 }
 579
 580 #map-ui {
 581   display: none;
 582   position: relative;
 583   float: right;
 584   width: 250px;
 585   height: 100%;
 586   background: white;
 587   border-left: 1px solid #CCC;
 588   overflow: auto;
 589
 590   .section {
 591     border-bottom: 1px solid #DDD;
 592     padding: 15px;
 593   }
 594
 595   a.close-button {
 596     float: right;
 597     padding:5px;
 598     font-size:20px;
 599     line-height:10px;
 600     color:#222;
 601     border:1px solid #ddd;
 602   }
 603 }
 604
 605 .layers-ui {
 606   ul, li:last-child {
 607     margin-bottom: 0;
 608   }
 609
 610   li {
 611     border-radius: 4px;
 612     overflow: hidden;
 613     margin-bottom: 10px;
 614   }
 615
 616   label {
 617     display: block;
 618     padding: 5px 5px 5px 7px;
 619     background-color: #eee;
 620     cursor: pointer;
 621   }
 622
 623   li.active label {
 624     background-color: #ccc;
 625   }
 626
 627   .base-layers {
 628     .leaflet-container {
 629       width: 100%;
 630       height: 50px;
 631       cursor: pointer;
 632     }
 633   }
 634 }
 635
 636 .share-ui {
 637   .share-link {
 638     li {
 639       display: inline-block;
 640       width: 50%;
 641     }
 642   }
 643 }
 644
 645 .site-index .leaflet-top,
 646 .site-export .leaflet-top {
 647   top: $lineheight/2 !important;
 648   .leaflet-control {
 649     margin-top: 0px !important;
 650   }
 651 }
 652
 653 .leaflet-popup-scrolled {
 654   padding-right: $lineheight;
 655   border-bottom: 0px !important;
 656   border-top: 0px !important;
 657 }
 658
 659 .leaflet-popup-content-wrapper {
 660   border-radius: 4px !important;
 661   -webkit-border-radius: 4px !important;
 662 }
 663
 664 /* Rules for edit menu */
 665
 666 .menuicon {
 667   padding: 0 $lineheight/4;
 668   font-weight: normal;
 669   display: inline-block;
 670   &:hover {
 671     text-decoration: none !important;
 672   }
 673 }
 674
 675 .menu {
 676   display: none;
 677   z-index: 10000;
 678   position: absolute;
 679   background-color: #ffffff;
 680   border: 1px solid $keyline;
 681   border-top: 0px;
 682   ul {
 683     margin: 0px;
 684   }
 685   li {
 686     padding: 2px $lineheight/4;
 687     border-top: 1px solid #eee;
 688     white-space: nowrap;
 689   }
 690 }
 691
 692 /* Rules for attribution text under the main map shown on printouts */
 693
 694 #attribution {
 695   display: none;
 696 }
 697
 698 .attribution_license,
 699 .attribution_project {
 700   text-align: left;
 701 }
 702
 703 .attribution_notice {
 704   text-align: center;
 705 }
 706
 707 /* Rules for the popout map sidebar */
 708
 709 #sidebar {
 710   display: none;
 711   position: relative;
 712   float: left;
 713   overflow: auto;
 714   border-right: 1px solid $keyline;
 715   width: 33.3333%;
 716   ul {
 717     margin-bottom: 0;
 718     &:last-child {
 719         border-bottom: 1px solid #ccc;
 720     }
 721     li {
 722       margin-bottom: $lineheight/4;
 723       &:last-child {
 724         margin-bottom: 0;
 725       }
 726     }
 727   }
 728 }
 729
 730 .sidebar_heading {
 731   position: relative;
 732   padding: $lineheight/2 $lineheight;
 733   z-index: 9999;
 734   background: $offwhite;
 735   border-bottom: 1px solid #ccc;
 736   h4 {
 737     margin: 0;
 738   }
 739 }
 740
 741 .sidebar_close {
 742   position: absolute;
 743   height: $lineheight;
 744   top: 0px;
 745   bottom: 0;
 746   right: $lineheight;
 747   margin: auto;
 748 }
 749
 750 #sidebar_content {
 751   position: relative;
 752   margin-bottom: 20px;
 753   width: 100%;
 754   h4 {
 755     padding: 0 $lineheight $lineheight/2 $lineheight;
 756     margin-top: $lineheight/2;
 757     margin-bottom: 0;
 758     border-bottom: 1px solid #ddd;
 759   }
 760 }
 761
 762 /* Rules for the map key which appears in the popout sidebar */
 763
 764 #mapkey {
 765  .mapkey-table-key img {
 766     display: block;
 767     margin-left: auto;
 768     margin-right: auto;
 769   }
 770   td {
 771     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
 772   }
 773 }
 774
 775 /* Rules for search results which appear in the popout sidebar */
 776
 777 .search_searching {
 778   margin-top: $lineheight/4;
 779   margin-bottom: $lineheight/4;
 780 }
 781
 782 .search_results_entry {
 783   margin-bottom: 0;
 784
 785   .search_details {
 786     display: block;
 787     text-align: right;
 788   }
 789 }
 790
 791 .search_results_entry .search_searching {
 792   text-align: center;
 793   margin: $lineheight auto;
 794   width: $lineheight;
 795   display: block;
 796 }
 797
 798 ul.results-list li { border-bottom: 1px solid #ccc; }
 799
 800 .search_results_error {
 801   color: #f00;
 802 }
 803
 804 /* Rules for data browser information which appears in the popout sidebar */
 805
 806 #browse_content {
 807   position: relative;
 808   .browse_show_list.button {
 809     position: absolute;
 810     left: $lineheight;
 811     right: $lineheight;
 812     bottom: -40px;
 813     margin-bottom: 0;
 814   }
 815   a.more-details {
 816     position: absolute;
 817     top: 0;
 818     right: $lineheight;
 819   }
 820   ul li {
 821     margin-bottom: 0;
 822   }
 823 }
 824
 825 .browse_details {
 826   position: relative;
 827 }
 828
 829 .browse_status {
 830   display: none;
 831 }
 832
 833 /* Rules for export information which appears in the popout sidebar */
 834
 835 .export_bounds {
 836   text-align: center;
 837 }
 838
 839 .export_area_inputs {
 840   margin-bottom: $lineheight/2;
 841   input[type="text"] {
 842     width: 60px;
 843     margin-bottom: 5px;
 844   }
 845 }
 846
 847 .export_bound {
 848   margin: $lineheight/4;
 849 }
 850
 851 .export_details input[type="text"]#export_html_text {
 852   width: 100%;
 853 }
 854
 855 #sidebar #marker_inputs li:last-child {
 856   margin-bottom: $lineheight/2;
 857 }
 858
 859 #export_osm,
 860 #export_mapnik,
 861 #export_osmarender {
 862   display: none;
 863 }
 864
 865 /* Rules for the main content area */
 866
 867 #content {
 868   padding: $lineheight;
 869   position: relative;
 870 }
 871
 872 .site-edit #content,
 873 .site-index #content,
 874 .site-export #content {
 875   position: fixed;
 876   padding: 0;
 877   top: 30px; bottom: 0;
 878   left: 184px; right: 0;
 879   border-left: 1px solid #ccc;
 880 }
 881
 882 .wrapper {
 883   margin-left: 184px;
 884   border-left: 1px solid #ccc;
 885   text-align: left;
 886 }
 887
 888 .site-edit #content {
 889   top: 30px;
 890 }
 891
 892 #content.maximised {
 893   top: 0;
 894   left: 0;
 895   right: 0;
 896   bottom: 0;
 897   border: 0;
 898   z-index: 1000;
 899 }
 900
 901 #slim_container {
 902   width: 100%;
 903 }
 904
 905 #slim_container_content {
 906   max-width: 50em;
 907   background-color: #FFFFFF;
 908   margin: $lineheight/2 auto;
 909   padding: 3px;
 910   border-radius: 25px;
 911   -moz-border-radius: 25px;
 912   border: 1px solid #e6e6e6;
 913 }
 914
 915 #slim_content {
 916   margin: $lineheight/2;
 917   margin-top: 95px;
 918   max-width: 50em;
 919
 920   .content-heading {
 921     margin-bottom: 15px;
 922   }
 923 }
 924
 925 #slim_header {
 926   margin: 30px $lineheight/2;
 927   position: absolute;
 928   top: 0px;
 929   margin-right: $lineheight/4;
 930   img {
 931     vertical-align: middle;
 932     margin-bottom: $lineheight/4;
 933     margin-right: $lineheight/4;
 934   }
 935 }
 936
 937 .content-heading {
 938   position: relative;
 939   padding: $lineheight;
 940   background: $offwhite;
 941   h1, h2 {
 942     margin-bottom: $lineheight/2;
 943     line-height: 100%;
 944     &:last-child {
 945       margin-bottom: 0;
 946     }
 947   }
 948   p {
 949     margin-top: $lineheight/2;
 950     margin-bottom: 0px;
 951   }
 952 }
 953
 954 /* Rules for small maps in content areas */
 955
 956 .content_map {
 957   position: relative;
 958   width: 45%;
 959   height: 400px;
 960   border: 1px solid #ccc;
 961   margin-bottom: $lineheight;
 962   float: right;
 963 }
 964
 965 .content_map #small_map {
 966   height: 100%;
 967   width: 100%;
 968   margin-bottom: $lineheight;
 969 }
 970
 971 /* Rules for the changeset list shown by the history tab etc */
 972
 973 #changeset_list {
 974   width: 100%;
 975   ul {
 976     padding: $lineheight/2 0;
 977     margin-bottom: 0px;
 978     border-top: 1px solid #ccc;
 979     &:last-child {
 980       border-bottom: 1px solid #ccc;
 981     }
 982   }
 983   .selected {
 984     background: #FFFFC0;
 985   }
 986   .date,
 987   .user {
 988     border-left: 1px solid #ccc;
 989     padding-left: $lineheight/4;
 990     margin-right: $lineheight/4;
 991   }
 992 }
 993
 994 #changeset_list_map_wrapper {
 995   position: absolute;
 996   width: 50%;
 997   height: 490px;
 998   top: 0;
 999   right: 0;
1000 }
1001
1002 #changeset_list_map_wrapper.scrolled {
1003   position: fixed;
1004 }
1005
1006 #changeset_list_map {
1007   position: absolute;
1008   bottom: $lineheight;
1009   top: $lineheight;
1010   right: $lineheight;
1011   left: $lineheight;
1012   border: 1px solid #ccc;
1013 }
1014
1015 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1016   margin-left: 93px;
1017 }
1018
1019 /* Rules for the data browser */
1020
1021 .browse-section {
1022   border-top: 1px solid #ccc;
1023   margin-top: $lineheight/2;
1024   padding-top: $lineheight/2;
1025   &:first-child {
1026     margin-top: 0;
1027   }
1028   .warning {
1029     background-color: #ffe0cc;
1030     margin: 0px;
1031     padding: 4px 6px;
1032     max-width: 100%;
1033   }
1034   h4, p {
1035     margin-bottom: $lineheight/4;
1036   }
1037   p, ul, .bbox, .geo {
1038     display: inline-block;
1039     vertical-align: top;
1040     max-width: 65%;
1041   }
1042   ul p {
1043     margin-left: 0;
1044     margin-bottom: 0;
1045   }
1046   h4 {
1047     width: 33.3333%;
1048     display: inline-block;
1049     vertical-align: top;
1050   }
1051 }
1052
1053 .bbox {
1054   div {
1055     width: 33.3333%;
1056     text-align: center;
1057     padding: $lineheight/4 0;
1058     overflow: hidden;
1059     text-overflow: ellipsis;
1060     float: left;
1061   }
1062   .max_lat,
1063   .min_lat {
1064     margin-left: auto;
1065     margin-right: auto;
1066     width: 100%;
1067   }
1068 }
1069
1070 #browse_map .geolink {
1071   display: none;
1072 }
1073
1074 #browse_map .secondary-actions {
1075   margin-bottom: $lineheight/2;
1076 }
1077
1078 /* Rules for the trace list shown by the traces tab etc */
1079
1080 #trace_list {
1081   font-size: $lineheight/2;
1082   border-width: 0px;
1083   text-align: right;
1084
1085   .trace_summary {
1086     font-size: 12px;
1087     color: gray;
1088   }
1089
1090   .trace_pending {
1091     color: red;
1092   }
1093
1094   .trace_public {
1095     color: green;
1096   }
1097
1098   .trace_identifiable {
1099     color: green;
1100   }
1101
1102   .trace_trackable {
1103     color: red;
1104   }
1105
1106   .trace_private {
1107     color: red;
1108   }
1109 }
1110
1111 /* Rules for the user profile page */
1112
1113 #userinformation {
1114
1115   min-height: 100px;
1116   .userinformation-inner {
1117     float: left;
1118   }
1119   h2 {
1120     margin-top: 0;
1121   }
1122   .user-description {
1123     width: 100%;
1124     clear: both;
1125   }
1126   .deemphasize {
1127     margin: 0;
1128   }
1129 }
1130
1131 .admin-user-info small {
1132   margin-bottom: $lineheight/2;
1133   display: inline;
1134   margin-right: $lineheight;
1135 }
1136
1137 .activity-block {
1138   clear: left;
1139   border-bottom: 1px solid #ccc;
1140   padding-bottom: $lineheight;
1141   float: left;
1142   h3 {
1143     margin-bottom: $lineheight/2;
1144   }
1145 }
1146
1147 .contact-activity {
1148   margin-top: $lineheight;
1149   width: 100%;
1150 }
1151
1152 .activity-details p {
1153   margin-left: 70px;
1154   margin-bottom: 0;
1155 }
1156
1157 #friends-container .contact-activity ul {
1158   margin-left: 70px;
1159 }
1160
1161 .user-view {
1162   p#no_home_location {
1163     margin: $lineheight;
1164   }
1165   .user_thumbnail {
1166     margin-top: $lineheight/4;
1167     float: left;
1168   }
1169 }
1170
1171 /* Rules for the user map */
1172
1173 .content_map .leaflet-popup-content {
1174   margin: $lineheight/2;
1175   min-height: 50px;
1176 }
1177
1178 /* Rules for user popups on maps */
1179
1180 .user_popup {
1181   min-width: 200px;
1182   p {
1183     padding: 0 0 5px 0;
1184     margin-top: 0 0 0 60px;
1185     font-size: 12px;
1186   }
1187   img.user_thumbnail {
1188     float: left;
1189     margin: 0 $lineheight/2 0 0;
1190   }
1191 }
1192
1193 /* Rules for the user list */
1194
1195 #user_list {
1196   font-size: $lineheight/2;
1197   width: 100%;
1198
1199   tr {
1200     vertical-align: middle;
1201   }
1202
1203   p {
1204     margin-top: 0px;
1205     margin-bottom: 0px;
1206   }
1207 }
1208
1209 #user_list_actions {
1210   float: right;
1211   margin-top: $lineheight/2;
1212 }
1213
1214 /* Rules for the diary list page */
1215
1216 .diary_entry-list img.user_thumbnail {
1217   float: left;
1218 }
1219
1220 .diary_post {
1221   max-width: 740px;
1222   position: relative;
1223   margin-top: $lineheight/2;
1224   padding-top: $lineheight;
1225   border-top: 1px solid #ccc;
1226
1227   &:first-child {
1228     margin-top: 0;
1229     border-top: 0;
1230     padding-top: 0;
1231   }
1232   h1, h2 {
1233     font-size: 21px;
1234     line-height: 1em;
1235   }
1236   small.deemphasize {
1237     float: left;
1238     display: block;
1239   }
1240   ul.secondary-actions { display: inline-block;}
1241 }
1242
1243 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1244   display: inline;
1245 }
1246
1247 #content  .post_heading {
1248   margin-bottom: $lineheight;
1249   h2 {
1250     margin-top: 0;
1251     margin-bottom: $lineheight/2;
1252     font-size: 24px;
1253   }
1254 }
1255
1256 /* Rules for the diary entry page */
1257
1258 .diary_entry {
1259   #map {
1260     position: relative;
1261     width: 90%;
1262     height: 400px;
1263     border: 1px solid #ccc;
1264     display: none;
1265     margin-bottom: $lineheight;
1266   }
1267   #newcomment {
1268     border-top: 1px solid #ccc;
1269     padding-top: $lineheight;
1270     margin-top: $lineheight/2;
1271   }
1272   .comments {
1273     max-width: 740px;
1274   }
1275   .diary-comment {
1276     margin-top: $lineheight/2;
1277     border-top: 1px dashed #ccc;
1278     padding-top: $lineheight/2;
1279     &:first-child {
1280       margin-top: $lineheight;
1281       padding-top: $lineheight;
1282       border-top: 1px solid #ccc;
1283     }
1284     p {
1285       margin-bottom: $lineheight/2;
1286     }
1287     .comment-heading {
1288       margin-bottom: 0;
1289       margin-top: 0;
1290     }
1291   }
1292 }
1293
1294 .diary_entry-view img.user_thumbnail {
1295   float: left;
1296 }
1297
1298 /* Rules for the login page */
1299
1300 #login_openid_buttons {
1301   margin-bottom: 0;
1302 }
1303
1304 #login_openid_buttons li {
1305   float: left;
1306   padding: $lineheight/4 $lineheight/2;
1307 }
1308
1309 /* Rules for the account confirmation page */
1310
1311 #terms {
1312   .legale {
1313     border: 1px solid #ccc;
1314     padding: $lineheight;
1315     margin-bottom: $lineheight;
1316     overflow: auto;
1317     height: 10em;
1318
1319     &:p#last {
1320       margin-bottom: 0px;
1321     }
1322
1323     &:ol {
1324       margin-bottom: 0px;
1325     }
1326
1327     &:img {
1328       display: block;
1329       margin: $lineheight auto inherit auto;
1330     }
1331   }
1332
1333   form.sign {
1334     input[type=submit] {
1335       float: left;
1336     }
1337     #decline {
1338       background: $grey;
1339       &:hover {
1340         background: darken($grey, $hovercolor);
1341       }
1342     }
1343   }
1344   fieldset {
1345     margin-bottom: $lineheight;
1346   }
1347   #contributorGuidance {
1348     background-color: $offwhite;
1349     border-radius: 4px;
1350     -moz-border-radius: 4px;
1351   }
1352   .signing-buttons {
1353     height: 50px;
1354   }
1355 }
1356
1357 /* Rules for the account settings page */
1358
1359 #accountForm .user_map {
1360   position: relative;
1361   width: 500px;
1362   height: 400px;
1363   border: 1px solid #ccc;
1364 }
1365
1366 #accountForm .user_image {
1367   margin-bottom: 0;
1368 }
1369
1370 #accountForm #user_image {
1371   margin-left: 20px;
1372 }
1373
1374 #accountForm ul.accountImage-options {
1375   margin-left: 120px;
1376 }
1377
1378 .nohome .location {
1379   display: none;
1380 }
1381
1382 #homerow .message {
1383   display: none;
1384 }
1385
1386 .nohome .message {
1387   display: inline !important;
1388 }
1389
1390 .content_map.settings_map {
1391   width: 50%;
1392   float: none;
1393 }
1394
1395 /* Rules for the oauth settings page */
1396
1397 .oauth_clients .buttons .oauth-edit {
1398   border-radius: 2px 0 0 2px;
1399 }
1400
1401 .oauth_clients .buttons .oauth-delete {
1402   border-radius: 0 2px 2px 0;
1403 }
1404
1405 /* Rules for messages pages */
1406
1407 .messages {
1408   width: 100%;
1409   border: 1px solid #ddd;
1410
1411   input[type="submit"] {
1412     margin: auto;
1413   }
1414   tbody tr {
1415     border-top: 1px solid #ccc;
1416   }
1417
1418   .inbox-row {
1419     background: #f8f8ff;
1420   }
1421
1422   .inbox-row-unread {
1423     background:#CBEEA7;
1424   }
1425
1426   .right {
1427     float: right;
1428   }
1429
1430   tr td,
1431   tr th {
1432     padding: $lineheight/4;
1433   }
1434   p:last-child,
1435   h2:last-child,
1436   h3:last-child,
1437   ol:last-child,
1438   ul:last-child {
1439     margin-bottom:0;
1440   }
1441   tr td {
1442     height: 30px;
1443     border-right: 1px solid $keyline;
1444   }
1445 }
1446
1447 .inbox-row .inbox-mark-read {
1448   display: none;
1449 }
1450
1451 .info-line {
1452   margin-bottom: $lineheight;
1453   padding: $lineheight/4 0px 4px 0px;
1454   border-bottom: 1px solid #ccc;
1455
1456   form, form div {
1457     display: inline;
1458   }
1459 }
1460
1461 .info-line .user_thumbnail_tiny {
1462   vertical-align: middle;
1463 }
1464
1465 .inbox-mark-unread,
1466 .inbox-mark-read,
1467 .inbox-delete {
1468   width: 1%;
1469 }
1470
1471 .inbox-row-unread .inbox-mark-unread {
1472   display: none;
1473 }
1474
1475 .message-read .message-buttons {
1476   margin-top: $lineheight;
1477   padding-top: $lineheight;
1478   border-top: 1px solid $keyline;
1479 }
1480
1481 .message-read .buttons .mark-unread-button {
1482   border-radius: 0;
1483 }
1484
1485 /* Rules for "flash" notice boxes shown at the top of the content area */
1486
1487 .flash {
1488     padding: $lineheight;
1489   &#error {
1490     background-color: #ff7070;
1491   }
1492   &#warning {
1493     background-color: #ffe0cc;
1494   }
1495   &#notice {
1496     background-color: #CBEEA7;
1497   }
1498 }
1499
1500 /* Rules for highlighting fields with rails validation errors */
1501
1502 .field_with_errors {
1503   padding: 2px;
1504   background-color: #ff7070;
1505   display: table;
1506 }
1507
1508 /* Rules for rails validation error boxes */
1509
1510 #errorExplanation {
1511   width: 400px;
1512   border: 2px solid #ff7070;
1513   padding: 0 $lineheight/2;
1514   margin-bottom: $lineheight;
1515   background-color: #f0f0f0;
1516
1517   h2 {
1518     margin: 0 -10px 10px -10px;
1519     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1520     font-weight: bold;
1521     font-size: 12px;
1522     background-color: #c00;
1523     color: #fff;
1524     text-align: left;
1525   }
1526
1527   p {
1528     color: #333;
1529     margin-bottom: 0px;
1530     padding: $lineheight/4;
1531   }
1532
1533   ul {
1534     padding-left: $lineheight;
1535
1536     li {
1537       font-size: 12px;
1538       list-style: disc;
1539     }
1540   }
1541 }
1542
1543 /* Rules for forms */
1544
1545 .standard-form {
1546   fieldset {
1547     margin-bottom: $lineheight;
1548   }
1549   label.standard-label {
1550     display: block;
1551     margin-bottom: $lineheight/4;
1552     font-size: $typeheight;
1553     font-weight: bold;
1554     line-height: 1.5;
1555   }
1556   label.standard-label.secondary {
1557     display: inline-block;
1558     font-weight: normal;
1559   }
1560   .form-help {
1561     font-weight: normal;
1562   }
1563   .form-column {
1564     float: left;
1565     margin-right: 20px;
1566   }
1567   .form-divider {
1568     margin-top: $lineheight;
1569     padding-top: $lineheight;
1570     border-top: 1px solid $keyline;
1571   }
1572   .form-row {
1573     margin-bottom: $lineheight/2;
1574   }
1575   .form-list {
1576     margin-bottom: 0;
1577   }
1578   .form-list li {
1579     margin-bottom: 5px;
1580    }
1581   input[type="checkbox"],
1582   input[type="radio"] {
1583     float: left;
1584     margin-top: 5px;
1585   }
1586 }
1587
1588 #remember_me_openid {
1589   display: block;
1590 }
1591
1592 input[type="checkbox"],
1593 input[type="radio"] {
1594     margin-right: 5px;
1595 }
1596
1597 input[type="text"],
1598 input[type="email"],
1599 input[type="url"],
1600 input[type="password"],
1601 textarea {
1602   border: 1px solid #ccc;
1603   padding: 2px 5px;
1604   margin: 0;
1605   width: 200px;
1606 }
1607
1608 textarea {
1609   padding: 5px;
1610   width: 100%;
1611   height: 100% !important;
1612 }
1613
1614 /* Rules for user images */
1615
1616 img.user_image {
1617   max-width: 100px;
1618   max-height: 100px;
1619   border: 1px solid #ccc;
1620   margin-bottom: $lineheight;
1621   float: left;
1622   margin-right: $lineheight;
1623 }
1624
1625 img.user_thumbnail {
1626   max-width: 50px;
1627   max-height: 50px;
1628   border: 1px solid #ccc;
1629   margin-right: $lineheight;
1630 }
1631
1632 img.user_thumbnail_tiny {
1633   max-width: 25px;
1634   max-height: 25px;
1635   border: 1px solid #ccc;
1636 }
1637
1638 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1639
1640 .nowrap {
1641   white-space: nowrap;
1642 }
1643
1644 /* Rules for geo microformats */
1645
1646 abbr.geo {
1647   border-bottom: none;
1648 }
1649
1650 /* Rules for RSS buttons */
1651
1652 .rsssmall {
1653   position: relative;
1654   top: 5px;
1655 }
1656
1657 /* General styles for action lists / subnavs / pager navs */
1658
1659 ul.secondary-actions {
1660   font-style: normal;
1661   margin-bottom: 0;
1662   margin-left: 0;
1663   &.pager {
1664     display: inline-block;
1665     margin-right: 60px;
1666   }
1667   li {
1668     display: block;
1669     float: left;
1670     list-style: none;
1671     border-left: 1px solid #ccc;
1672     padding-left: $lineheight/4;
1673     margin-right: $lineheight/4;
1674     &:first-child {
1675       border-left: 0;
1676       padding-left: 0;
1677     }
1678     &:last-child {
1679       margin-right: 0px;
1680     }
1681   }
1682 }
1683
1684 /* Utility for managing inner content areas */
1685
1686 .inner22 { padding: $lineheight;}
1687
1688 .inner12 { padding: $lineheight/2 $lineheight;}
1689
1690 .inner11 { padding: $lineheight/2;}
1691
1692 .inner02 { padding: 0 $lineheight;}
1693
1694 /* Utility for general button styles */
1695
1696 input[type="button"],
1697 input[type="submit"],
1698 input[type="reset"],
1699 a.button {
1700   cursor: pointer;
1701   border: 0;
1702   display: inline-block;
1703   line-height: 20px;
1704   padding: $lineheight/4 $lineheight/2;
1705   min-width: 120px;
1706   margin: 0 0 $lineheight/2 0;
1707   color: white;
1708   background: $blue;
1709   text-align: center;
1710   border-radius: 2px;
1711   -moz-border-radius: 2px;
1712   &:hover {
1713     background: darken($blue, $hovercolor);
1714     text-decoration: none;
1715   }
1716   &.deemphasize {
1717     background: $lightblue;
1718     &:hover {
1719       background: darken($lightblue, $hovercolor);
1720     }
1721   }
1722   &:disabled {
1723     background: $lightblue;
1724   }
1725   &:last-child {
1726     margin-bottom: 0;
1727   }
1728 }
1729
1730 .buttons {
1731   min-width: 200px;
1732   input[type="submit"],
1733   input[type="button"],
1734   input[type="reset"],
1735   .button {
1736     box-sizing: border-box;
1737     float: left;
1738     border-radius: 0;
1739     margin:0;
1740     min-width: 100px;
1741     max-width: 150px;
1742     border-right:1px solid white;
1743   }
1744   input:first-child,
1745   .button:first-child {
1746     border-radius:2px 0 0 2px;
1747   }
1748   input:last-child,
1749   .button:last-child {
1750     border-radius:0 2px 2px 0;
1751     border-right-width: 0;
1752   }
1753   input:only-child,
1754   .button:only-child,
1755   *[value="Hide"] + input:last-child,
1756   *[value="Hide"] + .button:last-child {
1757     border-radius:2px;
1758     border-right-width: 0;
1759   }
1760     /* if a 3-button set has a hidden middle button */
1761   *[value="Hide"] + input:nth-child(3),
1762   *[value="Hide"] + .button:nth-child(3) {
1763     border-radius:0 2px 2px 0;
1764     border-right-width: 0;
1765   }
1766   /* if a 3-button set starts with a hidden button */
1767   *[value="Hide"] + input:nth-child(2):not(:last-child),
1768   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1769     border-radius:2px 0 0 2px;
1770     border-right-width: 1px solid white;
1771   }
1772 }
1773
1774 /* Rules for doing distinct colour of alternate table rows */
1775
1776 .table0,
1777 .item0 {
1778   background: $offwhite;
1779 }
1780
1781 .table1,
1782 .item1 {
1783   background: #fff;
1784 }
1785
1786 /* Rules for OpenID logo */
1787
1788 .openid_logo {
1789   vertical-align: text-bottom;
1790   border: 0;
1791 }
1792
1793 /* Rules for rich text */
1794
1795 .richtext,
1796 .prose {
1797   h1, h2 {
1798     padding-bottom: $lineheight/2;
1799     border-bottom: 1px dashed #cccccc;
1800     margin-bottom: $lineheight/2;
1801   }
1802
1803   h1 {
1804     font-size: 24px;
1805   }
1806
1807   h2 {
1808     font-size: 18px;
1809   }
1810
1811   h3 {
1812     font-size: $typeheight;
1813   }
1814
1815   code {
1816     font-size: 13px;
1817     background: #e8e8e8;
1818     padding: 2px 3px;
1819   }
1820
1821   pre {
1822     font-size: 13px;
1823     background: #e8e8e8;
1824     padding: 2px 3px;
1825
1826     code {
1827       padding: 0;
1828     }
1829   }
1830
1831   img {
1832     padding: $lineheight;
1833     background-color: $offwhite;
1834     display: block;
1835     max-width: 100%;
1836     margin: auto;
1837   }
1838
1839   blockquote {
1840     border-left: $lineheight solid $offwhite;
1841     padding-left: $lineheight;
1842     margin: 0;
1843     color: #7E7E7E;
1844   }
1845
1846   ul, ol {
1847     font-style: italic;
1848     padding-left: $lineheight;
1849     margin-bottom: $lineheight;
1850     margin-left: $lineheight;
1851   }
1852
1853   ul li {
1854     list-style: disc;
1855   }
1856
1857   ol li {
1858     list-style: decimal;
1859   }
1860 }
1861
1862 .diary_post .richtext {
1863     margin-top: $lineheight;
1864   }
1865
1866 .comments .richtext {
1867   margin-left: 70px;
1868   margin-top: 0;
1869 }
1870
1871 /* Rules for rich text editors */
1872
1873 .richtext_container {
1874   margin-bottom: $lineheight;
1875
1876   .richtext_content {
1877     width: 50%;
1878     display: inline-block;
1879     vertical-align: top;
1880
1881     .richtext_preview {
1882       display: inline-block;
1883       padding: $lineheight;
1884       background-color: $offwhite;
1885       overflow-x: auto;
1886
1887       &.loading {
1888         background-image: image-url("loading.gif");
1889         background-repeat: no-repeat;
1890         background-position: center;
1891       }
1892
1893       > :first-child {
1894         margin-top: 0px;
1895       }
1896     }
1897   }
1898
1899   .richtext_help {
1900     display: inline-block;
1901     vertical-align: top;
1902     margin-left: 15px;
1903     background-color: #f8f8ff;
1904     padding: $lineheight/2;
1905     width: 220px;
1906
1907     ul {
1908       margin-bottom: 0;
1909     }
1910
1911     h4.heading, li {
1912       border-bottom: 1px solid #ccc;
1913       margin-bottom: $lineheight/4;
1914       padding-bottom: $lineheight/4;
1915     }
1916
1917     li h4, li span, li p {
1918       display: inline-block;
1919       vertical-align: top;
1920       font-size: 11px;
1921     }
1922
1923     li h4 {
1924       width: 40%;
1925       margin: 0;
1926     }
1927
1928     li span, li p {
1929       width: 50%;
1930       margin-left: $lineheight/2;
1931       margin-bottom: $lineheight/4;
1932       white-space: nowrap;
1933     }
1934   }
1935 }
1936
1937 /* Rules for the user notes list */
1938
1939 .note_list {
1940   tr.creator {
1941     background-color: #eeeeee;
1942   }
1943
1944   td {
1945     padding: 3px;
1946   }
1947
1948   p {
1949     margin-bottom: 0px;
1950   }
1951 }
1952
1953 /* Rules for the notes interface */
1954
1955 .leaflet-popup-content .note {
1956   padding-top: $lineheight/2;
1957 }
1958
1959 .leaflet-popup-content .note {
1960   h2 {
1961     margin-bottom: $lineheight/2;
1962   }
1963
1964   div {
1965     margin-top: $lineheight/2;
1966   }
1967
1968   .permalink {
1969     position: absolute;
1970     top: $lineheight/4;
1971     left: $lineheight/4;
1972     min-width: 15px;
1973     min-height: 15px;
1974     background: image-url("sprite.png") 0 -45px no-repeat;
1975   }
1976
1977   .permalink span {
1978     display: none;
1979     padding-left: $lineheight;
1980   }
1981
1982   .permalink:hover span {
1983     display: block;
1984   }
1985
1986   .warning {
1987     display: block;
1988     background-color: #ffe0cc;
1989     padding: 4px 6px;
1990     margin-bottom: $lineheight/2;
1991   }
1992
1993   .comment_body {
1994     margin-top: 2px;
1995     margin-bottom: 2px;
1996
1997     p {
1998       margin-top: 0px;
1999       margin-bottom: 0px;
2000     }
2001   }
2002
2003   .comment {
2004     width: 100%;
2005     height: 100px;
2006   }
2007
2008   .buttons {
2009     margin-top: $lineheight/4;
2010     text-align: right;
2011   }
2012 }
2013
2014 /*
2015  * Rules for the iD editor
2016  */
2017 .id-embed {
2018   width: 100%;
2019   height: 100%;
2020 }
2021
2022 /* Rules for rotating sidebar ads */
2023 .ad-container {
2024   display: block;
2025   height: 120px;
2026   overflow: hidden;
2027   position: relative;
2028   border-bottom: 1px solid #ccc;
2029 }
2030
2031 .ad {
2032   height: 100px;
2033   border: 0;
2034   background: #fff;
2035 }