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 -webkit-box-sizing: border-box;

91 -moz-box-sizing: border-box;

92 box-sizing: border-box;

93 }

95 body {

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

97 font-size: $typeheight;

98 line-height: 1.6666;

99 color: #222;

100 background-color: #fff;

101 margin: 0px;

102 padding: 0px;

103 text-align: left;

104 height: 100%;

105 }

106

107 body.slim {

108 background-color: #f0f0f0;

109 }

110

111 h1, h2, h3 {

112 font-weight: 600;

113 line-height: 1.2;

114 }

115

116 h4, h5 {

117 font-weight: 500;

118 }

119

120 h1 {

121 font-size: 18px;

122 }

123

124 h2, h3 {

125 font-size: 16px;

126 }

127

128 p > img {

129 width: auto;

130 max-width: 100%;

131 }

132

133 small, aside {

134 font-size: 12px;

135 }

136

137 #container { position: relative; }

138

139 .column-1 {

140 width: 50%;

141 margin: 0 0 $lineheight/2 0;

142 }

143

144 .small_icon {

145 vertical-align: middle;

146 margin-right: $lineheight/4;

147 }

148

149 .red { color: $red; }

150

151 /* Rules for icons */

152

153 .icon {

154 display:inline-block;

155 vertical-align:top;

156 width:20px;

157 height:20px;

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

159 text-indent:-9999px;

160 overflow:hidden;

161 }

162

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

179

180 /* Rules for links */

181

182 a {

183 color: #24d;

184 text-decoration: none;

185 -webkit-appearance: none;

186 outline: 0;

187 &:hover {

188 text-decoration: underline;

189 }

190 }

191

192 /* Rules for horizontal lines */

193

194 hr {

195 border: none;

196 background-color: #ccc;

197 color: #ccc;

198 height: 1px;

199 }

200

201 /* General styles for tables */

202

203 table {

204 width: 100%;

205 margin-bottom: $lineheight;

206 th, td {

207 text-align: left;

208 padding: $lineheight/4;

209 line-height: $lineheight;

210 }

211 th {

212 font-weight: 600;

213 vertical-align: top;

214 }

215 td {

216 vertical-align: middle;

217 }

218 }

219

220 /* Utility for de-emphasizing content */

221

222 .deemphasize {

223 color: #999;

224 a {

225 color: $blue;

226 }

227 }

228

229 /* Rules for the header */

230

231 #menu-icon {

232 display: none !important;

233 float: right;

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

235 background-size: 30px 30px;

236 display: block;

237 width: 30px;

238 height: 30px;

239 margin: 14px 10px 0 0;

240 opacity: 0.6;

241 }

242

243 header {

244 height: $headerHeight;

245 position: relative;

246 z-index: 1001;

247 font-size: 14px;

248

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

250 display: inline-block;

251 }

252

253 > * {

254 height: 100%;

255 padding: $lineheight/2;

256 }

257

258 h1, nav.primary {

259 float: left;

260 }

261

262 a, a:hover {

263 text-decoration: none;

264 }

265

266 img.logo {

267 width: 30px;

268 height: 30px;

269 margin-top: -2px;

270 vertical-align: middle;

271 }

272

273 h1 {

274 margin: 0;

275 padding-top: 15px;

276

277 a {

278 color: #000;

279 }

280 }

281 }

282

283 nav.primary {

284 > ul {

285 $border: 1px solid $green;

286

287 border: $border;

288 border-radius: $border-radius;

289

290 > li {

291 border-right: $border;

292 float: left;

293 &:last-child {

294 border-right: 0;

295 }

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

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

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

299 &.dropdown {

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

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

302 }

303 }

304 }

305

306 a.tab,

307 .dropdown-toggle {

308 display: inline-block;

309 font-weight: 500;

310 color: $green;

311 padding: 5px 15px;

312 }

313

314 .dropdown-toggle {

315 padding: 5px 6px;

316 }

317

318 .caret {

319 border-top-color: $green;

320 margin-top: 10px;

321 }

322

323 .disabled a {

324 color: #ccc;

325 cursor: default;

326

327 .caret {

328 border-top-color: #ccc;

329 }

330 }

331

332 > ul li.current {

333 background-color: $green;

334

335 .tab {

336 color: #fff;

337 }

338

339 .caret {

340 border-top-color: #fff;

341 }

342 }

343 }

344

345 nav.secondary {

346 position: absolute;

347 right: 0;

348

349 > ul {

350 vertical-align: middle;

351 a, .dropdown-toggle {

352 display: inline-block;

353 text-decoration: none;

354 color: $darkgrey;

355 padding: 5px;

356

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

358 }

359 }

360

361 > ul li.current a {

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

363 }

364

365 .user-menu {

366 $border: 1px solid $grey;

367 border: $border;

368 border-radius: $border-radius;

369 margin-left: 10px;

370

371 > li {

372 border-right: $border;

373 float: left;

374 &:last-child {

375 border-right: 0;

376

377 > a {

378 border-radius: 0 $border-radius $border-radius 0;

379 }

380 }

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

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

383 }

384

385 a {

386 padding: 5px 15px;

387

388 }

389

390 &.logged-in > a {

391 padding: 0;

392 > .user-button {

393 line-height: 1.8;

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

395 display: inline-block;

396 color: $darkgrey;

397 }

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

399 }

400 }

401

402 .caret {

403 border-top-color: $grey;

404 margin-top: 9px;

405 }

406

407 img.user_thumbnail_tiny {

408 border: 0;

409 vertical-align: top;

410 margin-top: 0px;

411 margin: 4px 0 0 4px;

412 border-radius: 2px;

413 }

414

415 #inboxanchor {

416 display: inline-block;

417 vertical-align: top;

418 height: 25px;

419 margin: 3px 0 3px 3px;

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

421 line-height: 20px;

422 border-radius: 2;

423 }

424

425 .dropdown-menu {

426 left: auto;

427 right: -1px;

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

429

430 .count-number {

431 float: right;

432 padding: 0 5px;

433 margin: 0;

434 }

435 }

436 }

437

438 #compact-secondary-nav {

439 display: none;

440 ul li a {

441 width: 100%;

442 color: #333;

443 &:hover { color: #fff; }

444 }

445 }

446

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

448 #compact-secondary-nav {

449 display: inline-block;

450 }

451 .compact-hide {

452 display: none;

453 }

454 }

455

456 /* Utility for styling notification numbers */

457

458 .count-number {

459 padding: 2px $lineheight/4;

460 border-radius: 2px;

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

462 margin: 0 2px;

463 font-size: 11px;

464 color: #333;

465 }

466

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

468

469 #noscript {

470 z-index: 20000000;

471 position: absolute;

472 top: 15px;

473 left: 15px;

474 }

475

476 /* Rules for bootstrap tooltips */

477

478 .tooltip {

479 position: absolute;

480 display: none;

481 color: #333;

482 text-align: left;

483 font-size: 12px;

484 max-width: 250px;

485 }

486

487 .tooltip.in {

488 opacity: 0.8;

489 z-index: 1030;

490 height: auto;

491 display: block;

492 }

493

494 .tooltip.top {

495 margin-top: -10px;

496 text-align: center;

497 }

498

499 .tooltip.right {

500 margin-left: 10px;

501 }

502

503 .tooltip.bottom {

504 margin-top: 10px;

505 text-align: center;

506 }

507

508 .tooltip.left {

509 margin-left: -10px;

510 text-align: right;

511 }

512

513 .tooltip-inner {

514 display: inline-block;

515 padding: 10px;

516 font-weight: normal;

517 background-color: white;

518 }

519

520 .tooltip-arrow {

521 position: absolute;

522 width: 0;

523 height: 0;

524 border-color: transparent;

525 border-style: solid;

526 }

527

528 .tooltip.top .tooltip-arrow {

529 bottom: -5px;

530 left: 50%;

531 margin-left: -5px;

532 border-top-color: white;

533 border-width: 5px 5px 0;

534 }

535

536 .tooltip.right .tooltip-arrow {

537 top: 50%;

538 left: -5px;

539 margin-top: -5px;

540 border-right-color: white;

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

542 }

543

544 .tooltip.left .tooltip-arrow {

545 top: 50%;

546 right: -5px;

547 margin-top: -5px;

548 border-left-color: white;

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

550 }

551

552 .tooltip.bottom .tooltip-arrow {

553 top: -5px;

554 left: 50%;

555 margin-left: -5px;

556 border-bottom-color: white;

557 border-width: 0 5px 5px;

558 }

559

560 /* Rules for Leaflet maps */

561

562 .leaflet-control .control-button {

563 display: block;

564 height: 40px;

565 width: 40px;

566 background-color: #333;

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

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

569 margin-bottom: 10px;

570 outline: none;

571

572 &:hover {

573 background-color: black;

574 }

575

576 &.active {

577 background-color: #9ed485;

578 }

579

580 &.disabled {

581 background-color: #333;

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

583 cursor: default;

584 }

585

586 .icon {

587 margin: 10px;

588 }

589 }

590

591 .leaflet-control .zoomin,

592 .control-layers .control-button {

593 margin-bottom: 0px;

594 border-radius: 4px 0 0 0;

595 }

596

597 .leaflet-control .zoomout,

598 .control-key .control-button {

599 margin-bottom: 0;

600 border-radius: 0;

601 }

602

603 .control-locate .control-button,

604 .control-share .control-button {

605 border-radius: 0 0 0 4px;

606 }

607

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

609

610 .map-layout {

611 #content {

612 overflow: hidden;

613 position: absolute;

614 top: $headerHeight;

615 bottom: 0;

616 width: 100%;

617 }

618

619 #sidebar, #map {

620 position: relative;

621 height: 100%;

622 overflow-x: hidden;

623 overflow-y: auto;

624 }

625

626 #sidebar {

627 float: left;

628 width: $sidebarWidth;

629 background: #fff;

630 font-size: 12px;

631

632 h2 {

633 padding: $lineheight $lineheight $lineheight/2;

634 }

635

636 h3, h4 {

637 margin-top: $lineheight;

638 margin-bottom: $lineheight/2;

639 font-size: 13px;

640 }

641

642 .icon.close {

643 float: right;

644 cursor: pointer;

645 }

646 }

647

648 .welcome {

649 display: none;

650 }

651

652 .overlay-sidebar #sidebar {

653 position: absolute;

654 z-index: 1000;

655 height: auto;

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

657 overflow: hidden;

658 .welcome {

659 display: block;

660 }

661 #sidebar_content {

662 display: none;

663 }

664 }

665

666 .welcome {

667 p {

668 padding: $lineheight/2 $lineheight $lineheight;

669 font-size: 110%;

670 font-weight: 300;

671 }

672

673 .button {

674 width: 50%;

675 float: left;

676 margin: 0;

677 border-radius: 0;

678 font-weight: normal;

679 padding: .6em;

680

681 &.learn-more {

682 border-right: 1px solid #fff;

683 }

684 }

685 }

686

687 #map {

688 height: 100%;

689 overflow: hidden;

690 }

691

692 #map-ui {

693 display: none;

694 position: relative;

695 float: right;

696 width: 250px;

697 height: 100%;

698 background: white;

699 overflow: auto;

700

701 .section {

702 border-bottom: 1px solid #DDD;

703 padding: 10px 20px;

704 }

705

706 a.close-button {

707 float: right;

708 padding:5px;

709 font-size:20px;

710 line-height:10px;

711 color:#222;

712 border:1px solid #ddd;

713 }

714

715 .tooltip {

716 opacity: 1;

717 border: 1px solid #ccc;

718 .tooltip-arrow {

719 border-top-color: #ccc;

720 }

721 }

722 }

723 }

724

725 .layers-ui,

726 .share-ui {

727 li:last-child {

728 margin-bottom: 0;

729 }

730 }

731

732 .layers-ui {

733 .base-layers {

734 .leaflet-container {

735 width: 100%;

736 height: 50px;

737 cursor: pointer;

738 }

739

740 li {

741 overflow: hidden;

742 border-radius: 3px;

743 border: 2px solid #fff;

744 margin-bottom: 8px;

745 position: relative;

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

747

748 label {

749 position: absolute;

750 top: 0;

751 left: 0;

752 padding: 2px 6px;

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

754 cursor: pointer;

755 font-weight: 600;

756 font-size: 16px;

757 text-stroke: 2px #fff;

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

759 z-index: 2; // For IE9

760 input[type="radio"] {

761 display: none;

762 }

763 }

764

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

766 &:hover {

767 border-color: $grey;

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

769 }

770 }

771 }

772

773 .overlay-layers {

774 p {

775 font-size: 13px;

776 margin-bottom: 8px;

777 }

778 li.disabled { color: #999; }

779 }

780 }

781

782 .share-ui {

783 .share-tabs {

784 margin-bottom: 10px;

785

786 a {

787 color: #fff;

788 text-decoration: none;

789 background-color: $lightblue;

790 padding: 5px 10px;

791 }

792

793 a:first-child {

794 border-right: 1px solid #fff;

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

796 }

797

798 a:last-child {

799 border-left: 1px solid #fff;

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

801 }

802

803 a.active {

804 background-color: $blue;

805 }

806 }

807

808 .share-tab {

809 display: none;

810 }

811

812 .share-link {

813 input[type=text],

814 textarea {

815 width: 100%;

816 font-family: monospace;

817 font-size: small;

818 line-height: 1.3;

819 }

820 }

821

822 .share-image {

823 label {

824 margin-right: 10px;

825 }

826 }

827

828 #embed_html {

829 resize: vertical;

830 }

831

832 #mapnik_scale {

833 width: 100px;

834 }

835 }

836

837 .leaflet-top {

838 top: $lineheight/2 !important;

839 .leaflet-control {

840 margin-right: 0px !important;

841 margin-top: 0px !important;

842 }

843 }

844

845 .leaflet-popup-scrolled {

846 padding-right: $lineheight;

847 border-bottom: 0px !important;

848 border-top: 0px !important;

849 }

850

851 .leaflet-popup-content-wrapper {

852 border-radius: 4px !important;

853 -webkit-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 padding-top: 1px;

920 background-color: $lightgrey;

921

922 .query_wrapper {

923 position: relative;

924 overflow: hidden;

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

926 }

927

928 input[type=text] {

929 width: 100%;

930 height: 30px;

931 border-right: none;

932

933 transition: 300ms linear;

934 -webkit-transition: 300ms linear;

935 -moz-transition: 300ms linear;

936 }

937

938 input:focus {

939 outline: none;

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

941 }

942

943 input[type=submit] {

944 float: right;

945 width: auto;

946 min-width: 0;

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

948 }

949

950 .query_options {

951 text-align: right;

952 font-size: 10px;

953 color: $blue;

954 }

955

956 .routing {

957 display: none;

958 }

959 }

960

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

962

963 #mapkey {

964 .mapkey-table-key img {

965 display: block;

966 margin-left: auto;

967 margin-right: auto;

968 }

969 td {

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

971 }

972 }

973

974 /* Rules for search sidebar */

975

976 .search_results_entry {

977 ul li {

978 border-bottom: $keyline;

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

980 }

981

982 .search_details {

983 display: block;

984 float: right;

985 text-align: right;

986 margin-top: 0.2em;

987 margin-left: 0.5em;

988 }

989 }

990

991 .search_results_error {

992 color: #f00;

993 }

994

995 /* Rules for routing */

996

997 #sidebar_content>table {

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

999 width: 100%;

1000 border-collapse: separate;

1001 }

1002

1003 td.direction {

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

1005 width: 20px; height: 20px;

1006 background-repeat: no-repeat;

1007 }

1008 @for $i from 1 through 17 {

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

1010 }

1011

1012 td.instruction, td.distance {

1013 padding-top: 0;

1014 border-bottom: 1px solid #DDD;

1015 }

1016 td.distance {

1017 color: #BBB;

1018 text-align: right;

1019 font-size: x-small;

1020 }

1021 tr.turn {

1022 cursor: pointer;

1023 }

1024 tr.turn:hover {

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

1026 }

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

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

1029

1030 /* Rules for entity history */

1031

1032 #sidebar_content {

1033 .browse_details {

1034 position: relative;

1035 border-bottom: $keyline;

1036 }

1037 }

1038

1039 .browse_status {

1040 display: none;

1041 }

1042

1043 /* Rules for the history sidebar */

1044

1045 #sidebar .changesets {

1046 li {

1047 padding: 15px 20px;

1048 border-bottom: 1px solid #ddd;

1049 cursor: pointer;

1050

1051 &.selected { background: #FFFFE6; }

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

1053 }

1054

1055 h4 {

1056 margin: 0;

1057 a {

1058 color: #000;

1059 }

1060 }

1061 }

1062

1063 /* Rules for the browse sidebar */

1064

1065 #sidebar_content {

1066 .browse-section {

1067 padding: $lineheight/2 $lineheight;

1068 border-bottom: 1px solid #ddd;

1069

1070 h4:first-child {

1071 margin-top: 0;

1072 word-wrap: break-word;

1073 }

1074 }

1075

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

1077 border-bottom: none;

1078 }

1079

1080 .paginate {

1081 float: right;

1082 padding: 1px 6px;

1083 border: 1px solid #eee;

1084 border-radius: 3px;

1085 }

1086

1087 .paginate ul {

1088 padding-left: 20px;

1089 }

1090

1091 .browse-field {

1092 margin-bottom: 10px;

1093

1094 h4 {

1095 padding: 5px 0 5px 10px;

1096 font-size: 12px;

1097 border: 1px solid #CCC;

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

1099 background-color: #F6F6F6;

1100 }

1101

1102 p {

1103 padding: 7px 10px;

1104 font-size: 12px;

1105 background-color: #FFF;

1106 border: 1px solid #CCC;

1107 border-top: 0;

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

1109 }

1110 }

1111

1112 .browse-tag-list {

1113 background-color: #F6F6F6;

1114 border: 1px solid #ddd;

1115 border-radius: 3px;

1116 font-size: 12px;

1117 table-layout: fixed;

1118 border-collapse: separate;

1119

1120 th, td {

1121 border-bottom: 1px solid #ddd;

1122 }

1123

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

1125 border-bottom: 0;

1126 }

1127

1128 .browse-tag-k,

1129 .browse-tag-v {

1130 width: 50%;

1131 padding: 6px 10px;

1132 word-wrap: break-word;

1133 }

1134

1135 .browse-tag-k {

1136 font-weight: 500;

1137 background-color: #F6F6F6;

1138 }

1139

1140 .browse-tag-v {

1141 border-left: 1px solid #ddd;

1142 background-color: #fff;

1143 }

1144 }

1145

1146 .warning {

1147 margin: $lineheight/2 0;

1148 padding: $lineheight/2;

1149 font-size: 90%;

1150 }

1151

1152 .note-comments li {

1153 margin: $lineheight/2 0;

1154

1155 p {

1156 margin-left: 10px;

1157 }

1158 }

1159

1160 .note-description {

1161 overflow: hidden;

1162 margin: 0 0 10px 10px;

1163 }

1164 }

1165

1166 /* Rules for export sidebar */

1167

1168 .export_form {

1169 padding: $lineheight;

1170

1171 .export_area_inputs,

1172 .export_button {

1173 text-align: center;

1174 }

1175

1176 .export_area_inputs {

1177 margin-bottom: $lineheight/2;

1178 input[type="text"] {

1179 width: 80px;

1180 text-align: center;

1181 margin-bottom: 5px;

1182 }

1183 }

1184

1185 .export_boxy {

1186 background: #eee;

1187 border: 1px solid #ccc;

1188 border-radius: 3px;

1189

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

1191 #minlon {

1192 float: left;

1193 margin-left: -1px;

1194 }

1195 #maxlon {

1196 float: right;

1197 margin-right: -1px;

1198 }

1199 #minlat { margin-bottom: 0; }

1200 }

1201

1202 .export_bound {

1203 margin: $lineheight/4;

1204 }

1205

1206 .export_button {

1207 margin-top: $lineheight;

1208 margin-bottom: $lineheight;

1209 }

1210

1211 dl {

1212 padding-left: $lineheight/2;

1213 dd {

1214 margin-left: 0;

1215 margin-bottom: 10px;

1216 }

1217 }

1218 }

1219

1220 /* Rules for the routing sidebar */

1221

1222 #sidebar_content {

1223 #routing_credit {

1224 text-align: center;

1225 padding: 0.5em;

1226 }

1227 }

1228

1229 /* Rules for edit pages */

1230

1231 .site-edit {

1232 #content {

1233 position: absolute;

1234 top: $headerHeight;

1235 bottom: 0;

1236 width: 100%;

1237 }

1238

1239 #map {

1240 height: 100%;

1241 overflow: hidden;

1242 }

1243 }

1244

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

1246

1247 .content-heading {

1248 background: $lightgrey;

1249

1250 h1 { font-size: 22px; }

1251 }

1252

1253 .content-body {

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

1255 margin-bottom: $lineheight;

1256 }

1257

1258 h1, h2, h3 {

1259 margin-top: $lineheight/2;

1260 }

1261 }

1262

1263 .content-inner {

1264 position: relative;

1265 max-width: 900px;

1266 margin: auto;

1267 padding: $lineheight;

1268 }

1269

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

1271

1272 .user-new,

1273 .user-create,

1274 .user-terms {

1275 .content-body .content-inner {

1276 padding: 0;

1277 }

1278 }

1279

1280 .user-new,

1281 .user-create,

1282 .user-terms,

1283 .user-confirm {

1284 .content-heading .content-inner {

1285 height: 200px;

1286 }

1287 }

1288

1289 .header-illustration {

1290 background-position: 0 0;

1291 background-repeat: no-repeat;

1292 position: absolute;

1293 height: 200px;

1294 width: 100%;

1295 left: 0;

1296 bottom: 0;

1297

1298 &.new-user-main {

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

1300 }

1301

1302 &.confirm-main {

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

1304 }

1305

1306 &.new-user-terms {

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

1308 }

1309

1310 &.new-user-arm {

1311 height: 110px;

1312 width: 130px;

1313 left: 260px;

1314 top: 160px;

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

1316 z-index: 100;

1317 }

1318 }

1319

1320 #content.maximised {

1321 top: 0;

1322 left: 0;

1323 right: 0;

1324 bottom: 0;

1325 border: 0;

1326 z-index: 2000;

1327 }

1328

1329 #slim_container {

1330 width: 100%;

1331 }

1332

1333 #slim_container_content {

1334 max-width: 50em;

1335 background-color: #FFFFFF;

1336 margin: $lineheight/2 auto;

1337 padding: 3px;

1338 border-radius: 25px;

1339 -moz-border-radius: 25px;

1340 border: 1px solid #e6e6e6;

1341 }

1342

1343 #slim_content {

1344 margin: $lineheight/2;

1345 margin-top: 95px;

1346 max-width: 50em;

1347

1348 .content-heading {

1349 margin-bottom: 15px;

1350 }

1351 }

1352

1353 #slim_header {

1354 margin: 30px $lineheight/2;

1355 position: absolute;

1356 top: 0px;

1357 margin-right: $lineheight/4;

1358 img {

1359 vertical-align: middle;

1360 margin-bottom: $lineheight/4;

1361 margin-right: $lineheight/4;

1362 }

1363 }

1364

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

1366

1367 .content_map {

1368 position: relative;

1369 width: 45%;

1370 height: 400px;

1371 border: 1px solid #ccc;

1372 margin-bottom: $lineheight;

1373 float: right;

1374 }

1375

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

1377

1378 #trace_list {

1379 font-size: $lineheight/2;

1380 border-width: 0px;

1381 text-align: right;

1382

1383 .trace_summary {

1384 font-size: 12px;

1385 color: gray;

1386 }

1387

1388 .trace_pending {

1389 color: red;

1390 }

1391

1392 .trace_public {

1393 color: green;

1394 }

1395

1396 .trace_identifiable {

1397 color: green;

1398 }

1399

1400 .trace_trackable {

1401 color: red;

1402 }

1403

1404 .trace_private {

1405 color: red;

1406 }

1407 }

1408

1409 /* Rules for the user profile page */

1410

1411 #userinformation {

1412

1413 min-height: 100px;

1414 .userinformation-inner {

1415 float: left;

1416 }

1417 h2 {

1418 margin-top: 0;

1419 }

1420 .user-description {

1421 width: 100%;

1422 clear: both;

1423 }

1424 .deemphasize {

1425 margin: 0;

1426 }

1427 }

1428

1429 .admin-user-info small {

1430 margin-bottom: $lineheight/2;

1431 display: inline;

1432 margin-right: $lineheight;

1433 }

1434

1435 .activity-block {

1436 clear: left;

1437 border-bottom: 1px solid #ccc;

1438 padding-bottom: $lineheight;

1439 float: left;

1440 h3 {

1441 margin-bottom: $lineheight/2;

1442 }

1443 }

1444

1445 .contact-activity {

1446 margin-top: $lineheight;

1447 width: 100%;

1448 }

1449

1450 .activity-details p {

1451 margin-left: 70px;

1452 margin-bottom: 0;

1453 }

1454

1455 #friends-container .contact-activity ul {

1456 margin-left: 70px;

1457 }

1458

1459 .user-view {

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

1461 .content-inner {

1462 max-width: none;

1463 }

1464 p#no_home_location {

1465 margin: $lineheight;

1466 }

1467 .user_thumbnail {

1468 margin-top: $lineheight/4;

1469 float: left;

1470 }

1471 }

1472

1473 /* Rules for the user map */

1474

1475 .content_map .leaflet-popup-content {

1476 margin: $lineheight/2;

1477 min-height: 50px;

1478 }

1479

1480 /* Rules for user popups on maps */

1481

1482 .user_popup {

1483 min-width: 200px;

1484 p {

1485 padding: 0 0 5px 0;

1486 margin-top: 0 0 0 60px;

1487 font-size: 12px;

1488 }

1489 img.user_thumbnail {

1490 float: left;

1491 margin: 0 $lineheight/2 0 0;

1492 }

1493 }

1494

1495 /* Rules for the user list */

1496

1497 #user_list {

1498 font-size: $lineheight/2;

1499 width: 100%;

1500

1501 tr {

1502 vertical-align: middle;

1503 }

1504

1505 p {

1506 margin-top: 0px;

1507 margin-bottom: 0px;

1508 }

1509 }

1510

1511 #user_list_actions {

1512 float: right;

1513 margin-top: $lineheight/2;

1514 }

1515

1516 /* Rules for the diary list page */

1517

1518 .diary_post {

1519 position: relative;

1520 margin-top: $lineheight/2;

1521 padding-top: $lineheight;

1522 border-top: 1px solid #ccc;

1523

1524 .post_heading {

1525 margin-bottom: $lineheight;

1526

1527 h2 {

1528 margin-top: 0;

1529 margin-bottom: $lineheight/2;

1530 font-size: 24px;

1531 }

1532 }

1533

1534 img.user_thumbnail {

1535 float: left;

1536 }

1537

1538 small.deemphasize {

1539 float: left;

1540 display: block;

1541 }

1542

1543 ul.secondary-actions {

1544 display: inline-block;

1545 }

1546 }

1547

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

1549 display: inline;

1550 }

1551

1552 /* Rules for the diary entry page */

1553

1554 .diary_entry {

1555 #map {

1556 position: relative;

1557 width: 90%;

1558 height: 400px;

1559 border: 1px solid #ccc;

1560 display: none;

1561 margin-bottom: $lineheight;

1562 }

1563 #newcomment {

1564 border-top: 1px solid #ccc;

1565 padding-top: $lineheight;

1566 margin-top: $lineheight/2;

1567 }

1568 .comments {

1569 max-width: 740px;

1570 }

1571 .diary-comment {

1572 margin-top: $lineheight/2;

1573 border-top: 1px dashed #ccc;

1574 padding-top: $lineheight/2;

1575 &:first-child {

1576 margin-top: $lineheight;

1577 padding-top: $lineheight;

1578 border-top: 1px solid #ccc;

1579 }

1580 p {

1581 margin-bottom: $lineheight/2;

1582 }

1583 .comment-heading {

1584 margin-bottom: 0;

1585 margin-top: 0;

1586 }

1587 }

1588 }

1589

1590 .diary_entry-view img.user_thumbnail {

1591 float: left;

1592 }

1593

1594 /* Rules for the log in page */

1595

1596 #login_openid_buttons {

1597 margin-bottom: 0;

1598 }

1599

1600 #login_openid_buttons li {

1601 float: left;

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

1603 }

1604

1605 /* Rules for the account confirmation page */

1606

1607 .user-terms {

1608 .legale {

1609 border: 1px solid #ccc;

1610 padding: $lineheight;

1611 margin-bottom: $lineheight;

1612 overflow: auto;

1613 height: 20em;

1614 }

1615

1616 #decline {

1617 background: $lightblue;

1618 &:hover {

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

1620 }

1621 }

1622 }

1623

1624 /* Rules for the account settings page */

1625

1626 #accountForm .user_map {

1627 position: relative;

1628 width: 500px;

1629 height: 400px;

1630 border: 1px solid #ccc;

1631 }

1632

1633 #accountForm .user_image {

1634 margin-bottom: 0;

1635 }

1636

1637 #accountForm #user_image {

1638 margin-left: 20px;

1639 }

1640

1641 #accountForm ul.accountImage-options {

1642 margin-left: 120px;

1643 }

1644

1645 .nohome .location {

1646 display: none;

1647 }

1648

1649 #homerow .message {

1650 display: none;

1651 }

1652

1653 .nohome .message {

1654 display: inline !important;

1655 }

1656

1657 .content_map.settings_map {

1658 width: 50%;

1659 float: none;

1660 }

1661

1662 /* Rules for the oauth settings page */

1663

1664 .oauth_clients .buttons .oauth-edit {

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

1666 }

1667

1668 .oauth_clients .buttons .oauth-delete {

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

1670 }

1671

1672 /* Rules for messages pages */

1673

1674 .messages {

1675 width: 100%;

1676 border: 1px solid #ddd;

1677

1678 input[type="submit"] {

1679 margin: auto;

1680 }

1681 tbody tr {

1682 border-top: 1px solid #ccc;

1683 }

1684

1685 .inbox-row {

1686 background: #f8f8ff;

1687 }

1688

1689 .inbox-row-unread {

1690 background:#CBEEA7;

1691 }

1692

1693 .right {

1694 float: right;

1695 }

1696

1697 tr td,

1698 tr th {

1699 padding: $lineheight/4;

1700 }

1701 p:last-child,

1702 h2:last-child,

1703 h3:last-child,

1704 ol:last-child,

1705 ul:last-child {

1706 margin-bottom:0;

1707 }

1708 tr td {

1709 height: 30px;

1710 border-right: 1px solid $lightgrey;

1711 }

1712 }

1713

1714 .inbox-row .inbox-mark-read {

1715 display: none;

1716 }

1717

1718 .info-line {

1719 margin-bottom: $lineheight;

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

1721 border-bottom: 1px solid #ccc;

1722

1723 form, form div {

1724 display: inline;

1725 }

1726 }

1727

1728 .info-line .user_thumbnail_tiny {

1729 vertical-align: middle;

1730 }

1731

1732 .inbox-sent {

1733 white-space: nowrap;

1734 }

1735

1736 .inbox-mark-unread,

1737 .inbox-mark-read,

1738 .inbox-delete {

1739 width: 1%;

1740 }

1741

1742 .inbox-row-unread .inbox-mark-unread {

1743 display: none;

1744 }

1745

1746 .message-read .message-buttons {

1747 margin-top: $lineheight;

1748 margin-bottom: $lineheight * 1.5;

1749 padding-top: $lineheight;

1750 border-top: 1px solid $lightgrey;

1751 }

1752

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

1754 border-radius: 0;

1755 }

1756

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

1758

1759 .error {

1760 padding: $lineheight;

1761 background-color: #ff7070;

1762 }

1763

1764 .warning {

1765 padding: $lineheight;

1766 background-color: #ffe0cc;

1767 }

1768

1769 .notice {

1770 padding: $lineheight;

1771 background-color: #CBEEA7;

1772 }

1773

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

1775

1776 .formError {

1777 display: inline-block;

1778 padding: 5px 10px;

1779 margin-top: 5px;

1780 border-radius: 4px;

1781 font-size: 12px;

1782 color: #fff;

1783 background-color: #ff7070;

1784 }

1785

1786 /* Rules for rails validation error boxes */

1787

1788 #errorExplanation {

1789 width: 400px;

1790 border: 2px solid #ff7070;

1791 padding: 0 $lineheight/2;

1792 margin-bottom: $lineheight;

1793 background-color: #f0f0f0;

1794

1795 h2 {

1796 margin: 0 -10px 10px -10px;

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

1798 font-weight: bold;

1799 font-size: 12px;

1800 background-color: #c00;

1801 color: #fff;

1802 text-align: left;

1803 }

1804

1805 p {

1806 color: #333;

1807 margin-bottom: 0px;

1808 padding: $lineheight/4;

1809 }

1810

1811 ul {

1812 padding-left: $lineheight;

1813

1814 li {

1815 font-size: 12px;

1816 list-style: disc;

1817 }

1818 }

1819 }

1820

1821 /* Rules for forms */

1822

1823 .standard-form {

1824 fieldset {

1825 margin-bottom: $lineheight;

1826 }

1827 label.standard-label {

1828 display: block;

1829 margin-bottom: $lineheight/4;

1830 font-size: $typeheight;

1831 font-weight: bold;

1832 line-height: 1.5;

1833 }

1834 label.standard-label.secondary {

1835 display: inline-block;

1836 font-weight: normal;

1837 }

1838 .form-help {

1839 font-weight: normal;

1840 }

1841 .form-column {

1842 float: left;

1843 margin-right: 20px;

1844 }

1845 .form-divider {

1846 margin-top: $lineheight;

1847 padding-top: $lineheight;

1848 border-top: 1px solid $lightgrey;

1849 }

1850 .horizontal-list .form-row {

1851 float: left;

1852 padding-right: 10px;

1853 }

1854 .form-row {

1855 margin-bottom: $lineheight/2;

1856 }

1857 .form-list {

1858 margin-bottom: 0;

1859 }

1860 .form-list li {

1861 margin-bottom: 5px;

1862 }

1863 input[type="checkbox"],

1864 input[type="radio"] {

1865 float: left;

1866 margin-top: 5px;

1867 }

1868 }

1869

1870 #remember_me_openid {

1871 display: block;

1872 }

1873

1874 input[type="checkbox"],

1875 input[type="radio"] {

1876 margin-right: 5px;

1877 }

1878

1879 input[type="text"],

1880 input[type="email"],

1881 input[type="url"],

1882 input[type="password"],

1883 textarea {

1884 border: 1px solid #ccc;

1885 padding: 2px 5px;

1886 margin: 0;

1887 width: 200px;

1888

1889 &.field_with_errors {

1890 border: 2px solid #ff7070;

1891 }

1892 }

1893

1894 textarea {

1895 padding: 5px;

1896 width: 100%;

1897 }

1898

1899 /* Rules for user images */

1900

1901 img.user_image {

1902 max-width: 100px;

1903 max-height: 100px;

1904 border: 1px solid #ccc;

1905 margin-bottom: $lineheight;

1906 float: left;

1907 margin-right: $lineheight;

1908 }

1909

1910 img.user_thumbnail {

1911 max-width: 50px;

1912 max-height: 50px;

1913 border: 1px solid #ccc;

1914 margin-right: $lineheight;

1915 }

1916

1917 img.user_thumbnail_tiny {

1918 width: auto;

1919 height: auto;

1920 max-width: 25px;

1921 max-height: 25px;

1922 border: 1px solid #ccc;

1923 }

1924

1925 /* Rules for geo microformats */

1926

1927 abbr.geo {

1928 border-bottom: none;

1929 }

1930

1931 /* Rules for RSS buttons */

1932

1933 .rsssmall {

1934 position: relative;

1935 top: 3px;

1936 }

1937

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

1939

1940 ul.secondary-actions {

1941 font-style: normal;

1942 margin-bottom: 0;

1943 margin-left: 0;

1944 &.pager {

1945 display: inline-block;

1946 margin-right: 60px;

1947 }

1948 > li {

1949 display: block;

1950 float: left;

1951 list-style: none;

1952 border-left: 1px solid #ccc;

1953 padding-left: $lineheight/2;

1954 margin-right: $lineheight/2;

1955 &:first-child {

1956 border-left: 0;

1957 padding-left: 0;

1958 }

1959 &:last-child {

1960 margin-right: 0px;

1961 }

1962 }

1963 }

1964

1965 div.secondary-actions {

1966 padding: 10px;

1967 text-align: center;

1968 }

1969

1970 /* Utility for managing inner content areas */

1971

1972 .inner22 { padding: $lineheight;}

1973

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

1975

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

1977

1978 .inner20 { padding: $lineheight 0;}

1979

1980 .inner02 { padding: 0 $lineheight;}

1981

1982 /* Utility for general button styles */

1983

1984 input[type="button"],

1985 input[type="submit"],

1986 input[type="reset"],

1987 a.button {

1988 cursor: pointer;

1989 border: 0;

1990 display: inline-block;

1991 line-height: 20px;

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

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

1994 min-width: 120px;

1995 margin: 0 0 $lineheight/2 0;

1996 color: white;

1997 background: $blue;

1998 text-align: center;

1999 border-radius: 2px;

2000 -moz-border-radius: 2px;

2001 &:hover {

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

2003 text-decoration: none;

2004 }

2005 &.deemphasize {

2006 background: $lightblue;

2007 &:hover {

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

2009 }

2010 }

2011 &:disabled {

2012 background: $lightgrey;

2013 &:hover {

2014 background: $lightgrey;

2015 }

2016 }

2017 &:last-child {

2018 margin-bottom: 0;

2019 }

2020 }

2021

2022 .buttons {

2023 min-width: 200px;

2024 input[type="submit"],

2025 input[type="button"],

2026 input[type="reset"],

2027 .button {

2028 box-sizing: border-box;

2029 float: left;

2030 border-radius: 0;

2031 margin:0;

2032 min-width: 75px;

2033 max-width: 180px;

2034 border-right:1px solid white;

2035 text-overflow: ellipsis;

2036 white-space: nowrap;

2037 overflow: hidden;

2038 }

2039 input:first-child,

2040 .button:first-child {

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

2042 }

2043 input:last-child,

2044 .button:last-child {

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

2046 border-right-width: 0;

2047 }

2048 input:only-child,

2049 .button:only-child,

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

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

2052 border-radius:2px;

2053 border-right-width: 0;

2054 }

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

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

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

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

2059 border-right-width: 0;

2060 }

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

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

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

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

2065 border-right-width: 1px;

2066 }

2067 }

2068

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

2070

2071 .table0,

2072 .item0 {

2073 background: $offwhite;

2074 }

2075

2076 .table1,

2077 .item1 {

2078 background: #fff;

2079 }

2080

2081 /* Rules for OpenID logo */

2082

2083 .openid_logo {

2084 vertical-align: text-bottom;

2085 border: 0;

2086 }

2087

2088 /* Rules for rich text */

2089

2090 .richtext,

2091 .prose {

2092 h1, h2 {

2093 padding-bottom: $lineheight/2;

2094 border-bottom: 1px dashed #cccccc;

2095 margin-bottom: $lineheight/2;

2096 }

2097

2098 h1 {

2099 font-size: 24px;

2100 }

2101

2102 h2 {

2103 font-size: 18px;

2104 }

2105

2106 h3 {

2107 font-size: $typeheight;

2108 }

2109

2110 code {

2111 font-size: 13px;

2112 background: #e8e8e8;

2113 padding: 2px 3px;

2114 }

2115

2116 pre {

2117 font-size: 13px;

2118 background: #e8e8e8;

2119 padding: 2px 3px;

2120

2121 code {

2122 padding: 0;

2123 }

2124 }

2125

2126 img {

2127 padding: $lineheight;

2128 background-color: $offwhite;

2129 display: block;

2130 max-width: 100%;

2131 margin: auto;

2132 }

2133

2134 blockquote {

2135 border-left: $lineheight solid $offwhite;

2136 padding-left: $lineheight;

2137 margin: 0;

2138 color: #7E7E7E;

2139 }

2140

2141 ul, ol {

2142 padding-left: $lineheight;

2143 margin-bottom: $lineheight;

2144 margin-left: $lineheight;

2145 }

2146

2147 ul li {

2148 list-style: disc;

2149 }

2150

2151 ol li {

2152 list-style: decimal;

2153 }

2154 }

2155

2156 .diary_post .richtext {

2157 margin-top: $lineheight;

2158 }

2159

2160 .comments .richtext {

2161 margin-left: 70px;

2162 margin-top: 0;

2163 }

2164

2165 /* Rules for rich text editors */

2166

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

2168 width: 50%;

2169 width: -moz-calc(100% - 235px);

2170 width: -webkit-calc(100% - 235px);

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

2172

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

2174 width: 100%;

2175 }

2176 }

2177

2178 .richtext_container {

2179 margin-bottom: $lineheight;

2180

2181 .richtext_content {

2182 width: 50%;

2183 width: -moz-calc(100% - 235px);

2184 width: -webkit-calc(100% - 235px);

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

2186 display: inline-block;

2187 vertical-align: top;

2188

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

2190 width: 100%;

2191 }

2192

2193 .richtext_preview {

2194 display: inline-block;

2195 padding: $lineheight;

2196 background-color: $offwhite;

2197 overflow-x: auto;

2198

2199 &.loading {

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

2201 background-repeat: no-repeat;

2202 background-position: center;

2203 }

2204

2205 > :first-child {

2206 margin-top: 0px;

2207 }

2208 }

2209 }

2210

2211 .richtext_help {

2212 display: inline-block;

2213 vertical-align: top;

2214 margin-left: 15px;

2215 background-color: #f8f8ff;

2216 padding: $lineheight/2;

2217 width: 220px;

2218

2219 ul {

2220 margin-bottom: 0;

2221 }

2222

2223 h4.heading, li {

2224 border-bottom: 1px solid #ccc;

2225 margin-bottom: $lineheight/4;

2226 padding-bottom: $lineheight/4;

2227 }

2228

2229 li h4, li span, li p {

2230 display: inline-block;

2231 vertical-align: top;

2232 font-size: 11px;

2233 }

2234

2235 li h4 {

2236 width: 40%;

2237 margin: 0;

2238 }

2239

2240 li span, li p {

2241 width: 50%;

2242 margin-left: $lineheight/2;

2243 margin-bottom: $lineheight/4;

2244 white-space: nowrap;

2245 }

2246 }

2247 }

2248

2249 /* Rules for the user notes list */

2250

2251 .note_list {

2252 tr.creator {

2253 background-color: #eeeeee;

2254 }

2255

2256 td {

2257 padding: 3px;

2258 }

2259

2260 p {

2261 margin-bottom: 0px;

2262 }

2263 }

2264

2265 /* Rules for the iD editor */

2266

2267 .id-embed {

2268 width: 100%;

2269 height: 100%;

2270 }

2271

2272 /* Rules for dropdown menus */

2273

2274 .dropdown {

2275 position: relative;

2276 }

2277

2278 .dropdown-toggle {

2279 *margin-bottom: -3px;

2280 }

2281

2282 .dropdown-toggle:active,

2283 .open .dropdown-toggle {

2284 outline: 0;

2285 }

2286

2287 .caret {

2288 display: inline-block;

2289 width: 0;

2290 height: 0;

2291 vertical-align: top;

2292 border-top: 4px solid #000000;

2293 border-right: 4px solid transparent;

2294 border-left: 4px solid transparent;

2295 content: "";

2296 }

2297

2298 .dropdown .caret {

2299 margin-top: 8px;

2300 margin-left: 2px;

2301 }

2302

2303 .dropdown-menu {

2304 position: absolute;

2305 top: 100%;

2306 left: -1px;

2307 z-index: 1000;

2308 display: none;

2309 float: left;

2310 min-width: 160px;

2311 padding: 5px 0;

2312 margin: 0;

2313 list-style: none;

2314 background-color: #ffffff;

2315 border: 1px solid #ccc;

2316 border-radius: 0 3px 3px;

2317 *border-right-width: 2px;

2318 *border-bottom-width: 2px;

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

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

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

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

2323 -moz-background-clip: padding;

2324 background-clip: padding-box;

2325 }

2326

2327 .dropdown-menu.pull-right {

2328 right: 0;

2329 left: auto;

2330 }

2331

2332 .dropdown-menu .divider {

2333 *width: 100%;

2334 height: 1px;

2335 margin: 9px 1px;

2336 *margin: -5px 0 5px;

2337 overflow: hidden;

2338 background-color: #e5e5e5;

2339 border-bottom: 1px solid #ffffff;

2340 }

2341

2342 .dropdown-menu > li > a {

2343 display: block;

2344 padding: 3px 10px;

2345 clear: both;

2346 font-weight: normal;

2347 line-height: 20px;

2348 color: #333333;

2349 white-space: nowrap;

2350 }

2351

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

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

2354 .dropdown-submenu:hover > a,

2355 .dropdown-submenu:focus > a {

2356 color: #ffffff;

2357 text-decoration: none;

2358 background-color: $green;

2359 }

2360

2361 .dropdown-menu > .active > a,

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

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

2364 color: #ffffff;

2365 text-decoration: none;

2366 background-color: $green;

2367 outline: 0;

2368 }

2369

2370 .dropdown-menu > .disabled > a,

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

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

2373 color: #999999;

2374 }

2375

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

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

2378 text-decoration: none;

2379 cursor: default;

2380 background-color: transparent;

2381 background-image: none;

2382 }

2383

2384 .open {

2385 *z-index: 1000;

2386 }

2387

2388 .open > .dropdown-menu {

2389 display: block;

2390 }

2391

2392 .dropdown-backdrop {

2393 position: fixed;

2394 top: 0;

2395 right: 0;

2396 bottom: 0;

2397 left: 0;

2398 z-index: 990;

2399 }

2400

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

2402 .site-welcome, .site-fixthemap {

2403 .center {

2404 text-align: center;

2405 .sprite {

2406 float: none;

2407 margin: auto;

2408 }

2409 }

2410

2411 .sprite {

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

2413 background-size: 500px 250px;

2414 display: block;

2415 float: left;

2416 }

2417

2418 .icon-list {

2419 padding-bottom: 20px;

2420 div {

2421 margin-bottom: 10px;

2422 p {

2423 padding-top: 10px;

2424 }

2425 }

2426 }

2427 .sprite.small {

2428 width: 50px;

2429 height: 50px;

2430 }

2431

2432 .sprite.x {

2433 background-position: -50px 0;

2434 }

2435

2436 .sprite.term {

2437 margin-right: 10px;

2438 vertical-align: middle;

2439 }

2440

2441 .sprite.node {

2442 background-position: -100px 0;

2443 }

2444

2445 .sprite.way {

2446 background-position: -150px 0;

2447 }

2448

2449 .sprite.tag {

2450 background-position: -200px 0;

2451 }

2452

2453 .sprite.editor {

2454 background-position: -250px 0;

2455 }

2456

2457 .sprite.question {

2458 background-position: -300px 0;

2459 }

2460

2461 .start-mapping {

2462 margin: auto;

2463 cursor: pointer;

2464 border: none;

2465 padding: 20px 40px;

2466 font-size: 30px;

2467 text-decoration: none;

2468 }

2469

2470 .note-box {

2471 margin-top: 20px;

2472 background-color: $offwhite;

2473 }

2474

2475 .icon.note {

2476 background-color: #333;

2477 border-radius: 4px;

2478 }

2479 }

2480

2481 .site-about #content {

2482 //background-color: #000;

2483 background-color: #eee;

2484 background-position: 50% 50%;

2485 background-repeat: no-repeat;

2486 background-size: cover;

2487 background-attachment: fixed;

2488

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

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

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

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

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

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

2495

2496 .caption {

2497 max-width: 200px;

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

2499 position: fixed;

2500 text-align: right;

2501 right: 20px;

2502 bottom: 60px;

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

2504 color: #eee;

2505 opacity: 0.8;

2506 display: none;

2507 }

2508

2509 .caption a {

2510 color: white;

2511 white-space: nowrap;

2512 text-decoration: none;

2513 }

2514

2515 a.next {

2516 display: block;

2517 position: fixed;

2518 right: 10px;

2519 bottom: 10px;

2520 width: 40px;

2521 height: 40px;

2522 border-radius: 5px;

2523 text-indent: -9999px;

2524 overflow: hidden;

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

2526 background-color: #000;

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

2528 }

2529

2530 .content-inner {

2531 position: relative;

2532 color: #333;

2533 min-width: 320px;

2534 max-width: 640px;

2535

2536 .section {

2537 margin-bottom: 30px;

2538 }

2539

2540 .section:last-child {

2541 margin-bottom: 0;

2542 }

2543 }

2544

2545 .text {

2546 background: white;

2547 padding: 40px;

2548 }

2549

2550 .attr {

2551 position: relative;

2552 padding: 170px 40px 20px;

2553 background: #333;

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

2555 margin-bottom: 0;

2556 margin-top: -20px;

2557

2558 h1 {

2559 display: block;

2560 color: white;

2561 font-weight: 300;

2562 font-size: 34px;

2563 span {

2564 color: #76c551;

2565 }

2566 }

2567

2568 .user-image {

2569 position: absolute;

2570 top: 0px;

2571 right: 240px;

2572 left: 0px;

2573 height: 150px;

2574 background-position: 0 50%;

2575 background-repeat: no-repeat;

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

2577 background-size: cover;

2578 background-color: #76c551;

2579 }

2580

2581 .byosm {

2582 position: absolute;

2583 top: 0px;

2584 right: 0px;

2585 z-index: 1;

2586 width: 240px;

2587 height: 150px;

2588 padding: 20px 20px 20px 40px;

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

2590 white-space: nowrap;

2591 color: #fff;

2592 background: #76c551;

2593 }

2594

2595 .byosm span {

2596 display: inline-block;

2597 width: 20px;

2598 margin-left: -20px;

2599 }

2600 }

2601

2602 h2 {

2603 margin-bottom: 10px;

2604 }

2605

2606 .icon {

2607 width: 30px;

2608 height: 30px;

2609 margin-right: 10px;

2610 vertical-align: middle;

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

2612

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

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

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

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

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

2618 }

2619 }

2620

2621 @import 'browse';

2622

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

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

2625 display: none;

2626 }

2627 }

2628