git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.css.scss

1 @import "parameters";

3 /* Styles common to large and small screens */

5 /* Minimal CSS reset */

7 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

18 sup { vertical-align: text-top; }

20 sub { vertical-align: text-bottom; }

22 table {

23 border-collapse: collapse;

24 border-spacing: 0;

25 }

27 li { list-style: none; }

29 input,

30 select,

31 textarea,

32 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }

34 abbr, acronym {

35 border-bottom: .1em dotted;

36 cursor: help;

37 }

39 strong {

40 font-weight: bold;

41 }

43 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */

45 .clearfix:before,

46 .clearfix:after {

47 content: " ";

48 display: table;

49 }

51 .clearfix:after {

52 clear: both;

53 }

55 /* Basic grid */

57 .col0 { float:left; width:04.1666%; }

58 .col1 { float:left; width:08.3333%; }

59 .col2 { float:left; width:16.6666%; }

60 .col3 { float:left; width:25.0000%; }

61 .col4 { float:left; width:33.3333%; }

62 .col5 { float:left; width:41.6666%; }

63 .col6 { float:left; width:50.0000%; }

64 .col7 { float:left; width:58.3333%; }

65 .col8 { float:left; width:66.6666%; }

66 .col9 { float:left; width:75.0000%; }

67 .col10 { float:left; width:83.3333%; }

68 .col11 { float:left; width:91.6666%; }

69 .col12 { width:100%; }

71 .margin0 { margin-left:04.1666%; }

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

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

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

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

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

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

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

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

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

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

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

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

85 .fillL { background-color: white; }

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

89 * {

90 box-sizing: border-box;

91 }

93 body {

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

95 font-size: $typeheight;

96 line-height: 1.6666;

97 color: #222;

98 background-color: #fff;

99 margin: 0px;

100 padding: 0px;

101 text-align: left;

102 height: 100%;

103 }

104

105 h1, h2, h3 {

106 font-weight: 600;

107 line-height: 1.2;

108 }

109

110 h4, h5 {

111 font-weight: 500;

112 }

113

114 h1 {

115 font-size: 18px;

116 }

117

118 h2, h3 {

119 font-size: 16px;

120 }

121

122 p > img {

123 width: auto;

124 max-width: 100%;

125 }

126

127 small, aside {

128 font-size: 12px;

129 }

130

131 #container { position: relative; }

132

133 .column-1 {

134 width: 50%;

135 margin: 0 0 $lineheight/2 0;

136 }

137

138 .small_icon {

139 vertical-align: middle;

140 margin-right: $lineheight/4;

141 }

142

143 .red { color: $red; }

144

145 /* Rules for icons */

146

147 .icon {

148 display:inline-block;

149 vertical-align:top;

150 width:20px;

151 height:20px;

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

153 text-indent:-9999px;

154 overflow:hidden;

155 }

156

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

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

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

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

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

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

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

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

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

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

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

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

169 .icon.close:hover { background-position: -200px -20px; }

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

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

172 .icon.query { background-position: -260px 0; }

173

174 /* Rules for links */

175

176 a {

177 color: #24d;

178 text-decoration: none;

179 -webkit-appearance: none;

180 outline: 0;

181 &:hover {

182 text-decoration: underline;

183 }

184 }

185

186 /* Rules for horizontal lines */

187

188 hr {

189 border: none;

190 background-color: #ccc;

191 color: #ccc;

192 height: 1px;

193 }

194

195 /* General styles for tables */

196

197 table {

198 width: 100%;

199 margin-bottom: $lineheight;

200 th, td {

201 text-align: left;

202 padding: $lineheight/4;

203 line-height: $lineheight;

204 }

205 th {

206 font-weight: 600;

207 vertical-align: top;

208 }

209 td {

210 vertical-align: middle;

211 }

212 }

213

214 /* Utility for de-emphasizing content */

215

216 .deemphasize {

217 color: #999;

218 a {

219 color: $blue;

220 }

221 }

222

223 /* Rules for the header */

224

225 #menu-icon {

226 display: none !important;

227 float: right;

228 background: image-url("menu-icon.png") no-repeat;

229 background-size: 30px 30px;

230 display: block;

231 width: 30px;

232 height: 30px;

233 margin: 14px 10px 0 0;

234 opacity: 0.6;

235 }

236

237 header {

238 height: $headerHeight;

239 position: relative;

240 z-index: 1001;

241 font-size: 14px;

242

243 h1, nav, nav > ul, nav > ul > li, .dropdown {

244 display: inline-block;

245 }

246

247 > * {

248 height: 100%;

249 padding: $lineheight/2;

250 }

251

252 h1, nav.primary {

253 float: left;

254 }

255

256 a, a:hover {

257 text-decoration: none;

258 }

259

260 img.logo {

261 width: 30px;

262 height: 30px;

263 margin-top: -2px;

264 vertical-align: middle;

265 }

266

267 h1 {

268 margin: 0;

269 padding-top: 15px;

270

271 a {

272 color: #000;

273 }

274 }

275 }

276

277 nav.primary {

278 > ul {

279 $border: 1px solid $green;

280

281 border: $border;

282 border-radius: $border-radius;

283

284 > li {

285 border-right: $border;

286 float: left;

287 &:last-child {

288 border-right: 0;

289 }

290 > a:hover { background: lighten($green, 30%); }

291 &.current > a:hover { background: $green; }

292 &.disabled > a:hover { background: lighten($green, 38%); }

293 &.dropdown {

294 > a.tab { border-right: 1px solid lighten($green, 30%); }

295 &.current > a.tab { border-right: 1px solid lighten($green, 10%); }

296 }

297 }

298 }

299

300 a.tab,

301 .dropdown-toggle {

302 display: inline-block;

303 font-weight: 500;

304 color: $green;

305 padding: 5px 15px;

306 }

307

308 .dropdown-toggle {

309 padding: 5px 6px;

310 }

311

312 .caret {

313 border-top-color: $green;

314 margin-top: 10px;

315 }

316

317 .disabled a {

318 color: #ccc;

319 cursor: default;

320

321 .caret {

322 border-top-color: #ccc;

323 }

324 }

325

326 > ul li.current {

327 background-color: $green;

328

329 .tab {

330 color: #fff;

331 }

332

333 .caret {

334 border-top-color: #fff;

335 }

336 }

337 }

338

339 nav.secondary {

340 position: absolute;

341 right: 0;

342

343 > ul {

344 vertical-align: middle;

345 a, .dropdown-toggle {

346 display: inline-block;

347 text-decoration: none;

348 color: $darkgrey;

349 padding: 5px;

350

351 &:hover { color: darken($darkgrey, 25%); }

352 }

353 }

354

355 > ul li.current a {

356 color: darken($darkgrey, 25%);

357 }

358

359 .user-menu {

360 $border: 1px solid $grey;

361 border: $border;

362 border-radius: $border-radius;

363 margin-left: 10px;

364

365 > li {

366 border-right: $border;

367 float: left;

368 &:last-child {

369 border-right: 0;

370

371 > a {

372 border-radius: 0 $border-radius $border-radius 0;

373 }

374 }

375 &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }

376 &:hover a { background: lighten($darkgrey, 30%); }

377 }

378

379 a {

380 padding: 5px 15px;

381

382 }

383

384 &.logged-in > a {

385 padding: 0;

386 > .user-button {

387 line-height: 1.8;

388 padding: 5px 10px 3px 6px;

389 display: inline-block;

390 color: $darkgrey;

391 }

392 &:hover > .user-button { color: darken($darkgrey, 5%); }

393 }

394 }

395

396 .caret {

397 border-top-color: $grey;

398 margin-top: 9px;

399 }

400

401 img.user_thumbnail_tiny {

402 border: 0;

403 vertical-align: top;

404 margin-top: 0px;

405 margin: 4px 0 0 4px;

406 border-radius: 2px;

407 }

408

409 #inboxanchor {

410 display: inline-block;

411 vertical-align: top;

412 height: 25px;

413 margin: 3px 0 3px 3px;

414 background-color: lighten($grey, 10%);

415 line-height: 20px;

416 border-radius: 2;

417 }

418

419 .dropdown-menu {

420 left: auto;

421 right: -1px;

422 border-radius: 3px 0 3px 3px;

423

424 .count-number {

425 float: right;

426 padding: 0 5px;

427 margin: 0;

428 }

429 }

430 }

431

432 #compact-secondary-nav {

433 display: none;

434 ul li a {

435 width: 100%;

436 color: #333;

437 &:hover { color: #fff; }

438 }

439 }

440

441 @media only screen and (max-width:960px) {

442 #compact-secondary-nav {

443 display: inline-block;

444 }

445 .compact-hide {

446 display: none;

447 }

448 }

449

450 /* Utility for styling notification numbers */

451

452 .count-number {

453 padding: 2px $lineheight/4;

454 border-radius: 2px;

455 background: lighten($green, 30%);

456 margin: 0 2px;

457 font-size: 11px;

458 color: #333;

459 }

460

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

462

463 #noscript {

464 z-index: 20000000;

465 margin-left: 400px;

466 margin-top: 50px;

467 }

468

469 /* Rules for bootstrap tooltips */

470

471 .tooltip {

472 position: absolute;

473 display: none;

474 color: #333;

475 text-align: left;

476 font-size: 12px;

477 max-width: 250px;

478 }

479

480 .tooltip.in {

481 opacity: 0.8;

482 z-index: 1030;

483 height: auto;

484 display: block;

485 }

486

487 .tooltip.top {

488 margin-top: -10px;

489 text-align: center;

490 }

491

492 .tooltip.right {

493 margin-left: 10px;

494 }

495

496 .tooltip.bottom {

497 margin-top: 10px;

498 text-align: center;

499 }

500

501 .tooltip.left {

502 margin-left: -10px;

503 text-align: right;

504 }

505

506 .tooltip-inner {

507 display: inline-block;

508 padding: 10px;

509 font-weight: normal;

510 background-color: white;

511 }

512

513 .tooltip-arrow {

514 position: absolute;

515 width: 0;

516 height: 0;

517 border-color: transparent;

518 border-style: solid;

519 }

520

521 .tooltip.top .tooltip-arrow {

522 bottom: -5px;

523 left: 50%;

524 margin-left: -5px;

525 border-top-color: white;

526 border-width: 5px 5px 0;

527 }

528

529 .tooltip.right .tooltip-arrow {

530 top: 50%;

531 left: -5px;

532 margin-top: -5px;

533 border-right-color: white;

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

535 }

536

537 .tooltip.left .tooltip-arrow {

538 top: 50%;

539 right: -5px;

540 margin-top: -5px;

541 border-left-color: white;

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

543 }

544

545 .tooltip.bottom .tooltip-arrow {

546 top: -5px;

547 left: 50%;

548 margin-left: -5px;

549 border-bottom-color: white;

550 border-width: 0 5px 5px;

551 }

552

553 /* Rules for Leaflet maps */

554

555 .leaflet-control .control-button {

556 display: block;

557 height: 40px;

558 width: 40px;

559 background-color: #333;

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

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

562 margin-bottom: 10px;

563 outline: none;

564

565 &:hover {

566 background-color: black;

567 }

568

569 &.disabled {

570 background-color: #333;

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

572 cursor: default;

573 }

574

575 &.active {

576 background-color: #9ed485;

577 }

578

579 .icon {

580 margin: 10px;

581 }

582 }

583

584 .leaflet-control .zoomin,

585 .control-layers .control-button {

586 margin-bottom: 0px;

587 border-radius: 4px 0 0 0;

588 }

589

590 .leaflet-control .zoomout,

591 .control-key .control-button {

592 margin-bottom: 0;

593 border-radius: 0;

594 }

595

596 .control-locate .control-button,

597 .control-share .control-button {

598 border-radius: 0 0 0 4px;

599 }

600

601 /* Rules for the sidebar and main map area */

602

603 .map-layout {

604 #content {

605 overflow: hidden;

606 position: absolute;

607 top: $headerHeight;

608 bottom: 0;

609 width: 100%;

610 }

611

612 #sidebar, #map {

613 position: relative;

614 height: 100%;

615 overflow-x: hidden;

616 overflow-y: auto;

617 }

618

619 #sidebar {

620 float: left;

621 width: $sidebarWidth;

622 background: #fff;

623 font-size: 12px;

624

625 h2 {

626 padding: $lineheight $lineheight $lineheight/2;

627 }

628

629 h3, h4 {

630 margin-top: $lineheight;

631 margin-bottom: $lineheight/2;

632 font-size: 13px;

633 }

634

635 .icon.close {

636 float: right;

637 cursor: pointer;

638 }

639 }

640

641 .welcome {

642 display: none;

643 }

644

645 .overlay-sidebar #sidebar {

646 position: absolute;

647 z-index: 1000;

648 height: auto;

649 border-bottom-right-radius: 5px;

650 overflow: hidden;

651 .welcome {

652 display: block;

653 }

654 #sidebar_content {

655 display: none;

656 }

657 }

658

659 .welcome {

660 p {

661 padding: $lineheight/2 $lineheight $lineheight;

662 font-size: 110%;

663 font-weight: 300;

664 }

665

666 .button {

667 width: 50%;

668 float: left;

669 margin: 0;

670 border-radius: 0;

671 font-weight: normal;

672 padding: .6em;

673

674 &.learn-more {

675 border-right: 1px solid #fff;

676 }

677 }

678 }

679

680 #map {

681 height: 100%;

682 overflow: hidden;

683

684 &.query-active {

685 cursor: help;

686 }

687

688 &.query-disabled {

689 cursor: not-allowed;

690 }

691 }

692

693 #map-ui {

694 display: none;

695 position: relative;

696 float: right;

697 width: 250px;

698 height: 100%;

699 background: white;

700 overflow: auto;

701

702 .section {

703 border-bottom: 1px solid #DDD;

704 padding: 10px 20px;

705 }

706

707 a.close-button {

708 float: right;

709 padding:5px;

710 font-size:20px;

711 line-height:10px;

712 color:#222;

713 border:1px solid #ddd;

714 }

715

716 .tooltip {

717 opacity: 1;

718 border: 1px solid #ccc;

719 .tooltip-arrow {

720 border-top-color: #ccc;

721 }

722 }

723 }

724 }

725

726 .layers-ui,

727 .share-ui {

728 li:last-child {

729 margin-bottom: 0;

730 }

731 }

732

733 .layers-ui {

734 .base-layers {

735 .leaflet-container {

736 width: 100%;

737 height: 50px;

738 cursor: pointer;

739 }

740

741 li {

742 overflow: hidden;

743 border-radius: 3px;

744 border: 2px solid #fff;

745 margin-bottom: 8px;

746 position: relative;

747 transition: border-color 0.08s ease-in;

748

749 label {

750 position: absolute;

751 top: 0;

752 left: 0;

753 padding: 2px 6px;

754 border-bottom-right-radius: 3px;

755 cursor: pointer;

756 font-weight: 600;

757 font-size: 16px;

758 text-stroke: 2px #fff;

759 background: rgba(255,255,255,.9);

760 z-index: 2; // For IE9

761 input[type="radio"] {

762 display: none;

763 }

764 }

765

766 &.active { border-color: darken($green, 10%); }

767 &:hover {

768 border-color: $grey;

769 &.active { border-color: darken($green, 20%); }

770 }

771 }

772 }

773

774 .overlay-layers {

775 p {

776 font-size: 13px;

777 margin-bottom: 8px;

778 }

779 li.disabled { color: #999; }

780 }

781 }

782

783 .share-ui {

784 .share-tabs {

785 margin-bottom: 10px;

786

787 a {

788 color: #fff;

789 text-decoration: none;

790 background-color: $lightblue;

791 padding: 5px 10px;

792 }

793

794 a:first-child {

795 border-right: 1px solid #fff;

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

797 }

798

799 a:last-child {

800 border-left: 1px solid #fff;

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

802 }

803

804 a.active {

805 background-color: $blue;

806 }

807 }

808

809 .share-tab {

810 display: none;

811 }

812

813 .share-link {

814 input[type=text],

815 textarea {

816 width: 100%;

817 font-family: monospace;

818 font-size: small;

819 line-height: 1.3;

820 }

821 }

822

823 .share-image {

824 label {

825 margin-right: 10px;

826 }

827 }

828

829 #embed_html {

830 resize: vertical;

831 }

832

833 #mapnik_scale {

834 width: 100px;

835 }

836 }

837

838 .leaflet-top {

839 top: $lineheight/2 !important;

840 .leaflet-control {

841 margin-right: 0px !important;

842 margin-top: 0px !important;

843 }

844 }

845

846 .leaflet-popup-scrolled {

847 padding-right: $lineheight;

848 border-bottom: 0px !important;

849 border-top: 0px !important;

850 }

851

852 .leaflet-popup-content-wrapper {

853 border-radius: 4px !important;

854 }

855

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

857

858 #attribution {

859 display: none;

860 }

861

862 .attribution_license,

863 .attribution_project {

864 text-align: left;

865 }

866

867 .attribution_notice {

868 text-align: center;

869 }

870

871 .donate-attr { color: darken($green, 10%) !important; }

872

873 /* Rules for the sidebar */

874

875 .sidebar_heading {

876 position: relative;

877 padding: $lineheight/2 $lineheight;

878 // background: $offwhite;

879 // border-bottom: 1px solid #ccc;

880 > .close {

881 float: right;

882 margin-top: 2px;

883 cursor: pointer;

884 }

885 }

886

887 #browse_status {

888 p {

889 padding: $lineheight;

890 }

891

892 input {

893 display: block;

894 margin-left: auto;

895 margin-right: auto;

896 }

897 }

898

899 #sidebar {

900 #sidebar_loader,

901 .loader,

902 .load_more {

903 text-align: center;

904 margin: $lineheight auto;

905 width: 40px;

906 display: block;

907 }

908 }

909

910 /* Rules for the search and direction forms */

911

912 header .search_forms,

913 .directions_form {

914 display: none;

915 }

916

917 .search_form,

918 .directions_form {

919 position: relative;

920 padding: $lineheight/2;

921 background-color: $lightgrey;

922

923 .query_wrapper {

924 position: relative;

925 overflow: hidden;

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

927 }

928

929 input[type=text] {

930 width: 100%;

931 height: 30px;

932 transition: 300ms linear;

933 }

934

935 input[type=text].overflow {

936 border-right: none;

937 }

938

939 input:focus {

940 outline: none;

941 box-shadow: 0px 0px 7px #9ED485;

942 }

943

944 input[type=submit].float {

945 float: right;

946 width: auto;

947 min-width: 0;

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

949 }

950

951 .query_options {

952 text-align: right;

953 font-size: 10px;

954 color: $blue;

955 }

956

957 .describe_location {

958 position: absolute;

959 top: 6px;

960 right: 6px;

961 font-size: 10px;

962 color: $blue;

963 }

964

965 .switch_link {

966 float: right;

967 width: auto;

968 min-width: 0;

969 margin-left: 6px;

970 }

971

972 img.button {

973 display: block;

974 }

975

976 span.force_width {

977 width: 100%;

978 padding-right: 25px;

979 display: block;

980 }

981

982 select.routing_engines {

983 min-height: 30px;

984 margin: 0px 0px 5px 25px;

985 }

986

987 div.line {

988 width: 100%;

989 margin: 0px 0px 5px 0px;

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 sidebar */

1007

1008 .search_results_entry {

1009 ul li {

1010 border-bottom: $keyline;

1011 cursor: pointer;

1012 &:first-child { border-top: $keyline; }

1013 &.selected { background: #FFFFE6; }

1014 }

1015

1016 .search_details {

1017 display: block;

1018 float: right;

1019 text-align: right;

1020 margin-top: 0.2em;

1021 margin-left: 0.5em;

1022 }

1023 }

1024

1025 .search_results_error {

1026 color: #f00;

1027 }

1028

1029 /* Rules for routing */

1030

1031 #sidebar_content>table {

1032 padding: 5px 20px 10px 15px;

1033 width: 100%;

1034 border-collapse: separate;

1035 }

1036

1037 td.direction {

1038 background-image: image-url('routing-sprite.png');

1039 width: 20px; height: 20px;

1040 background-repeat: no-repeat;

1041 }

1042 @for $i from 1 through 17 {

1043 td.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; }

1044 }

1045

1046 p#routing_summary {

1047 padding: 0 $lineheight $lineheight/4;

1048 }

1049

1050 td.instruction, td.distance {

1051 padding-top: 0;

1052 border-bottom: 1px solid #DDD;

1053 }

1054 td.distance {

1055 color: #BBB;

1056 text-align: right;

1057 font-size: x-small;

1058 }

1059 tr.turn {

1060 cursor: pointer;

1061 }

1062 tr.turn:hover {

1063 background: lighten($green, 30%);

1064 }

1065 .routing_engines, #route_from, #route_to { margin-left: 25px; }

1066 .routing_marker { width: 15px; position: absolute; }

1067

1068 /* Rules for entity history */

1069

1070 #sidebar_content {

1071 .browse_details {

1072 position: relative;

1073 border-bottom: $keyline;

1074 }

1075 }

1076

1077 .browse_status {

1078 display: none;

1079 }

1080

1081 /* Rules for the history sidebar */

1082

1083 #sidebar .changesets {

1084 li {

1085 padding: 15px 20px;

1086 border-bottom: 1px solid #ddd;

1087 cursor: pointer;

1088

1089 &.selected { background: #FFFFE6; }

1090 /* color is derived from changeset bbox fillColor in history.js */

1091 }

1092

1093 h4 {

1094 margin: 0;

1095 a {

1096 color: #000;

1097 }

1098 }

1099 }

1100

1101 /* Rules for the browse sidebar */

1102

1103 #sidebar_content {

1104 .browse-section {

1105 padding: $lineheight/2 $lineheight;

1106 border-bottom: 1px solid #ddd;

1107

1108 h4:first-child {

1109 margin-top: 0;

1110 word-wrap: break-word;

1111 }

1112 }

1113

1114 .browse-section:last-of-type {

1115 border-bottom: none;

1116 }

1117

1118 .paginate {

1119 float: right;

1120 padding: 1px 6px;

1121 border: 1px solid #eee;

1122 border-radius: 3px;

1123 }

1124

1125 .paginate ul {

1126 padding-left: 20px;

1127 }

1128

1129 .browse-field {

1130 margin-bottom: 10px;

1131

1132 h4 {

1133 padding: 5px 0 5px 10px;

1134 font-size: 12px;

1135 border: 1px solid #CCC;

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

1137 background-color: #F6F6F6;

1138 }

1139

1140 p {

1141 padding: 7px 10px;

1142 font-size: 12px;

1143 background-color: #FFF;

1144 border: 1px solid #CCC;

1145 border-top: 0;

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

1147 }

1148 }

1149

1150 .browse-tag-list {

1151 background-color: #F6F6F6;

1152 border: 1px solid #ddd;

1153 border-radius: 3px;

1154 font-size: 12px;

1155 table-layout: fixed;

1156 border-collapse: separate;

1157

1158 th, td {

1159 border-bottom: 1px solid #ddd;

1160 }

1161

1162 tr:last-child th, tr:last-child td {

1163 border-bottom: 0;

1164 }

1165

1166 .browse-tag-k,

1167 .browse-tag-v {

1168 width: 50%;

1169 padding: 6px 10px;

1170 word-wrap: break-word;

1171 }

1172

1173 .browse-tag-k {

1174 font-weight: 500;

1175 background-color: #F6F6F6;

1176 }

1177

1178 .browse-tag-v {

1179 border-left: 1px solid #ddd;

1180 background-color: #fff;

1181 }

1182 }

1183

1184 .warning {

1185 margin: $lineheight/2 0;

1186 padding: $lineheight/2;

1187 font-size: 90%;

1188 }

1189

1190 .note-comments li, .changeset-comments li {

1191 margin: $lineheight/2 0;

1192

1193 p {

1194 margin-left: 10px;

1195 }

1196 }

1197

1198 .comments-header {

1199 float: left;

1200 }

1201

1202 .subscribe-buttons {

1203 float: left;

1204 margin: 18px 10px 10px;

1205 min-width: 80px;

1206 }

1207

1208 .subscribe-buttons input {

1209 font-size: 90%;

1210 line-height: 15px;

1211 min-height: 20px;

1212 }

1213

1214 span.action-button:hover {

1215 cursor: pointer;

1216 text-decoration: underline;

1217 }

1218

1219 .note-description {

1220 overflow: hidden;

1221 margin: 0 0 10px 10px;

1222 }

1223

1224 .query-intro p {

1225 padding: $lineheight $lineheight $lineheight/2;

1226 }

1227

1228 .query-results {

1229 display: none;

1230

1231 h3 {

1232 padding: $lineheight $lineheight $lineheight/2;

1233 margin: 0;

1234 }

1235

1236 ul {

1237 li {

1238 padding: 15px 20px;

1239 border-bottom: 1px solid #ddd;

1240

1241 &.query-result {

1242 cursor: pointer;

1243 }

1244

1245 &.selected {

1246 background: #FFFFE6;

1247 }

1248 }

1249 }

1250 }

1251 }

1252

1253 /* Rules for export sidebar */

1254

1255 .export_form {

1256 padding: $lineheight;

1257

1258 .export_area_inputs,

1259 .export_button {

1260 text-align: center;

1261 }

1262

1263 .export_area_inputs {

1264 margin-bottom: $lineheight/2;

1265 input[type="text"] {

1266 width: 80px;

1267 text-align: center;

1268 margin-bottom: 5px;

1269 }

1270 }

1271

1272 .export_boxy {

1273 background: #eee;

1274 border: 1px solid #ccc;

1275 border-radius: 3px;

1276

1277 #maxlat { margin-top: -1px; }

1278 #minlon {

1279 float: left;

1280 margin-left: -1px;

1281 }

1282 #maxlon {

1283 float: right;

1284 margin-right: -1px;

1285 }

1286 #minlat { margin-bottom: 0; }

1287 }

1288

1289 .export_bound {

1290 margin: $lineheight/4;

1291 }

1292

1293 .export_button {

1294 margin-top: $lineheight;

1295 margin-bottom: $lineheight;

1296 }

1297

1298 dl {

1299 padding-left: $lineheight/2;

1300 dd {

1301 margin-left: 0;

1302 margin-bottom: 10px;

1303 }

1304 }

1305 }

1306

1307 /* Rules for the routing sidebar */

1308

1309 #sidebar_content {

1310 #routing_credit {

1311 text-align: center;

1312 padding: 0.5em;

1313 }

1314 }

1315

1316 /* Rules for edit pages */

1317

1318 .site-edit {

1319 #content {

1320 position: absolute;

1321 top: $headerHeight;

1322 bottom: 0;

1323 width: 100%;

1324 }

1325

1326 #map {

1327 height: 100%;

1328 overflow: hidden;

1329 }

1330 }

1331

1332 /* Rules for non-map content pages */

1333

1334 .content-heading {

1335 background: $lightgrey;

1336

1337 h1 { font-size: 22px; }

1338 }

1339

1340 .content-body {

1341 h1, h2, h3, p, ul, ol {

1342 margin-bottom: $lineheight;

1343 }

1344

1345 h1, h2, h3 {

1346 margin-top: $lineheight/2;

1347 }

1348 }

1349

1350 .content-inner {

1351 position: relative;

1352 max-width: 900px;

1353 margin: auto;

1354 padding: $lineheight;

1355 }

1356

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

1358

1359 .user-new,

1360 .user-create,

1361 .user-terms {

1362 .content-body .content-inner {

1363 padding: 0;

1364 }

1365 }

1366

1367 .user-new,

1368 .user-create,

1369 .user-terms,

1370 .user-confirm {

1371 .content-heading .content-inner {

1372 height: 200px;

1373 }

1374 }

1375

1376 .header-illustration {

1377 background-position: 0 0;

1378 background-repeat: no-repeat;

1379 position: absolute;

1380 height: 200px;

1381 width: 100%;

1382 left: 0;

1383 bottom: 0;

1384

1385 &.new-user-main {

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

1387 }

1388

1389 &.confirm-main {

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

1391 }

1392

1393 &.new-user-terms {

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

1395 }

1396

1397 &.new-user-arm {

1398 height: 110px;

1399 width: 130px;

1400 left: 260px;

1401 top: 160px;

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

1403 z-index: 100;

1404 }

1405 }

1406

1407 #content.maximised {

1408 top: 0;

1409 left: 0;

1410 right: 0;

1411 bottom: 0;

1412 border: 0;

1413 z-index: 2000;

1414 }

1415

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

1417

1418 .content_map {

1419 position: relative;

1420 width: 45%;

1421 height: 400px;

1422 border: 1px solid #ccc;

1423 margin-bottom: $lineheight;

1424 float: right;

1425 }

1426

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

1428

1429 #trace_list {

1430 font-size: $lineheight/2;

1431 border-width: 0px;

1432 text-align: right;

1433

1434 .trace_summary {

1435 font-size: 12px;

1436 color: gray;

1437 }

1438

1439 .trace_pending {

1440 color: red;

1441 }

1442

1443 .trace_public {

1444 color: green;

1445 }

1446

1447 .trace_identifiable {

1448 color: green;

1449 }

1450

1451 .trace_trackable {

1452 color: red;

1453 }

1454

1455 .trace_private {

1456 color: red;

1457 }

1458 }

1459

1460 /* Rules for the new trace form */

1461

1462 #new_trace {

1463 input[type=text] {

1464 width: 50%;

1465 width: calc(100% - 150px);

1466 max-width: 500px;

1467 }

1468 }

1469

1470 /* Rules for the edit trace form */

1471

1472 .edit_trace {

1473 .form-row p {

1474 margin-bottom: 0px;

1475 }

1476

1477 input[type=text] {

1478 width: 50%;

1479 width: calc(100% - 150px);

1480 max-width: 500px;

1481 }

1482 }

1483

1484 /* Rules for the user profile page */

1485

1486 #userinformation {

1487

1488 min-height: 100px;

1489 .userinformation-inner {

1490 float: left;

1491 }

1492 h2 {

1493 margin-top: 0;

1494 }

1495 .user-description {

1496 width: 100%;

1497 clear: both;

1498 }

1499 .deemphasize {

1500 margin: 0;

1501 }

1502 }

1503

1504 .admin-user-info small {

1505 margin-bottom: $lineheight/2;

1506 display: inline;

1507 margin-right: $lineheight;

1508 }

1509

1510 .activity-block {

1511 clear: left;

1512 border-bottom: 1px solid #ccc;

1513 padding-bottom: $lineheight;

1514 float: left;

1515 h3 {

1516 margin-bottom: $lineheight/2;

1517 }

1518 }

1519

1520 .contact-activity {

1521 margin-top: $lineheight;

1522 width: 100%;

1523 }

1524

1525 .activity-details p {

1526 margin-left: 70px;

1527 margin-bottom: 0;

1528 }

1529

1530 #friends-container .contact-activity ul {

1531 margin-left: 70px;

1532 }

1533

1534 .user-view {

1535 // Silly exception; remove when user page is redesigned.

1536 .content-inner {

1537 max-width: none;

1538 }

1539 p#no_home_location {

1540 margin: $lineheight;

1541 }

1542 .user_thumbnail {

1543 margin-top: $lineheight/4;

1544 float: left;

1545 }

1546 }

1547

1548 /* Rules for the user map */

1549

1550 .content_map .leaflet-popup-content {

1551 margin: $lineheight/2;

1552 min-height: 50px;

1553 }

1554

1555 /* Rules for user popups on maps */

1556

1557 .user_popup {

1558 min-width: 200px;

1559 p {

1560 padding: 0 0 5px 0;

1561 margin-top: 0 0 0 60px;

1562 font-size: 12px;

1563 }

1564 img.user_thumbnail {

1565 float: left;

1566 margin: 0 $lineheight/2 0 0;

1567 }

1568 }

1569

1570 /* Rules for the user list */

1571

1572 #user_list {

1573 font-size: $lineheight/2;

1574 width: 100%;

1575

1576 tr {

1577 vertical-align: middle;

1578 }

1579

1580 p {

1581 margin-top: 0px;

1582 margin-bottom: 0px;

1583 }

1584 }

1585

1586 #user_list_actions {

1587 float: right;

1588 margin-top: $lineheight/2;

1589 }

1590

1591 /* Rules for the diary list page */

1592

1593 .diary_post {

1594 position: relative;

1595 margin-top: $lineheight/2;

1596 padding-top: $lineheight;

1597 border-top: 1px solid #ccc;

1598

1599 .post_heading {

1600 margin-bottom: $lineheight;

1601

1602 h2 {

1603 margin-top: 0;

1604 margin-bottom: $lineheight/2;

1605 font-size: 24px;

1606 }

1607 }

1608

1609 img.user_thumbnail {

1610 float: left;

1611 }

1612

1613 small.deemphasize {

1614 float: left;

1615 display: block;

1616 }

1617

1618 ul.secondary-actions {

1619 display: inline-block;

1620 }

1621 }

1622

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

1624 display: inline;

1625 }

1626

1627 /* Rules for the diary entry page */

1628

1629 .diary_entry {

1630 #map {

1631 position: relative;

1632 width: 90%;

1633 height: 400px;

1634 border: 1px solid #ccc;

1635 display: none;

1636 margin-bottom: $lineheight;

1637 }

1638 #newcomment {

1639 border-top: 1px solid #ccc;

1640 padding-top: $lineheight;

1641 margin-top: $lineheight/2;

1642 }

1643 .comments {

1644 max-width: 740px;

1645 }

1646 .diary-comment {

1647 margin-top: $lineheight/2;

1648 border-top: 1px dashed #ccc;

1649 padding-top: $lineheight/2;

1650 &:first-child {

1651 margin-top: $lineheight;

1652 padding-top: $lineheight;

1653 border-top: 1px solid #ccc;

1654 }

1655 p {

1656 margin-bottom: $lineheight/2;

1657 }

1658 .comment-heading {

1659 margin-bottom: 0;

1660 margin-top: 0;

1661 }

1662 }

1663 }

1664

1665 .diary_entry-view img.user_thumbnail {

1666 float: left;

1667 }

1668

1669 /* Rules for the log in page */

1670

1671 #login_openid_buttons {

1672 margin-bottom: 0;

1673 }

1674

1675 #login_openid_buttons li {

1676 float: left;

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

1678 }

1679

1680 /* Rules for the account confirmation page */

1681

1682 .user-terms {

1683 .legale {

1684 border: 1px solid #ccc;

1685 padding: $lineheight;

1686 margin-bottom: $lineheight;

1687 overflow: auto;

1688 height: 20em;

1689 }

1690

1691 #decline {

1692 background: $lightblue;

1693 &:hover {

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

1695 }

1696 }

1697 }

1698

1699 /* Rules for the account settings page */

1700

1701 #accountForm .user_map {

1702 position: relative;

1703 width: 500px;

1704 height: 400px;

1705 border: 1px solid #ccc;

1706 }

1707

1708 #accountForm .user_image {

1709 margin-bottom: 0;

1710 }

1711

1712 #accountForm #user_image {

1713 margin-left: 20px;

1714 }

1715

1716 #accountForm ul.accountImage-options {

1717 margin-left: 120px;

1718 }

1719

1720 .nohome .location {

1721 display: none;

1722 }

1723

1724 #homerow .message {

1725 display: none;

1726 }

1727

1728 .nohome .message {

1729 display: inline !important;

1730 }

1731

1732 .content_map.settings_map {

1733 width: 50%;

1734 float: none;

1735 }

1736

1737 /* Rules for the oauth settings page */

1738

1739 .oauth_clients .buttons .oauth-edit {

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

1741 }

1742

1743 .oauth_clients .buttons .oauth-delete {

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

1745 }

1746

1747 /* Rules for messages pages */

1748

1749 .messages {

1750 width: 100%;

1751 border: 1px solid #ddd;

1752

1753 input[type="submit"] {

1754 margin: auto;

1755 }

1756 tbody tr {

1757 border-top: 1px solid #ccc;

1758 }

1759

1760 .inbox-row {

1761 background: #f8f8ff;

1762 }

1763

1764 .inbox-row-unread {

1765 background:#CBEEA7;

1766 }

1767

1768 .right {

1769 float: right;

1770 }

1771

1772 tr td,

1773 tr th {

1774 padding: $lineheight/4;

1775 }

1776 p:last-child,

1777 h2:last-child,

1778 h3:last-child,

1779 ol:last-child,

1780 ul:last-child {

1781 margin-bottom:0;

1782 }

1783 tr td {

1784 height: 30px;

1785 border-right: 1px solid $lightgrey;

1786 }

1787 }

1788

1789 .inbox-row .inbox-mark-read {

1790 display: none;

1791 }

1792

1793 .info-line {

1794 margin-bottom: $lineheight;

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

1796 border-bottom: 1px solid #ccc;

1797

1798 form, form div {

1799 display: inline;

1800 }

1801 }

1802

1803 .info-line .user_thumbnail_tiny {

1804 vertical-align: middle;

1805 }

1806

1807 .inbox-sent {

1808 white-space: nowrap;

1809 }

1810

1811 .inbox-mark-unread,

1812 .inbox-mark-read,

1813 .inbox-delete {

1814 width: 1%;

1815 }

1816

1817 .inbox-row-unread .inbox-mark-unread {

1818 display: none;

1819 }

1820

1821 .message-read .message-buttons {

1822 margin-top: $lineheight;

1823 margin-bottom: $lineheight * 1.5;

1824 padding-top: $lineheight;

1825 border-top: 1px solid $lightgrey;

1826 }

1827

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

1829 border-radius: 0;

1830 }

1831

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

1833

1834 .error {

1835 padding: $lineheight;

1836 background-color: #ff7070;

1837 }

1838

1839 .warning {

1840 padding: $lineheight;

1841 background-color: #ffe0cc;

1842 }

1843

1844 .notice {

1845 padding: $lineheight;

1846 background-color: #CBEEA7;

1847 }

1848

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

1850

1851 .formError {

1852 display: inline-block;

1853 padding: 5px 10px;

1854 margin-top: 5px;

1855 border-radius: 4px;

1856 font-size: 12px;

1857 color: #fff;

1858 background-color: #ff7070;

1859 }

1860

1861 /* Rules for rails validation error boxes */

1862

1863 #errorExplanation {

1864 width: 400px;

1865 border: 2px solid #ff7070;

1866 padding: 0 $lineheight/2;

1867 margin-bottom: $lineheight;

1868 background-color: #f0f0f0;

1869

1870 h2 {

1871 margin: 0 -10px 10px -10px;

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

1873 font-weight: bold;

1874 font-size: 12px;

1875 background-color: #c00;

1876 color: #fff;

1877 text-align: left;

1878 }

1879

1880 p {

1881 color: #333;

1882 margin-bottom: 0px;

1883 padding: $lineheight/4;

1884 }

1885

1886 ul {

1887 padding-left: $lineheight;

1888

1889 li {

1890 font-size: 12px;

1891 list-style: disc;

1892 }

1893 }

1894 }

1895

1896 /* Rules for forms */

1897

1898 .standard-form {

1899 fieldset {

1900 margin-bottom: $lineheight;

1901 }

1902 label.standard-label {

1903 display: block;

1904 margin-bottom: $lineheight/4;

1905 font-size: $typeheight;

1906 font-weight: bold;

1907 line-height: 1.5;

1908 }

1909 label.standard-label.secondary {

1910 display: inline-block;

1911 font-weight: normal;

1912 }

1913 .form-help {

1914 font-weight: normal;

1915 }

1916 .form-column {

1917 float: left;

1918 margin-right: 20px;

1919 }

1920 .form-divider {

1921 margin-top: $lineheight;

1922 padding-top: $lineheight;

1923 border-top: 1px solid $lightgrey;

1924 }

1925 .horizontal-list .form-row {

1926 float: left;

1927 padding-right: 10px;

1928 }

1929 .form-row {

1930 margin-bottom: $lineheight/2;

1931 }

1932 .form-list {

1933 margin-bottom: 0;

1934 }

1935 .form-list li {

1936 margin-bottom: 5px;

1937 }

1938 input[type="checkbox"],

1939 input[type="radio"] {

1940 float: left;

1941 margin-top: 5px;

1942 }

1943 }

1944

1945 #remember_me_openid {

1946 display: block;

1947 }

1948

1949 input[type="checkbox"],

1950 input[type="radio"] {

1951 margin-right: 5px;

1952 }

1953

1954 input[type="text"],

1955 input[type="email"],

1956 input[type="url"],

1957 input[type="password"],

1958 textarea {

1959 border: 1px solid #ccc;

1960 padding: 2px 5px;

1961 margin: 0;

1962 width: 200px;

1963

1964 &.field_with_errors {

1965 border: 2px solid #ff7070;

1966 }

1967 }

1968

1969 textarea {

1970 padding: 5px;

1971 width: 100%;

1972 }

1973

1974 /* Rules for user images */

1975

1976 img.user_image {

1977 max-width: 100px;

1978 max-height: 100px;

1979 border: 1px solid #ccc;

1980 margin-bottom: $lineheight;

1981 float: left;

1982 margin-right: $lineheight;

1983 }

1984

1985 img.user_thumbnail {

1986 max-width: 50px;

1987 max-height: 50px;

1988 border: 1px solid #ccc;

1989 margin-right: $lineheight;

1990 }

1991

1992 img.user_thumbnail_tiny {

1993 width: auto;

1994 height: auto;

1995 max-width: 25px;

1996 max-height: 25px;

1997 border: 1px solid #ccc;

1998 }

1999

2000 /* Rules for geo microformats */

2001

2002 abbr.geo {

2003 border-bottom: none;

2004 }

2005

2006 /* Rules for RSS buttons */

2007

2008 .rsssmall {

2009 position: relative;

2010 top: 3px;

2011 }

2012

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

2014

2015 ul.secondary-actions {

2016 font-style: normal;

2017 margin-bottom: 0;

2018 margin-left: 0;

2019 &.pager {

2020 display: inline-block;

2021 margin-right: 60px;

2022 }

2023 > li {

2024 display: block;

2025 float: left;

2026 list-style: none;

2027 border-left: 1px solid #ccc;

2028 padding-left: $lineheight/2;

2029 margin-right: $lineheight/2;

2030 &:first-child {

2031 border-left: 0;

2032 padding-left: 0;

2033 }

2034 &:last-child {

2035 margin-right: 0px;

2036 }

2037 }

2038 }

2039

2040 div.secondary-actions {

2041 padding: 10px;

2042 text-align: center;

2043 }

2044

2045 /* Utility for managing inner content areas */

2046

2047 .inner22 { padding: $lineheight;}

2048

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

2050

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

2052

2053 .inner20 { padding: $lineheight 0;}

2054

2055 .inner02 { padding: 0 $lineheight;}

2056

2057 /* Utility for general button styles */

2058

2059 input[type="button"],

2060 input[type="submit"],

2061 input[type="reset"],

2062 a.button {

2063 cursor: pointer;

2064 border: 0;

2065 display: inline-block;

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

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

2068 min-width: 120px;

2069 margin: 0 0 $lineheight/2 0;

2070 color: white;

2071 background: $blue;

2072 text-align: center;

2073 border-radius: 2px;

2074 &:hover {

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

2076 text-decoration: none;

2077 }

2078 &.deemphasize {

2079 background: $lightblue;

2080 &:hover {

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

2082 }

2083 }

2084 &:disabled {

2085 background: $lightgrey;

2086 &:hover {

2087 background: $lightgrey;

2088 }

2089 }

2090 &:last-child {

2091 margin-bottom: 0;

2092 }

2093 }

2094

2095 input[type="button"],

2096 input[type="submit"],

2097 input[type="reset"] {

2098 line-height: normal;

2099 }

2100

2101 a.button {

2102 line-height: 20px;

2103 }

2104

2105 .buttons {

2106 min-width: 200px;

2107 input[type="submit"],

2108 input[type="button"],

2109 input[type="reset"],

2110 .button {

2111 box-sizing: border-box;

2112 float: left;

2113 border-radius: 0;

2114 margin:0;

2115 min-width: 75px;

2116 max-width: 180px;

2117 border-right:1px solid white;

2118 text-overflow: ellipsis;

2119 white-space: nowrap;

2120 overflow: hidden;

2121 }

2122 input:first-child,

2123 .button:first-child {

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

2125 }

2126 input:last-child,

2127 .button:last-child {

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

2129 border-right-width: 0;

2130 }

2131 input:only-child,

2132 .button:only-child,

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

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

2135 border-radius:2px;

2136 border-right-width: 0;

2137 }

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

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

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

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

2142 border-right-width: 0;

2143 }

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

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

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

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

2148 border-right-width: 1px;

2149 }

2150 }

2151

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

2153

2154 .table0,

2155 .item0 {

2156 background: $offwhite;

2157 }

2158

2159 .table1,

2160 .item1 {

2161 background: #fff;

2162 }

2163

2164 /* Rules for OpenID logo */

2165

2166 .openid_logo {

2167 vertical-align: text-bottom;

2168 border: 0;

2169 }

2170

2171 /* Rules for rich text */

2172

2173 .richtext,

2174 .prose {

2175 h1, h2 {

2176 padding-bottom: $lineheight/2;

2177 border-bottom: 1px dashed #cccccc;

2178 margin-bottom: $lineheight/2;

2179 }

2180

2181 h1 {

2182 font-size: 24px;

2183 }

2184

2185 h2 {

2186 font-size: 18px;

2187 }

2188

2189 h3 {

2190 font-size: $typeheight;

2191 }

2192

2193 code {

2194 font-size: 13px;

2195 background: #e8e8e8;

2196 padding: 2px 3px;

2197 }

2198

2199 pre {

2200 font-size: 13px;

2201 background: #e8e8e8;

2202 padding: 2px 3px;

2203

2204 code {

2205 padding: 0;

2206 }

2207 }

2208

2209 img {

2210 padding: $lineheight;

2211 background-color: $offwhite;

2212 display: block;

2213 max-width: 100%;

2214 margin: auto;

2215 }

2216

2217 blockquote {

2218 border-left: $lineheight solid $offwhite;

2219 padding-left: $lineheight;

2220 margin: 0;

2221 color: #7E7E7E;

2222 }

2223

2224 ul, ol {

2225 padding-left: $lineheight;

2226 margin-bottom: $lineheight;

2227 margin-left: $lineheight;

2228 }

2229

2230 ul li {

2231 list-style: disc;

2232 }

2233

2234 ol li {

2235 list-style: decimal;

2236 }

2237 }

2238

2239 .diary_post .richtext {

2240 margin-top: $lineheight;

2241 }

2242

2243 .comments .richtext {

2244 margin-left: 70px;

2245 margin-top: 0;

2246 }

2247

2248 /* Rules for rich text editors */

2249

2250 input.richtext_title[type="text"] {

2251 width: 50%;

2252 width: calc(100% - 235px);

2253

2254 @media only screen and (max-width:768px) {

2255 width: 100%;

2256 }

2257 }

2258

2259 .richtext_container {

2260 margin-bottom: $lineheight;

2261

2262 .richtext_content {

2263 width: 50%;

2264 width: calc(100% - 235px);

2265 display: inline-block;

2266 vertical-align: top;

2267

2268 @media only screen and (max-width:768px) {

2269 width: 100%;

2270 }

2271

2272 .richtext_preview {

2273 display: inline-block;

2274 padding: $lineheight;

2275 background-color: $offwhite;

2276 overflow-x: auto;

2277

2278 &.loading {

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

2280 background-repeat: no-repeat;

2281 background-position: center;

2282 }

2283

2284 > :first-child {

2285 margin-top: 0px;

2286 }

2287 }

2288 }

2289

2290 .richtext_help {

2291 display: inline-block;

2292 vertical-align: top;

2293 margin-left: 15px;

2294 background-color: #f8f8ff;

2295 padding: $lineheight/2;

2296 width: 220px;

2297

2298 ul {

2299 margin-bottom: 0;

2300 }

2301

2302 h4.heading, li {

2303 border-bottom: 1px solid #ccc;

2304 margin-bottom: $lineheight/4;

2305 padding-bottom: $lineheight/4;

2306 }

2307

2308 li h4, li span, li p {

2309 display: inline-block;

2310 vertical-align: top;

2311 font-size: 11px;

2312 }

2313

2314 li h4 {

2315 width: 40%;

2316 margin: 0;

2317 }

2318

2319 li span, li p {

2320 width: 50%;

2321 margin-left: $lineheight/2;

2322 margin-bottom: $lineheight/4;

2323 white-space: nowrap;

2324 }

2325 }

2326 }

2327

2328 /* Rules for the user notes list */

2329

2330 .note_list {

2331 tr.creator {

2332 background-color: #eeeeee;

2333 }

2334

2335 td {

2336 padding: 3px;

2337 }

2338

2339 p {

2340 margin-bottom: 0px;

2341 }

2342 }

2343

2344 /* Rules for the iD editor */

2345

2346 .id-embed {

2347 width: 100%;

2348 height: 100%;

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: -1px;

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-radius: 0 3px 3px;

2396 *border-right-width: 2px;

2397 *border-bottom-width: 2px;

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

2399 background-clip: padding-box;

2400 }

2401

2402 .dropdown-menu.pull-right {

2403 right: 0;

2404 left: auto;

2405 }

2406

2407 .dropdown-menu .divider {

2408 *width: 100%;

2409 height: 1px;

2410 margin: 9px 1px;

2411 *margin: -5px 0 5px;

2412 overflow: hidden;

2413 background-color: #e5e5e5;

2414 border-bottom: 1px solid #ffffff;

2415 }

2416

2417 .dropdown-menu > li > a {

2418 display: block;

2419 padding: 3px 10px;

2420 clear: both;

2421 font-weight: normal;

2422 line-height: 20px;

2423 color: #333333;

2424 white-space: nowrap;

2425 }

2426

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

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

2429 .dropdown-submenu:hover > a,

2430 .dropdown-submenu:focus > a {

2431 color: #ffffff;

2432 text-decoration: none;

2433 background-color: $green;

2434 }

2435

2436 .dropdown-menu > .active > a,

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

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

2439 color: #ffffff;

2440 text-decoration: none;

2441 background-color: $green;

2442 outline: 0;

2443 }

2444

2445 .dropdown-menu > .disabled > a,

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

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

2448 color: #999999;

2449 }

2450

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

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

2453 text-decoration: none;

2454 cursor: default;

2455 background-color: transparent;

2456 background-image: none;

2457 }

2458

2459 .open {

2460 *z-index: 1000;

2461 }

2462

2463 .open > .dropdown-menu {

2464 display: block;

2465 }

2466

2467 .dropdown-backdrop {

2468 position: fixed;

2469 top: 0;

2470 right: 0;

2471 bottom: 0;

2472 left: 0;

2473 z-index: 990;

2474 }

2475

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

2477 .site-welcome, .site-fixthemap {

2478 .center {

2479 text-align: center;

2480 .sprite {

2481 float: none;

2482 margin: auto;

2483 }

2484 }

2485

2486 .sprite {

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

2488 background-size: 500px 250px;

2489 display: block;

2490 float: left;

2491 }

2492

2493 .icon-list {

2494 padding-bottom: 20px;

2495 div {

2496 margin-bottom: 10px;

2497 p {

2498 padding-top: 10px;

2499 }

2500 }

2501 }

2502 .sprite.small {

2503 width: 50px;

2504 height: 50px;

2505 }

2506

2507 .sprite.x {

2508 background-position: -50px 0;

2509 }

2510

2511 .sprite.term {

2512 margin-right: 10px;

2513 vertical-align: middle;

2514 }

2515

2516 .sprite.node {

2517 background-position: -100px 0;

2518 }

2519

2520 .sprite.way {

2521 background-position: -150px 0;

2522 }

2523

2524 .sprite.tag {

2525 background-position: -200px 0;

2526 }

2527

2528 .sprite.editor {

2529 background-position: -250px 0;

2530 }

2531

2532 .sprite.question {

2533 background-position: -300px 0;

2534 }

2535

2536 .start-mapping {

2537 margin: auto;

2538 cursor: pointer;

2539 border: none;

2540 padding: 20px 40px;

2541 font-size: 30px;

2542 text-decoration: none;

2543 }

2544

2545 .note-box {

2546 margin-top: 20px;

2547 background-color: $offwhite;

2548 }

2549

2550 .icon.note {

2551 background-color: #333;

2552 border-radius: 4px;

2553 }

2554 }

2555

2556 .site-about #content {

2557 //background-color: #000;

2558 background-color: #eee;

2559 background-position: 50% 50%;

2560 background-repeat: no-repeat;

2561 background-size: cover;

2562 background-attachment: fixed;

2563

2564 .caption {

2565 max-width: 200px;

2566 font: 13px/20px Helvetica, Arial, sans-serif;

2567 position: fixed;

2568 text-align: right;

2569 right: 20px;

2570 bottom: 60px;

2571 text-shadow: #000 0px 1px 5px;

2572 color: #eee;

2573 opacity: 0.8;

2574 display: none;

2575 }

2576

2577 .caption a {

2578 color: white;

2579 white-space: nowrap;

2580 text-decoration: none;

2581 }

2582

2583 a.next {

2584 display: block;

2585 position: fixed;

2586 right: 10px;

2587 bottom: 10px;

2588 width: 40px;

2589 height: 40px;

2590 border-radius: 5px;

2591 text-indent: -9999px;

2592 overflow: hidden;

2593 background: image-url('about/sprite.png') -120px 0px no-repeat;

2594 background-color: #000;

2595 background-color: rgba(0, 0, 0, 0.5);

2596 }

2597

2598 .content-inner {

2599 position: relative;

2600 color: #333;

2601 min-width: 320px;

2602 max-width: 640px;

2603

2604 .section {

2605 margin-bottom: 30px;

2606 }

2607

2608 .section:last-child {

2609 margin-bottom: 0;

2610 }

2611 }

2612

2613 .text {

2614 background: white;

2615 padding: 40px;

2616 }

2617

2618 .attr {

2619 position: relative;

2620 padding: 170px 40px 20px;

2621 background: #333;

2622 background: rgba(0, 0, 0, .8);

2623 margin-bottom: 0;

2624 margin-top: -20px;

2625

2626 h1 {

2627 display: block;

2628 color: white;

2629 font-weight: 300;

2630 font-size: 34px;

2631 span {

2632 color: #76c551;

2633 }

2634 }

2635

2636 .user-image {

2637 position: absolute;

2638 top: 0px;

2639 right: 240px;

2640 left: 0px;

2641 height: 150px;

2642 background-position: 0 50%;

2643 background-repeat: no-repeat;

2644 background-image: image-url('about/osm.png');

2645 background-size: cover;

2646 background-color: #76c551;

2647 }

2648

2649 .byosm {

2650 position: absolute;

2651 top: 0px;

2652 right: 0px;

2653 z-index: 1;

2654 width: 240px;

2655 height: 150px;

2656 padding: 20px 20px 20px 40px;

2657 font: 500 20px/24px Helvetica, Arial, sans-serif;

2658 white-space: nowrap;

2659 color: #fff;

2660 background: #76c551;

2661 }

2662

2663 .byosm span {

2664 display: inline-block;

2665 width: 20px;

2666 margin-left: -20px;

2667 }

2668 }

2669

2670 h2 {

2671 margin-bottom: 10px;

2672 }

2673

2674 .icon {

2675 width: 30px;

2676 height: 30px;

2677 margin-right: 10px;

2678 vertical-align: middle;

2679 background: 40px 40px image-url('about/sprite.png') no-repeat;

2680

2681 &.local { background-position: 0px 0px; }

2682 &.community { background-position: 0px -40px; }

2683 &.open { background-position: 0px -80px; }

2684 &.partners { background-position: 0px -120px; }

2685 &.infringement { background-position: 0px -160px; }

2686 }

2687 }

2688

2689 @import 'browse';

2690

2691 @media only screen and (max-width:960px) {

2692 .header-illustration.new-user-arm {

2693 display: none;

2694 }

2695 }

2696