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

1 @import "parameters";

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

5 /* Minimal CSS reset */

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

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

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

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

22 table {

23 border-collapse: collapse;

24 border-spacing: 0;

25 }

27 li { list-style: none; }

29 input,

30 select,

31 textarea,

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

34 abbr, acronym {

35 border-bottom: .1em dotted;

36 cursor: help;

37 }

39 strong {

40 font-weight: bold;

41 }

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

45 .clearfix:before,

46 .clearfix:after {

47 content: " ";

48 display: table;

49 }

51 .clearfix:after {

52 clear: both;

53 }

55 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

69 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

85 .fillL { background-color: white; }

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

89 * {

90 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 h1, h2, h3 {

106 font-weight: 600;

107 line-height: 1.2;

108 }

109

110 h4, h5 {

111 font-weight: 500;

112 }

113

114 h1 {

115 font-size: 18px;

116 }

117

118 h2, h3 {

119 font-size: 16px;

120 }

121

122 p > img {

123 width: auto;

124 max-width: 100%;

125 }

126

127 small, aside {

128 font-size: 12px;

129 }

130

131 #container { position: relative; }

132

133 .column-1 {

134 width: 50%;

135 margin: 0 0 $lineheight/2 0;

136 }

137

138 .small_icon {

139 vertical-align: middle;

140 margin-right: $lineheight/4;

141 }

142

143 .red { color: $red; }

144

145 /* Rules for icons */

146

147 .icon {

148 display:inline-block;

149 vertical-align:top;

150 width:20px;

151 height:20px;

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

153 text-indent:-9999px;

154 overflow:hidden;

155 }

156

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

172 .icon.query { background-position: -260px 0; }

173

174 /* Rules for links */

175

176 a {

177 color: #24d;

178 text-decoration: none;

179 -webkit-appearance: none;

180 outline: 0;

181 &:hover {

182 text-decoration: underline;

183 }

184 }

185

186 /* Rules for horizontal lines */

187

188 hr {

189 border: none;

190 background-color: #ccc;

191 color: #ccc;

192 height: 1px;

193 }

194

195 /* General styles for tables */

196

197 table {

198 width: 100%;

199 margin-bottom: $lineheight;

200 th, td {

201 text-align: left;

202 padding: $lineheight/4;

203 line-height: $lineheight;

204 }

205 th {

206 font-weight: 600;

207 vertical-align: top;

208 }

209 td {

210 vertical-align: middle;

211 }

212 }

213

214 /* Utility for de-emphasizing content */

215

216 .deemphasize {

217 color: #999;

218 a {

219 color: $blue;

220 }

221 }

222

223 /* Rules for the header */

224

225 #menu-icon {

226 display: none !important;

227 float: right;

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

229 background-size: 30px 30px;

230 display: block;

231 width: 30px;

232 height: 30px;

233 margin: 14px 10px 0 0;

234 opacity: 0.6;

235 }

236

237 header {

238 height: $headerHeight;

239 position: relative;

240 z-index: 1001;

241 font-size: 14px;

242

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

244 display: inline-block;

245 }

246

247 > * {

248 height: 100%;

249 padding: $lineheight/2;

250 }

251

252 h1, nav.primary {

253 float: left;

254 }

255

256 a, a:hover {

257 text-decoration: none;

258 }

259

260 img.logo {

261 width: 30px;

262 height: 30px;

263 margin-top: -2px;

264 vertical-align: middle;

265 }

266

267 h1 {

268 margin: 0;

269 padding-top: 15px;

270

271 a {

272 color: #000;

273 }

274 }

275 }

276

277 nav.primary {

278 > ul {

279 $border: 1px solid $green;

280

281 border: $border;

282 border-radius: $border-radius;

283

284 > li {

285 border-right: $border;

286 float: left;

287 &:last-child {

288 border-right: 0;

289 }

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

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

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

293 &.dropdown {

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

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

296 }

297 }

298 }

299

300 a.tab,

301 .dropdown-toggle {

302 display: inline-block;

303 font-weight: 500;

304 color: $green;

305 padding: 5px 15px;

306 }

307

308 .dropdown-toggle {

309 padding: 5px 6px;

310 }

311

312 .caret {

313 border-top-color: $green;

314 margin-top: 10px;

315 }

316

317 .disabled a {

318 color: #ccc;

319 cursor: default;

320

321 .caret {

322 border-top-color: #ccc;

323 }

324 }

325

326 > ul li.current {

327 background-color: $green;

328

329 .tab {

330 color: #fff;

331 }

332

333 .caret {

334 border-top-color: #fff;

335 }

336 }

337 }

338

339 nav.secondary {

340 position: absolute;

341 right: 0;

342

343 > ul {

344 vertical-align: middle;

345 a, .dropdown-toggle {

346 display: inline-block;

347 text-decoration: none;

348 color: $darkgrey;

349 padding: 5px;

350

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

352 }

353 }

354

355 > ul li.current a {

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

357 }

358

359 .user-menu {

360 $border: 1px solid $grey;

361 border: $border;

362 border-radius: $border-radius;

363 margin-left: 10px;

364

365 > li {

366 border-right: $border;

367 float: left;

368 &:last-child {

369 border-right: 0;

370

371 > a {

372 border-radius: 0 $border-radius $border-radius 0;

373 }

374 }

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

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

377 }

378

379 a {

380 padding: 5px 15px;

381

382 }

383

384 &.logged-in > a {

385 padding: 0;

386 > .user-button {

387 line-height: 1.8;

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

389 display: inline-block;

390 color: $darkgrey;

391 }

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

393 }

394 }

395

396 .caret {

397 border-top-color: $grey;

398 margin-top: 9px;

399 }

400

401 img.user_thumbnail_tiny {

402 border: 0;

403 vertical-align: top;

404 margin-top: 0px;

405 margin: 4px 0 0 4px;

406 border-radius: 2px;

407 }

408

409 #inboxanchor {

410 display: inline-block;

411 vertical-align: top;

412 height: 25px;

413 margin: 3px 0 3px 3px;

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

415 line-height: 20px;

416 border-radius: 2;

417 }

418

419 .dropdown-menu {

420 left: auto;

421 right: -1px;

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

423

424 .count-number {

425 float: right;

426 padding: 0 5px;

427 margin: 0;

428 }

429 }

430 }

431

432 #compact-secondary-nav {

433 display: none;

434 ul li a {

435 width: 100%;

436 color: #333;

437 &:hover { color: #fff; }

438 }

439 }

440

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

442 #compact-secondary-nav {

443 display: inline-block;

444 }

445 .compact-hide {

446 display: none;

447 }

448 }

449

450 /* Utility for styling notification numbers */

451

452 .count-number {

453 padding: 2px $lineheight/4;

454 border-radius: 2px;

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

456 margin: 0 2px;

457 font-size: 11px;

458 color: #333;

459 }

460

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

462

463 #noscript {

464 z-index: 20000000;

465 margin-left: 400px;

466 margin-top: 50px;

467 }

468

469 /* Rules for bootstrap tooltips */

470

471 .tooltip {

472 position: absolute;

473 display: none;

474 color: #333;

475 text-align: left;

476 font-size: 12px;

477 max-width: 250px;

478 }

479

480 .tooltip.in {

481 opacity: 0.8;

482 z-index: 1030;

483 height: auto;

484 display: block;

485 }

486

487 .tooltip.top {

488 margin-top: -10px;

489 text-align: center;

490 }

491

492 .tooltip.right {

493 margin-left: 10px;

494 }

495

496 .tooltip.bottom {

497 margin-top: 10px;

498 text-align: center;

499 }

500

501 .tooltip.left {

502 margin-left: -10px;

503 text-align: right;

504 }

505

506 .tooltip-inner {

507 display: inline-block;

508 padding: 10px;

509 font-weight: normal;

510 background-color: white;

511 }

512

513 .tooltip-arrow {

514 position: absolute;

515 width: 0;

516 height: 0;

517 border-color: transparent;

518 border-style: solid;

519 }

520

521 .tooltip.top .tooltip-arrow {

522 bottom: -5px;

523 left: 50%;

524 margin-left: -5px;

525 border-top-color: white;

526 border-width: 5px 5px 0;

527 }

528

529 .tooltip.right .tooltip-arrow {

530 top: 50%;

531 left: -5px;

532 margin-top: -5px;

533 border-right-color: white;

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

535 }

536

537 .tooltip.left .tooltip-arrow {

538 top: 50%;

539 right: -5px;

540 margin-top: -5px;

541 border-left-color: white;

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

543 }

544

545 .tooltip.bottom .tooltip-arrow {

546 top: -5px;

547 left: 50%;

548 margin-left: -5px;

549 border-bottom-color: white;

550 border-width: 0 5px 5px;

551 }

552

553 /* Rules for Leaflet maps */

554

555 .leaflet-control .control-button {

556 display: block;

557 height: 40px;

558 width: 40px;

559 background-color: #333;

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

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

562 margin-bottom: 10px;

563 outline: none;

564

565 &:hover {

566 background-color: black;

567 }

568

569 &.disabled {

570 background-color: #333;

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

572 cursor: default;

573 }

574

575 &.active {

576 background-color: #9ed485;

577 }

578

579 .icon {

580 margin: 10px;

581 }

582 }

583

584 .leaflet-control .zoomin,

585 .control-layers .control-button {

586 margin-bottom: 0px;

587 border-radius: 4px 0 0 0;

588 }

589

590 .leaflet-control .zoomout,

591 .control-key .control-button {

592 margin-bottom: 0;

593 border-radius: 0;

594 }

595

596 .control-locate .control-button,

597 .control-share .control-button {

598 border-radius: 0 0 0 4px;

599 }

600

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

602

603 .map-layout {

604 #content {

605 overflow: hidden;

606 position: absolute;

607 top: $headerHeight;

608 bottom: 0;

609 width: 100%;

610 }

611

612 #sidebar, #map {

613 position: relative;

614 height: 100%;

615 overflow-x: hidden;

616 overflow-y: auto;

617 }

618

619 #sidebar {

620 float: left;

621 width: $sidebarWidth;

622 background: #fff;

623 font-size: 12px;

624

625 h2 {

626 padding: $lineheight $lineheight $lineheight/2;

627 }

628

629 h3, h4 {

630 margin-top: $lineheight;

631 margin-bottom: $lineheight/2;

632 font-size: 13px;

633 }

634

635 .icon.close {

636 float: right;

637 cursor: pointer;

638 }

639 }

640

641 .welcome {

642 display: none;

643 }

644

645 .overlay-sidebar #sidebar {

646 position: absolute;

647 z-index: 1000;

648 height: auto;

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

650 overflow: hidden;

651 .welcome {

652 display: block;

653 }

654 #sidebar_content {

655 display: none;

656 }

657 }

658

659 .welcome {

660 p {

661 padding: $lineheight/2 $lineheight $lineheight;

662 font-size: 110%;

663 font-weight: 300;

664 }

665

666 .button {

667 width: 50%;

668 float: left;

669 margin: 0;

670 border-radius: 0;

671 font-weight: normal;

672 padding: .6em;

673

674 &.learn-more {

675 border-right: 1px solid #fff;

676 }

677 }

678 }

679

680 #map {

681 height: 100%;

682 overflow: hidden;

683

684 &.query-active {

685 cursor: help;

686 }

687

688 &.query-disabled {

689 cursor: not-allowed;

690 }

691 }

692

693 #map-ui {

694 display: none;

695 position: relative;

696 float: right;

697 width: 250px;

698 height: 100%;

699 background: white;

700 overflow: auto;

701

702 .section {

703 border-bottom: 1px solid #DDD;

704 padding: 10px 20px;

705 }

706

707 a.close-button {

708 float: right;

709 padding:5px;

710 font-size:20px;

711 line-height:10px;

712 color:#222;

713 border:1px solid #ddd;

714 }

715

716 .tooltip {

717 opacity: 1;

718 border: 1px solid #ccc;

719 .tooltip-arrow {

720 border-top-color: #ccc;

721 }

722 }

723 }

724 }

725

726 .layers-ui,

727 .share-ui {

728 li:last-child {

729 margin-bottom: 0;

730 }

731 }

732

733 .layers-ui {

734 .base-layers {

735 .leaflet-container {

736 width: 100%;

737 height: 50px;

738 cursor: pointer;

739 }

740

741 li {

742 overflow: hidden;

743 border-radius: 3px;

744 border: 2px solid #fff;

745 margin-bottom: 8px;

746 position: relative;

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

748

749 label {

750 position: absolute;

751 top: 0;

752 left: 0;

753 padding: 2px 6px;

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

755 cursor: pointer;

756 font-weight: 600;

757 font-size: 16px;

758 text-stroke: 2px #fff;

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

760 z-index: 2; // For IE9

761 input[type="radio"] {

762 display: none;

763 }

764 }

765

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

767 &:hover {

768 border-color: $grey;

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

770 }

771 }

772 }

773

774 .overlay-layers {

775 p {

776 font-size: 13px;

777 margin-bottom: 8px;

778 }

779 li.disabled { color: #999; }

780 }

781 }

782

783 .share-ui {

784 .share-tabs {

785 margin-bottom: 10px;

786

787 a {

788 color: #fff;

789 text-decoration: none;

790 background-color: $lightblue;

791 padding: 5px 10px;

792 }

793

794 a:first-child {

795 border-right: 1px solid #fff;

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

797 }

798

799 a:last-child {

800 border-left: 1px solid #fff;

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

802 }

803

804 a.active {

805 background-color: $blue;

806 }

807 }

808

809 .share-tab {

810 display: none;

811 }

812

813 .share-link {

814 input[type=text],

815 textarea {

816 width: 100%;

817 font-family: monospace;

818 font-size: small;

819 line-height: 1.3;

820 }

821 }

822

823 .share-image {

824 label {

825 margin-right: 10px;

826 }

827 }

828

829 #embed_html {

830 resize: vertical;

831 }

832

833 #mapnik_scale {

834 width: 100px;

835 }

836 }

837

838 .leaflet-top {

839 top: $lineheight/2 !important;

840 .leaflet-control {

841 margin-right: 0px !important;

842 margin-top: 0px !important;

843 }

844 }

845

846 .leaflet-popup-scrolled {

847 padding-right: $lineheight;

848 border-bottom: 0px !important;

849 border-top: 0px !important;

850 }

851

852 .leaflet-popup-content-wrapper {

853 border-radius: 4px !important;

854 }

855

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

857

858 #attribution {

859 display: none;

860 }

861

862 .attribution_license,

863 .attribution_project {

864 text-align: left;

865 }

866

867 .attribution_notice {

868 text-align: center;

869 }

870

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

872

873 /* Rules for the sidebar */

874

875 .sidebar_heading {

876 position: relative;

877 padding: $lineheight/2 $lineheight;

878 // background: $offwhite;

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

880 > .close {

881 float: right;

882 margin-top: 2px;

883 cursor: pointer;

884 }

885 }

886

887 #browse_status {

888 p {

889 padding: $lineheight;

890 }

891

892 input {

893 display: block;

894 margin-left: auto;

895 margin-right: auto;

896 }

897 }

898

899 #sidebar {

900 #sidebar_loader,

901 .loader,

902 .load_more {

903 text-align: center;

904 margin: $lineheight auto;

905 width: 40px;

906 display: block;

907 }

908 }

909

910 /* Rules for the search box */

911

912 header .search_form {

913 display: none;

914 }

915

916 .search_form {

917 position: relative;

918 padding: $lineheight/2;

919 background-color: $lightgrey;

920

921 .query_wrapper {

922 position: relative;

923 overflow: hidden;

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

925 }

926

927 input[type=text] {

928 width: 100%;

929 height: 30px;

930 border-right: none;

931

932 transition: 300ms linear;

933 }

934

935 input:focus {

936 outline: none;

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

938 }

939

940 input[type=submit] {

941 float: right;

942 width: auto;

943 min-width: 0;

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

945 }

946

947 .describe_location {

948 position: absolute;

949 top: 6px;

950 right: 6px;

951 font-size: 10px;

952 color: $blue;

953 }

954 }

955

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

957

958 #mapkey {

959 .mapkey-table-key img {

960 display: block;

961 margin-left: auto;

962 margin-right: auto;

963 }

964 td {

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

966 }

967 }

968

969 /* Rules for search sidebar */

970

971 .search_results_entry {

972 ul li {

973 border-bottom: $keyline;

974 cursor: pointer;

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

976 &.selected { background: #FFFFE6; }

977 }

978

979 .search_details {

980 display: block;

981 float: right;

982 text-align: right;

983 margin-top: 0.2em;

984 margin-left: 0.5em;

985 }

986 }

987

988 .search_results_error {

989 color: #f00;

990 }

991

992 /* Rules for entity history */

993

994 #sidebar_content {

995 .browse_details {

996 position: relative;

997 border-bottom: $keyline;

998 }

999 }

1000

1001 .browse_status {

1002 display: none;

1003 }

1004

1005 /* Rules for the history sidebar */

1006

1007 #sidebar .changesets {

1008 li {

1009 padding: 15px 20px;

1010 border-bottom: 1px solid #ddd;

1011 cursor: pointer;

1012

1013 &.selected { background: #FFFFE6; }

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

1015 }

1016

1017 h4 {

1018 margin: 0;

1019 a {

1020 color: #000;

1021 }

1022 }

1023 }

1024

1025 /* Rules for the browse sidebar */

1026

1027 #sidebar_content {

1028 .browse-section {

1029 padding: $lineheight/2 $lineheight;

1030 border-bottom: 1px solid #ddd;

1031

1032 h4:first-child {

1033 margin-top: 0;

1034 word-wrap: break-word;

1035 }

1036 }

1037

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

1039 border-bottom: none;

1040 }

1041

1042 .paginate {

1043 float: right;

1044 padding: 1px 6px;

1045 border: 1px solid #eee;

1046 border-radius: 3px;

1047 }

1048

1049 .paginate ul {

1050 padding-left: 20px;

1051 }

1052

1053 .browse-field {

1054 margin-bottom: 10px;

1055

1056 h4 {

1057 padding: 5px 0 5px 10px;

1058 font-size: 12px;

1059 border: 1px solid #CCC;

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

1061 background-color: #F6F6F6;

1062 }

1063

1064 p {

1065 padding: 7px 10px;

1066 font-size: 12px;

1067 background-color: #FFF;

1068 border: 1px solid #CCC;

1069 border-top: 0;

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

1071 }

1072 }

1073

1074 .browse-tag-list {

1075 background-color: #F6F6F6;

1076 border: 1px solid #ddd;

1077 border-radius: 3px;

1078 font-size: 12px;

1079 table-layout: fixed;

1080 border-collapse: separate;

1081

1082 th, td {

1083 border-bottom: 1px solid #ddd;

1084 }

1085

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

1087 border-bottom: 0;

1088 }

1089

1090 .browse-tag-k,

1091 .browse-tag-v {

1092 width: 50%;

1093 padding: 6px 10px;

1094 word-wrap: break-word;

1095 }

1096

1097 .browse-tag-k {

1098 font-weight: 500;

1099 background-color: #F6F6F6;

1100 }

1101

1102 .browse-tag-v {

1103 border-left: 1px solid #ddd;

1104 background-color: #fff;

1105 }

1106 }

1107

1108 .warning {

1109 margin: $lineheight/2 0;

1110 padding: $lineheight/2;

1111 font-size: 90%;

1112 }

1113

1114 .note-comments li, .changeset-comments li {

1115 margin: $lineheight/2 0;

1116

1117 p {

1118 margin-left: 10px;

1119 }

1120 }

1121

1122 .comments-header {

1123 float: left;

1124 }

1125

1126 .subscribe-buttons {

1127 float: left;

1128 margin: 18px 10px 10px;

1129 min-width: 80px;

1130 }

1131

1132 .subscribe-buttons input {

1133 font-size: 90%;

1134 line-height: 15px;

1135 min-height: 20px;

1136 }

1137

1138 span.action-button:hover {

1139 cursor: pointer;

1140 text-decoration: underline;

1141 }

1142

1143 .note-description {

1144 overflow: hidden;

1145 margin: 0 0 10px 10px;

1146 }

1147

1148 .query-intro p {

1149 padding: $lineheight $lineheight $lineheight/2;

1150 }

1151

1152 .query-results {

1153 display: none;

1154

1155 h3 {

1156 padding: $lineheight $lineheight $lineheight/2;

1157 margin: 0;

1158 }

1159

1160 ul {

1161 li {

1162 padding: 15px 20px;

1163 border-bottom: 1px solid #ddd;

1164

1165 &.query-result {

1166 cursor: pointer;

1167 }

1168

1169 &.selected {

1170 background: #FFFFE6;

1171 }

1172 }

1173 }

1174 }

1175 }

1176

1177 /* Rules for export sidebar */

1178

1179 .export_form {

1180 padding: $lineheight;

1181

1182 .export_area_inputs,

1183 .export_button {

1184 text-align: center;

1185 }

1186

1187 .export_area_inputs {

1188 margin-bottom: $lineheight/2;

1189 input[type="text"] {

1190 width: 80px;

1191 text-align: center;

1192 margin-bottom: 5px;

1193 }

1194 }

1195

1196 .export_boxy {

1197 background: #eee;

1198 border: 1px solid #ccc;

1199 border-radius: 3px;

1200

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

1202 #minlon {

1203 float: left;

1204 margin-left: -1px;

1205 }

1206 #maxlon {

1207 float: right;

1208 margin-right: -1px;

1209 }

1210 #minlat { margin-bottom: 0; }

1211 }

1212

1213 .export_bound {

1214 margin: $lineheight/4;

1215 }

1216

1217 .export_button {

1218 margin-top: $lineheight;

1219 margin-bottom: $lineheight;

1220 }

1221

1222 dl {

1223 padding-left: $lineheight/2;

1224 dd {

1225 margin-left: 0;

1226 margin-bottom: 10px;

1227 }

1228 }

1229 }

1230

1231 /* Rules for edit pages */

1232

1233 .site-edit {

1234 #content {

1235 position: absolute;

1236 top: $headerHeight;

1237 bottom: 0;

1238 width: 100%;

1239 }

1240

1241 #map {

1242 height: 100%;

1243 overflow: hidden;

1244 }

1245 }

1246

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

1248

1249 .content-heading {

1250 background: $lightgrey;

1251

1252 h1 { font-size: 22px; }

1253 }

1254

1255 .content-body {

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

1257 margin-bottom: $lineheight;

1258 }

1259

1260 h1, h2, h3 {

1261 margin-top: $lineheight/2;

1262 }

1263 }

1264

1265 .content-inner {

1266 position: relative;

1267 max-width: 900px;

1268 margin: auto;

1269 padding: $lineheight;

1270 }

1271

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

1273

1274 .user-new,

1275 .user-create,

1276 .user-terms {

1277 .content-body .content-inner {

1278 padding: 0;

1279 }

1280 }

1281

1282 .user-new,

1283 .user-create,

1284 .user-terms,

1285 .user-confirm {

1286 .content-heading .content-inner {

1287 height: 200px;

1288 }

1289 }

1290

1291 .header-illustration {

1292 background-position: 0 0;

1293 background-repeat: no-repeat;

1294 position: absolute;

1295 height: 200px;

1296 width: 100%;

1297 left: 0;

1298 bottom: 0;

1299

1300 &.new-user-main {

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

1302 }

1303

1304 &.confirm-main {

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

1306 }

1307

1308 &.new-user-terms {

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

1310 }

1311

1312 &.new-user-arm {

1313 height: 110px;

1314 width: 130px;

1315 left: 260px;

1316 top: 160px;

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

1318 z-index: 100;

1319 }

1320 }

1321

1322 #content.maximised {

1323 top: 0;

1324 left: 0;

1325 right: 0;

1326 bottom: 0;

1327 border: 0;

1328 z-index: 2000;

1329 }

1330

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

1332

1333 .content_map {

1334 position: relative;

1335 width: 45%;

1336 height: 400px;

1337 border: 1px solid #ccc;

1338 margin-bottom: $lineheight;

1339 float: right;

1340 }

1341

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

1343

1344 #trace_list {

1345 font-size: $lineheight/2;

1346 border-width: 0px;

1347 text-align: right;

1348

1349 .trace_summary {

1350 font-size: 12px;

1351 color: gray;

1352 }

1353

1354 .trace_pending {

1355 color: red;

1356 }

1357

1358 .trace_public {

1359 color: green;

1360 }

1361

1362 .trace_identifiable {

1363 color: green;

1364 }

1365

1366 .trace_trackable {

1367 color: red;

1368 }

1369

1370 .trace_private {

1371 color: red;

1372 }

1373 }

1374

1375 /* Rules for the new trace form */

1376

1377 #new_trace {

1378 input[type=text] {

1379 width: 50%;

1380 width: calc(100% - 150px);

1381 max-width: 500px;

1382 }

1383 }

1384

1385 /* Rules for the edit trace form */

1386

1387 .edit_trace {

1388 .form-row p {

1389 margin-bottom: 0px;

1390 }

1391

1392 input[type=text] {

1393 width: 50%;

1394 width: calc(100% - 150px);

1395 max-width: 500px;

1396 }

1397 }

1398

1399 /* Rules for the user profile page */

1400

1401 #userinformation {

1402

1403 min-height: 100px;

1404 .userinformation-inner {

1405 float: left;

1406 }

1407 h2 {

1408 margin-top: 0;

1409 }

1410 .user-description {

1411 width: 100%;

1412 clear: both;

1413 }

1414 .deemphasize {

1415 margin: 0;

1416 }

1417 }

1418

1419 .admin-user-info small {

1420 margin-bottom: $lineheight/2;

1421 display: inline;

1422 margin-right: $lineheight;

1423 }

1424

1425 .activity-block {

1426 clear: left;

1427 border-bottom: 1px solid #ccc;

1428 padding-bottom: $lineheight;

1429 float: left;

1430 h3 {

1431 margin-bottom: $lineheight/2;

1432 }

1433 }

1434

1435 .contact-activity {

1436 margin-top: $lineheight;

1437 width: 100%;

1438 }

1439

1440 .activity-details p {

1441 margin-left: 70px;

1442 margin-bottom: 0;

1443 }

1444

1445 #friends-container .contact-activity ul {

1446 margin-left: 70px;

1447 }

1448

1449 .user-view {

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

1451 .content-inner {

1452 max-width: none;

1453 }

1454 p#no_home_location {

1455 margin: $lineheight;

1456 }

1457 .user_thumbnail {

1458 margin-top: $lineheight/4;

1459 float: left;

1460 }

1461 }

1462

1463 /* Rules for the user map */

1464

1465 .content_map .leaflet-popup-content {

1466 margin: $lineheight/2;

1467 min-height: 50px;

1468 }

1469

1470 /* Rules for user popups on maps */

1471

1472 .user_popup {

1473 min-width: 200px;

1474 p {

1475 padding: 0 0 5px 0;

1476 margin-top: 0 0 0 60px;

1477 font-size: 12px;

1478 }

1479 img.user_thumbnail {

1480 float: left;

1481 margin: 0 $lineheight/2 0 0;

1482 }

1483 }

1484

1485 /* Rules for the user list */

1486

1487 #user_list {

1488 font-size: $lineheight/2;

1489 width: 100%;

1490

1491 tr {

1492 vertical-align: middle;

1493 }

1494

1495 p {

1496 margin-top: 0px;

1497 margin-bottom: 0px;

1498 }

1499 }

1500

1501 #user_list_actions {

1502 float: right;

1503 margin-top: $lineheight/2;

1504 }

1505

1506 /* Rules for the diary list page */

1507

1508 .diary_post {

1509 position: relative;

1510 margin-top: $lineheight/2;

1511 padding-top: $lineheight;

1512 border-top: 1px solid #ccc;

1513

1514 .post_heading {

1515 margin-bottom: $lineheight;

1516

1517 h2 {

1518 margin-top: 0;

1519 margin-bottom: $lineheight/2;

1520 font-size: 24px;

1521 }

1522 }

1523

1524 img.user_thumbnail {

1525 float: left;

1526 }

1527

1528 small.deemphasize {

1529 float: left;

1530 display: block;

1531 }

1532

1533 ul.secondary-actions {

1534 display: inline-block;

1535 }

1536 }

1537

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

1539 display: inline;

1540 }

1541

1542 /* Rules for the diary entry page */

1543

1544 .diary_entry {

1545 #map {

1546 position: relative;

1547 width: 90%;

1548 height: 400px;

1549 border: 1px solid #ccc;

1550 display: none;

1551 margin-bottom: $lineheight;

1552 }

1553 #newcomment {

1554 border-top: 1px solid #ccc;

1555 padding-top: $lineheight;

1556 margin-top: $lineheight/2;

1557 }

1558 .comments {

1559 max-width: 740px;

1560 }

1561 .diary-comment {

1562 margin-top: $lineheight/2;

1563 border-top: 1px dashed #ccc;

1564 padding-top: $lineheight/2;

1565 &:first-child {

1566 margin-top: $lineheight;

1567 padding-top: $lineheight;

1568 border-top: 1px solid #ccc;

1569 }

1570 p {

1571 margin-bottom: $lineheight/2;

1572 }

1573 .comment-heading {

1574 margin-bottom: 0;

1575 margin-top: 0;

1576 }

1577 }

1578 }

1579

1580 .diary_entry-view img.user_thumbnail {

1581 float: left;

1582 }

1583

1584 /* Rules for the log in page */

1585

1586 #login_openid_buttons {

1587 margin-bottom: 0;

1588 }

1589

1590 #login_openid_buttons li {

1591 float: left;

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

1593 }

1594

1595 /* Rules for the account confirmation page */

1596

1597 .user-terms {

1598 .legale {

1599 border: 1px solid #ccc;

1600 padding: $lineheight;

1601 margin-bottom: $lineheight;

1602 overflow: auto;

1603 height: 20em;

1604 }

1605

1606 #decline {

1607 background: $lightblue;

1608 &:hover {

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

1610 }

1611 }

1612 }

1613

1614 /* Rules for the account settings page */

1615

1616 #accountForm .user_map {

1617 position: relative;

1618 width: 500px;

1619 height: 400px;

1620 border: 1px solid #ccc;

1621 }

1622

1623 #accountForm .user_image {

1624 margin-bottom: 0;

1625 }

1626

1627 #accountForm #user_image {

1628 margin-left: 20px;

1629 }

1630

1631 #accountForm ul.accountImage-options {

1632 margin-left: 120px;

1633 }

1634

1635 .nohome .location {

1636 display: none;

1637 }

1638

1639 #homerow .message {

1640 display: none;

1641 }

1642

1643 .nohome .message {

1644 display: inline !important;

1645 }

1646

1647 .content_map.settings_map {

1648 width: 50%;

1649 float: none;

1650 }

1651

1652 /* Rules for the oauth settings page */

1653

1654 .oauth_clients .buttons .oauth-edit {

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

1656 }

1657

1658 .oauth_clients .buttons .oauth-delete {

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

1660 }

1661

1662 /* Rules for messages pages */

1663

1664 .messages {

1665 width: 100%;

1666 border: 1px solid #ddd;

1667

1668 input[type="submit"] {

1669 margin: auto;

1670 }

1671 tbody tr {

1672 border-top: 1px solid #ccc;

1673 }

1674

1675 .inbox-row {

1676 background: #f8f8ff;

1677 }

1678

1679 .inbox-row-unread {

1680 background:#CBEEA7;

1681 }

1682

1683 .right {

1684 float: right;

1685 }

1686

1687 tr td,

1688 tr th {

1689 padding: $lineheight/4;

1690 }

1691 p:last-child,

1692 h2:last-child,

1693 h3:last-child,

1694 ol:last-child,

1695 ul:last-child {

1696 margin-bottom:0;

1697 }

1698 tr td {

1699 height: 30px;

1700 border-right: 1px solid $lightgrey;

1701 }

1702 }

1703

1704 .inbox-row .inbox-mark-read {

1705 display: none;

1706 }

1707

1708 .info-line {

1709 margin-bottom: $lineheight;

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

1711 border-bottom: 1px solid #ccc;

1712

1713 form, form div {

1714 display: inline;

1715 }

1716 }

1717

1718 .info-line .user_thumbnail_tiny {

1719 vertical-align: middle;

1720 }

1721

1722 .inbox-sent {

1723 white-space: nowrap;

1724 }

1725

1726 .inbox-mark-unread,

1727 .inbox-mark-read,

1728 .inbox-delete {

1729 width: 1%;

1730 }

1731

1732 .inbox-row-unread .inbox-mark-unread {

1733 display: none;

1734 }

1735

1736 .message-read .message-buttons {

1737 margin-top: $lineheight;

1738 margin-bottom: $lineheight * 1.5;

1739 padding-top: $lineheight;

1740 border-top: 1px solid $lightgrey;

1741 }

1742

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

1744 border-radius: 0;

1745 }

1746

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

1748

1749 .error {

1750 padding: $lineheight;

1751 background-color: #ff7070;

1752 }

1753

1754 .warning {

1755 padding: $lineheight;

1756 background-color: #ffe0cc;

1757 }

1758

1759 .notice {

1760 padding: $lineheight;

1761 background-color: #CBEEA7;

1762 }

1763

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

1765

1766 .formError {

1767 display: inline-block;

1768 padding: 5px 10px;

1769 margin-top: 5px;

1770 border-radius: 4px;

1771 font-size: 12px;

1772 color: #fff;

1773 background-color: #ff7070;

1774 }

1775

1776 /* Rules for rails validation error boxes */

1777

1778 #errorExplanation {

1779 width: 400px;

1780 border: 2px solid #ff7070;

1781 padding: 0 $lineheight/2;

1782 margin-bottom: $lineheight;

1783 background-color: #f0f0f0;

1784

1785 h2 {

1786 margin: 0 -10px 10px -10px;

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

1788 font-weight: bold;

1789 font-size: 12px;

1790 background-color: #c00;

1791 color: #fff;

1792 text-align: left;

1793 }

1794

1795 p {

1796 color: #333;

1797 margin-bottom: 0px;

1798 padding: $lineheight/4;

1799 }

1800

1801 ul {

1802 padding-left: $lineheight;

1803

1804 li {

1805 font-size: 12px;

1806 list-style: disc;

1807 }

1808 }

1809 }

1810

1811 /* Rules for forms */

1812

1813 .standard-form {

1814 fieldset {

1815 margin-bottom: $lineheight;

1816 }

1817 label.standard-label {

1818 display: block;

1819 margin-bottom: $lineheight/4;

1820 font-size: $typeheight;

1821 font-weight: bold;

1822 line-height: 1.5;

1823 }

1824 label.standard-label.secondary {

1825 display: inline-block;

1826 font-weight: normal;

1827 }

1828 .form-help {

1829 font-weight: normal;

1830 }

1831 .form-column {

1832 float: left;

1833 margin-right: 20px;

1834 }

1835 .form-divider {

1836 margin-top: $lineheight;

1837 padding-top: $lineheight;

1838 border-top: 1px solid $lightgrey;

1839 }

1840 .horizontal-list .form-row {

1841 float: left;

1842 padding-right: 10px;

1843 }

1844 .form-row {

1845 margin-bottom: $lineheight/2;

1846 }

1847 .form-list {

1848 margin-bottom: 0;

1849 }

1850 .form-list li {

1851 margin-bottom: 5px;

1852 }

1853 input[type="checkbox"],

1854 input[type="radio"] {

1855 float: left;

1856 margin-top: 5px;

1857 }

1858 }

1859

1860 #remember_me_openid {

1861 display: block;

1862 }

1863

1864 input[type="checkbox"],

1865 input[type="radio"] {

1866 margin-right: 5px;

1867 }

1868

1869 input[type="text"],

1870 input[type="email"],

1871 input[type="url"],

1872 input[type="password"],

1873 textarea {

1874 border: 1px solid #ccc;

1875 padding: 2px 5px;

1876 margin: 0;

1877 width: 200px;

1878

1879 &.field_with_errors {

1880 border: 2px solid #ff7070;

1881 }

1882 }

1883

1884 textarea {

1885 padding: 5px;

1886 width: 100%;

1887 }

1888

1889 /* Rules for user images */

1890

1891 img.user_image {

1892 max-width: 100px;

1893 max-height: 100px;

1894 border: 1px solid #ccc;

1895 margin-bottom: $lineheight;

1896 float: left;

1897 margin-right: $lineheight;

1898 }

1899

1900 img.user_thumbnail {

1901 max-width: 50px;

1902 max-height: 50px;

1903 border: 1px solid #ccc;

1904 margin-right: $lineheight;

1905 }

1906

1907 img.user_thumbnail_tiny {

1908 width: auto;

1909 height: auto;

1910 max-width: 25px;

1911 max-height: 25px;

1912 border: 1px solid #ccc;

1913 }

1914

1915 /* Rules for geo microformats */

1916

1917 abbr.geo {

1918 border-bottom: none;

1919 }

1920

1921 /* Rules for RSS buttons */

1922

1923 .rsssmall {

1924 position: relative;

1925 top: 3px;

1926 }

1927

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

1929

1930 ul.secondary-actions {

1931 font-style: normal;

1932 margin-bottom: 0;

1933 margin-left: 0;

1934 &.pager {

1935 display: inline-block;

1936 margin-right: 60px;

1937 }

1938 > li {

1939 display: block;

1940 float: left;

1941 list-style: none;

1942 border-left: 1px solid #ccc;

1943 padding-left: $lineheight/2;

1944 margin-right: $lineheight/2;

1945 &:first-child {

1946 border-left: 0;

1947 padding-left: 0;

1948 }

1949 &:last-child {

1950 margin-right: 0px;

1951 }

1952 }

1953 }

1954

1955 div.secondary-actions {

1956 padding: 10px;

1957 text-align: center;

1958 }

1959

1960 /* Utility for managing inner content areas */

1961

1962 .inner22 { padding: $lineheight;}

1963

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

1965

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

1967

1968 .inner20 { padding: $lineheight 0;}

1969

1970 .inner02 { padding: 0 $lineheight;}

1971

1972 /* Utility for general button styles */

1973

1974 input[type="button"],

1975 input[type="submit"],

1976 input[type="reset"],

1977 a.button {

1978 cursor: pointer;

1979 border: 0;

1980 display: inline-block;

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

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

1983 min-width: 120px;

1984 margin: 0 0 $lineheight/2 0;

1985 color: white;

1986 background: $blue;

1987 text-align: center;

1988 border-radius: 2px;

1989 &:hover {

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

1991 text-decoration: none;

1992 }

1993 &.deemphasize {

1994 background: $lightblue;

1995 &:hover {

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

1997 }

1998 }

1999 &:disabled {

2000 background: $lightgrey;

2001 &:hover {

2002 background: $lightgrey;

2003 }

2004 }

2005 &:last-child {

2006 margin-bottom: 0;

2007 }

2008 }

2009

2010 input[type="button"],

2011 input[type="submit"],

2012 input[type="reset"] {

2013 line-height: normal;

2014 }

2015

2016 a.button {

2017 line-height: 20px;

2018 }

2019

2020 .buttons {

2021 min-width: 200px;

2022 input[type="submit"],

2023 input[type="button"],

2024 input[type="reset"],

2025 .button {

2026 box-sizing: border-box;

2027 float: left;

2028 border-radius: 0;

2029 margin:0;

2030 min-width: 75px;

2031 max-width: 180px;

2032 border-right:1px solid white;

2033 text-overflow: ellipsis;

2034 white-space: nowrap;

2035 overflow: hidden;

2036 }

2037 input:first-child,

2038 .button:first-child {

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

2040 }

2041 input:last-child,

2042 .button:last-child {

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

2044 border-right-width: 0;

2045 }

2046 input:only-child,

2047 .button:only-child,

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

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

2050 border-radius:2px;

2051 border-right-width: 0;

2052 }

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

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

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

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

2057 border-right-width: 0;

2058 }

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

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

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

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

2063 border-right-width: 1px;

2064 }

2065 }

2066

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

2068

2069 .table0,

2070 .item0 {

2071 background: $offwhite;

2072 }

2073

2074 .table1,

2075 .item1 {

2076 background: #fff;

2077 }

2078

2079 /* Rules for OpenID logo */

2080

2081 .openid_logo {

2082 vertical-align: text-bottom;

2083 border: 0;

2084 }

2085

2086 /* Rules for rich text */

2087

2088 .richtext,

2089 .prose {

2090 h1, h2 {

2091 padding-bottom: $lineheight/2;

2092 border-bottom: 1px dashed #cccccc;

2093 margin-bottom: $lineheight/2;

2094 }

2095

2096 h1 {

2097 font-size: 24px;

2098 }

2099

2100 h2 {

2101 font-size: 18px;

2102 }

2103

2104 h3 {

2105 font-size: $typeheight;

2106 }

2107

2108 code {

2109 font-size: 13px;

2110 background: #e8e8e8;

2111 padding: 2px 3px;

2112 }

2113

2114 pre {

2115 font-size: 13px;

2116 background: #e8e8e8;

2117 padding: 2px 3px;

2118

2119 code {

2120 padding: 0;

2121 }

2122 }

2123

2124 img {

2125 padding: $lineheight;

2126 background-color: $offwhite;

2127 display: block;

2128 max-width: 100%;

2129 margin: auto;

2130 }

2131

2132 blockquote {

2133 border-left: $lineheight solid $offwhite;

2134 padding-left: $lineheight;

2135 margin: 0;

2136 color: #7E7E7E;

2137 }

2138

2139 ul, ol {

2140 padding-left: $lineheight;

2141 margin-bottom: $lineheight;

2142 margin-left: $lineheight;

2143 }

2144

2145 ul li {

2146 list-style: disc;

2147 }

2148

2149 ol li {

2150 list-style: decimal;

2151 }

2152 }

2153

2154 .diary_post .richtext {

2155 margin-top: $lineheight;

2156 }

2157

2158 .comments .richtext {

2159 margin-left: 70px;

2160 margin-top: 0;

2161 }

2162

2163 /* Rules for rich text editors */

2164

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

2166 width: 50%;

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

2168

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

2170 width: 100%;

2171 }

2172 }

2173

2174 .richtext_container {

2175 margin-bottom: $lineheight;

2176

2177 .richtext_content {

2178 width: 50%;

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

2180 display: inline-block;

2181 vertical-align: top;

2182

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

2184 width: 100%;

2185 }

2186

2187 .richtext_preview {

2188 display: inline-block;

2189 padding: $lineheight;

2190 background-color: $offwhite;

2191 overflow-x: auto;

2192

2193 &.loading {

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

2195 background-repeat: no-repeat;

2196 background-position: center;

2197 }

2198

2199 > :first-child {

2200 margin-top: 0px;

2201 }

2202 }

2203 }

2204

2205 .richtext_help {

2206 display: inline-block;

2207 vertical-align: top;

2208 margin-left: 15px;

2209 background-color: #f8f8ff;

2210 padding: $lineheight/2;

2211 width: 220px;

2212

2213 ul {

2214 margin-bottom: 0;

2215 }

2216

2217 h4.heading, li {

2218 border-bottom: 1px solid #ccc;

2219 margin-bottom: $lineheight/4;

2220 padding-bottom: $lineheight/4;

2221 }

2222

2223 li h4, li span, li p {

2224 display: inline-block;

2225 vertical-align: top;

2226 font-size: 11px;

2227 }

2228

2229 li h4 {

2230 width: 40%;

2231 margin: 0;

2232 }

2233

2234 li span, li p {

2235 width: 50%;

2236 margin-left: $lineheight/2;

2237 margin-bottom: $lineheight/4;

2238 white-space: nowrap;

2239 }

2240 }

2241 }

2242

2243 /* Rules for the user notes list */

2244

2245 .note_list {

2246 tr.creator {

2247 background-color: #eeeeee;

2248 }

2249

2250 td {

2251 padding: 3px;

2252 }

2253

2254 p {

2255 margin-bottom: 0px;

2256 }

2257 }

2258

2259 /* Rules for the iD editor */

2260

2261 .id-embed {

2262 width: 100%;

2263 height: 100%;

2264 }

2265

2266 /* Rules for dropdown menus */

2267

2268 .dropdown {

2269 position: relative;

2270 }

2271

2272 .dropdown-toggle {

2273 *margin-bottom: -3px;

2274 }

2275

2276 .dropdown-toggle:active,

2277 .open .dropdown-toggle {

2278 outline: 0;

2279 }

2280

2281 .caret {

2282 display: inline-block;

2283 width: 0;

2284 height: 0;

2285 vertical-align: top;

2286 border-top: 4px solid #000000;

2287 border-right: 4px solid transparent;

2288 border-left: 4px solid transparent;

2289 content: "";

2290 }

2291

2292 .dropdown .caret {

2293 margin-top: 8px;

2294 margin-left: 2px;

2295 }

2296

2297 .dropdown-menu {

2298 position: absolute;

2299 top: 100%;

2300 left: -1px;

2301 z-index: 1000;

2302 display: none;

2303 float: left;

2304 min-width: 160px;

2305 padding: 5px 0;

2306 margin: 0;

2307 list-style: none;

2308 background-color: #ffffff;

2309 border: 1px solid #ccc;

2310 border-radius: 0 3px 3px;

2311 *border-right-width: 2px;

2312 *border-bottom-width: 2px;

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

2314 background-clip: padding-box;

2315 }

2316

2317 .dropdown-menu.pull-right {

2318 right: 0;

2319 left: auto;

2320 }

2321

2322 .dropdown-menu .divider {

2323 *width: 100%;

2324 height: 1px;

2325 margin: 9px 1px;

2326 *margin: -5px 0 5px;

2327 overflow: hidden;

2328 background-color: #e5e5e5;

2329 border-bottom: 1px solid #ffffff;

2330 }

2331

2332 .dropdown-menu > li > a {

2333 display: block;

2334 padding: 3px 10px;

2335 clear: both;

2336 font-weight: normal;

2337 line-height: 20px;

2338 color: #333333;

2339 white-space: nowrap;

2340 }

2341

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

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

2344 .dropdown-submenu:hover > a,

2345 .dropdown-submenu:focus > a {

2346 color: #ffffff;

2347 text-decoration: none;

2348 background-color: $green;

2349 }

2350

2351 .dropdown-menu > .active > a,

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

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

2354 color: #ffffff;

2355 text-decoration: none;

2356 background-color: $green;

2357 outline: 0;

2358 }

2359

2360 .dropdown-menu > .disabled > a,

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

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

2363 color: #999999;

2364 }

2365

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

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

2368 text-decoration: none;

2369 cursor: default;

2370 background-color: transparent;

2371 background-image: none;

2372 }

2373

2374 .open {

2375 *z-index: 1000;

2376 }

2377

2378 .open > .dropdown-menu {

2379 display: block;

2380 }

2381

2382 .dropdown-backdrop {

2383 position: fixed;

2384 top: 0;

2385 right: 0;

2386 bottom: 0;

2387 left: 0;

2388 z-index: 990;

2389 }

2390

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

2392 .site-welcome, .site-fixthemap {

2393 .center {

2394 text-align: center;

2395 .sprite {

2396 float: none;

2397 margin: auto;

2398 }

2399 }

2400

2401 .sprite {

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

2403 background-size: 500px 250px;

2404 display: block;

2405 float: left;

2406 }

2407

2408 .icon-list {

2409 padding-bottom: 20px;

2410 div {

2411 margin-bottom: 10px;

2412 p {

2413 padding-top: 10px;

2414 }

2415 }

2416 }

2417 .sprite.small {

2418 width: 50px;

2419 height: 50px;

2420 }

2421

2422 .sprite.x {

2423 background-position: -50px 0;

2424 }

2425

2426 .sprite.term {

2427 margin-right: 10px;

2428 vertical-align: middle;

2429 }

2430

2431 .sprite.node {

2432 background-position: -100px 0;

2433 }

2434

2435 .sprite.way {

2436 background-position: -150px 0;

2437 }

2438

2439 .sprite.tag {

2440 background-position: -200px 0;

2441 }

2442

2443 .sprite.editor {

2444 background-position: -250px 0;

2445 }

2446

2447 .sprite.question {

2448 background-position: -300px 0;

2449 }

2450

2451 .start-mapping {

2452 margin: auto;

2453 cursor: pointer;

2454 border: none;

2455 padding: 20px 40px;

2456 font-size: 30px;

2457 text-decoration: none;

2458 }

2459

2460 .note-box {

2461 margin-top: 20px;

2462 background-color: $offwhite;

2463 }

2464

2465 .icon.note {

2466 background-color: #333;

2467 border-radius: 4px;

2468 }

2469 }

2470

2471 .site-about #content {

2472 //background-color: #000;

2473 background-color: #eee;

2474 background-position: 50% 50%;

2475 background-repeat: no-repeat;

2476 background-size: cover;

2477 background-attachment: fixed;

2478

2479 .caption {

2480 max-width: 200px;

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

2482 position: fixed;

2483 text-align: right;

2484 right: 20px;

2485 bottom: 60px;

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

2487 color: #eee;

2488 opacity: 0.8;

2489 display: none;

2490 }

2491

2492 .caption a {

2493 color: white;

2494 white-space: nowrap;

2495 text-decoration: none;

2496 }

2497

2498 a.next {

2499 display: block;

2500 position: fixed;

2501 right: 10px;

2502 bottom: 10px;

2503 width: 40px;

2504 height: 40px;

2505 border-radius: 5px;

2506 text-indent: -9999px;

2507 overflow: hidden;

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

2509 background-color: #000;

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

2511 }

2512

2513 .content-inner {

2514 position: relative;

2515 color: #333;

2516 min-width: 320px;

2517 max-width: 640px;

2518

2519 .section {

2520 margin-bottom: 30px;

2521 }

2522

2523 .section:last-child {

2524 margin-bottom: 0;

2525 }

2526 }

2527

2528 .text {

2529 background: white;

2530 padding: 40px;

2531 }

2532

2533 .attr {

2534 position: relative;

2535 padding: 170px 40px 20px;

2536 background: #333;

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

2538 margin-bottom: 0;

2539 margin-top: -20px;

2540

2541 h1 {

2542 display: block;

2543 color: white;

2544 font-weight: 300;

2545 font-size: 34px;

2546 span {

2547 color: #76c551;

2548 }

2549 }

2550

2551 .user-image {

2552 position: absolute;

2553 top: 0px;

2554 right: 240px;

2555 left: 0px;

2556 height: 150px;

2557 background-position: 0 50%;

2558 background-repeat: no-repeat;

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

2560 background-size: cover;

2561 background-color: #76c551;

2562 }

2563

2564 .byosm {

2565 position: absolute;

2566 top: 0px;

2567 right: 0px;

2568 z-index: 1;

2569 width: 240px;

2570 height: 150px;

2571 padding: 20px 20px 20px 40px;

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

2573 white-space: nowrap;

2574 color: #fff;

2575 background: #76c551;

2576 }

2577

2578 .byosm span {

2579 display: inline-block;

2580 width: 20px;

2581 margin-left: -20px;

2582 }

2583 }

2584

2585 h2 {

2586 margin-bottom: 10px;

2587 }

2588

2589 .icon {

2590 width: 30px;

2591 height: 30px;

2592 margin-right: 10px;

2593 vertical-align: middle;

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

2595

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

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

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

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

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

2601 }

2602 }

2603

2604 @import 'browse';

2605

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

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

2608 display: none;

2609 }

2610 }

2611