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 .margin0 { margin-left:04.1666%; }

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

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

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

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

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

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

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

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

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

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

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

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

90 .pad1 { padding: $lineheight/2; }

91 .pad2 { padding: $lineheight; }

93 .fillL { background-color: white; }

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

96 * {

97 -moz-box-sizing: border-box;

98 -webkit-box-sizing: border-box;

99 box-sizing: border-box;

100 }

101

102 body {

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

104 font-size: $typeheight;

105 line-height: 1.6666;

106 color: #222;

107 background-color: #fff;

108 margin: 0px;

109 padding: 0px;

110 text-align: left;

111 }

112

113 body.slim {

114 background-color: #f0f0f0;

115 }

116

117 h1, h2, h3 {

118 margin-top: $lineheight/2;

119 margin-bottom: $lineheight;

120 font-weight: bold;

121 line-height: 1.2;

122 }

123

124 h1, h2 {

125 font-size: 32px;

126 }

127

128 #content h2 {

129 font-size: 21px;

130 }

131

132 h3 {

133 font-size: 21px;

134 margin-top: $lineheight/2;

135 margin-bottom: $lineheight;

136 }

137

138 h4,h5,h6 {

139 font-size: $typeheight;

140 margin-top: $lineheight/2;

141 margin-bottom: $lineheight/2;

142 font-weight: bold;

143 line-height: 1.5;

144 }

145

146 p, ul {

147 margin-bottom: $lineheight;

148 }

149

150 p > img {

151 width: auto;

152 max-width: 100%;

153 }

154

155 small, aside {

156 font-size: 12px;

157 }

158

159 h1:first-child,

160 h2:first-child,

161 h3:first-child,

162 h4:first-child,

163 h5:first-child,

164 h6:first-child {

165 margin-top: 0;

166 }

167

168 .column-1 {

169 width: 50%;

170 margin: 0 0 $lineheight/2 0;

171 }

172

173 .small_icon {

174 vertical-align: middle;

175 margin-right: $lineheight/4;

176 }

177

178 /* Rules for icons */

179

180 .icon {

181 display:inline-block;

182 vertical-align:top;

183 width:20px;

184 height:20px;

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

186 text-indent:-9999px;

187 overflow:hidden;

188 }

189

190 .icon-pre-text {

191 margin-right: 5px;

192 }

193

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

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

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

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

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

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

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

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

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

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

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

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

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

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

208

209 /* Rules for links */

210

211 a {

212 color: #00f;

213 text-decoration: none;

214 &:hover {

215 text-decoration: underline;

216 }

217 }

218

219 /* Rules for horizontal lines */

220

221 hr {

222 border: none;

223 background-color: #ccc;

224 color: #ccc;

225 height: 1px;

226 }

227

228 /* General styles for tables */

229

230 table {

231 width: 100%;

232 margin-bottom: $lineheight;

233 th, td {

234 text-align: left;

235 padding: $lineheight/4;

236 line-height: $lineheight;

237 }

238 th {

239 font-weight: bold;

240 vertical-align: top;

241 }

242 td {

243 vertical-align: middle;

244 }

245 }

246

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

248

249 #left {

250 position: absolute;

251 height: 100%;

252 width: 185px;

253 font-size: 11px;

254 line-height: 1.1;

255 z-index: 100;

256 border-right: 1px solid #ccc;

257 }

258

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

260

261 #logo {

262 display: block;

263 width: 170px;

264 min-width: 170px;

265 padding: $lineheight $lineheight/4;

266 text-align: center;

267 margin: auto;

268 }

269

270 #logo h1 {

271 font-size: 18px;

272 line-height: 1;

273 text-align: center;

274 margin: 0;

275 }

276

277 #logo h2 {

278 font-size: $lineheight/2;

279 line-height: 15px;

280 margin: 0;

281 }

282

283 /* Rules for the site name */

284

285 #small-title {

286 display: none;

287

288 img {

289 vertical-align: text-bottom;

290 }

291 }

292

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

294

295 .sidebar-copy {

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

297 p {

298 margin: $lineheight/4 0;

299 }

300 }

301 .sidebar-copy.intro {

302 border-top: 1px solid #ccc;

303 }

304

305 /*

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

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

308 * undergoing maintenance.

309 */

310

311 .sidebar-alert {

312 padding: $lineheight/4;

313 border-top: 1px solid #ccc;

314 margin-top: 4px;

315 margin-bottom: -5px;

316 background: #e00;

317 font-size: 12px;

318 font-weight: bold;

319 p {

320 margin: $lineheight/4;

321 }

322 }

323

324 /*

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

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

327 * donation drives.

328 */

329

330 .sidebar-notice {

331 padding: $lineheight/4;

332 border-top: 1px solid #ccc;

333 margin-top: 4px;

334 margin-bottom: -5px;

335 background: #ea0;

336 font-size: 12px;

337 p {

338 margin: $lineheight/4;

339 }

340 }

341

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

343

344 .left_menu {

345 left: 0px;

346 margin: 0;

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

348 font-size: 12px;

349 line-height: 1.25;

350 list-style-type: none;

351 border-bottom: 1px solid #ccc;

352 border-top: 1px solid #ccc;

353 img {

354 margin: $lineheight/2 0px;

355 }

356

357 ul {

358 padding: 0;

359 margin: 0;

360 }

361

362 li {

363 list-style-type: none;

364 padding: 0;

365 margin: 0;

366 }

367

368 h4 {

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

370 font-size: 12px;

371 margin: 0;

372 }

373 }

374

375 /*

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

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

378 * and the tag cloud on the traces pages.

379 */

380

381 .optionalbox {

382 left: 0px;

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

384 margin: $lineheight/4 0;

385 text-align: left;

386 }

387

388 /* Rules for the search box */

389

390 #search_field {

391 position: relative;

392

393 form {

394 width: 165px;

395 }

396

397 input[type="text"] {

398 width: 165px;

399 padding: 3px;

400 font-size: $typeheight;

401 line-height: 1.1;

402 height: 25px;

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

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

405 }

406

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

408 outline: none;

409 border: 1px solid #000;

410 }

411

412 input[type="submit"] {

413 border: 0;

414 margin: 0;

415 padding: 0;

416 width: 15px;

417 height: 15px;

418 min-width: 0;

419 text-indent: -1000px;

420 overflow: hidden;

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

422 position: absolute;

423 top: $lineheight/4;

424 right: $lineheight/4;

425 cursor: pointer;

426 }

427 }

428

429 .search_help {

430 margin: $lineheight/4 0 0 0;

431 }

432

433 /* Utility for de-emphasizing content */

434

435 .deemphasize {

436 color: #999;

437 a {

438 color: $blue;

439 }

440 }

441

442 /* Rules for donation request box */

443

444 a.donate {

445 display: block;

446 width: 163px;

447 padding: $lineheight/4;

448 border: 1px solid #AED1A0;

449 background: #cbeea7;

450 font-size: $typeheight;

451 line-height: 1.4;

452 text-align: center;

453 border-radius: 2px;

454 color: #222;

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

456

457 &:hover {

458 background: #9ed485;

459 text-decoration: none;

460 }

461 }

462

463 /* Rules for Creative Commons logo button */

464

465 #cclogo {

466 margin: $lineheight/2 0;

467 float: right;

468 }

469

470 /* Rules for tabbed navigation bar */

471

472 #top-bar {

473 position: relative;

474 margin-left: 185px;

475 height: 30px;

476 border-bottom: 1px solid #ccc;

477 background: white;

478 z-index: 100;

479 }

480

481 .site-edit #top-bar,

482 .site-index #top-bar,

483 .site-export #top-bar {

484 position: fixed;

485 top: 0;

486 left: 0;

487 right: 0;

488 }

489

490 #tabnav {

491 height: 29px;

492 margin-bottom:0;

493 overflow: hidden;

494 li {

495 display: inline;

496 }

497 a, a:link, a:visited {

498 float: left;

499 font-weight: bold;

500 padding: 3px $lineheight/2;

501 text-decoration: none;

502 color: #333;

503 float: left;

504 margin-right: 1px;

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

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

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

508 transition: color 200ms ease-in;

509 }

510 }

511

512 .site-index #tabnav a#viewanchor,

513 .site-edit #tabnav a#editanchor,

514 .changeset-list #tabnav a#historyanchor {

515 border-bottom: 1px solid #aaa;

516 background: #9ed485;

517 color: #000;

518 }

519

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

521 text-decoration: underline;

522 }

523

524 #tabnav a:link.disabled,

525 #tabnav a:visited.disabled,

526 #tabnav a:link:hover.disabled,

527 #tabnav a:visited:hover.disabled {

528 color: #ccc;

529 cursor: default;

530 &:hover {

531 text-decoration: none;

532 }

533 }

534

535 /* Utility for styling notification numbers */

536

537 .count-number {

538 padding: 2px $lineheight/4;

539 border-radius: 2px;

540 background: #d7d7ff;

541 margin: 0 2px;

542 font-size: 11px;

543 color: #333;

544 }

545

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

547

548 #greeting {

549 float: right;

550 padding-top: 3px;

551 margin-right: $lineheight/4;

552 }

553

554 .greeting-bar-unread {

555 font-weight: bold;

556 }

557

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

559

560 #noscript {

561 z-index: 20000000;

562 position: absolute;

563 top: 15px;

564 left: 15px;

565 }

566

567 /* Rules for bootstrap tooltips */

568

569 .tooltip {

570 position: absolute;

571 display: none;

572 color: #333;

573 text-align: left;

574 font-size: 12px;

575 max-width: 250px;

576 }

577

578 .tooltip.in {

579 opacity: 0.8;

580 z-index: 1030;

581 height: auto;

582 display: block;

583 }

584

585 .tooltip.top {

586 margin-top: -10px;

587 text-align: center;

588 }

589

590 .tooltip.right {

591 margin-left: 10px;

592 }

593

594 .tooltip.bottom {

595 margin-top: 10px;

596 text-align: center;

597 }

598

599 .tooltip.left {

600 margin-left: -10px;

601 text-align: right;

602 }

603

604 .tooltip-inner {

605 display: inline-block;

606 padding: 10px;

607 font-weight: normal;

608 background-color: white;

609 }

610

611 .tooltip-arrow {

612 position: absolute;

613 width: 0;

614 height: 0;

615 border-color: transparent;

616 border-style: solid;

617 }

618

619 .tooltip.top .tooltip-arrow {

620 bottom: -5px;

621 left: 50%;

622 margin-left: -5px;

623 border-top-color: white;

624 border-width: 5px 5px 0;

625 }

626

627 .tooltip.right .tooltip-arrow {

628 top: 50%;

629 left: -5px;

630 margin-top: -5px;

631 border-right-color: white;

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

633 }

634

635 .tooltip.left .tooltip-arrow {

636 top: 50%;

637 right: -5px;

638 margin-top: -5px;

639 border-left-color: white;

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

641 }

642

643 .tooltip.bottom .tooltip-arrow {

644 top: -5px;

645 left: 50%;

646 margin-left: -5px;

647 border-bottom-color: white;

648 border-width: 0 5px 5px;

649 }

650

651 /* Rules for Leaflet maps */

652

653 .leaflet-control .control-button {

654 display: block;

655 height: 40px;

656 width: 40px;

657 background-color: #333;

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

659 -bottom: 1px solid #333;

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

661 margin-bottom: 10px;

662 outline: none;

663

664 &:hover {

665 background-color: black;

666 }

667

668 &.active {

669 background-color: #9ed485;

670 }

671

672 &.disabled {

673 background-color: #333;

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

675 cursor: default;

676 }

677

678 .icon {

679 margin: 10px;

680 }

681 }

682

683 .leaflet-control .zoomin,

684 .control-layers .control-button {

685 margin-bottom: 0px;

686 border-radius: 4px 0 0 0;

687 }

688

689 .site .leaflet-control .zoomout,

690 .control-key .control-button {

691 margin-bottom: 0;

692 border-radius: 0;

693 }

694

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

696 .control-locate .control-button,

697 .control-share .control-button {

698 border-radius: 0 0 0 4px;

699 }

700

701 /* Rules for the home page */

702

703 .site-export #map,

704 .site-index #map,

705 .site-edit #map {

706 height: 100%;

707 overflow: hidden;

708 }

709

710 #map-ui {

711 display: none;

712 position: relative;

713 float: right;

714 width: 250px;

715 height: 100%;

716 background: white;

717 border-left: 1px solid #CCC;

718 overflow: auto;

719

720 .section {

721 border-bottom: 1px solid #DDD;

722 padding: 15px;

723 }

724

725 a.close-button {

726 float: right;

727 padding:5px;

728 font-size:20px;

729 line-height:10px;

730 color:#222;

731 border:1px solid #ddd;

732 }

733 }

734

735 .layers-ui,

736 .share-ui {

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

738 margin-bottom: 0;

739 }

740 }

741

742 .layers-ui {

743 li {

744 border-radius: 4px;

745 overflow: hidden;

746 margin-bottom: 10px;

747 }

748

749 label {

750 display: block;

751 padding: 5px 5px 5px 7px;

752 background-color: #eee;

753 cursor: pointer;

754 }

755

756 li.active label {

757 background-color: #ccc;

758 }

759

760 .base-layers {

761 .leaflet-container {

762 width: 100%;

763 height: 50px;

764 cursor: pointer;

765 }

766 }

767 }

768

769 .share-ui {

770 .share-tabs {

771 margin-bottom: 10px;

772

773 a {

774 color: #fff;

775 text-decoration: none;

776 background-color: $lightblue;

777 padding: 5px 10px;

778 }

779

780 a:first-child {

781 border-right: 1px solid #fff;

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

783 }

784

785 a:last-child {

786 border-left: 1px solid #fff;

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

788 }

789

790 a.active {

791 background-color: $blue;

792 }

793 }

794

795 .share-tab {

796 display: none;

797 }

798

799 .share-link {

800 input[type=text],

801 textarea {

802 width: 100%;

803 font-family: monospace;

804 font-size: small;

805 line-height: 1.3;

806 }

807 }

808

809 .share-image {

810 label {

811 margin-right: 10px;

812 }

813 }

814

815 #embed_html {

816 resize: vertical;

817 }

818

819 #mapnik_scale {

820 width: 100px;

821 }

822 }

823

824 .leaflet-top.leaflet-right {

825 top: $lineheight/2 !important;

826 .leaflet-control {

827 margin-right: 0px !important;

828 margin-top: 0px !important;

829 }

830 }

831

832 .leaflet-popup-scrolled {

833 padding-right: $lineheight;

834 border-bottom: 0px !important;

835 border-top: 0px !important;

836 }

837

838 .leaflet-popup-content-wrapper {

839 border-radius: 4px !important;

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

841 }

842

843 /* Rules for edit menu */

844

845 .menuicon {

846 padding: 0 $lineheight/4;

847 font-weight: normal;

848 display: inline-block;

849 &:hover {

850 text-decoration: none !important;

851 }

852 }

853

854 .menu {

855 display: none;

856 z-index: 10000;

857 position: absolute;

858 background-color: #ffffff;

859 border: 1px solid $lightgrey;

860 border-top: 0px;

861 ul {

862 margin: 0px;

863 }

864 li {

865 padding: 2px $lineheight/4;

866 border-top: 1px solid #eee;

867 white-space: nowrap;

868 }

869 }

870

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

872

873 #attribution {

874 display: none;

875 }

876

877 .attribution_license,

878 .attribution_project {

879 text-align: left;

880 }

881

882 .attribution_notice {

883 text-align: center;

884 }

885

886 /* Rules for the popout map sidebar */

887

888 #sidebar {

889 display: none;

890 position: relative;

891 float: left;

892 border-right: 1px solid $lightgrey;

893 width: 33.3333%;

894 height: 100%;

895 ul {

896 margin-bottom: 0;

897 &:last-child {

898 border-bottom: 1px solid #ccc;

899 }

900 li {

901 margin-bottom: $lineheight/4;

902 &:last-child {

903 margin-bottom: 0;

904 }

905 }

906 }

907 }

908

909 .sidebar_heading {

910 position: relative;

911 padding: $lineheight/2 $lineheight;

912 z-index: 9999;

913 background: $offwhite;

914 border-bottom: 1px solid #ccc;

915 h4 {

916 margin: 0;

917 }

918 }

919

920 .sidebar_close {

921 position: absolute;

922 height: $lineheight;

923 top: 0px;

924 bottom: 0;

925 right: $lineheight;

926 margin: auto;

927 }

928

929 #sidebar_content {

930 position: relative;

931 margin-bottom: 20px;

932 overflow: auto;

933 height: 100%;

934 width: 100%;

935 h4 {

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

937 margin-top: $lineheight/2;

938 margin-bottom: 0;

939 border-bottom: 1px solid #ddd;

940 }

941 }

942

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

944

945 #mapkey {

946 .mapkey-table-key img {

947 display: block;

948 margin-left: auto;

949 margin-right: auto;

950 }

951 td {

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

953 }

954 }

955

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

957

958 .search_searching {

959 margin-top: $lineheight/4;

960 margin-bottom: $lineheight/4;

961 }

962

963 .search_results_entry {

964 margin-bottom: 0;

965

966 .search_details {

967 display: block;

968 text-align: right;

969 }

970 }

971

972 .search_results_entry .search_searching {

973 text-align: center;

974 margin: $lineheight auto;

975 width: $lineheight;

976 display: block;

977 }

978

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

980

981 .search_results_error {

982 color: #f00;

983 }

984

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

986

987 #browse_content {

988 position: relative;

989 .browse_show_list.button {

990 position: absolute;

991 left: $lineheight;

992 right: $lineheight;

993 bottom: -40px;

994 margin-bottom: 0;

995 }

996 a.more-details {

997 position: absolute;

998 top: 0;

999 right: $lineheight;

1000 }

1001 ul li {

1002 margin-bottom: 0;

1003 }

1004 }

1005

1006 .browse_details {

1007 position: relative;

1008 }

1009

1010 .browse_status {

1011 display: none;

1012 }

1013

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

1015

1016 .export_bounds {

1017 text-align: center;

1018 }

1019

1020 .export_area_inputs {

1021 margin-bottom: $lineheight/2;

1022 input[type="text"] {

1023 width: 80px;

1024 margin-bottom: 5px;

1025 }

1026 }

1027

1028 .export_bound {

1029 margin: $lineheight/4;

1030 }

1031

1032 /* Rules for the main content area */

1033

1034 #content {

1035 position: relative;

1036 }

1037

1038 .site-edit #content,

1039 .site-index #content,

1040 .site-export #content {

1041 position: fixed;

1042 padding: 0;

1043 top: 30px; bottom: 0;

1044 left: 184px; right: 0;

1045 border-left: 1px solid #ccc;

1046 }

1047

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

1049 .site-copyright,

1050 .site-welcome,

1051 .user-new {

1052 #content.pad2 {

1053 padding: 0;

1054 }

1055 }

1056

1057 .user-new .content-heading {

1058 height: 200px;

1059 }

1060

1061 .wrapper {

1062 margin-left: 184px;

1063 border-left: 1px solid #ccc;

1064 text-align: left;

1065 }

1066

1067 #content.maximised {

1068 top: 0;

1069 left: 0;

1070 right: 0;

1071 bottom: 0;

1072 border: 0;

1073 z-index: 1000;

1074 }

1075

1076 #slim_container {

1077 width: 100%;

1078 }

1079

1080 #slim_container_content {

1081 max-width: 50em;

1082 background-color: #FFFFFF;

1083 margin: $lineheight/2 auto;

1084 padding: 3px;

1085 border-radius: 25px;

1086 -moz-border-radius: 25px;

1087 border: 1px solid #e6e6e6;

1088 }

1089

1090 #slim_content {

1091 margin: $lineheight/2;

1092 margin-top: 95px;

1093 max-width: 50em;

1094

1095 .content-heading {

1096 margin-bottom: 15px;

1097 }

1098 }

1099

1100 #slim_header {

1101 margin: 30px $lineheight/2;

1102 position: absolute;

1103 top: 0px;

1104 margin-right: $lineheight/4;

1105 img {

1106 vertical-align: middle;

1107 margin-bottom: $lineheight/4;

1108 margin-right: $lineheight/4;

1109 }

1110 }

1111

1112 .content-heading {

1113 position: relative;

1114 padding: $lineheight;

1115 background: $offwhite;

1116 h1, h2 {

1117 margin-bottom: $lineheight/2;

1118 line-height: 100%;

1119 &:last-child {

1120 margin-bottom: 0;

1121 }

1122 }

1123 p {

1124 margin-top: $lineheight/2;

1125 margin-bottom: 0px;

1126 }

1127 }

1128

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

1130

1131 .content_map {

1132 position: relative;

1133 width: 45%;

1134 height: 400px;

1135 border: 1px solid #ccc;

1136 margin-bottom: $lineheight;

1137 float: right;

1138 }

1139

1140 .content_map #small_map {

1141 height: 100%;

1142 width: 100%;

1143 margin-bottom: $lineheight;

1144 }

1145

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

1147

1148 #changeset_list {

1149 width: 100%;

1150 ul {

1151 padding: $lineheight/2 0;

1152 margin-bottom: 0px;

1153 border-top: 1px solid #ccc;

1154 &:last-child {

1155 border-bottom: 1px solid #ccc;

1156 }

1157 }

1158 .selected {

1159 background: #FFFFC0;

1160 }

1161 .date,

1162 .user {

1163 border-left: 1px solid #ccc;

1164 padding-left: $lineheight/4;

1165 margin-right: $lineheight/4;

1166 }

1167 }

1168

1169 #changeset_list_map_wrapper {

1170 position: absolute;

1171 width: 50%;

1172 height: 490px;

1173 top: 0;

1174 right: 0;

1175 }

1176

1177 #changeset_list_map_wrapper.scrolled {

1178 position: fixed;

1179 }

1180

1181 #changeset_list_map {

1182 position: absolute;

1183 bottom: $lineheight;

1184 top: $lineheight;

1185 right: $lineheight;

1186 left: $lineheight;

1187 border: 1px solid #ccc;

1188 }

1189

1190 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1191 margin-left: 93px;

1192 }

1193

1194 /* Rules for the data browser */

1195

1196 .browse-section {

1197 border-top: 1px solid #ccc;

1198 margin-top: $lineheight/2;

1199 padding-top: $lineheight/2;

1200 &:first-child {

1201 margin-top: 0;

1202 }

1203 .warning {

1204 background-color: #ffe0cc;

1205 margin: 0px;

1206 padding: 4px 6px;

1207 max-width: 100%;

1208 }

1209 h4, p {

1210 margin-bottom: $lineheight/4;

1211 }

1212 ul, .bbox, .geo {

1213 display: inline-block;

1214 vertical-align: top;

1215 max-width: 65%;

1216 }

1217 ul p {

1218 margin-left: 0;

1219 margin-bottom: 0;

1220 }

1221 h4 {

1222 float: left;

1223 width: 33.3333%;

1224 display: inline-block;

1225 vertical-align: top;

1226 }

1227 }

1228

1229 .bbox {

1230 div {

1231 width: 33.3333%;

1232 text-align: center;

1233 padding: $lineheight/4 0;

1234 overflow: hidden;

1235 text-overflow: ellipsis;

1236 float: left;

1237 }

1238 .max_lat,

1239 .min_lat {

1240 margin-left: auto;

1241 margin-right: auto;

1242 width: 100%;

1243 }

1244 }

1245

1246 #browse_map .geolink {

1247 display: none;

1248 }

1249

1250 #browse_map .secondary-actions {

1251 margin-bottom: $lineheight/2;

1252 }

1253

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

1255

1256 #trace_list {

1257 font-size: $lineheight/2;

1258 border-width: 0px;

1259 text-align: right;

1260

1261 .trace_summary {

1262 font-size: 12px;

1263 color: gray;

1264 }

1265

1266 .trace_pending {

1267 color: red;

1268 }

1269

1270 .trace_public {

1271 color: green;

1272 }

1273

1274 .trace_identifiable {

1275 color: green;

1276 }

1277

1278 .trace_trackable {

1279 color: red;

1280 }

1281

1282 .trace_private {

1283 color: red;

1284 }

1285 }

1286

1287 /* Rules for the user profile page */

1288

1289 #userinformation {

1290

1291 min-height: 100px;

1292 .userinformation-inner {

1293 float: left;

1294 }

1295 h2 {

1296 margin-top: 0;

1297 }

1298 .user-description {

1299 width: 100%;

1300 clear: both;

1301 }

1302 .deemphasize {

1303 margin: 0;

1304 }

1305 }

1306

1307 .admin-user-info small {

1308 margin-bottom: $lineheight/2;

1309 display: inline;

1310 margin-right: $lineheight;

1311 }

1312

1313 .activity-block {

1314 clear: left;

1315 border-bottom: 1px solid #ccc;

1316 padding-bottom: $lineheight;

1317 float: left;

1318 h3 {

1319 margin-bottom: $lineheight/2;

1320 }

1321 }

1322

1323 .contact-activity {

1324 margin-top: $lineheight;

1325 width: 100%;

1326 }

1327

1328 .activity-details p {

1329 margin-left: 70px;

1330 margin-bottom: 0;

1331 }

1332

1333 #friends-container .contact-activity ul {

1334 margin-left: 70px;

1335 }

1336

1337 .user-view {

1338 p#no_home_location {

1339 margin: $lineheight;

1340 }

1341 .user_thumbnail {

1342 margin-top: $lineheight/4;

1343 float: left;

1344 }

1345 }

1346

1347 /* Rules for the user map */

1348

1349 .content_map .leaflet-popup-content {

1350 margin: $lineheight/2;

1351 min-height: 50px;

1352 }

1353

1354 /* Rules for user popups on maps */

1355

1356 .user_popup {

1357 min-width: 200px;

1358 p {

1359 padding: 0 0 5px 0;

1360 margin-top: 0 0 0 60px;

1361 font-size: 12px;

1362 }

1363 img.user_thumbnail {

1364 float: left;

1365 margin: 0 $lineheight/2 0 0;

1366 }

1367 }

1368

1369 /* Rules for the user list */

1370

1371 #user_list {

1372 font-size: $lineheight/2;

1373 width: 100%;

1374

1375 tr {

1376 vertical-align: middle;

1377 }

1378

1379 p {

1380 margin-top: 0px;

1381 margin-bottom: 0px;

1382 }

1383 }

1384

1385 #user_list_actions {

1386 float: right;

1387 margin-top: $lineheight/2;

1388 }

1389

1390 /* Rules for the diary list page */

1391

1392 .diary_entry-list img.user_thumbnail {

1393 float: left;

1394 }

1395

1396 .diary_post {

1397 max-width: 740px;

1398 position: relative;

1399 margin-top: $lineheight/2;

1400 padding-top: $lineheight;

1401 border-top: 1px solid #ccc;

1402

1403 &:first-child {

1404 margin-top: 0;

1405 border-top: 0;

1406 padding-top: 0;

1407 }

1408 h1, h2 {

1409 font-size: 21px;

1410 line-height: 1em;

1411 }

1412 small.deemphasize {

1413 float: left;

1414 display: block;

1415 }

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

1417 }

1418

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

1420 display: inline;

1421 }

1422

1423 #content .post_heading {

1424 margin-bottom: $lineheight;

1425 h2 {

1426 margin-top: 0;

1427 margin-bottom: $lineheight/2;

1428 font-size: 24px;

1429 }

1430 }

1431

1432 /* Rules for the diary entry page */

1433

1434 .diary_entry {

1435 #map {

1436 position: relative;

1437 width: 90%;

1438 height: 400px;

1439 border: 1px solid #ccc;

1440 display: none;

1441 margin-bottom: $lineheight;

1442 }

1443 #newcomment {

1444 border-top: 1px solid #ccc;

1445 padding-top: $lineheight;

1446 margin-top: $lineheight/2;

1447 }

1448 .comments {

1449 max-width: 740px;

1450 }

1451 .diary-comment {

1452 margin-top: $lineheight/2;

1453 border-top: 1px dashed #ccc;

1454 padding-top: $lineheight/2;

1455 &:first-child {

1456 margin-top: $lineheight;

1457 padding-top: $lineheight;

1458 border-top: 1px solid #ccc;

1459 }

1460 p {

1461 margin-bottom: $lineheight/2;

1462 }

1463 .comment-heading {

1464 margin-bottom: 0;

1465 margin-top: 0;

1466 }

1467 }

1468 }

1469

1470 .diary_entry-view img.user_thumbnail {

1471 float: left;

1472 }

1473

1474 /* Rules for the log in page */

1475

1476 #login_openid_buttons {

1477 margin-bottom: 0;

1478 }

1479

1480 #login_openid_buttons li {

1481 float: left;

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

1483 }

1484

1485 /* Rules for the account confirmation page */

1486

1487 #terms {

1488 .legale {

1489 border: 1px solid #ccc;

1490 padding: $lineheight;

1491 margin-bottom: $lineheight;

1492 overflow: auto;

1493 height: 10em;

1494

1495 &:p#last {

1496 margin-bottom: 0px;

1497 }

1498

1499 &:ol {

1500 margin-bottom: 0px;

1501 }

1502

1503 &:img {

1504 display: block;

1505 margin: $lineheight auto inherit auto;

1506 }

1507 }

1508

1509 form.sign {

1510 input[type=submit] {

1511 float: left;

1512 }

1513 #decline {

1514 background: $grey;

1515 &:hover {

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

1517 }

1518 }

1519 }

1520 fieldset {

1521 margin-bottom: $lineheight;

1522 }

1523 #contributorGuidance {

1524 background-color: $offwhite;

1525 border-radius: 4px;

1526 -moz-border-radius: 4px;

1527 }

1528 .signing-buttons {

1529 height: 50px;

1530 }

1531 }

1532

1533 /* Rules for the account settings page */

1534

1535 #accountForm .user_map {

1536 position: relative;

1537 width: 500px;

1538 height: 400px;

1539 border: 1px solid #ccc;

1540 }

1541

1542 #accountForm .user_image {

1543 margin-bottom: 0;

1544 }

1545

1546 #accountForm #user_image {

1547 margin-left: 20px;

1548 }

1549

1550 #accountForm ul.accountImage-options {

1551 margin-left: 120px;

1552 }

1553

1554 .nohome .location {

1555 display: none;

1556 }

1557

1558 #homerow .message {

1559 display: none;

1560 }

1561

1562 .nohome .message {

1563 display: inline !important;

1564 }

1565

1566 .content_map.settings_map {

1567 width: 50%;

1568 float: none;

1569 }

1570

1571 /* Rules for the oauth settings page */

1572

1573 .oauth_clients .buttons .oauth-edit {

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

1575 }

1576

1577 .oauth_clients .buttons .oauth-delete {

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

1579 }

1580

1581 /* Rules for messages pages */

1582

1583 .messages {

1584 width: 100%;

1585 border: 1px solid #ddd;

1586

1587 input[type="submit"] {

1588 margin: auto;

1589 }

1590 tbody tr {

1591 border-top: 1px solid #ccc;

1592 }

1593

1594 .inbox-row {

1595 background: #f8f8ff;

1596 }

1597

1598 .inbox-row-unread {

1599 background:#CBEEA7;

1600 }

1601

1602 .right {

1603 float: right;

1604 }

1605

1606 tr td,

1607 tr th {

1608 padding: $lineheight/4;

1609 }

1610 p:last-child,

1611 h2:last-child,

1612 h3:last-child,

1613 ol:last-child,

1614 ul:last-child {

1615 margin-bottom:0;

1616 }

1617 tr td {

1618 height: 30px;

1619 border-right: 1px solid $lightgrey;

1620 }

1621 }

1622

1623 .inbox-row .inbox-mark-read {

1624 display: none;

1625 }

1626

1627 .info-line {

1628 margin-bottom: $lineheight;

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

1630 border-bottom: 1px solid #ccc;

1631

1632 form, form div {

1633 display: inline;

1634 }

1635 }

1636

1637 .info-line .user_thumbnail_tiny {

1638 vertical-align: middle;

1639 }

1640

1641 .inbox-mark-unread,

1642 .inbox-mark-read,

1643 .inbox-delete {

1644 width: 1%;

1645 }

1646

1647 .inbox-row-unread .inbox-mark-unread {

1648 display: none;

1649 }

1650

1651 .message-read .message-buttons {

1652 margin-top: $lineheight;

1653 padding-top: $lineheight;

1654 border-top: 1px solid $lightgrey;

1655 }

1656

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

1658 border-radius: 0;

1659 }

1660

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

1662

1663 .flash {

1664 padding: $lineheight;

1665 &#error {

1666 background-color: #ff7070;

1667 }

1668 &#warning {

1669 background-color: #ffe0cc;

1670 }

1671 &#notice {

1672 background-color: #CBEEA7;

1673 }

1674 }

1675

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

1677

1678 .field_with_errors {

1679 padding: 2px;

1680 background-color: #ff7070;

1681 display: table;

1682 }

1683

1684 /* Rules for rails validation error boxes */

1685

1686 #errorExplanation {

1687 width: 400px;

1688 border: 2px solid #ff7070;

1689 padding: 0 $lineheight/2;

1690 margin-bottom: $lineheight;

1691 background-color: #f0f0f0;

1692

1693 h2 {

1694 margin: 0 -10px 10px -10px;

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

1696 font-weight: bold;

1697 font-size: 12px;

1698 background-color: #c00;

1699 color: #fff;

1700 text-align: left;

1701 }

1702

1703 p {

1704 color: #333;

1705 margin-bottom: 0px;

1706 padding: $lineheight/4;

1707 }

1708

1709 ul {

1710 padding-left: $lineheight;

1711

1712 li {

1713 font-size: 12px;

1714 list-style: disc;

1715 }

1716 }

1717 }

1718

1719 /* Rules for forms */

1720

1721 .standard-form {

1722 fieldset {

1723 margin-bottom: $lineheight;

1724 }

1725 label.standard-label {

1726 display: block;

1727 margin-bottom: $lineheight/4;

1728 font-size: $typeheight;

1729 font-weight: bold;

1730 line-height: 1.5;

1731 }

1732 label.standard-label.secondary {

1733 display: inline-block;

1734 font-weight: normal;

1735 }

1736 .form-help {

1737 font-weight: normal;

1738 }

1739 .form-column {

1740 float: left;

1741 margin-right: 20px;

1742 }

1743 .form-divider {

1744 margin-top: $lineheight;

1745 padding-top: $lineheight;

1746 border-top: 1px solid $lightgrey;

1747 }

1748 .form-row {

1749 margin-bottom: $lineheight/2;

1750 }

1751 .form-list {

1752 margin-bottom: 0;

1753 }

1754 .form-list li {

1755 margin-bottom: 5px;

1756 }

1757 input[type="checkbox"],

1758 input[type="radio"] {

1759 float: left;

1760 margin-top: 5px;

1761 }

1762 }

1763

1764 #remember_me_openid {

1765 display: block;

1766 }

1767

1768 input[type="checkbox"],

1769 input[type="radio"] {

1770 margin-right: 5px;

1771 }

1772

1773 input[type="text"],

1774 input[type="email"],

1775 input[type="url"],

1776 input[type="password"],

1777 textarea {

1778 border: 1px solid #ccc;

1779 padding: 2px 5px;

1780 margin: 0;

1781 width: 200px;

1782 }

1783

1784 textarea {

1785 padding: 5px;

1786 width: 100%;

1787 }

1788

1789 /* Rules for user images */

1790

1791 img.user_image {

1792 max-width: 100px;

1793 max-height: 100px;

1794 border: 1px solid #ccc;

1795 margin-bottom: $lineheight;

1796 float: left;

1797 margin-right: $lineheight;

1798 }

1799

1800 img.user_thumbnail {

1801 max-width: 50px;

1802 max-height: 50px;

1803 border: 1px solid #ccc;

1804 margin-right: $lineheight;

1805 }

1806

1807 img.user_thumbnail_tiny {

1808 max-width: 25px;

1809 max-height: 25px;

1810 border: 1px solid #ccc;

1811 }

1812

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

1814

1815 .nowrap {

1816 white-space: nowrap;

1817 }

1818

1819 /* Rules for geo microformats */

1820

1821 abbr.geo {

1822 border-bottom: none;

1823 }

1824

1825 /* Rules for RSS buttons */

1826

1827 .rsssmall {

1828 position: relative;

1829 top: 5px;

1830 }

1831

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

1833

1834 ul.secondary-actions {

1835 font-style: normal;

1836 margin-bottom: 0;

1837 margin-left: 0;

1838 &.pager {

1839 display: inline-block;

1840 margin-right: 60px;

1841 }

1842 li {

1843 display: block;

1844 float: left;

1845 list-style: none;

1846 border-left: 1px solid #ccc;

1847 padding-left: $lineheight/4;

1848 margin-right: $lineheight/4;

1849 &:first-child {

1850 border-left: 0;

1851 padding-left: 0;

1852 }

1853 &:last-child {

1854 margin-right: 0px;

1855 }

1856 }

1857 }

1858

1859 /* Utility for managing inner content areas */

1860

1861 .inner22 { padding: $lineheight;}

1862

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

1864

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

1866

1867 .inner02 { padding: 0 $lineheight;}

1868

1869 /* Utility for general button styles */

1870

1871 input[type="button"],

1872 input[type="submit"],

1873 input[type="reset"],

1874 a.button {

1875 cursor: pointer;

1876 border: 0;

1877 display: inline-block;

1878 line-height: 20px;

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

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

1881 min-width: 120px;

1882 margin: 0 0 $lineheight/2 0;

1883 color: white;

1884 background: $blue;

1885 text-align: center;

1886 border-radius: 2px;

1887 -moz-border-radius: 2px;

1888 &:hover {

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

1890 text-decoration: none;

1891 }

1892 &.deemphasize {

1893 background: $lightblue;

1894 &:hover {

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

1896 }

1897 }

1898 &:disabled {

1899 background: $lightgrey;

1900 &:hover {

1901 background: $lightgrey;

1902 }

1903 }

1904 &:last-child {

1905 margin-bottom: 0;

1906 }

1907 }

1908

1909 .buttons {

1910 min-width: 200px;

1911 input[type="submit"],

1912 input[type="button"],

1913 input[type="reset"],

1914 .button {

1915 box-sizing: border-box;

1916 float: left;

1917 border-radius: 0;

1918 margin:0;

1919 min-width: 100px;

1920 max-width: 180px;

1921 border-right:1px solid white;

1922 text-overflow: ellipsis;

1923 white-space: nowrap;

1924 overflow: hidden;

1925 }

1926 input:first-child,

1927 .button:first-child {

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

1929 }

1930 input:last-child,

1931 .button:last-child {

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

1933 border-right-width: 0;

1934 }

1935 input:only-child,

1936 .button:only-child,

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

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

1939 border-radius:2px;

1940 border-right-width: 0;

1941 }

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

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

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

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

1946 border-right-width: 0;

1947 }

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

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

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

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

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

1953 }

1954 }

1955

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

1957

1958 .table0,

1959 .item0 {

1960 background: $offwhite;

1961 }

1962

1963 .table1,

1964 .item1 {

1965 background: #fff;

1966 }

1967

1968 /* Rules for OpenID logo */

1969

1970 .openid_logo {

1971 vertical-align: text-bottom;

1972 border: 0;

1973 }

1974

1975 /* Rules for rich text */

1976

1977 .richtext,

1978 .prose {

1979 h1, h2 {

1980 padding-bottom: $lineheight/2;

1981 border-bottom: 1px dashed #cccccc;

1982 margin-bottom: $lineheight/2;

1983 }

1984

1985 h1 {

1986 font-size: 24px;

1987 }

1988

1989 h2 {

1990 font-size: 18px;

1991 }

1992

1993 h3 {

1994 font-size: $typeheight;

1995 }

1996

1997 code {

1998 font-size: 13px;

1999 background: #e8e8e8;

2000 padding: 2px 3px;

2001 }

2002

2003 pre {

2004 font-size: 13px;

2005 background: #e8e8e8;

2006 padding: 2px 3px;

2007

2008 code {

2009 padding: 0;

2010 }

2011 }

2012

2013 img {

2014 padding: $lineheight;

2015 background-color: $offwhite;

2016 display: block;

2017 max-width: 100%;

2018 margin: auto;

2019 }

2020

2021 blockquote {

2022 border-left: $lineheight solid $offwhite;

2023 padding-left: $lineheight;

2024 margin: 0;

2025 color: #7E7E7E;

2026 }

2027

2028 ul, ol {

2029 padding-left: $lineheight;

2030 margin-bottom: $lineheight;

2031 margin-left: $lineheight;

2032 }

2033

2034 ul li {

2035 list-style: disc;

2036 }

2037

2038 ol li {

2039 list-style: decimal;

2040 }

2041 }

2042

2043 .diary_post .richtext {

2044 margin-top: $lineheight;

2045 }

2046

2047 .comments .richtext {

2048 margin-left: 70px;

2049 margin-top: 0;

2050 }

2051

2052 /* Rules for rich text editors */

2053

2054 .richtext_container {

2055 margin-bottom: $lineheight;

2056

2057 .richtext_content {

2058 width: 50%;

2059 display: inline-block;

2060 vertical-align: top;

2061

2062 .richtext_preview {

2063 display: inline-block;

2064 padding: $lineheight;

2065 background-color: $offwhite;

2066 overflow-x: auto;

2067

2068 &.loading {

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

2070 background-repeat: no-repeat;

2071 background-position: center;

2072 }

2073

2074 > :first-child {

2075 margin-top: 0px;

2076 }

2077 }

2078 }

2079

2080 .richtext_help {

2081 display: inline-block;

2082 vertical-align: top;

2083 margin-left: 15px;

2084 background-color: #f8f8ff;

2085 padding: $lineheight/2;

2086 width: 220px;

2087

2088 ul {

2089 margin-bottom: 0;

2090 }

2091

2092 h4.heading, li {

2093 border-bottom: 1px solid #ccc;

2094 margin-bottom: $lineheight/4;

2095 padding-bottom: $lineheight/4;

2096 }

2097

2098 li h4, li span, li p {

2099 display: inline-block;

2100 vertical-align: top;

2101 font-size: 11px;

2102 }

2103

2104 li h4 {

2105 width: 40%;

2106 margin: 0;

2107 }

2108

2109 li span, li p {

2110 width: 50%;

2111 margin-left: $lineheight/2;

2112 margin-bottom: $lineheight/4;

2113 white-space: nowrap;

2114 }

2115 }

2116 }

2117

2118 /* Rules for the user notes list */

2119

2120 .note_list {

2121 tr.creator {

2122 background-color: #eeeeee;

2123 }

2124

2125 td {

2126 padding: 3px;

2127 }

2128

2129 p {

2130 margin-bottom: 0px;

2131 }

2132 }

2133

2134 /* Rules for the notes interface */

2135

2136 .leaflet-popup-content .note {

2137 padding-top: $lineheight/2;

2138 }

2139

2140 .leaflet-popup-content .note {

2141 h2 {

2142 margin-bottom: $lineheight/2;

2143 }

2144

2145 div {

2146 margin-top: $lineheight/2;

2147 }

2148

2149 .permalink {

2150 position: absolute;

2151 top: $lineheight/4;

2152 left: $lineheight/4;

2153 min-width: 15px;

2154 min-height: 15px;

2155 }

2156

2157 .permalink span {

2158 display: none;

2159 padding-left: $lineheight;

2160 }

2161

2162 .permalink:hover span {

2163 display: block;

2164 }

2165

2166 .warning {

2167 display: block;

2168 background-color: #ffe0cc;

2169 padding: 4px 6px;

2170 margin-bottom: $lineheight/2;

2171 }

2172

2173 .comment_body {

2174 margin-top: 2px;

2175 margin-bottom: 2px;

2176

2177 p {

2178 margin-top: 0px;

2179 margin-bottom: 0px;

2180 }

2181 }

2182

2183 .comment {

2184 width: 100%;

2185 height: 100px;

2186 }

2187

2188 .buttons {

2189 margin-top: $lineheight/4;

2190 text-align: right;

2191 }

2192 }

2193

2194 /*

2195 * Rules for the iD editor

2196 */

2197

2198 .site-edit-id {

2199 #left,

2200 #large-title {

2201 display: none;

2202 }

2203

2204 #small-title {

2205 display: inline-block;

2206 width: 185px;

2207 height: 30px;

2208 font-size: 14px;

2209 margin: 0;

2210 background-color: #eee;

2211 border-bottom: 1px solid #ccc;

2212 text-align: center;

2213 padding-top: 7px;

2214 }

2215

2216 #content {

2217 left: 0;

2218 }

2219 }

2220

2221 .id-embed {

2222 width: 100%;

2223 height: 100%;

2224 }

2225

2226 /* Rules for rotating sidebar ads */

2227 .ad-container {

2228 display: block;

2229 height: 120px;

2230 overflow: hidden;

2231 position: relative;

2232 border-bottom: 1px solid #ccc;

2233 }

2234

2235 .ad {

2236 height: 100px;

2237 border: 0;

2238 background: #fff;

2239 }

2240

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

2242 .site-welcome {

2243 .center {

2244 text-align: center;

2245 }

2246

2247 .drop {

2248 margin-top: 20px;

2249 }

2250

2251 .sprite {

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

2253 background-size: 500px 250px;

2254 display: inline-block;

2255 }

2256

2257 .sprite.small {

2258 width: 50px;

2259 height: 50px;

2260 }

2261

2262 .sprite.x {

2263 background-position: -50px 0;

2264 }

2265

2266 .sprite.term {

2267 margin-right: 10px;

2268 vertical-align: middle;

2269 }

2270

2271 .sprite.node {

2272 background-position: -100px 0;

2273 }

2274

2275 .sprite.way {

2276 background-position: -150px 0;

2277 }

2278

2279 .sprite.changeset {

2280 background-position: -200px 0;

2281 }

2282

2283 .sprite.editor {

2284 background-position: -250px 0;

2285 }

2286

2287 .sprite.question {

2288 background-position: -300px 0;

2289 }

2290

2291 .start-mapping {

2292 background: #EB6F67;

2293 color: #FFF;

2294 margin: auto;

2295 cursor: pointer;

2296 border: none;

2297 border-radius: 5px;

2298 border-bottom: 1px solid #A53931;

2299 padding: 20px 40px;

2300 font-size: 30px;

2301 text-decoration: none;

2302 }

2303

2304 .note-box {

2305 background-color: $offwhite;

2306 }

2307 }