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 position: absolute;

655 right: $lineheight;

656 cursor: pointer;

657 }

658

659 -webkit-transition: margin 300ms linear;

660 -moz-transition: margin 300ms linear;

661 transition: margin 300ms linear;

662 }

663

664 .overlay-sidebar #sidebar {

665 position: absolute;

666 z-index: 1000;

667 height: auto;

668 border-radius: 5px;

669 overflow: hidden;

670 margin-top: $typeheight;

671 margin-left: $typeheight;

672 }

673

674 .welcome {

675 p {

676 padding: $lineheight/2 $lineheight $lineheight;

677 font-size: 110%;

678 font-weight: 300;

679 }

680

681 .button {

682 width: 50%;

683 float: left;

684 margin: 0;

685 border-radius: 0;

686 font-weight: 400;

687 padding: .6em;

688

689 &.learn-more {

690 border-right: 1px solid #fff;

691 }

692 }

693 }

694

695 #map {

696 height: 100%;

697 overflow: hidden;

698 }

699

700 #map-ui {

701 display: none;

702 position: relative;

703 float: right;

704 width: 250px;

705 height: 100%;

706 background: white;

707 overflow: auto;

708

709 .section {

710 border-bottom: 1px solid #DDD;

711 padding: 10px 20px;

712 }

713

714 a.close-button {

715 float: right;

716 padding:5px;

717 font-size:20px;

718 line-height:10px;

719 color:#222;

720 border:1px solid #ddd;

721 }

722 }

723 }

724

725 .layers-ui,

726 .share-ui {

727 li:last-child {

728 margin-bottom: 0;

729 }

730 }

731

732 .layers-ui {

733 .base-layers {

734 .leaflet-container {

735 width: 100%;

736 height: 50px;

737 cursor: pointer;

738 }

739

740 li {

741 overflow: hidden;

742 border-radius: 3px;

743 border: 2px solid #fff;

744 margin-bottom: 8px;

745 position: relative;

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

747

748 label {

749 position: absolute;

750 top: 0;

751 left: 0;

752 padding: 2px 6px;

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

754 cursor: pointer;

755 font-weight: 500;

756 font-size: 16px;

757 text-stroke: 2px #fff;

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

759 text-shadow:

760 -2px -2px 1px #fff,

761 2px -2px 1px #fff,

762 -2px 2px 1px #fff,

763 2px 2px 1px #fff;

764 input[type="radio"] {

765 display: none;

766 }

767 }

768

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

770 &:hover {

771 border-color: $grey;

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

773 }

774 }

775 }

776

777 .overlay-layers {

778 p {

779 font-size: 13px;

780 margin-bottom: 8px;

781 }

782 }

783 }

784

785 .share-ui {

786 .share-tabs {

787 margin-bottom: 10px;

788

789 a {

790 color: #fff;

791 text-decoration: none;

792 background-color: $lightblue;

793 padding: 5px 10px;

794 }

795

796 a:first-child {

797 border-right: 1px solid #fff;

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

799 }

800

801 a:last-child {

802 border-left: 1px solid #fff;

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

804 }

805

806 a.active {

807 background-color: $blue;

808 }

809 }

810

811 .share-tab {

812 display: none;

813 }

814

815 .share-link {

816 input[type=text],

817 textarea {

818 width: 100%;

819 font-family: monospace;

820 font-size: small;

821 line-height: 1.3;

822 }

823 }

824

825 .share-image {

826 label {

827 margin-right: 10px;

828 }

829 }

830

831 #embed_html {

832 resize: vertical;

833 }

834

835 #mapnik_scale {

836 width: 100px;

837 }

838 }

839

840 .leaflet-top {

841 top: $lineheight !important;

842 .leaflet-control {

843 margin-right: 0px !important;

844 margin-top: 0px !important;

845 }

846 }

847

848 .leaflet-popup-scrolled {

849 padding-right: $lineheight;

850 border-bottom: 0px !important;

851 border-top: 0px !important;

852 }

853

854 .leaflet-popup-content-wrapper {

855 border-radius: 4px !important;

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

857 }

858

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

860

861 #attribution {

862 display: none;

863 }

864

865 .attribution_license,

866 .attribution_project {

867 text-align: left;

868 }

869

870 .attribution_notice {

871 text-align: center;

872 }

873

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

875

876 /* Rules for the sidebar */

877

878 .sidebar_heading {

879 position: relative;

880 padding: $lineheight/2 $lineheight;

881 // background: $offwhite;

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

883 > .close {

884 float: right;

885 margin-top: 2px;

886 cursor: pointer;

887 }

888 }

889

890 #browse_status {

891 p {

892 padding: $lineheight;

893 }

894 }

895

896 #sidebar_content {

897 .loader,

898 .load_more {

899 text-align: center;

900 margin: $lineheight auto;

901 width: $lineheight;

902 display: block;

903 }

904 }

905

906 /* Rules for the search box */

907

908 #search_form {

909 position: relative;

910 padding: $lineheight/2;

911 background-color: $lightgrey;

912

913 #query_wrapper {

914 position: relative;

915 overflow: hidden;

916 }

917

918 input {

919 width: 100%;

920 height: 30px;

921 border-right: none;

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

923

924 transition: 300ms linear;

925 -webkit-transition: 300ms linear;

926 -moz-transition: 300ms linear;

927 }

928

929 input:focus {

930 outline: none;

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

932 }

933

934 input[type=submit] {

935 float: right;

936 width: auto;

937 min-width: 0;

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

939 }

940

941 #describe_location {

942 position: absolute;

943 top: 6px;

944 right: 6px;

945 font-size: 10px;

946 color: $blue;

947 }

948 }

949

950 /* Rules for donation request box */

951

952 a.donate {

953 display: block;

954 padding: $lineheight/4 $lineheight;

955 border: 1px solid $green;

956 font-size: $typeheight;

957 line-height: 1.4;

958 text-align: center;

959 border-radius: 2px;

960 color: #222;

961 margin: $lineheight/2 $lineheight;

962

963 &:hover {

964 background: $green;

965 text-decoration: none;

966 }

967 }

968

969 /* Rules for rotating sidebar ads */

970

971 .ad-container {

972 display: block;

973 height: 120px;

974 margin: auto;

975 overflow: hidden;

976 position: relative;

977 border-bottom: 1px solid #ccc;

978

979 a {

980 display: block;

981 width: 165px;

982 margin: auto;

983 }

984

985 .ad {

986 height: 100px;

987 border: 0;

988 background: #fff;

989 }

990 }

991

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

993

994 #mapkey {

995 .mapkey-table-key img {

996 display: block;

997 margin-left: auto;

998 margin-right: auto;

999 }

1000 td {

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

1002 }

1003 }

1004

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

1006

1007 .search_results_entry {

1008 ul li {

1009 border-bottom: $keyline;

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

1011 }

1012

1013 .search_details {

1014 display: block;

1015 float: right;

1016 text-align: right;

1017 margin-top: 0.2em;

1018 margin-left: 0.5em;

1019 }

1020 }

1021

1022 .search_results_error {

1023 color: #f00;

1024 }

1025

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

1027

1028 #browse_content {

1029 position: relative;

1030 .browse_show_list.button {

1031 position: absolute;

1032 left: $lineheight;

1033 right: $lineheight;

1034 bottom: -40px;

1035 margin-bottom: 0;

1036 }

1037 a.more-details {

1038 position: absolute;

1039 top: 0;

1040 right: $lineheight;

1041 }

1042 ul li {

1043 margin-bottom: 0;

1044 }

1045 }

1046

1047 /* Rules for entity history */

1048 #sidebar_content {

1049 .browse_details {

1050 position: relative;

1051 border-bottom: $keyline;

1052 }

1053 }

1054

1055 .browse_status {

1056 display: none;

1057 }

1058

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

1060

1061 #sidebar .changesets {

1062 li {

1063 padding: $lineheight;

1064 border-bottom: $keyline;

1065 cursor: pointer;

1066

1067 &.selected { background: #FFFFE6; }

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

1069

1070 h4 {

1071 padding: 0;

1072 }

1073 }

1074

1075 .comment a {

1076 font-weight: 500;

1077 color: #000;

1078 }

1079 }

1080

1081 /* Rules for the data browser */

1082

1083 #sidebar_content {

1084 .browse-section {

1085 padding: 10px 20px;

1086

1087 h4 {

1088 padding: 0;

1089 }

1090

1091 .paginate {

1092 float: right;

1093 padding: 1px 6px;

1094 border: 1px solid #eee;

1095 border-radius: 3px;

1096 }

1097 }

1098

1099 .paginate ul, .note-comments ul {

1100 padding-left: 20px;

1101 }

1102

1103 .browse-field {

1104 margin-bottom: 10px;

1105

1106 h4 {

1107 padding: 5px 0 5px 10px;

1108 font-size: 12px;

1109 border: 1px solid #CCC;

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

1111 background-color: #F6F6F6;

1112 }

1113

1114 p {

1115 padding: 7px 10px;

1116 font-size: 12px;

1117 background-color: #FFF;

1118 border: 1px solid #CCC;

1119 border-top: 0;

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

1121 }

1122 }

1123

1124 .browse-tag-list {

1125 background-color: #F6F6F6;

1126 border-top: 1px solid #ddd;

1127 border-bottom: 1px solid #ddd;

1128 font-size: 12px;

1129 margin-left: -$lineheight;

1130 margin-right: -$lineheight;

1131

1132 li {

1133 border-bottom: 1px solid #ddd;

1134 }

1135

1136 li:last-child {

1137 border-bottom: 0;

1138 }

1139

1140 .browse-tag-k,

1141 .browse-tag-v {

1142 display: inline-block;

1143 width: 50%;

1144 float: left;

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

1146 }

1147

1148 .browse-tag-k {

1149 font-weight: 500;

1150 background-color: #F6F6F6;

1151 }

1152

1153 .browse-tag-v {

1154 border-left: 1px solid #ddd;

1155 background-color: #fff;

1156 }

1157 }

1158 }

1159

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

1161

1162 .export_bounds, .export_button {

1163 text-align: center;

1164 }

1165

1166 .export_area_inputs {

1167 margin-bottom: $lineheight/2;

1168 input[type="text"] {

1169 width: 80px;

1170 margin-bottom: 5px;

1171 }

1172 }

1173

1174 .export_bound {

1175 margin: $lineheight/4;

1176 }

1177

1178 #export_osm {

1179 span.small-title {

1180 font-weight: 500;

1181 display: block;

1182 font-size: 14px;

1183 padding-bottom: 5px;

1184 }

1185

1186 dl {

1187 padding-left: 30px;

1188 font-size: 13px;

1189 color: #666;

1190 dd {

1191 margin-left: 0;

1192 margin-bottom: 10px;

1193 }

1194 }

1195 }

1196

1197 /* Rules for edit pages */

1198

1199 .site-edit {

1200 #content {

1201 position: absolute;

1202 top: $headerHeight;

1203 bottom: 0;

1204 width: 100%;

1205 }

1206

1207 #map {

1208 height: 100%;

1209 }

1210 }

1211

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

1213

1214 .content-heading {

1215 background: $lightgrey;

1216

1217 h1 { font-size: 22px; }

1218 }

1219

1220 .content-body {

1221 h1, h2, h3, p {

1222 margin-bottom: $lineheight;

1223 }

1224

1225 h1, h2, h3 {

1226 margin-top: $lineheight/2;

1227 }

1228 }

1229

1230 .content-inner {

1231 position: relative;

1232 max-width: 900px;

1233 margin: auto;

1234 padding: $lineheight;

1235 }

1236

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

1238

1239 .user-new,

1240 .user-create,

1241 .user-terms {

1242 .content-body .content-inner {

1243 padding: 0;

1244 }

1245 }

1246

1247 .user-new,

1248 .user-create,

1249 .user-terms,

1250 .user-confirm {

1251 .content-heading .content-inner {

1252 height: 200px;

1253 }

1254 }

1255

1256 .header-illustration {

1257 background-position: 0 0;

1258 background-repeat: no-repeat;

1259 position: absolute;

1260 height: 200px;

1261 width: 100%;

1262 left: 0;

1263 bottom: 0;

1264

1265 &.new-user-main {

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

1267 }

1268

1269 &.confirm-main {

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

1271 }

1272

1273 &.new-user-terms {

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

1275 }

1276

1277 &.new-user-arm {

1278 height: 110px;

1279 width: 130px;

1280 left: 260px;

1281 top: 160px;

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

1283 z-index: 100;

1284 }

1285 }

1286

1287 #content.maximised {

1288 top: 0;

1289 left: 0;

1290 right: 0;

1291 bottom: 0;

1292 border: 0;

1293 z-index: 1000;

1294 }

1295

1296 #slim_container {

1297 width: 100%;

1298 }

1299

1300 #slim_container_content {

1301 max-width: 50em;

1302 background-color: #FFFFFF;

1303 margin: $lineheight/2 auto;

1304 padding: 3px;

1305 border-radius: 25px;

1306 -moz-border-radius: 25px;

1307 border: 1px solid #e6e6e6;

1308 }

1309

1310 #slim_content {

1311 margin: $lineheight/2;

1312 margin-top: 95px;

1313 max-width: 50em;

1314

1315 .content-heading {

1316 margin-bottom: 15px;

1317 }

1318 }

1319

1320 #slim_header {

1321 margin: 30px $lineheight/2;

1322 position: absolute;

1323 top: 0px;

1324 margin-right: $lineheight/4;

1325 img {

1326 vertical-align: middle;

1327 margin-bottom: $lineheight/4;

1328 margin-right: $lineheight/4;

1329 }

1330 }

1331

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

1333

1334 .content_map {

1335 position: relative;

1336 width: 45%;

1337 height: 400px;

1338 border: 1px solid #ccc;

1339 margin-bottom: $lineheight;

1340 float: right;

1341 }

1342

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

1344

1345 #trace_list {

1346 font-size: $lineheight/2;

1347 border-width: 0px;

1348 text-align: right;

1349

1350 .trace_summary {

1351 font-size: 12px;

1352 color: gray;

1353 }

1354

1355 .trace_pending {

1356 color: red;

1357 }

1358

1359 .trace_public {

1360 color: green;

1361 }

1362

1363 .trace_identifiable {

1364 color: green;

1365 }

1366

1367 .trace_trackable {

1368 color: red;

1369 }

1370

1371 .trace_private {

1372 color: red;

1373 }

1374 }

1375

1376 /* Rules for the user profile page */

1377

1378 #userinformation {

1379

1380 min-height: 100px;

1381 .userinformation-inner {

1382 float: left;

1383 }

1384 h2 {

1385 margin-top: 0;

1386 }

1387 .user-description {

1388 width: 100%;

1389 clear: both;

1390 }

1391 .deemphasize {

1392 margin: 0;

1393 }

1394 }

1395

1396 .admin-user-info small {

1397 margin-bottom: $lineheight/2;

1398 display: inline;

1399 margin-right: $lineheight;

1400 }

1401

1402 .activity-block {

1403 clear: left;

1404 border-bottom: 1px solid #ccc;

1405 padding-bottom: $lineheight;

1406 float: left;

1407 h3 {

1408 margin-bottom: $lineheight/2;

1409 }

1410 }

1411

1412 .contact-activity {

1413 margin-top: $lineheight;

1414 width: 100%;

1415 }

1416

1417 .activity-details p {

1418 margin-left: 70px;

1419 margin-bottom: 0;

1420 }

1421

1422 #friends-container .contact-activity ul {

1423 margin-left: 70px;

1424 }

1425

1426 .user-view {

1427 p#no_home_location {

1428 margin: $lineheight;

1429 }

1430 .user_thumbnail {

1431 margin-top: $lineheight/4;

1432 float: left;

1433 }

1434 }

1435

1436 /* Rules for the user map */

1437

1438 .content_map .leaflet-popup-content {

1439 margin: $lineheight/2;

1440 min-height: 50px;

1441 }

1442

1443 /* Rules for user popups on maps */

1444

1445 .user_popup {

1446 min-width: 200px;

1447 p {

1448 padding: 0 0 5px 0;

1449 margin-top: 0 0 0 60px;

1450 font-size: 12px;

1451 }

1452 img.user_thumbnail {

1453 float: left;

1454 margin: 0 $lineheight/2 0 0;

1455 }

1456 }

1457

1458 /* Rules for the user list */

1459

1460 #user_list {

1461 font-size: $lineheight/2;

1462 width: 100%;

1463

1464 tr {

1465 vertical-align: middle;

1466 }

1467

1468 p {

1469 margin-top: 0px;

1470 margin-bottom: 0px;

1471 }

1472 }

1473

1474 #user_list_actions {

1475 float: right;

1476 margin-top: $lineheight/2;

1477 }

1478

1479 /* Rules for the diary list page */

1480

1481 .diary_post {

1482 position: relative;

1483 margin-top: $lineheight/2;

1484 padding-top: $lineheight;

1485 border-top: 1px solid #ccc;

1486

1487 .post_heading {

1488 margin-bottom: $lineheight;

1489

1490 h2 {

1491 margin-top: 0;

1492 margin-bottom: $lineheight/2;

1493 font-size: 24px;

1494 }

1495 }

1496

1497 img.user_thumbnail {

1498 float: left;

1499 }

1500

1501 small.deemphasize {

1502 float: left;

1503 display: block;

1504 }

1505

1506 ul.secondary-actions {

1507 display: inline-block;

1508 }

1509 }

1510

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

1512 display: inline;

1513 }

1514

1515 /* Rules for the diary entry page */

1516

1517 .diary_entry {

1518 #map {

1519 position: relative;

1520 width: 90%;

1521 height: 400px;

1522 border: 1px solid #ccc;

1523 display: none;

1524 margin-bottom: $lineheight;

1525 }

1526 #newcomment {

1527 border-top: 1px solid #ccc;

1528 padding-top: $lineheight;

1529 margin-top: $lineheight/2;

1530 }

1531 .comments {

1532 max-width: 740px;

1533 }

1534 .diary-comment {

1535 margin-top: $lineheight/2;

1536 border-top: 1px dashed #ccc;

1537 padding-top: $lineheight/2;

1538 &:first-child {

1539 margin-top: $lineheight;

1540 padding-top: $lineheight;

1541 border-top: 1px solid #ccc;

1542 }

1543 p {

1544 margin-bottom: $lineheight/2;

1545 }

1546 .comment-heading {

1547 margin-bottom: 0;

1548 margin-top: 0;

1549 }

1550 }

1551 }

1552

1553 .diary_entry-view img.user_thumbnail {

1554 float: left;

1555 }

1556

1557 /* Rules for the log in page */

1558

1559 #login_openid_buttons {

1560 margin-bottom: 0;

1561 }

1562

1563 #login_openid_buttons li {

1564 float: left;

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

1566 }

1567

1568 /* Rules for the account confirmation page */

1569

1570 .user-terms {

1571 .legale {

1572 border: 1px solid #ccc;

1573 padding: $lineheight;

1574 margin-bottom: $lineheight;

1575 overflow: auto;

1576 height: 10em;

1577 }

1578

1579 #decline {

1580 background: $lightblue;

1581 &:hover {

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

1583 }

1584 }

1585

1586 .form-row {

1587 margin: auto;

1588 max-width: 370px;

1589 }

1590 }

1591

1592 /* Rules for the account settings page */

1593

1594 #accountForm .user_map {

1595 position: relative;

1596 width: 500px;

1597 height: 400px;

1598 border: 1px solid #ccc;

1599 }

1600

1601 #accountForm .user_image {

1602 margin-bottom: 0;

1603 }

1604

1605 #accountForm #user_image {

1606 margin-left: 20px;

1607 }

1608

1609 #accountForm ul.accountImage-options {

1610 margin-left: 120px;

1611 }

1612

1613 .nohome .location {

1614 display: none;

1615 }

1616

1617 #homerow .message {

1618 display: none;

1619 }

1620

1621 .nohome .message {

1622 display: inline !important;

1623 }

1624

1625 .content_map.settings_map {

1626 width: 50%;

1627 float: none;

1628 }

1629

1630 /* Rules for the oauth settings page */

1631

1632 .oauth_clients .buttons .oauth-edit {

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

1634 }

1635

1636 .oauth_clients .buttons .oauth-delete {

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

1638 }

1639

1640 /* Rules for messages pages */

1641

1642 .messages {

1643 width: 100%;

1644 border: 1px solid #ddd;

1645

1646 input[type="submit"] {

1647 margin: auto;

1648 }

1649 tbody tr {

1650 border-top: 1px solid #ccc;

1651 }

1652

1653 .inbox-row {

1654 background: #f8f8ff;

1655 }

1656

1657 .inbox-row-unread {

1658 background:#CBEEA7;

1659 }

1660

1661 .right {

1662 float: right;

1663 }

1664

1665 tr td,

1666 tr th {

1667 padding: $lineheight/4;

1668 }

1669 p:last-child,

1670 h2:last-child,

1671 h3:last-child,

1672 ol:last-child,

1673 ul:last-child {

1674 margin-bottom:0;

1675 }

1676 tr td {

1677 height: 30px;

1678 border-right: 1px solid $lightgrey;

1679 }

1680 }

1681

1682 .inbox-row .inbox-mark-read {

1683 display: none;

1684 }

1685

1686 .info-line {

1687 margin-bottom: $lineheight;

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

1689 border-bottom: 1px solid #ccc;

1690

1691 form, form div {

1692 display: inline;

1693 }

1694 }

1695

1696 .info-line .user_thumbnail_tiny {

1697 vertical-align: middle;

1698 }

1699

1700 .inbox-mark-unread,

1701 .inbox-mark-read,

1702 .inbox-delete {

1703 width: 1%;

1704 }

1705

1706 .inbox-row-unread .inbox-mark-unread {

1707 display: none;

1708 }

1709

1710 .message-read .message-buttons {

1711 margin-top: $lineheight;

1712 padding-top: $lineheight;

1713 border-top: 1px solid $lightgrey;

1714 }

1715

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

1717 border-radius: 0;

1718 }

1719

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

1721

1722 .error {

1723 padding: $lineheight;

1724 background-color: #ff7070;

1725 }

1726

1727 .warning {

1728 padding: $lineheight;

1729 background-color: #ffe0cc;

1730 }

1731

1732 .notice {

1733 padding: $lineheight;

1734 background-color: #CBEEA7;

1735 }

1736

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

1738

1739 .field_with_errors {

1740 padding: 2px;

1741 background-color: #ff7070;

1742 display: inline-block;

1743 }

1744

1745 .formError {

1746 display: inline-block;

1747 padding: 5px 10px;

1748 margin-top: 5px;

1749 border-radius: 4px;

1750 font-size: 12px;

1751 color: #fff;

1752 background-color: #ff7070;

1753 }

1754

1755 /* Rules for rails validation error boxes */

1756

1757 #errorExplanation {

1758 width: 400px;

1759 border: 2px solid #ff7070;

1760 padding: 0 $lineheight/2;

1761 margin-bottom: $lineheight;

1762 background-color: #f0f0f0;

1763

1764 h2 {

1765 margin: 0 -10px 10px -10px;

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

1767 font-weight: 500;

1768 font-size: 12px;

1769 background-color: #c00;

1770 color: #fff;

1771 text-align: left;

1772 }

1773

1774 p {

1775 color: #333;

1776 margin-bottom: 0px;

1777 padding: $lineheight/4;

1778 }

1779

1780 ul {

1781 padding-left: $lineheight;

1782

1783 li {

1784 font-size: 12px;

1785 list-style: disc;

1786 }

1787 }

1788 }

1789

1790 /* Rules for forms */

1791

1792 .standard-form {

1793 fieldset {

1794 margin-bottom: $lineheight;

1795 }

1796 label.standard-label {

1797 display: block;

1798 margin-bottom: $lineheight/4;

1799 font-size: $typeheight;

1800 font-weight: 500;

1801 line-height: 1.5;

1802 }

1803 label.standard-label.secondary {

1804 display: inline-block;

1805 font-weight: normal;

1806 }

1807 .form-help {

1808 font-weight: normal;

1809 }

1810 .form-column {

1811 float: left;

1812 margin-right: 20px;

1813 }

1814 .form-divider {

1815 margin-top: $lineheight;

1816 padding-top: $lineheight;

1817 border-top: 1px solid $lightgrey;

1818 }

1819 .horizontal-list .form-row {

1820 float: left;

1821 padding-right: 10px;

1822 }

1823 .form-row {

1824 margin-bottom: $lineheight/2;

1825 }

1826 .form-list {

1827 margin-bottom: 0;

1828 }

1829 .form-list li {

1830 margin-bottom: 5px;

1831 }

1832 input[type="checkbox"],

1833 input[type="radio"] {

1834 float: left;

1835 margin-top: 5px;

1836 }

1837 }

1838

1839 #remember_me_openid {

1840 display: block;

1841 }

1842

1843 input[type="checkbox"],

1844 input[type="radio"] {

1845 margin-right: 5px;

1846 }

1847

1848 input[type="text"],

1849 input[type="email"],

1850 input[type="url"],

1851 input[type="password"],

1852 textarea {

1853 border: 1px solid #ccc;

1854 padding: 2px 5px;

1855 margin: 0;

1856 width: 200px;

1857 }

1858

1859 textarea {

1860 padding: 5px;

1861 width: 100%;

1862 }

1863

1864 /* Rules for user images */

1865

1866 img.user_image {

1867 max-width: 100px;

1868 max-height: 100px;

1869 border: 1px solid #ccc;

1870 margin-bottom: $lineheight;

1871 float: left;

1872 margin-right: $lineheight;

1873 }

1874

1875 img.user_thumbnail {

1876 max-width: 50px;

1877 max-height: 50px;

1878 border: 1px solid #ccc;

1879 margin-right: $lineheight;

1880 }

1881

1882 img.user_thumbnail_tiny {

1883 max-width: 25px;

1884 max-height: 25px;

1885 border: 1px solid #ccc;

1886 }

1887

1888 /* Rules for geo microformats */

1889

1890 abbr.geo {

1891 border-bottom: none;

1892 }

1893

1894 /* Rules for RSS buttons */

1895

1896 .rsssmall {

1897 position: relative;

1898 top: 3px;

1899 }

1900

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

1902

1903 ul.secondary-actions {

1904 font-style: normal;

1905 margin-bottom: 0;

1906 margin-left: 0;

1907 &.pager {

1908 display: inline-block;

1909 margin-right: 60px;

1910 }

1911 > li {

1912 display: block;

1913 float: left;

1914 list-style: none;

1915 border-left: 1px solid #ccc;

1916 padding-left: $lineheight/2;

1917 margin-right: $lineheight/2;

1918 &:first-child {

1919 border-left: 0;

1920 padding-left: 0;

1921 }

1922 &:last-child {

1923 margin-right: 0px;

1924 }

1925 }

1926 }

1927

1928 div.secondary-actions {

1929 padding: 10px;

1930 border-top: 1px solid #ccc;

1931 text-align: center;

1932 }

1933

1934 /* Utility for managing inner content areas */

1935

1936 .inner22 { padding: $lineheight;}

1937

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

1939

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

1941

1942 .inner20 { padding: $lineheight 0;}

1943

1944 .inner02 { padding: 0 $lineheight;}

1945

1946 /* Utility for general button styles */

1947

1948 input[type="button"],

1949 input[type="submit"],

1950 input[type="reset"],

1951 a.button {

1952 cursor: pointer;

1953 border: 0;

1954 display: inline-block;

1955 line-height: 20px;

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

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

1958 min-width: 120px;

1959 margin: 0 0 $lineheight/2 0;

1960 color: white;

1961 background: $blue;

1962 text-align: center;

1963 border-radius: 2px;

1964 -moz-border-radius: 2px;

1965 &:hover {

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

1967 text-decoration: none;

1968 }

1969 &.deemphasize {

1970 background: $lightblue;

1971 &:hover {

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

1973 }

1974 }

1975 &:disabled {

1976 background: $lightgrey;

1977 &:hover {

1978 background: $lightgrey;

1979 }

1980 }

1981 &:last-child {

1982 margin-bottom: 0;

1983 }

1984 }

1985

1986 .buttons {

1987 min-width: 200px;

1988 input[type="submit"],

1989 input[type="button"],

1990 input[type="reset"],

1991 .button {

1992 box-sizing: border-box;

1993 float: left;

1994 border-radius: 0;

1995 margin:0;

1996 min-width: 100px;

1997 max-width: 180px;

1998 border-right:1px solid white;

1999 text-overflow: ellipsis;

2000 white-space: nowrap;

2001 overflow: hidden;

2002 }

2003 input:first-child,

2004 .button:first-child {

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

2006 }

2007 input:last-child,

2008 .button:last-child {

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

2010 border-right-width: 0;

2011 }

2012 input:only-child,

2013 .button:only-child,

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

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

2016 border-radius:2px;

2017 border-right-width: 0;

2018 }

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

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

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

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

2023 border-right-width: 0;

2024 }

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

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

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

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

2029 border-right-width: 1px;

2030 }

2031 }

2032

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

2034

2035 .table0,

2036 .item0 {

2037 background: $offwhite;

2038 }

2039

2040 .table1,

2041 .item1 {

2042 background: #fff;

2043 }

2044

2045 /* Rules for OpenID logo */

2046

2047 .openid_logo {

2048 vertical-align: text-bottom;

2049 border: 0;

2050 }

2051

2052 /* Rules for rich text */

2053

2054 .richtext,

2055 .prose {

2056 h1, h2 {

2057 padding-bottom: $lineheight/2;

2058 border-bottom: 1px dashed #cccccc;

2059 margin-bottom: $lineheight/2;

2060 }

2061

2062 h1 {

2063 font-size: 24px;

2064 }

2065

2066 h2 {

2067 font-size: 18px;

2068 }

2069

2070 h3 {

2071 font-size: $typeheight;

2072 }

2073

2074 code {

2075 font-size: 13px;

2076 background: #e8e8e8;

2077 padding: 2px 3px;

2078 }

2079

2080 pre {

2081 font-size: 13px;

2082 background: #e8e8e8;

2083 padding: 2px 3px;

2084

2085 code {

2086 padding: 0;

2087 }

2088 }

2089

2090 img {

2091 padding: $lineheight;

2092 background-color: $offwhite;

2093 display: block;

2094 max-width: 100%;

2095 margin: auto;

2096 }

2097

2098 blockquote {

2099 border-left: $lineheight solid $offwhite;

2100 padding-left: $lineheight;

2101 margin: 0;

2102 color: #7E7E7E;

2103 }

2104

2105 ul, ol {

2106 padding-left: $lineheight;

2107 margin-bottom: $lineheight;

2108 margin-left: $lineheight;

2109 }

2110

2111 ul li {

2112 list-style: disc;

2113 }

2114

2115 ol li {

2116 list-style: decimal;

2117 }

2118 }

2119

2120 .diary_post .richtext {

2121 margin-top: $lineheight;

2122 }

2123

2124 .comments .richtext {

2125 margin-left: 70px;

2126 margin-top: 0;

2127 }

2128

2129 /* Rules for rich text editors */

2130

2131 .richtext_container {

2132 margin-bottom: $lineheight;

2133

2134 .richtext_content {

2135 width: 50%;

2136 display: inline-block;

2137 vertical-align: top;

2138

2139 .richtext_preview {

2140 display: inline-block;

2141 padding: $lineheight;

2142 background-color: $offwhite;

2143 overflow-x: auto;

2144

2145 &.loading {

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

2147 background-repeat: no-repeat;

2148 background-position: center;

2149 }

2150

2151 > :first-child {

2152 margin-top: 0px;

2153 }

2154 }

2155 }

2156

2157 .richtext_help {

2158 display: inline-block;

2159 vertical-align: top;

2160 margin-left: 15px;

2161 background-color: #f8f8ff;

2162 padding: $lineheight/2;

2163 width: 220px;

2164

2165 ul {

2166 margin-bottom: 0;

2167 }

2168

2169 h4.heading, li {

2170 border-bottom: 1px solid #ccc;

2171 margin-bottom: $lineheight/4;

2172 padding-bottom: $lineheight/4;

2173 }

2174

2175 li h4, li span, li p {

2176 display: inline-block;

2177 vertical-align: top;

2178 font-size: 11px;

2179 }

2180

2181 li h4 {

2182 width: 40%;

2183 margin: 0;

2184 }

2185

2186 li span, li p {

2187 width: 50%;

2188 margin-left: $lineheight/2;

2189 margin-bottom: $lineheight/4;

2190 white-space: nowrap;

2191 }

2192 }

2193 }

2194

2195 /* Rules for the user notes list */

2196

2197 .note_list {

2198 tr.creator {

2199 background-color: #eeeeee;

2200 }

2201

2202 td {

2203 padding: 3px;

2204 }

2205

2206 p {

2207 margin-bottom: 0px;

2208 }

2209 }

2210

2211 /* Rules for the notes interface */

2212

2213 .leaflet-popup-content .note {

2214 padding-top: $lineheight/2;

2215 }

2216

2217 .leaflet-popup-content .note {

2218 h2 {

2219 margin-bottom: $lineheight/2;

2220 }

2221

2222 div {

2223 margin-top: $lineheight/2;

2224 }

2225

2226 .permalink {

2227 position: absolute;

2228 top: $lineheight/4;

2229 left: $lineheight/4;

2230 min-width: 15px;

2231 min-height: 15px;

2232 }

2233

2234 .permalink span {

2235 display: none;

2236 padding-left: $lineheight;

2237 }

2238

2239 .permalink:hover span {

2240 display: block;

2241 }

2242

2243 .warning {

2244 display: block;

2245 background-color: #ffe0cc;

2246 padding: 4px 6px;

2247 margin-bottom: $lineheight/2;

2248 }

2249

2250 .comment_body {

2251 margin-top: 2px;

2252 margin-bottom: 2px;

2253

2254 p {

2255 margin-top: 0px;

2256 margin-bottom: 0px;

2257 }

2258 }

2259

2260 .comment {

2261 width: 100%;

2262 height: 100px;

2263 }

2264

2265 .buttons {

2266 margin-top: $lineheight/4;

2267 text-align: right;

2268 }

2269 }

2270

2271 /* Rules for the iD editor */

2272

2273 .id-embed {

2274 width: 100%;

2275 height: 100%;

2276 }

2277

2278 /* Rules for dropdown menus */

2279

2280 .dropdown {

2281 position: relative;

2282 }

2283

2284 .dropdown-toggle {

2285 *margin-bottom: -3px;

2286 }

2287

2288 .dropdown-toggle:active,

2289 .open .dropdown-toggle {

2290 outline: 0;

2291 }

2292

2293 .caret {

2294 display: inline-block;

2295 width: 0;

2296 height: 0;

2297 vertical-align: top;

2298 border-top: 4px solid #000000;

2299 border-right: 4px solid transparent;

2300 border-left: 4px solid transparent;

2301 content: "";

2302 }

2303

2304 .dropdown .caret {

2305 margin-top: 8px;

2306 margin-left: 2px;

2307 }

2308

2309 .dropdown-menu {

2310 position: absolute;

2311 top: 100%;

2312 left: -1px;

2313 z-index: 1000;

2314 display: none;

2315 float: left;

2316 min-width: 160px;

2317 padding: 5px 0;

2318 margin: 0;

2319 list-style: none;

2320 background-color: #ffffff;

2321 border: 1px solid #ccc;

2322 border-radius: 0 3px 3px;

2323 *border-right-width: 2px;

2324 *border-bottom-width: 2px;

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

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

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

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

2329 -moz-background-clip: padding;

2330 background-clip: padding-box;

2331 }

2332

2333 .dropdown-menu.pull-right {

2334 right: 0;

2335 left: auto;

2336 }

2337

2338 .dropdown-menu .divider {

2339 *width: 100%;

2340 height: 1px;

2341 margin: 9px 1px;

2342 *margin: -5px 0 5px;

2343 overflow: hidden;

2344 background-color: #e5e5e5;

2345 border-bottom: 1px solid #ffffff;

2346 }

2347

2348 .dropdown-menu > li > a {

2349 display: block;

2350 padding: 3px 10px;

2351 clear: both;

2352 font-weight: normal;

2353 line-height: 20px;

2354 color: #333333;

2355 white-space: nowrap;

2356 }

2357

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

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

2360 .dropdown-submenu:hover > a,

2361 .dropdown-submenu:focus > a {

2362 color: #ffffff;

2363 text-decoration: none;

2364 background-color: $green;

2365 }

2366

2367 .dropdown-menu > .active > a,

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

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

2370 color: #ffffff;

2371 text-decoration: none;

2372 background-color: $green;

2373 outline: 0;

2374 }

2375

2376 .dropdown-menu > .disabled > a,

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

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

2379 color: #999999;

2380 }

2381

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

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

2384 text-decoration: none;

2385 cursor: default;

2386 background-color: transparent;

2387 background-image: none;

2388 }

2389

2390 .open {

2391 *z-index: 1000;

2392 }

2393

2394 .open > .dropdown-menu {

2395 display: block;

2396 }

2397

2398 .dropdown-backdrop {

2399 position: fixed;

2400 top: 0;

2401 right: 0;

2402 bottom: 0;

2403 left: 0;

2404 z-index: 990;

2405 }

2406

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

2408 .site-welcome {

2409 .center {

2410 text-align: center;

2411 .sprite {

2412 float: none;

2413 margin: auto;

2414 }

2415 }

2416

2417 .sprite {

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

2419 background-size: 500px 250px;

2420 display: block;

2421 float: left;

2422 }

2423

2424 .icon-list {

2425 padding-bottom: 20px;

2426 div {

2427 margin-bottom: 10px;

2428 p {

2429 padding-top: 10px;

2430 }

2431 }

2432 }

2433 .sprite.small {

2434 width: 50px;

2435 height: 50px;

2436 }

2437

2438 .sprite.x {

2439 background-position: -50px 0;

2440 }

2441

2442 .sprite.term {

2443 margin-right: 10px;

2444 vertical-align: middle;

2445 }

2446

2447 .sprite.node {

2448 background-position: -100px 0;

2449 }

2450

2451 .sprite.way {

2452 background-position: -150px 0;

2453 }

2454

2455 .sprite.tag {

2456 background-position: -200px 0;

2457 }

2458

2459 .sprite.editor {

2460 background-position: -250px 0;

2461 }

2462

2463 .sprite.question {

2464 background-position: -300px 0;

2465 }

2466

2467 .start-mapping {

2468 margin: auto;

2469 cursor: pointer;

2470 border: none;

2471 padding: 20px 40px;

2472 font-size: 30px;

2473 text-decoration: none;

2474 }

2475

2476 .note-box {

2477 margin-top: 20px;

2478 background-color: $offwhite;

2479 }

2480

2481 .icon.note {

2482 background-color: #333;

2483 border-radius: 4px;

2484 }

2485 }

2486

2487 .site-about #content {

2488 //background-color: #000;

2489 background-color: #eee;

2490 background-position: 50% 50%;

2491 background-repeat: no-repeat;

2492 background-size: cover;

2493 background-attachment: fixed;

2494

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

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

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

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

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

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

2501

2502 .caption {

2503 max-width: 200px;

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

2505 position: fixed;

2506 text-align: right;

2507 right: 20px;

2508 bottom: 60px;

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

2510 color: #eee;

2511 opacity: 0.8;

2512 display: none;

2513 }

2514

2515 .caption a {

2516 color: white;

2517 white-space: nowrap;

2518 text-decoration: none;

2519 }

2520

2521 a.next {

2522 display: block;

2523 position: fixed;

2524 right: 10px;

2525 bottom: 10px;

2526 width: 40px;

2527 height: 40px;

2528 border-radius: 5px;

2529 text-indent: -9999px;

2530 overflow: hidden;

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

2532 background-color: #000;

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

2534 }

2535

2536 .content-inner {

2537 position: relative;

2538 color: #333;

2539 min-width: 320px;

2540 max-width: 640px;

2541

2542 .section {

2543 margin-bottom: 30px;

2544 }

2545

2546 .section:last-child {

2547 margin-bottom: 0;

2548 }

2549 }

2550

2551 .text {

2552 background: white;

2553 padding: 40px;

2554 }

2555

2556 .attr {

2557 position: relative;

2558 padding: 170px 40px 20px;

2559 background: #333;

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

2561 margin-bottom: 0;

2562 margin-top: -20px;

2563

2564 h1 {

2565 display: block;

2566 color: white;

2567 font-weight: 300;

2568 font-size: 34px;

2569 span {

2570 color: #76c551;

2571 }

2572 }

2573

2574 .user-image {

2575 position: absolute;

2576 top: 0px;

2577 right: 240px;

2578 left: 0px;

2579 height: 150px;

2580 background-position: 0 50%;

2581 background-repeat: no-repeat;

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

2583 background-size: cover;

2584 background-color: #76c551;

2585 }

2586

2587 .byosm {

2588 position: absolute;

2589 top: 0px;

2590 right: 0px;

2591 z-index: 1;

2592 width: 240px;

2593 height: 150px;

2594 padding: 20px 20px 20px 40px;

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

2596 white-space: nowrap;

2597 color: #fff;

2598 background: #76c551;

2599 }

2600

2601 .byosm span {

2602 display: inline-block;

2603 width: 20px;

2604 margin-left: -20px;

2605 }

2606 }

2607

2608 h2 {

2609 margin-bottom: 10px;

2610 }

2611

2612 .icon {

2613 width: 30px;

2614 height: 30px;

2615 margin-right: 10px;

2616 vertical-align: middle;

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

2618

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

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

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

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

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

2624 }

2625 }

2626

2627 @import 'browse';

2628

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

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

2631 display: none;

2632 }

2633 }

2634