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 font-weight: 500;

42 }

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

46 .clearfix:before,

47 .clearfix:after {

48 content: " ";

49 display: table;

50 }

52 .clearfix:after {

53 clear: both;

54 }

56 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

70 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

86 .fillL { background-color: white; }

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

90 * {

91 -webkit-box-sizing: border-box;

92 -moz-box-sizing: border-box;

93 box-sizing: border-box;

94 }

96 body {

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

98 font-size: $typeheight;

99 line-height: 1.6666;

100 color: #222;

101 background-color: #fff;

102 margin: 0px;

103 padding: 0px;

104 text-align: left;

105 height: 100%;

106 }

107

108 body.slim {

109 background-color: #f0f0f0;

110 }

111

112 h1, h2, h3 {

113 font-weight: bold;

114 font-weight: 500;

115 line-height: 1.2;

116 }

117

118 h4, h5 {

119 font-weight: bold;

120 font-weight: 500;

121 }

122

123 h1 {

124 font-size: 18px;

125 }

126

127 h2, h3 {

128 font-size: 16px;

129 }

130

131 p > img {

132 width: auto;

133 max-width: 100%;

134 }

135

136 small, aside {

137 font-size: 12px;

138 }

139

140 #container { position: relative; }

141

142 .column-1 {

143 width: 50%;

144 margin: 0 0 $lineheight/2 0;

145 }

146

147 .small_icon {

148 vertical-align: middle;

149 margin-right: $lineheight/4;

150 }

151

152 .red { color: $red; }

153

154 /* Rules for icons */

155

156 .icon {

157 display:inline-block;

158 vertical-align:top;

159 width:20px;

160 height:20px;

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

162 text-indent:-9999px;

163 overflow:hidden;

164 }

165

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

182

183 /* Rules for links */

184

185 a {

186 color: #24d;

187 text-decoration: none;

188 -webkit-appearance: none;

189 outline: 0;

190 &:hover {

191 text-decoration: underline;

192 }

193 }

194

195 /* Rules for horizontal lines */

196

197 hr {

198 border: none;

199 background-color: #ccc;

200 color: #ccc;

201 height: 1px;

202 }

203

204 /* General styles for tables */

205

206 table {

207 width: 100%;

208 margin-bottom: $lineheight;

209 th, td {

210 text-align: left;

211 padding: $lineheight/4;

212 line-height: $lineheight;

213 }

214 th {

215 font-weight: bold;

216 font-weight: 500;

217 vertical-align: top;

218 }

219 td {

220 vertical-align: middle;

221 }

222 }

223

224 /* Utility for de-emphasizing content */

225

226 .deemphasize {

227 color: #999;

228 a {

229 color: $blue;

230 }

231 }

232

233 /* Rules for the header */

234

235 #menu-icon {

236 display: none !important;

237 float: right;

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

239 background-size: 30px 30px;

240 display: block;

241 width: 30px;

242 height: 30px;

243 margin: 14px 10px 0 0;

244 opacity: 0.6;

245 }

246

247 header {

248 height: $headerHeight;

249 position: relative;

250 z-index: 1001;

251 font-size: 13px;

252

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

254 display: inline-block;

255 }

256

257 > * {

258 height: 100%;

259 padding: $lineheight/2;

260 }

261

262 h1, nav.primary {

263 float: left;

264 }

265

266 a, a:hover {

267 text-decoration: none;

268 }

269

270 img.logo {

271 width: 30px;

272 height: 30px;

273 margin-top: -4px;

274 vertical-align: middle;

275 }

276

277 h1 {

278 margin: 0;

279 padding-top: 15px;

280

281 a {

282 color: #000;

283 }

284 }

285 }

286

287 nav.primary {

288 > ul {

289 $border: 1px solid $green;

290

291 border: $border;

292 border-radius: $border-radius;

293

294 > li {

295 border-right: $border;

296 float: left;

297 &:last-child {

298 border-right: 0;

299 }

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

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

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

303 &.dropdown {

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

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

306 }

307 }

308 }

309

310 a.tab,

311 .dropdown-toggle {

312 display: inline-block;

313 font-weight: bold;

314 font-weight: 500;

315 color: $green;

316 padding: 5px 15px;

317 }

318

319 .dropdown-toggle {

320 padding: 5px 6px;

321 }

322

323 .caret {

324 border-top-color: $green;

325 margin-top: 10px;

326 }

327

328 .disabled a {

329 color: #ccc;

330 cursor: default;

331

332 .caret {

333 border-top-color: #ccc;

334 }

335 }

336

337 > ul li.current {

338 background-color: $green;

339

340 .tab {

341 color: #fff;

342 }

343

344 .caret {

345 border-top-color: #fff;

346 }

347 }

348 }

349

350 nav.secondary {

351 position: absolute;

352 right: 0;

353

354 > ul {

355 vertical-align: middle;

356 a, .dropdown-toggle {

357 display: inline-block;

358 text-decoration: none;

359 color: $darkgrey;

360 padding: 5px;

361

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

363 }

364 }

365

366 > ul li.current a {

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

368 }

369

370 .user-menu {

371 $border: 1px solid $grey;

372 font-weight: bold;

373 font-weight: 500;

374 border: $border;

375 border-radius: $border-radius;

376 margin-left: 10px;

377

378 > li {

379 border-right: $border;

380 float: left;

381 &:last-child {

382 border-right: 0;

383

384 > a {

385 border-radius: 0 $border-radius $border-radius 0;

386 }

387 }

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

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

390 }

391

392 a {

393 padding: 5px 15px;

394

395 }

396

397 &.logged-in > a {

398 padding: 0;

399 > .user-button {

400 padding: 5px 10px 5px 6px;

401 display: inline-block;

402 color: $darkgrey;

403 }

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

405 }

406 }

407

408 .caret {

409 border-top-color: $grey;

410 margin-top: 9px;

411 }

412

413 img.user_thumbnail_tiny {

414 border: 0;

415 vertical-align: top;

416 margin-top: 0px;

417 margin: 3px 0 0 3px;

418 border-radius: 2px;

419 }

420

421 #inboxanchor {

422 display: inline-block;

423 vertical-align: top;

424 height: 25px;

425 margin: 3px 0 3px 3px;

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

427 line-height: 20px;

428 border-radius: 2;

429 }

430

431 .dropdown-menu {

432 left: auto;

433 right: -1px;

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

435

436 .count-number {

437 float: right;

438 padding: 0 5px;

439 margin: 0;

440 }

441 }

442 }

443

444 #compact-secondary-nav {

445 display: none;

446 ul li a {

447 width: 100%;

448 color: #333;

449 &:hover { color: #fff; }

450 }

451 }

452

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

454 #compact-secondary-nav {

455 display: inline-block;

456 }

457 .compact-hide {

458 display: none;

459 }

460 }

461

462 /* Utility for styling notification numbers */

463

464 .count-number {

465 padding: 2px $lineheight/4;

466 border-radius: 2px;

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

468 margin: 0 2px;

469 font-size: 11px;

470 color: #333;

471 }

472

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

474

475 #noscript {

476 z-index: 20000000;

477 position: absolute;

478 top: 15px;

479 left: 15px;

480 }

481

482 /* Rules for bootstrap tooltips */

483

484 .tooltip {

485 position: absolute;

486 display: none;

487 color: #333;

488 text-align: left;

489 font-size: 12px;

490 max-width: 250px;

491 }

492

493 .tooltip.in {

494 opacity: 0.8;

495 z-index: 1030;

496 height: auto;

497 display: block;

498 }

499

500 .tooltip.top {

501 margin-top: -10px;

502 text-align: center;

503 }

504

505 .tooltip.right {

506 margin-left: 10px;

507 }

508

509 .tooltip.bottom {

510 margin-top: 10px;

511 text-align: center;

512 }

513

514 .tooltip.left {

515 margin-left: -10px;

516 text-align: right;

517 }

518

519 .tooltip-inner {

520 display: inline-block;

521 padding: 10px;

522 font-weight: normal;

523 background-color: white;

524 }

525

526 .tooltip-arrow {

527 position: absolute;

528 width: 0;

529 height: 0;

530 border-color: transparent;

531 border-style: solid;

532 }

533

534 .tooltip.top .tooltip-arrow {

535 bottom: -5px;

536 left: 50%;

537 margin-left: -5px;

538 border-top-color: white;

539 border-width: 5px 5px 0;

540 }

541

542 .tooltip.right .tooltip-arrow {

543 top: 50%;

544 left: -5px;

545 margin-top: -5px;

546 border-right-color: white;

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

548 }

549

550 .tooltip.left .tooltip-arrow {

551 top: 50%;

552 right: -5px;

553 margin-top: -5px;

554 border-left-color: white;

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

556 }

557

558 .tooltip.bottom .tooltip-arrow {

559 top: -5px;

560 left: 50%;

561 margin-left: -5px;

562 border-bottom-color: white;

563 border-width: 0 5px 5px;

564 }

565

566 /* Rules for Leaflet maps */

567

568 .leaflet-control .control-button {

569 display: block;

570 height: 40px;

571 width: 40px;

572 background-color: #333;

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

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

575 margin-bottom: 10px;

576 outline: none;

577

578 &:hover {

579 background-color: black;

580 }

581

582 &.active {

583 background-color: #9ed485;

584 }

585

586 &.disabled {

587 background-color: #333;

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

589 cursor: default;

590 }

591

592 .icon {

593 margin: 10px;

594 }

595 }

596

597 .leaflet-control .zoomin,

598 .control-layers .control-button {

599 margin-bottom: 0px;

600 border-radius: 4px 0 0 0;

601 }

602

603 .leaflet-control .zoomout,

604 .control-key .control-button {

605 margin-bottom: 0;

606 border-radius: 0;

607 }

608

609 .control-locate .control-button,

610 .control-share .control-button {

611 border-radius: 0 0 0 4px;

612 }

613

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

615

616 .map-layout {

617 #content {

618 overflow: hidden;

619 position: absolute;

620 top: $headerHeight;

621 bottom: 0;

622 width: 100%;

623 }

624

625 #sidebar, #map {

626 position: relative;

627 height: 100%;

628 overflow-x: hidden;

629 overflow-y: auto;

630 }

631

632 #sidebar {

633 float: left;

634 width: $sidebarWidth;

635 background: #fff;

636 font-size: 13px;

637

638 h2 {

639 padding: $lineheight $lineheight $lineheight/2;

640 }

641

642 h3, h4 {

643 margin-top: $lineheight;

644 margin-bottom: $lineheight/2;

645 }

646

647 .icon.close {

648 float: right;

649 cursor: pointer;

650 }

651 }

652

653 .overlay-sidebar #sidebar {

654 position: absolute;

655 z-index: 1000;

656 height: auto;

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

658 overflow: hidden;

659 }

660

661 .welcome {

662 p {

663 padding: $lineheight/2 $lineheight $lineheight;

664 font-size: 110%;

665 font-weight: normal;

666 font-weight: 300;

667 }

668

669 .button {

670 width: 50%;

671 float: left;

672 margin: 0;

673 border-radius: 0;

674 font-weight: normal;

675 padding: .6em;

676

677 &.learn-more {

678 border-right: 1px solid #fff;

679 }

680 }

681 }

682

683 #map {

684 height: 100%;

685 overflow: hidden;

686 }

687

688 #map-ui {

689 display: none;

690 position: relative;

691 float: right;

692 width: 250px;

693 height: 100%;

694 background: white;

695 overflow: auto;

696

697 .section {

698 border-bottom: 1px solid #DDD;

699 padding: 10px 20px;

700 }

701

702 a.close-button {

703 float: right;

704 padding:5px;

705 font-size:20px;

706 line-height:10px;

707 color:#222;

708 border:1px solid #ddd;

709 }

710 }

711 }

712

713 .layers-ui,

714 .share-ui {

715 li:last-child {

716 margin-bottom: 0;

717 }

718 }

719

720 .layers-ui {

721 .base-layers {

722 .leaflet-container {

723 width: 100%;

724 height: 50px;

725 cursor: pointer;

726 }

727

728 li {

729 overflow: hidden;

730 border-radius: 3px;

731 border: 2px solid #fff;

732 margin-bottom: 8px;

733 position: relative;

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

735

736 label {

737 position: absolute;

738 top: 0;

739 left: 0;

740 padding: 2px 6px;

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

742 cursor: pointer;

743 font-weight: bold;

744 font-weight: 500;

745 font-size: 16px;

746 text-stroke: 2px #fff;

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

748 z-index: 2; // For IE9

749 input[type="radio"] {

750 display: none;

751 }

752 }

753

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

755 &:hover {

756 border-color: $grey;

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

758 }

759 }

760 }

761

762 .overlay-layers {

763 p {

764 font-size: 13px;

765 margin-bottom: 8px;

766 }

767 li.disabled { color: #999; }

768 }

769 }

770

771 .share-ui {

772 .share-tabs {

773 margin-bottom: 10px;

774

775 a {

776 color: #fff;

777 text-decoration: none;

778 background-color: $lightblue;

779 padding: 5px 10px;

780 }

781

782 a:first-child {

783 border-right: 1px solid #fff;

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

785 }

786

787 a:last-child {

788 border-left: 1px solid #fff;

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

790 }

791

792 a.active {

793 background-color: $blue;

794 }

795 }

796

797 .share-tab {

798 display: none;

799 }

800

801 .share-link {

802 input[type=text],

803 textarea {

804 width: 100%;

805 font-family: monospace;

806 font-size: small;

807 line-height: 1.3;

808 }

809 }

810

811 .share-image {

812 label {

813 margin-right: 10px;

814 }

815 }

816

817 #embed_html {

818 resize: vertical;

819 }

820

821 #mapnik_scale {

822 width: 100px;

823 }

824 }

825

826 .leaflet-top {

827 top: $lineheight/2 !important;

828 .leaflet-control {

829 margin-right: 0px !important;

830 margin-top: 0px !important;

831 }

832 }

833

834 .leaflet-popup-scrolled {

835 padding-right: $lineheight;

836 border-bottom: 0px !important;

837 border-top: 0px !important;

838 }

839

840 .leaflet-popup-content-wrapper {

841 border-radius: 4px !important;

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

843 }

844

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

846

847 #attribution {

848 display: none;

849 }

850

851 .attribution_license,

852 .attribution_project {

853 text-align: left;

854 }

855

856 .attribution_notice {

857 text-align: center;

858 }

859

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

861

862 /* Rules for the sidebar */

863

864 .sidebar_heading {

865 position: relative;

866 padding: $lineheight/2 $lineheight;

867 // background: $offwhite;

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

869 > .close {

870 float: right;

871 margin-top: 2px;

872 cursor: pointer;

873 }

874 }

875

876 #browse_status {

877 p {

878 padding: $lineheight;

879 }

880 }

881

882 #sidebar {

883 #sidebar_loader,

884 .loader,

885 .load_more {

886 text-align: center;

887 margin: $lineheight auto;

888 width: $lineheight;

889 display: block;

890 }

891 }

892

893 /* Rules for the search box */

894

895 header .search_form {

896 display: none;

897 }

898

899 .search_form {

900 position: relative;

901 padding: $lineheight/2;

902 background-color: $lightgrey;

903

904 .query_wrapper {

905 position: relative;

906 overflow: hidden;

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

908 }

909

910 input[type=text] {

911 width: 100%;

912 height: 30px;

913 border-right: none;

914

915 transition: 300ms linear;

916 -webkit-transition: 300ms linear;

917 -moz-transition: 300ms linear;

918 }

919

920 input:focus {

921 outline: none;

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

923 }

924

925 input[type=submit] {

926 float: right;

927 width: auto;

928 min-width: 0;

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

930 }

931

932 .describe_location {

933 position: absolute;

934 top: 6px;

935 right: 6px;

936 font-size: 10px;

937 color: $blue;

938 }

939 }

940

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

942

943 #mapkey {

944 .mapkey-table-key img {

945 display: block;

946 margin-left: auto;

947 margin-right: auto;

948 }

949 td {

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

951 }

952 }

953

954 /* Rules for search sidebar */

955

956 .search_results_entry {

957 ul li {

958 border-bottom: $keyline;

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

960 }

961

962 .search_details {

963 display: block;

964 float: right;

965 text-align: right;

966 margin-top: 0.2em;

967 margin-left: 0.5em;

968 }

969 }

970

971 .search_results_error {

972 color: #f00;

973 }

974

975 /* Rules for entity history */

976

977 #sidebar_content {

978 .browse_details {

979 position: relative;

980 border-bottom: $keyline;

981 }

982 }

983

984 .browse_status {

985 display: none;

986 }

987

988 /* Rules for the history sidebar */

989

990 #sidebar .changesets {

991 li {

992 padding: $lineheight;

993 border-bottom: $keyline;

994 cursor: pointer;

995

996 &.selected { background: #FFFFE6; }

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

998 }

999

1000 h4 {

1001 margin-top: 0;

1002 a {

1003 color: #000;

1004 }

1005 }

1006 }

1007

1008 /* Rules for the browse sidebar */

1009

1010 #sidebar_content {

1011 .browse-section {

1012 padding: $lineheight/2 $lineheight;

1013 border-bottom: 1px solid #ccc;

1014

1015 h4:first-child {

1016 margin-top: 0;

1017 }

1018 }

1019

1020 .paginate {

1021 float: right;

1022 padding: 1px 6px;

1023 border: 1px solid #eee;

1024 border-radius: 3px;

1025 }

1026

1027 .paginate ul {

1028 padding-left: 20px;

1029 }

1030

1031 .browse-field {

1032 margin-bottom: 10px;

1033

1034 h4 {

1035 padding: 5px 0 5px 10px;

1036 font-size: 12px;

1037 border: 1px solid #CCC;

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

1039 background-color: #F6F6F6;

1040 }

1041

1042 p {

1043 padding: 7px 10px;

1044 font-size: 12px;

1045 background-color: #FFF;

1046 border: 1px solid #CCC;

1047 border-top: 0;

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

1049 }

1050 }

1051

1052 .browse-tag-list {

1053 background-color: #F6F6F6;

1054 border: 1px solid #ddd;

1055 border-radius: 3px;

1056 font-size: 12px;

1057

1058 li {

1059 border-bottom: 1px solid #ddd;

1060 }

1061

1062 li:last-child {

1063 border-bottom: 0;

1064 }

1065

1066 .browse-tag-k,

1067 .browse-tag-v {

1068 display: inline-block;

1069 width: 50%;

1070 float: left;

1071 padding: 6px 10px;

1072 }

1073

1074 .browse-tag-k {

1075 font-weight: bold;

1076 font-weight: 500;

1077 background-color: #F6F6F6;

1078 }

1079

1080 .browse-tag-v {

1081 border-left: 1px solid #ddd;

1082 background-color: #fff;

1083 }

1084 }

1085

1086 .warning {

1087 margin: $lineheight/2 0;

1088 padding: $lineheight/2;

1089 font-size: 90%;

1090 }

1091

1092 .note-comments li {

1093 margin: $lineheight/2 0;

1094

1095 p {

1096 margin-left: 10px;

1097 }

1098 }

1099

1100 .note-description p {

1101 margin-left: 10px;

1102 }

1103 }

1104

1105 /* Rules for export sidebar */

1106

1107 .export_form {

1108 padding: $lineheight;

1109

1110 .export_area_inputs,

1111 .export_button {

1112 text-align: center;

1113 }

1114

1115 .export_area_inputs {

1116 margin-bottom: $lineheight/2;

1117 input[type="text"] {

1118 width: 80px;

1119 margin-bottom: 5px;

1120 }

1121 }

1122

1123 .export_bound {

1124 margin: $lineheight/4;

1125 }

1126

1127 .export_button {

1128 margin-top: $lineheight;

1129 }

1130

1131 dl {

1132 padding-left: $lineheight/2;

1133 dd {

1134 margin-left: 0;

1135 margin-bottom: 10px;

1136 }

1137 }

1138 }

1139

1140 /* Rules for edit pages */

1141

1142 .site-edit {

1143 #content {

1144 position: absolute;

1145 top: $headerHeight;

1146 bottom: 0;

1147 width: 100%;

1148 }

1149

1150 #map {

1151 height: 100%;

1152 }

1153 }

1154

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

1156

1157 .content-heading {

1158 background: $lightgrey;

1159

1160 h1 { font-size: 22px; }

1161 }

1162

1163 .content-body {

1164 h1, h2, h3, p {

1165 margin-bottom: $lineheight;

1166 }

1167

1168 h1, h2, h3 {

1169 margin-top: $lineheight/2;

1170 }

1171 }

1172

1173 .content-inner {

1174 position: relative;

1175 max-width: 900px;

1176 margin: auto;

1177 padding: $lineheight;

1178 }

1179

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

1181

1182 .user-new,

1183 .user-create,

1184 .user-terms {

1185 .content-body .content-inner {

1186 padding: 0;

1187 }

1188 }

1189

1190 .user-new,

1191 .user-create,

1192 .user-terms,

1193 .user-confirm {

1194 .content-heading .content-inner {

1195 height: 200px;

1196 }

1197 }

1198

1199 .header-illustration {

1200 background-position: 0 0;

1201 background-repeat: no-repeat;

1202 position: absolute;

1203 height: 200px;

1204 width: 100%;

1205 left: 0;

1206 bottom: 0;

1207

1208 &.new-user-main {

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

1210 }

1211

1212 &.confirm-main {

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

1214 }

1215

1216 &.new-user-terms {

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

1218 }

1219

1220 &.new-user-arm {

1221 height: 110px;

1222 width: 130px;

1223 left: 260px;

1224 top: 160px;

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

1226 z-index: 100;

1227 }

1228 }

1229

1230 #content.maximised {

1231 top: 0;

1232 left: 0;

1233 right: 0;

1234 bottom: 0;

1235 border: 0;

1236 z-index: 1000;

1237 }

1238

1239 #slim_container {

1240 width: 100%;

1241 }

1242

1243 #slim_container_content {

1244 max-width: 50em;

1245 background-color: #FFFFFF;

1246 margin: $lineheight/2 auto;

1247 padding: 3px;

1248 border-radius: 25px;

1249 -moz-border-radius: 25px;

1250 border: 1px solid #e6e6e6;

1251 }

1252

1253 #slim_content {

1254 margin: $lineheight/2;

1255 margin-top: 95px;

1256 max-width: 50em;

1257

1258 .content-heading {

1259 margin-bottom: 15px;

1260 }

1261 }

1262

1263 #slim_header {

1264 margin: 30px $lineheight/2;

1265 position: absolute;

1266 top: 0px;

1267 margin-right: $lineheight/4;

1268 img {

1269 vertical-align: middle;

1270 margin-bottom: $lineheight/4;

1271 margin-right: $lineheight/4;

1272 }

1273 }

1274

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

1276

1277 .content_map {

1278 position: relative;

1279 width: 45%;

1280 height: 400px;

1281 border: 1px solid #ccc;

1282 margin-bottom: $lineheight;

1283 float: right;

1284 }

1285

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

1287

1288 #trace_list {

1289 font-size: $lineheight/2;

1290 border-width: 0px;

1291 text-align: right;

1292

1293 .trace_summary {

1294 font-size: 12px;

1295 color: gray;

1296 }

1297

1298 .trace_pending {

1299 color: red;

1300 }

1301

1302 .trace_public {

1303 color: green;

1304 }

1305

1306 .trace_identifiable {

1307 color: green;

1308 }

1309

1310 .trace_trackable {

1311 color: red;

1312 }

1313

1314 .trace_private {

1315 color: red;

1316 }

1317 }

1318

1319 /* Rules for the user profile page */

1320

1321 #userinformation {

1322

1323 min-height: 100px;

1324 .userinformation-inner {

1325 float: left;

1326 }

1327 h2 {

1328 margin-top: 0;

1329 }

1330 .user-description {

1331 width: 100%;

1332 clear: both;

1333 }

1334 .deemphasize {

1335 margin: 0;

1336 }

1337 }

1338

1339 .admin-user-info small {

1340 margin-bottom: $lineheight/2;

1341 display: inline;

1342 margin-right: $lineheight;

1343 }

1344

1345 .activity-block {

1346 clear: left;

1347 border-bottom: 1px solid #ccc;

1348 padding-bottom: $lineheight;

1349 float: left;

1350 h3 {

1351 margin-bottom: $lineheight/2;

1352 }

1353 }

1354

1355 .contact-activity {

1356 margin-top: $lineheight;

1357 width: 100%;

1358 }

1359

1360 .activity-details p {

1361 margin-left: 70px;

1362 margin-bottom: 0;

1363 }

1364

1365 #friends-container .contact-activity ul {

1366 margin-left: 70px;

1367 }

1368

1369 .user-view {

1370 p#no_home_location {

1371 margin: $lineheight;

1372 }

1373 .user_thumbnail {

1374 margin-top: $lineheight/4;

1375 float: left;

1376 }

1377 }

1378

1379 /* Rules for the user map */

1380

1381 .content_map .leaflet-popup-content {

1382 margin: $lineheight/2;

1383 min-height: 50px;

1384 }

1385

1386 /* Rules for user popups on maps */

1387

1388 .user_popup {

1389 min-width: 200px;

1390 p {

1391 padding: 0 0 5px 0;

1392 margin-top: 0 0 0 60px;

1393 font-size: 12px;

1394 }

1395 img.user_thumbnail {

1396 float: left;

1397 margin: 0 $lineheight/2 0 0;

1398 }

1399 }

1400

1401 /* Rules for the user list */

1402

1403 #user_list {

1404 font-size: $lineheight/2;

1405 width: 100%;

1406

1407 tr {

1408 vertical-align: middle;

1409 }

1410

1411 p {

1412 margin-top: 0px;

1413 margin-bottom: 0px;

1414 }

1415 }

1416

1417 #user_list_actions {

1418 float: right;

1419 margin-top: $lineheight/2;

1420 }

1421

1422 /* Rules for the diary list page */

1423

1424 .diary_post {

1425 position: relative;

1426 margin-top: $lineheight/2;

1427 padding-top: $lineheight;

1428 border-top: 1px solid #ccc;

1429

1430 .post_heading {

1431 margin-bottom: $lineheight;

1432

1433 h2 {

1434 margin-top: 0;

1435 margin-bottom: $lineheight/2;

1436 font-size: 24px;

1437 }

1438 }

1439

1440 img.user_thumbnail {

1441 float: left;

1442 }

1443

1444 small.deemphasize {

1445 float: left;

1446 display: block;

1447 }

1448

1449 ul.secondary-actions {

1450 display: inline-block;

1451 }

1452 }

1453

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

1455 display: inline;

1456 }

1457

1458 /* Rules for the diary entry page */

1459

1460 .diary_entry {

1461 #map {

1462 position: relative;

1463 width: 90%;

1464 height: 400px;

1465 border: 1px solid #ccc;

1466 display: none;

1467 margin-bottom: $lineheight;

1468 }

1469 #newcomment {

1470 border-top: 1px solid #ccc;

1471 padding-top: $lineheight;

1472 margin-top: $lineheight/2;

1473 }

1474 .comments {

1475 max-width: 740px;

1476 }

1477 .diary-comment {

1478 margin-top: $lineheight/2;

1479 border-top: 1px dashed #ccc;

1480 padding-top: $lineheight/2;

1481 &:first-child {

1482 margin-top: $lineheight;

1483 padding-top: $lineheight;

1484 border-top: 1px solid #ccc;

1485 }

1486 p {

1487 margin-bottom: $lineheight/2;

1488 }

1489 .comment-heading {

1490 margin-bottom: 0;

1491 margin-top: 0;

1492 }

1493 }

1494 }

1495

1496 .diary_entry-view img.user_thumbnail {

1497 float: left;

1498 }

1499

1500 /* Rules for the log in page */

1501

1502 #login_openid_buttons {

1503 margin-bottom: 0;

1504 }

1505

1506 #login_openid_buttons li {

1507 float: left;

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

1509 }

1510

1511 /* Rules for the account confirmation page */

1512

1513 .user-terms {

1514 .legale {

1515 border: 1px solid #ccc;

1516 padding: $lineheight;

1517 margin-bottom: $lineheight;

1518 overflow: auto;

1519 height: 20em;

1520 }

1521

1522 #decline {

1523 background: $lightblue;

1524 &:hover {

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

1526 }

1527 }

1528 }

1529

1530 /* Rules for the account settings page */

1531

1532 #accountForm .user_map {

1533 position: relative;

1534 width: 500px;

1535 height: 400px;

1536 border: 1px solid #ccc;

1537 }

1538

1539 #accountForm .user_image {

1540 margin-bottom: 0;

1541 }

1542

1543 #accountForm #user_image {

1544 margin-left: 20px;

1545 }

1546

1547 #accountForm ul.accountImage-options {

1548 margin-left: 120px;

1549 }

1550

1551 .nohome .location {

1552 display: none;

1553 }

1554

1555 #homerow .message {

1556 display: none;

1557 }

1558

1559 .nohome .message {

1560 display: inline !important;

1561 }

1562

1563 .content_map.settings_map {

1564 width: 50%;

1565 float: none;

1566 }

1567

1568 /* Rules for the oauth settings page */

1569

1570 .oauth_clients .buttons .oauth-edit {

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

1572 }

1573

1574 .oauth_clients .buttons .oauth-delete {

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

1576 }

1577

1578 /* Rules for messages pages */

1579

1580 .messages {

1581 width: 100%;

1582 border: 1px solid #ddd;

1583

1584 input[type="submit"] {

1585 margin: auto;

1586 }

1587 tbody tr {

1588 border-top: 1px solid #ccc;

1589 }

1590

1591 .inbox-row {

1592 background: #f8f8ff;

1593 }

1594

1595 .inbox-row-unread {

1596 background:#CBEEA7;

1597 }

1598

1599 .right {

1600 float: right;

1601 }

1602

1603 tr td,

1604 tr th {

1605 padding: $lineheight/4;

1606 }

1607 p:last-child,

1608 h2:last-child,

1609 h3:last-child,

1610 ol:last-child,

1611 ul:last-child {

1612 margin-bottom:0;

1613 }

1614 tr td {

1615 height: 30px;

1616 border-right: 1px solid $lightgrey;

1617 }

1618 }

1619

1620 .inbox-row .inbox-mark-read {

1621 display: none;

1622 }

1623

1624 .info-line {

1625 margin-bottom: $lineheight;

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

1627 border-bottom: 1px solid #ccc;

1628

1629 form, form div {

1630 display: inline;

1631 }

1632 }

1633

1634 .info-line .user_thumbnail_tiny {

1635 vertical-align: middle;

1636 }

1637

1638 .inbox-mark-unread,

1639 .inbox-mark-read,

1640 .inbox-delete {

1641 width: 1%;

1642 }

1643

1644 .inbox-row-unread .inbox-mark-unread {

1645 display: none;

1646 }

1647

1648 .message-read .message-buttons {

1649 margin-top: $lineheight;

1650 padding-top: $lineheight;

1651 border-top: 1px solid $lightgrey;

1652 }

1653

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

1655 border-radius: 0;

1656 }

1657

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

1659

1660 .error {

1661 padding: $lineheight;

1662 background-color: #ff7070;

1663 }

1664

1665 .warning {

1666 padding: $lineheight;

1667 background-color: #ffe0cc;

1668 }

1669

1670 .notice {

1671 padding: $lineheight;

1672 background-color: #CBEEA7;

1673 }

1674

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

1676

1677 .field_with_errors {

1678 padding: 2px;

1679 background-color: #ff7070;

1680 display: inline-block;

1681 }

1682

1683 .formError {

1684 display: inline-block;

1685 padding: 5px 10px;

1686 margin-top: 5px;

1687 border-radius: 4px;

1688 font-size: 12px;

1689 color: #fff;

1690 background-color: #ff7070;

1691 }

1692

1693 /* Rules for rails validation error boxes */

1694

1695 #errorExplanation {

1696 width: 400px;

1697 border: 2px solid #ff7070;

1698 padding: 0 $lineheight/2;

1699 margin-bottom: $lineheight;

1700 background-color: #f0f0f0;

1701

1702 h2 {

1703 margin: 0 -10px 10px -10px;

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

1705 font-weight: bold;

1706 font-weight: 500;

1707 font-size: 12px;

1708 background-color: #c00;

1709 color: #fff;

1710 text-align: left;

1711 }

1712

1713 p {

1714 color: #333;

1715 margin-bottom: 0px;

1716 padding: $lineheight/4;

1717 }

1718

1719 ul {

1720 padding-left: $lineheight;

1721

1722 li {

1723 font-size: 12px;

1724 list-style: disc;

1725 }

1726 }

1727 }

1728

1729 /* Rules for forms */

1730

1731 .standard-form {

1732 fieldset {

1733 margin-bottom: $lineheight;

1734 }

1735 label.standard-label {

1736 display: block;

1737 margin-bottom: $lineheight/4;

1738 font-size: $typeheight;

1739 font-weight: bold;

1740 font-weight: 500;

1741 line-height: 1.5;

1742 }

1743 label.standard-label.secondary {

1744 display: inline-block;

1745 font-weight: normal;

1746 }

1747 .form-help {

1748 font-weight: normal;

1749 }

1750 .form-column {

1751 float: left;

1752 margin-right: 20px;

1753 }

1754 .form-divider {

1755 margin-top: $lineheight;

1756 padding-top: $lineheight;

1757 border-top: 1px solid $lightgrey;

1758 }

1759 .horizontal-list .form-row {

1760 float: left;

1761 padding-right: 10px;

1762 }

1763 .form-row {

1764 margin-bottom: $lineheight/2;

1765 }

1766 .form-list {

1767 margin-bottom: 0;

1768 }

1769 .form-list li {

1770 margin-bottom: 5px;

1771 }

1772 input[type="checkbox"],

1773 input[type="radio"] {

1774 float: left;

1775 margin-top: 5px;

1776 }

1777 }

1778

1779 #remember_me_openid {

1780 display: block;

1781 }

1782

1783 input[type="checkbox"],

1784 input[type="radio"] {

1785 margin-right: 5px;

1786 }

1787

1788 input[type="text"],

1789 input[type="email"],

1790 input[type="url"],

1791 input[type="password"],

1792 textarea {

1793 border: 1px solid #ccc;

1794 padding: 2px 5px;

1795 margin: 0;

1796 width: 200px;

1797 }

1798

1799 textarea {

1800 padding: 5px;

1801 width: 100%;

1802 }

1803

1804 /* Rules for user images */

1805

1806 img.user_image {

1807 max-width: 100px;

1808 max-height: 100px;

1809 border: 1px solid #ccc;

1810 margin-bottom: $lineheight;

1811 float: left;

1812 margin-right: $lineheight;

1813 }

1814

1815 img.user_thumbnail {

1816 max-width: 50px;

1817 max-height: 50px;

1818 border: 1px solid #ccc;

1819 margin-right: $lineheight;

1820 }

1821

1822 img.user_thumbnail_tiny {

1823 max-width: 25px;

1824 max-height: 25px;

1825 border: 1px solid #ccc;

1826 }

1827

1828 /* Rules for geo microformats */

1829

1830 abbr.geo {

1831 border-bottom: none;

1832 }

1833

1834 /* Rules for RSS buttons */

1835

1836 .rsssmall {

1837 position: relative;

1838 top: 3px;

1839 }

1840

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

1842

1843 ul.secondary-actions {

1844 font-style: normal;

1845 margin-bottom: 0;

1846 margin-left: 0;

1847 &.pager {

1848 display: inline-block;

1849 margin-right: 60px;

1850 }

1851 > li {

1852 display: block;

1853 float: left;

1854 list-style: none;

1855 border-left: 1px solid #ccc;

1856 padding-left: $lineheight/2;

1857 margin-right: $lineheight/2;

1858 &:first-child {

1859 border-left: 0;

1860 padding-left: 0;

1861 }

1862 &:last-child {

1863 margin-right: 0px;

1864 }

1865 }

1866 }

1867

1868 div.secondary-actions {

1869 padding: 10px;

1870 text-align: center;

1871 }

1872

1873 /* Utility for managing inner content areas */

1874

1875 .inner22 { padding: $lineheight;}

1876

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

1878

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

1880

1881 .inner20 { padding: $lineheight 0;}

1882

1883 .inner02 { padding: 0 $lineheight;}

1884

1885 /* Utility for general button styles */

1886

1887 input[type="button"],

1888 input[type="submit"],

1889 input[type="reset"],

1890 a.button {

1891 cursor: pointer;

1892 border: 0;

1893 display: inline-block;

1894 line-height: 20px;

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

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

1897 min-width: 120px;

1898 margin: 0 0 $lineheight/2 0;

1899 color: white;

1900 background: $blue;

1901 text-align: center;

1902 border-radius: 2px;

1903 -moz-border-radius: 2px;

1904 &:hover {

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

1906 text-decoration: none;

1907 }

1908 &.deemphasize {

1909 background: $lightblue;

1910 &:hover {

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

1912 }

1913 }

1914 &:disabled {

1915 background: $lightgrey;

1916 &:hover {

1917 background: $lightgrey;

1918 }

1919 }

1920 &:last-child {

1921 margin-bottom: 0;

1922 }

1923 }

1924

1925 .buttons {

1926 min-width: 200px;

1927 input[type="submit"],

1928 input[type="button"],

1929 input[type="reset"],

1930 .button {

1931 box-sizing: border-box;

1932 float: left;

1933 border-radius: 0;

1934 margin:0;

1935 min-width: 75px;

1936 max-width: 180px;

1937 border-right:1px solid white;

1938 text-overflow: ellipsis;

1939 white-space: nowrap;

1940 overflow: hidden;

1941 }

1942 input:first-child,

1943 .button:first-child {

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

1945 }

1946 input:last-child,

1947 .button:last-child {

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

1949 border-right-width: 0;

1950 }

1951 input:only-child,

1952 .button:only-child,

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

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

1955 border-radius:2px;

1956 border-right-width: 0;

1957 }

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

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

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

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

1962 border-right-width: 0;

1963 }

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

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

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

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

1968 border-right-width: 1px;

1969 }

1970 }

1971

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

1973

1974 .table0,

1975 .item0 {

1976 background: $offwhite;

1977 }

1978

1979 .table1,

1980 .item1 {

1981 background: #fff;

1982 }

1983

1984 /* Rules for OpenID logo */

1985

1986 .openid_logo {

1987 vertical-align: text-bottom;

1988 border: 0;

1989 }

1990

1991 /* Rules for rich text */

1992

1993 .richtext,

1994 .prose {

1995 h1, h2 {

1996 padding-bottom: $lineheight/2;

1997 border-bottom: 1px dashed #cccccc;

1998 margin-bottom: $lineheight/2;

1999 }

2000

2001 h1 {

2002 font-size: 24px;

2003 }

2004

2005 h2 {

2006 font-size: 18px;

2007 }

2008

2009 h3 {

2010 font-size: $typeheight;

2011 }

2012

2013 code {

2014 font-size: 13px;

2015 background: #e8e8e8;

2016 padding: 2px 3px;

2017 }

2018

2019 pre {

2020 font-size: 13px;

2021 background: #e8e8e8;

2022 padding: 2px 3px;

2023

2024 code {

2025 padding: 0;

2026 }

2027 }

2028

2029 img {

2030 padding: $lineheight;

2031 background-color: $offwhite;

2032 display: block;

2033 max-width: 100%;

2034 margin: auto;

2035 }

2036

2037 blockquote {

2038 border-left: $lineheight solid $offwhite;

2039 padding-left: $lineheight;

2040 margin: 0;

2041 color: #7E7E7E;

2042 }

2043

2044 ul, ol {

2045 padding-left: $lineheight;

2046 margin-bottom: $lineheight;

2047 margin-left: $lineheight;

2048 }

2049

2050 ul li {

2051 list-style: disc;

2052 }

2053

2054 ol li {

2055 list-style: decimal;

2056 }

2057 }

2058

2059 .diary_post .richtext {

2060 margin-top: $lineheight;

2061 }

2062

2063 .comments .richtext {

2064 margin-left: 70px;

2065 margin-top: 0;

2066 }

2067

2068 /* Rules for rich text editors */

2069

2070 .richtext_container {

2071 margin-bottom: $lineheight;

2072

2073 .richtext_content {

2074 width: 50%;

2075 display: inline-block;

2076 vertical-align: top;

2077

2078 .richtext_preview {

2079 display: inline-block;

2080 padding: $lineheight;

2081 background-color: $offwhite;

2082 overflow-x: auto;

2083

2084 &.loading {

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

2086 background-repeat: no-repeat;

2087 background-position: center;

2088 }

2089

2090 > :first-child {

2091 margin-top: 0px;

2092 }

2093 }

2094 }

2095

2096 .richtext_help {

2097 display: inline-block;

2098 vertical-align: top;

2099 margin-left: 15px;

2100 background-color: #f8f8ff;

2101 padding: $lineheight/2;

2102 width: 220px;

2103

2104 ul {

2105 margin-bottom: 0;

2106 }

2107

2108 h4.heading, li {

2109 border-bottom: 1px solid #ccc;

2110 margin-bottom: $lineheight/4;

2111 padding-bottom: $lineheight/4;

2112 }

2113

2114 li h4, li span, li p {

2115 display: inline-block;

2116 vertical-align: top;

2117 font-size: 11px;

2118 }

2119

2120 li h4 {

2121 width: 40%;

2122 margin: 0;

2123 }

2124

2125 li span, li p {

2126 width: 50%;

2127 margin-left: $lineheight/2;

2128 margin-bottom: $lineheight/4;

2129 white-space: nowrap;

2130 }

2131 }

2132 }

2133

2134 /* Rules for the user notes list */

2135

2136 .note_list {

2137 tr.creator {

2138 background-color: #eeeeee;

2139 }

2140

2141 td {

2142 padding: 3px;

2143 }

2144

2145 p {

2146 margin-bottom: 0px;

2147 }

2148 }

2149

2150 /* Rules for the iD editor */

2151

2152 .id-embed {

2153 width: 100%;

2154 height: 100%;

2155 }

2156

2157 /* Rules for dropdown menus */

2158

2159 .dropdown {

2160 position: relative;

2161 }

2162

2163 .dropdown-toggle {

2164 *margin-bottom: -3px;

2165 }

2166

2167 .dropdown-toggle:active,

2168 .open .dropdown-toggle {

2169 outline: 0;

2170 }

2171

2172 .caret {

2173 display: inline-block;

2174 width: 0;

2175 height: 0;

2176 vertical-align: top;

2177 border-top: 4px solid #000000;

2178 border-right: 4px solid transparent;

2179 border-left: 4px solid transparent;

2180 content: "";

2181 }

2182

2183 .dropdown .caret {

2184 margin-top: 8px;

2185 margin-left: 2px;

2186 }

2187

2188 .dropdown-menu {

2189 position: absolute;

2190 top: 100%;

2191 left: -1px;

2192 z-index: 1000;

2193 display: none;

2194 float: left;

2195 min-width: 160px;

2196 padding: 5px 0;

2197 margin: 0;

2198 list-style: none;

2199 background-color: #ffffff;

2200 border: 1px solid #ccc;

2201 border-radius: 0 3px 3px;

2202 *border-right-width: 2px;

2203 *border-bottom-width: 2px;

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

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

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

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

2208 -moz-background-clip: padding;

2209 background-clip: padding-box;

2210 }

2211

2212 .dropdown-menu.pull-right {

2213 right: 0;

2214 left: auto;

2215 }

2216

2217 .dropdown-menu .divider {

2218 *width: 100%;

2219 height: 1px;

2220 margin: 9px 1px;

2221 *margin: -5px 0 5px;

2222 overflow: hidden;

2223 background-color: #e5e5e5;

2224 border-bottom: 1px solid #ffffff;

2225 }

2226

2227 .dropdown-menu > li > a {

2228 display: block;

2229 padding: 3px 10px;

2230 clear: both;

2231 font-weight: normal;

2232 line-height: 20px;

2233 color: #333333;

2234 white-space: nowrap;

2235 }

2236

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

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

2239 .dropdown-submenu:hover > a,

2240 .dropdown-submenu:focus > a {

2241 color: #ffffff;

2242 text-decoration: none;

2243 background-color: $green;

2244 }

2245

2246 .dropdown-menu > .active > a,

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

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

2249 color: #ffffff;

2250 text-decoration: none;

2251 background-color: $green;

2252 outline: 0;

2253 }

2254

2255 .dropdown-menu > .disabled > a,

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

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

2258 color: #999999;

2259 }

2260

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

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

2263 text-decoration: none;

2264 cursor: default;

2265 background-color: transparent;

2266 background-image: none;

2267 }

2268

2269 .open {

2270 *z-index: 1000;

2271 }

2272

2273 .open > .dropdown-menu {

2274 display: block;

2275 }

2276

2277 .dropdown-backdrop {

2278 position: fixed;

2279 top: 0;

2280 right: 0;

2281 bottom: 0;

2282 left: 0;

2283 z-index: 990;

2284 }

2285

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

2287 .site-welcome {

2288 .center {

2289 text-align: center;

2290 .sprite {

2291 float: none;

2292 margin: auto;

2293 }

2294 }

2295

2296 .sprite {

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

2298 background-size: 500px 250px;

2299 display: block;

2300 float: left;

2301 }

2302

2303 .icon-list {

2304 padding-bottom: 20px;

2305 div {

2306 margin-bottom: 10px;

2307 p {

2308 padding-top: 10px;

2309 }

2310 }

2311 }

2312 .sprite.small {

2313 width: 50px;

2314 height: 50px;

2315 }

2316

2317 .sprite.x {

2318 background-position: -50px 0;

2319 }

2320

2321 .sprite.term {

2322 margin-right: 10px;

2323 vertical-align: middle;

2324 }

2325

2326 .sprite.node {

2327 background-position: -100px 0;

2328 }

2329

2330 .sprite.way {

2331 background-position: -150px 0;

2332 }

2333

2334 .sprite.tag {

2335 background-position: -200px 0;

2336 }

2337

2338 .sprite.editor {

2339 background-position: -250px 0;

2340 }

2341

2342 .sprite.question {

2343 background-position: -300px 0;

2344 }

2345

2346 .start-mapping {

2347 margin: auto;

2348 cursor: pointer;

2349 border: none;

2350 padding: 20px 40px;

2351 font-size: 30px;

2352 text-decoration: none;

2353 }

2354

2355 .note-box {

2356 margin-top: 20px;

2357 background-color: $offwhite;

2358 }

2359

2360 .icon.note {

2361 background-color: #333;

2362 border-radius: 4px;

2363 }

2364 }

2365

2366 .site-about #content {

2367 //background-color: #000;

2368 background-color: #eee;

2369 background-position: 50% 50%;

2370 background-repeat: no-repeat;

2371 background-size: cover;

2372 background-attachment: fixed;

2373

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

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

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

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

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

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

2380

2381 .caption {

2382 max-width: 200px;

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

2384 position: fixed;

2385 text-align: right;

2386 right: 20px;

2387 bottom: 60px;

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

2389 color: #eee;

2390 opacity: 0.8;

2391 display: none;

2392 }

2393

2394 .caption a {

2395 color: white;

2396 white-space: nowrap;

2397 text-decoration: none;

2398 }

2399

2400 a.next {

2401 display: block;

2402 position: fixed;

2403 right: 10px;

2404 bottom: 10px;

2405 width: 40px;

2406 height: 40px;

2407 border-radius: 5px;

2408 text-indent: -9999px;

2409 overflow: hidden;

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

2411 background-color: #000;

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

2413 }

2414

2415 .content-inner {

2416 position: relative;

2417 color: #333;

2418 min-width: 320px;

2419 max-width: 640px;

2420

2421 .section {

2422 margin-bottom: 30px;

2423 }

2424

2425 .section:last-child {

2426 margin-bottom: 0;

2427 }

2428 }

2429

2430 .text {

2431 background: white;

2432 padding: 40px;

2433 }

2434

2435 .attr {

2436 position: relative;

2437 padding: 170px 40px 20px;

2438 background: #333;

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

2440 margin-bottom: 0;

2441 margin-top: -20px;

2442

2443 h1 {

2444 display: block;

2445 color: white;

2446 font-weight: normal;

2447 font-weight: 300;

2448 font-size: 34px;

2449 span {

2450 color: #76c551;

2451 }

2452 }

2453

2454 .user-image {

2455 position: absolute;

2456 top: 0px;

2457 right: 240px;

2458 left: 0px;

2459 height: 150px;

2460 background-position: 0 50%;

2461 background-repeat: no-repeat;

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

2463 background-size: cover;

2464 background-color: #76c551;

2465 }

2466

2467 .byosm {

2468 position: absolute;

2469 top: 0px;

2470 right: 0px;

2471 z-index: 1;

2472 width: 240px;

2473 height: 150px;

2474 padding: 20px 20px 20px 40px;

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

2476 white-space: nowrap;

2477 color: #fff;

2478 background: #76c551;

2479 }

2480

2481 .byosm span {

2482 display: inline-block;

2483 width: 20px;

2484 margin-left: -20px;

2485 }

2486 }

2487

2488 h2 {

2489 margin-bottom: 10px;

2490 }

2491

2492 .icon {

2493 width: 30px;

2494 height: 30px;

2495 margin-right: 10px;

2496 vertical-align: middle;

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

2498

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

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

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

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

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

2504 }

2505 }

2506

2507 @import 'browse';

2508

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

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

2511 display: none;

2512 }

2513 }

2514