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 .icon.gear { background-position: -260px 0; }

206

207 /* Rules for links */

208

209 a {

210 color: #00f;

211 text-decoration: none;

212 &:hover {

213 text-decoration: underline;

214 }

215 }

216

217 /* Rules for horizontal lines */

218

219 hr {

220 border: none;

221 background-color: #ccc;

222 color: #ccc;

223 height: 1px;

224 }

225

226 /* General styles for tables */

227

228 table {

229 width: 100%;

230 margin-bottom: $lineheight;

231 th, td {

232 text-align: left;

233 padding: $lineheight/4;

234 line-height: $lineheight;

235 }

236 th {

237 font-weight: bold;

238 vertical-align: top;

239 }

240 td {

241 vertical-align: middle;

242 }

243 }

244

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

246

247 #left {

248 position: absolute;

249 height: 100%;

250 width: 185px;

251 font-size: 11px;

252 line-height: 1.1;

253 z-index: 100;

254 border-right: 1px solid #ccc;

255 }

256

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

258

259 #logo {

260 display: block;

261 width: 170px;

262 min-width: 170px;

263 padding: $lineheight $lineheight/4;

264 text-align: center;

265 margin: auto;

266 }

267

268 #logo h1 {

269 font-size: 18px;

270 line-height: 1;

271 text-align: center;

272 margin: 0;

273 }

274

275 #logo h2 {

276 font-size: $lineheight/2;

277 line-height: 15px;

278 margin: 0;

279 }

280

281 /* Rules for the site name */

282

283 #small-title {

284 display: none;

285

286 img {

287 vertical-align: text-bottom;

288 }

289 }

290

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

292

293 .sidebar-copy {

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

295 p {

296 margin: $lineheight/4 0;

297 }

298 }

299 .sidebar-copy.intro {

300 border-top: 1px solid #ccc;

301 }

302

303 /*

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

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

306 * undergoing maintenance.

307 */

308

309 .sidebar-alert {

310 padding: $lineheight/4;

311 border-top: 1px solid #ccc;

312 margin-top: 4px;

313 margin-bottom: -5px;

314 background: #e00;

315 font-size: 12px;

316 font-weight: bold;

317 p {

318 margin: $lineheight/4;

319 }

320 }

321

322 /*

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

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

325 * donation drives.

326 */

327

328 .sidebar-notice {

329 padding: $lineheight/4;

330 border-top: 1px solid #ccc;

331 margin-top: 4px;

332 margin-bottom: -5px;

333 background: #ea0;

334 font-size: 12px;

335 p {

336 margin: $lineheight/4;

337 }

338 }

339

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

341

342 .left_menu {

343 left: 0px;

344 margin: 0;

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

346 font-size: 12px;

347 line-height: 1.25;

348 list-style-type: none;

349 border-bottom: 1px solid #ccc;

350 border-top: 1px solid #ccc;

351 img {

352 margin: $lineheight/2 0px;

353 }

354

355 ul {

356 padding: 0;

357 margin: 0;

358 }

359

360 li {

361 list-style-type: none;

362 padding: 0;

363 margin: 0;

364 }

365

366 h4 {

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

368 font-size: 12px;

369 margin: 0;

370 }

371 }

372

373 /*

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

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

376 * and the tag cloud on the traces pages.

377 */

378

379 .optionalbox {

380 left: 0px;

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

382 margin: $lineheight/4 0;

383 text-align: left;

384 }

385

386 /* Rules for the search box */

387

388 #search_field {

389 position: relative;

390

391 form {

392 width: 165px;

393 }

394

395 input[type="text"] {

396 width: 165px;

397 padding: 3px;

398 font-size: $typeheight;

399 line-height: 1.1;

400 height: 25px;

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

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

403 }

404

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

406 outline: none;

407 border: 1px solid #000;

408 }

409

410 input[type="submit"] {

411 border: 0;

412 margin: 0;

413 padding: 0;

414 width: 15px;

415 height: 15px;

416 min-width: 0;

417 text-indent: -1000px;

418 overflow: hidden;

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

420 position: absolute;

421 top: $lineheight/4;

422 right: $lineheight/4;

423 cursor: pointer;

424 }

425 }

426

427 .search_help {

428 margin: $lineheight/4 0 0 0;

429 }

430

431 /* Utility for de-emphasizing content */

432

433 .deemphasize {

434 color: #999;

435 a {

436 color: $blue;

437 }

438 }

439

440 /* Rules for donation request box */

441

442 a.donate {

443 display: block;

444 width: 163px;

445 padding: $lineheight/4;

446 border: 1px solid #AED1A0;

447 background: #cbeea7;

448 font-size: $typeheight;

449 line-height: 1.4;

450 text-align: center;

451 border-radius: 2px;

452 color: #222;

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

454

455 &:hover {

456 background: #9ed485;

457 text-decoration: none;

458 }

459 }

460

461 /* Rules for Creative Commons logo button */

462

463 #cclogo {

464 margin: $lineheight/2 0;

465 float: right;

466 }

467

468 /* Rules for tabbed navigation bar */

469

470 #top-bar {

471 position: relative;

472 margin-left: 185px;

473 height: 30px;

474 border-bottom: 1px solid #ccc;

475 background: white;

476 z-index: 1001;

477

478 .caret {

479 margin-top: 10px;

480 }

481 }

482

483 .site-edit #top-bar,

484 .site-index #top-bar,

485 .site-export #top-bar {

486 position: fixed;

487 top: 0;

488 left: 0;

489 right: 0;

490 }

491

492 #tabnav {

493 height: 29px;

494 margin-bottom: 0;

495

496 > li {

497 float: left;

498

499 > * {

500 padding: 3px $lineheight/2;

501 }

502 }

503

504 a.tab {

505 display: inline-block;

506 font-weight: bold;

507 text-decoration: none;

508 color: #333;

509

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

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

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

513 transition: color 200ms ease-in;

514

515 &:hover {

516 text-decoration: underline;

517 }

518 }

519

520 .disabled a {

521 color: #ccc;

522 cursor: default;

523

524 &:hover {

525 text-decoration: none;

526 }

527

528 .caret {

529 border-top-color: #ccc;

530 }

531 }

532

533 .dropdown {

534 height: 29px;

535 }

536 }

537

538 .site-index #view_tab,

539 .site-edit #edit_tab,

540 .changeset-list #history_tab {

541 background: #9ed485;

542 color: #000;

543 }

544

545 /* Utility for styling notification numbers */

546

547 .count-number {

548 padding: 2px $lineheight/4;

549 border-radius: 2px;

550 background: #d7d7ff;

551 margin: 0 2px;

552 font-size: 11px;

553 color: #333;

554 }

555

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

557

558 #greeting {

559 float: right;

560 height: 100%;

561

562 &.secondary-actions {

563 padding: 3px $lineheight/2;

564 }

565

566 &.dropdown {

567 background-color: #EEE;

568 &:hover {

569 background-color: #CCC;

570 }

571 }

572

573 img {

574 vertical-align: top;

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

576 margin-right: 5px;

577 }

578

579 #inboxanchor {

580 display: inline-block;

581 position: relative;

582 height: 20px;

583 top: -2px;

584 margin: 0 2px 0 0;

585 padding: 0 5px 0 0;

586 border-radius: 2px;

587 }

588

589 .dropdown-toggle {

590 display: block;

591 padding: 3px 7px;

592 color: #000;

593 text-decoration: none;

594 }

595

596 .dropdown-menu {

597 left: auto;

598 right: 0;

599

600 .count-number {

601 float: right;

602 padding: 0 5px;

603 margin: 0;

604 }

605 }

606 }

607

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

609

610 #noscript {

611 z-index: 20000000;

612 position: absolute;

613 top: 15px;

614 left: 15px;

615 }

616

617 /* Rules for bootstrap tooltips */

618

619 .tooltip {

620 position: absolute;

621 display: none;

622 color: #333;

623 text-align: left;

624 font-size: 12px;

625 max-width: 250px;

626 }

627

628 .tooltip.in {

629 opacity: 0.8;

630 z-index: 1030;

631 height: auto;

632 display: block;

633 }

634

635 .tooltip.top {

636 margin-top: -10px;

637 text-align: center;

638 }

639

640 .tooltip.right {

641 margin-left: 10px;

642 }

643

644 .tooltip.bottom {

645 margin-top: 10px;

646 text-align: center;

647 }

648

649 .tooltip.left {

650 margin-left: -10px;

651 text-align: right;

652 }

653

654 .tooltip-inner {

655 display: inline-block;

656 padding: 10px;

657 font-weight: normal;

658 background-color: white;

659 }

660

661 .tooltip-arrow {

662 position: absolute;

663 width: 0;

664 height: 0;

665 border-color: transparent;

666 border-style: solid;

667 }

668

669 .tooltip.top .tooltip-arrow {

670 bottom: -5px;

671 left: 50%;

672 margin-left: -5px;

673 border-top-color: white;

674 border-width: 5px 5px 0;

675 }

676

677 .tooltip.right .tooltip-arrow {

678 top: 50%;

679 left: -5px;

680 margin-top: -5px;

681 border-right-color: white;

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

683 }

684

685 .tooltip.left .tooltip-arrow {

686 top: 50%;

687 right: -5px;

688 margin-top: -5px;

689 border-left-color: white;

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

691 }

692

693 .tooltip.bottom .tooltip-arrow {

694 top: -5px;

695 left: 50%;

696 margin-left: -5px;

697 border-bottom-color: white;

698 border-width: 0 5px 5px;

699 }

700

701 /* Rules for Leaflet maps */

702

703 .leaflet-control .control-button {

704 display: block;

705 height: 40px;

706 width: 40px;

707 background-color: #333;

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

709 -bottom: 1px solid #333;

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

711 margin-bottom: 10px;

712 outline: none;

713

714 &:hover {

715 background-color: black;

716 }

717

718 &.active {

719 background-color: #9ed485;

720 }

721

722 &.disabled {

723 background-color: #333;

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

725 cursor: default;

726 }

727

728 .icon {

729 margin: 10px;

730 }

731 }

732

733 .leaflet-control .zoomin,

734 .control-layers .control-button {

735 margin-bottom: 0px;

736 border-radius: 4px 0 0 0;

737 }

738

739 .site .leaflet-control .zoomout,

740 .control-key .control-button {

741 margin-bottom: 0;

742 border-radius: 0;

743 }

744

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

746 .control-locate .control-button,

747 .control-share .control-button {

748 border-radius: 0 0 0 4px;

749 }

750

751 /* Rules for the home page */

752

753 .site-export #map,

754 .site-index #map,

755 .site-edit #map {

756 height: 100%;

757 overflow: hidden;

758 }

759

760 #map-ui {

761 display: none;

762 position: relative;

763 float: right;

764 width: 250px;

765 height: 100%;

766 background: white;

767 border-left: 1px solid #CCC;

768 overflow: auto;

769

770 .section {

771 border-bottom: 1px solid #DDD;

772 padding: 15px;

773 }

774

775 a.close-button {

776 float: right;

777 padding:5px;

778 font-size:20px;

779 line-height:10px;

780 color:#222;

781 border:1px solid #ddd;

782 }

783 }

784

785 .layers-ui,

786 .share-ui {

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

788 margin-bottom: 0;

789 }

790 }

791

792 .layers-ui {

793 li {

794 border-radius: 4px;

795 overflow: hidden;

796 margin-bottom: 10px;

797 }

798

799 label {

800 display: block;

801 padding: 5px 5px 5px 7px;

802 background-color: #eee;

803 cursor: pointer;

804 }

805

806 li.active label {

807 background-color: #ccc;

808 }

809

810 .base-layers {

811 .leaflet-container {

812 width: 100%;

813 height: 50px;

814 cursor: pointer;

815 }

816 }

817 }

818

819 .share-ui {

820 .share-tabs {

821 margin-bottom: 10px;

822

823 a {

824 color: #fff;

825 text-decoration: none;

826 background-color: $lightblue;

827 padding: 5px 10px;

828 }

829

830 a:first-child {

831 border-right: 1px solid #fff;

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

833 }

834

835 a:last-child {

836 border-left: 1px solid #fff;

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

838 }

839

840 a.active {

841 background-color: $blue;

842 }

843 }

844

845 .share-tab {

846 display: none;

847 }

848

849 .share-link {

850 input[type=text],

851 textarea {

852 width: 100%;

853 font-family: monospace;

854 font-size: small;

855 line-height: 1.3;

856 }

857 }

858

859 .share-image {

860 label {

861 margin-right: 10px;

862 }

863 }

864

865 #embed_html {

866 resize: vertical;

867 }

868

869 #mapnik_scale {

870 width: 100px;

871 }

872 }

873

874 .leaflet-top.leaflet-right {

875 top: $lineheight/2 !important;

876 .leaflet-control {

877 margin-right: 0px !important;

878 margin-top: 0px !important;

879 }

880 }

881

882 .leaflet-popup-scrolled {

883 padding-right: $lineheight;

884 border-bottom: 0px !important;

885 border-top: 0px !important;

886 }

887

888 .leaflet-popup-content-wrapper {

889 border-radius: 4px !important;

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

891 }

892

893 /* Rules for edit menu */

894

895 .menuicon {

896 padding: 0 $lineheight/4;

897 font-weight: normal;

898 display: inline-block;

899 &:hover {

900 text-decoration: none !important;

901 }

902 }

903

904 .menu {

905 display: none;

906 z-index: 10000;

907 position: absolute;

908 background-color: #ffffff;

909 border: 1px solid $lightgrey;

910 border-top: 0px;

911 ul {

912 margin: 0px;

913 }

914 li {

915 padding: 2px $lineheight/4;

916 border-top: 1px solid #eee;

917 white-space: nowrap;

918 }

919 }

920

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

922

923 #attribution {

924 display: none;

925 }

926

927 .attribution_license,

928 .attribution_project {

929 text-align: left;

930 }

931

932 .attribution_notice {

933 text-align: center;

934 }

935

936 /* Rules for the popout map sidebar */

937

938 #sidebar {

939 display: none;

940 position: relative;

941 float: left;

942 border-right: 1px solid $lightgrey;

943 width: 33.3333%;

944 height: 100%;

945 ul {

946 margin-bottom: 0;

947 &:last-child {

948 border-bottom: 1px solid #ccc;

949 }

950 li {

951 margin-bottom: $lineheight/4;

952 &:last-child {

953 margin-bottom: 0;

954 }

955 }

956 }

957 }

958

959 .sidebar_heading {

960 position: relative;

961 padding: $lineheight/2 $lineheight;

962 z-index: 9999;

963 background: $offwhite;

964 border-bottom: 1px solid #ccc;

965 h4 {

966 margin: 0;

967 }

968 }

969

970 .sidebar_close {

971 position: absolute;

972 height: $lineheight;

973 top: 0px;

974 bottom: 0;

975 right: $lineheight;

976 margin: auto;

977 }

978

979 #sidebar_content {

980 position: relative;

981 margin-bottom: 20px;

982 overflow: auto;

983 height: 100%;

984 width: 100%;

985 h4 {

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

987 margin-top: $lineheight/2;

988 margin-bottom: 0;

989 border-bottom: 1px solid #ddd;

990 }

991 }

992

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

994

995 #mapkey {

996 .mapkey-table-key img {

997 display: block;

998 margin-left: auto;

999 margin-right: auto;

1000 }

1001 td {

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

1003 }

1004 }

1005

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

1007

1008 .search_searching {

1009 margin-top: $lineheight/4;

1010 margin-bottom: $lineheight/4;

1011 }

1012

1013 .search_results_entry {

1014 margin-bottom: 0;

1015

1016 .search_details {

1017 display: block;

1018 text-align: right;

1019 }

1020 }

1021

1022 .search_results_entry .search_searching {

1023 text-align: center;

1024 margin: $lineheight auto;

1025 width: $lineheight;

1026 display: block;

1027 }

1028

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

1030

1031 .search_results_error {

1032 color: #f00;

1033 }

1034

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

1036

1037 #browse_content {

1038 position: relative;

1039 .browse_show_list.button {

1040 position: absolute;

1041 left: $lineheight;

1042 right: $lineheight;

1043 bottom: -40px;

1044 margin-bottom: 0;

1045 }

1046 a.more-details {

1047 position: absolute;

1048 top: 0;

1049 right: $lineheight;

1050 }

1051 ul li {

1052 margin-bottom: 0;

1053 }

1054 }

1055

1056 .browse_details {

1057 position: relative;

1058 }

1059

1060 .browse_status {

1061 display: none;

1062 }

1063

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

1065

1066 .export_bounds {

1067 text-align: center;

1068 }

1069

1070 .export_area_inputs {

1071 margin-bottom: $lineheight/2;

1072 input[type="text"] {

1073 width: 80px;

1074 margin-bottom: 5px;

1075 }

1076 }

1077

1078 .export_bound {

1079 margin: $lineheight/4;

1080 }

1081

1082 /* Rules for the main content area */

1083

1084 #content {

1085 position: relative;

1086 padding: $lineheight;

1087 }

1088

1089 .site-edit #content,

1090 .site-index #content,

1091 .site-export #content {

1092 position: fixed;

1093 padding: 0;

1094 top: 30px; bottom: 0;

1095 left: 184px; right: 0;

1096 border-left: 1px solid #ccc;

1097 }

1098

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

1100 .user-new,

1101 .user-create,

1102 .user-terms,

1103 .user-confirm,

1104 .site-copyright,

1105 .site-welcome {

1106 #content {

1107 max-width: 740px;

1108 }

1109 }

1110

1111 .user-new,

1112 .user-create,

1113 .user-terms,

1114 .user-confirm {

1115 .content-heading {

1116 height: 200px;

1117 }

1118 }

1119

1120 .user-new,

1121 .user-create,

1122 .user-terms {

1123 #content {

1124 padding: 0;

1125 }

1126 }

1127

1128 .header-illustration {

1129 background-position: 0 0;

1130 background-repeat: no-repeat;

1131 position: absolute;

1132 height: 200px;

1133 width: 100%;

1134 left: 0;

1135 bottom: 0;

1136

1137 &.new-user-main {

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

1139 }

1140

1141 &.confirm-main {

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

1143 }

1144

1145 &.new-user-terms {

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

1147 }

1148

1149 &.new-user-arm {

1150 height: 110px;

1151 width: 130px;

1152 left: 260px;

1153 top: 160px;

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

1155 }

1156 }

1157

1158 @media only screen and (max-width:900px) {

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

1160 }

1161

1162 .wrapper {

1163 margin-left: 184px;

1164 border-left: 1px solid #ccc;

1165 text-align: left;

1166 }

1167

1168 #content.maximised {

1169 top: 0;

1170 left: 0;

1171 right: 0;

1172 bottom: 0;

1173 border: 0;

1174 z-index: 1000;

1175 }

1176

1177 #slim_container {

1178 width: 100%;

1179 }

1180

1181 #slim_container_content {

1182 max-width: 50em;

1183 background-color: #FFFFFF;

1184 margin: $lineheight/2 auto;

1185 padding: 3px;

1186 border-radius: 25px;

1187 -moz-border-radius: 25px;

1188 border: 1px solid #e6e6e6;

1189 }

1190

1191 #slim_content {

1192 margin: $lineheight/2;

1193 margin-top: 95px;

1194 max-width: 50em;

1195

1196 .content-heading {

1197 margin-bottom: 15px;

1198 }

1199 }

1200

1201 #slim_header {

1202 margin: 30px $lineheight/2;

1203 position: absolute;

1204 top: 0px;

1205 margin-right: $lineheight/4;

1206 img {

1207 vertical-align: middle;

1208 margin-bottom: $lineheight/4;

1209 margin-right: $lineheight/4;

1210 }

1211 }

1212

1213 .content-heading {

1214 position: relative;

1215 padding: $lineheight;

1216 background: $offwhite;

1217 z-index: 2;

1218 h1, h2 {

1219 margin-bottom: $lineheight/2;

1220 line-height: 100%;

1221 &:last-child {

1222 margin-bottom: 0;

1223 }

1224 }

1225 p {

1226 margin-top: $lineheight/2;

1227 margin-bottom: 0px;

1228 }

1229 }

1230

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

1232

1233 .content_map {

1234 position: relative;

1235 width: 45%;

1236 height: 400px;

1237 border: 1px solid #ccc;

1238 margin-bottom: $lineheight;

1239 float: right;

1240 }

1241

1242 .content_map #small_map {

1243 height: 100%;

1244 width: 100%;

1245 margin-bottom: $lineheight;

1246 }

1247

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

1249

1250 #changeset_list {

1251 width: 100%;

1252 ul {

1253 padding: $lineheight/2 0;

1254 margin-bottom: 0px;

1255 border-top: 1px solid #ccc;

1256 &:last-child {

1257 border-bottom: 1px solid #ccc;

1258 }

1259 }

1260 .selected {

1261 background: #FFFFC0;

1262 }

1263 .date,

1264 .user {

1265 border-left: 1px solid #ccc;

1266 padding-left: $lineheight/4;

1267 margin-right: $lineheight/4;

1268 }

1269 }

1270

1271 #changeset_list_map_wrapper {

1272 position: absolute;

1273 width: 50%;

1274 height: 490px;

1275 top: 0;

1276 right: 0;

1277 }

1278

1279 #changeset_list_map_wrapper.scrolled {

1280 position: fixed;

1281 }

1282

1283 #changeset_list_map {

1284 position: absolute;

1285 bottom: $lineheight;

1286 top: $lineheight;

1287 right: $lineheight;

1288 left: $lineheight;

1289 border: 1px solid #ccc;

1290 }

1291

1292 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1293 margin-left: 93px;

1294 }

1295

1296 /* Rules for the data browser */

1297

1298 .browse-section {

1299 border-top: 1px solid #ccc;

1300 margin-top: $lineheight/2;

1301 padding-top: $lineheight/2;

1302 &:first-child {

1303 margin-top: 0;

1304 }

1305 .warning {

1306 background-color: #ffe0cc;

1307 margin: 0px;

1308 padding: 4px 6px;

1309 max-width: 100%;

1310 }

1311 h4, p {

1312 margin-bottom: $lineheight/4;

1313 }

1314 ul, .bbox, .geo {

1315 display: inline-block;

1316 vertical-align: top;

1317 max-width: 65%;

1318 }

1319 ul p {

1320 margin-left: 0;

1321 margin-bottom: 0;

1322 }

1323 h4 {

1324 float: left;

1325 width: 33.3333%;

1326 display: inline-block;

1327 vertical-align: top;

1328 }

1329 }

1330

1331 .bbox {

1332 div {

1333 width: 33.3333%;

1334 text-align: center;

1335 padding: $lineheight/4 0;

1336 overflow: hidden;

1337 text-overflow: ellipsis;

1338 float: left;

1339 }

1340 .max_lat,

1341 .min_lat {

1342 margin-left: auto;

1343 margin-right: auto;

1344 width: 100%;

1345 }

1346 }

1347

1348 #browse_map .secondary-actions {

1349 display: none;

1350 margin-bottom: $lineheight/2;

1351 }

1352

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

1354

1355 #trace_list {

1356 font-size: $lineheight/2;

1357 border-width: 0px;

1358 text-align: right;

1359

1360 .trace_summary {

1361 font-size: 12px;

1362 color: gray;

1363 }

1364

1365 .trace_pending {

1366 color: red;

1367 }

1368

1369 .trace_public {

1370 color: green;

1371 }

1372

1373 .trace_identifiable {

1374 color: green;

1375 }

1376

1377 .trace_trackable {

1378 color: red;

1379 }

1380

1381 .trace_private {

1382 color: red;

1383 }

1384 }

1385

1386 /* Rules for the user profile page */

1387

1388 #userinformation {

1389

1390 min-height: 100px;

1391 .userinformation-inner {

1392 float: left;

1393 }

1394 h2 {

1395 margin-top: 0;

1396 }

1397 .user-description {

1398 width: 100%;

1399 clear: both;

1400 }

1401 .deemphasize {

1402 margin: 0;

1403 }

1404 }

1405

1406 .admin-user-info small {

1407 margin-bottom: $lineheight/2;

1408 display: inline;

1409 margin-right: $lineheight;

1410 }

1411

1412 .activity-block {

1413 clear: left;

1414 border-bottom: 1px solid #ccc;

1415 padding-bottom: $lineheight;

1416 float: left;

1417 h3 {

1418 margin-bottom: $lineheight/2;

1419 }

1420 }

1421

1422 .contact-activity {

1423 margin-top: $lineheight;

1424 width: 100%;

1425 }

1426

1427 .activity-details p {

1428 margin-left: 70px;

1429 margin-bottom: 0;

1430 }

1431

1432 #friends-container .contact-activity ul {

1433 margin-left: 70px;

1434 }

1435

1436 .user-view {

1437 p#no_home_location {

1438 margin: $lineheight;

1439 }

1440 .user_thumbnail {

1441 margin-top: $lineheight/4;

1442 float: left;

1443 }

1444 }

1445

1446 /* Rules for the user map */

1447

1448 .content_map .leaflet-popup-content {

1449 margin: $lineheight/2;

1450 min-height: 50px;

1451 }

1452

1453 /* Rules for user popups on maps */

1454

1455 .user_popup {

1456 min-width: 200px;

1457 p {

1458 padding: 0 0 5px 0;

1459 margin-top: 0 0 0 60px;

1460 font-size: 12px;

1461 }

1462 img.user_thumbnail {

1463 float: left;

1464 margin: 0 $lineheight/2 0 0;

1465 }

1466 }

1467

1468 /* Rules for the user list */

1469

1470 #user_list {

1471 font-size: $lineheight/2;

1472 width: 100%;

1473

1474 tr {

1475 vertical-align: middle;

1476 }

1477

1478 p {

1479 margin-top: 0px;

1480 margin-bottom: 0px;

1481 }

1482 }

1483

1484 #user_list_actions {

1485 float: right;

1486 margin-top: $lineheight/2;

1487 }

1488

1489 /* Rules for the diary list page */

1490

1491 .diary_entry-list img.user_thumbnail {

1492 float: left;

1493 }

1494

1495 .diary_post {

1496 max-width: 740px;

1497 position: relative;

1498 margin-top: $lineheight/2;

1499 padding-top: $lineheight;

1500 border-top: 1px solid #ccc;

1501

1502 &:first-child {

1503 margin-top: 0;

1504 border-top: 0;

1505 padding-top: 0;

1506 }

1507 h1, h2 {

1508 font-size: 21px;

1509 line-height: 1em;

1510 }

1511 small.deemphasize {

1512 float: left;

1513 display: block;

1514 }

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

1516 }

1517

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

1519 display: inline;

1520 }

1521

1522 #content .post_heading {

1523 margin-bottom: $lineheight;

1524 h2 {

1525 margin-top: 0;

1526 margin-bottom: $lineheight/2;

1527 font-size: 24px;

1528 }

1529 }

1530

1531 /* Rules for the diary entry page */

1532

1533 .diary_entry {

1534 #map {

1535 position: relative;

1536 width: 90%;

1537 height: 400px;

1538 border: 1px solid #ccc;

1539 display: none;

1540 margin-bottom: $lineheight;

1541 }

1542 #newcomment {

1543 border-top: 1px solid #ccc;

1544 padding-top: $lineheight;

1545 margin-top: $lineheight/2;

1546 }

1547 .comments {

1548 max-width: 740px;

1549 }

1550 .diary-comment {

1551 margin-top: $lineheight/2;

1552 border-top: 1px dashed #ccc;

1553 padding-top: $lineheight/2;

1554 &:first-child {

1555 margin-top: $lineheight;

1556 padding-top: $lineheight;

1557 border-top: 1px solid #ccc;

1558 }

1559 p {

1560 margin-bottom: $lineheight/2;

1561 }

1562 .comment-heading {

1563 margin-bottom: 0;

1564 margin-top: 0;

1565 }

1566 }

1567 }

1568

1569 .diary_entry-view img.user_thumbnail {

1570 float: left;

1571 }

1572

1573 /* Rules for the log in page */

1574

1575 #login_openid_buttons {

1576 margin-bottom: 0;

1577 }

1578

1579 #login_openid_buttons li {

1580 float: left;

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

1582 }

1583

1584 /* Rules for the account confirmation page */

1585

1586 .user-terms {

1587 .legale {

1588 border: 1px solid #ccc;

1589 padding: $lineheight;

1590 margin-bottom: $lineheight;

1591 overflow: auto;

1592 height: 10em;

1593

1594 &:p#last {

1595 margin-bottom: 0px;

1596 }

1597

1598 &:ol {

1599 margin-bottom: 0px;

1600 }

1601

1602 &:img {

1603 display: block;

1604 margin: $lineheight auto inherit auto;

1605 }

1606 }

1607

1608 #decline {

1609 background: $lightblue;

1610 &:hover {

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

1612 }

1613 }

1614

1615 .form-row {

1616 margin: auto;

1617 max-width: 370px;

1618 }

1619 }

1620

1621 /* Rules for the account settings page */

1622

1623 #accountForm .user_map {

1624 position: relative;

1625 width: 500px;

1626 height: 400px;

1627 border: 1px solid #ccc;

1628 }

1629

1630 #accountForm .user_image {

1631 margin-bottom: 0;

1632 }

1633

1634 #accountForm #user_image {

1635 margin-left: 20px;

1636 }

1637

1638 #accountForm ul.accountImage-options {

1639 margin-left: 120px;

1640 }

1641

1642 .nohome .location {

1643 display: none;

1644 }

1645

1646 #homerow .message {

1647 display: none;

1648 }

1649

1650 .nohome .message {

1651 display: inline !important;

1652 }

1653

1654 .content_map.settings_map {

1655 width: 50%;

1656 float: none;

1657 }

1658

1659 /* Rules for the oauth settings page */

1660

1661 .oauth_clients .buttons .oauth-edit {

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

1663 }

1664

1665 .oauth_clients .buttons .oauth-delete {

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

1667 }

1668

1669 /* Rules for messages pages */

1670

1671 .messages {

1672 width: 100%;

1673 border: 1px solid #ddd;

1674

1675 input[type="submit"] {

1676 margin: auto;

1677 }

1678 tbody tr {

1679 border-top: 1px solid #ccc;

1680 }

1681

1682 .inbox-row {

1683 background: #f8f8ff;

1684 }

1685

1686 .inbox-row-unread {

1687 background:#CBEEA7;

1688 }

1689

1690 .right {

1691 float: right;

1692 }

1693

1694 tr td,

1695 tr th {

1696 padding: $lineheight/4;

1697 }

1698 p:last-child,

1699 h2:last-child,

1700 h3:last-child,

1701 ol:last-child,

1702 ul:last-child {

1703 margin-bottom:0;

1704 }

1705 tr td {

1706 height: 30px;

1707 border-right: 1px solid $lightgrey;

1708 }

1709 }

1710

1711 .inbox-row .inbox-mark-read {

1712 display: none;

1713 }

1714

1715 .info-line {

1716 margin-bottom: $lineheight;

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

1718 border-bottom: 1px solid #ccc;

1719

1720 form, form div {

1721 display: inline;

1722 }

1723 }

1724

1725 .info-line .user_thumbnail_tiny {

1726 vertical-align: middle;

1727 }

1728

1729 .inbox-mark-unread,

1730 .inbox-mark-read,

1731 .inbox-delete {

1732 width: 1%;

1733 }

1734

1735 .inbox-row-unread .inbox-mark-unread {

1736 display: none;

1737 }

1738

1739 .message-read .message-buttons {

1740 margin-top: $lineheight;

1741 padding-top: $lineheight;

1742 border-top: 1px solid $lightgrey;

1743 }

1744

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

1746 border-radius: 0;

1747 }

1748

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

1750

1751 .flash {

1752 padding: $lineheight;

1753 &#error {

1754 background-color: #ff7070;

1755 }

1756 &#warning {

1757 background-color: #ffe0cc;

1758 }

1759 &#notice {

1760 background-color: #CBEEA7;

1761 }

1762 }

1763

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

1765

1766 .field_with_errors {

1767 padding: 2px;

1768 background-color: #ff7070;

1769 display: inline-block;

1770 }

1771

1772 .formError {

1773 display: inline-block;

1774 padding: 5px 10px;

1775 margin-top: 5px;

1776 border-radius: 4px;

1777 font-size: 12px;

1778 color: #fff;

1779 background-color: #ff7070;

1780 }

1781

1782 /* Rules for rails validation error boxes */

1783

1784 #errorExplanation {

1785 width: 400px;

1786 border: 2px solid #ff7070;

1787 padding: 0 $lineheight/2;

1788 margin-bottom: $lineheight;

1789 background-color: #f0f0f0;

1790

1791 h2 {

1792 margin: 0 -10px 10px -10px;

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

1794 font-weight: bold;

1795 font-size: 12px;

1796 background-color: #c00;

1797 color: #fff;

1798 text-align: left;

1799 }

1800

1801 p {

1802 color: #333;

1803 margin-bottom: 0px;

1804 padding: $lineheight/4;

1805 }

1806

1807 ul {

1808 padding-left: $lineheight;

1809

1810 li {

1811 font-size: 12px;

1812 list-style: disc;

1813 }

1814 }

1815 }

1816

1817 /* Rules for forms */

1818

1819 .standard-form {

1820 fieldset {

1821 margin-bottom: $lineheight;

1822 }

1823 label.standard-label {

1824 display: block;

1825 margin-bottom: $lineheight/4;

1826 font-size: $typeheight;

1827 font-weight: bold;

1828 line-height: 1.5;

1829 }

1830 label.standard-label.secondary {

1831 display: inline-block;

1832 font-weight: normal;

1833 }

1834 .form-help {

1835 font-weight: normal;

1836 }

1837 .form-column {

1838 float: left;

1839 margin-right: 20px;

1840 }

1841 .form-divider {

1842 margin-top: $lineheight;

1843 padding-top: $lineheight;

1844 border-top: 1px solid $lightgrey;

1845 }

1846 .horizontal-list .form-row {

1847 float: left;

1848 padding-right: 10px;

1849 }

1850 .form-row {

1851 margin-bottom: $lineheight/2;

1852 }

1853 .form-list {

1854 margin-bottom: 0;

1855 }

1856 .form-list li {

1857 margin-bottom: 5px;

1858 }

1859 input[type="checkbox"],

1860 input[type="radio"] {

1861 float: left;

1862 margin-top: 5px;

1863 }

1864 }

1865

1866 #remember_me_openid {

1867 display: block;

1868 }

1869

1870 input[type="checkbox"],

1871 input[type="radio"] {

1872 margin-right: 5px;

1873 }

1874

1875 input[type="text"],

1876 input[type="email"],

1877 input[type="url"],

1878 input[type="password"],

1879 textarea {

1880 border: 1px solid #ccc;

1881 padding: 2px 5px;

1882 margin: 0;

1883 width: 200px;

1884 }

1885

1886 textarea {

1887 padding: 5px;

1888 width: 100%;

1889 }

1890

1891 /* Rules for user images */

1892

1893 img.user_image {

1894 max-width: 100px;

1895 max-height: 100px;

1896 border: 1px solid #ccc;

1897 margin-bottom: $lineheight;

1898 float: left;

1899 margin-right: $lineheight;

1900 }

1901

1902 img.user_thumbnail {

1903 max-width: 50px;

1904 max-height: 50px;

1905 border: 1px solid #ccc;

1906 margin-right: $lineheight;

1907 }

1908

1909 img.user_thumbnail_tiny {

1910 max-width: 25px;

1911 max-height: 25px;

1912 border: 1px solid #ccc;

1913 }

1914

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

1916

1917 .nowrap {

1918 white-space: nowrap;

1919 }

1920

1921 /* Rules for geo microformats */

1922

1923 abbr.geo {

1924 border-bottom: none;

1925 }

1926

1927 /* Rules for RSS buttons */

1928

1929 .rsssmall {

1930 position: relative;

1931 top: 5px;

1932 }

1933

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

1935

1936 ul.secondary-actions {

1937 font-style: normal;

1938 margin-bottom: 0;

1939 margin-left: 0;

1940 &.pager {

1941 display: inline-block;

1942 margin-right: 60px;

1943 }

1944 > li {

1945 display: block;

1946 float: left;

1947 list-style: none;

1948 border-left: 1px solid #ccc;

1949 padding-left: $lineheight/4;

1950 margin-right: $lineheight/4;

1951 &:first-child {

1952 border-left: 0;

1953 padding-left: 0;

1954 }

1955 &:last-child {

1956 margin-right: 0px;

1957 }

1958 }

1959 .dropdown-menu {

1960 left: auto;

1961 right: 0;

1962 }

1963 }

1964

1965 /* Utility for managing inner content areas */

1966

1967 .inner22 { padding: $lineheight;}

1968

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

1970

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

1972

1973 .inner20 { padding: $lineheight 0;}

1974

1975 .inner02 { padding: 0 $lineheight;}

1976

1977 /* Utility for general button styles */

1978

1979 input[type="button"],

1980 input[type="submit"],

1981 input[type="reset"],

1982 a.button {

1983 cursor: pointer;

1984 border: 0;

1985 display: inline-block;

1986 line-height: 20px;

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

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

1989 min-width: 120px;

1990 margin: 0 0 $lineheight/2 0;

1991 color: white;

1992 background: $blue;

1993 text-align: center;

1994 border-radius: 2px;

1995 -moz-border-radius: 2px;

1996 &:hover {

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

1998 text-decoration: none;

1999 }

2000 &.deemphasize {

2001 background: $lightblue;

2002 &:hover {

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

2004 }

2005 }

2006 &:disabled {

2007 background: $lightgrey;

2008 &:hover {

2009 background: $lightgrey;

2010 }

2011 }

2012 &:last-child {

2013 margin-bottom: 0;

2014 }

2015 }

2016

2017 .buttons {

2018 min-width: 200px;

2019 input[type="submit"],

2020 input[type="button"],

2021 input[type="reset"],

2022 .button {

2023 box-sizing: border-box;

2024 float: left;

2025 border-radius: 0;

2026 margin:0;

2027 min-width: 100px;

2028 max-width: 180px;

2029 border-right:1px solid white;

2030 text-overflow: ellipsis;

2031 white-space: nowrap;

2032 overflow: hidden;

2033 }

2034 input:first-child,

2035 .button:first-child {

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

2037 }

2038 input:last-child,

2039 .button:last-child {

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

2041 border-right-width: 0;

2042 }

2043 input:only-child,

2044 .button:only-child,

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

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

2047 border-radius:2px;

2048 border-right-width: 0;

2049 }

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

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

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

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

2054 border-right-width: 0;

2055 }

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

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

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

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

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

2061 }

2062 }

2063

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

2065

2066 .table0,

2067 .item0 {

2068 background: $offwhite;

2069 }

2070

2071 .table1,

2072 .item1 {

2073 background: #fff;

2074 }

2075

2076 /* Rules for OpenID logo */

2077

2078 .openid_logo {

2079 vertical-align: text-bottom;

2080 border: 0;

2081 }

2082

2083 /* Rules for rich text */

2084

2085 .richtext,

2086 .prose {

2087 h1, h2 {

2088 padding-bottom: $lineheight/2;

2089 border-bottom: 1px dashed #cccccc;

2090 margin-bottom: $lineheight/2;

2091 }

2092

2093 h1 {

2094 font-size: 24px;

2095 }

2096

2097 h2 {

2098 font-size: 18px;

2099 }

2100

2101 h3 {

2102 font-size: $typeheight;

2103 }

2104

2105 code {

2106 font-size: 13px;

2107 background: #e8e8e8;

2108 padding: 2px 3px;

2109 }

2110

2111 pre {

2112 font-size: 13px;

2113 background: #e8e8e8;

2114 padding: 2px 3px;

2115

2116 code {

2117 padding: 0;

2118 }

2119 }

2120

2121 img {

2122 padding: $lineheight;

2123 background-color: $offwhite;

2124 display: block;

2125 max-width: 100%;

2126 margin: auto;

2127 }

2128

2129 blockquote {

2130 border-left: $lineheight solid $offwhite;

2131 padding-left: $lineheight;

2132 margin: 0;

2133 color: #7E7E7E;

2134 }

2135

2136 ul, ol {

2137 padding-left: $lineheight;

2138 margin-bottom: $lineheight;

2139 margin-left: $lineheight;

2140 }

2141

2142 ul li {

2143 list-style: disc;

2144 }

2145

2146 ol li {

2147 list-style: decimal;

2148 }

2149 }

2150

2151 .diary_post .richtext {

2152 margin-top: $lineheight;

2153 }

2154

2155 .comments .richtext {

2156 margin-left: 70px;

2157 margin-top: 0;

2158 }

2159

2160 /* Rules for rich text editors */

2161

2162 .richtext_container {

2163 margin-bottom: $lineheight;

2164

2165 .richtext_content {

2166 width: 50%;

2167 display: inline-block;

2168 vertical-align: top;

2169

2170 .richtext_preview {

2171 display: inline-block;

2172 padding: $lineheight;

2173 background-color: $offwhite;

2174 overflow-x: auto;

2175

2176 &.loading {

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

2178 background-repeat: no-repeat;

2179 background-position: center;

2180 }

2181

2182 > :first-child {

2183 margin-top: 0px;

2184 }

2185 }

2186 }

2187

2188 .richtext_help {

2189 display: inline-block;

2190 vertical-align: top;

2191 margin-left: 15px;

2192 background-color: #f8f8ff;

2193 padding: $lineheight/2;

2194 width: 220px;

2195

2196 ul {

2197 margin-bottom: 0;

2198 }

2199

2200 h4.heading, li {

2201 border-bottom: 1px solid #ccc;

2202 margin-bottom: $lineheight/4;

2203 padding-bottom: $lineheight/4;

2204 }

2205

2206 li h4, li span, li p {

2207 display: inline-block;

2208 vertical-align: top;

2209 font-size: 11px;

2210 }

2211

2212 li h4 {

2213 width: 40%;

2214 margin: 0;

2215 }

2216

2217 li span, li p {

2218 width: 50%;

2219 margin-left: $lineheight/2;

2220 margin-bottom: $lineheight/4;

2221 white-space: nowrap;

2222 }

2223 }

2224 }

2225

2226 /* Rules for the user notes list */

2227

2228 .note_list {

2229 tr.creator {

2230 background-color: #eeeeee;

2231 }

2232

2233 td {

2234 padding: 3px;

2235 }

2236

2237 p {

2238 margin-bottom: 0px;

2239 }

2240 }

2241

2242 /* Rules for the notes interface */

2243

2244 .leaflet-popup-content .note {

2245 padding-top: $lineheight/2;

2246 }

2247

2248 .leaflet-popup-content .note {

2249 h2 {

2250 margin-bottom: $lineheight/2;

2251 }

2252

2253 div {

2254 margin-top: $lineheight/2;

2255 }

2256

2257 .permalink {

2258 position: absolute;

2259 top: $lineheight/4;

2260 left: $lineheight/4;

2261 min-width: 15px;

2262 min-height: 15px;

2263 }

2264

2265 .permalink span {

2266 display: none;

2267 padding-left: $lineheight;

2268 }

2269

2270 .permalink:hover span {

2271 display: block;

2272 }

2273

2274 .warning {

2275 display: block;

2276 background-color: #ffe0cc;

2277 padding: 4px 6px;

2278 margin-bottom: $lineheight/2;

2279 }

2280

2281 .comment_body {

2282 margin-top: 2px;

2283 margin-bottom: 2px;

2284

2285 p {

2286 margin-top: 0px;

2287 margin-bottom: 0px;

2288 }

2289 }

2290

2291 .comment {

2292 width: 100%;

2293 height: 100px;

2294 }

2295

2296 .buttons {

2297 margin-top: $lineheight/4;

2298 text-align: right;

2299 }

2300 }

2301

2302 /*

2303 * Rules for the iD editor

2304 */

2305

2306 .site-edit-id {

2307 #left,

2308 #large-title {

2309 display: none;

2310 }

2311

2312 #small-title {

2313 display: inline-block;

2314 width: 185px;

2315 height: 30px;

2316 font-size: 14px;

2317 margin: 0;

2318 background-color: #eee;

2319 border-bottom: 1px solid #ccc;

2320 text-align: center;

2321 padding-top: 7px;

2322 }

2323

2324 #content {

2325 left: 0;

2326 }

2327 }

2328

2329 .id-embed {

2330 width: 100%;

2331 height: 100%;

2332 }

2333

2334 /* Rules for rotating sidebar ads */

2335 .ad-container {

2336 display: block;

2337 height: 120px;

2338 overflow: hidden;

2339 position: relative;

2340 border-bottom: 1px solid #ccc;

2341 }

2342

2343 .ad {

2344 height: 100px;

2345 border: 0;

2346 background: #fff;

2347 }

2348

2349 /* Rules for dropdown menus */

2350

2351 .dropdown {

2352 position: relative;

2353 }

2354

2355 .dropdown-toggle {

2356 *margin-bottom: -3px;

2357 }

2358

2359 .dropdown-toggle:active,

2360 .open .dropdown-toggle {

2361 outline: 0;

2362 }

2363

2364 .caret {

2365 display: inline-block;

2366 width: 0;

2367 height: 0;

2368 vertical-align: top;

2369 border-top: 4px solid #000000;

2370 border-right: 4px solid transparent;

2371 border-left: 4px solid transparent;

2372 content: "";

2373 }

2374

2375 .dropdown .caret {

2376 margin-top: 8px;

2377 margin-left: 2px;

2378 }

2379

2380 .dropdown-menu {

2381 position: absolute;

2382 top: 100%;

2383 left: 0;

2384 z-index: 1000;

2385 display: none;

2386 float: left;

2387 min-width: 160px;

2388 padding: 5px 0;

2389 margin: 0;

2390 list-style: none;

2391 background-color: #ffffff;

2392 border: 1px solid #ccc;

2393 *border-right-width: 2px;

2394 *border-bottom-width: 2px;

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

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

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

2398 -webkit-background-clip: padding-box;

2399 -moz-background-clip: padding;

2400 background-clip: padding-box;

2401 }

2402

2403 .dropdown-menu.pull-right {

2404 right: 0;

2405 left: auto;

2406 }

2407

2408 .dropdown-menu .divider {

2409 *width: 100%;

2410 height: 1px;

2411 margin: 9px 1px;

2412 *margin: -5px 0 5px;

2413 overflow: hidden;

2414 background-color: #e5e5e5;

2415 border-bottom: 1px solid #ffffff;

2416 }

2417

2418 .dropdown-menu > li > a {

2419 display: block;

2420 padding: 3px 10px;

2421 clear: both;

2422 font-weight: normal;

2423 line-height: 20px;

2424 color: #333333;

2425 white-space: nowrap;

2426 }

2427

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

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

2430 .dropdown-submenu:hover > a,

2431 .dropdown-submenu:focus > a {

2432 color: #ffffff;

2433 text-decoration: none;

2434 background-color: #0081c2;

2435 }

2436

2437 .dropdown-menu > .active > a,

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

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

2440 color: #ffffff;

2441 text-decoration: none;

2442 background-color: #0081c2;

2443 outline: 0;

2444 }

2445

2446 .dropdown-menu > .disabled > a,

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

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

2449 color: #999999;

2450 }

2451

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

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

2454 text-decoration: none;

2455 cursor: default;

2456 background-color: transparent;

2457 background-image: none;

2458 }

2459

2460 .open {

2461 *z-index: 1000;

2462 }

2463

2464 .open > .dropdown-menu {

2465 display: block;

2466 }

2467

2468 .dropdown-backdrop {

2469 position: fixed;

2470 top: 0;

2471 right: 0;

2472 bottom: 0;

2473 left: 0;

2474 z-index: 990;

2475 }

2476

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

2478 .site-welcome {

2479 .center {

2480 text-align: center;

2481 .sprite {

2482 float: none;

2483 margin: auto;

2484 }

2485 }

2486

2487 .sprite {

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

2489 background-size: 500px 250px;

2490 display: block;

2491 float: left;

2492 }

2493

2494 .icon-list {

2495 padding-bottom: 20px;

2496 div {

2497 margin-bottom: 10px;

2498 p {

2499 padding-top: 10px;

2500 }

2501 }

2502 }

2503 .sprite.small {

2504 width: 50px;

2505 height: 50px;

2506 }

2507

2508 .sprite.x {

2509 background-position: -50px 0;

2510 }

2511

2512 .sprite.term {

2513 margin-right: 10px;

2514 vertical-align: middle;

2515 }

2516

2517 .sprite.node {

2518 background-position: -100px 0;

2519 }

2520

2521 .sprite.way {

2522 background-position: -150px 0;

2523 }

2524

2525 .sprite.tag {

2526 background-position: -200px 0;

2527 }

2528

2529 .sprite.editor {

2530 background-position: -250px 0;

2531 }

2532

2533 .sprite.question {

2534 background-position: -300px 0;

2535 }

2536

2537 .start-mapping {

2538 margin: auto;

2539 cursor: pointer;

2540 border: none;

2541 padding: 20px 40px;

2542 font-size: 30px;

2543 text-decoration: none;

2544 }

2545

2546 .note-box {

2547 margin-top: 20px;

2548 background-color: $offwhite;

2549 }

2550

2551 .icon.note {

2552 background-color: #333;

2553 border-radius: 4px;

2554 }

2555 }