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 }

119

120 body.slim {

121 background-color: #f0f0f0;

122 }

123

124 h1, h2, h3 {

125 font-weight: 500;

126 line-height: 1.2;

127 }

128

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

130

131 h1 {

132 font-size: 18px;

133 }

134

135 h2, h3 {

136 font-size: 16px;

137 }

138

139 p > img {

140 width: auto;

141 max-width: 100%;

142 }

143

144 small, aside {

145 font-size: 12px;

146 }

147

148 .column-1 {

149 width: 50%;

150 margin: 0 0 $lineheight/2 0;

151 }

152

153 .small_icon {

154 vertical-align: middle;

155 margin-right: $lineheight/4;

156 }

157

158 .red { color: $red; }

159

160 /* Rules for icons */

161

162 .icon {

163 display:inline-block;

164 vertical-align:top;

165 width:20px;

166 height:20px;

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

168 text-indent:-9999px;

169 overflow:hidden;

170 }

171

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

188

189 /* Rules for links */

190

191 a {

192 color: #00f;

193 text-decoration: none;

194 -webkit-appearance: none;

195 outline: 0;

196 &:hover {

197 text-decoration: underline;

198 }

199 }

200

201 /* Rules for horizontal lines */

202

203 hr {

204 border: none;

205 background-color: #ccc;

206 color: #ccc;

207 height: 1px;

208 }

209

210 /* General styles for tables */

211

212 table {

213 width: 100%;

214 margin-bottom: $lineheight;

215 th, td {

216 text-align: left;

217 padding: $lineheight/4;

218 line-height: $lineheight;

219 }

220 th {

221 font-weight: 500;

222 vertical-align: top;

223 }

224 td {

225 vertical-align: middle;

226 }

227 }

228

229 /* Utility for de-emphasizing content */

230

231 .deemphasize {

232 color: #999;

233 a {

234 color: $blue;

235 }

236 }

237

238 /* Rules for the header */

239

240 header {

241 height: $headerHeight;

242 position: relative;

243 // border-bottom: $keyline;

244 z-index: 1001;

245 font-size: 13px;

246

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

248 display: inline-block;

249 }

250

251 > * {

252 height: 100%;

253 padding: $lineheight/2 $lineheight;

254 }

255

256 h1, nav.primary {

257 float: left;

258 }

259

260 a, a:hover {

261 text-decoration: none;

262 }

263

264 img.logo {

265 width: 30px;

266 height: 30px;

267 margin-top: -4px;

268 vertical-align: middle;

269 }

270

271 h1 {

272 margin: 0;

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

274

275 a {

276 color: #000;

277 }

278 }

279 }

280

281 nav.primary {

282 > ul {

283 $border: 1px solid $green;

284

285 border: $border;

286 border-radius: $border-radius;

287

288 > li {

289 border-right: $border;

290 &:last-child {

291 border-right: 0;

292 > a { border-radius: 0 $border-radius $border-radius 0; }

293 }

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

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

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

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

298 &.dropdown {

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

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

301 }

302 }

303 }

304

305 a.tab,

306 .dropdown-toggle {

307 display: inline-block;

308 font-weight: 500;

309 color: $green;

310 padding: 5px 15px;

311 }

312

313 .dropdown-toggle {

314 padding: 5px 6px;

315 }

316

317 .caret {

318 border-top-color: $green;

319 margin-top: 10px;

320 }

321

322 .disabled a {

323 color: #ccc;

324 cursor: default;

325

326 .caret {

327 border-top-color: #ccc;

328 }

329 }

330

331 > ul li.current {

332 background-color: $green;

333

334 .tab {

335 color: #fff;

336 }

337

338 .caret {

339 border-top-color: #fff;

340 }

341 }

342 }

343

344 nav.secondary {

345 position: absolute;

346 right: 0;

347

348 > ul a,

349 .dropdown-toggle {

350 display: inline-block;

351 text-decoration: none;

352 color: $darkgrey;

353 padding: 5px;

354

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

356 }

357

358 > ul li.current a {

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

360 }

361

362 .user-menu {

363 $border: 1px solid $grey;

364

365 font-weight: 500;

366 border: $border;

367 border-radius: $border-radius;

368 margin-left: 10px;

369

370 > li {

371 border-right: $border;

372 &:last-child {

373 border-right: 0;

374

375 > a {

376 border-radius: 0 $border-radius $border-radius 0;

377 }

378 }

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

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

381 }

382

383 a {

384 padding: 5px 15px;

385 }

386

387 &.logged-in > a {

388 padding: 0;

389 > .user-button {

390 padding: 5px 10px 5px 6px;

391 display: inline-block;

392 }

393 }

394 }

395

396 .caret {

397 border-top-color: $grey;

398 margin-top: 9px;

399 }

400

401 img.user_thumbnail_tiny {

402 border: 0;

403 vertical-align: top;

404 margin-top: 0px;

405 margin: 3px 0 0 3px;

406 border-radius: 2px;

407 }

408

409 #inboxanchor {

410 display: inline-block;

411 vertical-align: top;

412 height: 25px;

413 margin: 3px 0 3px 3px;

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

415 line-height: 20px;

416 border-radius: 2;

417 }

418

419 .dropdown-menu {

420 left: auto;

421 right: 0;

422

423 .count-number {

424 float: right;

425 padding: 0 5px;

426 margin: 0;

427 }

428 }

429 }

430

431 /* Utility for styling notification numbers */

432

433 .count-number {

434 padding: 2px $lineheight/4;

435 border-radius: 2px;

436 background: #d7d7ff;

437 margin: 0 2px;

438 font-size: 11px;

439 color: #333;

440 }

441

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

443

444 #noscript {

445 z-index: 20000000;

446 position: absolute;

447 top: 15px;

448 left: 15px;

449 }

450

451 /* Rules for bootstrap tooltips */

452

453 .tooltip {

454 position: absolute;

455 display: none;

456 color: #333;

457 text-align: left;

458 font-size: 12px;

459 max-width: 250px;

460 }

461

462 .tooltip.in {

463 opacity: 0.8;

464 z-index: 1030;

465 height: auto;

466 display: block;

467 }

468

469 .tooltip.top {

470 margin-top: -10px;

471 text-align: center;

472 }

473

474 .tooltip.right {

475 margin-left: 10px;

476 }

477

478 .tooltip.bottom {

479 margin-top: 10px;

480 text-align: center;

481 }

482

483 .tooltip.left {

484 margin-left: -10px;

485 text-align: right;

486 }

487

488 .tooltip-inner {

489 display: inline-block;

490 padding: 10px;

491 font-weight: normal;

492 background-color: white;

493 }

494

495 .tooltip-arrow {

496 position: absolute;

497 width: 0;

498 height: 0;

499 border-color: transparent;

500 border-style: solid;

501 }

502

503 .tooltip.top .tooltip-arrow {

504 bottom: -5px;

505 left: 50%;

506 margin-left: -5px;

507 border-top-color: white;

508 border-width: 5px 5px 0;

509 }

510

511 .tooltip.right .tooltip-arrow {

512 top: 50%;

513 left: -5px;

514 margin-top: -5px;

515 border-right-color: white;

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

517 }

518

519 .tooltip.left .tooltip-arrow {

520 top: 50%;

521 right: -5px;

522 margin-top: -5px;

523 border-left-color: white;

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

525 }

526

527 .tooltip.bottom .tooltip-arrow {

528 top: -5px;

529 left: 50%;

530 margin-left: -5px;

531 border-bottom-color: white;

532 border-width: 0 5px 5px;

533 }

534

535 /* Rules for Leaflet maps */

536

537 .leaflet-control .control-button {

538 display: block;

539 height: 40px;

540 width: 40px;

541 background-color: #333;

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

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

544 margin-bottom: 10px;

545 outline: none;

546

547 &:hover {

548 background-color: black;

549 }

550

551 &.active {

552 background-color: #9ed485;

553 }

554

555 &.disabled {

556 background-color: #333;

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

558 cursor: default;

559 }

560

561 .icon {

562 margin: 10px;

563 }

564 }

565

566 .leaflet-control .zoomin,

567 .control-layers .control-button {

568 margin-bottom: 0px;

569 border-radius: 4px 0 0 0;

570 }

571

572 .leaflet-control .zoomout,

573 .control-key .control-button {

574 margin-bottom: 0;

575 border-radius: 0;

576 }

577

578 .control-locate .control-button,

579 .control-share .control-button {

580 border-radius: 0 0 0 4px;

581 }

582

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

584

585 .map-layout {

586 #content {

587 position: absolute;

588 top: $headerHeight;

589 bottom: 0;

590 width: 100%;

591 }

592

593 #sidebar, #map {

594 position: relative;

595 height: 100%;

596 overflow-x: hidden;

597 overflow-y: auto;

598 }

599

600 #sidebar {

601 float: left;

602 width: $sidebarWidth;

603

604 h2, h3, h4 {

605 padding: $lineheight $lineheight $lineheight/2;

606 }

607

608 h4 {

609 font-weight: normal;

610 color: #666;

611 font-size: 12px;

612 }

613

614 .icon.close {

615 position: absolute;

616 right: $lineheight;

617 cursor: pointer;

618 }

619

620 .footer {

621 position: absolute;

622 bottom: 0;

623 }

624

625 p.credits {

626 font-size: 11px;

627 color: #999;

628

629 a {

630 color: #666;

631 }

632 }

633

634 p.large-text {

635 font-size: 1.7em;

636 line-height: 1.4em;

637 font-weight: 300;

638 }

639 }

640

641 #sidebar.minimized {

642 position: absolute;

643 z-index: 1000;

644 height: auto;

645 border-right: none;

646

647 #sidebar_content {

648 display: none;

649 }

650

651 #search_form {

652 background: none;

653 width: 78%;

654 }

655 }

656

657 #map {

658 height: 100%;

659 overflow: hidden;

660 }

661

662 #map-ui {

663 display: none;

664 position: relative;

665 float: right;

666 width: 250px;

667 height: 100%;

668 background: white;

669 overflow: auto;

670

671 .section {

672 border-bottom: 1px solid #DDD;

673 padding: 10px 20px;

674 }

675

676 a.close-button {

677 float: right;

678 padding:5px;

679 font-size:20px;

680 line-height:10px;

681 color:#222;

682 border:1px solid #ddd;

683 }

684 }

685 }

686

687 .layers-ui,

688 .share-ui {

689 li:last-child {

690 margin-bottom: 0;

691 }

692 }

693

694 .layers-ui {

695 .base-layers {

696 .leaflet-container {

697 width: 100%;

698 height: 50px;

699 cursor: pointer;

700 }

701

702 li {

703 overflow: hidden;

704 border-radius: 3px;

705 border: 2px solid #fff;

706 margin-bottom: 8px;

707 position: relative;

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

709

710 label {

711 position: absolute;

712 top: 0;

713 left: 0;

714 padding: 2px 6px;

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

716 cursor: pointer;

717 font-weight: 500;

718 font-size: 16px;

719 text-stroke: 2px #fff;

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

721 text-shadow:

722 -2px -2px 1px #fff,

723 2px -2px 1px #fff,

724 -2px 2px 1px #fff,

725 2px 2px 1px #fff;

726 input[type="radio"] {

727 display: none;

728 }

729 }

730

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

732 &:hover {

733 border-color: $grey;

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

735 }

736 }

737 }

738

739 .overlay-layers {

740 p {

741 font-size: 13px;

742 margin-bottom: 8px;

743 }

744 }

745 }

746

747 .share-ui {

748 .share-tabs {

749 margin-bottom: 10px;

750

751 a {

752 color: #fff;

753 text-decoration: none;

754 background-color: $lightblue;

755 padding: 5px 10px;

756 }

757

758 a:first-child {

759 border-right: 1px solid #fff;

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

761 }

762

763 a:last-child {

764 border-left: 1px solid #fff;

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

766 }

767

768 a.active {

769 background-color: $blue;

770 }

771 }

772

773 .share-tab {

774 display: none;

775 }

776

777 .share-link {

778 input[type=text],

779 textarea {

780 width: 100%;

781 font-family: monospace;

782 font-size: small;

783 line-height: 1.3;

784 }

785 }

786

787 .share-image {

788 label {

789 margin-right: 10px;

790 }

791 }

792

793 #embed_html {

794 resize: vertical;

795 }

796

797 #mapnik_scale {

798 width: 100px;

799 }

800 }

801

802 .leaflet-top.leaflet-right {

803 top: $lineheight !important;

804 .leaflet-control {

805 margin-right: 0px !important;

806 margin-top: 0px !important;

807 }

808 }

809

810 .leaflet-popup-scrolled {

811 padding-right: $lineheight;

812 border-bottom: 0px !important;

813 border-top: 0px !important;

814 }

815

816 .leaflet-popup-content-wrapper {

817 border-radius: 4px !important;

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

819 }

820

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

822

823 #attribution {

824 display: none;

825 }

826

827 .attribution_license,

828 .attribution_project {

829 text-align: left;

830 }

831

832 .attribution_notice {

833 text-align: center;

834 }

835

836 /* Rules for the sidebar */

837

838 .sidebar_heading {

839 position: relative;

840 padding: $lineheight/2 $lineheight;

841 // background: $offwhite;

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

843 > .close {

844 float: right;

845 margin-top: 2px;

846 cursor: pointer;

847 }

848 }

849

850 #sidebar_content {

851 position: absolute;

852 top: 50px;

853 bottom: 0;

854 width: 100%;

855 overflow-y: auto;

856

857 .loader,

858 .load_more {

859 text-align: center;

860 margin: $lineheight auto;

861 width: $lineheight;

862 display: block;

863 }

864 }

865

866 /* Rules for the search box */

867

868 #search_form {

869 position: relative;

870 padding: $lineheight/2 $lineheight;

871 background-color: $lightgrey;

872

873 #query_wrapper {

874 position: relative;

875 overflow: hidden;

876 }

877

878 input {

879 width: 100%;

880 height: 30px;

881 border-right: none;

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

883

884 transition: 300ms linear;

885 -webkit-transition: 300ms linear;

886 -moz-transition: 300ms linear;

887 }

888

889 input:focus {

890 outline: none;

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

892 }

893

894 input[type=submit] {

895 float: right;

896 width: auto;

897 min-width: 0;

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

899 }

900

901 #describe_location {

902 position: absolute;

903 top: 6px;

904 right: 6px;

905 font-size: 10px;

906 color: $blue;

907 }

908 }

909

910 /* Rules for donation request box */

911

912 a.donate {

913 display: block;

914 padding: $lineheight/4 $lineheight;

915 border: 1px solid $green;

916 font-size: $typeheight;

917 line-height: 1.4;

918 text-align: center;

919 border-radius: 2px;

920 color: #222;

921 margin: $lineheight/2 $lineheight;

922

923 &:hover {

924 background: $green;

925 text-decoration: none;

926 }

927 }

928

929 /* Rules for rotating sidebar ads */

930

931 .ad-container {

932 display: block;

933 height: 120px;

934 margin: auto;

935 overflow: hidden;

936 position: relative;

937 border-bottom: 1px solid #ccc;

938

939 a {

940 display: block;

941 width: 165px;

942 margin: auto;

943 }

944

945 .ad {

946 height: 100px;

947 border: 0;

948 background: #fff;

949 }

950 }

951

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

953

954 #mapkey {

955 .mapkey-table-key img {

956 display: block;

957 margin-left: auto;

958 margin-right: auto;

959 }

960 td {

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

962 }

963 }

964

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

966

967 .search_results_entry {

968 ul li {

969 border-bottom: $keyline;

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

971 }

972

973 .search_details {

974 display: block;

975 float: right;

976 text-align: right;

977 margin-top: 0.2em;

978 margin-left: 0.5em;

979 }

980 }

981

982 .search_results_error {

983 color: #f00;

984 }

985

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

987

988 #browse_content {

989 position: relative;

990 .browse_show_list.button {

991 position: absolute;

992 left: $lineheight;

993 right: $lineheight;

994 bottom: -40px;

995 margin-bottom: 0;

996 }

997 a.more-details {

998 position: absolute;

999 top: 0;

1000 right: $lineheight;

1001 }

1002 ul li {

1003 margin-bottom: 0;

1004 }

1005 }

1006

1007 /* Rules for entity history */

1008 #sidebar_content {

1009 .browse_details {

1010 position: relative;

1011 border-bottom: $keyline;

1012 }

1013 }

1014

1015 .browse_status {

1016 display: none;

1017 }

1018

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

1020

1021 #sidebar .changesets {

1022 li {

1023 padding: $lineheight;

1024 border-bottom: $keyline;

1025 cursor: pointer;

1026

1027 &.selected { background: lighten($green, 35%); }

1028 }

1029

1030 .comment a {

1031 font-weight: bold;

1032 color: #000;

1033 }

1034 }

1035

1036 /* Rules for the data browser */

1037

1038 #sidebar_content {

1039 .browse-section {

1040 padding: 10px 20px;

1041

1042 h4 {

1043 padding: 0;

1044 }

1045 }

1046

1047 .paginate ul, .note-comments ul {

1048 padding-left: 20px;

1049 }

1050

1051 .browse-field {

1052 margin-bottom: 10px;

1053

1054 h4 {

1055 padding: 5px 0 5px 10px;

1056 font-size: 12px;

1057 border: 1px solid #CCC;

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

1059 background-color: #F6F6F6;

1060 }

1061

1062 p {

1063 padding: 7px 10px;

1064 font-size: 12px;

1065 background-color: #FFF;

1066 border: 1px solid #CCC;

1067 border-top: 0;

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

1069 }

1070 }

1071

1072 .browse-tag-list {

1073 border: 1px solid #CCC;

1074 border-radius: 4px;

1075 font-size: 12px;

1076

1077 li {

1078 border-bottom: 1px solid #CCC;

1079 }

1080

1081 li:last-child {

1082 border-bottom: 0;

1083 }

1084

1085 .browse-tag-k,

1086 .browse-tag-v {

1087 display: inline-block;

1088 width: 50%;

1089 height: 30px;

1090 float: left;

1091 padding: 6px 10px;

1092 }

1093

1094 .browse-tag-k {

1095 font-weight: 500;

1096 background-color: #F6F6F6;

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

1098 }

1099

1100 .browse-tag-v {

1101 border-left: 1px solid #CCC;

1102 }

1103 }

1104 }

1105

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

1107

1108 .export_bounds {

1109 text-align: center;

1110 }

1111

1112 .export_area_inputs {

1113 margin-bottom: $lineheight/2;

1114 input[type="text"] {

1115 width: 80px;

1116 margin-bottom: 5px;

1117 }

1118 }

1119

1120 .export_bound {

1121 margin: $lineheight/4;

1122 }

1123

1124 #export_osm {

1125 span.small-title {

1126 font-weight: 500;

1127 display: block;

1128 font-size: 14px;

1129 padding-bottom: 5px;

1130 }

1131

1132 dl {

1133 padding-left: 30px;

1134 font-size: 13px;

1135 color: #666;

1136 dd {

1137 margin-left: 0;

1138 margin-bottom: 10px;

1139 }

1140 }

1141 }

1142

1143 /* Rules for edit pages */

1144

1145 .site-edit {

1146 #content {

1147 position: absolute;

1148 top: $headerHeight;

1149 bottom: 0;

1150 width: 100%;

1151 }

1152

1153 #map {

1154 height: 100%;

1155 }

1156 }

1157

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

1159

1160 .content-heading {

1161 background: $lightgrey;

1162

1163 h1 { font-size: 22px; }

1164 }

1165

1166 .content-body {

1167 h1, h2, h3, p {

1168 margin-bottom: $lineheight;

1169 }

1170

1171 h1, h2, h3 {

1172 margin-top: $lineheight/2;

1173 }

1174 }

1175

1176 .content-inner {

1177 position: relative;

1178 max-width: 900px;

1179 margin: auto;

1180 padding: $lineheight;

1181 }

1182

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

1184

1185 .user-new,

1186 .user-create,

1187 .user-terms {

1188 .content-body .content-inner {

1189 padding: 0;

1190 }

1191 }

1192

1193 .user-new,

1194 .user-create,

1195 .user-terms,

1196 .user-confirm {

1197 .content-heading .content-inner {

1198 height: 200px;

1199 }

1200 }

1201

1202 .header-illustration {

1203 background-position: 0 0;

1204 background-repeat: no-repeat;

1205 position: absolute;

1206 height: 200px;

1207 width: 100%;

1208 left: 0;

1209 bottom: 0;

1210

1211 &.new-user-main {

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

1213 }

1214

1215 &.confirm-main {

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

1217 }

1218

1219 &.new-user-terms {

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

1221 }

1222

1223 &.new-user-arm {

1224 height: 110px;

1225 width: 130px;

1226 left: 260px;

1227 top: 160px;

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

1229 z-index: 100;

1230 }

1231 }

1232

1233 @media only screen and (max-width:900px) {

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

1235 display: none;

1236 }

1237 }

1238

1239 #content.maximised {

1240 top: 0;

1241 left: 0;

1242 right: 0;

1243 bottom: 0;

1244 border: 0;

1245 z-index: 1000;

1246 }

1247

1248 #slim_container {

1249 width: 100%;

1250 }

1251

1252 #slim_container_content {

1253 max-width: 50em;

1254 background-color: #FFFFFF;

1255 margin: $lineheight/2 auto;

1256 padding: 3px;

1257 border-radius: 25px;

1258 -moz-border-radius: 25px;

1259 border: 1px solid #e6e6e6;

1260 }

1261

1262 #slim_content {

1263 margin: $lineheight/2;

1264 margin-top: 95px;

1265 max-width: 50em;

1266

1267 .content-heading {

1268 margin-bottom: 15px;

1269 }

1270 }

1271

1272 #slim_header {

1273 margin: 30px $lineheight/2;

1274 position: absolute;

1275 top: 0px;

1276 margin-right: $lineheight/4;

1277 img {

1278 vertical-align: middle;

1279 margin-bottom: $lineheight/4;

1280 margin-right: $lineheight/4;

1281 }

1282 }

1283

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

1285

1286 .content_map {

1287 position: relative;

1288 width: 45%;

1289 height: 400px;

1290 border: 1px solid #ccc;

1291 margin-bottom: $lineheight;

1292 float: right;

1293 }

1294

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

1296

1297 #trace_list {

1298 font-size: $lineheight/2;

1299 border-width: 0px;

1300 text-align: right;

1301

1302 .trace_summary {

1303 font-size: 12px;

1304 color: gray;

1305 }

1306

1307 .trace_pending {

1308 color: red;

1309 }

1310

1311 .trace_public {

1312 color: green;

1313 }

1314

1315 .trace_identifiable {

1316 color: green;

1317 }

1318

1319 .trace_trackable {

1320 color: red;

1321 }

1322

1323 .trace_private {

1324 color: red;

1325 }

1326 }

1327

1328 /* Rules for the user profile page */

1329

1330 #userinformation {

1331

1332 min-height: 100px;

1333 .userinformation-inner {

1334 float: left;

1335 }

1336 h2 {

1337 margin-top: 0;

1338 }

1339 .user-description {

1340 width: 100%;

1341 clear: both;

1342 }

1343 .deemphasize {

1344 margin: 0;

1345 }

1346 }

1347

1348 .admin-user-info small {

1349 margin-bottom: $lineheight/2;

1350 display: inline;

1351 margin-right: $lineheight;

1352 }

1353

1354 .activity-block {

1355 clear: left;

1356 border-bottom: 1px solid #ccc;

1357 padding-bottom: $lineheight;

1358 float: left;

1359 h3 {

1360 margin-bottom: $lineheight/2;

1361 }

1362 }

1363

1364 .contact-activity {

1365 margin-top: $lineheight;

1366 width: 100%;

1367 }

1368

1369 .activity-details p {

1370 margin-left: 70px;

1371 margin-bottom: 0;

1372 }

1373

1374 #friends-container .contact-activity ul {

1375 margin-left: 70px;

1376 }

1377

1378 .user-view {

1379 p#no_home_location {

1380 margin: $lineheight;

1381 }

1382 .user_thumbnail {

1383 margin-top: $lineheight/4;

1384 float: left;

1385 }

1386 }

1387

1388 /* Rules for the user map */

1389

1390 .content_map .leaflet-popup-content {

1391 margin: $lineheight/2;

1392 min-height: 50px;

1393 }

1394

1395 /* Rules for user popups on maps */

1396

1397 .user_popup {

1398 min-width: 200px;

1399 p {

1400 padding: 0 0 5px 0;

1401 margin-top: 0 0 0 60px;

1402 font-size: 12px;

1403 }

1404 img.user_thumbnail {

1405 float: left;

1406 margin: 0 $lineheight/2 0 0;

1407 }

1408 }

1409

1410 /* Rules for the user list */

1411

1412 #user_list {

1413 font-size: $lineheight/2;

1414 width: 100%;

1415

1416 tr {

1417 vertical-align: middle;

1418 }

1419

1420 p {

1421 margin-top: 0px;

1422 margin-bottom: 0px;

1423 }

1424 }

1425

1426 #user_list_actions {

1427 float: right;

1428 margin-top: $lineheight/2;

1429 }

1430

1431 /* Rules for the diary list page */

1432

1433 .diary_post {

1434 position: relative;

1435 margin-top: $lineheight/2;

1436 padding-top: $lineheight;

1437 border-top: 1px solid #ccc;

1438

1439 .post_heading {

1440 margin-bottom: $lineheight;

1441

1442 h2 {

1443 margin-top: 0;

1444 margin-bottom: $lineheight/2;

1445 font-size: 24px;

1446 }

1447 }

1448

1449 img.user_thumbnail {

1450 float: left;

1451 }

1452

1453 small.deemphasize {

1454 float: left;

1455 display: block;

1456 }

1457

1458 ul.secondary-actions {

1459 display: inline-block;

1460 }

1461 }

1462

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

1464 display: inline;

1465 }

1466

1467 /* Rules for the diary entry page */

1468

1469 .diary_entry {

1470 #map {

1471 position: relative;

1472 width: 90%;

1473 height: 400px;

1474 border: 1px solid #ccc;

1475 display: none;

1476 margin-bottom: $lineheight;

1477 }

1478 #newcomment {

1479 border-top: 1px solid #ccc;

1480 padding-top: $lineheight;

1481 margin-top: $lineheight/2;

1482 }

1483 .comments {

1484 max-width: 740px;

1485 }

1486 .diary-comment {

1487 margin-top: $lineheight/2;

1488 border-top: 1px dashed #ccc;

1489 padding-top: $lineheight/2;

1490 &:first-child {

1491 margin-top: $lineheight;

1492 padding-top: $lineheight;

1493 border-top: 1px solid #ccc;

1494 }

1495 p {

1496 margin-bottom: $lineheight/2;

1497 }

1498 .comment-heading {

1499 margin-bottom: 0;

1500 margin-top: 0;

1501 }

1502 }

1503 }

1504

1505 .diary_entry-view img.user_thumbnail {

1506 float: left;

1507 }

1508

1509 /* Rules for the log in page */

1510

1511 #login_openid_buttons {

1512 margin-bottom: 0;

1513 }

1514

1515 #login_openid_buttons li {

1516 float: left;

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

1518 }

1519

1520 /* Rules for the account confirmation page */

1521

1522 .user-terms {

1523 .legale {

1524 border: 1px solid #ccc;

1525 padding: $lineheight;

1526 margin-bottom: $lineheight;

1527 overflow: auto;

1528 height: 10em;

1529 }

1530

1531 #decline {

1532 background: $lightblue;

1533 &:hover {

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

1535 }

1536 }

1537

1538 .form-row {

1539 margin: auto;

1540 max-width: 370px;

1541 }

1542 }

1543

1544 /* Rules for the account settings page */

1545

1546 #accountForm .user_map {

1547 position: relative;

1548 width: 500px;

1549 height: 400px;

1550 border: 1px solid #ccc;

1551 }

1552

1553 #accountForm .user_image {

1554 margin-bottom: 0;

1555 }

1556

1557 #accountForm #user_image {

1558 margin-left: 20px;

1559 }

1560

1561 #accountForm ul.accountImage-options {

1562 margin-left: 120px;

1563 }

1564

1565 .nohome .location {

1566 display: none;

1567 }

1568

1569 #homerow .message {

1570 display: none;

1571 }

1572

1573 .nohome .message {

1574 display: inline !important;

1575 }

1576

1577 .content_map.settings_map {

1578 width: 50%;

1579 float: none;

1580 }

1581

1582 /* Rules for the oauth settings page */

1583

1584 .oauth_clients .buttons .oauth-edit {

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

1586 }

1587

1588 .oauth_clients .buttons .oauth-delete {

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

1590 }

1591

1592 /* Rules for messages pages */

1593

1594 .messages {

1595 width: 100%;

1596 border: 1px solid #ddd;

1597

1598 input[type="submit"] {

1599 margin: auto;

1600 }

1601 tbody tr {

1602 border-top: 1px solid #ccc;

1603 }

1604

1605 .inbox-row {

1606 background: #f8f8ff;

1607 }

1608

1609 .inbox-row-unread {

1610 background:#CBEEA7;

1611 }

1612

1613 .right {

1614 float: right;

1615 }

1616

1617 tr td,

1618 tr th {

1619 padding: $lineheight/4;

1620 }

1621 p:last-child,

1622 h2:last-child,

1623 h3:last-child,

1624 ol:last-child,

1625 ul:last-child {

1626 margin-bottom:0;

1627 }

1628 tr td {

1629 height: 30px;

1630 border-right: 1px solid $lightgrey;

1631 }

1632 }

1633

1634 .inbox-row .inbox-mark-read {

1635 display: none;

1636 }

1637

1638 .info-line {

1639 margin-bottom: $lineheight;

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

1641 border-bottom: 1px solid #ccc;

1642

1643 form, form div {

1644 display: inline;

1645 }

1646 }

1647

1648 .info-line .user_thumbnail_tiny {

1649 vertical-align: middle;

1650 }

1651

1652 .inbox-mark-unread,

1653 .inbox-mark-read,

1654 .inbox-delete {

1655 width: 1%;

1656 }

1657

1658 .inbox-row-unread .inbox-mark-unread {

1659 display: none;

1660 }

1661

1662 .message-read .message-buttons {

1663 margin-top: $lineheight;

1664 padding-top: $lineheight;

1665 border-top: 1px solid $lightgrey;

1666 }

1667

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

1669 border-radius: 0;

1670 }

1671

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

1673

1674 .error {

1675 padding: $lineheight;

1676 background-color: #ff7070;

1677 }

1678

1679 .warning {

1680 padding: $lineheight;

1681 background-color: #ffe0cc;

1682 }

1683

1684 .notice {

1685 padding: $lineheight;

1686 background-color: #CBEEA7;

1687 }

1688

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

1690

1691 .field_with_errors {

1692 padding: 2px;

1693 background-color: #ff7070;

1694 display: inline-block;

1695 }

1696

1697 .formError {

1698 display: inline-block;

1699 padding: 5px 10px;

1700 margin-top: 5px;

1701 border-radius: 4px;

1702 font-size: 12px;

1703 color: #fff;

1704 background-color: #ff7070;

1705 }

1706

1707 /* Rules for rails validation error boxes */

1708

1709 #errorExplanation {

1710 width: 400px;

1711 border: 2px solid #ff7070;

1712 padding: 0 $lineheight/2;

1713 margin-bottom: $lineheight;

1714 background-color: #f0f0f0;

1715

1716 h2 {

1717 margin: 0 -10px 10px -10px;

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

1719 font-weight: 500;

1720 font-size: 12px;

1721 background-color: #c00;

1722 color: #fff;

1723 text-align: left;

1724 }

1725

1726 p {

1727 color: #333;

1728 margin-bottom: 0px;

1729 padding: $lineheight/4;

1730 }

1731

1732 ul {

1733 padding-left: $lineheight;

1734

1735 li {

1736 font-size: 12px;

1737 list-style: disc;

1738 }

1739 }

1740 }

1741

1742 /* Rules for forms */

1743

1744 .standard-form {

1745 fieldset {

1746 margin-bottom: $lineheight;

1747 }

1748 label.standard-label {

1749 display: block;

1750 margin-bottom: $lineheight/4;

1751 font-size: $typeheight;

1752 font-weight: 500;

1753 line-height: 1.5;

1754 }

1755 label.standard-label.secondary {

1756 display: inline-block;

1757 font-weight: normal;

1758 }

1759 .form-help {

1760 font-weight: normal;

1761 }

1762 .form-column {

1763 float: left;

1764 margin-right: 20px;

1765 }

1766 .form-divider {

1767 margin-top: $lineheight;

1768 padding-top: $lineheight;

1769 border-top: 1px solid $lightgrey;

1770 }

1771 .horizontal-list .form-row {

1772 float: left;

1773 padding-right: 10px;

1774 }

1775 .form-row {

1776 margin-bottom: $lineheight/2;

1777 }

1778 .form-list {

1779 margin-bottom: 0;

1780 }

1781 .form-list li {

1782 margin-bottom: 5px;

1783 }

1784 input[type="checkbox"],

1785 input[type="radio"] {

1786 float: left;

1787 margin-top: 5px;

1788 }

1789 }

1790

1791 #remember_me_openid {

1792 display: block;

1793 }

1794

1795 input[type="checkbox"],

1796 input[type="radio"] {

1797 margin-right: 5px;

1798 }

1799

1800 input[type="text"],

1801 input[type="email"],

1802 input[type="url"],

1803 input[type="password"],

1804 textarea {

1805 border: 1px solid #ccc;

1806 padding: 2px 5px;

1807 margin: 0;

1808 width: 200px;

1809 }

1810

1811 textarea {

1812 padding: 5px;

1813 width: 100%;

1814 }

1815

1816 /* Rules for user images */

1817

1818 img.user_image {

1819 max-width: 100px;

1820 max-height: 100px;

1821 border: 1px solid #ccc;

1822 margin-bottom: $lineheight;

1823 float: left;

1824 margin-right: $lineheight;

1825 }

1826

1827 img.user_thumbnail {

1828 max-width: 50px;

1829 max-height: 50px;

1830 border: 1px solid #ccc;

1831 margin-right: $lineheight;

1832 }

1833

1834 img.user_thumbnail_tiny {

1835 max-width: 25px;

1836 max-height: 25px;

1837 border: 1px solid #ccc;

1838 }

1839

1840 /* Rules for geo microformats */

1841

1842 abbr.geo {

1843 border-bottom: none;

1844 }

1845

1846 /* Rules for RSS buttons */

1847

1848 .rsssmall {

1849 position: relative;

1850 top: 3px;

1851 }

1852

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

1854

1855 ul.secondary-actions {

1856 font-style: normal;

1857 margin-bottom: 0;

1858 margin-left: 0;

1859 &.pager {

1860 display: inline-block;

1861 margin-right: 60px;

1862 }

1863 > li {

1864 display: block;

1865 float: left;

1866 list-style: none;

1867 border-left: 1px solid #ccc;

1868 padding-left: $lineheight/2;

1869 margin-right: $lineheight/2;

1870 &:first-child {

1871 border-left: 0;

1872 padding-left: 0;

1873 }

1874 &:last-child {

1875 margin-right: 0px;

1876 }

1877 }

1878 }

1879

1880 div.secondary-actions {

1881 padding: 10px;

1882 border-top: 1px solid #ccc;

1883 text-align: center;

1884 }

1885

1886 /* Utility for managing inner content areas */

1887

1888 .inner22 { padding: $lineheight;}

1889

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

1891

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

1893

1894 .inner20 { padding: $lineheight 0;}

1895

1896 .inner02 { padding: 0 $lineheight;}

1897

1898 /* Utility for general button styles */

1899

1900 input[type="button"],

1901 input[type="submit"],

1902 input[type="reset"],

1903 a.button {

1904 cursor: pointer;

1905 border: 0;

1906 display: inline-block;

1907 line-height: 20px;

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

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

1910 min-width: 120px;

1911 margin: 0 0 $lineheight/2 0;

1912 color: white;

1913 background: $blue;

1914 text-align: center;

1915 border-radius: 2px;

1916 -moz-border-radius: 2px;

1917 &:hover {

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

1919 text-decoration: none;

1920 }

1921 &.deemphasize {

1922 background: $lightblue;

1923 &:hover {

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

1925 }

1926 }

1927 &:disabled {

1928 background: $lightgrey;

1929 &:hover {

1930 background: $lightgrey;

1931 }

1932 }

1933 &:last-child {

1934 margin-bottom: 0;

1935 }

1936 }

1937

1938 .buttons {

1939 min-width: 200px;

1940 input[type="submit"],

1941 input[type="button"],

1942 input[type="reset"],

1943 .button {

1944 box-sizing: border-box;

1945 float: left;

1946 border-radius: 0;

1947 margin:0;

1948 min-width: 100px;

1949 max-width: 180px;

1950 border-right:1px solid white;

1951 text-overflow: ellipsis;

1952 white-space: nowrap;

1953 overflow: hidden;

1954 }

1955 input:first-child,

1956 .button:first-child {

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

1958 }

1959 input:last-child,

1960 .button:last-child {

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

1962 border-right-width: 0;

1963 }

1964 input:only-child,

1965 .button:only-child,

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

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

1968 border-radius:2px;

1969 border-right-width: 0;

1970 }

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

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

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

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

1975 border-right-width: 0;

1976 }

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

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

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

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

1981 border-right-width: 1px;

1982 }

1983 }

1984

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

1986

1987 .table0,

1988 .item0 {

1989 background: $offwhite;

1990 }

1991

1992 .table1,

1993 .item1 {

1994 background: #fff;

1995 }

1996

1997 /* Rules for OpenID logo */

1998

1999 .openid_logo {

2000 vertical-align: text-bottom;

2001 border: 0;

2002 }

2003

2004 /* Rules for rich text */

2005

2006 .richtext,

2007 .prose {

2008 h1, h2 {

2009 padding-bottom: $lineheight/2;

2010 border-bottom: 1px dashed #cccccc;

2011 margin-bottom: $lineheight/2;

2012 }

2013

2014 h1 {

2015 font-size: 24px;

2016 }

2017

2018 h2 {

2019 font-size: 18px;

2020 }

2021

2022 h3 {

2023 font-size: $typeheight;

2024 }

2025

2026 code {

2027 font-size: 13px;

2028 background: #e8e8e8;

2029 padding: 2px 3px;

2030 }

2031

2032 pre {

2033 font-size: 13px;

2034 background: #e8e8e8;

2035 padding: 2px 3px;

2036

2037 code {

2038 padding: 0;

2039 }

2040 }

2041

2042 img {

2043 padding: $lineheight;

2044 background-color: $offwhite;

2045 display: block;

2046 max-width: 100%;

2047 margin: auto;

2048 }

2049

2050 blockquote {

2051 border-left: $lineheight solid $offwhite;

2052 padding-left: $lineheight;

2053 margin: 0;

2054 color: #7E7E7E;

2055 }

2056

2057 ul, ol {

2058 padding-left: $lineheight;

2059 margin-bottom: $lineheight;

2060 margin-left: $lineheight;

2061 }

2062

2063 ul li {

2064 list-style: disc;

2065 }

2066

2067 ol li {

2068 list-style: decimal;

2069 }

2070 }

2071

2072 .diary_post .richtext {

2073 margin-top: $lineheight;

2074 }

2075

2076 .comments .richtext {

2077 margin-left: 70px;

2078 margin-top: 0;

2079 }

2080

2081 /* Rules for rich text editors */

2082

2083 .richtext_container {

2084 margin-bottom: $lineheight;

2085

2086 .richtext_content {

2087 width: 50%;

2088 display: inline-block;

2089 vertical-align: top;

2090

2091 .richtext_preview {

2092 display: inline-block;

2093 padding: $lineheight;

2094 background-color: $offwhite;

2095 overflow-x: auto;

2096

2097 &.loading {

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

2099 background-repeat: no-repeat;

2100 background-position: center;

2101 }

2102

2103 > :first-child {

2104 margin-top: 0px;

2105 }

2106 }

2107 }

2108

2109 .richtext_help {

2110 display: inline-block;

2111 vertical-align: top;

2112 margin-left: 15px;

2113 background-color: #f8f8ff;

2114 padding: $lineheight/2;

2115 width: 220px;

2116

2117 ul {

2118 margin-bottom: 0;

2119 }

2120

2121 h4.heading, li {

2122 border-bottom: 1px solid #ccc;

2123 margin-bottom: $lineheight/4;

2124 padding-bottom: $lineheight/4;

2125 }

2126

2127 li h4, li span, li p {

2128 display: inline-block;

2129 vertical-align: top;

2130 font-size: 11px;

2131 }

2132

2133 li h4 {

2134 width: 40%;

2135 margin: 0;

2136 }

2137

2138 li span, li p {

2139 width: 50%;

2140 margin-left: $lineheight/2;

2141 margin-bottom: $lineheight/4;

2142 white-space: nowrap;

2143 }

2144 }

2145 }

2146

2147 /* Rules for the user notes list */

2148

2149 .note_list {

2150 tr.creator {

2151 background-color: #eeeeee;

2152 }

2153

2154 td {

2155 padding: 3px;

2156 }

2157

2158 p {

2159 margin-bottom: 0px;

2160 }

2161 }

2162

2163 /* Rules for the notes interface */

2164

2165 .leaflet-popup-content .note {

2166 padding-top: $lineheight/2;

2167 }

2168

2169 .leaflet-popup-content .note {

2170 h2 {

2171 margin-bottom: $lineheight/2;

2172 }

2173

2174 div {

2175 margin-top: $lineheight/2;

2176 }

2177

2178 .permalink {

2179 position: absolute;

2180 top: $lineheight/4;

2181 left: $lineheight/4;

2182 min-width: 15px;

2183 min-height: 15px;

2184 }

2185

2186 .permalink span {

2187 display: none;

2188 padding-left: $lineheight;

2189 }

2190

2191 .permalink:hover span {

2192 display: block;

2193 }

2194

2195 .warning {

2196 display: block;

2197 background-color: #ffe0cc;

2198 padding: 4px 6px;

2199 margin-bottom: $lineheight/2;

2200 }

2201

2202 .comment_body {

2203 margin-top: 2px;

2204 margin-bottom: 2px;

2205

2206 p {

2207 margin-top: 0px;

2208 margin-bottom: 0px;

2209 }

2210 }

2211

2212 .comment {

2213 width: 100%;

2214 height: 100px;

2215 }

2216

2217 .buttons {

2218 margin-top: $lineheight/4;

2219 text-align: right;

2220 }

2221 }

2222

2223 /* Rules for the iD editor */

2224

2225 .id-embed {

2226 width: 100%;

2227 height: 100%;

2228 }

2229

2230 /* Rules for dropdown menus */

2231

2232 .dropdown {

2233 position: relative;

2234 }

2235

2236 .dropdown-toggle {

2237 *margin-bottom: -3px;

2238 }

2239

2240 .dropdown-toggle:active,

2241 .open .dropdown-toggle {

2242 outline: 0;

2243 }

2244

2245 .caret {

2246 display: inline-block;

2247 width: 0;

2248 height: 0;

2249 vertical-align: top;

2250 border-top: 4px solid #000000;

2251 border-right: 4px solid transparent;

2252 border-left: 4px solid transparent;

2253 content: "";

2254 }

2255

2256 .dropdown .caret {

2257 margin-top: 8px;

2258 margin-left: 2px;

2259 }

2260

2261 .dropdown-menu {

2262 position: absolute;

2263 top: 100%;

2264 left: -1px;

2265 z-index: 1000;

2266 display: none;

2267 float: left;

2268 min-width: 160px;

2269 padding: 5px 0;

2270 margin: 0;

2271 list-style: none;

2272 background-color: #ffffff;

2273 border: 1px solid #ccc;

2274 *border-right-width: 2px;

2275 *border-bottom-width: 2px;

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

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

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

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

2280 -moz-background-clip: padding;

2281 background-clip: padding-box;

2282 }

2283

2284 .dropdown-menu.pull-right {

2285 right: 0;

2286 left: auto;

2287 }

2288

2289 .dropdown-menu .divider {

2290 *width: 100%;

2291 height: 1px;

2292 margin: 9px 1px;

2293 *margin: -5px 0 5px;

2294 overflow: hidden;

2295 background-color: #e5e5e5;

2296 border-bottom: 1px solid #ffffff;

2297 }

2298

2299 .dropdown-menu > li > a {

2300 display: block;

2301 padding: 3px 10px;

2302 clear: both;

2303 font-weight: normal;

2304 line-height: 20px;

2305 color: #333333;

2306 white-space: nowrap;

2307 }

2308

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

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

2311 .dropdown-submenu:hover > a,

2312 .dropdown-submenu:focus > a {

2313 color: #ffffff;

2314 text-decoration: none;

2315 background-color: $green;

2316 }

2317

2318 .dropdown-menu > .active > a,

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

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

2321 color: #ffffff;

2322 text-decoration: none;

2323 background-color: $green;

2324 outline: 0;

2325 }

2326

2327 .dropdown-menu > .disabled > a,

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

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

2330 color: #999999;

2331 }

2332

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

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

2335 text-decoration: none;

2336 cursor: default;

2337 background-color: transparent;

2338 background-image: none;

2339 }

2340

2341 .open {

2342 *z-index: 1000;

2343 }

2344

2345 .open > .dropdown-menu {

2346 display: block;

2347 }

2348

2349 .dropdown-backdrop {

2350 position: fixed;

2351 top: 0;

2352 right: 0;

2353 bottom: 0;

2354 left: 0;

2355 z-index: 990;

2356 }

2357

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

2359 .site-welcome {

2360 .center {

2361 text-align: center;

2362 .sprite {

2363 float: none;

2364 margin: auto;

2365 }

2366 }

2367

2368 .sprite {

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

2370 background-size: 500px 250px;

2371 display: block;

2372 float: left;

2373 }

2374

2375 .icon-list {

2376 padding-bottom: 20px;

2377 div {

2378 margin-bottom: 10px;

2379 p {

2380 padding-top: 10px;

2381 }

2382 }

2383 }

2384 .sprite.small {

2385 width: 50px;

2386 height: 50px;

2387 }

2388

2389 .sprite.x {

2390 background-position: -50px 0;

2391 }

2392

2393 .sprite.term {

2394 margin-right: 10px;

2395 vertical-align: middle;

2396 }

2397

2398 .sprite.node {

2399 background-position: -100px 0;

2400 }

2401

2402 .sprite.way {

2403 background-position: -150px 0;

2404 }

2405

2406 .sprite.tag {

2407 background-position: -200px 0;

2408 }

2409

2410 .sprite.editor {

2411 background-position: -250px 0;

2412 }

2413

2414 .sprite.question {

2415 background-position: -300px 0;

2416 }

2417

2418 .start-mapping {

2419 margin: auto;

2420 cursor: pointer;

2421 border: none;

2422 padding: 20px 40px;

2423 font-size: 30px;

2424 text-decoration: none;

2425 }

2426

2427 .note-box {

2428 margin-top: 20px;

2429 background-color: $offwhite;

2430 }

2431

2432 .icon.note {

2433 background-color: #333;

2434 border-radius: 4px;

2435 }

2436 }

2437

2438 .site-about #content {

2439 //background-color: #000;

2440 background-color: #eee;

2441 background-position: 50% 50%;

2442 background-repeat: no-repeat;

2443 background-size: cover;

2444 background-attachment: fixed;

2445

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

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

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

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

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

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

2452

2453 .caption {

2454 max-width: 200px;

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

2456 position: fixed;

2457 text-align: right;

2458 right: 20px;

2459 bottom: 60px;

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

2461 color: #eee;

2462 opacity: 0.8;

2463 display: none;

2464 }

2465

2466 .caption a {

2467 color: white;

2468 white-space: nowrap;

2469 text-decoration: none;

2470 }

2471

2472 a.next {

2473 display: block;

2474 position: fixed;

2475 right: 10px;

2476 bottom: 10px;

2477 width: 40px;

2478 height: 40px;

2479 border-radius: 5px;

2480 text-indent: -9999px;

2481 overflow: hidden;

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

2483 background-color: #000;

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

2485 }

2486

2487 .content-inner {

2488 position: relative;

2489 color: #333;

2490 min-width: 320px;

2491 max-width: 640px;

2492

2493 .section {

2494 margin-bottom: 30px;

2495 }

2496

2497 .section:last-child {

2498 margin-bottom: 0;

2499 }

2500 }

2501

2502 .text {

2503 background: white;

2504 padding: 40px;

2505 }

2506

2507 .attr {

2508 position: relative;

2509 padding: 170px 40px 20px;

2510 background: #333;

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

2512 margin-bottom: 0;

2513 margin-top: -20px;

2514

2515 h1 {

2516 display: block;

2517 color: white;

2518 font-weight: 300;

2519 font-size: 34px;

2520 span {

2521 color: #76c551;

2522 }

2523 }

2524

2525 .user-image {

2526 position: absolute;

2527 top: 0px;

2528 right: 240px;

2529 left: 0px;

2530 height: 150px;

2531 background-position: 0 50%;

2532 background-repeat: no-repeat;

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

2534 background-size: cover;

2535 background-color: #76c551;

2536 }

2537

2538 .byosm {

2539 position: absolute;

2540 top: 0px;

2541 right: 0px;

2542 z-index: 1;

2543 width: 240px;

2544 height: 150px;

2545 padding: 20px 20px 20px 40px;

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

2547 white-space: nowrap;

2548 color: #fff;

2549 background: #76c551;

2550 }

2551

2552 .byosm span {

2553 display: inline-block;

2554 width: 20px;

2555 margin-left: -20px;

2556 }

2557 }

2558

2559 h2 {

2560 margin-bottom: 10px;

2561 }

2562

2563 .icon {

2564 width: 30px;

2565 height: 30px;

2566 margin-right: 10px;

2567 vertical-align: middle;

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

2569

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

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

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

2573 &.contributors { background-position: 0px -120px; }

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

2575 }

2576 }

2577

2578 @import 'browse';