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

101 -webkit-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 {

134 margin-bottom: $lineheight;

135 }

136

137 p > img {

138 width: auto;

139 max-width: 100%;

140 }

141

142 small, aside {

143 font-size: 12px;

144 }

145

146 h1:first-child,

147 h2:first-child,

148 h3:first-child,

149 h4:first-child,

150 h5:first-child,

151 h6:first-child {

152 margin-top: 0;

153 }

154

155 .column-1 {

156 width: 50%;

157 margin: 0 0 $lineheight/2 0;

158 }

159

160 .small_icon {

161 vertical-align: middle;

162 margin-right: $lineheight/4;

163 }

164

165 /* Rules for icons */

166

167 .icon {

168 display:inline-block;

169 vertical-align:top;

170 width:20px;

171 height:20px;

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

173 text-indent:-9999px;

174 overflow:hidden;

175 }

176

177 .icon-pre-text {

178 margin-right: 5px;

179 }

180

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

196

197 /* Rules for links */

198

199 a {

200 color: #00f;

201 text-decoration: none;

202 &:hover {

203 text-decoration: underline;

204 }

205 }

206

207 /* Rules for horizontal lines */

208

209 hr {

210 border: none;

211 background-color: #ccc;

212 color: #ccc;

213 height: 1px;

214 }

215

216 /* General styles for tables */

217

218 table {

219 width: 100%;

220 margin-bottom: $lineheight;

221 th, td {

222 text-align: left;

223 padding: $lineheight/4;

224 line-height: $lineheight;

225 }

226 th {

227 font-weight: bold;

228 vertical-align: top;

229 }

230 td {

231 vertical-align: middle;

232 }

233 }

234

235 /* Rules for the search box */

236

237 #search_form {

238 position: relative;

239 padding: $lineheight;

240 background-color: $lightgrey;

241 border-bottom: $keyline;

242

243 #query_wrapper {

244 overflow: hidden;

245 }

246

247 input {

248 width: 100%;

249 height: 30px;

250 border-right: none;

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

252

253 transition: 300ms linear;

254 -webkit-transition: 300ms linear;

255 -moz-transition: 300ms linear;

256 }

257

258 input:focus {

259 outline: none;

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

261 }

262

263 input[type=submit] {

264 float: right;

265 width: auto;

266 min-width: 0;

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

268 }

269 }

270

271 /* Utility for de-emphasizing content */

272

273 .deemphasize {

274 color: #999;

275 a {

276 color: $blue;

277 }

278 }

279

280 /* Rules for donation request box */

281

282 a.donate {

283 display: block;

284 width: 163px;

285 padding: $lineheight/4;

286 border: 1px solid #AED1A0;

287 background: #cbeea7;

288 font-size: $typeheight;

289 line-height: 1.4;

290 text-align: center;

291 border-radius: 2px;

292 color: #222;

293 margin: $lineheight/2 auto;

294

295 &:hover {

296 background: #9ed485;

297 text-decoration: none;

298 }

299 }

300

301 /* Rules for the header */

302

303 header {

304 height: $headerHeight;

305 position: relative;

306 border-bottom: $keyline;

307 z-index: 1001;

308

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

310 display: inline-block;

311 }

312

313 > * {

314 height: 100%;

315 padding: $lineheight;

316 }

317

318 h1, nav.primary {

319 float: left;

320 }

321

322 img.logo {

323 width: 30px;

324 height: 30px;

325 vertical-align: middle;

326 }

327

328 h1 {

329 margin: 0;

330 border-right: $keyline;

331 }

332 }

333

334 nav.primary {

335 > ul {

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

337 border-radius: 4px;

338 }

339

340 a.tab {

341 display: inline-block;

342 font-weight: bold;

343 text-decoration: none;

344 color: $green;

345 padding: 5px 15px;

346 border-right: 1px solid darken($green, 20%);

347 }

348

349 #edit_tab a.tab {

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

351 }

352

353 .dropdown-toggle {

354 display: inline-block;

355 padding: 6px 10px 4px 10px;

356 }

357

358 .caret {

359 border-top-color: $green;

360 }

361

362 .disabled a {

363 color: #ccc;

364 cursor: default;

365

366 &:hover {

367 text-decoration: none;

368 }

369

370 .caret {

371 border-top-color: #ccc;

372 }

373 }

374 }

375

376 .site-index #view_tab,

377 .changeset-list #history_tab,

378 .site-export #export_tab,

379 .site-edit #edit_tab {

380 background-color: $green;

381

382 .tab {

383 color: #fff;

384 }

385

386 .caret {

387 border-top-color: #fff;

388 }

389 }

390

391 nav.secondary {

392 position: absolute;

393 right: 0;

394

395 > ul {

396 margin-right: 10px;

397 }

398

399 > ul a,

400 .dropdown-toggle {

401 display: inline-block;

402 font-weight: bold;

403 text-decoration: none;

404 color: $darkgrey;

405 padding: 5px 5px;

406 }

407

408 .dropdown {

409 border: 1px solid $grey;

410 border-radius: 4px;

411 }

412

413 .caret {

414 border-top-color: $grey;

415 margin-top: 10px;

416 margin-right: 5px;

417 }

418

419 img.user_thumbnail_tiny {

420 border: 0;

421 vertical-align: top;

422 margin: 2px 0 0 3px;

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

424 }

425

426 #inboxanchor {

427 display: inline-block;

428 vertical-align: top;

429 height: 20px;

430 margin: 2px 7px 0 0;

431 background-color: $grey;

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

433 }

434

435 .dropdown-menu {

436 left: auto;

437 right: 0;

438

439 .count-number {

440 float: right;

441 padding: 0 5px;

442 margin: 0;

443 }

444 }

445 }

446

447 /* Utility for styling notification numbers */

448

449 .count-number {

450 padding: 2px $lineheight/4;

451 border-radius: 2px;

452 background: #d7d7ff;

453 margin: 0 2px;

454 font-size: 11px;

455 color: #333;

456 }

457

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

459

460 #noscript {

461 z-index: 20000000;

462 position: absolute;

463 top: 15px;

464 left: 15px;

465 }

466

467 /* Rules for bootstrap tooltips */

468

469 .tooltip {

470 position: absolute;

471 display: none;

472 color: #333;

473 text-align: left;

474 font-size: 12px;

475 max-width: 250px;

476 }

477

478 .tooltip.in {

479 opacity: 0.8;

480 z-index: 1030;

481 height: auto;

482 display: block;

483 }

484

485 .tooltip.top {

486 margin-top: -10px;

487 text-align: center;

488 }

489

490 .tooltip.right {

491 margin-left: 10px;

492 }

493

494 .tooltip.bottom {

495 margin-top: 10px;

496 text-align: center;

497 }

498

499 .tooltip.left {

500 margin-left: -10px;

501 text-align: right;

502 }

503

504 .tooltip-inner {

505 display: inline-block;

506 padding: 10px;

507 font-weight: normal;

508 background-color: white;

509 }

510

511 .tooltip-arrow {

512 position: absolute;

513 width: 0;

514 height: 0;

515 border-color: transparent;

516 border-style: solid;

517 }

518

519 .tooltip.top .tooltip-arrow {

520 bottom: -5px;

521 left: 50%;

522 margin-left: -5px;

523 border-top-color: white;

524 border-width: 5px 5px 0;

525 }

526

527 .tooltip.right .tooltip-arrow {

528 top: 50%;

529 left: -5px;

530 margin-top: -5px;

531 border-right-color: white;

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

533 }

534

535 .tooltip.left .tooltip-arrow {

536 top: 50%;

537 right: -5px;

538 margin-top: -5px;

539 border-left-color: white;

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

541 }

542

543 .tooltip.bottom .tooltip-arrow {

544 top: -5px;

545 left: 50%;

546 margin-left: -5px;

547 border-bottom-color: white;

548 border-width: 0 5px 5px;

549 }

550

551 /* Rules for Leaflet maps */

552

553 .leaflet-control .control-button {

554 display: block;

555 height: 40px;

556 width: 40px;

557 background-color: #333;

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

559 -bottom: 1px solid #333;

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

561 margin-bottom: 10px;

562 outline: none;

563

564 &:hover {

565 background-color: black;

566 }

567

568 &.active {

569 background-color: #9ed485;

570 }

571

572 &.disabled {

573 background-color: #333;

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

575 cursor: default;

576 }

577

578 .icon {

579 margin: 10px;

580 }

581 }

582

583 .leaflet-control .zoomin,

584 .control-layers .control-button {

585 margin-bottom: 0px;

586 border-radius: 4px 0 0 0;

587 }

588

589 .leaflet-control .zoomout,

590 .control-key .control-button {

591 margin-bottom: 0;

592 border-radius: 0;

593 }

594

595 .control-locate .control-button,

596 .control-share .control-button {

597 border-radius: 0 0 0 4px;

598 }

599

600 /* Rules for the home page */

601

602 #map {

603 height: 100%;

604 overflow: hidden;

605 }

606

607 #map-ui {

608 display: none;

609 position: relative;

610 float: right;

611 width: 250px;

612 height: 100%;

613 background: white;

614 overflow: auto;

615

616 .section {

617 border-bottom: 1px solid #DDD;

618 padding: 15px;

619 }

620

621 a.close-button {

622 float: right;

623 padding:5px;

624 font-size:20px;

625 line-height:10px;

626 color:#222;

627 border:1px solid #ddd;

628 }

629 }

630

631 .layers-ui,

632 .share-ui {

633 ul, li:last-child, p:last-child {

634 margin-bottom: 0;

635 }

636 }

637

638 .layers-ui {

639 li {

640 border-radius: 4px;

641 overflow: hidden;

642 margin-bottom: 10px;

643 }

644

645 label {

646 display: block;

647 padding: 5px 5px 5px 7px;

648 background-color: #eee;

649 cursor: pointer;

650 }

651

652 li.active label {

653 background-color: #ccc;

654 }

655

656 .base-layers {

657 .leaflet-container {

658 width: 100%;

659 height: 50px;

660 cursor: pointer;

661 }

662 }

663 }

664

665 .share-ui {

666 .share-tabs {

667 margin-bottom: 10px;

668

669 a {

670 color: #fff;

671 text-decoration: none;

672 background-color: $lightblue;

673 padding: 5px 10px;

674 }

675

676 a:first-child {

677 border-right: 1px solid #fff;

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

679 }

680

681 a:last-child {

682 border-left: 1px solid #fff;

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

684 }

685

686 a.active {

687 background-color: $blue;

688 }

689 }

690

691 .share-tab {

692 display: none;

693 }

694

695 .share-link {

696 input[type=text],

697 textarea {

698 width: 100%;

699 font-family: monospace;

700 font-size: small;

701 line-height: 1.3;

702 }

703 }

704

705 .share-image {

706 label {

707 margin-right: 10px;

708 }

709 }

710

711 #embed_html {

712 resize: vertical;

713 }

714

715 #mapnik_scale {

716 width: 100px;

717 }

718 }

719

720 .leaflet-top.leaflet-right {

721 top: $lineheight !important;

722 .leaflet-control {

723 margin-right: 0px !important;

724 margin-top: 0px !important;

725 }

726 }

727

728 .leaflet-popup-scrolled {

729 padding-right: $lineheight;

730 border-bottom: 0px !important;

731 border-top: 0px !important;

732 }

733

734 .leaflet-popup-content-wrapper {

735 border-radius: 4px !important;

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

737 }

738

739 /* Rules for edit menu */

740

741 .menu {

742 display: none;

743 z-index: 10000;

744 position: absolute;

745 background-color: #ffffff;

746 border: 1px solid $lightgrey;

747 border-top: 0px;

748 ul {

749 margin: 0px;

750 }

751 li {

752 padding: 2px $lineheight/4;

753 border-top: 1px solid #eee;

754 white-space: nowrap;

755 }

756 }

757

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

759

760 #attribution {

761 display: none;

762 }

763

764 .attribution_license,

765 .attribution_project {

766 text-align: left;

767 }

768

769 .attribution_notice {

770 text-align: center;

771 }

772

773 /* Rules for the sidebar */

774

775 #sidebar {

776 border-right: $keyline;

777

778 .alert {

779 background: #e00;

780 }

781

782 h2, h3, h4 {

783 padding: $lineheight;

784 border-bottom: $keyline;

785 }

786

787 h4 {

788 font-weight: normal;

789 }

790

791 .icon.close {

792 position: absolute;

793 right: $lineheight;

794 }

795

796 p {

797 margin: 0;

798 }

799

800 .footer {

801 position: absolute;

802 bottom: 0;

803 }

804

805 p.credits {

806 font-size: 11px;

807 color: #999;

808

809 a {

810 color: #666;

811 }

812 }

813 }

814

815 .sidebar_heading {

816 position: relative;

817 padding: $lineheight/2 $lineheight;

818 background: $offwhite;

819 border-bottom: 1px solid #ccc;

820 h4 {

821 margin: 0;

822 }

823 }

824

825 .sidebar_close {

826 position: absolute;

827 height: $lineheight;

828 top: 0px;

829 bottom: 0;

830 right: $lineheight;

831 margin: auto;

832 }

833

834 #sidebar_content {

835 position: absolute;

836 top: 72px;

837 bottom: 0;

838 width: 100%;

839 overflow-y: auto;

840 }

841

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

843

844 #mapkey {

845 .mapkey-table-key img {

846 display: block;

847 margin-left: auto;

848 margin-right: auto;

849 }

850 td {

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

852 }

853 }

854

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

856

857 .search_searching {

858 margin-top: $lineheight/4;

859 margin-bottom: $lineheight/4;

860 }

861

862 .search_results_entry {

863 .search_searching {

864 text-align: center;

865 margin: $lineheight auto;

866 width: $lineheight;

867 display: block;

868 }

869

870 ul li {

871 border-bottom: 1px solid #ccc;

872 }

873

874 .search_details {

875 display: block;

876 float: right;

877 text-align: right;

878 margin-top: 0.2em;

879 margin-left: 0.5em;

880 }

881 }

882

883 .search_results_error {

884 color: #f00;

885 }

886

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

888

889 #browse_content {

890 position: relative;

891 .browse_show_list.button {

892 position: absolute;

893 left: $lineheight;

894 right: $lineheight;

895 bottom: -40px;

896 margin-bottom: 0;

897 }

898 a.more-details {

899 position: absolute;

900 top: 0;

901 right: $lineheight;

902 }

903 ul li {

904 margin-bottom: 0;

905 }

906 }

907

908 .browse_details {

909 position: relative;

910 }

911

912 .browse_status {

913 display: none;

914 }

915

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

917

918 .export_bounds {

919 text-align: center;

920 }

921

922 .export_area_inputs {

923 margin-bottom: $lineheight/2;

924 input[type="text"] {

925 width: 80px;

926 margin-bottom: 5px;

927 }

928 }

929

930 .export_bound {

931 margin: $lineheight/4;

932 }

933

934 /* Rules for the sidebar and main content area */

935

936 .site-index,

937 .site-export,

938 .site-edit,

939 .changeset-list,

940 .browse {

941 #content {

942 position: absolute;

943 top: $headerHeight;

944 bottom: 0;

945 width: 100%;

946 }

947

948 #sidebar, #map {

949 position: relative;

950 height: 100%;

951 overflow-x: hidden;

952 overflow-y: auto;

953 }

954

955 #sidebar {

956 float: left;

957 width: $sidebarWidth;

958 }

959 }

960

961 .content-heading {

962 position: relative;

963 padding: $lineheight;

964 background: $lightgrey;

965 border-bottom: $keyline;

966 }

967

968 .content-body {

969 padding: $lineheight;

970 }

971

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

973

974 .user-new,

975 .user-create,

976 .user-terms,

977 .user-confirm {

978 .content-heading {

979 height: 200px;

980 }

981 }

982

983 .user-new,

984 .user-create,

985 .user-terms {

986 .content-body {

987 padding: 0;

988 }

989 }

990

991 .header-illustration {

992 background-position: 0 0;

993 background-repeat: no-repeat;

994 position: absolute;

995 height: 200px;

996 width: 100%;

997 left: 0;

998 bottom: 0;

999

1000 &.new-user-main {

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

1002 }

1003

1004 &.confirm-main {

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

1006 }

1007

1008 &.new-user-terms {

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

1010 }

1011

1012 &.new-user-arm {

1013 height: 110px;

1014 width: 130px;

1015 left: 260px;

1016 top: 160px;

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

1018 }

1019 }

1020

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

1022 .header-illustration.new-user-arm { display: none;}

1023 .wrapper {

1024 margin-left: $sidebarWidth;

1025 text-align: left;

1026 }

1027

1028 }

1029

1030 #content.maximised {

1031 top: 0;

1032 left: 0;

1033 right: 0;

1034 bottom: 0;

1035 border: 0;

1036 z-index: 1000;

1037 }

1038

1039 #slim_container {

1040 width: 100%;

1041 }

1042

1043 #slim_container_content {

1044 max-width: 50em;

1045 background-color: #FFFFFF;

1046 margin: $lineheight/2 auto;

1047 padding: 3px;

1048 border-radius: 25px;

1049 -moz-border-radius: 25px;

1050 border: 1px solid #e6e6e6;

1051 }

1052

1053 #slim_content {

1054 margin: $lineheight/2;

1055 margin-top: 95px;

1056 max-width: 50em;

1057

1058 .content-heading {

1059 margin-bottom: 15px;

1060 }

1061 }

1062

1063 #slim_header {

1064 margin: 30px $lineheight/2;

1065 position: absolute;

1066 top: 0px;

1067 margin-right: $lineheight/4;

1068 img {

1069 vertical-align: middle;

1070 margin-bottom: $lineheight/4;

1071 margin-right: $lineheight/4;

1072 }

1073 }

1074

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

1076

1077 .content_map {

1078 position: relative;

1079 width: 45%;

1080 height: 400px;

1081 border: 1px solid #ccc;

1082 margin-bottom: $lineheight;

1083 float: right;

1084 }

1085

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

1087

1088 #sidebar .changesets {

1089 li {

1090 padding: $lineheight;

1091 border-bottom: $keyline;

1092 }

1093

1094 p {

1095 padding: 0;

1096 }

1097 }

1098

1099 /* Rules for the data browser */

1100

1101 body.browse #sidebar_content {

1102 .browse-section {

1103 padding: 20px;

1104 border-bottom: 1px solid #CCC;

1105

1106 ul {

1107 margin: 0;

1108 }

1109 }

1110

1111 .browse-field {

1112 margin-bottom: 10px;

1113

1114 h4 {

1115 margin: 0;

1116 padding: 5px 0 5px 10px;

1117 font-size: 12px;

1118 border: 1px solid #CCC;

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

1120 background-color: #F6F6F6;

1121 }

1122

1123 p {

1124 margin: 0;

1125 padding: 7px 10px;

1126 font-size: 12px;

1127 background-color: #FFF;

1128 border: 1px solid #CCC;

1129 border-top: 0;

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

1131 }

1132 }

1133

1134 .browse-tag-list {

1135 border: 1px solid #CCC;

1136 border-radius: 4px;

1137 font-size: 12px;

1138

1139 li {

1140 border-bottom: 1px solid #CCC;

1141 }

1142

1143 li:last-child {

1144 border-bottom: 0;

1145 }

1146

1147 .browse-tag-k,

1148 .browse-tag-v {

1149 display: inline-block;

1150 width: 50%;

1151 height: 30px;

1152 float: left;

1153 padding: 9px 10px;

1154 }

1155

1156 .browse-tag-k {

1157 font-weight: bold;

1158 background-color: #F6F6F6;

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

1160 }

1161

1162 .browse-tag-v {

1163 border-left: 1px solid #CCC;

1164 }

1165 }

1166 }

1167

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

1169

1170 #trace_list {

1171 font-size: $lineheight/2;

1172 border-width: 0px;

1173 text-align: right;

1174

1175 .trace_summary {

1176 font-size: 12px;

1177 color: gray;

1178 }

1179

1180 .trace_pending {

1181 color: red;

1182 }

1183

1184 .trace_public {

1185 color: green;

1186 }

1187

1188 .trace_identifiable {

1189 color: green;

1190 }

1191

1192 .trace_trackable {

1193 color: red;

1194 }

1195

1196 .trace_private {

1197 color: red;

1198 }

1199 }

1200

1201 /* Rules for the user profile page */

1202

1203 #userinformation {

1204

1205 min-height: 100px;

1206 .userinformation-inner {

1207 float: left;

1208 }

1209 h2 {

1210 margin-top: 0;

1211 }

1212 .user-description {

1213 width: 100%;

1214 clear: both;

1215 }

1216 .deemphasize {

1217 margin: 0;

1218 }

1219 }

1220

1221 .admin-user-info small {

1222 margin-bottom: $lineheight/2;

1223 display: inline;

1224 margin-right: $lineheight;

1225 }

1226

1227 .activity-block {

1228 clear: left;

1229 border-bottom: 1px solid #ccc;

1230 padding-bottom: $lineheight;

1231 float: left;

1232 h3 {

1233 margin-bottom: $lineheight/2;

1234 }

1235 }

1236

1237 .contact-activity {

1238 margin-top: $lineheight;

1239 width: 100%;

1240 }

1241

1242 .activity-details p {

1243 margin-left: 70px;

1244 margin-bottom: 0;

1245 }

1246

1247 #friends-container .contact-activity ul {

1248 margin-left: 70px;

1249 }

1250

1251 .user-view {

1252 p#no_home_location {

1253 margin: $lineheight;

1254 }

1255 .user_thumbnail {

1256 margin-top: $lineheight/4;

1257 float: left;

1258 }

1259 }

1260

1261 /* Rules for the user map */

1262

1263 .content_map .leaflet-popup-content {

1264 margin: $lineheight/2;

1265 min-height: 50px;

1266 }

1267

1268 /* Rules for user popups on maps */

1269

1270 .user_popup {

1271 min-width: 200px;

1272 p {

1273 padding: 0 0 5px 0;

1274 margin-top: 0 0 0 60px;

1275 font-size: 12px;

1276 }

1277 img.user_thumbnail {

1278 float: left;

1279 margin: 0 $lineheight/2 0 0;

1280 }

1281 }

1282

1283 /* Rules for the user list */

1284

1285 #user_list {

1286 font-size: $lineheight/2;

1287 width: 100%;

1288

1289 tr {

1290 vertical-align: middle;

1291 }

1292

1293 p {

1294 margin-top: 0px;

1295 margin-bottom: 0px;

1296 }

1297 }

1298

1299 #user_list_actions {

1300 float: right;

1301 margin-top: $lineheight/2;

1302 }

1303

1304 /* Rules for the diary list page */

1305

1306 .diary_entry-list img.user_thumbnail {

1307 float: left;

1308 }

1309

1310 .diary_post {

1311 max-width: 740px;

1312 position: relative;

1313 margin-top: $lineheight/2;

1314 padding-top: $lineheight;

1315 border-top: 1px solid #ccc;

1316

1317 &:first-child {

1318 margin-top: 0;

1319 border-top: 0;

1320 padding-top: 0;

1321 }

1322 h1, h2 {

1323 font-size: 21px;

1324 line-height: 1em;

1325 }

1326 small.deemphasize {

1327 float: left;

1328 display: block;

1329 }

1330 ul.secondary-actions { display: inline-block;}

1331 }

1332

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

1334 display: inline;

1335 }

1336

1337 #content .post_heading {

1338 margin-bottom: $lineheight;

1339 h2 {

1340 margin-top: 0;

1341 margin-bottom: $lineheight/2;

1342 font-size: 24px;

1343 }

1344 }

1345

1346 /* Rules for the diary entry page */

1347

1348 .diary_entry {

1349 #map {

1350 position: relative;

1351 width: 90%;

1352 height: 400px;

1353 border: 1px solid #ccc;

1354 display: none;

1355 margin-bottom: $lineheight;

1356 }

1357 #newcomment {

1358 border-top: 1px solid #ccc;

1359 padding-top: $lineheight;

1360 margin-top: $lineheight/2;

1361 }

1362 .comments {

1363 max-width: 740px;

1364 }

1365 .diary-comment {

1366 margin-top: $lineheight/2;

1367 border-top: 1px dashed #ccc;

1368 padding-top: $lineheight/2;

1369 &:first-child {

1370 margin-top: $lineheight;

1371 padding-top: $lineheight;

1372 border-top: 1px solid #ccc;

1373 }

1374 p {

1375 margin-bottom: $lineheight/2;

1376 }

1377 .comment-heading {

1378 margin-bottom: 0;

1379 margin-top: 0;

1380 }

1381 }

1382 }

1383

1384 .diary_entry-view img.user_thumbnail {

1385 float: left;

1386 }

1387

1388 /* Rules for the log in page */

1389

1390 #login_openid_buttons {

1391 margin-bottom: 0;

1392 }

1393

1394 #login_openid_buttons li {

1395 float: left;

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

1397 }

1398

1399 /* Rules for the account confirmation page */

1400

1401 .user-terms {

1402 .legale {

1403 border: 1px solid #ccc;

1404 padding: $lineheight;

1405 margin-bottom: $lineheight;

1406 overflow: auto;

1407 height: 10em;

1408 }

1409

1410 #decline {

1411 background: $lightblue;

1412 &:hover {

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

1414 }

1415 }

1416

1417 .form-row {

1418 margin: auto;

1419 max-width: 370px;

1420 }

1421 }

1422

1423 /* Rules for the account settings page */

1424

1425 #accountForm .user_map {

1426 position: relative;

1427 width: 500px;

1428 height: 400px;

1429 border: 1px solid #ccc;

1430 }

1431

1432 #accountForm .user_image {

1433 margin-bottom: 0;

1434 }

1435

1436 #accountForm #user_image {

1437 margin-left: 20px;

1438 }

1439

1440 #accountForm ul.accountImage-options {

1441 margin-left: 120px;

1442 }

1443

1444 .nohome .location {

1445 display: none;

1446 }

1447

1448 #homerow .message {

1449 display: none;

1450 }

1451

1452 .nohome .message {

1453 display: inline !important;

1454 }

1455

1456 .content_map.settings_map {

1457 width: 50%;

1458 float: none;

1459 }

1460

1461 /* Rules for the oauth settings page */

1462

1463 .oauth_clients .buttons .oauth-edit {

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

1465 }

1466

1467 .oauth_clients .buttons .oauth-delete {

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

1469 }

1470

1471 /* Rules for messages pages */

1472

1473 .messages {

1474 width: 100%;

1475 border: 1px solid #ddd;

1476

1477 input[type="submit"] {

1478 margin: auto;

1479 }

1480 tbody tr {

1481 border-top: 1px solid #ccc;

1482 }

1483

1484 .inbox-row {

1485 background: #f8f8ff;

1486 }

1487

1488 .inbox-row-unread {

1489 background:#CBEEA7;

1490 }

1491

1492 .right {

1493 float: right;

1494 }

1495

1496 tr td,

1497 tr th {

1498 padding: $lineheight/4;

1499 }

1500 p:last-child,

1501 h2:last-child,

1502 h3:last-child,

1503 ol:last-child,

1504 ul:last-child {

1505 margin-bottom:0;

1506 }

1507 tr td {

1508 height: 30px;

1509 border-right: 1px solid $lightgrey;

1510 }

1511 }

1512

1513 .inbox-row .inbox-mark-read {

1514 display: none;

1515 }

1516

1517 .info-line {

1518 margin-bottom: $lineheight;

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

1520 border-bottom: 1px solid #ccc;

1521

1522 form, form div {

1523 display: inline;

1524 }

1525 }

1526

1527 .info-line .user_thumbnail_tiny {

1528 vertical-align: middle;

1529 }

1530

1531 .inbox-mark-unread,

1532 .inbox-mark-read,

1533 .inbox-delete {

1534 width: 1%;

1535 }

1536

1537 .inbox-row-unread .inbox-mark-unread {

1538 display: none;

1539 }

1540

1541 .message-read .message-buttons {

1542 margin-top: $lineheight;

1543 padding-top: $lineheight;

1544 border-top: 1px solid $lightgrey;

1545 }

1546

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

1548 border-radius: 0;

1549 }

1550

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

1552

1553 .flash {

1554 padding: $lineheight;

1555 &#error {

1556 background-color: #ff7070;

1557 }

1558 &#warning {

1559 background-color: #ffe0cc;

1560 }

1561 &#notice {

1562 background-color: #CBEEA7;

1563 }

1564 }

1565

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

1567

1568 .field_with_errors {

1569 padding: 2px;

1570 background-color: #ff7070;

1571 display: inline-block;

1572 }

1573

1574 .formError {

1575 display: inline-block;

1576 padding: 5px 10px;

1577 margin-top: 5px;

1578 border-radius: 4px;

1579 font-size: 12px;

1580 color: #fff;

1581 background-color: #ff7070;

1582 }

1583

1584 /* Rules for rails validation error boxes */

1585

1586 #errorExplanation {

1587 width: 400px;

1588 border: 2px solid #ff7070;

1589 padding: 0 $lineheight/2;

1590 margin-bottom: $lineheight;

1591 background-color: #f0f0f0;

1592

1593 h2 {

1594 margin: 0 -10px 10px -10px;

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

1596 font-weight: bold;

1597 font-size: 12px;

1598 background-color: #c00;

1599 color: #fff;

1600 text-align: left;

1601 }

1602

1603 p {

1604 color: #333;

1605 margin-bottom: 0px;

1606 padding: $lineheight/4;

1607 }

1608

1609 ul {

1610 padding-left: $lineheight;

1611

1612 li {

1613 font-size: 12px;

1614 list-style: disc;

1615 }

1616 }

1617 }

1618

1619 /* Rules for forms */

1620

1621 .standard-form {

1622 fieldset {

1623 margin-bottom: $lineheight;

1624 }

1625 label.standard-label {

1626 display: block;

1627 margin-bottom: $lineheight/4;

1628 font-size: $typeheight;

1629 font-weight: bold;

1630 line-height: 1.5;

1631 }

1632 label.standard-label.secondary {

1633 display: inline-block;

1634 font-weight: normal;

1635 }

1636 .form-help {

1637 font-weight: normal;

1638 }

1639 .form-column {

1640 float: left;

1641 margin-right: 20px;

1642 }

1643 .form-divider {

1644 margin-top: $lineheight;

1645 padding-top: $lineheight;

1646 border-top: 1px solid $lightgrey;

1647 }

1648 .horizontal-list .form-row {

1649 float: left;

1650 padding-right: 10px;

1651 }

1652 .form-row {

1653 margin-bottom: $lineheight/2;

1654 }

1655 .form-list {

1656 margin-bottom: 0;

1657 }

1658 .form-list li {

1659 margin-bottom: 5px;

1660 }

1661 input[type="checkbox"],

1662 input[type="radio"] {

1663 float: left;

1664 margin-top: 5px;

1665 }

1666 }

1667

1668 #remember_me_openid {

1669 display: block;

1670 }

1671

1672 input[type="checkbox"],

1673 input[type="radio"] {

1674 margin-right: 5px;

1675 }

1676

1677 input[type="text"],

1678 input[type="email"],

1679 input[type="url"],

1680 input[type="password"],

1681 textarea {

1682 border: 1px solid #ccc;

1683 padding: 2px 5px;

1684 margin: 0;

1685 width: 200px;

1686 }

1687

1688 textarea {

1689 padding: 5px;

1690 width: 100%;

1691 }

1692

1693 /* Rules for user images */

1694

1695 img.user_image {

1696 max-width: 100px;

1697 max-height: 100px;

1698 border: 1px solid #ccc;

1699 margin-bottom: $lineheight;

1700 float: left;

1701 margin-right: $lineheight;

1702 }

1703

1704 img.user_thumbnail {

1705 max-width: 50px;

1706 max-height: 50px;

1707 border: 1px solid #ccc;

1708 margin-right: $lineheight;

1709 }

1710

1711 img.user_thumbnail_tiny {

1712 max-width: 25px;

1713 max-height: 25px;

1714 border: 1px solid #ccc;

1715 }

1716

1717 /* Rules for geo microformats */

1718

1719 abbr.geo {

1720 border-bottom: none;

1721 }

1722

1723 /* Rules for RSS buttons */

1724

1725 .rsssmall {

1726 position: relative;

1727 top: 5px;

1728 }

1729

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

1731

1732 ul.secondary-actions {

1733 font-style: normal;

1734 margin-bottom: 0;

1735 margin-left: 0;

1736 &.pager {

1737 display: inline-block;

1738 margin-right: 60px;

1739 }

1740 > li {

1741 display: block;

1742 float: left;

1743 list-style: none;

1744 border-left: 1px solid #ccc;

1745 padding-left: $lineheight/4;

1746 margin-right: $lineheight/4;

1747 &:first-child {

1748 border-left: 0;

1749 padding-left: 0;

1750 }

1751 &:last-child {

1752 margin-right: 0px;

1753 }

1754 }

1755 }

1756

1757 /* Utility for managing inner content areas */

1758

1759 .inner22 { padding: $lineheight;}

1760

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

1762

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

1764

1765 .inner20 { padding: $lineheight 0;}

1766

1767 .inner02 { padding: 0 $lineheight;}

1768

1769 /* Utility for general button styles */

1770

1771 input[type="button"],

1772 input[type="submit"],

1773 input[type="reset"],

1774 a.button {

1775 cursor: pointer;

1776 border: 0;

1777 display: inline-block;

1778 line-height: 20px;

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

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

1781 min-width: 120px;

1782 margin: 0 0 $lineheight/2 0;

1783 color: white;

1784 background: $blue;

1785 text-align: center;

1786 border-radius: 2px;

1787 -moz-border-radius: 2px;

1788 &:hover {

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

1790 text-decoration: none;

1791 }

1792 &.deemphasize {

1793 background: $lightblue;

1794 &:hover {

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

1796 }

1797 }

1798 &:disabled {

1799 background: $lightgrey;

1800 &:hover {

1801 background: $lightgrey;

1802 }

1803 }

1804 &:last-child {

1805 margin-bottom: 0;

1806 }

1807 }

1808

1809 .buttons {

1810 min-width: 200px;

1811 input[type="submit"],

1812 input[type="button"],

1813 input[type="reset"],

1814 .button {

1815 box-sizing: border-box;

1816 float: left;

1817 border-radius: 0;

1818 margin:0;

1819 min-width: 100px;

1820 max-width: 180px;

1821 border-right:1px solid white;

1822 text-overflow: ellipsis;

1823 white-space: nowrap;

1824 overflow: hidden;

1825 }

1826 input:first-child,

1827 .button:first-child {

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

1829 }

1830 input:last-child,

1831 .button:last-child {

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

1833 border-right-width: 0;

1834 }

1835 input:only-child,

1836 .button:only-child,

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

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

1839 border-radius:2px;

1840 border-right-width: 0;

1841 }

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

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

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

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

1846 border-right-width: 0;

1847 }

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

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

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

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

1852 border-right-width: 1px solid white;

1853 }

1854 }

1855

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

1857

1858 .table0,

1859 .item0 {

1860 background: $offwhite;

1861 }

1862

1863 .table1,

1864 .item1 {

1865 background: #fff;

1866 }

1867

1868 /* Rules for OpenID logo */

1869

1870 .openid_logo {

1871 vertical-align: text-bottom;

1872 border: 0;

1873 }

1874

1875 /* Rules for rich text */

1876

1877 .richtext,

1878 .prose {

1879 h1, h2 {

1880 padding-bottom: $lineheight/2;

1881 border-bottom: 1px dashed #cccccc;

1882 margin-bottom: $lineheight/2;

1883 }

1884

1885 h1 {

1886 font-size: 24px;

1887 }

1888

1889 h2 {

1890 font-size: 18px;

1891 }

1892

1893 h3 {

1894 font-size: $typeheight;

1895 }

1896

1897 code {

1898 font-size: 13px;

1899 background: #e8e8e8;

1900 padding: 2px 3px;

1901 }

1902

1903 pre {

1904 font-size: 13px;

1905 background: #e8e8e8;

1906 padding: 2px 3px;

1907

1908 code {

1909 padding: 0;

1910 }

1911 }

1912

1913 img {

1914 padding: $lineheight;

1915 background-color: $offwhite;

1916 display: block;

1917 max-width: 100%;

1918 margin: auto;

1919 }

1920

1921 blockquote {

1922 border-left: $lineheight solid $offwhite;

1923 padding-left: $lineheight;

1924 margin: 0;

1925 color: #7E7E7E;

1926 }

1927

1928 ul, ol {

1929 padding-left: $lineheight;

1930 margin-bottom: $lineheight;

1931 margin-left: $lineheight;

1932 }

1933

1934 ul li {

1935 list-style: disc;

1936 }

1937

1938 ol li {

1939 list-style: decimal;

1940 }

1941 }

1942

1943 .diary_post .richtext {

1944 margin-top: $lineheight;

1945 }

1946

1947 .comments .richtext {

1948 margin-left: 70px;

1949 margin-top: 0;

1950 }

1951

1952 /* Rules for rich text editors */

1953

1954 .richtext_container {

1955 margin-bottom: $lineheight;

1956

1957 .richtext_content {

1958 width: 50%;

1959 display: inline-block;

1960 vertical-align: top;

1961

1962 .richtext_preview {

1963 display: inline-block;

1964 padding: $lineheight;

1965 background-color: $offwhite;

1966 overflow-x: auto;

1967

1968 &.loading {

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

1970 background-repeat: no-repeat;

1971 background-position: center;

1972 }

1973

1974 > :first-child {

1975 margin-top: 0px;

1976 }

1977 }

1978 }

1979

1980 .richtext_help {

1981 display: inline-block;

1982 vertical-align: top;

1983 margin-left: 15px;

1984 background-color: #f8f8ff;

1985 padding: $lineheight/2;

1986 width: 220px;

1987

1988 ul {

1989 margin-bottom: 0;

1990 }

1991

1992 h4.heading, li {

1993 border-bottom: 1px solid #ccc;

1994 margin-bottom: $lineheight/4;

1995 padding-bottom: $lineheight/4;

1996 }

1997

1998 li h4, li span, li p {

1999 display: inline-block;

2000 vertical-align: top;

2001 font-size: 11px;

2002 }

2003

2004 li h4 {

2005 width: 40%;

2006 margin: 0;

2007 }

2008

2009 li span, li p {

2010 width: 50%;

2011 margin-left: $lineheight/2;

2012 margin-bottom: $lineheight/4;

2013 white-space: nowrap;

2014 }

2015 }

2016 }

2017

2018 /* Rules for the user notes list */

2019

2020 .note_list {

2021 tr.creator {

2022 background-color: #eeeeee;

2023 }

2024

2025 td {

2026 padding: 3px;

2027 }

2028

2029 p {

2030 margin-bottom: 0px;

2031 }

2032 }

2033

2034 /* Rules for the notes interface */

2035

2036 .leaflet-popup-content .note {

2037 padding-top: $lineheight/2;

2038 }

2039

2040 .leaflet-popup-content .note {

2041 h2 {

2042 margin-bottom: $lineheight/2;

2043 }

2044

2045 div {

2046 margin-top: $lineheight/2;

2047 }

2048

2049 .permalink {

2050 position: absolute;

2051 top: $lineheight/4;

2052 left: $lineheight/4;

2053 min-width: 15px;

2054 min-height: 15px;

2055 }

2056

2057 .permalink span {

2058 display: none;

2059 padding-left: $lineheight;

2060 }

2061

2062 .permalink:hover span {

2063 display: block;

2064 }

2065

2066 .warning {

2067 display: block;

2068 background-color: #ffe0cc;

2069 padding: 4px 6px;

2070 margin-bottom: $lineheight/2;

2071 }

2072

2073 .comment_body {

2074 margin-top: 2px;

2075 margin-bottom: 2px;

2076

2077 p {

2078 margin-top: 0px;

2079 margin-bottom: 0px;

2080 }

2081 }

2082

2083 .comment {

2084 width: 100%;

2085 height: 100px;

2086 }

2087

2088 .buttons {

2089 margin-top: $lineheight/4;

2090 text-align: right;

2091 }

2092 }

2093

2094 /*

2095 * Rules for the iD editor

2096 */

2097

2098 .id-embed {

2099 width: 100%;

2100 height: 100%;

2101 }

2102

2103 /* Rules for rotating sidebar ads */

2104 .ad-container {

2105 display: block;

2106 height: 120px;

2107 margin: auto;

2108 overflow: hidden;

2109 position: relative;

2110 border-bottom: 1px solid #ccc;

2111

2112 a {

2113 display: block;

2114 width: 165px;

2115 margin: auto;

2116 }

2117

2118 .ad {

2119 height: 100px;

2120 border: 0;

2121 background: #fff;

2122 }

2123 }

2124

2125 /* Rules for dropdown menus */

2126

2127 .dropdown {

2128 position: relative;

2129 }

2130

2131 .dropdown-toggle {

2132 *margin-bottom: -3px;

2133 }

2134

2135 .dropdown-toggle:active,

2136 .open .dropdown-toggle {

2137 outline: 0;

2138 }

2139

2140 .caret {

2141 display: inline-block;

2142 width: 0;

2143 height: 0;

2144 vertical-align: top;

2145 border-top: 4px solid #000000;

2146 border-right: 4px solid transparent;

2147 border-left: 4px solid transparent;

2148 content: "";

2149 }

2150

2151 .dropdown .caret {

2152 margin-top: 8px;

2153 margin-left: 2px;

2154 }

2155

2156 .dropdown-menu {

2157 position: absolute;

2158 top: 100%;

2159 left: 0;

2160 z-index: 1000;

2161 display: none;

2162 float: left;

2163 min-width: 160px;

2164 padding: 5px 0;

2165 margin: 0;

2166 list-style: none;

2167 background-color: #ffffff;

2168 border: 1px solid #ccc;

2169 *border-right-width: 2px;

2170 *border-bottom-width: 2px;

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

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

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

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

2175 -moz-background-clip: padding;

2176 background-clip: padding-box;

2177 }

2178

2179 .dropdown-menu.pull-right {

2180 right: 0;

2181 left: auto;

2182 }

2183

2184 .dropdown-menu .divider {

2185 *width: 100%;

2186 height: 1px;

2187 margin: 9px 1px;

2188 *margin: -5px 0 5px;

2189 overflow: hidden;

2190 background-color: #e5e5e5;

2191 border-bottom: 1px solid #ffffff;

2192 }

2193

2194 .dropdown-menu > li > a {

2195 display: block;

2196 padding: 3px 10px;

2197 clear: both;

2198 font-weight: normal;

2199 line-height: 20px;

2200 color: #333333;

2201 white-space: nowrap;

2202 }

2203

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

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

2206 .dropdown-submenu:hover > a,

2207 .dropdown-submenu:focus > a {

2208 color: #ffffff;

2209 text-decoration: none;

2210 background-color: $green;

2211 }

2212

2213 .dropdown-menu > .active > a,

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

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

2216 color: #ffffff;

2217 text-decoration: none;

2218 background-color: $green;

2219 outline: 0;

2220 }

2221

2222 .dropdown-menu > .disabled > a,

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

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

2225 color: #999999;

2226 }

2227

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

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

2230 text-decoration: none;

2231 cursor: default;

2232 background-color: transparent;

2233 background-image: none;

2234 }

2235

2236 .open {

2237 *z-index: 1000;

2238 }

2239

2240 .open > .dropdown-menu {

2241 display: block;

2242 }

2243

2244 .dropdown-backdrop {

2245 position: fixed;

2246 top: 0;

2247 right: 0;

2248 bottom: 0;

2249 left: 0;

2250 z-index: 990;

2251 }

2252

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

2254 .site-welcome {

2255 .center {

2256 text-align: center;

2257 .sprite {

2258 float: none;

2259 margin: auto;

2260 }

2261 }

2262

2263 .sprite {

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

2265 background-size: 500px 250px;

2266 display: block;

2267 float: left;

2268 }

2269

2270 .icon-list {

2271 padding-bottom: 20px;

2272 div {

2273 margin-bottom: 10px;

2274 p {

2275 padding-top: 10px;

2276 }

2277 }

2278 }

2279 .sprite.small {

2280 width: 50px;

2281 height: 50px;

2282 }

2283

2284 .sprite.x {

2285 background-position: -50px 0;

2286 }

2287

2288 .sprite.term {

2289 margin-right: 10px;

2290 vertical-align: middle;

2291 }

2292

2293 .sprite.node {

2294 background-position: -100px 0;

2295 }

2296

2297 .sprite.way {

2298 background-position: -150px 0;

2299 }

2300

2301 .sprite.tag {

2302 background-position: -200px 0;

2303 }

2304

2305 .sprite.editor {

2306 background-position: -250px 0;

2307 }

2308

2309 .sprite.question {

2310 background-position: -300px 0;

2311 }

2312

2313 .start-mapping {

2314 margin: auto;

2315 cursor: pointer;

2316 border: none;

2317 padding: 20px 40px;

2318 font-size: 30px;

2319 text-decoration: none;

2320 }

2321

2322 .note-box {

2323 margin-top: 20px;

2324 background-color: $offwhite;

2325 }

2326

2327 .icon.note {

2328 background-color: #333;

2329 border-radius: 4px;

2330 }

2331 }

2332

2333 .site-about #content {

2334 background-color: #000;

2335 background-position: 50% 50%;

2336 background-repeat: no-repeat;

2337 background-size: cover;

2338 background-attachment: fixed;

2339

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

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

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

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

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

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

2346

2347 .caption {

2348 max-width: 200px;

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

2350 position: fixed;

2351 text-align: right;

2352 right: 20px;

2353 bottom: 60px;

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

2355 color: #fff;

2356 display: none;

2357 }

2358

2359 .caption a {

2360 color: white;

2361 white-space: nowrap;

2362 text-decoration: none;

2363 }

2364

2365 a.next {

2366 display: block;

2367 position: fixed;

2368 right: 10px;

2369 bottom: 10px;

2370 width: 40px;

2371 height: 40px;

2372 border-radius: 5px;

2373 text-indent: -9999px;

2374 overflow: hidden;

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

2376 background-color: #000;

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

2378 }

2379

2380 #content-body {

2381 display: block;

2382 position: relative;

2383 margin: auto;

2384 color: #333;

2385 width: 50%;

2386 min-width: 320px;

2387 max-width: 640px;

2388

2389 .section {

2390 margin-bottom: 30px;

2391 }

2392

2393 .section:last-child {

2394 margin-bottom: 0;

2395 }

2396 }

2397

2398 .text {

2399 background: white;

2400 padding: 40px;

2401 }

2402

2403 .attr {

2404 position: relative;

2405 padding: 170px 20px 20px 20px;

2406 background: #333;

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

2408 margin-bottom: 0;

2409

2410 strong {

2411 display: block;

2412 color: white;

2413 font-size: 25px;

2414 span {

2415 color: #76c551;

2416 }

2417 }

2418

2419 .user-image {

2420 position: absolute;

2421 top: 0px;

2422 right: 240px;

2423 left: 0px;

2424 height: 150px;

2425 background-position: 0 50%;

2426 background-repeat: no-repeat;

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

2428 background-size: cover;

2429 background-color: #76c551;

2430 }

2431

2432 .byosm {

2433 position: absolute;

2434 top: 0px;

2435 right: 0px;

2436 z-index: 1;

2437 width: 240px;

2438 height: 150px;

2439 padding: 20px 20px 20px 40px;

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

2441 white-space: nowrap;

2442 color: #fff;

2443 background: #76c551

2444 }

2445

2446 .byosm span {

2447 display: inline-block;

2448 width: 25px;

2449 margin-left: -25px;

2450 }

2451 }

2452

2453 h2 {

2454 margin-bottom: 10px;

2455 }

2456

2457 .icon {

2458 width: 30px;

2459 height: 30px;

2460 margin-right: 10px;

2461 vertical-align: middle;

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

2463

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

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

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

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

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

2469 }

2470 }