git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.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 and direction forms */

911

912 header .search_forms,

913 .directions_form {

914 display: none;

915 }

916

917 .search_form,

918 .directions_form {

919 position: relative;

920 padding: $lineheight/2;

921 background-color: $lightgrey;

922

923 .query_wrapper {

924 position: relative;

925 overflow: hidden;

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

927 }

928

929 input[type=text] {

930 width: 100%;

931 height: 30px;

932 transition: 300ms linear;

933 }

934

935 input[type=text].overflow {

936 border-right: none;

937 }

938

939 input:focus {

940 outline: none;

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

942 }

943

944 input[type=submit].float {

945 float: right;

946 width: auto;

947 min-width: 0;

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

949 }

950

951 select {

952 /* this next line is to polyfill the vertical alignment of text within a select element,

953 * which is different between firefox and chrome. */

954 padding: 0.3em 0;

955 }

956

957 .query_options {

958 text-align: right;

959 font-size: 10px;

960 color: $blue;

961 }

962

963 .describe_location {

964 position: absolute;

965 top: 6px;

966 right: 6px;

967 font-size: 10px;

968 color: $blue;

969 }

970

971 .switch_link {

972 float: right;

973 width: auto;

974 min-width: 0;

975 margin-left: 6px;

976 }

977

978 img.button {

979 display: block;

980 }

981

982 span.force_width {

983 width: 100%;

984 padding-right: 25px;

985 display: block;

986 }

987

988 select.routing_engines {

989 min-height: 30px;

990 margin: 0px 0px 5px 25px;

991 }

992

993 input.routing_go {

994 min-width: 100px;

995 float: right;

996 }

997

998 div.line {

999 width: 100%;

1000 margin: 0px 0px 5px 0px;

1001 }

1002 }

1003

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

1005

1006 #mapkey {

1007 .mapkey-table-key img {

1008 display: block;

1009 margin-left: auto;

1010 margin-right: auto;

1011 }

1012 td {

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

1014 }

1015 }

1016

1017 /* Rules for search sidebar */

1018

1019 .search_results_entry {

1020 ul li {

1021 border-bottom: $keyline;

1022 cursor: pointer;

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

1024 &.selected { background: $list-highlight; }

1025 }

1026

1027 .search_details {

1028 display: block;

1029 float: right;

1030 text-align: right;

1031 margin-top: 0.2em;

1032 margin-left: 0.5em;

1033 }

1034 }

1035

1036 .search_results_error {

1037 color: #f00;

1038 }

1039

1040 /* Rules for routing */

1041

1042 #sidebar_content>table {

1043 padding: 5px 20px 10px 15px;

1044 width: 100%;

1045 border-collapse: separate;

1046 }

1047

1048 div.direction {

1049 background-image: image-url('routing-sprite.png');

1050 width: 20px;

1051 height: 20px;

1052 background-repeat: no-repeat;

1053 }

1054 @for $i from 1 through 17 {

1055 div.direction.i#{$i} { background-position: #{($i)*-20+20}px 0px; }

1056 }

1057

1058 p#routing_summary {

1059 padding: 0 $lineheight $lineheight/4;

1060 }

1061

1062 td.instruction, td.distance {

1063 padding-top: $lineheight/5;

1064 padding-bottom: $lineheight/5;

1065 border-bottom: 1px solid #DDD;

1066 }

1067 td.distance {

1068 color: #BBB;

1069 text-align: right;

1070 font-size: x-small;

1071 }

1072 tr.turn {

1073 cursor: pointer;

1074 }

1075 tr.turn:hover {

1076 background: $list-highlight;

1077 }

1078 .routing_engines, #route_from, #route_to { margin-left: 25px; }

1079 .routing_marker { width: 15px; position: absolute; }

1080

1081 /* Rules for entity history */

1082

1083 #sidebar_content {

1084 .browse_details {

1085 position: relative;

1086 border-bottom: $keyline;

1087 }

1088 }

1089

1090 .browse_status {

1091 display: none;

1092 }

1093

1094 /* Rules for the history sidebar */

1095

1096 #sidebar .changesets {

1097 li {

1098 padding: 15px 20px;

1099 border-bottom: 1px solid #ddd;

1100 cursor: pointer;

1101

1102 &.selected { background: $list-highlight; }

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

1104 }

1105

1106 h4 {

1107 margin: 0;

1108 a {

1109 color: #000;

1110 }

1111 }

1112 }

1113

1114 /* Rules for the browse sidebar */

1115

1116 #sidebar_content {

1117 .browse-section {

1118 padding: $lineheight/2 $lineheight;

1119 border-bottom: 1px solid #ddd;

1120

1121 h4:first-child {

1122 margin-top: 0;

1123 word-wrap: break-word;

1124 }

1125 }

1126

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

1128 border-bottom: none;

1129 }

1130

1131 .paginate {

1132 float: right;

1133 padding: 1px 6px;

1134 border: 1px solid #eee;

1135 border-radius: 3px;

1136 }

1137

1138 .paginate ul {

1139 padding-left: 20px;

1140 }

1141

1142 .browse-field {

1143 margin-bottom: 10px;

1144

1145 h4 {

1146 padding: 5px 0 5px 10px;

1147 font-size: 12px;

1148 border: 1px solid #CCC;

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

1150 background-color: #F6F6F6;

1151 }

1152

1153 p {

1154 padding: 7px 10px;

1155 font-size: 12px;

1156 background-color: #FFF;

1157 border: 1px solid #CCC;

1158 border-top: 0;

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

1160 }

1161 }

1162

1163 .browse-tag-list {

1164 background-color: #F6F6F6;

1165 border: 1px solid #ddd;

1166 border-radius: 3px;

1167 font-size: 12px;

1168 table-layout: fixed;

1169 border-collapse: separate;

1170

1171 th, td {

1172 border-bottom: 1px solid #ddd;

1173 }

1174

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

1176 border-bottom: 0;

1177 }

1178

1179 .browse-tag-k,

1180 .browse-tag-v {

1181 width: 50%;

1182 padding: 6px 10px;

1183 word-wrap: break-word;

1184 }

1185

1186 .browse-tag-k {

1187 font-weight: 500;

1188 background-color: #F6F6F6;

1189 }

1190

1191 .browse-tag-v {

1192 border-left: 1px solid #ddd;

1193 background-color: #fff;

1194 }

1195 }

1196

1197 .warning {

1198 margin: $lineheight/2 0;

1199 padding: $lineheight/2;

1200 font-size: 90%;

1201 }

1202

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

1204 margin: $lineheight/2 0;

1205

1206 p {

1207 margin-left: 10px;

1208 }

1209 }

1210

1211 .comments-header {

1212 float: left;

1213 }

1214

1215 .subscribe-buttons {

1216 float: left;

1217 margin: 18px 10px 10px;

1218 min-width: 80px;

1219 }

1220

1221 .subscribe-buttons input {

1222 font-size: 90%;

1223 line-height: 15px;

1224 min-height: 20px;

1225 }

1226

1227 span.action-button:hover {

1228 cursor: pointer;

1229 text-decoration: underline;

1230 }

1231

1232 .note-description {

1233 overflow: hidden;

1234 margin: 0 0 10px 10px;

1235 }

1236

1237 .query-intro p {

1238 padding: $lineheight $lineheight $lineheight/2;

1239 }

1240

1241 .query-results {

1242 display: none;

1243

1244 h3 {

1245 padding: $lineheight $lineheight $lineheight/2;

1246 margin: 0;

1247 }

1248

1249 ul {

1250 li {

1251 padding: 15px 20px;

1252 border-bottom: 1px solid #ddd;

1253

1254 &.query-result {

1255 cursor: pointer;

1256 }

1257

1258 &.selected {

1259 background: $list-highlight;

1260 }

1261 }

1262 }

1263 }

1264 }

1265

1266 /* Rules for export sidebar */

1267

1268 .export_form {

1269 padding: $lineheight;

1270

1271 .export_area_inputs,

1272 .export_button {

1273 text-align: center;

1274 }

1275

1276 .export_area_inputs {

1277 margin-bottom: $lineheight/2;

1278 input[type="text"] {

1279 width: 80px;

1280 text-align: center;

1281 margin-bottom: 5px;

1282 }

1283 }

1284

1285 .export_boxy {

1286 background: #eee;

1287 border: 1px solid #ccc;

1288 border-radius: 3px;

1289

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

1291 #minlon {

1292 float: left;

1293 margin-left: -1px;

1294 }

1295 #maxlon {

1296 float: right;

1297 margin-right: -1px;

1298 }

1299 #minlat { margin-bottom: 0; }

1300 }

1301

1302 .export_bound {

1303 margin: $lineheight/4;

1304 }

1305

1306 .export_button {

1307 margin-top: $lineheight;

1308 margin-bottom: $lineheight;

1309 }

1310

1311 dl {

1312 padding-left: $lineheight/2;

1313 dd {

1314 margin-left: 0;

1315 margin-bottom: 10px;

1316 }

1317 }

1318 }

1319

1320 /* Rules for the routing sidebar */

1321

1322 #sidebar_content {

1323 #routing_credit {

1324 text-align: center;

1325 padding: 0.5em;

1326 }

1327 }

1328

1329 /* Rules for edit pages */

1330

1331 .site-edit {

1332 #content {

1333 position: absolute;

1334 top: $headerHeight;

1335 bottom: 0;

1336 width: 100%;

1337 }

1338

1339 #map {

1340 height: 100%;

1341 overflow: hidden;

1342 }

1343 }

1344

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

1346

1347 .content-heading {

1348 background: $lightgrey;

1349

1350 h1 { font-size: 22px; }

1351 }

1352

1353 .content-body {

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

1355 margin-bottom: $lineheight;

1356 }

1357

1358 h1, h2, h3 {

1359 margin-top: $lineheight/2;

1360 }

1361 }

1362

1363 .content-inner {

1364 position: relative;

1365 max-width: 900px;

1366 margin: auto;

1367 padding: $lineheight;

1368 }

1369

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

1371

1372 .user-new,

1373 .user-create,

1374 .user-terms {

1375 .content-body .content-inner {

1376 padding: 0;

1377 }

1378 }

1379

1380 .user-new,

1381 .user-create,

1382 .user-terms,

1383 .user-confirm {

1384 .content-heading .content-inner {

1385 height: 200px;

1386 }

1387 }

1388

1389 .header-illustration {

1390 background-position: 0 0;

1391 background-repeat: no-repeat;

1392 position: absolute;

1393 height: 200px;

1394 width: 100%;

1395 left: 0;

1396 bottom: 0;

1397

1398 &.new-user-main {

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

1400 }

1401

1402 &.confirm-main {

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

1404 }

1405

1406 &.new-user-terms {

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

1408 }

1409

1410 &.new-user-arm {

1411 height: 110px;

1412 width: 130px;

1413 left: 260px;

1414 top: 160px;

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

1416 z-index: 100;

1417 }

1418 }

1419

1420 #content.maximised {

1421 top: 0;

1422 left: 0;

1423 right: 0;

1424 bottom: 0;

1425 border: 0;

1426 z-index: 2000;

1427 }

1428

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

1430

1431 .content_map {

1432 position: relative;

1433 width: 45%;

1434 height: 400px;

1435 border: 1px solid #ccc;

1436 margin-bottom: $lineheight;

1437 float: right;

1438 }

1439

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

1441

1442 #trace_list {

1443 font-size: $lineheight/2;

1444 border-width: 0px;

1445 text-align: right;

1446

1447 .trace_summary {

1448 font-size: 12px;

1449 color: gray;

1450 }

1451

1452 .trace_pending {

1453 color: red;

1454 }

1455

1456 .trace_public {

1457 color: green;

1458 }

1459

1460 .trace_identifiable {

1461 color: green;

1462 }

1463

1464 .trace_trackable {

1465 color: red;

1466 }

1467

1468 .trace_private {

1469 color: red;

1470 }

1471 }

1472

1473 /* Rules for the new trace form */

1474

1475 #new_trace {

1476 input[type=text] {

1477 width: 50%;

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

1479 max-width: 500px;

1480 }

1481 }

1482

1483 /* Rules for the edit trace form */

1484

1485 .edit_trace {

1486 .form-row p {

1487 margin-bottom: 0px;

1488 }

1489

1490 input[type=text] {

1491 width: 50%;

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

1493 max-width: 500px;

1494 }

1495 }

1496

1497 /* Rules for the user profile page */

1498

1499 #userinformation {

1500

1501 min-height: 100px;

1502 .userinformation-inner {

1503 float: left;

1504 }

1505 h2 {

1506 margin-top: 0;

1507 }

1508 .user-description {

1509 width: 100%;

1510 clear: both;

1511 }

1512 .deemphasize {

1513 margin: 0;

1514 }

1515 }

1516

1517 .admin-user-info small {

1518 margin-bottom: $lineheight/2;

1519 display: inline;

1520 margin-right: $lineheight;

1521 }

1522

1523 .activity-block {

1524 clear: left;

1525 border-bottom: 1px solid #ccc;

1526 padding-bottom: $lineheight;

1527 float: left;

1528 h3 {

1529 margin-bottom: $lineheight/2;

1530 }

1531 }

1532

1533 .contact-activity {

1534 margin-top: $lineheight;

1535 width: 100%;

1536 }

1537

1538 .activity-details p {

1539 margin-left: 70px;

1540 margin-bottom: 0;

1541 }

1542

1543 #friends-container .contact-activity ul {

1544 margin-left: 70px;

1545 }

1546

1547 .user-view {

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

1549 .content-inner {

1550 max-width: none;

1551 }

1552 p#no_home_location {

1553 margin: $lineheight;

1554 }

1555 .user_thumbnail {

1556 margin-top: $lineheight/4;

1557 float: left;

1558 }

1559 }

1560

1561 /* Rules for the user map */

1562

1563 .content_map .leaflet-popup-content {

1564 margin: $lineheight/2;

1565 min-height: 50px;

1566 }

1567

1568 /* Rules for user popups on maps */

1569

1570 .user_popup {

1571 min-width: 200px;

1572 p {

1573 padding: 0 0 5px 0;

1574 margin-top: 0 0 0 60px;

1575 font-size: 12px;

1576 }

1577 img.user_thumbnail {

1578 float: left;

1579 margin: 0 $lineheight/2 0 0;

1580 }

1581 }

1582

1583 /* Rules for the user list */

1584

1585 #user_list {

1586 font-size: $lineheight/2;

1587 width: 100%;

1588

1589 tr {

1590 vertical-align: middle;

1591 }

1592

1593 p {

1594 margin-top: 0px;

1595 margin-bottom: 0px;

1596 }

1597 }

1598

1599 #user_list_actions {

1600 float: right;

1601 margin-top: $lineheight/2;

1602 }

1603

1604 /* Rules for the diary list page */

1605

1606 .diary_post {

1607 position: relative;

1608 margin-top: $lineheight/2;

1609 padding-top: $lineheight;

1610 border-top: 1px solid #ccc;

1611

1612 .post_heading {

1613 margin-bottom: $lineheight;

1614

1615 h2 {

1616 margin-top: 0;

1617 margin-bottom: $lineheight/2;

1618 font-size: 24px;

1619 }

1620 }

1621

1622 img.user_thumbnail {

1623 float: left;

1624 }

1625

1626 small.deemphasize {

1627 float: left;

1628 display: block;

1629 }

1630

1631 ul.secondary-actions {

1632 display: inline-block;

1633 }

1634 }

1635

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

1637 display: inline;

1638 }

1639

1640 /* Rules for the diary entry page */

1641

1642 .diary_entry {

1643 #map {

1644 position: relative;

1645 width: 90%;

1646 height: 400px;

1647 border: 1px solid #ccc;

1648 display: none;

1649 margin-bottom: $lineheight;

1650 }

1651 #newcomment {

1652 border-top: 1px solid #ccc;

1653 padding-top: $lineheight;

1654 margin-top: $lineheight/2;

1655 }

1656 .comments {

1657 max-width: 740px;

1658 }

1659 .diary-comment {

1660 margin-top: $lineheight/2;

1661 border-top: 1px dashed #ccc;

1662 padding-top: $lineheight/2;

1663 &:first-child {

1664 margin-top: $lineheight;

1665 padding-top: $lineheight;

1666 border-top: 1px solid #ccc;

1667 }

1668 p {

1669 margin-bottom: $lineheight/2;

1670 }

1671 .comment-heading {

1672 margin-bottom: 0;

1673 margin-top: 0;

1674 }

1675 }

1676 }

1677

1678 .diary_entry-view img.user_thumbnail {

1679 float: left;

1680 }

1681

1682 /* Rules for the log in page */

1683

1684 #login_openid_buttons {

1685 margin-bottom: 0;

1686 }

1687

1688 #login_openid_buttons li {

1689 float: left;

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

1691 }

1692

1693 /* Rules for the account confirmation page */

1694

1695 .user-terms {

1696 .legale {

1697 border: 1px solid #ccc;

1698 padding: $lineheight;

1699 margin-bottom: $lineheight;

1700 overflow: auto;

1701 height: 20em;

1702 }

1703

1704 #decline {

1705 background: $lightblue;

1706 &:hover {

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

1708 }

1709 }

1710 }

1711

1712 /* Rules for the account settings page */

1713

1714 #accountForm .user_map {

1715 position: relative;

1716 width: 500px;

1717 height: 400px;

1718 border: 1px solid #ccc;

1719 }

1720

1721 #accountForm .user_image {

1722 margin-bottom: 0;

1723 }

1724

1725 #accountForm #user_image {

1726 margin-left: 20px;

1727 }

1728

1729 #accountForm ul.accountImage-options {

1730 margin-left: 120px;

1731 }

1732

1733 .nohome .location {

1734 display: none;

1735 }

1736

1737 #homerow .message {

1738 display: none;

1739 }

1740

1741 .nohome .message {

1742 display: inline !important;

1743 }

1744

1745 .content_map.settings_map {

1746 width: 50%;

1747 float: none;

1748 }

1749

1750 /* Rules for the oauth settings page */

1751

1752 .oauth_clients .buttons .oauth-edit {

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

1754 }

1755

1756 .oauth_clients .buttons .oauth-delete {

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

1758 }

1759

1760 /* Rules for messages pages */

1761

1762 .messages {

1763 width: 100%;

1764 border: 1px solid #ddd;

1765

1766 input[type="submit"] {

1767 margin: auto;

1768 }

1769 tbody tr {

1770 border-top: 1px solid #ccc;

1771 }

1772

1773 .inbox-row {

1774 background: #f8f8ff;

1775 }

1776

1777 .inbox-row-unread {

1778 background:#CBEEA7;

1779 }

1780

1781 .right {

1782 float: right;

1783 }

1784

1785 tr td,

1786 tr th {

1787 padding: $lineheight/4;

1788 }

1789 p:last-child,

1790 h2:last-child,

1791 h3:last-child,

1792 ol:last-child,

1793 ul:last-child {

1794 margin-bottom:0;

1795 }

1796 tr td {

1797 height: 30px;

1798 border-right: 1px solid $lightgrey;

1799 }

1800 }

1801

1802 .inbox-row .inbox-mark-read {

1803 display: none;

1804 }

1805

1806 .info-line {

1807 margin-bottom: $lineheight;

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

1809 border-bottom: 1px solid #ccc;

1810

1811 form, form div {

1812 display: inline;

1813 }

1814 }

1815

1816 .info-line .user_thumbnail_tiny {

1817 vertical-align: middle;

1818 }

1819

1820 .inbox-sent {

1821 white-space: nowrap;

1822 }

1823

1824 .inbox-mark-unread,

1825 .inbox-mark-read,

1826 .inbox-delete {

1827 width: 1%;

1828 }

1829

1830 .inbox-row-unread .inbox-mark-unread {

1831 display: none;

1832 }

1833

1834 .message-read .message-buttons {

1835 margin-top: $lineheight;

1836 margin-bottom: $lineheight * 1.5;

1837 padding-top: $lineheight;

1838 border-top: 1px solid $lightgrey;

1839 }

1840

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

1842 border-radius: 0;

1843 }

1844

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

1846

1847 .error {

1848 padding: $lineheight;

1849 background-color: #ff7070;

1850 }

1851

1852 .warning {

1853 padding: $lineheight;

1854 background-color: #ffe0cc;

1855 }

1856

1857 .notice {

1858 padding: $lineheight;

1859 background-color: #CBEEA7;

1860 }

1861

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

1863

1864 .formError {

1865 display: inline-block;

1866 padding: 5px 10px;

1867 margin-top: 5px;

1868 border-radius: 4px;

1869 font-size: 12px;

1870 color: #fff;

1871 background-color: #ff7070;

1872 }

1873

1874 /* Rules for rails validation error boxes */

1875

1876 #errorExplanation {

1877 width: 400px;

1878 border: 2px solid #ff7070;

1879 padding: 0 $lineheight/2;

1880 margin-bottom: $lineheight;

1881 background-color: #f0f0f0;

1882

1883 h2 {

1884 margin: 0 -10px 10px -10px;

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

1886 font-weight: bold;

1887 font-size: 12px;

1888 background-color: #c00;

1889 color: #fff;

1890 text-align: left;

1891 }

1892

1893 p {

1894 color: #333;

1895 margin-bottom: 0px;

1896 padding: $lineheight/4;

1897 }

1898

1899 ul {

1900 padding-left: $lineheight;

1901

1902 li {

1903 font-size: 12px;

1904 list-style: disc;

1905 }

1906 }

1907 }

1908

1909 /* Rules for forms */

1910

1911 .standard-form {

1912 fieldset {

1913 margin-bottom: $lineheight;

1914 }

1915 label.standard-label {

1916 display: block;

1917 margin-bottom: $lineheight/4;

1918 font-size: $typeheight;

1919 font-weight: bold;

1920 line-height: 1.5;

1921 }

1922 label.standard-label.secondary {

1923 display: inline-block;

1924 font-weight: normal;

1925 }

1926 .form-help {

1927 font-weight: normal;

1928 }

1929 .form-column {

1930 float: left;

1931 margin-right: 20px;

1932 }

1933 .form-divider {

1934 margin-top: $lineheight;

1935 padding-top: $lineheight;

1936 border-top: 1px solid $lightgrey;

1937 }

1938 .horizontal-list .form-row {

1939 float: left;

1940 padding-right: 10px;

1941 }

1942 .form-row {

1943 margin-bottom: $lineheight/2;

1944 }

1945 .form-list {

1946 margin-bottom: 0;

1947 }

1948 .form-list li {

1949 margin-bottom: 5px;

1950 }

1951 input[type="checkbox"],

1952 input[type="radio"] {

1953 float: left;

1954 margin-top: 5px;

1955 }

1956 }

1957

1958 #remember_me_openid {

1959 display: block;

1960 }

1961

1962 select {

1963 padding: 2px;

1964 }

1965

1966 input[type="checkbox"],

1967 input[type="radio"] {

1968 margin-right: 5px;

1969 }

1970

1971 input[type="text"],

1972 input[type="email"],

1973 input[type="url"],

1974 input[type="password"],

1975 textarea {

1976 color: #222;

1977 background-color: #fff;

1978 border: 1px solid #ccc;

1979 padding: 2px 5px;

1980 margin: 0;

1981 width: 200px;

1982

1983 &.field_with_errors {

1984 border: 2px solid #ff7070;

1985 }

1986 }

1987

1988 textarea {

1989 padding: 5px;

1990 width: 100%;

1991 }

1992

1993 /* Rules for user images */

1994

1995 img.user_image {

1996 max-width: 100px;

1997 max-height: 100px;

1998 border: 1px solid #ccc;

1999 margin-bottom: $lineheight;

2000 float: left;

2001 margin-right: $lineheight;

2002 }

2003

2004 img.user_thumbnail {

2005 max-width: 50px;

2006 max-height: 50px;

2007 border: 1px solid #ccc;

2008 margin-right: $lineheight;

2009 }

2010

2011 img.user_thumbnail_tiny {

2012 width: auto;

2013 height: auto;

2014 max-width: 25px;

2015 max-height: 25px;

2016 border: 1px solid #ccc;

2017 }

2018

2019 /* Rules for geo microformats */

2020

2021 abbr.geo {

2022 border-bottom: none;

2023 }

2024

2025 /* Rules for RSS buttons */

2026

2027 .rsssmall {

2028 position: relative;

2029 top: 3px;

2030 }

2031

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

2033

2034 ul.secondary-actions {

2035 font-style: normal;

2036 margin-bottom: 0;

2037 margin-left: 0;

2038 &.pager {

2039 display: inline-block;

2040 margin-right: 60px;

2041 }

2042 > li {

2043 display: block;

2044 float: left;

2045 list-style: none;

2046 border-left: 1px solid #ccc;

2047 padding-left: $lineheight/2;

2048 margin-right: $lineheight/2;

2049 &:first-child {

2050 border-left: 0;

2051 padding-left: 0;

2052 }

2053 &:last-child {

2054 margin-right: 0px;

2055 }

2056 }

2057 }

2058

2059 div.secondary-actions {

2060 padding: 10px;

2061 text-align: center;

2062 }

2063

2064 /* Utility for managing inner content areas */

2065

2066 .inner22 { padding: $lineheight;}

2067

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

2069

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

2071

2072 .inner20 { padding: $lineheight 0;}

2073

2074 .inner02 { padding: 0 $lineheight;}

2075

2076 /* Utility for general button styles */

2077

2078 input[type="button"],

2079 input[type="submit"],

2080 input[type="reset"],

2081 a.button {

2082 cursor: pointer;

2083 border: 0;

2084 display: inline-block;

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

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

2087 min-width: 120px;

2088 margin: 0 0 $lineheight/2 0;

2089 color: white;

2090 background: $blue;

2091 text-align: center;

2092 border-radius: 2px;

2093 &:hover {

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

2095 text-decoration: none;

2096 }

2097 &.deemphasize {

2098 background: $lightblue;

2099 &:hover {

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

2101 }

2102 }

2103 &:disabled {

2104 background: $lightgrey;

2105 &:hover {

2106 background: $lightgrey;

2107 }

2108 }

2109 &:last-child {

2110 margin-bottom: 0;

2111 }

2112 }

2113

2114 input[type="button"],

2115 input[type="submit"],

2116 input[type="reset"] {

2117 line-height: normal;

2118 }

2119

2120 a.button {

2121 line-height: 20px;

2122 }

2123

2124 .buttons {

2125 min-width: 200px;

2126 input[type="submit"],

2127 input[type="button"],

2128 input[type="reset"],

2129 .button,

2130 .button_to {

2131 box-sizing: border-box;

2132 float: left;

2133 border-radius: 0;

2134 margin:0;

2135 min-width: 75px;

2136 max-width: 180px;

2137 border-right:1px solid white;

2138 text-overflow: ellipsis;

2139 white-space: nowrap;

2140 overflow: hidden;

2141 }

2142 input:first-child,

2143 .button:first-child,

2144 .button_to:first-child {

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

2146 }

2147 input:last-child,

2148 .button:last-child,

2149 .button_to:last-child {

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

2151 border-right-width: 0;

2152 }

2153 input:only-child,

2154 .button:only-child,

2155 .button_to:only-child,

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

2157 *[value="Hide"] + .button:last-child,

2158 *[value="Hide"] + .button_to:last-child {

2159 border-radius:2px;

2160 border-right-width: 0;

2161 }

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

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

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

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

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

2167 border-right-width: 0;

2168 }

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

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

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

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

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

2174 border-right-width: 1px;

2175 }

2176 }

2177

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

2179

2180 .table0,

2181 .item0 {

2182 background: $offwhite;

2183 }

2184

2185 .table1,

2186 .item1 {

2187 background: #fff;

2188 }

2189

2190 /* Rules for OpenID logo */

2191

2192 .openid_logo {

2193 vertical-align: text-bottom;

2194 border: 0;

2195 }

2196

2197 /* Rules for rich text */

2198

2199 .richtext,

2200 .prose {

2201 h1, h2 {

2202 padding-bottom: $lineheight/2;

2203 border-bottom: 1px dashed #cccccc;

2204 margin-bottom: $lineheight/2;

2205 }

2206

2207 h1 {

2208 font-size: 24px;

2209 }

2210

2211 h2 {

2212 font-size: 18px;

2213 }

2214

2215 h3 {

2216 font-size: $typeheight;

2217 }

2218

2219 code {

2220 font-size: 13px;

2221 background: #e8e8e8;

2222 padding: 2px 3px;

2223 }

2224

2225 pre {

2226 font-size: 13px;

2227 background: #e8e8e8;

2228 padding: 2px 3px;

2229

2230 code {

2231 padding: 0;

2232 }

2233 }

2234

2235 img {

2236 padding: $lineheight;

2237 background-color: $offwhite;

2238 display: block;

2239 max-width: 100%;

2240 margin: auto;

2241 }

2242

2243 blockquote {

2244 border-left: $lineheight solid $offwhite;

2245 padding-left: $lineheight;

2246 margin: 0;

2247 color: #7E7E7E;

2248 }

2249

2250 ul, ol {

2251 padding-left: $lineheight;

2252 margin-bottom: $lineheight;

2253 margin-left: $lineheight;

2254 }

2255

2256 ul li {

2257 list-style: disc;

2258 }

2259

2260 ol li {

2261 list-style: decimal;

2262 }

2263 }

2264

2265 .diary_post .richtext {

2266 margin-top: $lineheight;

2267 }

2268

2269 .comments .richtext {

2270 margin-left: 70px;

2271 margin-top: 0;

2272 }

2273

2274 /* Rules for rich text editors */

2275

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

2277 width: 50%;

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

2279

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

2281 width: 100%;

2282 }

2283 }

2284

2285 .richtext_container {

2286 margin-bottom: $lineheight;

2287

2288 .richtext_content {

2289 width: 50%;

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

2291 display: inline-block;

2292 vertical-align: top;

2293

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

2295 width: 100%;

2296 }

2297

2298 .richtext_preview {

2299 display: inline-block;

2300 padding: $lineheight;

2301 background-color: $offwhite;

2302 overflow-x: auto;

2303

2304 &.loading {

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

2306 background-repeat: no-repeat;

2307 background-position: center;

2308 }

2309

2310 > :first-child {

2311 margin-top: 0px;

2312 }

2313 }

2314 }

2315

2316 .richtext_help {

2317 display: inline-block;

2318 vertical-align: top;

2319 margin-left: 15px;

2320 background-color: #f8f8ff;

2321 padding: $lineheight/2;

2322 width: 220px;

2323

2324 ul {

2325 margin-bottom: 0;

2326 }

2327

2328 h4.heading, li {

2329 border-bottom: 1px solid #ccc;

2330 margin-bottom: $lineheight/4;

2331 padding-bottom: $lineheight/4;

2332 }

2333

2334 li h4, li span, li p {

2335 display: inline-block;

2336 vertical-align: top;

2337 font-size: 11px;

2338 }

2339

2340 li h4 {

2341 width: 40%;

2342 margin: 0;

2343 }

2344

2345 li span, li p {

2346 width: 50%;

2347 margin-left: $lineheight/2;

2348 margin-bottom: $lineheight/4;

2349 white-space: nowrap;

2350 }

2351 }

2352 }

2353

2354 /* Rules for the user notes list */

2355

2356 .note_list {

2357 tr.creator {

2358 background-color: #eeeeee;

2359 }

2360

2361 td {

2362 padding: 3px;

2363 }

2364

2365 p {

2366 margin-bottom: 0px;

2367 }

2368 }

2369

2370 /* Rules for the iD editor */

2371

2372 .id-embed {

2373 width: 100%;

2374 height: 100%;

2375 }

2376

2377 /* Rules for dropdown menus */

2378

2379 .dropdown {

2380 position: relative;

2381 }

2382

2383 .dropdown-toggle {

2384 *margin-bottom: -3px;

2385 }

2386

2387 .dropdown-toggle:active,

2388 .open .dropdown-toggle {

2389 outline: 0;

2390 }

2391

2392 .caret {

2393 display: inline-block;

2394 width: 0;

2395 height: 0;

2396 vertical-align: top;

2397 border-top: 4px solid #000000;

2398 border-right: 4px solid transparent;

2399 border-left: 4px solid transparent;

2400 content: "";

2401 }

2402

2403 .dropdown .caret {

2404 margin-top: 8px;

2405 margin-left: 2px;

2406 }

2407

2408 .dropdown-menu {

2409 position: absolute;

2410 top: 100%;

2411 left: -1px;

2412 z-index: 1000;

2413 display: none;

2414 float: left;

2415 min-width: 160px;

2416 padding: 5px 0;

2417 margin: 0;

2418 list-style: none;

2419 background-color: #ffffff;

2420 border: 1px solid #ccc;

2421 border-radius: 0 3px 3px;

2422 *border-right-width: 2px;

2423 *border-bottom-width: 2px;

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

2425 background-clip: padding-box;

2426 }

2427

2428 .dropdown-menu.pull-right {

2429 right: 0;

2430 left: auto;

2431 }

2432

2433 .dropdown-menu .divider {

2434 *width: 100%;

2435 height: 1px;

2436 margin: 9px 1px;

2437 *margin: -5px 0 5px;

2438 overflow: hidden;

2439 background-color: #e5e5e5;

2440 border-bottom: 1px solid #ffffff;

2441 }

2442

2443 .dropdown-menu > li > a {

2444 display: block;

2445 padding: 3px 10px;

2446 clear: both;

2447 font-weight: normal;

2448 line-height: 20px;

2449 color: #333333;

2450 white-space: nowrap;

2451 }

2452

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

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

2455 .dropdown-submenu:hover > a,

2456 .dropdown-submenu:focus > a {

2457 color: #ffffff;

2458 text-decoration: none;

2459 background-color: $green;

2460 }

2461

2462 .dropdown-menu > .active > a,

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

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

2465 color: #ffffff;

2466 text-decoration: none;

2467 background-color: $green;

2468 outline: 0;

2469 }

2470

2471 .dropdown-menu > .disabled > a,

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

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

2474 color: #999999;

2475 }

2476

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

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

2479 text-decoration: none;

2480 cursor: default;

2481 background-color: transparent;

2482 background-image: none;

2483 }

2484

2485 .open {

2486 *z-index: 1000;

2487 }

2488

2489 .open > .dropdown-menu {

2490 display: block;

2491 }

2492

2493 .dropdown-backdrop {

2494 position: fixed;

2495 top: 0;

2496 right: 0;

2497 bottom: 0;

2498 left: 0;

2499 z-index: 990;

2500 }

2501

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

2503 .site-welcome, .site-fixthemap {

2504 .center {

2505 text-align: center;

2506 .sprite {

2507 float: none;

2508 margin: auto;

2509 }

2510 }

2511

2512 .sprite {

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

2514 background-size: 500px 250px;

2515 display: block;

2516 float: left;

2517 }

2518

2519 .icon-list {

2520 padding-bottom: 20px;

2521 div {

2522 margin-bottom: 10px;

2523 p {

2524 padding-top: 10px;

2525 }

2526 }

2527 }

2528 .sprite.small {

2529 width: 50px;

2530 height: 50px;

2531 }

2532

2533 .sprite.x {

2534 background-position: -50px 0;

2535 }

2536

2537 .sprite.term {

2538 margin-right: 10px;

2539 vertical-align: middle;

2540 }

2541

2542 .sprite.node {

2543 background-position: -100px 0;

2544 }

2545

2546 .sprite.way {

2547 background-position: -150px 0;

2548 }

2549

2550 .sprite.tag {

2551 background-position: -200px 0;

2552 }

2553

2554 .sprite.editor {

2555 background-position: -250px 0;

2556 }

2557

2558 .sprite.question {

2559 background-position: -300px 0;

2560 }

2561

2562 .start-mapping {

2563 margin: auto;

2564 cursor: pointer;

2565 border: none;

2566 padding: 20px 40px;

2567 font-size: 30px;

2568 text-decoration: none;

2569 }

2570

2571 .note-box {

2572 margin-top: 20px;

2573 background-color: $offwhite;

2574 }

2575

2576 .icon.note {

2577 background-color: #333;

2578 border-radius: 4px;

2579 }

2580 }

2581

2582 .site-about #content {

2583 //background-color: #000;

2584 background-color: #eee;

2585 background-position: 50% 50%;

2586 background-repeat: no-repeat;

2587 background-size: cover;

2588 background-attachment: fixed;

2589

2590 .caption {

2591 max-width: 200px;

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

2593 position: fixed;

2594 text-align: right;

2595 right: 20px;

2596 bottom: 60px;

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

2598 color: #eee;

2599 opacity: 0.8;

2600 display: none;

2601 }

2602

2603 .caption a {

2604 color: white;

2605 white-space: nowrap;

2606 text-decoration: none;

2607 }

2608

2609 a.next {

2610 display: block;

2611 position: fixed;

2612 right: 10px;

2613 bottom: 10px;

2614 width: 40px;

2615 height: 40px;

2616 border-radius: 5px;

2617 text-indent: -9999px;

2618 overflow: hidden;

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

2620 background-color: #000;

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

2622 }

2623

2624 .content-inner {

2625 position: relative;

2626 color: #333;

2627 min-width: 320px;

2628 max-width: 640px;

2629

2630 .section {

2631 margin-bottom: 30px;

2632 }

2633

2634 .section:last-child {

2635 margin-bottom: 0;

2636 }

2637 }

2638

2639 .text {

2640 background: white;

2641 padding: 40px;

2642 }

2643

2644 .attr {

2645 position: relative;

2646 padding: 170px 40px 20px;

2647 background: #333;

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

2649 margin-bottom: 0;

2650 margin-top: -20px;

2651

2652 h1 {

2653 display: block;

2654 color: white;

2655 font-weight: 300;

2656 font-size: 34px;

2657 span {

2658 color: #76c551;

2659 }

2660 }

2661

2662 .user-image {

2663 position: absolute;

2664 top: 0px;

2665 right: 240px;

2666 left: 0px;

2667 height: 150px;

2668 background-position: 0 50%;

2669 background-repeat: no-repeat;

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

2671 background-size: cover;

2672 background-color: #76c551;

2673 }

2674

2675 .byosm {

2676 position: absolute;

2677 top: 0px;

2678 right: 0px;

2679 z-index: 1;

2680 width: 240px;

2681 height: 150px;

2682 padding: 20px 20px 20px 40px;

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

2684 white-space: nowrap;

2685 color: #fff;

2686 background: #76c551;

2687 }

2688

2689 .byosm span {

2690 display: inline-block;

2691 width: 20px;

2692 margin-left: -20px;

2693 }

2694 }

2695

2696 h2 {

2697 margin-bottom: 10px;

2698 }

2699

2700 .icon {

2701 width: 30px;

2702 height: 30px;

2703 margin-right: 10px;

2704 vertical-align: middle;

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

2706

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

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

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

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

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

2712 }

2713 }

2714

2715 @import 'browse';

2716

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

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

2719 display: none;

2720 }

2721 }

2722