git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.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 Leaflet maps */

470

471 .leaflet-control .control-button {

472 display: block;

473 height: 40px;

474 width: 40px;

475 background-color: #333;

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

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

478 margin-bottom: 10px;

479 outline: none;

480

481 &:hover {

482 background-color: black;

483 }

484

485 &.disabled {

486 background-color: #333;

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

488 cursor: default;

489 }

490

491 &.active {

492 background-color: #9ed485;

493 }

494

495 .icon {

496 margin: 10px;

497 }

498 }

499

500 .leaflet-control .zoomin,

501 .control-layers .control-button {

502 margin-bottom: 0px;

503 border-radius: 4px 0 0 0;

504 }

505

506 .leaflet-control .zoomout,

507 .control-key .control-button {

508 margin-bottom: 0;

509 border-radius: 0;

510 }

511

512 .control-locate .control-button,

513 .control-share .control-button {

514 border-radius: 0 0 0 4px;

515 }

516

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

518

519 .map-layout {

520 #content {

521 overflow: hidden;

522 position: absolute;

523 top: $headerHeight;

524 bottom: 0;

525 width: 100%;

526 }

527

528 #sidebar, #map {

529 position: relative;

530 height: 100%;

531 overflow-x: hidden;

532 overflow-y: auto;

533 }

534

535 #sidebar {

536 float: left;

537 width: $sidebarWidth;

538 background: #fff;

539 font-size: 12px;

540

541 h2 {

542 padding: $lineheight $lineheight $lineheight/2;

543 }

544

545 h3, h4 {

546 margin-top: $lineheight;

547 margin-bottom: $lineheight/2;

548 font-size: 13px;

549 }

550

551 .icon.close {

552 float: right;

553 cursor: pointer;

554 }

555

556 p.error {

557 background-color: #ff7070;

558 padding: 10px;

559 font-weight: bold;

560 }

561 }

562

563 .welcome {

564 display: none;

565 }

566

567 .overlay-sidebar #sidebar {

568 position: absolute;

569 z-index: 1000;

570 height: auto;

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

572 overflow: hidden;

573 .welcome {

574 display: block;

575 }

576 #sidebar_content {

577 display: none;

578 }

579 }

580

581 .welcome {

582 p {

583 padding: $lineheight/2 $lineheight $lineheight;

584 font-size: 110%;

585 font-weight: 300;

586 }

587

588 .button {

589 width: 50%;

590 float: left;

591 margin: 0;

592 border-radius: 0;

593 font-weight: normal;

594 padding: .6em;

595

596 &.learn-more {

597 border-right: 1px solid #fff;

598 }

599 }

600 }

601

602 #map {

603 height: 100%;

604 overflow: hidden;

605

606 &.query-active {

607 cursor: help;

608 }

609

610 &.query-disabled {

611 cursor: not-allowed;

612 }

613

614 .leaflet-marker-draggable {

615 cursor: move;

616 }

617 }

618

619 #map-ui {

620 display: none;

621 position: relative;

622 float: right;

623 width: 250px;

624 height: 100%;

625 background: white;

626 overflow: auto;

627

628 .section {

629 border-bottom: 1px solid #DDD;

630 padding: 10px 20px;

631 }

632

633 a.close-button {

634 float: right;

635 padding:5px;

636 font-size:20px;

637 line-height:10px;

638 color:#222;

639 border:1px solid #ddd;

640 }

641

642 .tooltip {

643 opacity: 1;

644 border: 1px solid #ccc;

645 .tooltip-arrow {

646 border-top-color: #ccc;

647 }

648 }

649 }

650 }

651

652 .layers-ui,

653 .share-ui {

654 li:last-child {

655 margin-bottom: 0;

656 }

657 }

658

659 .layers-ui {

660 .base-layers {

661 .leaflet-container {

662 width: 100%;

663 height: 50px;

664 cursor: pointer;

665 }

666

667 li {

668 overflow: hidden;

669 border-radius: 3px;

670 border: 2px solid #fff;

671 margin-bottom: 8px;

672 position: relative;

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

674

675 label {

676 position: absolute;

677 top: 0;

678 left: 0;

679 padding: 2px 6px;

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

681 cursor: pointer;

682 font-weight: 600;

683 font-size: 16px;

684 text-stroke: 2px #fff;

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

686 z-index: 2; // For IE9

687 input[type="radio"] {

688 display: none;

689 }

690 }

691

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

693 &:hover {

694 border-color: $grey;

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

696 }

697 }

698 }

699

700 .overlay-layers {

701 p {

702 font-size: 13px;

703 margin-bottom: 8px;

704 }

705 li.disabled { color: #999; }

706 }

707 }

708

709 .share-ui {

710 .share-tabs {

711 margin-bottom: 10px;

712

713 a {

714 color: #fff;

715 text-decoration: none;

716 background-color: $lightblue;

717 padding: 5px 10px;

718 }

719

720 a:first-child {

721 border-right: 1px solid #fff;

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

723 }

724

725 a:last-child {

726 border-left: 1px solid #fff;

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

728 }

729

730 a.active {

731 background-color: $blue;

732 }

733 }

734

735 .share-tab {

736 display: none;

737 }

738

739 .share-link {

740 input[type=text],

741 textarea {

742 width: 100%;

743 font-family: monospace;

744 font-size: small;

745 line-height: 1.3;

746 }

747 }

748

749 .share-image {

750 label {

751 margin-right: 10px;

752 }

753 }

754

755 #embed_html {

756 resize: vertical;

757 }

758

759 #mapnik_scale {

760 width: 100px;

761 }

762 }

763

764 .leaflet-top {

765 top: $lineheight/2 !important;

766 .leaflet-control {

767 margin-right: 0px !important;

768 margin-top: 0px !important;

769 }

770 }

771

772 .leaflet-popup-scrolled {

773 padding-right: $lineheight;

774 border-bottom: 0px !important;

775 border-top: 0px !important;

776 }

777

778 .leaflet-popup-content-wrapper {

779 border-radius: 4px !important;

780 }

781

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

783

784 #attribution {

785 display: none;

786

787 table {

788 width: 100%

789 }

790 }

791

792 .attribution_license,

793 .attribution_project {

794 text-align: left;

795 }

796

797 .attribution_notice {

798 text-align: center;

799 }

800

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

802

803 /* Rules for the sidebar */

804

805 .sidebar_heading {

806 position: relative;

807 padding: $lineheight/2 $lineheight;

808 // background: $offwhite;

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

810 > .close {

811 float: right;

812 margin-top: 2px;

813 cursor: pointer;

814 }

815 }

816

817 #browse_status {

818 p {

819 padding: $lineheight;

820 }

821

822 input {

823 display: block;

824 margin-left: auto;

825 margin-right: auto;

826 }

827 }

828

829 #sidebar {

830 #sidebar_loader,

831 .loader,

832 .load_more {

833 text-align: center;

834 margin: $lineheight auto;

835 width: 40px;

836 display: block;

837 }

838 }

839

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

841

842 header .search_forms,

843 .directions_form {

844 display: none;

845 }

846

847 .search_form,

848 .directions_form {

849 position: relative;

850 padding: $lineheight/2;

851 background-color: $lightgrey;

852

853 .query_wrapper {

854 position: relative;

855 overflow: hidden;

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

857 }

858

859 input[type=text] {

860 width: 100%;

861 height: 30px;

862 transition: 300ms linear;

863 }

864

865 input[type=text].overflow {

866 border-right: none;

867 }

868

869 input:focus {

870 outline: none;

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

872 }

873

874 input[type=submit].float {

875 float: right;

876 width: auto;

877 min-width: 0;

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

879 }

880

881 select {

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

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

884 padding: 0.3em 0;

885 }

886

887 .query_options {

888 text-align: right;

889 font-size: 10px;

890 color: $blue;

891 }

892

893 .describe_location {

894 position: absolute;

895 top: 6px;

896 right: 6px;

897 font-size: 10px;

898 color: $blue;

899 }

900

901 .switch_link {

902 float: right;

903 width: auto;

904 min-width: 0;

905 margin-left: 6px;

906 }

907

908 img.button {

909 display: block;

910 }

911

912 span.force_width {

913 width: 100%;

914 padding-right: 25px;

915 display: block;

916 }

917

918 select.routing_engines {

919 min-height: 30px;

920 margin: 0px 0px 5px 25px;

921 }

922

923 input.routing_go {

924 min-width: 100px;

925 float: right;

926 }

927

928 div.header {

929 width: 100%;

930 height: 30px;

931 }

932

933 div.line {

934 width: 100%;

935 margin: 0px 0px 5px 0px;

936 }

937

938 div.loader_copy {

939 display: none;

940

941 img {

942 vertical-align: middle;

943 }

944 }

945 }

946

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

948

949 #mapkey {

950 .mapkey-table-key img {

951 display: block;

952 margin-left: auto;

953 margin-right: auto;

954 }

955 td {

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

957 }

958 }

959

960 /* Rules for search sidebar */

961

962 .search_results_entry {

963 ul li {

964 border-bottom: $keyline;

965 cursor: pointer;

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

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

968 }

969

970 .search_details {

971 display: block;

972 float: right;

973 text-align: right;

974 margin-top: 0.2em;

975 margin-left: 0.5em;

976 }

977 }

978

979 .search_results_error {

980 color: #f00;

981 }

982

983 /* Rules for routing */

984

985 #sidebar_content>table {

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

987 width: 100%;

988 border-collapse: separate;

989 }

990

991 div.direction {

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

993 width: 20px;

994 height: 20px;

995 background-repeat: no-repeat;

996 }

997 @for $i from 1 through 17 {

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

999 }

1000

1001 p#routing_summary {

1002 padding: 0 $lineheight $lineheight/4;

1003 }

1004

1005 td.instruction, td.distance {

1006 padding-top: $lineheight/5;

1007 padding-bottom: $lineheight/5;

1008 border-bottom: 1px solid #DDD;

1009 }

1010 td.distance {

1011 color: #BBB;

1012 text-align: right;

1013 font-size: x-small;

1014 }

1015 tr.turn {

1016 cursor: pointer;

1017 }

1018 tr.turn:hover {

1019 background: $list-highlight;

1020 }

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

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

1023

1024 /* Rules for entity history */

1025

1026 #sidebar_content {

1027 .browse_details {

1028 position: relative;

1029 border-bottom: $keyline;

1030 }

1031 }

1032

1033 .browse_status {

1034 display: none;

1035 }

1036

1037 /* Rules for the history sidebar */

1038

1039 #sidebar .changesets {

1040 li {

1041 padding: 15px 20px;

1042 border-bottom: 1px solid #ddd;

1043 cursor: pointer;

1044

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

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

1047 }

1048

1049 h4 {

1050 margin: 0;

1051 a {

1052 color: #000;

1053 }

1054 }

1055 }

1056

1057 /* Rules for the browse sidebar */

1058

1059 #sidebar_content {

1060 .browse-section {

1061 padding: $lineheight/2 $lineheight;

1062 border-bottom: 1px solid #ddd;

1063

1064 h4:first-child {

1065 margin-top: 0;

1066 word-wrap: break-word;

1067 }

1068 }

1069

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

1071 border-bottom: none;

1072 }

1073

1074 .paginate {

1075 float: right;

1076 padding: 1px 6px;

1077 border: 1px solid #eee;

1078 border-radius: 3px;

1079 }

1080

1081 .paginate ul {

1082 padding-left: 20px;

1083 }

1084

1085 .browse-field {

1086 margin-bottom: 10px;

1087

1088 h4 {

1089 padding: 5px 0 5px 10px;

1090 font-size: 12px;

1091 border: 1px solid #CCC;

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

1093 background-color: #F6F6F6;

1094 }

1095

1096 p {

1097 padding: 7px 10px;

1098 font-size: 12px;

1099 background-color: #FFF;

1100 border: 1px solid #CCC;

1101 border-top: 0;

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

1103 }

1104 }

1105

1106 .browse-tag-list {

1107 background-color: #F6F6F6;

1108 border: 1px solid #ddd;

1109 border-radius: 3px;

1110 font-size: 12px;

1111 table-layout: fixed;

1112 border-collapse: separate;

1113

1114 th, td {

1115 border-bottom: 1px solid #ddd;

1116 }

1117

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

1119 border-bottom: 0;

1120 }

1121

1122 .browse-tag-k,

1123 .browse-tag-v {

1124 width: 50%;

1125 padding: 6px 10px;

1126 word-wrap: break-word;

1127 }

1128

1129 .browse-tag-k {

1130 font-weight: 500;

1131 background-color: #F6F6F6;

1132 }

1133

1134 .browse-tag-v {

1135 border-left: 1px solid #ddd;

1136 background-color: #fff;

1137 }

1138 }

1139

1140 .warning {

1141 margin: $lineheight/2 0;

1142 padding: $lineheight/2;

1143 font-size: 90%;

1144 }

1145

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

1147 margin: $lineheight/2 0;

1148

1149 p {

1150 margin-left: 10px;

1151 }

1152 }

1153

1154 .comments-header {

1155 float: left;

1156 }

1157

1158 .subscribe-buttons {

1159 float: left;

1160 margin: 18px 10px 10px;

1161 min-width: 80px;

1162 }

1163

1164 .subscribe-buttons input {

1165 font-size: 90%;

1166 line-height: 15px;

1167 min-height: 20px;

1168 }

1169

1170 span.action-button:hover {

1171 cursor: pointer;

1172 text-decoration: underline;

1173 }

1174

1175 .note-description {

1176 overflow: hidden;

1177 margin: 0 0 10px 10px;

1178 }

1179

1180 .query-intro p {

1181 padding: $lineheight $lineheight $lineheight/2;

1182 }

1183

1184 .query-results {

1185 display: none;

1186

1187 h3 {

1188 padding: $lineheight $lineheight $lineheight/2;

1189 margin: 0;

1190 }

1191

1192 ul {

1193 li {

1194 padding: 15px 20px;

1195 border-bottom: 1px solid #ddd;

1196

1197 &.query-result {

1198 cursor: pointer;

1199 }

1200

1201 &.selected {

1202 background: $list-highlight;

1203 }

1204 }

1205 }

1206 }

1207 }

1208

1209 /* Rules for export sidebar */

1210

1211 .export_form {

1212 padding: $lineheight;

1213

1214 .export_area_inputs,

1215 .export_button {

1216 text-align: center;

1217 }

1218

1219 .export_area_inputs {

1220 margin-bottom: $lineheight/2;

1221 input[type="text"] {

1222 width: 80px;

1223 text-align: center;

1224 margin-bottom: 5px;

1225 }

1226 }

1227

1228 .export_boxy {

1229 background: #eee;

1230 border: 1px solid #ccc;

1231 border-radius: 3px;

1232

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

1234 #minlon {

1235 float: left;

1236 margin-left: -1px;

1237 }

1238 #maxlon {

1239 float: right;

1240 margin-right: -1px;

1241 }

1242 #minlat { margin-bottom: 0; }

1243 }

1244

1245 .export_bound {

1246 margin: $lineheight/4;

1247 }

1248

1249 .export_button {

1250 margin-top: $lineheight;

1251 margin-bottom: $lineheight;

1252 }

1253

1254 dl {

1255 padding-left: $lineheight/2;

1256 dd {

1257 margin-left: 0;

1258 margin-bottom: 10px;

1259 }

1260 }

1261 }

1262

1263 /* Rules for the routing sidebar */

1264

1265 #sidebar_content {

1266 #routing_credit {

1267 text-align: center;

1268 padding: 0.5em;

1269 }

1270 }

1271

1272 /* Rules for edit pages */

1273

1274 .site-edit {

1275 #content {

1276 position: absolute;

1277 top: $headerHeight;

1278 bottom: 0;

1279 width: 100%;

1280 }

1281

1282 #map {

1283 height: 100%;

1284 overflow: hidden;

1285 }

1286 }

1287

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

1289

1290 .content-heading {

1291 background: $lightgrey;

1292

1293 h1 { font-size: 22px; }

1294 }

1295

1296 .content-body {

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

1298 margin-bottom: $lineheight;

1299 }

1300

1301 h1, h2, h3 {

1302 margin-top: $lineheight/2;

1303 }

1304 }

1305

1306 .content-inner {

1307 position: relative;

1308 max-width: 900px;

1309 margin: auto;

1310 padding: $lineheight;

1311 }

1312

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

1314

1315 .user-new,

1316 .user-create,

1317 .user-terms {

1318 .content-body .content-inner {

1319 padding: 0;

1320 }

1321 }

1322

1323 .user-new,

1324 .user-create,

1325 .user-terms,

1326 .user-confirm {

1327 .content-heading .content-inner {

1328 height: 200px;

1329 }

1330 }

1331

1332 .header-illustration {

1333 background-position: 0 0;

1334 background-repeat: no-repeat;

1335 position: absolute;

1336 height: 200px;

1337 width: 100%;

1338 left: 0;

1339 bottom: 0;

1340

1341 &.new-user-main {

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

1343 }

1344

1345 &.confirm-main {

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

1347 }

1348

1349 &.new-user-terms {

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

1351 }

1352

1353 &.new-user-arm {

1354 height: 110px;

1355 width: 130px;

1356 left: 260px;

1357 top: 160px;

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

1359 z-index: 100;

1360 }

1361 }

1362

1363 #content.maximised {

1364 top: 0;

1365 left: 0;

1366 right: 0;

1367 bottom: 0;

1368 border: 0;

1369 z-index: 2000;

1370 }

1371

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

1373

1374 .content_map {

1375 position: relative;

1376 width: 45%;

1377 height: 400px;

1378 border: 1px solid #ccc;

1379 margin-bottom: $lineheight;

1380 float: right;

1381 }

1382

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

1384

1385 #trace_list {

1386 font-size: $lineheight/2;

1387 border-width: 0px;

1388 text-align: right;

1389

1390 .trace_summary {

1391 font-size: 12px;

1392 color: gray;

1393 }

1394

1395 .trace_pending {

1396 color: red;

1397 }

1398

1399 .trace_public {

1400 color: green;

1401 }

1402

1403 .trace_identifiable {

1404 color: green;

1405 }

1406

1407 .trace_trackable {

1408 color: red;

1409 }

1410

1411 .trace_private {

1412 color: red;

1413 }

1414 }

1415

1416 /* Rules for the new trace form */

1417

1418 #new_trace {

1419 input[type=text] {

1420 width: 50%;

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

1422 max-width: 500px;

1423 }

1424 }

1425

1426 /* Rules for the edit trace form */

1427

1428 .edit_trace {

1429 .form-row p {

1430 margin-bottom: 0px;

1431 }

1432

1433 input[type=text] {

1434 width: 50%;

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

1436 max-width: 500px;

1437 }

1438 }

1439

1440 /* Rules for the user profile page */

1441

1442 #userinformation {

1443

1444 min-height: 100px;

1445 .userinformation-inner {

1446 float: left;

1447 }

1448 h2 {

1449 margin-top: 0;

1450 }

1451 .user-description {

1452 width: 100%;

1453 clear: both;

1454 }

1455 .deemphasize {

1456 margin: 0;

1457 }

1458 }

1459

1460 .admin-user-info small {

1461 margin-bottom: $lineheight/2;

1462 display: inline;

1463 margin-right: $lineheight;

1464 }

1465

1466 .activity-block {

1467 clear: left;

1468 border-bottom: 1px solid #ccc;

1469 padding-bottom: $lineheight;

1470 float: left;

1471 h3 {

1472 margin-bottom: $lineheight/2;

1473 }

1474 }

1475

1476 .contact-activity {

1477 margin-top: $lineheight;

1478 width: 100%;

1479 }

1480

1481 .activity-details p {

1482 margin-left: 70px;

1483 margin-bottom: 0;

1484 }

1485

1486 #friends-container .contact-activity ul {

1487 margin-left: 70px;

1488 }

1489

1490 .user-view {

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

1492 .content-inner {

1493 max-width: none;

1494 }

1495 p#no_home_location {

1496 margin: $lineheight;

1497 }

1498 .user_thumbnail {

1499 margin-top: $lineheight/4;

1500 float: left;

1501 }

1502 }

1503

1504 /* Rules for the user map */

1505

1506 .content_map .leaflet-popup-content {

1507 margin: $lineheight/2;

1508 min-height: 50px;

1509 }

1510

1511 /* Rules for user popups on maps */

1512

1513 .user_popup {

1514 min-width: 200px;

1515 p {

1516 padding: 0 0 5px 0;

1517 margin-top: 0 0 0 60px;

1518 font-size: 12px;

1519 }

1520 img.user_thumbnail {

1521 float: left;

1522 margin: 0 $lineheight/2 0 0;

1523 }

1524 }

1525

1526 /* Rules for the user list */

1527

1528 #user_list {

1529 font-size: $lineheight/2;

1530 width: 100%;

1531

1532 tr {

1533 vertical-align: middle;

1534 }

1535

1536 p {

1537 margin-top: 0px;

1538 margin-bottom: 0px;

1539 }

1540 }

1541

1542 #user_list_actions {

1543 float: right;

1544 margin-top: $lineheight/2;

1545 }

1546

1547 /* Rules for the diary list page */

1548

1549 .diary_post {

1550 position: relative;

1551 margin-top: $lineheight/2;

1552 padding-top: $lineheight;

1553 border-top: 1px solid #ccc;

1554

1555 .post_heading {

1556 margin-bottom: $lineheight;

1557

1558 h2 {

1559 margin-top: 0;

1560 margin-bottom: $lineheight/2;

1561 font-size: 24px;

1562 }

1563 }

1564

1565 img.user_thumbnail {

1566 float: left;

1567 }

1568

1569 small.deemphasize {

1570 float: left;

1571 display: block;

1572 }

1573

1574 ul.secondary-actions {

1575 display: inline-block;

1576 }

1577 }

1578

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

1580 display: inline;

1581 }

1582

1583 /* Rules for the diary entry page */

1584

1585 .diary_entry {

1586 #map {

1587 position: relative;

1588 width: 90%;

1589 height: 400px;

1590 border: 1px solid #ccc;

1591 display: none;

1592 margin-bottom: $lineheight;

1593 }

1594 #newcomment {

1595 border-top: 1px solid #ccc;

1596 padding-top: $lineheight;

1597 margin-top: $lineheight/2;

1598 }

1599 .comments {

1600 max-width: 740px;

1601 }

1602 .diary-comment {

1603 margin-top: $lineheight/2;

1604 border-top: 1px dashed #ccc;

1605 padding-top: $lineheight/2;

1606 &:first-child {

1607 margin-top: $lineheight;

1608 padding-top: $lineheight;

1609 border-top: 1px solid #ccc;

1610 }

1611 p {

1612 margin-bottom: $lineheight/2;

1613 }

1614 .comment-heading {

1615 margin-bottom: 0;

1616 margin-top: 0;

1617 }

1618 }

1619 }

1620

1621 .diary_entry-view img.user_thumbnail {

1622 float: left;

1623 }

1624

1625 /* Rules for the log in page */

1626

1627 #login_auth_buttons {

1628 margin-bottom: 0;

1629 }

1630

1631 #login_auth_buttons li {

1632 float: left;

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

1634 }

1635

1636 /* Rules for the account confirmation page */

1637

1638 .user-terms {

1639 .legale {

1640 border: 1px solid #ccc;

1641 padding: $lineheight;

1642 margin-bottom: $lineheight;

1643 overflow: auto;

1644 height: 20em;

1645 }

1646

1647 #decline {

1648 background: $lightblue;

1649 &:hover {

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

1651 }

1652 }

1653 }

1654

1655 /* Rules for the account settings page */

1656

1657 #accountForm .user_map {

1658 position: relative;

1659 width: 500px;

1660 height: 400px;

1661 border: 1px solid #ccc;

1662 }

1663

1664 #accountForm .user_image {

1665 margin-bottom: 0;

1666 }

1667

1668 #accountForm #user_image {

1669 margin-left: 20px;

1670 }

1671

1672 #accountForm ul.accountImage-options {

1673 margin-left: 120px;

1674 }

1675

1676 .nohome .location {

1677 display: none;

1678 }

1679

1680 #homerow .message {

1681 display: none;

1682 }

1683

1684 .nohome .message {

1685 display: inline !important;

1686 }

1687

1688 .content_map.settings_map {

1689 width: 50%;

1690 float: none;

1691 }

1692

1693 /* Rules for the oauth settings page */

1694

1695 .oauth_clients .buttons .oauth-edit {

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

1697 }

1698

1699 .oauth_clients .buttons .oauth-delete {

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

1701 }

1702

1703 /* Rules for messages pages */

1704

1705 .messages {

1706 width: 100%;

1707 border: 1px solid #ddd;

1708

1709 input[type="submit"] {

1710 margin: auto;

1711 }

1712 tbody tr {

1713 border-top: 1px solid #ccc;

1714 }

1715

1716 .inbox-row {

1717 background: #f8f8ff;

1718 }

1719

1720 .inbox-row-unread {

1721 background:#CBEEA7;

1722 }

1723

1724 .right {

1725 float: right;

1726 }

1727

1728 tr td,

1729 tr th {

1730 padding: $lineheight/4;

1731 }

1732 p:last-child,

1733 h2:last-child,

1734 h3:last-child,

1735 ol:last-child,

1736 ul:last-child {

1737 margin-bottom:0;

1738 }

1739 tr td {

1740 height: 30px;

1741 border-right: 1px solid $lightgrey;

1742 }

1743 }

1744

1745 .inbox-row .inbox-mark-read {

1746 display: none;

1747 }

1748

1749 .info-line {

1750 margin-bottom: $lineheight;

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

1752 border-bottom: 1px solid #ccc;

1753

1754 form, form div {

1755 display: inline;

1756 }

1757 }

1758

1759 .info-line .user_thumbnail_tiny {

1760 vertical-align: middle;

1761 }

1762

1763 .inbox-sent {

1764 white-space: nowrap;

1765 }

1766

1767 .inbox-mark-unread,

1768 .inbox-mark-read,

1769 .inbox-delete {

1770 width: 1%;

1771 }

1772

1773 .inbox-row-unread .inbox-mark-unread {

1774 display: none;

1775 }

1776

1777 .message-read .message-buttons {

1778 margin-top: $lineheight;

1779 margin-bottom: $lineheight * 1.5;

1780 padding-top: $lineheight;

1781 border-top: 1px solid $lightgrey;

1782 }

1783

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

1785 border-radius: 0;

1786 }

1787

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

1789

1790 .flash {

1791 padding: $lineheight;

1792

1793 &.error {

1794 background-color: #ff7070;

1795 }

1796

1797 &.warning {

1798 background-color: #ffe0cc;

1799 }

1800

1801 &.notice {

1802 background-color: #CBEEA7;

1803 }

1804

1805 div.message {

1806 display: inline-block;

1807 margin-left: $lineheight / 2;

1808 vertical-align: middle;

1809 }

1810 }

1811

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

1813

1814 .formError {

1815 display: inline-block;

1816 padding: 5px 10px;

1817 margin-top: 5px;

1818 border-radius: 4px;

1819 font-size: 12px;

1820 color: #fff;

1821 background-color: #ff7070;

1822 }

1823

1824 /* Rules for rails validation error boxes */

1825

1826 #errorExplanation {

1827 width: 400px;

1828 border: 2px solid #ff7070;

1829 padding: 0 $lineheight/2;

1830 margin-bottom: $lineheight;

1831 background-color: #f0f0f0;

1832

1833 h2 {

1834 margin: 0 -10px 10px -10px;

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

1836 font-weight: bold;

1837 font-size: 12px;

1838 background-color: #c00;

1839 color: #fff;

1840 text-align: left;

1841 }

1842

1843 p {

1844 color: #333;

1845 margin-bottom: 0px;

1846 padding: $lineheight/4;

1847 }

1848

1849 ul {

1850 padding-left: $lineheight;

1851

1852 li {

1853 font-size: 12px;

1854 list-style: disc;

1855 }

1856 }

1857 }

1858

1859 /* Rules for forms */

1860

1861 .standard-form {

1862 fieldset {

1863 margin-bottom: $lineheight;

1864 }

1865 label.standard-label {

1866 display: block;

1867 margin-bottom: $lineheight/4;

1868 font-size: $typeheight;

1869 font-weight: bold;

1870 line-height: 1.5;

1871 }

1872 label.standard-label.secondary {

1873 display: inline-block;

1874 font-weight: normal;

1875 }

1876 .form-help {

1877 font-weight: normal;

1878 }

1879 .form-column {

1880 float: left;

1881 margin-right: 20px;

1882 }

1883 .form-divider {

1884 margin-top: $lineheight;

1885 padding-top: $lineheight;

1886 border-top: 1px solid $lightgrey;

1887 }

1888 .horizontal-list .form-row {

1889 float: left;

1890 padding-right: 10px;

1891 }

1892 .form-row {

1893 margin-bottom: $lineheight/2;

1894 }

1895 .form-list {

1896 margin-bottom: 0;

1897 }

1898 .form-list li {

1899 margin-bottom: 5px;

1900 }

1901 input[type="checkbox"],

1902 input[type="radio"] {

1903 float: left;

1904 margin-top: 5px;

1905 }

1906 }

1907

1908 #remember_me_openid {

1909 display: block;

1910 }

1911

1912 select {

1913 padding: 2px;

1914 }

1915

1916 input[type="checkbox"],

1917 input[type="radio"] {

1918 margin-right: 5px;

1919 }

1920

1921 input[type="text"],

1922 input[type="email"],

1923 input[type="url"],

1924 input[type="password"],

1925 textarea {

1926 color: #222;

1927 background-color: #fff;

1928 border: 1px solid #ccc;

1929 padding: 2px 5px;

1930 margin: 0;

1931 width: 200px;

1932

1933 &.field_with_errors {

1934 border: 2px solid #ff7070;

1935 }

1936 }

1937

1938 textarea {

1939 padding: 5px;

1940 width: 100%;

1941 }

1942

1943 /* Rules for user images */

1944

1945 img.user_image {

1946 max-width: 100px;

1947 max-height: 100px;

1948 border: 1px solid #ccc;

1949 margin-bottom: $lineheight;

1950 float: left;

1951 margin-right: $lineheight;

1952 }

1953

1954 img.user_thumbnail {

1955 max-width: 50px;

1956 max-height: 50px;

1957 border: 1px solid #ccc;

1958 margin-right: $lineheight;

1959 }

1960

1961 img.user_thumbnail_tiny {

1962 width: auto;

1963 height: auto;

1964 max-width: 25px;

1965 max-height: 25px;

1966 border: 1px solid #ccc;

1967 }

1968

1969 /* Rules for geo microformats */

1970

1971 abbr.geo {

1972 border-bottom: none;

1973 }

1974

1975 /* Rules for RSS buttons */

1976

1977 .rsssmall {

1978 position: relative;

1979 top: 3px;

1980 }

1981

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

1983

1984 ul.secondary-actions {

1985 font-style: normal;

1986 margin-bottom: 0;

1987 margin-left: 0;

1988 &.pager {

1989 display: inline-block;

1990 margin-right: 60px;

1991 }

1992 > li {

1993 display: block;

1994 float: left;

1995 list-style: none;

1996 border-left: 1px solid #ccc;

1997 padding-left: $lineheight/2;

1998 margin-right: $lineheight/2;

1999 &:first-child {

2000 border-left: 0;

2001 padding-left: 0;

2002 }

2003 &:last-child {

2004 margin-right: 0px;

2005 }

2006 }

2007 }

2008

2009 div.secondary-actions {

2010 padding: 10px;

2011 text-align: center;

2012 }

2013

2014 /* Utility for managing inner content areas */

2015

2016 .inner22 { padding: $lineheight;}

2017

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

2019

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

2021

2022 .inner20 { padding: $lineheight 0;}

2023

2024 .inner02 { padding: 0 $lineheight;}

2025

2026 /* Utility for general button styles */

2027

2028 input[type="button"],

2029 input[type="submit"],

2030 input[type="reset"],

2031 a.button {

2032 cursor: pointer;

2033 border: 0;

2034 display: inline-block;

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

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

2037 min-width: 120px;

2038 margin: 0 0 $lineheight/2 0;

2039 color: white;

2040 background: $blue;

2041 text-align: center;

2042 border-radius: 2px;

2043 &:hover {

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

2045 text-decoration: none;

2046 }

2047 &.deemphasize {

2048 background: $lightblue;

2049 &:hover {

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

2051 }

2052 }

2053 &:disabled {

2054 background: $lightgrey;

2055 &:hover {

2056 background: $lightgrey;

2057 }

2058 }

2059 &:last-child {

2060 margin-bottom: 0;

2061 }

2062 }

2063

2064 input[type="button"],

2065 input[type="submit"],

2066 input[type="reset"] {

2067 line-height: normal;

2068 }

2069

2070 a.button {

2071 line-height: 20px;

2072 }

2073

2074 .buttons {

2075 min-width: 200px;

2076 input[type="submit"],

2077 input[type="button"],

2078 input[type="reset"],

2079 .button,

2080 .button_to {

2081 box-sizing: border-box;

2082 float: left;

2083 border-radius: 0;

2084 margin:0;

2085 min-width: 75px;

2086 max-width: 180px;

2087 border-right:1px solid white;

2088 text-overflow: ellipsis;

2089 white-space: nowrap;

2090 overflow: hidden;

2091 }

2092 input:first-child,

2093 .button:first-child,

2094 .button_to:first-child {

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

2096 }

2097 input:last-child,

2098 .button:last-child,

2099 .button_to:last-child {

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

2101 border-right-width: 0;

2102 }

2103 input:only-child,

2104 .button:only-child,

2105 .button_to:only-child,

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

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

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

2109 border-radius:2px;

2110 border-right-width: 0;

2111 }

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

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

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

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

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

2117 border-right-width: 0;

2118 }

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

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

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

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

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

2124 border-right-width: 1px;

2125 }

2126 }

2127

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

2129

2130 .table0,

2131 .item0 {

2132 background: $offwhite;

2133 }

2134

2135 .table1,

2136 .item1 {

2137 background: #fff;

2138 }

2139

2140 /* Rules for OpenID logo */

2141

2142 .openid_logo {

2143 vertical-align: text-bottom;

2144 border: 0;

2145 }

2146

2147 /* Rules for rich text */

2148

2149 .richtext,

2150 .prose {

2151 h1, h2 {

2152 padding-bottom: $lineheight/2;

2153 border-bottom: 1px dashed #cccccc;

2154 margin-bottom: $lineheight/2;

2155 }

2156

2157 h1 {

2158 font-size: 24px;

2159 }

2160

2161 h2 {

2162 font-size: 18px;

2163 }

2164

2165 h3 {

2166 font-size: $typeheight;

2167 }

2168

2169 code {

2170 font-size: 13px;

2171 background: #e8e8e8;

2172 padding: 2px 3px;

2173 }

2174

2175 pre {

2176 font-size: 13px;

2177 background: #e8e8e8;

2178 padding: 2px 3px;

2179

2180 code {

2181 padding: 0;

2182 }

2183 }

2184

2185 img {

2186 padding: $lineheight;

2187 background-color: $offwhite;

2188 display: block;

2189 max-width: 100%;

2190 margin: auto;

2191 }

2192

2193 blockquote {

2194 border-left: $lineheight solid $offwhite;

2195 padding-left: $lineheight;

2196 margin: 0;

2197 color: #7E7E7E;

2198 }

2199

2200 ul, ol {

2201 padding-left: $lineheight;

2202 margin-bottom: $lineheight;

2203 margin-left: $lineheight;

2204 }

2205

2206 ul li {

2207 list-style: disc;

2208 }

2209

2210 ol li {

2211 list-style: decimal;

2212 }

2213 }

2214

2215 .diary_post .richtext {

2216 margin-top: $lineheight;

2217 }

2218

2219 .comments .richtext {

2220 margin-left: 70px;

2221 margin-top: 0;

2222 }

2223

2224 /* Rules for rich text editors */

2225

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

2227 width: 50%;

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

2229

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

2231 width: 100%;

2232 }

2233 }

2234

2235 .richtext_container {

2236 margin-bottom: $lineheight;

2237

2238 .richtext_content {

2239 width: 50%;

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

2241 display: inline-block;

2242 vertical-align: top;

2243

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

2245 width: 100%;

2246 }

2247

2248 .richtext_preview {

2249 display: inline-block;

2250 padding: $lineheight;

2251 background-color: $offwhite;

2252 overflow-x: auto;

2253

2254 &.loading {

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

2256 background-repeat: no-repeat;

2257 background-position: center;

2258 }

2259

2260 > :first-child {

2261 margin-top: 0px;

2262 }

2263 }

2264 }

2265

2266 .richtext_help {

2267 display: inline-block;

2268 vertical-align: top;

2269 margin-left: 15px;

2270 background-color: #f8f8ff;

2271 padding: $lineheight/2;

2272 width: 220px;

2273

2274 ul {

2275 margin-bottom: 0;

2276 }

2277

2278 h4.heading, li {

2279 border-bottom: 1px solid #ccc;

2280 margin-bottom: $lineheight/4;

2281 padding-bottom: $lineheight/4;

2282 }

2283

2284 li h4, li span, li p {

2285 display: inline-block;

2286 vertical-align: top;

2287 font-size: 11px;

2288 }

2289

2290 li h4 {

2291 width: 40%;

2292 margin: 0;

2293 }

2294

2295 li span, li p {

2296 width: 50%;

2297 margin-left: $lineheight/2;

2298 margin-bottom: $lineheight/4;

2299 white-space: nowrap;

2300 }

2301 }

2302 }

2303

2304 /* Rules for the user notes list */

2305

2306 .note_list {

2307 tr.creator {

2308 background-color: #eeeeee;

2309 }

2310

2311 td {

2312 padding: 3px;

2313 }

2314

2315 p {

2316 margin-bottom: 0px;

2317 }

2318 }

2319

2320 /* Rules for the iD editor */

2321

2322 .id-embed {

2323 width: 100%;

2324 height: 100%;

2325 }

2326

2327 /* Rules for dropdown menus */

2328

2329 .dropdown {

2330 position: relative;

2331 }

2332

2333 .dropdown-toggle {

2334 *margin-bottom: -3px;

2335 }

2336

2337 .dropdown-toggle:active,

2338 .open .dropdown-toggle {

2339 outline: 0;

2340 }

2341

2342 .caret {

2343 display: inline-block;

2344 width: 0;

2345 height: 0;

2346 vertical-align: top;

2347 border-top: 4px solid #000000;

2348 border-right: 4px solid transparent;

2349 border-left: 4px solid transparent;

2350 content: "";

2351 }

2352

2353 .dropdown .caret {

2354 margin-top: 8px;

2355 margin-left: 2px;

2356 }

2357

2358 .dropdown-menu {

2359 position: absolute;

2360 top: 100%;

2361 left: -1px;

2362 z-index: 1000;

2363 display: none;

2364 float: left;

2365 min-width: 160px;

2366 padding: 5px 0;

2367 margin: 0;

2368 list-style: none;

2369 background-color: #ffffff;

2370 border: 1px solid #ccc;

2371 border-radius: 0 3px 3px;

2372 *border-right-width: 2px;

2373 *border-bottom-width: 2px;

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

2375 background-clip: padding-box;

2376 }

2377

2378 .dropdown-menu.pull-right {

2379 right: 0;

2380 left: auto;

2381 }

2382

2383 .dropdown-menu .divider {

2384 *width: 100%;

2385 height: 1px;

2386 margin: 9px 1px;

2387 *margin: -5px 0 5px;

2388 overflow: hidden;

2389 background-color: #e5e5e5;

2390 border-bottom: 1px solid #ffffff;

2391 }

2392

2393 .dropdown-menu > li > a {

2394 display: block;

2395 padding: 3px 10px;

2396 clear: both;

2397 font-weight: normal;

2398 line-height: 20px;

2399 color: #333333;

2400 white-space: nowrap;

2401 }

2402

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

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

2405 .dropdown-submenu:hover > a,

2406 .dropdown-submenu:focus > a {

2407 color: #ffffff;

2408 text-decoration: none;

2409 background-color: $green;

2410 }

2411

2412 .dropdown-menu > .active > a,

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

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

2415 color: #ffffff;

2416 text-decoration: none;

2417 background-color: $green;

2418 outline: 0;

2419 }

2420

2421 .dropdown-menu > .disabled > a,

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

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

2424 color: #999999;

2425 }

2426

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

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

2429 text-decoration: none;

2430 cursor: default;

2431 background-color: transparent;

2432 background-image: none;

2433 }

2434

2435 .open {

2436 *z-index: 1000;

2437 }

2438

2439 .open > .dropdown-menu {

2440 display: block;

2441 }

2442

2443 .dropdown-backdrop {

2444 position: fixed;

2445 top: 0;

2446 right: 0;

2447 bottom: 0;

2448 left: 0;

2449 z-index: 990;

2450 }

2451

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

2453 .site-welcome, .site-fixthemap {

2454 .center {

2455 text-align: center;

2456 .sprite {

2457 float: none;

2458 margin: auto;

2459 }

2460 }

2461

2462 .sprite {

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

2464 background-size: 500px 250px;

2465 display: block;

2466 float: left;

2467 }

2468

2469 .icon-list {

2470 padding-bottom: 20px;

2471 div {

2472 margin-bottom: 10px;

2473 p {

2474 padding-top: 10px;

2475 }

2476 }

2477 }

2478 .sprite.small {

2479 width: 50px;

2480 height: 50px;

2481 }

2482

2483 .sprite.x {

2484 background-position: -50px 0;

2485 }

2486

2487 .sprite.term {

2488 margin-right: 10px;

2489 vertical-align: middle;

2490 }

2491

2492 .sprite.node {

2493 background-position: -100px 0;

2494 }

2495

2496 .sprite.way {

2497 background-position: -150px 0;

2498 }

2499

2500 .sprite.tag {

2501 background-position: -200px 0;

2502 }

2503

2504 .sprite.editor {

2505 background-position: -250px 0;

2506 }

2507

2508 .sprite.question {

2509 background-position: -300px 0;

2510 }

2511

2512 .start-mapping {

2513 margin: auto;

2514 cursor: pointer;

2515 border: none;

2516 padding: 20px 40px;

2517 font-size: 30px;

2518 text-decoration: none;

2519 }

2520

2521 .note-box {

2522 margin-top: 20px;

2523 background-color: $offwhite;

2524 }

2525

2526 .icon.note {

2527 background-color: #333;

2528 border-radius: 4px;

2529 }

2530 }

2531

2532 .site-about #content {

2533 //background-color: #000;

2534 background-color: #eee;

2535 background-position: 50% 50%;

2536 background-repeat: no-repeat;

2537 background-size: cover;

2538 background-attachment: fixed;

2539

2540 .caption {

2541 max-width: 200px;

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

2543 position: fixed;

2544 text-align: right;

2545 right: 20px;

2546 bottom: 60px;

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

2548 color: #eee;

2549 opacity: 0.8;

2550 display: none;

2551 }

2552

2553 .caption a {

2554 color: white;

2555 white-space: nowrap;

2556 text-decoration: none;

2557 }

2558

2559 a.next {

2560 display: block;

2561 position: fixed;

2562 right: 10px;

2563 bottom: 10px;

2564 width: 40px;

2565 height: 40px;

2566 border-radius: 5px;

2567 text-indent: -9999px;

2568 overflow: hidden;

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

2570 background-color: #000;

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

2572 }

2573

2574 .content-inner {

2575 position: relative;

2576 color: #333;

2577 min-width: 320px;

2578 max-width: 640px;

2579

2580 .section {

2581 margin-bottom: 30px;

2582 }

2583

2584 .section:last-child {

2585 margin-bottom: 0;

2586 }

2587 }

2588

2589 .text {

2590 background: white;

2591 padding: 40px;

2592 }

2593

2594 .attr {

2595 position: relative;

2596 padding: 170px 40px 20px;

2597 background: #333;

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

2599 margin-bottom: 0;

2600 margin-top: -20px;

2601

2602 h1 {

2603 display: block;

2604 color: white;

2605 font-weight: 300;

2606 font-size: 34px;

2607 span {

2608 color: #76c551;

2609 }

2610 }

2611

2612 .user-image {

2613 position: absolute;

2614 top: 0px;

2615 right: 240px;

2616 left: 0px;

2617 height: 150px;

2618 background-position: 0 50%;

2619 background-repeat: no-repeat;

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

2621 background-size: cover;

2622 background-color: #76c551;

2623 }

2624

2625 .byosm {

2626 position: absolute;

2627 top: 0px;

2628 right: 0px;

2629 z-index: 1;

2630 width: 240px;

2631 height: 150px;

2632 padding: 20px 20px 20px 40px;

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

2634 white-space: nowrap;

2635 color: #fff;

2636 background: #76c551;

2637 }

2638

2639 .byosm span {

2640 display: inline-block;

2641 width: 20px;

2642 margin-left: -20px;

2643 }

2644 }

2645

2646 h2 {

2647 margin-bottom: 10px;

2648 }

2649

2650 .icon {

2651 width: 30px;

2652 height: 30px;

2653 margin-right: 10px;

2654 vertical-align: middle;

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

2656

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

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

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

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

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

2662 }

2663 }

2664

2665 @import 'browse';

2666

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

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

2669 display: none;

2670 }

2671 }

2672