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 select {

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

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

944 padding: 0.3em 0;

945 }

946

947 .query_options {

948 text-align: right;

949 font-size: 10px;

950 color: $blue;

951 }

952

953 .describe_location {

954 position: absolute;

955 top: 6px;

956 right: 6px;

957 font-size: 10px;

958 color: $blue;

959 }

960

961 .switch_link {

962 float: right;

963 width: auto;

964 min-width: 0;

965 margin-left: 6px;

966 }

967

968 img.button {

969 display: block;

970 }

971

972 span.force_width {

973 width: 100%;

974 padding-right: 25px;

975 display: block;

976 }

977

978 select.routing_engines {

979 min-height: 30px;

980 margin: 0px 0px 5px 25px;

981 }

982

983 input.routing_go {

984 min-width: 100px;

985 float: right;

986 }

987

988 div.header {

989 width: 100%;

990 height: 30px;

991 }

992

993 div.line {

994 width: 100%;

995 margin: 0px 0px 5px 0px;

996 }

997

998 div.loader_copy {

999 display: none;

1000

1001 img {

1002 vertical-align: middle;

1003 }

1004 }

1005

1006 a.reverse_directions {

1007 cursor: pointer;

1008 margin: 0px 0px 5px 25px;

1009 }

1010 }

1011

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

1013

1014 #mapkey {

1015 .mapkey-table-key img {

1016 display: block;

1017 margin-left: auto;

1018 margin-right: auto;

1019 }

1020 td {

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

1022 }

1023 }

1024

1025 /* Rules for search sidebar */

1026

1027 .search_results_entry {

1028 ul li {

1029 border-bottom: $keyline;

1030 cursor: pointer;

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

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

1033 }

1034

1035 .search_details {

1036 display: block;

1037 float: right;

1038 text-align: right;

1039 margin-top: 0.2em;

1040 margin-left: 0.5em;

1041 }

1042 }

1043

1044 .search_results_error {

1045 color: #f00;

1046 padding: 10px 20px;

1047 }

1048

1049 /* Rules for routing */

1050

1051 #sidebar_content>table {

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

1053 width: 100%;

1054 border-collapse: separate;

1055 }

1056

1057 div.direction {

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

1059 width: 20px;

1060 height: 20px;

1061 background-repeat: no-repeat;

1062 }

1063 @for $i from 0 through 25 {

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

1065 }

1066

1067 p#routing_summary {

1068 padding: 0 $lineheight $lineheight/4;

1069 }

1070

1071 td.instruction, td.distance {

1072 padding-top: $lineheight/5;

1073 padding-bottom: $lineheight/5;

1074 border-bottom: 1px solid #DDD;

1075 }

1076 td.distance {

1077 color: #BBB;

1078 text-align: right;

1079 font-size: x-small;

1080 }

1081 tr.turn {

1082 cursor: pointer;

1083 }

1084 tr.turn:hover {

1085 background: $list-highlight;

1086 }

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

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

1089

1090 /* Rules for entity history */

1091

1092 #sidebar_content {

1093 .browse_details {

1094 position: relative;

1095 border-bottom: $keyline;

1096 }

1097 }

1098

1099 .browse_status {

1100 display: none;

1101 }

1102

1103 /* Rules for the history sidebar */

1104

1105 #sidebar .changesets {

1106 li {

1107 padding: 15px 20px;

1108 border-bottom: 1px solid #ddd;

1109 cursor: pointer;

1110

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

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

1113 }

1114

1115 h4 {

1116 margin: 0;

1117 a {

1118 color: #000;

1119 }

1120 }

1121

1122 .comments {

1123 float: right;

1124 color: #999;

1125 }

1126

1127 .comments-0 {

1128 opacity: 0.5;

1129 }

1130 }

1131

1132 /* Rules for the browse sidebar */

1133

1134 #sidebar_content {

1135 .browse-section {

1136 padding: $lineheight/2 $lineheight;

1137 border-bottom: 1px solid #ddd;

1138

1139 h4:first-child {

1140 margin-top: 0;

1141 word-wrap: break-word;

1142 }

1143 }

1144

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

1146 border-bottom: none;

1147 }

1148

1149 .paginate {

1150 float: right;

1151 padding: 1px 6px;

1152 border: 1px solid #eee;

1153 border-radius: 3px;

1154 }

1155

1156 .paginate ul {

1157 padding-left: 20px;

1158 }

1159

1160 .browse-field {

1161 margin-bottom: 10px;

1162

1163 h4 {

1164 padding: 5px 0 5px 10px;

1165 font-size: 12px;

1166 border: 1px solid #CCC;

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

1168 background-color: #F6F6F6;

1169 }

1170

1171 p {

1172 padding: 7px 10px;

1173 font-size: 12px;

1174 background-color: #FFF;

1175 border: 1px solid #CCC;

1176 border-top: 0;

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

1178 }

1179 }

1180

1181 .browse-tag-list {

1182 background-color: #F6F6F6;

1183 border: 1px solid #ddd;

1184 border-radius: 3px;

1185 font-size: 12px;

1186 table-layout: fixed;

1187 border-collapse: separate;

1188

1189 th, td {

1190 border-bottom: 1px solid #ddd;

1191 }

1192

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

1194 border-bottom: 0;

1195 }

1196

1197 .browse-tag-k,

1198 .browse-tag-v {

1199 width: 50%;

1200 padding: 6px 10px;

1201 word-wrap: break-word;

1202 white-space: pre-wrap;

1203 }

1204

1205 .browse-tag-k {

1206 font-weight: 500;

1207 background-color: #F6F6F6;

1208 }

1209

1210 .browse-tag-v {

1211 border-left: 1px solid #ddd;

1212 background-color: #fff;

1213 }

1214

1215 .colour-preview-box {

1216 float: right;

1217 width: 20px;

1218 height: 20px;

1219 margin: 0px;

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

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

1222 }

1223 }

1224

1225 .warning {

1226 margin: 0 0 $lineheight/2 0;

1227 padding: 0 $lineheight/2;

1228 }

1229

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

1231 margin: $lineheight/2 0;

1232

1233 p {

1234 margin-left: 10px;

1235 }

1236 }

1237

1238 .comments-header {

1239 float: left;

1240 }

1241

1242 .subscribe-buttons {

1243 float: left;

1244 margin: 18px 10px 10px;

1245 min-width: 80px;

1246 }

1247

1248 .subscribe-buttons input {

1249 font-size: 90%;

1250 line-height: 15px;

1251 min-height: 20px;

1252 }

1253

1254 span.action-button:hover {

1255 cursor: pointer;

1256 text-decoration: underline;

1257 }

1258

1259 .note-description {

1260 overflow: hidden;

1261 margin: 0 0 10px 10px;

1262 }

1263

1264 .query-intro p {

1265 padding: $lineheight $lineheight $lineheight/2;

1266 }

1267

1268 .query-results {

1269 display: none;

1270

1271 h3 {

1272 padding: $lineheight $lineheight $lineheight/2;

1273 margin: 0;

1274 }

1275

1276 ul {

1277 li {

1278 padding: 15px 20px;

1279 border-bottom: 1px solid #ddd;

1280

1281 &.query-result {

1282 cursor: pointer;

1283 }

1284

1285 &.selected {

1286 background: $list-highlight;

1287 }

1288 }

1289 }

1290 }

1291 }

1292

1293 /* Rules for export sidebar */

1294

1295 .export_form {

1296 padding: $lineheight;

1297

1298 .export_area_inputs,

1299 .export_button {

1300 text-align: center;

1301 }

1302

1303 .export_area_inputs {

1304 margin-bottom: $lineheight/2;

1305 input[type="text"] {

1306 width: 80px;

1307 text-align: center;

1308 margin-bottom: 5px;

1309 }

1310 }

1311

1312 .export_boxy {

1313 background: #eee;

1314 border: 1px solid #ccc;

1315 border-radius: 3px;

1316

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

1318 #minlon {

1319 float: left;

1320 margin-left: -1px;

1321 }

1322 #maxlon {

1323 float: right;

1324 margin-right: -1px;

1325 }

1326 #minlat { margin-bottom: 0; }

1327 }

1328

1329 .export_bound {

1330 margin: $lineheight/4;

1331 }

1332

1333 .export_button {

1334 margin-top: $lineheight;

1335 margin-bottom: $lineheight;

1336 }

1337

1338 dl {

1339 padding-left: $lineheight/2;

1340 dd {

1341 margin-left: 0;

1342 margin-bottom: 10px;

1343 }

1344 }

1345 }

1346

1347 /* Rules for the routing sidebar */

1348

1349 #sidebar_content {

1350 #routing_credit {

1351 text-align: center;

1352 padding: 0.5em;

1353 }

1354 }

1355

1356 /* Rules for edit pages */

1357

1358 .site-edit {

1359 #content {

1360 position: absolute;

1361 top: $headerHeight;

1362 bottom: 0;

1363 width: 100%;

1364 }

1365

1366 #map {

1367 height: 100%;

1368 overflow: hidden;

1369 }

1370 }

1371

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

1373

1374 .content-heading {

1375 background: $lightgrey;

1376

1377 h1 { font-size: 22px; }

1378 }

1379

1380 .content-body {

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

1382 margin-bottom: $lineheight;

1383 }

1384

1385 h1, h2, h3 {

1386 margin-top: $lineheight/2;

1387 }

1388 }

1389

1390 .content-inner {

1391 position: relative;

1392 max-width: 900px;

1393 margin: auto;

1394 padding: $lineheight;

1395 }

1396

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

1398

1399 .user-new,

1400 .user-create,

1401 .user-terms {

1402 .content-body .content-inner {

1403 padding: 0;

1404

1405 .message {

1406 margin-top: 80px;

1407 padding: 20px;

1408 }

1409 }

1410 }

1411

1412 .user-new,

1413 .user-create,

1414 .user-terms,

1415 .user-confirm {

1416 .content-heading .content-inner {

1417 height: 200px;

1418 }

1419 }

1420

1421 .header-illustration {

1422 background-position: 0 0;

1423 background-repeat: no-repeat;

1424 position: absolute;

1425 height: 200px;

1426 width: 100%;

1427 left: 0;

1428 bottom: 0;

1429

1430 &.new-user-main {

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

1432 }

1433

1434 &.confirm-main {

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

1436 }

1437

1438 &.new-user-terms {

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

1440 }

1441

1442 &.new-user-arm {

1443 height: 110px;

1444 width: 130px;

1445 left: 260px;

1446 top: 160px;

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

1448 z-index: 100;

1449 }

1450 }

1451

1452 #content.maximised {

1453 top: 0;

1454 left: 0;

1455 right: 0;

1456 bottom: 0;

1457 border: 0;

1458 z-index: 2000;

1459 }

1460

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

1462

1463 .content_map {

1464 position: relative;

1465 width: 45%;

1466 height: 400px;

1467 border: 1px solid #ccc;

1468 margin-bottom: $lineheight;

1469 float: right;

1470 }

1471

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

1473

1474 #trace_list {

1475 font-size: $lineheight/2;

1476 border-width: 0px;

1477 text-align: right;

1478

1479 .trace_summary {

1480 font-size: 12px;

1481 color: gray;

1482 }

1483

1484 .trace_pending {

1485 color: red;

1486 }

1487

1488 .trace_public {

1489 color: green;

1490 }

1491

1492 .trace_identifiable {

1493 color: green;

1494 }

1495

1496 .trace_trackable {

1497 color: red;

1498 }

1499

1500 .trace_private {

1501 color: red;

1502 }

1503 }

1504

1505 /* Rules for the trace view */

1506

1507 .trace-view {

1508 .trace_pending {

1509 color: red;

1510 }

1511

1512 .geo {

1513 display: inline;

1514 }

1515 }

1516

1517 /* Rules for the new trace form */

1518

1519 #new_trace {

1520 input[type=text] {

1521 width: 50%;

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

1523 max-width: 500px;

1524 }

1525 }

1526

1527 /* Rules for the edit trace form */

1528

1529 .edit_trace {

1530 .form-row p {

1531 margin-bottom: 0px;

1532 }

1533

1534 input[type=text] {

1535 width: 50%;

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

1537 max-width: 500px;

1538 }

1539 }

1540

1541 /* Rules for the user profile page */

1542

1543 #userinformation {

1544

1545 min-height: 100px;

1546 .userinformation-inner {

1547 float: left;

1548 }

1549 h2 {

1550 margin-top: 0;

1551 }

1552 .user-description {

1553 width: 100%;

1554 clear: both;

1555 }

1556 .deemphasize {

1557 margin: 0;

1558 }

1559 }

1560

1561 .admin-user-info small {

1562 margin-bottom: $lineheight/2;

1563 display: inline;

1564 margin-right: $lineheight;

1565 }

1566

1567 .activity-block {

1568 clear: left;

1569 border-bottom: 1px solid #ccc;

1570 padding-bottom: $lineheight;

1571 float: left;

1572 h3 {

1573 margin-bottom: $lineheight/2;

1574 }

1575 }

1576

1577 .contact-activity {

1578 margin-top: $lineheight;

1579 width: 100%;

1580 }

1581

1582 .activity-details p {

1583 margin-left: 70px;

1584 margin-bottom: 0;

1585 }

1586

1587 #friends-container .contact-activity ul {

1588 margin-left: 70px;

1589 }

1590

1591 .user-view {

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

1593 .content-inner {

1594 max-width: none;

1595 }

1596 p#no_home_location {

1597 margin: $lineheight;

1598 }

1599 .user_thumbnail {

1600 margin-top: $lineheight/4;

1601 float: left;

1602 }

1603 }

1604

1605 /* Rules for the user map */

1606

1607 .content_map .leaflet-popup-content {

1608 margin: $lineheight/2;

1609 min-height: 50px;

1610 }

1611

1612 /* Rules for user popups on maps */

1613

1614 .user_popup {

1615 min-width: 200px;

1616 p {

1617 padding: 0 0 5px 0;

1618 margin-top: 0 0 0 60px;

1619 font-size: 12px;

1620 }

1621 img.user_thumbnail {

1622 float: left;

1623 margin: 0 $lineheight/2 0 0;

1624 }

1625 }

1626

1627 /* Rules for the user list */

1628

1629 #user_list {

1630 font-size: $lineheight/2;

1631 width: 100%;

1632

1633 tr {

1634 vertical-align: middle;

1635 }

1636

1637 p {

1638 margin-top: 0px;

1639 margin-bottom: 0px;

1640 }

1641 }

1642

1643 #user_list_actions {

1644 float: right;

1645 margin-top: $lineheight/2;

1646 }

1647

1648 /* Rules for the diary list page */

1649

1650 .diary_post {

1651 position: relative;

1652 margin-top: $lineheight/2;

1653 padding-top: $lineheight;

1654 border-top: 1px solid #ccc;

1655

1656 .post_heading {

1657 margin-bottom: $lineheight;

1658

1659 h2 {

1660 margin-top: 0;

1661 margin-bottom: $lineheight/2;

1662 font-size: 24px;

1663 }

1664 }

1665

1666 img.user_thumbnail {

1667 float: left;

1668 }

1669

1670 small.deemphasize {

1671 float: left;

1672 display: block;

1673 }

1674 }

1675

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

1677 display: inline;

1678 }

1679

1680 .pagination {

1681 padding-top: $lineheight;

1682 }

1683

1684 /* Rules for the diary entry page */

1685

1686 .diary_entry {

1687 #map {

1688 position: relative;

1689 width: 90%;

1690 height: 400px;

1691 border: 1px solid #ccc;

1692 display: none;

1693 margin-bottom: $lineheight;

1694 }

1695 #newcomment {

1696 border-top: 1px solid #ccc;

1697 padding-top: $lineheight;

1698 margin-top: $lineheight/2;

1699 }

1700 .comments {

1701 max-width: 740px;

1702 }

1703 .diary-comment {

1704 margin-top: $lineheight/2;

1705 border-top: 1px dashed #ccc;

1706 padding-top: $lineheight/2;

1707 &:first-child {

1708 margin-top: $lineheight;

1709 padding-top: $lineheight;

1710 border-top: 1px solid #ccc;

1711 }

1712 p {

1713 margin-bottom: $lineheight/2;

1714 }

1715 .comment-heading {

1716 margin-bottom: 0;

1717 margin-top: 0;

1718 }

1719 }

1720 }

1721

1722 .diary_entry-view img.user_thumbnail {

1723 float: left;

1724 }

1725

1726

1727 .diary-subscribe-buttons {

1728 position:relative;

1729 top: -30px;

1730 left: 130px;

1731 }

1732

1733 /* Rules for the log in page */

1734

1735 #login_auth_buttons {

1736 margin-bottom: 0;

1737 }

1738

1739 #login_auth_buttons li {

1740 float: left;

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

1742 }

1743

1744 /* Rules for the account confirmation page */

1745

1746 .user-terms {

1747 .legale {

1748 border: 1px solid #ccc;

1749 padding: $lineheight;

1750 margin-bottom: $lineheight;

1751 overflow: auto;

1752 height: 20em;

1753

1754 li {

1755 list-style: inherit;

1756 }

1757

1758 ol ol {

1759 list-style-type: lower-alpha;

1760 }

1761 }

1762

1763 #decline {

1764 background: $lightblue;

1765 &:hover {

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

1767 }

1768 }

1769 }

1770

1771 /* Rules for the account settings page */

1772

1773 #accountForm .user_map {

1774 position: relative;

1775 width: 500px;

1776 height: 400px;

1777 border: 1px solid #ccc;

1778 }

1779

1780 #accountForm .user_image {

1781 margin-bottom: 0;

1782 }

1783

1784 #accountForm #user_image {

1785 margin-left: 20px;

1786 }

1787

1788 #accountForm ul.accountImage-options {

1789 margin-left: 120px;

1790 }

1791

1792 .nohome .location {

1793 display: none;

1794 }

1795

1796 #homerow .message {

1797 display: none;

1798 }

1799

1800 .nohome .message {

1801 display: inline !important;

1802 }

1803

1804 .content_map.settings_map {

1805 width: 50%;

1806 float: none;

1807 }

1808

1809 /* Rules for the oauth settings page */

1810

1811 .oauth_clients .buttons .oauth-edit {

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

1813 }

1814

1815 .oauth_clients .buttons .oauth-delete {

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

1817 }

1818

1819 /* Rules for the oauth authorization page */

1820

1821 .oauth-authorize ul {

1822 list-style: none;

1823 }

1824

1825 /* Rules for messages pages */

1826

1827 .messages {

1828 width: 100%;

1829 border: 1px solid #ddd;

1830

1831 input[type="submit"] {

1832 margin: auto;

1833 }

1834 tbody tr {

1835 border-top: 1px solid #ccc;

1836 }

1837

1838 .inbox-row {

1839 background: #f8f8ff;

1840 }

1841

1842 .inbox-row-unread {

1843 background:#CBEEA7;

1844 }

1845

1846 .right {

1847 float: right;

1848 }

1849

1850 tr td,

1851 tr th {

1852 padding: $lineheight/4;

1853 }

1854 p:last-child,

1855 h2:last-child,

1856 h3:last-child,

1857 ol:last-child,

1858 ul:last-child {

1859 margin-bottom:0;

1860 }

1861 tr td {

1862 height: 30px;

1863 border-right: 1px solid $lightgrey;

1864 }

1865 }

1866

1867 .inbox-row .inbox-mark-read {

1868 display: none;

1869 }

1870

1871 .info-line {

1872 margin-bottom: $lineheight;

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

1874 border-bottom: 1px solid #ccc;

1875

1876 form, form div {

1877 display: inline;

1878 }

1879 }

1880

1881 .info-line .user_thumbnail_tiny {

1882 vertical-align: middle;

1883 }

1884

1885 .inbox-sent {

1886 white-space: nowrap;

1887 }

1888

1889 .inbox-mark-unread,

1890 .inbox-mark-read,

1891 .inbox-delete {

1892 width: 1%;

1893 }

1894

1895 .inbox-row-unread .inbox-mark-unread {

1896 display: none;

1897 }

1898

1899 .message-read .message-buttons {

1900 margin-top: $lineheight;

1901 margin-bottom: $lineheight * 1.5;

1902 padding-top: $lineheight;

1903 border-top: 1px solid $lightgrey;

1904 }

1905

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

1907 border-radius: 0;

1908 }

1909

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

1911

1912 .flash {

1913 padding: $lineheight;

1914

1915 &.error {

1916 background-color: #ff7070;

1917 }

1918

1919 &.warning {

1920 background-color: #ffe0cc;

1921 }

1922

1923 &.notice {

1924 background-color: #CBEEA7;

1925 }

1926

1927 div.message {

1928 display: inline-block;

1929 margin-left: $lineheight / 2;

1930 vertical-align: middle;

1931

1932 p {

1933 margin-top: $lineheight * 0.5;

1934 margin-bottom: $lineheight * 0.5;

1935

1936 &:first-child {

1937 margin-top: 0px;

1938 }

1939

1940 &:last-child {

1941 margin-bottom: 0px;

1942 }

1943 }

1944 }

1945 }

1946

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

1948

1949 .formError {

1950 display: inline-block;

1951 padding: 5px 10px;

1952 margin-top: 5px;

1953 border-radius: 4px;

1954 font-size: 12px;

1955 color: #fff;

1956 background-color: #ff7070;

1957 }

1958

1959 /* Rules for rails validation error boxes */

1960

1961 #errorExplanation {

1962 width: 400px;

1963 border: 2px solid #ff7070;

1964 padding: 0 $lineheight/2;

1965 margin-bottom: $lineheight;

1966 background-color: #f0f0f0;

1967

1968 h2 {

1969 margin: 0 -10px 10px -10px;

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

1971 font-weight: bold;

1972 font-size: 12px;

1973 background-color: #c00;

1974 color: #fff;

1975 text-align: left;

1976 }

1977

1978 p {

1979 color: #333;

1980 margin-bottom: 0px;

1981 padding: $lineheight/4;

1982 }

1983

1984 ul {

1985 padding-left: $lineheight;

1986

1987 li {

1988 font-size: 12px;

1989 list-style: disc;

1990 }

1991 }

1992 }

1993

1994 /* Rules for forms */

1995

1996 .standard-form {

1997 fieldset {

1998 margin-bottom: $lineheight;

1999 }

2000 label.standard-label {

2001 display: block;

2002 margin-bottom: $lineheight/4;

2003 font-size: $typeheight;

2004 font-weight: bold;

2005 line-height: 1.5;

2006 }

2007 label.standard-label.secondary {

2008 display: inline-block;

2009 font-weight: normal;

2010 }

2011 .form-help {

2012 font-weight: normal;

2013 }

2014 .form-column {

2015 float: left;

2016 margin-right: 20px;

2017 }

2018 .form-divider {

2019 margin-top: $lineheight;

2020 padding-top: $lineheight;

2021 border-top: 1px solid $lightgrey;

2022 }

2023 .horizontal-list .form-row {

2024 float: left;

2025 padding-right: 10px;

2026 }

2027 .form-row {

2028 margin-bottom: $lineheight/2;

2029 }

2030 .form-list {

2031 margin-bottom: 0;

2032 }

2033 .form-list li {

2034 margin-bottom: 5px;

2035 }

2036 input[type="checkbox"],

2037 input[type="radio"] {

2038 float: left;

2039 margin-top: 5px;

2040 }

2041 }

2042

2043 #remember_me_openid {

2044 display: block;

2045 }

2046

2047 select {

2048 padding: 2px;

2049 }

2050

2051 input[type="checkbox"],

2052 input[type="radio"] {

2053 margin-right: 5px;

2054 }

2055

2056 input[type="text"],

2057 input[type="email"],

2058 input[type="url"],

2059 input[type="password"],

2060 textarea {

2061 color: #222;

2062 background-color: #fff;

2063 border: 1px solid #ccc;

2064 padding: 2px 5px;

2065 margin: 0;

2066 width: 200px;

2067

2068 &.field_with_errors {

2069 border: 2px solid #ff7070;

2070 }

2071 }

2072

2073 textarea {

2074 padding: 5px;

2075 width: 100%;

2076 }

2077

2078 /* Rules for user images */

2079

2080 img.user_image {

2081 max-width: 100px;

2082 max-height: 100px;

2083 border: 1px solid #ccc;

2084 margin-bottom: $lineheight;

2085 float: left;

2086 margin-right: $lineheight;

2087 }

2088

2089 img.user_thumbnail {

2090 max-width: 50px;

2091 max-height: 50px;

2092 border: 1px solid #ccc;

2093 margin-right: $lineheight;

2094 }

2095

2096 img.user_thumbnail_tiny {

2097 width: auto;

2098 height: auto;

2099 max-width: 25px;

2100 max-height: 25px;

2101 border: 1px solid #ccc;

2102 }

2103

2104 /* Rules for geo microformats */

2105

2106 abbr.geo {

2107 border-bottom: none;

2108 }

2109

2110 /* Rules for RSS buttons */

2111

2112 .rsssmall {

2113 position: relative;

2114 top: 3px;

2115 }

2116

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

2118

2119 ul.secondary-actions {

2120 font-style: normal;

2121 margin-bottom: 0;

2122 margin-left: 0;

2123 &.pager {

2124 display: inline-block;

2125 margin-right: 60px;

2126 }

2127 > li {

2128 display: block;

2129 float: left;

2130 list-style: none;

2131 border-left: 1px solid #ccc;

2132 padding-left: $lineheight/2;

2133 margin-right: $lineheight/2;

2134 &:first-child {

2135 border-left: 0;

2136 padding-left: 0;

2137 }

2138 &:last-child {

2139 margin-right: 0px;

2140 }

2141 }

2142 }

2143

2144 div.secondary-actions {

2145 padding: 10px;

2146 text-align: center;

2147 }

2148

2149 /* Utility for managing inner content areas */

2150

2151 .inner22 { padding: $lineheight;}

2152

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

2154

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

2156

2157 .inner20 { padding: $lineheight 0;}

2158

2159 .inner02 { padding: 0 $lineheight;}

2160

2161 /* Utility for general button styles */

2162

2163 input[type="button"],

2164 input[type="submit"],

2165 input[type="reset"],

2166 a.button {

2167 cursor: pointer;

2168 border: 0;

2169 display: inline-block;

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

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

2172 min-width: 120px;

2173 margin: 0 0 $lineheight/2 0;

2174 color: white;

2175 background: $blue;

2176 text-align: center;

2177 border-radius: 2px;

2178 &:hover {

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

2180 text-decoration: none;

2181 }

2182 &.deemphasize {

2183 background: $lightblue;

2184 &:hover {

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

2186 }

2187 }

2188 &:disabled {

2189 background: $lightgrey;

2190 &:hover {

2191 background: $lightgrey;

2192 }

2193 }

2194 &:last-child {

2195 margin-bottom: 0;

2196 }

2197 }

2198

2199 input[type="button"],

2200 input[type="submit"],

2201 input[type="reset"] {

2202 line-height: normal;

2203 }

2204

2205 a.button {

2206 line-height: 20px;

2207 }

2208

2209 .buttons {

2210 min-width: 200px;

2211 input[type="submit"],

2212 input[type="button"],

2213 input[type="reset"],

2214 .button,

2215 .button_to {

2216 box-sizing: border-box;

2217 float: left;

2218 border-radius: 0;

2219 margin:0;

2220 min-width: 75px;

2221 max-width: 180px;

2222 border-right:1px solid white;

2223 text-overflow: ellipsis;

2224 white-space: nowrap;

2225 overflow: hidden;

2226 }

2227 input:first-child,

2228 .button:first-child,

2229 .button_to:first-child {

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

2231 }

2232 input:last-child,

2233 .button:last-child,

2234 .button_to:last-child {

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

2236 border-right-width: 0;

2237 }

2238 input:only-child,

2239 .button:only-child,

2240 .button_to:only-child,

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

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

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

2244 border-radius:2px;

2245 border-right-width: 0;

2246 }

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

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

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

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

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

2252 border-right-width: 0;

2253 }

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

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

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

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

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

2259 border-right-width: 1px;

2260 }

2261 }

2262

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

2264

2265 .table0,

2266 .item0 {

2267 background: $offwhite;

2268 }

2269

2270 .table1,

2271 .item1 {

2272 background: #fff;

2273 }

2274

2275 /* Rules for OpenID logo */

2276

2277 .openid_logo {

2278 vertical-align: text-bottom;

2279 border: 0;

2280 }

2281

2282 /* Rules for rich text */

2283

2284 .richtext,

2285 .prose {

2286 h1, h2 {

2287 padding-bottom: $lineheight/2;

2288 border-bottom: 1px dashed #cccccc;

2289 margin-bottom: $lineheight/2;

2290 }

2291

2292 h1 {

2293 font-size: 24px;

2294 }

2295

2296 h2 {

2297 font-size: 18px;

2298 }

2299

2300 h3 {

2301 font-size: $typeheight;

2302 }

2303

2304 code {

2305 font-size: 13px;

2306 background: #e8e8e8;

2307 padding: 2px 3px;

2308 }

2309

2310 pre {

2311 font-size: 13px;

2312 background: #e8e8e8;

2313 padding: 2px 3px;

2314

2315 code {

2316 padding: 0;

2317 }

2318 }

2319

2320 img {

2321 padding: $lineheight;

2322 background-color: $offwhite;

2323 display: block;

2324 max-width: 100%;

2325 margin: auto;

2326 }

2327

2328 blockquote {

2329 border-left: $lineheight solid $offwhite;

2330 padding-left: $lineheight;

2331 margin: 0;

2332 color: #7E7E7E;

2333 }

2334

2335 ul, ol {

2336 padding-left: $lineheight;

2337 margin-bottom: $lineheight;

2338 margin-left: $lineheight;

2339 }

2340

2341 ul li {

2342 list-style: disc;

2343 }

2344

2345 ol li {

2346 list-style: decimal;

2347 }

2348 }

2349

2350 .diary_post .richtext {

2351 margin-top: $lineheight;

2352 }

2353

2354 .comments .richtext {

2355 margin-left: 70px;

2356 margin-top: 0;

2357 }

2358

2359 /* Rules for rich text editors */

2360

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

2362 width: 50%;

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

2364

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

2366 width: 100%;

2367 }

2368 }

2369

2370 .richtext_container {

2371 margin-bottom: $lineheight;

2372

2373 .richtext_content {

2374 width: 50%;

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

2376 display: inline-block;

2377 vertical-align: top;

2378

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

2380 width: 100%;

2381 }

2382

2383 .richtext_preview {

2384 display: inline-block;

2385 padding: $lineheight;

2386 background-color: $offwhite;

2387 overflow-x: auto;

2388

2389 &.loading {

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

2391 background-repeat: no-repeat;

2392 background-position: center;

2393 }

2394

2395 > :first-child {

2396 margin-top: 0px;

2397 }

2398 }

2399 }

2400

2401 .richtext_help {

2402 display: inline-block;

2403 vertical-align: top;

2404 margin-left: 15px;

2405 background-color: #f8f8ff;

2406 padding: $lineheight/2;

2407 width: 220px;

2408

2409 ul {

2410 margin-bottom: 0;

2411 }

2412

2413 h4.heading, li {

2414 border-bottom: 1px solid #ccc;

2415 margin-bottom: $lineheight/4;

2416 padding-bottom: $lineheight/4;

2417 }

2418

2419 li h4, li span, li p {

2420 display: inline-block;

2421 vertical-align: top;

2422 font-size: 11px;

2423 }

2424

2425 li h4 {

2426 width: 40%;

2427 margin: 0;

2428 }

2429

2430 li span, li p {

2431 width: 50%;

2432 margin-left: $lineheight/2;

2433 margin-bottom: $lineheight/4;

2434 white-space: nowrap;

2435 }

2436 }

2437 }

2438

2439 /* Rules for the user notes list */

2440

2441 .note_list {

2442 tr.creator {

2443 background-color: #eeeeee;

2444 }

2445

2446 td {

2447 padding: 3px;

2448 }

2449

2450 p {

2451 margin-bottom: 0px;

2452 }

2453 }

2454

2455 /* Rules for the iD editor */

2456

2457 .id-embed {

2458 width: 100%;

2459 height: 100%;

2460 }

2461

2462 /* Rules for dropdown menus */

2463

2464 .dropdown {

2465 position: relative;

2466 }

2467

2468 .dropdown-toggle {

2469 *margin-bottom: -3px;

2470 }

2471

2472 .dropdown-toggle:active,

2473 .open .dropdown-toggle {

2474 outline: 0;

2475 }

2476

2477 .caret {

2478 display: inline-block;

2479 width: 0;

2480 height: 0;

2481 vertical-align: top;

2482 border-top: 4px solid #000000;

2483 border-right: 4px solid transparent;

2484 border-left: 4px solid transparent;

2485 content: "";

2486 }

2487

2488 .dropdown .caret {

2489 margin-top: 8px;

2490 margin-left: 2px;

2491 }

2492

2493 .dropdown-menu {

2494 position: absolute;

2495 top: 100%;

2496 left: -1px;

2497 z-index: 1000;

2498 display: none;

2499 float: left;

2500 min-width: 160px;

2501 padding: 5px 0;

2502 margin: 0;

2503 list-style: none;

2504 background-color: #ffffff;

2505 border: 1px solid #ccc;

2506 border-radius: 0 3px 3px;

2507 *border-right-width: 2px;

2508 *border-bottom-width: 2px;

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

2510 background-clip: padding-box;

2511 }

2512

2513 .dropdown-menu.pull-right {

2514 right: 0;

2515 left: auto;

2516 }

2517

2518 .dropdown-menu .divider {

2519 *width: 100%;

2520 height: 1px;

2521 margin: 9px 1px;

2522 *margin: -5px 0 5px;

2523 overflow: hidden;

2524 background-color: #e5e5e5;

2525 border-bottom: 1px solid #ffffff;

2526 }

2527

2528 .dropdown-menu > li > a {

2529 display: block;

2530 padding: 3px 10px;

2531 clear: both;

2532 font-weight: normal;

2533 line-height: 20px;

2534 color: #333333;

2535 white-space: nowrap;

2536 }

2537

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

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

2540 .dropdown-submenu:hover > a,

2541 .dropdown-submenu:focus > a {

2542 color: #ffffff;

2543 text-decoration: none;

2544 background-color: $green;

2545 }

2546

2547 .dropdown-menu > .active > a,

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

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

2550 color: #ffffff;

2551 text-decoration: none;

2552 background-color: $green;

2553 outline: 0;

2554 }

2555

2556 .dropdown-menu > .disabled > a,

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

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

2559 color: #999999;

2560 }

2561

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

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

2564 text-decoration: none;

2565 cursor: default;

2566 background-color: transparent;

2567 background-image: none;

2568 }

2569

2570 .open {

2571 *z-index: 1000;

2572 }

2573

2574 .open > .dropdown-menu {

2575 display: block;

2576 }

2577

2578 .dropdown-backdrop {

2579 position: fixed;

2580 top: 0;

2581 right: 0;

2582 bottom: 0;

2583 left: 0;

2584 z-index: 990;

2585 }

2586

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

2588 .site-welcome, .site-fixthemap {

2589 .center {

2590 text-align: center;

2591 .sprite {

2592 float: none;

2593 margin: auto;

2594 }

2595 }

2596

2597 .sprite {

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

2599 background-size: 500px 250px;

2600 display: block;

2601 float: left;

2602 }

2603

2604 .icon-list {

2605 padding-bottom: 20px;

2606 div {

2607 margin-bottom: 10px;

2608 p {

2609 padding-top: 10px;

2610 }

2611 }

2612 }

2613 .sprite.small {

2614 width: 50px;

2615 height: 50px;

2616 }

2617

2618 .sprite.x {

2619 background-position: -50px 0;

2620 }

2621

2622 .sprite.term {

2623 margin-right: 10px;

2624 vertical-align: middle;

2625 }

2626

2627 .sprite.node {

2628 background-position: -100px 0;

2629 }

2630

2631 .sprite.way {

2632 background-position: -150px 0;

2633 }

2634

2635 .sprite.tag {

2636 background-position: -200px 0;

2637 }

2638

2639 .sprite.editor {

2640 background-position: -250px 0;

2641 }

2642

2643 .sprite.question {

2644 background-position: -300px 0;

2645 }

2646

2647 .sprite.rules {

2648 background-position: -350px 0;

2649 }

2650

2651 .start-mapping {

2652 margin: auto;

2653 cursor: pointer;

2654 border: none;

2655 padding: 20px 40px;

2656 font-size: 30px;

2657 text-decoration: none;

2658 }

2659

2660 .note-box {

2661 margin-top: 20px;

2662 background-color: $offwhite;

2663 }

2664

2665 .icon.note {

2666 background-color: #333;

2667 border-radius: 4px;

2668 }

2669 }

2670

2671 .site-about #content {

2672 //background-color: #000;

2673 background-color: #eee;

2674 background-position: 50% 50%;

2675 background-repeat: no-repeat;

2676 background-size: cover;

2677 background-attachment: fixed;

2678

2679 .caption {

2680 max-width: 200px;

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

2682 position: fixed;

2683 text-align: right;

2684 right: 20px;

2685 bottom: 60px;

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

2687 color: #eee;

2688 opacity: 0.8;

2689 display: none;

2690 }

2691

2692 .caption a {

2693 color: white;

2694 white-space: nowrap;

2695 text-decoration: none;

2696 }

2697

2698 a.next {

2699 display: block;

2700 position: fixed;

2701 right: 10px;

2702 bottom: 10px;

2703 width: 40px;

2704 height: 40px;

2705 border-radius: 5px;

2706 text-indent: -9999px;

2707 overflow: hidden;

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

2709 background-color: #000;

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

2711 }

2712

2713 .content-inner {

2714 position: relative;

2715 color: #333;

2716 min-width: 320px;

2717 max-width: 640px;

2718

2719 .section {

2720 margin-bottom: 30px;

2721 }

2722

2723 .section:last-child {

2724 margin-bottom: 0;

2725 }

2726 }

2727

2728 .text {

2729 background: white;

2730 padding: 40px;

2731 }

2732

2733 .attr {

2734 position: relative;

2735 padding: 170px 40px 20px;

2736 background: #333;

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

2738 margin-bottom: 0;

2739 margin-top: -20px;

2740

2741 h1 {

2742 display: block;

2743 color: white;

2744 font-weight: 300;

2745 font-size: 34px;

2746 span {

2747 color: #76c551;

2748 }

2749 }

2750

2751 .user-image {

2752 position: absolute;

2753 top: 0px;

2754 right: 240px;

2755 left: 0px;

2756 height: 150px;

2757 background-position: 0 50%;

2758 background-repeat: no-repeat;

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

2760 background-size: cover;

2761 background-color: #76c551;

2762 }

2763

2764 .byosm {

2765 position: absolute;

2766 top: 0px;

2767 right: 0px;

2768 z-index: 1;

2769 width: 240px;

2770 height: 150px;

2771 padding: 20px 20px 20px 40px;

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

2773 white-space: nowrap;

2774 color: #fff;

2775 background: #76c551;

2776 }

2777

2778 .byosm span {

2779 display: inline-block;

2780 width: 20px;

2781 margin-left: -20px;

2782 }

2783 }

2784

2785 h2 {

2786 margin-bottom: 10px;

2787 }

2788

2789 .icon {

2790 width: 30px;

2791 height: 30px;

2792 margin-right: 10px;

2793 vertical-align: middle;

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

2795

2796 &.local {

2797 /* no-r2 */

2798 background-position: 0px 0px;

2799 }

2800 &.community {

2801 /* no-r2 */

2802 background-position: 0px -40px;

2803 }

2804 &.open {

2805 /* no-r2 */

2806 background-position: 0px -80px;

2807 }

2808 &.partners {

2809 /* no-r2 */

2810 background-position: 0px -120px;

2811 }

2812 &.infringement {

2813 /* no-r2 */

2814 background-position: 0px -160px;

2815 }

2816 &.legal {

2817 /* no-r2 */

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

2819 }

2820 }

2821 }

2822

2823 @import 'browse';

2824

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

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

2827 display: none;

2828 }

2829 }