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 background: $offwhite;

963 border-bottom: 1px solid #ccc;

964 h4 {

965 margin: 0;

966 }

967 }

968

969 .sidebar_close {

970 position: absolute;

971 height: $lineheight;

972 top: 0px;

973 bottom: 0;

974 right: $lineheight;

975 margin: auto;

976 }

977

978 #sidebar_content {

979 position: relative;

980 margin-bottom: 20px;

981 overflow: auto;

982 height: 100%;

983 width: 100%;

984 h4 {

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

986 margin-top: $lineheight/2;

987 margin-bottom: 0;

988 border-bottom: 1px solid #ddd;

989 }

990 }

991

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

993

994 #mapkey {

995 .mapkey-table-key img {

996 display: block;

997 margin-left: auto;

998 margin-right: auto;

999 }

1000 td {

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

1002 }

1003 }

1004

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

1006

1007 .search_searching {

1008 margin-top: $lineheight/4;

1009 margin-bottom: $lineheight/4;

1010 }

1011

1012 .search_results_entry {

1013 margin-bottom: 0;

1014

1015 .search_details {

1016 display: block;

1017 float: right;

1018 text-align: right;

1019 margin-top: 0.2em;

1020 margin-left: 0.5em;

1021 }

1022 }

1023

1024 .search_results_entry .search_searching {

1025 text-align: center;

1026 margin: $lineheight auto;

1027 width: $lineheight;

1028 display: block;

1029 }

1030

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

1032

1033 .search_results_error {

1034 color: #f00;

1035 }

1036

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

1038

1039 #browse_content {

1040 position: relative;

1041 .browse_show_list.button {

1042 position: absolute;

1043 left: $lineheight;

1044 right: $lineheight;

1045 bottom: -40px;

1046 margin-bottom: 0;

1047 }

1048 a.more-details {

1049 position: absolute;

1050 top: 0;

1051 right: $lineheight;

1052 }

1053 ul li {

1054 margin-bottom: 0;

1055 }

1056 }

1057

1058 .browse_details {

1059 position: relative;

1060 }

1061

1062 .browse_status {

1063 display: none;

1064 }

1065

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

1067

1068 .export_bounds {

1069 text-align: center;

1070 }

1071

1072 .export_area_inputs {

1073 margin-bottom: $lineheight/2;

1074 input[type="text"] {

1075 width: 80px;

1076 margin-bottom: 5px;

1077 }

1078 }

1079

1080 .export_bound {

1081 margin: $lineheight/4;

1082 }

1083

1084 /* Rules for the main content area */

1085

1086 #content {

1087 position: relative;

1088 padding: $lineheight;

1089 }

1090

1091 .site-edit #content,

1092 .site-index #content,

1093 .site-export #content {

1094 position: fixed;

1095 padding: 0;

1096 top: 30px; bottom: 0;

1097 left: 184px; right: 0;

1098 border-left: 1px solid #ccc;

1099 }

1100

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

1102 .user-new,

1103 .user-create,

1104 .user-terms,

1105 .user-confirm,

1106 .site-copyright,

1107 .site-welcome {

1108 #content {

1109 max-width: 740px;

1110 }

1111 }

1112

1113 .user-new,

1114 .user-create,

1115 .user-terms,

1116 .user-confirm {

1117 .content-heading {

1118 height: 200px;

1119 }

1120 }

1121

1122 .user-new,

1123 .user-create,

1124 .user-terms {

1125 #content {

1126 padding: 0;

1127 }

1128 }

1129

1130 .header-illustration {

1131 background-position: 0 0;

1132 background-repeat: no-repeat;

1133 position: absolute;

1134 height: 200px;

1135 width: 100%;

1136 left: 0;

1137 bottom: 0;

1138

1139 &.new-user-main {

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

1141 }

1142

1143 &.confirm-main {

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

1145 }

1146

1147 &.new-user-terms {

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

1149 }

1150

1151 &.new-user-arm {

1152 height: 110px;

1153 width: 130px;

1154 left: 260px;

1155 top: 160px;

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

1157 }

1158 }

1159

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

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

1162 }

1163

1164 .wrapper {

1165 margin-left: 184px;

1166 border-left: 1px solid #ccc;

1167 text-align: left;

1168 }

1169

1170 #content.maximised {

1171 top: 0;

1172 left: 0;

1173 right: 0;

1174 bottom: 0;

1175 border: 0;

1176 z-index: 1000;

1177 }

1178

1179 #slim_container {

1180 width: 100%;

1181 }

1182

1183 #slim_container_content {

1184 max-width: 50em;

1185 background-color: #FFFFFF;

1186 margin: $lineheight/2 auto;

1187 padding: 3px;

1188 border-radius: 25px;

1189 -moz-border-radius: 25px;

1190 border: 1px solid #e6e6e6;

1191 }

1192

1193 #slim_content {

1194 margin: $lineheight/2;

1195 margin-top: 95px;

1196 max-width: 50em;

1197

1198 .content-heading {

1199 margin-bottom: 15px;

1200 }

1201 }

1202

1203 #slim_header {

1204 margin: 30px $lineheight/2;

1205 position: absolute;

1206 top: 0px;

1207 margin-right: $lineheight/4;

1208 img {

1209 vertical-align: middle;

1210 margin-bottom: $lineheight/4;

1211 margin-right: $lineheight/4;

1212 }

1213 }

1214

1215 .content-heading {

1216 position: relative;

1217 padding: $lineheight;

1218 background: $offwhite;

1219 z-index: 2;

1220 h1, h2 {

1221 margin-bottom: $lineheight/2;

1222 line-height: 100%;

1223 &:last-child {

1224 margin-bottom: 0;

1225 }

1226 }

1227 p {

1228 margin-top: $lineheight/2;

1229 margin-bottom: 0px;

1230 }

1231 }

1232

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

1234

1235 .content_map {

1236 position: relative;

1237 width: 45%;

1238 height: 400px;

1239 border: 1px solid #ccc;

1240 margin-bottom: $lineheight;

1241 float: right;

1242 }

1243

1244 .content_map #small_map {

1245 height: 100%;

1246 width: 100%;

1247 margin-bottom: $lineheight;

1248 }

1249

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

1251

1252 #changeset_list {

1253 width: 100%;

1254 ul {

1255 padding: $lineheight/2 0;

1256 margin-bottom: 0px;

1257 border-top: 1px solid #ccc;

1258 &:last-child {

1259 border-bottom: 1px solid #ccc;

1260 }

1261 }

1262 .selected {

1263 background: #FFFFC0;

1264 }

1265 .date,

1266 .user {

1267 border-left: 1px solid #ccc;

1268 padding-left: $lineheight/4;

1269 margin-right: $lineheight/4;

1270 }

1271 }

1272

1273 #changeset_list_map_wrapper {

1274 position: absolute;

1275 width: 50%;

1276 height: 490px;

1277 top: 0;

1278 right: 0;

1279 }

1280

1281 #changeset_list_map_wrapper.scrolled {

1282 position: fixed;

1283 }

1284

1285 #changeset_list_map {

1286 position: absolute;

1287 bottom: $lineheight;

1288 top: $lineheight;

1289 right: $lineheight;

1290 left: $lineheight;

1291 border: 1px solid #ccc;

1292 }

1293

1294 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1295 margin-left: 93px;

1296 }

1297

1298 /* Rules for the data browser */

1299

1300 .browse-section {

1301 border-top: 1px solid #ccc;

1302 margin-top: $lineheight/2;

1303 padding-top: $lineheight/2;

1304 &:first-child {

1305 margin-top: 0;

1306 }

1307 .warning {

1308 background-color: #ffe0cc;

1309 margin: 0px;

1310 padding: 4px 6px;

1311 max-width: 100%;

1312 }

1313 h4, p {

1314 margin-bottom: $lineheight/4;

1315 }

1316 ul, .bbox, .geo {

1317 display: inline-block;

1318 vertical-align: top;

1319 max-width: 65%;

1320 }

1321 ul p {

1322 margin-left: 0;

1323 margin-bottom: 0;

1324 }

1325 h4 {

1326 float: left;

1327 width: 33.3333%;

1328 display: inline-block;

1329 vertical-align: top;

1330 }

1331 }

1332

1333 .bbox {

1334 div {

1335 width: 33.3333%;

1336 text-align: center;

1337 padding: $lineheight/4 0;

1338 overflow: hidden;

1339 text-overflow: ellipsis;

1340 float: left;

1341 }

1342 .max_lat,

1343 .min_lat {

1344 margin-left: auto;

1345 margin-right: auto;

1346 width: 100%;

1347 }

1348 }

1349

1350 #browse_map .secondary-actions {

1351 display: none;

1352 margin-bottom: $lineheight/2;

1353 }

1354

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

1356

1357 #trace_list {

1358 font-size: $lineheight/2;

1359 border-width: 0px;

1360 text-align: right;

1361

1362 .trace_summary {

1363 font-size: 12px;

1364 color: gray;

1365 }

1366

1367 .trace_pending {

1368 color: red;

1369 }

1370

1371 .trace_public {

1372 color: green;

1373 }

1374

1375 .trace_identifiable {

1376 color: green;

1377 }

1378

1379 .trace_trackable {

1380 color: red;

1381 }

1382

1383 .trace_private {

1384 color: red;

1385 }

1386 }

1387

1388 /* Rules for the user profile page */

1389

1390 #userinformation {

1391

1392 min-height: 100px;

1393 .userinformation-inner {

1394 float: left;

1395 }

1396 h2 {

1397 margin-top: 0;

1398 }

1399 .user-description {

1400 width: 100%;

1401 clear: both;

1402 }

1403 .deemphasize {

1404 margin: 0;

1405 }

1406 }

1407

1408 .admin-user-info small {

1409 margin-bottom: $lineheight/2;

1410 display: inline;

1411 margin-right: $lineheight;

1412 }

1413

1414 .activity-block {

1415 clear: left;

1416 border-bottom: 1px solid #ccc;

1417 padding-bottom: $lineheight;

1418 float: left;

1419 h3 {

1420 margin-bottom: $lineheight/2;

1421 }

1422 }

1423

1424 .contact-activity {

1425 margin-top: $lineheight;

1426 width: 100%;

1427 }

1428

1429 .activity-details p {

1430 margin-left: 70px;

1431 margin-bottom: 0;

1432 }

1433

1434 #friends-container .contact-activity ul {

1435 margin-left: 70px;

1436 }

1437

1438 .user-view {

1439 p#no_home_location {

1440 margin: $lineheight;

1441 }

1442 .user_thumbnail {

1443 margin-top: $lineheight/4;

1444 float: left;

1445 }

1446 }

1447

1448 /* Rules for the user map */

1449

1450 .content_map .leaflet-popup-content {

1451 margin: $lineheight/2;

1452 min-height: 50px;

1453 }

1454

1455 /* Rules for user popups on maps */

1456

1457 .user_popup {

1458 min-width: 200px;

1459 p {

1460 padding: 0 0 5px 0;

1461 margin-top: 0 0 0 60px;

1462 font-size: 12px;

1463 }

1464 img.user_thumbnail {

1465 float: left;

1466 margin: 0 $lineheight/2 0 0;

1467 }

1468 }

1469

1470 /* Rules for the user list */

1471

1472 #user_list {

1473 font-size: $lineheight/2;

1474 width: 100%;

1475

1476 tr {

1477 vertical-align: middle;

1478 }

1479

1480 p {

1481 margin-top: 0px;

1482 margin-bottom: 0px;

1483 }

1484 }

1485

1486 #user_list_actions {

1487 float: right;

1488 margin-top: $lineheight/2;

1489 }

1490

1491 /* Rules for the diary list page */

1492

1493 .diary_entry-list img.user_thumbnail {

1494 float: left;

1495 }

1496

1497 .diary_post {

1498 max-width: 740px;

1499 position: relative;

1500 margin-top: $lineheight/2;

1501 padding-top: $lineheight;

1502 border-top: 1px solid #ccc;

1503

1504 &:first-child {

1505 margin-top: 0;

1506 border-top: 0;

1507 padding-top: 0;

1508 }

1509 h1, h2 {

1510 font-size: 21px;

1511 line-height: 1em;

1512 }

1513 small.deemphasize {

1514 float: left;

1515 display: block;

1516 }

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

1518 }

1519

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

1521 display: inline;

1522 }

1523

1524 #content .post_heading {

1525 margin-bottom: $lineheight;

1526 h2 {

1527 margin-top: 0;

1528 margin-bottom: $lineheight/2;

1529 font-size: 24px;

1530 }

1531 }

1532

1533 /* Rules for the diary entry page */

1534

1535 .diary_entry {

1536 #map {

1537 position: relative;

1538 width: 90%;

1539 height: 400px;

1540 border: 1px solid #ccc;

1541 display: none;

1542 margin-bottom: $lineheight;

1543 }

1544 #newcomment {

1545 border-top: 1px solid #ccc;

1546 padding-top: $lineheight;

1547 margin-top: $lineheight/2;

1548 }

1549 .comments {

1550 max-width: 740px;

1551 }

1552 .diary-comment {

1553 margin-top: $lineheight/2;

1554 border-top: 1px dashed #ccc;

1555 padding-top: $lineheight/2;

1556 &:first-child {

1557 margin-top: $lineheight;

1558 padding-top: $lineheight;

1559 border-top: 1px solid #ccc;

1560 }

1561 p {

1562 margin-bottom: $lineheight/2;

1563 }

1564 .comment-heading {

1565 margin-bottom: 0;

1566 margin-top: 0;

1567 }

1568 }

1569 }

1570

1571 .diary_entry-view img.user_thumbnail {

1572 float: left;

1573 }

1574

1575 /* Rules for the log in page */

1576

1577 #login_openid_buttons {

1578 margin-bottom: 0;

1579 }

1580

1581 #login_openid_buttons li {

1582 float: left;

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

1584 }

1585

1586 /* Rules for the account confirmation page */

1587

1588 .user-terms {

1589 .legale {

1590 border: 1px solid #ccc;

1591 padding: $lineheight;

1592 margin-bottom: $lineheight;

1593 overflow: auto;

1594 height: 10em;

1595

1596 &:p#last {

1597 margin-bottom: 0px;

1598 }

1599

1600 &:ol {

1601 margin-bottom: 0px;

1602 }

1603

1604 &:img {

1605 display: block;

1606 margin: $lineheight auto inherit auto;

1607 }

1608 }

1609

1610 #decline {

1611 background: $lightblue;

1612 &:hover {

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

1614 }

1615 }

1616

1617 .form-row {

1618 margin: auto;

1619 max-width: 370px;

1620 }

1621 }

1622

1623 /* Rules for the account settings page */

1624

1625 #accountForm .user_map {

1626 position: relative;

1627 width: 500px;

1628 height: 400px;

1629 border: 1px solid #ccc;

1630 }

1631

1632 #accountForm .user_image {

1633 margin-bottom: 0;

1634 }

1635

1636 #accountForm #user_image {

1637 margin-left: 20px;

1638 }

1639

1640 #accountForm ul.accountImage-options {

1641 margin-left: 120px;

1642 }

1643

1644 .nohome .location {

1645 display: none;

1646 }

1647

1648 #homerow .message {

1649 display: none;

1650 }

1651

1652 .nohome .message {

1653 display: inline !important;

1654 }

1655

1656 .content_map.settings_map {

1657 width: 50%;

1658 float: none;

1659 }

1660

1661 /* Rules for the oauth settings page */

1662

1663 .oauth_clients .buttons .oauth-edit {

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

1665 }

1666

1667 .oauth_clients .buttons .oauth-delete {

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

1669 }

1670

1671 /* Rules for messages pages */

1672

1673 .messages {

1674 width: 100%;

1675 border: 1px solid #ddd;

1676

1677 input[type="submit"] {

1678 margin: auto;

1679 }

1680 tbody tr {

1681 border-top: 1px solid #ccc;

1682 }

1683

1684 .inbox-row {

1685 background: #f8f8ff;

1686 }

1687

1688 .inbox-row-unread {

1689 background:#CBEEA7;

1690 }

1691

1692 .right {

1693 float: right;

1694 }

1695

1696 tr td,

1697 tr th {

1698 padding: $lineheight/4;

1699 }

1700 p:last-child,

1701 h2:last-child,

1702 h3:last-child,

1703 ol:last-child,

1704 ul:last-child {

1705 margin-bottom:0;

1706 }

1707 tr td {

1708 height: 30px;

1709 border-right: 1px solid $lightgrey;

1710 }

1711 }

1712

1713 .inbox-row .inbox-mark-read {

1714 display: none;

1715 }

1716

1717 .info-line {

1718 margin-bottom: $lineheight;

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

1720 border-bottom: 1px solid #ccc;

1721

1722 form, form div {

1723 display: inline;

1724 }

1725 }

1726

1727 .info-line .user_thumbnail_tiny {

1728 vertical-align: middle;

1729 }

1730

1731 .inbox-mark-unread,

1732 .inbox-mark-read,

1733 .inbox-delete {

1734 width: 1%;

1735 }

1736

1737 .inbox-row-unread .inbox-mark-unread {

1738 display: none;

1739 }

1740

1741 .message-read .message-buttons {

1742 margin-top: $lineheight;

1743 padding-top: $lineheight;

1744 border-top: 1px solid $lightgrey;

1745 }

1746

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

1748 border-radius: 0;

1749 }

1750

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

1752

1753 .flash {

1754 padding: $lineheight;

1755 &#error {

1756 background-color: #ff7070;

1757 }

1758 &#warning {

1759 background-color: #ffe0cc;

1760 }

1761 &#notice {

1762 background-color: #CBEEA7;

1763 }

1764 }

1765

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

1767

1768 .field_with_errors {

1769 padding: 2px;

1770 background-color: #ff7070;

1771 display: inline-block;

1772 }

1773

1774 .formError {

1775 display: inline-block;

1776 padding: 5px 10px;

1777 margin-top: 5px;

1778 border-radius: 4px;

1779 font-size: 12px;

1780 color: #fff;

1781 background-color: #ff7070;

1782 }

1783

1784 /* Rules for rails validation error boxes */

1785

1786 #errorExplanation {

1787 width: 400px;

1788 border: 2px solid #ff7070;

1789 padding: 0 $lineheight/2;

1790 margin-bottom: $lineheight;

1791 background-color: #f0f0f0;

1792

1793 h2 {

1794 margin: 0 -10px 10px -10px;

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

1796 font-weight: bold;

1797 font-size: 12px;

1798 background-color: #c00;

1799 color: #fff;

1800 text-align: left;

1801 }

1802

1803 p {

1804 color: #333;

1805 margin-bottom: 0px;

1806 padding: $lineheight/4;

1807 }

1808

1809 ul {

1810 padding-left: $lineheight;

1811

1812 li {

1813 font-size: 12px;

1814 list-style: disc;

1815 }

1816 }

1817 }

1818

1819 /* Rules for forms */

1820

1821 .standard-form {

1822 fieldset {

1823 margin-bottom: $lineheight;

1824 }

1825 label.standard-label {

1826 display: block;

1827 margin-bottom: $lineheight/4;

1828 font-size: $typeheight;

1829 font-weight: bold;

1830 line-height: 1.5;

1831 }

1832 label.standard-label.secondary {

1833 display: inline-block;

1834 font-weight: normal;

1835 }

1836 .form-help {

1837 font-weight: normal;

1838 }

1839 .form-column {

1840 float: left;

1841 margin-right: 20px;

1842 }

1843 .form-divider {

1844 margin-top: $lineheight;

1845 padding-top: $lineheight;

1846 border-top: 1px solid $lightgrey;

1847 }

1848 .horizontal-list .form-row {

1849 float: left;

1850 padding-right: 10px;

1851 }

1852 .form-row {

1853 margin-bottom: $lineheight/2;

1854 }

1855 .form-list {

1856 margin-bottom: 0;

1857 }

1858 .form-list li {

1859 margin-bottom: 5px;

1860 }

1861 input[type="checkbox"],

1862 input[type="radio"] {

1863 float: left;

1864 margin-top: 5px;

1865 }

1866 }

1867

1868 #remember_me_openid {

1869 display: block;

1870 }

1871

1872 input[type="checkbox"],

1873 input[type="radio"] {

1874 margin-right: 5px;

1875 }

1876

1877 input[type="text"],

1878 input[type="email"],

1879 input[type="url"],

1880 input[type="password"],

1881 textarea {

1882 border: 1px solid #ccc;

1883 padding: 2px 5px;

1884 margin: 0;

1885 width: 200px;

1886 }

1887

1888 textarea {

1889 padding: 5px;

1890 width: 100%;

1891 }

1892

1893 /* Rules for user images */

1894

1895 img.user_image {

1896 max-width: 100px;

1897 max-height: 100px;

1898 border: 1px solid #ccc;

1899 margin-bottom: $lineheight;

1900 float: left;

1901 margin-right: $lineheight;

1902 }

1903

1904 img.user_thumbnail {

1905 max-width: 50px;

1906 max-height: 50px;

1907 border: 1px solid #ccc;

1908 margin-right: $lineheight;

1909 }

1910

1911 img.user_thumbnail_tiny {

1912 max-width: 25px;

1913 max-height: 25px;

1914 border: 1px solid #ccc;

1915 }

1916

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

1918

1919 .nowrap {

1920 white-space: nowrap;

1921 }

1922

1923 /* Rules for geo microformats */

1924

1925 abbr.geo {

1926 border-bottom: none;

1927 }

1928

1929 /* Rules for RSS buttons */

1930

1931 .rsssmall {

1932 position: relative;

1933 top: 5px;

1934 }

1935

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

1937

1938 ul.secondary-actions {

1939 font-style: normal;

1940 margin-bottom: 0;

1941 margin-left: 0;

1942 &.pager {

1943 display: inline-block;

1944 margin-right: 60px;

1945 }

1946 > li {

1947 display: block;

1948 float: left;

1949 list-style: none;

1950 border-left: 1px solid #ccc;

1951 padding-left: $lineheight/4;

1952 margin-right: $lineheight/4;

1953 &:first-child {

1954 border-left: 0;

1955 padding-left: 0;

1956 }

1957 &:last-child {

1958 margin-right: 0px;

1959 }

1960 }

1961 .dropdown-menu {

1962 left: auto;

1963 right: 0;

1964 }

1965 }

1966

1967 /* Utility for managing inner content areas */

1968

1969 .inner22 { padding: $lineheight;}

1970

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

1972

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

1974

1975 .inner20 { padding: $lineheight 0;}

1976

1977 .inner02 { padding: 0 $lineheight;}

1978

1979 /* Utility for general button styles */

1980

1981 input[type="button"],

1982 input[type="submit"],

1983 input[type="reset"],

1984 a.button {

1985 cursor: pointer;

1986 border: 0;

1987 display: inline-block;

1988 line-height: 20px;

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

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

1991 min-width: 120px;

1992 margin: 0 0 $lineheight/2 0;

1993 color: white;

1994 background: $blue;

1995 text-align: center;

1996 border-radius: 2px;

1997 -moz-border-radius: 2px;

1998 &:hover {

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

2000 text-decoration: none;

2001 }

2002 &.deemphasize {

2003 background: $lightblue;

2004 &:hover {

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

2006 }

2007 }

2008 &:disabled {

2009 background: $lightgrey;

2010 &:hover {

2011 background: $lightgrey;

2012 }

2013 }

2014 &:last-child {

2015 margin-bottom: 0;

2016 }

2017 }

2018

2019 .buttons {

2020 min-width: 200px;

2021 input[type="submit"],

2022 input[type="button"],

2023 input[type="reset"],

2024 .button {

2025 box-sizing: border-box;

2026 float: left;

2027 border-radius: 0;

2028 margin:0;

2029 min-width: 100px;

2030 max-width: 180px;

2031 border-right:1px solid white;

2032 text-overflow: ellipsis;

2033 white-space: nowrap;

2034 overflow: hidden;

2035 }

2036 input:first-child,

2037 .button:first-child {

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

2039 }

2040 input:last-child,

2041 .button:last-child {

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

2043 border-right-width: 0;

2044 }

2045 input:only-child,

2046 .button:only-child,

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

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

2049 border-radius:2px;

2050 border-right-width: 0;

2051 }

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

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

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

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

2056 border-right-width: 0;

2057 }

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

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

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

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

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

2063 }

2064 }

2065

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

2067

2068 .table0,

2069 .item0 {

2070 background: $offwhite;

2071 }

2072

2073 .table1,

2074 .item1 {

2075 background: #fff;

2076 }

2077

2078 /* Rules for OpenID logo */

2079

2080 .openid_logo {

2081 vertical-align: text-bottom;

2082 border: 0;

2083 }

2084

2085 /* Rules for rich text */

2086

2087 .richtext,

2088 .prose {

2089 h1, h2 {

2090 padding-bottom: $lineheight/2;

2091 border-bottom: 1px dashed #cccccc;

2092 margin-bottom: $lineheight/2;

2093 }

2094

2095 h1 {

2096 font-size: 24px;

2097 }

2098

2099 h2 {

2100 font-size: 18px;

2101 }

2102

2103 h3 {

2104 font-size: $typeheight;

2105 }

2106

2107 code {

2108 font-size: 13px;

2109 background: #e8e8e8;

2110 padding: 2px 3px;

2111 }

2112

2113 pre {

2114 font-size: 13px;

2115 background: #e8e8e8;

2116 padding: 2px 3px;

2117

2118 code {

2119 padding: 0;

2120 }

2121 }

2122

2123 img {

2124 padding: $lineheight;

2125 background-color: $offwhite;

2126 display: block;

2127 max-width: 100%;

2128 margin: auto;

2129 }

2130

2131 blockquote {

2132 border-left: $lineheight solid $offwhite;

2133 padding-left: $lineheight;

2134 margin: 0;

2135 color: #7E7E7E;

2136 }

2137

2138 ul, ol {

2139 padding-left: $lineheight;

2140 margin-bottom: $lineheight;

2141 margin-left: $lineheight;

2142 }

2143

2144 ul li {

2145 list-style: disc;

2146 }

2147

2148 ol li {

2149 list-style: decimal;

2150 }

2151 }

2152

2153 .diary_post .richtext {

2154 margin-top: $lineheight;

2155 }

2156

2157 .comments .richtext {

2158 margin-left: 70px;

2159 margin-top: 0;

2160 }

2161

2162 /* Rules for rich text editors */

2163

2164 .richtext_container {

2165 margin-bottom: $lineheight;

2166

2167 .richtext_content {

2168 width: 50%;

2169 display: inline-block;

2170 vertical-align: top;

2171

2172 .richtext_preview {

2173 display: inline-block;

2174 padding: $lineheight;

2175 background-color: $offwhite;

2176 overflow-x: auto;

2177

2178 &.loading {

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

2180 background-repeat: no-repeat;

2181 background-position: center;

2182 }

2183

2184 > :first-child {

2185 margin-top: 0px;

2186 }

2187 }

2188 }

2189

2190 .richtext_help {

2191 display: inline-block;

2192 vertical-align: top;

2193 margin-left: 15px;

2194 background-color: #f8f8ff;

2195 padding: $lineheight/2;

2196 width: 220px;

2197

2198 ul {

2199 margin-bottom: 0;

2200 }

2201

2202 h4.heading, li {

2203 border-bottom: 1px solid #ccc;

2204 margin-bottom: $lineheight/4;

2205 padding-bottom: $lineheight/4;

2206 }

2207

2208 li h4, li span, li p {

2209 display: inline-block;

2210 vertical-align: top;

2211 font-size: 11px;

2212 }

2213

2214 li h4 {

2215 width: 40%;

2216 margin: 0;

2217 }

2218

2219 li span, li p {

2220 width: 50%;

2221 margin-left: $lineheight/2;

2222 margin-bottom: $lineheight/4;

2223 white-space: nowrap;

2224 }

2225 }

2226 }

2227

2228 /* Rules for the user notes list */

2229

2230 .note_list {

2231 tr.creator {

2232 background-color: #eeeeee;

2233 }

2234

2235 td {

2236 padding: 3px;

2237 }

2238

2239 p {

2240 margin-bottom: 0px;

2241 }

2242 }

2243

2244 /* Rules for the notes interface */

2245

2246 .leaflet-popup-content .note {

2247 padding-top: $lineheight/2;

2248 }

2249

2250 .leaflet-popup-content .note {

2251 h2 {

2252 margin-bottom: $lineheight/2;

2253 }

2254

2255 div {

2256 margin-top: $lineheight/2;

2257 }

2258

2259 .permalink {

2260 position: absolute;

2261 top: $lineheight/4;

2262 left: $lineheight/4;

2263 min-width: 15px;

2264 min-height: 15px;

2265 }

2266

2267 .permalink span {

2268 display: none;

2269 padding-left: $lineheight;

2270 }

2271

2272 .permalink:hover span {

2273 display: block;

2274 }

2275

2276 .warning {

2277 display: block;

2278 background-color: #ffe0cc;

2279 padding: 4px 6px;

2280 margin-bottom: $lineheight/2;

2281 }

2282

2283 .comment_body {

2284 margin-top: 2px;

2285 margin-bottom: 2px;

2286

2287 p {

2288 margin-top: 0px;

2289 margin-bottom: 0px;

2290 }

2291 }

2292

2293 .comment {

2294 width: 100%;

2295 height: 100px;

2296 }

2297

2298 .buttons {

2299 margin-top: $lineheight/4;

2300 text-align: right;

2301 }

2302 }

2303

2304 /*

2305 * Rules for the iD editor

2306 */

2307

2308 .site-edit-id {

2309 #left,

2310 #large-title {

2311 display: none;

2312 }

2313

2314 #small-title {

2315 display: inline-block;

2316 width: 185px;

2317 height: 30px;

2318 font-size: 14px;

2319 margin: 0;

2320 background-color: #eee;

2321 border-bottom: 1px solid #ccc;

2322 text-align: center;

2323 padding-top: 7px;

2324 }

2325

2326 #content {

2327 left: 0;

2328 }

2329 }

2330

2331 .id-embed {

2332 width: 100%;

2333 height: 100%;

2334 }

2335

2336 /* Rules for rotating sidebar ads */

2337 .ad-container {

2338 display: block;

2339 height: 120px;

2340 overflow: hidden;

2341 position: relative;

2342 border-bottom: 1px solid #ccc;

2343 }

2344

2345 .ad {

2346 height: 100px;

2347 border: 0;

2348 background: #fff;

2349 }

2350

2351 /* Rules for dropdown menus */

2352

2353 .dropdown {

2354 position: relative;

2355 }

2356

2357 .dropdown-toggle {

2358 *margin-bottom: -3px;

2359 }

2360

2361 .dropdown-toggle:active,

2362 .open .dropdown-toggle {

2363 outline: 0;

2364 }

2365

2366 .caret {

2367 display: inline-block;

2368 width: 0;

2369 height: 0;

2370 vertical-align: top;

2371 border-top: 4px solid #000000;

2372 border-right: 4px solid transparent;

2373 border-left: 4px solid transparent;

2374 content: "";

2375 }

2376

2377 .dropdown .caret {

2378 margin-top: 8px;

2379 margin-left: 2px;

2380 }

2381

2382 .dropdown-menu {

2383 position: absolute;

2384 top: 100%;

2385 left: 0;

2386 z-index: 1000;

2387 display: none;

2388 float: left;

2389 min-width: 160px;

2390 padding: 5px 0;

2391 margin: 0;

2392 list-style: none;

2393 background-color: #ffffff;

2394 border: 1px solid #ccc;

2395 *border-right-width: 2px;

2396 *border-bottom-width: 2px;

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

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

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

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

2401 -moz-background-clip: padding;

2402 background-clip: padding-box;

2403 }

2404

2405 .dropdown-menu.pull-right {

2406 right: 0;

2407 left: auto;

2408 }

2409

2410 .dropdown-menu .divider {

2411 *width: 100%;

2412 height: 1px;

2413 margin: 9px 1px;

2414 *margin: -5px 0 5px;

2415 overflow: hidden;

2416 background-color: #e5e5e5;

2417 border-bottom: 1px solid #ffffff;

2418 }

2419

2420 .dropdown-menu > li > a {

2421 display: block;

2422 padding: 3px 10px;

2423 clear: both;

2424 font-weight: normal;

2425 line-height: 20px;

2426 color: #333333;

2427 white-space: nowrap;

2428 }

2429

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

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

2432 .dropdown-submenu:hover > a,

2433 .dropdown-submenu:focus > a {

2434 color: #ffffff;

2435 text-decoration: none;

2436 background-color: #0081c2;

2437 }

2438

2439 .dropdown-menu > .active > a,

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

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

2442 color: #ffffff;

2443 text-decoration: none;

2444 background-color: #0081c2;

2445 outline: 0;

2446 }

2447

2448 .dropdown-menu > .disabled > a,

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

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

2451 color: #999999;

2452 }

2453

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

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

2456 text-decoration: none;

2457 cursor: default;

2458 background-color: transparent;

2459 background-image: none;

2460 }

2461

2462 .open {

2463 *z-index: 1000;

2464 }

2465

2466 .open > .dropdown-menu {

2467 display: block;

2468 }

2469

2470 .dropdown-backdrop {

2471 position: fixed;

2472 top: 0;

2473 right: 0;

2474 bottom: 0;

2475 left: 0;

2476 z-index: 990;

2477 }

2478

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

2480 .site-welcome {

2481 .center {

2482 text-align: center;

2483 .sprite {

2484 float: none;

2485 margin: auto;

2486 }

2487 }

2488

2489 .sprite {

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

2491 background-size: 500px 250px;

2492 display: block;

2493 float: left;

2494 }

2495

2496 .icon-list {

2497 padding-bottom: 20px;

2498 div {

2499 margin-bottom: 10px;

2500 p {

2501 padding-top: 10px;

2502 }

2503 }

2504 }

2505 .sprite.small {

2506 width: 50px;

2507 height: 50px;

2508 }

2509

2510 .sprite.x {

2511 background-position: -50px 0;

2512 }

2513

2514 .sprite.term {

2515 margin-right: 10px;

2516 vertical-align: middle;

2517 }

2518

2519 .sprite.node {

2520 background-position: -100px 0;

2521 }

2522

2523 .sprite.way {

2524 background-position: -150px 0;

2525 }

2526

2527 .sprite.tag {

2528 background-position: -200px 0;

2529 }

2530

2531 .sprite.editor {

2532 background-position: -250px 0;

2533 }

2534

2535 .sprite.question {

2536 background-position: -300px 0;

2537 }

2538

2539 .start-mapping {

2540 margin: auto;

2541 cursor: pointer;

2542 border: none;

2543 padding: 20px 40px;

2544 font-size: 30px;

2545 text-decoration: none;

2546 }

2547

2548 .note-box {

2549 margin-top: 20px;

2550 background-color: $offwhite;

2551 }

2552

2553 .icon.note {

2554 background-color: #333;

2555 border-radius: 4px;

2556 }

2557 }