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 #menu-icon {

241 display: none !important;

242 float: right;

243 background: url("/assets/menu-icon.png") no-repeat;

244 background-size: 30px 30px;

245 display: block;

246 width: 30px;

247 height: 30px;

248 margin: 14px 10px 0 0;

249 opacity: 0.6;

250 }

251

252 header {

253 height: $headerHeight;

254 position: relative;

255 z-index: 1001;

256 font-size: 13px;

257

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

259 display: inline-block;

260 }

261

262 > * {

263 height: 100%;

264 padding: $lineheight/2 $lineheight;

265 }

266

267 h1, nav.primary {

268 float: left;

269 }

270

271 a, a:hover {

272 text-decoration: none;

273 }

274

275 img.logo {

276 width: 30px;

277 height: 30px;

278 margin-top: -4px;

279 vertical-align: middle;

280 }

281

282 h1 {

283 margin: 0;

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

285

286 a {

287 color: #000;

288 }

289 }

290 }

291

292 nav.primary {

293 > ul {

294 $border: 1px solid $green;

295

296 border: $border;

297 border-radius: $border-radius;

298

299 > li {

300 border-right: $border;

301 &:last-child {

302 border-right: 0;

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

304 }

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

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

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

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

309 &.dropdown {

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

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

312 }

313 }

314 }

315

316 a.tab,

317 .dropdown-toggle {

318 display: inline-block;

319 font-weight: 500;

320 color: $green;

321 padding: 5px 15px;

322 }

323

324 .dropdown-toggle {

325 padding: 5px 6px;

326 }

327

328 .caret {

329 border-top-color: $green;

330 margin-top: 10px;

331 }

332

333 .disabled a {

334 color: #ccc;

335 cursor: default;

336

337 .caret {

338 border-top-color: #ccc;

339 }

340 }

341

342 > ul li.current {

343 background-color: $green;

344

345 .tab {

346 color: #fff;

347 }

348

349 .caret {

350 border-top-color: #fff;

351 }

352 }

353 }

354

355 nav.secondary {

356 position: absolute;

357 right: 0;

358

359 > ul {

360 vertical-align: middle;

361 a, .dropdown-toggle {

362 display: inline-block;

363 text-decoration: none;

364 color: $darkgrey;

365 padding: 5px;

366

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

368 }

369 }

370

371 > ul li.current a {

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

373 }

374

375 .user-menu {

376 $border: 1px solid $grey;

377

378 font-weight: 500;

379 border: $border;

380 border-radius: $border-radius;

381 margin-left: 10px;

382

383 > li {

384 border-right: $border;

385 float: left;

386 &:last-child {

387 border-right: 0;

388

389 > a {

390 border-radius: 0 $border-radius $border-radius 0;

391 }

392 }

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

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

395 }

396

397 a {

398 padding: 5px 15px;

399 }

400

401 &.logged-in > a {

402 padding: 0;

403 > .user-button {

404 padding: 5px 10px 5px 6px;

405 display: inline-block;

406 }

407 }

408 }

409

410 .caret {

411 border-top-color: $grey;

412 margin-top: 9px;

413 }

414

415 img.user_thumbnail_tiny {

416 border: 0;

417 vertical-align: top;

418 margin-top: 0px;

419 margin: 3px 0 0 3px;

420 border-radius: 2px;

421 }

422

423 #inboxanchor {

424 display: inline-block;

425 vertical-align: top;

426 height: 25px;

427 margin: 3px 0 3px 3px;

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

429 line-height: 20px;

430 border-radius: 2;

431 }

432

433 .dropdown-menu {

434 left: auto;

435 right: 0;

436

437 .count-number {

438 float: right;

439 padding: 0 5px;

440 margin: 0;

441 }

442 }

443 }

444

445 /* Utility for styling notification numbers */

446

447 .count-number {

448 padding: 2px $lineheight/4;

449 border-radius: 2px;

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

451 margin: 0 2px;

452 font-size: 11px;

453 color: #333;

454 }

455

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

457

458 #noscript {

459 z-index: 20000000;

460 position: absolute;

461 top: 15px;

462 left: 15px;

463 }

464

465 /* Rules for bootstrap tooltips */

466

467 .tooltip {

468 position: absolute;

469 display: none;

470 color: #333;

471 text-align: left;

472 font-size: 12px;

473 max-width: 250px;

474 }

475

476 .tooltip.in {

477 opacity: 0.8;

478 z-index: 1030;

479 height: auto;

480 display: block;

481 }

482

483 .tooltip.top {

484 margin-top: -10px;

485 text-align: center;

486 }

487

488 .tooltip.right {

489 margin-left: 10px;

490 }

491

492 .tooltip.bottom {

493 margin-top: 10px;

494 text-align: center;

495 }

496

497 .tooltip.left {

498 margin-left: -10px;

499 text-align: right;

500 }

501

502 .tooltip-inner {

503 display: inline-block;

504 padding: 10px;

505 font-weight: normal;

506 background-color: white;

507 }

508

509 .tooltip-arrow {

510 position: absolute;

511 width: 0;

512 height: 0;

513 border-color: transparent;

514 border-style: solid;

515 }

516

517 .tooltip.top .tooltip-arrow {

518 bottom: -5px;

519 left: 50%;

520 margin-left: -5px;

521 border-top-color: white;

522 border-width: 5px 5px 0;

523 }

524

525 .tooltip.right .tooltip-arrow {

526 top: 50%;

527 left: -5px;

528 margin-top: -5px;

529 border-right-color: white;

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

531 }

532

533 .tooltip.left .tooltip-arrow {

534 top: 50%;

535 right: -5px;

536 margin-top: -5px;

537 border-left-color: white;

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

539 }

540

541 .tooltip.bottom .tooltip-arrow {

542 top: -5px;

543 left: 50%;

544 margin-left: -5px;

545 border-bottom-color: white;

546 border-width: 0 5px 5px;

547 }

548

549 /* Rules for Leaflet maps */

550

551 .leaflet-control .control-button {

552 display: block;

553 height: 40px;

554 width: 40px;

555 background-color: #333;

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

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

558 margin-bottom: 10px;

559 outline: none;

560

561 &:hover {

562 background-color: black;

563 }

564

565 &.active {

566 background-color: #9ed485;

567 }

568

569 &.disabled {

570 background-color: #333;

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

572 cursor: default;

573 }

574

575 .icon {

576 margin: 10px;

577 }

578 }

579

580 .leaflet-control .zoomin,

581 .control-layers .control-button {

582 margin-bottom: 0px;

583 border-radius: 4px 0 0 0;

584 }

585

586 .leaflet-control .zoomout,

587 .control-key .control-button {

588 margin-bottom: 0;

589 border-radius: 0;

590 }

591

592 .control-locate .control-button,

593 .control-share .control-button {

594 border-radius: 0 0 0 4px;

595 }

596

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

598

599 .map-layout {

600 #content {

601 position: absolute;

602 top: $headerHeight;

603 bottom: 0;

604 width: 100%;

605 }

606

607 #sidebar, #map {

608 position: relative;

609 height: 100%;

610 overflow-x: hidden;

611 overflow-y: auto;

612 }

613

614 #sidebar {

615 float: left;

616 width: $sidebarWidth;

617

618 h2, h3, h4 {

619 padding: $lineheight $lineheight $lineheight/2;

620 }

621

622 h4 {

623 font-weight: normal;

624 color: #666;

625 font-size: 12px;

626 }

627

628 .icon.close {

629 position: absolute;

630 right: $lineheight;

631 cursor: pointer;

632 }

633

634 .footer {

635 position: absolute;

636 bottom: 0;

637 }

638

639 p.credits {

640 font-size: 11px;

641 color: #999;

642

643 a {

644 color: #666;

645 }

646 }

647

648 p.large-text {

649 font-size: 1.7em;

650 line-height: 1.4em;

651 font-weight: 300;

652 }

653 }

654

655 #sidebar.minimized {

656 position: absolute;

657 z-index: 1000;

658 height: auto;

659 border-right: none;

660

661 #sidebar_content {

662 display: none;

663 }

664

665 #search_form {

666 background: none;

667 width: 78%;

668 }

669 }

670

671 #map {

672 height: 100%;

673 overflow: hidden;

674 }

675

676 #map-ui {

677 display: none;

678 position: relative;

679 float: right;

680 width: 250px;

681 height: 100%;

682 background: white;

683 overflow: auto;

684

685 .section {

686 border-bottom: 1px solid #DDD;

687 padding: 10px 20px;

688 }

689

690 a.close-button {

691 float: right;

692 padding:5px;

693 font-size:20px;

694 line-height:10px;

695 color:#222;

696 border:1px solid #ddd;

697 }

698 }

699 }

700

701 .layers-ui,

702 .share-ui {

703 li:last-child {

704 margin-bottom: 0;

705 }

706 }

707

708 .layers-ui {

709 .base-layers {

710 .leaflet-container {

711 width: 100%;

712 height: 50px;

713 cursor: pointer;

714 }

715

716 li {

717 overflow: hidden;

718 border-radius: 3px;

719 border: 2px solid #fff;

720 margin-bottom: 8px;

721 position: relative;

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

723

724 label {

725 position: absolute;

726 top: 0;

727 left: 0;

728 padding: 2px 6px;

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

730 cursor: pointer;

731 font-weight: 500;

732 font-size: 16px;

733 text-stroke: 2px #fff;

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

735 text-shadow:

736 -2px -2px 1px #fff,

737 2px -2px 1px #fff,

738 -2px 2px 1px #fff,

739 2px 2px 1px #fff;

740 input[type="radio"] {

741 display: none;

742 }

743 }

744

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

746 &:hover {

747 border-color: $grey;

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

749 }

750 }

751 }

752

753 .overlay-layers {

754 p {

755 font-size: 13px;

756 margin-bottom: 8px;

757 }

758 }

759 }

760

761 .share-ui {

762 .share-tabs {

763 margin-bottom: 10px;

764

765 a {

766 color: #fff;

767 text-decoration: none;

768 background-color: $lightblue;

769 padding: 5px 10px;

770 }

771

772 a:first-child {

773 border-right: 1px solid #fff;

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

775 }

776

777 a:last-child {

778 border-left: 1px solid #fff;

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

780 }

781

782 a.active {

783 background-color: $blue;

784 }

785 }

786

787 .share-tab {

788 display: none;

789 }

790

791 .share-link {

792 input[type=text],

793 textarea {

794 width: 100%;

795 font-family: monospace;

796 font-size: small;

797 line-height: 1.3;

798 }

799 }

800

801 .share-image {

802 label {

803 margin-right: 10px;

804 }

805 }

806

807 #embed_html {

808 resize: vertical;

809 }

810

811 #mapnik_scale {

812 width: 100px;

813 }

814 }

815

816 .leaflet-top.leaflet-right {

817 top: $lineheight !important;

818 .leaflet-control {

819 margin-right: 0px !important;

820 margin-top: 0px !important;

821 }

822 }

823

824 .leaflet-popup-scrolled {

825 padding-right: $lineheight;

826 border-bottom: 0px !important;

827 border-top: 0px !important;

828 }

829

830 .leaflet-popup-content-wrapper {

831 border-radius: 4px !important;

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

833 }

834

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

836

837 #attribution {

838 display: none;

839 }

840

841 .attribution_license,

842 .attribution_project {

843 text-align: left;

844 }

845

846 .attribution_notice {

847 text-align: center;

848 }

849

850 /* Rules for the sidebar */

851

852 .sidebar_heading {

853 position: relative;

854 padding: $lineheight/2 $lineheight;

855 // background: $offwhite;

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

857 > .close {

858 float: right;

859 margin-top: 2px;

860 cursor: pointer;

861 }

862 }

863

864 #sidebar_content {

865 position: absolute;

866 top: 50px;

867 bottom: 0;

868 width: 100%;

869 overflow-y: auto;

870

871 .loader,

872 .load_more {

873 text-align: center;

874 margin: $lineheight auto;

875 width: $lineheight;

876 display: block;

877 }

878 }

879

880 /* Rules for the search box */

881

882 #search_form {

883 position: relative;

884 padding: $lineheight/2 $lineheight;

885 background-color: $lightgrey;

886

887 #query_wrapper {

888 position: relative;

889 overflow: hidden;

890 }

891

892 input {

893 width: 100%;

894 height: 30px;

895 border-right: none;

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

897

898 transition: 300ms linear;

899 -webkit-transition: 300ms linear;

900 -moz-transition: 300ms linear;

901 }

902

903 input:focus {

904 outline: none;

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

906 }

907

908 input[type=submit] {

909 float: right;

910 width: auto;

911 min-width: 0;

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

913 }

914

915 #describe_location {

916 position: absolute;

917 top: 6px;

918 right: 6px;

919 font-size: 10px;

920 color: $blue;

921 }

922 }

923

924 /* Rules for donation request box */

925

926 a.donate {

927 display: block;

928 padding: $lineheight/4 $lineheight;

929 border: 1px solid $green;

930 font-size: $typeheight;

931 line-height: 1.4;

932 text-align: center;

933 border-radius: 2px;

934 color: #222;

935 margin: $lineheight/2 $lineheight;

936

937 &:hover {

938 background: $green;

939 text-decoration: none;

940 }

941 }

942

943 /* Rules for rotating sidebar ads */

944

945 .ad-container {

946 display: block;

947 height: 120px;

948 margin: auto;

949 overflow: hidden;

950 position: relative;

951 border-bottom: 1px solid #ccc;

952

953 a {

954 display: block;

955 width: 165px;

956 margin: auto;

957 }

958

959 .ad {

960 height: 100px;

961 border: 0;

962 background: #fff;

963 }

964 }

965

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

967

968 #mapkey {

969 .mapkey-table-key img {

970 display: block;

971 margin-left: auto;

972 margin-right: auto;

973 }

974 td {

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

976 }

977 }

978

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

980

981 .search_results_entry {

982 ul li {

983 border-bottom: $keyline;

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

985 }

986

987 .search_details {

988 display: block;

989 float: right;

990 text-align: right;

991 margin-top: 0.2em;

992 margin-left: 0.5em;

993 }

994 }

995

996 .search_results_error {

997 color: #f00;

998 }

999

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

1001

1002 #browse_content {

1003 position: relative;

1004 .browse_show_list.button {

1005 position: absolute;

1006 left: $lineheight;

1007 right: $lineheight;

1008 bottom: -40px;

1009 margin-bottom: 0;

1010 }

1011 a.more-details {

1012 position: absolute;

1013 top: 0;

1014 right: $lineheight;

1015 }

1016 ul li {

1017 margin-bottom: 0;

1018 }

1019 }

1020

1021 /* Rules for entity history */

1022 #sidebar_content {

1023 .browse_details {

1024 position: relative;

1025 border-bottom: $keyline;

1026 }

1027 }

1028

1029 .browse_status {

1030 display: none;

1031 }

1032

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

1034

1035 #sidebar .changesets {

1036 li {

1037 padding: $lineheight;

1038 border-bottom: $keyline;

1039 cursor: pointer;

1040

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

1042 }

1043

1044 .comment a {

1045 font-weight: bold;

1046 color: #000;

1047 }

1048 }

1049

1050 /* Rules for the data browser */

1051

1052 #sidebar_content {

1053 .browse-section {

1054 padding: 10px 20px;

1055

1056 h4 {

1057 padding: 0;

1058 }

1059 }

1060

1061 .paginate ul, .note-comments ul {

1062 padding-left: 20px;

1063 }

1064

1065 .browse-field {

1066 margin-bottom: 10px;

1067

1068 h4 {

1069 padding: 5px 0 5px 10px;

1070 font-size: 12px;

1071 border: 1px solid #CCC;

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

1073 background-color: #F6F6F6;

1074 }

1075

1076 p {

1077 padding: 7px 10px;

1078 font-size: 12px;

1079 background-color: #FFF;

1080 border: 1px solid #CCC;

1081 border-top: 0;

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

1083 }

1084 }

1085

1086 .browse-tag-list {

1087 border: 1px solid #CCC;

1088 border-radius: 4px;

1089 font-size: 12px;

1090

1091 li {

1092 border-bottom: 1px solid #CCC;

1093 }

1094

1095 li:last-child {

1096 border-bottom: 0;

1097 }

1098

1099 .browse-tag-k,

1100 .browse-tag-v {

1101 display: inline-block;

1102 width: 50%;

1103 height: 30px;

1104 float: left;

1105 padding: 6px 10px;

1106 }

1107

1108 .browse-tag-k {

1109 font-weight: 500;

1110 background-color: #F6F6F6;

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

1112 }

1113

1114 .browse-tag-v {

1115 border-left: 1px solid #CCC;

1116 }

1117 }

1118 }

1119

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

1121

1122 .export_bounds {

1123 text-align: center;

1124 }

1125

1126 .export_area_inputs {

1127 margin-bottom: $lineheight/2;

1128 input[type="text"] {

1129 width: 80px;

1130 margin-bottom: 5px;

1131 }

1132 }

1133

1134 .export_bound {

1135 margin: $lineheight/4;

1136 }

1137

1138 #export_osm {

1139 span.small-title {

1140 font-weight: 500;

1141 display: block;

1142 font-size: 14px;

1143 padding-bottom: 5px;

1144 }

1145

1146 dl {

1147 padding-left: 30px;

1148 font-size: 13px;

1149 color: #666;

1150 dd {

1151 margin-left: 0;

1152 margin-bottom: 10px;

1153 }

1154 }

1155 }

1156

1157 /* Rules for edit pages */

1158

1159 .site-edit {

1160 #content {

1161 position: absolute;

1162 top: $headerHeight;

1163 bottom: 0;

1164 width: 100%;

1165 }

1166

1167 #map {

1168 height: 100%;

1169 }

1170 }

1171

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

1173

1174 .content-heading {

1175 background: $lightgrey;

1176

1177 h1 { font-size: 22px; }

1178 }

1179

1180 .content-body {

1181 h1, h2, h3, p {

1182 margin-bottom: $lineheight;

1183 }

1184

1185 h1, h2, h3 {

1186 margin-top: $lineheight/2;

1187 }

1188 }

1189

1190 .content-inner {

1191 position: relative;

1192 max-width: 900px;

1193 margin: auto;

1194 padding: $lineheight;

1195 }

1196

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

1198

1199 .user-new,

1200 .user-create,

1201 .user-terms {

1202 .content-body .content-inner {

1203 padding: 0;

1204 }

1205 }

1206

1207 .user-new,

1208 .user-create,

1209 .user-terms,

1210 .user-confirm {

1211 .content-heading .content-inner {

1212 height: 200px;

1213 }

1214 }

1215

1216 .header-illustration {

1217 background-position: 0 0;

1218 background-repeat: no-repeat;

1219 position: absolute;

1220 height: 200px;

1221 width: 100%;

1222 left: 0;

1223 bottom: 0;

1224

1225 &.new-user-main {

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

1227 }

1228

1229 &.confirm-main {

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

1231 }

1232

1233 &.new-user-terms {

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

1235 }

1236

1237 &.new-user-arm {

1238 height: 110px;

1239 width: 130px;

1240 left: 260px;

1241 top: 160px;

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

1243 z-index: 100;

1244 }

1245 }

1246

1247 #content.maximised {

1248 top: 0;

1249 left: 0;

1250 right: 0;

1251 bottom: 0;

1252 border: 0;

1253 z-index: 1000;

1254 }

1255

1256 #slim_container {

1257 width: 100%;

1258 }

1259

1260 #slim_container_content {

1261 max-width: 50em;

1262 background-color: #FFFFFF;

1263 margin: $lineheight/2 auto;

1264 padding: 3px;

1265 border-radius: 25px;

1266 -moz-border-radius: 25px;

1267 border: 1px solid #e6e6e6;

1268 }

1269

1270 #slim_content {

1271 margin: $lineheight/2;

1272 margin-top: 95px;

1273 max-width: 50em;

1274

1275 .content-heading {

1276 margin-bottom: 15px;

1277 }

1278 }

1279

1280 #slim_header {

1281 margin: 30px $lineheight/2;

1282 position: absolute;

1283 top: 0px;

1284 margin-right: $lineheight/4;

1285 img {

1286 vertical-align: middle;

1287 margin-bottom: $lineheight/4;

1288 margin-right: $lineheight/4;

1289 }

1290 }

1291

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

1293

1294 .content_map {

1295 position: relative;

1296 width: 45%;

1297 height: 400px;

1298 border: 1px solid #ccc;

1299 margin-bottom: $lineheight;

1300 float: right;

1301 }

1302

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

1304

1305 #trace_list {

1306 font-size: $lineheight/2;

1307 border-width: 0px;

1308 text-align: right;

1309

1310 .trace_summary {

1311 font-size: 12px;

1312 color: gray;

1313 }

1314

1315 .trace_pending {

1316 color: red;

1317 }

1318

1319 .trace_public {

1320 color: green;

1321 }

1322

1323 .trace_identifiable {

1324 color: green;

1325 }

1326

1327 .trace_trackable {

1328 color: red;

1329 }

1330

1331 .trace_private {

1332 color: red;

1333 }

1334 }

1335

1336 /* Rules for the user profile page */

1337

1338 #userinformation {

1339

1340 min-height: 100px;

1341 .userinformation-inner {

1342 float: left;

1343 }

1344 h2 {

1345 margin-top: 0;

1346 }

1347 .user-description {

1348 width: 100%;

1349 clear: both;

1350 }

1351 .deemphasize {

1352 margin: 0;

1353 }

1354 }

1355

1356 .admin-user-info small {

1357 margin-bottom: $lineheight/2;

1358 display: inline;

1359 margin-right: $lineheight;

1360 }

1361

1362 .activity-block {

1363 clear: left;

1364 border-bottom: 1px solid #ccc;

1365 padding-bottom: $lineheight;

1366 float: left;

1367 h3 {

1368 margin-bottom: $lineheight/2;

1369 }

1370 }

1371

1372 .contact-activity {

1373 margin-top: $lineheight;

1374 width: 100%;

1375 }

1376

1377 .activity-details p {

1378 margin-left: 70px;

1379 margin-bottom: 0;

1380 }

1381

1382 #friends-container .contact-activity ul {

1383 margin-left: 70px;

1384 }

1385

1386 .user-view {

1387 p#no_home_location {

1388 margin: $lineheight;

1389 }

1390 .user_thumbnail {

1391 margin-top: $lineheight/4;

1392 float: left;

1393 }

1394 }

1395

1396 /* Rules for the user map */

1397

1398 .content_map .leaflet-popup-content {

1399 margin: $lineheight/2;

1400 min-height: 50px;

1401 }

1402

1403 /* Rules for user popups on maps */

1404

1405 .user_popup {

1406 min-width: 200px;

1407 p {

1408 padding: 0 0 5px 0;

1409 margin-top: 0 0 0 60px;

1410 font-size: 12px;

1411 }

1412 img.user_thumbnail {

1413 float: left;

1414 margin: 0 $lineheight/2 0 0;

1415 }

1416 }

1417

1418 /* Rules for the user list */

1419

1420 #user_list {

1421 font-size: $lineheight/2;

1422 width: 100%;

1423

1424 tr {

1425 vertical-align: middle;

1426 }

1427

1428 p {

1429 margin-top: 0px;

1430 margin-bottom: 0px;

1431 }

1432 }

1433

1434 #user_list_actions {

1435 float: right;

1436 margin-top: $lineheight/2;

1437 }

1438

1439 /* Rules for the diary list page */

1440

1441 .diary_post {

1442 position: relative;

1443 margin-top: $lineheight/2;

1444 padding-top: $lineheight;

1445 border-top: 1px solid #ccc;

1446

1447 .post_heading {

1448 margin-bottom: $lineheight;

1449

1450 h2 {

1451 margin-top: 0;

1452 margin-bottom: $lineheight/2;

1453 font-size: 24px;

1454 }

1455 }

1456

1457 img.user_thumbnail {

1458 float: left;

1459 }

1460

1461 small.deemphasize {

1462 float: left;

1463 display: block;

1464 }

1465

1466 ul.secondary-actions {

1467 display: inline-block;

1468 }

1469 }

1470

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

1472 display: inline;

1473 }

1474

1475 /* Rules for the diary entry page */

1476

1477 .diary_entry {

1478 #map {

1479 position: relative;

1480 width: 90%;

1481 height: 400px;

1482 border: 1px solid #ccc;

1483 display: none;

1484 margin-bottom: $lineheight;

1485 }

1486 #newcomment {

1487 border-top: 1px solid #ccc;

1488 padding-top: $lineheight;

1489 margin-top: $lineheight/2;

1490 }

1491 .comments {

1492 max-width: 740px;

1493 }

1494 .diary-comment {

1495 margin-top: $lineheight/2;

1496 border-top: 1px dashed #ccc;

1497 padding-top: $lineheight/2;

1498 &:first-child {

1499 margin-top: $lineheight;

1500 padding-top: $lineheight;

1501 border-top: 1px solid #ccc;

1502 }

1503 p {

1504 margin-bottom: $lineheight/2;

1505 }

1506 .comment-heading {

1507 margin-bottom: 0;

1508 margin-top: 0;

1509 }

1510 }

1511 }

1512

1513 .diary_entry-view img.user_thumbnail {

1514 float: left;

1515 }

1516

1517 /* Rules for the log in page */

1518

1519 #login_openid_buttons {

1520 margin-bottom: 0;

1521 }

1522

1523 #login_openid_buttons li {

1524 float: left;

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

1526 }

1527

1528 /* Rules for the account confirmation page */

1529

1530 .user-terms {

1531 .legale {

1532 border: 1px solid #ccc;

1533 padding: $lineheight;

1534 margin-bottom: $lineheight;

1535 overflow: auto;

1536 height: 10em;

1537 }

1538

1539 #decline {

1540 background: $lightblue;

1541 &:hover {

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

1543 }

1544 }

1545

1546 .form-row {

1547 margin: auto;

1548 max-width: 370px;

1549 }

1550 }

1551

1552 /* Rules for the account settings page */

1553

1554 #accountForm .user_map {

1555 position: relative;

1556 width: 500px;

1557 height: 400px;

1558 border: 1px solid #ccc;

1559 }

1560

1561 #accountForm .user_image {

1562 margin-bottom: 0;

1563 }

1564

1565 #accountForm #user_image {

1566 margin-left: 20px;

1567 }

1568

1569 #accountForm ul.accountImage-options {

1570 margin-left: 120px;

1571 }

1572

1573 .nohome .location {

1574 display: none;

1575 }

1576

1577 #homerow .message {

1578 display: none;

1579 }

1580

1581 .nohome .message {

1582 display: inline !important;

1583 }

1584

1585 .content_map.settings_map {

1586 width: 50%;

1587 float: none;

1588 }

1589

1590 /* Rules for the oauth settings page */

1591

1592 .oauth_clients .buttons .oauth-edit {

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

1594 }

1595

1596 .oauth_clients .buttons .oauth-delete {

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

1598 }

1599

1600 /* Rules for messages pages */

1601

1602 .messages {

1603 width: 100%;

1604 border: 1px solid #ddd;

1605

1606 input[type="submit"] {

1607 margin: auto;

1608 }

1609 tbody tr {

1610 border-top: 1px solid #ccc;

1611 }

1612

1613 .inbox-row {

1614 background: #f8f8ff;

1615 }

1616

1617 .inbox-row-unread {

1618 background:#CBEEA7;

1619 }

1620

1621 .right {

1622 float: right;

1623 }

1624

1625 tr td,

1626 tr th {

1627 padding: $lineheight/4;

1628 }

1629 p:last-child,

1630 h2:last-child,

1631 h3:last-child,

1632 ol:last-child,

1633 ul:last-child {

1634 margin-bottom:0;

1635 }

1636 tr td {

1637 height: 30px;

1638 border-right: 1px solid $lightgrey;

1639 }

1640 }

1641

1642 .inbox-row .inbox-mark-read {

1643 display: none;

1644 }

1645

1646 .info-line {

1647 margin-bottom: $lineheight;

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

1649 border-bottom: 1px solid #ccc;

1650

1651 form, form div {

1652 display: inline;

1653 }

1654 }

1655

1656 .info-line .user_thumbnail_tiny {

1657 vertical-align: middle;

1658 }

1659

1660 .inbox-mark-unread,

1661 .inbox-mark-read,

1662 .inbox-delete {

1663 width: 1%;

1664 }

1665

1666 .inbox-row-unread .inbox-mark-unread {

1667 display: none;

1668 }

1669

1670 .message-read .message-buttons {

1671 margin-top: $lineheight;

1672 padding-top: $lineheight;

1673 border-top: 1px solid $lightgrey;

1674 }

1675

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

1677 border-radius: 0;

1678 }

1679

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

1681

1682 .error {

1683 padding: $lineheight;

1684 background-color: #ff7070;

1685 }

1686

1687 .warning {

1688 padding: $lineheight;

1689 background-color: #ffe0cc;

1690 }

1691

1692 .notice {

1693 padding: $lineheight;

1694 background-color: #CBEEA7;

1695 }

1696

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

1698

1699 .field_with_errors {

1700 padding: 2px;

1701 background-color: #ff7070;

1702 display: inline-block;

1703 }

1704

1705 .formError {

1706 display: inline-block;

1707 padding: 5px 10px;

1708 margin-top: 5px;

1709 border-radius: 4px;

1710 font-size: 12px;

1711 color: #fff;

1712 background-color: #ff7070;

1713 }

1714

1715 /* Rules for rails validation error boxes */

1716

1717 #errorExplanation {

1718 width: 400px;

1719 border: 2px solid #ff7070;

1720 padding: 0 $lineheight/2;

1721 margin-bottom: $lineheight;

1722 background-color: #f0f0f0;

1723

1724 h2 {

1725 margin: 0 -10px 10px -10px;

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

1727 font-weight: 500;

1728 font-size: 12px;

1729 background-color: #c00;

1730 color: #fff;

1731 text-align: left;

1732 }

1733

1734 p {

1735 color: #333;

1736 margin-bottom: 0px;

1737 padding: $lineheight/4;

1738 }

1739

1740 ul {

1741 padding-left: $lineheight;

1742

1743 li {

1744 font-size: 12px;

1745 list-style: disc;

1746 }

1747 }

1748 }

1749

1750 /* Rules for forms */

1751

1752 .standard-form {

1753 fieldset {

1754 margin-bottom: $lineheight;

1755 }

1756 label.standard-label {

1757 display: block;

1758 margin-bottom: $lineheight/4;

1759 font-size: $typeheight;

1760 font-weight: 500;

1761 line-height: 1.5;

1762 }

1763 label.standard-label.secondary {

1764 display: inline-block;

1765 font-weight: normal;

1766 }

1767 .form-help {

1768 font-weight: normal;

1769 }

1770 .form-column {

1771 float: left;

1772 margin-right: 20px;

1773 }

1774 .form-divider {

1775 margin-top: $lineheight;

1776 padding-top: $lineheight;

1777 border-top: 1px solid $lightgrey;

1778 }

1779 .horizontal-list .form-row {

1780 float: left;

1781 padding-right: 10px;

1782 }

1783 .form-row {

1784 margin-bottom: $lineheight/2;

1785 }

1786 .form-list {

1787 margin-bottom: 0;

1788 }

1789 .form-list li {

1790 margin-bottom: 5px;

1791 }

1792 input[type="checkbox"],

1793 input[type="radio"] {

1794 float: left;

1795 margin-top: 5px;

1796 }

1797 }

1798

1799 #remember_me_openid {

1800 display: block;

1801 }

1802

1803 input[type="checkbox"],

1804 input[type="radio"] {

1805 margin-right: 5px;

1806 }

1807

1808 input[type="text"],

1809 input[type="email"],

1810 input[type="url"],

1811 input[type="password"],

1812 textarea {

1813 border: 1px solid #ccc;

1814 padding: 2px 5px;

1815 margin: 0;

1816 width: 200px;

1817 }

1818

1819 textarea {

1820 padding: 5px;

1821 width: 100%;

1822 }

1823

1824 /* Rules for user images */

1825

1826 img.user_image {

1827 max-width: 100px;

1828 max-height: 100px;

1829 border: 1px solid #ccc;

1830 margin-bottom: $lineheight;

1831 float: left;

1832 margin-right: $lineheight;

1833 }

1834

1835 img.user_thumbnail {

1836 max-width: 50px;

1837 max-height: 50px;

1838 border: 1px solid #ccc;

1839 margin-right: $lineheight;

1840 }

1841

1842 img.user_thumbnail_tiny {

1843 max-width: 25px;

1844 max-height: 25px;

1845 border: 1px solid #ccc;

1846 }

1847

1848 /* Rules for geo microformats */

1849

1850 abbr.geo {

1851 border-bottom: none;

1852 }

1853

1854 /* Rules for RSS buttons */

1855

1856 .rsssmall {

1857 position: relative;

1858 top: 3px;

1859 }

1860

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

1862

1863 ul.secondary-actions {

1864 font-style: normal;

1865 margin-bottom: 0;

1866 margin-left: 0;

1867 &.pager {

1868 display: inline-block;

1869 margin-right: 60px;

1870 }

1871 > li {

1872 display: block;

1873 float: left;

1874 list-style: none;

1875 border-left: 1px solid #ccc;

1876 padding-left: $lineheight/2;

1877 margin-right: $lineheight/2;

1878 &:first-child {

1879 border-left: 0;

1880 padding-left: 0;

1881 }

1882 &:last-child {

1883 margin-right: 0px;

1884 }

1885 }

1886 }

1887

1888 div.secondary-actions {

1889 padding: 10px;

1890 border-top: 1px solid #ccc;

1891 text-align: center;

1892 }

1893

1894 /* Utility for managing inner content areas */

1895

1896 .inner22 { padding: $lineheight;}

1897

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

1899

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

1901

1902 .inner20 { padding: $lineheight 0;}

1903

1904 .inner02 { padding: 0 $lineheight;}

1905

1906 /* Utility for general button styles */

1907

1908 input[type="button"],

1909 input[type="submit"],

1910 input[type="reset"],

1911 a.button {

1912 cursor: pointer;

1913 border: 0;

1914 display: inline-block;

1915 line-height: 20px;

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

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

1918 min-width: 120px;

1919 margin: 0 0 $lineheight/2 0;

1920 color: white;

1921 background: $blue;

1922 text-align: center;

1923 border-radius: 2px;

1924 -moz-border-radius: 2px;

1925 &:hover {

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

1927 text-decoration: none;

1928 }

1929 &.deemphasize {

1930 background: $lightblue;

1931 &:hover {

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

1933 }

1934 }

1935 &:disabled {

1936 background: $lightgrey;

1937 &:hover {

1938 background: $lightgrey;

1939 }

1940 }

1941 &:last-child {

1942 margin-bottom: 0;

1943 }

1944 }

1945

1946 .buttons {

1947 min-width: 200px;

1948 input[type="submit"],

1949 input[type="button"],

1950 input[type="reset"],

1951 .button {

1952 box-sizing: border-box;

1953 float: left;

1954 border-radius: 0;

1955 margin:0;

1956 min-width: 100px;

1957 max-width: 180px;

1958 border-right:1px solid white;

1959 text-overflow: ellipsis;

1960 white-space: nowrap;

1961 overflow: hidden;

1962 }

1963 input:first-child,

1964 .button:first-child {

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

1966 }

1967 input:last-child,

1968 .button:last-child {

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

1970 border-right-width: 0;

1971 }

1972 input:only-child,

1973 .button:only-child,

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

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

1976 border-radius:2px;

1977 border-right-width: 0;

1978 }

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

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

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

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

1983 border-right-width: 0;

1984 }

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

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

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

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

1989 border-right-width: 1px;

1990 }

1991 }

1992

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

1994

1995 .table0,

1996 .item0 {

1997 background: $offwhite;

1998 }

1999

2000 .table1,

2001 .item1 {

2002 background: #fff;

2003 }

2004

2005 /* Rules for OpenID logo */

2006

2007 .openid_logo {

2008 vertical-align: text-bottom;

2009 border: 0;

2010 }

2011

2012 /* Rules for rich text */

2013

2014 .richtext,

2015 .prose {

2016 h1, h2 {

2017 padding-bottom: $lineheight/2;

2018 border-bottom: 1px dashed #cccccc;

2019 margin-bottom: $lineheight/2;

2020 }

2021

2022 h1 {

2023 font-size: 24px;

2024 }

2025

2026 h2 {

2027 font-size: 18px;

2028 }

2029

2030 h3 {

2031 font-size: $typeheight;

2032 }

2033

2034 code {

2035 font-size: 13px;

2036 background: #e8e8e8;

2037 padding: 2px 3px;

2038 }

2039

2040 pre {

2041 font-size: 13px;

2042 background: #e8e8e8;

2043 padding: 2px 3px;

2044

2045 code {

2046 padding: 0;

2047 }

2048 }

2049

2050 img {

2051 padding: $lineheight;

2052 background-color: $offwhite;

2053 display: block;

2054 max-width: 100%;

2055 margin: auto;

2056 }

2057

2058 blockquote {

2059 border-left: $lineheight solid $offwhite;

2060 padding-left: $lineheight;

2061 margin: 0;

2062 color: #7E7E7E;

2063 }

2064

2065 ul, ol {

2066 padding-left: $lineheight;

2067 margin-bottom: $lineheight;

2068 margin-left: $lineheight;

2069 }

2070

2071 ul li {

2072 list-style: disc;

2073 }

2074

2075 ol li {

2076 list-style: decimal;

2077 }

2078 }

2079

2080 .diary_post .richtext {

2081 margin-top: $lineheight;

2082 }

2083

2084 .comments .richtext {

2085 margin-left: 70px;

2086 margin-top: 0;

2087 }

2088

2089 /* Rules for rich text editors */

2090

2091 .richtext_container {

2092 margin-bottom: $lineheight;

2093

2094 .richtext_content {

2095 width: 50%;

2096 display: inline-block;

2097 vertical-align: top;

2098

2099 .richtext_preview {

2100 display: inline-block;

2101 padding: $lineheight;

2102 background-color: $offwhite;

2103 overflow-x: auto;

2104

2105 &.loading {

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

2107 background-repeat: no-repeat;

2108 background-position: center;

2109 }

2110

2111 > :first-child {

2112 margin-top: 0px;

2113 }

2114 }

2115 }

2116

2117 .richtext_help {

2118 display: inline-block;

2119 vertical-align: top;

2120 margin-left: 15px;

2121 background-color: #f8f8ff;

2122 padding: $lineheight/2;

2123 width: 220px;

2124

2125 ul {

2126 margin-bottom: 0;

2127 }

2128

2129 h4.heading, li {

2130 border-bottom: 1px solid #ccc;

2131 margin-bottom: $lineheight/4;

2132 padding-bottom: $lineheight/4;

2133 }

2134

2135 li h4, li span, li p {

2136 display: inline-block;

2137 vertical-align: top;

2138 font-size: 11px;

2139 }

2140

2141 li h4 {

2142 width: 40%;

2143 margin: 0;

2144 }

2145

2146 li span, li p {

2147 width: 50%;

2148 margin-left: $lineheight/2;

2149 margin-bottom: $lineheight/4;

2150 white-space: nowrap;

2151 }

2152 }

2153 }

2154

2155 /* Rules for the user notes list */

2156

2157 .note_list {

2158 tr.creator {

2159 background-color: #eeeeee;

2160 }

2161

2162 td {

2163 padding: 3px;

2164 }

2165

2166 p {

2167 margin-bottom: 0px;

2168 }

2169 }

2170

2171 /* Rules for the notes interface */

2172

2173 .leaflet-popup-content .note {

2174 padding-top: $lineheight/2;

2175 }

2176

2177 .leaflet-popup-content .note {

2178 h2 {

2179 margin-bottom: $lineheight/2;

2180 }

2181

2182 div {

2183 margin-top: $lineheight/2;

2184 }

2185

2186 .permalink {

2187 position: absolute;

2188 top: $lineheight/4;

2189 left: $lineheight/4;

2190 min-width: 15px;

2191 min-height: 15px;

2192 }

2193

2194 .permalink span {

2195 display: none;

2196 padding-left: $lineheight;

2197 }

2198

2199 .permalink:hover span {

2200 display: block;

2201 }

2202

2203 .warning {

2204 display: block;

2205 background-color: #ffe0cc;

2206 padding: 4px 6px;

2207 margin-bottom: $lineheight/2;

2208 }

2209

2210 .comment_body {

2211 margin-top: 2px;

2212 margin-bottom: 2px;

2213

2214 p {

2215 margin-top: 0px;

2216 margin-bottom: 0px;

2217 }

2218 }

2219

2220 .comment {

2221 width: 100%;

2222 height: 100px;

2223 }

2224

2225 .buttons {

2226 margin-top: $lineheight/4;

2227 text-align: right;

2228 }

2229 }

2230

2231 /* Rules for the iD editor */

2232

2233 .id-embed {

2234 width: 100%;

2235 height: 100%;

2236 }

2237

2238 /* Rules for dropdown menus */

2239

2240 .dropdown {

2241 position: relative;

2242 }

2243

2244 .dropdown-toggle {

2245 *margin-bottom: -3px;

2246 }

2247

2248 .dropdown-toggle:active,

2249 .open .dropdown-toggle {

2250 outline: 0;

2251 }

2252

2253 .caret {

2254 display: inline-block;

2255 width: 0;

2256 height: 0;

2257 vertical-align: top;

2258 border-top: 4px solid #000000;

2259 border-right: 4px solid transparent;

2260 border-left: 4px solid transparent;

2261 content: "";

2262 }

2263

2264 .dropdown .caret {

2265 margin-top: 8px;

2266 margin-left: 2px;

2267 }

2268

2269 .dropdown-menu {

2270 position: absolute;

2271 top: 100%;

2272 left: -1px;

2273 z-index: 1000;

2274 display: none;

2275 float: left;

2276 min-width: 160px;

2277 padding: 5px 0;

2278 margin: 0;

2279 list-style: none;

2280 background-color: #ffffff;

2281 border: 1px solid #ccc;

2282 *border-right-width: 2px;

2283 *border-bottom-width: 2px;

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

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

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

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

2288 -moz-background-clip: padding;

2289 background-clip: padding-box;

2290 }

2291

2292 .dropdown-menu.pull-right {

2293 right: 0;

2294 left: auto;

2295 }

2296

2297 .dropdown-menu .divider {

2298 *width: 100%;

2299 height: 1px;

2300 margin: 9px 1px;

2301 *margin: -5px 0 5px;

2302 overflow: hidden;

2303 background-color: #e5e5e5;

2304 border-bottom: 1px solid #ffffff;

2305 }

2306

2307 .dropdown-menu > li > a {

2308 display: block;

2309 padding: 3px 10px;

2310 clear: both;

2311 font-weight: normal;

2312 line-height: 20px;

2313 color: #333333;

2314 white-space: nowrap;

2315 }

2316

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

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

2319 .dropdown-submenu:hover > a,

2320 .dropdown-submenu:focus > a {

2321 color: #ffffff;

2322 text-decoration: none;

2323 background-color: $green;

2324 }

2325

2326 .dropdown-menu > .active > a,

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

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

2329 color: #ffffff;

2330 text-decoration: none;

2331 background-color: $green;

2332 outline: 0;

2333 }

2334

2335 .dropdown-menu > .disabled > a,

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

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

2338 color: #999999;

2339 }

2340

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

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

2343 text-decoration: none;

2344 cursor: default;

2345 background-color: transparent;

2346 background-image: none;

2347 }

2348

2349 .open {

2350 *z-index: 1000;

2351 }

2352

2353 .open > .dropdown-menu {

2354 display: block;

2355 }

2356

2357 .dropdown-backdrop {

2358 position: fixed;

2359 top: 0;

2360 right: 0;

2361 bottom: 0;

2362 left: 0;

2363 z-index: 990;

2364 }

2365

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

2367 .site-welcome {

2368 .center {

2369 text-align: center;

2370 .sprite {

2371 float: none;

2372 margin: auto;

2373 }

2374 }

2375

2376 .sprite {

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

2378 background-size: 500px 250px;

2379 display: block;

2380 float: left;

2381 }

2382

2383 .icon-list {

2384 padding-bottom: 20px;

2385 div {

2386 margin-bottom: 10px;

2387 p {

2388 padding-top: 10px;

2389 }

2390 }

2391 }

2392 .sprite.small {

2393 width: 50px;

2394 height: 50px;

2395 }

2396

2397 .sprite.x {

2398 background-position: -50px 0;

2399 }

2400

2401 .sprite.term {

2402 margin-right: 10px;

2403 vertical-align: middle;

2404 }

2405

2406 .sprite.node {

2407 background-position: -100px 0;

2408 }

2409

2410 .sprite.way {

2411 background-position: -150px 0;

2412 }

2413

2414 .sprite.tag {

2415 background-position: -200px 0;

2416 }

2417

2418 .sprite.editor {

2419 background-position: -250px 0;

2420 }

2421

2422 .sprite.question {

2423 background-position: -300px 0;

2424 }

2425

2426 .start-mapping {

2427 margin: auto;

2428 cursor: pointer;

2429 border: none;

2430 padding: 20px 40px;

2431 font-size: 30px;

2432 text-decoration: none;

2433 }

2434

2435 .note-box {

2436 margin-top: 20px;

2437 background-color: $offwhite;

2438 }

2439

2440 .icon.note {

2441 background-color: #333;

2442 border-radius: 4px;

2443 }

2444 }

2445

2446 .site-about #content {

2447 //background-color: #000;

2448 background-color: #eee;

2449 background-position: 50% 50%;

2450 background-repeat: no-repeat;

2451 background-size: cover;

2452 background-attachment: fixed;

2453

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

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

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

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

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

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

2460

2461 .caption {

2462 max-width: 200px;

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

2464 position: fixed;

2465 text-align: right;

2466 right: 20px;

2467 bottom: 60px;

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

2469 color: #eee;

2470 opacity: 0.8;

2471 display: none;

2472 }

2473

2474 .caption a {

2475 color: white;

2476 white-space: nowrap;

2477 text-decoration: none;

2478 }

2479

2480 a.next {

2481 display: block;

2482 position: fixed;

2483 right: 10px;

2484 bottom: 10px;

2485 width: 40px;

2486 height: 40px;

2487 border-radius: 5px;

2488 text-indent: -9999px;

2489 overflow: hidden;

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

2491 background-color: #000;

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

2493 }

2494

2495 .content-inner {

2496 position: relative;

2497 color: #333;

2498 min-width: 320px;

2499 max-width: 640px;

2500

2501 .section {

2502 margin-bottom: 30px;

2503 }

2504

2505 .section:last-child {

2506 margin-bottom: 0;

2507 }

2508 }

2509

2510 .text {

2511 background: white;

2512 padding: 40px;

2513 }

2514

2515 .attr {

2516 position: relative;

2517 padding: 170px 40px 20px;

2518 background: #333;

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

2520 margin-bottom: 0;

2521 margin-top: -20px;

2522

2523 h1 {

2524 display: block;

2525 color: white;

2526 font-weight: 300;

2527 font-size: 34px;

2528 span {

2529 color: #76c551;

2530 }

2531 }

2532

2533 .user-image {

2534 position: absolute;

2535 top: 0px;

2536 right: 240px;

2537 left: 0px;

2538 height: 150px;

2539 background-position: 0 50%;

2540 background-repeat: no-repeat;

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

2542 background-size: cover;

2543 background-color: #76c551;

2544 }

2545

2546 .byosm {

2547 position: absolute;

2548 top: 0px;

2549 right: 0px;

2550 z-index: 1;

2551 width: 240px;

2552 height: 150px;

2553 padding: 20px 20px 20px 40px;

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

2555 white-space: nowrap;

2556 color: #fff;

2557 background: #76c551;

2558 }

2559

2560 .byosm span {

2561 display: inline-block;

2562 width: 20px;

2563 margin-left: -20px;

2564 }

2565 }

2566

2567 h2 {

2568 margin-bottom: 10px;

2569 }

2570

2571 .icon {

2572 width: 30px;

2573 height: 30px;

2574 margin-right: 10px;

2575 vertical-align: middle;

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

2577

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

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

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

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

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

2583 }

2584 }

2585

2586 @import 'browse';

2587

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

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

2590 display: none;

2591 }

2592 }

2593