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

1 @import "parameters";

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

5 /* Minimal CSS reset */

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

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

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

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

22 table {

23 border-collapse: collapse;

24 border-spacing: 0;

25 }

27 li { list-style: none; }

29 input,

30 select,

31 textarea,

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

34 abbr, acronym {

35 border-bottom: .1em dotted;

36 cursor: help;

37 }

39 strong {

40 font-weight: bold;

41 font-weight: 500;

42 }

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

46 .clearfix:before,

47 .clearfix:after {

48 content: " ";

49 display: table;

50 }

52 .clearfix:after {

53 clear: both;

54 }

56 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

70 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

86 .fillL { background-color: white; }

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

90 * {

91 -webkit-box-sizing: border-box;

92 -moz-box-sizing: border-box;

93 box-sizing: border-box;

94 }

96 body {

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

98 font-size: $typeheight;

99 line-height: 1.6666;

100 color: #222;

101 background-color: #fff;

102 margin: 0px;

103 padding: 0px;

104 text-align: left;

105 height: 100%;

106 }

107

108 body.slim {

109 background-color: #f0f0f0;

110 }

111

112 h1, h2, h3 {

113 font-weight: bold;

114 font-weight: 500;

115 line-height: 1.2;

116 }

117

118 h4, h5 {

119 font-weight: bold;

120 font-weight: 500;

121 }

122

123 h1 {

124 font-size: 18px;

125 }

126

127 h2, h3 {

128 font-size: 16px;

129 }

130

131 p > img {

132 width: auto;

133 max-width: 100%;

134 }

135

136 small, aside {

137 font-size: 12px;

138 }

139

140 #container { position: relative; }

141

142 .column-1 {

143 width: 50%;

144 margin: 0 0 $lineheight/2 0;

145 }

146

147 .small_icon {

148 vertical-align: middle;

149 margin-right: $lineheight/4;

150 }

151

152 .red { color: $red; }

153

154 /* Rules for icons */

155

156 .icon {

157 display:inline-block;

158 vertical-align:top;

159 width:20px;

160 height:20px;

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

162 text-indent:-9999px;

163 overflow:hidden;

164 }

165

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

181 .icon.gear { background-position: -260px 0; }

182

183 /* Rules for links */

184

185 a {

186 color: #24d;

187 text-decoration: none;

188 -webkit-appearance: none;

189 outline: 0;

190 &:hover {

191 text-decoration: underline;

192 }

193 }

194

195 /* Rules for horizontal lines */

196

197 hr {

198 border: none;

199 background-color: #ccc;

200 color: #ccc;

201 height: 1px;

202 }

203

204 /* General styles for tables */

205

206 table {

207 width: 100%;

208 margin-bottom: $lineheight;

209 th, td {

210 text-align: left;

211 padding: $lineheight/4;

212 line-height: $lineheight;

213 }

214 th {

215 font-weight: bold;

216 font-weight: 500;

217 vertical-align: top;

218 }

219 td {

220 vertical-align: middle;

221 }

222 }

223

224 /* Utility for de-emphasizing content */

225

226 .deemphasize {

227 color: #999;

228 a {

229 color: $blue;

230 }

231 }

232

233 /* Rules for the header */

234

235 #menu-icon {

236 display: none !important;

237 float: right;

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

239 background-size: 30px 30px;

240 display: block;

241 width: 30px;

242 height: 30px;

243 margin: 14px 10px 0 0;

244 opacity: 0.6;

245 }

246

247 header {

248 height: $headerHeight;

249 position: relative;

250 z-index: 1001;

251 font-size: 13px;

252

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

254 display: inline-block;

255 }

256

257 > * {

258 height: 100%;

259 padding: $lineheight/2;

260 }

261

262 h1, nav.primary {

263 float: left;

264 }

265

266 a, a:hover {

267 text-decoration: none;

268 }

269

270 img.logo {

271 width: 30px;

272 height: 30px;

273 margin-top: -4px;

274 vertical-align: middle;

275 }

276

277 h1 {

278 margin: 0;

279 padding-top: 15px;

280

281 a {

282 color: #000;

283 }

284 }

285 }

286

287 nav.primary {

288 > ul {

289 $border: 1px solid $green;

290

291 border: $border;

292 border-radius: $border-radius;

293

294 > li {

295 border-right: $border;

296 float: left;

297 &:last-child {

298 border-right: 0;

299 }

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

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

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

303 &.dropdown {

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

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

306 }

307 }

308 }

309

310 a.tab,

311 .dropdown-toggle {

312 display: inline-block;

313 font-weight: bold;

314 font-weight: 500;

315 color: $green;

316 padding: 5px 15px;

317 }

318

319 .dropdown-toggle {

320 padding: 5px 6px;

321 }

322

323 .caret {

324 border-top-color: $green;

325 margin-top: 10px;

326 }

327

328 .disabled a {

329 color: #ccc;

330 cursor: default;

331

332 .caret {

333 border-top-color: #ccc;

334 }

335 }

336

337 > ul li.current {

338 background-color: $green;

339

340 .tab {

341 color: #fff;

342 }

343

344 .caret {

345 border-top-color: #fff;

346 }

347 }

348 }

349

350 nav.secondary {

351 position: absolute;

352 right: 0;

353

354 > ul {

355 vertical-align: middle;

356 a, .dropdown-toggle {

357 display: inline-block;

358 text-decoration: none;

359 color: $darkgrey;

360 padding: 5px;

361

362 &:hover { color: darken($darkgrey, 10%); }

363 }

364 }

365

366 > ul li.current a {

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

368 }

369

370 .user-menu {

371 $border: 1px solid $grey;

372 font-weight: bold;

373 font-weight: 500;

374 border: $border;

375 border-radius: $border-radius;

376 margin-left: 10px;

377

378 > li {

379 border-right: $border;

380 float: left;

381 &:last-child {

382 border-right: 0;

383

384 > a {

385 border-radius: 0 $border-radius $border-radius 0;

386 }

387 }

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

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

390 }

391

392 a {

393 padding: 5px 15px;

394

395 }

396

397 &.logged-in > a {

398 padding: 0;

399 > .user-button {

400 padding: 5px 10px 5px 6px;

401 display: inline-block;

402 color: $darkgrey;

403 }

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

405 }

406 }

407

408 .caret {

409 border-top-color: $grey;

410 margin-top: 9px;

411 }

412

413 img.user_thumbnail_tiny {

414 border: 0;

415 vertical-align: top;

416 margin-top: 0px;

417 margin: 3px 0 0 3px;

418 border-radius: 2px;

419 }

420

421 #inboxanchor {

422 display: inline-block;

423 vertical-align: top;

424 height: 25px;

425 margin: 3px 0 3px 3px;

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

427 line-height: 20px;

428 border-radius: 2;

429 }

430

431 .dropdown-menu {

432 left: auto;

433 right: -1px;

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

435

436 .count-number {

437 float: right;

438 padding: 0 5px;

439 margin: 0;

440 }

441 }

442 }

443

444 #compact-secondary-nav {

445 display: none;

446 ul li a {

447 width: 100%;

448 color: #333;

449 &:hover { color: #fff; }

450 }

451 }

452

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

454 #compact-secondary-nav {

455 display: inline-block;

456 }

457 .compact-hide {

458 display: none;

459 }

460 }

461

462 /* Utility for styling notification numbers */

463

464 .count-number {

465 padding: 2px $lineheight/4;

466 border-radius: 2px;

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

468 margin: 0 2px;

469 font-size: 11px;

470 color: #333;

471 }

472

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

474

475 #noscript {

476 z-index: 20000000;

477 position: absolute;

478 top: 15px;

479 left: 15px;

480 }

481

482 /* Rules for bootstrap tooltips */

483

484 .tooltip {

485 position: absolute;

486 display: none;

487 color: #333;

488 text-align: left;

489 font-size: 12px;

490 max-width: 250px;

491 }

492

493 .tooltip.in {

494 opacity: 0.8;

495 z-index: 1030;

496 height: auto;

497 display: block;

498 }

499

500 .tooltip.top {

501 margin-top: -10px;

502 text-align: center;

503 }

504

505 .tooltip.right {

506 margin-left: 10px;

507 }

508

509 .tooltip.bottom {

510 margin-top: 10px;

511 text-align: center;

512 }

513

514 .tooltip.left {

515 margin-left: -10px;

516 text-align: right;

517 }

518

519 .tooltip-inner {

520 display: inline-block;

521 padding: 10px;

522 font-weight: normal;

523 background-color: white;

524 }

525

526 .tooltip-arrow {

527 position: absolute;

528 width: 0;

529 height: 0;

530 border-color: transparent;

531 border-style: solid;

532 }

533

534 .tooltip.top .tooltip-arrow {

535 bottom: -5px;

536 left: 50%;

537 margin-left: -5px;

538 border-top-color: white;

539 border-width: 5px 5px 0;

540 }

541

542 .tooltip.right .tooltip-arrow {

543 top: 50%;

544 left: -5px;

545 margin-top: -5px;

546 border-right-color: white;

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

548 }

549

550 .tooltip.left .tooltip-arrow {

551 top: 50%;

552 right: -5px;

553 margin-top: -5px;

554 border-left-color: white;

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

556 }

557

558 .tooltip.bottom .tooltip-arrow {

559 top: -5px;

560 left: 50%;

561 margin-left: -5px;

562 border-bottom-color: white;

563 border-width: 0 5px 5px;

564 }

565

566 /* Rules for Leaflet maps */

567

568 .leaflet-control .control-button {

569 display: block;

570 height: 40px;

571 width: 40px;

572 background-color: #333;

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

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

575 margin-bottom: 10px;

576 outline: none;

577

578 &:hover {

579 background-color: black;

580 }

581

582 &.active {

583 background-color: #9ed485;

584 }

585

586 &.disabled {

587 background-color: #333;

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

589 cursor: default;

590 }

591

592 .icon {

593 margin: 10px;

594 }

595 }

596

597 .leaflet-control .zoomin,

598 .control-layers .control-button {

599 margin-bottom: 0px;

600 border-radius: 4px 0 0 0;

601 }

602

603 .leaflet-control .zoomout,

604 .control-key .control-button {

605 margin-bottom: 0;

606 border-radius: 0;

607 }

608

609 .control-locate .control-button,

610 .control-share .control-button {

611 border-radius: 0 0 0 4px;

612 }

613

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

615

616 .map-layout {

617 #content {

618 overflow: hidden;

619 position: absolute;

620 top: $headerHeight;

621 bottom: 0;

622 width: 100%;

623 }

624

625 #sidebar, #map {

626 position: relative;

627 height: 100%;

628 overflow-x: hidden;

629 overflow-y: auto;

630 }

631

632 #sidebar {

633 float: left;

634 width: $sidebarWidth;

635 background: #fff;

636 font-size: 13px;

637

638 h2 {

639 padding: $lineheight $lineheight $lineheight/2;

640 }

641

642 h3, h4 {

643 margin-top: $lineheight;

644 margin-bottom: $lineheight/2;

645 }

646

647 .icon.close {

648 float: right;

649 cursor: pointer;

650 }

651 }

652

653 .overlay-sidebar #sidebar {

654 position: absolute;

655 z-index: 1000;

656 height: auto;

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

658 overflow: hidden;

659 }

660

661 .welcome {

662 p {

663 padding: $lineheight/2 $lineheight $lineheight;

664 font-size: 110%;

665 font-weight: normal;

666 font-weight: 300;

667 }

668

669 .button {

670 width: 50%;

671 float: left;

672 margin: 0;

673 border-radius: 0;

674 font-weight: normal;

675 padding: .6em;

676

677 &.learn-more {

678 border-right: 1px solid #fff;

679 }

680 }

681 }

682

683 #map {

684 height: 100%;

685 overflow: hidden;

686 }

687

688 #map-ui {

689 display: none;

690 position: relative;

691 float: right;

692 width: 250px;

693 height: 100%;

694 background: white;

695 overflow: auto;

696

697 .section {

698 border-bottom: 1px solid #DDD;

699 padding: 10px 20px;

700 }

701

702 a.close-button {

703 float: right;

704 padding:5px;

705 font-size:20px;

706 line-height:10px;

707 color:#222;

708 border:1px solid #ddd;

709 }

710 }

711 }

712

713 .layers-ui,

714 .share-ui {

715 li:last-child {

716 margin-bottom: 0;

717 }

718 }

719

720 .layers-ui {

721 .base-layers {

722 .leaflet-container {

723 width: 100%;

724 height: 50px;

725 cursor: pointer;

726 }

727

728 li {

729 overflow: hidden;

730 border-radius: 3px;

731 border: 2px solid #fff;

732 margin-bottom: 8px;

733 position: relative;

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

735

736 label {

737 position: absolute;

738 top: 0;

739 left: 0;

740 padding: 2px 6px;

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

742 cursor: pointer;

743 font-weight: bold;

744 font-weight: 500;

745 font-size: 16px;

746 text-stroke: 2px #fff;

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

748 z-index: 2; // For IE9

749 input[type="radio"] {

750 display: none;

751 }

752 }

753

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

755 &:hover {

756 border-color: $grey;

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

758 }

759 }

760 }

761

762 .overlay-layers {

763 p {

764 font-size: 13px;

765 margin-bottom: 8px;

766 }

767 }

768 }

769

770 .share-ui {

771 .share-tabs {

772 margin-bottom: 10px;

773

774 a {

775 color: #fff;

776 text-decoration: none;

777 background-color: $lightblue;

778 padding: 5px 10px;

779 }

780

781 a:first-child {

782 border-right: 1px solid #fff;

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

784 }

785

786 a:last-child {

787 border-left: 1px solid #fff;

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

789 }

790

791 a.active {

792 background-color: $blue;

793 }

794 }

795

796 .share-tab {

797 display: none;

798 }

799

800 .share-link {

801 input[type=text],

802 textarea {

803 width: 100%;

804 font-family: monospace;

805 font-size: small;

806 line-height: 1.3;

807 }

808 }

809

810 .share-image {

811 label {

812 margin-right: 10px;

813 }

814 }

815

816 #embed_html {

817 resize: vertical;

818 }

819

820 #mapnik_scale {

821 width: 100px;

822 }

823 }

824

825 .leaflet-top {

826 top: $lineheight/2 !important;

827 .leaflet-control {

828 margin-right: 0px !important;

829 margin-top: 0px !important;

830 }

831 }

832

833 .leaflet-popup-scrolled {

834 padding-right: $lineheight;

835 border-bottom: 0px !important;

836 border-top: 0px !important;

837 }

838

839 .leaflet-popup-content-wrapper {

840 border-radius: 4px !important;

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

842 }

843

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

845

846 #attribution {

847 display: none;

848 }

849

850 .attribution_license,

851 .attribution_project {

852 text-align: left;

853 }

854

855 .attribution_notice {

856 text-align: center;

857 }

858

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

860

861 /* Rules for the sidebar */

862

863 .sidebar_heading {

864 position: relative;

865 padding: $lineheight/2 $lineheight;

866 // background: $offwhite;

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

868 > .close {

869 float: right;

870 margin-top: 2px;

871 cursor: pointer;

872 }

873 }

874

875 #browse_status {

876 p {

877 padding: $lineheight;

878 }

879 }

880

881 #sidebar {

882 #sidebar_loader,

883 .loader,

884 .load_more {

885 text-align: center;

886 margin: $lineheight auto;

887 width: $lineheight;

888 display: block;

889 }

890 }

891

892 /* Rules for the search box */

893

894 header .search_form {

895 display: none;

896 }

897

898 .search_form {

899 position: relative;

900 padding: $lineheight/2;

901 background-color: $lightgrey;

902

903 .query_wrapper {

904 position: relative;

905 overflow: hidden;

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

907 }

908

909 input[type=text] {

910 width: 100%;

911 height: 30px;

912 border-right: none;

913

914 transition: 300ms linear;

915 -webkit-transition: 300ms linear;

916 -moz-transition: 300ms linear;

917 }

918

919 input:focus {

920 outline: none;

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

922 }

923

924 input[type=submit] {

925 float: right;

926 width: auto;

927 min-width: 0;

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

929 }

930

931 .describe_location {

932 position: absolute;

933 top: 6px;

934 right: 6px;

935 font-size: 10px;

936 color: $blue;

937 }

938 }

939

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

941

942 #mapkey {

943 .mapkey-table-key img {

944 display: block;

945 margin-left: auto;

946 margin-right: auto;

947 }

948 td {

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

950 }

951 }

952

953 /* Rules for search sidebar */

954

955 .search_results_entry {

956 ul li {

957 border-bottom: $keyline;

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

959 }

960

961 .search_details {

962 display: block;

963 float: right;

964 text-align: right;

965 margin-top: 0.2em;

966 margin-left: 0.5em;

967 }

968 }

969

970 .search_results_error {

971 color: #f00;

972 }

973

974 /* Rules for entity history */

975

976 #sidebar_content {

977 .browse_details {

978 position: relative;

979 border-bottom: $keyline;

980 }

981 }

982

983 .browse_status {

984 display: none;

985 }

986

987 /* Rules for the history sidebar */

988

989 #sidebar .changesets {

990 li {

991 padding: $lineheight;

992 border-bottom: $keyline;

993 cursor: pointer;

994

995 &.selected { background: #FFFFE6; }

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

997 }

998

999 h4 {

1000 margin-top: 0;

1001 a {

1002 color: #000;

1003 }

1004 }

1005 }

1006

1007 /* Rules for the browse sidebar */

1008

1009 #sidebar_content {

1010 .browse-section {

1011 padding: $lineheight/2 $lineheight;

1012

1013 h4:first-child {

1014 margin-top: 0;

1015 }

1016 }

1017

1018 .paginate {

1019 float: right;

1020 padding: 1px 6px;

1021 border: 1px solid #eee;

1022 border-radius: 3px;

1023 }

1024

1025 .paginate ul {

1026 padding-left: 20px;

1027 }

1028

1029 .browse-field {

1030 margin-bottom: 10px;

1031

1032 h4 {

1033 padding: 5px 0 5px 10px;

1034 font-size: 12px;

1035 border: 1px solid #CCC;

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

1037 background-color: #F6F6F6;

1038 }

1039

1040 p {

1041 padding: 7px 10px;

1042 font-size: 12px;

1043 background-color: #FFF;

1044 border: 1px solid #CCC;

1045 border-top: 0;

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

1047 }

1048 }

1049

1050 .browse-tag-list {

1051 background-color: #F6F6F6;

1052 border: 1px solid #ddd;

1053 border-radius: 3px;

1054 font-size: 12px;

1055

1056 li {

1057 border-bottom: 1px solid #ddd;

1058 }

1059

1060 li:last-child {

1061 border-bottom: 0;

1062 }

1063

1064 .browse-tag-k,

1065 .browse-tag-v {

1066 display: inline-block;

1067 width: 50%;

1068 float: left;

1069 padding: 6px 10px;

1070 }

1071

1072 .browse-tag-k {

1073 font-weight: bold;

1074 font-weight: 500;

1075 background-color: #F6F6F6;

1076 }

1077

1078 .browse-tag-v {

1079 border-left: 1px solid #ddd;

1080 background-color: #fff;

1081 }

1082 }

1083

1084 .warning {

1085 margin: $lineheight/2 0;

1086 padding: $lineheight/2;

1087 font-size: 90%;

1088 }

1089

1090 .note-comments li {

1091 margin: $lineheight/2 0;

1092

1093 p {

1094 margin-left: 10px;

1095 }

1096 }

1097

1098 .note-description p {

1099 margin-left: 10px;

1100 }

1101 }

1102

1103 /* Rules for export sidebar */

1104

1105 .export_form {

1106 padding: $lineheight;

1107

1108 .export_area_inputs,

1109 .export_button {

1110 text-align: center;

1111 }

1112

1113 .export_area_inputs {

1114 margin-bottom: $lineheight/2;

1115 input[type="text"] {

1116 width: 80px;

1117 margin-bottom: 5px;

1118 }

1119 }

1120

1121 .export_bound {

1122 margin: $lineheight/4;

1123 }

1124

1125 .export_button {

1126 margin-top: $lineheight;

1127 }

1128

1129 dl {

1130 padding-left: $lineheight/2;

1131 dd {

1132 margin-left: 0;

1133 margin-bottom: 10px;

1134 }

1135 }

1136 }

1137

1138 /* Rules for edit pages */

1139

1140 .site-edit {

1141 #content {

1142 position: absolute;

1143 top: $headerHeight;

1144 bottom: 0;

1145 width: 100%;

1146 }

1147

1148 #map {

1149 height: 100%;

1150 }

1151 }

1152

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

1154

1155 .content-heading {

1156 background: $lightgrey;

1157

1158 h1 { font-size: 22px; }

1159 }

1160

1161 .content-body {

1162 h1, h2, h3, p {

1163 margin-bottom: $lineheight;

1164 }

1165

1166 h1, h2, h3 {

1167 margin-top: $lineheight/2;

1168 }

1169 }

1170

1171 .content-inner {

1172 position: relative;

1173 max-width: 900px;

1174 margin: auto;

1175 padding: $lineheight;

1176 }

1177

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

1179

1180 .user-new,

1181 .user-create,

1182 .user-terms {

1183 .content-body .content-inner {

1184 padding: 0;

1185 }

1186 }

1187

1188 .user-new,

1189 .user-create,

1190 .user-terms,

1191 .user-confirm {

1192 .content-heading .content-inner {

1193 height: 200px;

1194 }

1195 }

1196

1197 .header-illustration {

1198 background-position: 0 0;

1199 background-repeat: no-repeat;

1200 position: absolute;

1201 height: 200px;

1202 width: 100%;

1203 left: 0;

1204 bottom: 0;

1205

1206 &.new-user-main {

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

1208 }

1209

1210 &.confirm-main {

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

1212 }

1213

1214 &.new-user-terms {

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

1216 }

1217

1218 &.new-user-arm {

1219 height: 110px;

1220 width: 130px;

1221 left: 260px;

1222 top: 160px;

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

1224 z-index: 100;

1225 }

1226 }

1227

1228 #content.maximised {

1229 top: 0;

1230 left: 0;

1231 right: 0;

1232 bottom: 0;

1233 border: 0;

1234 z-index: 1000;

1235 }

1236

1237 #slim_container {

1238 width: 100%;

1239 }

1240

1241 #slim_container_content {

1242 max-width: 50em;

1243 background-color: #FFFFFF;

1244 margin: $lineheight/2 auto;

1245 padding: 3px;

1246 border-radius: 25px;

1247 -moz-border-radius: 25px;

1248 border: 1px solid #e6e6e6;

1249 }

1250

1251 #slim_content {

1252 margin: $lineheight/2;

1253 margin-top: 95px;

1254 max-width: 50em;

1255

1256 .content-heading {

1257 margin-bottom: 15px;

1258 }

1259 }

1260

1261 #slim_header {

1262 margin: 30px $lineheight/2;

1263 position: absolute;

1264 top: 0px;

1265 margin-right: $lineheight/4;

1266 img {

1267 vertical-align: middle;

1268 margin-bottom: $lineheight/4;

1269 margin-right: $lineheight/4;

1270 }

1271 }

1272

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

1274

1275 .content_map {

1276 position: relative;

1277 width: 45%;

1278 height: 400px;

1279 border: 1px solid #ccc;

1280 margin-bottom: $lineheight;

1281 float: right;

1282 }

1283

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

1285

1286 #trace_list {

1287 font-size: $lineheight/2;

1288 border-width: 0px;

1289 text-align: right;

1290

1291 .trace_summary {

1292 font-size: 12px;

1293 color: gray;

1294 }

1295

1296 .trace_pending {

1297 color: red;

1298 }

1299

1300 .trace_public {

1301 color: green;

1302 }

1303

1304 .trace_identifiable {

1305 color: green;

1306 }

1307

1308 .trace_trackable {

1309 color: red;

1310 }

1311

1312 .trace_private {

1313 color: red;

1314 }

1315 }

1316

1317 /* Rules for the user profile page */

1318

1319 #userinformation {

1320

1321 min-height: 100px;

1322 .userinformation-inner {

1323 float: left;

1324 }

1325 h2 {

1326 margin-top: 0;

1327 }

1328 .user-description {

1329 width: 100%;

1330 clear: both;

1331 }

1332 .deemphasize {

1333 margin: 0;

1334 }

1335 }

1336

1337 .admin-user-info small {

1338 margin-bottom: $lineheight/2;

1339 display: inline;

1340 margin-right: $lineheight;

1341 }

1342

1343 .activity-block {

1344 clear: left;

1345 border-bottom: 1px solid #ccc;

1346 padding-bottom: $lineheight;

1347 float: left;

1348 h3 {

1349 margin-bottom: $lineheight/2;

1350 }

1351 }

1352

1353 .contact-activity {

1354 margin-top: $lineheight;

1355 width: 100%;

1356 }

1357

1358 .activity-details p {

1359 margin-left: 70px;

1360 margin-bottom: 0;

1361 }

1362

1363 #friends-container .contact-activity ul {

1364 margin-left: 70px;

1365 }

1366

1367 .user-view {

1368 p#no_home_location {

1369 margin: $lineheight;

1370 }

1371 .user_thumbnail {

1372 margin-top: $lineheight/4;

1373 float: left;

1374 }

1375 }

1376

1377 /* Rules for the user map */

1378

1379 .content_map .leaflet-popup-content {

1380 margin: $lineheight/2;

1381 min-height: 50px;

1382 }

1383

1384 /* Rules for user popups on maps */

1385

1386 .user_popup {

1387 min-width: 200px;

1388 p {

1389 padding: 0 0 5px 0;

1390 margin-top: 0 0 0 60px;

1391 font-size: 12px;

1392 }

1393 img.user_thumbnail {

1394 float: left;

1395 margin: 0 $lineheight/2 0 0;

1396 }

1397 }

1398

1399 /* Rules for the user list */

1400

1401 #user_list {

1402 font-size: $lineheight/2;

1403 width: 100%;

1404

1405 tr {

1406 vertical-align: middle;

1407 }

1408

1409 p {

1410 margin-top: 0px;

1411 margin-bottom: 0px;

1412 }

1413 }

1414

1415 #user_list_actions {

1416 float: right;

1417 margin-top: $lineheight/2;

1418 }

1419

1420 /* Rules for the diary list page */

1421

1422 .diary_post {

1423 position: relative;

1424 margin-top: $lineheight/2;

1425 padding-top: $lineheight;

1426 border-top: 1px solid #ccc;

1427

1428 .post_heading {

1429 margin-bottom: $lineheight;

1430

1431 h2 {

1432 margin-top: 0;

1433 margin-bottom: $lineheight/2;

1434 font-size: 24px;

1435 }

1436 }

1437

1438 img.user_thumbnail {

1439 float: left;

1440 }

1441

1442 small.deemphasize {

1443 float: left;

1444 display: block;

1445 }

1446

1447 ul.secondary-actions {

1448 display: inline-block;

1449 }

1450 }

1451

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

1453 display: inline;

1454 }

1455

1456 /* Rules for the diary entry page */

1457

1458 .diary_entry {

1459 #map {

1460 position: relative;

1461 width: 90%;

1462 height: 400px;

1463 border: 1px solid #ccc;

1464 display: none;

1465 margin-bottom: $lineheight;

1466 }

1467 #newcomment {

1468 border-top: 1px solid #ccc;

1469 padding-top: $lineheight;

1470 margin-top: $lineheight/2;

1471 }

1472 .comments {

1473 max-width: 740px;

1474 }

1475 .diary-comment {

1476 margin-top: $lineheight/2;

1477 border-top: 1px dashed #ccc;

1478 padding-top: $lineheight/2;

1479 &:first-child {

1480 margin-top: $lineheight;

1481 padding-top: $lineheight;

1482 border-top: 1px solid #ccc;

1483 }

1484 p {

1485 margin-bottom: $lineheight/2;

1486 }

1487 .comment-heading {

1488 margin-bottom: 0;

1489 margin-top: 0;

1490 }

1491 }

1492 }

1493

1494 .diary_entry-view img.user_thumbnail {

1495 float: left;

1496 }

1497

1498 /* Rules for the log in page */

1499

1500 #login_openid_buttons {

1501 margin-bottom: 0;

1502 }

1503

1504 #login_openid_buttons li {

1505 float: left;

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

1507 }

1508

1509 /* Rules for the account confirmation page */

1510

1511 .user-terms {

1512 .legale {

1513 border: 1px solid #ccc;

1514 padding: $lineheight;

1515 margin-bottom: $lineheight;

1516 overflow: auto;

1517 height: 10em;

1518 }

1519

1520 #decline {

1521 background: $lightblue;

1522 &:hover {

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

1524 }

1525 }

1526

1527 .form-row {

1528 margin: auto;

1529 max-width: 370px;

1530 }

1531 }

1532

1533 /* Rules for the account settings page */

1534

1535 #accountForm .user_map {

1536 position: relative;

1537 width: 500px;

1538 height: 400px;

1539 border: 1px solid #ccc;

1540 }

1541

1542 #accountForm .user_image {

1543 margin-bottom: 0;

1544 }

1545

1546 #accountForm #user_image {

1547 margin-left: 20px;

1548 }

1549

1550 #accountForm ul.accountImage-options {

1551 margin-left: 120px;

1552 }

1553

1554 .nohome .location {

1555 display: none;

1556 }

1557

1558 #homerow .message {

1559 display: none;

1560 }

1561

1562 .nohome .message {

1563 display: inline !important;

1564 }

1565

1566 .content_map.settings_map {

1567 width: 50%;

1568 float: none;

1569 }

1570

1571 /* Rules for the oauth settings page */

1572

1573 .oauth_clients .buttons .oauth-edit {

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

1575 }

1576

1577 .oauth_clients .buttons .oauth-delete {

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

1579 }

1580

1581 /* Rules for messages pages */

1582

1583 .messages {

1584 width: 100%;

1585 border: 1px solid #ddd;

1586

1587 input[type="submit"] {

1588 margin: auto;

1589 }

1590 tbody tr {

1591 border-top: 1px solid #ccc;

1592 }

1593

1594 .inbox-row {

1595 background: #f8f8ff;

1596 }

1597

1598 .inbox-row-unread {

1599 background:#CBEEA7;

1600 }

1601

1602 .right {

1603 float: right;

1604 }

1605

1606 tr td,

1607 tr th {

1608 padding: $lineheight/4;

1609 }

1610 p:last-child,

1611 h2:last-child,

1612 h3:last-child,

1613 ol:last-child,

1614 ul:last-child {

1615 margin-bottom:0;

1616 }

1617 tr td {

1618 height: 30px;

1619 border-right: 1px solid $lightgrey;

1620 }

1621 }

1622

1623 .inbox-row .inbox-mark-read {

1624 display: none;

1625 }

1626

1627 .info-line {

1628 margin-bottom: $lineheight;

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

1630 border-bottom: 1px solid #ccc;

1631

1632 form, form div {

1633 display: inline;

1634 }

1635 }

1636

1637 .info-line .user_thumbnail_tiny {

1638 vertical-align: middle;

1639 }

1640

1641 .inbox-mark-unread,

1642 .inbox-mark-read,

1643 .inbox-delete {

1644 width: 1%;

1645 }

1646

1647 .inbox-row-unread .inbox-mark-unread {

1648 display: none;

1649 }

1650

1651 .message-read .message-buttons {

1652 margin-top: $lineheight;

1653 padding-top: $lineheight;

1654 border-top: 1px solid $lightgrey;

1655 }

1656

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

1658 border-radius: 0;

1659 }

1660

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

1662

1663 .error {

1664 padding: $lineheight;

1665 background-color: #ff7070;

1666 }

1667

1668 .warning {

1669 padding: $lineheight;

1670 background-color: #ffe0cc;

1671 }

1672

1673 .notice {

1674 padding: $lineheight;

1675 background-color: #CBEEA7;

1676 }

1677

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

1679

1680 .field_with_errors {

1681 padding: 2px;

1682 background-color: #ff7070;

1683 display: inline-block;

1684 }

1685

1686 .formError {

1687 display: inline-block;

1688 padding: 5px 10px;

1689 margin-top: 5px;

1690 border-radius: 4px;

1691 font-size: 12px;

1692 color: #fff;

1693 background-color: #ff7070;

1694 }

1695

1696 /* Rules for rails validation error boxes */

1697

1698 #errorExplanation {

1699 width: 400px;

1700 border: 2px solid #ff7070;

1701 padding: 0 $lineheight/2;

1702 margin-bottom: $lineheight;

1703 background-color: #f0f0f0;

1704

1705 h2 {

1706 margin: 0 -10px 10px -10px;

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

1708 font-weight: bold;

1709 font-weight: 500;

1710 font-size: 12px;

1711 background-color: #c00;

1712 color: #fff;

1713 text-align: left;

1714 }

1715

1716 p {

1717 color: #333;

1718 margin-bottom: 0px;

1719 padding: $lineheight/4;

1720 }

1721

1722 ul {

1723 padding-left: $lineheight;

1724

1725 li {

1726 font-size: 12px;

1727 list-style: disc;

1728 }

1729 }

1730 }

1731

1732 /* Rules for forms */

1733

1734 .standard-form {

1735 fieldset {

1736 margin-bottom: $lineheight;

1737 }

1738 label.standard-label {

1739 display: block;

1740 margin-bottom: $lineheight/4;

1741 font-size: $typeheight;

1742 font-weight: bold;

1743 font-weight: 500;

1744 line-height: 1.5;

1745 }

1746 label.standard-label.secondary {

1747 display: inline-block;

1748 font-weight: normal;

1749 }

1750 .form-help {

1751 font-weight: normal;

1752 }

1753 .form-column {

1754 float: left;

1755 margin-right: 20px;

1756 }

1757 .form-divider {

1758 margin-top: $lineheight;

1759 padding-top: $lineheight;

1760 border-top: 1px solid $lightgrey;

1761 }

1762 .horizontal-list .form-row {

1763 float: left;

1764 padding-right: 10px;

1765 }

1766 .form-row {

1767 margin-bottom: $lineheight/2;

1768 }

1769 .form-list {

1770 margin-bottom: 0;

1771 }

1772 .form-list li {

1773 margin-bottom: 5px;

1774 }

1775 input[type="checkbox"],

1776 input[type="radio"] {

1777 float: left;

1778 margin-top: 5px;

1779 }

1780 }

1781

1782 #remember_me_openid {

1783 display: block;

1784 }

1785

1786 input[type="checkbox"],

1787 input[type="radio"] {

1788 margin-right: 5px;

1789 }

1790

1791 input[type="text"],

1792 input[type="email"],

1793 input[type="url"],

1794 input[type="password"],

1795 textarea {

1796 border: 1px solid #ccc;

1797 padding: 2px 5px;

1798 margin: 0;

1799 width: 200px;

1800 }

1801

1802 textarea {

1803 padding: 5px;

1804 width: 100%;

1805 }

1806

1807 /* Rules for user images */

1808

1809 img.user_image {

1810 max-width: 100px;

1811 max-height: 100px;

1812 border: 1px solid #ccc;

1813 margin-bottom: $lineheight;

1814 float: left;

1815 margin-right: $lineheight;

1816 }

1817

1818 img.user_thumbnail {

1819 max-width: 50px;

1820 max-height: 50px;

1821 border: 1px solid #ccc;

1822 margin-right: $lineheight;

1823 }

1824

1825 img.user_thumbnail_tiny {

1826 max-width: 25px;

1827 max-height: 25px;

1828 border: 1px solid #ccc;

1829 }

1830

1831 /* Rules for geo microformats */

1832

1833 abbr.geo {

1834 border-bottom: none;

1835 }

1836

1837 /* Rules for RSS buttons */

1838

1839 .rsssmall {

1840 position: relative;

1841 top: 3px;

1842 }

1843

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

1845

1846 ul.secondary-actions {

1847 font-style: normal;

1848 margin-bottom: 0;

1849 margin-left: 0;

1850 &.pager {

1851 display: inline-block;

1852 margin-right: 60px;

1853 }

1854 > li {

1855 display: block;

1856 float: left;

1857 list-style: none;

1858 border-left: 1px solid #ccc;

1859 padding-left: $lineheight/2;

1860 margin-right: $lineheight/2;

1861 &:first-child {

1862 border-left: 0;

1863 padding-left: 0;

1864 }

1865 &:last-child {

1866 margin-right: 0px;

1867 }

1868 }

1869 }

1870

1871 div.secondary-actions {

1872 padding: 10px;

1873 border-top: 1px solid #ccc;

1874 text-align: center;

1875 }

1876

1877 /* Utility for managing inner content areas */

1878

1879 .inner22 { padding: $lineheight;}

1880

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

1882

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

1884

1885 .inner20 { padding: $lineheight 0;}

1886

1887 .inner02 { padding: 0 $lineheight;}

1888

1889 /* Utility for general button styles */

1890

1891 input[type="button"],

1892 input[type="submit"],

1893 input[type="reset"],

1894 a.button {

1895 cursor: pointer;

1896 border: 0;

1897 display: inline-block;

1898 line-height: 20px;

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

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

1901 min-width: 120px;

1902 margin: 0 0 $lineheight/2 0;

1903 color: white;

1904 background: $blue;

1905 text-align: center;

1906 border-radius: 2px;

1907 -moz-border-radius: 2px;

1908 &:hover {

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

1910 text-decoration: none;

1911 }

1912 &.deemphasize {

1913 background: $lightblue;

1914 &:hover {

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

1916 }

1917 }

1918 &:disabled {

1919 background: $lightgrey;

1920 &:hover {

1921 background: $lightgrey;

1922 }

1923 }

1924 &:last-child {

1925 margin-bottom: 0;

1926 }

1927 }

1928

1929 .buttons {

1930 min-width: 200px;

1931 input[type="submit"],

1932 input[type="button"],

1933 input[type="reset"],

1934 .button {

1935 box-sizing: border-box;

1936 float: left;

1937 border-radius: 0;

1938 margin:0;

1939 min-width: 75px;

1940 max-width: 180px;

1941 border-right:1px solid white;

1942 text-overflow: ellipsis;

1943 white-space: nowrap;

1944 overflow: hidden;

1945 }

1946 input:first-child,

1947 .button:first-child {

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

1949 }

1950 input:last-child,

1951 .button:last-child {

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

1953 border-right-width: 0;

1954 }

1955 input:only-child,

1956 .button:only-child,

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

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

1959 border-radius:2px;

1960 border-right-width: 0;

1961 }

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

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

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

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

1966 border-right-width: 0;

1967 }

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

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

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

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

1972 border-right-width: 1px;

1973 }

1974 }

1975

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

1977

1978 .table0,

1979 .item0 {

1980 background: $offwhite;

1981 }

1982

1983 .table1,

1984 .item1 {

1985 background: #fff;

1986 }

1987

1988 /* Rules for OpenID logo */

1989

1990 .openid_logo {

1991 vertical-align: text-bottom;

1992 border: 0;

1993 }

1994

1995 /* Rules for rich text */

1996

1997 .richtext,

1998 .prose {

1999 h1, h2 {

2000 padding-bottom: $lineheight/2;

2001 border-bottom: 1px dashed #cccccc;

2002 margin-bottom: $lineheight/2;

2003 }

2004

2005 h1 {

2006 font-size: 24px;

2007 }

2008

2009 h2 {

2010 font-size: 18px;

2011 }

2012

2013 h3 {

2014 font-size: $typeheight;

2015 }

2016

2017 code {

2018 font-size: 13px;

2019 background: #e8e8e8;

2020 padding: 2px 3px;

2021 }

2022

2023 pre {

2024 font-size: 13px;

2025 background: #e8e8e8;

2026 padding: 2px 3px;

2027

2028 code {

2029 padding: 0;

2030 }

2031 }

2032

2033 img {

2034 padding: $lineheight;

2035 background-color: $offwhite;

2036 display: block;

2037 max-width: 100%;

2038 margin: auto;

2039 }

2040

2041 blockquote {

2042 border-left: $lineheight solid $offwhite;

2043 padding-left: $lineheight;

2044 margin: 0;

2045 color: #7E7E7E;

2046 }

2047

2048 ul, ol {

2049 padding-left: $lineheight;

2050 margin-bottom: $lineheight;

2051 margin-left: $lineheight;

2052 }

2053

2054 ul li {

2055 list-style: disc;

2056 }

2057

2058 ol li {

2059 list-style: decimal;

2060 }

2061 }

2062

2063 .diary_post .richtext {

2064 margin-top: $lineheight;

2065 }

2066

2067 .comments .richtext {

2068 margin-left: 70px;

2069 margin-top: 0;

2070 }

2071

2072 /* Rules for rich text editors */

2073

2074 .richtext_container {

2075 margin-bottom: $lineheight;

2076

2077 .richtext_content {

2078 width: 50%;

2079 display: inline-block;

2080 vertical-align: top;

2081

2082 .richtext_preview {

2083 display: inline-block;

2084 padding: $lineheight;

2085 background-color: $offwhite;

2086 overflow-x: auto;

2087

2088 &.loading {

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

2090 background-repeat: no-repeat;

2091 background-position: center;

2092 }

2093

2094 > :first-child {

2095 margin-top: 0px;

2096 }

2097 }

2098 }

2099

2100 .richtext_help {

2101 display: inline-block;

2102 vertical-align: top;

2103 margin-left: 15px;

2104 background-color: #f8f8ff;

2105 padding: $lineheight/2;

2106 width: 220px;

2107

2108 ul {

2109 margin-bottom: 0;

2110 }

2111

2112 h4.heading, li {

2113 border-bottom: 1px solid #ccc;

2114 margin-bottom: $lineheight/4;

2115 padding-bottom: $lineheight/4;

2116 }

2117

2118 li h4, li span, li p {

2119 display: inline-block;

2120 vertical-align: top;

2121 font-size: 11px;

2122 }

2123

2124 li h4 {

2125 width: 40%;

2126 margin: 0;

2127 }

2128

2129 li span, li p {

2130 width: 50%;

2131 margin-left: $lineheight/2;

2132 margin-bottom: $lineheight/4;

2133 white-space: nowrap;

2134 }

2135 }

2136 }

2137

2138 /* Rules for the user notes list */

2139

2140 .note_list {

2141 tr.creator {

2142 background-color: #eeeeee;

2143 }

2144

2145 td {

2146 padding: 3px;

2147 }

2148

2149 p {

2150 margin-bottom: 0px;

2151 }

2152 }

2153

2154 /* Rules for the iD editor */

2155

2156 .id-embed {

2157 width: 100%;

2158 height: 100%;

2159 }

2160

2161 /* Rules for dropdown menus */

2162

2163 .dropdown {

2164 position: relative;

2165 }

2166

2167 .dropdown-toggle {

2168 *margin-bottom: -3px;

2169 }

2170

2171 .dropdown-toggle:active,

2172 .open .dropdown-toggle {

2173 outline: 0;

2174 }

2175

2176 .caret {

2177 display: inline-block;

2178 width: 0;

2179 height: 0;

2180 vertical-align: top;

2181 border-top: 4px solid #000000;

2182 border-right: 4px solid transparent;

2183 border-left: 4px solid transparent;

2184 content: "";

2185 }

2186

2187 .dropdown .caret {

2188 margin-top: 8px;

2189 margin-left: 2px;

2190 }

2191

2192 .dropdown-menu {

2193 position: absolute;

2194 top: 100%;

2195 left: -1px;

2196 z-index: 1000;

2197 display: none;

2198 float: left;

2199 min-width: 160px;

2200 padding: 5px 0;

2201 margin: 0;

2202 list-style: none;

2203 background-color: #ffffff;

2204 border: 1px solid #ccc;

2205 border-radius: 0 3px 3px;

2206 *border-right-width: 2px;

2207 *border-bottom-width: 2px;

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

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

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

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

2212 -moz-background-clip: padding;

2213 background-clip: padding-box;

2214 }

2215

2216 .dropdown-menu.pull-right {

2217 right: 0;

2218 left: auto;

2219 }

2220

2221 .dropdown-menu .divider {

2222 *width: 100%;

2223 height: 1px;

2224 margin: 9px 1px;

2225 *margin: -5px 0 5px;

2226 overflow: hidden;

2227 background-color: #e5e5e5;

2228 border-bottom: 1px solid #ffffff;

2229 }

2230

2231 .dropdown-menu > li > a {

2232 display: block;

2233 padding: 3px 10px;

2234 clear: both;

2235 font-weight: normal;

2236 line-height: 20px;

2237 color: #333333;

2238 white-space: nowrap;

2239 }

2240

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

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

2243 .dropdown-submenu:hover > a,

2244 .dropdown-submenu:focus > a {

2245 color: #ffffff;

2246 text-decoration: none;

2247 background-color: $green;

2248 }

2249

2250 .dropdown-menu > .active > a,

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

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

2253 color: #ffffff;

2254 text-decoration: none;

2255 background-color: $green;

2256 outline: 0;

2257 }

2258

2259 .dropdown-menu > .disabled > a,

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

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

2262 color: #999999;

2263 }

2264

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

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

2267 text-decoration: none;

2268 cursor: default;

2269 background-color: transparent;

2270 background-image: none;

2271 }

2272

2273 .open {

2274 *z-index: 1000;

2275 }

2276

2277 .open > .dropdown-menu {

2278 display: block;

2279 }

2280

2281 .dropdown-backdrop {

2282 position: fixed;

2283 top: 0;

2284 right: 0;

2285 bottom: 0;

2286 left: 0;

2287 z-index: 990;

2288 }

2289

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

2291 .site-welcome {

2292 .center {

2293 text-align: center;

2294 .sprite {

2295 float: none;

2296 margin: auto;

2297 }

2298 }

2299

2300 .sprite {

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

2302 background-size: 500px 250px;

2303 display: block;

2304 float: left;

2305 }

2306

2307 .icon-list {

2308 padding-bottom: 20px;

2309 div {

2310 margin-bottom: 10px;

2311 p {

2312 padding-top: 10px;

2313 }

2314 }

2315 }

2316 .sprite.small {

2317 width: 50px;

2318 height: 50px;

2319 }

2320

2321 .sprite.x {

2322 background-position: -50px 0;

2323 }

2324

2325 .sprite.term {

2326 margin-right: 10px;

2327 vertical-align: middle;

2328 }

2329

2330 .sprite.node {

2331 background-position: -100px 0;

2332 }

2333

2334 .sprite.way {

2335 background-position: -150px 0;

2336 }

2337

2338 .sprite.tag {

2339 background-position: -200px 0;

2340 }

2341

2342 .sprite.editor {

2343 background-position: -250px 0;

2344 }

2345

2346 .sprite.question {

2347 background-position: -300px 0;

2348 }

2349

2350 .start-mapping {

2351 margin: auto;

2352 cursor: pointer;

2353 border: none;

2354 padding: 20px 40px;

2355 font-size: 30px;

2356 text-decoration: none;

2357 }

2358

2359 .note-box {

2360 margin-top: 20px;

2361 background-color: $offwhite;

2362 }

2363

2364 .icon.note {

2365 background-color: #333;

2366 border-radius: 4px;

2367 }

2368 }

2369

2370 .site-about #content {

2371 //background-color: #000;

2372 background-color: #eee;

2373 background-position: 50% 50%;

2374 background-repeat: no-repeat;

2375 background-size: cover;

2376 background-attachment: fixed;

2377

2378 &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } }

2379 &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } }

2380 &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } }

2381 &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } }

2382 &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } }

2383 &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } }

2384

2385 .caption {

2386 max-width: 200px;

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

2388 position: fixed;

2389 text-align: right;

2390 right: 20px;

2391 bottom: 60px;

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

2393 color: #eee;

2394 opacity: 0.8;

2395 display: none;

2396 }

2397

2398 .caption a {

2399 color: white;

2400 white-space: nowrap;

2401 text-decoration: none;

2402 }

2403

2404 a.next {

2405 display: block;

2406 position: fixed;

2407 right: 10px;

2408 bottom: 10px;

2409 width: 40px;

2410 height: 40px;

2411 border-radius: 5px;

2412 text-indent: -9999px;

2413 overflow: hidden;

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

2415 background-color: #000;

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

2417 }

2418

2419 .content-inner {

2420 position: relative;

2421 color: #333;

2422 min-width: 320px;

2423 max-width: 640px;

2424

2425 .section {

2426 margin-bottom: 30px;

2427 }

2428

2429 .section:last-child {

2430 margin-bottom: 0;

2431 }

2432 }

2433

2434 .text {

2435 background: white;

2436 padding: 40px;

2437 }

2438

2439 .attr {

2440 position: relative;

2441 padding: 170px 40px 20px;

2442 background: #333;

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

2444 margin-bottom: 0;

2445 margin-top: -20px;

2446

2447 h1 {

2448 display: block;

2449 color: white;

2450 font-weight: normal;

2451 font-weight: 300;

2452 font-size: 34px;

2453 span {

2454 color: #76c551;

2455 }

2456 }

2457

2458 .user-image {

2459 position: absolute;

2460 top: 0px;

2461 right: 240px;

2462 left: 0px;

2463 height: 150px;

2464 background-position: 0 50%;

2465 background-repeat: no-repeat;

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

2467 background-size: cover;

2468 background-color: #76c551;

2469 }

2470

2471 .byosm {

2472 position: absolute;

2473 top: 0px;

2474 right: 0px;

2475 z-index: 1;

2476 width: 240px;

2477 height: 150px;

2478 padding: 20px 20px 20px 40px;

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

2480 white-space: nowrap;

2481 color: #fff;

2482 background: #76c551;

2483 }

2484

2485 .byosm span {

2486 display: inline-block;

2487 width: 20px;

2488 margin-left: -20px;

2489 }

2490 }

2491

2492 h2 {

2493 margin-bottom: 10px;

2494 }

2495

2496 .icon {

2497 width: 30px;

2498 height: 30px;

2499 margin-right: 10px;

2500 vertical-align: middle;

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

2502

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

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

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

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

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

2508 }

2509 }

2510

2511 @import 'browse';

2512

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

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

2515 display: none;

2516 }

2517 }

2518