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

1 /* Parameters */

2 $lineheight: 20px;

3 $typeheight: 14px;

5 $offwhite: #f4f4ff;

6 $blue: #7092FF;

7 $lightblue: #B8C5F0;

8 $green: #7ebc6f;

9 $grey: #CCC;

10 $lightgrey: #EEE;

11 $darkgrey: #AAA;

12 $hovercolor: 20%;

13 $headerHeight: 75px;

14 $sidebarWidth: 350px;

15 $keyline: 1px solid $grey;

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

19 /* Minimal CSS reset */

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

22 margin: 0;

23 padding: 0;

24 border: 0;

25 font-size:100%;

26 }

28 fieldset,img { border: 0; }

30 legend { color: #000; }

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

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

36 table {

37 border-collapse: collapse;

38 border-spacing: 0;

39 }

41 li { list-style: none; }

43 input,

44 select,

45 textarea,

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

48 abbr, acronym {

49 border-bottom: .1em dotted;

50 cursor: help;

51 }

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

55 .clearfix:before,

56 .clearfix:after {

57 content: " ";

58 display: table;

59 }

61 .clearfix:after {

62 clear: both;

63 }

65 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

79 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

95 .fillL { background-color: white; }

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

99 * {

100 -webkit-box-sizing: border-box;

101 -moz-box-sizing: border-box;

102 box-sizing: border-box;

103 }

104

105 body {

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

107 font-size: $typeheight;

108 line-height: 1.6666;

109 color: #222;

110 background-color: #fff;

111 margin: 0px;

112 padding: 0px;

113 text-align: left;

114 }

115

116 body.slim {

117 background-color: #f0f0f0;

118 }

119

120 h1, h2, h3 {

121 font-weight: bold;

122 line-height: 1.2;

123 }

124

125 h1 {

126 font-size: 18px;

127 }

128

129 h2, h3 {

130 font-size: 16px;

131 }

132

133 p > img {

134 width: auto;

135 max-width: 100%;

136 }

137

138 small, aside {

139 font-size: 12px;

140 }

141

142 .column-1 {

143 width: 50%;

144 margin: 0 0 $lineheight/2 0;

145 }

146

147 .small_icon {

148 vertical-align: middle;

149 margin-right: $lineheight/4;

150 }

151

152 /* Rules for icons */

153

154 .icon {

155 display:inline-block;

156 vertical-align:top;

157 width:20px;

158 height:20px;

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

160 text-indent:-9999px;

161 overflow:hidden;

162 }

163

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

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

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

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

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

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

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

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

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

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

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

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

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: #00f;

184 text-decoration: none;

185 &:hover {

186 text-decoration: underline;

187 }

188 }

189

190 /* Rules for horizontal lines */

191

192 hr {

193 border: none;

194 background-color: #ccc;

195 color: #ccc;

196 height: 1px;

197 }

198

199 /* General styles for tables */

200

201 table {

202 width: 100%;

203 margin-bottom: $lineheight;

204 th, td {

205 text-align: left;

206 padding: $lineheight/4;

207 line-height: $lineheight;

208 }

209 th {

210 font-weight: bold;

211 vertical-align: top;

212 }

213 td {

214 vertical-align: middle;

215 }

216 }

217

218 /* Utility for de-emphasizing content */

219

220 .deemphasize {

221 color: #999;

222 a {

223 color: $blue;

224 }

225 }

226

227 /* Rules for the header */

228

229 header {

230 height: $headerHeight;

231 position: relative;

232 border-bottom: $keyline;

233 z-index: 1001;

234

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

236 display: inline-block;

237 }

238

239 > * {

240 height: 100%;

241 padding: $lineheight;

242 }

243

244 h1, nav.primary {

245 float: left;

246 }

247

248 a, a:hover {

249 text-decoration: none;

250 }

251

252 img.logo {

253 width: 40px;

254 height: 40px;

255 vertical-align: middle;

256 }

257

258 h1 {

259 margin: 0;

260 border-right: $keyline;

261

262 a {

263 color: #000;

264 }

265 }

266 }

267

268 nav.primary {

269 > ul {

270 $border: 1px solid darken($green, 20%);

271

272 border: $border;

273 border-radius: 4px;

274

275 > li {

276 border-right: $border;

277 &:last-child { border-right: 0; }

278 }

279 }

280

281 a.tab,

282 .dropdown-toggle {

283 display: inline-block;

284 font-weight: bold;

285 color: $green;

286 padding: 5px 15px;

287 }

288

289 .dropdown-toggle {

290 padding: 5px 10px;

291 }

292

293 #edit_tab a.tab {

294 border-right: 1px solid lighten($green, 20%);

295 }

296

297 .caret {

298 border-top-color: $green;

299 }

300

301 .disabled a {

302 color: #ccc;

303 cursor: default;

304

305 .caret {

306 border-top-color: #ccc;

307 }

308 }

309

310 > ul li.current {

311 background-color: $green;

312

313 .tab {

314 color: #fff;

315 }

316

317 .caret {

318 border-top-color: #fff;

319 }

320 }

321 }

322

323 nav.secondary {

324 position: absolute;

325 right: 0;

326

327 > ul a,

328 .dropdown-toggle {

329 display: inline-block;

330 font-weight: bold;

331 text-decoration: none;

332 color: $darkgrey;

333 padding: 5px 5px;

334 }

335

336 > ul li.current a {

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

338 }

339

340 .user-menu {

341 $border: 1px solid $grey;

342

343 border: $border;

344 border-radius: 4px;

345 margin-left: 10px;

346

347 > li {

348 border-right: $border;

349 &:last-child { border-right: 0; }

350 }

351

352 a {

353 padding: 5px 15px;

354 }

355 }

356

357 .caret {

358 border-top-color: $grey;

359 margin-top: 10px;

360 }

361

362 img.user_thumbnail_tiny {

363 border: 0;

364 vertical-align: top;

365 margin-top: 2px;

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

367 }

368

369 #inboxanchor {

370 display: inline-block;

371 vertical-align: top;

372 height: 20px;

373 margin: 2px 7px 0 0;

374 background-color: $grey;

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

376 }

377

378 .dropdown-menu {

379 left: auto;

380 right: 0;

381

382 .count-number {

383 float: right;

384 padding: 0 5px;

385 margin: 0;

386 }

387 }

388 }

389

390 /* Utility for styling notification numbers */

391

392 .count-number {

393 padding: 2px $lineheight/4;

394 border-radius: 2px;

395 background: #d7d7ff;

396 margin: 0 2px;

397 font-size: 11px;

398 color: #333;

399 }

400

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

402

403 #noscript {

404 z-index: 20000000;

405 position: absolute;

406 top: 15px;

407 left: 15px;

408 }

409

410 /* Rules for bootstrap tooltips */

411

412 .tooltip {

413 position: absolute;

414 display: none;

415 color: #333;

416 text-align: left;

417 font-size: 12px;

418 max-width: 250px;

419 }

420

421 .tooltip.in {

422 opacity: 0.8;

423 z-index: 1030;

424 height: auto;

425 display: block;

426 }

427

428 .tooltip.top {

429 margin-top: -10px;

430 text-align: center;

431 }

432

433 .tooltip.right {

434 margin-left: 10px;

435 }

436

437 .tooltip.bottom {

438 margin-top: 10px;

439 text-align: center;

440 }

441

442 .tooltip.left {

443 margin-left: -10px;

444 text-align: right;

445 }

446

447 .tooltip-inner {

448 display: inline-block;

449 padding: 10px;

450 font-weight: normal;

451 background-color: white;

452 }

453

454 .tooltip-arrow {

455 position: absolute;

456 width: 0;

457 height: 0;

458 border-color: transparent;

459 border-style: solid;

460 }

461

462 .tooltip.top .tooltip-arrow {

463 bottom: -5px;

464 left: 50%;

465 margin-left: -5px;

466 border-top-color: white;

467 border-width: 5px 5px 0;

468 }

469

470 .tooltip.right .tooltip-arrow {

471 top: 50%;

472 left: -5px;

473 margin-top: -5px;

474 border-right-color: white;

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

476 }

477

478 .tooltip.left .tooltip-arrow {

479 top: 50%;

480 right: -5px;

481 margin-top: -5px;

482 border-left-color: white;

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

484 }

485

486 .tooltip.bottom .tooltip-arrow {

487 top: -5px;

488 left: 50%;

489 margin-left: -5px;

490 border-bottom-color: white;

491 border-width: 0 5px 5px;

492 }

493

494 /* Rules for Leaflet maps */

495

496 .leaflet-control .control-button {

497 display: block;

498 height: 40px;

499 width: 40px;

500 background-color: #333;

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

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

503 margin-bottom: 10px;

504 outline: none;

505

506 &:hover {

507 background-color: black;

508 }

509

510 &.active {

511 background-color: #9ed485;

512 }

513

514 &.disabled {

515 background-color: #333;

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

517 cursor: default;

518 }

519

520 .icon {

521 margin: 10px;

522 }

523 }

524

525 .leaflet-control .zoomin,

526 .control-layers .control-button {

527 margin-bottom: 0px;

528 border-radius: 4px 0 0 0;

529 }

530

531 .leaflet-control .zoomout,

532 .control-key .control-button {

533 margin-bottom: 0;

534 border-radius: 0;

535 }

536

537 .control-locate .control-button,

538 .control-share .control-button {

539 border-radius: 0 0 0 4px;

540 }

541

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

543

544 .map-layout {

545 #content {

546 position: absolute;

547 top: $headerHeight;

548 bottom: 0;

549 width: 100%;

550 }

551

552 #sidebar, #map {

553 position: relative;

554 height: 100%;

555 overflow-x: hidden;

556 overflow-y: auto;

557 }

558

559 #sidebar {

560 float: left;

561 width: $sidebarWidth;

562 border-right: $keyline;

563

564 h2, h3, h4 {

565 padding: $lineheight;

566 border-bottom: $keyline;

567 }

568

569 h4 {

570 font-weight: normal;

571 }

572

573 .icon.close {

574 position: absolute;

575 right: $lineheight;

576 }

577

578 .footer {

579 position: absolute;

580 bottom: 0;

581 }

582

583 p.credits {

584 font-size: 11px;

585 color: #999;

586

587 a {

588 color: #666;

589 }

590 }

591 }

592

593 #sidebar.minimized {

594 position: absolute;

595 z-index: 1000;

596 height: auto;

597

598 #sidebar_content {

599 display: none;

600 }

601 }

602

603 #map {

604 height: 100%;

605 overflow: hidden;

606 }

607

608 #map-ui {

609 display: none;

610 position: relative;

611 float: right;

612 width: 250px;

613 height: 100%;

614 background: white;

615 overflow: auto;

616

617 .section {

618 border-bottom: 1px solid #DDD;

619 padding: 15px;

620 }

621

622 a.close-button {

623 float: right;

624 padding:5px;

625 font-size:20px;

626 line-height:10px;

627 color:#222;

628 border:1px solid #ddd;

629 }

630 }

631 }

632

633 .layers-ui,

634 .share-ui {

635 li:last-child {

636 margin-bottom: 0;

637 }

638 }

639

640 .layers-ui {

641 li {

642 border-radius: 4px;

643 overflow: hidden;

644 margin-bottom: 10px;

645 }

646

647 label {

648 display: block;

649 padding: 5px 5px 5px 7px;

650 background-color: #eee;

651 cursor: pointer;

652 }

653

654 li.active label {

655 background-color: #ccc;

656 }

657

658 .base-layers {

659 .leaflet-container {

660 width: 100%;

661 height: 50px;

662 cursor: pointer;

663 }

664 }

665 }

666

667 .share-ui {

668 .share-tabs {

669 margin-bottom: 10px;

670

671 a {

672 color: #fff;

673 text-decoration: none;

674 background-color: $lightblue;

675 padding: 5px 10px;

676 }

677

678 a:first-child {

679 border-right: 1px solid #fff;

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

681 }

682

683 a:last-child {

684 border-left: 1px solid #fff;

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

686 }

687

688 a.active {

689 background-color: $blue;

690 }

691 }

692

693 .share-tab {

694 display: none;

695 }

696

697 .share-link {

698 input[type=text],

699 textarea {

700 width: 100%;

701 font-family: monospace;

702 font-size: small;

703 line-height: 1.3;

704 }

705 }

706

707 .share-image {

708 label {

709 margin-right: 10px;

710 }

711 }

712

713 #embed_html {

714 resize: vertical;

715 }

716

717 #mapnik_scale {

718 width: 100px;

719 }

720 }

721

722 .leaflet-top.leaflet-right {

723 top: $lineheight !important;

724 .leaflet-control {

725 margin-right: 0px !important;

726 margin-top: 0px !important;

727 }

728 }

729

730 .leaflet-popup-scrolled {

731 padding-right: $lineheight;

732 border-bottom: 0px !important;

733 border-top: 0px !important;

734 }

735

736 .leaflet-popup-content-wrapper {

737 border-radius: 4px !important;

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

739 }

740

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

742

743 #attribution {

744 display: none;

745 }

746

747 .attribution_license,

748 .attribution_project {

749 text-align: left;

750 }

751

752 .attribution_notice {

753 text-align: center;

754 }

755

756 /* Rules for the sidebar */

757

758 .sidebar_heading {

759 position: relative;

760 padding: $lineheight/2 $lineheight;

761 background: $offwhite;

762 border-bottom: 1px solid #ccc;

763 }

764

765 .sidebar_close {

766 position: absolute;

767 height: $lineheight;

768 top: 0px;

769 bottom: 0;

770 right: $lineheight;

771 margin: auto;

772 }

773

774 #sidebar_content {

775 position: absolute;

776 top: 72px;

777 bottom: 0;

778 width: 100%;

779 overflow-y: auto;

780 }

781

782 /* Rules for the search box */

783

784 #search_form {

785 position: relative;

786 padding: $lineheight;

787 background-color: $lightgrey;

788 border-bottom: $keyline;

789

790 #query_wrapper {

791 position: relative;

792 overflow: hidden;

793 }

794

795 input {

796 width: 100%;

797 height: 30px;

798 border-right: none;

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

800

801 transition: 300ms linear;

802 -webkit-transition: 300ms linear;

803 -moz-transition: 300ms linear;

804 }

805

806 input:focus {

807 outline: none;

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

809 }

810

811 input[type=submit] {

812 float: right;

813 width: auto;

814 min-width: 0;

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

816 }

817

818 #describe_location {

819 position: absolute;

820 top: 6px;

821 right: 6px;

822 font-size: 10px;

823 color: $blue;

824 }

825 }

826

827 /* Rules for donation request box */

828

829 a.donate {

830 display: block;

831 width: 163px;

832 padding: $lineheight/4;

833 border: 1px solid #AED1A0;

834 background: #cbeea7;

835 font-size: $typeheight;

836 line-height: 1.4;

837 text-align: center;

838 border-radius: 2px;

839 color: #222;

840 margin: $lineheight/2 auto;

841

842 &:hover {

843 background: #9ed485;

844 text-decoration: none;

845 }

846 }

847

848 /* Rules for rotating sidebar ads */

849

850 .ad-container {

851 display: block;

852 height: 120px;

853 margin: auto;

854 overflow: hidden;

855 position: relative;

856 border-bottom: 1px solid #ccc;

857

858 a {

859 display: block;

860 width: 165px;

861 margin: auto;

862 }

863

864 .ad {

865 height: 100px;

866 border: 0;

867 background: #fff;

868 }

869 }

870

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

872

873 #mapkey {

874 .mapkey-table-key img {

875 display: block;

876 margin-left: auto;

877 margin-right: auto;

878 }

879 td {

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

881 }

882 }

883

884 /* Rules for search results which appear in the popout sidebar */

885

886 .search_searching {

887 margin-top: $lineheight/4;

888 margin-bottom: $lineheight/4;

889 }

890

891 .search_results_entry {

892 .search_searching {

893 text-align: center;

894 margin: $lineheight auto;

895 width: $lineheight;

896 display: block;

897 }

898

899 ul li {

900 border-bottom: 1px solid #ccc;

901 }

902

903 .search_details {

904 display: block;

905 float: right;

906 text-align: right;

907 margin-top: 0.2em;

908 margin-left: 0.5em;

909 }

910 }

911

912 .search_results_error {

913 color: #f00;

914 }

915

916 /* Rules for data browser information which appears in the popout sidebar */

917

918 #browse_content {

919 position: relative;

920 .browse_show_list.button {

921 position: absolute;

922 left: $lineheight;

923 right: $lineheight;

924 bottom: -40px;

925 margin-bottom: 0;

926 }

927 a.more-details {

928 position: absolute;

929 top: 0;

930 right: $lineheight;

931 }

932 ul li {

933 margin-bottom: 0;

934 }

935 }

936

937 .browse_details {

938 position: relative;

939 }

940

941 .browse_status {

942 display: none;

943 }

944

945 /* Rules for the changeset list shown by the history tab */

946

947 #sidebar .changesets {

948 li {

949 padding: $lineheight;

950 border-bottom: $keyline;

951 }

952 }

953

954 /* Rules for the data browser */

955

956 #sidebar_content {

957 .browse-section {

958 padding: 20px;

959 border-bottom: 1px solid #CCC;

960 }

961

962 .browse-field {

963 margin-bottom: 10px;

964

965 h4 {

966 padding: 5px 0 5px 10px;

967 font-size: 12px;

968 border: 1px solid #CCC;

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

970 background-color: #F6F6F6;

971 }

972

973 p {

974 padding: 7px 10px;

975 font-size: 12px;

976 background-color: #FFF;

977 border: 1px solid #CCC;

978 border-top: 0;

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

980 }

981 }

982

983 .browse-tag-list {

984 border: 1px solid #CCC;

985 border-radius: 4px;

986 font-size: 12px;

987

988 li {

989 border-bottom: 1px solid #CCC;

990 }

991

992 li:last-child {

993 border-bottom: 0;

994 }

995

996 .browse-tag-k,

997 .browse-tag-v {

998 display: inline-block;

999 width: 50%;

1000 height: 30px;

1001 float: left;

1002 padding: 9px 10px;

1003 }

1004

1005 .browse-tag-k {

1006 font-weight: bold;

1007 background-color: #F6F6F6;

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

1009 }

1010

1011 .browse-tag-v {

1012 border-left: 1px solid #CCC;

1013 }

1014 }

1015 }

1016

1017 /* Rules for export information which appears in the popout sidebar */

1018

1019 .export_bounds {

1020 text-align: center;

1021 }

1022

1023 .export_area_inputs {

1024 margin-bottom: $lineheight/2;

1025 input[type="text"] {

1026 width: 80px;

1027 margin-bottom: 5px;

1028 }

1029 }

1030

1031 .export_bound {

1032 margin: $lineheight/4;

1033 }

1034

1035 /* Rules for edit pages */

1036

1037 .site-edit {

1038 #content {

1039 position: absolute;

1040 top: $headerHeight;

1041 bottom: 0;

1042 width: 100%;

1043 }

1044

1045 #map {

1046 height: 100%;

1047 }

1048 }

1049

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

1051

1052 .content-heading {

1053 background: $lightgrey;

1054 border-bottom: $keyline;

1055 }

1056

1057 .content-body {

1058 h1, h2, h3, p {

1059 margin-bottom: $lineheight;

1060 }

1061

1062 h1, h2, h3 {

1063 margin-top: $lineheight/2;

1064 }

1065 }

1066

1067 .content-inner {

1068 position: relative;

1069 max-width: 900px;

1070 margin: auto;

1071 padding: $lineheight;

1072 }

1073

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

1075

1076 .user-new,

1077 .user-create,

1078 .user-terms {

1079 .content-body .content-inner {

1080 padding: 0;

1081 }

1082 }

1083

1084 .user-new,

1085 .user-create,

1086 .user-terms,

1087 .user-confirm {

1088 .content-heading .content-inner {

1089 height: 200px;

1090 }

1091 }

1092

1093 .header-illustration {

1094 background-position: 0 0;

1095 background-repeat: no-repeat;

1096 position: absolute;

1097 height: 200px;

1098 width: 100%;

1099 left: 0;

1100 bottom: 0;

1101

1102 &.new-user-main {

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

1104 }

1105

1106 &.confirm-main {

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

1108 }

1109

1110 &.new-user-terms {

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

1112 }

1113

1114 &.new-user-arm {

1115 height: 110px;

1116 width: 130px;

1117 left: 260px;

1118 top: 160px;

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

1120 z-index: 100;

1121 }

1122 }

1123

1124 @media only screen and (max-width:900px) {

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

1126 display: none;

1127 }

1128 }

1129

1130 #content.maximised {

1131 top: 0;

1132 left: 0;

1133 right: 0;

1134 bottom: 0;

1135 border: 0;

1136 z-index: 1000;

1137 }

1138

1139 #slim_container {

1140 width: 100%;

1141 }

1142

1143 #slim_container_content {

1144 max-width: 50em;

1145 background-color: #FFFFFF;

1146 margin: $lineheight/2 auto;

1147 padding: 3px;

1148 border-radius: 25px;

1149 -moz-border-radius: 25px;

1150 border: 1px solid #e6e6e6;

1151 }

1152

1153 #slim_content {

1154 margin: $lineheight/2;

1155 margin-top: 95px;

1156 max-width: 50em;

1157

1158 .content-heading {

1159 margin-bottom: 15px;

1160 }

1161 }

1162

1163 #slim_header {

1164 margin: 30px $lineheight/2;

1165 position: absolute;

1166 top: 0px;

1167 margin-right: $lineheight/4;

1168 img {

1169 vertical-align: middle;

1170 margin-bottom: $lineheight/4;

1171 margin-right: $lineheight/4;

1172 }

1173 }

1174

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

1176

1177 .content_map {

1178 position: relative;

1179 width: 45%;

1180 height: 400px;

1181 border: 1px solid #ccc;

1182 margin-bottom: $lineheight;

1183 float: right;

1184 }

1185

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

1187

1188 #trace_list {

1189 font-size: $lineheight/2;

1190 border-width: 0px;

1191 text-align: right;

1192

1193 .trace_summary {

1194 font-size: 12px;

1195 color: gray;

1196 }

1197

1198 .trace_pending {

1199 color: red;

1200 }

1201

1202 .trace_public {

1203 color: green;

1204 }

1205

1206 .trace_identifiable {

1207 color: green;

1208 }

1209

1210 .trace_trackable {

1211 color: red;

1212 }

1213

1214 .trace_private {

1215 color: red;

1216 }

1217 }

1218

1219 /* Rules for the user profile page */

1220

1221 #userinformation {

1222

1223 min-height: 100px;

1224 .userinformation-inner {

1225 float: left;

1226 }

1227 h2 {

1228 margin-top: 0;

1229 }

1230 .user-description {

1231 width: 100%;

1232 clear: both;

1233 }

1234 .deemphasize {

1235 margin: 0;

1236 }

1237 }

1238

1239 .admin-user-info small {

1240 margin-bottom: $lineheight/2;

1241 display: inline;

1242 margin-right: $lineheight;

1243 }

1244

1245 .activity-block {

1246 clear: left;

1247 border-bottom: 1px solid #ccc;

1248 padding-bottom: $lineheight;

1249 float: left;

1250 h3 {

1251 margin-bottom: $lineheight/2;

1252 }

1253 }

1254

1255 .contact-activity {

1256 margin-top: $lineheight;

1257 width: 100%;

1258 }

1259

1260 .activity-details p {

1261 margin-left: 70px;

1262 margin-bottom: 0;

1263 }

1264

1265 #friends-container .contact-activity ul {

1266 margin-left: 70px;

1267 }

1268

1269 .user-view {

1270 p#no_home_location {

1271 margin: $lineheight;

1272 }

1273 .user_thumbnail {

1274 margin-top: $lineheight/4;

1275 float: left;

1276 }

1277 }

1278

1279 /* Rules for the user map */

1280

1281 .content_map .leaflet-popup-content {

1282 margin: $lineheight/2;

1283 min-height: 50px;

1284 }

1285

1286 /* Rules for user popups on maps */

1287

1288 .user_popup {

1289 min-width: 200px;

1290 p {

1291 padding: 0 0 5px 0;

1292 margin-top: 0 0 0 60px;

1293 font-size: 12px;

1294 }

1295 img.user_thumbnail {

1296 float: left;

1297 margin: 0 $lineheight/2 0 0;

1298 }

1299 }

1300

1301 /* Rules for the user list */

1302

1303 #user_list {

1304 font-size: $lineheight/2;

1305 width: 100%;

1306

1307 tr {

1308 vertical-align: middle;

1309 }

1310

1311 p {

1312 margin-top: 0px;

1313 margin-bottom: 0px;

1314 }

1315 }

1316

1317 #user_list_actions {

1318 float: right;

1319 margin-top: $lineheight/2;

1320 }

1321

1322 /* Rules for the diary list page */

1323

1324 .diary_post {

1325 position: relative;

1326 margin-top: $lineheight/2;

1327 padding-top: $lineheight;

1328 border-top: 1px solid #ccc;

1329

1330 .post_heading {

1331 margin-bottom: $lineheight;

1332

1333 h2 {

1334 margin-top: 0;

1335 margin-bottom: $lineheight/2;

1336 font-size: 24px;

1337 }

1338 }

1339

1340 img.user_thumbnail {

1341 float: left;

1342 }

1343

1344 small.deemphasize {

1345 float: left;

1346 display: block;

1347 }

1348

1349 ul.secondary-actions {

1350 display: inline-block;

1351 }

1352 }

1353

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

1355 display: inline;

1356 }

1357

1358 /* Rules for the diary entry page */

1359

1360 .diary_entry {

1361 #map {

1362 position: relative;

1363 width: 90%;

1364 height: 400px;

1365 border: 1px solid #ccc;

1366 display: none;

1367 margin-bottom: $lineheight;

1368 }

1369 #newcomment {

1370 border-top: 1px solid #ccc;

1371 padding-top: $lineheight;

1372 margin-top: $lineheight/2;

1373 }

1374 .comments {

1375 max-width: 740px;

1376 }

1377 .diary-comment {

1378 margin-top: $lineheight/2;

1379 border-top: 1px dashed #ccc;

1380 padding-top: $lineheight/2;

1381 &:first-child {

1382 margin-top: $lineheight;

1383 padding-top: $lineheight;

1384 border-top: 1px solid #ccc;

1385 }

1386 p {

1387 margin-bottom: $lineheight/2;

1388 }

1389 .comment-heading {

1390 margin-bottom: 0;

1391 margin-top: 0;

1392 }

1393 }

1394 }

1395

1396 .diary_entry-view img.user_thumbnail {

1397 float: left;

1398 }

1399

1400 /* Rules for the log in page */

1401

1402 #login_openid_buttons {

1403 margin-bottom: 0;

1404 }

1405

1406 #login_openid_buttons li {

1407 float: left;

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

1409 }

1410

1411 /* Rules for the account confirmation page */

1412

1413 .user-terms {

1414 .legale {

1415 border: 1px solid #ccc;

1416 padding: $lineheight;

1417 margin-bottom: $lineheight;

1418 overflow: auto;

1419 height: 10em;

1420 }

1421

1422 #decline {

1423 background: $lightblue;

1424 &:hover {

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

1426 }

1427 }

1428

1429 .form-row {

1430 margin: auto;

1431 max-width: 370px;

1432 }

1433 }

1434

1435 /* Rules for the account settings page */

1436

1437 #accountForm .user_map {

1438 position: relative;

1439 width: 500px;

1440 height: 400px;

1441 border: 1px solid #ccc;

1442 }

1443

1444 #accountForm .user_image {

1445 margin-bottom: 0;

1446 }

1447

1448 #accountForm #user_image {

1449 margin-left: 20px;

1450 }

1451

1452 #accountForm ul.accountImage-options {

1453 margin-left: 120px;

1454 }

1455

1456 .nohome .location {

1457 display: none;

1458 }

1459

1460 #homerow .message {

1461 display: none;

1462 }

1463

1464 .nohome .message {

1465 display: inline !important;

1466 }

1467

1468 .content_map.settings_map {

1469 width: 50%;

1470 float: none;

1471 }

1472

1473 /* Rules for the oauth settings page */

1474

1475 .oauth_clients .buttons .oauth-edit {

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

1477 }

1478

1479 .oauth_clients .buttons .oauth-delete {

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

1481 }

1482

1483 /* Rules for messages pages */

1484

1485 .messages {

1486 width: 100%;

1487 border: 1px solid #ddd;

1488

1489 input[type="submit"] {

1490 margin: auto;

1491 }

1492 tbody tr {

1493 border-top: 1px solid #ccc;

1494 }

1495

1496 .inbox-row {

1497 background: #f8f8ff;

1498 }

1499

1500 .inbox-row-unread {

1501 background:#CBEEA7;

1502 }

1503

1504 .right {

1505 float: right;

1506 }

1507

1508 tr td,

1509 tr th {

1510 padding: $lineheight/4;

1511 }

1512 p:last-child,

1513 h2:last-child,

1514 h3:last-child,

1515 ol:last-child,

1516 ul:last-child {

1517 margin-bottom:0;

1518 }

1519 tr td {

1520 height: 30px;

1521 border-right: 1px solid $lightgrey;

1522 }

1523 }

1524

1525 .inbox-row .inbox-mark-read {

1526 display: none;

1527 }

1528

1529 .info-line {

1530 margin-bottom: $lineheight;

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

1532 border-bottom: 1px solid #ccc;

1533

1534 form, form div {

1535 display: inline;

1536 }

1537 }

1538

1539 .info-line .user_thumbnail_tiny {

1540 vertical-align: middle;

1541 }

1542

1543 .inbox-mark-unread,

1544 .inbox-mark-read,

1545 .inbox-delete {

1546 width: 1%;

1547 }

1548

1549 .inbox-row-unread .inbox-mark-unread {

1550 display: none;

1551 }

1552

1553 .message-read .message-buttons {

1554 margin-top: $lineheight;

1555 padding-top: $lineheight;

1556 border-top: 1px solid $lightgrey;

1557 }

1558

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

1560 border-radius: 0;

1561 }

1562

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

1564

1565 .error {

1566 padding: $lineheight;

1567 background-color: #ff7070;

1568 }

1569

1570 .warning {

1571 padding: $lineheight;

1572 background-color: #ffe0cc;

1573 }

1574

1575 .notice {

1576 padding: $lineheight;

1577 background-color: #CBEEA7;

1578 }

1579

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

1581

1582 .field_with_errors {

1583 padding: 2px;

1584 background-color: #ff7070;

1585 display: inline-block;

1586 }

1587

1588 .formError {

1589 display: inline-block;

1590 padding: 5px 10px;

1591 margin-top: 5px;

1592 border-radius: 4px;

1593 font-size: 12px;

1594 color: #fff;

1595 background-color: #ff7070;

1596 }

1597

1598 /* Rules for rails validation error boxes */

1599

1600 #errorExplanation {

1601 width: 400px;

1602 border: 2px solid #ff7070;

1603 padding: 0 $lineheight/2;

1604 margin-bottom: $lineheight;

1605 background-color: #f0f0f0;

1606

1607 h2 {

1608 margin: 0 -10px 10px -10px;

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

1610 font-weight: bold;

1611 font-size: 12px;

1612 background-color: #c00;

1613 color: #fff;

1614 text-align: left;

1615 }

1616

1617 p {

1618 color: #333;

1619 margin-bottom: 0px;

1620 padding: $lineheight/4;

1621 }

1622

1623 ul {

1624 padding-left: $lineheight;

1625

1626 li {

1627 font-size: 12px;

1628 list-style: disc;

1629 }

1630 }

1631 }

1632

1633 /* Rules for forms */

1634

1635 .standard-form {

1636 fieldset {

1637 margin-bottom: $lineheight;

1638 }

1639 label.standard-label {

1640 display: block;

1641 margin-bottom: $lineheight/4;

1642 font-size: $typeheight;

1643 font-weight: bold;

1644 line-height: 1.5;

1645 }

1646 label.standard-label.secondary {

1647 display: inline-block;

1648 font-weight: normal;

1649 }

1650 .form-help {

1651 font-weight: normal;

1652 }

1653 .form-column {

1654 float: left;

1655 margin-right: 20px;

1656 }

1657 .form-divider {

1658 margin-top: $lineheight;

1659 padding-top: $lineheight;

1660 border-top: 1px solid $lightgrey;

1661 }

1662 .horizontal-list .form-row {

1663 float: left;

1664 padding-right: 10px;

1665 }

1666 .form-row {

1667 margin-bottom: $lineheight/2;

1668 }

1669 .form-list {

1670 margin-bottom: 0;

1671 }

1672 .form-list li {

1673 margin-bottom: 5px;

1674 }

1675 input[type="checkbox"],

1676 input[type="radio"] {

1677 float: left;

1678 margin-top: 5px;

1679 }

1680 }

1681

1682 #remember_me_openid {

1683 display: block;

1684 }

1685

1686 input[type="checkbox"],

1687 input[type="radio"] {

1688 margin-right: 5px;

1689 }

1690

1691 input[type="text"],

1692 input[type="email"],

1693 input[type="url"],

1694 input[type="password"],

1695 textarea {

1696 border: 1px solid #ccc;

1697 padding: 2px 5px;

1698 margin: 0;

1699 width: 200px;

1700 }

1701

1702 textarea {

1703 padding: 5px;

1704 width: 100%;

1705 }

1706

1707 /* Rules for user images */

1708

1709 img.user_image {

1710 max-width: 100px;

1711 max-height: 100px;

1712 border: 1px solid #ccc;

1713 margin-bottom: $lineheight;

1714 float: left;

1715 margin-right: $lineheight;

1716 }

1717

1718 img.user_thumbnail {

1719 max-width: 50px;

1720 max-height: 50px;

1721 border: 1px solid #ccc;

1722 margin-right: $lineheight;

1723 }

1724

1725 img.user_thumbnail_tiny {

1726 max-width: 25px;

1727 max-height: 25px;

1728 border: 1px solid #ccc;

1729 }

1730

1731 /* Rules for geo microformats */

1732

1733 abbr.geo {

1734 border-bottom: none;

1735 }

1736

1737 /* Rules for RSS buttons */

1738

1739 .rsssmall {

1740 position: relative;

1741 top: 5px;

1742 }

1743

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

1745

1746 ul.secondary-actions {

1747 font-style: normal;

1748 margin-bottom: 0;

1749 margin-left: 0;

1750 &.pager {

1751 display: inline-block;

1752 margin-right: 60px;

1753 }

1754 > li {

1755 display: block;

1756 float: left;

1757 list-style: none;

1758 border-left: 1px solid #ccc;

1759 padding-left: $lineheight/4;

1760 margin-right: $lineheight/4;

1761 &:first-child {

1762 border-left: 0;

1763 padding-left: 0;

1764 }

1765 &:last-child {

1766 margin-right: 0px;

1767 }

1768 }

1769 }

1770

1771 /* Utility for managing inner content areas */

1772

1773 .inner22 { padding: $lineheight;}

1774

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

1776

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

1778

1779 .inner20 { padding: $lineheight 0;}

1780

1781 .inner02 { padding: 0 $lineheight;}

1782

1783 /* Utility for general button styles */

1784

1785 input[type="button"],

1786 input[type="submit"],

1787 input[type="reset"],

1788 a.button {

1789 cursor: pointer;

1790 border: 0;

1791 display: inline-block;

1792 line-height: 20px;

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

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

1795 min-width: 120px;

1796 margin: 0 0 $lineheight/2 0;

1797 color: white;

1798 background: $blue;

1799 text-align: center;

1800 border-radius: 2px;

1801 -moz-border-radius: 2px;

1802 &:hover {

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

1804 text-decoration: none;

1805 }

1806 &.deemphasize {

1807 background: $lightblue;

1808 &:hover {

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

1810 }

1811 }

1812 &:disabled {

1813 background: $lightgrey;

1814 &:hover {

1815 background: $lightgrey;

1816 }

1817 }

1818 &:last-child {

1819 margin-bottom: 0;

1820 }

1821 }

1822

1823 .buttons {

1824 min-width: 200px;

1825 input[type="submit"],

1826 input[type="button"],

1827 input[type="reset"],

1828 .button {

1829 box-sizing: border-box;

1830 float: left;

1831 border-radius: 0;

1832 margin:0;

1833 min-width: 100px;

1834 max-width: 180px;

1835 border-right:1px solid white;

1836 text-overflow: ellipsis;

1837 white-space: nowrap;

1838 overflow: hidden;

1839 }

1840 input:first-child,

1841 .button:first-child {

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

1843 }

1844 input:last-child,

1845 .button:last-child {

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

1847 border-right-width: 0;

1848 }

1849 input:only-child,

1850 .button:only-child,

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

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

1853 border-radius:2px;

1854 border-right-width: 0;

1855 }

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

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

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

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

1860 border-right-width: 0;

1861 }

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

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

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

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

1866 border-right-width: 1px;

1867 }

1868 }

1869

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

1871

1872 .table0,

1873 .item0 {

1874 background: $offwhite;

1875 }

1876

1877 .table1,

1878 .item1 {

1879 background: #fff;

1880 }

1881

1882 /* Rules for OpenID logo */

1883

1884 .openid_logo {

1885 vertical-align: text-bottom;

1886 border: 0;

1887 }

1888

1889 /* Rules for rich text */

1890

1891 .richtext,

1892 .prose {

1893 h1, h2 {

1894 padding-bottom: $lineheight/2;

1895 border-bottom: 1px dashed #cccccc;

1896 margin-bottom: $lineheight/2;

1897 }

1898

1899 h1 {

1900 font-size: 24px;

1901 }

1902

1903 h2 {

1904 font-size: 18px;

1905 }

1906

1907 h3 {

1908 font-size: $typeheight;

1909 }

1910

1911 code {

1912 font-size: 13px;

1913 background: #e8e8e8;

1914 padding: 2px 3px;

1915 }

1916

1917 pre {

1918 font-size: 13px;

1919 background: #e8e8e8;

1920 padding: 2px 3px;

1921

1922 code {

1923 padding: 0;

1924 }

1925 }

1926

1927 img {

1928 padding: $lineheight;

1929 background-color: $offwhite;

1930 display: block;

1931 max-width: 100%;

1932 margin: auto;

1933 }

1934

1935 blockquote {

1936 border-left: $lineheight solid $offwhite;

1937 padding-left: $lineheight;

1938 margin: 0;

1939 color: #7E7E7E;

1940 }

1941

1942 ul, ol {

1943 padding-left: $lineheight;

1944 margin-bottom: $lineheight;

1945 margin-left: $lineheight;

1946 }

1947

1948 ul li {

1949 list-style: disc;

1950 }

1951

1952 ol li {

1953 list-style: decimal;

1954 }

1955 }

1956

1957 .diary_post .richtext {

1958 margin-top: $lineheight;

1959 }

1960

1961 .comments .richtext {

1962 margin-left: 70px;

1963 margin-top: 0;

1964 }

1965

1966 /* Rules for rich text editors */

1967

1968 .richtext_container {

1969 margin-bottom: $lineheight;

1970

1971 .richtext_content {

1972 width: 50%;

1973 display: inline-block;

1974 vertical-align: top;

1975

1976 .richtext_preview {

1977 display: inline-block;

1978 padding: $lineheight;

1979 background-color: $offwhite;

1980 overflow-x: auto;

1981

1982 &.loading {

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

1984 background-repeat: no-repeat;

1985 background-position: center;

1986 }

1987

1988 > :first-child {

1989 margin-top: 0px;

1990 }

1991 }

1992 }

1993

1994 .richtext_help {

1995 display: inline-block;

1996 vertical-align: top;

1997 margin-left: 15px;

1998 background-color: #f8f8ff;

1999 padding: $lineheight/2;

2000 width: 220px;

2001

2002 ul {

2003 margin-bottom: 0;

2004 }

2005

2006 h4.heading, li {

2007 border-bottom: 1px solid #ccc;

2008 margin-bottom: $lineheight/4;

2009 padding-bottom: $lineheight/4;

2010 }

2011

2012 li h4, li span, li p {

2013 display: inline-block;

2014 vertical-align: top;

2015 font-size: 11px;

2016 }

2017

2018 li h4 {

2019 width: 40%;

2020 margin: 0;

2021 }

2022

2023 li span, li p {

2024 width: 50%;

2025 margin-left: $lineheight/2;

2026 margin-bottom: $lineheight/4;

2027 white-space: nowrap;

2028 }

2029 }

2030 }

2031

2032 /* Rules for the user notes list */

2033

2034 .note_list {

2035 tr.creator {

2036 background-color: #eeeeee;

2037 }

2038

2039 td {

2040 padding: 3px;

2041 }

2042

2043 p {

2044 margin-bottom: 0px;

2045 }

2046 }

2047

2048 /* Rules for the notes interface */

2049

2050 .leaflet-popup-content .note {

2051 padding-top: $lineheight/2;

2052 }

2053

2054 .leaflet-popup-content .note {

2055 h2 {

2056 margin-bottom: $lineheight/2;

2057 }

2058

2059 div {

2060 margin-top: $lineheight/2;

2061 }

2062

2063 .permalink {

2064 position: absolute;

2065 top: $lineheight/4;

2066 left: $lineheight/4;

2067 min-width: 15px;

2068 min-height: 15px;

2069 }

2070

2071 .permalink span {

2072 display: none;

2073 padding-left: $lineheight;

2074 }

2075

2076 .permalink:hover span {

2077 display: block;

2078 }

2079

2080 .warning {

2081 display: block;

2082 background-color: #ffe0cc;

2083 padding: 4px 6px;

2084 margin-bottom: $lineheight/2;

2085 }

2086

2087 .comment_body {

2088 margin-top: 2px;

2089 margin-bottom: 2px;

2090

2091 p {

2092 margin-top: 0px;

2093 margin-bottom: 0px;

2094 }

2095 }

2096

2097 .comment {

2098 width: 100%;

2099 height: 100px;

2100 }

2101

2102 .buttons {

2103 margin-top: $lineheight/4;

2104 text-align: right;

2105 }

2106 }

2107

2108 /* Rules for the iD editor */

2109

2110 .id-embed {

2111 width: 100%;

2112 height: 100%;

2113 }

2114

2115 /* Rules for dropdown menus */

2116

2117 .dropdown {

2118 position: relative;

2119 }

2120

2121 .dropdown-toggle {

2122 *margin-bottom: -3px;

2123 }

2124

2125 .dropdown-toggle:active,

2126 .open .dropdown-toggle {

2127 outline: 0;

2128 }

2129

2130 .caret {

2131 display: inline-block;

2132 width: 0;

2133 height: 0;

2134 vertical-align: top;

2135 border-top: 4px solid #000000;

2136 border-right: 4px solid transparent;

2137 border-left: 4px solid transparent;

2138 content: "";

2139 }

2140

2141 .dropdown .caret {

2142 margin-top: 8px;

2143 margin-left: 2px;

2144 }

2145

2146 .dropdown-menu {

2147 position: absolute;

2148 top: 100%;

2149 left: 0;

2150 z-index: 1000;

2151 display: none;

2152 float: left;

2153 min-width: 160px;

2154 padding: 5px 0;

2155 margin: 0;

2156 list-style: none;

2157 background-color: #ffffff;

2158 border: 1px solid #ccc;

2159 *border-right-width: 2px;

2160 *border-bottom-width: 2px;

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

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

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

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

2165 -moz-background-clip: padding;

2166 background-clip: padding-box;

2167 }

2168

2169 .dropdown-menu.pull-right {

2170 right: 0;

2171 left: auto;

2172 }

2173

2174 .dropdown-menu .divider {

2175 *width: 100%;

2176 height: 1px;

2177 margin: 9px 1px;

2178 *margin: -5px 0 5px;

2179 overflow: hidden;

2180 background-color: #e5e5e5;

2181 border-bottom: 1px solid #ffffff;

2182 }

2183

2184 .dropdown-menu > li > a {

2185 display: block;

2186 padding: 3px 10px;

2187 clear: both;

2188 font-weight: normal;

2189 line-height: 20px;

2190 color: #333333;

2191 white-space: nowrap;

2192 }

2193

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

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

2196 .dropdown-submenu:hover > a,

2197 .dropdown-submenu:focus > a {

2198 color: #ffffff;

2199 text-decoration: none;

2200 background-color: $green;

2201 }

2202

2203 .dropdown-menu > .active > a,

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

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

2206 color: #ffffff;

2207 text-decoration: none;

2208 background-color: $green;

2209 outline: 0;

2210 }

2211

2212 .dropdown-menu > .disabled > a,

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

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

2215 color: #999999;

2216 }

2217

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

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

2220 text-decoration: none;

2221 cursor: default;

2222 background-color: transparent;

2223 background-image: none;

2224 }

2225

2226 .open {

2227 *z-index: 1000;

2228 }

2229

2230 .open > .dropdown-menu {

2231 display: block;

2232 }

2233

2234 .dropdown-backdrop {

2235 position: fixed;

2236 top: 0;

2237 right: 0;

2238 bottom: 0;

2239 left: 0;

2240 z-index: 990;

2241 }

2242

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

2244 .site-welcome {

2245 .center {

2246 text-align: center;

2247 .sprite {

2248 float: none;

2249 margin: auto;

2250 }

2251 }

2252

2253 .sprite {

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

2255 background-size: 500px 250px;

2256 display: block;

2257 float: left;

2258 }

2259

2260 .icon-list {

2261 padding-bottom: 20px;

2262 div {

2263 margin-bottom: 10px;

2264 p {

2265 padding-top: 10px;

2266 }

2267 }

2268 }

2269 .sprite.small {

2270 width: 50px;

2271 height: 50px;

2272 }

2273

2274 .sprite.x {

2275 background-position: -50px 0;

2276 }

2277

2278 .sprite.term {

2279 margin-right: 10px;

2280 vertical-align: middle;

2281 }

2282

2283 .sprite.node {

2284 background-position: -100px 0;

2285 }

2286

2287 .sprite.way {

2288 background-position: -150px 0;

2289 }

2290

2291 .sprite.tag {

2292 background-position: -200px 0;

2293 }

2294

2295 .sprite.editor {

2296 background-position: -250px 0;

2297 }

2298

2299 .sprite.question {

2300 background-position: -300px 0;

2301 }

2302

2303 .start-mapping {

2304 margin: auto;

2305 cursor: pointer;

2306 border: none;

2307 padding: 20px 40px;

2308 font-size: 30px;

2309 text-decoration: none;

2310 }

2311

2312 .note-box {

2313 margin-top: 20px;

2314 background-color: $offwhite;

2315 }

2316

2317 .icon.note {

2318 background-color: #333;

2319 border-radius: 4px;

2320 }

2321 }

2322

2323 .site-about #content {

2324 background-color: #000;

2325 background-position: 50% 50%;

2326 background-repeat: no-repeat;

2327 background-size: cover;

2328 background-attachment: fixed;

2329

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

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

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

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

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

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

2336

2337 .caption {

2338 max-width: 200px;

2339 font: italic 14px/20px 'Times New Roman', serif;

2340 position: fixed;

2341 text-align: right;

2342 right: 20px;

2343 bottom: 60px;

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

2345 color: #fff;

2346 display: none;

2347 }

2348

2349 .caption a {

2350 color: white;

2351 white-space: nowrap;

2352 text-decoration: none;

2353 }

2354

2355 a.next {

2356 display: block;

2357 position: fixed;

2358 right: 10px;

2359 bottom: 10px;

2360 width: 40px;

2361 height: 40px;

2362 border-radius: 5px;

2363 text-indent: -9999px;

2364 overflow: hidden;

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

2366 background-color: #000;

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

2368 }

2369

2370 .content-inner {

2371 position: relative;

2372 color: #333;

2373 min-width: 320px;

2374 max-width: 640px;

2375

2376 .section {

2377 margin-bottom: 30px;

2378 }

2379

2380 .section:last-child {

2381 margin-bottom: 0;

2382 }

2383 }

2384

2385 .text {

2386 background: white;

2387 padding: 40px;

2388 }

2389

2390 .attr {

2391 position: relative;

2392 padding: 170px 20px 20px 20px;

2393 background: #333;

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

2395 margin-bottom: 0;

2396

2397 strong {

2398 display: block;

2399 color: white;

2400 font-size: 25px;

2401 span {

2402 color: #76c551;

2403 }

2404 }

2405

2406 .user-image {

2407 position: absolute;

2408 top: 0px;

2409 right: 240px;

2410 left: 0px;

2411 height: 150px;

2412 background-position: 0 50%;

2413 background-repeat: no-repeat;

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

2415 background-size: cover;

2416 background-color: #76c551;

2417 }

2418

2419 .byosm {

2420 position: absolute;

2421 top: 0px;

2422 right: 0px;

2423 z-index: 1;

2424 width: 240px;

2425 height: 150px;

2426 padding: 20px 20px 20px 40px;

2427 font: bold 24px/25px Helvetica, Arial, sans-serif;

2428 white-space: nowrap;

2429 color: #fff;

2430 background: #76c551

2431 }

2432

2433 .byosm span {

2434 display: inline-block;

2435 width: 25px;

2436 margin-left: -25px;

2437 }

2438 }

2439

2440 h2 {

2441 margin-bottom: 10px;

2442 }

2443

2444 .icon {

2445 width: 30px;

2446 height: 30px;

2447 margin-right: 10px;

2448 vertical-align: middle;

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

2450

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

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

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

2454 &.contributors { background-position: 0px -120px; }

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

2456 }

2457 }

2458

2459 @import 'browse';