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 .tooltip {

712 opacity: 1;

713 border: 1px solid #ccc;

714 .tooltip-arrow {

715 border-top-color: #ccc;

716 }

717 }

718 }

719 }

720

721 .layers-ui,

722 .share-ui {

723 li:last-child {

724 margin-bottom: 0;

725 }

726 }

727

728 .layers-ui {

729 .base-layers {

730 .leaflet-container {

731 width: 100%;

732 height: 50px;

733 cursor: pointer;

734 }

735

736 li {

737 overflow: hidden;

738 border-radius: 3px;

739 border: 2px solid #fff;

740 margin-bottom: 8px;

741 position: relative;

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

743

744 label {

745 position: absolute;

746 top: 0;

747 left: 0;

748 padding: 2px 6px;

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

750 cursor: pointer;

751 font-weight: bold;

752 font-weight: 500;

753 font-size: 16px;

754 text-stroke: 2px #fff;

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

756 z-index: 2; // For IE9

757 input[type="radio"] {

758 display: none;

759 }

760 }

761

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

763 &:hover {

764 border-color: $grey;

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

766 }

767 }

768 }

769

770 .overlay-layers {

771 p {

772 font-size: 13px;

773 margin-bottom: 8px;

774 }

775 li.disabled { color: #999; }

776 }

777 }

778

779 .share-ui {

780 .share-tabs {

781 margin-bottom: 10px;

782

783 a {

784 color: #fff;

785 text-decoration: none;

786 background-color: $lightblue;

787 padding: 5px 10px;

788 }

789

790 a:first-child {

791 border-right: 1px solid #fff;

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

793 }

794

795 a:last-child {

796 border-left: 1px solid #fff;

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

798 }

799

800 a.active {

801 background-color: $blue;

802 }

803 }

804

805 .share-tab {

806 display: none;

807 }

808

809 .share-link {

810 input[type=text],

811 textarea {

812 width: 100%;

813 font-family: monospace;

814 font-size: small;

815 line-height: 1.3;

816 }

817 }

818

819 .share-image {

820 label {

821 margin-right: 10px;

822 }

823 }

824

825 #embed_html {

826 resize: vertical;

827 }

828

829 #mapnik_scale {

830 width: 100px;

831 }

832 }

833

834 .leaflet-top {

835 top: $lineheight/2 !important;

836 .leaflet-control {

837 margin-right: 0px !important;

838 margin-top: 0px !important;

839 }

840 }

841

842 .leaflet-popup-scrolled {

843 padding-right: $lineheight;

844 border-bottom: 0px !important;

845 border-top: 0px !important;

846 }

847

848 .leaflet-popup-content-wrapper {

849 border-radius: 4px !important;

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

851 }

852

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

854

855 #attribution {

856 display: none;

857 }

858

859 .attribution_license,

860 .attribution_project {

861 text-align: left;

862 }

863

864 .attribution_notice {

865 text-align: center;

866 }

867

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

869

870 /* Rules for the sidebar */

871

872 .sidebar_heading {

873 position: relative;

874 padding: $lineheight/2 $lineheight;

875 // background: $offwhite;

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

877 > .close {

878 float: right;

879 margin-top: 2px;

880 cursor: pointer;

881 }

882 }

883

884 #browse_status {

885 p {

886 padding: $lineheight;

887 }

888 }

889

890 #sidebar {

891 #sidebar_loader,

892 .loader,

893 .load_more {

894 text-align: center;

895 margin: $lineheight auto;

896 width: $lineheight;

897 display: block;

898 }

899 }

900

901 /* Rules for the search box */

902

903 header .search_form {

904 display: none;

905 }

906

907 .search_form {

908 position: relative;

909 padding: $lineheight/2;

910 background-color: $lightgrey;

911

912 .query_wrapper {

913 position: relative;

914 overflow: hidden;

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

916 }

917

918 input[type=text] {

919 width: 100%;

920 height: 30px;

921 border-right: none;

922

923 transition: 300ms linear;

924 -webkit-transition: 300ms linear;

925 -moz-transition: 300ms linear;

926 }

927

928 input:focus {

929 outline: none;

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

931 }

932

933 input[type=submit] {

934 float: right;

935 width: auto;

936 min-width: 0;

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

938 }

939

940 .describe_location {

941 position: absolute;

942 top: 6px;

943 right: 6px;

944 font-size: 10px;

945 color: $blue;

946 }

947 }

948

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

950

951 #mapkey {

952 .mapkey-table-key img {

953 display: block;

954 margin-left: auto;

955 margin-right: auto;

956 }

957 td {

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

959 }

960 }

961

962 /* Rules for search sidebar */

963

964 .search_results_entry {

965 ul li {

966 border-bottom: $keyline;

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

968 }

969

970 .search_details {

971 display: block;

972 float: right;

973 text-align: right;

974 margin-top: 0.2em;

975 margin-left: 0.5em;

976 }

977 }

978

979 .search_results_error {

980 color: #f00;

981 }

982

983 /* Rules for entity history */

984

985 #sidebar_content {

986 .browse_details {

987 position: relative;

988 border-bottom: $keyline;

989 }

990 }

991

992 .browse_status {

993 display: none;

994 }

995

996 /* Rules for the history sidebar */

997

998 #sidebar .changesets {

999 li {

1000 padding: $lineheight;

1001 border-bottom: 1px solid #ddd;

1002 cursor: pointer;

1003

1004 &.selected { background: #FFFFE6; }

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

1006 }

1007

1008 h4 {

1009 margin-top: 0;

1010 a {

1011 color: #000;

1012 }

1013 }

1014 }

1015

1016 /* Rules for the browse sidebar */

1017

1018 #sidebar_content {

1019 .browse-section {

1020 padding: $lineheight/2 $lineheight;

1021 border-bottom: 1px solid #ddd;

1022

1023 h4:first-child {

1024 margin-top: 0;

1025 }

1026 }

1027

1028 :last-child {

1029 border-bottom: none;

1030 }

1031

1032 .paginate {

1033 float: right;

1034 padding: 1px 6px;

1035 border: 1px solid #eee;

1036 border-radius: 3px;

1037 }

1038

1039 .paginate ul {

1040 padding-left: 20px;

1041 }

1042

1043 .browse-field {

1044 margin-bottom: 10px;

1045

1046 h4 {

1047 padding: 5px 0 5px 10px;

1048 font-size: 12px;

1049 border: 1px solid #CCC;

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

1051 background-color: #F6F6F6;

1052 }

1053

1054 p {

1055 padding: 7px 10px;

1056 font-size: 12px;

1057 background-color: #FFF;

1058 border: 1px solid #CCC;

1059 border-top: 0;

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

1061 }

1062 }

1063

1064 .browse-tag-list {

1065 background-color: #F6F6F6;

1066 border: 1px solid #ddd;

1067 border-radius: 3px;

1068 font-size: 12px;

1069

1070 li {

1071 border-bottom: 1px solid #ddd;

1072 }

1073

1074 li:last-child {

1075 border-bottom: 0;

1076 }

1077

1078 .browse-tag-k,

1079 .browse-tag-v {

1080 display: inline-block;

1081 width: 50%;

1082 float: left;

1083 padding: 6px 10px;

1084 }

1085

1086 .browse-tag-k {

1087 font-weight: bold;

1088 font-weight: 500;

1089 background-color: #F6F6F6;

1090 }

1091

1092 .browse-tag-v {

1093 border-left: 1px solid #ddd;

1094 background-color: #fff;

1095 }

1096 }

1097

1098 .warning {

1099 margin: $lineheight/2 0;

1100 padding: $lineheight/2;

1101 font-size: 90%;

1102 }

1103

1104 .note-comments li {

1105 margin: $lineheight/2 0;

1106

1107 p {

1108 margin-left: 10px;

1109 }

1110 }

1111

1112 .note-description {

1113 margin: 0 0 10px 10px;

1114 }

1115 }

1116

1117 /* Rules for export sidebar */

1118

1119 .export_form {

1120 padding: $lineheight;

1121

1122 .export_area_inputs,

1123 .export_button {

1124 text-align: center;

1125 }

1126

1127 .export_area_inputs {

1128 margin-bottom: $lineheight/2;

1129 input[type="text"] {

1130 width: 80px;

1131 margin-bottom: 5px;

1132 }

1133 }

1134

1135 .export_bound {

1136 margin: $lineheight/4;

1137 }

1138

1139 .export_button {

1140 margin-top: $lineheight;

1141 }

1142

1143 dl {

1144 padding-left: $lineheight/2;

1145 dd {

1146 margin-left: 0;

1147 margin-bottom: 10px;

1148 }

1149 }

1150 }

1151

1152 /* Rules for edit pages */

1153

1154 .site-edit {

1155 #content {

1156 position: absolute;

1157 top: $headerHeight;

1158 bottom: 0;

1159 width: 100%;

1160 }

1161

1162 #map {

1163 height: 100%;

1164 }

1165 }

1166

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

1168

1169 .content-heading {

1170 background: $lightgrey;

1171

1172 h1 { font-size: 22px; }

1173 }

1174

1175 .content-body {

1176 h1, h2, h3, p {

1177 margin-bottom: $lineheight;

1178 }

1179

1180 h1, h2, h3 {

1181 margin-top: $lineheight/2;

1182 }

1183 }

1184

1185 .content-inner {

1186 position: relative;

1187 max-width: 900px;

1188 margin: auto;

1189 padding: $lineheight;

1190 }

1191

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

1193

1194 .user-new,

1195 .user-create,

1196 .user-terms {

1197 .content-body .content-inner {

1198 padding: 0;

1199 }

1200 }

1201

1202 .user-new,

1203 .user-create,

1204 .user-terms,

1205 .user-confirm {

1206 .content-heading .content-inner {

1207 height: 200px;

1208 }

1209 }

1210

1211 .header-illustration {

1212 background-position: 0 0;

1213 background-repeat: no-repeat;

1214 position: absolute;

1215 height: 200px;

1216 width: 100%;

1217 left: 0;

1218 bottom: 0;

1219

1220 &.new-user-main {

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

1222 }

1223

1224 &.confirm-main {

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

1226 }

1227

1228 &.new-user-terms {

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

1230 }

1231

1232 &.new-user-arm {

1233 height: 110px;

1234 width: 130px;

1235 left: 260px;

1236 top: 160px;

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

1238 z-index: 100;

1239 }

1240 }

1241

1242 #content.maximised {

1243 top: 0;

1244 left: 0;

1245 right: 0;

1246 bottom: 0;

1247 border: 0;

1248 z-index: 1000;

1249 }

1250

1251 #slim_container {

1252 width: 100%;

1253 }

1254

1255 #slim_container_content {

1256 max-width: 50em;

1257 background-color: #FFFFFF;

1258 margin: $lineheight/2 auto;

1259 padding: 3px;

1260 border-radius: 25px;

1261 -moz-border-radius: 25px;

1262 border: 1px solid #e6e6e6;

1263 }

1264

1265 #slim_content {

1266 margin: $lineheight/2;

1267 margin-top: 95px;

1268 max-width: 50em;

1269

1270 .content-heading {

1271 margin-bottom: 15px;

1272 }

1273 }

1274

1275 #slim_header {

1276 margin: 30px $lineheight/2;

1277 position: absolute;

1278 top: 0px;

1279 margin-right: $lineheight/4;

1280 img {

1281 vertical-align: middle;

1282 margin-bottom: $lineheight/4;

1283 margin-right: $lineheight/4;

1284 }

1285 }

1286

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

1288

1289 .content_map {

1290 position: relative;

1291 width: 45%;

1292 height: 400px;

1293 border: 1px solid #ccc;

1294 margin-bottom: $lineheight;

1295 float: right;

1296 }

1297

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

1299

1300 #trace_list {

1301 font-size: $lineheight/2;

1302 border-width: 0px;

1303 text-align: right;

1304

1305 .trace_summary {

1306 font-size: 12px;

1307 color: gray;

1308 }

1309

1310 .trace_pending {

1311 color: red;

1312 }

1313

1314 .trace_public {

1315 color: green;

1316 }

1317

1318 .trace_identifiable {

1319 color: green;

1320 }

1321

1322 .trace_trackable {

1323 color: red;

1324 }

1325

1326 .trace_private {

1327 color: red;

1328 }

1329 }

1330

1331 /* Rules for the user profile page */

1332

1333 #userinformation {

1334

1335 min-height: 100px;

1336 .userinformation-inner {

1337 float: left;

1338 }

1339 h2 {

1340 margin-top: 0;

1341 }

1342 .user-description {

1343 width: 100%;

1344 clear: both;

1345 }

1346 .deemphasize {

1347 margin: 0;

1348 }

1349 }

1350

1351 .admin-user-info small {

1352 margin-bottom: $lineheight/2;

1353 display: inline;

1354 margin-right: $lineheight;

1355 }

1356

1357 .activity-block {

1358 clear: left;

1359 border-bottom: 1px solid #ccc;

1360 padding-bottom: $lineheight;

1361 float: left;

1362 h3 {

1363 margin-bottom: $lineheight/2;

1364 }

1365 }

1366

1367 .contact-activity {

1368 margin-top: $lineheight;

1369 width: 100%;

1370 }

1371

1372 .activity-details p {

1373 margin-left: 70px;

1374 margin-bottom: 0;

1375 }

1376

1377 #friends-container .contact-activity ul {

1378 margin-left: 70px;

1379 }

1380

1381 .user-view {

1382 p#no_home_location {

1383 margin: $lineheight;

1384 }

1385 .user_thumbnail {

1386 margin-top: $lineheight/4;

1387 float: left;

1388 }

1389 }

1390

1391 /* Rules for the user map */

1392

1393 .content_map .leaflet-popup-content {

1394 margin: $lineheight/2;

1395 min-height: 50px;

1396 }

1397

1398 /* Rules for user popups on maps */

1399

1400 .user_popup {

1401 min-width: 200px;

1402 p {

1403 padding: 0 0 5px 0;

1404 margin-top: 0 0 0 60px;

1405 font-size: 12px;

1406 }

1407 img.user_thumbnail {

1408 float: left;

1409 margin: 0 $lineheight/2 0 0;

1410 }

1411 }

1412

1413 /* Rules for the user list */

1414

1415 #user_list {

1416 font-size: $lineheight/2;

1417 width: 100%;

1418

1419 tr {

1420 vertical-align: middle;

1421 }

1422

1423 p {

1424 margin-top: 0px;

1425 margin-bottom: 0px;

1426 }

1427 }

1428

1429 #user_list_actions {

1430 float: right;

1431 margin-top: $lineheight/2;

1432 }

1433

1434 /* Rules for the diary list page */

1435

1436 .diary_post {

1437 position: relative;

1438 margin-top: $lineheight/2;

1439 padding-top: $lineheight;

1440 border-top: 1px solid #ccc;

1441

1442 .post_heading {

1443 margin-bottom: $lineheight;

1444

1445 h2 {

1446 margin-top: 0;

1447 margin-bottom: $lineheight/2;

1448 font-size: 24px;

1449 }

1450 }

1451

1452 img.user_thumbnail {

1453 float: left;

1454 }

1455

1456 small.deemphasize {

1457 float: left;

1458 display: block;

1459 }

1460

1461 ul.secondary-actions {

1462 display: inline-block;

1463 }

1464 }

1465

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

1467 display: inline;

1468 }

1469

1470 /* Rules for the diary entry page */

1471

1472 .diary_entry {

1473 #map {

1474 position: relative;

1475 width: 90%;

1476 height: 400px;

1477 border: 1px solid #ccc;

1478 display: none;

1479 margin-bottom: $lineheight;

1480 }

1481 #newcomment {

1482 border-top: 1px solid #ccc;

1483 padding-top: $lineheight;

1484 margin-top: $lineheight/2;

1485 }

1486 .comments {

1487 max-width: 740px;

1488 }

1489 .diary-comment {

1490 margin-top: $lineheight/2;

1491 border-top: 1px dashed #ccc;

1492 padding-top: $lineheight/2;

1493 &:first-child {

1494 margin-top: $lineheight;

1495 padding-top: $lineheight;

1496 border-top: 1px solid #ccc;

1497 }

1498 p {

1499 margin-bottom: $lineheight/2;

1500 }

1501 .comment-heading {

1502 margin-bottom: 0;

1503 margin-top: 0;

1504 }

1505 }

1506 }

1507

1508 .diary_entry-view img.user_thumbnail {

1509 float: left;

1510 }

1511

1512 /* Rules for the log in page */

1513

1514 #login_openid_buttons {

1515 margin-bottom: 0;

1516 }

1517

1518 #login_openid_buttons li {

1519 float: left;

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

1521 }

1522

1523 /* Rules for the account confirmation page */

1524

1525 .user-terms {

1526 .legale {

1527 border: 1px solid #ccc;

1528 padding: $lineheight;

1529 margin-bottom: $lineheight;

1530 overflow: auto;

1531 height: 20em;

1532 }

1533

1534 #decline {

1535 background: $lightblue;

1536 &:hover {

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

1538 }

1539 }

1540 }

1541

1542 /* Rules for the account settings page */

1543

1544 #accountForm .user_map {

1545 position: relative;

1546 width: 500px;

1547 height: 400px;

1548 border: 1px solid #ccc;

1549 }

1550

1551 #accountForm .user_image {

1552 margin-bottom: 0;

1553 }

1554

1555 #accountForm #user_image {

1556 margin-left: 20px;

1557 }

1558

1559 #accountForm ul.accountImage-options {

1560 margin-left: 120px;

1561 }

1562

1563 .nohome .location {

1564 display: none;

1565 }

1566

1567 #homerow .message {

1568 display: none;

1569 }

1570

1571 .nohome .message {

1572 display: inline !important;

1573 }

1574

1575 .content_map.settings_map {

1576 width: 50%;

1577 float: none;

1578 }

1579

1580 /* Rules for the oauth settings page */

1581

1582 .oauth_clients .buttons .oauth-edit {

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

1584 }

1585

1586 .oauth_clients .buttons .oauth-delete {

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

1588 }

1589

1590 /* Rules for messages pages */

1591

1592 .messages {

1593 width: 100%;

1594 border: 1px solid #ddd;

1595

1596 input[type="submit"] {

1597 margin: auto;

1598 }

1599 tbody tr {

1600 border-top: 1px solid #ccc;

1601 }

1602

1603 .inbox-row {

1604 background: #f8f8ff;

1605 }

1606

1607 .inbox-row-unread {

1608 background:#CBEEA7;

1609 }

1610

1611 .right {

1612 float: right;

1613 }

1614

1615 tr td,

1616 tr th {

1617 padding: $lineheight/4;

1618 }

1619 p:last-child,

1620 h2:last-child,

1621 h3:last-child,

1622 ol:last-child,

1623 ul:last-child {

1624 margin-bottom:0;

1625 }

1626 tr td {

1627 height: 30px;

1628 border-right: 1px solid $lightgrey;

1629 }

1630 }

1631

1632 .inbox-row .inbox-mark-read {

1633 display: none;

1634 }

1635

1636 .info-line {

1637 margin-bottom: $lineheight;

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

1639 border-bottom: 1px solid #ccc;

1640

1641 form, form div {

1642 display: inline;

1643 }

1644 }

1645

1646 .info-line .user_thumbnail_tiny {

1647 vertical-align: middle;

1648 }

1649

1650 .inbox-mark-unread,

1651 .inbox-mark-read,

1652 .inbox-delete {

1653 width: 1%;

1654 }

1655

1656 .inbox-row-unread .inbox-mark-unread {

1657 display: none;

1658 }

1659

1660 .message-read .message-buttons {

1661 margin-top: $lineheight;

1662 padding-top: $lineheight;

1663 border-top: 1px solid $lightgrey;

1664 }

1665

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

1667 border-radius: 0;

1668 }

1669

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

1671

1672 .error {

1673 padding: $lineheight;

1674 background-color: #ff7070;

1675 }

1676

1677 .warning {

1678 padding: $lineheight;

1679 background-color: #ffe0cc;

1680 }

1681

1682 .notice {

1683 padding: $lineheight;

1684 background-color: #CBEEA7;

1685 }

1686

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

1688

1689 .field_with_errors {

1690 padding: 2px;

1691 background-color: #ff7070;

1692 display: inline-block;

1693 }

1694

1695 .formError {

1696 display: inline-block;

1697 padding: 5px 10px;

1698 margin-top: 5px;

1699 border-radius: 4px;

1700 font-size: 12px;

1701 color: #fff;

1702 background-color: #ff7070;

1703 }

1704

1705 /* Rules for rails validation error boxes */

1706

1707 #errorExplanation {

1708 width: 400px;

1709 border: 2px solid #ff7070;

1710 padding: 0 $lineheight/2;

1711 margin-bottom: $lineheight;

1712 background-color: #f0f0f0;

1713

1714 h2 {

1715 margin: 0 -10px 10px -10px;

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

1717 font-weight: bold;

1718 font-weight: 500;

1719 font-size: 12px;

1720 background-color: #c00;

1721 color: #fff;

1722 text-align: left;

1723 }

1724

1725 p {

1726 color: #333;

1727 margin-bottom: 0px;

1728 padding: $lineheight/4;

1729 }

1730

1731 ul {

1732 padding-left: $lineheight;

1733

1734 li {

1735 font-size: 12px;

1736 list-style: disc;

1737 }

1738 }

1739 }

1740

1741 /* Rules for forms */

1742

1743 .standard-form {

1744 fieldset {

1745 margin-bottom: $lineheight;

1746 }

1747 label.standard-label {

1748 display: block;

1749 margin-bottom: $lineheight/4;

1750 font-size: $typeheight;

1751 font-weight: bold;

1752 font-weight: 500;

1753 line-height: 1.5;

1754 }

1755 label.standard-label.secondary {

1756 display: inline-block;

1757 font-weight: normal;

1758 }

1759 .form-help {

1760 font-weight: normal;

1761 }

1762 .form-column {

1763 float: left;

1764 margin-right: 20px;

1765 }

1766 .form-divider {

1767 margin-top: $lineheight;

1768 padding-top: $lineheight;

1769 border-top: 1px solid $lightgrey;

1770 }

1771 .horizontal-list .form-row {

1772 float: left;

1773 padding-right: 10px;

1774 }

1775 .form-row {

1776 margin-bottom: $lineheight/2;

1777 }

1778 .form-list {

1779 margin-bottom: 0;

1780 }

1781 .form-list li {

1782 margin-bottom: 5px;

1783 }

1784 input[type="checkbox"],

1785 input[type="radio"] {

1786 float: left;

1787 margin-top: 5px;

1788 }

1789 }

1790

1791 #remember_me_openid {

1792 display: block;

1793 }

1794

1795 input[type="checkbox"],

1796 input[type="radio"] {

1797 margin-right: 5px;

1798 }

1799

1800 input[type="text"],

1801 input[type="email"],

1802 input[type="url"],

1803 input[type="password"],

1804 textarea {

1805 border: 1px solid #ccc;

1806 padding: 2px 5px;

1807 margin: 0;

1808 width: 200px;

1809 }

1810

1811 textarea {

1812 padding: 5px;

1813 width: 100%;

1814 }

1815

1816 /* Rules for user images */

1817

1818 img.user_image {

1819 max-width: 100px;

1820 max-height: 100px;

1821 border: 1px solid #ccc;

1822 margin-bottom: $lineheight;

1823 float: left;

1824 margin-right: $lineheight;

1825 }

1826

1827 img.user_thumbnail {

1828 max-width: 50px;

1829 max-height: 50px;

1830 border: 1px solid #ccc;

1831 margin-right: $lineheight;

1832 }

1833

1834 img.user_thumbnail_tiny {

1835 max-width: 25px;

1836 max-height: 25px;

1837 border: 1px solid #ccc;

1838 }

1839

1840 /* Rules for geo microformats */

1841

1842 abbr.geo {

1843 border-bottom: none;

1844 }

1845

1846 /* Rules for RSS buttons */

1847

1848 .rsssmall {

1849 position: relative;

1850 top: 3px;

1851 }

1852

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

1854

1855 ul.secondary-actions {

1856 font-style: normal;

1857 margin-bottom: 0;

1858 margin-left: 0;

1859 &.pager {

1860 display: inline-block;

1861 margin-right: 60px;

1862 }

1863 > li {

1864 display: block;

1865 float: left;

1866 list-style: none;

1867 border-left: 1px solid #ccc;

1868 padding-left: $lineheight/2;

1869 margin-right: $lineheight/2;

1870 &:first-child {

1871 border-left: 0;

1872 padding-left: 0;

1873 }

1874 &:last-child {

1875 margin-right: 0px;

1876 }

1877 }

1878 }

1879

1880 div.secondary-actions {

1881 padding: 10px;

1882 text-align: center;

1883 }

1884

1885 /* Utility for managing inner content areas */

1886

1887 .inner22 { padding: $lineheight;}

1888

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

1890

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

1892

1893 .inner20 { padding: $lineheight 0;}

1894

1895 .inner02 { padding: 0 $lineheight;}

1896

1897 /* Utility for general button styles */

1898

1899 input[type="button"],

1900 input[type="submit"],

1901 input[type="reset"],

1902 a.button {

1903 cursor: pointer;

1904 border: 0;

1905 display: inline-block;

1906 line-height: 20px;

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

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

1909 min-width: 120px;

1910 margin: 0 0 $lineheight/2 0;

1911 color: white;

1912 background: $blue;

1913 text-align: center;

1914 border-radius: 2px;

1915 -moz-border-radius: 2px;

1916 &:hover {

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

1918 text-decoration: none;

1919 }

1920 &.deemphasize {

1921 background: $lightblue;

1922 &:hover {

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

1924 }

1925 }

1926 &:disabled {

1927 background: $lightgrey;

1928 &:hover {

1929 background: $lightgrey;

1930 }

1931 }

1932 &:last-child {

1933 margin-bottom: 0;

1934 }

1935 }

1936

1937 .buttons {

1938 min-width: 200px;

1939 input[type="submit"],

1940 input[type="button"],

1941 input[type="reset"],

1942 .button {

1943 box-sizing: border-box;

1944 float: left;

1945 border-radius: 0;

1946 margin:0;

1947 min-width: 75px;

1948 max-width: 180px;

1949 border-right:1px solid white;

1950 text-overflow: ellipsis;

1951 white-space: nowrap;

1952 overflow: hidden;

1953 }

1954 input:first-child,

1955 .button:first-child {

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

1957 }

1958 input:last-child,

1959 .button:last-child {

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

1961 border-right-width: 0;

1962 }

1963 input:only-child,

1964 .button:only-child,

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

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

1967 border-radius:2px;

1968 border-right-width: 0;

1969 }

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

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

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

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

1974 border-right-width: 0;

1975 }

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

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

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

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

1980 border-right-width: 1px;

1981 }

1982 }

1983

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

1985

1986 .table0,

1987 .item0 {

1988 background: $offwhite;

1989 }

1990

1991 .table1,

1992 .item1 {

1993 background: #fff;

1994 }

1995

1996 /* Rules for OpenID logo */

1997

1998 .openid_logo {

1999 vertical-align: text-bottom;

2000 border: 0;

2001 }

2002

2003 /* Rules for rich text */

2004

2005 .richtext,

2006 .prose {

2007 h1, h2 {

2008 padding-bottom: $lineheight/2;

2009 border-bottom: 1px dashed #cccccc;

2010 margin-bottom: $lineheight/2;

2011 }

2012

2013 h1 {

2014 font-size: 24px;

2015 }

2016

2017 h2 {

2018 font-size: 18px;

2019 }

2020

2021 h3 {

2022 font-size: $typeheight;

2023 }

2024

2025 code {

2026 font-size: 13px;

2027 background: #e8e8e8;

2028 padding: 2px 3px;

2029 }

2030

2031 pre {

2032 font-size: 13px;

2033 background: #e8e8e8;

2034 padding: 2px 3px;

2035

2036 code {

2037 padding: 0;

2038 }

2039 }

2040

2041 img {

2042 padding: $lineheight;

2043 background-color: $offwhite;

2044 display: block;

2045 max-width: 100%;

2046 margin: auto;

2047 }

2048

2049 blockquote {

2050 border-left: $lineheight solid $offwhite;

2051 padding-left: $lineheight;

2052 margin: 0;

2053 color: #7E7E7E;

2054 }

2055

2056 ul, ol {

2057 padding-left: $lineheight;

2058 margin-bottom: $lineheight;

2059 margin-left: $lineheight;

2060 }

2061

2062 ul li {

2063 list-style: disc;

2064 }

2065

2066 ol li {

2067 list-style: decimal;

2068 }

2069 }

2070

2071 .diary_post .richtext {

2072 margin-top: $lineheight;

2073 }

2074

2075 .comments .richtext {

2076 margin-left: 70px;

2077 margin-top: 0;

2078 }

2079

2080 /* Rules for rich text editors */

2081

2082 .richtext_container {

2083 margin-bottom: $lineheight;

2084

2085 .richtext_content {

2086 width: 50%;

2087 display: inline-block;

2088 vertical-align: top;

2089

2090 .richtext_preview {

2091 display: inline-block;

2092 padding: $lineheight;

2093 background-color: $offwhite;

2094 overflow-x: auto;

2095

2096 &.loading {

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

2098 background-repeat: no-repeat;

2099 background-position: center;

2100 }

2101

2102 > :first-child {

2103 margin-top: 0px;

2104 }

2105 }

2106 }

2107

2108 .richtext_help {

2109 display: inline-block;

2110 vertical-align: top;

2111 margin-left: 15px;

2112 background-color: #f8f8ff;

2113 padding: $lineheight/2;

2114 width: 220px;

2115

2116 ul {

2117 margin-bottom: 0;

2118 }

2119

2120 h4.heading, li {

2121 border-bottom: 1px solid #ccc;

2122 margin-bottom: $lineheight/4;

2123 padding-bottom: $lineheight/4;

2124 }

2125

2126 li h4, li span, li p {

2127 display: inline-block;

2128 vertical-align: top;

2129 font-size: 11px;

2130 }

2131

2132 li h4 {

2133 width: 40%;

2134 margin: 0;

2135 }

2136

2137 li span, li p {

2138 width: 50%;

2139 margin-left: $lineheight/2;

2140 margin-bottom: $lineheight/4;

2141 white-space: nowrap;

2142 }

2143 }

2144 }

2145

2146 /* Rules for the user notes list */

2147

2148 .note_list {

2149 tr.creator {

2150 background-color: #eeeeee;

2151 }

2152

2153 td {

2154 padding: 3px;

2155 }

2156

2157 p {

2158 margin-bottom: 0px;

2159 }

2160 }

2161

2162 /* Rules for the iD editor */

2163

2164 .id-embed {

2165 width: 100%;

2166 height: 100%;

2167 }

2168

2169 /* Rules for dropdown menus */

2170

2171 .dropdown {

2172 position: relative;

2173 }

2174

2175 .dropdown-toggle {

2176 *margin-bottom: -3px;

2177 }

2178

2179 .dropdown-toggle:active,

2180 .open .dropdown-toggle {

2181 outline: 0;

2182 }

2183

2184 .caret {

2185 display: inline-block;

2186 width: 0;

2187 height: 0;

2188 vertical-align: top;

2189 border-top: 4px solid #000000;

2190 border-right: 4px solid transparent;

2191 border-left: 4px solid transparent;

2192 content: "";

2193 }

2194

2195 .dropdown .caret {

2196 margin-top: 8px;

2197 margin-left: 2px;

2198 }

2199

2200 .dropdown-menu {

2201 position: absolute;

2202 top: 100%;

2203 left: -1px;

2204 z-index: 1000;

2205 display: none;

2206 float: left;

2207 min-width: 160px;

2208 padding: 5px 0;

2209 margin: 0;

2210 list-style: none;

2211 background-color: #ffffff;

2212 border: 1px solid #ccc;

2213 border-radius: 0 3px 3px;

2214 *border-right-width: 2px;

2215 *border-bottom-width: 2px;

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

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

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

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

2220 -moz-background-clip: padding;

2221 background-clip: padding-box;

2222 }

2223

2224 .dropdown-menu.pull-right {

2225 right: 0;

2226 left: auto;

2227 }

2228

2229 .dropdown-menu .divider {

2230 *width: 100%;

2231 height: 1px;

2232 margin: 9px 1px;

2233 *margin: -5px 0 5px;

2234 overflow: hidden;

2235 background-color: #e5e5e5;

2236 border-bottom: 1px solid #ffffff;

2237 }

2238

2239 .dropdown-menu > li > a {

2240 display: block;

2241 padding: 3px 10px;

2242 clear: both;

2243 font-weight: normal;

2244 line-height: 20px;

2245 color: #333333;

2246 white-space: nowrap;

2247 }

2248

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

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

2251 .dropdown-submenu:hover > a,

2252 .dropdown-submenu:focus > a {

2253 color: #ffffff;

2254 text-decoration: none;

2255 background-color: $green;

2256 }

2257

2258 .dropdown-menu > .active > a,

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

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

2261 color: #ffffff;

2262 text-decoration: none;

2263 background-color: $green;

2264 outline: 0;

2265 }

2266

2267 .dropdown-menu > .disabled > a,

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

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

2270 color: #999999;

2271 }

2272

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

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

2275 text-decoration: none;

2276 cursor: default;

2277 background-color: transparent;

2278 background-image: none;

2279 }

2280

2281 .open {

2282 *z-index: 1000;

2283 }

2284

2285 .open > .dropdown-menu {

2286 display: block;

2287 }

2288

2289 .dropdown-backdrop {

2290 position: fixed;

2291 top: 0;

2292 right: 0;

2293 bottom: 0;

2294 left: 0;

2295 z-index: 990;

2296 }

2297

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

2299 .site-welcome {

2300 .center {

2301 text-align: center;

2302 .sprite {

2303 float: none;

2304 margin: auto;

2305 }

2306 }

2307

2308 .sprite {

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

2310 background-size: 500px 250px;

2311 display: block;

2312 float: left;

2313 }

2314

2315 .icon-list {

2316 padding-bottom: 20px;

2317 div {

2318 margin-bottom: 10px;

2319 p {

2320 padding-top: 10px;

2321 }

2322 }

2323 }

2324 .sprite.small {

2325 width: 50px;

2326 height: 50px;

2327 }

2328

2329 .sprite.x {

2330 background-position: -50px 0;

2331 }

2332

2333 .sprite.term {

2334 margin-right: 10px;

2335 vertical-align: middle;

2336 }

2337

2338 .sprite.node {

2339 background-position: -100px 0;

2340 }

2341

2342 .sprite.way {

2343 background-position: -150px 0;

2344 }

2345

2346 .sprite.tag {

2347 background-position: -200px 0;

2348 }

2349

2350 .sprite.editor {

2351 background-position: -250px 0;

2352 }

2353

2354 .sprite.question {

2355 background-position: -300px 0;

2356 }

2357

2358 .start-mapping {

2359 margin: auto;

2360 cursor: pointer;

2361 border: none;

2362 padding: 20px 40px;

2363 font-size: 30px;

2364 text-decoration: none;

2365 }

2366

2367 .note-box {

2368 margin-top: 20px;

2369 background-color: $offwhite;

2370 }

2371

2372 .icon.note {

2373 background-color: #333;

2374 border-radius: 4px;

2375 }

2376 }

2377

2378 .site-about #content {

2379 //background-color: #000;

2380 background-color: #eee;

2381 background-position: 50% 50%;

2382 background-repeat: no-repeat;

2383 background-size: cover;

2384 background-attachment: fixed;

2385

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

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

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

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

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

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

2392

2393 .caption {

2394 max-width: 200px;

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

2396 position: fixed;

2397 text-align: right;

2398 right: 20px;

2399 bottom: 60px;

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

2401 color: #eee;

2402 opacity: 0.8;

2403 display: none;

2404 }

2405

2406 .caption a {

2407 color: white;

2408 white-space: nowrap;

2409 text-decoration: none;

2410 }

2411

2412 a.next {

2413 display: block;

2414 position: fixed;

2415 right: 10px;

2416 bottom: 10px;

2417 width: 40px;

2418 height: 40px;

2419 border-radius: 5px;

2420 text-indent: -9999px;

2421 overflow: hidden;

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

2423 background-color: #000;

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

2425 }

2426

2427 .content-inner {

2428 position: relative;

2429 color: #333;

2430 min-width: 320px;

2431 max-width: 640px;

2432

2433 .section {

2434 margin-bottom: 30px;

2435 }

2436

2437 .section:last-child {

2438 margin-bottom: 0;

2439 }

2440 }

2441

2442 .text {

2443 background: white;

2444 padding: 40px;

2445 }

2446

2447 .attr {

2448 position: relative;

2449 padding: 170px 40px 20px;

2450 background: #333;

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

2452 margin-bottom: 0;

2453 margin-top: -20px;

2454

2455 h1 {

2456 display: block;

2457 color: white;

2458 font-weight: normal;

2459 font-weight: 300;

2460 font-size: 34px;

2461 span {

2462 color: #76c551;

2463 }

2464 }

2465

2466 .user-image {

2467 position: absolute;

2468 top: 0px;

2469 right: 240px;

2470 left: 0px;

2471 height: 150px;

2472 background-position: 0 50%;

2473 background-repeat: no-repeat;

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

2475 background-size: cover;

2476 background-color: #76c551;

2477 }

2478

2479 .byosm {

2480 position: absolute;

2481 top: 0px;

2482 right: 0px;

2483 z-index: 1;

2484 width: 240px;

2485 height: 150px;

2486 padding: 20px 20px 20px 40px;

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

2488 white-space: nowrap;

2489 color: #fff;

2490 background: #76c551;

2491 }

2492

2493 .byosm span {

2494 display: inline-block;

2495 width: 20px;

2496 margin-left: -20px;

2497 }

2498 }

2499

2500 h2 {

2501 margin-bottom: 10px;

2502 }

2503

2504 .icon {

2505 width: 30px;

2506 height: 30px;

2507 margin-right: 10px;

2508 vertical-align: middle;

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

2510

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

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

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

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

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

2516 }

2517 }

2518

2519 @import 'browse';

2520

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

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

2523 display: none;

2524 }

2525 }

2526