git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss

1 @import "parameters";

2 @import "bootstrap";

4 /* Styles common to large and small screens */

6 .fillL { background-color: white; }

8 /* Default rules for the body of every page */

10 body {

11 font-family: 'Helvetica Neue',Arial,sans-serif;

12 font-size: $typeheight;

13 line-height: 1.6666;

14 color: #222;

15 background-color: #fff;

16 margin: 0px;

17 padding: 0px;

18 text-align: left;

19 height: 100%;

20 }

22 p > img {

23 width: auto;

24 max-width: 100%;

25 }

27 small, aside {

28 font-size: 12px;

29 }

31 #container { position: relative; }

33 .small_icon {

34 vertical-align: middle;

35 margin-right: $lineheight/4;

36 }

38 .red { color: $red; }

40 .piwik { border: 0; }

42 [dir=rtl] { /* no-r2 */ text-align: right; }

44 [dir=ltr] { /* no-r2 */ text-align: left; }

46 /* Rules for icons */

48 .icon {

49 display: inline-block;

50 vertical-align: top;

51 width: 20px;

52 height: 20px;

53 background: transparent image-url("sprite.png") no-repeat 0 0;

54 background-image: image-url("sprite.svg");

55 text-indent: -9999px;

56 overflow: hidden;

57 }

59 .icon.search { /* no-r2 */ background-position: 0 0; }

60 .icon.donate { /* no-r2 */ background-position: -20px 0; }

61 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }

62 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }

63 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }

64 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }

65 .icon.layers { /* no-r2 */ background-position: -100px 0; }

66 .icon.key { /* no-r2 */ background-position: -120px 0; }

67 .icon.share { /* no-r2 */ background-position: -140px 0; }

68 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }

69 .icon.link { /* no-r2 */ background-position: -180px 0; }

70 .icon.close { /* no-r2 */ background-position: -200px 0; }

71 .close-wrap:hover .icon.close,

72 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }

73 .icon.check { /* no-r2 */ background-position: -220px 0; }

74 .icon.note { /* no-r2 */ background-position: -240px 0; }

75 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }

76 .icon.query { /* no-r2 */ background-position: -260px 0; }

78 /* Rules for links */

80 a {

81 color: #24d;

82 text-decoration: none;

83 -webkit-appearance: none;

84 outline: 0;

85 &:hover {

86 text-decoration: underline;

87 }

88 }

90 /* Utility for de-emphasizing content */

92 .deemphasize {

93 color: $darkgrey;

94 a {

95 color: $blue;

96 }

97 }

99 /* Rules for the header */

100

101 #menu-icon {

102 display: none !important;

103 float: right;

104 background: image-url("menu-icon.png") no-repeat;

105 background-size: 30px 30px;

106 display: block;

107 width: 30px;

108 height: 30px;

109 margin: 14px 10px 0 0;

110 opacity: 0.6;

111 }

112

113 header {

114 height: $headerHeight;

115 position: relative;

116 z-index: 1001;

117 font-size: 14px;

118

119 h1, nav, nav > ul, nav > ul > li {

120 display: inline-block;

121 }

122

123 > * {

124 height: 100%;

125 padding: $lineheight/2;

126 }

127

128 h1, nav.primary {

129 float: left;

130 }

131

132 a, a:hover {

133 text-decoration: none;

134 }

135

136 img.logo {

137 width: 30px;

138 height: 30px;

139 margin-top: -2px;

140 vertical-align: middle;

141 }

142

143 h1 {

144 font-size: 18px;

145 font-weight: 600;

146 line-height: 1.2;

147 margin: 0;

148 padding-top: 15px;

149

150 a {

151 color: #000;

152 }

153

154 a:hover {

155 color: #000;

156 }

157 }

158

159 .btn {

160 font-size: 14px;

161 }

162 }

163

164

165 nav.primary {

166 .btn-outline-primary {

167 @include button-outline-variant($green, $white);

168 }

169

170 .disabled {

171 .btn-outline-primary {

172 color: $grey;

173 cursor: default;

174

175 .caret {

176 border-top-color: $grey;

177 }

178

179 &:hover {

180 background-color: lighten($green, 30%);

181 }

182 }

183 }

184

185 // Small tweaks to the toggle to stop the primary colour showing through

186 // when the menu is shown

187 .show > .btn-outline-primary.dropdown-toggle {

188 background-color: $green;

189 border-color: $green;

190

191 &:focus {

192 box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);

193 }

194 }

195 }

196

197 nav.secondary {

198 position: absolute;

199 right: 0;

200

201 .nav-link {

202 padding: 0.2rem;

203 color: $darkgrey;

204 }

205

206 > ul li.current a {

207 color: darken($darkgrey, 25%);

208 }

209

210 .login-menu {

211 .btn-outline-secondary {

212 @include button-outline-variant($darkgrey);

213 }

214 }

215

216 .user-menu {

217 .btn-outline-secondary {

218 @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);

219 border-color: $grey;

220 &:hover {

221 border-color: $grey;

222 }

223 &:focus {

224 background-color: white;

225 box-shadow: none;

226 }

227 }

228 &.show .btn-outline-secondary {

229 background-color: white;

230 &:focus {

231 box-shadow: none;

232 }

233 }

234 }

235

236 img.user_thumbnail_tiny {

237 border: 0;

238 border-radius: 3px;

239 }

240

241 #inboxanchor {

242 display: inline-block;

243 height: 25px;

244 margin: 3px 0 3px 3px;

245 background-color: lighten($grey, 10%);

246 line-height: 20px;

247 border-radius: 3;

248 }

249

250 .dropdown-menu {

251 .count-number {

252 font-size: 14px;

253 }

254 }

255 }

256

257 nav.primary, nav.secondary {

258 .dropdown-item {

259 &:hover, &:active {

260 background-color: $green;

261 color: white;

262 }

263 }

264 }

265

266 #compact-secondary-nav {

267 display: none;

268 }

269

270 body.compact {

271 #compact-secondary-nav {

272 display: inline-block;

273 }

274 .compact-hide {

275 display: none;

276 }

277 }

278

279 /* Utility for styling notification numbers */

280

281 .count-number {

282 padding: 2px $lineheight/4;

283 border-radius: 2px;

284 background: lighten($green, 30%);

285 margin: 0 2px;

286 font-size: 11px;

287 color: #333;

288 }

289

290 /* Rules for the message shown in place of the map when javascript is disabled */

291

292 #noscript {

293 z-index: 20000000;

294 margin-left: 400px;

295 margin-top: 50px;

296 }

297

298 /* Rules for Leaflet maps */

299

300 .leaflet-control .control-button {

301 display: block;

302 height: 40px;

303 width: 40px;

304 background-color: #333;

305 background-color: rgba(0,0,0,.6);

306 border-radius: 4px 0 0 4px;

307 margin-bottom: 10px;

308 outline: none;

309

310 &:hover {

311 background-color: black;

312 }

313

314 &.disabled,

315 &.leaflet-disabled {

316 background-color: #333;

317 background-color: rgba(0,0,0,.5);

318 cursor: default;

319 }

320

321 &.active {

322 background-color: $vibrant-green;

323 }

324

325 .icon {

326 margin: 10px;

327 }

328 }

329

330 .leaflet-control .zoomin,

331 .control-layers .control-button {

332 margin-bottom: 0px;

333 border-radius: 4px 0 0 0;

334 }

335

336 .leaflet-control .zoomout,

337 .control-key .control-button {

338 margin-bottom: 0;

339 border-radius: 0;

340 }

341

342 .control-locate .control-button,

343 .control-share .control-button {

344 border-radius: 0 0 0 4px;

345 }

346

347 /* Rules for the sidebar and main map area */

348

349 .map-layout {

350 #content {

351 overflow: hidden;

352 position: absolute;

353 top: $headerHeight;

354 bottom: 0;

355 width: 100%;

356 }

357

358 #sidebar, #map {

359 position: relative;

360 height: 100%;

361 overflow-x: hidden;

362 overflow-y: auto;

363 }

364

365 #sidebar {

366 float: left;

367 width: $sidebarWidth;

368 background: #fff;

369

370 #sidebar_loader {

371 display: none;

372 }

373

374 > div {

375 position: relative;

376 float: left;

377 clear: both;

378 width: 100%;

379 }

380

381 h2 {

382 padding: $lineheight $lineheight $lineheight/2;

383 font-size: 1.5rem;

384 }

385

386 h3, h4 {

387 margin-top: $lineheight;

388 margin-bottom: $lineheight/2;

389 font-size: 1.25rem;

390 }

391

392 .close-wrap {

393 cursor: pointer;

394 position: absolute;

395 top: 0;

396 right: 0;

397 width: 60px;

398 height: 60px;

399

400 .icon.close {

401 pointer-events: none;

402 position: absolute;

403 right: 20px;

404 top: 20px;

405 }

406 }

407

408 .icon.close {

409 float: right;

410 cursor: pointer;

411 }

412

413 .flash {

414 padding: 15px;

415

416 picture {

417 margin-right: -25px;

418 }

419

420 div.message {

421 margin-left: 30px;

422 }

423 }

424 }

425

426 .overlay-sidebar #sidebar {

427 position: absolute;

428 z-index: 1000;

429 height: auto;

430 overflow: hidden;

431

432 #banner {

433 display: block;

434 }

435

436 .welcome {

437 display: none;

438

439 &.visible {

440 display: block;

441 }

442 }

443

444 #sidebar_content {

445 display: none;

446 }

447 }

448

449 .welcome {

450 display: none;

451 padding-bottom: 5px;

452

453 p {

454 padding: $lineheight/2 $lineheight $lineheight;

455 font-size: 110%;

456 font-weight: 300;

457 }

458

459 .button {

460 width: 50%;

461 float: left;

462 margin: 0;

463 border-radius: 0;

464 font-weight: normal;

465 padding: .6em;

466

467 &.learn-more {

468 border-right: 1px solid #fff;

469 }

470 }

471 }

472

473 #banner {

474 display: none;

475

476 img {

477 display: block;

478 width: $sidebarWidth;

479 }

480 }

481

482 #map {

483 height: 100%;

484 overflow: hidden;

485

486 &.query-active {

487 cursor: help;

488 }

489

490 &.query-disabled {

491 cursor: not-allowed;

492 }

493

494 .leaflet-marker-draggable {

495 cursor: move;

496 }

497 }

498

499 #map-ui {

500 display: none;

501 position: relative;

502 float: right;

503 width: 250px;

504 height: 100%;

505 background: white;

506 overflow: auto;

507

508 .section {

509 border-bottom: 1px solid $grey;

510 padding: 10px 20px;

511 }

512

513 a.close-button {

514 float: right;

515 padding:5px;

516 font-size:20px;

517 line-height:10px;

518 color:#222;

519 border:1px solid $grey;

520 }

521

522 .tooltip {

523 opacity: 1;

524 border: 1px solid $grey;

525 .tooltip-arrow {

526 border-top-color: $grey;

527 }

528 }

529 }

530 }

531

532 .layers-ui,

533 .share-ui {

534 li:last-child {

535 margin-bottom: 0;

536 }

537 }

538

539 .layers-ui {

540 .base-layers {

541 .leaflet-container {

542 width: 100%;

543 height: 50px;

544 cursor: pointer;

545 }

546

547 li {

548 overflow: hidden;

549 border-radius: 3px;

550 border: 2px solid #fff;

551 margin-bottom: 8px;

552 position: relative;

553 transition: border-color 0.08s ease-in;

554

555 label {

556 position: absolute;

557 top: 0;

558 left: 0;

559 padding: 2px 6px;

560 border-bottom-right-radius: 3px;

561 cursor: pointer;

562 font-weight: 600;

563 font-size: 16px;

564 text-stroke: 2px #fff;

565 background: rgba(255,255,255,.9);

566 z-index: 1000;

567 input[type="radio"] {

568 display: none;

569 }

570 }

571

572 &.active { border-color: darken($green, 10%); }

573 &:hover {

574 border-color: $grey;

575 &.active { border-color: darken($green, 20%); }

576 }

577 }

578 }

579

580 .overlay-layers {

581 p {

582 font-size: 13px;

583 margin-bottom: 8px;

584 }

585 li.disabled { color: $darkgrey; }

586 }

587 }

588

589 .share-ui {

590 .share-tabs {

591 margin-bottom: 10px;

592

593 a {

594 color: #fff;

595 text-decoration: none;

596 background-color: $lightblue;

597 padding: 5px 10px;

598 border-right: 1px solid #fff;

599 }

600

601 a:first-child {

602 border-right: 1px solid #fff;

603 border-radius: 4px 0 0 4px;

604 }

605

606 a:last-child {

607 border-radius: 0 4px 4px 0;

608 }

609

610 a.active {

611 background-color: $blue;

612 }

613 }

614

615 .share-tab {

616 display: none;

617 }

618

619 .share-link {

620 input[type=text],

621 textarea {

622 width: 100%;

623 font-family: monospace;

624 font-size: small;

625 line-height: 1.3;

626 }

627 }

628

629 .share-image {

630 label {

631 margin-right: 10px;

632 }

633 }

634

635 #embed_html {

636 resize: vertical;

637 }

638

639 #mapnik_scale {

640 width: 100px;

641 }

642 }

643

644 .leaflet-top {

645 top: $lineheight/2 !important;

646 .leaflet-control {

647 margin-right: 0px !important;

648 margin-top: 0px !important;

649 }

650 }

651

652 .leaflet-popup-scrolled {

653 padding-right: $lineheight;

654 border-bottom: 0px !important;

655 border-top: 0px !important;

656 }

657

658 .leaflet-popup-content-wrapper {

659 border-radius: 4px !important;

660 }

661

662 /* Rules for attribution text under the main map shown on printouts */

663

664 #attribution {

665 display: none;

666

667 table {

668 width: 100%

669 }

670 }

671

672 .attribution_license,

673 .attribution_project {

674 text-align: left;

675 }

676

677 .attribution_notice {

678 text-align: center;

679 }

680

681 .donate-attr { color: darken($green, 10%) !important; }

682

683 /* Rules for the sidebar */

684

685 .sidebar_heading {

686 position: relative;

687 padding: $lineheight/2 $lineheight;

688 // background: $offwhite;

689 // border-bottom: 1px solid $grey;

690 > .close {

691 float: right;

692 margin-top: 2px;

693 cursor: pointer;

694 }

695 }

696

697 #browse_status {

698 p {

699 padding: $lineheight;

700 }

701

702 input {

703 display: block;

704 margin-left: auto;

705 margin-right: auto;

706 }

707 }

708

709 #sidebar {

710 #sidebar_loader,

711 .search_more {

712 width: 100%;

713 margin: $lineheight auto;

714 }

715

716 .loader,

717 .load_more {

718 text-align: center;

719 margin: auto;

720 width: 40px;

721 display: block;

722 }

723 }

724

725 /* Rules for the search and direction forms */

726

727 header .search_forms,

728 .directions_form {

729 display: none;

730 }

731

732 .search_form,

733 .directions_form {

734 position: relative;

735 padding: $lineheight/2;

736 background-color: $lightgrey;

737

738 .query_wrapper {

739 position: relative;

740 overflow: hidden;

741 border-radius: 2px 0 0 2px;

742 }

743

744 input[type=text] {

745 width: 100%;

746 height: 30px;

747 transition: 300ms linear;

748 }

749

750 input[type=text].overflow {

751 border-right: none;

752 border-radius: 3px 0px 0px 3px;

753 }

754

755 input:focus {

756 outline: none;

757 box-shadow: 0px 0px 7px $vibrant-green;

758 }

759

760 input[type=submit].float {

761 float: right;

762 width: auto;

763 min-width: 0;

764 border-radius: 0 2px 2px 0;

765 }

766

767 input.error {

768 background-color: rgba($red, 0.4);

769 }

770

771 select {

772 /* this next line is to polyfill the vertical alignment of text within a select element,

773 * which is different between firefox and chrome. */

774 padding: 0.3em 0;

775 }

776

777 .query_options {

778 text-align: right;

779 font-size: 10px;

780 color: $blue;

781 }

782

783 .describe_location {

784 position: absolute;

785 top: 6px;

786 right: 6px;

787 font-size: 10px;

788 color: $blue;

789 }

790

791 .switch_link {

792 float: right;

793 width: auto;

794 min-width: 0;

795 margin-left: 6px;

796 }

797

798 img.button {

799 display: block;

800 width: 20px;

801 height: 20px;

802 }

803

804 span.force_width {

805 width: 100%;

806 padding-right: 25px;

807 display: block;

808 }

809

810 select.routing_engines {

811 min-height: 30px;

812 margin: 0px 0px 5px 25px;

813 }

814

815 input.routing_go {

816 min-width: 100px;

817 float: right;

818 }

819

820 div.header {

821 width: 100%;

822 height: 30px;

823 }

824

825 div.line {

826 width: 100%;

827 margin: 0px 0px 5px 0px;

828 }

829

830 div.loader_copy {

831 display: none;

832

833 img {

834 vertical-align: middle;

835 }

836 }

837

838 a.reverse_directions {

839 cursor: pointer;

840 margin: 0px 0px 5px 25px;

841 }

842 }

843

844 /* Rules for the map key which appears in the popout sidebar */

845

846 #mapkey {

847 .mapkey-table-key img {

848 display: block;

849 margin-left: auto;

850 margin-right: auto;

851 }

852 }

853

854 /* Rules for search sidebar */

855

856 #sidebar .search_results_entry {

857 ul li {

858 cursor: pointer;

859 &.selected { background: $list-highlight; }

860 }

861

862 .search_more .loader {

863 display: none;

864 width: 100%;

865 }

866 }

867

868 .search_results_error {

869 color: #f00;

870 padding: 10px 20px;

871 }

872

873 /* Rules for routing */

874

875 #sidebar_content>table {

876 padding: 5px 20px 10px 15px;

877 width: 100%;

878 border-collapse: separate;

879 border-spacing: 0;

880 }

881

882 div.direction {

883 background-image: image-url('routing-sprite.png');

884 width: 20px;

885 height: 20px;

886 background-repeat: no-repeat;

887 }

888 @for $i from 0 through 25 {

889 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }

890 }

891

892 p#routing_summary {

893 padding: 0 $lineheight $lineheight/4;

894 }

895

896 td.instruction, td.distance {

897 padding-top: $lineheight/5;

898 padding-bottom: $lineheight/5;

899 border-bottom: 1px solid $grey;

900 }

901 td.distance {

902 color: $darkgrey;

903 text-align: right;

904 font-size: x-small;

905 }

906 tr.turn {

907 cursor: pointer;

908 }

909 tr.turn:hover {

910 background: $list-highlight;

911 }

912 .routing_engines, #route_from, #route_to { margin-left: 25px; }

913 .routing_marker { width: 15px; position: absolute; cursor: move; }

914

915 /* Rules for entity history */

916

917 #sidebar_content {

918 .browse_details {

919 position: relative;

920 border-bottom: $keyline;

921 }

922 }

923

924 .browse_status {

925 display: none;

926 }

927

928 /* Rules for the history sidebar */

929

930 #sidebar .changesets {

931 li {

932 cursor: pointer;

933

934 &.selected { background: $list-highlight; }

935 /* color is derived from changeset bbox fillColor in history.js */

936 }

937

938 .comments {

939 float: right;

940 color: $darkgrey;

941 }

942

943 .comments-0 {

944 opacity: 0.5;

945 }

946

947 .changeset_more .loader {

948 display: none;

949 width: 100%;

950 }

951 }

952

953 /* Rules for the browse sidebar */

954

955 #sidebar_content {

956 .browse-section {

957 padding: $lineheight/2 $lineheight;

958 border-bottom: 1px solid $grey;

959

960 h4:first-child {

961 margin-top: 0;

962 word-wrap: break-word;

963 }

964 }

965

966 .browse-section:last-of-type {

967 border-bottom: none;

968 }

969

970 .paginate {

971 float: right;

972 padding: 1px 6px;

973 border: 1px solid $lightgrey;

974 border-radius: 3px;

975 }

976

977 .browse-field {

978 margin-bottom: 10px;

979

980 h4 {

981 padding: 5px 0 5px 10px;

982 font-size: 12px;

983 border: 1px solid $grey;

984 border-radius: 4px 4px 0 0;

985 background-color: $offwhite;

986 }

987

988 p {

989 padding: 7px 10px;

990 font-size: 12px;

991 background-color: #FFF;

992 border: 1px solid $grey;

993 border-top: 0;

994 border-radius: 0 0 4px 4px;

995 }

996 }

997

998 .browse-tag-list {

999 background-color: $offwhite;

1000 border: 1px solid $grey;

1001 border-radius: 3px;

1002 table-layout: fixed;

1003 border-collapse: separate;

1004 border-spacing: 0;

1005 width: 100%;

1006

1007 th, td {

1008 border-bottom: 1px solid $grey;

1009 }

1010

1011 tr:last-child th, tr:last-child td {

1012 border-bottom: 0;

1013 }

1014

1015 .browse-tag-k,

1016 .browse-tag-v {

1017 width: 50%;

1018 padding: 6px 10px;

1019 word-wrap: break-word;

1020 white-space: pre-wrap;

1021 }

1022

1023 .browse-tag-k {

1024 font-weight: 500;

1025 background-color: $offwhite;

1026 }

1027

1028 .browse-tag-v {

1029 border-left: 1px solid $grey;

1030 background-color: #fff;

1031 }

1032

1033 .colour-preview-box {

1034 float: right;

1035 width: 14px;

1036 height: 14px;

1037 margin: 4px 0px;

1038 border: 1px solid rgba(0, 0, 0, .1);

1039 // add color via inline css on element: background-color: <tag value>;

1040 }

1041 }

1042

1043 .warning {

1044 margin: 0 0 $lineheight/2 0;

1045 padding: 0 $lineheight/2;

1046 }

1047

1048 .note-comments li, .changeset-comments li {

1049 margin: $lineheight/2 0;

1050

1051 p {

1052 margin: 10px 6px 0 6px;

1053 line-height: 1.5;

1054 }

1055 }

1056

1057 .comments-header {

1058 float: left;

1059 }

1060

1061 .subscribe-buttons {

1062 float: left;

1063 margin: 18px 10px 10px;

1064 min-width: 80px;

1065 }

1066

1067 .subscribe-buttons input {

1068 font-size: 90%;

1069 line-height: 15px;

1070 min-height: 20px;

1071 }

1072

1073 span.action-button:hover {

1074 cursor: pointer;

1075 text-decoration: underline;

1076 }

1077

1078 .note-description {

1079 overflow: hidden;

1080 margin: 0 0 10px 10px;

1081 }

1082

1083 .query-intro p {

1084 padding: $lineheight $lineheight $lineheight/2;

1085 }

1086

1087 .query-results {

1088 display: none;

1089 padding-bottom: $lineheight/2;

1090

1091 h3 {

1092 padding: 0 $lineheight;

1093 }

1094

1095 ul {

1096 li {

1097 &.query-result {

1098 cursor: pointer;

1099 }

1100

1101 &.selected {

1102 background: $list-highlight;

1103 }

1104 }

1105 }

1106 }

1107 }

1108

1109 /* Rules for export sidebar */

1110

1111 .export_form {

1112 padding: $lineheight;

1113

1114 .export_area_inputs,

1115 .export_button {

1116 text-align: center;

1117 }

1118

1119 .export_area_inputs {

1120 margin-bottom: $lineheight/2;

1121 input[type="text"] {

1122 width: 80px;

1123 text-align: center;

1124 margin-bottom: 5px;

1125 }

1126 }

1127

1128 .export_boxy {

1129 background: $lightgrey;

1130 border: 1px solid $grey;

1131 border-radius: 3px;

1132

1133 #maxlat { margin-top: -1px; }

1134 #minlon {

1135 float: left;

1136 /* no-r2 */ margin-left: -1px;

1137 }

1138 #maxlon {

1139 float: right;

1140 /* no-r2 */ margin-right: -1px;

1141 }

1142 #minlat { margin-bottom: 0; }

1143 }

1144

1145 .export_bound {

1146 margin: $lineheight/4;

1147 }

1148

1149 .export_button {

1150 margin-top: $lineheight;

1151 margin-bottom: $lineheight;

1152 }

1153

1154 dl {

1155 padding-left: $lineheight/2;

1156 dd {

1157 margin-left: 0;

1158 margin-bottom: 10px;

1159 }

1160 }

1161 }

1162

1163 /* Rules for the routing sidebar */

1164

1165 #sidebar_content {

1166 #routing_credit {

1167 text-align: center;

1168 padding: 0.5em;

1169 }

1170 }

1171

1172 /* Rules for edit pages */

1173

1174 .site-edit {

1175 #content {

1176 position: absolute;

1177 top: $headerHeight;

1178 bottom: 0;

1179 width: 100%;

1180 }

1181

1182 #map {

1183 height: 100%;

1184 overflow: hidden;

1185 }

1186 }

1187

1188 /* Rules for non-map content pages */

1189

1190 .content-heading {

1191 background: $lightgrey;

1192 }

1193

1194 .content-body {

1195 h1, h2, h3, p, ul, ol {

1196 margin-bottom: $lineheight;

1197 }

1198

1199 h1, h2, h3 {

1200 margin-top: $lineheight/2;

1201 }

1202 }

1203

1204 .content-inner {

1205 position: relative;

1206 max-width: 900px;

1207 margin: auto;

1208 padding: $lineheight;

1209 }

1210

1211 /* Overrides for pages that use new layout conventions */

1212

1213 .users-new,

1214 .users-create,

1215 .users-terms,

1216 .users-confirm {

1217 .content-heading .content-inner {

1218 height: 200px;

1219 }

1220 }

1221

1222 .header-illustration {

1223 background-position: 0 0;

1224 background-repeat: no-repeat;

1225 position: absolute;

1226 height: 200px;

1227 width: 100%;

1228 left: 0;

1229 bottom: 0;

1230

1231 &.new-user-main {

1232 background-image: image-url("sign-up-illustration.png");

1233 }

1234

1235 &.confirm-main {

1236 background-image: image-url("confirm-illustration.png");

1237 }

1238

1239 &.new-user-terms {

1240 background-image: image-url("terms-illustration.png");

1241 }

1242

1243 &.new-user-arm {

1244 height: 110px;

1245 width: 130px;

1246 left: 260px;

1247 top: 160px;

1248 background-image: image-url("sign-up-illustration-arm.png");

1249 z-index: 100;

1250 }

1251 }

1252

1253 [dir=rtl] .header-illustration {

1254 transform: scaleX(-1);

1255 }

1256

1257 #content.maximised {

1258 top: 0;

1259 left: 0;

1260 right: 0;

1261 bottom: 0;

1262 border: 0;

1263 z-index: 2000;

1264 }

1265

1266 /* Rules for small maps in content areas */

1267

1268 .content_map {

1269 height: 200px;

1270 border: 1px solid $grey;

1271 margin-bottom: $lineheight;

1272 }

1273

1274 @include media-breakpoint-up(md) {

1275 .content_map {

1276 height: 400px;

1277 }

1278 }

1279

1280 /* Rules for the new trace form */

1281

1282 #new_trace {

1283 input[type=text] {

1284 width: 50%;

1285 width: calc(100% - 150px);

1286 max-width: 500px;

1287 }

1288 }

1289

1290 /* Rules for the edit trace form */

1291

1292 .edit_trace {

1293 .standard-form-row p {

1294 margin-bottom: 0px;

1295 }

1296

1297 input[type=text] {

1298 width: 50%;

1299 width: calc(100% - 150px);

1300 max-width: 500px;

1301 }

1302 }

1303

1304 /* Rules for the user profile page */

1305

1306 #userinformation {

1307

1308 min-height: 100px;

1309 .userinformation-inner {

1310 float: left;

1311 }

1312 h2 {

1313 margin-top: 0;

1314 }

1315 .user-description {

1316 width: 100%;

1317 clear: both;

1318 }

1319 .deemphasize {

1320 margin: 0;

1321 }

1322 }

1323

1324 .admin-user-info small {

1325 margin-bottom: $lineheight/2;

1326 display: inline;

1327 margin-right: $lineheight;

1328 }

1329

1330 .contact-activity {

1331 margin-top: $lineheight;

1332 width: 100%;

1333 }

1334

1335 .activity-details p {

1336 margin-left: 70px;

1337 margin-bottom: 0;

1338 }

1339

1340 .users-show {

1341 // Silly exception; remove when user page is redesigned.

1342 .content-inner {

1343 max-width: none;

1344 }

1345 p#no_home_location {

1346 margin: $lineheight;

1347 }

1348 .user_thumbnail {

1349 margin-top: $lineheight/4;

1350 float: left;

1351 }

1352 }

1353

1354 /* Rules for the user map */

1355

1356 .content_map .leaflet-popup-content {

1357 margin: $lineheight/2;

1358 min-height: 50px;

1359 }

1360

1361 /* Rules for user popups on maps */

1362

1363 .user_popup {

1364 min-width: 200px;

1365 p {

1366 padding: 0 0 5px 0;

1367 margin-top: 0 0 0 60px;

1368 font-size: 12px;

1369 }

1370 img.user_thumbnail {

1371 float: left;

1372 margin: 0 $lineheight/2 0 0;

1373 }

1374 }

1375

1376 /* Rules for the user list */

1377

1378 #user_list {

1379 width: 100%;

1380

1381 tr {

1382 vertical-align: middle;

1383 }

1384

1385 p {

1386 margin-top: 0px;

1387 margin-bottom: 0px;

1388 }

1389 }

1390

1391 #user_list_actions {

1392 float: right;

1393 margin-top: $lineheight/2;

1394 }

1395

1396 /* Rules for the diary list page */

1397

1398 .diary_post {

1399 position: relative;

1400 padding-top: $lineheight;

1401 padding-bottom: $lineheight/2;

1402 border-top: 1px solid $grey;

1403

1404 &:first-of-type {

1405 margin-top: $lineheight/2;

1406 }

1407

1408 &.deemphasize {

1409 background-color: #fee;

1410 }

1411

1412 .post_heading {

1413 margin-bottom: $lineheight;

1414

1415 h2 {

1416 margin-top: 0;

1417 margin-bottom: $lineheight/2;

1418 }

1419 }

1420

1421 img.user_thumbnail {

1422 float: left;

1423 }

1424

1425 small.deemphasize {

1426 float: left;

1427 display: block;

1428 }

1429 }

1430

1431 .pagination {

1432 padding-top: $lineheight;

1433 }

1434

1435 /* Rules for the diary entry page */

1436

1437 .diary_entries {

1438 #map {

1439 position: relative;

1440 width: 90%;

1441 height: 400px;

1442 border: 1px solid $grey;

1443 display: none;

1444 margin-bottom: $lineheight;

1445 }

1446 #newcomment {

1447 border-top: 1px solid $grey;

1448 padding-top: $lineheight;

1449 margin-top: $lineheight/2;

1450 }

1451 .comments {

1452 max-width: 740px;

1453 }

1454 .diary-comment {

1455 border-top: 1px dashed $grey;

1456 padding-top: $lineheight/2;

1457 padding-bottom: $lineheight/2;

1458 &:first-child {

1459 margin-top: $lineheight/2;

1460 padding-top: $lineheight;

1461 border-top: 1px solid $grey;

1462 }

1463 &.deemphasize {

1464 background-color: #fee;

1465 }

1466 p {

1467 margin-bottom: $lineheight/2;

1468 }

1469 .comment-heading {

1470 margin-bottom: 0;

1471 margin-top: 0;

1472 }

1473 }

1474 }

1475

1476 .diary_entries-show img.user_thumbnail {

1477 float: left;

1478 }

1479

1480

1481 .diary-subscribe-buttons {

1482 position:relative;

1483 top: -30px;

1484 left: 130px;

1485 }

1486

1487 /* Rules for the log in page */

1488

1489 #login_auth_buttons {

1490 margin-bottom: 0;

1491 }

1492

1493 #login_auth_buttons li {

1494 float: left;

1495 padding: $lineheight/4 $lineheight/2;

1496 }

1497

1498 /* Rules for the account confirmation page */

1499

1500 .users-terms {

1501 .legale {

1502 border: 1px solid $grey;

1503 padding: $lineheight;

1504 margin-bottom: $lineheight;

1505 overflow: auto;

1506 height: 20em;

1507

1508 li {

1509 list-style: inherit;

1510 }

1511

1512 ol ol {

1513 list-style-type: lower-alpha;

1514 }

1515 }

1516

1517 #decline {

1518 background: $lightblue;

1519 &:hover {

1520 background: darken($lightblue, $hovercolor);

1521 }

1522 }

1523 }

1524

1525 /* Rules for the account settings page */

1526

1527 #accountForm .user_map {

1528 position: relative;

1529 width: 500px;

1530 height: 400px;

1531 border: 1px solid $grey;

1532 }

1533

1534 #accountForm .user_image {

1535 margin-bottom: 0;

1536 }

1537

1538 #accountForm #user_image {

1539 margin-left: 20px;

1540 }

1541

1542 #accountForm ul.accountImage-options {

1543 margin-left: 120px;

1544 }

1545

1546 .nohome .location {

1547 display: none;

1548 }

1549

1550 #homerow .message {

1551 display: none;

1552 }

1553

1554 .nohome .message {

1555 display: inline !important;

1556 }

1557

1558 /* Rules for the oauth settings page */

1559

1560 .oauth_clients .buttons .oauth-edit {

1561 border-radius: 2px 0 0 2px;

1562 }

1563

1564 .oauth_clients .buttons .oauth-delete {

1565 border-radius: 0 2px 2px 0;

1566 }

1567

1568 /* Rules for the oauth authorization page */

1569

1570 .oauth-authorize ul {

1571 list-style: none;

1572 }

1573

1574 /* Rules for messages pages */

1575

1576 .messages {

1577 input[type="submit"] {

1578 margin: auto;

1579 }

1580

1581 .inbox-row {

1582 background: $offwhite;

1583 }

1584

1585 .inbox-row-unread {

1586 background: #CBEEA7;

1587 }

1588

1589 .right {

1590 float: right;

1591 }

1592 }

1593

1594 .inbox-row .inbox-mark-read {

1595 display: none;

1596 }

1597

1598 .info-line {

1599 margin-bottom: $lineheight;

1600 padding: $lineheight/4 0px 4px 0px;

1601 border-bottom: 1px solid $grey;

1602

1603 form, form div {

1604 display: inline;

1605 }

1606 }

1607

1608 .info-line .user_thumbnail_tiny {

1609 vertical-align: middle;

1610 }

1611

1612 .inbox-sent {

1613 white-space: nowrap;

1614 }

1615

1616 .inbox-mark-unread,

1617 .inbox-mark-read,

1618 .inbox-delete {

1619 width: 1%;

1620 }

1621

1622 .inbox-row-unread .inbox-mark-unread {

1623 display: none;

1624 }

1625

1626 /* Rules for "flash" notice boxes shown at the top of the content area */

1627

1628 .flash {

1629 padding: $lineheight;

1630

1631 &.error {

1632 background-color: #ff7070;

1633 }

1634

1635 &.warning {

1636 background-color: #ffe0cc;

1637 }

1638

1639 &.notice {

1640 background-color: #CBEEA7;

1641 }

1642

1643 div.message {

1644 display: inline-block;

1645 margin-left: $lineheight / 2;

1646 vertical-align: middle;

1647

1648 p {

1649 margin-top: $lineheight * 0.5;

1650 margin-bottom: $lineheight * 0.5;

1651

1652 &:first-child {

1653 margin-top: 0px;

1654 }

1655

1656 &:last-child {

1657 margin-bottom: 0px;

1658 }

1659 }

1660 }

1661 }

1662

1663 /* Rules for highlighting fields with rails validation errors */

1664

1665 .formError {

1666 display: inline-block;

1667 padding: 5px 10px;

1668 margin-top: 5px;

1669 border-radius: 4px;

1670 font-size: 12px;

1671 color: #fff;

1672 background-color: #ff7070;

1673 }

1674

1675 /* Rules for rails validation error boxes */

1676

1677 #errorExplanation {

1678 width: 400px;

1679 border: 2px solid #ff7070;

1680 padding: 0 $lineheight/2;

1681 margin-bottom: $lineheight;

1682 background-color: #f0f0f0;

1683

1684 h2 {

1685 margin: 0 -10px 10px -10px;

1686 padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;

1687 font-weight: bold;

1688 font-size: 12px;

1689 background-color: #c00;

1690 color: #fff;

1691 text-align: left;

1692 }

1693

1694 p {

1695 color: #333;

1696 margin-bottom: 0px;

1697 padding: $lineheight/4;

1698 }

1699 }

1700

1701 /* Rules for forms */

1702

1703 .standard-form {

1704 fieldset {

1705 margin-bottom: $lineheight;

1706 }

1707 label.standard-label {

1708 display: block;

1709 margin-bottom: $lineheight/4;

1710 font-size: $typeheight;

1711 font-weight: bold;

1712 line-height: 1.5;

1713 }

1714 label.standard-label.secondary {

1715 display: inline-block;

1716 font-weight: normal;

1717 }

1718 .form-help {

1719 font-weight: normal;

1720 }

1721 .form-column {

1722 float: left;

1723 margin-right: 20px;

1724 }

1725 .form-divider {

1726 margin-top: $lineheight;

1727 padding-top: $lineheight;

1728 border-top: 1px solid $lightgrey;

1729 }

1730 .horizontal-list .standard-form-row {

1731 float: left;

1732 padding-right: 10px;

1733 }

1734 .standard-form-row {

1735 margin-bottom: $lineheight/2;

1736 }

1737 .form-list {

1738 margin-bottom: 0;

1739 }

1740 .form-list li {

1741 margin-bottom: 5px;

1742 list-style-type: none;

1743 }

1744 input[type="checkbox"],

1745 input[type="radio"] {

1746 float: left;

1747 margin-top: 5px;

1748 }

1749 }

1750

1751 #remember_me_openid {

1752 display: block;

1753 }

1754

1755 select {

1756 padding: 2px;

1757 }

1758

1759 input[type="checkbox"],

1760 input[type="radio"] {

1761 margin-right: 5px;

1762 }

1763

1764 input[type="text"],

1765 input[type="email"],

1766 input[type="url"],

1767 input[type="password"],

1768 textarea {

1769 color: #222;

1770 background-color: #fff;

1771 border: 1px solid $grey;

1772 border-radius: 3px;

1773 padding: 2px 5px;

1774 margin: 0;

1775 width: 200px;

1776

1777 &.field_with_errors {

1778 border: 2px solid #ff7070;

1779 }

1780 }

1781

1782 textarea {

1783 padding: 5px;

1784 width: 100%;

1785 min-height: 50px;

1786 resize: vertical;

1787 }

1788

1789 /* Rules for user images */

1790

1791 img.user_image {

1792 max-width: 100px;

1793 max-height: 100px;

1794 border: 1px solid $grey;

1795 margin-bottom: $lineheight;

1796 float: left;

1797 margin-right: $lineheight;

1798 }

1799

1800 img.user_thumbnail {

1801 max-width: 50px;

1802 max-height: 50px;

1803 border: 1px solid $grey;

1804 margin-right: $lineheight;

1805 }

1806

1807 img.user_thumbnail_tiny {

1808 width: auto;

1809 height: auto;

1810 max-width: 25px;

1811 max-height: 25px;

1812 border: 1px solid $grey;

1813 }

1814

1815 /* Rules for geo microformats */

1816

1817 abbr.geo {

1818 border-bottom: none;

1819 }

1820

1821 /* General styles for action lists / subnavs / pager navs */

1822

1823 ul.secondary-actions {

1824 font-style: normal;

1825 margin-bottom: 0;

1826 margin-left: 0;

1827 padding: 0;

1828 &.pager {

1829 display: inline-block;

1830 margin-right: 60px;

1831 }

1832 > li {

1833 display: block;

1834 float: left;

1835 list-style: none;

1836 border-left: 1px solid $grey;

1837 padding-left: $lineheight/2;

1838 margin-right: $lineheight/2;

1839 &:first-child {

1840 border-left: 0;

1841 padding-left: 0;

1842 }

1843 &:last-child {

1844 margin-right: 0px;

1845 }

1846 }

1847 }

1848

1849 div.secondary-actions {

1850 padding: 10px;

1851 text-align: center;

1852 }

1853

1854 /* Utility for managing inner content areas */

1855

1856 .inner22 { padding: $lineheight;}

1857

1858 .inner12 { padding: $lineheight/2 $lineheight;}

1859

1860 .inner11 { padding: $lineheight/2;}

1861

1862 .inner20 { padding: $lineheight 0;}

1863

1864 .inner02 { padding: 0 $lineheight;}

1865

1866 /* Utility for general button styles */

1867

1868 input[type="button"],

1869 input[type="submit"],

1870 input[type="reset"],

1871 a.button {

1872 cursor: pointer;

1873 border: 0;

1874 display: inline-block;

1875 padding: $lineheight/4 $lineheight/2;

1876 min-height: 20px + $lineheight/2;

1877 min-width: 120px;

1878 margin: 0 0 $lineheight/2 0;

1879 color: white;

1880 background: $blue;

1881 text-align: center;

1882 border-radius: 2px;

1883 &:hover {

1884 background: darken($blue, $hovercolor);

1885 text-decoration: none;

1886 }

1887 &.deemphasize {

1888 background: $lightblue;

1889 &:hover {

1890 background: darken($lightblue, $hovercolor);

1891 }

1892 }

1893 &:disabled {

1894 background: $lightgrey;

1895 &:hover {

1896 background: $lightgrey;

1897 }

1898 }

1899 &:last-child {

1900 margin-bottom: 0;

1901 }

1902 }

1903

1904 input[type="button"],

1905 input[type="submit"],

1906 input[type="reset"] {

1907 line-height: normal;

1908 }

1909

1910 a.button {

1911 line-height: 20px;

1912 }

1913

1914 .buttons {

1915 min-width: 200px;

1916 input[type="submit"],

1917 input[type="button"],

1918 input[type="reset"],

1919 .button,

1920 .button_to {

1921 box-sizing: border-box;

1922 float: left;

1923 border-radius: 0;

1924 margin:0;

1925 min-width: 75px;

1926 max-width: 180px;

1927 border-right:1px solid white;

1928 text-overflow: ellipsis;

1929 white-space: nowrap;

1930 overflow: hidden;

1931 }

1932 input:first-child,

1933 .button:first-child,

1934 .button_to:first-child {

1935 border-radius:2px 0 0 2px;

1936 }

1937 input:last-child,

1938 .button:last-child,

1939 .button_to:last-child {

1940 border-radius:0 2px 2px 0;

1941 border-right-width: 0;

1942 }

1943 input:only-child,

1944 .button:only-child,

1945 .button_to:only-child,

1946 *[value="Hide"] + input:last-child,

1947 *[value="Hide"] + .button:last-child,

1948 *[value="Hide"] + .button_to:last-child {

1949 border-radius:2px;

1950 border-right-width: 0;

1951 }

1952 /* if a 3-button set has a hidden middle button */

1953 *[value="Hide"] + input:nth-child(3),

1954 *[value="Hide"] + .button:nth-child(3),

1955 *[value="Hide"] + .button_to:nth-child(3) {

1956 border-radius:0 2px 2px 0;

1957 border-right-width: 0;

1958 }

1959 /* if a 3-button set starts with a hidden button */

1960 *[value="Hide"] + input:nth-child(2):not(:last-child),

1961 *[value="Hide"] + .button:nth-child(2):not(:last-child),

1962 *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {

1963 border-radius:2px 0 0 2px;

1964 border-right-width: 1px;

1965 }

1966 }

1967

1968 /* Customise the background colour of striped tables */

1969

1970 .table-striped > tbody > tr:nth-child(2n+1) > td,

1971 .table-striped > tbody > tr:nth-child(2n+1) > th {

1972 background-color: $offwhite;

1973 }

1974

1975 /* Rules for OpenID logo */

1976

1977 .openid_logo {

1978 vertical-align: text-bottom;

1979 border: 0;

1980 }

1981

1982 /* Rules for rich text */

1983

1984 .richtext,

1985 .prose {

1986 code {

1987 font-size: 13px;

1988 background: $lightgrey;

1989 padding: 2px 3px;

1990 }

1991

1992 pre {

1993 font-size: 13px;

1994 background: $lightgrey;

1995 padding: 2px 3px;

1996 white-space: pre-wrap;

1997

1998 code {

1999 padding: 0;

2000 }

2001 }

2002

2003 img {

2004 padding: $lineheight;

2005 background-color: $offwhite;

2006 display: block;

2007 max-width: 100%;

2008 margin: auto;

2009 }

2010

2011 blockquote {

2012 border-left: $lineheight solid $offwhite;

2013 padding-left: $lineheight;

2014 margin: 0;

2015 color: $darkgrey;

2016 }

2017 }

2018

2019 .diary_post .richtext {

2020 margin-top: $lineheight;

2021 }

2022

2023 .comments .richtext {

2024 margin-left: 70px;

2025 margin-top: 0;

2026 }

2027

2028 /* Rules for rich text editors */

2029

2030 input.richtext_title[type="text"] {

2031 width: 50%;

2032 width: calc(100% - 235px);

2033

2034 @media only screen and (max-width:768px) {

2035 width: 100%;

2036 }

2037 }

2038

2039 .richtext_container {

2040 margin-bottom: $lineheight;

2041

2042 .richtext_content {

2043 width: 50%;

2044 width: calc(100% - 235px);

2045 display: inline-block;

2046 vertical-align: top;

2047

2048 @media only screen and (max-width:768px) {

2049 width: 100%;

2050 }

2051

2052 .richtext_preview {

2053 display: inline-block;

2054 padding: $lineheight;

2055 background-color: $offwhite;

2056 overflow-x: auto;

2057

2058 &.loading {

2059 background-image: image-url("loading.gif");

2060 background-repeat: no-repeat;

2061 background-position: center;

2062 }

2063

2064 > :first-child {

2065 margin-top: 0px;

2066 }

2067 }

2068 }

2069

2070 .richtext_help {

2071 display: inline-block;

2072 vertical-align: top;

2073 margin-left: 15px;

2074 background-color: $offwhite;

2075 padding: $lineheight/2;

2076 width: 220px;

2077

2078 ul {

2079 margin-bottom: 0;

2080 }

2081

2082 h4.heading, li {

2083 border-bottom: 1px solid $grey;

2084 margin-bottom: $lineheight/4;

2085 padding-bottom: $lineheight/4;

2086 }

2087

2088 li h4, li span, li p {

2089 display: inline-block;

2090 vertical-align: top;

2091 font-size: 11px;

2092 }

2093

2094 li h4 {

2095 width: 40%;

2096 margin: 0;

2097 }

2098

2099 li span, li p {

2100 width: 50%;

2101 margin-left: $lineheight/2;

2102 margin-bottom: $lineheight/4;

2103 white-space: nowrap;

2104 }

2105 }

2106 }

2107

2108 /* Rules for the user notes list */

2109

2110 .note_list {

2111 tr.creator {

2112 background-color: $offwhite;

2113 }

2114 }

2115

2116 /* Rules for the iD editor */

2117

2118 .id-embed {

2119 width: 100%;

2120 height: 100%;

2121 }

2122

2123 /* Rules for the "Welcome" page */

2124 .site-welcome, .site-fixthemap {

2125 .center {

2126 text-align: center;

2127 .sprite {

2128 float: none;

2129 margin: auto;

2130 }

2131 }

2132

2133 .sprite {

2134 background-image: image-url("welcome-sprite.png");

2135 background-size: 500px 250px;

2136 display: block;

2137 float: left;

2138 }

2139

2140 .icon-list {

2141 padding-bottom: 20px;

2142 div {

2143 margin-bottom: 10px;

2144 p {

2145 padding-top: 10px;

2146 }

2147 }

2148 }

2149 .sprite.small {

2150 width: 50px;

2151 height: 50px;

2152 }

2153

2154 .sprite.x {

2155 /* no-r2 */ background-position: -50px 0;

2156 }

2157

2158 .sprite.term {

2159 margin-right: 10px;

2160 vertical-align: middle;

2161 }

2162

2163 .sprite.node {

2164 /* no-r2 */ background-position: -100px 0;

2165 }

2166

2167 .sprite.way {

2168 /* no-r2 */ background-position: -150px 0;

2169 }

2170

2171 .sprite.tag {

2172 /* no-r2 */ background-position: -200px 0;

2173 }

2174

2175 .sprite.editor {

2176 /* no-r2 */ background-position: -250px 0;

2177 }

2178

2179 .sprite.question {

2180 /* no-r2 */ background-position: -300px 0;

2181 }

2182

2183 .sprite.rules {

2184 /* no-r2 */ background-position: -350px 0;

2185 }

2186

2187 .start-mapping {

2188 margin: auto;

2189 cursor: pointer;

2190 border: none;

2191 padding: 20px 40px;

2192 font-size: 30px;

2193 text-decoration: none;

2194 }

2195

2196 .icon.note {

2197 background-color: #333;

2198 border-radius: 4px;

2199 }

2200 }

2201

2202 .site-about #content {

2203 background-color: $lightgrey;

2204 background-position: 50% 50%;

2205 background-repeat: no-repeat;

2206 background-size: cover;

2207 background-attachment: fixed;

2208

2209

2210 .content-inner {

2211 position: relative;

2212 color: #333;

2213 min-width: 320px;

2214 max-width: 640px;

2215 }

2216

2217 .text {

2218 background: white;

2219 padding: 40px;

2220 }

2221

2222 .attr {

2223 position: relative;

2224 padding: 170px 40px 20px;

2225 background: #333;

2226 background: rgba(0, 0, 0, .8);

2227 margin-bottom: 0;

2228 margin-top: -20px;

2229

2230 h1 {

2231 display: block;

2232 color: white;

2233 font-weight: 300;

2234 font-size: 34px;

2235 span {

2236 color: $vibrant-green;

2237 }

2238 }

2239

2240 .user-image {

2241 position: absolute;

2242 top: 0px;

2243 right: 240px;

2244 left: 0px;

2245 height: 150px;

2246 background-position: 0 50%;

2247 background-repeat: no-repeat;

2248 background-image: image-url('about/osm.png');

2249 background-size: cover;

2250 background-color: $vibrant-green;

2251 }

2252

2253 .byosm {

2254 position: absolute;

2255 top: 0px;

2256 right: 0px;

2257 z-index: 1;

2258 width: 240px;

2259 height: 150px;

2260 padding: 20px 20px 20px 40px;

2261 font: 500 20px/24px Helvetica, Arial, sans-serif;

2262 white-space: nowrap;

2263 color: #fff;

2264 background: $vibrant-green;

2265 }

2266

2267 .byosm span {

2268 display: inline-block;

2269 width: 20px;

2270 margin-left: -20px;

2271 }

2272 }

2273

2274 .icon {

2275 width: 30px;

2276 height: 30px;

2277 margin-right: 10px;

2278 vertical-align: middle;

2279 background: 40px 40px image-url('about/sprite.png') no-repeat;

2280

2281 &.local {

2282 /* no-r2 */

2283 background-position: 0px 0px;

2284 }

2285 &.community {

2286 /* no-r2 */

2287 background-position: 0px -40px;

2288 }

2289 &.open {

2290 /* no-r2 */

2291 background-position: 0px -80px;

2292 }

2293 &.partners {

2294 /* no-r2 */

2295 background-position: 0px -120px;

2296 }

2297 &.infringement {

2298 /* no-r2 */

2299 background-position: 0px -160px;

2300 }

2301 &.legal {

2302 /* no-r2 */

2303 background-position: -45px -160px;

2304 }

2305 }

2306 }

2307

2308 @import 'browse';

2309

2310 @media only screen and (max-width:960px) {

2311 .header-illustration.new-user-arm {

2312 display: none;

2313 }

2314 }

2315

2316 .read-reports {

2317 background: $lightgrey;

2318 opacity: 0.7;

2319 }