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

1 @import "parameters";

2 @import "bootstrap-custom";

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

6 .fillL { background-color: white; }

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

10 body {

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

12 font-size: $typeheight;

13 line-height: 1.6666;

14 color: #222;

15 background-color: #fff;

16 margin: 0px;

17 padding: 0px;

18 text-align: left;

19 height: 100%;

20 }

22 p > img {

23 width: auto;

24 max-width: 100%;

25 }

27 small, aside {

28 font-size: 12px;

29 }

31 #container { position: relative; }

33 .column-1 {

34 width: 50%;

35 margin: 0 0 $lineheight/2 0;

36 }

38 .small_icon {

39 vertical-align: middle;

40 margin-right: $lineheight/4;

41 }

43 .red { color: $red; }

45 .piwik { border: 0; }

47 [dir=rtl] { /* no-r2 */ text-align: right; }

49 [dir=ltr] { /* no-r2 */ text-align: left; }

51 /* Rules for icons */

53 .icon {

54 display: inline-block;

55 vertical-align: top;

56 width: 20px;

57 height: 20px;

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

59 background-image: image-url("sprite.svg");

60 text-indent: -9999px;

61 overflow: hidden;

62 }

64 .icon.search { /* no-r2 */ background-position: 0 0; }

65 .icon.donate { /* no-r2 */ background-position: -20px 0; }

66 .icon.zoomin { /* no-r2 */ background-position: -40px 0; }

67 .icon.zoomout { /* no-r2 */ background-position: -60px 0; }

68 .icon.geolocate { /* no-r2 */ background-position: -80px 0; }

69 .active .icon.geolocate { /* no-r2 */ background-position: -80px -20px; }

70 .icon.layers { /* no-r2 */ background-position: -100px 0; }

71 .icon.key { /* no-r2 */ background-position: -120px 0; }

72 .icon.share { /* no-r2 */ background-position: -140px 0; }

73 .icon.clipboard { /* no-r2 */ background-position: -160px 0; }

74 .icon.link { /* no-r2 */ background-position: -180px 0; }

75 .icon.close { /* no-r2 */ background-position: -200px 0; }

76 .close-wrap:hover .icon.close,

77 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }

78 .icon.check { /* no-r2 */ background-position: -220px 0; }

79 .icon.note { /* no-r2 */ background-position: -240px 0; }

80 .icon.note.grey { /* no-r2 */ background-position: -240px -20px; }

81 .icon.query { /* no-r2 */ background-position: -260px 0; }

83 /* Rules for links */

85 a {

86 color: #24d;

87 text-decoration: none;

88 -webkit-appearance: none;

89 outline: 0;

90 &:hover {

91 text-decoration: underline;

92 }

93 }

95 /* General styles for tables */

97 table {

98 width: 100%;

99 margin-bottom: $lineheight;

100 th, td {

101 text-align: left;

102 padding: $lineheight/4;

103 line-height: $lineheight;

104 }

105 th {

106 font-weight: 600;

107 vertical-align: top;

108 }

109 td {

110 vertical-align: middle;

111 }

112 }

113

114 /* Utility for de-emphasizing content */

115

116 .deemphasize {

117 color: $darkgrey;

118 a {

119 color: $blue;

120 }

121 }

122

123 /* Rules for the header */

124

125 #menu-icon {

126 display: none !important;

127 float: right;

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

129 background-size: 30px 30px;

130 display: block;

131 width: 30px;

132 height: 30px;

133 margin: 14px 10px 0 0;

134 opacity: 0.6;

135 }

136

137 header {

138 height: $headerHeight;

139 position: relative;

140 z-index: 1001;

141 font-size: 14px;

142

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

144 display: inline-block;

145 }

146

147 > * {

148 height: 100%;

149 padding: $lineheight/2;

150 }

151

152 h1, nav.primary {

153 float: left;

154 }

155

156 a, a:hover {

157 text-decoration: none;

158 }

159

160 img.logo {

161 width: 30px;

162 height: 30px;

163 margin-top: -2px;

164 vertical-align: middle;

165 }

166

167 h1 {

168 font-size: 18px;

169 font-weight: 600;

170 line-height: 1.2;

171 margin: 0;

172 padding-top: 15px;

173

174 a {

175 color: #000;

176 }

177

178 a:hover {

179 color: #000;

180 }

181 }

182 }

183

184 nav.primary {

185 > ul {

186 padding: 0;

187 $border: 1px solid $green;

188

189 border: $border;

190 border-radius: $border-radius;

191

192 > li {

193 border-right: $border;

194 float: left;

195 &:last-child {

196 border-right: 0;

197 }

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

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

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

201 &.dropdown {

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

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

204 }

205 }

206 }

207

208 a.tab,

209 .dropdown-toggle {

210 display: inline-block;

211 font-weight: 500;

212 color: $green;

213 padding: 5px 15px;

214 }

215

216 .dropdown-toggle {

217 padding: 5px 6px;

218 }

219

220 .caret {

221 border-top-color: $green;

222 margin-top: 10px;

223 }

224

225 .disabled a {

226 color: $grey;

227 cursor: default;

228

229 .caret {

230 border-top-color: $grey;

231 }

232 }

233

234 > ul li.current {

235 background-color: $green;

236

237 .tab {

238 color: #fff;

239 }

240

241 .caret {

242 border-top-color: #fff;

243 }

244 }

245 }

246

247 nav.secondary {

248 position: absolute;

249 right: 0;

250

251 > ul {

252 vertical-align: middle;

253 margin: 0;

254 padding: 0;

255

256 a, .dropdown-toggle {

257 display: inline-block;

258 text-decoration: none;

259 color: $darkgrey;

260 padding: 5px;

261

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

263 }

264 }

265

266 > ul li.current a {

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

268 }

269

270 .user-menu {

271 $border: 1px solid $grey;

272 border: $border;

273 border-radius: $border-radius;

274 margin-left: 10px;

275 padding: 0;

276

277 > li {

278 border-right: $border;

279 float: left;

280 &:last-child {

281 border-right: 0;

282

283 > a {

284 border-radius: 0 $border-radius $border-radius 0;

285 }

286 }

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

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

289 }

290

291 a {

292 padding: 5px 15px;

293

294 }

295

296 &.logged-in > a {

297 padding: 0;

298 > .user-button {

299 line-height: 1.8;

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

301 display: inline-block;

302 color: $darkgrey;

303 }

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

305 }

306 }

307

308 .caret {

309 border-top-color: $grey;

310 margin-top: 9px;

311 }

312

313 img.user_thumbnail_tiny {

314 border: 0;

315 vertical-align: top;

316 margin-top: 0px;

317 margin: 4px 0 0 4px;

318 border-radius: 2px;

319 }

320

321 #inboxanchor {

322 display: inline-block;

323 vertical-align: top;

324 height: 25px;

325 margin: 3px 0 3px 3px;

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

327 line-height: 20px;

328 border-radius: 2;

329 }

330

331 .dropdown-menu {

332 left: auto;

333 right: -1px;

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

335

336 .count-number {

337 float: right;

338 padding: 0 5px;

339 margin: 0;

340 }

341 }

342 }

343

344 #compact-secondary-nav {

345 display: none;

346 ul li a {

347 width: 100%;

348 color: #333;

349 &:hover { color: #fff; }

350 }

351 }

352

353 body.compact {

354 #compact-secondary-nav {

355 display: inline-block;

356 }

357 .compact-hide {

358 display: none;

359 }

360 }

361

362 /* Utility for styling notification numbers */

363

364 .count-number {

365 padding: 2px $lineheight/4;

366 border-radius: 2px;

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

368 margin: 0 2px;

369 font-size: 11px;

370 color: #333;

371 }

372

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

374

375 #noscript {

376 z-index: 20000000;

377 margin-left: 400px;

378 margin-top: 50px;

379 }

380

381 /* Rules for Leaflet maps */

382

383 .leaflet-control .control-button {

384 display: block;

385 height: 40px;

386 width: 40px;

387 background-color: #333;

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

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

390 margin-bottom: 10px;

391 outline: none;

392

393 &:hover {

394 background-color: black;

395 }

396

397 &.disabled,

398 &.leaflet-disabled {

399 background-color: #333;

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

401 cursor: default;

402 }

403

404 &.active {

405 background-color: $vibrant-green;

406 }

407

408 .icon {

409 margin: 10px;

410 }

411 }

412

413 .leaflet-control .zoomin,

414 .control-layers .control-button {

415 margin-bottom: 0px;

416 border-radius: 4px 0 0 0;

417 }

418

419 .leaflet-control .zoomout,

420 .control-key .control-button {

421 margin-bottom: 0;

422 border-radius: 0;

423 }

424

425 .control-locate .control-button,

426 .control-share .control-button {

427 border-radius: 0 0 0 4px;

428 }

429

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

431

432 .map-layout {

433 #content {

434 overflow: hidden;

435 position: absolute;

436 top: $headerHeight;

437 bottom: 0;

438 width: 100%;

439 }

440

441 #sidebar, #map {

442 position: relative;

443 height: 100%;

444 overflow-x: hidden;

445 overflow-y: auto;

446 }

447

448 #sidebar {

449 float: left;

450 width: $sidebarWidth;

451 background: #fff;

452

453 #sidebar_loader {

454 display: none;

455 }

456

457 > div {

458 position: relative;

459 float: left;

460 clear: both;

461 width: 100%;

462 }

463

464 h2 {

465 padding: $lineheight $lineheight $lineheight/2;

466 font-size: 1.5rem;

467 }

468

469 h3, h4 {

470 margin-top: $lineheight;

471 margin-bottom: $lineheight/2;

472 font-size: 1.25rem;

473 }

474

475 .close-wrap {

476 cursor: pointer;

477 position: absolute;

478 top: 0;

479 right: 0;

480 width: 60px;

481 height: 60px;

482

483 .icon.close {

484 pointer-events: none;

485 position: absolute;

486 right: 20px;

487 top: 20px;

488 }

489 }

490

491 .icon.close {

492 float: right;

493 cursor: pointer;

494 }

495

496 .flash {

497 padding: 15px;

498

499 picture {

500 margin-right: -25px;

501 }

502

503 div.message {

504 margin-left: 30px;

505 }

506 }

507 }

508

509 .overlay-sidebar #sidebar {

510 position: absolute;

511 z-index: 1000;

512 height: auto;

513 overflow: hidden;

514

515 #banner {

516 display: block;

517 }

518

519 .welcome {

520 display: none;

521

522 &.visible {

523 display: block;

524 }

525 }

526

527 #sidebar_content {

528 display: none;

529 }

530 }

531

532 .welcome {

533 display: none;

534 padding-bottom: 5px;

535

536 p {

537 padding: $lineheight/2 $lineheight $lineheight;

538 font-size: 110%;

539 font-weight: 300;

540 }

541

542 .button {

543 width: 50%;

544 float: left;

545 margin: 0;

546 border-radius: 0;

547 font-weight: normal;

548 padding: .6em;

549

550 &.learn-more {

551 border-right: 1px solid #fff;

552 }

553 }

554 }

555

556 #banner {

557 display: none;

558

559 img {

560 display: block;

561 width: $sidebarWidth;

562 }

563 }

564

565 #map {

566 height: 100%;

567 overflow: hidden;

568

569 &.query-active {

570 cursor: help;

571 }

572

573 &.query-disabled {

574 cursor: not-allowed;

575 }

576

577 .leaflet-marker-draggable {

578 cursor: move;

579 }

580 }

581

582 #map-ui {

583 display: none;

584 position: relative;

585 float: right;

586 width: 250px;

587 height: 100%;

588 background: white;

589 overflow: auto;

590

591 .section {

592 border-bottom: 1px solid $grey;

593 padding: 10px 20px;

594 }

595

596 a.close-button {

597 float: right;

598 padding:5px;

599 font-size:20px;

600 line-height:10px;

601 color:#222;

602 border:1px solid $grey;

603 }

604

605 .tooltip {

606 opacity: 1;

607 border: 1px solid $grey;

608 .tooltip-arrow {

609 border-top-color: $grey;

610 }

611 }

612 }

613 }

614

615 .layers-ui,

616 .share-ui {

617 li:last-child {

618 margin-bottom: 0;

619 }

620 }

621

622 .layers-ui {

623 .base-layers {

624 .leaflet-container {

625 width: 100%;

626 height: 50px;

627 cursor: pointer;

628 }

629

630 li {

631 overflow: hidden;

632 border-radius: 3px;

633 border: 2px solid #fff;

634 margin-bottom: 8px;

635 position: relative;

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

637

638 label {

639 position: absolute;

640 top: 0;

641 left: 0;

642 padding: 2px 6px;

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

644 cursor: pointer;

645 font-weight: 600;

646 font-size: 16px;

647 text-stroke: 2px #fff;

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

649 z-index: 1000;

650 input[type="radio"] {

651 display: none;

652 }

653 }

654

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

656 &:hover {

657 border-color: $grey;

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

659 }

660 }

661 }

662

663 .overlay-layers {

664 p {

665 font-size: 13px;

666 margin-bottom: 8px;

667 }

668 li.disabled { color: $darkgrey; }

669 }

670 }

671

672 .share-ui {

673 .share-tabs {

674 margin-bottom: 10px;

675

676 a {

677 color: #fff;

678 text-decoration: none;

679 background-color: $lightblue;

680 padding: 5px 10px;

681 border-right: 1px solid #fff;

682 }

683

684 a:first-child {

685 border-right: 1px solid #fff;

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

687 }

688

689 a:last-child {

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

691 }

692

693 a.active {

694 background-color: $blue;

695 }

696 }

697

698 .share-tab {

699 display: none;

700 }

701

702 .share-link {

703 input[type=text],

704 textarea {

705 width: 100%;

706 font-family: monospace;

707 font-size: small;

708 line-height: 1.3;

709 }

710 }

711

712 .share-image {

713 label {

714 margin-right: 10px;

715 }

716 }

717

718 #embed_html {

719 resize: vertical;

720 }

721

722 #mapnik_scale {

723 width: 100px;

724 }

725 }

726

727 .leaflet-top {

728 top: $lineheight/2 !important;

729 .leaflet-control {

730 margin-right: 0px !important;

731 margin-top: 0px !important;

732 }

733 }

734

735 .leaflet-popup-scrolled {

736 padding-right: $lineheight;

737 border-bottom: 0px !important;

738 border-top: 0px !important;

739 }

740

741 .leaflet-popup-content-wrapper {

742 border-radius: 4px !important;

743 }

744

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

746

747 #attribution {

748 display: none;

749

750 table {

751 width: 100%

752 }

753 }

754

755 .attribution_license,

756 .attribution_project {

757 text-align: left;

758 }

759

760 .attribution_notice {

761 text-align: center;

762 }

763

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

765

766 /* Rules for the sidebar */

767

768 .sidebar_heading {

769 position: relative;

770 padding: $lineheight/2 $lineheight;

771 // background: $offwhite;

772 // border-bottom: 1px solid $grey;

773 > .close {

774 float: right;

775 margin-top: 2px;

776 cursor: pointer;

777 }

778 }

779

780 #browse_status {

781 p {

782 padding: $lineheight;

783 }

784

785 input {

786 display: block;

787 margin-left: auto;

788 margin-right: auto;

789 }

790 }

791

792 #sidebar {

793 #sidebar_loader,

794 .search_more {

795 width: 100%;

796 margin: $lineheight auto;

797 }

798

799 .loader,

800 .load_more {

801 text-align: center;

802 margin: auto;

803 width: 40px;

804 display: block;

805 }

806 }

807

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

809

810 header .search_forms,

811 .directions_form {

812 display: none;

813 }

814

815 .search_form,

816 .directions_form {

817 position: relative;

818 padding: $lineheight/2;

819 background-color: $lightgrey;

820

821 .query_wrapper {

822 position: relative;

823 overflow: hidden;

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

825 }

826

827 input[type=text] {

828 width: 100%;

829 height: 30px;

830 transition: 300ms linear;

831 }

832

833 input[type=text].overflow {

834 border-right: none;

835 }

836

837 input:focus {

838 outline: none;

839 box-shadow: 0px 0px 7px $vibrant-green;

840 }

841

842 input[type=submit].float {

843 float: right;

844 width: auto;

845 min-width: 0;

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

847 }

848

849 input.error {

850 background-color: rgba($red, 0.4);

851 }

852

853 select {

854 /* this next line is to polyfill the vertical alignment of text within a select element,

855 * which is different between firefox and chrome. */

856 padding: 0.3em 0;

857 }

858

859 .query_options {

860 text-align: right;

861 font-size: 10px;

862 color: $blue;

863 }

864

865 .describe_location {

866 position: absolute;

867 top: 6px;

868 right: 6px;

869 font-size: 10px;

870 color: $blue;

871 }

872

873 .switch_link {

874 float: right;

875 width: auto;

876 min-width: 0;

877 margin-left: 6px;

878 }

879

880 img.button {

881 display: block;

882 width: 20px;

883 height: 20px;

884 }

885

886 span.force_width {

887 width: 100%;

888 padding-right: 25px;

889 display: block;

890 }

891

892 select.routing_engines {

893 min-height: 30px;

894 margin: 0px 0px 5px 25px;

895 }

896

897 input.routing_go {

898 min-width: 100px;

899 float: right;

900 }

901

902 div.header {

903 width: 100%;

904 height: 30px;

905 }

906

907 div.line {

908 width: 100%;

909 margin: 0px 0px 5px 0px;

910 }

911

912 div.loader_copy {

913 display: none;

914

915 img {

916 vertical-align: middle;

917 }

918 }

919

920 a.reverse_directions {

921 cursor: pointer;

922 margin: 0px 0px 5px 25px;

923 }

924 }

925

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

927

928 #mapkey {

929 .mapkey-table-key img {

930 display: block;

931 margin-left: auto;

932 margin-right: auto;

933 }

934 td {

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

936 }

937 }

938

939 /* Rules for search sidebar */

940

941 #sidebar .search_results_entry {

942 ul li {

943 cursor: pointer;

944 &.selected { background: $list-highlight; }

945 }

946

947 .search_more .loader {

948 display: none;

949 width: 100%;

950 }

951 }

952

953 .search_results_error {

954 color: #f00;

955 padding: 10px 20px;

956 }

957

958 /* Rules for routing */

959

960 #sidebar_content>table {

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

962 width: 100%;

963 border-collapse: separate;

964 }

965

966 div.direction {

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

968 width: 20px;

969 height: 20px;

970 background-repeat: no-repeat;

971 }

972 @for $i from 0 through 25 {

973 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }

974 }

975

976 p#routing_summary {

977 padding: 0 $lineheight $lineheight/4;

978 }

979

980 td.instruction, td.distance {

981 padding-top: $lineheight/5;

982 padding-bottom: $lineheight/5;

983 border-bottom: 1px solid $grey;

984 }

985 td.distance {

986 color: $darkgrey;

987 text-align: right;

988 font-size: x-small;

989 }

990 tr.turn {

991 cursor: pointer;

992 }

993 tr.turn:hover {

994 background: $list-highlight;

995 }

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

997 .routing_marker { width: 15px; position: absolute; cursor: move; }

998

999 /* Rules for entity history */

1000

1001 #sidebar_content {

1002 .browse_details {

1003 position: relative;

1004 border-bottom: $keyline;

1005 }

1006 }

1007

1008 .browse_status {

1009 display: none;

1010 }

1011

1012 /* Rules for the history sidebar */

1013

1014 #sidebar .changesets {

1015 li {

1016 cursor: pointer;

1017

1018 &.selected { background: $list-highlight; }

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

1020 }

1021

1022 .comments {

1023 float: right;

1024 color: $darkgrey;

1025 }

1026

1027 .comments-0 {

1028 opacity: 0.5;

1029 }

1030

1031 .changeset_more .loader {

1032 display: none;

1033 width: 100%;

1034 }

1035 }

1036

1037 /* Rules for the browse sidebar */

1038

1039 #sidebar_content {

1040 .browse-section {

1041 padding: $lineheight/2 $lineheight;

1042 border-bottom: 1px solid $grey;

1043

1044 h4:first-child {

1045 margin-top: 0;

1046 word-wrap: break-word;

1047 }

1048 }

1049

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

1051 border-bottom: none;

1052 }

1053

1054 .paginate {

1055 float: right;

1056 padding: 1px 6px;

1057 border: 1px solid $lightgrey;

1058 border-radius: 3px;

1059 }

1060

1061 .browse-field {

1062 margin-bottom: 10px;

1063

1064 h4 {

1065 padding: 5px 0 5px 10px;

1066 font-size: 12px;

1067 border: 1px solid $grey;

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

1069 background-color: $offwhite;

1070 }

1071

1072 p {

1073 padding: 7px 10px;

1074 font-size: 12px;

1075 background-color: #FFF;

1076 border: 1px solid $grey;

1077 border-top: 0;

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

1079 }

1080 }

1081

1082 .browse-tag-list {

1083 background-color: $offwhite;

1084 border: 1px solid $grey;

1085 border-radius: 3px;

1086 table-layout: fixed;

1087 border-collapse: separate;

1088

1089 th, td {

1090 border-bottom: 1px solid $grey;

1091 }

1092

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

1094 border-bottom: 0;

1095 }

1096

1097 .browse-tag-k,

1098 .browse-tag-v {

1099 width: 50%;

1100 padding: 6px 10px;

1101 word-wrap: break-word;

1102 white-space: pre-wrap;

1103 }

1104

1105 .browse-tag-k {

1106 font-weight: 500;

1107 background-color: $offwhite;

1108 }

1109

1110 .browse-tag-v {

1111 border-left: 1px solid $grey;

1112 background-color: #fff;

1113 }

1114

1115 .colour-preview-box {

1116 float: right;

1117 width: 14px;

1118 height: 14px;

1119 margin: 4px 0px;

1120 border: 1px solid rgba(0, 0, 0, .1);

1121 // add color via inline css on element: background-color: <tag value>;

1122 }

1123 }

1124

1125 .warning {

1126 margin: 0 0 $lineheight/2 0;

1127 padding: 0 $lineheight/2;

1128 }

1129

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

1131 margin: $lineheight/2 0;

1132

1133 p {

1134 margin: 10px 6px 0 6px;

1135 line-height: 1.5;

1136 }

1137 }

1138

1139 .comments-header {

1140 float: left;

1141 }

1142

1143 .subscribe-buttons {

1144 float: left;

1145 margin: 18px 10px 10px;

1146 min-width: 80px;

1147 }

1148

1149 .subscribe-buttons input {

1150 font-size: 90%;

1151 line-height: 15px;

1152 min-height: 20px;

1153 }

1154

1155 span.action-button:hover {

1156 cursor: pointer;

1157 text-decoration: underline;

1158 }

1159

1160 .note-description {

1161 overflow: hidden;

1162 margin: 0 0 10px 10px;

1163 }

1164

1165 .query-intro p {

1166 padding: $lineheight $lineheight $lineheight/2;

1167 }

1168

1169 .query-results {

1170 display: none;

1171 padding-bottom: $lineheight/2;

1172

1173 h3 {

1174 padding: 0 $lineheight;

1175 }

1176

1177 ul {

1178 li {

1179 &.query-result {

1180 cursor: pointer;

1181 }

1182

1183 &.selected {

1184 background: $list-highlight;

1185 }

1186 }

1187 }

1188 }

1189 }

1190

1191 /* Rules for export sidebar */

1192

1193 .export_form {

1194 padding: $lineheight;

1195

1196 .export_area_inputs,

1197 .export_button {

1198 text-align: center;

1199 }

1200

1201 .export_area_inputs {

1202 margin-bottom: $lineheight/2;

1203 input[type="text"] {

1204 width: 80px;

1205 text-align: center;

1206 margin-bottom: 5px;

1207 }

1208 }

1209

1210 .export_boxy {

1211 background: $lightgrey;

1212 border: 1px solid $grey;

1213 border-radius: 3px;

1214

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

1216 #minlon {

1217 float: left;

1218 /* no-r2 */ margin-left: -1px;

1219 }

1220 #maxlon {

1221 float: right;

1222 /* no-r2 */ margin-right: -1px;

1223 }

1224 #minlat { margin-bottom: 0; }

1225 }

1226

1227 .export_bound {

1228 margin: $lineheight/4;

1229 }

1230

1231 .export_button {

1232 margin-top: $lineheight;

1233 margin-bottom: $lineheight;

1234 }

1235

1236 dl {

1237 padding-left: $lineheight/2;

1238 dd {

1239 margin-left: 0;

1240 margin-bottom: 10px;

1241 }

1242 }

1243 }

1244

1245 /* Rules for the routing sidebar */

1246

1247 #sidebar_content {

1248 #routing_credit {

1249 text-align: center;

1250 padding: 0.5em;

1251 }

1252 }

1253

1254 /* Rules for edit pages */

1255

1256 .site-edit {

1257 #content {

1258 position: absolute;

1259 top: $headerHeight;

1260 bottom: 0;

1261 width: 100%;

1262 }

1263

1264 #map {

1265 height: 100%;

1266 overflow: hidden;

1267 }

1268 }

1269

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

1271

1272 .content-heading {

1273 background: $lightgrey;

1274 }

1275

1276 .content-body {

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

1278 margin-bottom: $lineheight;

1279 }

1280

1281 h1, h2, h3 {

1282 margin-top: $lineheight/2;

1283 }

1284 }

1285

1286 .content-inner {

1287 position: relative;

1288 max-width: 900px;

1289 margin: auto;

1290 padding: $lineheight;

1291 }

1292

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

1294

1295 .users-new,

1296 .users-create,

1297 .users-terms,

1298 .users-confirm {

1299 .content-heading .content-inner {

1300 height: 200px;

1301 }

1302 }

1303

1304 .header-illustration {

1305 background-position: 0 0;

1306 background-repeat: no-repeat;

1307 position: absolute;

1308 height: 200px;

1309 width: 100%;

1310 left: 0;

1311 bottom: 0;

1312

1313 &.new-user-main {

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

1315 }

1316

1317 &.confirm-main {

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

1319 }

1320

1321 &.new-user-terms {

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

1323 }

1324

1325 &.new-user-arm {

1326 height: 110px;

1327 width: 130px;

1328 left: 260px;

1329 top: 160px;

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

1331 z-index: 100;

1332 }

1333 }

1334

1335 [dir=rtl] .header-illustration {

1336 transform: scaleX(-1);

1337 }

1338

1339 #content.maximised {

1340 top: 0;

1341 left: 0;

1342 right: 0;

1343 bottom: 0;

1344 border: 0;

1345 z-index: 2000;

1346 }

1347

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

1349

1350 .content_map {

1351 position: relative;

1352 width: 45%;

1353 height: 400px;

1354 border: 1px solid $grey;

1355 margin-bottom: $lineheight;

1356 float: right;

1357 }

1358

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

1360

1361 #trace_list {

1362 border-width: 0px;

1363 text-align: right;

1364

1365 .trace_summary {

1366 font-size: 12px;

1367 color: gray;

1368 }

1369 }

1370

1371 /* Rules for the new trace form */

1372

1373 #new_trace {

1374 input[type=text] {

1375 width: 50%;

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

1377 max-width: 500px;

1378 }

1379 }

1380

1381 /* Rules for the edit trace form */

1382

1383 .edit_trace {

1384 .standard-form-row p {

1385 margin-bottom: 0px;

1386 }

1387

1388 input[type=text] {

1389 width: 50%;

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

1391 max-width: 500px;

1392 }

1393 }

1394

1395 /* Rules for the user profile page */

1396

1397 #userinformation {

1398

1399 min-height: 100px;

1400 .userinformation-inner {

1401 float: left;

1402 }

1403 h2 {

1404 margin-top: 0;

1405 }

1406 .user-description {

1407 width: 100%;

1408 clear: both;

1409 }

1410 .deemphasize {

1411 margin: 0;

1412 }

1413 }

1414

1415 .admin-user-info small {

1416 margin-bottom: $lineheight/2;

1417 display: inline;

1418 margin-right: $lineheight;

1419 }

1420

1421 .activity-block {

1422 clear: left;

1423 border-bottom: 1px solid $grey;

1424 padding-bottom: $lineheight;

1425 float: left;

1426 h3 {

1427 margin-bottom: $lineheight/2;

1428 }

1429 }

1430

1431 .contact-activity {

1432 margin-top: $lineheight;

1433 width: 100%;

1434 }

1435

1436 .activity-details p {

1437 margin-left: 70px;

1438 margin-bottom: 0;

1439 }

1440

1441 .users-show {

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

1443 .content-inner {

1444 max-width: none;

1445 }

1446 p#no_home_location {

1447 margin: $lineheight;

1448 }

1449 .user_thumbnail {

1450 margin-top: $lineheight/4;

1451 float: left;

1452 }

1453 }

1454

1455 /* Rules for the user map */

1456

1457 .content_map .leaflet-popup-content {

1458 margin: $lineheight/2;

1459 min-height: 50px;

1460 }

1461

1462 /* Rules for user popups on maps */

1463

1464 .user_popup {

1465 min-width: 200px;

1466 p {

1467 padding: 0 0 5px 0;

1468 margin-top: 0 0 0 60px;

1469 font-size: 12px;

1470 }

1471 img.user_thumbnail {

1472 float: left;

1473 margin: 0 $lineheight/2 0 0;

1474 }

1475 }

1476

1477 /* Rules for the user list */

1478

1479 #user_list {

1480 width: 100%;

1481

1482 tr {

1483 vertical-align: middle;

1484 }

1485

1486 p {

1487 margin-top: 0px;

1488 margin-bottom: 0px;

1489 }

1490 }

1491

1492 #user_list_actions {

1493 float: right;

1494 margin-top: $lineheight/2;

1495 }

1496

1497 /* Rules for the diary list page */

1498

1499 .diary_post {

1500 position: relative;

1501 padding-top: $lineheight;

1502 padding-bottom: $lineheight/2;

1503 border-top: 1px solid $grey;

1504

1505 &:first-of-type {

1506 margin-top: $lineheight/2;

1507 }

1508

1509 &.deemphasize {

1510 background-color: #fee;

1511 }

1512

1513 .post_heading {

1514 margin-bottom: $lineheight;

1515

1516 h2 {

1517 margin-top: 0;

1518 margin-bottom: $lineheight/2;

1519 }

1520 }

1521

1522 img.user_thumbnail {

1523 float: left;

1524 }

1525

1526 small.deemphasize {

1527 float: left;

1528 display: block;

1529 }

1530 }

1531

1532 .pagination {

1533 padding-top: $lineheight;

1534 }

1535

1536 /* Rules for the diary entry page */

1537

1538 .diary_entries {

1539 #map {

1540 position: relative;

1541 width: 90%;

1542 height: 400px;

1543 border: 1px solid $grey;

1544 display: none;

1545 margin-bottom: $lineheight;

1546 }

1547 #newcomment {

1548 border-top: 1px solid $grey;

1549 padding-top: $lineheight;

1550 margin-top: $lineheight/2;

1551 }

1552 .comments {

1553 max-width: 740px;

1554 }

1555 .diary-comment {

1556 border-top: 1px dashed $grey;

1557 padding-top: $lineheight/2;

1558 padding-bottom: $lineheight/2;

1559 &:first-child {

1560 margin-top: $lineheight/2;

1561 padding-top: $lineheight;

1562 border-top: 1px solid $grey;

1563 }

1564 &.deemphasize {

1565 background-color: #fee;

1566 }

1567 p {

1568 margin-bottom: $lineheight/2;

1569 }

1570 .comment-heading {

1571 margin-bottom: 0;

1572 margin-top: 0;

1573 }

1574 }

1575 }

1576

1577 .diary_entries-show img.user_thumbnail {

1578 float: left;

1579 }

1580

1581

1582 .diary-subscribe-buttons {

1583 position:relative;

1584 top: -30px;

1585 left: 130px;

1586 }

1587

1588 /* Rules for the log in page */

1589

1590 #login_auth_buttons {

1591 margin-bottom: 0;

1592 }

1593

1594 #login_auth_buttons li {

1595 float: left;

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

1597 }

1598

1599 /* Rules for the account confirmation page */

1600

1601 .users-terms {

1602 .legale {

1603 border: 1px solid $grey;

1604 padding: $lineheight;

1605 margin-bottom: $lineheight;

1606 overflow: auto;

1607 height: 20em;

1608

1609 li {

1610 list-style: inherit;

1611 }

1612

1613 ol ol {

1614 list-style-type: lower-alpha;

1615 }

1616 }

1617

1618 #decline {

1619 background: $lightblue;

1620 &:hover {

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

1622 }

1623 }

1624 }

1625

1626 /* Rules for the account settings page */

1627

1628 #accountForm .user_map {

1629 position: relative;

1630 width: 500px;

1631 height: 400px;

1632 border: 1px solid $grey;

1633 }

1634

1635 #accountForm .user_image {

1636 margin-bottom: 0;

1637 }

1638

1639 #accountForm #user_image {

1640 margin-left: 20px;

1641 }

1642

1643 #accountForm ul.accountImage-options {

1644 margin-left: 120px;

1645 }

1646

1647 .nohome .location {

1648 display: none;

1649 }

1650

1651 #homerow .message {

1652 display: none;

1653 }

1654

1655 .nohome .message {

1656 display: inline !important;

1657 }

1658

1659 .content_map.settings_map {

1660 width: 50%;

1661 float: none;

1662 }

1663

1664 /* Rules for the oauth settings page */

1665

1666 .oauth_clients .buttons .oauth-edit {

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

1668 }

1669

1670 .oauth_clients .buttons .oauth-delete {

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

1672 }

1673

1674 /* Rules for the oauth authorization page */

1675

1676 .oauth-authorize ul {

1677 list-style: none;

1678 }

1679

1680 /* Rules for messages pages */

1681

1682 .messages {

1683 width: 100%;

1684 border: 1px solid $grey;

1685

1686 input[type="submit"] {

1687 margin: auto;

1688 }

1689 tbody tr {

1690 border-top: 1px solid $grey;

1691 }

1692

1693 .inbox-row {

1694 background: $offwhite;

1695 }

1696

1697 .inbox-row-unread {

1698 background:#CBEEA7;

1699 }

1700

1701 .right {

1702 float: right;

1703 }

1704

1705 tr td,

1706 tr th {

1707 padding: $lineheight/4;

1708 }

1709 p:last-child,

1710 h2:last-child,

1711 h3:last-child,

1712 ol:last-child,

1713 ul:last-child {

1714 margin-bottom:0;

1715 }

1716 tr td {

1717 height: 30px;

1718 border-right: 1px solid $lightgrey;

1719 }

1720 }

1721

1722 .inbox-row .inbox-mark-read {

1723 display: none;

1724 }

1725

1726 .info-line {

1727 margin-bottom: $lineheight;

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

1729 border-bottom: 1px solid $grey;

1730

1731 form, form div {

1732 display: inline;

1733 }

1734 }

1735

1736 .info-line .user_thumbnail_tiny {

1737 vertical-align: middle;

1738 }

1739

1740 .inbox-sent {

1741 white-space: nowrap;

1742 }

1743

1744 .inbox-mark-unread,

1745 .inbox-mark-read,

1746 .inbox-delete {

1747 width: 1%;

1748 }

1749

1750 .inbox-row-unread .inbox-mark-unread {

1751 display: none;

1752 }

1753

1754 .messages-show .message-buttons {

1755 margin-top: $lineheight;

1756 margin-bottom: $lineheight * 1.5;

1757 padding-top: $lineheight;

1758 border-top: 1px solid $lightgrey;

1759 }

1760

1761 .messages-show .buttons .mark-unread-button {

1762 border-radius: 0;

1763 }

1764

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

1766

1767 .flash {

1768 padding: $lineheight;

1769

1770 &.error {

1771 background-color: #ff7070;

1772 }

1773

1774 &.warning {

1775 background-color: #ffe0cc;

1776 }

1777

1778 &.notice {

1779 background-color: #CBEEA7;

1780 }

1781

1782 div.message {

1783 display: inline-block;

1784 margin-left: $lineheight / 2;

1785 vertical-align: middle;

1786

1787 p {

1788 margin-top: $lineheight * 0.5;

1789 margin-bottom: $lineheight * 0.5;

1790

1791 &:first-child {

1792 margin-top: 0px;

1793 }

1794

1795 &:last-child {

1796 margin-bottom: 0px;

1797 }

1798 }

1799 }

1800 }

1801

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

1803

1804 .formError {

1805 display: inline-block;

1806 padding: 5px 10px;

1807 margin-top: 5px;

1808 border-radius: 4px;

1809 font-size: 12px;

1810 color: #fff;

1811 background-color: #ff7070;

1812 }

1813

1814 /* Rules for rails validation error boxes */

1815

1816 #errorExplanation {

1817 width: 400px;

1818 border: 2px solid #ff7070;

1819 padding: 0 $lineheight/2;

1820 margin-bottom: $lineheight;

1821 background-color: #f0f0f0;

1822

1823 h2 {

1824 margin: 0 -10px 10px -10px;

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

1826 font-weight: bold;

1827 font-size: 12px;

1828 background-color: #c00;

1829 color: #fff;

1830 text-align: left;

1831 }

1832

1833 p {

1834 color: #333;

1835 margin-bottom: 0px;

1836 padding: $lineheight/4;

1837 }

1838 }

1839

1840 /* Rules for forms */

1841

1842 .standard-form {

1843 fieldset {

1844 margin-bottom: $lineheight;

1845 }

1846 label.standard-label {

1847 display: block;

1848 margin-bottom: $lineheight/4;

1849 font-size: $typeheight;

1850 font-weight: bold;

1851 line-height: 1.5;

1852 }

1853 label.standard-label.secondary {

1854 display: inline-block;

1855 font-weight: normal;

1856 }

1857 .form-help {

1858 font-weight: normal;

1859 }

1860 .form-column {

1861 float: left;

1862 margin-right: 20px;

1863 }

1864 .form-divider {

1865 margin-top: $lineheight;

1866 padding-top: $lineheight;

1867 border-top: 1px solid $lightgrey;

1868 }

1869 .horizontal-list .standard-form-row {

1870 float: left;

1871 padding-right: 10px;

1872 }

1873 .standard-form-row {

1874 margin-bottom: $lineheight/2;

1875 }

1876 .form-list {

1877 margin-bottom: 0;

1878 }

1879 .form-list li {

1880 margin-bottom: 5px;

1881 list-style-type: none;

1882 }

1883 input[type="checkbox"],

1884 input[type="radio"] {

1885 float: left;

1886 margin-top: 5px;

1887 }

1888 }

1889

1890 #remember_me_openid {

1891 display: block;

1892 }

1893

1894 select {

1895 padding: 2px;

1896 }

1897

1898 input[type="checkbox"],

1899 input[type="radio"] {

1900 margin-right: 5px;

1901 }

1902

1903 input[type="text"],

1904 input[type="email"],

1905 input[type="url"],

1906 input[type="password"],

1907 textarea {

1908 color: #222;

1909 background-color: #fff;

1910 border: 1px solid $grey;

1911 border-radius: 3px;

1912 padding: 2px 5px;

1913 margin: 0;

1914 width: 200px;

1915

1916 &.field_with_errors {

1917 border: 2px solid #ff7070;

1918 }

1919 }

1920

1921 textarea {

1922 padding: 5px;

1923 width: 100%;

1924 min-height: 50px;

1925 resize: vertical;

1926 }

1927

1928 /* Rules for user images */

1929

1930 img.user_image {

1931 max-width: 100px;

1932 max-height: 100px;

1933 border: 1px solid $grey;

1934 margin-bottom: $lineheight;

1935 float: left;

1936 margin-right: $lineheight;

1937 }

1938

1939 img.user_thumbnail {

1940 max-width: 50px;

1941 max-height: 50px;

1942 border: 1px solid $grey;

1943 margin-right: $lineheight;

1944 }

1945

1946 img.user_thumbnail_tiny {

1947 width: auto;

1948 height: auto;

1949 max-width: 25px;

1950 max-height: 25px;

1951 border: 1px solid $grey;

1952 }

1953

1954 /* Rules for geo microformats */

1955

1956 abbr.geo {

1957 border-bottom: none;

1958 }

1959

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

1961

1962 ul.secondary-actions {

1963 font-style: normal;

1964 margin-bottom: 0;

1965 margin-left: 0;

1966 padding: 0;

1967 &.pager {

1968 display: inline-block;

1969 margin-right: 60px;

1970 }

1971 > li {

1972 display: block;

1973 float: left;

1974 list-style: none;

1975 border-left: 1px solid $grey;

1976 padding-left: $lineheight/2;

1977 margin-right: $lineheight/2;

1978 &:first-child {

1979 border-left: 0;

1980 padding-left: 0;

1981 }

1982 &:last-child {

1983 margin-right: 0px;

1984 }

1985 }

1986 }

1987

1988 div.secondary-actions {

1989 padding: 10px;

1990 text-align: center;

1991 }

1992

1993 /* Utility for managing inner content areas */

1994

1995 .inner22 { padding: $lineheight;}

1996

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

1998

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

2000

2001 .inner20 { padding: $lineheight 0;}

2002

2003 .inner02 { padding: 0 $lineheight;}

2004

2005 /* Utility for general button styles */

2006

2007 input[type="button"],

2008 input[type="submit"],

2009 input[type="reset"],

2010 a.button {

2011 cursor: pointer;

2012 border: 0;

2013 display: inline-block;

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

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

2016 min-width: 120px;

2017 margin: 0 0 $lineheight/2 0;

2018 color: white;

2019 background: $blue;

2020 text-align: center;

2021 border-radius: 2px;

2022 &:hover {

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

2024 text-decoration: none;

2025 }

2026 &.deemphasize {

2027 background: $lightblue;

2028 &:hover {

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

2030 }

2031 }

2032 &:disabled {

2033 background: $lightgrey;

2034 &:hover {

2035 background: $lightgrey;

2036 }

2037 }

2038 &:last-child {

2039 margin-bottom: 0;

2040 }

2041 }

2042

2043 input[type="button"],

2044 input[type="submit"],

2045 input[type="reset"] {

2046 line-height: normal;

2047 }

2048

2049 a.button {

2050 line-height: 20px;

2051 }

2052

2053 .buttons {

2054 min-width: 200px;

2055 input[type="submit"],

2056 input[type="button"],

2057 input[type="reset"],

2058 .button,

2059 .button_to {

2060 box-sizing: border-box;

2061 float: left;

2062 border-radius: 0;

2063 margin:0;

2064 min-width: 75px;

2065 max-width: 180px;

2066 border-right:1px solid white;

2067 text-overflow: ellipsis;

2068 white-space: nowrap;

2069 overflow: hidden;

2070 }

2071 input:first-child,

2072 .button:first-child,

2073 .button_to:first-child {

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

2075 }

2076 input:last-child,

2077 .button:last-child,

2078 .button_to:last-child {

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

2080 border-right-width: 0;

2081 }

2082 input:only-child,

2083 .button:only-child,

2084 .button_to:only-child,

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

2086 *[value="Hide"] + .button:last-child,

2087 *[value="Hide"] + .button_to:last-child {

2088 border-radius:2px;

2089 border-right-width: 0;

2090 }

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

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

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

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

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

2096 border-right-width: 0;

2097 }

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

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

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

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

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

2103 border-right-width: 1px;

2104 }

2105 }

2106

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

2108

2109 .table0,

2110 .item0 {

2111 background: $offwhite;

2112 }

2113

2114 .table1,

2115 .item1 {

2116 background: #fff;

2117 }

2118

2119 /* Rules for OpenID logo */

2120

2121 .openid_logo {

2122 vertical-align: text-bottom;

2123 border: 0;

2124 }

2125

2126 /* Rules for rich text */

2127

2128 .richtext,

2129 .prose {

2130 code {

2131 font-size: 13px;

2132 background: $lightgrey;

2133 padding: 2px 3px;

2134 }

2135

2136 pre {

2137 font-size: 13px;

2138 background: $lightgrey;

2139 padding: 2px 3px;

2140 white-space: pre-wrap;

2141

2142 code {

2143 padding: 0;

2144 }

2145 }

2146

2147 img {

2148 padding: $lineheight;

2149 background-color: $offwhite;

2150 display: block;

2151 max-width: 100%;

2152 margin: auto;

2153 }

2154

2155 blockquote {

2156 border-left: $lineheight solid $offwhite;

2157 padding-left: $lineheight;

2158 margin: 0;

2159 color: $darkgrey;

2160 }

2161 }

2162

2163 .diary_post .richtext {

2164 margin-top: $lineheight;

2165 }

2166

2167 .comments .richtext {

2168 margin-left: 70px;

2169 margin-top: 0;

2170 }

2171

2172 /* Rules for rich text editors */

2173

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

2175 width: 50%;

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

2177

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

2179 width: 100%;

2180 }

2181 }

2182

2183 .richtext_container {

2184 margin-bottom: $lineheight;

2185

2186 .richtext_content {

2187 width: 50%;

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

2189 display: inline-block;

2190 vertical-align: top;

2191

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

2193 width: 100%;

2194 }

2195

2196 .richtext_preview {

2197 display: inline-block;

2198 padding: $lineheight;

2199 background-color: $offwhite;

2200 overflow-x: auto;

2201

2202 &.loading {

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

2204 background-repeat: no-repeat;

2205 background-position: center;

2206 }

2207

2208 > :first-child {

2209 margin-top: 0px;

2210 }

2211 }

2212 }

2213

2214 .richtext_help {

2215 display: inline-block;

2216 vertical-align: top;

2217 margin-left: 15px;

2218 background-color: $offwhite;

2219 padding: $lineheight/2;

2220 width: 220px;

2221

2222 ul {

2223 margin-bottom: 0;

2224 }

2225

2226 h4.heading, li {

2227 border-bottom: 1px solid $grey;

2228 margin-bottom: $lineheight/4;

2229 padding-bottom: $lineheight/4;

2230 }

2231

2232 li h4, li span, li p {

2233 display: inline-block;

2234 vertical-align: top;

2235 font-size: 11px;

2236 }

2237

2238 li h4 {

2239 width: 40%;

2240 margin: 0;

2241 }

2242

2243 li span, li p {

2244 width: 50%;

2245 margin-left: $lineheight/2;

2246 margin-bottom: $lineheight/4;

2247 white-space: nowrap;

2248 }

2249 }

2250 }

2251

2252 /* Rules for the user notes list */

2253

2254 .note_list {

2255 tr.creator {

2256 background-color: $lightgrey;

2257 }

2258

2259 td {

2260 padding: 3px;

2261 }

2262

2263 p {

2264 margin-bottom: 0px;

2265 }

2266 }

2267

2268 /* Rules for the iD editor */

2269

2270 .id-embed {

2271 width: 100%;

2272 height: 100%;

2273 }

2274

2275 /* Rules for dropdown menus */

2276

2277 .dropdown {

2278 position: relative;

2279 }

2280

2281 .dropdown-toggle {

2282 *margin-bottom: -3px;

2283 }

2284

2285 .dropdown-toggle:active,

2286 .open .dropdown-toggle {

2287 outline: 0;

2288 }

2289

2290 .caret {

2291 display: inline-block;

2292 width: 0;

2293 height: 0;

2294 vertical-align: top;

2295 border-top: 4px solid #000000;

2296 border-right: 4px solid transparent;

2297 border-left: 4px solid transparent;

2298 content: "";

2299 }

2300

2301 .dropdown .caret {

2302 margin-top: 8px;

2303 margin-left: 2px;

2304 }

2305

2306 .dropdown-menu {

2307 position: absolute;

2308 top: 100%;

2309 left: -1px;

2310 z-index: 1000;

2311 display: none;

2312 float: left;

2313 min-width: 160px;

2314 padding: 5px 0;

2315 margin: 0;

2316 list-style: none;

2317 background-color: #ffffff;

2318 border: 1px solid $grey;

2319 border-radius: 0 3px 3px;

2320 *border-right-width: 2px;

2321 *border-bottom-width: 2px;

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

2323 background-clip: padding-box;

2324 }

2325

2326 .dropdown-menu.pull-right {

2327 right: 0;

2328 left: auto;

2329 }

2330

2331 .dropdown-menu .divider {

2332 *width: 100%;

2333 height: 1px;

2334 margin: 9px 1px;

2335 *margin: -5px 0 5px;

2336 overflow: hidden;

2337 background-color: $lightgrey;

2338 border-bottom: 1px solid #ffffff;

2339 }

2340

2341 .dropdown-menu > li > a {

2342 display: block;

2343 padding: 3px 10px;

2344 clear: both;

2345 font-weight: normal;

2346 line-height: 20px;

2347 color: #333333;

2348 white-space: nowrap;

2349 }

2350

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

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

2353 .dropdown-submenu:hover > a,

2354 .dropdown-submenu:focus > a {

2355 color: #ffffff;

2356 text-decoration: none;

2357 background-color: $green;

2358 }

2359

2360 .dropdown-menu > .active > a,

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

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

2363 color: #ffffff;

2364 text-decoration: none;

2365 background-color: $green;

2366 outline: 0;

2367 }

2368

2369 .dropdown-menu > .disabled > a,

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

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

2372 color: $darkgrey;

2373 }

2374

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

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

2377 text-decoration: none;

2378 cursor: default;

2379 background-color: transparent;

2380 background-image: none;

2381 }

2382

2383 .open {

2384 *z-index: 1000;

2385 }

2386

2387 .open > .dropdown-menu {

2388 display: block;

2389 }

2390

2391 .dropdown-backdrop {

2392 position: fixed;

2393 top: 0;

2394 right: 0;

2395 bottom: 0;

2396 left: 0;

2397 z-index: 990;

2398 }

2399

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

2401 .site-welcome, .site-fixthemap {

2402 .center {

2403 text-align: center;

2404 .sprite {

2405 float: none;

2406 margin: auto;

2407 }

2408 }

2409

2410 .sprite {

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

2412 background-size: 500px 250px;

2413 display: block;

2414 float: left;

2415 }

2416

2417 .icon-list {

2418 padding-bottom: 20px;

2419 div {

2420 margin-bottom: 10px;

2421 p {

2422 padding-top: 10px;

2423 }

2424 }

2425 }

2426 .sprite.small {

2427 width: 50px;

2428 height: 50px;

2429 }

2430

2431 .sprite.x {

2432 /* no-r2 */ background-position: -50px 0;

2433 }

2434

2435 .sprite.term {

2436 margin-right: 10px;

2437 vertical-align: middle;

2438 }

2439

2440 .sprite.node {

2441 /* no-r2 */ background-position: -100px 0;

2442 }

2443

2444 .sprite.way {

2445 /* no-r2 */ background-position: -150px 0;

2446 }

2447

2448 .sprite.tag {

2449 /* no-r2 */ background-position: -200px 0;

2450 }

2451

2452 .sprite.editor {

2453 /* no-r2 */ background-position: -250px 0;

2454 }

2455

2456 .sprite.question {

2457 /* no-r2 */ background-position: -300px 0;

2458 }

2459

2460 .sprite.rules {

2461 /* no-r2 */ background-position: -350px 0;

2462 }

2463

2464 .start-mapping {

2465 margin: auto;

2466 cursor: pointer;

2467 border: none;

2468 padding: 20px 40px;

2469 font-size: 30px;

2470 text-decoration: none;

2471 }

2472

2473 .icon.note {

2474 background-color: #333;

2475 border-radius: 4px;

2476 }

2477 }

2478

2479 .site-about #content {

2480 background-color: $lightgrey;

2481 background-position: 50% 50%;

2482 background-repeat: no-repeat;

2483 background-size: cover;

2484 background-attachment: fixed;

2485

2486

2487 .content-inner {

2488 position: relative;

2489 color: #333;

2490 min-width: 320px;

2491 max-width: 640px;

2492 }

2493

2494 .text {

2495 background: white;

2496 padding: 40px;

2497 }

2498

2499 .attr {

2500 position: relative;

2501 padding: 170px 40px 20px;

2502 background: #333;

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

2504 margin-bottom: 0;

2505 margin-top: -20px;

2506

2507 h1 {

2508 display: block;

2509 color: white;

2510 font-weight: 300;

2511 font-size: 34px;

2512 span {

2513 color: $vibrant-green;

2514 }

2515 }

2516

2517 .user-image {

2518 position: absolute;

2519 top: 0px;

2520 right: 240px;

2521 left: 0px;

2522 height: 150px;

2523 background-position: 0 50%;

2524 background-repeat: no-repeat;

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

2526 background-size: cover;

2527 background-color: $vibrant-green;

2528 }

2529

2530 .byosm {

2531 position: absolute;

2532 top: 0px;

2533 right: 0px;

2534 z-index: 1;

2535 width: 240px;

2536 height: 150px;

2537 padding: 20px 20px 20px 40px;

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

2539 white-space: nowrap;

2540 color: #fff;

2541 background: $vibrant-green;

2542 }

2543

2544 .byosm span {

2545 display: inline-block;

2546 width: 20px;

2547 margin-left: -20px;

2548 }

2549 }

2550

2551 .icon {

2552 width: 30px;

2553 height: 30px;

2554 margin-right: 10px;

2555 vertical-align: middle;

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

2557

2558 &.local {

2559 /* no-r2 */

2560 background-position: 0px 0px;

2561 }

2562 &.community {

2563 /* no-r2 */

2564 background-position: 0px -40px;

2565 }

2566 &.open {

2567 /* no-r2 */

2568 background-position: 0px -80px;

2569 }

2570 &.partners {

2571 /* no-r2 */

2572 background-position: 0px -120px;

2573 }

2574 &.infringement {

2575 /* no-r2 */

2576 background-position: 0px -160px;

2577 }

2578 &.legal {

2579 /* no-r2 */

2580 background-position: -45px -160px;

2581 }

2582 }

2583 }

2584

2585 @import 'browse';

2586

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

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

2589 display: none;

2590 }

2591 }

2592

2593 .read-reports {

2594 background: $lightgrey;

2595 opacity: 0.7;

2596 }

2597

2598 .issues-list {

2599 td:nth-child(2) {

2600 white-space: nowrap;

2601 }

2602 }