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 .new-user-illustration {

1062 background-position: 0 0;

1063 background-repeat: no-repeat;

1064 position: absolute;

1065 }

1066

1067 .new-user-illustration.new-user-main {

1068 height: 200px;

1069 width: 100%;

1070 left: 0;

1071 bottom: 0;

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

1073 }

1074

1075 .new-user-illustration.new-user-arm {

1076 height: 110px;

1077 width: 130px;

1078 left: 230px;

1079 top: 160px;

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

1081 }

1082

1083 @media only screen and (max-width:770px) {

1084 .new-user-illustration.new-user-arm { display: none;}

1085 }

1086

1087 .wrapper {

1088 margin-left: 184px;

1089 border-left: 1px solid #ccc;

1090 text-align: left;

1091 }

1092

1093 #content.maximised {

1094 top: 0;

1095 left: 0;

1096 right: 0;

1097 bottom: 0;

1098 border: 0;

1099 z-index: 1000;

1100 }

1101

1102 #slim_container {

1103 width: 100%;

1104 }

1105

1106 #slim_container_content {

1107 max-width: 50em;

1108 background-color: #FFFFFF;

1109 margin: $lineheight/2 auto;

1110 padding: 3px;

1111 border-radius: 25px;

1112 -moz-border-radius: 25px;

1113 border: 1px solid #e6e6e6;

1114 }

1115

1116 #slim_content {

1117 margin: $lineheight/2;

1118 margin-top: 95px;

1119 max-width: 50em;

1120

1121 .content-heading {

1122 margin-bottom: 15px;

1123 }

1124 }

1125

1126 #slim_header {

1127 margin: 30px $lineheight/2;

1128 position: absolute;

1129 top: 0px;

1130 margin-right: $lineheight/4;

1131 img {

1132 vertical-align: middle;

1133 margin-bottom: $lineheight/4;

1134 margin-right: $lineheight/4;

1135 }

1136 }

1137

1138 .content-heading {

1139 position: relative;

1140 padding: $lineheight;

1141 background: $offwhite;

1142 z-index: 2;

1143 h1, h2 {

1144 margin-bottom: $lineheight/2;

1145 line-height: 100%;

1146 &:last-child {

1147 margin-bottom: 0;

1148 }

1149 }

1150 p {

1151 margin-top: $lineheight/2;

1152 margin-bottom: 0px;

1153 }

1154 }

1155

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

1157

1158 .content_map {

1159 position: relative;

1160 width: 45%;

1161 height: 400px;

1162 border: 1px solid #ccc;

1163 margin-bottom: $lineheight;

1164 float: right;

1165 }

1166

1167 .content_map #small_map {

1168 height: 100%;

1169 width: 100%;

1170 margin-bottom: $lineheight;

1171 }

1172

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

1174

1175 #changeset_list {

1176 width: 100%;

1177 ul {

1178 padding: $lineheight/2 0;

1179 margin-bottom: 0px;

1180 border-top: 1px solid #ccc;

1181 &:last-child {

1182 border-bottom: 1px solid #ccc;

1183 }

1184 }

1185 .selected {

1186 background: #FFFFC0;

1187 }

1188 .date,

1189 .user {

1190 border-left: 1px solid #ccc;

1191 padding-left: $lineheight/4;

1192 margin-right: $lineheight/4;

1193 }

1194 }

1195

1196 #changeset_list_map_wrapper {

1197 position: absolute;

1198 width: 50%;

1199 height: 490px;

1200 top: 0;

1201 right: 0;

1202 }

1203

1204 #changeset_list_map_wrapper.scrolled {

1205 position: fixed;

1206 }

1207

1208 #changeset_list_map {

1209 position: absolute;

1210 bottom: $lineheight;

1211 top: $lineheight;

1212 right: $lineheight;

1213 left: $lineheight;

1214 border: 1px solid #ccc;

1215 }

1216

1217 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1218 margin-left: 93px;

1219 }

1220

1221 /* Rules for the data browser */

1222

1223 .browse-section {

1224 border-top: 1px solid #ccc;

1225 margin-top: $lineheight/2;

1226 padding-top: $lineheight/2;

1227 &:first-child {

1228 margin-top: 0;

1229 }

1230 .warning {

1231 background-color: #ffe0cc;

1232 margin: 0px;

1233 padding: 4px 6px;

1234 max-width: 100%;

1235 }

1236 h4, p {

1237 margin-bottom: $lineheight/4;

1238 }

1239 ul, .bbox, .geo {

1240 display: inline-block;

1241 vertical-align: top;

1242 max-width: 65%;

1243 }

1244 ul p {

1245 margin-left: 0;

1246 margin-bottom: 0;

1247 }

1248 h4 {

1249 float: left;

1250 width: 33.3333%;

1251 display: inline-block;

1252 vertical-align: top;

1253 }

1254 }

1255

1256 .bbox {

1257 div {

1258 width: 33.3333%;

1259 text-align: center;

1260 padding: $lineheight/4 0;

1261 overflow: hidden;

1262 text-overflow: ellipsis;

1263 float: left;

1264 }

1265 .max_lat,

1266 .min_lat {

1267 margin-left: auto;

1268 margin-right: auto;

1269 width: 100%;

1270 }

1271 }

1272

1273 #browse_map .geolink {

1274 display: none;

1275 }

1276

1277 #browse_map .secondary-actions {

1278 margin-bottom: $lineheight/2;

1279 }

1280

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

1282

1283 #trace_list {

1284 font-size: $lineheight/2;

1285 border-width: 0px;

1286 text-align: right;

1287

1288 .trace_summary {

1289 font-size: 12px;

1290 color: gray;

1291 }

1292

1293 .trace_pending {

1294 color: red;

1295 }

1296

1297 .trace_public {

1298 color: green;

1299 }

1300

1301 .trace_identifiable {

1302 color: green;

1303 }

1304

1305 .trace_trackable {

1306 color: red;

1307 }

1308

1309 .trace_private {

1310 color: red;

1311 }

1312 }

1313

1314 /* Rules for the user profile page */

1315

1316 #userinformation {

1317

1318 min-height: 100px;

1319 .userinformation-inner {

1320 float: left;

1321 }

1322 h2 {

1323 margin-top: 0;

1324 }

1325 .user-description {

1326 width: 100%;

1327 clear: both;

1328 }

1329 .deemphasize {

1330 margin: 0;

1331 }

1332 }

1333

1334 .admin-user-info small {

1335 margin-bottom: $lineheight/2;

1336 display: inline;

1337 margin-right: $lineheight;

1338 }

1339

1340 .activity-block {

1341 clear: left;

1342 border-bottom: 1px solid #ccc;

1343 padding-bottom: $lineheight;

1344 float: left;

1345 h3 {

1346 margin-bottom: $lineheight/2;

1347 }

1348 }

1349

1350 .contact-activity {

1351 margin-top: $lineheight;

1352 width: 100%;

1353 }

1354

1355 .activity-details p {

1356 margin-left: 70px;

1357 margin-bottom: 0;

1358 }

1359

1360 #friends-container .contact-activity ul {

1361 margin-left: 70px;

1362 }

1363

1364 .user-view {

1365 p#no_home_location {

1366 margin: $lineheight;

1367 }

1368 .user_thumbnail {

1369 margin-top: $lineheight/4;

1370 float: left;

1371 }

1372 }

1373

1374 /* Rules for the user map */

1375

1376 .content_map .leaflet-popup-content {

1377 margin: $lineheight/2;

1378 min-height: 50px;

1379 }

1380

1381 /* Rules for user popups on maps */

1382

1383 .user_popup {

1384 min-width: 200px;

1385 p {

1386 padding: 0 0 5px 0;

1387 margin-top: 0 0 0 60px;

1388 font-size: 12px;

1389 }

1390 img.user_thumbnail {

1391 float: left;

1392 margin: 0 $lineheight/2 0 0;

1393 }

1394 }

1395

1396 /* Rules for the user list */

1397

1398 #user_list {

1399 font-size: $lineheight/2;

1400 width: 100%;

1401

1402 tr {

1403 vertical-align: middle;

1404 }

1405

1406 p {

1407 margin-top: 0px;

1408 margin-bottom: 0px;

1409 }

1410 }

1411

1412 #user_list_actions {

1413 float: right;

1414 margin-top: $lineheight/2;

1415 }

1416

1417 /* Rules for the diary list page */

1418

1419 .diary_entry-list img.user_thumbnail {

1420 float: left;

1421 }

1422

1423 .diary_post {

1424 max-width: 740px;

1425 position: relative;

1426 margin-top: $lineheight/2;

1427 padding-top: $lineheight;

1428 border-top: 1px solid #ccc;

1429

1430 &:first-child {

1431 margin-top: 0;

1432 border-top: 0;

1433 padding-top: 0;

1434 }

1435 h1, h2 {

1436 font-size: 21px;

1437 line-height: 1em;

1438 }

1439 small.deemphasize {

1440 float: left;

1441 display: block;

1442 }

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

1444 }

1445

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

1447 display: inline;

1448 }

1449

1450 #content .post_heading {

1451 margin-bottom: $lineheight;

1452 h2 {

1453 margin-top: 0;

1454 margin-bottom: $lineheight/2;

1455 font-size: 24px;

1456 }

1457 }

1458

1459 /* Rules for the diary entry page */

1460

1461 .diary_entry {

1462 #map {

1463 position: relative;

1464 width: 90%;

1465 height: 400px;

1466 border: 1px solid #ccc;

1467 display: none;

1468 margin-bottom: $lineheight;

1469 }

1470 #newcomment {

1471 border-top: 1px solid #ccc;

1472 padding-top: $lineheight;

1473 margin-top: $lineheight/2;

1474 }

1475 .comments {

1476 max-width: 740px;

1477 }

1478 .diary-comment {

1479 margin-top: $lineheight/2;

1480 border-top: 1px dashed #ccc;

1481 padding-top: $lineheight/2;

1482 &:first-child {

1483 margin-top: $lineheight;

1484 padding-top: $lineheight;

1485 border-top: 1px solid #ccc;

1486 }

1487 p {

1488 margin-bottom: $lineheight/2;

1489 }

1490 .comment-heading {

1491 margin-bottom: 0;

1492 margin-top: 0;

1493 }

1494 }

1495 }

1496

1497 .diary_entry-view img.user_thumbnail {

1498 float: left;

1499 }

1500

1501 /* Rules for the log in page */

1502

1503 #login_openid_buttons {

1504 margin-bottom: 0;

1505 }

1506

1507 #login_openid_buttons li {

1508 float: left;

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

1510 }

1511

1512 /* Rules for the account confirmation page */

1513

1514 #terms {

1515 .legale {

1516 border: 1px solid #ccc;

1517 padding: $lineheight;

1518 margin-bottom: $lineheight;

1519 overflow: auto;

1520 height: 10em;

1521

1522 &:p#last {

1523 margin-bottom: 0px;

1524 }

1525

1526 &:ol {

1527 margin-bottom: 0px;

1528 }

1529

1530 &:img {

1531 display: block;

1532 margin: $lineheight auto inherit auto;

1533 }

1534 }

1535

1536 form.sign {

1537 input[type=submit] {

1538 float: left;

1539 }

1540 #decline {

1541 background: $grey;

1542 &:hover {

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

1544 }

1545 }

1546 }

1547 fieldset {

1548 margin-bottom: $lineheight;

1549 }

1550 #contributorGuidance {

1551 background-color: $offwhite;

1552 border-radius: 4px;

1553 -moz-border-radius: 4px;

1554 }

1555 .signing-buttons {

1556 height: 50px;

1557 }

1558 }

1559

1560 /* Rules for the account settings page */

1561

1562 #accountForm .user_map {

1563 position: relative;

1564 width: 500px;

1565 height: 400px;

1566 border: 1px solid #ccc;

1567 }

1568

1569 #accountForm .user_image {

1570 margin-bottom: 0;

1571 }

1572

1573 #accountForm #user_image {

1574 margin-left: 20px;

1575 }

1576

1577 #accountForm ul.accountImage-options {

1578 margin-left: 120px;

1579 }

1580

1581 .nohome .location {

1582 display: none;

1583 }

1584

1585 #homerow .message {

1586 display: none;

1587 }

1588

1589 .nohome .message {

1590 display: inline !important;

1591 }

1592

1593 .content_map.settings_map {

1594 width: 50%;

1595 float: none;

1596 }

1597

1598 /* Rules for the oauth settings page */

1599

1600 .oauth_clients .buttons .oauth-edit {

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

1602 }

1603

1604 .oauth_clients .buttons .oauth-delete {

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

1606 }

1607

1608 /* Rules for messages pages */

1609

1610 .messages {

1611 width: 100%;

1612 border: 1px solid #ddd;

1613

1614 input[type="submit"] {

1615 margin: auto;

1616 }

1617 tbody tr {

1618 border-top: 1px solid #ccc;

1619 }

1620

1621 .inbox-row {

1622 background: #f8f8ff;

1623 }

1624

1625 .inbox-row-unread {

1626 background:#CBEEA7;

1627 }

1628

1629 .right {

1630 float: right;

1631 }

1632

1633 tr td,

1634 tr th {

1635 padding: $lineheight/4;

1636 }

1637 p:last-child,

1638 h2:last-child,

1639 h3:last-child,

1640 ol:last-child,

1641 ul:last-child {

1642 margin-bottom:0;

1643 }

1644 tr td {

1645 height: 30px;

1646 border-right: 1px solid $lightgrey;

1647 }

1648 }

1649

1650 .inbox-row .inbox-mark-read {

1651 display: none;

1652 }

1653

1654 .info-line {

1655 margin-bottom: $lineheight;

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

1657 border-bottom: 1px solid #ccc;

1658

1659 form, form div {

1660 display: inline;

1661 }

1662 }

1663

1664 .info-line .user_thumbnail_tiny {

1665 vertical-align: middle;

1666 }

1667

1668 .inbox-mark-unread,

1669 .inbox-mark-read,

1670 .inbox-delete {

1671 width: 1%;

1672 }

1673

1674 .inbox-row-unread .inbox-mark-unread {

1675 display: none;

1676 }

1677

1678 .message-read .message-buttons {

1679 margin-top: $lineheight;

1680 padding-top: $lineheight;

1681 border-top: 1px solid $lightgrey;

1682 }

1683

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

1685 border-radius: 0;

1686 }

1687

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

1689

1690 .flash {

1691 padding: $lineheight;

1692 &#error {

1693 background-color: #ff7070;

1694 }

1695 &#warning {

1696 background-color: #ffe0cc;

1697 }

1698 &#notice {

1699 background-color: #CBEEA7;

1700 }

1701 }

1702

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

1704

1705 .field_with_errors {

1706 padding: 2px;

1707 background-color: #ff7070;

1708 display: table;

1709 }

1710

1711 /* Rules for rails validation error boxes */

1712

1713 #errorExplanation {

1714 width: 400px;

1715 border: 2px solid #ff7070;

1716 padding: 0 $lineheight/2;

1717 margin-bottom: $lineheight;

1718 background-color: #f0f0f0;

1719

1720 h2 {

1721 margin: 0 -10px 10px -10px;

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

1723 font-weight: bold;

1724 font-size: 12px;

1725 background-color: #c00;

1726 color: #fff;

1727 text-align: left;

1728 }

1729

1730 p {

1731 color: #333;

1732 margin-bottom: 0px;

1733 padding: $lineheight/4;

1734 }

1735

1736 ul {

1737 padding-left: $lineheight;

1738

1739 li {

1740 font-size: 12px;

1741 list-style: disc;

1742 }

1743 }

1744 }

1745

1746 /* Rules for forms */

1747

1748 .standard-form {

1749 fieldset {

1750 margin-bottom: $lineheight;

1751 }

1752 label.standard-label {

1753 display: block;

1754 margin-bottom: $lineheight/4;

1755 font-size: $typeheight;

1756 font-weight: bold;

1757 line-height: 1.5;

1758 }

1759 label.standard-label.secondary {

1760 display: inline-block;

1761 font-weight: normal;

1762 }

1763 .form-help {

1764 font-weight: normal;

1765 }

1766 .form-column {

1767 float: left;

1768 margin-right: 20px;

1769 }

1770 .form-divider {

1771 margin-top: $lineheight;

1772 padding-top: $lineheight;

1773 border-top: 1px solid $lightgrey;

1774 }

1775 .form-row {

1776 margin-bottom: $lineheight/2;

1777 }

1778 .form-list {

1779 margin-bottom: 0;

1780 }

1781 .form-list li {

1782 margin-bottom: 5px;

1783 }

1784 input[type="checkbox"],

1785 input[type="radio"] {

1786 float: left;

1787 margin-top: 5px;

1788 }

1789 }

1790

1791 #remember_me_openid {

1792 display: block;

1793 }

1794

1795 input[type="checkbox"],

1796 input[type="radio"] {

1797 margin-right: 5px;

1798 }

1799

1800 input[type="text"],

1801 input[type="email"],

1802 input[type="url"],

1803 input[type="password"],

1804 textarea {

1805 border: 1px solid #ccc;

1806 padding: 2px 5px;

1807 margin: 0;

1808 width: 200px;

1809 }

1810

1811 textarea {

1812 padding: 5px;

1813 width: 100%;

1814 }

1815

1816 /* Rules for user images */

1817

1818 img.user_image {

1819 max-width: 100px;

1820 max-height: 100px;

1821 border: 1px solid #ccc;

1822 margin-bottom: $lineheight;

1823 float: left;

1824 margin-right: $lineheight;

1825 }

1826

1827 img.user_thumbnail {

1828 max-width: 50px;

1829 max-height: 50px;

1830 border: 1px solid #ccc;

1831 margin-right: $lineheight;

1832 }

1833

1834 img.user_thumbnail_tiny {

1835 max-width: 25px;

1836 max-height: 25px;

1837 border: 1px solid #ccc;

1838 }

1839

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

1841

1842 .nowrap {

1843 white-space: nowrap;

1844 }

1845

1846 /* Rules for geo microformats */

1847

1848 abbr.geo {

1849 border-bottom: none;

1850 }

1851

1852 /* Rules for RSS buttons */

1853

1854 .rsssmall {

1855 position: relative;

1856 top: 5px;

1857 }

1858

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

1860

1861 ul.secondary-actions {

1862 font-style: normal;

1863 margin-bottom: 0;

1864 margin-left: 0;

1865 &.pager {

1866 display: inline-block;

1867 margin-right: 60px;

1868 }

1869 li {

1870 display: block;

1871 float: left;

1872 list-style: none;

1873 border-left: 1px solid #ccc;

1874 padding-left: $lineheight/4;

1875 margin-right: $lineheight/4;

1876 &:first-child {

1877 border-left: 0;

1878 padding-left: 0;

1879 }

1880 &:last-child {

1881 margin-right: 0px;

1882 }

1883 }

1884 }

1885

1886 /* Utility for managing inner content areas */

1887

1888 .inner22 { padding: $lineheight;}

1889

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

1891

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

1893

1894 .inner02 { padding: 0 $lineheight;}

1895

1896 /* Utility for general button styles */

1897

1898 input[type="button"],

1899 input[type="submit"],

1900 input[type="reset"],

1901 a.button {

1902 cursor: pointer;

1903 border: 0;

1904 display: inline-block;

1905 line-height: 20px;

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

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

1908 min-width: 120px;

1909 margin: 0 0 $lineheight/2 0;

1910 color: white;

1911 background: $blue;

1912 text-align: center;

1913 border-radius: 2px;

1914 -moz-border-radius: 2px;

1915 &:hover {

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

1917 text-decoration: none;

1918 }

1919 &.deemphasize {

1920 background: $lightblue;

1921 &:hover {

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

1923 }

1924 }

1925 &:disabled {

1926 background: $lightgrey;

1927 &:hover {

1928 background: $lightgrey;

1929 }

1930 }

1931 &:last-child {

1932 margin-bottom: 0;

1933 }

1934 }

1935

1936 .buttons {

1937 min-width: 200px;

1938 input[type="submit"],

1939 input[type="button"],

1940 input[type="reset"],

1941 .button {

1942 box-sizing: border-box;

1943 float: left;

1944 border-radius: 0;

1945 margin:0;

1946 min-width: 100px;

1947 max-width: 180px;

1948 border-right:1px solid white;

1949 text-overflow: ellipsis;

1950 white-space: nowrap;

1951 overflow: hidden;

1952 }

1953 input:first-child,

1954 .button:first-child {

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

1956 }

1957 input:last-child,

1958 .button:last-child {

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

1960 border-right-width: 0;

1961 }

1962 input:only-child,

1963 .button:only-child,

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

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

1966 border-radius:2px;

1967 border-right-width: 0;

1968 }

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

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

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

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

1973 border-right-width: 0;

1974 }

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

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

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

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

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

1980 }

1981 }

1982

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

1984

1985 .table0,

1986 .item0 {

1987 background: $offwhite;

1988 }

1989

1990 .table1,

1991 .item1 {

1992 background: #fff;

1993 }

1994

1995 /* Rules for OpenID logo */

1996

1997 .openid_logo {

1998 vertical-align: text-bottom;

1999 border: 0;

2000 }

2001

2002 /* Rules for rich text */

2003

2004 .richtext,

2005 .prose {

2006 h1, h2 {

2007 padding-bottom: $lineheight/2;

2008 border-bottom: 1px dashed #cccccc;

2009 margin-bottom: $lineheight/2;

2010 }

2011

2012 h1 {

2013 font-size: 24px;

2014 }

2015

2016 h2 {

2017 font-size: 18px;

2018 }

2019

2020 h3 {

2021 font-size: $typeheight;

2022 }

2023

2024 code {

2025 font-size: 13px;

2026 background: #e8e8e8;

2027 padding: 2px 3px;

2028 }

2029

2030 pre {

2031 font-size: 13px;

2032 background: #e8e8e8;

2033 padding: 2px 3px;

2034

2035 code {

2036 padding: 0;

2037 }

2038 }

2039

2040 img {

2041 padding: $lineheight;

2042 background-color: $offwhite;

2043 display: block;

2044 max-width: 100%;

2045 margin: auto;

2046 }

2047

2048 blockquote {

2049 border-left: $lineheight solid $offwhite;

2050 padding-left: $lineheight;

2051 margin: 0;

2052 color: #7E7E7E;

2053 }

2054

2055 ul, ol {

2056 padding-left: $lineheight;

2057 margin-bottom: $lineheight;

2058 margin-left: $lineheight;

2059 }

2060

2061 ul li {

2062 list-style: disc;

2063 }

2064

2065 ol li {

2066 list-style: decimal;

2067 }

2068 }

2069

2070 .diary_post .richtext {

2071 margin-top: $lineheight;

2072 }

2073

2074 .comments .richtext {

2075 margin-left: 70px;

2076 margin-top: 0;

2077 }

2078

2079 /* Rules for rich text editors */

2080

2081 .richtext_container {

2082 margin-bottom: $lineheight;

2083

2084 .richtext_content {

2085 width: 50%;

2086 display: inline-block;

2087 vertical-align: top;

2088

2089 .richtext_preview {

2090 display: inline-block;

2091 padding: $lineheight;

2092 background-color: $offwhite;

2093 overflow-x: auto;

2094

2095 &.loading {

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

2097 background-repeat: no-repeat;

2098 background-position: center;

2099 }

2100

2101 > :first-child {

2102 margin-top: 0px;

2103 }

2104 }

2105 }

2106

2107 .richtext_help {

2108 display: inline-block;

2109 vertical-align: top;

2110 margin-left: 15px;

2111 background-color: #f8f8ff;

2112 padding: $lineheight/2;

2113 width: 220px;

2114

2115 ul {

2116 margin-bottom: 0;

2117 }

2118

2119 h4.heading, li {

2120 border-bottom: 1px solid #ccc;

2121 margin-bottom: $lineheight/4;

2122 padding-bottom: $lineheight/4;

2123 }

2124

2125 li h4, li span, li p {

2126 display: inline-block;

2127 vertical-align: top;

2128 font-size: 11px;

2129 }

2130

2131 li h4 {

2132 width: 40%;

2133 margin: 0;

2134 }

2135

2136 li span, li p {

2137 width: 50%;

2138 margin-left: $lineheight/2;

2139 margin-bottom: $lineheight/4;

2140 white-space: nowrap;

2141 }

2142 }

2143 }

2144

2145 /* Rules for the user notes list */

2146

2147 .note_list {

2148 tr.creator {

2149 background-color: #eeeeee;

2150 }

2151

2152 td {

2153 padding: 3px;

2154 }

2155

2156 p {

2157 margin-bottom: 0px;

2158 }

2159 }

2160

2161 /* Rules for the notes interface */

2162

2163 .leaflet-popup-content .note {

2164 padding-top: $lineheight/2;

2165 }

2166

2167 .leaflet-popup-content .note {

2168 h2 {

2169 margin-bottom: $lineheight/2;

2170 }

2171

2172 div {

2173 margin-top: $lineheight/2;

2174 }

2175

2176 .permalink {

2177 position: absolute;

2178 top: $lineheight/4;

2179 left: $lineheight/4;

2180 min-width: 15px;

2181 min-height: 15px;

2182 }

2183

2184 .permalink span {

2185 display: none;

2186 padding-left: $lineheight;

2187 }

2188

2189 .permalink:hover span {

2190 display: block;

2191 }

2192

2193 .warning {

2194 display: block;

2195 background-color: #ffe0cc;

2196 padding: 4px 6px;

2197 margin-bottom: $lineheight/2;

2198 }

2199

2200 .comment_body {

2201 margin-top: 2px;

2202 margin-bottom: 2px;

2203

2204 p {

2205 margin-top: 0px;

2206 margin-bottom: 0px;

2207 }

2208 }

2209

2210 .comment {

2211 width: 100%;

2212 height: 100px;

2213 }

2214

2215 .buttons {

2216 margin-top: $lineheight/4;

2217 text-align: right;

2218 }

2219 }

2220

2221 /*

2222 * Rules for the iD editor

2223 */

2224

2225 .site-edit-id {

2226 #left,

2227 #large-title {

2228 display: none;

2229 }

2230

2231 #small-title {

2232 display: inline-block;

2233 width: 185px;

2234 height: 30px;

2235 font-size: 14px;

2236 margin: 0;

2237 background-color: #eee;

2238 border-bottom: 1px solid #ccc;

2239 text-align: center;

2240 padding-top: 7px;

2241 }

2242

2243 #content {

2244 left: 0;

2245 }

2246 }

2247

2248 .id-embed {

2249 width: 100%;

2250 height: 100%;

2251 }

2252

2253 /* Rules for rotating sidebar ads */

2254 .ad-container {

2255 display: block;

2256 height: 120px;

2257 overflow: hidden;

2258 position: relative;

2259 border-bottom: 1px solid #ccc;

2260 }

2261

2262 .ad {

2263 height: 100px;

2264 border: 0;

2265 background: #fff;

2266 }

2267

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

2269 .site-welcome {

2270 .center {

2271 text-align: center;

2272 }

2273

2274 .drop {

2275 margin-top: 20px;

2276 }

2277

2278 .sprite {

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

2280 background-size: 500px 250px;

2281 display: inline-block;

2282 }

2283

2284 .sprite.small {

2285 width: 50px;

2286 height: 50px;

2287 }

2288

2289 .sprite.x {

2290 background-position: -50px 0;

2291 }

2292

2293 .sprite.term {

2294 margin-right: 10px;

2295 vertical-align: middle;

2296 }

2297

2298 .sprite.node {

2299 background-position: -100px 0;

2300 }

2301

2302 .sprite.way {

2303 background-position: -150px 0;

2304 }

2305

2306 .sprite.changeset {

2307 background-position: -200px 0;

2308 }

2309

2310 .sprite.editor {

2311 background-position: -250px 0;

2312 }

2313

2314 .sprite.question {

2315 background-position: -300px 0;

2316 }

2317

2318 .start-mapping {

2319 background: #EB6F67;

2320 color: #FFF;

2321 margin: auto;

2322 cursor: pointer;

2323 border: none;

2324 border-radius: 5px;

2325 border-bottom: 1px solid #A53931;

2326 padding: 20px 40px;

2327 font-size: 30px;

2328 text-decoration: none;

2329 }

2330

2331 .note-box {

2332 background-color: $offwhite;

2333 }

2334 }