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 text-indent:-9999px;

160 overflow:hidden;

161 }

162

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

180

181 /* Rules for links */

182

183 a {

184 color: #24d;

185 text-decoration: none;

186 -webkit-appearance: none;

187 outline: 0;

188 &:hover {

189 text-decoration: underline;

190 }

191 }

192

193 /* Rules for horizontal lines */

194

195 hr {

196 border: none;

197 background-color: #ccc;

198 color: #ccc;

199 height: 1px;

200 }

201

202 /* General styles for tables */

203

204 table {

205 width: 100%;

206 margin-bottom: $lineheight;

207 th, td {

208 text-align: left;

209 padding: $lineheight/4;

210 line-height: $lineheight;

211 }

212 th {

213 font-weight: 600;

214 vertical-align: top;

215 }

216 td {

217 vertical-align: middle;

218 }

219 }

220

221 /* Utility for de-emphasizing content */

222

223 .deemphasize {

224 color: #999;

225 a {

226 color: $blue;

227 }

228 }

229

230 /* Rules for the header */

231

232 #menu-icon {

233 display: none !important;

234 float: right;

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

236 background-size: 30px 30px;

237 display: block;

238 width: 30px;

239 height: 30px;

240 margin: 14px 10px 0 0;

241 opacity: 0.6;

242 }

243

244 header {

245 height: $headerHeight;

246 position: relative;

247 z-index: 1001;

248 font-size: 14px;

249

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

251 display: inline-block;

252 }

253

254 > * {

255 height: 100%;

256 padding: $lineheight/2;

257 }

258

259 h1, nav.primary {

260 float: left;

261 }

262

263 a, a:hover {

264 text-decoration: none;

265 }

266

267 img.logo {

268 width: 30px;

269 height: 30px;

270 margin-top: -2px;

271 vertical-align: middle;

272 }

273

274 h1 {

275 margin: 0;

276 padding-top: 15px;

277

278 a {

279 color: #000;

280 }

281 }

282 }

283

284 nav.primary {

285 > ul {

286 $border: 1px solid $green;

287

288 border: $border;

289 border-radius: $border-radius;

290

291 > li {

292 border-right: $border;

293 float: left;

294 &:last-child {

295 border-right: 0;

296 }

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

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

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

300 &.dropdown {

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

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

303 }

304 }

305 }

306

307 a.tab,

308 .dropdown-toggle {

309 display: inline-block;

310 font-weight: 500;

311 color: $green;

312 padding: 5px 15px;

313 }

314

315 .dropdown-toggle {

316 padding: 5px 6px;

317 }

318

319 .caret {

320 border-top-color: $green;

321 margin-top: 10px;

322 }

323

324 .disabled a {

325 color: #ccc;

326 cursor: default;

327

328 .caret {

329 border-top-color: #ccc;

330 }

331 }

332

333 > ul li.current {

334 background-color: $green;

335

336 .tab {

337 color: #fff;

338 }

339

340 .caret {

341 border-top-color: #fff;

342 }

343 }

344 }

345

346 nav.secondary {

347 position: absolute;

348 right: 0;

349

350 > ul {

351 vertical-align: middle;

352 a, .dropdown-toggle {

353 display: inline-block;

354 text-decoration: none;

355 color: $darkgrey;

356 padding: 5px;

357

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

359 }

360 }

361

362 > ul li.current a {

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

364 }

365

366 .user-menu {

367 $border: 1px solid $grey;

368 border: $border;

369 border-radius: $border-radius;

370 margin-left: 10px;

371

372 > li {

373 border-right: $border;

374 float: left;

375 &:last-child {

376 border-right: 0;

377

378 > a {

379 border-radius: 0 $border-radius $border-radius 0;

380 }

381 }

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

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

384 }

385

386 a {

387 padding: 5px 15px;

388

389 }

390

391 &.logged-in > a {

392 padding: 0;

393 > .user-button {

394 line-height: 1.8;

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

396 display: inline-block;

397 color: $darkgrey;

398 }

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

400 }

401 }

402

403 .caret {

404 border-top-color: $grey;

405 margin-top: 9px;

406 }

407

408 img.user_thumbnail_tiny {

409 border: 0;

410 vertical-align: top;

411 margin-top: 0px;

412 margin: 4px 0 0 4px;

413 border-radius: 2px;

414 }

415

416 #inboxanchor {

417 display: inline-block;

418 vertical-align: top;

419 height: 25px;

420 margin: 3px 0 3px 3px;

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

422 line-height: 20px;

423 border-radius: 2;

424 }

425

426 .dropdown-menu {

427 left: auto;

428 right: -1px;

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

430

431 .count-number {

432 float: right;

433 padding: 0 5px;

434 margin: 0;

435 }

436 }

437 }

438

439 #compact-secondary-nav {

440 display: none;

441 ul li a {

442 width: 100%;

443 color: #333;

444 &:hover { color: #fff; }

445 }

446 }

447

448 body.compact {

449 #compact-secondary-nav {

450 display: inline-block;

451 }

452 .compact-hide {

453 display: none;

454 }

455 }

456

457 /* Utility for styling notification numbers */

458

459 .count-number {

460 padding: 2px $lineheight/4;

461 border-radius: 2px;

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

463 margin: 0 2px;

464 font-size: 11px;

465 color: #333;

466 }

467

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

469

470 #noscript {

471 z-index: 20000000;

472 margin-left: 400px;

473 margin-top: 50px;

474 }

475

476 /* Rules for Leaflet maps */

477

478 .leaflet-control .control-button {

479 display: block;

480 height: 40px;

481 width: 40px;

482 background-color: #333;

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

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

485 margin-bottom: 10px;

486 outline: none;

487

488 &:hover {

489 background-color: black;

490 }

491

492 &.disabled {

493 background-color: #333;

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

495 cursor: default;

496 }

497

498 &.active {

499 background-color: #9ed485;

500 }

501

502 .icon {

503 margin: 10px;

504 }

505 }

506

507 .leaflet-control .zoomin,

508 .control-layers .control-button {

509 margin-bottom: 0px;

510 border-radius: 4px 0 0 0;

511 }

512

513 .leaflet-control .zoomout,

514 .control-key .control-button {

515 margin-bottom: 0;

516 border-radius: 0;

517 }

518

519 .control-locate .control-button,

520 .control-share .control-button {

521 border-radius: 0 0 0 4px;

522 }

523

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

525

526 .map-layout {

527 #content {

528 overflow: hidden;

529 position: absolute;

530 top: $headerHeight;

531 bottom: 0;

532 width: 100%;

533 }

534

535 #sidebar, #map {

536 position: relative;

537 height: 100%;

538 overflow-x: hidden;

539 overflow-y: auto;

540 }

541

542 #sidebar {

543 float: left;

544 width: $sidebarWidth;

545 background: #fff;

546 font-size: 12px;

547

548 h2 {

549 padding: $lineheight $lineheight $lineheight/2;

550 }

551

552 h3, h4 {

553 margin-top: $lineheight;

554 margin-bottom: $lineheight/2;

555 font-size: 13px;

556 }

557

558 .icon.close {

559 float: right;

560 cursor: pointer;

561 }

562

563 p.error {

564 background-color: #ff7070;

565 padding: 10px;

566 font-weight: bold;

567 }

568 }

569

570 .welcome {

571 display: none;

572 }

573

574 .overlay-sidebar #sidebar {

575 position: absolute;

576 z-index: 1000;

577 height: auto;

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

579 overflow: hidden;

580 .welcome {

581 display: block;

582 }

583 #sidebar_content {

584 display: none;

585 }

586 }

587

588 .welcome {

589 p {

590 padding: $lineheight/2 $lineheight $lineheight;

591 font-size: 110%;

592 font-weight: 300;

593 }

594

595 .button {

596 width: 50%;

597 float: left;

598 margin: 0;

599 border-radius: 0;

600 font-weight: normal;

601 padding: .6em;

602

603 &.learn-more {

604 border-right: 1px solid #fff;

605 }

606 }

607 }

608

609 #map {

610 height: 100%;

611 overflow: hidden;

612

613 &.query-active {

614 cursor: help;

615 }

616

617 &.query-disabled {

618 cursor: not-allowed;

619 }

620

621 .leaflet-marker-draggable {

622 cursor: move;

623 }

624 }

625

626 #map-ui {

627 display: none;

628 position: relative;

629 float: right;

630 width: 250px;

631 height: 100%;

632 background: white;

633 overflow: auto;

634

635 .section {

636 border-bottom: 1px solid #DDD;

637 padding: 10px 20px;

638 }

639

640 a.close-button {

641 float: right;

642 padding:5px;

643 font-size:20px;

644 line-height:10px;

645 color:#222;

646 border:1px solid #ddd;

647 }

648

649 .tooltip {

650 opacity: 1;

651 border: 1px solid #ccc;

652 .tooltip-arrow {

653 border-top-color: #ccc;

654 }

655 }

656 }

657 }

658

659 .layers-ui,

660 .share-ui {

661 li:last-child {

662 margin-bottom: 0;

663 }

664 }

665

666 .layers-ui {

667 .base-layers {

668 .leaflet-container {

669 width: 100%;

670 height: 50px;

671 cursor: pointer;

672 }

673

674 li {

675 overflow: hidden;

676 border-radius: 3px;

677 border: 2px solid #fff;

678 margin-bottom: 8px;

679 position: relative;

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

681

682 label {

683 position: absolute;

684 top: 0;

685 left: 0;

686 padding: 2px 6px;

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

688 cursor: pointer;

689 font-weight: 600;

690 font-size: 16px;

691 text-stroke: 2px #fff;

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

693 z-index: 2; // For IE9

694 input[type="radio"] {

695 display: none;

696 }

697 }

698

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

700 &:hover {

701 border-color: $grey;

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

703 }

704 }

705 }

706

707 .overlay-layers {

708 p {

709 font-size: 13px;

710 margin-bottom: 8px;

711 }

712 li.disabled { color: #999; }

713 }

714 }

715

716 .share-ui {

717 .share-tabs {

718 margin-bottom: 10px;

719

720 a {

721 color: #fff;

722 text-decoration: none;

723 background-color: $lightblue;

724 padding: 5px 10px;

725 border-right: 1px solid #fff;

726 }

727

728 a:first-child {

729 border-right: 1px solid #fff;

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

731 }

732

733 a:last-child {

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

735 }

736

737 a.active {

738 background-color: $blue;

739 }

740 }

741

742 .share-tab {

743 display: none;

744 }

745

746 .share-link {

747 input[type=text],

748 textarea {

749 width: 100%;

750 font-family: monospace;

751 font-size: small;

752 line-height: 1.3;

753 }

754 }

755

756 .share-image {

757 label {

758 margin-right: 10px;

759 }

760 }

761

762 #embed_html {

763 resize: vertical;

764 }

765

766 #mapnik_scale {

767 width: 100px;

768 }

769 }

770

771 .leaflet-top {

772 top: $lineheight/2 !important;

773 .leaflet-control {

774 margin-right: 0px !important;

775 margin-top: 0px !important;

776 }

777 }

778

779 .leaflet-popup-scrolled {

780 padding-right: $lineheight;

781 border-bottom: 0px !important;

782 border-top: 0px !important;

783 }

784

785 .leaflet-popup-content-wrapper {

786 border-radius: 4px !important;

787 }

788

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

790

791 #attribution {

792 display: none;

793

794 table {

795 width: 100%

796 }

797 }

798

799 .attribution_license,

800 .attribution_project {

801 text-align: left;

802 }

803

804 .attribution_notice {

805 text-align: center;

806 }

807

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

809

810 /* Rules for the sidebar */

811

812 .sidebar_heading {

813 position: relative;

814 padding: $lineheight/2 $lineheight;

815 // background: $offwhite;

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

817 > .close {

818 float: right;

819 margin-top: 2px;

820 cursor: pointer;

821 }

822 }

823

824 #browse_status {

825 p {

826 padding: $lineheight;

827 }

828

829 input {

830 display: block;

831 margin-left: auto;

832 margin-right: auto;

833 }

834 }

835

836 #sidebar {

837 #sidebar_loader,

838 .loader,

839 .load_more {

840 text-align: center;

841 margin: $lineheight auto;

842 width: 40px;

843 display: block;

844 }

845 }

846

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

848

849 header .search_forms,

850 .directions_form {

851 display: none;

852 }

853

854 .search_form,

855 .directions_form {

856 position: relative;

857 padding: $lineheight/2;

858 background-color: $lightgrey;

859

860 .query_wrapper {

861 position: relative;

862 overflow: hidden;

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

864 }

865

866 input[type=text] {

867 width: 100%;

868 height: 30px;

869 transition: 300ms linear;

870 }

871

872 input[type=text].overflow {

873 border-right: none;

874 }

875

876 input:focus {

877 outline: none;

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

879 }

880

881 input[type=submit].float {

882 float: right;

883 width: auto;

884 min-width: 0;

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

886 }

887

888 select {

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

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

891 padding: 0.3em 0;

892 }

893

894 .query_options {

895 text-align: right;

896 font-size: 10px;

897 color: $blue;

898 }

899

900 .describe_location {

901 position: absolute;

902 top: 6px;

903 right: 6px;

904 font-size: 10px;

905 color: $blue;

906 }

907

908 .switch_link {

909 float: right;

910 width: auto;

911 min-width: 0;

912 margin-left: 6px;

913 }

914

915 img.button {

916 display: block;

917 }

918

919 span.force_width {

920 width: 100%;

921 padding-right: 25px;

922 display: block;

923 }

924

925 select.routing_engines {

926 min-height: 30px;

927 margin: 0px 0px 5px 25px;

928 }

929

930 input.routing_go {

931 min-width: 100px;

932 float: right;

933 }

934

935 div.header {

936 width: 100%;

937 height: 30px;

938 }

939

940 div.line {

941 width: 100%;

942 margin: 0px 0px 5px 0px;

943 }

944

945 div.loader_copy {

946 display: none;

947

948 img {

949 vertical-align: middle;

950 }

951 }

952 }

953

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

955

956 #mapkey {

957 .mapkey-table-key img {

958 display: block;

959 margin-left: auto;

960 margin-right: auto;

961 }

962 td {

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

964 }

965 }

966

967 /* Rules for search sidebar */

968

969 .search_results_entry {

970 ul li {

971 border-bottom: $keyline;

972 cursor: pointer;

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

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

975 }

976

977 .search_details {

978 display: block;

979 float: right;

980 text-align: right;

981 margin-top: 0.2em;

982 margin-left: 0.5em;

983 }

984 }

985

986 .search_results_error {

987 color: #f00;

988 padding: 10px 20px;

989 }

990

991 /* Rules for routing */

992

993 #sidebar_content>table {

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

995 width: 100%;

996 border-collapse: separate;

997 }

998

999 div.direction {

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

1001 width: 20px;

1002 height: 20px;

1003 background-repeat: no-repeat;

1004 }

1005 @for $i from 1 through 17 {

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

1007 }

1008

1009 p#routing_summary {

1010 padding: 0 $lineheight $lineheight/4;

1011 }

1012

1013 td.instruction, td.distance {

1014 padding-top: $lineheight/5;

1015 padding-bottom: $lineheight/5;

1016 border-bottom: 1px solid #DDD;

1017 }

1018 td.distance {

1019 color: #BBB;

1020 text-align: right;

1021 font-size: x-small;

1022 }

1023 tr.turn {

1024 cursor: pointer;

1025 }

1026 tr.turn:hover {

1027 background: $list-highlight;

1028 }

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

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

1031

1032 /* Rules for entity history */

1033

1034 #sidebar_content {

1035 .browse_details {

1036 position: relative;

1037 border-bottom: $keyline;

1038 }

1039 }

1040

1041 .browse_status {

1042 display: none;

1043 }

1044

1045 /* Rules for the history sidebar */

1046

1047 #sidebar .changesets {

1048 li {

1049 padding: 15px 20px;

1050 border-bottom: 1px solid #ddd;

1051 cursor: pointer;

1052

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

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

1055 }

1056

1057 h4 {

1058 margin: 0;

1059 a {

1060 color: #000;

1061 }

1062 }

1063

1064 .comments {

1065 float: right;

1066 color: #999;

1067 }

1068

1069 .comments-0 {

1070 opacity: 0.5;

1071 }

1072 }

1073

1074 /* Rules for the browse sidebar */

1075

1076 #sidebar_content {

1077 .browse-section {

1078 padding: $lineheight/2 $lineheight;

1079 border-bottom: 1px solid #ddd;

1080

1081 h4:first-child {

1082 margin-top: 0;

1083 word-wrap: break-word;

1084 }

1085 }

1086

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

1088 border-bottom: none;

1089 }

1090

1091 .paginate {

1092 float: right;

1093 padding: 1px 6px;

1094 border: 1px solid #eee;

1095 border-radius: 3px;

1096 }

1097

1098 .paginate ul {

1099 padding-left: 20px;

1100 }

1101

1102 .browse-field {

1103 margin-bottom: 10px;

1104

1105 h4 {

1106 padding: 5px 0 5px 10px;

1107 font-size: 12px;

1108 border: 1px solid #CCC;

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

1110 background-color: #F6F6F6;

1111 }

1112

1113 p {

1114 padding: 7px 10px;

1115 font-size: 12px;

1116 background-color: #FFF;

1117 border: 1px solid #CCC;

1118 border-top: 0;

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

1120 }

1121 }

1122

1123 .browse-tag-list {

1124 background-color: #F6F6F6;

1125 border: 1px solid #ddd;

1126 border-radius: 3px;

1127 font-size: 12px;

1128 table-layout: fixed;

1129 border-collapse: separate;

1130

1131 th, td {

1132 border-bottom: 1px solid #ddd;

1133 }

1134

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

1136 border-bottom: 0;

1137 }

1138

1139 .browse-tag-k,

1140 .browse-tag-v {

1141 width: 50%;

1142 padding: 6px 10px;

1143 word-wrap: break-word;

1144 }

1145

1146 .browse-tag-k {

1147 font-weight: 500;

1148 background-color: #F6F6F6;

1149 }

1150

1151 .browse-tag-v {

1152 border-left: 1px solid #ddd;

1153 background-color: #fff;

1154 }

1155 }

1156

1157 .warning {

1158 margin: $lineheight/2 0;

1159 padding: $lineheight/2;

1160 font-size: 90%;

1161 }

1162

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

1164 margin: $lineheight/2 0;

1165

1166 p {

1167 margin-left: 10px;

1168 }

1169 }

1170

1171 .comments-header {

1172 float: left;

1173 }

1174

1175 .subscribe-buttons {

1176 float: left;

1177 margin: 18px 10px 10px;

1178 min-width: 80px;

1179 }

1180

1181 .subscribe-buttons input {

1182 font-size: 90%;

1183 line-height: 15px;

1184 min-height: 20px;

1185 }

1186

1187 span.action-button:hover {

1188 cursor: pointer;

1189 text-decoration: underline;

1190 }

1191

1192 .note-description {

1193 overflow: hidden;

1194 margin: 0 0 10px 10px;

1195 }

1196

1197 .query-intro p {

1198 padding: $lineheight $lineheight $lineheight/2;

1199 }

1200

1201 .query-results {

1202 display: none;

1203

1204 h3 {

1205 padding: $lineheight $lineheight $lineheight/2;

1206 margin: 0;

1207 }

1208

1209 ul {

1210 li {

1211 padding: 15px 20px;

1212 border-bottom: 1px solid #ddd;

1213

1214 &.query-result {

1215 cursor: pointer;

1216 }

1217

1218 &.selected {

1219 background: $list-highlight;

1220 }

1221 }

1222 }

1223 }

1224 }

1225

1226 /* Rules for export sidebar */

1227

1228 .export_form {

1229 padding: $lineheight;

1230

1231 .export_area_inputs,

1232 .export_button {

1233 text-align: center;

1234 }

1235

1236 .export_area_inputs {

1237 margin-bottom: $lineheight/2;

1238 input[type="text"] {

1239 width: 80px;

1240 text-align: center;

1241 margin-bottom: 5px;

1242 }

1243 }

1244

1245 .export_boxy {

1246 background: #eee;

1247 border: 1px solid #ccc;

1248 border-radius: 3px;

1249

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

1251 #minlon {

1252 float: left;

1253 margin-left: -1px;

1254 }

1255 #maxlon {

1256 float: right;

1257 margin-right: -1px;

1258 }

1259 #minlat { margin-bottom: 0; }

1260 }

1261

1262 .export_bound {

1263 margin: $lineheight/4;

1264 }

1265

1266 .export_button {

1267 margin-top: $lineheight;

1268 margin-bottom: $lineheight;

1269 }

1270

1271 dl {

1272 padding-left: $lineheight/2;

1273 dd {

1274 margin-left: 0;

1275 margin-bottom: 10px;

1276 }

1277 }

1278 }

1279

1280 /* Rules for the routing sidebar */

1281

1282 #sidebar_content {

1283 #routing_credit {

1284 text-align: center;

1285 padding: 0.5em;

1286 }

1287 }

1288

1289 /* Rules for edit pages */

1290

1291 .site-edit {

1292 #content {

1293 position: absolute;

1294 top: $headerHeight;

1295 bottom: 0;

1296 width: 100%;

1297 }

1298

1299 #map {

1300 height: 100%;

1301 overflow: hidden;

1302 }

1303 }

1304

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

1306

1307 .content-heading {

1308 background: $lightgrey;

1309

1310 h1 { font-size: 22px; }

1311 }

1312

1313 .content-body {

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

1315 margin-bottom: $lineheight;

1316 }

1317

1318 h1, h2, h3 {

1319 margin-top: $lineheight/2;

1320 }

1321 }

1322

1323 .content-inner {

1324 position: relative;

1325 max-width: 900px;

1326 margin: auto;

1327 padding: $lineheight;

1328 }

1329

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

1331

1332 .user-new,

1333 .user-create,

1334 .user-terms {

1335 .content-body .content-inner {

1336 padding: 0;

1337 }

1338 }

1339

1340 .user-new,

1341 .user-create,

1342 .user-terms,

1343 .user-confirm {

1344 .content-heading .content-inner {

1345 height: 200px;

1346 }

1347 }

1348

1349 .header-illustration {

1350 background-position: 0 0;

1351 background-repeat: no-repeat;

1352 position: absolute;

1353 height: 200px;

1354 width: 100%;

1355 left: 0;

1356 bottom: 0;

1357

1358 &.new-user-main {

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

1360 }

1361

1362 &.confirm-main {

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

1364 }

1365

1366 &.new-user-terms {

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

1368 }

1369

1370 &.new-user-arm {

1371 height: 110px;

1372 width: 130px;

1373 left: 260px;

1374 top: 160px;

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

1376 z-index: 100;

1377 }

1378 }

1379

1380 #content.maximised {

1381 top: 0;

1382 left: 0;

1383 right: 0;

1384 bottom: 0;

1385 border: 0;

1386 z-index: 2000;

1387 }

1388

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

1390

1391 .content_map {

1392 position: relative;

1393 width: 45%;

1394 height: 400px;

1395 border: 1px solid #ccc;

1396 margin-bottom: $lineheight;

1397 float: right;

1398 }

1399

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

1401

1402 #trace_list {

1403 font-size: $lineheight/2;

1404 border-width: 0px;

1405 text-align: right;

1406

1407 .trace_summary {

1408 font-size: 12px;

1409 color: gray;

1410 }

1411

1412 .trace_pending {

1413 color: red;

1414 }

1415

1416 .trace_public {

1417 color: green;

1418 }

1419

1420 .trace_identifiable {

1421 color: green;

1422 }

1423

1424 .trace_trackable {

1425 color: red;

1426 }

1427

1428 .trace_private {

1429 color: red;

1430 }

1431 }

1432

1433 /* Rules for the new trace form */

1434

1435 #new_trace {

1436 input[type=text] {

1437 width: 50%;

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

1439 max-width: 500px;

1440 }

1441 }

1442

1443 /* Rules for the edit trace form */

1444

1445 .edit_trace {

1446 .form-row p {

1447 margin-bottom: 0px;

1448 }

1449

1450 input[type=text] {

1451 width: 50%;

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

1453 max-width: 500px;

1454 }

1455 }

1456

1457 /* Rules for the user profile page */

1458

1459 #userinformation {

1460

1461 min-height: 100px;

1462 .userinformation-inner {

1463 float: left;

1464 }

1465 h2 {

1466 margin-top: 0;

1467 }

1468 .user-description {

1469 width: 100%;

1470 clear: both;

1471 }

1472 .deemphasize {

1473 margin: 0;

1474 }

1475 }

1476

1477 .admin-user-info small {

1478 margin-bottom: $lineheight/2;

1479 display: inline;

1480 margin-right: $lineheight;

1481 }

1482

1483 .activity-block {

1484 clear: left;

1485 border-bottom: 1px solid #ccc;

1486 padding-bottom: $lineheight;

1487 float: left;

1488 h3 {

1489 margin-bottom: $lineheight/2;

1490 }

1491 }

1492

1493 .contact-activity {

1494 margin-top: $lineheight;

1495 width: 100%;

1496 }

1497

1498 .activity-details p {

1499 margin-left: 70px;

1500 margin-bottom: 0;

1501 }

1502

1503 #friends-container .contact-activity ul {

1504 margin-left: 70px;

1505 }

1506

1507 .user-view {

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

1509 .content-inner {

1510 max-width: none;

1511 }

1512 p#no_home_location {

1513 margin: $lineheight;

1514 }

1515 .user_thumbnail {

1516 margin-top: $lineheight/4;

1517 float: left;

1518 }

1519 }

1520

1521 /* Rules for the user map */

1522

1523 .content_map .leaflet-popup-content {

1524 margin: $lineheight/2;

1525 min-height: 50px;

1526 }

1527

1528 /* Rules for user popups on maps */

1529

1530 .user_popup {

1531 min-width: 200px;

1532 p {

1533 padding: 0 0 5px 0;

1534 margin-top: 0 0 0 60px;

1535 font-size: 12px;

1536 }

1537 img.user_thumbnail {

1538 float: left;

1539 margin: 0 $lineheight/2 0 0;

1540 }

1541 }

1542

1543 /* Rules for the user list */

1544

1545 #user_list {

1546 font-size: $lineheight/2;

1547 width: 100%;

1548

1549 tr {

1550 vertical-align: middle;

1551 }

1552

1553 p {

1554 margin-top: 0px;

1555 margin-bottom: 0px;

1556 }

1557 }

1558

1559 #user_list_actions {

1560 float: right;

1561 margin-top: $lineheight/2;

1562 }

1563

1564 /* Rules for the diary list page */

1565

1566 .diary_post {

1567 position: relative;

1568 margin-top: $lineheight/2;

1569 padding-top: $lineheight;

1570 border-top: 1px solid #ccc;

1571

1572 .post_heading {

1573 margin-bottom: $lineheight;

1574

1575 h2 {

1576 margin-top: 0;

1577 margin-bottom: $lineheight/2;

1578 font-size: 24px;

1579 }

1580 }

1581

1582 img.user_thumbnail {

1583 float: left;

1584 }

1585

1586 small.deemphasize {

1587 float: left;

1588 display: block;

1589 }

1590

1591 ul.secondary-actions {

1592 display: inline-block;

1593 }

1594 }

1595

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

1597 display: inline;

1598 }

1599

1600 /* Rules for the diary entry page */

1601

1602 .diary_entry {

1603 #map {

1604 position: relative;

1605 width: 90%;

1606 height: 400px;

1607 border: 1px solid #ccc;

1608 display: none;

1609 margin-bottom: $lineheight;

1610 }

1611 #newcomment {

1612 border-top: 1px solid #ccc;

1613 padding-top: $lineheight;

1614 margin-top: $lineheight/2;

1615 }

1616 .comments {

1617 max-width: 740px;

1618 }

1619 .diary-comment {

1620 margin-top: $lineheight/2;

1621 border-top: 1px dashed #ccc;

1622 padding-top: $lineheight/2;

1623 &:first-child {

1624 margin-top: $lineheight;

1625 padding-top: $lineheight;

1626 border-top: 1px solid #ccc;

1627 }

1628 p {

1629 margin-bottom: $lineheight/2;

1630 }

1631 .comment-heading {

1632 margin-bottom: 0;

1633 margin-top: 0;

1634 }

1635 }

1636 }

1637

1638 .diary_entry-view img.user_thumbnail {

1639 float: left;

1640 }

1641

1642 /* Rules for the log in page */

1643

1644 #login_auth_buttons {

1645 margin-bottom: 0;

1646 }

1647

1648 #login_auth_buttons li {

1649 float: left;

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

1651 }

1652

1653 /* Rules for the account confirmation page */

1654

1655 .user-terms {

1656 .legale {

1657 border: 1px solid #ccc;

1658 padding: $lineheight;

1659 margin-bottom: $lineheight;

1660 overflow: auto;

1661 height: 20em;

1662 }

1663

1664 #decline {

1665 background: $lightblue;

1666 &:hover {

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

1668 }

1669 }

1670 }

1671

1672 /* Rules for the account settings page */

1673

1674 #accountForm .user_map {

1675 position: relative;

1676 width: 500px;

1677 height: 400px;

1678 border: 1px solid #ccc;

1679 }

1680

1681 #accountForm .user_image {

1682 margin-bottom: 0;

1683 }

1684

1685 #accountForm #user_image {

1686 margin-left: 20px;

1687 }

1688

1689 #accountForm ul.accountImage-options {

1690 margin-left: 120px;

1691 }

1692

1693 .nohome .location {

1694 display: none;

1695 }

1696

1697 #homerow .message {

1698 display: none;

1699 }

1700

1701 .nohome .message {

1702 display: inline !important;

1703 }

1704

1705 .content_map.settings_map {

1706 width: 50%;

1707 float: none;

1708 }

1709

1710 /* Rules for the oauth settings page */

1711

1712 .oauth_clients .buttons .oauth-edit {

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

1714 }

1715

1716 .oauth_clients .buttons .oauth-delete {

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

1718 }

1719

1720 /* Rules for messages pages */

1721

1722 .messages {

1723 width: 100%;

1724 border: 1px solid #ddd;

1725

1726 input[type="submit"] {

1727 margin: auto;

1728 }

1729 tbody tr {

1730 border-top: 1px solid #ccc;

1731 }

1732

1733 .inbox-row {

1734 background: #f8f8ff;

1735 }

1736

1737 .inbox-row-unread {

1738 background:#CBEEA7;

1739 }

1740

1741 .right {

1742 float: right;

1743 }

1744

1745 tr td,

1746 tr th {

1747 padding: $lineheight/4;

1748 }

1749 p:last-child,

1750 h2:last-child,

1751 h3:last-child,

1752 ol:last-child,

1753 ul:last-child {

1754 margin-bottom:0;

1755 }

1756 tr td {

1757 height: 30px;

1758 border-right: 1px solid $lightgrey;

1759 }

1760 }

1761

1762 .inbox-row .inbox-mark-read {

1763 display: none;

1764 }

1765

1766 .info-line {

1767 margin-bottom: $lineheight;

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

1769 border-bottom: 1px solid #ccc;

1770

1771 form, form div {

1772 display: inline;

1773 }

1774 }

1775

1776 .info-line .user_thumbnail_tiny {

1777 vertical-align: middle;

1778 }

1779

1780 .inbox-sent {

1781 white-space: nowrap;

1782 }

1783

1784 .inbox-mark-unread,

1785 .inbox-mark-read,

1786 .inbox-delete {

1787 width: 1%;

1788 }

1789

1790 .inbox-row-unread .inbox-mark-unread {

1791 display: none;

1792 }

1793

1794 .message-read .message-buttons {

1795 margin-top: $lineheight;

1796 margin-bottom: $lineheight * 1.5;

1797 padding-top: $lineheight;

1798 border-top: 1px solid $lightgrey;

1799 }

1800

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

1802 border-radius: 0;

1803 }

1804

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

1806

1807 .flash {

1808 padding: $lineheight;

1809

1810 &.error {

1811 background-color: #ff7070;

1812 }

1813

1814 &.warning {

1815 background-color: #ffe0cc;

1816 }

1817

1818 &.notice {

1819 background-color: #CBEEA7;

1820 }

1821

1822 div.message {

1823 display: inline-block;

1824 margin-left: $lineheight / 2;

1825 vertical-align: middle;

1826 }

1827 }

1828

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

1830

1831 .formError {

1832 display: inline-block;

1833 padding: 5px 10px;

1834 margin-top: 5px;

1835 border-radius: 4px;

1836 font-size: 12px;

1837 color: #fff;

1838 background-color: #ff7070;

1839 }

1840

1841 /* Rules for rails validation error boxes */

1842

1843 #errorExplanation {

1844 width: 400px;

1845 border: 2px solid #ff7070;

1846 padding: 0 $lineheight/2;

1847 margin-bottom: $lineheight;

1848 background-color: #f0f0f0;

1849

1850 h2 {

1851 margin: 0 -10px 10px -10px;

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

1853 font-weight: bold;

1854 font-size: 12px;

1855 background-color: #c00;

1856 color: #fff;

1857 text-align: left;

1858 }

1859

1860 p {

1861 color: #333;

1862 margin-bottom: 0px;

1863 padding: $lineheight/4;

1864 }

1865

1866 ul {

1867 padding-left: $lineheight;

1868

1869 li {

1870 font-size: 12px;

1871 list-style: disc;

1872 }

1873 }

1874 }

1875

1876 /* Rules for forms */

1877

1878 .standard-form {

1879 fieldset {

1880 margin-bottom: $lineheight;

1881 }

1882 label.standard-label {

1883 display: block;

1884 margin-bottom: $lineheight/4;

1885 font-size: $typeheight;

1886 font-weight: bold;

1887 line-height: 1.5;

1888 }

1889 label.standard-label.secondary {

1890 display: inline-block;

1891 font-weight: normal;

1892 }

1893 .form-help {

1894 font-weight: normal;

1895 }

1896 .form-column {

1897 float: left;

1898 margin-right: 20px;

1899 }

1900 .form-divider {

1901 margin-top: $lineheight;

1902 padding-top: $lineheight;

1903 border-top: 1px solid $lightgrey;

1904 }

1905 .horizontal-list .form-row {

1906 float: left;

1907 padding-right: 10px;

1908 }

1909 .form-row {

1910 margin-bottom: $lineheight/2;

1911 }

1912 .form-list {

1913 margin-bottom: 0;

1914 }

1915 .form-list li {

1916 margin-bottom: 5px;

1917 }

1918 input[type="checkbox"],

1919 input[type="radio"] {

1920 float: left;

1921 margin-top: 5px;

1922 }

1923 }

1924

1925 #remember_me_openid {

1926 display: block;

1927 }

1928

1929 select {

1930 padding: 2px;

1931 }

1932

1933 input[type="checkbox"],

1934 input[type="radio"] {

1935 margin-right: 5px;

1936 }

1937

1938 input[type="text"],

1939 input[type="email"],

1940 input[type="url"],

1941 input[type="password"],

1942 textarea {

1943 color: #222;

1944 background-color: #fff;

1945 border: 1px solid #ccc;

1946 padding: 2px 5px;

1947 margin: 0;

1948 width: 200px;

1949

1950 &.field_with_errors {

1951 border: 2px solid #ff7070;

1952 }

1953 }

1954

1955 textarea {

1956 padding: 5px;

1957 width: 100%;

1958 }

1959

1960 /* Rules for user images */

1961

1962 img.user_image {

1963 max-width: 100px;

1964 max-height: 100px;

1965 border: 1px solid #ccc;

1966 margin-bottom: $lineheight;

1967 float: left;

1968 margin-right: $lineheight;

1969 }

1970

1971 img.user_thumbnail {

1972 max-width: 50px;

1973 max-height: 50px;

1974 border: 1px solid #ccc;

1975 margin-right: $lineheight;

1976 }

1977

1978 img.user_thumbnail_tiny {

1979 width: auto;

1980 height: auto;

1981 max-width: 25px;

1982 max-height: 25px;

1983 border: 1px solid #ccc;

1984 }

1985

1986 /* Rules for geo microformats */

1987

1988 abbr.geo {

1989 border-bottom: none;

1990 }

1991

1992 /* Rules for RSS buttons */

1993

1994 .rsssmall {

1995 position: relative;

1996 top: 3px;

1997 }

1998

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

2000

2001 ul.secondary-actions {

2002 font-style: normal;

2003 margin-bottom: 0;

2004 margin-left: 0;

2005 &.pager {

2006 display: inline-block;

2007 margin-right: 60px;

2008 }

2009 > li {

2010 display: block;

2011 float: left;

2012 list-style: none;

2013 border-left: 1px solid #ccc;

2014 padding-left: $lineheight/2;

2015 margin-right: $lineheight/2;

2016 &:first-child {

2017 border-left: 0;

2018 padding-left: 0;

2019 }

2020 &:last-child {

2021 margin-right: 0px;

2022 }

2023 }

2024 }

2025

2026 div.secondary-actions {

2027 padding: 10px;

2028 text-align: center;

2029 }

2030

2031 /* Utility for managing inner content areas */

2032

2033 .inner22 { padding: $lineheight;}

2034

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

2036

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

2038

2039 .inner20 { padding: $lineheight 0;}

2040

2041 .inner02 { padding: 0 $lineheight;}

2042

2043 /* Utility for general button styles */

2044

2045 input[type="button"],

2046 input[type="submit"],

2047 input[type="reset"],

2048 a.button {

2049 cursor: pointer;

2050 border: 0;

2051 display: inline-block;

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

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

2054 min-width: 120px;

2055 margin: 0 0 $lineheight/2 0;

2056 color: white;

2057 background: $blue;

2058 text-align: center;

2059 border-radius: 2px;

2060 &:hover {

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

2062 text-decoration: none;

2063 }

2064 &.deemphasize {

2065 background: $lightblue;

2066 &:hover {

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

2068 }

2069 }

2070 &:disabled {

2071 background: $lightgrey;

2072 &:hover {

2073 background: $lightgrey;

2074 }

2075 }

2076 &:last-child {

2077 margin-bottom: 0;

2078 }

2079 }

2080

2081 input[type="button"],

2082 input[type="submit"],

2083 input[type="reset"] {

2084 line-height: normal;

2085 }

2086

2087 a.button {

2088 line-height: 20px;

2089 }

2090

2091 .buttons {

2092 min-width: 200px;

2093 input[type="submit"],

2094 input[type="button"],

2095 input[type="reset"],

2096 .button,

2097 .button_to {

2098 box-sizing: border-box;

2099 float: left;

2100 border-radius: 0;

2101 margin:0;

2102 min-width: 75px;

2103 max-width: 180px;

2104 border-right:1px solid white;

2105 text-overflow: ellipsis;

2106 white-space: nowrap;

2107 overflow: hidden;

2108 }

2109 input:first-child,

2110 .button:first-child,

2111 .button_to:first-child {

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

2113 }

2114 input:last-child,

2115 .button:last-child,

2116 .button_to:last-child {

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

2118 border-right-width: 0;

2119 }

2120 input:only-child,

2121 .button:only-child,

2122 .button_to:only-child,

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

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

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

2126 border-radius:2px;

2127 border-right-width: 0;

2128 }

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

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

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

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

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

2134 border-right-width: 0;

2135 }

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

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

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

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

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

2141 border-right-width: 1px;

2142 }

2143 }

2144

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

2146

2147 .table0,

2148 .item0 {

2149 background: $offwhite;

2150 }

2151

2152 .table1,

2153 .item1 {

2154 background: #fff;

2155 }

2156

2157 /* Rules for OpenID logo */

2158

2159 .openid_logo {

2160 vertical-align: text-bottom;

2161 border: 0;

2162 }

2163

2164 /* Rules for rich text */

2165

2166 .richtext,

2167 .prose {

2168 h1, h2 {

2169 padding-bottom: $lineheight/2;

2170 border-bottom: 1px dashed #cccccc;

2171 margin-bottom: $lineheight/2;

2172 }

2173

2174 h1 {

2175 font-size: 24px;

2176 }

2177

2178 h2 {

2179 font-size: 18px;

2180 }

2181

2182 h3 {

2183 font-size: $typeheight;

2184 }

2185

2186 code {

2187 font-size: 13px;

2188 background: #e8e8e8;

2189 padding: 2px 3px;

2190 }

2191

2192 pre {

2193 font-size: 13px;

2194 background: #e8e8e8;

2195 padding: 2px 3px;

2196

2197 code {

2198 padding: 0;

2199 }

2200 }

2201

2202 img {

2203 padding: $lineheight;

2204 background-color: $offwhite;

2205 display: block;

2206 max-width: 100%;

2207 margin: auto;

2208 }

2209

2210 blockquote {

2211 border-left: $lineheight solid $offwhite;

2212 padding-left: $lineheight;

2213 margin: 0;

2214 color: #7E7E7E;

2215 }

2216

2217 ul, ol {

2218 padding-left: $lineheight;

2219 margin-bottom: $lineheight;

2220 margin-left: $lineheight;

2221 }

2222

2223 ul li {

2224 list-style: disc;

2225 }

2226

2227 ol li {

2228 list-style: decimal;

2229 }

2230 }

2231

2232 .diary_post .richtext {

2233 margin-top: $lineheight;

2234 }

2235

2236 .comments .richtext {

2237 margin-left: 70px;

2238 margin-top: 0;

2239 }

2240

2241 /* Rules for rich text editors */

2242

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

2244 width: 50%;

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

2246

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

2248 width: 100%;

2249 }

2250 }

2251

2252 .richtext_container {

2253 margin-bottom: $lineheight;

2254

2255 .richtext_content {

2256 width: 50%;

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

2258 display: inline-block;

2259 vertical-align: top;

2260

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

2262 width: 100%;

2263 }

2264

2265 .richtext_preview {

2266 display: inline-block;

2267 padding: $lineheight;

2268 background-color: $offwhite;

2269 overflow-x: auto;

2270

2271 &.loading {

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

2273 background-repeat: no-repeat;

2274 background-position: center;

2275 }

2276

2277 > :first-child {

2278 margin-top: 0px;

2279 }

2280 }

2281 }

2282

2283 .richtext_help {

2284 display: inline-block;

2285 vertical-align: top;

2286 margin-left: 15px;

2287 background-color: #f8f8ff;

2288 padding: $lineheight/2;

2289 width: 220px;

2290

2291 ul {

2292 margin-bottom: 0;

2293 }

2294

2295 h4.heading, li {

2296 border-bottom: 1px solid #ccc;

2297 margin-bottom: $lineheight/4;

2298 padding-bottom: $lineheight/4;

2299 }

2300

2301 li h4, li span, li p {

2302 display: inline-block;

2303 vertical-align: top;

2304 font-size: 11px;

2305 }

2306

2307 li h4 {

2308 width: 40%;

2309 margin: 0;

2310 }

2311

2312 li span, li p {

2313 width: 50%;

2314 margin-left: $lineheight/2;

2315 margin-bottom: $lineheight/4;

2316 white-space: nowrap;

2317 }

2318 }

2319 }

2320

2321 /* Rules for the user notes list */

2322

2323 .note_list {

2324 tr.creator {

2325 background-color: #eeeeee;

2326 }

2327

2328 td {

2329 padding: 3px;

2330 }

2331

2332 p {

2333 margin-bottom: 0px;

2334 }

2335 }

2336

2337 /* Rules for the iD editor */

2338

2339 .id-embed {

2340 width: 100%;

2341 height: 100%;

2342 }

2343

2344 /* Rules for dropdown menus */

2345

2346 .dropdown {

2347 position: relative;

2348 }

2349

2350 .dropdown-toggle {

2351 *margin-bottom: -3px;

2352 }

2353

2354 .dropdown-toggle:active,

2355 .open .dropdown-toggle {

2356 outline: 0;

2357 }

2358

2359 .caret {

2360 display: inline-block;

2361 width: 0;

2362 height: 0;

2363 vertical-align: top;

2364 border-top: 4px solid #000000;

2365 border-right: 4px solid transparent;

2366 border-left: 4px solid transparent;

2367 content: "";

2368 }

2369

2370 .dropdown .caret {

2371 margin-top: 8px;

2372 margin-left: 2px;

2373 }

2374

2375 .dropdown-menu {

2376 position: absolute;

2377 top: 100%;

2378 left: -1px;

2379 z-index: 1000;

2380 display: none;

2381 float: left;

2382 min-width: 160px;

2383 padding: 5px 0;

2384 margin: 0;

2385 list-style: none;

2386 background-color: #ffffff;

2387 border: 1px solid #ccc;

2388 border-radius: 0 3px 3px;

2389 *border-right-width: 2px;

2390 *border-bottom-width: 2px;

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

2392 background-clip: padding-box;

2393 }

2394

2395 .dropdown-menu.pull-right {

2396 right: 0;

2397 left: auto;

2398 }

2399

2400 .dropdown-menu .divider {

2401 *width: 100%;

2402 height: 1px;

2403 margin: 9px 1px;

2404 *margin: -5px 0 5px;

2405 overflow: hidden;

2406 background-color: #e5e5e5;

2407 border-bottom: 1px solid #ffffff;

2408 }

2409

2410 .dropdown-menu > li > a {

2411 display: block;

2412 padding: 3px 10px;

2413 clear: both;

2414 font-weight: normal;

2415 line-height: 20px;

2416 color: #333333;

2417 white-space: nowrap;

2418 }

2419

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

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

2422 .dropdown-submenu:hover > a,

2423 .dropdown-submenu:focus > a {

2424 color: #ffffff;

2425 text-decoration: none;

2426 background-color: $green;

2427 }

2428

2429 .dropdown-menu > .active > a,

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

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

2432 color: #ffffff;

2433 text-decoration: none;

2434 background-color: $green;

2435 outline: 0;

2436 }

2437

2438 .dropdown-menu > .disabled > a,

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

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

2441 color: #999999;

2442 }

2443

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

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

2446 text-decoration: none;

2447 cursor: default;

2448 background-color: transparent;

2449 background-image: none;

2450 }

2451

2452 .open {

2453 *z-index: 1000;

2454 }

2455

2456 .open > .dropdown-menu {

2457 display: block;

2458 }

2459

2460 .dropdown-backdrop {

2461 position: fixed;

2462 top: 0;

2463 right: 0;

2464 bottom: 0;

2465 left: 0;

2466 z-index: 990;

2467 }

2468

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

2470 .site-welcome, .site-fixthemap {

2471 .center {

2472 text-align: center;

2473 .sprite {

2474 float: none;

2475 margin: auto;

2476 }

2477 }

2478

2479 .sprite {

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

2481 background-size: 500px 250px;

2482 display: block;

2483 float: left;

2484 }

2485

2486 .icon-list {

2487 padding-bottom: 20px;

2488 div {

2489 margin-bottom: 10px;

2490 p {

2491 padding-top: 10px;

2492 }

2493 }

2494 }

2495 .sprite.small {

2496 width: 50px;

2497 height: 50px;

2498 }

2499

2500 .sprite.x {

2501 background-position: -50px 0;

2502 }

2503

2504 .sprite.term {

2505 margin-right: 10px;

2506 vertical-align: middle;

2507 }

2508

2509 .sprite.node {

2510 background-position: -100px 0;

2511 }

2512

2513 .sprite.way {

2514 background-position: -150px 0;

2515 }

2516

2517 .sprite.tag {

2518 background-position: -200px 0;

2519 }

2520

2521 .sprite.editor {

2522 background-position: -250px 0;

2523 }

2524

2525 .sprite.question {

2526 background-position: -300px 0;

2527 }

2528

2529 .sprite.rules {

2530 background-position: -350px 0;

2531 }

2532

2533 .start-mapping {

2534 margin: auto;

2535 cursor: pointer;

2536 border: none;

2537 padding: 20px 40px;

2538 font-size: 30px;

2539 text-decoration: none;

2540 }

2541

2542 .note-box {

2543 margin-top: 20px;

2544 background-color: $offwhite;

2545 }

2546

2547 .icon.note {

2548 background-color: #333;

2549 border-radius: 4px;

2550 }

2551 }

2552

2553 .site-about #content {

2554 //background-color: #000;

2555 background-color: #eee;

2556 background-position: 50% 50%;

2557 background-repeat: no-repeat;

2558 background-size: cover;

2559 background-attachment: fixed;

2560

2561 .caption {

2562 max-width: 200px;

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

2564 position: fixed;

2565 text-align: right;

2566 right: 20px;

2567 bottom: 60px;

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

2569 color: #eee;

2570 opacity: 0.8;

2571 display: none;

2572 }

2573

2574 .caption a {

2575 color: white;

2576 white-space: nowrap;

2577 text-decoration: none;

2578 }

2579

2580 a.next {

2581 display: block;

2582 position: fixed;

2583 right: 10px;

2584 bottom: 10px;

2585 width: 40px;

2586 height: 40px;

2587 border-radius: 5px;

2588 text-indent: -9999px;

2589 overflow: hidden;

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

2591 background-color: #000;

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

2593 }

2594

2595 .content-inner {

2596 position: relative;

2597 color: #333;

2598 min-width: 320px;

2599 max-width: 640px;

2600

2601 .section {

2602 margin-bottom: 30px;

2603 }

2604

2605 .section:last-child {

2606 margin-bottom: 0;

2607 }

2608 }

2609

2610 .text {

2611 background: white;

2612 padding: 40px;

2613 }

2614

2615 .attr {

2616 position: relative;

2617 padding: 170px 40px 20px;

2618 background: #333;

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

2620 margin-bottom: 0;

2621 margin-top: -20px;

2622

2623 h1 {

2624 display: block;

2625 color: white;

2626 font-weight: 300;

2627 font-size: 34px;

2628 span {

2629 color: #76c551;

2630 }

2631 }

2632

2633 .user-image {

2634 position: absolute;

2635 top: 0px;

2636 right: 240px;

2637 left: 0px;

2638 height: 150px;

2639 background-position: 0 50%;

2640 background-repeat: no-repeat;

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

2642 background-size: cover;

2643 background-color: #76c551;

2644 }

2645

2646 .byosm {

2647 position: absolute;

2648 top: 0px;

2649 right: 0px;

2650 z-index: 1;

2651 width: 240px;

2652 height: 150px;

2653 padding: 20px 20px 20px 40px;

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

2655 white-space: nowrap;

2656 color: #fff;

2657 background: #76c551;

2658 }

2659

2660 .byosm span {

2661 display: inline-block;

2662 width: 20px;

2663 margin-left: -20px;

2664 }

2665 }

2666

2667 h2 {

2668 margin-bottom: 10px;

2669 }

2670

2671 .icon {

2672 width: 30px;

2673 height: 30px;

2674 margin-right: 10px;

2675 vertical-align: middle;

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

2677

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

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

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

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

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

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

2684 }

2685 }

2686

2687 @import 'browse';

2688

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

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

2691 display: none;

2692 }

2693 }