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

1 /* Parameters */

2 $lineheight: 20px;

3 $typeheight: 14px;

5 $offwhite: #f4f4ff;

6 $blue: #7092FF;

7 $lightblue: #B8C5F0;

8 $grey: #AAA;

9 $lightgrey: #CCC;

10 $hovercolor: 20%;

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

14 /* Minimal CSS reset */

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

17 margin: 0;

18 padding: 0;

19 border: 0;

20 font-size:100%;

21 }

23 fieldset,img { border: 0; }

25 legend { color: #000; }

27 sup { vertical-align: text-top; }

29 sub { vertical-align: text-bottom; }

31 table {

32 border-collapse: collapse;

33 border-spacing: 0;

34 }

36 li { list-style: none; }

38 input,

39 select,

40 textarea,

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

43 abbr, acronym {

44 border-bottom: .1em dotted;

45 cursor: help;

46 }

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

50 .clearfix:before,

51 .clearfix:after {

52 content: " ";

53 display: table;

54 }

56 .clearfix:after {

57 clear: both;

58 }

60 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

74 .col12 { width:100%; }

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

78 * {

79 -moz-box-sizing: border-box;

80 -webkit-box-sizing: border-box;

81 box-sizing: border-box;

82 }

84 body {

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

86 font-size: $typeheight;

87 line-height: 1.6666;

88 color: #222;

89 background-color: #fff;

90 margin: 0px;

91 padding: 0px;

92 text-align: left;

93 }

95 body.slim {

96 background-color: #f0f0f0;

97 }

99 h1, h2, h3 {

100 margin-top: $lineheight/2;

101 margin-bottom: $lineheight;

102 font-weight: bold;

103 line-height: 1.2;

104 }

105

106 h1, h2 {

107 font-size: 32px;

108 }

109

110 #content h2 {

111 font-size: 21px;

112 }

113

114 h3 {

115 font-size: 21px;

116 margin-top: $lineheight/2;

117 margin-bottom: $lineheight;

118 }

119

120 h4,h5,h6 {

121 font-size: $typeheight;

122 margin-top: $lineheight/2;

123 margin-bottom: $lineheight/2;

124 font-weight: bold;

125 line-height: 1.5;

126 }

127

128 p, ul {

129 margin-bottom: $lineheight;

130 }

131

132 p > img {

133 width: auto;

134 max-width: 100%;

135 }

136

137 small, aside {

138 font-size: 12px;

139 }

140

141 h1:first-child,

142 h2:first-child,

143 h3:first-child,

144 h4:first-child,

145 h5:first-child,

146 h6:first-child {

147 margin-top: 0;

148 }

149

150 .column-1 {

151 width: 50%;

152 margin: 0 0 $lineheight/2 0;

153 }

154

155 .small_icon {

156 vertical-align: middle;

157 margin-right: $lineheight/4;

158 }

159

160 /* Rules for icons */

161

162 .icon {

163 display:inline-block;

164 vertical-align:top;

165 width:20px;

166 height:20px;

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

168 text-indent:-9999px;

169 overflow:hidden;

170 }

171

172 .icon-pre-text {

173 margin-right: 5px;

174 }

175

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

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

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

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

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

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

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

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

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

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

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

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

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

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

190

191 /* Rules for links */

192

193 a {

194 color: #00f;

195 text-decoration: none;

196 &:hover {

197 text-decoration: underline;

198 }

199 }

200

201 /* Rules for horizontal lines */

202

203 hr {

204 border: none;

205 background-color: #ccc;

206 color: #ccc;

207 height: 1px;

208 }

209

210 /* General styles for tables */

211

212 table {

213 width: 100%;

214 margin-bottom: $lineheight;

215 th, td {

216 text-align: left;

217 padding: $lineheight/4;

218 line-height: $lineheight;

219 }

220 th {

221 font-weight: bold;

222 vertical-align: top;

223 }

224 td {

225 vertical-align: middle;

226 }

227 }

228

229 /* Rules for the whole left sidebar, including the logo */

230

231 #left {

232 position: absolute;

233 height: 100%;

234 width: 185px;

235 font-size: 11px;

236 line-height: 1.1;

237 z-index: 100;

238 border-right: 1px solid #ccc;

239 }

240

241 /* Rules for the OpenStreetMap logo in the top left corner */

242

243 #logo {

244 display: block;

245 width: 170px;

246 min-width: 170px;

247 padding: $lineheight $lineheight/4;

248 text-align: center;

249 margin: auto;

250 }

251

252 #logo h1 {

253 font-size: 18px;

254 line-height: 1;

255 text-align: center;

256 margin: 0;

257 }

258

259 #logo h2 {

260 font-size: $lineheight/2;

261 line-height: 15px;

262 margin: 0;

263 }

264

265 /* Rules for the site name */

266

267 #small-title {

268 display: none;

269

270 img {

271 vertical-align: text-bottom;

272 }

273 }

274

275 /* Rules for the introductory text displayed in the left sidebar to new users */

276

277 .sidebar-copy {

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

279 p {

280 margin: $lineheight/4 0;

281 }

282 }

283 .sidebar-copy.intro {

284 border-top: 1px solid #ccc;

285 }

286

287 /*

288 * Rules for alert boxes shown in the left sidebar when important

289 * information needs to be conveyed such as when the site is

290 * undergoing maintenance.

291 */

292

293 .sidebar-alert {

294 padding: $lineheight/4;

295 border-top: 1px solid #ccc;

296 margin-top: 4px;

297 margin-bottom: -5px;

298 background: #e00;

299 font-size: 12px;

300 font-weight: bold;

301 p {

302 margin: $lineheight/4;

303 }

304 }

305

306 /*

307 * Rules for notice boxes shown in the left sidebar when important, but

308 * non-critical information needs to be conveyed such as notices about

309 * donation drives.

310 */

311

312 .sidebar-notice {

313 padding: $lineheight/4;

314 border-top: 1px solid #ccc;

315 margin-top: 4px;

316 margin-bottom: -5px;

317 background: #ea0;

318 font-size: 12px;

319 p {

320 margin: $lineheight/4;

321 }

322 }

323

324 /* Rules for the menu displayed in the left sidebar */

325

326 .left_menu {

327 left: 0px;

328 margin: 0;

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

330 font-size: 12px;

331 line-height: 1.25;

332 list-style-type: none;

333 border-bottom: 1px solid #ccc;

334 border-top: 1px solid #ccc;

335 img {

336 margin: $lineheight/2 0px;

337 }

338

339 ul {

340 padding: 0;

341 margin: 0;

342 }

343

344 li {

345 list-style-type: none;

346 padding: 0;

347 margin: 0;

348 }

349

350 h4 {

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

352 font-size: 12px;

353 margin: 0;

354 }

355 }

356

357 /*

358 * Rules for "optional boxes" which appear in the left sidebar on

359 * certain pages. Current users are the seach box on the main page

360 * and the tag cloud on the traces pages.

361 */

362

363 .optionalbox {

364 left: 0px;

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

366 margin: $lineheight/4 0;

367 text-align: left;

368 }

369

370 /* Rules for the search box */

371

372 #search_field {

373 position: relative;

374

375 form {

376 width: 165px;

377 }

378

379 input[type="text"] {

380 width: 165px;

381 padding: 3px;

382 font-size: $typeheight;

383 line-height: 1.1;

384 height: 25px;

385 padding: 2px 0px 2px $lineheight/4;

386 box-shadow: inset #DDD 0px 1px 3px;

387 }

388

389 input[type="text"]:focus {

390 outline: none;

391 border: 1px solid #000;

392 }

393

394 input[type="submit"] {

395 border: 0;

396 margin: 0;

397 padding: 0;

398 width: 15px;

399 height: 15px;

400 min-width: 0;

401 text-indent: -1000px;

402 overflow: hidden;

403 background: image-url("sprite.png") -2px -2px no-repeat;

404 position: absolute;

405 top: $lineheight/4;

406 right: $lineheight/4;

407 cursor: pointer;

408 }

409 }

410

411 .search_help {

412 margin: $lineheight/4 0 0 0;

413 }

414

415 /* Utility for de-emphasizing content */

416

417 .deemphasize {

418 color: #999;

419 a {

420 color: $blue;

421 }

422 }

423

424 /* Rules for donation request box */

425

426 a.donate {

427 display: block;

428 width: 163px;

429 padding: $lineheight/4;

430 border: 1px solid #AED1A0;

431 background: #cbeea7;

432 font-size: $typeheight;

433 line-height: 1.4;

434 text-align: center;

435 border-radius: 2px;

436 color: #222;

437 margin: $lineheight/2 $lineheight/2 0px $lineheight/2;

438

439 &:hover {

440 background: #9ed485;

441 text-decoration: none;

442 }

443 }

444

445 /* Rules for Creative Commons logo button */

446

447 #cclogo {

448 margin: $lineheight/2 0;

449 float: right;

450 }

451

452 /* Rules for tabbed navigation bar */

453

454 #top-bar {

455 position: relative;

456 margin-left: 185px;

457 height: 30px;

458 border-bottom: 1px solid #ccc;

459 background: white;

460 z-index: 100;

461 }

462

463 .site-edit #top-bar,

464 .site-index #top-bar,

465 .site-export #top-bar {

466 position: fixed;

467 top: 0;

468 left: 0;

469 right: 0;

470 }

471

472 #tabnav {

473 height: 29px;

474 margin-bottom:0;

475 overflow: hidden;

476 li {

477 display: inline;

478 }

479 a, a:link, a:visited {

480 float: left;

481 font-weight: bold;

482 padding: 3px $lineheight/2;

483 text-decoration: none;

484 color: #333;

485 float: left;

486 margin-right: 1px;

487 -webkit-transition: color 200ms ease-in;

488 -moz-transition: color 200ms ease-in;

489 -o-transition: color 200ms ease-in;

490 transition: color 200ms ease-in;

491 }

492 }

493

494 .site-index #tabnav a#viewanchor,

495 .site-edit #tabnav a#editanchor,

496 .changeset-list #tabnav a#historyanchor {

497 border-bottom: 1px solid #aaa;

498 background: #9ed485;

499 color: #000;

500 }

501

502 #tabnav a:link:hover, #tabnav a:visited:hover {

503 text-decoration: underline;

504 }

505

506 #tabnav a:link.disabled,

507 #tabnav a:visited.disabled,

508 #tabnav a:link:hover.disabled,

509 #tabnav a:visited:hover.disabled {

510 color: #ccc;

511 cursor: default;

512 &:hover {

513 text-decoration: none;

514 }

515 }

516

517 /* Utility for styling notification numbers */

518

519 .count-number {

520 padding: 2px $lineheight/4;

521 border-radius: 2px;

522 background: #d7d7ff;

523 margin: 0 2px;

524 font-size: 11px;

525 color: #333;

526 }

527

528 /* Rules for greeting bar in the top right corner */

529

530 #greeting {

531 float: right;

532 padding-top: 3px;

533 margin-right: $lineheight/4;

534 }

535

536 .greeting-bar-unread {

537 font-weight: bold;

538 }

539

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

541

542 #noscript {

543 z-index: 20000000;

544 position: absolute;

545 top: 15px;

546 left: 15px;

547 }

548

549 /* Rules for bootstrap tooltips */

550

551 .tooltip {

552 position: absolute;

553 display: none;

554 color: #333;

555 text-align: left;

556 font-size: 12px;

557 max-width: 250px;

558 }

559

560 .tooltip.in {

561 opacity: 0.8;

562 z-index: 1030;

563 height: auto;

564 display: block;

565 }

566

567 .tooltip.top {

568 margin-top: -10px;

569 text-align: center;

570 }

571

572 .tooltip.right {

573 margin-left: 10px;

574 }

575

576 .tooltip.bottom {

577 margin-top: 10px;

578 text-align: center;

579 }

580

581 .tooltip.left {

582 margin-left: -10px;

583 text-align: right;

584 }

585

586 .tooltip-inner {

587 display: inline-block;

588 padding: 10px;

589 font-weight: normal;

590 background-color: white;

591 }

592

593 .tooltip-arrow {

594 position: absolute;

595 width: 0;

596 height: 0;

597 border-color: transparent;

598 border-style: solid;

599 }

600

601 .tooltip.top .tooltip-arrow {

602 bottom: -5px;

603 left: 50%;

604 margin-left: -5px;

605 border-top-color: white;

606 border-width: 5px 5px 0;

607 }

608

609 .tooltip.right .tooltip-arrow {

610 top: 50%;

611 left: -5px;

612 margin-top: -5px;

613 border-right-color: white;

614 border-width: 5px 5px 5px 0;

615 }

616

617 .tooltip.left .tooltip-arrow {

618 top: 50%;

619 right: -5px;

620 margin-top: -5px;

621 border-left-color: white;

622 border-width: 5px 0 5px 5px;

623 }

624

625 .tooltip.bottom .tooltip-arrow {

626 top: -5px;

627 left: 50%;

628 margin-left: -5px;

629 border-bottom-color: white;

630 border-width: 0 5px 5px;

631 }

632

633 /* Rules for Leaflet maps */

634

635 .leaflet-control .control-button {

636 display: block;

637 height: 40px;

638 width: 40px;

639 background-color: #333;

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

641 -bottom: 1px solid #333;

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

643 margin-bottom: 10px;

644 outline: none;

645

646 &:hover {

647 background-color: black;

648 }

649

650 &.active {

651 background-color: #9ed485;

652 }

653

654 &.disabled {

655 background-color: #333;

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

657 cursor: default;

658 }

659

660 .icon {

661 margin: 10px;

662 }

663 }

664

665 .leaflet-control .zoomin,

666 .control-layers .control-button {

667 margin-bottom: 0px;

668 border-radius: 4px 0 0 0;

669 }

670

671 .site .leaflet-control .zoomout,

672 .control-key .control-button {

673 margin-bottom: 0;

674 border-radius: 0;

675 }

676

677 .leaflet-control .zoomout, // For non-main page maps

678 .control-locate .control-button,

679 .control-share .control-button {

680 border-radius: 0 0 0 4px;

681 }

682

683 /* Rules for the home page */

684

685 .site-export #map,

686 .site-index #map,

687 .site-edit #map {

688 height: 100%;

689 overflow: hidden;

690 }

691

692 #map-ui {

693 display: none;

694 position: relative;

695 float: right;

696 width: 250px;

697 height: 100%;

698 background: white;

699 border-left: 1px solid #CCC;

700 overflow: auto;

701

702 .section {

703 border-bottom: 1px solid #DDD;

704 padding: 15px;

705 }

706

707 a.close-button {

708 float: right;

709 padding:5px;

710 font-size:20px;

711 line-height:10px;

712 color:#222;

713 border:1px solid #ddd;

714 }

715 }

716

717 .layers-ui,

718 .share-ui {

719 ul, li:last-child, p:last-child {

720 margin-bottom: 0;

721 }

722 }

723

724 .layers-ui {

725 li {

726 border-radius: 4px;

727 overflow: hidden;

728 margin-bottom: 10px;

729 }

730

731 label {

732 display: block;

733 padding: 5px 5px 5px 7px;

734 background-color: #eee;

735 cursor: pointer;

736 }

737

738 li.active label {

739 background-color: #ccc;

740 }

741

742 .base-layers {

743 .leaflet-container {

744 width: 100%;

745 height: 50px;

746 cursor: pointer;

747 }

748 }

749 }

750

751 .share-ui {

752 .share-tabs {

753 margin-bottom: 10px;

754

755 a {

756 color: #fff;

757 text-decoration: none;

758 background-color: $lightblue;

759 padding: 5px 10px;

760 }

761

762 a:first-child {

763 border-right: 1px solid #fff;

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

765 }

766

767 a:last-child {

768 border-left: 1px solid #fff;

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

770 }

771

772 a.active {

773 background-color: $blue;

774 }

775 }

776

777 .share-tab {

778 display: none;

779 }

780

781 .share-link {

782 input[type=text],

783 textarea {

784 width: 100%;

785 font-family: monospace;

786 font-size: small;

787 line-height: 1.3;

788 }

789 }

790

791 .share-image {

792 label {

793 margin-right: 10px;

794 }

795 }

796

797 #embed_html {

798 resize: vertical;

799 }

800

801 #mapnik_scale {

802 width: 100px;

803 }

804 }

805

806 .leaflet-top.leaflet-right {

807 top: $lineheight/2 !important;

808 .leaflet-control {

809 margin-right: 0px !important;

810 margin-top: 0px !important;

811 }

812 }

813

814 .leaflet-popup-scrolled {

815 padding-right: $lineheight;

816 border-bottom: 0px !important;

817 border-top: 0px !important;

818 }

819

820 .leaflet-popup-content-wrapper {

821 border-radius: 4px !important;

822 -webkit-border-radius: 4px !important;

823 }

824

825 /* Rules for edit menu */

826

827 .menuicon {

828 padding: 0 $lineheight/4;

829 font-weight: normal;

830 display: inline-block;

831 &:hover {

832 text-decoration: none !important;

833 }

834 }

835

836 .menu {

837 display: none;

838 z-index: 10000;

839 position: absolute;

840 background-color: #ffffff;

841 border: 1px solid $lightgrey;

842 border-top: 0px;

843 ul {

844 margin: 0px;

845 }

846 li {

847 padding: 2px $lineheight/4;

848 border-top: 1px solid #eee;

849 white-space: nowrap;

850 }

851 }

852

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

854

855 #attribution {

856 display: none;

857 }

858

859 .attribution_license,

860 .attribution_project {

861 text-align: left;

862 }

863

864 .attribution_notice {

865 text-align: center;

866 }

867

868 /* Rules for the popout map sidebar */

869

870 #sidebar {

871 display: none;

872 position: relative;

873 float: left;

874 border-right: 1px solid $lightgrey;

875 width: 33.3333%;

876 height: 100%;

877 ul {

878 margin-bottom: 0;

879 &:last-child {

880 border-bottom: 1px solid #ccc;

881 }

882 li {

883 margin-bottom: $lineheight/4;

884 &:last-child {

885 margin-bottom: 0;

886 }

887 }

888 }

889 }

890

891 .sidebar_heading {

892 position: relative;

893 padding: $lineheight/2 $lineheight;

894 z-index: 9999;

895 background: $offwhite;

896 border-bottom: 1px solid #ccc;

897 h4 {

898 margin: 0;

899 }

900 }

901

902 .sidebar_close {

903 position: absolute;

904 height: $lineheight;

905 top: 0px;

906 bottom: 0;

907 right: $lineheight;

908 margin: auto;

909 }

910

911 #sidebar_content {

912 position: relative;

913 margin-bottom: 20px;

914 overflow: auto;

915 height: 100%;

916 width: 100%;

917 h4 {

918 padding: 0 $lineheight $lineheight/2 $lineheight;

919 margin-top: $lineheight/2;

920 margin-bottom: 0;

921 border-bottom: 1px solid #ddd;

922 }

923 }

924

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

926

927 #mapkey {

928 .mapkey-table-key img {

929 display: block;

930 margin-left: auto;

931 margin-right: auto;

932 }

933 td {

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

935 }

936 }

937

938 /* Rules for search results which appear in the popout sidebar */

939

940 .search_searching {

941 margin-top: $lineheight/4;

942 margin-bottom: $lineheight/4;

943 }

944

945 .search_results_entry {

946 margin-bottom: 0;

947

948 .search_details {

949 display: block;

950 text-align: right;

951 }

952 }

953

954 .search_results_entry .search_searching {

955 text-align: center;

956 margin: $lineheight auto;

957 width: $lineheight;

958 display: block;

959 }

960

961 ul.results-list li { border-bottom: 1px solid #ccc; }

962

963 .search_results_error {

964 color: #f00;

965 }

966

967 /* Rules for data browser information which appears in the popout sidebar */

968

969 #browse_content {

970 position: relative;

971 .browse_show_list.button {

972 position: absolute;

973 left: $lineheight;

974 right: $lineheight;

975 bottom: -40px;

976 margin-bottom: 0;

977 }

978 a.more-details {

979 position: absolute;

980 top: 0;

981 right: $lineheight;

982 }

983 ul li {

984 margin-bottom: 0;

985 }

986 }

987

988 .browse_details {

989 position: relative;

990 }

991

992 .browse_status {

993 display: none;

994 }

995

996 /* Rules for export information which appears in the popout sidebar */

997

998 .export_bounds {

999 text-align: center;

1000 }

1001

1002 .export_area_inputs {

1003 margin-bottom: $lineheight/2;

1004 input[type="text"] {

1005 width: 80px;

1006 margin-bottom: 5px;

1007 }

1008 }

1009

1010 .export_bound {

1011 margin: $lineheight/4;

1012 }

1013

1014 /* Rules for the main content area */

1015

1016 #content {

1017 padding: $lineheight;

1018 position: relative;

1019 }

1020

1021 .site-edit #content,

1022 .site-index #content,

1023 .site-export #content {

1024 position: fixed;

1025 padding: 0;

1026 top: 30px; bottom: 0;

1027 left: 184px; right: 0;

1028 border-left: 1px solid #ccc;

1029 }

1030

1031 .site-copyright,

1032 .site-welcome {

1033 .content-heading {

1034 text-align: center;

1035 }

1036

1037 #content {

1038 max-width: 700px;

1039 margin: auto;

1040 }

1041 }

1042

1043 .wrapper {

1044 margin-left: 184px;

1045 border-left: 1px solid #ccc;

1046 text-align: left;

1047 }

1048

1049 #content.maximised {

1050 top: 0;

1051 left: 0;

1052 right: 0;

1053 bottom: 0;

1054 border: 0;

1055 z-index: 1000;

1056 }

1057

1058 #slim_container {

1059 width: 100%;

1060 }

1061

1062 #slim_container_content {

1063 max-width: 50em;

1064 background-color: #FFFFFF;

1065 margin: $lineheight/2 auto;

1066 padding: 3px;

1067 border-radius: 25px;

1068 -moz-border-radius: 25px;

1069 border: 1px solid #e6e6e6;

1070 }

1071

1072 #slim_content {

1073 margin: $lineheight/2;

1074 margin-top: 95px;

1075 max-width: 50em;

1076

1077 .content-heading {

1078 margin-bottom: 15px;

1079 }

1080 }

1081

1082 #slim_header {

1083 margin: 30px $lineheight/2;

1084 position: absolute;

1085 top: 0px;

1086 margin-right: $lineheight/4;

1087 img {

1088 vertical-align: middle;

1089 margin-bottom: $lineheight/4;

1090 margin-right: $lineheight/4;

1091 }

1092 }

1093

1094 .content-heading {

1095 position: relative;

1096 padding: $lineheight;

1097 background: $offwhite;

1098 h1, h2 {

1099 margin-bottom: $lineheight/2;

1100 line-height: 100%;

1101 &:last-child {

1102 margin-bottom: 0;

1103 }

1104 }

1105 p {

1106 margin-top: $lineheight/2;

1107 margin-bottom: 0px;

1108 }

1109 }

1110

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

1112

1113 .content_map {

1114 position: relative;

1115 width: 45%;

1116 height: 400px;

1117 border: 1px solid #ccc;

1118 margin-bottom: $lineheight;

1119 float: right;

1120 }

1121

1122 .content_map #small_map {

1123 height: 100%;

1124 width: 100%;

1125 margin-bottom: $lineheight;

1126 }

1127

1128 /* Rules for the changeset list shown by the history tab etc */

1129

1130 #changeset_list {

1131 width: 100%;

1132 ul {

1133 padding: $lineheight/2 0;

1134 margin-bottom: 0px;

1135 border-top: 1px solid #ccc;

1136 &:last-child {

1137 border-bottom: 1px solid #ccc;

1138 }

1139 }

1140 .selected {

1141 background: #FFFFC0;

1142 }

1143 .date,

1144 .user {

1145 border-left: 1px solid #ccc;

1146 padding-left: $lineheight/4;

1147 margin-right: $lineheight/4;

1148 }

1149 }

1150

1151 #changeset_list_map_wrapper {

1152 position: absolute;

1153 width: 50%;

1154 height: 490px;

1155 top: 0;

1156 right: 0;

1157 }

1158

1159 #changeset_list_map_wrapper.scrolled {

1160 position: fixed;

1161 }

1162

1163 #changeset_list_map {

1164 position: absolute;

1165 bottom: $lineheight;

1166 top: $lineheight;

1167 right: $lineheight;

1168 left: $lineheight;

1169 border: 1px solid #ccc;

1170 }

1171

1172 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1173 margin-left: 93px;

1174 }

1175

1176 /* Rules for the data browser */

1177

1178 .browse-section {

1179 border-top: 1px solid #ccc;

1180 margin-top: $lineheight/2;

1181 padding-top: $lineheight/2;

1182 &:first-child {

1183 margin-top: 0;

1184 }

1185 .warning {

1186 background-color: #ffe0cc;

1187 margin: 0px;

1188 padding: 4px 6px;

1189 max-width: 100%;

1190 }

1191 h4, p {

1192 margin-bottom: $lineheight/4;

1193 }

1194 ul, .bbox, .geo {

1195 display: inline-block;

1196 vertical-align: top;

1197 max-width: 65%;

1198 }

1199 ul p {

1200 margin-left: 0;

1201 margin-bottom: 0;

1202 }

1203 h4 {

1204 float: left;

1205 width: 33.3333%;

1206 display: inline-block;

1207 vertical-align: top;

1208 }

1209 }

1210

1211 .bbox {

1212 div {

1213 width: 33.3333%;

1214 text-align: center;

1215 padding: $lineheight/4 0;

1216 overflow: hidden;

1217 text-overflow: ellipsis;

1218 float: left;

1219 }

1220 .max_lat,

1221 .min_lat {

1222 margin-left: auto;

1223 margin-right: auto;

1224 width: 100%;

1225 }

1226 }

1227

1228 #browse_map .geolink {

1229 display: none;

1230 }

1231

1232 #browse_map .secondary-actions {

1233 margin-bottom: $lineheight/2;

1234 }

1235

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

1237

1238 #trace_list {

1239 font-size: $lineheight/2;

1240 border-width: 0px;

1241 text-align: right;

1242

1243 .trace_summary {

1244 font-size: 12px;

1245 color: gray;

1246 }

1247

1248 .trace_pending {

1249 color: red;

1250 }

1251

1252 .trace_public {

1253 color: green;

1254 }

1255

1256 .trace_identifiable {

1257 color: green;

1258 }

1259

1260 .trace_trackable {

1261 color: red;

1262 }

1263

1264 .trace_private {

1265 color: red;

1266 }

1267 }

1268

1269 /* Rules for the user profile page */

1270

1271 #userinformation {

1272

1273 min-height: 100px;

1274 .userinformation-inner {

1275 float: left;

1276 }

1277 h2 {

1278 margin-top: 0;

1279 }

1280 .user-description {

1281 width: 100%;

1282 clear: both;

1283 }

1284 .deemphasize {

1285 margin: 0;

1286 }

1287 }

1288

1289 .admin-user-info small {

1290 margin-bottom: $lineheight/2;

1291 display: inline;

1292 margin-right: $lineheight;

1293 }

1294

1295 .activity-block {

1296 clear: left;

1297 border-bottom: 1px solid #ccc;

1298 padding-bottom: $lineheight;

1299 float: left;

1300 h3 {

1301 margin-bottom: $lineheight/2;

1302 }

1303 }

1304

1305 .contact-activity {

1306 margin-top: $lineheight;

1307 width: 100%;

1308 }

1309

1310 .activity-details p {

1311 margin-left: 70px;

1312 margin-bottom: 0;

1313 }

1314

1315 #friends-container .contact-activity ul {

1316 margin-left: 70px;

1317 }

1318

1319 .user-view {

1320 p#no_home_location {

1321 margin: $lineheight;

1322 }

1323 .user_thumbnail {

1324 margin-top: $lineheight/4;

1325 float: left;

1326 }

1327 }

1328

1329 /* Rules for the user map */

1330

1331 .content_map .leaflet-popup-content {

1332 margin: $lineheight/2;

1333 min-height: 50px;

1334 }

1335

1336 /* Rules for user popups on maps */

1337

1338 .user_popup {

1339 min-width: 200px;

1340 p {

1341 padding: 0 0 5px 0;

1342 margin-top: 0 0 0 60px;

1343 font-size: 12px;

1344 }

1345 img.user_thumbnail {

1346 float: left;

1347 margin: 0 $lineheight/2 0 0;

1348 }

1349 }

1350

1351 /* Rules for the user list */

1352

1353 #user_list {

1354 font-size: $lineheight/2;

1355 width: 100%;

1356

1357 tr {

1358 vertical-align: middle;

1359 }

1360

1361 p {

1362 margin-top: 0px;

1363 margin-bottom: 0px;

1364 }

1365 }

1366

1367 #user_list_actions {

1368 float: right;

1369 margin-top: $lineheight/2;

1370 }

1371

1372 /* Rules for the diary list page */

1373

1374 .diary_entry-list img.user_thumbnail {

1375 float: left;

1376 }

1377

1378 .diary_post {

1379 max-width: 740px;

1380 position: relative;

1381 margin-top: $lineheight/2;

1382 padding-top: $lineheight;

1383 border-top: 1px solid #ccc;

1384

1385 &:first-child {

1386 margin-top: 0;

1387 border-top: 0;

1388 padding-top: 0;

1389 }

1390 h1, h2 {

1391 font-size: 21px;

1392 line-height: 1em;

1393 }

1394 small.deemphasize {

1395 float: left;

1396 display: block;

1397 }

1398 ul.secondary-actions { display: inline-block;}

1399 }

1400

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

1402 display: inline;

1403 }

1404

1405 #content .post_heading {

1406 margin-bottom: $lineheight;

1407 h2 {

1408 margin-top: 0;

1409 margin-bottom: $lineheight/2;

1410 font-size: 24px;

1411 }

1412 }

1413

1414 /* Rules for the diary entry page */

1415

1416 .diary_entry {

1417 #map {

1418 position: relative;

1419 width: 90%;

1420 height: 400px;

1421 border: 1px solid #ccc;

1422 display: none;

1423 margin-bottom: $lineheight;

1424 }

1425 #newcomment {

1426 border-top: 1px solid #ccc;

1427 padding-top: $lineheight;

1428 margin-top: $lineheight/2;

1429 }

1430 .comments {

1431 max-width: 740px;

1432 }

1433 .diary-comment {

1434 margin-top: $lineheight/2;

1435 border-top: 1px dashed #ccc;

1436 padding-top: $lineheight/2;

1437 &:first-child {

1438 margin-top: $lineheight;

1439 padding-top: $lineheight;

1440 border-top: 1px solid #ccc;

1441 }

1442 p {

1443 margin-bottom: $lineheight/2;

1444 }

1445 .comment-heading {

1446 margin-bottom: 0;

1447 margin-top: 0;

1448 }

1449 }

1450 }

1451

1452 .diary_entry-view img.user_thumbnail {

1453 float: left;

1454 }

1455

1456 /* Rules for the login page */

1457

1458 #login_openid_buttons {

1459 margin-bottom: 0;

1460 }

1461

1462 #login_openid_buttons li {

1463 float: left;

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

1465 }

1466

1467 /* Rules for the account confirmation page */

1468

1469 #terms {

1470 .legale {

1471 border: 1px solid #ccc;

1472 padding: $lineheight;

1473 margin-bottom: $lineheight;

1474 overflow: auto;

1475 height: 10em;

1476

1477 &:p#last {

1478 margin-bottom: 0px;

1479 }

1480

1481 &:ol {

1482 margin-bottom: 0px;

1483 }

1484

1485 &:img {

1486 display: block;

1487 margin: $lineheight auto inherit auto;

1488 }

1489 }

1490

1491 form.sign {

1492 input[type=submit] {

1493 float: left;

1494 }

1495 #decline {

1496 background: $grey;

1497 &:hover {

1498 background: darken($grey, $hovercolor);

1499 }

1500 }

1501 }

1502 fieldset {

1503 margin-bottom: $lineheight;

1504 }

1505 #contributorGuidance {

1506 background-color: $offwhite;

1507 border-radius: 4px;

1508 -moz-border-radius: 4px;

1509 }

1510 .signing-buttons {

1511 height: 50px;

1512 }

1513 }

1514

1515 /* Rules for the account settings page */

1516

1517 #accountForm .user_map {

1518 position: relative;

1519 width: 500px;

1520 height: 400px;

1521 border: 1px solid #ccc;

1522 }

1523

1524 #accountForm .user_image {

1525 margin-bottom: 0;

1526 }

1527

1528 #accountForm #user_image {

1529 margin-left: 20px;

1530 }

1531

1532 #accountForm ul.accountImage-options {

1533 margin-left: 120px;

1534 }

1535

1536 .nohome .location {

1537 display: none;

1538 }

1539

1540 #homerow .message {

1541 display: none;

1542 }

1543

1544 .nohome .message {

1545 display: inline !important;

1546 }

1547

1548 .content_map.settings_map {

1549 width: 50%;

1550 float: none;

1551 }

1552

1553 /* Rules for the oauth settings page */

1554

1555 .oauth_clients .buttons .oauth-edit {

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

1557 }

1558

1559 .oauth_clients .buttons .oauth-delete {

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

1561 }

1562

1563 /* Rules for messages pages */

1564

1565 .messages {

1566 width: 100%;

1567 border: 1px solid #ddd;

1568

1569 input[type="submit"] {

1570 margin: auto;

1571 }

1572 tbody tr {

1573 border-top: 1px solid #ccc;

1574 }

1575

1576 .inbox-row {

1577 background: #f8f8ff;

1578 }

1579

1580 .inbox-row-unread {

1581 background:#CBEEA7;

1582 }

1583

1584 .right {

1585 float: right;

1586 }

1587

1588 tr td,

1589 tr th {

1590 padding: $lineheight/4;

1591 }

1592 p:last-child,

1593 h2:last-child,

1594 h3:last-child,

1595 ol:last-child,

1596 ul:last-child {

1597 margin-bottom:0;

1598 }

1599 tr td {

1600 height: 30px;

1601 border-right: 1px solid $lightgrey;

1602 }

1603 }

1604

1605 .inbox-row .inbox-mark-read {

1606 display: none;

1607 }

1608

1609 .info-line {

1610 margin-bottom: $lineheight;

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

1612 border-bottom: 1px solid #ccc;

1613

1614 form, form div {

1615 display: inline;

1616 }

1617 }

1618

1619 .info-line .user_thumbnail_tiny {

1620 vertical-align: middle;

1621 }

1622

1623 .inbox-mark-unread,

1624 .inbox-mark-read,

1625 .inbox-delete {

1626 width: 1%;

1627 }

1628

1629 .inbox-row-unread .inbox-mark-unread {

1630 display: none;

1631 }

1632

1633 .message-read .message-buttons {

1634 margin-top: $lineheight;

1635 padding-top: $lineheight;

1636 border-top: 1px solid $lightgrey;

1637 }

1638

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

1640 border-radius: 0;

1641 }

1642

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

1644

1645 .flash {

1646 padding: $lineheight;

1647 &#error {

1648 background-color: #ff7070;

1649 }

1650 &#warning {

1651 background-color: #ffe0cc;

1652 }

1653 &#notice {

1654 background-color: #CBEEA7;

1655 }

1656 }

1657

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

1659

1660 .field_with_errors {

1661 padding: 2px;

1662 background-color: #ff7070;

1663 display: table;

1664 }

1665

1666 /* Rules for rails validation error boxes */

1667

1668 #errorExplanation {

1669 width: 400px;

1670 border: 2px solid #ff7070;

1671 padding: 0 $lineheight/2;

1672 margin-bottom: $lineheight;

1673 background-color: #f0f0f0;

1674

1675 h2 {

1676 margin: 0 -10px 10px -10px;

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

1678 font-weight: bold;

1679 font-size: 12px;

1680 background-color: #c00;

1681 color: #fff;

1682 text-align: left;

1683 }

1684

1685 p {

1686 color: #333;

1687 margin-bottom: 0px;

1688 padding: $lineheight/4;

1689 }

1690

1691 ul {

1692 padding-left: $lineheight;

1693

1694 li {

1695 font-size: 12px;

1696 list-style: disc;

1697 }

1698 }

1699 }

1700

1701 /* Rules for forms */

1702

1703 .standard-form {

1704 fieldset {

1705 margin-bottom: $lineheight;

1706 }

1707 label.standard-label {

1708 display: block;

1709 margin-bottom: $lineheight/4;

1710 font-size: $typeheight;

1711 font-weight: bold;

1712 line-height: 1.5;

1713 }

1714 label.standard-label.secondary {

1715 display: inline-block;

1716 font-weight: normal;

1717 }

1718 .form-help {

1719 font-weight: normal;

1720 }

1721 .form-column {

1722 float: left;

1723 margin-right: 20px;

1724 }

1725 .form-divider {

1726 margin-top: $lineheight;

1727 padding-top: $lineheight;

1728 border-top: 1px solid $lightgrey;

1729 }

1730 .form-row {

1731 margin-bottom: $lineheight/2;

1732 }

1733 .form-list {

1734 margin-bottom: 0;

1735 }

1736 .form-list li {

1737 margin-bottom: 5px;

1738 }

1739 input[type="checkbox"],

1740 input[type="radio"] {

1741 float: left;

1742 margin-top: 5px;

1743 }

1744 }

1745

1746 #remember_me_openid {

1747 display: block;

1748 }

1749

1750 input[type="checkbox"],

1751 input[type="radio"] {

1752 margin-right: 5px;

1753 }

1754

1755 input[type="text"],

1756 input[type="email"],

1757 input[type="url"],

1758 input[type="password"],

1759 textarea {

1760 border: 1px solid #ccc;

1761 padding: 2px 5px;

1762 margin: 0;

1763 width: 200px;

1764 }

1765

1766 textarea {

1767 padding: 5px;

1768 width: 100%;

1769 }

1770

1771 /* Rules for user images */

1772

1773 img.user_image {

1774 max-width: 100px;

1775 max-height: 100px;

1776 border: 1px solid #ccc;

1777 margin-bottom: $lineheight;

1778 float: left;

1779 margin-right: $lineheight;

1780 }

1781

1782 img.user_thumbnail {

1783 max-width: 50px;

1784 max-height: 50px;

1785 border: 1px solid #ccc;

1786 margin-right: $lineheight;

1787 }

1788

1789 img.user_thumbnail_tiny {

1790 max-width: 25px;

1791 max-height: 25px;

1792 border: 1px solid #ccc;

1793 }

1794

1795 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */

1796

1797 .nowrap {

1798 white-space: nowrap;

1799 }

1800

1801 /* Rules for geo microformats */

1802

1803 abbr.geo {

1804 border-bottom: none;

1805 }

1806

1807 /* Rules for RSS buttons */

1808

1809 .rsssmall {

1810 position: relative;

1811 top: 5px;

1812 }

1813

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

1815

1816 ul.secondary-actions {

1817 font-style: normal;

1818 margin-bottom: 0;

1819 margin-left: 0;

1820 &.pager {

1821 display: inline-block;

1822 margin-right: 60px;

1823 }

1824 li {

1825 display: block;

1826 float: left;

1827 list-style: none;

1828 border-left: 1px solid #ccc;

1829 padding-left: $lineheight/4;

1830 margin-right: $lineheight/4;

1831 &:first-child {

1832 border-left: 0;

1833 padding-left: 0;

1834 }

1835 &:last-child {

1836 margin-right: 0px;

1837 }

1838 }

1839 }

1840

1841 /* Utility for managing inner content areas */

1842

1843 .inner22 { padding: $lineheight;}

1844

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

1846

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

1848

1849 .inner02 { padding: 0 $lineheight;}

1850

1851 /* Utility for general button styles */

1852

1853 input[type="button"],

1854 input[type="submit"],

1855 input[type="reset"],

1856 a.button {

1857 cursor: pointer;

1858 border: 0;

1859 display: inline-block;

1860 line-height: 20px;

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

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

1863 min-width: 120px;

1864 margin: 0 0 $lineheight/2 0;

1865 color: white;

1866 background: $blue;

1867 text-align: center;

1868 border-radius: 2px;

1869 -moz-border-radius: 2px;

1870 &:hover {

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

1872 text-decoration: none;

1873 }

1874 &.deemphasize {

1875 background: $lightblue;

1876 &:hover {

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

1878 }

1879 }

1880 &:disabled {

1881 background: $lightgrey;

1882 &:hover {

1883 background: $lightgrey;

1884 }

1885 }

1886 &:last-child {

1887 margin-bottom: 0;

1888 }

1889 }

1890

1891 .buttons {

1892 min-width: 200px;

1893 input[type="submit"],

1894 input[type="button"],

1895 input[type="reset"],

1896 .button {

1897 box-sizing: border-box;

1898 float: left;

1899 border-radius: 0;

1900 margin:0;

1901 min-width: 100px;

1902 max-width: 180px;

1903 border-right:1px solid white;

1904 text-overflow: ellipsis;

1905 white-space: nowrap;

1906 overflow: hidden;

1907 }

1908 input:first-child,

1909 .button:first-child {

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

1911 }

1912 input:last-child,

1913 .button:last-child {

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

1915 border-right-width: 0;

1916 }

1917 input:only-child,

1918 .button:only-child,

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

1920 *[value="Hide"] + .button:last-child {

1921 border-radius:2px;

1922 border-right-width: 0;

1923 }

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

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

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

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

1928 border-right-width: 0;

1929 }

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

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

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

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

1934 border-right-width: 1px solid white;

1935 }

1936 }

1937

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

1939

1940 .table0,

1941 .item0 {

1942 background: $offwhite;

1943 }

1944

1945 .table1,

1946 .item1 {

1947 background: #fff;

1948 }

1949

1950 /* Rules for OpenID logo */

1951

1952 .openid_logo {

1953 vertical-align: text-bottom;

1954 border: 0;

1955 }

1956

1957 /* Rules for rich text */

1958

1959 .richtext,

1960 .prose {

1961 h1, h2 {

1962 padding-bottom: $lineheight/2;

1963 border-bottom: 1px dashed #cccccc;

1964 margin-bottom: $lineheight/2;

1965 }

1966

1967 h1 {

1968 font-size: 24px;

1969 }

1970

1971 h2 {

1972 font-size: 18px;

1973 }

1974

1975 h3 {

1976 font-size: $typeheight;

1977 }

1978

1979 code {

1980 font-size: 13px;

1981 background: #e8e8e8;

1982 padding: 2px 3px;

1983 }

1984

1985 pre {

1986 font-size: 13px;

1987 background: #e8e8e8;

1988 padding: 2px 3px;

1989

1990 code {

1991 padding: 0;

1992 }

1993 }

1994

1995 img {

1996 padding: $lineheight;

1997 background-color: $offwhite;

1998 display: block;

1999 max-width: 100%;

2000 margin: auto;

2001 }

2002

2003 blockquote {

2004 border-left: $lineheight solid $offwhite;

2005 padding-left: $lineheight;

2006 margin: 0;

2007 color: #7E7E7E;

2008 }

2009

2010 ul, ol {

2011 padding-left: $lineheight;

2012 margin-bottom: $lineheight;

2013 margin-left: $lineheight;

2014 }

2015

2016 ul li {

2017 list-style: disc;

2018 }

2019

2020 ol li {

2021 list-style: decimal;

2022 }

2023 }

2024

2025 .diary_post .richtext {

2026 margin-top: $lineheight;

2027 }

2028

2029 .comments .richtext {

2030 margin-left: 70px;

2031 margin-top: 0;

2032 }

2033

2034 /* Rules for rich text editors */

2035

2036 .richtext_container {

2037 margin-bottom: $lineheight;

2038

2039 .richtext_content {

2040 width: 50%;

2041 display: inline-block;

2042 vertical-align: top;

2043

2044 .richtext_preview {

2045 display: inline-block;

2046 padding: $lineheight;

2047 background-color: $offwhite;

2048 overflow-x: auto;

2049

2050 &.loading {

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

2052 background-repeat: no-repeat;

2053 background-position: center;

2054 }

2055

2056 > :first-child {

2057 margin-top: 0px;

2058 }

2059 }

2060 }

2061

2062 .richtext_help {

2063 display: inline-block;

2064 vertical-align: top;

2065 margin-left: 15px;

2066 background-color: #f8f8ff;

2067 padding: $lineheight/2;

2068 width: 220px;

2069

2070 ul {

2071 margin-bottom: 0;

2072 }

2073

2074 h4.heading, li {

2075 border-bottom: 1px solid #ccc;

2076 margin-bottom: $lineheight/4;

2077 padding-bottom: $lineheight/4;

2078 }

2079

2080 li h4, li span, li p {

2081 display: inline-block;

2082 vertical-align: top;

2083 font-size: 11px;

2084 }

2085

2086 li h4 {

2087 width: 40%;

2088 margin: 0;

2089 }

2090

2091 li span, li p {

2092 width: 50%;

2093 margin-left: $lineheight/2;

2094 margin-bottom: $lineheight/4;

2095 white-space: nowrap;

2096 }

2097 }

2098 }

2099

2100 /* Rules for the user notes list */

2101

2102 .note_list {

2103 tr.creator {

2104 background-color: #eeeeee;

2105 }

2106

2107 td {

2108 padding: 3px;

2109 }

2110

2111 p {

2112 margin-bottom: 0px;

2113 }

2114 }

2115

2116 /* Rules for the notes interface */

2117

2118 .leaflet-popup-content .note {

2119 padding-top: $lineheight/2;

2120 }

2121

2122 .leaflet-popup-content .note {

2123 h2 {

2124 margin-bottom: $lineheight/2;

2125 }

2126

2127 div {

2128 margin-top: $lineheight/2;

2129 }

2130

2131 .permalink {

2132 position: absolute;

2133 top: $lineheight/4;

2134 left: $lineheight/4;

2135 min-width: 15px;

2136 min-height: 15px;

2137 }

2138

2139 .permalink span {

2140 display: none;

2141 padding-left: $lineheight;

2142 }

2143

2144 .permalink:hover span {

2145 display: block;

2146 }

2147

2148 .warning {

2149 display: block;

2150 background-color: #ffe0cc;

2151 padding: 4px 6px;

2152 margin-bottom: $lineheight/2;

2153 }

2154

2155 .comment_body {

2156 margin-top: 2px;

2157 margin-bottom: 2px;

2158

2159 p {

2160 margin-top: 0px;

2161 margin-bottom: 0px;

2162 }

2163 }

2164

2165 .comment {

2166 width: 100%;

2167 height: 100px;

2168 }

2169

2170 .buttons {

2171 margin-top: $lineheight/4;

2172 text-align: right;

2173 }

2174 }

2175

2176 /*

2177 * Rules for the iD editor

2178 */

2179

2180 .site-edit-id {

2181 #left,

2182 #large-title {

2183 display: none;

2184 }

2185

2186 #small-title {

2187 display: inline-block;

2188 width: 185px;

2189 height: 30px;

2190 font-size: 14px;

2191 margin: 0;

2192 background-color: #eee;

2193 border-bottom: 1px solid #ccc;

2194 text-align: center;

2195 padding-top: 7px;

2196 }

2197

2198 #content {

2199 left: 0;

2200 }

2201 }

2202

2203 .id-embed {

2204 width: 100%;

2205 height: 100%;

2206 }

2207

2208 /* Rules for rotating sidebar ads */

2209 .ad-container {

2210 display: block;

2211 height: 120px;

2212 overflow: hidden;

2213 position: relative;

2214 border-bottom: 1px solid #ccc;

2215 }

2216

2217 .ad {

2218 height: 100px;

2219 border: 0;

2220 background: #fff;

2221 }

2222

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

2224 .site-welcome {

2225 .center {

2226 text-align: center;

2227 }

2228

2229 .drop {

2230 margin-top: 20px;

2231 }

2232

2233 .sprite {

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

2235 background-size: 500px 250px;

2236 display: inline-block;

2237 }

2238

2239 .sprite.small {

2240 width: 50px;

2241 height: 50px;

2242 }

2243

2244 .sprite.x {

2245 background-position: -50px 0;

2246 }

2247

2248 .sprite.large {

2249 width: 350px;

2250 height: 200px;

2251 }

2252

2253 .sprite.one-map {

2254 background-position: 0 -50px;

2255 }

2256

2257 .sprite.term {

2258 margin-right: 10px;

2259 vertical-align: middle;

2260 }

2261

2262 .sprite.node {

2263 background-position: -100px 0;

2264 }

2265

2266 .sprite.way {

2267 background-position: -150px 0;

2268 }

2269

2270 .sprite.changeset {

2271 background-position: -200px 0;

2272 }

2273

2274 .sprite.editor {

2275 background-position: -250px 0;

2276 }

2277

2278 .sprite.question {

2279 background-position: -300px 0;

2280 }

2281

2282 .pad1 {

2283 padding: 10px;

2284 }

2285

2286 .pad2 {

2287 padding: 20px;

2288 }

2289

2290 .one-map {

2291 position: relative;

2292 }

2293

2294 .one-map-name {

2295 position: absolute;

2296 font-size: 15px;

2297 font-weight: bold;

2298 }

2299

2300 .one-map-project-name {

2301 font-size: 25px;

2302 top: 70px;

2303 left: 75px;

2304 }

2305

2306 .one-map-name-1,

2307 .one-map-name-5,

2308 .one-map-name-6 {

2309 text-align: center;

2310 display: inline-block;

2311 width: 200px;

2312 }

2313

2314 .one-map-name-1 {

2315 color: #c28d86;

2316 top: 30px;

2317 left: -70px;

2318 }

2319

2320 .one-map-name-2 {

2321 color: #c28d86;

2322 top: 25px;

2323 left: 172px;

2324 }

2325

2326 .one-map-name-3 {

2327 color: #94cacc;

2328 top: 45px;

2329 left: 140px;

2330 }

2331

2332 .one-map-name-4 {

2333 color: #94cacc;

2334 top: 48px;

2335 left: 270px;

2336 }

2337

2338 .one-map-name-5 {

2339 color: #85c589;

2340 top: 105px;

2341 left: 90px;

2342 }

2343

2344 .one-map-name-6 {

2345 color: #94cacc;

2346 top: 138px;

2347 left: 20px;

2348 }

2349

2350 .edit-located,

2351 .edit-geocoded,

2352 .edit-geolocated {

2353 display: none;

2354 }

2355

2356 .start-mapping,

2357 .sign-up {

2358 background: #EB6F67;

2359 color: #FFF;

2360 margin: auto;

2361 cursor: pointer;

2362 border: none;

2363 border-radius: 5px;

2364 border-bottom: 1px solid #A53931;

2365 padding: 20px 40px;

2366 font-size: 30px;

2367 text-decoration: none;

2368 }

2369

2370 .note-box {

2371 background-color: $offwhite;

2372 }

2373 }