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 .fillL { background-color: white; }

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

93 * {

94 -moz-box-sizing: border-box;

95 -webkit-box-sizing: border-box;

96 box-sizing: border-box;

97 }

99 body {

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

101 font-size: $typeheight;

102 line-height: 1.6666;

103 color: #222;

104 background-color: #fff;

105 margin: 0px;

106 padding: 0px;

107 text-align: left;

108 }

109

110 body.slim {

111 background-color: #f0f0f0;

112 }

113

114 h1, h2, h3 {

115 margin-top: $lineheight/2;

116 margin-bottom: $lineheight;

117 font-weight: bold;

118 line-height: 1.2;

119 }

120

121 h1, h2 {

122 font-size: 32px;

123 }

124

125 #content h2 {

126 font-size: 21px;

127 }

128

129 h3 {

130 font-size: 21px;

131 margin-top: $lineheight/2;

132 margin-bottom: $lineheight;

133 }

134

135 h4,h5,h6 {

136 font-size: $typeheight;

137 margin-top: $lineheight/2;

138 margin-bottom: $lineheight/2;

139 font-weight: bold;

140 line-height: 1.5;

141 }

142

143 p, ul {

144 margin-bottom: $lineheight;

145 }

146

147 p > img {

148 width: auto;

149 max-width: 100%;

150 }

151

152 small, aside {

153 font-size: 12px;

154 }

155

156 h1:first-child,

157 h2:first-child,

158 h3:first-child,

159 h4:first-child,

160 h5:first-child,

161 h6:first-child {

162 margin-top: 0;

163 }

164

165 .column-1 {

166 width: 50%;

167 margin: 0 0 $lineheight/2 0;

168 }

169

170 .small_icon {

171 vertical-align: middle;

172 margin-right: $lineheight/4;

173 }

174

175 /* Rules for icons */

176

177 .icon {

178 display:inline-block;

179 vertical-align:top;

180 width:20px;

181 height:20px;

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

183 text-indent:-9999px;

184 overflow:hidden;

185 }

186

187 .icon-pre-text {

188 margin-right: 5px;

189 }

190

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

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

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

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

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

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

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

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

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

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

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

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

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

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

205

206 /* Rules for links */

207

208 a {

209 color: #00f;

210 text-decoration: none;

211 &:hover {

212 text-decoration: underline;

213 }

214 }

215

216 /* Rules for horizontal lines */

217

218 hr {

219 border: none;

220 background-color: #ccc;

221 color: #ccc;

222 height: 1px;

223 }

224

225 /* General styles for tables */

226

227 table {

228 width: 100%;

229 margin-bottom: $lineheight;

230 th, td {

231 text-align: left;

232 padding: $lineheight/4;

233 line-height: $lineheight;

234 }

235 th {

236 font-weight: bold;

237 vertical-align: top;

238 }

239 td {

240 vertical-align: middle;

241 }

242 }

243

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

245

246 #left {

247 position: absolute;

248 height: 100%;

249 width: 185px;

250 font-size: 11px;

251 line-height: 1.1;

252 z-index: 100;

253 border-right: 1px solid #ccc;

254 }

255

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

257

258 #logo {

259 display: block;

260 width: 170px;

261 min-width: 170px;

262 padding: $lineheight $lineheight/4;

263 text-align: center;

264 margin: auto;

265 }

266

267 #logo h1 {

268 font-size: 18px;

269 line-height: 1;

270 text-align: center;

271 margin: 0;

272 }

273

274 #logo h2 {

275 font-size: $lineheight/2;

276 line-height: 15px;

277 margin: 0;

278 }

279

280 /* Rules for the site name */

281

282 #small-title {

283 display: none;

284

285 img {

286 vertical-align: text-bottom;

287 }

288 }

289

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

291

292 .sidebar-copy {

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

294 p {

295 margin: $lineheight/4 0;

296 }

297 }

298 .sidebar-copy.intro {

299 border-top: 1px solid #ccc;

300 }

301

302 /*

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

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

305 * undergoing maintenance.

306 */

307

308 .sidebar-alert {

309 padding: $lineheight/4;

310 border-top: 1px solid #ccc;

311 margin-top: 4px;

312 margin-bottom: -5px;

313 background: #e00;

314 font-size: 12px;

315 font-weight: bold;

316 p {

317 margin: $lineheight/4;

318 }

319 }

320

321 /*

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

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

324 * donation drives.

325 */

326

327 .sidebar-notice {

328 padding: $lineheight/4;

329 border-top: 1px solid #ccc;

330 margin-top: 4px;

331 margin-bottom: -5px;

332 background: #ea0;

333 font-size: 12px;

334 p {

335 margin: $lineheight/4;

336 }

337 }

338

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

340

341 .left_menu {

342 left: 0px;

343 margin: 0;

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

345 font-size: 12px;

346 line-height: 1.25;

347 list-style-type: none;

348 border-bottom: 1px solid #ccc;

349 border-top: 1px solid #ccc;

350 img {

351 margin: $lineheight/2 0px;

352 }

353

354 ul {

355 padding: 0;

356 margin: 0;

357 }

358

359 li {

360 list-style-type: none;

361 padding: 0;

362 margin: 0;

363 }

364

365 h4 {

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

367 font-size: 12px;

368 margin: 0;

369 }

370 }

371

372 /*

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

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

375 * and the tag cloud on the traces pages.

376 */

377

378 .optionalbox {

379 left: 0px;

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

381 margin: $lineheight/4 0;

382 text-align: left;

383 }

384

385 /* Rules for the search box */

386

387 #search_field {

388 position: relative;

389

390 form {

391 width: 165px;

392 }

393

394 input[type="text"] {

395 width: 165px;

396 padding: 3px;

397 font-size: $typeheight;

398 line-height: 1.1;

399 height: 25px;

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

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

402 }

403

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

405 outline: none;

406 border: 1px solid #000;

407 }

408

409 input[type="submit"] {

410 border: 0;

411 margin: 0;

412 padding: 0;

413 width: 15px;

414 height: 15px;

415 min-width: 0;

416 text-indent: -1000px;

417 overflow: hidden;

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

419 position: absolute;

420 top: $lineheight/4;

421 right: $lineheight/4;

422 cursor: pointer;

423 }

424 }

425

426 .search_help {

427 margin: $lineheight/4 0 0 0;

428 }

429

430 /* Utility for de-emphasizing content */

431

432 .deemphasize {

433 color: #999;

434 a {

435 color: $blue;

436 }

437 }

438

439 /* Rules for donation request box */

440

441 a.donate {

442 display: block;

443 width: 163px;

444 padding: $lineheight/4;

445 border: 1px solid #AED1A0;

446 background: #cbeea7;

447 font-size: $typeheight;

448 line-height: 1.4;

449 text-align: center;

450 border-radius: 2px;

451 color: #222;

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

453

454 &:hover {

455 background: #9ed485;

456 text-decoration: none;

457 }

458 }

459

460 /* Rules for Creative Commons logo button */

461

462 #cclogo {

463 margin: $lineheight/2 0;

464 float: right;

465 }

466

467 /* Rules for tabbed navigation bar */

468

469 #top-bar {

470 position: relative;

471 margin-left: 185px;

472 height: 30px;

473 border-bottom: 1px solid #ccc;

474 background: white;

475 z-index: 100;

476 }

477

478 .site-edit #top-bar,

479 .site-index #top-bar,

480 .site-export #top-bar {

481 position: fixed;

482 top: 0;

483 left: 0;

484 right: 0;

485 }

486

487 #tabnav {

488 height: 29px;

489 margin-bottom:0;

490 overflow: hidden;

491 li {

492 display: inline;

493 }

494 a, a:link, a:visited {

495 float: left;

496 font-weight: bold;

497 padding: 3px $lineheight/2;

498 text-decoration: none;

499 color: #333;

500 float: left;

501 margin-right: 1px;

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

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

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

505 transition: color 200ms ease-in;

506 }

507 }

508

509 .site-index #tabnav a#viewanchor,

510 .site-edit #tabnav a#editanchor,

511 .changeset-list #tabnav a#historyanchor {

512 border-bottom: 1px solid #aaa;

513 background: #9ed485;

514 color: #000;

515 }

516

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

518 text-decoration: underline;

519 }

520

521 #tabnav a:link.disabled,

522 #tabnav a:visited.disabled,

523 #tabnav a:link:hover.disabled,

524 #tabnav a:visited:hover.disabled {

525 color: #ccc;

526 cursor: default;

527 &:hover {

528 text-decoration: none;

529 }

530 }

531

532 /* Utility for styling notification numbers */

533

534 .count-number {

535 padding: 2px $lineheight/4;

536 border-radius: 2px;

537 background: #d7d7ff;

538 margin: 0 2px;

539 font-size: 11px;

540 color: #333;

541 }

542

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

544

545 #greeting {

546 float: right;

547 padding-top: 3px;

548 margin-right: $lineheight/4;

549 }

550

551 .greeting-bar-unread {

552 font-weight: bold;

553 }

554

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

556

557 #noscript {

558 z-index: 20000000;

559 position: absolute;

560 top: 15px;

561 left: 15px;

562 }

563

564 /* Rules for bootstrap tooltips */

565

566 .tooltip {

567 position: absolute;

568 display: none;

569 color: #333;

570 text-align: left;

571 font-size: 12px;

572 max-width: 250px;

573 }

574

575 .tooltip.in {

576 opacity: 0.8;

577 z-index: 1030;

578 height: auto;

579 display: block;

580 }

581

582 .tooltip.top {

583 margin-top: -10px;

584 text-align: center;

585 }

586

587 .tooltip.right {

588 margin-left: 10px;

589 }

590

591 .tooltip.bottom {

592 margin-top: 10px;

593 text-align: center;

594 }

595

596 .tooltip.left {

597 margin-left: -10px;

598 text-align: right;

599 }

600

601 .tooltip-inner {

602 display: inline-block;

603 padding: 10px;

604 font-weight: normal;

605 background-color: white;

606 }

607

608 .tooltip-arrow {

609 position: absolute;

610 width: 0;

611 height: 0;

612 border-color: transparent;

613 border-style: solid;

614 }

615

616 .tooltip.top .tooltip-arrow {

617 bottom: -5px;

618 left: 50%;

619 margin-left: -5px;

620 border-top-color: white;

621 border-width: 5px 5px 0;

622 }

623

624 .tooltip.right .tooltip-arrow {

625 top: 50%;

626 left: -5px;

627 margin-top: -5px;

628 border-right-color: white;

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

630 }

631

632 .tooltip.left .tooltip-arrow {

633 top: 50%;

634 right: -5px;

635 margin-top: -5px;

636 border-left-color: white;

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

638 }

639

640 .tooltip.bottom .tooltip-arrow {

641 top: -5px;

642 left: 50%;

643 margin-left: -5px;

644 border-bottom-color: white;

645 border-width: 0 5px 5px;

646 }

647

648 /* Rules for Leaflet maps */

649

650 .leaflet-control .control-button {

651 display: block;

652 height: 40px;

653 width: 40px;

654 background-color: #333;

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

656 -bottom: 1px solid #333;

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

658 margin-bottom: 10px;

659 outline: none;

660

661 &:hover {

662 background-color: black;

663 }

664

665 &.active {

666 background-color: #9ed485;

667 }

668

669 &.disabled {

670 background-color: #333;

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

672 cursor: default;

673 }

674

675 .icon {

676 margin: 10px;

677 }

678 }

679

680 .leaflet-control .zoomin,

681 .control-layers .control-button {

682 margin-bottom: 0px;

683 border-radius: 4px 0 0 0;

684 }

685

686 .site .leaflet-control .zoomout,

687 .control-key .control-button {

688 margin-bottom: 0;

689 border-radius: 0;

690 }

691

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

693 .control-locate .control-button,

694 .control-share .control-button {

695 border-radius: 0 0 0 4px;

696 }

697

698 /* Rules for the home page */

699

700 .site-export #map,

701 .site-index #map,

702 .site-edit #map {

703 height: 100%;

704 overflow: hidden;

705 }

706

707 #map-ui {

708 display: none;

709 position: relative;

710 float: right;

711 width: 250px;

712 height: 100%;

713 background: white;

714 border-left: 1px solid #CCC;

715 overflow: auto;

716

717 .section {

718 border-bottom: 1px solid #DDD;

719 padding: 15px;

720 }

721

722 a.close-button {

723 float: right;

724 padding:5px;

725 font-size:20px;

726 line-height:10px;

727 color:#222;

728 border:1px solid #ddd;

729 }

730 }

731

732 .layers-ui,

733 .share-ui {

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

735 margin-bottom: 0;

736 }

737 }

738

739 .layers-ui {

740 li {

741 border-radius: 4px;

742 overflow: hidden;

743 margin-bottom: 10px;

744 }

745

746 label {

747 display: block;

748 padding: 5px 5px 5px 7px;

749 background-color: #eee;

750 cursor: pointer;

751 }

752

753 li.active label {

754 background-color: #ccc;

755 }

756

757 .base-layers {

758 .leaflet-container {

759 width: 100%;

760 height: 50px;

761 cursor: pointer;

762 }

763 }

764 }

765

766 .share-ui {

767 .share-tabs {

768 margin-bottom: 10px;

769

770 a {

771 color: #fff;

772 text-decoration: none;

773 background-color: $lightblue;

774 padding: 5px 10px;

775 }

776

777 a:first-child {

778 border-right: 1px solid #fff;

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

780 }

781

782 a:last-child {

783 border-left: 1px solid #fff;

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

785 }

786

787 a.active {

788 background-color: $blue;

789 }

790 }

791

792 .share-tab {

793 display: none;

794 }

795

796 .share-link {

797 input[type=text],

798 textarea {

799 width: 100%;

800 font-family: monospace;

801 font-size: small;

802 line-height: 1.3;

803 }

804 }

805

806 .share-image {

807 label {

808 margin-right: 10px;

809 }

810 }

811

812 #embed_html {

813 resize: vertical;

814 }

815

816 #mapnik_scale {

817 width: 100px;

818 }

819 }

820

821 .leaflet-top.leaflet-right {

822 top: $lineheight/2 !important;

823 .leaflet-control {

824 margin-right: 0px !important;

825 margin-top: 0px !important;

826 }

827 }

828

829 .leaflet-popup-scrolled {

830 padding-right: $lineheight;

831 border-bottom: 0px !important;

832 border-top: 0px !important;

833 }

834

835 .leaflet-popup-content-wrapper {

836 border-radius: 4px !important;

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

838 }

839

840 /* Rules for edit menu */

841

842 .menuicon {

843 padding: 0 $lineheight/4;

844 font-weight: normal;

845 display: inline-block;

846 &:hover {

847 text-decoration: none !important;

848 }

849 }

850

851 .menu {

852 display: none;

853 z-index: 10000;

854 position: absolute;

855 background-color: #ffffff;

856 border: 1px solid $lightgrey;

857 border-top: 0px;

858 ul {

859 margin: 0px;

860 }

861 li {

862 padding: 2px $lineheight/4;

863 border-top: 1px solid #eee;

864 white-space: nowrap;

865 }

866 }

867

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

869

870 #attribution {

871 display: none;

872 }

873

874 .attribution_license,

875 .attribution_project {

876 text-align: left;

877 }

878

879 .attribution_notice {

880 text-align: center;

881 }

882

883 /* Rules for the popout map sidebar */

884

885 #sidebar {

886 display: none;

887 position: relative;

888 float: left;

889 border-right: 1px solid $lightgrey;

890 width: 33.3333%;

891 height: 100%;

892 ul {

893 margin-bottom: 0;

894 &:last-child {

895 border-bottom: 1px solid #ccc;

896 }

897 li {

898 margin-bottom: $lineheight/4;

899 &:last-child {

900 margin-bottom: 0;

901 }

902 }

903 }

904 }

905

906 .sidebar_heading {

907 position: relative;

908 padding: $lineheight/2 $lineheight;

909 z-index: 9999;

910 background: $offwhite;

911 border-bottom: 1px solid #ccc;

912 h4 {

913 margin: 0;

914 }

915 }

916

917 .sidebar_close {

918 position: absolute;

919 height: $lineheight;

920 top: 0px;

921 bottom: 0;

922 right: $lineheight;

923 margin: auto;

924 }

925

926 #sidebar_content {

927 position: relative;

928 margin-bottom: 20px;

929 overflow: auto;

930 height: 100%;

931 width: 100%;

932 h4 {

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

934 margin-top: $lineheight/2;

935 margin-bottom: 0;

936 border-bottom: 1px solid #ddd;

937 }

938 }

939

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

941

942 #mapkey {

943 .mapkey-table-key img {

944 display: block;

945 margin-left: auto;

946 margin-right: auto;

947 }

948 td {

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

950 }

951 }

952

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

954

955 .search_searching {

956 margin-top: $lineheight/4;

957 margin-bottom: $lineheight/4;

958 }

959

960 .search_results_entry {

961 margin-bottom: 0;

962

963 .search_details {

964 display: block;

965 text-align: right;

966 }

967 }

968

969 .search_results_entry .search_searching {

970 text-align: center;

971 margin: $lineheight auto;

972 width: $lineheight;

973 display: block;

974 }

975

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

977

978 .search_results_error {

979 color: #f00;

980 }

981

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

983

984 #browse_content {

985 position: relative;

986 .browse_show_list.button {

987 position: absolute;

988 left: $lineheight;

989 right: $lineheight;

990 bottom: -40px;

991 margin-bottom: 0;

992 }

993 a.more-details {

994 position: absolute;

995 top: 0;

996 right: $lineheight;

997 }

998 ul li {

999 margin-bottom: 0;

1000 }

1001 }

1002

1003 .browse_details {

1004 position: relative;

1005 }

1006

1007 .browse_status {

1008 display: none;

1009 }

1010

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

1012

1013 .export_bounds {

1014 text-align: center;

1015 }

1016

1017 .export_area_inputs {

1018 margin-bottom: $lineheight/2;

1019 input[type="text"] {

1020 width: 80px;

1021 margin-bottom: 5px;

1022 }

1023 }

1024

1025 .export_bound {

1026 margin: $lineheight/4;

1027 }

1028

1029 /* Rules for the main content area */

1030

1031 #content {

1032 position: relative;

1033 }

1034

1035 .site-edit #content,

1036 .site-index #content,

1037 .site-export #content {

1038 position: fixed;

1039 padding: 0;

1040 top: 30px; bottom: 0;

1041 left: 184px; right: 0;

1042 border-left: 1px solid #ccc;

1043 }

1044

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

1046 .user-new,

1047 .user-create,

1048 .user-terms,

1049 .user-confirm,

1050 .site-copyright,

1051 .site-welcome {

1052 #content {

1053 max-width: 740px;

1054 }

1055 }

1056

1057 .user-new,

1058 .user-create,

1059 .user-terms,

1060 .user-confirm {

1061 .content-heading {

1062 height: 200px;

1063 }

1064 }

1065

1066 .user-new,

1067 .user-create,

1068 .user-terms {

1069 #content {

1070 padding: 0;

1071 }

1072 }

1073

1074 .header-illustration {

1075 background-position: 0 0;

1076 background-repeat: no-repeat;

1077 position: absolute;

1078 height: 200px;

1079 width: 100%;

1080 left: 0;

1081 bottom: 0;

1082

1083 &.new-user-main {

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

1085 }

1086

1087 &.confirm-main {

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

1089 }

1090

1091 &.new-user-terms {

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

1093 }

1094

1095 &.new-user-arm {

1096 height: 110px;

1097 width: 130px;

1098 left: 260px;

1099 top: 160px;

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

1101 }

1102 }

1103

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

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

1106 }

1107

1108 .wrapper {

1109 margin-left: 184px;

1110 border-left: 1px solid #ccc;

1111 text-align: left;

1112 }

1113

1114 #content.maximised {

1115 top: 0;

1116 left: 0;

1117 right: 0;

1118 bottom: 0;

1119 border: 0;

1120 z-index: 1000;

1121 }

1122

1123 #slim_container {

1124 width: 100%;

1125 }

1126

1127 #slim_container_content {

1128 max-width: 50em;

1129 background-color: #FFFFFF;

1130 margin: $lineheight/2 auto;

1131 padding: 3px;

1132 border-radius: 25px;

1133 -moz-border-radius: 25px;

1134 border: 1px solid #e6e6e6;

1135 }

1136

1137 #slim_content {

1138 margin: $lineheight/2;

1139 margin-top: 95px;

1140 max-width: 50em;

1141

1142 .content-heading {

1143 margin-bottom: 15px;

1144 }

1145 }

1146

1147 #slim_header {

1148 margin: 30px $lineheight/2;

1149 position: absolute;

1150 top: 0px;

1151 margin-right: $lineheight/4;

1152 img {

1153 vertical-align: middle;

1154 margin-bottom: $lineheight/4;

1155 margin-right: $lineheight/4;

1156 }

1157 }

1158

1159 .content-heading {

1160 position: relative;

1161 padding: $lineheight;

1162 background: $offwhite;

1163 z-index: 2;

1164 h1, h2 {

1165 margin-bottom: $lineheight/2;

1166 line-height: 100%;

1167 &:last-child {

1168 margin-bottom: 0;

1169 }

1170 }

1171 p {

1172 margin-top: $lineheight/2;

1173 margin-bottom: 0px;

1174 }

1175 }

1176

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

1178

1179 .content_map {

1180 position: relative;

1181 width: 45%;

1182 height: 400px;

1183 border: 1px solid #ccc;

1184 margin-bottom: $lineheight;

1185 float: right;

1186 }

1187

1188 .content_map #small_map {

1189 height: 100%;

1190 width: 100%;

1191 margin-bottom: $lineheight;

1192 }

1193

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

1195

1196 #changeset_list {

1197 width: 100%;

1198 ul {

1199 padding: $lineheight/2 0;

1200 margin-bottom: 0px;

1201 border-top: 1px solid #ccc;

1202 &:last-child {

1203 border-bottom: 1px solid #ccc;

1204 }

1205 }

1206 .selected {

1207 background: #FFFFC0;

1208 }

1209 .date,

1210 .user {

1211 border-left: 1px solid #ccc;

1212 padding-left: $lineheight/4;

1213 margin-right: $lineheight/4;

1214 }

1215 }

1216

1217 #changeset_list_map_wrapper {

1218 position: absolute;

1219 width: 50%;

1220 height: 490px;

1221 top: 0;

1222 right: 0;

1223 }

1224

1225 #changeset_list_map_wrapper.scrolled {

1226 position: fixed;

1227 }

1228

1229 #changeset_list_map {

1230 position: absolute;

1231 bottom: $lineheight;

1232 top: $lineheight;

1233 right: $lineheight;

1234 left: $lineheight;

1235 border: 1px solid #ccc;

1236 }

1237

1238 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1239 margin-left: 93px;

1240 }

1241

1242 /* Rules for the data browser */

1243

1244 .browse-section {

1245 border-top: 1px solid #ccc;

1246 margin-top: $lineheight/2;

1247 padding-top: $lineheight/2;

1248 &:first-child {

1249 margin-top: 0;

1250 }

1251 .warning {

1252 background-color: #ffe0cc;

1253 margin: 0px;

1254 padding: 4px 6px;

1255 max-width: 100%;

1256 }

1257 h4, p {

1258 margin-bottom: $lineheight/4;

1259 }

1260 ul, .bbox, .geo {

1261 display: inline-block;

1262 vertical-align: top;

1263 max-width: 65%;

1264 }

1265 ul p {

1266 margin-left: 0;

1267 margin-bottom: 0;

1268 }

1269 h4 {

1270 float: left;

1271 width: 33.3333%;

1272 display: inline-block;

1273 vertical-align: top;

1274 }

1275 }

1276

1277 .bbox {

1278 div {

1279 width: 33.3333%;

1280 text-align: center;

1281 padding: $lineheight/4 0;

1282 overflow: hidden;

1283 text-overflow: ellipsis;

1284 float: left;

1285 }

1286 .max_lat,

1287 .min_lat {

1288 margin-left: auto;

1289 margin-right: auto;

1290 width: 100%;

1291 }

1292 }

1293

1294 #browse_map .geolink {

1295 display: none;

1296 }

1297

1298 #browse_map .secondary-actions {

1299 margin-bottom: $lineheight/2;

1300 }

1301

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

1303

1304 #trace_list {

1305 font-size: $lineheight/2;

1306 border-width: 0px;

1307 text-align: right;

1308

1309 .trace_summary {

1310 font-size: 12px;

1311 color: gray;

1312 }

1313

1314 .trace_pending {

1315 color: red;

1316 }

1317

1318 .trace_public {

1319 color: green;

1320 }

1321

1322 .trace_identifiable {

1323 color: green;

1324 }

1325

1326 .trace_trackable {

1327 color: red;

1328 }

1329

1330 .trace_private {

1331 color: red;

1332 }

1333 }

1334

1335 /* Rules for the user profile page */

1336

1337 #userinformation {

1338

1339 min-height: 100px;

1340 .userinformation-inner {

1341 float: left;

1342 }

1343 h2 {

1344 margin-top: 0;

1345 }

1346 .user-description {

1347 width: 100%;

1348 clear: both;

1349 }

1350 .deemphasize {

1351 margin: 0;

1352 }

1353 }

1354

1355 .admin-user-info small {

1356 margin-bottom: $lineheight/2;

1357 display: inline;

1358 margin-right: $lineheight;

1359 }

1360

1361 .activity-block {

1362 clear: left;

1363 border-bottom: 1px solid #ccc;

1364 padding-bottom: $lineheight;

1365 float: left;

1366 h3 {

1367 margin-bottom: $lineheight/2;

1368 }

1369 }

1370

1371 .contact-activity {

1372 margin-top: $lineheight;

1373 width: 100%;

1374 }

1375

1376 .activity-details p {

1377 margin-left: 70px;

1378 margin-bottom: 0;

1379 }

1380

1381 #friends-container .contact-activity ul {

1382 margin-left: 70px;

1383 }

1384

1385 .user-view {

1386 p#no_home_location {

1387 margin: $lineheight;

1388 }

1389 .user_thumbnail {

1390 margin-top: $lineheight/4;

1391 float: left;

1392 }

1393 }

1394

1395 /* Rules for the user map */

1396

1397 .content_map .leaflet-popup-content {

1398 margin: $lineheight/2;

1399 min-height: 50px;

1400 }

1401

1402 /* Rules for user popups on maps */

1403

1404 .user_popup {

1405 min-width: 200px;

1406 p {

1407 padding: 0 0 5px 0;

1408 margin-top: 0 0 0 60px;

1409 font-size: 12px;

1410 }

1411 img.user_thumbnail {

1412 float: left;

1413 margin: 0 $lineheight/2 0 0;

1414 }

1415 }

1416

1417 /* Rules for the user list */

1418

1419 #user_list {

1420 font-size: $lineheight/2;

1421 width: 100%;

1422

1423 tr {

1424 vertical-align: middle;

1425 }

1426

1427 p {

1428 margin-top: 0px;

1429 margin-bottom: 0px;

1430 }

1431 }

1432

1433 #user_list_actions {

1434 float: right;

1435 margin-top: $lineheight/2;

1436 }

1437

1438 /* Rules for the diary list page */

1439

1440 .diary_entry-list img.user_thumbnail {

1441 float: left;

1442 }

1443

1444 .diary_post {

1445 max-width: 740px;

1446 position: relative;

1447 margin-top: $lineheight/2;

1448 padding-top: $lineheight;

1449 border-top: 1px solid #ccc;

1450

1451 &:first-child {

1452 margin-top: 0;

1453 border-top: 0;

1454 padding-top: 0;

1455 }

1456 h1, h2 {

1457 font-size: 21px;

1458 line-height: 1em;

1459 }

1460 small.deemphasize {

1461 float: left;

1462 display: block;

1463 }

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

1465 }

1466

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

1468 display: inline;

1469 }

1470

1471 #content .post_heading {

1472 margin-bottom: $lineheight;

1473 h2 {

1474 margin-top: 0;

1475 margin-bottom: $lineheight/2;

1476 font-size: 24px;

1477 }

1478 }

1479

1480 /* Rules for the diary entry page */

1481

1482 .diary_entry {

1483 #map {

1484 position: relative;

1485 width: 90%;

1486 height: 400px;

1487 border: 1px solid #ccc;

1488 display: none;

1489 margin-bottom: $lineheight;

1490 }

1491 #newcomment {

1492 border-top: 1px solid #ccc;

1493 padding-top: $lineheight;

1494 margin-top: $lineheight/2;

1495 }

1496 .comments {

1497 max-width: 740px;

1498 }

1499 .diary-comment {

1500 margin-top: $lineheight/2;

1501 border-top: 1px dashed #ccc;

1502 padding-top: $lineheight/2;

1503 &:first-child {

1504 margin-top: $lineheight;

1505 padding-top: $lineheight;

1506 border-top: 1px solid #ccc;

1507 }

1508 p {

1509 margin-bottom: $lineheight/2;

1510 }

1511 .comment-heading {

1512 margin-bottom: 0;

1513 margin-top: 0;

1514 }

1515 }

1516 }

1517

1518 .diary_entry-view img.user_thumbnail {

1519 float: left;

1520 }

1521

1522 /* Rules for the log in page */

1523

1524 #login_openid_buttons {

1525 margin-bottom: 0;

1526 }

1527

1528 #login_openid_buttons li {

1529 float: left;

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

1531 }

1532

1533 /* Rules for the account confirmation page */

1534

1535 .user-terms {

1536 .legale {

1537 border: 1px solid #ccc;

1538 padding: $lineheight;

1539 margin-bottom: $lineheight;

1540 overflow: auto;

1541 height: 10em;

1542

1543 &:p#last {

1544 margin-bottom: 0px;

1545 }

1546

1547 &:ol {

1548 margin-bottom: 0px;

1549 }

1550

1551 &:img {

1552 display: block;

1553 margin: $lineheight auto inherit auto;

1554 }

1555 }

1556

1557 #decline {

1558 background: $lightblue;

1559 &:hover {

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

1561 }

1562 }

1563 }

1564

1565 /* Rules for the account settings page */

1566

1567 #accountForm .user_map {

1568 position: relative;

1569 width: 500px;

1570 height: 400px;

1571 border: 1px solid #ccc;

1572 }

1573

1574 #accountForm .user_image {

1575 margin-bottom: 0;

1576 }

1577

1578 #accountForm #user_image {

1579 margin-left: 20px;

1580 }

1581

1582 #accountForm ul.accountImage-options {

1583 margin-left: 120px;

1584 }

1585

1586 .nohome .location {

1587 display: none;

1588 }

1589

1590 #homerow .message {

1591 display: none;

1592 }

1593

1594 .nohome .message {

1595 display: inline !important;

1596 }

1597

1598 .content_map.settings_map {

1599 width: 50%;

1600 float: none;

1601 }

1602

1603 /* Rules for the oauth settings page */

1604

1605 .oauth_clients .buttons .oauth-edit {

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

1607 }

1608

1609 .oauth_clients .buttons .oauth-delete {

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

1611 }

1612

1613 /* Rules for messages pages */

1614

1615 .messages {

1616 width: 100%;

1617 border: 1px solid #ddd;

1618

1619 input[type="submit"] {

1620 margin: auto;

1621 }

1622 tbody tr {

1623 border-top: 1px solid #ccc;

1624 }

1625

1626 .inbox-row {

1627 background: #f8f8ff;

1628 }

1629

1630 .inbox-row-unread {

1631 background:#CBEEA7;

1632 }

1633

1634 .right {

1635 float: right;

1636 }

1637

1638 tr td,

1639 tr th {

1640 padding: $lineheight/4;

1641 }

1642 p:last-child,

1643 h2:last-child,

1644 h3:last-child,

1645 ol:last-child,

1646 ul:last-child {

1647 margin-bottom:0;

1648 }

1649 tr td {

1650 height: 30px;

1651 border-right: 1px solid $lightgrey;

1652 }

1653 }

1654

1655 .inbox-row .inbox-mark-read {

1656 display: none;

1657 }

1658

1659 .info-line {

1660 margin-bottom: $lineheight;

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

1662 border-bottom: 1px solid #ccc;

1663

1664 form, form div {

1665 display: inline;

1666 }

1667 }

1668

1669 .info-line .user_thumbnail_tiny {

1670 vertical-align: middle;

1671 }

1672

1673 .inbox-mark-unread,

1674 .inbox-mark-read,

1675 .inbox-delete {

1676 width: 1%;

1677 }

1678

1679 .inbox-row-unread .inbox-mark-unread {

1680 display: none;

1681 }

1682

1683 .message-read .message-buttons {

1684 margin-top: $lineheight;

1685 padding-top: $lineheight;

1686 border-top: 1px solid $lightgrey;

1687 }

1688

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

1690 border-radius: 0;

1691 }

1692

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

1694

1695 .flash {

1696 padding: $lineheight;

1697 &#error {

1698 background-color: #ff7070;

1699 }

1700 &#warning {

1701 background-color: #ffe0cc;

1702 }

1703 &#notice {

1704 background-color: #CBEEA7;

1705 }

1706 }

1707

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

1709

1710 .field_with_errors {

1711 padding: 2px;

1712 background-color: #ff7070;

1713 display: inline-block;

1714 }

1715

1716 .formError {

1717 display: inline-block;

1718 padding: 5px 10px;

1719 margin-top: 5px;

1720 border-radius: 4px;

1721 font-size: 12px;

1722 color: #fff;

1723 background-color: #ff7070;

1724 }

1725

1726 /* Rules for rails validation error boxes */

1727

1728 #errorExplanation {

1729 width: 400px;

1730 border: 2px solid #ff7070;

1731 padding: 0 $lineheight/2;

1732 margin-bottom: $lineheight;

1733 background-color: #f0f0f0;

1734

1735 h2 {

1736 margin: 0 -10px 10px -10px;

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

1738 font-weight: bold;

1739 font-size: 12px;

1740 background-color: #c00;

1741 color: #fff;

1742 text-align: left;

1743 }

1744

1745 p {

1746 color: #333;

1747 margin-bottom: 0px;

1748 padding: $lineheight/4;

1749 }

1750

1751 ul {

1752 padding-left: $lineheight;

1753

1754 li {

1755 font-size: 12px;

1756 list-style: disc;

1757 }

1758 }

1759 }

1760

1761 /* Rules for forms */

1762

1763 .standard-form {

1764 fieldset {

1765 margin-bottom: $lineheight;

1766 }

1767 label.standard-label {

1768 display: block;

1769 margin-bottom: $lineheight/4;

1770 font-size: $typeheight;

1771 font-weight: bold;

1772 line-height: 1.5;

1773 }

1774 label.standard-label.secondary {

1775 display: inline-block;

1776 font-weight: normal;

1777 }

1778 .form-help {

1779 font-weight: normal;

1780 }

1781 .form-column {

1782 float: left;

1783 margin-right: 20px;

1784 }

1785 .form-divider {

1786 margin-top: $lineheight;

1787 padding-top: $lineheight;

1788 border-top: 1px solid $lightgrey;

1789 }

1790 .horizontal-list .form-row {

1791 float: left;

1792 padding-right: 10px;

1793 }

1794 .form-row {

1795 margin-bottom: $lineheight/2;

1796 }

1797 .form-list {

1798 margin-bottom: 0;

1799 }

1800 .form-list li {

1801 margin-bottom: 5px;

1802 }

1803 input[type="checkbox"],

1804 input[type="radio"] {

1805 float: left;

1806 margin-top: 5px;

1807 }

1808 }

1809

1810 #remember_me_openid {

1811 display: block;

1812 }

1813

1814 input[type="checkbox"],

1815 input[type="radio"] {

1816 margin-right: 5px;

1817 }

1818

1819 input[type="text"],

1820 input[type="email"],

1821 input[type="url"],

1822 input[type="password"],

1823 textarea {

1824 border: 1px solid #ccc;

1825 padding: 2px 5px;

1826 margin: 0;

1827 width: 200px;

1828 }

1829

1830 textarea {

1831 padding: 5px;

1832 width: 100%;

1833 }

1834

1835 /* Rules for user images */

1836

1837 img.user_image {

1838 max-width: 100px;

1839 max-height: 100px;

1840 border: 1px solid #ccc;

1841 margin-bottom: $lineheight;

1842 float: left;

1843 margin-right: $lineheight;

1844 }

1845

1846 img.user_thumbnail {

1847 max-width: 50px;

1848 max-height: 50px;

1849 border: 1px solid #ccc;

1850 margin-right: $lineheight;

1851 }

1852

1853 img.user_thumbnail_tiny {

1854 max-width: 25px;

1855 max-height: 25px;

1856 border: 1px solid #ccc;

1857 }

1858

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

1860

1861 .nowrap {

1862 white-space: nowrap;

1863 }

1864

1865 /* Rules for geo microformats */

1866

1867 abbr.geo {

1868 border-bottom: none;

1869 }

1870

1871 /* Rules for RSS buttons */

1872

1873 .rsssmall {

1874 position: relative;

1875 top: 5px;

1876 }

1877

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

1879

1880 ul.secondary-actions {

1881 font-style: normal;

1882 margin-bottom: 0;

1883 margin-left: 0;

1884 &.pager {

1885 display: inline-block;

1886 margin-right: 60px;

1887 }

1888 li {

1889 display: block;

1890 float: left;

1891 list-style: none;

1892 border-left: 1px solid #ccc;

1893 padding-left: $lineheight/4;

1894 margin-right: $lineheight/4;

1895 &:first-child {

1896 border-left: 0;

1897 padding-left: 0;

1898 }

1899 &:last-child {

1900 margin-right: 0px;

1901 }

1902 }

1903 }

1904

1905 /* Utility for managing inner content areas */

1906

1907 .inner22 { padding: $lineheight;}

1908

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

1910

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

1912

1913 .inner20 { padding: $lineheight 0;}

1914

1915 .inner02 { padding: 0 $lineheight;}

1916

1917 /* Utility for general button styles */

1918

1919 input[type="button"],

1920 input[type="submit"],

1921 input[type="reset"],

1922 a.button {

1923 cursor: pointer;

1924 border: 0;

1925 display: inline-block;

1926 line-height: 20px;

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

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

1929 min-width: 120px;

1930 margin: 0 0 $lineheight/2 0;

1931 color: white;

1932 background: $blue;

1933 text-align: center;

1934 border-radius: 2px;

1935 -moz-border-radius: 2px;

1936 &:hover {

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

1938 text-decoration: none;

1939 }

1940 &.deemphasize {

1941 background: $lightblue;

1942 &:hover {

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

1944 }

1945 }

1946 &:disabled {

1947 background: $lightgrey;

1948 &:hover {

1949 background: $lightgrey;

1950 }

1951 }

1952 &:last-child {

1953 margin-bottom: 0;

1954 }

1955 }

1956

1957 .buttons {

1958 min-width: 200px;

1959 input[type="submit"],

1960 input[type="button"],

1961 input[type="reset"],

1962 .button {

1963 box-sizing: border-box;

1964 float: left;

1965 border-radius: 0;

1966 margin:0;

1967 min-width: 100px;

1968 max-width: 180px;

1969 border-right:1px solid white;

1970 text-overflow: ellipsis;

1971 white-space: nowrap;

1972 overflow: hidden;

1973 }

1974 input:first-child,

1975 .button:first-child {

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

1977 }

1978 input:last-child,

1979 .button:last-child {

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

1981 border-right-width: 0;

1982 }

1983 input:only-child,

1984 .button:only-child,

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

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

1987 border-radius:2px;

1988 border-right-width: 0;

1989 }

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

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

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

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

1994 border-right-width: 0;

1995 }

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

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

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

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

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

2001 }

2002 }

2003

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

2005

2006 .table0,

2007 .item0 {

2008 background: $offwhite;

2009 }

2010

2011 .table1,

2012 .item1 {

2013 background: #fff;

2014 }

2015

2016 /* Rules for OpenID logo */

2017

2018 .openid_logo {

2019 vertical-align: text-bottom;

2020 border: 0;

2021 }

2022

2023 /* Rules for rich text */

2024

2025 .richtext,

2026 .prose {

2027 h1, h2 {

2028 padding-bottom: $lineheight/2;

2029 border-bottom: 1px dashed #cccccc;

2030 margin-bottom: $lineheight/2;

2031 }

2032

2033 h1 {

2034 font-size: 24px;

2035 }

2036

2037 h2 {

2038 font-size: 18px;

2039 }

2040

2041 h3 {

2042 font-size: $typeheight;

2043 }

2044

2045 code {

2046 font-size: 13px;

2047 background: #e8e8e8;

2048 padding: 2px 3px;

2049 }

2050

2051 pre {

2052 font-size: 13px;

2053 background: #e8e8e8;

2054 padding: 2px 3px;

2055

2056 code {

2057 padding: 0;

2058 }

2059 }

2060

2061 img {

2062 padding: $lineheight;

2063 background-color: $offwhite;

2064 display: block;

2065 max-width: 100%;

2066 margin: auto;

2067 }

2068

2069 blockquote {

2070 border-left: $lineheight solid $offwhite;

2071 padding-left: $lineheight;

2072 margin: 0;

2073 color: #7E7E7E;

2074 }

2075

2076 ul, ol {

2077 padding-left: $lineheight;

2078 margin-bottom: $lineheight;

2079 margin-left: $lineheight;

2080 }

2081

2082 ul li {

2083 list-style: disc;

2084 }

2085

2086 ol li {

2087 list-style: decimal;

2088 }

2089 }

2090

2091 .diary_post .richtext {

2092 margin-top: $lineheight;

2093 }

2094

2095 .comments .richtext {

2096 margin-left: 70px;

2097 margin-top: 0;

2098 }

2099

2100 /* Rules for rich text editors */

2101

2102 .richtext_container {

2103 margin-bottom: $lineheight;

2104

2105 .richtext_content {

2106 width: 50%;

2107 display: inline-block;

2108 vertical-align: top;

2109

2110 .richtext_preview {

2111 display: inline-block;

2112 padding: $lineheight;

2113 background-color: $offwhite;

2114 overflow-x: auto;

2115

2116 &.loading {

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

2118 background-repeat: no-repeat;

2119 background-position: center;

2120 }

2121

2122 > :first-child {

2123 margin-top: 0px;

2124 }

2125 }

2126 }

2127

2128 .richtext_help {

2129 display: inline-block;

2130 vertical-align: top;

2131 margin-left: 15px;

2132 background-color: #f8f8ff;

2133 padding: $lineheight/2;

2134 width: 220px;

2135

2136 ul {

2137 margin-bottom: 0;

2138 }

2139

2140 h4.heading, li {

2141 border-bottom: 1px solid #ccc;

2142 margin-bottom: $lineheight/4;

2143 padding-bottom: $lineheight/4;

2144 }

2145

2146 li h4, li span, li p {

2147 display: inline-block;

2148 vertical-align: top;

2149 font-size: 11px;

2150 }

2151

2152 li h4 {

2153 width: 40%;

2154 margin: 0;

2155 }

2156

2157 li span, li p {

2158 width: 50%;

2159 margin-left: $lineheight/2;

2160 margin-bottom: $lineheight/4;

2161 white-space: nowrap;

2162 }

2163 }

2164 }

2165

2166 /* Rules for the user notes list */

2167

2168 .note_list {

2169 tr.creator {

2170 background-color: #eeeeee;

2171 }

2172

2173 td {

2174 padding: 3px;

2175 }

2176

2177 p {

2178 margin-bottom: 0px;

2179 }

2180 }

2181

2182 /* Rules for the notes interface */

2183

2184 .leaflet-popup-content .note {

2185 padding-top: $lineheight/2;

2186 }

2187

2188 .leaflet-popup-content .note {

2189 h2 {

2190 margin-bottom: $lineheight/2;

2191 }

2192

2193 div {

2194 margin-top: $lineheight/2;

2195 }

2196

2197 .permalink {

2198 position: absolute;

2199 top: $lineheight/4;

2200 left: $lineheight/4;

2201 min-width: 15px;

2202 min-height: 15px;

2203 }

2204

2205 .permalink span {

2206 display: none;

2207 padding-left: $lineheight;

2208 }

2209

2210 .permalink:hover span {

2211 display: block;

2212 }

2213

2214 .warning {

2215 display: block;

2216 background-color: #ffe0cc;

2217 padding: 4px 6px;

2218 margin-bottom: $lineheight/2;

2219 }

2220

2221 .comment_body {

2222 margin-top: 2px;

2223 margin-bottom: 2px;

2224

2225 p {

2226 margin-top: 0px;

2227 margin-bottom: 0px;

2228 }

2229 }

2230

2231 .comment {

2232 width: 100%;

2233 height: 100px;

2234 }

2235

2236 .buttons {

2237 margin-top: $lineheight/4;

2238 text-align: right;

2239 }

2240 }

2241

2242 /*

2243 * Rules for the iD editor

2244 */

2245

2246 .site-edit-id {

2247 #left,

2248 #large-title {

2249 display: none;

2250 }

2251

2252 #small-title {

2253 display: inline-block;

2254 width: 185px;

2255 height: 30px;

2256 font-size: 14px;

2257 margin: 0;

2258 background-color: #eee;

2259 border-bottom: 1px solid #ccc;

2260 text-align: center;

2261 padding-top: 7px;

2262 }

2263

2264 #content {

2265 left: 0;

2266 }

2267 }

2268

2269 .id-embed {

2270 width: 100%;

2271 height: 100%;

2272 }

2273

2274 /* Rules for rotating sidebar ads */

2275 .ad-container {

2276 display: block;

2277 height: 120px;

2278 overflow: hidden;

2279 position: relative;

2280 border-bottom: 1px solid #ccc;

2281 }

2282

2283 .ad {

2284 height: 100px;

2285 border: 0;

2286 background: #fff;

2287 }

2288

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

2290 .site-welcome {

2291 .center {

2292 text-align: center;

2293 .sprite {

2294 float: none;

2295 margin: auto;

2296 }

2297 }

2298

2299 .drop {

2300 margin-top: 20px;

2301 }

2302

2303 .sprite {

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

2305 background-size: 500px 250px;

2306 display: block;

2307 float: left;

2308 }

2309

2310 .icon-list {

2311 padding-bottom: 20px;

2312 div {

2313 margin-bottom: 10px;

2314 p {

2315 padding-top: 10px;

2316 }

2317 }

2318 }

2319 .sprite.small {

2320 width: 50px;

2321 height: 50px;

2322 }

2323

2324 .sprite.x {

2325 background-position: -50px 0;

2326 }

2327

2328 .sprite.term {

2329 margin-right: 10px;

2330 vertical-align: middle;

2331 }

2332

2333 .sprite.node {

2334 background-position: -100px 0;

2335 }

2336

2337 .sprite.way {

2338 background-position: -150px 0;

2339 }

2340

2341 .sprite.tag {

2342 background-position: -200px 0;

2343 }

2344

2345 .sprite.editor {

2346 background-position: -250px 0;

2347 }

2348

2349 .sprite.question {

2350 background-position: -300px 0;

2351 }

2352

2353 .start-mapping {

2354 margin: auto;

2355 cursor: pointer;

2356 border: none;

2357 padding: 20px 40px;

2358 font-size: 30px;

2359 text-decoration: none;

2360 }

2361

2362 .note-box {

2363 background-color: $offwhite;

2364 }

2365 }