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

1 /* Parameters */

2 $lineheight: 20px;

3 $typeheight: 14px;

5 $offwhite: #f4f4ff;

6 $blue: #7092FF;

7 $lightblue: #B8C5F0;

8 $green: #7ebc6f;

9 $grey: #CCC;

10 $red: red;

11 $lightgrey: #EEE;

12 $darkgrey: #AAA;

13 $hovercolor: 20%;

14 $headerHeight: 54px;

15 $sidebarWidth: 300px;

16 $keyline: 1px solid $lightgrey;

17 $border-radius: 3px;

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

21 /* Minimal CSS reset */

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

24 margin: 0;

25 padding: 0;

26 border: 0;

27 font-size:100%;

28 }

30 fieldset,img { border: 0; }

32 legend { color: #000; }

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

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

38 table {

39 border-collapse: collapse;

40 border-spacing: 0;

41 }

43 li { list-style: none; }

45 input,

46 select,

47 textarea,

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

50 abbr, acronym {

51 border-bottom: .1em dotted;

52 cursor: help;

53 }

55 strong { font-weight: 500; }

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

59 .clearfix:before,

60 .clearfix:after {

61 content: " ";

62 display: table;

63 }

65 .clearfix:after {

66 clear: both;

67 }

69 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

83 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

99 .fillL { background-color: white; }

100

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

102

103 * {

104 -webkit-box-sizing: border-box;

105 -moz-box-sizing: border-box;

106 box-sizing: border-box;

107 }

108

109 body {

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

111 font-size: $typeheight;

112 line-height: 1.6666;

113 color: #222;

114 background-color: #fff;

115 margin: 0px;

116 padding: 0px;

117 text-align: left;

118 height: 100%;

119 }

120

121 body.slim {

122 background-color: #f0f0f0;

123 }

124

125 h1, h2, h3 {

126 font-weight: 500;

127 line-height: 1.2;

128 }

129

130 h4, h5 { font-weight: 500; }

131

132 h1 {

133 font-size: 18px;

134 }

135

136 h2, h3 {

137 font-size: 16px;

138 }

139

140 p > img {

141 width: auto;

142 max-width: 100%;

143 }

144

145 small, aside {

146 font-size: 12px;

147 }

148

149 #container { position: relative; }

150

151 .column-1 {

152 width: 50%;

153 margin: 0 0 $lineheight/2 0;

154 }

155

156 .small_icon {

157 vertical-align: middle;

158 margin-right: $lineheight/4;

159 }

160

161 .red { color: $red; }

162

163 /* Rules for icons */

164

165 .icon {

166 display:inline-block;

167 vertical-align:top;

168 width:20px;

169 height:20px;

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

171 text-indent:-9999px;

172 overflow:hidden;

173 }

174

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

191

192 /* Rules for links */

193

194 a {

195 color: #00f;

196 text-decoration: none;

197 -webkit-appearance: none;

198 outline: 0;

199 &:hover {

200 text-decoration: underline;

201 }

202 }

203

204 /* Rules for horizontal lines */

205

206 hr {

207 border: none;

208 background-color: #ccc;

209 color: #ccc;

210 height: 1px;

211 }

212

213 /* General styles for tables */

214

215 table {

216 width: 100%;

217 margin-bottom: $lineheight;

218 th, td {

219 text-align: left;

220 padding: $lineheight/4;

221 line-height: $lineheight;

222 }

223 th {

224 font-weight: 500;

225 vertical-align: top;

226 }

227 td {

228 vertical-align: middle;

229 }

230 }

231

232 /* Utility for de-emphasizing content */

233

234 .deemphasize {

235 color: #999;

236 a {

237 color: $blue;

238 }

239 }

240

241 /* Rules for the header */

242

243 #menu-icon {

244 display: none !important;

245 float: right;

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

247 background-size: 30px 30px;

248 display: block;

249 width: 30px;

250 height: 30px;

251 margin: 14px 10px 0 0;

252 opacity: 0.6;

253 }

254

255 header {

256 height: $headerHeight;

257 position: relative;

258 z-index: 1001;

259 font-size: 13px;

260

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

262 display: inline-block;

263 }

264

265 > * {

266 height: 100%;

267 padding: $lineheight/2 $lineheight;

268 }

269

270 h1, nav.primary {

271 float: left;

272 }

273

274 a, a:hover {

275 text-decoration: none;

276 }

277

278 img.logo {

279 width: 30px;

280 height: 30px;

281 margin-top: -4px;

282 vertical-align: middle;

283 }

284

285 h1 {

286 margin: 0;

287 padding: ($lineheight - 3) $lineheight ($lineheight + 3);

288

289 a {

290 color: #000;

291 }

292 }

293 }

294

295 nav.primary {

296 > ul {

297 $border: 1px solid $green;

298

299 border: $border;

300 border-radius: $border-radius;

301

302 > li {

303 border-right: $border;

304 float: left;

305 &:last-child {

306 border-right: 0;

307 }

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

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

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

311 &.dropdown {

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

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

314 }

315 }

316 }

317

318 a.tab,

319 .dropdown-toggle {

320 display: inline-block;

321 font-weight: 500;

322 color: $green;

323 padding: 5px 15px;

324 }

325

326 .dropdown-toggle {

327 padding: 5px 6px;

328 }

329

330 .caret {

331 border-top-color: $green;

332 margin-top: 10px;

333 }

334

335 .disabled a {

336 color: #ccc;

337 cursor: default;

338

339 .caret {

340 border-top-color: #ccc;

341 }

342 }

343

344 > ul li.current {

345 background-color: $green;

346

347 .tab {

348 color: #fff;

349 }

350

351 .caret {

352 border-top-color: #fff;

353 }

354 }

355 }

356

357 nav.secondary {

358 position: absolute;

359 right: 0;

360

361 > ul {

362 vertical-align: middle;

363 a, .dropdown-toggle {

364 display: inline-block;

365 text-decoration: none;

366 color: $darkgrey;

367 padding: 5px;

368

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

370 }

371 }

372

373 > ul li.current a {

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

375 }

376

377 .user-menu {

378 $border: 1px solid $grey;

379

380 font-weight: 500;

381 border: $border;

382 border-radius: $border-radius;

383 margin-left: 10px;

384

385 > li {

386 border-right: $border;

387 float: left;

388 &:last-child {

389 border-right: 0;

390

391 > a {

392 border-radius: 0 $border-radius $border-radius 0;

393 }

394 }

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

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

397 }

398

399 a {

400 padding: 5px 15px;

401

402 }

403

404 &.logged-in > a {

405 padding: 0;

406 > .user-button {

407 padding: 5px 10px 5px 6px;

408 display: inline-block;

409 color: $darkgrey;

410 }

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

412 }

413 }

414

415 .caret {

416 border-top-color: $grey;

417 margin-top: 9px;

418 }

419

420 img.user_thumbnail_tiny {

421 border: 0;

422 vertical-align: top;

423 margin-top: 0px;

424 margin: 3px 0 0 3px;

425 border-radius: 2px;

426 }

427

428 #inboxanchor {

429 display: inline-block;

430 vertical-align: top;

431 height: 25px;

432 margin: 3px 0 3px 3px;

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

434 line-height: 20px;

435 border-radius: 2;

436 }

437

438 .dropdown-menu {

439 left: auto;

440 right: -1px;

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

442

443 .count-number {

444 float: right;

445 padding: 0 5px;

446 margin: 0;

447 }

448 }

449 }

450

451 #compact-secondary-nav {

452 display: none;

453 ul li a {

454 width: 100%;

455 color: #333;

456 &:hover { color: #fff; }

457 }

458 }

459

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

461 #compact-secondary-nav {

462 display: inline-block;

463 }

464 .compact-hide {

465 display: none;

466 }

467 }

468

469 /* Utility for styling notification numbers */

470

471 .count-number {

472 padding: 2px $lineheight/4;

473 border-radius: 2px;

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

475 margin: 0 2px;

476 font-size: 11px;

477 color: #333;

478 }

479

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

481

482 #noscript {

483 z-index: 20000000;

484 position: absolute;

485 top: 15px;

486 left: 15px;

487 }

488

489 /* Rules for bootstrap tooltips */

490

491 .tooltip {

492 position: absolute;

493 display: none;

494 color: #333;

495 text-align: left;

496 font-size: 12px;

497 max-width: 250px;

498 }

499

500 .tooltip.in {

501 opacity: 0.8;

502 z-index: 1030;

503 height: auto;

504 display: block;

505 }

506

507 .tooltip.top {

508 margin-top: -10px;

509 text-align: center;

510 }

511

512 .tooltip.right {

513 margin-left: 10px;

514 }

515

516 .tooltip.bottom {

517 margin-top: 10px;

518 text-align: center;

519 }

520

521 .tooltip.left {

522 margin-left: -10px;

523 text-align: right;

524 }

525

526 .tooltip-inner {

527 display: inline-block;

528 padding: 10px;

529 font-weight: normal;

530 background-color: white;

531 }

532

533 .tooltip-arrow {

534 position: absolute;

535 width: 0;

536 height: 0;

537 border-color: transparent;

538 border-style: solid;

539 }

540

541 .tooltip.top .tooltip-arrow {

542 bottom: -5px;

543 left: 50%;

544 margin-left: -5px;

545 border-top-color: white;

546 border-width: 5px 5px 0;

547 }

548

549 .tooltip.right .tooltip-arrow {

550 top: 50%;

551 left: -5px;

552 margin-top: -5px;

553 border-right-color: white;

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

555 }

556

557 .tooltip.left .tooltip-arrow {

558 top: 50%;

559 right: -5px;

560 margin-top: -5px;

561 border-left-color: white;

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

563 }

564

565 .tooltip.bottom .tooltip-arrow {

566 top: -5px;

567 left: 50%;

568 margin-left: -5px;

569 border-bottom-color: white;

570 border-width: 0 5px 5px;

571 }

572

573 /* Rules for Leaflet maps */

574

575 .leaflet-control .control-button {

576 display: block;

577 height: 40px;

578 width: 40px;

579 background-color: #333;

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

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

582 margin-bottom: 10px;

583 outline: none;

584

585 &:hover {

586 background-color: black;

587 }

588

589 &.active {

590 background-color: #9ed485;

591 }

592

593 &.disabled {

594 background-color: #333;

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

596 cursor: default;

597 }

598

599 .icon {

600 margin: 10px;

601 }

602 }

603

604 .leaflet-control .zoomin,

605 .control-layers .control-button {

606 margin-bottom: 0px;

607 border-radius: 4px 0 0 0;

608 }

609

610 .leaflet-control .zoomout,

611 .control-key .control-button {

612 margin-bottom: 0;

613 border-radius: 0;

614 }

615

616 .control-locate .control-button,

617 .control-share .control-button {

618 border-radius: 0 0 0 4px;

619 }

620

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

622

623 .map-layout {

624 #content {

625 position: absolute;

626 top: $headerHeight;

627 bottom: 0;

628 width: 100%;

629 }

630

631 #sidebar, #map {

632 position: relative;

633 height: 100%;

634 overflow-x: hidden;

635 overflow-y: auto;

636 }

637

638 #sidebar {

639 float: left;

640 width: $sidebarWidth;

641 background: #fff;

642

643 h2, h3, h4 {

644 padding: $lineheight $lineheight $lineheight/2;

645 }

646

647 h4 {

648 font-weight: normal;

649 color: #666;

650 font-size: 12px;

651 }

652

653 .icon.close {

654 float: right;

655 cursor: pointer;

656 }

657

658 -webkit-transition: margin 300ms linear;

659 -moz-transition: margin 300ms linear;

660 transition: margin 300ms linear;

661 }

662

663 .overlay-sidebar #sidebar {

664 position: absolute;

665 z-index: 1000;

666 height: auto;

667 border-radius: 5px;

668 overflow: hidden;

669 margin-top: $typeheight;

670 margin-left: $typeheight;

671 }

672

673 .welcome {

674 p {

675 padding: $lineheight/2 $lineheight $lineheight;

676 font-size: 110%;

677 font-weight: 300;

678 }

679

680 .button {

681 width: 50%;

682 float: left;

683 margin: 0;

684 border-radius: 0;

685 font-weight: 400;

686 padding: .6em;

687

688 &.learn-more {

689 border-right: 1px solid #fff;

690 }

691 }

692 }

693

694 #map {

695 height: 100%;

696 overflow: hidden;

697 }

698

699 #map-ui {

700 display: none;

701 position: relative;

702 float: right;

703 width: 250px;

704 height: 100%;

705 background: white;

706 overflow: auto;

707

708 .section {

709 border-bottom: 1px solid #DDD;

710 padding: 10px 20px;

711 }

712

713 a.close-button {

714 float: right;

715 padding:5px;

716 font-size:20px;

717 line-height:10px;

718 color:#222;

719 border:1px solid #ddd;

720 }

721 }

722 }

723

724 .layers-ui,

725 .share-ui {

726 li:last-child {

727 margin-bottom: 0;

728 }

729 }

730

731 .layers-ui {

732 .base-layers {

733 .leaflet-container {

734 width: 100%;

735 height: 50px;

736 cursor: pointer;

737 }

738

739 li {

740 overflow: hidden;

741 border-radius: 3px;

742 border: 2px solid #fff;

743 margin-bottom: 8px;

744 position: relative;

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

746

747 label {

748 position: absolute;

749 top: 0;

750 left: 0;

751 padding: 2px 6px;

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

753 cursor: pointer;

754 font-weight: 500;

755 font-size: 16px;

756 text-stroke: 2px #fff;

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

758 text-shadow:

759 -2px -2px 1px #fff,

760 2px -2px 1px #fff,

761 -2px 2px 1px #fff,

762 2px 2px 1px #fff;

763 input[type="radio"] {

764 display: none;

765 }

766 }

767

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

769 &:hover {

770 border-color: $grey;

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

772 }

773 }

774 }

775

776 .overlay-layers {

777 p {

778 font-size: 13px;

779 margin-bottom: 8px;

780 }

781 }

782 }

783

784 .share-ui {

785 .share-tabs {

786 margin-bottom: 10px;

787

788 a {

789 color: #fff;

790 text-decoration: none;

791 background-color: $lightblue;

792 padding: 5px 10px;

793 }

794

795 a:first-child {

796 border-right: 1px solid #fff;

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

798 }

799

800 a:last-child {

801 border-left: 1px solid #fff;

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

803 }

804

805 a.active {

806 background-color: $blue;

807 }

808 }

809

810 .share-tab {

811 display: none;

812 }

813

814 .share-link {

815 input[type=text],

816 textarea {

817 width: 100%;

818 font-family: monospace;

819 font-size: small;

820 line-height: 1.3;

821 }

822 }

823

824 .share-image {

825 label {

826 margin-right: 10px;

827 }

828 }

829

830 #embed_html {

831 resize: vertical;

832 }

833

834 #mapnik_scale {

835 width: 100px;

836 }

837 }

838

839 .leaflet-top {

840 top: $lineheight !important;

841 .leaflet-control {

842 margin-right: 0px !important;

843 margin-top: 0px !important;

844 }

845 }

846

847 .leaflet-popup-scrolled {

848 padding-right: $lineheight;

849 border-bottom: 0px !important;

850 border-top: 0px !important;

851 }

852

853 .leaflet-popup-content-wrapper {

854 border-radius: 4px !important;

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

856 }

857

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

859

860 #attribution {

861 display: none;

862 }

863

864 .attribution_license,

865 .attribution_project {

866 text-align: left;

867 }

868

869 .attribution_notice {

870 text-align: center;

871 }

872

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

874

875 /* Rules for the sidebar */

876

877 .sidebar_heading {

878 position: relative;

879 padding: $lineheight/2 $lineheight;

880 // background: $offwhite;

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

882 > .close {

883 float: right;

884 margin-top: 2px;

885 cursor: pointer;

886 }

887 }

888

889 #browse_status {

890 p {

891 padding: $lineheight;

892 }

893 }

894

895 #sidebar_content {

896 .loader,

897 .load_more {

898 text-align: center;

899 margin: $lineheight auto;

900 width: $lineheight;

901 display: block;

902 }

903 }

904

905 /* Rules for the search box */

906

907 #search_form {

908 position: relative;

909 padding: $lineheight/2;

910 background-color: $lightgrey;

911

912 #query_wrapper {

913 position: relative;

914 overflow: hidden;

915 }

916

917 input {

918 width: 100%;

919 height: 30px;

920 border-right: none;

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

922

923 transition: 300ms linear;

924 -webkit-transition: 300ms linear;

925 -moz-transition: 300ms linear;

926 }

927

928 input:focus {

929 outline: none;

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

931 }

932

933 input[type=submit] {

934 float: right;

935 width: auto;

936 min-width: 0;

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

938 }

939

940 #describe_location {

941 position: absolute;

942 top: 6px;

943 right: 6px;

944 font-size: 10px;

945 color: $blue;

946 }

947 }

948

949 /* Rules for donation request box */

950

951 a.donate {

952 display: block;

953 padding: $lineheight/4 $lineheight;

954 border: 1px solid $green;

955 font-size: $typeheight;

956 line-height: 1.4;

957 text-align: center;

958 border-radius: 2px;

959 color: #222;

960 margin: $lineheight/2 $lineheight;

961

962 &:hover {

963 background: $green;

964 text-decoration: none;

965 }

966 }

967

968 /* Rules for rotating sidebar ads */

969

970 .ad-container {

971 display: block;

972 height: 120px;

973 margin: auto;

974 overflow: hidden;

975 position: relative;

976 border-bottom: 1px solid #ccc;

977

978 a {

979 display: block;

980 width: 165px;

981 margin: auto;

982 }

983

984 .ad {

985 height: 100px;

986 border: 0;

987 background: #fff;

988 }

989 }

990

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

992

993 #mapkey {

994 .mapkey-table-key img {

995 display: block;

996 margin-left: auto;

997 margin-right: auto;

998 }

999 td {

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

1001 }

1002 }

1003

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

1005

1006 .search_results_entry {

1007 ul li {

1008 border-bottom: $keyline;

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

1010 }

1011

1012 .search_details {

1013 display: block;

1014 float: right;

1015 text-align: right;

1016 margin-top: 0.2em;

1017 margin-left: 0.5em;

1018 }

1019 }

1020

1021 .search_results_error {

1022 color: #f00;

1023 }

1024

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

1026

1027 #browse_content {

1028 position: relative;

1029 .browse_show_list.button {

1030 position: absolute;

1031 left: $lineheight;

1032 right: $lineheight;

1033 bottom: -40px;

1034 margin-bottom: 0;

1035 }

1036 a.more-details {

1037 position: absolute;

1038 top: 0;

1039 right: $lineheight;

1040 }

1041 ul li {

1042 margin-bottom: 0;

1043 }

1044 }

1045

1046 /* Rules for entity history */

1047 #sidebar_content {

1048 .browse_details {

1049 position: relative;

1050 border-bottom: $keyline;

1051 }

1052 }

1053

1054 .browse_status {

1055 display: none;

1056 }

1057

1058 /* Rules for the changeset list shown by the history tab */

1059

1060 #sidebar .changesets {

1061 li {

1062 padding: $lineheight;

1063 border-bottom: $keyline;

1064 cursor: pointer;

1065

1066 &.selected { background: #FFFFE6; }

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

1068

1069 h4 {

1070 padding: 0;

1071 }

1072 }

1073

1074 .comment a {

1075 font-weight: 500;

1076 color: #000;

1077 }

1078 }

1079

1080 /* Rules for the data browser */

1081

1082 #sidebar_content {

1083 .browse-section {

1084 padding: 10px 20px;

1085

1086 h4 {

1087 padding: 0;

1088 }

1089

1090 .paginate {

1091 float: right;

1092 padding: 1px 6px;

1093 border: 1px solid #eee;

1094 border-radius: 3px;

1095 }

1096 }

1097

1098 .paginate ul, .note-comments ul {

1099 padding-left: 20px;

1100 }

1101

1102 .browse-field {

1103 margin-bottom: 10px;

1104

1105 h4 {

1106 padding: 5px 0 5px 10px;

1107 font-size: 12px;

1108 border: 1px solid #CCC;

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

1110 background-color: #F6F6F6;

1111 }

1112

1113 p {

1114 padding: 7px 10px;

1115 font-size: 12px;

1116 background-color: #FFF;

1117 border: 1px solid #CCC;

1118 border-top: 0;

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

1120 }

1121 }

1122

1123 .browse-tag-list {

1124 background-color: #F6F6F6;

1125 border-top: 1px solid #ddd;

1126 border-bottom: 1px solid #ddd;

1127 font-size: 12px;

1128 margin-left: -$lineheight;

1129 margin-right: -$lineheight;

1130

1131 li {

1132 border-bottom: 1px solid #ddd;

1133 }

1134

1135 li:last-child {

1136 border-bottom: 0;

1137 }

1138

1139 .browse-tag-k,

1140 .browse-tag-v {

1141 display: inline-block;

1142 width: 50%;

1143 float: left;

1144 padding: 6px 10px 6px $lineheight;

1145 }

1146

1147 .browse-tag-k {

1148 font-weight: 500;

1149 background-color: #F6F6F6;

1150 }

1151

1152 .browse-tag-v {

1153 border-left: 1px solid #ddd;

1154 background-color: #fff;

1155 }

1156 }

1157 }

1158

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

1160

1161 .export_bounds, .export_button {

1162 text-align: center;

1163 }

1164

1165 .export_area_inputs {

1166 margin-bottom: $lineheight/2;

1167 input[type="text"] {

1168 width: 80px;

1169 margin-bottom: 5px;

1170 }

1171 }

1172

1173 .export_bound {

1174 margin: $lineheight/4;

1175 }

1176

1177 #export_osm {

1178 span.small-title {

1179 font-weight: 500;

1180 display: block;

1181 font-size: 14px;

1182 padding-bottom: 5px;

1183 }

1184

1185 dl {

1186 padding-left: 30px;

1187 font-size: 13px;

1188 color: #666;

1189 dd {

1190 margin-left: 0;

1191 margin-bottom: 10px;

1192 }

1193 }

1194 }

1195

1196 /* Rules for edit pages */

1197

1198 .site-edit {

1199 #content {

1200 position: absolute;

1201 top: $headerHeight;

1202 bottom: 0;

1203 width: 100%;

1204 }

1205

1206 #map {

1207 height: 100%;

1208 }

1209 }

1210

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

1212

1213 .content-heading {

1214 background: $lightgrey;

1215

1216 h1 { font-size: 22px; }

1217 }

1218

1219 .content-body {

1220 h1, h2, h3, p {

1221 margin-bottom: $lineheight;

1222 }

1223

1224 h1, h2, h3 {

1225 margin-top: $lineheight/2;

1226 }

1227 }

1228

1229 .content-inner {

1230 position: relative;

1231 max-width: 900px;

1232 margin: auto;

1233 padding: $lineheight;

1234 }

1235

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

1237

1238 .user-new,

1239 .user-create,

1240 .user-terms {

1241 .content-body .content-inner {

1242 padding: 0;

1243 }

1244 }

1245

1246 .user-new,

1247 .user-create,

1248 .user-terms,

1249 .user-confirm {

1250 .content-heading .content-inner {

1251 height: 200px;

1252 }

1253 }

1254

1255 .header-illustration {

1256 background-position: 0 0;

1257 background-repeat: no-repeat;

1258 position: absolute;

1259 height: 200px;

1260 width: 100%;

1261 left: 0;

1262 bottom: 0;

1263

1264 &.new-user-main {

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

1266 }

1267

1268 &.confirm-main {

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

1270 }

1271

1272 &.new-user-terms {

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

1274 }

1275

1276 &.new-user-arm {

1277 height: 110px;

1278 width: 130px;

1279 left: 260px;

1280 top: 160px;

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

1282 z-index: 100;

1283 }

1284 }

1285

1286 #content.maximised {

1287 top: 0;

1288 left: 0;

1289 right: 0;

1290 bottom: 0;

1291 border: 0;

1292 z-index: 1000;

1293 }

1294

1295 #slim_container {

1296 width: 100%;

1297 }

1298

1299 #slim_container_content {

1300 max-width: 50em;

1301 background-color: #FFFFFF;

1302 margin: $lineheight/2 auto;

1303 padding: 3px;

1304 border-radius: 25px;

1305 -moz-border-radius: 25px;

1306 border: 1px solid #e6e6e6;

1307 }

1308

1309 #slim_content {

1310 margin: $lineheight/2;

1311 margin-top: 95px;

1312 max-width: 50em;

1313

1314 .content-heading {

1315 margin-bottom: 15px;

1316 }

1317 }

1318

1319 #slim_header {

1320 margin: 30px $lineheight/2;

1321 position: absolute;

1322 top: 0px;

1323 margin-right: $lineheight/4;

1324 img {

1325 vertical-align: middle;

1326 margin-bottom: $lineheight/4;

1327 margin-right: $lineheight/4;

1328 }

1329 }

1330

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

1332

1333 .content_map {

1334 position: relative;

1335 width: 45%;

1336 height: 400px;

1337 border: 1px solid #ccc;

1338 margin-bottom: $lineheight;

1339 float: right;

1340 }

1341

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

1343

1344 #trace_list {

1345 font-size: $lineheight/2;

1346 border-width: 0px;

1347 text-align: right;

1348

1349 .trace_summary {

1350 font-size: 12px;

1351 color: gray;

1352 }

1353

1354 .trace_pending {

1355 color: red;

1356 }

1357

1358 .trace_public {

1359 color: green;

1360 }

1361

1362 .trace_identifiable {

1363 color: green;

1364 }

1365

1366 .trace_trackable {

1367 color: red;

1368 }

1369

1370 .trace_private {

1371 color: red;

1372 }

1373 }

1374

1375 /* Rules for the user profile page */

1376

1377 #userinformation {

1378

1379 min-height: 100px;

1380 .userinformation-inner {

1381 float: left;

1382 }

1383 h2 {

1384 margin-top: 0;

1385 }

1386 .user-description {

1387 width: 100%;

1388 clear: both;

1389 }

1390 .deemphasize {

1391 margin: 0;

1392 }

1393 }

1394

1395 .admin-user-info small {

1396 margin-bottom: $lineheight/2;

1397 display: inline;

1398 margin-right: $lineheight;

1399 }

1400

1401 .activity-block {

1402 clear: left;

1403 border-bottom: 1px solid #ccc;

1404 padding-bottom: $lineheight;

1405 float: left;

1406 h3 {

1407 margin-bottom: $lineheight/2;

1408 }

1409 }

1410

1411 .contact-activity {

1412 margin-top: $lineheight;

1413 width: 100%;

1414 }

1415

1416 .activity-details p {

1417 margin-left: 70px;

1418 margin-bottom: 0;

1419 }

1420

1421 #friends-container .contact-activity ul {

1422 margin-left: 70px;

1423 }

1424

1425 .user-view {

1426 p#no_home_location {

1427 margin: $lineheight;

1428 }

1429 .user_thumbnail {

1430 margin-top: $lineheight/4;

1431 float: left;

1432 }

1433 }

1434

1435 /* Rules for the user map */

1436

1437 .content_map .leaflet-popup-content {

1438 margin: $lineheight/2;

1439 min-height: 50px;

1440 }

1441

1442 /* Rules for user popups on maps */

1443

1444 .user_popup {

1445 min-width: 200px;

1446 p {

1447 padding: 0 0 5px 0;

1448 margin-top: 0 0 0 60px;

1449 font-size: 12px;

1450 }

1451 img.user_thumbnail {

1452 float: left;

1453 margin: 0 $lineheight/2 0 0;

1454 }

1455 }

1456

1457 /* Rules for the user list */

1458

1459 #user_list {

1460 font-size: $lineheight/2;

1461 width: 100%;

1462

1463 tr {

1464 vertical-align: middle;

1465 }

1466

1467 p {

1468 margin-top: 0px;

1469 margin-bottom: 0px;

1470 }

1471 }

1472

1473 #user_list_actions {

1474 float: right;

1475 margin-top: $lineheight/2;

1476 }

1477

1478 /* Rules for the diary list page */

1479

1480 .diary_post {

1481 position: relative;

1482 margin-top: $lineheight/2;

1483 padding-top: $lineheight;

1484 border-top: 1px solid #ccc;

1485

1486 .post_heading {

1487 margin-bottom: $lineheight;

1488

1489 h2 {

1490 margin-top: 0;

1491 margin-bottom: $lineheight/2;

1492 font-size: 24px;

1493 }

1494 }

1495

1496 img.user_thumbnail {

1497 float: left;

1498 }

1499

1500 small.deemphasize {

1501 float: left;

1502 display: block;

1503 }

1504

1505 ul.secondary-actions {

1506 display: inline-block;

1507 }

1508 }

1509

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

1511 display: inline;

1512 }

1513

1514 /* Rules for the diary entry page */

1515

1516 .diary_entry {

1517 #map {

1518 position: relative;

1519 width: 90%;

1520 height: 400px;

1521 border: 1px solid #ccc;

1522 display: none;

1523 margin-bottom: $lineheight;

1524 }

1525 #newcomment {

1526 border-top: 1px solid #ccc;

1527 padding-top: $lineheight;

1528 margin-top: $lineheight/2;

1529 }

1530 .comments {

1531 max-width: 740px;

1532 }

1533 .diary-comment {

1534 margin-top: $lineheight/2;

1535 border-top: 1px dashed #ccc;

1536 padding-top: $lineheight/2;

1537 &:first-child {

1538 margin-top: $lineheight;

1539 padding-top: $lineheight;

1540 border-top: 1px solid #ccc;

1541 }

1542 p {

1543 margin-bottom: $lineheight/2;

1544 }

1545 .comment-heading {

1546 margin-bottom: 0;

1547 margin-top: 0;

1548 }

1549 }

1550 }

1551

1552 .diary_entry-view img.user_thumbnail {

1553 float: left;

1554 }

1555

1556 /* Rules for the log in page */

1557

1558 #login_openid_buttons {

1559 margin-bottom: 0;

1560 }

1561

1562 #login_openid_buttons li {

1563 float: left;

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

1565 }

1566

1567 /* Rules for the account confirmation page */

1568

1569 .user-terms {

1570 .legale {

1571 border: 1px solid #ccc;

1572 padding: $lineheight;

1573 margin-bottom: $lineheight;

1574 overflow: auto;

1575 height: 10em;

1576 }

1577

1578 #decline {

1579 background: $lightblue;

1580 &:hover {

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

1582 }

1583 }

1584

1585 .form-row {

1586 margin: auto;

1587 max-width: 370px;

1588 }

1589 }

1590

1591 /* Rules for the account settings page */

1592

1593 #accountForm .user_map {

1594 position: relative;

1595 width: 500px;

1596 height: 400px;

1597 border: 1px solid #ccc;

1598 }

1599

1600 #accountForm .user_image {

1601 margin-bottom: 0;

1602 }

1603

1604 #accountForm #user_image {

1605 margin-left: 20px;

1606 }

1607

1608 #accountForm ul.accountImage-options {

1609 margin-left: 120px;

1610 }

1611

1612 .nohome .location {

1613 display: none;

1614 }

1615

1616 #homerow .message {

1617 display: none;

1618 }

1619

1620 .nohome .message {

1621 display: inline !important;

1622 }

1623

1624 .content_map.settings_map {

1625 width: 50%;

1626 float: none;

1627 }

1628

1629 /* Rules for the oauth settings page */

1630

1631 .oauth_clients .buttons .oauth-edit {

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

1633 }

1634

1635 .oauth_clients .buttons .oauth-delete {

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

1637 }

1638

1639 /* Rules for messages pages */

1640

1641 .messages {

1642 width: 100%;

1643 border: 1px solid #ddd;

1644

1645 input[type="submit"] {

1646 margin: auto;

1647 }

1648 tbody tr {

1649 border-top: 1px solid #ccc;

1650 }

1651

1652 .inbox-row {

1653 background: #f8f8ff;

1654 }

1655

1656 .inbox-row-unread {

1657 background:#CBEEA7;

1658 }

1659

1660 .right {

1661 float: right;

1662 }

1663

1664 tr td,

1665 tr th {

1666 padding: $lineheight/4;

1667 }

1668 p:last-child,

1669 h2:last-child,

1670 h3:last-child,

1671 ol:last-child,

1672 ul:last-child {

1673 margin-bottom:0;

1674 }

1675 tr td {

1676 height: 30px;

1677 border-right: 1px solid $lightgrey;

1678 }

1679 }

1680

1681 .inbox-row .inbox-mark-read {

1682 display: none;

1683 }

1684

1685 .info-line {

1686 margin-bottom: $lineheight;

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

1688 border-bottom: 1px solid #ccc;

1689

1690 form, form div {

1691 display: inline;

1692 }

1693 }

1694

1695 .info-line .user_thumbnail_tiny {

1696 vertical-align: middle;

1697 }

1698

1699 .inbox-mark-unread,

1700 .inbox-mark-read,

1701 .inbox-delete {

1702 width: 1%;

1703 }

1704

1705 .inbox-row-unread .inbox-mark-unread {

1706 display: none;

1707 }

1708

1709 .message-read .message-buttons {

1710 margin-top: $lineheight;

1711 padding-top: $lineheight;

1712 border-top: 1px solid $lightgrey;

1713 }

1714

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

1716 border-radius: 0;

1717 }

1718

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

1720

1721 .error {

1722 padding: $lineheight;

1723 background-color: #ff7070;

1724 }

1725

1726 .warning {

1727 padding: $lineheight;

1728 background-color: #ffe0cc;

1729 }

1730

1731 .notice {

1732 padding: $lineheight;

1733 background-color: #CBEEA7;

1734 }

1735

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

1737

1738 .field_with_errors {

1739 padding: 2px;

1740 background-color: #ff7070;

1741 display: inline-block;

1742 }

1743

1744 .formError {

1745 display: inline-block;

1746 padding: 5px 10px;

1747 margin-top: 5px;

1748 border-radius: 4px;

1749 font-size: 12px;

1750 color: #fff;

1751 background-color: #ff7070;

1752 }

1753

1754 /* Rules for rails validation error boxes */

1755

1756 #errorExplanation {

1757 width: 400px;

1758 border: 2px solid #ff7070;

1759 padding: 0 $lineheight/2;

1760 margin-bottom: $lineheight;

1761 background-color: #f0f0f0;

1762

1763 h2 {

1764 margin: 0 -10px 10px -10px;

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

1766 font-weight: 500;

1767 font-size: 12px;

1768 background-color: #c00;

1769 color: #fff;

1770 text-align: left;

1771 }

1772

1773 p {

1774 color: #333;

1775 margin-bottom: 0px;

1776 padding: $lineheight/4;

1777 }

1778

1779 ul {

1780 padding-left: $lineheight;

1781

1782 li {

1783 font-size: 12px;

1784 list-style: disc;

1785 }

1786 }

1787 }

1788

1789 /* Rules for forms */

1790

1791 .standard-form {

1792 fieldset {

1793 margin-bottom: $lineheight;

1794 }

1795 label.standard-label {

1796 display: block;

1797 margin-bottom: $lineheight/4;

1798 font-size: $typeheight;

1799 font-weight: 500;

1800 line-height: 1.5;

1801 }

1802 label.standard-label.secondary {

1803 display: inline-block;

1804 font-weight: normal;

1805 }

1806 .form-help {

1807 font-weight: normal;

1808 }

1809 .form-column {

1810 float: left;

1811 margin-right: 20px;

1812 }

1813 .form-divider {

1814 margin-top: $lineheight;

1815 padding-top: $lineheight;

1816 border-top: 1px solid $lightgrey;

1817 }

1818 .horizontal-list .form-row {

1819 float: left;

1820 padding-right: 10px;

1821 }

1822 .form-row {

1823 margin-bottom: $lineheight/2;

1824 }

1825 .form-list {

1826 margin-bottom: 0;

1827 }

1828 .form-list li {

1829 margin-bottom: 5px;

1830 }

1831 input[type="checkbox"],

1832 input[type="radio"] {

1833 float: left;

1834 margin-top: 5px;

1835 }

1836 }

1837

1838 #remember_me_openid {

1839 display: block;

1840 }

1841

1842 input[type="checkbox"],

1843 input[type="radio"] {

1844 margin-right: 5px;

1845 }

1846

1847 input[type="text"],

1848 input[type="email"],

1849 input[type="url"],

1850 input[type="password"],

1851 textarea {

1852 border: 1px solid #ccc;

1853 padding: 2px 5px;

1854 margin: 0;

1855 width: 200px;

1856 }

1857

1858 textarea {

1859 padding: 5px;

1860 width: 100%;

1861 }

1862

1863 /* Rules for user images */

1864

1865 img.user_image {

1866 max-width: 100px;

1867 max-height: 100px;

1868 border: 1px solid #ccc;

1869 margin-bottom: $lineheight;

1870 float: left;

1871 margin-right: $lineheight;

1872 }

1873

1874 img.user_thumbnail {

1875 max-width: 50px;

1876 max-height: 50px;

1877 border: 1px solid #ccc;

1878 margin-right: $lineheight;

1879 }

1880

1881 img.user_thumbnail_tiny {

1882 max-width: 25px;

1883 max-height: 25px;

1884 border: 1px solid #ccc;

1885 }

1886

1887 /* Rules for geo microformats */

1888

1889 abbr.geo {

1890 border-bottom: none;

1891 }

1892

1893 /* Rules for RSS buttons */

1894

1895 .rsssmall {

1896 position: relative;

1897 top: 3px;

1898 }

1899

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

1901

1902 ul.secondary-actions {

1903 font-style: normal;

1904 margin-bottom: 0;

1905 margin-left: 0;

1906 &.pager {

1907 display: inline-block;

1908 margin-right: 60px;

1909 }

1910 > li {

1911 display: block;

1912 float: left;

1913 list-style: none;

1914 border-left: 1px solid #ccc;

1915 padding-left: $lineheight/2;

1916 margin-right: $lineheight/2;

1917 &:first-child {

1918 border-left: 0;

1919 padding-left: 0;

1920 }

1921 &:last-child {

1922 margin-right: 0px;

1923 }

1924 }

1925 }

1926

1927 div.secondary-actions {

1928 padding: 10px;

1929 border-top: 1px solid #ccc;

1930 text-align: center;

1931 }

1932

1933 /* Utility for managing inner content areas */

1934

1935 .inner22 { padding: $lineheight;}

1936

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

1938

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

1940

1941 .inner20 { padding: $lineheight 0;}

1942

1943 .inner02 { padding: 0 $lineheight;}

1944

1945 /* Utility for general button styles */

1946

1947 input[type="button"],

1948 input[type="submit"],

1949 input[type="reset"],

1950 a.button {

1951 cursor: pointer;

1952 border: 0;

1953 display: inline-block;

1954 line-height: 20px;

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

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

1957 min-width: 120px;

1958 margin: 0 0 $lineheight/2 0;

1959 color: white;

1960 background: $blue;

1961 text-align: center;

1962 border-radius: 2px;

1963 -moz-border-radius: 2px;

1964 &:hover {

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

1966 text-decoration: none;

1967 }

1968 &.deemphasize {

1969 background: $lightblue;

1970 &:hover {

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

1972 }

1973 }

1974 &:disabled {

1975 background: $lightgrey;

1976 &:hover {

1977 background: $lightgrey;

1978 }

1979 }

1980 &:last-child {

1981 margin-bottom: 0;

1982 }

1983 }

1984

1985 .buttons {

1986 min-width: 200px;

1987 input[type="submit"],

1988 input[type="button"],

1989 input[type="reset"],

1990 .button {

1991 box-sizing: border-box;

1992 float: left;

1993 border-radius: 0;

1994 margin:0;

1995 min-width: 100px;

1996 max-width: 180px;

1997 border-right:1px solid white;

1998 text-overflow: ellipsis;

1999 white-space: nowrap;

2000 overflow: hidden;

2001 }

2002 input:first-child,

2003 .button:first-child {

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

2005 }

2006 input:last-child,

2007 .button:last-child {

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

2009 border-right-width: 0;

2010 }

2011 input:only-child,

2012 .button:only-child,

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

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

2015 border-radius:2px;

2016 border-right-width: 0;

2017 }

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

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

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

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

2022 border-right-width: 0;

2023 }

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

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

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

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

2028 border-right-width: 1px;

2029 }

2030 }

2031

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

2033

2034 .table0,

2035 .item0 {

2036 background: $offwhite;

2037 }

2038

2039 .table1,

2040 .item1 {

2041 background: #fff;

2042 }

2043

2044 /* Rules for OpenID logo */

2045

2046 .openid_logo {

2047 vertical-align: text-bottom;

2048 border: 0;

2049 }

2050

2051 /* Rules for rich text */

2052

2053 .richtext,

2054 .prose {

2055 h1, h2 {

2056 padding-bottom: $lineheight/2;

2057 border-bottom: 1px dashed #cccccc;

2058 margin-bottom: $lineheight/2;

2059 }

2060

2061 h1 {

2062 font-size: 24px;

2063 }

2064

2065 h2 {

2066 font-size: 18px;

2067 }

2068

2069 h3 {

2070 font-size: $typeheight;

2071 }

2072

2073 code {

2074 font-size: 13px;

2075 background: #e8e8e8;

2076 padding: 2px 3px;

2077 }

2078

2079 pre {

2080 font-size: 13px;

2081 background: #e8e8e8;

2082 padding: 2px 3px;

2083

2084 code {

2085 padding: 0;

2086 }

2087 }

2088

2089 img {

2090 padding: $lineheight;

2091 background-color: $offwhite;

2092 display: block;

2093 max-width: 100%;

2094 margin: auto;

2095 }

2096

2097 blockquote {

2098 border-left: $lineheight solid $offwhite;

2099 padding-left: $lineheight;

2100 margin: 0;

2101 color: #7E7E7E;

2102 }

2103

2104 ul, ol {

2105 padding-left: $lineheight;

2106 margin-bottom: $lineheight;

2107 margin-left: $lineheight;

2108 }

2109

2110 ul li {

2111 list-style: disc;

2112 }

2113

2114 ol li {

2115 list-style: decimal;

2116 }

2117 }

2118

2119 .diary_post .richtext {

2120 margin-top: $lineheight;

2121 }

2122

2123 .comments .richtext {

2124 margin-left: 70px;

2125 margin-top: 0;

2126 }

2127

2128 /* Rules for rich text editors */

2129

2130 .richtext_container {

2131 margin-bottom: $lineheight;

2132

2133 .richtext_content {

2134 width: 50%;

2135 display: inline-block;

2136 vertical-align: top;

2137

2138 .richtext_preview {

2139 display: inline-block;

2140 padding: $lineheight;

2141 background-color: $offwhite;

2142 overflow-x: auto;

2143

2144 &.loading {

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

2146 background-repeat: no-repeat;

2147 background-position: center;

2148 }

2149

2150 > :first-child {

2151 margin-top: 0px;

2152 }

2153 }

2154 }

2155

2156 .richtext_help {

2157 display: inline-block;

2158 vertical-align: top;

2159 margin-left: 15px;

2160 background-color: #f8f8ff;

2161 padding: $lineheight/2;

2162 width: 220px;

2163

2164 ul {

2165 margin-bottom: 0;

2166 }

2167

2168 h4.heading, li {

2169 border-bottom: 1px solid #ccc;

2170 margin-bottom: $lineheight/4;

2171 padding-bottom: $lineheight/4;

2172 }

2173

2174 li h4, li span, li p {

2175 display: inline-block;

2176 vertical-align: top;

2177 font-size: 11px;

2178 }

2179

2180 li h4 {

2181 width: 40%;

2182 margin: 0;

2183 }

2184

2185 li span, li p {

2186 width: 50%;

2187 margin-left: $lineheight/2;

2188 margin-bottom: $lineheight/4;

2189 white-space: nowrap;

2190 }

2191 }

2192 }

2193

2194 /* Rules for the user notes list */

2195

2196 .note_list {

2197 tr.creator {

2198 background-color: #eeeeee;

2199 }

2200

2201 td {

2202 padding: 3px;

2203 }

2204

2205 p {

2206 margin-bottom: 0px;

2207 }

2208 }

2209

2210 /* Rules for the notes interface */

2211

2212 .leaflet-popup-content .note {

2213 padding-top: $lineheight/2;

2214 }

2215

2216 .leaflet-popup-content .note {

2217 h2 {

2218 margin-bottom: $lineheight/2;

2219 }

2220

2221 div {

2222 margin-top: $lineheight/2;

2223 }

2224

2225 .permalink {

2226 position: absolute;

2227 top: $lineheight/4;

2228 left: $lineheight/4;

2229 min-width: 15px;

2230 min-height: 15px;

2231 }

2232

2233 .permalink span {

2234 display: none;

2235 padding-left: $lineheight;

2236 }

2237

2238 .permalink:hover span {

2239 display: block;

2240 }

2241

2242 .warning {

2243 display: block;

2244 background-color: #ffe0cc;

2245 padding: 4px 6px;

2246 margin-bottom: $lineheight/2;

2247 }

2248

2249 .comment_body {

2250 margin-top: 2px;

2251 margin-bottom: 2px;

2252

2253 p {

2254 margin-top: 0px;

2255 margin-bottom: 0px;

2256 }

2257 }

2258

2259 .comment {

2260 width: 100%;

2261 height: 100px;

2262 }

2263

2264 .buttons {

2265 margin-top: $lineheight/4;

2266 text-align: right;

2267 }

2268 }

2269

2270 /* Rules for the iD editor */

2271

2272 .id-embed {

2273 width: 100%;

2274 height: 100%;

2275 }

2276

2277 /* Rules for dropdown menus */

2278

2279 .dropdown {

2280 position: relative;

2281 }

2282

2283 .dropdown-toggle {

2284 *margin-bottom: -3px;

2285 }

2286

2287 .dropdown-toggle:active,

2288 .open .dropdown-toggle {

2289 outline: 0;

2290 }

2291

2292 .caret {

2293 display: inline-block;

2294 width: 0;

2295 height: 0;

2296 vertical-align: top;

2297 border-top: 4px solid #000000;

2298 border-right: 4px solid transparent;

2299 border-left: 4px solid transparent;

2300 content: "";

2301 }

2302

2303 .dropdown .caret {

2304 margin-top: 8px;

2305 margin-left: 2px;

2306 }

2307

2308 .dropdown-menu {

2309 position: absolute;

2310 top: 100%;

2311 left: -1px;

2312 z-index: 1000;

2313 display: none;

2314 float: left;

2315 min-width: 160px;

2316 padding: 5px 0;

2317 margin: 0;

2318 list-style: none;

2319 background-color: #ffffff;

2320 border: 1px solid #ccc;

2321 border-radius: 0 3px 3px;

2322 *border-right-width: 2px;

2323 *border-bottom-width: 2px;

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

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

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

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

2328 -moz-background-clip: padding;

2329 background-clip: padding-box;

2330 }

2331

2332 .dropdown-menu.pull-right {

2333 right: 0;

2334 left: auto;

2335 }

2336

2337 .dropdown-menu .divider {

2338 *width: 100%;

2339 height: 1px;

2340 margin: 9px 1px;

2341 *margin: -5px 0 5px;

2342 overflow: hidden;

2343 background-color: #e5e5e5;

2344 border-bottom: 1px solid #ffffff;

2345 }

2346

2347 .dropdown-menu > li > a {

2348 display: block;

2349 padding: 3px 10px;

2350 clear: both;

2351 font-weight: normal;

2352 line-height: 20px;

2353 color: #333333;

2354 white-space: nowrap;

2355 }

2356

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

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

2359 .dropdown-submenu:hover > a,

2360 .dropdown-submenu:focus > a {

2361 color: #ffffff;

2362 text-decoration: none;

2363 background-color: $green;

2364 }

2365

2366 .dropdown-menu > .active > a,

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

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

2369 color: #ffffff;

2370 text-decoration: none;

2371 background-color: $green;

2372 outline: 0;

2373 }

2374

2375 .dropdown-menu > .disabled > a,

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

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

2378 color: #999999;

2379 }

2380

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

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

2383 text-decoration: none;

2384 cursor: default;

2385 background-color: transparent;

2386 background-image: none;

2387 }

2388

2389 .open {

2390 *z-index: 1000;

2391 }

2392

2393 .open > .dropdown-menu {

2394 display: block;

2395 }

2396

2397 .dropdown-backdrop {

2398 position: fixed;

2399 top: 0;

2400 right: 0;

2401 bottom: 0;

2402 left: 0;

2403 z-index: 990;

2404 }

2405

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

2407 .site-welcome {

2408 .center {

2409 text-align: center;

2410 .sprite {

2411 float: none;

2412 margin: auto;

2413 }

2414 }

2415

2416 .sprite {

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

2418 background-size: 500px 250px;

2419 display: block;

2420 float: left;

2421 }

2422

2423 .icon-list {

2424 padding-bottom: 20px;

2425 div {

2426 margin-bottom: 10px;

2427 p {

2428 padding-top: 10px;

2429 }

2430 }

2431 }

2432 .sprite.small {

2433 width: 50px;

2434 height: 50px;

2435 }

2436

2437 .sprite.x {

2438 background-position: -50px 0;

2439 }

2440

2441 .sprite.term {

2442 margin-right: 10px;

2443 vertical-align: middle;

2444 }

2445

2446 .sprite.node {

2447 background-position: -100px 0;

2448 }

2449

2450 .sprite.way {

2451 background-position: -150px 0;

2452 }

2453

2454 .sprite.tag {

2455 background-position: -200px 0;

2456 }

2457

2458 .sprite.editor {

2459 background-position: -250px 0;

2460 }

2461

2462 .sprite.question {

2463 background-position: -300px 0;

2464 }

2465

2466 .start-mapping {

2467 margin: auto;

2468 cursor: pointer;

2469 border: none;

2470 padding: 20px 40px;

2471 font-size: 30px;

2472 text-decoration: none;

2473 }

2474

2475 .note-box {

2476 margin-top: 20px;

2477 background-color: $offwhite;

2478 }

2479

2480 .icon.note {

2481 background-color: #333;

2482 border-radius: 4px;

2483 }

2484 }

2485

2486 .site-about #content {

2487 //background-color: #000;

2488 background-color: #eee;

2489 background-position: 50% 50%;

2490 background-repeat: no-repeat;

2491 background-size: cover;

2492 background-attachment: fixed;

2493

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

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

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

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

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

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

2500

2501 .caption {

2502 max-width: 200px;

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

2504 position: fixed;

2505 text-align: right;

2506 right: 20px;

2507 bottom: 60px;

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

2509 color: #eee;

2510 opacity: 0.8;

2511 display: none;

2512 }

2513

2514 .caption a {

2515 color: white;

2516 white-space: nowrap;

2517 text-decoration: none;

2518 }

2519

2520 a.next {

2521 display: block;

2522 position: fixed;

2523 right: 10px;

2524 bottom: 10px;

2525 width: 40px;

2526 height: 40px;

2527 border-radius: 5px;

2528 text-indent: -9999px;

2529 overflow: hidden;

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

2531 background-color: #000;

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

2533 }

2534

2535 .content-inner {

2536 position: relative;

2537 color: #333;

2538 min-width: 320px;

2539 max-width: 640px;

2540

2541 .section {

2542 margin-bottom: 30px;

2543 }

2544

2545 .section:last-child {

2546 margin-bottom: 0;

2547 }

2548 }

2549

2550 .text {

2551 background: white;

2552 padding: 40px;

2553 }

2554

2555 .attr {

2556 position: relative;

2557 padding: 170px 40px 20px;

2558 background: #333;

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

2560 margin-bottom: 0;

2561 margin-top: -20px;

2562

2563 h1 {

2564 display: block;

2565 color: white;

2566 font-weight: 300;

2567 font-size: 34px;

2568 span {

2569 color: #76c551;

2570 }

2571 }

2572

2573 .user-image {

2574 position: absolute;

2575 top: 0px;

2576 right: 240px;

2577 left: 0px;

2578 height: 150px;

2579 background-position: 0 50%;

2580 background-repeat: no-repeat;

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

2582 background-size: cover;

2583 background-color: #76c551;

2584 }

2585

2586 .byosm {

2587 position: absolute;

2588 top: 0px;

2589 right: 0px;

2590 z-index: 1;

2591 width: 240px;

2592 height: 150px;

2593 padding: 20px 20px 20px 40px;

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

2595 white-space: nowrap;

2596 color: #fff;

2597 background: #76c551;

2598 }

2599

2600 .byosm span {

2601 display: inline-block;

2602 width: 20px;

2603 margin-left: -20px;

2604 }

2605 }

2606

2607 h2 {

2608 margin-bottom: 10px;

2609 }

2610

2611 .icon {

2612 width: 30px;

2613 height: 30px;

2614 margin-right: 10px;

2615 vertical-align: middle;

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

2617

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

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

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

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

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

2623 }

2624 }

2625

2626 @import 'browse';

2627

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

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

2630 display: none;

2631 }

2632 }

2633