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 float: left;

302 &:last-child {

303 border-right: 0;

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

305 }

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

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

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

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

310 &.dropdown {

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

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

313 }

314 }

315 }

316

317 a.tab,

318 .dropdown-toggle {

319 display: inline-block;

320 font-weight: 500;

321 color: $green;

322 padding: 5px 15px;

323 }

324

325 .dropdown-toggle {

326 padding: 5px 6px;

327 }

328

329 .caret {

330 border-top-color: $green;

331 margin-top: 10px;

332 }

333

334 .disabled a {

335 color: #ccc;

336 cursor: default;

337

338 .caret {

339 border-top-color: #ccc;

340 }

341 }

342

343 > ul li.current {

344 background-color: $green;

345

346 .tab {

347 color: #fff;

348 }

349

350 .caret {

351 border-top-color: #fff;

352 }

353 }

354 }

355

356 nav.secondary {

357 position: absolute;

358 right: 0;

359

360 > ul {

361 vertical-align: middle;

362 a, .dropdown-toggle {

363 display: inline-block;

364 text-decoration: none;

365 color: $darkgrey;

366 padding: 5px;

367

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

369 }

370 }

371

372 > ul li.current a {

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

374 }

375

376 .user-menu {

377 $border: 1px solid $grey;

378

379 font-weight: 500;

380 border: $border;

381 border-radius: $border-radius;

382 margin-left: 10px;

383

384 > li {

385 border-right: $border;

386 float: left;

387 &:last-child {

388 border-right: 0;

389

390 > a {

391 border-radius: 0 $border-radius $border-radius 0;

392 }

393 }

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

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

396 }

397

398 a {

399 padding: 5px 15px;

400

401 }

402

403 &.logged-in > a {

404 padding: 0;

405 > .user-button {

406 padding: 5px 10px 5px 6px;

407 display: inline-block;

408 color: $darkgrey;

409 }

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

411 }

412 }

413

414 .caret {

415 border-top-color: $grey;

416 margin-top: 9px;

417 }

418

419 img.user_thumbnail_tiny {

420 border: 0;

421 vertical-align: top;

422 margin-top: 0px;

423 margin: 3px 0 0 3px;

424 border-radius: 2px;

425 }

426

427 #inboxanchor {

428 display: inline-block;

429 vertical-align: top;

430 height: 25px;

431 margin: 3px 0 3px 3px;

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

433 line-height: 20px;

434 border-radius: 2;

435 }

436

437 .dropdown-menu {

438 left: auto;

439 right: -1px;

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

441

442 .count-number {

443 float: right;

444 padding: 0 5px;

445 margin: 0;

446 }

447 }

448 }

449

450 #compact-secondary-nav {

451 display: none;

452 ul li a {

453 width: 100%;

454 color: #333;

455 &:hover { color: #fff; }

456 }

457 }

458

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

460 #compact-secondary-nav {

461 display: inline-block;

462 }

463 .compact-hide {

464 display: none;

465 }

466 }

467

468

469 /* Utility for styling notification numbers */

470

471 .count-number {

472 padding: 2px $lineheight/4;

473 border-radius: 2px;

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

475 margin: 0 2px;

476 font-size: 11px;

477 color: #333;

478 }

479

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

481

482 #noscript {

483 z-index: 20000000;

484 position: absolute;

485 top: 15px;

486 left: 15px;

487 }

488

489 /* Rules for bootstrap tooltips */

490

491 .tooltip {

492 position: absolute;

493 display: none;

494 color: #333;

495 text-align: left;

496 font-size: 12px;

497 max-width: 250px;

498 }

499

500 .tooltip.in {

501 opacity: 0.8;

502 z-index: 1030;

503 height: auto;

504 display: block;

505 }

506

507 .tooltip.top {

508 margin-top: -10px;

509 text-align: center;

510 }

511

512 .tooltip.right {

513 margin-left: 10px;

514 }

515

516 .tooltip.bottom {

517 margin-top: 10px;

518 text-align: center;

519 }

520

521 .tooltip.left {

522 margin-left: -10px;

523 text-align: right;

524 }

525

526 .tooltip-inner {

527 display: inline-block;

528 padding: 10px;

529 font-weight: normal;

530 background-color: white;

531 }

532

533 .tooltip-arrow {

534 position: absolute;

535 width: 0;

536 height: 0;

537 border-color: transparent;

538 border-style: solid;

539 }

540

541 .tooltip.top .tooltip-arrow {

542 bottom: -5px;

543 left: 50%;

544 margin-left: -5px;

545 border-top-color: white;

546 border-width: 5px 5px 0;

547 }

548

549 .tooltip.right .tooltip-arrow {

550 top: 50%;

551 left: -5px;

552 margin-top: -5px;

553 border-right-color: white;

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

555 }

556

557 .tooltip.left .tooltip-arrow {

558 top: 50%;

559 right: -5px;

560 margin-top: -5px;

561 border-left-color: white;

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

563 }

564

565 .tooltip.bottom .tooltip-arrow {

566 top: -5px;

567 left: 50%;

568 margin-left: -5px;

569 border-bottom-color: white;

570 border-width: 0 5px 5px;

571 }

572

573 /* Rules for Leaflet maps */

574

575 .leaflet-control .control-button {

576 display: block;

577 height: 40px;

578 width: 40px;

579 background-color: #333;

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

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

582 margin-bottom: 10px;

583 outline: none;

584

585 &:hover {

586 background-color: black;

587 }

588

589 &.active {

590 background-color: #9ed485;

591 }

592

593 &.disabled {

594 background-color: #333;

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

596 cursor: default;

597 }

598

599 .icon {

600 margin: 10px;

601 }

602 }

603

604 .leaflet-control .zoomin,

605 .control-layers .control-button {

606 margin-bottom: 0px;

607 border-radius: 4px 0 0 0;

608 }

609

610 .leaflet-control .zoomout,

611 .control-key .control-button {

612 margin-bottom: 0;

613 border-radius: 0;

614 }

615

616 .control-locate .control-button,

617 .control-share .control-button {

618 border-radius: 0 0 0 4px;

619 }

620

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

622

623 .map-layout {

624 #content {

625 position: absolute;

626 top: $headerHeight;

627 bottom: 0;

628 width: 100%;

629 }

630

631 #sidebar, #map {

632 position: relative;

633 height: 100%;

634 overflow-x: hidden;

635 overflow-y: auto;

636 }

637

638 #sidebar {

639 float: left;

640 width: $sidebarWidth;

641

642 h2, h3, h4 {

643 padding: $lineheight $lineheight $lineheight/2;

644 }

645

646 h4, span.user, span.date {

647 font-weight: normal;

648 color: #666;

649 font-size: 12px;

650 }

651

652 .icon.close {

653 position: absolute;

654 right: $lineheight;

655 cursor: pointer;

656 }

657

658 .footer {

659 position: absolute;

660 bottom: 0;

661 }

662

663 p.credits {

664 font-size: 11px;

665 color: #999;

666

667 a {

668 color: #666;

669 }

670 }

671

672 p.large-text {

673 font-size: 1.7em;

674 line-height: 1.4em;

675 font-weight: 300;

676 }

677 }

678

679 #sidebar.minimized {

680 position: absolute;

681 z-index: 1000;

682 height: auto;

683 border-right: none;

684

685 #sidebar_content {

686 display: none;

687 }

688

689 #search_form {

690 background: none;

691 width: 78%;

692 }

693 }

694

695 #map {

696 height: 100%;

697 overflow: hidden;

698 }

699

700 #map-ui {

701 display: none;

702 position: relative;

703 float: right;

704 width: 250px;

705 height: 100%;

706 background: white;

707 overflow: auto;

708

709 .section {

710 border-bottom: 1px solid #DDD;

711 padding: 10px 20px;

712 }

713

714 a.close-button {

715 float: right;

716 padding:5px;

717 font-size:20px;

718 line-height:10px;

719 color:#222;

720 border:1px solid #ddd;

721 }

722 }

723 }

724

725 .layers-ui,

726 .share-ui {

727 li:last-child {

728 margin-bottom: 0;

729 }

730 }

731

732 .layers-ui {

733 .base-layers {

734 .leaflet-container {

735 width: 100%;

736 height: 50px;

737 cursor: pointer;

738 }

739

740 li {

741 overflow: hidden;

742 border-radius: 3px;

743 border: 2px solid #fff;

744 margin-bottom: 8px;

745 position: relative;

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

747

748 label {

749 position: absolute;

750 top: 0;

751 left: 0;

752 padding: 2px 6px;

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

754 cursor: pointer;

755 font-weight: 500;

756 font-size: 16px;

757 text-stroke: 2px #fff;

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

759 text-shadow:

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

761 2px -2px 1px #fff,

762 -2px 2px 1px #fff,

763 2px 2px 1px #fff;

764 input[type="radio"] {

765 display: none;

766 }

767 }

768

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

770 &:hover {

771 border-color: $grey;

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

773 }

774 }

775 }

776

777 .overlay-layers {

778 p {

779 font-size: 13px;

780 margin-bottom: 8px;

781 }

782 }

783 }

784

785 .share-ui {

786 .share-tabs {

787 margin-bottom: 10px;

788

789 a {

790 color: #fff;

791 text-decoration: none;

792 background-color: $lightblue;

793 padding: 5px 10px;

794 }

795

796 a:first-child {

797 border-right: 1px solid #fff;

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

799 }

800

801 a:last-child {

802 border-left: 1px solid #fff;

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

804 }

805

806 a.active {

807 background-color: $blue;

808 }

809 }

810

811 .share-tab {

812 display: none;

813 }

814

815 .share-link {

816 input[type=text],

817 textarea {

818 width: 100%;

819 font-family: monospace;

820 font-size: small;

821 line-height: 1.3;

822 }

823 }

824

825 .share-image {

826 label {

827 margin-right: 10px;

828 }

829 }

830

831 #embed_html {

832 resize: vertical;

833 }

834

835 #mapnik_scale {

836 width: 100px;

837 }

838 }

839

840 .leaflet-top.leaflet-right {

841 top: $lineheight !important;

842 .leaflet-control {

843 margin-right: 0px !important;

844 margin-top: 0px !important;

845 }

846 }

847

848 .leaflet-popup-scrolled {

849 padding-right: $lineheight;

850 border-bottom: 0px !important;

851 border-top: 0px !important;

852 }

853

854 .leaflet-popup-content-wrapper {

855 border-radius: 4px !important;

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

857 }

858

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

860

861 #attribution {

862 display: none;

863 }

864

865 .attribution_license,

866 .attribution_project {

867 text-align: left;

868 }

869

870 .attribution_notice {

871 text-align: center;

872 }

873

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

875

876 /* Rules for the sidebar */

877

878 .sidebar_heading {

879 position: relative;

880 padding: $lineheight/2 $lineheight;

881 // background: $offwhite;

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

883 > .close {

884 float: right;

885 margin-top: 2px;

886 cursor: pointer;

887 }

888 }

889

890 #sidebar_content {

891 position: absolute;

892 top: 50px;

893 bottom: 0;

894 width: 100%;

895 overflow-y: auto;

896

897 .loader,

898 .load_more {

899 text-align: center;

900 margin: $lineheight auto;

901 width: $lineheight;

902 display: block;

903 }

904 }

905

906 /* Rules for the search box */

907

908 #search_form {

909 position: relative;

910 padding: $lineheight/2 $lineheight;

911 background-color: $lightgrey;

912

913 #query_wrapper {

914 position: relative;

915 overflow: hidden;

916 }

917

918 input {

919 width: 100%;

920 height: 30px;

921 border-right: none;

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

923

924 transition: 300ms linear;

925 -webkit-transition: 300ms linear;

926 -moz-transition: 300ms linear;

927 }

928

929 input:focus {

930 outline: none;

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

932 }

933

934 input[type=submit] {

935 float: right;

936 width: auto;

937 min-width: 0;

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

939 }

940

941 #describe_location {

942 position: absolute;

943 top: 6px;

944 right: 6px;

945 font-size: 10px;

946 color: $blue;

947 }

948 }

949

950 /* Rules for donation request box */

951

952 a.donate {

953 display: block;

954 padding: $lineheight/4 $lineheight;

955 border: 1px solid $green;

956 font-size: $typeheight;

957 line-height: 1.4;

958 text-align: center;

959 border-radius: 2px;

960 color: #222;

961 margin: $lineheight/2 $lineheight;

962

963 &:hover {

964 background: $green;

965 text-decoration: none;

966 }

967 }

968

969 /* Rules for rotating sidebar ads */

970

971 .ad-container {

972 display: block;

973 height: 120px;

974 margin: auto;

975 overflow: hidden;

976 position: relative;

977 border-bottom: 1px solid #ccc;

978

979 a {

980 display: block;

981 width: 165px;

982 margin: auto;

983 }

984

985 .ad {

986 height: 100px;

987 border: 0;

988 background: #fff;

989 }

990 }

991

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

993

994 #mapkey {

995 .mapkey-table-key img {

996 display: block;

997 margin-left: auto;

998 margin-right: auto;

999 }

1000 td {

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

1002 }

1003 }

1004

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

1006

1007 .search_results_entry {

1008 ul li {

1009 border-bottom: $keyline;

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

1011 }

1012

1013 .search_details {

1014 display: block;

1015 float: right;

1016 text-align: right;

1017 margin-top: 0.2em;

1018 margin-left: 0.5em;

1019 }

1020 }

1021

1022 .search_results_error {

1023 color: #f00;

1024 }

1025

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

1027

1028 #browse_content {

1029 position: relative;

1030 .browse_show_list.button {

1031 position: absolute;

1032 left: $lineheight;

1033 right: $lineheight;

1034 bottom: -40px;

1035 margin-bottom: 0;

1036 }

1037 a.more-details {

1038 position: absolute;

1039 top: 0;

1040 right: $lineheight;

1041 }

1042 ul li {

1043 margin-bottom: 0;

1044 }

1045 }

1046

1047 /* Rules for entity history */

1048 #sidebar_content {

1049 .browse_details {

1050 position: relative;

1051 border-bottom: $keyline;

1052 }

1053 }

1054

1055 .browse_status {

1056 display: none;

1057 }

1058

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

1060

1061 #sidebar .changesets {

1062 li {

1063 padding: $lineheight;

1064 border-bottom: $keyline;

1065 cursor: pointer;

1066

1067 &.selected { background: #FFFFE6; }

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

1069 }

1070

1071 .comment a {

1072 font-weight: 500;

1073 color: #000;

1074 }

1075 }

1076

1077 /* Rules for the data browser */

1078

1079 #sidebar_content {

1080 .browse-section {

1081 padding: 10px 20px;

1082

1083 h4 {

1084 padding: 0;

1085 }

1086 }

1087

1088 .paginate ul, .note-comments ul {

1089 padding-left: 20px;

1090 }

1091

1092 .browse-field {

1093 margin-bottom: 10px;

1094

1095 h4 {

1096 padding: 5px 0 5px 10px;

1097 font-size: 12px;

1098 border: 1px solid #CCC;

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

1100 background-color: #F6F6F6;

1101 }

1102

1103 p {

1104 padding: 7px 10px;

1105 font-size: 12px;

1106 background-color: #FFF;

1107 border: 1px solid #CCC;

1108 border-top: 0;

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

1110 }

1111 }

1112

1113 .browse-tag-list {

1114 border-top: 1px solid #ddd;

1115 border-bottom: 1px solid #ddd;

1116 font-size: 12px;

1117 margin-left: -$lineheight;

1118 margin-right: -$lineheight;

1119

1120 li {

1121 border-bottom: 1px solid #ddd;

1122 }

1123

1124 li:last-child {

1125 border-bottom: 0;

1126 }

1127

1128 .browse-tag-k,

1129 .browse-tag-v {

1130 display: inline-block;

1131 width: 50%;

1132 height: 30px;

1133 float: left;

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

1135 }

1136

1137 .browse-tag-k {

1138 font-weight: 500;

1139 background-color: #F6F6F6;

1140 }

1141

1142 .browse-tag-v {

1143 border-left: 1px solid #ddd;

1144 }

1145 }

1146 }

1147

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

1149

1150 .export_bounds {

1151 text-align: center;

1152 }

1153

1154 .export_area_inputs {

1155 margin-bottom: $lineheight/2;

1156 input[type="text"] {

1157 width: 80px;

1158 margin-bottom: 5px;

1159 }

1160 }

1161

1162 .export_bound {

1163 margin: $lineheight/4;

1164 }

1165

1166 #export_osm {

1167 span.small-title {

1168 font-weight: 500;

1169 display: block;

1170 font-size: 14px;

1171 padding-bottom: 5px;

1172 }

1173

1174 dl {

1175 padding-left: 30px;

1176 font-size: 13px;

1177 color: #666;

1178 dd {

1179 margin-left: 0;

1180 margin-bottom: 10px;

1181 }

1182 }

1183 }

1184

1185 /* Rules for edit pages */

1186

1187 .site-edit {

1188 #content {

1189 position: absolute;

1190 top: $headerHeight;

1191 bottom: 0;

1192 width: 100%;

1193 }

1194

1195 #map {

1196 height: 100%;

1197 }

1198 }

1199

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

1201

1202 .content-heading {

1203 background: $lightgrey;

1204

1205 h1 { font-size: 22px; }

1206 }

1207

1208 .content-body {

1209 h1, h2, h3, p {

1210 margin-bottom: $lineheight;

1211 }

1212

1213 h1, h2, h3 {

1214 margin-top: $lineheight/2;

1215 }

1216 }

1217

1218 .content-inner {

1219 position: relative;

1220 max-width: 900px;

1221 margin: auto;

1222 padding: $lineheight;

1223 }

1224

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

1226

1227 .user-new,

1228 .user-create,

1229 .user-terms {

1230 .content-body .content-inner {

1231 padding: 0;

1232 }

1233 }

1234

1235 .user-new,

1236 .user-create,

1237 .user-terms,

1238 .user-confirm {

1239 .content-heading .content-inner {

1240 height: 200px;

1241 }

1242 }

1243

1244 .header-illustration {

1245 background-position: 0 0;

1246 background-repeat: no-repeat;

1247 position: absolute;

1248 height: 200px;

1249 width: 100%;

1250 left: 0;

1251 bottom: 0;

1252

1253 &.new-user-main {

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

1255 }

1256

1257 &.confirm-main {

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

1259 }

1260

1261 &.new-user-terms {

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

1263 }

1264

1265 &.new-user-arm {

1266 height: 110px;

1267 width: 130px;

1268 left: 260px;

1269 top: 160px;

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

1271 z-index: 100;

1272 }

1273 }

1274

1275 #content.maximised {

1276 top: 0;

1277 left: 0;

1278 right: 0;

1279 bottom: 0;

1280 border: 0;

1281 z-index: 1000;

1282 }

1283

1284 #slim_container {

1285 width: 100%;

1286 }

1287

1288 #slim_container_content {

1289 max-width: 50em;

1290 background-color: #FFFFFF;

1291 margin: $lineheight/2 auto;

1292 padding: 3px;

1293 border-radius: 25px;

1294 -moz-border-radius: 25px;

1295 border: 1px solid #e6e6e6;

1296 }

1297

1298 #slim_content {

1299 margin: $lineheight/2;

1300 margin-top: 95px;

1301 max-width: 50em;

1302

1303 .content-heading {

1304 margin-bottom: 15px;

1305 }

1306 }

1307

1308 #slim_header {

1309 margin: 30px $lineheight/2;

1310 position: absolute;

1311 top: 0px;

1312 margin-right: $lineheight/4;

1313 img {

1314 vertical-align: middle;

1315 margin-bottom: $lineheight/4;

1316 margin-right: $lineheight/4;

1317 }

1318 }

1319

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

1321

1322 .content_map {

1323 position: relative;

1324 width: 45%;

1325 height: 400px;

1326 border: 1px solid #ccc;

1327 margin-bottom: $lineheight;

1328 float: right;

1329 }

1330

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

1332

1333 #trace_list {

1334 font-size: $lineheight/2;

1335 border-width: 0px;

1336 text-align: right;

1337

1338 .trace_summary {

1339 font-size: 12px;

1340 color: gray;

1341 }

1342

1343 .trace_pending {

1344 color: red;

1345 }

1346

1347 .trace_public {

1348 color: green;

1349 }

1350

1351 .trace_identifiable {

1352 color: green;

1353 }

1354

1355 .trace_trackable {

1356 color: red;

1357 }

1358

1359 .trace_private {

1360 color: red;

1361 }

1362 }

1363

1364 /* Rules for the user profile page */

1365

1366 #userinformation {

1367

1368 min-height: 100px;

1369 .userinformation-inner {

1370 float: left;

1371 }

1372 h2 {

1373 margin-top: 0;

1374 }

1375 .user-description {

1376 width: 100%;

1377 clear: both;

1378 }

1379 .deemphasize {

1380 margin: 0;

1381 }

1382 }

1383

1384 .admin-user-info small {

1385 margin-bottom: $lineheight/2;

1386 display: inline;

1387 margin-right: $lineheight;

1388 }

1389

1390 .activity-block {

1391 clear: left;

1392 border-bottom: 1px solid #ccc;

1393 padding-bottom: $lineheight;

1394 float: left;

1395 h3 {

1396 margin-bottom: $lineheight/2;

1397 }

1398 }

1399

1400 .contact-activity {

1401 margin-top: $lineheight;

1402 width: 100%;

1403 }

1404

1405 .activity-details p {

1406 margin-left: 70px;

1407 margin-bottom: 0;

1408 }

1409

1410 #friends-container .contact-activity ul {

1411 margin-left: 70px;

1412 }

1413

1414 .user-view {

1415 p#no_home_location {

1416 margin: $lineheight;

1417 }

1418 .user_thumbnail {

1419 margin-top: $lineheight/4;

1420 float: left;

1421 }

1422 }

1423

1424 /* Rules for the user map */

1425

1426 .content_map .leaflet-popup-content {

1427 margin: $lineheight/2;

1428 min-height: 50px;

1429 }

1430

1431 /* Rules for user popups on maps */

1432

1433 .user_popup {

1434 min-width: 200px;

1435 p {

1436 padding: 0 0 5px 0;

1437 margin-top: 0 0 0 60px;

1438 font-size: 12px;

1439 }

1440 img.user_thumbnail {

1441 float: left;

1442 margin: 0 $lineheight/2 0 0;

1443 }

1444 }

1445

1446 /* Rules for the user list */

1447

1448 #user_list {

1449 font-size: $lineheight/2;

1450 width: 100%;

1451

1452 tr {

1453 vertical-align: middle;

1454 }

1455

1456 p {

1457 margin-top: 0px;

1458 margin-bottom: 0px;

1459 }

1460 }

1461

1462 #user_list_actions {

1463 float: right;

1464 margin-top: $lineheight/2;

1465 }

1466

1467 /* Rules for the diary list page */

1468

1469 .diary_post {

1470 position: relative;

1471 margin-top: $lineheight/2;

1472 padding-top: $lineheight;

1473 border-top: 1px solid #ccc;

1474

1475 .post_heading {

1476 margin-bottom: $lineheight;

1477

1478 h2 {

1479 margin-top: 0;

1480 margin-bottom: $lineheight/2;

1481 font-size: 24px;

1482 }

1483 }

1484

1485 img.user_thumbnail {

1486 float: left;

1487 }

1488

1489 small.deemphasize {

1490 float: left;

1491 display: block;

1492 }

1493

1494 ul.secondary-actions {

1495 display: inline-block;

1496 }

1497 }

1498

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

1500 display: inline;

1501 }

1502

1503 /* Rules for the diary entry page */

1504

1505 .diary_entry {

1506 #map {

1507 position: relative;

1508 width: 90%;

1509 height: 400px;

1510 border: 1px solid #ccc;

1511 display: none;

1512 margin-bottom: $lineheight;

1513 }

1514 #newcomment {

1515 border-top: 1px solid #ccc;

1516 padding-top: $lineheight;

1517 margin-top: $lineheight/2;

1518 }

1519 .comments {

1520 max-width: 740px;

1521 }

1522 .diary-comment {

1523 margin-top: $lineheight/2;

1524 border-top: 1px dashed #ccc;

1525 padding-top: $lineheight/2;

1526 &:first-child {

1527 margin-top: $lineheight;

1528 padding-top: $lineheight;

1529 border-top: 1px solid #ccc;

1530 }

1531 p {

1532 margin-bottom: $lineheight/2;

1533 }

1534 .comment-heading {

1535 margin-bottom: 0;

1536 margin-top: 0;

1537 }

1538 }

1539 }

1540

1541 .diary_entry-view img.user_thumbnail {

1542 float: left;

1543 }

1544

1545 /* Rules for the log in page */

1546

1547 #login_openid_buttons {

1548 margin-bottom: 0;

1549 }

1550

1551 #login_openid_buttons li {

1552 float: left;

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

1554 }

1555

1556 /* Rules for the account confirmation page */

1557

1558 .user-terms {

1559 .legale {

1560 border: 1px solid #ccc;

1561 padding: $lineheight;

1562 margin-bottom: $lineheight;

1563 overflow: auto;

1564 height: 10em;

1565 }

1566

1567 #decline {

1568 background: $lightblue;

1569 &:hover {

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

1571 }

1572 }

1573

1574 .form-row {

1575 margin: auto;

1576 max-width: 370px;

1577 }

1578 }

1579

1580 /* Rules for the account settings page */

1581

1582 #accountForm .user_map {

1583 position: relative;

1584 width: 500px;

1585 height: 400px;

1586 border: 1px solid #ccc;

1587 }

1588

1589 #accountForm .user_image {

1590 margin-bottom: 0;

1591 }

1592

1593 #accountForm #user_image {

1594 margin-left: 20px;

1595 }

1596

1597 #accountForm ul.accountImage-options {

1598 margin-left: 120px;

1599 }

1600

1601 .nohome .location {

1602 display: none;

1603 }

1604

1605 #homerow .message {

1606 display: none;

1607 }

1608

1609 .nohome .message {

1610 display: inline !important;

1611 }

1612

1613 .content_map.settings_map {

1614 width: 50%;

1615 float: none;

1616 }

1617

1618 /* Rules for the oauth settings page */

1619

1620 .oauth_clients .buttons .oauth-edit {

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

1622 }

1623

1624 .oauth_clients .buttons .oauth-delete {

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

1626 }

1627

1628 /* Rules for messages pages */

1629

1630 .messages {

1631 width: 100%;

1632 border: 1px solid #ddd;

1633

1634 input[type="submit"] {

1635 margin: auto;

1636 }

1637 tbody tr {

1638 border-top: 1px solid #ccc;

1639 }

1640

1641 .inbox-row {

1642 background: #f8f8ff;

1643 }

1644

1645 .inbox-row-unread {

1646 background:#CBEEA7;

1647 }

1648

1649 .right {

1650 float: right;

1651 }

1652

1653 tr td,

1654 tr th {

1655 padding: $lineheight/4;

1656 }

1657 p:last-child,

1658 h2:last-child,

1659 h3:last-child,

1660 ol:last-child,

1661 ul:last-child {

1662 margin-bottom:0;

1663 }

1664 tr td {

1665 height: 30px;

1666 border-right: 1px solid $lightgrey;

1667 }

1668 }

1669

1670 .inbox-row .inbox-mark-read {

1671 display: none;

1672 }

1673

1674 .info-line {

1675 margin-bottom: $lineheight;

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

1677 border-bottom: 1px solid #ccc;

1678

1679 form, form div {

1680 display: inline;

1681 }

1682 }

1683

1684 .info-line .user_thumbnail_tiny {

1685 vertical-align: middle;

1686 }

1687

1688 .inbox-mark-unread,

1689 .inbox-mark-read,

1690 .inbox-delete {

1691 width: 1%;

1692 }

1693

1694 .inbox-row-unread .inbox-mark-unread {

1695 display: none;

1696 }

1697

1698 .message-read .message-buttons {

1699 margin-top: $lineheight;

1700 padding-top: $lineheight;

1701 border-top: 1px solid $lightgrey;

1702 }

1703

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

1705 border-radius: 0;

1706 }

1707

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

1709

1710 .error {

1711 padding: $lineheight;

1712 background-color: #ff7070;

1713 }

1714

1715 .warning {

1716 padding: $lineheight;

1717 background-color: #ffe0cc;

1718 }

1719

1720 .notice {

1721 padding: $lineheight;

1722 background-color: #CBEEA7;

1723 }

1724

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

1726

1727 .field_with_errors {

1728 padding: 2px;

1729 background-color: #ff7070;

1730 display: inline-block;

1731 }

1732

1733 .formError {

1734 display: inline-block;

1735 padding: 5px 10px;

1736 margin-top: 5px;

1737 border-radius: 4px;

1738 font-size: 12px;

1739 color: #fff;

1740 background-color: #ff7070;

1741 }

1742

1743 /* Rules for rails validation error boxes */

1744

1745 #errorExplanation {

1746 width: 400px;

1747 border: 2px solid #ff7070;

1748 padding: 0 $lineheight/2;

1749 margin-bottom: $lineheight;

1750 background-color: #f0f0f0;

1751

1752 h2 {

1753 margin: 0 -10px 10px -10px;

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

1755 font-weight: 500;

1756 font-size: 12px;

1757 background-color: #c00;

1758 color: #fff;

1759 text-align: left;

1760 }

1761

1762 p {

1763 color: #333;

1764 margin-bottom: 0px;

1765 padding: $lineheight/4;

1766 }

1767

1768 ul {

1769 padding-left: $lineheight;

1770

1771 li {

1772 font-size: 12px;

1773 list-style: disc;

1774 }

1775 }

1776 }

1777

1778 /* Rules for forms */

1779

1780 .standard-form {

1781 fieldset {

1782 margin-bottom: $lineheight;

1783 }

1784 label.standard-label {

1785 display: block;

1786 margin-bottom: $lineheight/4;

1787 font-size: $typeheight;

1788 font-weight: 500;

1789 line-height: 1.5;

1790 }

1791 label.standard-label.secondary {

1792 display: inline-block;

1793 font-weight: normal;

1794 }

1795 .form-help {

1796 font-weight: normal;

1797 }

1798 .form-column {

1799 float: left;

1800 margin-right: 20px;

1801 }

1802 .form-divider {

1803 margin-top: $lineheight;

1804 padding-top: $lineheight;

1805 border-top: 1px solid $lightgrey;

1806 }

1807 .horizontal-list .form-row {

1808 float: left;

1809 padding-right: 10px;

1810 }

1811 .form-row {

1812 margin-bottom: $lineheight/2;

1813 }

1814 .form-list {

1815 margin-bottom: 0;

1816 }

1817 .form-list li {

1818 margin-bottom: 5px;

1819 }

1820 input[type="checkbox"],

1821 input[type="radio"] {

1822 float: left;

1823 margin-top: 5px;

1824 }

1825 }

1826

1827 #remember_me_openid {

1828 display: block;

1829 }

1830

1831 input[type="checkbox"],

1832 input[type="radio"] {

1833 margin-right: 5px;

1834 }

1835

1836 input[type="text"],

1837 input[type="email"],

1838 input[type="url"],

1839 input[type="password"],

1840 textarea {

1841 border: 1px solid #ccc;

1842 padding: 2px 5px;

1843 margin: 0;

1844 width: 200px;

1845 }

1846

1847 textarea {

1848 padding: 5px;

1849 width: 100%;

1850 }

1851

1852 /* Rules for user images */

1853

1854 img.user_image {

1855 max-width: 100px;

1856 max-height: 100px;

1857 border: 1px solid #ccc;

1858 margin-bottom: $lineheight;

1859 float: left;

1860 margin-right: $lineheight;

1861 }

1862

1863 img.user_thumbnail {

1864 max-width: 50px;

1865 max-height: 50px;

1866 border: 1px solid #ccc;

1867 margin-right: $lineheight;

1868 }

1869

1870 img.user_thumbnail_tiny {

1871 max-width: 25px;

1872 max-height: 25px;

1873 border: 1px solid #ccc;

1874 }

1875

1876 /* Rules for geo microformats */

1877

1878 abbr.geo {

1879 border-bottom: none;

1880 }

1881

1882 /* Rules for RSS buttons */

1883

1884 .rsssmall {

1885 position: relative;

1886 top: 3px;

1887 }

1888

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

1890

1891 ul.secondary-actions {

1892 font-style: normal;

1893 margin-bottom: 0;

1894 margin-left: 0;

1895 &.pager {

1896 display: inline-block;

1897 margin-right: 60px;

1898 }

1899 > li {

1900 display: block;

1901 float: left;

1902 list-style: none;

1903 border-left: 1px solid #ccc;

1904 padding-left: $lineheight/2;

1905 margin-right: $lineheight/2;

1906 &:first-child {

1907 border-left: 0;

1908 padding-left: 0;

1909 }

1910 &:last-child {

1911 margin-right: 0px;

1912 }

1913 }

1914 }

1915

1916 div.secondary-actions {

1917 padding: 10px;

1918 border-top: 1px solid #ccc;

1919 text-align: center;

1920 }

1921

1922 /* Utility for managing inner content areas */

1923

1924 .inner22 { padding: $lineheight;}

1925

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

1927

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

1929

1930 .inner20 { padding: $lineheight 0;}

1931

1932 .inner02 { padding: 0 $lineheight;}

1933

1934 /* Utility for general button styles */

1935

1936 input[type="button"],

1937 input[type="submit"],

1938 input[type="reset"],

1939 a.button {

1940 cursor: pointer;

1941 border: 0;

1942 display: inline-block;

1943 line-height: 20px;

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

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

1946 min-width: 120px;

1947 margin: 0 0 $lineheight/2 0;

1948 color: white;

1949 background: $blue;

1950 text-align: center;

1951 border-radius: 2px;

1952 -moz-border-radius: 2px;

1953 &:hover {

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

1955 text-decoration: none;

1956 }

1957 &.deemphasize {

1958 background: $lightblue;

1959 &:hover {

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

1961 }

1962 }

1963 &:disabled {

1964 background: $lightgrey;

1965 &:hover {

1966 background: $lightgrey;

1967 }

1968 }

1969 &:last-child {

1970 margin-bottom: 0;

1971 }

1972 }

1973

1974 .buttons {

1975 min-width: 200px;

1976 input[type="submit"],

1977 input[type="button"],

1978 input[type="reset"],

1979 .button {

1980 box-sizing: border-box;

1981 float: left;

1982 border-radius: 0;

1983 margin:0;

1984 min-width: 100px;

1985 max-width: 180px;

1986 border-right:1px solid white;

1987 text-overflow: ellipsis;

1988 white-space: nowrap;

1989 overflow: hidden;

1990 }

1991 input:first-child,

1992 .button:first-child {

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

1994 }

1995 input:last-child,

1996 .button:last-child {

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

1998 border-right-width: 0;

1999 }

2000 input:only-child,

2001 .button:only-child,

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

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

2004 border-radius:2px;

2005 border-right-width: 0;

2006 }

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

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

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

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

2011 border-right-width: 0;

2012 }

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

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

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

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

2017 border-right-width: 1px;

2018 }

2019 }

2020

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

2022

2023 .table0,

2024 .item0 {

2025 background: $offwhite;

2026 }

2027

2028 .table1,

2029 .item1 {

2030 background: #fff;

2031 }

2032

2033 /* Rules for OpenID logo */

2034

2035 .openid_logo {

2036 vertical-align: text-bottom;

2037 border: 0;

2038 }

2039

2040 /* Rules for rich text */

2041

2042 .richtext,

2043 .prose {

2044 h1, h2 {

2045 padding-bottom: $lineheight/2;

2046 border-bottom: 1px dashed #cccccc;

2047 margin-bottom: $lineheight/2;

2048 }

2049

2050 h1 {

2051 font-size: 24px;

2052 }

2053

2054 h2 {

2055 font-size: 18px;

2056 }

2057

2058 h3 {

2059 font-size: $typeheight;

2060 }

2061

2062 code {

2063 font-size: 13px;

2064 background: #e8e8e8;

2065 padding: 2px 3px;

2066 }

2067

2068 pre {

2069 font-size: 13px;

2070 background: #e8e8e8;

2071 padding: 2px 3px;

2072

2073 code {

2074 padding: 0;

2075 }

2076 }

2077

2078 img {

2079 padding: $lineheight;

2080 background-color: $offwhite;

2081 display: block;

2082 max-width: 100%;

2083 margin: auto;

2084 }

2085

2086 blockquote {

2087 border-left: $lineheight solid $offwhite;

2088 padding-left: $lineheight;

2089 margin: 0;

2090 color: #7E7E7E;

2091 }

2092

2093 ul, ol {

2094 padding-left: $lineheight;

2095 margin-bottom: $lineheight;

2096 margin-left: $lineheight;

2097 }

2098

2099 ul li {

2100 list-style: disc;

2101 }

2102

2103 ol li {

2104 list-style: decimal;

2105 }

2106 }

2107

2108 .diary_post .richtext {

2109 margin-top: $lineheight;

2110 }

2111

2112 .comments .richtext {

2113 margin-left: 70px;

2114 margin-top: 0;

2115 }

2116

2117 /* Rules for rich text editors */

2118

2119 .richtext_container {

2120 margin-bottom: $lineheight;

2121

2122 .richtext_content {

2123 width: 50%;

2124 display: inline-block;

2125 vertical-align: top;

2126

2127 .richtext_preview {

2128 display: inline-block;

2129 padding: $lineheight;

2130 background-color: $offwhite;

2131 overflow-x: auto;

2132

2133 &.loading {

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

2135 background-repeat: no-repeat;

2136 background-position: center;

2137 }

2138

2139 > :first-child {

2140 margin-top: 0px;

2141 }

2142 }

2143 }

2144

2145 .richtext_help {

2146 display: inline-block;

2147 vertical-align: top;

2148 margin-left: 15px;

2149 background-color: #f8f8ff;

2150 padding: $lineheight/2;

2151 width: 220px;

2152

2153 ul {

2154 margin-bottom: 0;

2155 }

2156

2157 h4.heading, li {

2158 border-bottom: 1px solid #ccc;

2159 margin-bottom: $lineheight/4;

2160 padding-bottom: $lineheight/4;

2161 }

2162

2163 li h4, li span, li p {

2164 display: inline-block;

2165 vertical-align: top;

2166 font-size: 11px;

2167 }

2168

2169 li h4 {

2170 width: 40%;

2171 margin: 0;

2172 }

2173

2174 li span, li p {

2175 width: 50%;

2176 margin-left: $lineheight/2;

2177 margin-bottom: $lineheight/4;

2178 white-space: nowrap;

2179 }

2180 }

2181 }

2182

2183 /* Rules for the user notes list */

2184

2185 .note_list {

2186 tr.creator {

2187 background-color: #eeeeee;

2188 }

2189

2190 td {

2191 padding: 3px;

2192 }

2193

2194 p {

2195 margin-bottom: 0px;

2196 }

2197 }

2198

2199 /* Rules for the notes interface */

2200

2201 .leaflet-popup-content .note {

2202 padding-top: $lineheight/2;

2203 }

2204

2205 .leaflet-popup-content .note {

2206 h2 {

2207 margin-bottom: $lineheight/2;

2208 }

2209

2210 div {

2211 margin-top: $lineheight/2;

2212 }

2213

2214 .permalink {

2215 position: absolute;

2216 top: $lineheight/4;

2217 left: $lineheight/4;

2218 min-width: 15px;

2219 min-height: 15px;

2220 }

2221

2222 .permalink span {

2223 display: none;

2224 padding-left: $lineheight;

2225 }

2226

2227 .permalink:hover span {

2228 display: block;

2229 }

2230

2231 .warning {

2232 display: block;

2233 background-color: #ffe0cc;

2234 padding: 4px 6px;

2235 margin-bottom: $lineheight/2;

2236 }

2237

2238 .comment_body {

2239 margin-top: 2px;

2240 margin-bottom: 2px;

2241

2242 p {

2243 margin-top: 0px;

2244 margin-bottom: 0px;

2245 }

2246 }

2247

2248 .comment {

2249 width: 100%;

2250 height: 100px;

2251 }

2252

2253 .buttons {

2254 margin-top: $lineheight/4;

2255 text-align: right;

2256 }

2257 }

2258

2259 /* Rules for the iD editor */

2260

2261 .id-embed {

2262 width: 100%;

2263 height: 100%;

2264 }

2265

2266 /* Rules for dropdown menus */

2267

2268 .dropdown {

2269 position: relative;

2270 }

2271

2272 .dropdown-toggle {

2273 *margin-bottom: -3px;

2274 }

2275

2276 .dropdown-toggle:active,

2277 .open .dropdown-toggle {

2278 outline: 0;

2279 }

2280

2281 .caret {

2282 display: inline-block;

2283 width: 0;

2284 height: 0;

2285 vertical-align: top;

2286 border-top: 4px solid #000000;

2287 border-right: 4px solid transparent;

2288 border-left: 4px solid transparent;

2289 content: "";

2290 }

2291

2292 .dropdown .caret {

2293 margin-top: 8px;

2294 margin-left: 2px;

2295 }

2296

2297 .dropdown-menu {

2298 position: absolute;

2299 top: 100%;

2300 left: -1px;

2301 z-index: 1000;

2302 display: none;

2303 float: left;

2304 min-width: 160px;

2305 padding: 5px 0;

2306 margin: 0;

2307 list-style: none;

2308 background-color: #ffffff;

2309 border: 1px solid #ccc;

2310 border-radius: 0 3px 3px;

2311 *border-right-width: 2px;

2312 *border-bottom-width: 2px;

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

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

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

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

2317 -moz-background-clip: padding;

2318 background-clip: padding-box;

2319 }

2320

2321 .dropdown-menu.pull-right {

2322 right: 0;

2323 left: auto;

2324 }

2325

2326 .dropdown-menu .divider {

2327 *width: 100%;

2328 height: 1px;

2329 margin: 9px 1px;

2330 *margin: -5px 0 5px;

2331 overflow: hidden;

2332 background-color: #e5e5e5;

2333 border-bottom: 1px solid #ffffff;

2334 }

2335

2336 .dropdown-menu > li > a {

2337 display: block;

2338 padding: 3px 10px;

2339 clear: both;

2340 font-weight: normal;

2341 line-height: 20px;

2342 color: #333333;

2343 white-space: nowrap;

2344 }

2345

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

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

2348 .dropdown-submenu:hover > a,

2349 .dropdown-submenu:focus > a {

2350 color: #ffffff;

2351 text-decoration: none;

2352 background-color: $green;

2353 }

2354

2355 .dropdown-menu > .active > a,

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

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

2358 color: #ffffff;

2359 text-decoration: none;

2360 background-color: $green;

2361 outline: 0;

2362 }

2363

2364 .dropdown-menu > .disabled > a,

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

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

2367 color: #999999;

2368 }

2369

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

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

2372 text-decoration: none;

2373 cursor: default;

2374 background-color: transparent;

2375 background-image: none;

2376 }

2377

2378 .open {

2379 *z-index: 1000;

2380 }

2381

2382 .open > .dropdown-menu {

2383 display: block;

2384 }

2385

2386 .dropdown-backdrop {

2387 position: fixed;

2388 top: 0;

2389 right: 0;

2390 bottom: 0;

2391 left: 0;

2392 z-index: 990;

2393 }

2394

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

2396 .site-welcome {

2397 .center {

2398 text-align: center;

2399 .sprite {

2400 float: none;

2401 margin: auto;

2402 }

2403 }

2404

2405 .sprite {

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

2407 background-size: 500px 250px;

2408 display: block;

2409 float: left;

2410 }

2411

2412 .icon-list {

2413 padding-bottom: 20px;

2414 div {

2415 margin-bottom: 10px;

2416 p {

2417 padding-top: 10px;

2418 }

2419 }

2420 }

2421 .sprite.small {

2422 width: 50px;

2423 height: 50px;

2424 }

2425

2426 .sprite.x {

2427 background-position: -50px 0;

2428 }

2429

2430 .sprite.term {

2431 margin-right: 10px;

2432 vertical-align: middle;

2433 }

2434

2435 .sprite.node {

2436 background-position: -100px 0;

2437 }

2438

2439 .sprite.way {

2440 background-position: -150px 0;

2441 }

2442

2443 .sprite.tag {

2444 background-position: -200px 0;

2445 }

2446

2447 .sprite.editor {

2448 background-position: -250px 0;

2449 }

2450

2451 .sprite.question {

2452 background-position: -300px 0;

2453 }

2454

2455 .start-mapping {

2456 margin: auto;

2457 cursor: pointer;

2458 border: none;

2459 padding: 20px 40px;

2460 font-size: 30px;

2461 text-decoration: none;

2462 }

2463

2464 .note-box {

2465 margin-top: 20px;

2466 background-color: $offwhite;

2467 }

2468

2469 .icon.note {

2470 background-color: #333;

2471 border-radius: 4px;

2472 }

2473 }

2474

2475 .site-about #content {

2476 //background-color: #000;

2477 background-color: #eee;

2478 background-position: 50% 50%;

2479 background-repeat: no-repeat;

2480 background-size: cover;

2481 background-attachment: fixed;

2482

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

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

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

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

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

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

2489

2490 .caption {

2491 max-width: 200px;

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

2493 position: fixed;

2494 text-align: right;

2495 right: 20px;

2496 bottom: 60px;

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

2498 color: #eee;

2499 opacity: 0.8;

2500 display: none;

2501 }

2502

2503 .caption a {

2504 color: white;

2505 white-space: nowrap;

2506 text-decoration: none;

2507 }

2508

2509 a.next {

2510 display: block;

2511 position: fixed;

2512 right: 10px;

2513 bottom: 10px;

2514 width: 40px;

2515 height: 40px;

2516 border-radius: 5px;

2517 text-indent: -9999px;

2518 overflow: hidden;

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

2520 background-color: #000;

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

2522 }

2523

2524 .content-inner {

2525 position: relative;

2526 color: #333;

2527 min-width: 320px;

2528 max-width: 640px;

2529

2530 .section {

2531 margin-bottom: 30px;

2532 }

2533

2534 .section:last-child {

2535 margin-bottom: 0;

2536 }

2537 }

2538

2539 .text {

2540 background: white;

2541 padding: 40px;

2542 }

2543

2544 .attr {

2545 position: relative;

2546 padding: 170px 40px 20px;

2547 background: #333;

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

2549 margin-bottom: 0;

2550 margin-top: -20px;

2551

2552 h1 {

2553 display: block;

2554 color: white;

2555 font-weight: 300;

2556 font-size: 34px;

2557 span {

2558 color: #76c551;

2559 }

2560 }

2561

2562 .user-image {

2563 position: absolute;

2564 top: 0px;

2565 right: 240px;

2566 left: 0px;

2567 height: 150px;

2568 background-position: 0 50%;

2569 background-repeat: no-repeat;

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

2571 background-size: cover;

2572 background-color: #76c551;

2573 }

2574

2575 .byosm {

2576 position: absolute;

2577 top: 0px;

2578 right: 0px;

2579 z-index: 1;

2580 width: 240px;

2581 height: 150px;

2582 padding: 20px 20px 20px 40px;

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

2584 white-space: nowrap;

2585 color: #fff;

2586 background: #76c551;

2587 }

2588

2589 .byosm span {

2590 display: inline-block;

2591 width: 20px;

2592 margin-left: -20px;

2593 }

2594 }

2595

2596 h2 {

2597 margin-bottom: 10px;

2598 }

2599

2600 .icon {

2601 width: 30px;

2602 height: 30px;

2603 margin-right: 10px;

2604 vertical-align: middle;

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

2606

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

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

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

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

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

2612 }

2613 }

2614

2615 @import 'browse';

2616

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

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

2619 display: none;

2620 }

2621 }

2622