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

1 @import "parameters";

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

5 /* Minimal CSS reset */

7 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

18 sup {

19 vertical-align: super;

20 font-size: smaller;

21 }

23 sub {

24 vertical-align: sub;

25 font-size: smaller;

26 }

28 table {

29 border-collapse: collapse;

30 border-spacing: 0;

31 }

33 li { list-style: none; }

35 input,

36 select,

37 textarea,

38 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }

40 abbr, acronym {

41 text-decoration: underline dotted;

42 cursor: help;

43 }

45 strong {

46 font-weight: bold;

47 }

49 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */

51 .clearfix:before,

52 .clearfix:after {

53 content: " ";

54 display: table;

55 }

57 .clearfix:after {

58 clear: both;

59 }

61 /* Basic grid */

63 .col0 { float:left; width:04.1666%; }

64 .col1 { float:left; width:08.3333%; }

65 .col2 { float:left; width:16.6666%; }

66 .col3 { float:left; width:25.0000%; }

67 .col4 { float:left; width:33.3333%; }

68 .col5 { float:left; width:41.6666%; }

69 .col6 { float:left; width:50.0000%; }

70 .col7 { float:left; width:58.3333%; }

71 .col8 { float:left; width:66.6666%; }

72 .col9 { float:left; width:75.0000%; }

73 .col10 { float:left; width:83.3333%; }

74 .col11 { float:left; width:91.6666%; }

75 .col12 { width:100%; }

77 .margin0 { margin-left:04.1666%; }

78 .margin1 { margin-left:08.3333%; }

79 .margin2 { margin-left:16.6666%; }

80 .margin3 { margin-left:25.0000%; }

81 .margin4 { margin-left:33.3333%; }

82 .margin5 { margin-left:41.6666%; }

83 .margin6 { margin-left:50.0000%; }

84 .margin7 { margin-left:58.3333%; }

85 .margin8 { margin-left:66.6666%; }

86 .margin9 { margin-left:75.0000%; }

87 .margin10 { margin-left:83.3333%; }

88 .margin11 { margin-left:91.6666%; }

89 .margin12 { margin-left:100.0000%; }

91 .fillL { background-color: white; }

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

95 * {

96 box-sizing: border-box;

97 }

99 body {

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

101 font-size: $typeheight;

102 line-height: 1.6666;

103 color: #222;

104 background-color: #fff;

105 margin: 0px;

106 padding: 0px;

107 text-align: left;

108 height: 100%;

109 }

110

111 h1, h2, h3 {

112 font-weight: 600;

113 line-height: 1.2;

114 }

115

116 h4, h5 {

117 font-weight: 500;

118 }

119

120 h1 {

121 font-size: 18px;

122 }

123

124 h2, h3 {

125 font-size: 16px;

126 }

127

128 p > img {

129 width: auto;

130 max-width: 100%;

131 }

132

133 small, aside {

134 font-size: 12px;

135 }

136

137 #container { position: relative; }

138

139 .column-1 {

140 width: 50%;

141 margin: 0 0 $lineheight/2 0;

142 }

143

144 .small_icon {

145 vertical-align: middle;

146 margin-right: $lineheight/4;

147 }

148

149 .red { color: $red; }

150

151 .piwik { border: 0; }

152

153 /* Rules for icons */

154

155 .icon {

156 display: inline-block;

157 vertical-align: top;

158 width: 20px;

159 height: 20px;

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

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

162 text-indent: -9999px;

163 overflow: hidden;

164 }

165

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

184

185 /* Rules for links */

186

187 a {

188 color: #24d;

189 text-decoration: none;

190 -webkit-appearance: none;

191 outline: 0;

192 &:hover {

193 text-decoration: underline;

194 }

195 }

196

197 /* Rules for horizontal lines */

198

199 hr {

200 border: none;

201 background-color: #ccc;

202 color: #ccc;

203 height: 1px;

204 }

205

206 /* General styles for tables */

207

208 table {

209 width: 100%;

210 margin-bottom: $lineheight;

211 th, td {

212 text-align: left;

213 padding: $lineheight/4;

214 line-height: $lineheight;

215 }

216 th {

217 font-weight: 600;

218 vertical-align: top;

219 }

220 td {

221 vertical-align: middle;

222 }

223 }

224

225 /* Utility for de-emphasizing content */

226

227 .deemphasize {

228 color: #999;

229 a {

230 color: $blue;

231 }

232 }

233

234 /* Rules for the header */

235

236 #menu-icon {

237 display: none !important;

238 float: right;

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

240 background-size: 30px 30px;

241 display: block;

242 width: 30px;

243 height: 30px;

244 margin: 14px 10px 0 0;

245 opacity: 0.6;

246 }

247

248 header {

249 height: $headerHeight;

250 position: relative;

251 z-index: 1001;

252 font-size: 14px;

253

254 h1, nav, nav > ul, nav > ul > li, .dropdown {

255 display: inline-block;

256 }

257

258 > * {

259 height: 100%;

260 padding: $lineheight/2;

261 }

262

263 h1, nav.primary {

264 float: left;

265 }

266

267 a, a:hover {

268 text-decoration: none;

269 }

270

271 img.logo {

272 width: 30px;

273 height: 30px;

274 margin-top: -2px;

275 vertical-align: middle;

276 }

277

278 h1 {

279 margin: 0;

280 padding-top: 15px;

281

282 a {

283 color: #000;

284 }

285 }

286 }

287

288 nav.primary {

289 > ul {

290 $border: 1px solid $green;

291

292 border: $border;

293 border-radius: $border-radius;

294

295 > li {

296 border-right: $border;

297 float: left;

298 &:last-child {

299 border-right: 0;

300 }

301 > a:hover { background: lighten($green, 30%); }

302 &.current > a:hover { background: $green; }

303 &.disabled > a:hover { background: lighten($green, 38%); }

304 &.dropdown {

305 > a.tab { border-right: 1px solid lighten($green, 30%); }

306 &.current > a.tab { border-right: 1px solid lighten($green, 10%); }

307 }

308 }

309 }

310

311 a.tab,

312 .dropdown-toggle {

313 display: inline-block;

314 font-weight: 500;

315 color: $green;

316 padding: 5px 15px;

317 }

318

319 .dropdown-toggle {

320 padding: 5px 6px;

321 }

322

323 .caret {

324 border-top-color: $green;

325 margin-top: 10px;

326 }

327

328 .disabled a {

329 color: #ccc;

330 cursor: default;

331

332 .caret {

333 border-top-color: #ccc;

334 }

335 }

336

337 > ul li.current {

338 background-color: $green;

339

340 .tab {

341 color: #fff;

342 }

343

344 .caret {

345 border-top-color: #fff;

346 }

347 }

348 }

349

350 nav.secondary {

351 position: absolute;

352 right: 0;

353

354 > ul {

355 vertical-align: middle;

356 a, .dropdown-toggle {

357 display: inline-block;

358 text-decoration: none;

359 color: $darkgrey;

360 padding: 5px;

361

362 &:hover { color: darken($darkgrey, 25%); }

363 }

364 }

365

366 > ul li.current a {

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

368 }

369

370 .user-menu {

371 $border: 1px solid $grey;

372 border: $border;

373 border-radius: $border-radius;

374 margin-left: 10px;

375

376 > li {

377 border-right: $border;

378 float: left;

379 &:last-child {

380 border-right: 0;

381

382 > a {

383 border-radius: 0 $border-radius $border-radius 0;

384 }

385 }

386 &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }

387 &:hover a { background: lighten($darkgrey, 30%); }

388 }

389

390 a {

391 padding: 5px 15px;

392

393 }

394

395 &.logged-in > a {

396 padding: 0;

397 > .user-button {

398 line-height: 1.8;

399 padding: 5px 10px 3px 6px;

400 display: inline-block;

401 color: $darkgrey;

402 }

403 &:hover > .user-button { color: darken($darkgrey, 5%); }

404 }

405 }

406

407 .caret {

408 border-top-color: $grey;

409 margin-top: 9px;

410 }

411

412 img.user_thumbnail_tiny {

413 border: 0;

414 vertical-align: top;

415 margin-top: 0px;

416 margin: 4px 0 0 4px;

417 border-radius: 2px;

418 }

419

420 #inboxanchor {

421 display: inline-block;

422 vertical-align: top;

423 height: 25px;

424 margin: 3px 0 3px 3px;

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

426 line-height: 20px;

427 border-radius: 2;

428 }

429

430 .dropdown-menu {

431 left: auto;

432 right: -1px;

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

434

435 .count-number {

436 float: right;

437 padding: 0 5px;

438 margin: 0;

439 }

440 }

441 }

442

443 #compact-secondary-nav {

444 display: none;

445 ul li a {

446 width: 100%;

447 color: #333;

448 &:hover { color: #fff; }

449 }

450 }

451

452 body.compact {

453 #compact-secondary-nav {

454 display: inline-block;

455 }

456 .compact-hide {

457 display: none;

458 }

459 }

460

461 /* Utility for styling notification numbers */

462

463 .count-number {

464 padding: 2px $lineheight/4;

465 border-radius: 2px;

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

467 margin: 0 2px;

468 font-size: 11px;

469 color: #333;

470 }

471

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

473

474 #noscript {

475 z-index: 20000000;

476 margin-left: 400px;

477 margin-top: 50px;

478 }

479

480 /* Rules for Leaflet maps */

481

482 .leaflet-control .control-button {

483 display: block;

484 height: 40px;

485 width: 40px;

486 background-color: #333;

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

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

489 margin-bottom: 10px;

490 outline: none;

491

492 &:hover {

493 background-color: black;

494 }

495

496 &.disabled,

497 &.leaflet-disabled {

498 background-color: #333;

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

500 cursor: default;

501 }

502

503 &.active {

504 background-color: #9ed485;

505 }

506

507 .icon {

508 margin: 10px;

509 }

510 }

511

512 .leaflet-control .zoomin,

513 .control-layers .control-button {

514 margin-bottom: 0px;

515 border-radius: 4px 0 0 0;

516 }

517

518 .leaflet-control .zoomout,

519 .control-key .control-button {

520 margin-bottom: 0;

521 border-radius: 0;

522 }

523

524 .control-locate .control-button,

525 .control-share .control-button {

526 border-radius: 0 0 0 4px;

527 }

528

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

530

531 .map-layout {

532 #content {

533 overflow: hidden;

534 position: absolute;

535 top: $headerHeight;

536 bottom: 0;

537 width: 100%;

538 }

539

540 #sidebar, #map {

541 position: relative;

542 height: 100%;

543 overflow-x: hidden;

544 overflow-y: auto;

545 }

546

547 #sidebar {

548 float: left;

549 width: $sidebarWidth;

550 background: #fff;

551 font-size: 12px;

552

553 #sidebar_loader {

554 display: none;

555 }

556

557 > div {

558 position: relative;

559 float: left;

560 clear: both;

561 width: 100%;

562 }

563

564 h2 {

565 padding: $lineheight $lineheight $lineheight/2;

566 }

567

568 h3, h4 {

569 margin-top: $lineheight;

570 margin-bottom: $lineheight/2;

571 font-size: 13px;

572 }

573

574 .close-wrap {

575 cursor: pointer;

576 position: absolute;

577 top: 0;

578 right: 0;

579 width: 60px;

580 height: 60px;

581

582 .icon.close {

583 pointer-events: none;

584 position: absolute;

585 right: 20px;

586 top: 20px;

587 }

588 }

589

590 .icon.close {

591 float: right;

592 cursor: pointer;

593 }

594

595 .flash {

596 padding: 15px;

597

598 picture {

599 margin-right: -25px;

600 }

601

602 div.message {

603 margin-left: 30px;

604 }

605 }

606 }

607

608 .overlay-sidebar #sidebar {

609 position: absolute;

610 z-index: 1000;

611 height: auto;

612 overflow: hidden;

613

614 #banner,

615 .welcome {

616 display: block;

617 }

618

619 #sidebar_content {

620 display: none;

621 }

622 }

623

624 .welcome {

625 display: none;

626 padding-bottom: 5px;

627

628 p {

629 padding: $lineheight/2 $lineheight $lineheight;

630 font-size: 110%;

631 font-weight: 300;

632 }

633

634 .button {

635 width: 50%;

636 float: left;

637 margin: 0;

638 border-radius: 0;

639 font-weight: normal;

640 padding: .6em;

641

642 &.learn-more {

643 border-right: 1px solid #fff;

644 }

645 }

646 }

647

648 #banner {

649 display: none;

650

651 img {

652 display: block;

653 width: $sidebarWidth;

654 }

655 }

656

657 #map {

658 height: 100%;

659 overflow: hidden;

660

661 &.query-active {

662 cursor: help;

663 }

664

665 &.query-disabled {

666 cursor: not-allowed;

667 }

668

669 .leaflet-marker-draggable {

670 cursor: move;

671 }

672 }

673

674 #map-ui {

675 display: none;

676 position: relative;

677 float: right;

678 width: 250px;

679 height: 100%;

680 background: white;

681 overflow: auto;

682

683 .section {

684 border-bottom: 1px solid #DDD;

685 padding: 10px 20px;

686 }

687

688 a.close-button {

689 float: right;

690 padding:5px;

691 font-size:20px;

692 line-height:10px;

693 color:#222;

694 border:1px solid #ddd;

695 }

696

697 .tooltip {

698 opacity: 1;

699 border: 1px solid #ccc;

700 .tooltip-arrow {

701 border-top-color: #ccc;

702 }

703 }

704 }

705 }

706

707 .layers-ui,

708 .share-ui {

709 li:last-child {

710 margin-bottom: 0;

711 }

712 }

713

714 .layers-ui {

715 .base-layers {

716 .leaflet-container {

717 width: 100%;

718 height: 50px;

719 cursor: pointer;

720 }

721

722 li {

723 overflow: hidden;

724 border-radius: 3px;

725 border: 2px solid #fff;

726 margin-bottom: 8px;

727 position: relative;

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

729

730 label {

731 position: absolute;

732 top: 0;

733 left: 0;

734 padding: 2px 6px;

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

736 cursor: pointer;

737 font-weight: 600;

738 font-size: 16px;

739 text-stroke: 2px #fff;

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

741 z-index: 1000;

742 input[type="radio"] {

743 display: none;

744 }

745 }

746

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

748 &:hover {

749 border-color: $grey;

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

751 }

752 }

753 }

754

755 .overlay-layers {

756 p {

757 font-size: 13px;

758 margin-bottom: 8px;

759 }

760 li.disabled { color: #999; }

761 }

762 }

763

764 .share-ui {

765 .share-tabs {

766 margin-bottom: 10px;

767

768 a {

769 color: #fff;

770 text-decoration: none;

771 background-color: $lightblue;

772 padding: 5px 10px;

773 border-right: 1px solid #fff;

774 }

775

776 a:first-child {

777 border-right: 1px solid #fff;

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

779 }

780

781 a:last-child {

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

783 }

784

785 a.active {

786 background-color: $blue;

787 }

788 }

789

790 .share-tab {

791 display: none;

792 }

793

794 .share-link {

795 input[type=text],

796 textarea {

797 width: 100%;

798 font-family: monospace;

799 font-size: small;

800 line-height: 1.3;

801 }

802 }

803

804 .share-image {

805 label {

806 margin-right: 10px;

807 }

808 }

809

810 #embed_html {

811 resize: vertical;

812 }

813

814 #mapnik_scale {

815 width: 100px;

816 }

817 }

818

819 .leaflet-top {

820 top: $lineheight/2 !important;

821 .leaflet-control {

822 margin-right: 0px !important;

823 margin-top: 0px !important;

824 }

825 }

826

827 .leaflet-popup-scrolled {

828 padding-right: $lineheight;

829 border-bottom: 0px !important;

830 border-top: 0px !important;

831 }

832

833 .leaflet-popup-content-wrapper {

834 border-radius: 4px !important;

835 }

836

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

838

839 #attribution {

840 display: none;

841

842 table {

843 width: 100%

844 }

845 }

846

847 .attribution_license,

848 .attribution_project {

849 text-align: left;

850 }

851

852 .attribution_notice {

853 text-align: center;

854 }

855

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

857

858 /* Rules for the sidebar */

859

860 .sidebar_heading {

861 position: relative;

862 padding: $lineheight/2 $lineheight;

863 // background: $offwhite;

864 // border-bottom: 1px solid #ccc;

865 > .close {

866 float: right;

867 margin-top: 2px;

868 cursor: pointer;

869 }

870 }

871

872 #browse_status {

873 p {

874 padding: $lineheight;

875 }

876

877 input {

878 display: block;

879 margin-left: auto;

880 margin-right: auto;

881 }

882 }

883

884 #sidebar {

885 #sidebar_loader,

886 .search_more {

887 width: 100%;

888 margin: $lineheight auto;

889 }

890

891 .loader,

892 .load_more {

893 text-align: center;

894 margin: auto;

895 width: 40px;

896 display: block;

897 }

898 }

899

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

901

902 header .search_forms,

903 .directions_form {

904 display: none;

905 }

906

907 .search_form,

908 .directions_form {

909 position: relative;

910 padding: $lineheight/2;

911 background-color: $lightgrey;

912

913 .query_wrapper {

914 position: relative;

915 overflow: hidden;

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

917 }

918

919 input[type=text] {

920 width: 100%;

921 height: 30px;

922 transition: 300ms linear;

923 }

924

925 input[type=text].overflow {

926 border-right: none;

927 }

928

929 input:focus {

930 outline: none;

931 box-shadow: 0px 0px 7px #9ED485;

932 }

933

934 input[type=submit].float {

935 float: right;

936 width: auto;

937 min-width: 0;

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

939 }

940

941 input.error {

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

943 }

944

945 select {

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

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

948 padding: 0.3em 0;

949 }

950

951 .query_options {

952 text-align: right;

953 font-size: 10px;

954 color: $blue;

955 }

956

957 .describe_location {

958 position: absolute;

959 top: 6px;

960 right: 6px;

961 font-size: 10px;

962 color: $blue;

963 }

964

965 .switch_link {

966 float: right;

967 width: auto;

968 min-width: 0;

969 margin-left: 6px;

970 }

971

972 img.button {

973 display: block;

974 }

975

976 span.force_width {

977 width: 100%;

978 padding-right: 25px;

979 display: block;

980 }

981

982 select.routing_engines {

983 min-height: 30px;

984 margin: 0px 0px 5px 25px;

985 }

986

987 input.routing_go {

988 min-width: 100px;

989 float: right;

990 }

991

992 div.header {

993 width: 100%;

994 height: 30px;

995 }

996

997 div.line {

998 width: 100%;

999 margin: 0px 0px 5px 0px;

1000 }

1001

1002 div.loader_copy {

1003 display: none;

1004

1005 img {

1006 vertical-align: middle;

1007 }

1008 }

1009

1010 a.reverse_directions {

1011 cursor: pointer;

1012 margin: 0px 0px 5px 25px;

1013 }

1014 }

1015

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

1017

1018 #mapkey {

1019 .mapkey-table-key img {

1020 display: block;

1021 margin-left: auto;

1022 margin-right: auto;

1023 }

1024 td {

1025 padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;

1026 }

1027 }

1028

1029 /* Rules for search sidebar */

1030

1031 .search_results_entry {

1032 ul li {

1033 border-bottom: $keyline;

1034 cursor: pointer;

1035 &:first-child { border-top: $keyline; }

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

1037 }

1038

1039 .search_details {

1040 display: block;

1041 float: right;

1042 text-align: right;

1043 margin-top: 0.2em;

1044 margin-left: 0.5em;

1045 }

1046 }

1047

1048 .search_results_error {

1049 color: #f00;

1050 padding: 10px 20px;

1051 }

1052

1053 /* Rules for routing */

1054

1055 #sidebar_content>table {

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

1057 width: 100%;

1058 border-collapse: separate;

1059 }

1060

1061 div.direction {

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

1063 width: 20px;

1064 height: 20px;

1065 background-repeat: no-repeat;

1066 }

1067 @for $i from 0 through 25 {

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

1069 }

1070

1071 p#routing_summary {

1072 padding: 0 $lineheight $lineheight/4;

1073 }

1074

1075 td.instruction, td.distance {

1076 padding-top: $lineheight/5;

1077 padding-bottom: $lineheight/5;

1078 border-bottom: 1px solid #DDD;

1079 }

1080 td.distance {

1081 color: #BBB;

1082 text-align: right;

1083 font-size: x-small;

1084 }

1085 tr.turn {

1086 cursor: pointer;

1087 }

1088 tr.turn:hover {

1089 background: $list-highlight;

1090 }

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

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

1093

1094 /* Rules for entity history */

1095

1096 #sidebar_content {

1097 .browse_details {

1098 position: relative;

1099 border-bottom: $keyline;

1100 }

1101 }

1102

1103 .browse_status {

1104 display: none;

1105 }

1106

1107 /* Rules for the history sidebar */

1108

1109 #sidebar .changesets {

1110 li {

1111 padding: 15px 20px;

1112 border-bottom: 1px solid #ddd;

1113 cursor: pointer;

1114

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

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

1117 }

1118

1119 h4 {

1120 margin: 0;

1121 a {

1122 color: #000;

1123 }

1124 }

1125

1126 .comments {

1127 float: right;

1128 color: #999;

1129 }

1130

1131 .comments-0 {

1132 opacity: 0.5;

1133 }

1134 }

1135

1136 /* Rules for the browse sidebar */

1137

1138 #sidebar_content {

1139 .browse-section {

1140 padding: $lineheight/2 $lineheight;

1141 border-bottom: 1px solid #ddd;

1142

1143 h4:first-child {

1144 margin-top: 0;

1145 word-wrap: break-word;

1146 }

1147 }

1148

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

1150 border-bottom: none;

1151 }

1152

1153 .paginate {

1154 float: right;

1155 padding: 1px 6px;

1156 border: 1px solid #eee;

1157 border-radius: 3px;

1158 }

1159

1160 .paginate ul {

1161 padding-left: 20px;

1162 }

1163

1164 .browse-field {

1165 margin-bottom: 10px;

1166

1167 h4 {

1168 padding: 5px 0 5px 10px;

1169 font-size: 12px;

1170 border: 1px solid #CCC;

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

1172 background-color: #F6F6F6;

1173 }

1174

1175 p {

1176 padding: 7px 10px;

1177 font-size: 12px;

1178 background-color: #FFF;

1179 border: 1px solid #CCC;

1180 border-top: 0;

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

1182 }

1183 }

1184

1185 .browse-tag-list {

1186 background-color: #F6F6F6;

1187 border: 1px solid #ddd;

1188 border-radius: 3px;

1189 font-size: 12px;

1190 table-layout: fixed;

1191 border-collapse: separate;

1192

1193 th, td {

1194 border-bottom: 1px solid #ddd;

1195 }

1196

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

1198 border-bottom: 0;

1199 }

1200

1201 .browse-tag-k,

1202 .browse-tag-v {

1203 width: 50%;

1204 padding: 6px 10px;

1205 word-wrap: break-word;

1206 white-space: pre-wrap;

1207 }

1208

1209 .browse-tag-k {

1210 font-weight: 500;

1211 background-color: #F6F6F6;

1212 }

1213

1214 .browse-tag-v {

1215 border-left: 1px solid #ddd;

1216 background-color: #fff;

1217 }

1218 }

1219

1220 .warning {

1221 margin: 0 0 $lineheight/2 0;

1222 padding: 0 $lineheight/2;

1223 }

1224

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

1226 margin: $lineheight/2 0;

1227

1228 p {

1229 margin-left: 10px;

1230 }

1231 }

1232

1233 .comments-header {

1234 float: left;

1235 }

1236

1237 .subscribe-buttons {

1238 float: left;

1239 margin: 18px 10px 10px;

1240 min-width: 80px;

1241 }

1242

1243 .subscribe-buttons input {

1244 font-size: 90%;

1245 line-height: 15px;

1246 min-height: 20px;

1247 }

1248

1249 span.action-button:hover {

1250 cursor: pointer;

1251 text-decoration: underline;

1252 }

1253

1254 .note-description {

1255 overflow: hidden;

1256 margin: 0 0 10px 10px;

1257 }

1258

1259 .query-intro p {

1260 padding: $lineheight $lineheight $lineheight/2;

1261 }

1262

1263 .query-results {

1264 display: none;

1265

1266 h3 {

1267 padding: $lineheight $lineheight $lineheight/2;

1268 margin: 0;

1269 }

1270

1271 ul {

1272 li {

1273 padding: 15px 20px;

1274 border-bottom: 1px solid #ddd;

1275

1276 &.query-result {

1277 cursor: pointer;

1278 }

1279

1280 &.selected {

1281 background: $list-highlight;

1282 }

1283 }

1284 }

1285 }

1286 }

1287

1288 /* Rules for export sidebar */

1289

1290 .export_form {

1291 padding: $lineheight;

1292

1293 .export_area_inputs,

1294 .export_button {

1295 text-align: center;

1296 }

1297

1298 .export_area_inputs {

1299 margin-bottom: $lineheight/2;

1300 input[type="text"] {

1301 width: 80px;

1302 text-align: center;

1303 margin-bottom: 5px;

1304 }

1305 }

1306

1307 .export_boxy {

1308 background: #eee;

1309 border: 1px solid #ccc;

1310 border-radius: 3px;

1311

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

1313 #minlon {

1314 float: left;

1315 margin-left: -1px;

1316 }

1317 #maxlon {

1318 float: right;

1319 margin-right: -1px;

1320 }

1321 #minlat { margin-bottom: 0; }

1322 }

1323

1324 .export_bound {

1325 margin: $lineheight/4;

1326 }

1327

1328 .export_button {

1329 margin-top: $lineheight;

1330 margin-bottom: $lineheight;

1331 }

1332

1333 dl {

1334 padding-left: $lineheight/2;

1335 dd {

1336 margin-left: 0;

1337 margin-bottom: 10px;

1338 }

1339 }

1340 }

1341

1342 /* Rules for the routing sidebar */

1343

1344 #sidebar_content {

1345 #routing_credit {

1346 text-align: center;

1347 padding: 0.5em;

1348 }

1349 }

1350

1351 /* Rules for edit pages */

1352

1353 .site-edit {

1354 #content {

1355 position: absolute;

1356 top: $headerHeight;

1357 bottom: 0;

1358 width: 100%;

1359 }

1360

1361 #map {

1362 height: 100%;

1363 overflow: hidden;

1364 }

1365 }

1366

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

1368

1369 .content-heading {

1370 background: $lightgrey;

1371

1372 h1 { font-size: 22px; }

1373 }

1374

1375 .content-body {

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

1377 margin-bottom: $lineheight;

1378 }

1379

1380 h1, h2, h3 {

1381 margin-top: $lineheight/2;

1382 }

1383 }

1384

1385 .content-inner {

1386 position: relative;

1387 max-width: 900px;

1388 margin: auto;

1389 padding: $lineheight;

1390 }

1391

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

1393

1394 .user-new,

1395 .user-create,

1396 .user-terms {

1397 .content-body .content-inner {

1398 padding: 0;

1399

1400 .message {

1401 margin-top: 80px;

1402 padding: 20px;

1403 }

1404 }

1405 }

1406

1407 .user-new,

1408 .user-create,

1409 .user-terms,

1410 .user-confirm {

1411 .content-heading .content-inner {

1412 height: 200px;

1413 }

1414 }

1415

1416 .header-illustration {

1417 background-position: 0 0;

1418 background-repeat: no-repeat;

1419 position: absolute;

1420 height: 200px;

1421 width: 100%;

1422 left: 0;

1423 bottom: 0;

1424

1425 &.new-user-main {

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

1427 }

1428

1429 &.confirm-main {

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

1431 }

1432

1433 &.new-user-terms {

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

1435 }

1436

1437 &.new-user-arm {

1438 height: 110px;

1439 width: 130px;

1440 left: 260px;

1441 top: 160px;

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

1443 z-index: 100;

1444 }

1445 }

1446

1447 #content.maximised {

1448 top: 0;

1449 left: 0;

1450 right: 0;

1451 bottom: 0;

1452 border: 0;

1453 z-index: 2000;

1454 }

1455

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

1457

1458 .content_map {

1459 position: relative;

1460 width: 45%;

1461 height: 400px;

1462 border: 1px solid #ccc;

1463 margin-bottom: $lineheight;

1464 float: right;

1465 }

1466

1467 /* Rules for the trace list shown by the traces tab etc */

1468

1469 #trace_list {

1470 font-size: $lineheight/2;

1471 border-width: 0px;

1472 text-align: right;

1473

1474 .trace_summary {

1475 font-size: 12px;

1476 color: gray;

1477 }

1478

1479 .trace_pending {

1480 color: red;

1481 }

1482

1483 .trace_public {

1484 color: green;

1485 }

1486

1487 .trace_identifiable {

1488 color: green;

1489 }

1490

1491 .trace_trackable {

1492 color: red;

1493 }

1494

1495 .trace_private {

1496 color: red;

1497 }

1498 }

1499

1500 /* Rules for the trace view */

1501

1502 .trace-view {

1503 .trace_pending {

1504 color: red;

1505 }

1506

1507 .geo {

1508 display: inline;

1509 }

1510 }

1511

1512 /* Rules for the new trace form */

1513

1514 #new_trace {

1515 input[type=text] {

1516 width: 50%;

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

1518 max-width: 500px;

1519 }

1520 }

1521

1522 /* Rules for the edit trace form */

1523

1524 .edit_trace {

1525 .form-row p {

1526 margin-bottom: 0px;

1527 }

1528

1529 input[type=text] {

1530 width: 50%;

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

1532 max-width: 500px;

1533 }

1534 }

1535

1536 /* Rules for the user profile page */

1537

1538 #userinformation {

1539

1540 min-height: 100px;

1541 .userinformation-inner {

1542 float: left;

1543 }

1544 h2 {

1545 margin-top: 0;

1546 }

1547 .user-description {

1548 width: 100%;

1549 clear: both;

1550 }

1551 .deemphasize {

1552 margin: 0;

1553 }

1554 }

1555

1556 .admin-user-info small {

1557 margin-bottom: $lineheight/2;

1558 display: inline;

1559 margin-right: $lineheight;

1560 }

1561

1562 .activity-block {

1563 clear: left;

1564 border-bottom: 1px solid #ccc;

1565 padding-bottom: $lineheight;

1566 float: left;

1567 h3 {

1568 margin-bottom: $lineheight/2;

1569 }

1570 }

1571

1572 .contact-activity {

1573 margin-top: $lineheight;

1574 width: 100%;

1575 }

1576

1577 .activity-details p {

1578 margin-left: 70px;

1579 margin-bottom: 0;

1580 }

1581

1582 #friends-container .contact-activity ul {

1583 margin-left: 70px;

1584 }

1585

1586 .user-view {

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

1588 .content-inner {

1589 max-width: none;

1590 }

1591 p#no_home_location {

1592 margin: $lineheight;

1593 }

1594 .user_thumbnail {

1595 margin-top: $lineheight/4;

1596 float: left;

1597 }

1598 }

1599

1600 /* Rules for the user map */

1601

1602 .content_map .leaflet-popup-content {

1603 margin: $lineheight/2;

1604 min-height: 50px;

1605 }

1606

1607 /* Rules for user popups on maps */

1608

1609 .user_popup {

1610 min-width: 200px;

1611 p {

1612 padding: 0 0 5px 0;

1613 margin-top: 0 0 0 60px;

1614 font-size: 12px;

1615 }

1616 img.user_thumbnail {

1617 float: left;

1618 margin: 0 $lineheight/2 0 0;

1619 }

1620 }

1621

1622 /* Rules for the user list */

1623

1624 #user_list {

1625 font-size: $lineheight/2;

1626 width: 100%;

1627

1628 tr {

1629 vertical-align: middle;

1630 }

1631

1632 p {

1633 margin-top: 0px;

1634 margin-bottom: 0px;

1635 }

1636 }

1637

1638 #user_list_actions {

1639 float: right;

1640 margin-top: $lineheight/2;

1641 }

1642

1643 /* Rules for the diary list page */

1644

1645 .diary_post {

1646 position: relative;

1647 margin-top: $lineheight/2;

1648 padding-top: $lineheight;

1649 border-top: 1px solid #ccc;

1650

1651 .post_heading {

1652 margin-bottom: $lineheight;

1653

1654 h2 {

1655 margin-top: 0;

1656 margin-bottom: $lineheight/2;

1657 font-size: 24px;

1658 }

1659 }

1660

1661 img.user_thumbnail {

1662 float: left;

1663 }

1664

1665 small.deemphasize {

1666 float: left;

1667 display: block;

1668 }

1669 }

1670

1671 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div

1672 display: inline;

1673 }

1674

1675 .pagination {

1676 padding-top: $lineheight;

1677 }

1678

1679 /* Rules for the diary entry page */

1680

1681 .diary_entry {

1682 #map {

1683 position: relative;

1684 width: 90%;

1685 height: 400px;

1686 border: 1px solid #ccc;

1687 display: none;

1688 margin-bottom: $lineheight;

1689 }

1690 #newcomment {

1691 border-top: 1px solid #ccc;

1692 padding-top: $lineheight;

1693 margin-top: $lineheight/2;

1694 }

1695 .comments {

1696 max-width: 740px;

1697 }

1698 .diary-comment {

1699 margin-top: $lineheight/2;

1700 border-top: 1px dashed #ccc;

1701 padding-top: $lineheight/2;

1702 &:first-child {

1703 margin-top: $lineheight;

1704 padding-top: $lineheight;

1705 border-top: 1px solid #ccc;

1706 }

1707 p {

1708 margin-bottom: $lineheight/2;

1709 }

1710 .comment-heading {

1711 margin-bottom: 0;

1712 margin-top: 0;

1713 }

1714 }

1715 }

1716

1717 .diary_entry-view img.user_thumbnail {

1718 float: left;

1719 }

1720

1721

1722 .diary-subscribe-buttons {

1723 position:relative;

1724 top: -30px;

1725 left: 130px;

1726 }

1727

1728 /* Rules for the log in page */

1729

1730 #login_auth_buttons {

1731 margin-bottom: 0;

1732 }

1733

1734 #login_auth_buttons li {

1735 float: left;

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

1737 }

1738

1739 /* Rules for the account confirmation page */

1740

1741 .user-terms {

1742 .legale {

1743 border: 1px solid #ccc;

1744 padding: $lineheight;

1745 margin-bottom: $lineheight;

1746 overflow: auto;

1747 height: 20em;

1748

1749 li {

1750 list-style: inherit;

1751 }

1752

1753 ol ol {

1754 list-style-type: lower-alpha;

1755 }

1756 }

1757

1758 #decline {

1759 background: $lightblue;

1760 &:hover {

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

1762 }

1763 }

1764 }

1765

1766 /* Rules for the account settings page */

1767

1768 #accountForm .user_map {

1769 position: relative;

1770 width: 500px;

1771 height: 400px;

1772 border: 1px solid #ccc;

1773 }

1774

1775 #accountForm .user_image {

1776 margin-bottom: 0;

1777 }

1778

1779 #accountForm #user_image {

1780 margin-left: 20px;

1781 }

1782

1783 #accountForm ul.accountImage-options {

1784 margin-left: 120px;

1785 }

1786

1787 .nohome .location {

1788 display: none;

1789 }

1790

1791 #homerow .message {

1792 display: none;

1793 }

1794

1795 .nohome .message {

1796 display: inline !important;

1797 }

1798

1799 .content_map.settings_map {

1800 width: 50%;

1801 float: none;

1802 }

1803

1804 /* Rules for the oauth settings page */

1805

1806 .oauth_clients .buttons .oauth-edit {

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

1808 }

1809

1810 .oauth_clients .buttons .oauth-delete {

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

1812 }

1813

1814 /* Rules for the oauth authorization page */

1815

1816 .oauth-authorize ul {

1817 list-style: none;

1818 }

1819

1820 /* Rules for messages pages */

1821

1822 .messages {

1823 width: 100%;

1824 border: 1px solid #ddd;

1825

1826 input[type="submit"] {

1827 margin: auto;

1828 }

1829 tbody tr {

1830 border-top: 1px solid #ccc;

1831 }

1832

1833 .inbox-row {

1834 background: #f8f8ff;

1835 }

1836

1837 .inbox-row-unread {

1838 background:#CBEEA7;

1839 }

1840

1841 .right {

1842 float: right;

1843 }

1844

1845 tr td,

1846 tr th {

1847 padding: $lineheight/4;

1848 }

1849 p:last-child,

1850 h2:last-child,

1851 h3:last-child,

1852 ol:last-child,

1853 ul:last-child {

1854 margin-bottom:0;

1855 }

1856 tr td {

1857 height: 30px;

1858 border-right: 1px solid $lightgrey;

1859 }

1860 }

1861

1862 .inbox-row .inbox-mark-read {

1863 display: none;

1864 }

1865

1866 .info-line {

1867 margin-bottom: $lineheight;

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

1869 border-bottom: 1px solid #ccc;

1870

1871 form, form div {

1872 display: inline;

1873 }

1874 }

1875

1876 .info-line .user_thumbnail_tiny {

1877 vertical-align: middle;

1878 }

1879

1880 .inbox-sent {

1881 white-space: nowrap;

1882 }

1883

1884 .inbox-mark-unread,

1885 .inbox-mark-read,

1886 .inbox-delete {

1887 width: 1%;

1888 }

1889

1890 .inbox-row-unread .inbox-mark-unread {

1891 display: none;

1892 }

1893

1894 .message-read .message-buttons {

1895 margin-top: $lineheight;

1896 margin-bottom: $lineheight * 1.5;

1897 padding-top: $lineheight;

1898 border-top: 1px solid $lightgrey;

1899 }

1900

1901 .message-read .buttons .mark-unread-button {

1902 border-radius: 0;

1903 }

1904

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

1906

1907 .flash {

1908 padding: $lineheight;

1909

1910 &.error {

1911 background-color: #ff7070;

1912 }

1913

1914 &.warning {

1915 background-color: #ffe0cc;

1916 }

1917

1918 &.notice {

1919 background-color: #CBEEA7;

1920 }

1921

1922 div.message {

1923 display: inline-block;

1924 margin-left: $lineheight / 2;

1925 vertical-align: middle;

1926

1927 p {

1928 margin-top: $lineheight * 0.5;

1929 margin-bottom: $lineheight * 0.5;

1930

1931 &:first-child {

1932 margin-top: 0px;

1933 }

1934

1935 &:last-child {

1936 margin-bottom: 0px;

1937 }

1938 }

1939 }

1940 }

1941

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

1943

1944 .formError {

1945 display: inline-block;

1946 padding: 5px 10px;

1947 margin-top: 5px;

1948 border-radius: 4px;

1949 font-size: 12px;

1950 color: #fff;

1951 background-color: #ff7070;

1952 }

1953

1954 /* Rules for rails validation error boxes */

1955

1956 #errorExplanation {

1957 width: 400px;

1958 border: 2px solid #ff7070;

1959 padding: 0 $lineheight/2;

1960 margin-bottom: $lineheight;

1961 background-color: #f0f0f0;

1962

1963 h2 {

1964 margin: 0 -10px 10px -10px;

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

1966 font-weight: bold;

1967 font-size: 12px;

1968 background-color: #c00;

1969 color: #fff;

1970 text-align: left;

1971 }

1972

1973 p {

1974 color: #333;

1975 margin-bottom: 0px;

1976 padding: $lineheight/4;

1977 }

1978

1979 ul {

1980 padding-left: $lineheight;

1981

1982 li {

1983 font-size: 12px;

1984 list-style: disc;

1985 }

1986 }

1987 }

1988

1989 /* Rules for forms */

1990

1991 .standard-form {

1992 fieldset {

1993 margin-bottom: $lineheight;

1994 }

1995 label.standard-label {

1996 display: block;

1997 margin-bottom: $lineheight/4;

1998 font-size: $typeheight;

1999 font-weight: bold;

2000 line-height: 1.5;

2001 }

2002 label.standard-label.secondary {

2003 display: inline-block;

2004 font-weight: normal;

2005 }

2006 .form-help {

2007 font-weight: normal;

2008 }

2009 .form-column {

2010 float: left;

2011 margin-right: 20px;

2012 }

2013 .form-divider {

2014 margin-top: $lineheight;

2015 padding-top: $lineheight;

2016 border-top: 1px solid $lightgrey;

2017 }

2018 .horizontal-list .form-row {

2019 float: left;

2020 padding-right: 10px;

2021 }

2022 .form-row {

2023 margin-bottom: $lineheight/2;

2024 }

2025 .form-list {

2026 margin-bottom: 0;

2027 }

2028 .form-list li {

2029 margin-bottom: 5px;

2030 }

2031 input[type="checkbox"],

2032 input[type="radio"] {

2033 float: left;

2034 margin-top: 5px;

2035 }

2036 }

2037

2038 #remember_me_openid {

2039 display: block;

2040 }

2041

2042 select {

2043 padding: 2px;

2044 }

2045

2046 input[type="checkbox"],

2047 input[type="radio"] {

2048 margin-right: 5px;

2049 }

2050

2051 input[type="text"],

2052 input[type="email"],

2053 input[type="url"],

2054 input[type="password"],

2055 textarea {

2056 color: #222;

2057 background-color: #fff;

2058 border: 1px solid #ccc;

2059 padding: 2px 5px;

2060 margin: 0;

2061 width: 200px;

2062

2063 &.field_with_errors {

2064 border: 2px solid #ff7070;

2065 }

2066 }

2067

2068 textarea {

2069 padding: 5px;

2070 width: 100%;

2071 }

2072

2073 /* Rules for user images */

2074

2075 img.user_image {

2076 max-width: 100px;

2077 max-height: 100px;

2078 border: 1px solid #ccc;

2079 margin-bottom: $lineheight;

2080 float: left;

2081 margin-right: $lineheight;

2082 }

2083

2084 img.user_thumbnail {

2085 max-width: 50px;

2086 max-height: 50px;

2087 border: 1px solid #ccc;

2088 margin-right: $lineheight;

2089 }

2090

2091 img.user_thumbnail_tiny {

2092 width: auto;

2093 height: auto;

2094 max-width: 25px;

2095 max-height: 25px;

2096 border: 1px solid #ccc;

2097 }

2098

2099 /* Rules for geo microformats */

2100

2101 abbr.geo {

2102 border-bottom: none;

2103 }

2104

2105 /* Rules for RSS buttons */

2106

2107 .rsssmall {

2108 position: relative;

2109 top: 3px;

2110 }

2111

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

2113

2114 ul.secondary-actions {

2115 font-style: normal;

2116 margin-bottom: 0;

2117 margin-left: 0;

2118 &.pager {

2119 display: inline-block;

2120 margin-right: 60px;

2121 }

2122 > li {

2123 display: block;

2124 float: left;

2125 list-style: none;

2126 border-left: 1px solid #ccc;

2127 padding-left: $lineheight/2;

2128 margin-right: $lineheight/2;

2129 &:first-child {

2130 border-left: 0;

2131 padding-left: 0;

2132 }

2133 &:last-child {

2134 margin-right: 0px;

2135 }

2136 }

2137 }

2138

2139 div.secondary-actions {

2140 padding: 10px;

2141 text-align: center;

2142 }

2143

2144 /* Utility for managing inner content areas */

2145

2146 .inner22 { padding: $lineheight;}

2147

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

2149

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

2151

2152 .inner20 { padding: $lineheight 0;}

2153

2154 .inner02 { padding: 0 $lineheight;}

2155

2156 /* Utility for general button styles */

2157

2158 input[type="button"],

2159 input[type="submit"],

2160 input[type="reset"],

2161 a.button {

2162 cursor: pointer;

2163 border: 0;

2164 display: inline-block;

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

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

2167 min-width: 120px;

2168 margin: 0 0 $lineheight/2 0;

2169 color: white;

2170 background: $blue;

2171 text-align: center;

2172 border-radius: 2px;

2173 &:hover {

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

2175 text-decoration: none;

2176 }

2177 &.deemphasize {

2178 background: $lightblue;

2179 &:hover {

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

2181 }

2182 }

2183 &:disabled {

2184 background: $lightgrey;

2185 &:hover {

2186 background: $lightgrey;

2187 }

2188 }

2189 &:last-child {

2190 margin-bottom: 0;

2191 }

2192 }

2193

2194 input[type="button"],

2195 input[type="submit"],

2196 input[type="reset"] {

2197 line-height: normal;

2198 }

2199

2200 a.button {

2201 line-height: 20px;

2202 }

2203

2204 .buttons {

2205 min-width: 200px;

2206 input[type="submit"],

2207 input[type="button"],

2208 input[type="reset"],

2209 .button,

2210 .button_to {

2211 box-sizing: border-box;

2212 float: left;

2213 border-radius: 0;

2214 margin:0;

2215 min-width: 75px;

2216 max-width: 180px;

2217 border-right:1px solid white;

2218 text-overflow: ellipsis;

2219 white-space: nowrap;

2220 overflow: hidden;

2221 }

2222 input:first-child,

2223 .button:first-child,

2224 .button_to:first-child {

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

2226 }

2227 input:last-child,

2228 .button:last-child,

2229 .button_to:last-child {

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

2231 border-right-width: 0;

2232 }

2233 input:only-child,

2234 .button:only-child,

2235 .button_to:only-child,

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

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

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

2239 border-radius:2px;

2240 border-right-width: 0;

2241 }

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

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

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

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

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

2247 border-right-width: 0;

2248 }

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

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

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

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

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

2254 border-right-width: 1px;

2255 }

2256 }

2257

2258 /* Rules for doing distinct colour of alternate table rows */

2259

2260 .table0,

2261 .item0 {

2262 background: $offwhite;

2263 }

2264

2265 .table1,

2266 .item1 {

2267 background: #fff;

2268 }

2269

2270 /* Rules for OpenID logo */

2271

2272 .openid_logo {

2273 vertical-align: text-bottom;

2274 border: 0;

2275 }

2276

2277 /* Rules for rich text */

2278

2279 .richtext,

2280 .prose {

2281 h1, h2 {

2282 padding-bottom: $lineheight/2;

2283 border-bottom: 1px dashed #cccccc;

2284 margin-bottom: $lineheight/2;

2285 }

2286

2287 h1 {

2288 font-size: 24px;

2289 }

2290

2291 h2 {

2292 font-size: 18px;

2293 }

2294

2295 h3 {

2296 font-size: $typeheight;

2297 }

2298

2299 code {

2300 font-size: 13px;

2301 background: #e8e8e8;

2302 padding: 2px 3px;

2303 }

2304

2305 pre {

2306 font-size: 13px;

2307 background: #e8e8e8;

2308 padding: 2px 3px;

2309

2310 code {

2311 padding: 0;

2312 }

2313 }

2314

2315 img {

2316 padding: $lineheight;

2317 background-color: $offwhite;

2318 display: block;

2319 max-width: 100%;

2320 margin: auto;

2321 }

2322

2323 blockquote {

2324 border-left: $lineheight solid $offwhite;

2325 padding-left: $lineheight;

2326 margin: 0;

2327 color: #7E7E7E;

2328 }

2329

2330 ul, ol {

2331 padding-left: $lineheight;

2332 margin-bottom: $lineheight;

2333 margin-left: $lineheight;

2334 }

2335

2336 ul li {

2337 list-style: disc;

2338 }

2339

2340 ol li {

2341 list-style: decimal;

2342 }

2343 }

2344

2345 .diary_post .richtext {

2346 margin-top: $lineheight;

2347 }

2348

2349 .comments .richtext {

2350 margin-left: 70px;

2351 margin-top: 0;

2352 }

2353

2354 /* Rules for rich text editors */

2355

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

2357 width: 50%;

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

2359

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

2361 width: 100%;

2362 }

2363 }

2364

2365 .richtext_container {

2366 margin-bottom: $lineheight;

2367

2368 .richtext_content {

2369 width: 50%;

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

2371 display: inline-block;

2372 vertical-align: top;

2373

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

2375 width: 100%;

2376 }

2377

2378 .richtext_preview {

2379 display: inline-block;

2380 padding: $lineheight;

2381 background-color: $offwhite;

2382 overflow-x: auto;

2383

2384 &.loading {

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

2386 background-repeat: no-repeat;

2387 background-position: center;

2388 }

2389

2390 > :first-child {

2391 margin-top: 0px;

2392 }

2393 }

2394 }

2395

2396 .richtext_help {

2397 display: inline-block;

2398 vertical-align: top;

2399 margin-left: 15px;

2400 background-color: #f8f8ff;

2401 padding: $lineheight/2;

2402 width: 220px;

2403

2404 ul {

2405 margin-bottom: 0;

2406 }

2407

2408 h4.heading, li {

2409 border-bottom: 1px solid #ccc;

2410 margin-bottom: $lineheight/4;

2411 padding-bottom: $lineheight/4;

2412 }

2413

2414 li h4, li span, li p {

2415 display: inline-block;

2416 vertical-align: top;

2417 font-size: 11px;

2418 }

2419

2420 li h4 {

2421 width: 40%;

2422 margin: 0;

2423 }

2424

2425 li span, li p {

2426 width: 50%;

2427 margin-left: $lineheight/2;

2428 margin-bottom: $lineheight/4;

2429 white-space: nowrap;

2430 }

2431 }

2432 }

2433

2434 /* Rules for the user notes list */

2435

2436 .note_list {

2437 tr.creator {

2438 background-color: #eeeeee;

2439 }

2440

2441 td {

2442 padding: 3px;

2443 }

2444

2445 p {

2446 margin-bottom: 0px;

2447 }

2448 }

2449

2450 /* Rules for the iD editor */

2451

2452 .id-embed {

2453 width: 100%;

2454 height: 100%;

2455 }

2456

2457 /* Rules for dropdown menus */

2458

2459 .dropdown {

2460 position: relative;

2461 }

2462

2463 .dropdown-toggle {

2464 *margin-bottom: -3px;

2465 }

2466

2467 .dropdown-toggle:active,

2468 .open .dropdown-toggle {

2469 outline: 0;

2470 }

2471

2472 .caret {

2473 display: inline-block;

2474 width: 0;

2475 height: 0;

2476 vertical-align: top;

2477 border-top: 4px solid #000000;

2478 border-right: 4px solid transparent;

2479 border-left: 4px solid transparent;

2480 content: "";

2481 }

2482

2483 .dropdown .caret {

2484 margin-top: 8px;

2485 margin-left: 2px;

2486 }

2487

2488 .dropdown-menu {

2489 position: absolute;

2490 top: 100%;

2491 left: -1px;

2492 z-index: 1000;

2493 display: none;

2494 float: left;

2495 min-width: 160px;

2496 padding: 5px 0;

2497 margin: 0;

2498 list-style: none;

2499 background-color: #ffffff;

2500 border: 1px solid #ccc;

2501 border-radius: 0 3px 3px;

2502 *border-right-width: 2px;

2503 *border-bottom-width: 2px;

2504 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

2505 background-clip: padding-box;

2506 }

2507

2508 .dropdown-menu.pull-right {

2509 right: 0;

2510 left: auto;

2511 }

2512

2513 .dropdown-menu .divider {

2514 *width: 100%;

2515 height: 1px;

2516 margin: 9px 1px;

2517 *margin: -5px 0 5px;

2518 overflow: hidden;

2519 background-color: #e5e5e5;

2520 border-bottom: 1px solid #ffffff;

2521 }

2522

2523 .dropdown-menu > li > a {

2524 display: block;

2525 padding: 3px 10px;

2526 clear: both;

2527 font-weight: normal;

2528 line-height: 20px;

2529 color: #333333;

2530 white-space: nowrap;

2531 }

2532

2533 .dropdown-menu > li > a:hover,

2534 .dropdown-menu > li > a:focus,

2535 .dropdown-submenu:hover > a,

2536 .dropdown-submenu:focus > a {

2537 color: #ffffff;

2538 text-decoration: none;

2539 background-color: $green;

2540 }

2541

2542 .dropdown-menu > .active > a,

2543 .dropdown-menu > .active > a:hover,

2544 .dropdown-menu > .active > a:focus {

2545 color: #ffffff;

2546 text-decoration: none;

2547 background-color: $green;

2548 outline: 0;

2549 }

2550

2551 .dropdown-menu > .disabled > a,

2552 .dropdown-menu > .disabled > a:hover,

2553 .dropdown-menu > .disabled > a:focus {

2554 color: #999999;

2555 }

2556

2557 .dropdown-menu > .disabled > a:hover,

2558 .dropdown-menu > .disabled > a:focus {

2559 text-decoration: none;

2560 cursor: default;

2561 background-color: transparent;

2562 background-image: none;

2563 }

2564

2565 .open {

2566 *z-index: 1000;

2567 }

2568

2569 .open > .dropdown-menu {

2570 display: block;

2571 }

2572

2573 .dropdown-backdrop {

2574 position: fixed;

2575 top: 0;

2576 right: 0;

2577 bottom: 0;

2578 left: 0;

2579 z-index: 990;

2580 }

2581

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

2583 .site-welcome, .site-fixthemap {

2584 .center {

2585 text-align: center;

2586 .sprite {

2587 float: none;

2588 margin: auto;

2589 }

2590 }

2591

2592 .sprite {

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

2594 background-size: 500px 250px;

2595 display: block;

2596 float: left;

2597 }

2598

2599 .icon-list {

2600 padding-bottom: 20px;

2601 div {

2602 margin-bottom: 10px;

2603 p {

2604 padding-top: 10px;

2605 }

2606 }

2607 }

2608 .sprite.small {

2609 width: 50px;

2610 height: 50px;

2611 }

2612

2613 .sprite.x {

2614 background-position: -50px 0;

2615 }

2616

2617 .sprite.term {

2618 margin-right: 10px;

2619 vertical-align: middle;

2620 }

2621

2622 .sprite.node {

2623 background-position: -100px 0;

2624 }

2625

2626 .sprite.way {

2627 background-position: -150px 0;

2628 }

2629

2630 .sprite.tag {

2631 background-position: -200px 0;

2632 }

2633

2634 .sprite.editor {

2635 background-position: -250px 0;

2636 }

2637

2638 .sprite.question {

2639 background-position: -300px 0;

2640 }

2641

2642 .sprite.rules {

2643 background-position: -350px 0;

2644 }

2645

2646 .start-mapping {

2647 margin: auto;

2648 cursor: pointer;

2649 border: none;

2650 padding: 20px 40px;

2651 font-size: 30px;

2652 text-decoration: none;

2653 }

2654

2655 .note-box {

2656 margin-top: 20px;

2657 background-color: $offwhite;

2658 }

2659

2660 .icon.note {

2661 background-color: #333;

2662 border-radius: 4px;

2663 }

2664 }

2665

2666 .site-about #content {

2667 //background-color: #000;

2668 background-color: #eee;

2669 background-position: 50% 50%;

2670 background-repeat: no-repeat;

2671 background-size: cover;

2672 background-attachment: fixed;

2673

2674 .caption {

2675 max-width: 200px;

2676 font: 13px/20px Helvetica, Arial, sans-serif;

2677 position: fixed;

2678 text-align: right;

2679 right: 20px;

2680 bottom: 60px;

2681 text-shadow: #000 0px 1px 5px;

2682 color: #eee;

2683 opacity: 0.8;

2684 display: none;

2685 }

2686

2687 .caption a {

2688 color: white;

2689 white-space: nowrap;

2690 text-decoration: none;

2691 }

2692

2693 a.next {

2694 display: block;

2695 position: fixed;

2696 right: 10px;

2697 bottom: 10px;

2698 width: 40px;

2699 height: 40px;

2700 border-radius: 5px;

2701 text-indent: -9999px;

2702 overflow: hidden;

2703 background: image-url('about/sprite.png') -120px 0px no-repeat;

2704 background-color: #000;

2705 background-color: rgba(0, 0, 0, 0.5);

2706 }

2707

2708 .content-inner {

2709 position: relative;

2710 color: #333;

2711 min-width: 320px;

2712 max-width: 640px;

2713

2714 .section {

2715 margin-bottom: 30px;

2716 }

2717

2718 .section:last-child {

2719 margin-bottom: 0;

2720 }

2721 }

2722

2723 .text {

2724 background: white;

2725 padding: 40px;

2726 }

2727

2728 .attr {

2729 position: relative;

2730 padding: 170px 40px 20px;

2731 background: #333;

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

2733 margin-bottom: 0;

2734 margin-top: -20px;

2735

2736 h1 {

2737 display: block;

2738 color: white;

2739 font-weight: 300;

2740 font-size: 34px;

2741 span {

2742 color: #76c551;

2743 }

2744 }

2745

2746 .user-image {

2747 position: absolute;

2748 top: 0px;

2749 right: 240px;

2750 left: 0px;

2751 height: 150px;

2752 background-position: 0 50%;

2753 background-repeat: no-repeat;

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

2755 background-size: cover;

2756 background-color: #76c551;

2757 }

2758

2759 .byosm {

2760 position: absolute;

2761 top: 0px;

2762 right: 0px;

2763 z-index: 1;

2764 width: 240px;

2765 height: 150px;

2766 padding: 20px 20px 20px 40px;

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

2768 white-space: nowrap;

2769 color: #fff;

2770 background: #76c551;

2771 }

2772

2773 .byosm span {

2774 display: inline-block;

2775 width: 20px;

2776 margin-left: -20px;

2777 }

2778 }

2779

2780 h2 {

2781 margin-bottom: 10px;

2782 }

2783

2784 .icon {

2785 width: 30px;

2786 height: 30px;

2787 margin-right: 10px;

2788 vertical-align: middle;

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

2790

2791 &.local {

2792 /* no-r2 */

2793 background-position: 0px 0px;

2794 }

2795 &.community {

2796 /* no-r2 */

2797 background-position: 0px -40px;

2798 }

2799 &.open {

2800 /* no-r2 */

2801 background-position: 0px -80px;

2802 }

2803 &.partners {

2804 /* no-r2 */

2805 background-position: 0px -120px;

2806 }

2807 &.infringement {

2808 /* no-r2 */

2809 background-position: 0px -160px;

2810 }

2811 &.legal {

2812 /* no-r2 */

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

2814 }

2815 }

2816 }

2817

2818 @import 'browse';

2819

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

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

2822 display: none;

2823 }

2824 }