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

1 @import "parameters";

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

5 /* Minimal CSS reset */

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

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

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

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

22 table {

23 border-collapse: collapse;

24 border-spacing: 0;

25 }

27 li { list-style: none; }

29 input,

30 select,

31 textarea,

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

34 abbr, acronym {

35 border-bottom: .1em dotted;

36 cursor: help;

37 }

39 strong {

40 font-weight: bold;

41 }

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

45 .clearfix:before,

46 .clearfix:after {

47 content: " ";

48 display: table;

49 }

51 .clearfix:after {

52 clear: both;

53 }

55 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

69 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

85 .fillL { background-color: white; }

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

89 * {

90 -webkit-box-sizing: border-box;

91 -moz-box-sizing: border-box;

92 box-sizing: border-box;

93 }

95 body {

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

97 font-size: $typeheight;

98 line-height: 1.6666;

99 color: #222;

100 background-color: #fff;

101 margin: 0px;

102 padding: 0px;

103 text-align: left;

104 height: 100%;

105 }

106

107 body.slim {

108 background-color: #f0f0f0;

109 }

110

111 h1, h2, h3 {

112 font-weight: 600;

113 line-height: 1.2;

114 }

115

116 h4, h5 {

117 font-weight: 500;

118 }

119

120 h1 {

121 font-size: 18px;

122 }

123

124 h2, h3 {

125 font-size: 16px;

126 }

127

128 p > img {

129 width: auto;

130 max-width: 100%;

131 }

132

133 small, aside {

134 font-size: 12px;

135 }

136

137 #container { position: relative; }

138

139 .column-1 {

140 width: 50%;

141 margin: 0 0 $lineheight/2 0;

142 }

143

144 .small_icon {

145 vertical-align: middle;

146 margin-right: $lineheight/4;

147 }

148

149 .red { color: $red; }

150

151 /* Rules for icons */

152

153 .icon {

154 display:inline-block;

155 vertical-align:top;

156 width:20px;

157 height:20px;

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

159 text-indent:-9999px;

160 overflow:hidden;

161 }

162

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

179

180 /* Rules for links */

181

182 a {

183 color: #24d;

184 text-decoration: none;

185 -webkit-appearance: none;

186 outline: 0;

187 &:hover {

188 text-decoration: underline;

189 }

190 }

191

192 /* Rules for horizontal lines */

193

194 hr {

195 border: none;

196 background-color: #ccc;

197 color: #ccc;

198 height: 1px;

199 }

200

201 /* General styles for tables */

202

203 table {

204 width: 100%;

205 margin-bottom: $lineheight;

206 th, td {

207 text-align: left;

208 padding: $lineheight/4;

209 line-height: $lineheight;

210 }

211 th {

212 font-weight: 600;

213 vertical-align: top;

214 }

215 td {

216 vertical-align: middle;

217 }

218 }

219

220 /* Utility for de-emphasizing content */

221

222 .deemphasize {

223 color: #999;

224 a {

225 color: $blue;

226 }

227 }

228

229 /* Rules for the header */

230

231 #menu-icon {

232 display: none !important;

233 float: right;

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

235 background-size: 30px 30px;

236 display: block;

237 width: 30px;

238 height: 30px;

239 margin: 14px 10px 0 0;

240 opacity: 0.6;

241 }

242

243 header {

244 height: $headerHeight;

245 position: relative;

246 z-index: 1001;

247 font-size: 14px;

248

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

250 display: inline-block;

251 }

252

253 > * {

254 height: 100%;

255 padding: $lineheight/2;

256 }

257

258 h1, nav.primary {

259 float: left;

260 }

261

262 a, a:hover {

263 text-decoration: none;

264 }

265

266 img.logo {

267 width: 30px;

268 height: 30px;

269 margin-top: -2px;

270 vertical-align: middle;

271 }

272

273 h1 {

274 margin: 0;

275 padding-top: 15px;

276

277 a {

278 color: #000;

279 }

280 }

281 }

282

283 nav.primary {

284 > ul {

285 $border: 1px solid $green;

286

287 border: $border;

288 border-radius: $border-radius;

289

290 > li {

291 border-right: $border;

292 float: left;

293 &:last-child {

294 border-right: 0;

295 }

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

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

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

299 &.dropdown {

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

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

302 }

303 }

304 }

305

306 a.tab,

307 .dropdown-toggle {

308 display: inline-block;

309 font-weight: 500;

310 color: $green;

311 padding: 5px 15px;

312 }

313

314 .dropdown-toggle {

315 padding: 5px 6px;

316 }

317

318 .caret {

319 border-top-color: $green;

320 margin-top: 10px;

321 }

322

323 .disabled a {

324 color: #ccc;

325 cursor: default;

326

327 .caret {

328 border-top-color: #ccc;

329 }

330 }

331

332 > ul li.current {

333 background-color: $green;

334

335 .tab {

336 color: #fff;

337 }

338

339 .caret {

340 border-top-color: #fff;

341 }

342 }

343 }

344

345 nav.secondary {

346 position: absolute;

347 right: 0;

348

349 > ul {

350 vertical-align: middle;

351 a, .dropdown-toggle {

352 display: inline-block;

353 text-decoration: none;

354 color: $darkgrey;

355 padding: 5px;

356

357 &:hover { color: darken($darkgrey, 25%); }

358 }

359 }

360

361 > ul li.current a {

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

363 }

364

365 .user-menu {

366 $border: 1px solid $grey;

367 border: $border;

368 border-radius: $border-radius;

369 margin-left: 10px;

370

371 > li {

372 border-right: $border;

373 float: left;

374 &:last-child {

375 border-right: 0;

376

377 > a {

378 border-radius: 0 $border-radius $border-radius 0;

379 }

380 }

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

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

383 }

384

385 a {

386 padding: 5px 15px;

387

388 }

389

390 &.logged-in > a {

391 padding: 0;

392 > .user-button {

393 line-height: 1.8;

394 padding: 5px 10px 3px 6px;

395 display: inline-block;

396 color: $darkgrey;

397 }

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

399 }

400 }

401

402 .caret {

403 border-top-color: $grey;

404 margin-top: 9px;

405 }

406

407 img.user_thumbnail_tiny {

408 border: 0;

409 vertical-align: top;

410 margin-top: 0px;

411 margin: 4px 0 0 4px;

412 border-radius: 2px;

413 }

414

415 #inboxanchor {

416 display: inline-block;

417 vertical-align: top;

418 height: 25px;

419 margin: 3px 0 3px 3px;

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

421 line-height: 20px;

422 border-radius: 2;

423 }

424

425 .dropdown-menu {

426 left: auto;

427 right: -1px;

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

429

430 .count-number {

431 float: right;

432 padding: 0 5px;

433 margin: 0;

434 }

435 }

436 }

437

438 #compact-secondary-nav {

439 display: none;

440 ul li a {

441 width: 100%;

442 color: #333;

443 &:hover { color: #fff; }

444 }

445 }

446

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

448 #compact-secondary-nav {

449 display: inline-block;

450 }

451 .compact-hide {

452 display: none;

453 }

454 }

455

456 /* Utility for styling notification numbers */

457

458 .count-number {

459 padding: 2px $lineheight/4;

460 border-radius: 2px;

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

462 margin: 0 2px;

463 font-size: 11px;

464 color: #333;

465 }

466

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

468

469 #noscript {

470 z-index: 20000000;

471 position: absolute;

472 top: 15px;

473 left: 15px;

474 }

475

476 /* Rules for bootstrap tooltips */

477

478 .tooltip {

479 position: absolute;

480 display: none;

481 color: #333;

482 text-align: left;

483 font-size: 12px;

484 max-width: 250px;

485 }

486

487 .tooltip.in {

488 opacity: 0.8;

489 z-index: 1030;

490 height: auto;

491 display: block;

492 }

493

494 .tooltip.top {

495 margin-top: -10px;

496 text-align: center;

497 }

498

499 .tooltip.right {

500 margin-left: 10px;

501 }

502

503 .tooltip.bottom {

504 margin-top: 10px;

505 text-align: center;

506 }

507

508 .tooltip.left {

509 margin-left: -10px;

510 text-align: right;

511 }

512

513 .tooltip-inner {

514 display: inline-block;

515 padding: 10px;

516 font-weight: normal;

517 background-color: white;

518 }

519

520 .tooltip-arrow {

521 position: absolute;

522 width: 0;

523 height: 0;

524 border-color: transparent;

525 border-style: solid;

526 }

527

528 .tooltip.top .tooltip-arrow {

529 bottom: -5px;

530 left: 50%;

531 margin-left: -5px;

532 border-top-color: white;

533 border-width: 5px 5px 0;

534 }

535

536 .tooltip.right .tooltip-arrow {

537 top: 50%;

538 left: -5px;

539 margin-top: -5px;

540 border-right-color: white;

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

542 }

543

544 .tooltip.left .tooltip-arrow {

545 top: 50%;

546 right: -5px;

547 margin-top: -5px;

548 border-left-color: white;

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

550 }

551

552 .tooltip.bottom .tooltip-arrow {

553 top: -5px;

554 left: 50%;

555 margin-left: -5px;

556 border-bottom-color: white;

557 border-width: 0 5px 5px;

558 }

559

560 /* Rules for Leaflet maps */

561

562 .leaflet-control .control-button {

563 display: block;

564 height: 40px;

565 width: 40px;

566 background-color: #333;

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

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

569 margin-bottom: 10px;

570 outline: none;

571

572 &:hover {

573 background-color: black;

574 }

575

576 &.active {

577 background-color: #9ed485;

578 }

579

580 &.disabled {

581 background-color: #333;

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

583 cursor: default;

584 }

585

586 .icon {

587 margin: 10px;

588 }

589 }

590

591 .leaflet-control .zoomin,

592 .control-layers .control-button {

593 margin-bottom: 0px;

594 border-radius: 4px 0 0 0;

595 }

596

597 .leaflet-control .zoomout,

598 .control-key .control-button {

599 margin-bottom: 0;

600 border-radius: 0;

601 }

602

603 .control-locate .control-button,

604 .control-share .control-button {

605 border-radius: 0 0 0 4px;

606 }

607

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

609

610 .map-layout {

611 #content {

612 overflow: hidden;

613 position: absolute;

614 top: $headerHeight;

615 bottom: 0;

616 width: 100%;

617 }

618

619 #sidebar, #map {

620 position: relative;

621 height: 100%;

622 overflow-x: hidden;

623 overflow-y: auto;

624 }

625

626 #sidebar {

627 float: left;

628 width: $sidebarWidth;

629 background: #fff;

630 font-size: 12px;

631

632 h2 {

633 padding: $lineheight $lineheight $lineheight/2;

634 }

635

636 h3, h4 {

637 margin-top: $lineheight;

638 margin-bottom: $lineheight/2;

639 font-size: 13px;

640 }

641

642 .icon.close {

643 float: right;

644 cursor: pointer;

645 }

646 }

647

648 .welcome {

649 display: none;

650 }

651

652 .overlay-sidebar #sidebar {

653 position: absolute;

654 z-index: 1000;

655 height: auto;

656 border-bottom-right-radius: 5px;

657 overflow: hidden;

658 .welcome {

659 display: block;

660 }

661 #sidebar_content {

662 display: none;

663 }

664 }

665

666 .welcome {

667 p {

668 padding: $lineheight/2 $lineheight $lineheight;

669 font-size: 110%;

670 font-weight: 300;

671 }

672

673 .button {

674 width: 50%;

675 float: left;

676 margin: 0;

677 border-radius: 0;

678 font-weight: normal;

679 padding: .6em;

680

681 &.learn-more {

682 border-right: 1px solid #fff;

683 }

684 }

685 }

686

687 #map {

688 height: 100%;

689 overflow: hidden;

690 }

691

692 #map-ui {

693 display: none;

694 position: relative;

695 float: right;

696 width: 250px;

697 height: 100%;

698 background: white;

699 overflow: auto;

700

701 .section {

702 border-bottom: 1px solid #DDD;

703 padding: 10px 20px;

704 }

705

706 a.close-button {

707 float: right;

708 padding:5px;

709 font-size:20px;

710 line-height:10px;

711 color:#222;

712 border:1px solid #ddd;

713 }

714

715 .tooltip {

716 opacity: 1;

717 border: 1px solid #ccc;

718 .tooltip-arrow {

719 border-top-color: #ccc;

720 }

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: 600;

756 font-size: 16px;

757 text-stroke: 2px #fff;

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

759 z-index: 2; // For IE9

760 input[type="radio"] {

761 display: none;

762 }

763 }

764

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

766 &:hover {

767 border-color: $grey;

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

769 }

770 }

771 }

772

773 .overlay-layers {

774 p {

775 font-size: 13px;

776 margin-bottom: 8px;

777 }

778 li.disabled { color: #999; }

779 }

780 }

781

782 .share-ui {

783 .share-tabs {

784 margin-bottom: 10px;

785

786 a {

787 color: #fff;

788 text-decoration: none;

789 background-color: $lightblue;

790 padding: 5px 10px;

791 }

792

793 a:first-child {

794 border-right: 1px solid #fff;

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

796 }

797

798 a:last-child {

799 border-left: 1px solid #fff;

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

801 }

802

803 a.active {

804 background-color: $blue;

805 }

806 }

807

808 .share-tab {

809 display: none;

810 }

811

812 .share-link {

813 input[type=text],

814 textarea {

815 width: 100%;

816 font-family: monospace;

817 font-size: small;

818 line-height: 1.3;

819 }

820 }

821

822 .share-image {

823 label {

824 margin-right: 10px;

825 }

826 }

827

828 #embed_html {

829 resize: vertical;

830 }

831

832 #mapnik_scale {

833 width: 100px;

834 }

835 }

836

837 .leaflet-top {

838 top: $lineheight/2 !important;

839 .leaflet-control {

840 margin-right: 0px !important;

841 margin-top: 0px !important;

842 }

843 }

844

845 .leaflet-popup-scrolled {

846 padding-right: $lineheight;

847 border-bottom: 0px !important;

848 border-top: 0px !important;

849 }

850

851 .leaflet-popup-content-wrapper {

852 border-radius: 4px !important;

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

854 }

855

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

857

858 #attribution {

859 display: none;

860 }

861

862 .attribution_license,

863 .attribution_project {

864 text-align: left;

865 }

866

867 .attribution_notice {

868 text-align: center;

869 }

870

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

872

873 /* Rules for the sidebar */

874

875 .sidebar_heading {

876 position: relative;

877 padding: $lineheight/2 $lineheight;

878 // background: $offwhite;

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

880 > .close {

881 float: right;

882 margin-top: 2px;

883 cursor: pointer;

884 }

885 }

886

887 #browse_status {

888 p {

889 padding: $lineheight;

890 }

891

892 input {

893 display: block;

894 margin-left: auto;

895 margin-right: auto;

896 }

897 }

898

899 #sidebar {

900 #sidebar_loader,

901 .loader,

902 .load_more {

903 text-align: center;

904 margin: $lineheight auto;

905 width: 40px;

906 display: block;

907 }

908 }

909

910 /* Rules for the search box */

911

912 header .search_form {

913 display: none;

914 }

915

916 .search_form {

917 position: relative;

918 padding: $lineheight/2;

919 background-color: $lightgrey;

920

921 .query_wrapper {

922 position: relative;

923 overflow: hidden;

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

925 }

926

927 input[type=text] {

928 width: 100%;

929 height: 30px;

930 border-right: none;

931

932 transition: 300ms linear;

933 -webkit-transition: 300ms linear;

934 -moz-transition: 300ms linear;

935 }

936

937 input:focus {

938 outline: none;

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

940 }

941

942 input[type=submit] {

943 float: right;

944 width: auto;

945 min-width: 0;

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

947 }

948

949 .describe_location {

950 position: absolute;

951 top: 6px;

952 right: 6px;

953 font-size: 10px;

954 color: $blue;

955 }

956

957 .query_wrapper.routing {

958 display: none;

959 }

960 }

961

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

963

964 #mapkey {

965 .mapkey-table-key img {

966 display: block;

967 margin-left: auto;

968 margin-right: auto;

969 }

970 td {

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

972 }

973 }

974

975 /* Rules for search sidebar */

976

977 .search_results_entry {

978 ul li {

979 border-bottom: $keyline;

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

981 }

982

983 .search_details {

984 display: block;

985 float: right;

986 text-align: right;

987 margin-top: 0.2em;

988 margin-left: 0.5em;

989 }

990 }

991

992 .search_results_error {

993 color: #f00;

994 }

995

996 /* Rules for entity history */

997

998 #sidebar_content {

999 .browse_details {

1000 position: relative;

1001 border-bottom: $keyline;

1002 }

1003 }

1004

1005 .browse_status {

1006 display: none;

1007 }

1008

1009 /* Rules for the history sidebar */

1010

1011 #sidebar .changesets {

1012 li {

1013 padding: 15px 20px;

1014 border-bottom: 1px solid #ddd;

1015 cursor: pointer;

1016

1017 &.selected { background: #FFFFE6; }

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

1019 }

1020

1021 h4 {

1022 margin: 0;

1023 a {

1024 color: #000;

1025 }

1026 }

1027 }

1028

1029 /* Rules for the browse sidebar */

1030

1031 #sidebar_content {

1032 .browse-section {

1033 padding: $lineheight/2 $lineheight;

1034 border-bottom: 1px solid #ddd;

1035

1036 h4:first-child {

1037 margin-top: 0;

1038 word-wrap: break-word;

1039 }

1040 }

1041

1042 .browse-section:last-of-type {

1043 border-bottom: none;

1044 }

1045

1046 .paginate {

1047 float: right;

1048 padding: 1px 6px;

1049 border: 1px solid #eee;

1050 border-radius: 3px;

1051 }

1052

1053 .paginate ul {

1054 padding-left: 20px;

1055 }

1056

1057 .browse-field {

1058 margin-bottom: 10px;

1059

1060 h4 {

1061 padding: 5px 0 5px 10px;

1062 font-size: 12px;

1063 border: 1px solid #CCC;

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

1065 background-color: #F6F6F6;

1066 }

1067

1068 p {

1069 padding: 7px 10px;

1070 font-size: 12px;

1071 background-color: #FFF;

1072 border: 1px solid #CCC;

1073 border-top: 0;

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

1075 }

1076 }

1077

1078 .browse-tag-list {

1079 background-color: #F6F6F6;

1080 border: 1px solid #ddd;

1081 border-radius: 3px;

1082 font-size: 12px;

1083 table-layout: fixed;

1084 border-collapse: separate;

1085

1086 th, td {

1087 border-bottom: 1px solid #ddd;

1088 }

1089

1090 tr:last-child th, tr:last-child td {

1091 border-bottom: 0;

1092 }

1093

1094 .browse-tag-k,

1095 .browse-tag-v {

1096 width: 50%;

1097 padding: 6px 10px;

1098 word-wrap: break-word;

1099 }

1100

1101 .browse-tag-k {

1102 font-weight: 500;

1103 background-color: #F6F6F6;

1104 }

1105

1106 .browse-tag-v {

1107 border-left: 1px solid #ddd;

1108 background-color: #fff;

1109 }

1110 }

1111

1112 .warning {

1113 margin: $lineheight/2 0;

1114 padding: $lineheight/2;

1115 font-size: 90%;

1116 }

1117

1118 .note-comments li {

1119 margin: $lineheight/2 0;

1120

1121 p {

1122 margin-left: 10px;

1123 }

1124 }

1125

1126 .note-description {

1127 overflow: hidden;

1128 margin: 0 0 10px 10px;

1129 }

1130 }

1131

1132 /* Rules for export sidebar */

1133

1134 .export_form {

1135 padding: $lineheight;

1136

1137 .export_area_inputs,

1138 .export_button {

1139 text-align: center;

1140 }

1141

1142 .export_area_inputs {

1143 margin-bottom: $lineheight/2;

1144 input[type="text"] {

1145 width: 80px;

1146 text-align: center;

1147 margin-bottom: 5px;

1148 }

1149 }

1150

1151 .export_boxy {

1152 background: #eee;

1153 border: 1px solid #ccc;

1154 border-radius: 3px;

1155

1156 #maxlat { margin-top: -1px; }

1157 #minlon {

1158 float: left;

1159 margin-left: -1px;

1160 }

1161 #maxlon {

1162 float: right;

1163 margin-right: -1px;

1164 }

1165 #minlat { margin-bottom: 0; }

1166 }

1167

1168 .export_bound {

1169 margin: $lineheight/4;

1170 }

1171

1172 .export_button {

1173 margin-top: $lineheight;

1174 margin-bottom: $lineheight;

1175 }

1176

1177 dl {

1178 padding-left: $lineheight/2;

1179 dd {

1180 margin-left: 0;

1181 margin-bottom: 10px;

1182 }

1183 }

1184 }

1185

1186 /* Rules for edit pages */

1187

1188 .site-edit {

1189 #content {

1190 position: absolute;

1191 top: $headerHeight;

1192 bottom: 0;

1193 width: 100%;

1194 }

1195

1196 #map {

1197 height: 100%;

1198 overflow: hidden;

1199 }

1200 }

1201

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

1203

1204 .content-heading {

1205 background: $lightgrey;

1206

1207 h1 { font-size: 22px; }

1208 }

1209

1210 .content-body {

1211 h1, h2, h3, p, ul, ol {

1212 margin-bottom: $lineheight;

1213 }

1214

1215 h1, h2, h3 {

1216 margin-top: $lineheight/2;

1217 }

1218 }

1219

1220 .content-inner {

1221 position: relative;

1222 max-width: 900px;

1223 margin: auto;

1224 padding: $lineheight;

1225 }

1226

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

1228

1229 .user-new,

1230 .user-create,

1231 .user-terms {

1232 .content-body .content-inner {

1233 padding: 0;

1234 }

1235 }

1236

1237 .user-new,

1238 .user-create,

1239 .user-terms,

1240 .user-confirm {

1241 .content-heading .content-inner {

1242 height: 200px;

1243 }

1244 }

1245

1246 .header-illustration {

1247 background-position: 0 0;

1248 background-repeat: no-repeat;

1249 position: absolute;

1250 height: 200px;

1251 width: 100%;

1252 left: 0;

1253 bottom: 0;

1254

1255 &.new-user-main {

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

1257 }

1258

1259 &.confirm-main {

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

1261 }

1262

1263 &.new-user-terms {

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

1265 }

1266

1267 &.new-user-arm {

1268 height: 110px;

1269 width: 130px;

1270 left: 260px;

1271 top: 160px;

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

1273 z-index: 100;

1274 }

1275 }

1276

1277 #content.maximised {

1278 top: 0;

1279 left: 0;

1280 right: 0;

1281 bottom: 0;

1282 border: 0;

1283 z-index: 2000;

1284 }

1285

1286 #slim_container {

1287 width: 100%;

1288 }

1289

1290 #slim_container_content {

1291 max-width: 50em;

1292 background-color: #FFFFFF;

1293 margin: $lineheight/2 auto;

1294 padding: 3px;

1295 border-radius: 25px;

1296 -moz-border-radius: 25px;

1297 border: 1px solid #e6e6e6;

1298 }

1299

1300 #slim_content {

1301 margin: $lineheight/2;

1302 margin-top: 95px;

1303 max-width: 50em;

1304

1305 .content-heading {

1306 margin-bottom: 15px;

1307 }

1308 }

1309

1310 #slim_header {

1311 margin: 30px $lineheight/2;

1312 position: absolute;

1313 top: 0px;

1314 margin-right: $lineheight/4;

1315 img {

1316 vertical-align: middle;

1317 margin-bottom: $lineheight/4;

1318 margin-right: $lineheight/4;

1319 }

1320 }

1321

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

1323

1324 .content_map {

1325 position: relative;

1326 width: 45%;

1327 height: 400px;

1328 border: 1px solid #ccc;

1329 margin-bottom: $lineheight;

1330 float: right;

1331 }

1332

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

1334

1335 #trace_list {

1336 font-size: $lineheight/2;

1337 border-width: 0px;

1338 text-align: right;

1339

1340 .trace_summary {

1341 font-size: 12px;

1342 color: gray;

1343 }

1344

1345 .trace_pending {

1346 color: red;

1347 }

1348

1349 .trace_public {

1350 color: green;

1351 }

1352

1353 .trace_identifiable {

1354 color: green;

1355 }

1356

1357 .trace_trackable {

1358 color: red;

1359 }

1360

1361 .trace_private {

1362 color: red;

1363 }

1364 }

1365

1366 /* Rules for the user profile page */

1367

1368 #userinformation {

1369

1370 min-height: 100px;

1371 .userinformation-inner {

1372 float: left;

1373 }

1374 h2 {

1375 margin-top: 0;

1376 }

1377 .user-description {

1378 width: 100%;

1379 clear: both;

1380 }

1381 .deemphasize {

1382 margin: 0;

1383 }

1384 }

1385

1386 .admin-user-info small {

1387 margin-bottom: $lineheight/2;

1388 display: inline;

1389 margin-right: $lineheight;

1390 }

1391

1392 .activity-block {

1393 clear: left;

1394 border-bottom: 1px solid #ccc;

1395 padding-bottom: $lineheight;

1396 float: left;

1397 h3 {

1398 margin-bottom: $lineheight/2;

1399 }

1400 }

1401

1402 .contact-activity {

1403 margin-top: $lineheight;

1404 width: 100%;

1405 }

1406

1407 .activity-details p {

1408 margin-left: 70px;

1409 margin-bottom: 0;

1410 }

1411

1412 #friends-container .contact-activity ul {

1413 margin-left: 70px;

1414 }

1415

1416 .user-view {

1417 // Silly exception; remove when user page is redesigned.

1418 .content-inner {

1419 max-width: none;

1420 }

1421 p#no_home_location {

1422 margin: $lineheight;

1423 }

1424 .user_thumbnail {

1425 margin-top: $lineheight/4;

1426 float: left;

1427 }

1428 }

1429

1430 /* Rules for the user map */

1431

1432 .content_map .leaflet-popup-content {

1433 margin: $lineheight/2;

1434 min-height: 50px;

1435 }

1436

1437 /* Rules for user popups on maps */

1438

1439 .user_popup {

1440 min-width: 200px;

1441 p {

1442 padding: 0 0 5px 0;

1443 margin-top: 0 0 0 60px;

1444 font-size: 12px;

1445 }

1446 img.user_thumbnail {

1447 float: left;

1448 margin: 0 $lineheight/2 0 0;

1449 }

1450 }

1451

1452 /* Rules for the user list */

1453

1454 #user_list {

1455 font-size: $lineheight/2;

1456 width: 100%;

1457

1458 tr {

1459 vertical-align: middle;

1460 }

1461

1462 p {

1463 margin-top: 0px;

1464 margin-bottom: 0px;

1465 }

1466 }

1467

1468 #user_list_actions {

1469 float: right;

1470 margin-top: $lineheight/2;

1471 }

1472

1473 /* Rules for the diary list page */

1474

1475 .diary_post {

1476 position: relative;

1477 margin-top: $lineheight/2;

1478 padding-top: $lineheight;

1479 border-top: 1px solid #ccc;

1480

1481 .post_heading {

1482 margin-bottom: $lineheight;

1483

1484 h2 {

1485 margin-top: 0;

1486 margin-bottom: $lineheight/2;

1487 font-size: 24px;

1488 }

1489 }

1490

1491 img.user_thumbnail {

1492 float: left;

1493 }

1494

1495 small.deemphasize {

1496 float: left;

1497 display: block;

1498 }

1499

1500 ul.secondary-actions {

1501 display: inline-block;

1502 }

1503 }

1504

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

1506 display: inline;

1507 }

1508

1509 /* Rules for the diary entry page */

1510

1511 .diary_entry {

1512 #map {

1513 position: relative;

1514 width: 90%;

1515 height: 400px;

1516 border: 1px solid #ccc;

1517 display: none;

1518 margin-bottom: $lineheight;

1519 }

1520 #newcomment {

1521 border-top: 1px solid #ccc;

1522 padding-top: $lineheight;

1523 margin-top: $lineheight/2;

1524 }

1525 .comments {

1526 max-width: 740px;

1527 }

1528 .diary-comment {

1529 margin-top: $lineheight/2;

1530 border-top: 1px dashed #ccc;

1531 padding-top: $lineheight/2;

1532 &:first-child {

1533 margin-top: $lineheight;

1534 padding-top: $lineheight;

1535 border-top: 1px solid #ccc;

1536 }

1537 p {

1538 margin-bottom: $lineheight/2;

1539 }

1540 .comment-heading {

1541 margin-bottom: 0;

1542 margin-top: 0;

1543 }

1544 }

1545 }

1546

1547 .diary_entry-view img.user_thumbnail {

1548 float: left;

1549 }

1550

1551 /* Rules for the log in page */

1552

1553 #login_openid_buttons {

1554 margin-bottom: 0;

1555 }

1556

1557 #login_openid_buttons li {

1558 float: left;

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

1560 }

1561

1562 /* Rules for the account confirmation page */

1563

1564 .user-terms {

1565 .legale {

1566 border: 1px solid #ccc;

1567 padding: $lineheight;

1568 margin-bottom: $lineheight;

1569 overflow: auto;

1570 height: 20em;

1571 }

1572

1573 #decline {

1574 background: $lightblue;

1575 &:hover {

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

1577 }

1578 }

1579 }

1580

1581 /* Rules for the account settings page */

1582

1583 #accountForm .user_map {

1584 position: relative;

1585 width: 500px;

1586 height: 400px;

1587 border: 1px solid #ccc;

1588 }

1589

1590 #accountForm .user_image {

1591 margin-bottom: 0;

1592 }

1593

1594 #accountForm #user_image {

1595 margin-left: 20px;

1596 }

1597

1598 #accountForm ul.accountImage-options {

1599 margin-left: 120px;

1600 }

1601

1602 .nohome .location {

1603 display: none;

1604 }

1605

1606 #homerow .message {

1607 display: none;

1608 }

1609

1610 .nohome .message {

1611 display: inline !important;

1612 }

1613

1614 .content_map.settings_map {

1615 width: 50%;

1616 float: none;

1617 }

1618

1619 /* Rules for the oauth settings page */

1620

1621 .oauth_clients .buttons .oauth-edit {

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

1623 }

1624

1625 .oauth_clients .buttons .oauth-delete {

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

1627 }

1628

1629 /* Rules for messages pages */

1630

1631 .messages {

1632 width: 100%;

1633 border: 1px solid #ddd;

1634

1635 input[type="submit"] {

1636 margin: auto;

1637 }

1638 tbody tr {

1639 border-top: 1px solid #ccc;

1640 }

1641

1642 .inbox-row {

1643 background: #f8f8ff;

1644 }

1645

1646 .inbox-row-unread {

1647 background:#CBEEA7;

1648 }

1649

1650 .right {

1651 float: right;

1652 }

1653

1654 tr td,

1655 tr th {

1656 padding: $lineheight/4;

1657 }

1658 p:last-child,

1659 h2:last-child,

1660 h3:last-child,

1661 ol:last-child,

1662 ul:last-child {

1663 margin-bottom:0;

1664 }

1665 tr td {

1666 height: 30px;

1667 border-right: 1px solid $lightgrey;

1668 }

1669 }

1670

1671 .inbox-row .inbox-mark-read {

1672 display: none;

1673 }

1674

1675 .info-line {

1676 margin-bottom: $lineheight;

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

1678 border-bottom: 1px solid #ccc;

1679

1680 form, form div {

1681 display: inline;

1682 }

1683 }

1684

1685 .info-line .user_thumbnail_tiny {

1686 vertical-align: middle;

1687 }

1688

1689 .inbox-sent {

1690 white-space: nowrap;

1691 }

1692

1693 .inbox-mark-unread,

1694 .inbox-mark-read,

1695 .inbox-delete {

1696 width: 1%;

1697 }

1698

1699 .inbox-row-unread .inbox-mark-unread {

1700 display: none;

1701 }

1702

1703 .message-read .message-buttons {

1704 margin-top: $lineheight;

1705 margin-bottom: $lineheight * 1.5;

1706 padding-top: $lineheight;

1707 border-top: 1px solid $lightgrey;

1708 }

1709

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

1711 border-radius: 0;

1712 }

1713

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

1715

1716 .error {

1717 padding: $lineheight;

1718 background-color: #ff7070;

1719 }

1720

1721 .warning {

1722 padding: $lineheight;

1723 background-color: #ffe0cc;

1724 }

1725

1726 .notice {

1727 padding: $lineheight;

1728 background-color: #CBEEA7;

1729 }

1730

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

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: bold;

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: bold;

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 &.field_with_errors {

1847 border: 2px solid #ff7070;

1848 }

1849 }

1850

1851 textarea {

1852 padding: 5px;

1853 width: 100%;

1854 }

1855

1856 /* Rules for user images */

1857

1858 img.user_image {

1859 max-width: 100px;

1860 max-height: 100px;

1861 border: 1px solid #ccc;

1862 margin-bottom: $lineheight;

1863 float: left;

1864 margin-right: $lineheight;

1865 }

1866

1867 img.user_thumbnail {

1868 max-width: 50px;

1869 max-height: 50px;

1870 border: 1px solid #ccc;

1871 margin-right: $lineheight;

1872 }

1873

1874 img.user_thumbnail_tiny {

1875 width: auto;

1876 height: auto;

1877 max-width: 25px;

1878 max-height: 25px;

1879 border: 1px solid #ccc;

1880 }

1881

1882 /* Rules for geo microformats */

1883

1884 abbr.geo {

1885 border-bottom: none;

1886 }

1887

1888 /* Rules for RSS buttons */

1889

1890 .rsssmall {

1891 position: relative;

1892 top: 3px;

1893 }

1894

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

1896

1897 ul.secondary-actions {

1898 font-style: normal;

1899 margin-bottom: 0;

1900 margin-left: 0;

1901 &.pager {

1902 display: inline-block;

1903 margin-right: 60px;

1904 }

1905 > li {

1906 display: block;

1907 float: left;

1908 list-style: none;

1909 border-left: 1px solid #ccc;

1910 padding-left: $lineheight/2;

1911 margin-right: $lineheight/2;

1912 &:first-child {

1913 border-left: 0;

1914 padding-left: 0;

1915 }

1916 &:last-child {

1917 margin-right: 0px;

1918 }

1919 }

1920 }

1921

1922 div.secondary-actions {

1923 padding: 10px;

1924 text-align: center;

1925 }

1926

1927 /* Utility for managing inner content areas */

1928

1929 .inner22 { padding: $lineheight;}

1930

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

1932

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

1934

1935 .inner20 { padding: $lineheight 0;}

1936

1937 .inner02 { padding: 0 $lineheight;}

1938

1939 /* Utility for general button styles */

1940

1941 input[type="button"],

1942 input[type="submit"],

1943 input[type="reset"],

1944 a.button {

1945 cursor: pointer;

1946 border: 0;

1947 display: inline-block;

1948 line-height: 20px;

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

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

1951 min-width: 120px;

1952 margin: 0 0 $lineheight/2 0;

1953 color: white;

1954 background: $blue;

1955 text-align: center;

1956 border-radius: 2px;

1957 -moz-border-radius: 2px;

1958 &:hover {

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

1960 text-decoration: none;

1961 }

1962 &.deemphasize {

1963 background: $lightblue;

1964 &:hover {

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

1966 }

1967 }

1968 &:disabled {

1969 background: $lightgrey;

1970 &:hover {

1971 background: $lightgrey;

1972 }

1973 }

1974 &:last-child {

1975 margin-bottom: 0;

1976 }

1977 }

1978

1979 .buttons {

1980 min-width: 200px;

1981 input[type="submit"],

1982 input[type="button"],

1983 input[type="reset"],

1984 .button {

1985 box-sizing: border-box;

1986 float: left;

1987 border-radius: 0;

1988 margin:0;

1989 min-width: 75px;

1990 max-width: 180px;

1991 border-right:1px solid white;

1992 text-overflow: ellipsis;

1993 white-space: nowrap;

1994 overflow: hidden;

1995 }

1996 input:first-child,

1997 .button:first-child {

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

1999 }

2000 input:last-child,

2001 .button:last-child {

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

2003 border-right-width: 0;

2004 }

2005 input:only-child,

2006 .button:only-child,

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

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

2009 border-radius:2px;

2010 border-right-width: 0;

2011 }

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

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

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

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

2016 border-right-width: 0;

2017 }

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

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

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

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

2022 border-right-width: 1px;

2023 }

2024 }

2025

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

2027

2028 .table0,

2029 .item0 {

2030 background: $offwhite;

2031 }

2032

2033 .table1,

2034 .item1 {

2035 background: #fff;

2036 }

2037

2038 /* Rules for OpenID logo */

2039

2040 .openid_logo {

2041 vertical-align: text-bottom;

2042 border: 0;

2043 }

2044

2045 /* Rules for rich text */

2046

2047 .richtext,

2048 .prose {

2049 h1, h2 {

2050 padding-bottom: $lineheight/2;

2051 border-bottom: 1px dashed #cccccc;

2052 margin-bottom: $lineheight/2;

2053 }

2054

2055 h1 {

2056 font-size: 24px;

2057 }

2058

2059 h2 {

2060 font-size: 18px;

2061 }

2062

2063 h3 {

2064 font-size: $typeheight;

2065 }

2066

2067 code {

2068 font-size: 13px;

2069 background: #e8e8e8;

2070 padding: 2px 3px;

2071 }

2072

2073 pre {

2074 font-size: 13px;

2075 background: #e8e8e8;

2076 padding: 2px 3px;

2077

2078 code {

2079 padding: 0;

2080 }

2081 }

2082

2083 img {

2084 padding: $lineheight;

2085 background-color: $offwhite;

2086 display: block;

2087 max-width: 100%;

2088 margin: auto;

2089 }

2090

2091 blockquote {

2092 border-left: $lineheight solid $offwhite;

2093 padding-left: $lineheight;

2094 margin: 0;

2095 color: #7E7E7E;

2096 }

2097

2098 ul, ol {

2099 padding-left: $lineheight;

2100 margin-bottom: $lineheight;

2101 margin-left: $lineheight;

2102 }

2103

2104 ul li {

2105 list-style: disc;

2106 }

2107

2108 ol li {

2109 list-style: decimal;

2110 }

2111 }

2112

2113 .diary_post .richtext {

2114 margin-top: $lineheight;

2115 }

2116

2117 .comments .richtext {

2118 margin-left: 70px;

2119 margin-top: 0;

2120 }

2121

2122 /* Rules for rich text editors */

2123

2124 input.richtext_title[type="text"] {

2125 width: 50%;

2126 width: -moz-calc(100% - 235px);

2127 width: -webkit-calc(100% - 235px);

2128 width: calc(100% - 235px);

2129

2130 @media only screen and (max-width:768px) {

2131 width: 100%;

2132 }

2133 }

2134

2135 .richtext_container {

2136 margin-bottom: $lineheight;

2137

2138 .richtext_content {

2139 width: 50%;

2140 width: -moz-calc(100% - 235px);

2141 width: -webkit-calc(100% - 235px);

2142 width: calc(100% - 235px);

2143 display: inline-block;

2144 vertical-align: top;

2145

2146 @media only screen and (max-width:768px) {

2147 width: 100%;

2148 }

2149

2150 .richtext_preview {

2151 display: inline-block;

2152 padding: $lineheight;

2153 background-color: $offwhite;

2154 overflow-x: auto;

2155

2156 &.loading {

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

2158 background-repeat: no-repeat;

2159 background-position: center;

2160 }

2161

2162 > :first-child {

2163 margin-top: 0px;

2164 }

2165 }

2166 }

2167

2168 .richtext_help {

2169 display: inline-block;

2170 vertical-align: top;

2171 margin-left: 15px;

2172 background-color: #f8f8ff;

2173 padding: $lineheight/2;

2174 width: 220px;

2175

2176 ul {

2177 margin-bottom: 0;

2178 }

2179

2180 h4.heading, li {

2181 border-bottom: 1px solid #ccc;

2182 margin-bottom: $lineheight/4;

2183 padding-bottom: $lineheight/4;

2184 }

2185

2186 li h4, li span, li p {

2187 display: inline-block;

2188 vertical-align: top;

2189 font-size: 11px;

2190 }

2191

2192 li h4 {

2193 width: 40%;

2194 margin: 0;

2195 }

2196

2197 li span, li p {

2198 width: 50%;

2199 margin-left: $lineheight/2;

2200 margin-bottom: $lineheight/4;

2201 white-space: nowrap;

2202 }

2203 }

2204 }

2205

2206 /* Rules for the user notes list */

2207

2208 .note_list {

2209 tr.creator {

2210 background-color: #eeeeee;

2211 }

2212

2213 td {

2214 padding: 3px;

2215 }

2216

2217 p {

2218 margin-bottom: 0px;

2219 }

2220 }

2221

2222 /* Rules for the iD editor */

2223

2224 .id-embed {

2225 width: 100%;

2226 height: 100%;

2227 }

2228

2229 /* Rules for dropdown menus */

2230

2231 .dropdown {

2232 position: relative;

2233 }

2234

2235 .dropdown-toggle {

2236 *margin-bottom: -3px;

2237 }

2238

2239 .dropdown-toggle:active,

2240 .open .dropdown-toggle {

2241 outline: 0;

2242 }

2243

2244 .caret {

2245 display: inline-block;

2246 width: 0;

2247 height: 0;

2248 vertical-align: top;

2249 border-top: 4px solid #000000;

2250 border-right: 4px solid transparent;

2251 border-left: 4px solid transparent;

2252 content: "";

2253 }

2254

2255 .dropdown .caret {

2256 margin-top: 8px;

2257 margin-left: 2px;

2258 }

2259

2260 .dropdown-menu {

2261 position: absolute;

2262 top: 100%;

2263 left: -1px;

2264 z-index: 1000;

2265 display: none;

2266 float: left;

2267 min-width: 160px;

2268 padding: 5px 0;

2269 margin: 0;

2270 list-style: none;

2271 background-color: #ffffff;

2272 border: 1px solid #ccc;

2273 border-radius: 0 3px 3px;

2274 *border-right-width: 2px;

2275 *border-bottom-width: 2px;

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

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

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

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

2280 -moz-background-clip: padding;

2281 background-clip: padding-box;

2282 }

2283

2284 .dropdown-menu.pull-right {

2285 right: 0;

2286 left: auto;

2287 }

2288

2289 .dropdown-menu .divider {

2290 *width: 100%;

2291 height: 1px;

2292 margin: 9px 1px;

2293 *margin: -5px 0 5px;

2294 overflow: hidden;

2295 background-color: #e5e5e5;

2296 border-bottom: 1px solid #ffffff;

2297 }

2298

2299 .dropdown-menu > li > a {

2300 display: block;

2301 padding: 3px 10px;

2302 clear: both;

2303 font-weight: normal;

2304 line-height: 20px;

2305 color: #333333;

2306 white-space: nowrap;

2307 }

2308

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

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

2311 .dropdown-submenu:hover > a,

2312 .dropdown-submenu:focus > a {

2313 color: #ffffff;

2314 text-decoration: none;

2315 background-color: $green;

2316 }

2317

2318 .dropdown-menu > .active > a,

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

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

2321 color: #ffffff;

2322 text-decoration: none;

2323 background-color: $green;

2324 outline: 0;

2325 }

2326

2327 .dropdown-menu > .disabled > a,

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

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

2330 color: #999999;

2331 }

2332

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

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

2335 text-decoration: none;

2336 cursor: default;

2337 background-color: transparent;

2338 background-image: none;

2339 }

2340

2341 .open {

2342 *z-index: 1000;

2343 }

2344

2345 .open > .dropdown-menu {

2346 display: block;

2347 }

2348

2349 .dropdown-backdrop {

2350 position: fixed;

2351 top: 0;

2352 right: 0;

2353 bottom: 0;

2354 left: 0;

2355 z-index: 990;

2356 }

2357

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

2359 .site-welcome, .site-fixthemap {

2360 .center {

2361 text-align: center;

2362 .sprite {

2363 float: none;

2364 margin: auto;

2365 }

2366 }

2367

2368 .sprite {

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

2370 background-size: 500px 250px;

2371 display: block;

2372 float: left;

2373 }

2374

2375 .icon-list {

2376 padding-bottom: 20px;

2377 div {

2378 margin-bottom: 10px;

2379 p {

2380 padding-top: 10px;

2381 }

2382 }

2383 }

2384 .sprite.small {

2385 width: 50px;

2386 height: 50px;

2387 }

2388

2389 .sprite.x {

2390 background-position: -50px 0;

2391 }

2392

2393 .sprite.term {

2394 margin-right: 10px;

2395 vertical-align: middle;

2396 }

2397

2398 .sprite.node {

2399 background-position: -100px 0;

2400 }

2401

2402 .sprite.way {

2403 background-position: -150px 0;

2404 }

2405

2406 .sprite.tag {

2407 background-position: -200px 0;

2408 }

2409

2410 .sprite.editor {

2411 background-position: -250px 0;

2412 }

2413

2414 .sprite.question {

2415 background-position: -300px 0;

2416 }

2417

2418 .start-mapping {

2419 margin: auto;

2420 cursor: pointer;

2421 border: none;

2422 padding: 20px 40px;

2423 font-size: 30px;

2424 text-decoration: none;

2425 }

2426

2427 .note-box {

2428 margin-top: 20px;

2429 background-color: $offwhite;

2430 }

2431

2432 .icon.note {

2433 background-color: #333;

2434 border-radius: 4px;

2435 }

2436 }

2437

2438 .site-about #content {

2439 //background-color: #000;

2440 background-color: #eee;

2441 background-position: 50% 50%;

2442 background-repeat: no-repeat;

2443 background-size: cover;

2444 background-attachment: fixed;

2445

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

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

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

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

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

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

2452

2453 .caption {

2454 max-width: 200px;

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

2456 position: fixed;

2457 text-align: right;

2458 right: 20px;

2459 bottom: 60px;

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

2461 color: #eee;

2462 opacity: 0.8;

2463 display: none;

2464 }

2465

2466 .caption a {

2467 color: white;

2468 white-space: nowrap;

2469 text-decoration: none;

2470 }

2471

2472 a.next {

2473 display: block;

2474 position: fixed;

2475 right: 10px;

2476 bottom: 10px;

2477 width: 40px;

2478 height: 40px;

2479 border-radius: 5px;

2480 text-indent: -9999px;

2481 overflow: hidden;

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

2483 background-color: #000;

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

2485 }

2486

2487 .content-inner {

2488 position: relative;

2489 color: #333;

2490 min-width: 320px;

2491 max-width: 640px;

2492

2493 .section {

2494 margin-bottom: 30px;

2495 }

2496

2497 .section:last-child {

2498 margin-bottom: 0;

2499 }

2500 }

2501

2502 .text {

2503 background: white;

2504 padding: 40px;

2505 }

2506

2507 .attr {

2508 position: relative;

2509 padding: 170px 40px 20px;

2510 background: #333;

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

2512 margin-bottom: 0;

2513 margin-top: -20px;

2514

2515 h1 {

2516 display: block;

2517 color: white;

2518 font-weight: 300;

2519 font-size: 34px;

2520 span {

2521 color: #76c551;

2522 }

2523 }

2524

2525 .user-image {

2526 position: absolute;

2527 top: 0px;

2528 right: 240px;

2529 left: 0px;

2530 height: 150px;

2531 background-position: 0 50%;

2532 background-repeat: no-repeat;

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

2534 background-size: cover;

2535 background-color: #76c551;

2536 }

2537

2538 .byosm {

2539 position: absolute;

2540 top: 0px;

2541 right: 0px;

2542 z-index: 1;

2543 width: 240px;

2544 height: 150px;

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

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

2547 white-space: nowrap;

2548 color: #fff;

2549 background: #76c551;

2550 }

2551

2552 .byosm span {

2553 display: inline-block;

2554 width: 20px;

2555 margin-left: -20px;

2556 }

2557 }

2558

2559 h2 {

2560 margin-bottom: 10px;

2561 }

2562

2563 .icon {

2564 width: 30px;

2565 height: 30px;

2566 margin-right: 10px;

2567 vertical-align: middle;

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

2569

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

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

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

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

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

2575 }

2576 }

2577

2578 @import 'browse';

2579

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

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

2582 display: none;

2583 }

2584 }

2585