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 border-bottom: .1em 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 /* Rules for icons */

152

153 .icon {

154 display: inline-block;

155 vertical-align: top;

156 width: 20px;

157 height: 20px;

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

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

160 text-indent: -9999px;

161 overflow: hidden;

162 }

163

164 .icon.search { background-position: 0 0; }

165 .icon.donate { background-position: -20px 0; }

166 .icon.zoomin { background-position: -40px 0; }

167 .icon.zoomout { background-position: -60px 0; }

168 .icon.geolocate { background-position: -80px 0; }

169 .active .icon.geolocate { background-position: -80px -20px; }

170 .icon.layers { background-position: -100px 0; }

171 .icon.key { background-position: -120px 0; }

172 .icon.share { background-position: -140px 0; }

173 .icon.clipboard { background-position: -160px 0; }

174 .icon.link { background-position: -180px 0; }

175 .icon.close { background-position: -200px 0; }

176 .icon.close:hover { background-position: -200px -20px; }

177 .icon.check { background-position: -220px 0; }

178 .icon.note { background-position: -240px 0; }

179 .icon.note.grey { background-position: -240px -20px; }

180 .icon.query { background-position: -260px 0; }

181

182 /* Rules for links */

183

184 a {

185 color: #24d;

186 text-decoration: none;

187 -webkit-appearance: none;

188 outline: 0;

189 &:hover {

190 text-decoration: underline;

191 }

192 }

193

194 /* Rules for horizontal lines */

195

196 hr {

197 border: none;

198 background-color: #ccc;

199 color: #ccc;

200 height: 1px;

201 }

202

203 /* General styles for tables */

204

205 table {

206 width: 100%;

207 margin-bottom: $lineheight;

208 th, td {

209 text-align: left;

210 padding: $lineheight/4;

211 line-height: $lineheight;

212 }

213 th {

214 font-weight: 600;

215 vertical-align: top;

216 }

217 td {

218 vertical-align: middle;

219 }

220 }

221

222 /* Utility for de-emphasizing content */

223

224 .deemphasize {

225 color: #999;

226 a {

227 color: $blue;

228 }

229 }

230

231 /* Rules for the header */

232

233 #menu-icon {

234 display: none !important;

235 float: right;

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

237 background-size: 30px 30px;

238 display: block;

239 width: 30px;

240 height: 30px;

241 margin: 14px 10px 0 0;

242 opacity: 0.6;

243 }

244

245 header {

246 height: $headerHeight;

247 position: relative;

248 z-index: 1001;

249 font-size: 14px;

250

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

252 display: inline-block;

253 }

254

255 > * {

256 height: 100%;

257 padding: $lineheight/2;

258 }

259

260 h1, nav.primary {

261 float: left;

262 }

263

264 a, a:hover {

265 text-decoration: none;

266 }

267

268 img.logo {

269 width: 30px;

270 height: 30px;

271 margin-top: -2px;

272 vertical-align: middle;

273 }

274

275 h1 {

276 margin: 0;

277 padding-top: 15px;

278

279 a {

280 color: #000;

281 }

282 }

283 }

284

285 nav.primary {

286 > ul {

287 $border: 1px solid $green;

288

289 border: $border;

290 border-radius: $border-radius;

291

292 > li {

293 border-right: $border;

294 float: left;

295 &:last-child {

296 border-right: 0;

297 }

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

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

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

301 &.dropdown {

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

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

304 }

305 }

306 }

307

308 a.tab,

309 .dropdown-toggle {

310 display: inline-block;

311 font-weight: 500;

312 color: $green;

313 padding: 5px 15px;

314 }

315

316 .dropdown-toggle {

317 padding: 5px 6px;

318 }

319

320 .caret {

321 border-top-color: $green;

322 margin-top: 10px;

323 }

324

325 .disabled a {

326 color: #ccc;

327 cursor: default;

328

329 .caret {

330 border-top-color: #ccc;

331 }

332 }

333

334 > ul li.current {

335 background-color: $green;

336

337 .tab {

338 color: #fff;

339 }

340

341 .caret {

342 border-top-color: #fff;

343 }

344 }

345 }

346

347 nav.secondary {

348 position: absolute;

349 right: 0;

350

351 > ul {

352 vertical-align: middle;

353 a, .dropdown-toggle {

354 display: inline-block;

355 text-decoration: none;

356 color: $darkgrey;

357 padding: 5px;

358

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

360 }

361 }

362

363 > ul li.current a {

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

365 }

366

367 .user-menu {

368 $border: 1px solid $grey;

369 border: $border;

370 border-radius: $border-radius;

371 margin-left: 10px;

372

373 > li {

374 border-right: $border;

375 float: left;

376 &:last-child {

377 border-right: 0;

378

379 > a {

380 border-radius: 0 $border-radius $border-radius 0;

381 }

382 }

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

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

385 }

386

387 a {

388 padding: 5px 15px;

389

390 }

391

392 &.logged-in > a {

393 padding: 0;

394 > .user-button {

395 line-height: 1.8;

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

397 display: inline-block;

398 color: $darkgrey;

399 }

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

401 }

402 }

403

404 .caret {

405 border-top-color: $grey;

406 margin-top: 9px;

407 }

408

409 img.user_thumbnail_tiny {

410 border: 0;

411 vertical-align: top;

412 margin-top: 0px;

413 margin: 4px 0 0 4px;

414 border-radius: 2px;

415 }

416

417 #inboxanchor {

418 display: inline-block;

419 vertical-align: top;

420 height: 25px;

421 margin: 3px 0 3px 3px;

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

423 line-height: 20px;

424 border-radius: 2;

425 }

426

427 .dropdown-menu {

428 left: auto;

429 right: -1px;

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

431

432 .count-number {

433 float: right;

434 padding: 0 5px;

435 margin: 0;

436 }

437 }

438 }

439

440 #compact-secondary-nav {

441 display: none;

442 ul li a {

443 width: 100%;

444 color: #333;

445 &:hover { color: #fff; }

446 }

447 }

448

449 body.compact {

450 #compact-secondary-nav {

451 display: inline-block;

452 }

453 .compact-hide {

454 display: none;

455 }

456 }

457

458 /* Utility for styling notification numbers */

459

460 .count-number {

461 padding: 2px $lineheight/4;

462 border-radius: 2px;

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

464 margin: 0 2px;

465 font-size: 11px;

466 color: #333;

467 }

468

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

470

471 #noscript {

472 z-index: 20000000;

473 margin-left: 400px;

474 margin-top: 50px;

475 }

476

477 /* Rules for Leaflet maps */

478

479 .leaflet-control .control-button {

480 display: block;

481 height: 40px;

482 width: 40px;

483 background-color: #333;

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

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

486 margin-bottom: 10px;

487 outline: none;

488

489 &:hover {

490 background-color: black;

491 }

492

493 &.disabled {

494 background-color: #333;

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

496 cursor: default;

497 }

498

499 &.active {

500 background-color: #9ed485;

501 }

502

503 .icon {

504 margin: 10px;

505 }

506 }

507

508 .leaflet-control .zoomin,

509 .control-layers .control-button {

510 margin-bottom: 0px;

511 border-radius: 4px 0 0 0;

512 }

513

514 .leaflet-control .zoomout,

515 .control-key .control-button {

516 margin-bottom: 0;

517 border-radius: 0;

518 }

519

520 .control-locate .control-button,

521 .control-share .control-button {

522 border-radius: 0 0 0 4px;

523 }

524

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

526

527 .map-layout {

528 #content {

529 overflow: hidden;

530 position: absolute;

531 top: $headerHeight;

532 bottom: 0;

533 width: 100%;

534 }

535

536 #sidebar, #map {

537 position: relative;

538 height: 100%;

539 overflow-x: hidden;

540 overflow-y: auto;

541 }

542

543 #sidebar {

544 float: left;

545 width: $sidebarWidth;

546 background: #fff;

547 font-size: 12px;

548

549 h2 {

550 padding: $lineheight $lineheight $lineheight/2;

551 }

552

553 h3, h4 {

554 margin-top: $lineheight;

555 margin-bottom: $lineheight/2;

556 font-size: 13px;

557 }

558

559 .icon.close {

560 float: right;

561 cursor: pointer;

562 }

563

564 p.error {

565 background-color: #ff7070;

566 padding: 10px;

567 font-weight: bold;

568 }

569 }

570

571 .welcome {

572 display: none;

573 }

574

575 .overlay-sidebar #sidebar {

576 position: absolute;

577 z-index: 1000;

578 height: auto;

579 border-bottom-right-radius: 5px;

580 overflow: hidden;

581 .welcome {

582 display: block;

583 }

584 #sidebar_content {

585 display: none;

586 }

587 }

588

589 .welcome {

590 p {

591 padding: $lineheight/2 $lineheight $lineheight;

592 font-size: 110%;

593 font-weight: 300;

594 }

595

596 .button {

597 width: 50%;

598 float: left;

599 margin: 0;

600 border-radius: 0;

601 font-weight: normal;

602 padding: .6em;

603

604 &.learn-more {

605 border-right: 1px solid #fff;

606 }

607 }

608 }

609

610 #map {

611 height: 100%;

612 overflow: hidden;

613

614 &.query-active {

615 cursor: help;

616 }

617

618 &.query-disabled {

619 cursor: not-allowed;

620 }

621

622 .leaflet-marker-draggable {

623 cursor: move;

624 }

625 }

626

627 #map-ui {

628 display: none;

629 position: relative;

630 float: right;

631 width: 250px;

632 height: 100%;

633 background: white;

634 overflow: auto;

635

636 .section {

637 border-bottom: 1px solid #DDD;

638 padding: 10px 20px;

639 }

640

641 a.close-button {

642 float: right;

643 padding:5px;

644 font-size:20px;

645 line-height:10px;

646 color:#222;

647 border:1px solid #ddd;

648 }

649

650 .tooltip {

651 opacity: 1;

652 border: 1px solid #ccc;

653 .tooltip-arrow {

654 border-top-color: #ccc;

655 }

656 }

657 }

658 }

659

660 .layers-ui,

661 .share-ui {

662 li:last-child {

663 margin-bottom: 0;

664 }

665 }

666

667 .layers-ui {

668 .base-layers {

669 .leaflet-container {

670 width: 100%;

671 height: 50px;

672 cursor: pointer;

673 }

674

675 li {

676 overflow: hidden;

677 border-radius: 3px;

678 border: 2px solid #fff;

679 margin-bottom: 8px;

680 position: relative;

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

682

683 label {

684 position: absolute;

685 top: 0;

686 left: 0;

687 padding: 2px 6px;

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

689 cursor: pointer;

690 font-weight: 600;

691 font-size: 16px;

692 text-stroke: 2px #fff;

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

694 z-index: 2; // For IE9

695 input[type="radio"] {

696 display: none;

697 }

698 }

699

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

701 &:hover {

702 border-color: $grey;

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

704 }

705 }

706 }

707

708 .overlay-layers {

709 p {

710 font-size: 13px;

711 margin-bottom: 8px;

712 }

713 li.disabled { color: #999; }

714 }

715 }

716

717 .share-ui {

718 .share-tabs {

719 margin-bottom: 10px;

720

721 a {

722 color: #fff;

723 text-decoration: none;

724 background-color: $lightblue;

725 padding: 5px 10px;

726 border-right: 1px solid #fff;

727 }

728

729 a:first-child {

730 border-right: 1px solid #fff;

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

732 }

733

734 a:last-child {

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

736 }

737

738 a.active {

739 background-color: $blue;

740 }

741 }

742

743 .share-tab {

744 display: none;

745 }

746

747 .share-link {

748 input[type=text],

749 textarea {

750 width: 100%;

751 font-family: monospace;

752 font-size: small;

753 line-height: 1.3;

754 }

755 }

756

757 .share-image {

758 label {

759 margin-right: 10px;

760 }

761 }

762

763 #embed_html {

764 resize: vertical;

765 }

766

767 #mapnik_scale {

768 width: 100px;

769 }

770 }

771

772 .leaflet-top {

773 top: $lineheight/2 !important;

774 .leaflet-control {

775 margin-right: 0px !important;

776 margin-top: 0px !important;

777 }

778 }

779

780 .leaflet-popup-scrolled {

781 padding-right: $lineheight;

782 border-bottom: 0px !important;

783 border-top: 0px !important;

784 }

785

786 .leaflet-popup-content-wrapper {

787 border-radius: 4px !important;

788 }

789

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

791

792 #attribution {

793 display: none;

794

795 table {

796 width: 100%

797 }

798 }

799

800 .attribution_license,

801 .attribution_project {

802 text-align: left;

803 }

804

805 .attribution_notice {

806 text-align: center;

807 }

808

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

810

811 /* Rules for the sidebar */

812

813 .sidebar_heading {

814 position: relative;

815 padding: $lineheight/2 $lineheight;

816 // background: $offwhite;

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

818 > .close {

819 float: right;

820 margin-top: 2px;

821 cursor: pointer;

822 }

823 }

824

825 #browse_status {

826 p {

827 padding: $lineheight;

828 }

829

830 input {

831 display: block;

832 margin-left: auto;

833 margin-right: auto;

834 }

835 }

836

837 #sidebar {

838 #sidebar_loader,

839 .loader,

840 .load_more {

841 text-align: center;

842 margin: $lineheight auto;

843 width: 40px;

844 display: block;

845 }

846 }

847

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

849

850 header .search_forms,

851 .directions_form {

852 display: none;

853 }

854

855 .search_form,

856 .directions_form {

857 position: relative;

858 padding: $lineheight/2;

859 background-color: $lightgrey;

860

861 .query_wrapper {

862 position: relative;

863 overflow: hidden;

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

865 }

866

867 input[type=text] {

868 width: 100%;

869 height: 30px;

870 transition: 300ms linear;

871 }

872

873 input[type=text].overflow {

874 border-right: none;

875 }

876

877 input:focus {

878 outline: none;

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

880 }

881

882 input[type=submit].float {

883 float: right;

884 width: auto;

885 min-width: 0;

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

887 }

888

889 select {

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

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

892 padding: 0.3em 0;

893 }

894

895 .query_options {

896 text-align: right;

897 font-size: 10px;

898 color: $blue;

899 }

900

901 .describe_location {

902 position: absolute;

903 top: 6px;

904 right: 6px;

905 font-size: 10px;

906 color: $blue;

907 }

908

909 .switch_link {

910 float: right;

911 width: auto;

912 min-width: 0;

913 margin-left: 6px;

914 }

915

916 img.button {

917 display: block;

918 }

919

920 span.force_width {

921 width: 100%;

922 padding-right: 25px;

923 display: block;

924 }

925

926 select.routing_engines {

927 min-height: 30px;

928 margin: 0px 0px 5px 25px;

929 }

930

931 input.routing_go {

932 min-width: 100px;

933 float: right;

934 }

935

936 div.header {

937 width: 100%;

938 height: 30px;

939 }

940

941 div.line {

942 width: 100%;

943 margin: 0px 0px 5px 0px;

944 }

945

946 div.loader_copy {

947 display: none;

948

949 img {

950 vertical-align: middle;

951 }

952 }

953 }

954

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

956

957 #mapkey {

958 .mapkey-table-key img {

959 display: block;

960 margin-left: auto;

961 margin-right: auto;

962 }

963 td {

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

965 }

966 }

967

968 /* Rules for search sidebar */

969

970 .search_results_entry {

971 ul li {

972 border-bottom: $keyline;

973 cursor: pointer;

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

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

976 }

977

978 .search_details {

979 display: block;

980 float: right;

981 text-align: right;

982 margin-top: 0.2em;

983 margin-left: 0.5em;

984 }

985 }

986

987 .search_results_error {

988 color: #f00;

989 padding: 10px 20px;

990 }

991

992 /* Rules for routing */

993

994 #sidebar_content>table {

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

996 width: 100%;

997 border-collapse: separate;

998 }

999

1000 div.direction {

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

1002 width: 20px;

1003 height: 20px;

1004 background-repeat: no-repeat;

1005 }

1006 @for $i from 1 through 18 {

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

1008 }

1009

1010 p#routing_summary {

1011 padding: 0 $lineheight $lineheight/4;

1012 }

1013

1014 td.instruction, td.distance {

1015 padding-top: $lineheight/5;

1016 padding-bottom: $lineheight/5;

1017 border-bottom: 1px solid #DDD;

1018 }

1019 td.distance {

1020 color: #BBB;

1021 text-align: right;

1022 font-size: x-small;

1023 }

1024 tr.turn {

1025 cursor: pointer;

1026 }

1027 tr.turn:hover {

1028 background: $list-highlight;

1029 }

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

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

1032

1033 /* Rules for entity history */

1034

1035 #sidebar_content {

1036 .browse_details {

1037 position: relative;

1038 border-bottom: $keyline;

1039 }

1040 }

1041

1042 .browse_status {

1043 display: none;

1044 }

1045

1046 /* Rules for the history sidebar */

1047

1048 #sidebar .changesets {

1049 li {

1050 padding: 15px 20px;

1051 border-bottom: 1px solid #ddd;

1052 cursor: pointer;

1053

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

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

1056 }

1057

1058 h4 {

1059 margin: 0;

1060 a {

1061 color: #000;

1062 }

1063 }

1064

1065 .comments {

1066 float: right;

1067 color: #999;

1068 }

1069

1070 .comments-0 {

1071 opacity: 0.5;

1072 }

1073 }

1074

1075 /* Rules for the browse sidebar */

1076

1077 #sidebar_content {

1078 .browse-section {

1079 padding: $lineheight/2 $lineheight;

1080 border-bottom: 1px solid #ddd;

1081

1082 h4:first-child {

1083 margin-top: 0;

1084 word-wrap: break-word;

1085 }

1086 }

1087

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

1089 border-bottom: none;

1090 }

1091

1092 .paginate {

1093 float: right;

1094 padding: 1px 6px;

1095 border: 1px solid #eee;

1096 border-radius: 3px;

1097 }

1098

1099 .paginate ul {

1100 padding-left: 20px;

1101 }

1102

1103 .browse-field {

1104 margin-bottom: 10px;

1105

1106 h4 {

1107 padding: 5px 0 5px 10px;

1108 font-size: 12px;

1109 border: 1px solid #CCC;

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

1111 background-color: #F6F6F6;

1112 }

1113

1114 p {

1115 padding: 7px 10px;

1116 font-size: 12px;

1117 background-color: #FFF;

1118 border: 1px solid #CCC;

1119 border-top: 0;

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

1121 }

1122 }

1123

1124 .browse-tag-list {

1125 background-color: #F6F6F6;

1126 border: 1px solid #ddd;

1127 border-radius: 3px;

1128 font-size: 12px;

1129 table-layout: fixed;

1130 border-collapse: separate;

1131

1132 th, td {

1133 border-bottom: 1px solid #ddd;

1134 }

1135

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

1137 border-bottom: 0;

1138 }

1139

1140 .browse-tag-k,

1141 .browse-tag-v {

1142 width: 50%;

1143 padding: 6px 10px;

1144 word-wrap: break-word;

1145 }

1146

1147 .browse-tag-k {

1148 font-weight: 500;

1149 background-color: #F6F6F6;

1150 }

1151

1152 .browse-tag-v {

1153 border-left: 1px solid #ddd;

1154 background-color: #fff;

1155 }

1156 }

1157

1158 .warning {

1159 margin: $lineheight/2 0;

1160 padding: $lineheight/2;

1161 font-size: 90%;

1162 }

1163

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

1165 margin: $lineheight/2 0;

1166

1167 p {

1168 margin-left: 10px;

1169 }

1170 }

1171

1172 .comments-header {

1173 float: left;

1174 }

1175

1176 .subscribe-buttons {

1177 float: left;

1178 margin: 18px 10px 10px;

1179 min-width: 80px;

1180 }

1181

1182 .subscribe-buttons input {

1183 font-size: 90%;

1184 line-height: 15px;

1185 min-height: 20px;

1186 }

1187

1188 span.action-button:hover {

1189 cursor: pointer;

1190 text-decoration: underline;

1191 }

1192

1193 .note-description {

1194 overflow: hidden;

1195 margin: 0 0 10px 10px;

1196 }

1197

1198 .query-intro p {

1199 padding: $lineheight $lineheight $lineheight/2;

1200 }

1201

1202 .query-results {

1203 display: none;

1204

1205 h3 {

1206 padding: $lineheight $lineheight $lineheight/2;

1207 margin: 0;

1208 }

1209

1210 ul {

1211 li {

1212 padding: 15px 20px;

1213 border-bottom: 1px solid #ddd;

1214

1215 &.query-result {

1216 cursor: pointer;

1217 }

1218

1219 &.selected {

1220 background: $list-highlight;

1221 }

1222 }

1223 }

1224 }

1225 }

1226

1227 /* Rules for export sidebar */

1228

1229 .export_form {

1230 padding: $lineheight;

1231

1232 .export_area_inputs,

1233 .export_button {

1234 text-align: center;

1235 }

1236

1237 .export_area_inputs {

1238 margin-bottom: $lineheight/2;

1239 input[type="text"] {

1240 width: 80px;

1241 text-align: center;

1242 margin-bottom: 5px;

1243 }

1244 }

1245

1246 .export_boxy {

1247 background: #eee;

1248 border: 1px solid #ccc;

1249 border-radius: 3px;

1250

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

1252 #minlon {

1253 float: left;

1254 margin-left: -1px;

1255 }

1256 #maxlon {

1257 float: right;

1258 margin-right: -1px;

1259 }

1260 #minlat { margin-bottom: 0; }

1261 }

1262

1263 .export_bound {

1264 margin: $lineheight/4;

1265 }

1266

1267 .export_button {

1268 margin-top: $lineheight;

1269 margin-bottom: $lineheight;

1270 }

1271

1272 dl {

1273 padding-left: $lineheight/2;

1274 dd {

1275 margin-left: 0;

1276 margin-bottom: 10px;

1277 }

1278 }

1279 }

1280

1281 /* Rules for the routing sidebar */

1282

1283 #sidebar_content {

1284 #routing_credit {

1285 text-align: center;

1286 padding: 0.5em;

1287 }

1288 }

1289

1290 /* Rules for edit pages */

1291

1292 .site-edit {

1293 #content {

1294 position: absolute;

1295 top: $headerHeight;

1296 bottom: 0;

1297 width: 100%;

1298 }

1299

1300 #map {

1301 height: 100%;

1302 overflow: hidden;

1303 }

1304 }

1305

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

1307

1308 .content-heading {

1309 background: $lightgrey;

1310

1311 h1 { font-size: 22px; }

1312 }

1313

1314 .content-body {

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

1316 margin-bottom: $lineheight;

1317 }

1318

1319 h1, h2, h3 {

1320 margin-top: $lineheight/2;

1321 }

1322 }

1323

1324 .content-inner {

1325 position: relative;

1326 max-width: 900px;

1327 margin: auto;

1328 padding: $lineheight;

1329 }

1330

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

1332

1333 .user-new,

1334 .user-create,

1335 .user-terms {

1336 .content-body .content-inner {

1337 padding: 0;

1338

1339 .message {

1340 margin-top: 80px;

1341 padding: 20px;

1342 }

1343 }

1344 }

1345

1346 .user-new,

1347 .user-create,

1348 .user-terms,

1349 .user-confirm {

1350 .content-heading .content-inner {

1351 height: 200px;

1352 }

1353 }

1354

1355 .header-illustration {

1356 background-position: 0 0;

1357 background-repeat: no-repeat;

1358 position: absolute;

1359 height: 200px;

1360 width: 100%;

1361 left: 0;

1362 bottom: 0;

1363

1364 &.new-user-main {

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

1366 }

1367

1368 &.confirm-main {

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

1370 }

1371

1372 &.new-user-terms {

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

1374 }

1375

1376 &.new-user-arm {

1377 height: 110px;

1378 width: 130px;

1379 left: 260px;

1380 top: 160px;

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

1382 z-index: 100;

1383 }

1384 }

1385

1386 #content.maximised {

1387 top: 0;

1388 left: 0;

1389 right: 0;

1390 bottom: 0;

1391 border: 0;

1392 z-index: 2000;

1393 }

1394

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

1396

1397 .content_map {

1398 position: relative;

1399 width: 45%;

1400 height: 400px;

1401 border: 1px solid #ccc;

1402 margin-bottom: $lineheight;

1403 float: right;

1404 }

1405

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

1407

1408 #trace_list {

1409 font-size: $lineheight/2;

1410 border-width: 0px;

1411 text-align: right;

1412

1413 .trace_summary {

1414 font-size: 12px;

1415 color: gray;

1416 }

1417

1418 .trace_pending {

1419 color: red;

1420 }

1421

1422 .trace_public {

1423 color: green;

1424 }

1425

1426 .trace_identifiable {

1427 color: green;

1428 }

1429

1430 .trace_trackable {

1431 color: red;

1432 }

1433

1434 .trace_private {

1435 color: red;

1436 }

1437 }

1438

1439 /* Rules for the new trace form */

1440

1441 #new_trace {

1442 input[type=text] {

1443 width: 50%;

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

1445 max-width: 500px;

1446 }

1447 }

1448

1449 /* Rules for the edit trace form */

1450

1451 .edit_trace {

1452 .form-row p {

1453 margin-bottom: 0px;

1454 }

1455

1456 input[type=text] {

1457 width: 50%;

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

1459 max-width: 500px;

1460 }

1461 }

1462

1463 /* Rules for the user profile page */

1464

1465 #userinformation {

1466

1467 min-height: 100px;

1468 .userinformation-inner {

1469 float: left;

1470 }

1471 h2 {

1472 margin-top: 0;

1473 }

1474 .user-description {

1475 width: 100%;

1476 clear: both;

1477 }

1478 .deemphasize {

1479 margin: 0;

1480 }

1481 }

1482

1483 .admin-user-info small {

1484 margin-bottom: $lineheight/2;

1485 display: inline;

1486 margin-right: $lineheight;

1487 }

1488

1489 .activity-block {

1490 clear: left;

1491 border-bottom: 1px solid #ccc;

1492 padding-bottom: $lineheight;

1493 float: left;

1494 h3 {

1495 margin-bottom: $lineheight/2;

1496 }

1497 }

1498

1499 .contact-activity {

1500 margin-top: $lineheight;

1501 width: 100%;

1502 }

1503

1504 .activity-details p {

1505 margin-left: 70px;

1506 margin-bottom: 0;

1507 }

1508

1509 #friends-container .contact-activity ul {

1510 margin-left: 70px;

1511 }

1512

1513 .user-view {

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

1515 .content-inner {

1516 max-width: none;

1517 }

1518 p#no_home_location {

1519 margin: $lineheight;

1520 }

1521 .user_thumbnail {

1522 margin-top: $lineheight/4;

1523 float: left;

1524 }

1525 }

1526

1527 /* Rules for the user map */

1528

1529 .content_map .leaflet-popup-content {

1530 margin: $lineheight/2;

1531 min-height: 50px;

1532 }

1533

1534 /* Rules for user popups on maps */

1535

1536 .user_popup {

1537 min-width: 200px;

1538 p {

1539 padding: 0 0 5px 0;

1540 margin-top: 0 0 0 60px;

1541 font-size: 12px;

1542 }

1543 img.user_thumbnail {

1544 float: left;

1545 margin: 0 $lineheight/2 0 0;

1546 }

1547 }

1548

1549 /* Rules for the user list */

1550

1551 #user_list {

1552 font-size: $lineheight/2;

1553 width: 100%;

1554

1555 tr {

1556 vertical-align: middle;

1557 }

1558

1559 p {

1560 margin-top: 0px;

1561 margin-bottom: 0px;

1562 }

1563 }

1564

1565 #user_list_actions {

1566 float: right;

1567 margin-top: $lineheight/2;

1568 }

1569

1570 /* Rules for the diary list page */

1571

1572 .diary_post {

1573 position: relative;

1574 margin-top: $lineheight/2;

1575 padding-top: $lineheight;

1576 border-top: 1px solid #ccc;

1577

1578 .post_heading {

1579 margin-bottom: $lineheight;

1580

1581 h2 {

1582 margin-top: 0;

1583 margin-bottom: $lineheight/2;

1584 font-size: 24px;

1585 }

1586 }

1587

1588 img.user_thumbnail {

1589 float: left;

1590 }

1591

1592 small.deemphasize {

1593 float: left;

1594 display: block;

1595 }

1596 }

1597

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

1599 display: inline;

1600 }

1601

1602 /* Rules for the diary entry page */

1603

1604 .diary_entry {

1605 #map {

1606 position: relative;

1607 width: 90%;

1608 height: 400px;

1609 border: 1px solid #ccc;

1610 display: none;

1611 margin-bottom: $lineheight;

1612 }

1613 #newcomment {

1614 border-top: 1px solid #ccc;

1615 padding-top: $lineheight;

1616 margin-top: $lineheight/2;

1617 }

1618 .comments {

1619 max-width: 740px;

1620 }

1621 .diary-comment {

1622 margin-top: $lineheight/2;

1623 border-top: 1px dashed #ccc;

1624 padding-top: $lineheight/2;

1625 &:first-child {

1626 margin-top: $lineheight;

1627 padding-top: $lineheight;

1628 border-top: 1px solid #ccc;

1629 }

1630 p {

1631 margin-bottom: $lineheight/2;

1632 }

1633 .comment-heading {

1634 margin-bottom: 0;

1635 margin-top: 0;

1636 }

1637 }

1638 }

1639

1640 .diary_entry-view img.user_thumbnail {

1641 float: left;

1642 }

1643

1644 /* Rules for the log in page */

1645

1646 #login_auth_buttons {

1647 margin-bottom: 0;

1648 }

1649

1650 #login_auth_buttons li {

1651 float: left;

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

1653 }

1654

1655 /* Rules for the account confirmation page */

1656

1657 .user-terms {

1658 .legale {

1659 border: 1px solid #ccc;

1660 padding: $lineheight;

1661 margin-bottom: $lineheight;

1662 overflow: auto;

1663 height: 20em;

1664 }

1665

1666 #decline {

1667 background: $lightblue;

1668 &:hover {

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

1670 }

1671 }

1672 }

1673

1674 /* Rules for the account settings page */

1675

1676 #accountForm .user_map {

1677 position: relative;

1678 width: 500px;

1679 height: 400px;

1680 border: 1px solid #ccc;

1681 }

1682

1683 #accountForm .user_image {

1684 margin-bottom: 0;

1685 }

1686

1687 #accountForm #user_image {

1688 margin-left: 20px;

1689 }

1690

1691 #accountForm ul.accountImage-options {

1692 margin-left: 120px;

1693 }

1694

1695 .nohome .location {

1696 display: none;

1697 }

1698

1699 #homerow .message {

1700 display: none;

1701 }

1702

1703 .nohome .message {

1704 display: inline !important;

1705 }

1706

1707 .content_map.settings_map {

1708 width: 50%;

1709 float: none;

1710 }

1711

1712 /* Rules for the oauth settings page */

1713

1714 .oauth_clients .buttons .oauth-edit {

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

1716 }

1717

1718 .oauth_clients .buttons .oauth-delete {

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

1720 }

1721

1722 /* Rules for messages pages */

1723

1724 .messages {

1725 width: 100%;

1726 border: 1px solid #ddd;

1727

1728 input[type="submit"] {

1729 margin: auto;

1730 }

1731 tbody tr {

1732 border-top: 1px solid #ccc;

1733 }

1734

1735 .inbox-row {

1736 background: #f8f8ff;

1737 }

1738

1739 .inbox-row-unread {

1740 background:#CBEEA7;

1741 }

1742

1743 .right {

1744 float: right;

1745 }

1746

1747 tr td,

1748 tr th {

1749 padding: $lineheight/4;

1750 }

1751 p:last-child,

1752 h2:last-child,

1753 h3:last-child,

1754 ol:last-child,

1755 ul:last-child {

1756 margin-bottom:0;

1757 }

1758 tr td {

1759 height: 30px;

1760 border-right: 1px solid $lightgrey;

1761 }

1762 }

1763

1764 .inbox-row .inbox-mark-read {

1765 display: none;

1766 }

1767

1768 .info-line {

1769 margin-bottom: $lineheight;

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

1771 border-bottom: 1px solid #ccc;

1772

1773 form, form div {

1774 display: inline;

1775 }

1776 }

1777

1778 .info-line .user_thumbnail_tiny {

1779 vertical-align: middle;

1780 }

1781

1782 .inbox-sent {

1783 white-space: nowrap;

1784 }

1785

1786 .inbox-mark-unread,

1787 .inbox-mark-read,

1788 .inbox-delete {

1789 width: 1%;

1790 }

1791

1792 .inbox-row-unread .inbox-mark-unread {

1793 display: none;

1794 }

1795

1796 .message-read .message-buttons {

1797 margin-top: $lineheight;

1798 margin-bottom: $lineheight * 1.5;

1799 padding-top: $lineheight;

1800 border-top: 1px solid $lightgrey;

1801 }

1802

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

1804 border-radius: 0;

1805 }

1806

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

1808

1809 .flash {

1810 padding: $lineheight;

1811

1812 &.error {

1813 background-color: #ff7070;

1814 }

1815

1816 &.warning {

1817 background-color: #ffe0cc;

1818 }

1819

1820 &.notice {

1821 background-color: #CBEEA7;

1822 }

1823

1824 div.message {

1825 display: inline-block;

1826 margin-left: $lineheight / 2;

1827 vertical-align: middle;

1828

1829 p {

1830 margin-top: $lineheight * 0.5;

1831 margin-bottom: $lineheight * 0.5;

1832

1833 &:first-child {

1834 margin-top: 0px;

1835 }

1836

1837 &:last-child {

1838 margin-bottom: 0px;

1839 }

1840 }

1841 }

1842 }

1843

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

1845

1846 .formError {

1847 display: inline-block;

1848 padding: 5px 10px;

1849 margin-top: 5px;

1850 border-radius: 4px;

1851 font-size: 12px;

1852 color: #fff;

1853 background-color: #ff7070;

1854 }

1855

1856 /* Rules for rails validation error boxes */

1857

1858 #errorExplanation {

1859 width: 400px;

1860 border: 2px solid #ff7070;

1861 padding: 0 $lineheight/2;

1862 margin-bottom: $lineheight;

1863 background-color: #f0f0f0;

1864

1865 h2 {

1866 margin: 0 -10px 10px -10px;

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

1868 font-weight: bold;

1869 font-size: 12px;

1870 background-color: #c00;

1871 color: #fff;

1872 text-align: left;

1873 }

1874

1875 p {

1876 color: #333;

1877 margin-bottom: 0px;

1878 padding: $lineheight/4;

1879 }

1880

1881 ul {

1882 padding-left: $lineheight;

1883

1884 li {

1885 font-size: 12px;

1886 list-style: disc;

1887 }

1888 }

1889 }

1890

1891 /* Rules for forms */

1892

1893 .standard-form {

1894 fieldset {

1895 margin-bottom: $lineheight;

1896 }

1897 label.standard-label {

1898 display: block;

1899 margin-bottom: $lineheight/4;

1900 font-size: $typeheight;

1901 font-weight: bold;

1902 line-height: 1.5;

1903 }

1904 label.standard-label.secondary {

1905 display: inline-block;

1906 font-weight: normal;

1907 }

1908 .form-help {

1909 font-weight: normal;

1910 }

1911 .form-column {

1912 float: left;

1913 margin-right: 20px;

1914 }

1915 .form-divider {

1916 margin-top: $lineheight;

1917 padding-top: $lineheight;

1918 border-top: 1px solid $lightgrey;

1919 }

1920 .horizontal-list .form-row {

1921 float: left;

1922 padding-right: 10px;

1923 }

1924 .form-row {

1925 margin-bottom: $lineheight/2;

1926 }

1927 .form-list {

1928 margin-bottom: 0;

1929 }

1930 .form-list li {

1931 margin-bottom: 5px;

1932 }

1933 input[type="checkbox"],

1934 input[type="radio"] {

1935 float: left;

1936 margin-top: 5px;

1937 }

1938 }

1939

1940 #remember_me_openid {

1941 display: block;

1942 }

1943

1944 select {

1945 padding: 2px;

1946 }

1947

1948 input[type="checkbox"],

1949 input[type="radio"] {

1950 margin-right: 5px;

1951 }

1952

1953 input[type="text"],

1954 input[type="email"],

1955 input[type="url"],

1956 input[type="password"],

1957 textarea {

1958 color: #222;

1959 background-color: #fff;

1960 border: 1px solid #ccc;

1961 padding: 2px 5px;

1962 margin: 0;

1963 width: 200px;

1964

1965 &.field_with_errors {

1966 border: 2px solid #ff7070;

1967 }

1968 }

1969

1970 textarea {

1971 padding: 5px;

1972 width: 100%;

1973 }

1974

1975 /* Rules for user images */

1976

1977 img.user_image {

1978 max-width: 100px;

1979 max-height: 100px;

1980 border: 1px solid #ccc;

1981 margin-bottom: $lineheight;

1982 float: left;

1983 margin-right: $lineheight;

1984 }

1985

1986 img.user_thumbnail {

1987 max-width: 50px;

1988 max-height: 50px;

1989 border: 1px solid #ccc;

1990 margin-right: $lineheight;

1991 }

1992

1993 img.user_thumbnail_tiny {

1994 width: auto;

1995 height: auto;

1996 max-width: 25px;

1997 max-height: 25px;

1998 border: 1px solid #ccc;

1999 }

2000

2001 /* Rules for geo microformats */

2002

2003 abbr.geo {

2004 border-bottom: none;

2005 }

2006

2007 /* Rules for RSS buttons */

2008

2009 .rsssmall {

2010 position: relative;

2011 top: 3px;

2012 }

2013

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

2015

2016 ul.secondary-actions {

2017 font-style: normal;

2018 margin-bottom: 0;

2019 margin-left: 0;

2020 &.pager {

2021 display: inline-block;

2022 margin-right: 60px;

2023 }

2024 > li {

2025 display: block;

2026 float: left;

2027 list-style: none;

2028 border-left: 1px solid #ccc;

2029 padding-left: $lineheight/2;

2030 margin-right: $lineheight/2;

2031 &:first-child {

2032 border-left: 0;

2033 padding-left: 0;

2034 }

2035 &:last-child {

2036 margin-right: 0px;

2037 }

2038 }

2039 }

2040

2041 div.secondary-actions {

2042 padding: 10px;

2043 text-align: center;

2044 }

2045

2046 /* Utility for managing inner content areas */

2047

2048 .inner22 { padding: $lineheight;}

2049

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

2051

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

2053

2054 .inner20 { padding: $lineheight 0;}

2055

2056 .inner02 { padding: 0 $lineheight;}

2057

2058 /* Utility for general button styles */

2059

2060 input[type="button"],

2061 input[type="submit"],

2062 input[type="reset"],

2063 a.button {

2064 cursor: pointer;

2065 border: 0;

2066 display: inline-block;

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

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

2069 min-width: 120px;

2070 margin: 0 0 $lineheight/2 0;

2071 color: white;

2072 background: $blue;

2073 text-align: center;

2074 border-radius: 2px;

2075 &:hover {

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

2077 text-decoration: none;

2078 }

2079 &.deemphasize {

2080 background: $lightblue;

2081 &:hover {

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

2083 }

2084 }

2085 &:disabled {

2086 background: $lightgrey;

2087 &:hover {

2088 background: $lightgrey;

2089 }

2090 }

2091 &:last-child {

2092 margin-bottom: 0;

2093 }

2094 }

2095

2096 input[type="button"],

2097 input[type="submit"],

2098 input[type="reset"] {

2099 line-height: normal;

2100 }

2101

2102 a.button {

2103 line-height: 20px;

2104 }

2105

2106 .buttons {

2107 min-width: 200px;

2108 input[type="submit"],

2109 input[type="button"],

2110 input[type="reset"],

2111 .button,

2112 .button_to {

2113 box-sizing: border-box;

2114 float: left;

2115 border-radius: 0;

2116 margin:0;

2117 min-width: 75px;

2118 max-width: 180px;

2119 border-right:1px solid white;

2120 text-overflow: ellipsis;

2121 white-space: nowrap;

2122 overflow: hidden;

2123 }

2124 input:first-child,

2125 .button:first-child,

2126 .button_to:first-child {

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

2128 }

2129 input:last-child,

2130 .button:last-child,

2131 .button_to:last-child {

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

2133 border-right-width: 0;

2134 }

2135 input:only-child,

2136 .button:only-child,

2137 .button_to:only-child,

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

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

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

2141 border-radius:2px;

2142 border-right-width: 0;

2143 }

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

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

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

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

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

2149 border-right-width: 0;

2150 }

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

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

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

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

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

2156 border-right-width: 1px;

2157 }

2158 }

2159

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

2161

2162 .table0,

2163 .item0 {

2164 background: $offwhite;

2165 }

2166

2167 .table1,

2168 .item1 {

2169 background: #fff;

2170 }

2171

2172 /* Rules for OpenID logo */

2173

2174 .openid_logo {

2175 vertical-align: text-bottom;

2176 border: 0;

2177 }

2178

2179 /* Rules for rich text */

2180

2181 .richtext,

2182 .prose {

2183 h1, h2 {

2184 padding-bottom: $lineheight/2;

2185 border-bottom: 1px dashed #cccccc;

2186 margin-bottom: $lineheight/2;

2187 }

2188

2189 h1 {

2190 font-size: 24px;

2191 }

2192

2193 h2 {

2194 font-size: 18px;

2195 }

2196

2197 h3 {

2198 font-size: $typeheight;

2199 }

2200

2201 code {

2202 font-size: 13px;

2203 background: #e8e8e8;

2204 padding: 2px 3px;

2205 }

2206

2207 pre {

2208 font-size: 13px;

2209 background: #e8e8e8;

2210 padding: 2px 3px;

2211

2212 code {

2213 padding: 0;

2214 }

2215 }

2216

2217 img {

2218 padding: $lineheight;

2219 background-color: $offwhite;

2220 display: block;

2221 max-width: 100%;

2222 margin: auto;

2223 }

2224

2225 blockquote {

2226 border-left: $lineheight solid $offwhite;

2227 padding-left: $lineheight;

2228 margin: 0;

2229 color: #7E7E7E;

2230 }

2231

2232 ul, ol {

2233 padding-left: $lineheight;

2234 margin-bottom: $lineheight;

2235 margin-left: $lineheight;

2236 }

2237

2238 ul li {

2239 list-style: disc;

2240 }

2241

2242 ol li {

2243 list-style: decimal;

2244 }

2245 }

2246

2247 .diary_post .richtext {

2248 margin-top: $lineheight;

2249 }

2250

2251 .comments .richtext {

2252 margin-left: 70px;

2253 margin-top: 0;

2254 }

2255

2256 /* Rules for rich text editors */

2257

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

2259 width: 50%;

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

2261

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

2263 width: 100%;

2264 }

2265 }

2266

2267 .richtext_container {

2268 margin-bottom: $lineheight;

2269

2270 .richtext_content {

2271 width: 50%;

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

2273 display: inline-block;

2274 vertical-align: top;

2275

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

2277 width: 100%;

2278 }

2279

2280 .richtext_preview {

2281 display: inline-block;

2282 padding: $lineheight;

2283 background-color: $offwhite;

2284 overflow-x: auto;

2285

2286 &.loading {

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

2288 background-repeat: no-repeat;

2289 background-position: center;

2290 }

2291

2292 > :first-child {

2293 margin-top: 0px;

2294 }

2295 }

2296 }

2297

2298 .richtext_help {

2299 display: inline-block;

2300 vertical-align: top;

2301 margin-left: 15px;

2302 background-color: #f8f8ff;

2303 padding: $lineheight/2;

2304 width: 220px;

2305

2306 ul {

2307 margin-bottom: 0;

2308 }

2309

2310 h4.heading, li {

2311 border-bottom: 1px solid #ccc;

2312 margin-bottom: $lineheight/4;

2313 padding-bottom: $lineheight/4;

2314 }

2315

2316 li h4, li span, li p {

2317 display: inline-block;

2318 vertical-align: top;

2319 font-size: 11px;

2320 }

2321

2322 li h4 {

2323 width: 40%;

2324 margin: 0;

2325 }

2326

2327 li span, li p {

2328 width: 50%;

2329 margin-left: $lineheight/2;

2330 margin-bottom: $lineheight/4;

2331 white-space: nowrap;

2332 }

2333 }

2334 }

2335

2336 /* Rules for the user notes list */

2337

2338 .note_list {

2339 tr.creator {

2340 background-color: #eeeeee;

2341 }

2342

2343 td {

2344 padding: 3px;

2345 }

2346

2347 p {

2348 margin-bottom: 0px;

2349 }

2350 }

2351

2352 /* Rules for the iD editor */

2353

2354 .id-embed {

2355 width: 100%;

2356 height: 100%;

2357 }

2358

2359 /* Rules for dropdown menus */

2360

2361 .dropdown {

2362 position: relative;

2363 }

2364

2365 .dropdown-toggle {

2366 *margin-bottom: -3px;

2367 }

2368

2369 .dropdown-toggle:active,

2370 .open .dropdown-toggle {

2371 outline: 0;

2372 }

2373

2374 .caret {

2375 display: inline-block;

2376 width: 0;

2377 height: 0;

2378 vertical-align: top;

2379 border-top: 4px solid #000000;

2380 border-right: 4px solid transparent;

2381 border-left: 4px solid transparent;

2382 content: "";

2383 }

2384

2385 .dropdown .caret {

2386 margin-top: 8px;

2387 margin-left: 2px;

2388 }

2389

2390 .dropdown-menu {

2391 position: absolute;

2392 top: 100%;

2393 left: -1px;

2394 z-index: 1000;

2395 display: none;

2396 float: left;

2397 min-width: 160px;

2398 padding: 5px 0;

2399 margin: 0;

2400 list-style: none;

2401 background-color: #ffffff;

2402 border: 1px solid #ccc;

2403 border-radius: 0 3px 3px;

2404 *border-right-width: 2px;

2405 *border-bottom-width: 2px;

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

2407 background-clip: padding-box;

2408 }

2409

2410 .dropdown-menu.pull-right {

2411 right: 0;

2412 left: auto;

2413 }

2414

2415 .dropdown-menu .divider {

2416 *width: 100%;

2417 height: 1px;

2418 margin: 9px 1px;

2419 *margin: -5px 0 5px;

2420 overflow: hidden;

2421 background-color: #e5e5e5;

2422 border-bottom: 1px solid #ffffff;

2423 }

2424

2425 .dropdown-menu > li > a {

2426 display: block;

2427 padding: 3px 10px;

2428 clear: both;

2429 font-weight: normal;

2430 line-height: 20px;

2431 color: #333333;

2432 white-space: nowrap;

2433 }

2434

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

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

2437 .dropdown-submenu:hover > a,

2438 .dropdown-submenu:focus > a {

2439 color: #ffffff;

2440 text-decoration: none;

2441 background-color: $green;

2442 }

2443

2444 .dropdown-menu > .active > a,

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

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

2447 color: #ffffff;

2448 text-decoration: none;

2449 background-color: $green;

2450 outline: 0;

2451 }

2452

2453 .dropdown-menu > .disabled > a,

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

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

2456 color: #999999;

2457 }

2458

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

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

2461 text-decoration: none;

2462 cursor: default;

2463 background-color: transparent;

2464 background-image: none;

2465 }

2466

2467 .open {

2468 *z-index: 1000;

2469 }

2470

2471 .open > .dropdown-menu {

2472 display: block;

2473 }

2474

2475 .dropdown-backdrop {

2476 position: fixed;

2477 top: 0;

2478 right: 0;

2479 bottom: 0;

2480 left: 0;

2481 z-index: 990;

2482 }

2483

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

2485 .site-welcome, .site-fixthemap {

2486 .center {

2487 text-align: center;

2488 .sprite {

2489 float: none;

2490 margin: auto;

2491 }

2492 }

2493

2494 .sprite {

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

2496 background-size: 500px 250px;

2497 display: block;

2498 float: left;

2499 }

2500

2501 .icon-list {

2502 padding-bottom: 20px;

2503 div {

2504 margin-bottom: 10px;

2505 p {

2506 padding-top: 10px;

2507 }

2508 }

2509 }

2510 .sprite.small {

2511 width: 50px;

2512 height: 50px;

2513 }

2514

2515 .sprite.x {

2516 background-position: -50px 0;

2517 }

2518

2519 .sprite.term {

2520 margin-right: 10px;

2521 vertical-align: middle;

2522 }

2523

2524 .sprite.node {

2525 background-position: -100px 0;

2526 }

2527

2528 .sprite.way {

2529 background-position: -150px 0;

2530 }

2531

2532 .sprite.tag {

2533 background-position: -200px 0;

2534 }

2535

2536 .sprite.editor {

2537 background-position: -250px 0;

2538 }

2539

2540 .sprite.question {

2541 background-position: -300px 0;

2542 }

2543

2544 .sprite.rules {

2545 background-position: -350px 0;

2546 }

2547

2548 .start-mapping {

2549 margin: auto;

2550 cursor: pointer;

2551 border: none;

2552 padding: 20px 40px;

2553 font-size: 30px;

2554 text-decoration: none;

2555 }

2556

2557 .note-box {

2558 margin-top: 20px;

2559 background-color: $offwhite;

2560 }

2561

2562 .icon.note {

2563 background-color: #333;

2564 border-radius: 4px;

2565 }

2566 }

2567

2568 .site-about #content {

2569 //background-color: #000;

2570 background-color: #eee;

2571 background-position: 50% 50%;

2572 background-repeat: no-repeat;

2573 background-size: cover;

2574 background-attachment: fixed;

2575

2576 .caption {

2577 max-width: 200px;

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

2579 position: fixed;

2580 text-align: right;

2581 right: 20px;

2582 bottom: 60px;

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

2584 color: #eee;

2585 opacity: 0.8;

2586 display: none;

2587 }

2588

2589 .caption a {

2590 color: white;

2591 white-space: nowrap;

2592 text-decoration: none;

2593 }

2594

2595 a.next {

2596 display: block;

2597 position: fixed;

2598 right: 10px;

2599 bottom: 10px;

2600 width: 40px;

2601 height: 40px;

2602 border-radius: 5px;

2603 text-indent: -9999px;

2604 overflow: hidden;

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

2606 background-color: #000;

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

2608 }

2609

2610 .content-inner {

2611 position: relative;

2612 color: #333;

2613 min-width: 320px;

2614 max-width: 640px;

2615

2616 .section {

2617 margin-bottom: 30px;

2618 }

2619

2620 .section:last-child {

2621 margin-bottom: 0;

2622 }

2623 }

2624

2625 .text {

2626 background: white;

2627 padding: 40px;

2628 }

2629

2630 .attr {

2631 position: relative;

2632 padding: 170px 40px 20px;

2633 background: #333;

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

2635 margin-bottom: 0;

2636 margin-top: -20px;

2637

2638 h1 {

2639 display: block;

2640 color: white;

2641 font-weight: 300;

2642 font-size: 34px;

2643 span {

2644 color: #76c551;

2645 }

2646 }

2647

2648 .user-image {

2649 position: absolute;

2650 top: 0px;

2651 right: 240px;

2652 left: 0px;

2653 height: 150px;

2654 background-position: 0 50%;

2655 background-repeat: no-repeat;

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

2657 background-size: cover;

2658 background-color: #76c551;

2659 }

2660

2661 .byosm {

2662 position: absolute;

2663 top: 0px;

2664 right: 0px;

2665 z-index: 1;

2666 width: 240px;

2667 height: 150px;

2668 padding: 20px 20px 20px 40px;

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

2670 white-space: nowrap;

2671 color: #fff;

2672 background: #76c551;

2673 }

2674

2675 .byosm span {

2676 display: inline-block;

2677 width: 20px;

2678 margin-left: -20px;

2679 }

2680 }

2681

2682 h2 {

2683 margin-bottom: 10px;

2684 }

2685

2686 .icon {

2687 width: 30px;

2688 height: 30px;

2689 margin-right: 10px;

2690 vertical-align: middle;

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

2692

2693 &.local { background-position: 0px 0px; }

2694 &.community { background-position: 0px -40px; }

2695 &.open { background-position: 0px -80px; }

2696 &.partners { background-position: 0px -120px; }

2697 &.infringement { background-position: 0px -160px; }

2698 &.legal { background-position: -45px -160px; }

2699 }

2700 }

2701

2702 @import 'browse';

2703

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

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

2706 display: none;

2707 }

2708 }