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

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

43 .clearfix:before,

44 .clearfix:after {

45 content: " ";

46 display: table;

47 }

49 .clearfix:after {

50 clear: both;

51 }

53 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

67 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

83 .fillL { background-color: white; }

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

87 * {

88 -webkit-box-sizing: border-box;

89 -moz-box-sizing: border-box;

90 box-sizing: border-box;

91 }

93 body {

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

95 font-size: $typeheight;

96 line-height: 1.6666;

97 color: #222;

98 background-color: #fff;

99 margin: 0px;

100 padding: 0px;

101 text-align: left;

102 height: 100%;

103 }

104

105 body.slim {

106 background-color: #f0f0f0;

107 }

108

109 h1, h2, h3 {

110 font-weight: 500;

111 line-height: 1.2;

112 }

113

114 h4, h5 { font-weight: 500; }

115

116 h1 {

117 font-size: 18px;

118 }

119

120 h2, h3 {

121 font-size: 16px;

122 }

123

124 p > img {

125 width: auto;

126 max-width: 100%;

127 }

128

129 small, aside {

130 font-size: 12px;

131 }

132

133 #container { position: relative; }

134

135 .column-1 {

136 width: 50%;

137 margin: 0 0 $lineheight/2 0;

138 }

139

140 .small_icon {

141 vertical-align: middle;

142 margin-right: $lineheight/4;

143 }

144

145 .red { color: $red; }

146

147 /* Rules for icons */

148

149 .icon {

150 display:inline-block;

151 vertical-align:top;

152 width:20px;

153 height:20px;

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

155 text-indent:-9999px;

156 overflow:hidden;

157 }

158

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

175

176 /* Rules for links */

177

178 a {

179 color: #24d;

180 text-decoration: none;

181 -webkit-appearance: none;

182 outline: 0;

183 &:hover {

184 text-decoration: underline;

185 }

186 }

187

188 /* Rules for horizontal lines */

189

190 hr {

191 border: none;

192 background-color: #ccc;

193 color: #ccc;

194 height: 1px;

195 }

196

197 /* General styles for tables */

198

199 table {

200 width: 100%;

201 margin-bottom: $lineheight;

202 th, td {

203 text-align: left;

204 padding: $lineheight/4;

205 line-height: $lineheight;

206 }

207 th {

208 font-weight: 500;

209 vertical-align: top;

210 }

211 td {

212 vertical-align: middle;

213 }

214 }

215

216 /* Utility for de-emphasizing content */

217

218 .deemphasize {

219 color: #999;

220 a {

221 color: $blue;

222 }

223 }

224

225 /* Rules for the header */

226

227 #menu-icon {

228 display: none !important;

229 float: right;

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

231 background-size: 30px 30px;

232 display: block;

233 width: 30px;

234 height: 30px;

235 margin: 14px 10px 0 0;

236 opacity: 0.6;

237 }

238

239 header {

240 height: $headerHeight;

241 position: relative;

242 z-index: 1001;

243 font-size: 13px;

244

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

246 display: inline-block;

247 }

248

249 > * {

250 height: 100%;

251 padding: $lineheight/2;

252 }

253

254 h1, nav.primary {

255 float: left;

256 }

257

258 a, a:hover {

259 text-decoration: none;

260 }

261

262 img.logo {

263 width: 30px;

264 height: 30px;

265 margin-top: -4px;

266 vertical-align: middle;

267 }

268

269 h1 {

270 margin: 0;

271 padding-top: 15px;

272

273 a {

274 color: #000;

275 }

276 }

277 }

278

279 nav.primary {

280 > ul {

281 $border: 1px solid $green;

282

283 border: $border;

284 border-radius: $border-radius;

285

286 > li {

287 border-right: $border;

288 float: left;

289 &:last-child {

290 border-right: 0;

291 }

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

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

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

295 &.dropdown {

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

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

298 }

299 }

300 }

301

302 a.tab,

303 .dropdown-toggle {

304 display: inline-block;

305 font-weight: 500;

306 color: $green;

307 padding: 5px 15px;

308 }

309

310 .dropdown-toggle {

311 padding: 5px 6px;

312 }

313

314 .caret {

315 border-top-color: $green;

316 margin-top: 10px;

317 }

318

319 .disabled a {

320 color: #ccc;

321 cursor: default;

322

323 .caret {

324 border-top-color: #ccc;

325 }

326 }

327

328 > ul li.current {

329 background-color: $green;

330

331 .tab {

332 color: #fff;

333 }

334

335 .caret {

336 border-top-color: #fff;

337 }

338 }

339 }

340

341 nav.secondary {

342 position: absolute;

343 right: 0;

344

345 > ul {

346 vertical-align: middle;

347 a, .dropdown-toggle {

348 display: inline-block;

349 text-decoration: none;

350 color: $darkgrey;

351 padding: 5px;

352

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

354 }

355 }

356

357 > ul li.current a {

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

359 }

360

361 .user-menu {

362 $border: 1px solid $grey;

363

364 font-weight: 500;

365 border: $border;

366 border-radius: $border-radius;

367 margin-left: 10px;

368

369 > li {

370 border-right: $border;

371 float: left;

372 &:last-child {

373 border-right: 0;

374

375 > a {

376 border-radius: 0 $border-radius $border-radius 0;

377 }

378 }

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

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

381 }

382

383 a {

384 padding: 5px 15px;

385

386 }

387

388 &.logged-in > a {

389 padding: 0;

390 > .user-button {

391 padding: 5px 10px 5px 6px;

392 display: inline-block;

393 color: $darkgrey;

394 }

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

396 }

397 }

398

399 .caret {

400 border-top-color: $grey;

401 margin-top: 9px;

402 }

403

404 img.user_thumbnail_tiny {

405 border: 0;

406 vertical-align: top;

407 margin-top: 0px;

408 margin: 3px 0 0 3px;

409 border-radius: 2px;

410 }

411

412 #inboxanchor {

413 display: inline-block;

414 vertical-align: top;

415 height: 25px;

416 margin: 3px 0 3px 3px;

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

418 line-height: 20px;

419 border-radius: 2;

420 }

421

422 .dropdown-menu {

423 left: auto;

424 right: -1px;

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

426

427 .count-number {

428 float: right;

429 padding: 0 5px;

430 margin: 0;

431 }

432 }

433 }

434

435 #compact-secondary-nav {

436 display: none;

437 ul li a {

438 width: 100%;

439 color: #333;

440 &:hover { color: #fff; }

441 }

442 }

443

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

445 #compact-secondary-nav {

446 display: inline-block;

447 }

448 .compact-hide {

449 display: none;

450 }

451 }

452

453 /* Utility for styling notification numbers */

454

455 .count-number {

456 padding: 2px $lineheight/4;

457 border-radius: 2px;

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

459 margin: 0 2px;

460 font-size: 11px;

461 color: #333;

462 }

463

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

465

466 #noscript {

467 z-index: 20000000;

468 position: absolute;

469 top: 15px;

470 left: 15px;

471 }

472

473 /* Rules for bootstrap tooltips */

474

475 .tooltip {

476 position: absolute;

477 display: none;

478 color: #333;

479 text-align: left;

480 font-size: 12px;

481 max-width: 250px;

482 }

483

484 .tooltip.in {

485 opacity: 0.8;

486 z-index: 1030;

487 height: auto;

488 display: block;

489 }

490

491 .tooltip.top {

492 margin-top: -10px;

493 text-align: center;

494 }

495

496 .tooltip.right {

497 margin-left: 10px;

498 }

499

500 .tooltip.bottom {

501 margin-top: 10px;

502 text-align: center;

503 }

504

505 .tooltip.left {

506 margin-left: -10px;

507 text-align: right;

508 }

509

510 .tooltip-inner {

511 display: inline-block;

512 padding: 10px;

513 font-weight: normal;

514 background-color: white;

515 }

516

517 .tooltip-arrow {

518 position: absolute;

519 width: 0;

520 height: 0;

521 border-color: transparent;

522 border-style: solid;

523 }

524

525 .tooltip.top .tooltip-arrow {

526 bottom: -5px;

527 left: 50%;

528 margin-left: -5px;

529 border-top-color: white;

530 border-width: 5px 5px 0;

531 }

532

533 .tooltip.right .tooltip-arrow {

534 top: 50%;

535 left: -5px;

536 margin-top: -5px;

537 border-right-color: white;

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

539 }

540

541 .tooltip.left .tooltip-arrow {

542 top: 50%;

543 right: -5px;

544 margin-top: -5px;

545 border-left-color: white;

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

547 }

548

549 .tooltip.bottom .tooltip-arrow {

550 top: -5px;

551 left: 50%;

552 margin-left: -5px;

553 border-bottom-color: white;

554 border-width: 0 5px 5px;

555 }

556

557 /* Rules for Leaflet maps */

558

559 .leaflet-control .control-button {

560 display: block;

561 height: 40px;

562 width: 40px;

563 background-color: #333;

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

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

566 margin-bottom: 10px;

567 outline: none;

568

569 &:hover {

570 background-color: black;

571 }

572

573 &.active {

574 background-color: #9ed485;

575 }

576

577 &.disabled {

578 background-color: #333;

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

580 cursor: default;

581 }

582

583 .icon {

584 margin: 10px;

585 }

586 }

587

588 .leaflet-control .zoomin,

589 .control-layers .control-button {

590 margin-bottom: 0px;

591 border-radius: 4px 0 0 0;

592 }

593

594 .leaflet-control .zoomout,

595 .control-key .control-button {

596 margin-bottom: 0;

597 border-radius: 0;

598 }

599

600 .control-locate .control-button,

601 .control-share .control-button {

602 border-radius: 0 0 0 4px;

603 }

604

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

606

607 .map-layout {

608 #content {

609 overflow: hidden;

610 position: absolute;

611 top: $headerHeight;

612 bottom: 0;

613 width: 100%;

614 }

615

616 #sidebar, #map {

617 position: relative;

618 height: 100%;

619 overflow-x: hidden;

620 overflow-y: auto;

621 }

622

623 #sidebar {

624 float: left;

625 width: $sidebarWidth;

626 background: #fff;

627 font-size: 13px;

628

629 h2 {

630 padding: $lineheight $lineheight $lineheight/2;

631 }

632

633 h3, h4 {

634 margin-top: $lineheight;

635 margin-bottom: $lineheight/2;

636 }

637

638 .icon.close {

639 float: right;

640 cursor: pointer;

641 }

642 }

643

644 .overlay-sidebar #sidebar {

645 position: absolute;

646 z-index: 1000;

647 height: auto;

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

649 overflow: hidden;

650 }

651

652 .welcome {

653 p {

654 padding: $lineheight/2 $lineheight $lineheight;

655 font-size: 110%;

656 font-weight: 300;

657 }

658

659 .button {

660 width: 50%;

661 float: left;

662 margin: 0;

663 border-radius: 0;

664 font-weight: 400;

665 padding: .6em;

666

667 &.learn-more {

668 border-right: 1px solid #fff;

669 }

670 }

671 }

672

673 #map {

674 height: 100%;

675 overflow: hidden;

676 }

677

678 #map-ui {

679 display: none;

680 position: relative;

681 float: right;

682 width: 250px;

683 height: 100%;

684 background: white;

685 overflow: auto;

686

687 .section {

688 border-bottom: 1px solid #DDD;

689 padding: 10px 20px;

690 }

691

692 a.close-button {

693 float: right;

694 padding:5px;

695 font-size:20px;

696 line-height:10px;

697 color:#222;

698 border:1px solid #ddd;

699 }

700 }

701 }

702

703 .layers-ui,

704 .share-ui {

705 li:last-child {

706 margin-bottom: 0;

707 }

708 }

709

710 .layers-ui {

711 .base-layers {

712 .leaflet-container {

713 width: 100%;

714 height: 50px;

715 cursor: pointer;

716 }

717

718 li {

719 overflow: hidden;

720 border-radius: 3px;

721 border: 2px solid #fff;

722 margin-bottom: 8px;

723 position: relative;

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

725

726 label {

727 position: absolute;

728 top: 0;

729 left: 0;

730 padding: 2px 6px;

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

732 cursor: pointer;

733 font-weight: 500;

734 font-size: 16px;

735 text-stroke: 2px #fff;

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

737 input[type="radio"] {

738 display: none;

739 }

740 }

741

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

743 &:hover {

744 border-color: $grey;

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

746 }

747 }

748 }

749

750 .overlay-layers {

751 p {

752 font-size: 13px;

753 margin-bottom: 8px;

754 }

755 }

756 }

757

758 .share-ui {

759 .share-tabs {

760 margin-bottom: 10px;

761

762 a {

763 color: #fff;

764 text-decoration: none;

765 background-color: $lightblue;

766 padding: 5px 10px;

767 }

768

769 a:first-child {

770 border-right: 1px solid #fff;

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

772 }

773

774 a:last-child {

775 border-left: 1px solid #fff;

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

777 }

778

779 a.active {

780 background-color: $blue;

781 }

782 }

783

784 .share-tab {

785 display: none;

786 }

787

788 .share-link {

789 input[type=text],

790 textarea {

791 width: 100%;

792 font-family: monospace;

793 font-size: small;

794 line-height: 1.3;

795 }

796 }

797

798 .share-image {

799 label {

800 margin-right: 10px;

801 }

802 }

803

804 #embed_html {

805 resize: vertical;

806 }

807

808 #mapnik_scale {

809 width: 100px;

810 }

811 }

812

813 .leaflet-top {

814 top: $lineheight/2 !important;

815 .leaflet-control {

816 margin-right: 0px !important;

817 margin-top: 0px !important;

818 }

819 }

820

821 .leaflet-popup-scrolled {

822 padding-right: $lineheight;

823 border-bottom: 0px !important;

824 border-top: 0px !important;

825 }

826

827 .leaflet-popup-content-wrapper {

828 border-radius: 4px !important;

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

830 }

831

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

833

834 #attribution {

835 display: none;

836 }

837

838 .attribution_license,

839 .attribution_project {

840 text-align: left;

841 }

842

843 .attribution_notice {

844 text-align: center;

845 }

846

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

848

849 /* Rules for the sidebar */

850

851 .sidebar_heading {

852 position: relative;

853 padding: $lineheight/2 $lineheight;

854 // background: $offwhite;

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

856 > .close {

857 float: right;

858 margin-top: 2px;

859 cursor: pointer;

860 }

861 }

862

863 #browse_status {

864 p {

865 padding: $lineheight;

866 }

867 }

868

869 #sidebar_content {

870 .loader,

871 .load_more {

872 text-align: center;

873 margin: $lineheight auto;

874 width: $lineheight;

875 display: block;

876 }

877 }

878

879 /* Rules for the search box */

880

881 header .search_form {

882 display: none;

883 }

884

885 .search_form {

886 position: relative;

887 padding: $lineheight/2;

888 background-color: $lightgrey;

889

890 .query_wrapper {

891 position: relative;

892 overflow: hidden;

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

894 }

895

896 input[type=text] {

897 width: 100%;

898 height: 30px;

899 border-right: none;

900

901 transition: 300ms linear;

902 -webkit-transition: 300ms linear;

903 -moz-transition: 300ms linear;

904 }

905

906 input:focus {

907 outline: none;

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

909 }

910

911 input[type=submit] {

912 float: right;

913 width: auto;

914 min-width: 0;

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

916 }

917

918 .describe_location {

919 position: absolute;

920 top: 6px;

921 right: 6px;

922 font-size: 10px;

923 color: $blue;

924 }

925 }

926

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

928

929 #mapkey {

930 .mapkey-table-key img {

931 display: block;

932 margin-left: auto;

933 margin-right: auto;

934 }

935 td {

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

937 }

938 }

939

940 /* Rules for search sidebar */

941

942 .search_results_entry {

943 ul li {

944 border-bottom: $keyline;

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

946 }

947

948 .search_details {

949 display: block;

950 float: right;

951 text-align: right;

952 margin-top: 0.2em;

953 margin-left: 0.5em;

954 }

955 }

956

957 .search_results_error {

958 color: #f00;

959 }

960

961 /* Rules for entity history */

962

963 #sidebar_content {

964 .browse_details {

965 position: relative;

966 border-bottom: $keyline;

967 }

968 }

969

970 .browse_status {

971 display: none;

972 }

973

974 /* Rules for the history sidebar */

975

976 #sidebar .changesets {

977 li {

978 padding: $lineheight;

979 border-bottom: $keyline;

980 cursor: pointer;

981

982 &.selected { background: #FFFFE6; }

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

984 }

985

986 h4 {

987 margin-top: 0;

988 a {

989 color: #000;

990 }

991 }

992 }

993

994 /* Rules for the browse sidebar */

995

996 #sidebar_content {

997 .browse-section {

998 padding: $lineheight/2 $lineheight;

999

1000 h4:first-child {

1001 margin-top: 0;

1002 }

1003 }

1004

1005 .paginate {

1006 float: right;

1007 padding: 1px 6px;

1008 border: 1px solid #eee;

1009 border-radius: 3px;

1010 }

1011

1012 .paginate ul {

1013 padding-left: 20px;

1014 }

1015

1016 .browse-field {

1017 margin-bottom: 10px;

1018

1019 h4 {

1020 padding: 5px 0 5px 10px;

1021 font-size: 12px;

1022 border: 1px solid #CCC;

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

1024 background-color: #F6F6F6;

1025 }

1026

1027 p {

1028 padding: 7px 10px;

1029 font-size: 12px;

1030 background-color: #FFF;

1031 border: 1px solid #CCC;

1032 border-top: 0;

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

1034 }

1035 }

1036

1037 .browse-tag-list {

1038 background-color: #F6F6F6;

1039 border: 1px solid #ddd;

1040 border-radius: 3px;

1041 font-size: 12px;

1042

1043 li {

1044 border-bottom: 1px solid #ddd;

1045 }

1046

1047 li:last-child {

1048 border-bottom: 0;

1049 }

1050

1051 .browse-tag-k,

1052 .browse-tag-v {

1053 display: inline-block;

1054 width: 50%;

1055 float: left;

1056 padding: 6px 10px;

1057 }

1058

1059 .browse-tag-k {

1060 font-weight: 500;

1061 background-color: #F6F6F6;

1062 }

1063

1064 .browse-tag-v {

1065 border-left: 1px solid #ddd;

1066 background-color: #fff;

1067 }

1068 }

1069

1070 .warning {

1071 margin: $lineheight/2 0;

1072 padding: $lineheight/2;

1073 font-size: 90%;

1074 }

1075

1076 .note-comments li {

1077 margin: $lineheight/2 0;

1078 }

1079 }

1080

1081 /* Rules for export sidebar */

1082

1083 .export_form {

1084 padding: $lineheight;

1085

1086 .export_area_inputs,

1087 .export_button {

1088 text-align: center;

1089 }

1090

1091 .export_area_inputs {

1092 margin-bottom: $lineheight/2;

1093 input[type="text"] {

1094 width: 80px;

1095 margin-bottom: 5px;

1096 }

1097 }

1098

1099 .export_bound {

1100 margin: $lineheight/4;

1101 }

1102

1103 .export_button {

1104 margin-top: $lineheight;

1105 }

1106

1107 dl {

1108 padding-left: $lineheight/2;

1109 dd {

1110 margin-left: 0;

1111 margin-bottom: 10px;

1112 }

1113 }

1114 }

1115

1116 /* Rules for edit pages */

1117

1118 .site-edit {

1119 #content {

1120 position: absolute;

1121 top: $headerHeight;

1122 bottom: 0;

1123 width: 100%;

1124 }

1125

1126 #map {

1127 height: 100%;

1128 }

1129 }

1130

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

1132

1133 .content-heading {

1134 background: $lightgrey;

1135

1136 h1 { font-size: 22px; }

1137 }

1138

1139 .content-body {

1140 h1, h2, h3, p {

1141 margin-bottom: $lineheight;

1142 }

1143

1144 h1, h2, h3 {

1145 margin-top: $lineheight/2;

1146 }

1147 }

1148

1149 .content-inner {

1150 position: relative;

1151 max-width: 900px;

1152 margin: auto;

1153 padding: $lineheight;

1154 }

1155

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

1157

1158 .user-new,

1159 .user-create,

1160 .user-terms {

1161 .content-body .content-inner {

1162 padding: 0;

1163 }

1164 }

1165

1166 .user-new,

1167 .user-create,

1168 .user-terms,

1169 .user-confirm {

1170 .content-heading .content-inner {

1171 height: 200px;

1172 }

1173 }

1174

1175 .header-illustration {

1176 background-position: 0 0;

1177 background-repeat: no-repeat;

1178 position: absolute;

1179 height: 200px;

1180 width: 100%;

1181 left: 0;

1182 bottom: 0;

1183

1184 &.new-user-main {

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

1186 }

1187

1188 &.confirm-main {

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

1190 }

1191

1192 &.new-user-terms {

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

1194 }

1195

1196 &.new-user-arm {

1197 height: 110px;

1198 width: 130px;

1199 left: 260px;

1200 top: 160px;

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

1202 z-index: 100;

1203 }

1204 }

1205

1206 #content.maximised {

1207 top: 0;

1208 left: 0;

1209 right: 0;

1210 bottom: 0;

1211 border: 0;

1212 z-index: 1000;

1213 }

1214

1215 #slim_container {

1216 width: 100%;

1217 }

1218

1219 #slim_container_content {

1220 max-width: 50em;

1221 background-color: #FFFFFF;

1222 margin: $lineheight/2 auto;

1223 padding: 3px;

1224 border-radius: 25px;

1225 -moz-border-radius: 25px;

1226 border: 1px solid #e6e6e6;

1227 }

1228

1229 #slim_content {

1230 margin: $lineheight/2;

1231 margin-top: 95px;

1232 max-width: 50em;

1233

1234 .content-heading {

1235 margin-bottom: 15px;

1236 }

1237 }

1238

1239 #slim_header {

1240 margin: 30px $lineheight/2;

1241 position: absolute;

1242 top: 0px;

1243 margin-right: $lineheight/4;

1244 img {

1245 vertical-align: middle;

1246 margin-bottom: $lineheight/4;

1247 margin-right: $lineheight/4;

1248 }

1249 }

1250

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

1252

1253 .content_map {

1254 position: relative;

1255 width: 45%;

1256 height: 400px;

1257 border: 1px solid #ccc;

1258 margin-bottom: $lineheight;

1259 float: right;

1260 }

1261

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

1263

1264 #trace_list {

1265 font-size: $lineheight/2;

1266 border-width: 0px;

1267 text-align: right;

1268

1269 .trace_summary {

1270 font-size: 12px;

1271 color: gray;

1272 }

1273

1274 .trace_pending {

1275 color: red;

1276 }

1277

1278 .trace_public {

1279 color: green;

1280 }

1281

1282 .trace_identifiable {

1283 color: green;

1284 }

1285

1286 .trace_trackable {

1287 color: red;

1288 }

1289

1290 .trace_private {

1291 color: red;

1292 }

1293 }

1294

1295 /* Rules for the user profile page */

1296

1297 #userinformation {

1298

1299 min-height: 100px;

1300 .userinformation-inner {

1301 float: left;

1302 }

1303 h2 {

1304 margin-top: 0;

1305 }

1306 .user-description {

1307 width: 100%;

1308 clear: both;

1309 }

1310 .deemphasize {

1311 margin: 0;

1312 }

1313 }

1314

1315 .admin-user-info small {

1316 margin-bottom: $lineheight/2;

1317 display: inline;

1318 margin-right: $lineheight;

1319 }

1320

1321 .activity-block {

1322 clear: left;

1323 border-bottom: 1px solid #ccc;

1324 padding-bottom: $lineheight;

1325 float: left;

1326 h3 {

1327 margin-bottom: $lineheight/2;

1328 }

1329 }

1330

1331 .contact-activity {

1332 margin-top: $lineheight;

1333 width: 100%;

1334 }

1335

1336 .activity-details p {

1337 margin-left: 70px;

1338 margin-bottom: 0;

1339 }

1340

1341 #friends-container .contact-activity ul {

1342 margin-left: 70px;

1343 }

1344

1345 .user-view {

1346 p#no_home_location {

1347 margin: $lineheight;

1348 }

1349 .user_thumbnail {

1350 margin-top: $lineheight/4;

1351 float: left;

1352 }

1353 }

1354

1355 /* Rules for the user map */

1356

1357 .content_map .leaflet-popup-content {

1358 margin: $lineheight/2;

1359 min-height: 50px;

1360 }

1361

1362 /* Rules for user popups on maps */

1363

1364 .user_popup {

1365 min-width: 200px;

1366 p {

1367 padding: 0 0 5px 0;

1368 margin-top: 0 0 0 60px;

1369 font-size: 12px;

1370 }

1371 img.user_thumbnail {

1372 float: left;

1373 margin: 0 $lineheight/2 0 0;

1374 }

1375 }

1376

1377 /* Rules for the user list */

1378

1379 #user_list {

1380 font-size: $lineheight/2;

1381 width: 100%;

1382

1383 tr {

1384 vertical-align: middle;

1385 }

1386

1387 p {

1388 margin-top: 0px;

1389 margin-bottom: 0px;

1390 }

1391 }

1392

1393 #user_list_actions {

1394 float: right;

1395 margin-top: $lineheight/2;

1396 }

1397

1398 /* Rules for the diary list page */

1399

1400 .diary_post {

1401 position: relative;

1402 margin-top: $lineheight/2;

1403 padding-top: $lineheight;

1404 border-top: 1px solid #ccc;

1405

1406 .post_heading {

1407 margin-bottom: $lineheight;

1408

1409 h2 {

1410 margin-top: 0;

1411 margin-bottom: $lineheight/2;

1412 font-size: 24px;

1413 }

1414 }

1415

1416 img.user_thumbnail {

1417 float: left;

1418 }

1419

1420 small.deemphasize {

1421 float: left;

1422 display: block;

1423 }

1424

1425 ul.secondary-actions {

1426 display: inline-block;

1427 }

1428 }

1429

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

1431 display: inline;

1432 }

1433

1434 /* Rules for the diary entry page */

1435

1436 .diary_entry {

1437 #map {

1438 position: relative;

1439 width: 90%;

1440 height: 400px;

1441 border: 1px solid #ccc;

1442 display: none;

1443 margin-bottom: $lineheight;

1444 }

1445 #newcomment {

1446 border-top: 1px solid #ccc;

1447 padding-top: $lineheight;

1448 margin-top: $lineheight/2;

1449 }

1450 .comments {

1451 max-width: 740px;

1452 }

1453 .diary-comment {

1454 margin-top: $lineheight/2;

1455 border-top: 1px dashed #ccc;

1456 padding-top: $lineheight/2;

1457 &:first-child {

1458 margin-top: $lineheight;

1459 padding-top: $lineheight;

1460 border-top: 1px solid #ccc;

1461 }

1462 p {

1463 margin-bottom: $lineheight/2;

1464 }

1465 .comment-heading {

1466 margin-bottom: 0;

1467 margin-top: 0;

1468 }

1469 }

1470 }

1471

1472 .diary_entry-view img.user_thumbnail {

1473 float: left;

1474 }

1475

1476 /* Rules for the log in page */

1477

1478 #login_openid_buttons {

1479 margin-bottom: 0;

1480 }

1481

1482 #login_openid_buttons li {

1483 float: left;

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

1485 }

1486

1487 /* Rules for the account confirmation page */

1488

1489 .user-terms {

1490 .legale {

1491 border: 1px solid #ccc;

1492 padding: $lineheight;

1493 margin-bottom: $lineheight;

1494 overflow: auto;

1495 height: 10em;

1496 }

1497

1498 #decline {

1499 background: $lightblue;

1500 &:hover {

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

1502 }

1503 }

1504

1505 .form-row {

1506 margin: auto;

1507 max-width: 370px;

1508 }

1509 }

1510

1511 /* Rules for the account settings page */

1512

1513 #accountForm .user_map {

1514 position: relative;

1515 width: 500px;

1516 height: 400px;

1517 border: 1px solid #ccc;

1518 }

1519

1520 #accountForm .user_image {

1521 margin-bottom: 0;

1522 }

1523

1524 #accountForm #user_image {

1525 margin-left: 20px;

1526 }

1527

1528 #accountForm ul.accountImage-options {

1529 margin-left: 120px;

1530 }

1531

1532 .nohome .location {

1533 display: none;

1534 }

1535

1536 #homerow .message {

1537 display: none;

1538 }

1539

1540 .nohome .message {

1541 display: inline !important;

1542 }

1543

1544 .content_map.settings_map {

1545 width: 50%;

1546 float: none;

1547 }

1548

1549 /* Rules for the oauth settings page */

1550

1551 .oauth_clients .buttons .oauth-edit {

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

1553 }

1554

1555 .oauth_clients .buttons .oauth-delete {

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

1557 }

1558

1559 /* Rules for messages pages */

1560

1561 .messages {

1562 width: 100%;

1563 border: 1px solid #ddd;

1564

1565 input[type="submit"] {

1566 margin: auto;

1567 }

1568 tbody tr {

1569 border-top: 1px solid #ccc;

1570 }

1571

1572 .inbox-row {

1573 background: #f8f8ff;

1574 }

1575

1576 .inbox-row-unread {

1577 background:#CBEEA7;

1578 }

1579

1580 .right {

1581 float: right;

1582 }

1583

1584 tr td,

1585 tr th {

1586 padding: $lineheight/4;

1587 }

1588 p:last-child,

1589 h2:last-child,

1590 h3:last-child,

1591 ol:last-child,

1592 ul:last-child {

1593 margin-bottom:0;

1594 }

1595 tr td {

1596 height: 30px;

1597 border-right: 1px solid $lightgrey;

1598 }

1599 }

1600

1601 .inbox-row .inbox-mark-read {

1602 display: none;

1603 }

1604

1605 .info-line {

1606 margin-bottom: $lineheight;

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

1608 border-bottom: 1px solid #ccc;

1609

1610 form, form div {

1611 display: inline;

1612 }

1613 }

1614

1615 .info-line .user_thumbnail_tiny {

1616 vertical-align: middle;

1617 }

1618

1619 .inbox-mark-unread,

1620 .inbox-mark-read,

1621 .inbox-delete {

1622 width: 1%;

1623 }

1624

1625 .inbox-row-unread .inbox-mark-unread {

1626 display: none;

1627 }

1628

1629 .message-read .message-buttons {

1630 margin-top: $lineheight;

1631 padding-top: $lineheight;

1632 border-top: 1px solid $lightgrey;

1633 }

1634

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

1636 border-radius: 0;

1637 }

1638

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

1640

1641 .error {

1642 padding: $lineheight;

1643 background-color: #ff7070;

1644 }

1645

1646 .warning {

1647 padding: $lineheight;

1648 background-color: #ffe0cc;

1649 }

1650

1651 .notice {

1652 padding: $lineheight;

1653 background-color: #CBEEA7;

1654 }

1655

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

1657

1658 .field_with_errors {

1659 padding: 2px;

1660 background-color: #ff7070;

1661 display: inline-block;

1662 }

1663

1664 .formError {

1665 display: inline-block;

1666 padding: 5px 10px;

1667 margin-top: 5px;

1668 border-radius: 4px;

1669 font-size: 12px;

1670 color: #fff;

1671 background-color: #ff7070;

1672 }

1673

1674 /* Rules for rails validation error boxes */

1675

1676 #errorExplanation {

1677 width: 400px;

1678 border: 2px solid #ff7070;

1679 padding: 0 $lineheight/2;

1680 margin-bottom: $lineheight;

1681 background-color: #f0f0f0;

1682

1683 h2 {

1684 margin: 0 -10px 10px -10px;

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

1686 font-weight: 500;

1687 font-size: 12px;

1688 background-color: #c00;

1689 color: #fff;

1690 text-align: left;

1691 }

1692

1693 p {

1694 color: #333;

1695 margin-bottom: 0px;

1696 padding: $lineheight/4;

1697 }

1698

1699 ul {

1700 padding-left: $lineheight;

1701

1702 li {

1703 font-size: 12px;

1704 list-style: disc;

1705 }

1706 }

1707 }

1708

1709 /* Rules for forms */

1710

1711 .standard-form {

1712 fieldset {

1713 margin-bottom: $lineheight;

1714 }

1715 label.standard-label {

1716 display: block;

1717 margin-bottom: $lineheight/4;

1718 font-size: $typeheight;

1719 font-weight: 500;

1720 line-height: 1.5;

1721 }

1722 label.standard-label.secondary {

1723 display: inline-block;

1724 font-weight: normal;

1725 }

1726 .form-help {

1727 font-weight: normal;

1728 }

1729 .form-column {

1730 float: left;

1731 margin-right: 20px;

1732 }

1733 .form-divider {

1734 margin-top: $lineheight;

1735 padding-top: $lineheight;

1736 border-top: 1px solid $lightgrey;

1737 }

1738 .horizontal-list .form-row {

1739 float: left;

1740 padding-right: 10px;

1741 }

1742 .form-row {

1743 margin-bottom: $lineheight/2;

1744 }

1745 .form-list {

1746 margin-bottom: 0;

1747 }

1748 .form-list li {

1749 margin-bottom: 5px;

1750 }

1751 input[type="checkbox"],

1752 input[type="radio"] {

1753 float: left;

1754 margin-top: 5px;

1755 }

1756 }

1757

1758 #remember_me_openid {

1759 display: block;

1760 }

1761

1762 input[type="checkbox"],

1763 input[type="radio"] {

1764 margin-right: 5px;

1765 }

1766

1767 input[type="text"],

1768 input[type="email"],

1769 input[type="url"],

1770 input[type="password"],

1771 textarea {

1772 border: 1px solid #ccc;

1773 padding: 2px 5px;

1774 margin: 0;

1775 width: 200px;

1776 }

1777

1778 textarea {

1779 padding: 5px;

1780 width: 100%;

1781 }

1782

1783 /* Rules for user images */

1784

1785 img.user_image {

1786 max-width: 100px;

1787 max-height: 100px;

1788 border: 1px solid #ccc;

1789 margin-bottom: $lineheight;

1790 float: left;

1791 margin-right: $lineheight;

1792 }

1793

1794 img.user_thumbnail {

1795 max-width: 50px;

1796 max-height: 50px;

1797 border: 1px solid #ccc;

1798 margin-right: $lineheight;

1799 }

1800

1801 img.user_thumbnail_tiny {

1802 max-width: 25px;

1803 max-height: 25px;

1804 border: 1px solid #ccc;

1805 }

1806

1807 /* Rules for geo microformats */

1808

1809 abbr.geo {

1810 border-bottom: none;

1811 }

1812

1813 /* Rules for RSS buttons */

1814

1815 .rsssmall {

1816 position: relative;

1817 top: 3px;

1818 }

1819

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

1821

1822 ul.secondary-actions {

1823 font-style: normal;

1824 margin-bottom: 0;

1825 margin-left: 0;

1826 &.pager {

1827 display: inline-block;

1828 margin-right: 60px;

1829 }

1830 > li {

1831 display: block;

1832 float: left;

1833 list-style: none;

1834 border-left: 1px solid #ccc;

1835 padding-left: $lineheight/2;

1836 margin-right: $lineheight/2;

1837 &:first-child {

1838 border-left: 0;

1839 padding-left: 0;

1840 }

1841 &:last-child {

1842 margin-right: 0px;

1843 }

1844 }

1845 }

1846

1847 div.secondary-actions {

1848 padding: 10px;

1849 border-top: 1px solid #ccc;

1850 text-align: center;

1851 }

1852

1853 /* Utility for managing inner content areas */

1854

1855 .inner22 { padding: $lineheight;}

1856

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

1858

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

1860

1861 .inner20 { padding: $lineheight 0;}

1862

1863 .inner02 { padding: 0 $lineheight;}

1864

1865 /* Utility for general button styles */

1866

1867 input[type="button"],

1868 input[type="submit"],

1869 input[type="reset"],

1870 a.button {

1871 cursor: pointer;

1872 border: 0;

1873 display: inline-block;

1874 line-height: 20px;

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

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

1877 min-width: 120px;

1878 margin: 0 0 $lineheight/2 0;

1879 color: white;

1880 background: $blue;

1881 text-align: center;

1882 border-radius: 2px;

1883 -moz-border-radius: 2px;

1884 &:hover {

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

1886 text-decoration: none;

1887 }

1888 &.deemphasize {

1889 background: $lightblue;

1890 &:hover {

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

1892 }

1893 }

1894 &:disabled {

1895 background: $lightgrey;

1896 &:hover {

1897 background: $lightgrey;

1898 }

1899 }

1900 &:last-child {

1901 margin-bottom: 0;

1902 }

1903 }

1904

1905 .buttons {

1906 min-width: 200px;

1907 input[type="submit"],

1908 input[type="button"],

1909 input[type="reset"],

1910 .button {

1911 box-sizing: border-box;

1912 float: left;

1913 border-radius: 0;

1914 margin:0;

1915 min-width: 75px;

1916 max-width: 180px;

1917 border-right:1px solid white;

1918 text-overflow: ellipsis;

1919 white-space: nowrap;

1920 overflow: hidden;

1921 }

1922 input:first-child,

1923 .button:first-child {

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

1925 }

1926 input:last-child,

1927 .button:last-child {

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

1929 border-right-width: 0;

1930 }

1931 input:only-child,

1932 .button:only-child,

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

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

1935 border-radius:2px;

1936 border-right-width: 0;

1937 }

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

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

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

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

1942 border-right-width: 0;

1943 }

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

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

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

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

1948 border-right-width: 1px;

1949 }

1950 }

1951

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

1953

1954 .table0,

1955 .item0 {

1956 background: $offwhite;

1957 }

1958

1959 .table1,

1960 .item1 {

1961 background: #fff;

1962 }

1963

1964 /* Rules for OpenID logo */

1965

1966 .openid_logo {

1967 vertical-align: text-bottom;

1968 border: 0;

1969 }

1970

1971 /* Rules for rich text */

1972

1973 .richtext,

1974 .prose {

1975 h1, h2 {

1976 padding-bottom: $lineheight/2;

1977 border-bottom: 1px dashed #cccccc;

1978 margin-bottom: $lineheight/2;

1979 }

1980

1981 h1 {

1982 font-size: 24px;

1983 }

1984

1985 h2 {

1986 font-size: 18px;

1987 }

1988

1989 h3 {

1990 font-size: $typeheight;

1991 }

1992

1993 code {

1994 font-size: 13px;

1995 background: #e8e8e8;

1996 padding: 2px 3px;

1997 }

1998

1999 pre {

2000 font-size: 13px;

2001 background: #e8e8e8;

2002 padding: 2px 3px;

2003

2004 code {

2005 padding: 0;

2006 }

2007 }

2008

2009 img {

2010 padding: $lineheight;

2011 background-color: $offwhite;

2012 display: block;

2013 max-width: 100%;

2014 margin: auto;

2015 }

2016

2017 blockquote {

2018 border-left: $lineheight solid $offwhite;

2019 padding-left: $lineheight;

2020 margin: 0;

2021 color: #7E7E7E;

2022 }

2023

2024 ul, ol {

2025 padding-left: $lineheight;

2026 margin-bottom: $lineheight;

2027 margin-left: $lineheight;

2028 }

2029

2030 ul li {

2031 list-style: disc;

2032 }

2033

2034 ol li {

2035 list-style: decimal;

2036 }

2037 }

2038

2039 .diary_post .richtext {

2040 margin-top: $lineheight;

2041 }

2042

2043 .comments .richtext {

2044 margin-left: 70px;

2045 margin-top: 0;

2046 }

2047

2048 /* Rules for rich text editors */

2049

2050 .richtext_container {

2051 margin-bottom: $lineheight;

2052

2053 .richtext_content {

2054 width: 50%;

2055 display: inline-block;

2056 vertical-align: top;

2057

2058 .richtext_preview {

2059 display: inline-block;

2060 padding: $lineheight;

2061 background-color: $offwhite;

2062 overflow-x: auto;

2063

2064 &.loading {

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

2066 background-repeat: no-repeat;

2067 background-position: center;

2068 }

2069

2070 > :first-child {

2071 margin-top: 0px;

2072 }

2073 }

2074 }

2075

2076 .richtext_help {

2077 display: inline-block;

2078 vertical-align: top;

2079 margin-left: 15px;

2080 background-color: #f8f8ff;

2081 padding: $lineheight/2;

2082 width: 220px;

2083

2084 ul {

2085 margin-bottom: 0;

2086 }

2087

2088 h4.heading, li {

2089 border-bottom: 1px solid #ccc;

2090 margin-bottom: $lineheight/4;

2091 padding-bottom: $lineheight/4;

2092 }

2093

2094 li h4, li span, li p {

2095 display: inline-block;

2096 vertical-align: top;

2097 font-size: 11px;

2098 }

2099

2100 li h4 {

2101 width: 40%;

2102 margin: 0;

2103 }

2104

2105 li span, li p {

2106 width: 50%;

2107 margin-left: $lineheight/2;

2108 margin-bottom: $lineheight/4;

2109 white-space: nowrap;

2110 }

2111 }

2112 }

2113

2114 /* Rules for the user notes list */

2115

2116 .note_list {

2117 tr.creator {

2118 background-color: #eeeeee;

2119 }

2120

2121 td {

2122 padding: 3px;

2123 }

2124

2125 p {

2126 margin-bottom: 0px;

2127 }

2128 }

2129

2130 /* Rules for the iD editor */

2131

2132 .id-embed {

2133 width: 100%;

2134 height: 100%;

2135 }

2136

2137 /* Rules for dropdown menus */

2138

2139 .dropdown {

2140 position: relative;

2141 }

2142

2143 .dropdown-toggle {

2144 *margin-bottom: -3px;

2145 }

2146

2147 .dropdown-toggle:active,

2148 .open .dropdown-toggle {

2149 outline: 0;

2150 }

2151

2152 .caret {

2153 display: inline-block;

2154 width: 0;

2155 height: 0;

2156 vertical-align: top;

2157 border-top: 4px solid #000000;

2158 border-right: 4px solid transparent;

2159 border-left: 4px solid transparent;

2160 content: "";

2161 }

2162

2163 .dropdown .caret {

2164 margin-top: 8px;

2165 margin-left: 2px;

2166 }

2167

2168 .dropdown-menu {

2169 position: absolute;

2170 top: 100%;

2171 left: -1px;

2172 z-index: 1000;

2173 display: none;

2174 float: left;

2175 min-width: 160px;

2176 padding: 5px 0;

2177 margin: 0;

2178 list-style: none;

2179 background-color: #ffffff;

2180 border: 1px solid #ccc;

2181 border-radius: 0 3px 3px;

2182 *border-right-width: 2px;

2183 *border-bottom-width: 2px;

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

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

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

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

2188 -moz-background-clip: padding;

2189 background-clip: padding-box;

2190 }

2191

2192 .dropdown-menu.pull-right {

2193 right: 0;

2194 left: auto;

2195 }

2196

2197 .dropdown-menu .divider {

2198 *width: 100%;

2199 height: 1px;

2200 margin: 9px 1px;

2201 *margin: -5px 0 5px;

2202 overflow: hidden;

2203 background-color: #e5e5e5;

2204 border-bottom: 1px solid #ffffff;

2205 }

2206

2207 .dropdown-menu > li > a {

2208 display: block;

2209 padding: 3px 10px;

2210 clear: both;

2211 font-weight: normal;

2212 line-height: 20px;

2213 color: #333333;

2214 white-space: nowrap;

2215 }

2216

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

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

2219 .dropdown-submenu:hover > a,

2220 .dropdown-submenu:focus > a {

2221 color: #ffffff;

2222 text-decoration: none;

2223 background-color: $green;

2224 }

2225

2226 .dropdown-menu > .active > a,

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

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

2229 color: #ffffff;

2230 text-decoration: none;

2231 background-color: $green;

2232 outline: 0;

2233 }

2234

2235 .dropdown-menu > .disabled > a,

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

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

2238 color: #999999;

2239 }

2240

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

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

2243 text-decoration: none;

2244 cursor: default;

2245 background-color: transparent;

2246 background-image: none;

2247 }

2248

2249 .open {

2250 *z-index: 1000;

2251 }

2252

2253 .open > .dropdown-menu {

2254 display: block;

2255 }

2256

2257 .dropdown-backdrop {

2258 position: fixed;

2259 top: 0;

2260 right: 0;

2261 bottom: 0;

2262 left: 0;

2263 z-index: 990;

2264 }

2265

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

2267 .site-welcome {

2268 .center {

2269 text-align: center;

2270 .sprite {

2271 float: none;

2272 margin: auto;

2273 }

2274 }

2275

2276 .sprite {

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

2278 background-size: 500px 250px;

2279 display: block;

2280 float: left;

2281 }

2282

2283 .icon-list {

2284 padding-bottom: 20px;

2285 div {

2286 margin-bottom: 10px;

2287 p {

2288 padding-top: 10px;

2289 }

2290 }

2291 }

2292 .sprite.small {

2293 width: 50px;

2294 height: 50px;

2295 }

2296

2297 .sprite.x {

2298 background-position: -50px 0;

2299 }

2300

2301 .sprite.term {

2302 margin-right: 10px;

2303 vertical-align: middle;

2304 }

2305

2306 .sprite.node {

2307 background-position: -100px 0;

2308 }

2309

2310 .sprite.way {

2311 background-position: -150px 0;

2312 }

2313

2314 .sprite.tag {

2315 background-position: -200px 0;

2316 }

2317

2318 .sprite.editor {

2319 background-position: -250px 0;

2320 }

2321

2322 .sprite.question {

2323 background-position: -300px 0;

2324 }

2325

2326 .start-mapping {

2327 margin: auto;

2328 cursor: pointer;

2329 border: none;

2330 padding: 20px 40px;

2331 font-size: 30px;

2332 text-decoration: none;

2333 }

2334

2335 .note-box {

2336 margin-top: 20px;

2337 background-color: $offwhite;

2338 }

2339

2340 .icon.note {

2341 background-color: #333;

2342 border-radius: 4px;

2343 }

2344 }

2345

2346 .site-about #content {

2347 //background-color: #000;

2348 background-color: #eee;

2349 background-position: 50% 50%;

2350 background-repeat: no-repeat;

2351 background-size: cover;

2352 background-attachment: fixed;

2353

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

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

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

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

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

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

2360

2361 .caption {

2362 max-width: 200px;

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

2364 position: fixed;

2365 text-align: right;

2366 right: 20px;

2367 bottom: 60px;

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

2369 color: #eee;

2370 opacity: 0.8;

2371 display: none;

2372 }

2373

2374 .caption a {

2375 color: white;

2376 white-space: nowrap;

2377 text-decoration: none;

2378 }

2379

2380 a.next {

2381 display: block;

2382 position: fixed;

2383 right: 10px;

2384 bottom: 10px;

2385 width: 40px;

2386 height: 40px;

2387 border-radius: 5px;

2388 text-indent: -9999px;

2389 overflow: hidden;

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

2391 background-color: #000;

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

2393 }

2394

2395 .content-inner {

2396 position: relative;

2397 color: #333;

2398 min-width: 320px;

2399 max-width: 640px;

2400

2401 .section {

2402 margin-bottom: 30px;

2403 }

2404

2405 .section:last-child {

2406 margin-bottom: 0;

2407 }

2408 }

2409

2410 .text {

2411 background: white;

2412 padding: 40px;

2413 }

2414

2415 .attr {

2416 position: relative;

2417 padding: 170px 40px 20px;

2418 background: #333;

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

2420 margin-bottom: 0;

2421 margin-top: -20px;

2422

2423 h1 {

2424 display: block;

2425 color: white;

2426 font-weight: 300;

2427 font-size: 34px;

2428 span {

2429 color: #76c551;

2430 }

2431 }

2432

2433 .user-image {

2434 position: absolute;

2435 top: 0px;

2436 right: 240px;

2437 left: 0px;

2438 height: 150px;

2439 background-position: 0 50%;

2440 background-repeat: no-repeat;

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

2442 background-size: cover;

2443 background-color: #76c551;

2444 }

2445

2446 .byosm {

2447 position: absolute;

2448 top: 0px;

2449 right: 0px;

2450 z-index: 1;

2451 width: 240px;

2452 height: 150px;

2453 padding: 20px 20px 20px 40px;

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

2455 white-space: nowrap;

2456 color: #fff;

2457 background: #76c551;

2458 }

2459

2460 .byosm span {

2461 display: inline-block;

2462 width: 20px;

2463 margin-left: -20px;

2464 }

2465 }

2466

2467 h2 {

2468 margin-bottom: 10px;

2469 }

2470

2471 .icon {

2472 width: 30px;

2473 height: 30px;

2474 margin-right: 10px;

2475 vertical-align: middle;

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

2477

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

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

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

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

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

2483 }

2484 }

2485

2486 @import 'browse';

2487

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

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

2490 display: none;

2491 }

2492 }

2493