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 position: relative;

245 overflow: hidden;

246 }

247

248 input {

249 width: 100%;

250 height: 30px;

251 border-right: none;

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

253

254 transition: 300ms linear;

255 -webkit-transition: 300ms linear;

256 -moz-transition: 300ms linear;

257 }

258

259 input:focus {

260 outline: none;

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

262 }

263

264 input[type=submit] {

265 float: right;

266 width: auto;

267 min-width: 0;

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

269 }

270

271 #describe_location {

272 position: absolute;

273 top: 6px;

274 right: 6px;

275 font-size: 10px;

276 color: $blue;

277 }

278 }

279

280 /* Utility for de-emphasizing content */

281

282 .deemphasize {

283 color: #999;

284 a {

285 color: $blue;

286 }

287 }

288

289 /* Rules for donation request box */

290

291 a.donate {

292 display: block;

293 width: 163px;

294 padding: $lineheight/4;

295 border: 1px solid #AED1A0;

296 background: #cbeea7;

297 font-size: $typeheight;

298 line-height: 1.4;

299 text-align: center;

300 border-radius: 2px;

301 color: #222;

302 margin: $lineheight/2 auto;

303

304 &:hover {

305 background: #9ed485;

306 text-decoration: none;

307 }

308 }

309

310 /* Rules for the header */

311

312 header {

313 height: $headerHeight;

314 position: relative;

315 border-bottom: $keyline;

316 z-index: 1001;

317

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

319 display: inline-block;

320 }

321

322 > * {

323 height: 100%;

324 padding: $lineheight;

325 }

326

327 h1, nav.primary {

328 float: left;

329 }

330

331 a, a:hover {

332 text-decoration: none;

333 }

334

335 img.logo {

336 width: 40px;

337 height: 40px;

338 vertical-align: middle;

339 }

340

341 h1 {

342 margin: 0;

343 border-right: $keyline;

344

345 a {

346 color: #000;

347 }

348 }

349 }

350

351 nav.primary {

352 > ul {

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

354

355 border: $border;

356 border-radius: 4px;

357

358 > li {

359 border-right: $border;

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

361 }

362 }

363

364 a.tab,

365 .dropdown-toggle {

366 display: inline-block;

367 font-weight: bold;

368 color: $green;

369 padding: 5px 15px;

370 }

371

372 .dropdown-toggle {

373 padding: 5px 10px;

374 }

375

376 #edit_tab a.tab {

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

378 }

379

380 .caret {

381 border-top-color: $green;

382 }

383

384 .disabled a {

385 color: #ccc;

386 cursor: default;

387

388 &:hover {

389 text-decoration: none;

390 }

391

392 .caret {

393 border-top-color: #ccc;

394 }

395 }

396

397 > ul li.current {

398 background-color: $green;

399

400 .tab {

401 color: #fff;

402 }

403

404 .caret {

405 border-top-color: #fff;

406 }

407 }

408 }

409

410 nav.secondary {

411 position: absolute;

412 right: 0;

413

414 > ul a,

415 .dropdown-toggle {

416 display: inline-block;

417 font-weight: bold;

418 text-decoration: none;

419 color: $darkgrey;

420 padding: 5px 5px;

421 }

422

423 > ul li.current a {

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

425 }

426

427 .user-menu {

428 $border: 1px solid $grey;

429

430 border: $border;

431 border-radius: 4px;

432 margin-left: 10px;

433

434 > li {

435 border-right: $border;

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

437 }

438

439 a {

440 padding: 5px 15px;

441 }

442 }

443

444 .caret {

445 border-top-color: $grey;

446 margin-top: 10px;

447 }

448

449 img.user_thumbnail_tiny {

450 border: 0;

451 vertical-align: top;

452 margin-top: 2px;

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

454 }

455

456 #inboxanchor {

457 display: inline-block;

458 vertical-align: top;

459 height: 20px;

460 margin: 2px 7px 0 0;

461 background-color: $grey;

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

463 }

464

465 .dropdown-menu {

466 left: auto;

467 right: 0;

468

469 .count-number {

470 float: right;

471 padding: 0 5px;

472 margin: 0;

473 }

474 }

475 }

476

477 /* Utility for styling notification numbers */

478

479 .count-number {

480 padding: 2px $lineheight/4;

481 border-radius: 2px;

482 background: #d7d7ff;

483 margin: 0 2px;

484 font-size: 11px;

485 color: #333;

486 }

487

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

489

490 #noscript {

491 z-index: 20000000;

492 position: absolute;

493 top: 15px;

494 left: 15px;

495 }

496

497 /* Rules for bootstrap tooltips */

498

499 .tooltip {

500 position: absolute;

501 display: none;

502 color: #333;

503 text-align: left;

504 font-size: 12px;

505 max-width: 250px;

506 }

507

508 .tooltip.in {

509 opacity: 0.8;

510 z-index: 1030;

511 height: auto;

512 display: block;

513 }

514

515 .tooltip.top {

516 margin-top: -10px;

517 text-align: center;

518 }

519

520 .tooltip.right {

521 margin-left: 10px;

522 }

523

524 .tooltip.bottom {

525 margin-top: 10px;

526 text-align: center;

527 }

528

529 .tooltip.left {

530 margin-left: -10px;

531 text-align: right;

532 }

533

534 .tooltip-inner {

535 display: inline-block;

536 padding: 10px;

537 font-weight: normal;

538 background-color: white;

539 }

540

541 .tooltip-arrow {

542 position: absolute;

543 width: 0;

544 height: 0;

545 border-color: transparent;

546 border-style: solid;

547 }

548

549 .tooltip.top .tooltip-arrow {

550 bottom: -5px;

551 left: 50%;

552 margin-left: -5px;

553 border-top-color: white;

554 border-width: 5px 5px 0;

555 }

556

557 .tooltip.right .tooltip-arrow {

558 top: 50%;

559 left: -5px;

560 margin-top: -5px;

561 border-right-color: white;

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

563 }

564

565 .tooltip.left .tooltip-arrow {

566 top: 50%;

567 right: -5px;

568 margin-top: -5px;

569 border-left-color: white;

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

571 }

572

573 .tooltip.bottom .tooltip-arrow {

574 top: -5px;

575 left: 50%;

576 margin-left: -5px;

577 border-bottom-color: white;

578 border-width: 0 5px 5px;

579 }

580

581 /* Rules for Leaflet maps */

582

583 .leaflet-control .control-button {

584 display: block;

585 height: 40px;

586 width: 40px;

587 background-color: #333;

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

589 -bottom: 1px solid #333;

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

591 margin-bottom: 10px;

592 outline: none;

593

594 &:hover {

595 background-color: black;

596 }

597

598 &.active {

599 background-color: #9ed485;

600 }

601

602 &.disabled {

603 background-color: #333;

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

605 cursor: default;

606 }

607

608 .icon {

609 margin: 10px;

610 }

611 }

612

613 .leaflet-control .zoomin,

614 .control-layers .control-button {

615 margin-bottom: 0px;

616 border-radius: 4px 0 0 0;

617 }

618

619 .leaflet-control .zoomout,

620 .control-key .control-button {

621 margin-bottom: 0;

622 border-radius: 0;

623 }

624

625 .control-locate .control-button,

626 .control-share .control-button {

627 border-radius: 0 0 0 4px;

628 }

629

630 /* Rules for the home page */

631

632 #map {

633 height: 100%;

634 overflow: hidden;

635 }

636

637 #map-ui {

638 display: none;

639 position: relative;

640 float: right;

641 width: 250px;

642 height: 100%;

643 background: white;

644 overflow: auto;

645

646 .section {

647 border-bottom: 1px solid #DDD;

648 padding: 15px;

649 }

650

651 a.close-button {

652 float: right;

653 padding:5px;

654 font-size:20px;

655 line-height:10px;

656 color:#222;

657 border:1px solid #ddd;

658 }

659 }

660

661 .layers-ui,

662 .share-ui {

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

664 margin-bottom: 0;

665 }

666 }

667

668 .layers-ui {

669 li {

670 border-radius: 4px;

671 overflow: hidden;

672 margin-bottom: 10px;

673 }

674

675 label {

676 display: block;

677 padding: 5px 5px 5px 7px;

678 background-color: #eee;

679 cursor: pointer;

680 }

681

682 li.active label {

683 background-color: #ccc;

684 }

685

686 .base-layers {

687 .leaflet-container {

688 width: 100%;

689 height: 50px;

690 cursor: pointer;

691 }

692 }

693 }

694

695 .share-ui {

696 .share-tabs {

697 margin-bottom: 10px;

698

699 a {

700 color: #fff;

701 text-decoration: none;

702 background-color: $lightblue;

703 padding: 5px 10px;

704 }

705

706 a:first-child {

707 border-right: 1px solid #fff;

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

709 }

710

711 a:last-child {

712 border-left: 1px solid #fff;

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

714 }

715

716 a.active {

717 background-color: $blue;

718 }

719 }

720

721 .share-tab {

722 display: none;

723 }

724

725 .share-link {

726 input[type=text],

727 textarea {

728 width: 100%;

729 font-family: monospace;

730 font-size: small;

731 line-height: 1.3;

732 }

733 }

734

735 .share-image {

736 label {

737 margin-right: 10px;

738 }

739 }

740

741 #embed_html {

742 resize: vertical;

743 }

744

745 #mapnik_scale {

746 width: 100px;

747 }

748 }

749

750 .leaflet-top.leaflet-right {

751 top: $lineheight !important;

752 .leaflet-control {

753 margin-right: 0px !important;

754 margin-top: 0px !important;

755 }

756 }

757

758 .leaflet-popup-scrolled {

759 padding-right: $lineheight;

760 border-bottom: 0px !important;

761 border-top: 0px !important;

762 }

763

764 .leaflet-popup-content-wrapper {

765 border-radius: 4px !important;

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

767 }

768

769 /* Rules for edit menu */

770

771 .menu {

772 display: none;

773 z-index: 10000;

774 position: absolute;

775 background-color: #ffffff;

776 border: 1px solid $lightgrey;

777 border-top: 0px;

778 ul {

779 margin: 0px;

780 }

781 li {

782 padding: 2px $lineheight/4;

783 border-top: 1px solid #eee;

784 white-space: nowrap;

785 }

786 }

787

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

789

790 #attribution {

791 display: none;

792 }

793

794 .attribution_license,

795 .attribution_project {

796 text-align: left;

797 }

798

799 .attribution_notice {

800 text-align: center;

801 }

802

803 /* Rules for the sidebar */

804

805 #sidebar {

806 border-right: $keyline;

807

808 .alert {

809 background: #e00;

810 }

811

812 h2, h3, h4 {

813 padding: $lineheight;

814 border-bottom: $keyline;

815 }

816

817 h4 {

818 font-weight: normal;

819 }

820

821 .icon.close {

822 position: absolute;

823 right: $lineheight;

824 }

825

826 p {

827 margin: 0;

828 }

829

830 .footer {

831 position: absolute;

832 bottom: 0;

833 }

834

835 p.credits {

836 font-size: 11px;

837 color: #999;

838

839 a {

840 color: #666;

841 }

842 }

843 }

844

845 .sidebar_heading {

846 position: relative;

847 padding: $lineheight/2 $lineheight;

848 background: $offwhite;

849 border-bottom: 1px solid #ccc;

850 h4 {

851 margin: 0;

852 }

853 }

854

855 .sidebar_close {

856 position: absolute;

857 height: $lineheight;

858 top: 0px;

859 bottom: 0;

860 right: $lineheight;

861 margin: auto;

862 }

863

864 #sidebar_content {

865 position: absolute;

866 top: 72px;

867 bottom: 0;

868 width: 100%;

869 overflow-y: auto;

870 }

871

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

873

874 #mapkey {

875 .mapkey-table-key img {

876 display: block;

877 margin-left: auto;

878 margin-right: auto;

879 }

880 td {

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

882 }

883 }

884

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

886

887 .search_searching {

888 margin-top: $lineheight/4;

889 margin-bottom: $lineheight/4;

890 }

891

892 .search_results_entry {

893 .search_searching {

894 text-align: center;

895 margin: $lineheight auto;

896 width: $lineheight;

897 display: block;

898 }

899

900 ul li {

901 border-bottom: 1px solid #ccc;

902 }

903

904 .search_details {

905 display: block;

906 float: right;

907 text-align: right;

908 margin-top: 0.2em;

909 margin-left: 0.5em;

910 }

911 }

912

913 .search_results_error {

914 color: #f00;

915 }

916

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

918

919 #browse_content {

920 position: relative;

921 .browse_show_list.button {

922 position: absolute;

923 left: $lineheight;

924 right: $lineheight;

925 bottom: -40px;

926 margin-bottom: 0;

927 }

928 a.more-details {

929 position: absolute;

930 top: 0;

931 right: $lineheight;

932 }

933 ul li {

934 margin-bottom: 0;

935 }

936 }

937

938 .browse_details {

939 position: relative;

940 }

941

942 .browse_status {

943 display: none;

944 }

945

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

947

948 .export_bounds {

949 text-align: center;

950 }

951

952 .export_area_inputs {

953 margin-bottom: $lineheight/2;

954 input[type="text"] {

955 width: 80px;

956 margin-bottom: 5px;

957 }

958 }

959

960 .export_bound {

961 margin: $lineheight/4;

962 }

963

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

965

966 .site-index,

967 .site-export,

968 .site-edit,

969 .changeset-list,

970 .browse {

971 #content {

972 position: absolute;

973 top: $headerHeight;

974 bottom: 0;

975 width: 100%;

976 }

977

978 #sidebar, #map {

979 position: relative;

980 height: 100%;

981 overflow-x: hidden;

982 overflow-y: auto;

983 }

984

985 #sidebar {

986 float: left;

987 width: $sidebarWidth;

988 }

989 }

990

991 .content-heading {

992 position: relative;

993 padding: $lineheight;

994 background: $lightgrey;

995 border-bottom: $keyline;

996 }

997

998 .content-body {

999 padding: $lineheight;

1000 }

1001

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

1003

1004 .user-new,

1005 .user-create,

1006 .user-terms,

1007 .user-confirm {

1008 .content-heading {

1009 height: 200px;

1010 }

1011 }

1012

1013 .user-new,

1014 .user-create,

1015 .user-terms {

1016 .content-body {

1017 padding: 0;

1018 }

1019 }

1020

1021 .header-illustration {

1022 background-position: 0 0;

1023 background-repeat: no-repeat;

1024 position: absolute;

1025 height: 200px;

1026 width: 100%;

1027 left: 0;

1028 bottom: 0;

1029

1030 &.new-user-main {

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

1032 }

1033

1034 &.confirm-main {

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

1036 }

1037

1038 &.new-user-terms {

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

1040 }

1041

1042 &.new-user-arm {

1043 height: 110px;

1044 width: 130px;

1045 left: 260px;

1046 top: 160px;

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

1048 }

1049 }

1050

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

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

1053 .wrapper {

1054 margin-left: $sidebarWidth;

1055 text-align: left;

1056 }

1057

1058 }

1059

1060 #content.maximised {

1061 top: 0;

1062 left: 0;

1063 right: 0;

1064 bottom: 0;

1065 border: 0;

1066 z-index: 1000;

1067 }

1068

1069 #slim_container {

1070 width: 100%;

1071 }

1072

1073 #slim_container_content {

1074 max-width: 50em;

1075 background-color: #FFFFFF;

1076 margin: $lineheight/2 auto;

1077 padding: 3px;

1078 border-radius: 25px;

1079 -moz-border-radius: 25px;

1080 border: 1px solid #e6e6e6;

1081 }

1082

1083 #slim_content {

1084 margin: $lineheight/2;

1085 margin-top: 95px;

1086 max-width: 50em;

1087

1088 .content-heading {

1089 margin-bottom: 15px;

1090 }

1091 }

1092

1093 #slim_header {

1094 margin: 30px $lineheight/2;

1095 position: absolute;

1096 top: 0px;

1097 margin-right: $lineheight/4;

1098 img {

1099 vertical-align: middle;

1100 margin-bottom: $lineheight/4;

1101 margin-right: $lineheight/4;

1102 }

1103 }

1104

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

1106

1107 .content_map {

1108 position: relative;

1109 width: 45%;

1110 height: 400px;

1111 border: 1px solid #ccc;

1112 margin-bottom: $lineheight;

1113 float: right;

1114 }

1115

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

1117

1118 #sidebar .changesets {

1119 li {

1120 padding: $lineheight;

1121 border-bottom: $keyline;

1122 }

1123

1124 p {

1125 padding: 0;

1126 }

1127 }

1128

1129 /* Rules for the data browser */

1130

1131 body.browse #sidebar_content {

1132 .browse-section {

1133 padding: 20px;

1134 border-bottom: 1px solid #CCC;

1135

1136 ul {

1137 margin: 0;

1138 }

1139 }

1140

1141 .browse-field {

1142 margin-bottom: 10px;

1143

1144 h4 {

1145 margin: 0;

1146 padding: 5px 0 5px 10px;

1147 font-size: 12px;

1148 border: 1px solid #CCC;

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

1150 background-color: #F6F6F6;

1151 }

1152

1153 p {

1154 margin: 0;

1155 padding: 7px 10px;

1156 font-size: 12px;

1157 background-color: #FFF;

1158 border: 1px solid #CCC;

1159 border-top: 0;

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

1161 }

1162 }

1163

1164 .browse-tag-list {

1165 border: 1px solid #CCC;

1166 border-radius: 4px;

1167 font-size: 12px;

1168

1169 li {

1170 border-bottom: 1px solid #CCC;

1171 }

1172

1173 li:last-child {

1174 border-bottom: 0;

1175 }

1176

1177 .browse-tag-k,

1178 .browse-tag-v {

1179 display: inline-block;

1180 width: 50%;

1181 height: 30px;

1182 float: left;

1183 padding: 9px 10px;

1184 }

1185

1186 .browse-tag-k {

1187 font-weight: bold;

1188 background-color: #F6F6F6;

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

1190 }

1191

1192 .browse-tag-v {

1193 border-left: 1px solid #CCC;

1194 }

1195 }

1196 }

1197

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

1199

1200 #trace_list {

1201 font-size: $lineheight/2;

1202 border-width: 0px;

1203 text-align: right;

1204

1205 .trace_summary {

1206 font-size: 12px;

1207 color: gray;

1208 }

1209

1210 .trace_pending {

1211 color: red;

1212 }

1213

1214 .trace_public {

1215 color: green;

1216 }

1217

1218 .trace_identifiable {

1219 color: green;

1220 }

1221

1222 .trace_trackable {

1223 color: red;

1224 }

1225

1226 .trace_private {

1227 color: red;

1228 }

1229 }

1230

1231 /* Rules for the user profile page */

1232

1233 #userinformation {

1234

1235 min-height: 100px;

1236 .userinformation-inner {

1237 float: left;

1238 }

1239 h2 {

1240 margin-top: 0;

1241 }

1242 .user-description {

1243 width: 100%;

1244 clear: both;

1245 }

1246 .deemphasize {

1247 margin: 0;

1248 }

1249 }

1250

1251 .admin-user-info small {

1252 margin-bottom: $lineheight/2;

1253 display: inline;

1254 margin-right: $lineheight;

1255 }

1256

1257 .activity-block {

1258 clear: left;

1259 border-bottom: 1px solid #ccc;

1260 padding-bottom: $lineheight;

1261 float: left;

1262 h3 {

1263 margin-bottom: $lineheight/2;

1264 }

1265 }

1266

1267 .contact-activity {

1268 margin-top: $lineheight;

1269 width: 100%;

1270 }

1271

1272 .activity-details p {

1273 margin-left: 70px;

1274 margin-bottom: 0;

1275 }

1276

1277 #friends-container .contact-activity ul {

1278 margin-left: 70px;

1279 }

1280

1281 .user-view {

1282 p#no_home_location {

1283 margin: $lineheight;

1284 }

1285 .user_thumbnail {

1286 margin-top: $lineheight/4;

1287 float: left;

1288 }

1289 }

1290

1291 /* Rules for the user map */

1292

1293 .content_map .leaflet-popup-content {

1294 margin: $lineheight/2;

1295 min-height: 50px;

1296 }

1297

1298 /* Rules for user popups on maps */

1299

1300 .user_popup {

1301 min-width: 200px;

1302 p {

1303 padding: 0 0 5px 0;

1304 margin-top: 0 0 0 60px;

1305 font-size: 12px;

1306 }

1307 img.user_thumbnail {

1308 float: left;

1309 margin: 0 $lineheight/2 0 0;

1310 }

1311 }

1312

1313 /* Rules for the user list */

1314

1315 #user_list {

1316 font-size: $lineheight/2;

1317 width: 100%;

1318

1319 tr {

1320 vertical-align: middle;

1321 }

1322

1323 p {

1324 margin-top: 0px;

1325 margin-bottom: 0px;

1326 }

1327 }

1328

1329 #user_list_actions {

1330 float: right;

1331 margin-top: $lineheight/2;

1332 }

1333

1334 /* Rules for the diary list page */

1335

1336 .diary_entry-list img.user_thumbnail {

1337 float: left;

1338 }

1339

1340 .diary_post {

1341 max-width: 740px;

1342 position: relative;

1343 margin-top: $lineheight/2;

1344 padding-top: $lineheight;

1345 border-top: 1px solid #ccc;

1346

1347 &:first-child {

1348 margin-top: 0;

1349 border-top: 0;

1350 padding-top: 0;

1351 }

1352 h1, h2 {

1353 font-size: 21px;

1354 line-height: 1em;

1355 }

1356 small.deemphasize {

1357 float: left;

1358 display: block;

1359 }

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

1361 }

1362

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

1364 display: inline;

1365 }

1366

1367 #content .post_heading {

1368 margin-bottom: $lineheight;

1369 h2 {

1370 margin-top: 0;

1371 margin-bottom: $lineheight/2;

1372 font-size: 24px;

1373 }

1374 }

1375

1376 /* Rules for the diary entry page */

1377

1378 .diary_entry {

1379 #map {

1380 position: relative;

1381 width: 90%;

1382 height: 400px;

1383 border: 1px solid #ccc;

1384 display: none;

1385 margin-bottom: $lineheight;

1386 }

1387 #newcomment {

1388 border-top: 1px solid #ccc;

1389 padding-top: $lineheight;

1390 margin-top: $lineheight/2;

1391 }

1392 .comments {

1393 max-width: 740px;

1394 }

1395 .diary-comment {

1396 margin-top: $lineheight/2;

1397 border-top: 1px dashed #ccc;

1398 padding-top: $lineheight/2;

1399 &:first-child {

1400 margin-top: $lineheight;

1401 padding-top: $lineheight;

1402 border-top: 1px solid #ccc;

1403 }

1404 p {

1405 margin-bottom: $lineheight/2;

1406 }

1407 .comment-heading {

1408 margin-bottom: 0;

1409 margin-top: 0;

1410 }

1411 }

1412 }

1413

1414 .diary_entry-view img.user_thumbnail {

1415 float: left;

1416 }

1417

1418 /* Rules for the log in page */

1419

1420 #login_openid_buttons {

1421 margin-bottom: 0;

1422 }

1423

1424 #login_openid_buttons li {

1425 float: left;

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

1427 }

1428

1429 /* Rules for the account confirmation page */

1430

1431 .user-terms {

1432 .legale {

1433 border: 1px solid #ccc;

1434 padding: $lineheight;

1435 margin-bottom: $lineheight;

1436 overflow: auto;

1437 height: 10em;

1438 }

1439

1440 #decline {

1441 background: $lightblue;

1442 &:hover {

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

1444 }

1445 }

1446

1447 .form-row {

1448 margin: auto;

1449 max-width: 370px;

1450 }

1451 }

1452

1453 /* Rules for the account settings page */

1454

1455 #accountForm .user_map {

1456 position: relative;

1457 width: 500px;

1458 height: 400px;

1459 border: 1px solid #ccc;

1460 }

1461

1462 #accountForm .user_image {

1463 margin-bottom: 0;

1464 }

1465

1466 #accountForm #user_image {

1467 margin-left: 20px;

1468 }

1469

1470 #accountForm ul.accountImage-options {

1471 margin-left: 120px;

1472 }

1473

1474 .nohome .location {

1475 display: none;

1476 }

1477

1478 #homerow .message {

1479 display: none;

1480 }

1481

1482 .nohome .message {

1483 display: inline !important;

1484 }

1485

1486 .content_map.settings_map {

1487 width: 50%;

1488 float: none;

1489 }

1490

1491 /* Rules for the oauth settings page */

1492

1493 .oauth_clients .buttons .oauth-edit {

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

1495 }

1496

1497 .oauth_clients .buttons .oauth-delete {

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

1499 }

1500

1501 /* Rules for messages pages */

1502

1503 .messages {

1504 width: 100%;

1505 border: 1px solid #ddd;

1506

1507 input[type="submit"] {

1508 margin: auto;

1509 }

1510 tbody tr {

1511 border-top: 1px solid #ccc;

1512 }

1513

1514 .inbox-row {

1515 background: #f8f8ff;

1516 }

1517

1518 .inbox-row-unread {

1519 background:#CBEEA7;

1520 }

1521

1522 .right {

1523 float: right;

1524 }

1525

1526 tr td,

1527 tr th {

1528 padding: $lineheight/4;

1529 }

1530 p:last-child,

1531 h2:last-child,

1532 h3:last-child,

1533 ol:last-child,

1534 ul:last-child {

1535 margin-bottom:0;

1536 }

1537 tr td {

1538 height: 30px;

1539 border-right: 1px solid $lightgrey;

1540 }

1541 }

1542

1543 .inbox-row .inbox-mark-read {

1544 display: none;

1545 }

1546

1547 .info-line {

1548 margin-bottom: $lineheight;

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

1550 border-bottom: 1px solid #ccc;

1551

1552 form, form div {

1553 display: inline;

1554 }

1555 }

1556

1557 .info-line .user_thumbnail_tiny {

1558 vertical-align: middle;

1559 }

1560

1561 .inbox-mark-unread,

1562 .inbox-mark-read,

1563 .inbox-delete {

1564 width: 1%;

1565 }

1566

1567 .inbox-row-unread .inbox-mark-unread {

1568 display: none;

1569 }

1570

1571 .message-read .message-buttons {

1572 margin-top: $lineheight;

1573 padding-top: $lineheight;

1574 border-top: 1px solid $lightgrey;

1575 }

1576

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

1578 border-radius: 0;

1579 }

1580

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

1582

1583 .flash {

1584 padding: $lineheight;

1585 &#error {

1586 background-color: #ff7070;

1587 }

1588 &#warning {

1589 background-color: #ffe0cc;

1590 }

1591 &#notice {

1592 background-color: #CBEEA7;

1593 }

1594 }

1595

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

1597

1598 .field_with_errors {

1599 padding: 2px;

1600 background-color: #ff7070;

1601 display: inline-block;

1602 }

1603

1604 .formError {

1605 display: inline-block;

1606 padding: 5px 10px;

1607 margin-top: 5px;

1608 border-radius: 4px;

1609 font-size: 12px;

1610 color: #fff;

1611 background-color: #ff7070;

1612 }

1613

1614 /* Rules for rails validation error boxes */

1615

1616 #errorExplanation {

1617 width: 400px;

1618 border: 2px solid #ff7070;

1619 padding: 0 $lineheight/2;

1620 margin-bottom: $lineheight;

1621 background-color: #f0f0f0;

1622

1623 h2 {

1624 margin: 0 -10px 10px -10px;

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

1626 font-weight: bold;

1627 font-size: 12px;

1628 background-color: #c00;

1629 color: #fff;

1630 text-align: left;

1631 }

1632

1633 p {

1634 color: #333;

1635 margin-bottom: 0px;

1636 padding: $lineheight/4;

1637 }

1638

1639 ul {

1640 padding-left: $lineheight;

1641

1642 li {

1643 font-size: 12px;

1644 list-style: disc;

1645 }

1646 }

1647 }

1648

1649 /* Rules for forms */

1650

1651 .standard-form {

1652 fieldset {

1653 margin-bottom: $lineheight;

1654 }

1655 label.standard-label {

1656 display: block;

1657 margin-bottom: $lineheight/4;

1658 font-size: $typeheight;

1659 font-weight: bold;

1660 line-height: 1.5;

1661 }

1662 label.standard-label.secondary {

1663 display: inline-block;

1664 font-weight: normal;

1665 }

1666 .form-help {

1667 font-weight: normal;

1668 }

1669 .form-column {

1670 float: left;

1671 margin-right: 20px;

1672 }

1673 .form-divider {

1674 margin-top: $lineheight;

1675 padding-top: $lineheight;

1676 border-top: 1px solid $lightgrey;

1677 }

1678 .horizontal-list .form-row {

1679 float: left;

1680 padding-right: 10px;

1681 }

1682 .form-row {

1683 margin-bottom: $lineheight/2;

1684 }

1685 .form-list {

1686 margin-bottom: 0;

1687 }

1688 .form-list li {

1689 margin-bottom: 5px;

1690 }

1691 input[type="checkbox"],

1692 input[type="radio"] {

1693 float: left;

1694 margin-top: 5px;

1695 }

1696 }

1697

1698 #remember_me_openid {

1699 display: block;

1700 }

1701

1702 input[type="checkbox"],

1703 input[type="radio"] {

1704 margin-right: 5px;

1705 }

1706

1707 input[type="text"],

1708 input[type="email"],

1709 input[type="url"],

1710 input[type="password"],

1711 textarea {

1712 border: 1px solid #ccc;

1713 padding: 2px 5px;

1714 margin: 0;

1715 width: 200px;

1716 }

1717

1718 textarea {

1719 padding: 5px;

1720 width: 100%;

1721 }

1722

1723 /* Rules for user images */

1724

1725 img.user_image {

1726 max-width: 100px;

1727 max-height: 100px;

1728 border: 1px solid #ccc;

1729 margin-bottom: $lineheight;

1730 float: left;

1731 margin-right: $lineheight;

1732 }

1733

1734 img.user_thumbnail {

1735 max-width: 50px;

1736 max-height: 50px;

1737 border: 1px solid #ccc;

1738 margin-right: $lineheight;

1739 }

1740

1741 img.user_thumbnail_tiny {

1742 max-width: 25px;

1743 max-height: 25px;

1744 border: 1px solid #ccc;

1745 }

1746

1747 /* Rules for geo microformats */

1748

1749 abbr.geo {

1750 border-bottom: none;

1751 }

1752

1753 /* Rules for RSS buttons */

1754

1755 .rsssmall {

1756 position: relative;

1757 top: 5px;

1758 }

1759

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

1761

1762 ul.secondary-actions {

1763 font-style: normal;

1764 margin-bottom: 0;

1765 margin-left: 0;

1766 &.pager {

1767 display: inline-block;

1768 margin-right: 60px;

1769 }

1770 > li {

1771 display: block;

1772 float: left;

1773 list-style: none;

1774 border-left: 1px solid #ccc;

1775 padding-left: $lineheight/4;

1776 margin-right: $lineheight/4;

1777 &:first-child {

1778 border-left: 0;

1779 padding-left: 0;

1780 }

1781 &:last-child {

1782 margin-right: 0px;

1783 }

1784 }

1785 }

1786

1787 /* Utility for managing inner content areas */

1788

1789 .inner22 { padding: $lineheight;}

1790

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

1792

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

1794

1795 .inner20 { padding: $lineheight 0;}

1796

1797 .inner02 { padding: 0 $lineheight;}

1798

1799 /* Utility for general button styles */

1800

1801 input[type="button"],

1802 input[type="submit"],

1803 input[type="reset"],

1804 a.button {

1805 cursor: pointer;

1806 border: 0;

1807 display: inline-block;

1808 line-height: 20px;

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

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

1811 min-width: 120px;

1812 margin: 0 0 $lineheight/2 0;

1813 color: white;

1814 background: $blue;

1815 text-align: center;

1816 border-radius: 2px;

1817 -moz-border-radius: 2px;

1818 &:hover {

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

1820 text-decoration: none;

1821 }

1822 &.deemphasize {

1823 background: $lightblue;

1824 &:hover {

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

1826 }

1827 }

1828 &:disabled {

1829 background: $lightgrey;

1830 &:hover {

1831 background: $lightgrey;

1832 }

1833 }

1834 &:last-child {

1835 margin-bottom: 0;

1836 }

1837 }

1838

1839 .buttons {

1840 min-width: 200px;

1841 input[type="submit"],

1842 input[type="button"],

1843 input[type="reset"],

1844 .button {

1845 box-sizing: border-box;

1846 float: left;

1847 border-radius: 0;

1848 margin:0;

1849 min-width: 100px;

1850 max-width: 180px;

1851 border-right:1px solid white;

1852 text-overflow: ellipsis;

1853 white-space: nowrap;

1854 overflow: hidden;

1855 }

1856 input:first-child,

1857 .button:first-child {

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

1859 }

1860 input:last-child,

1861 .button:last-child {

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

1863 border-right-width: 0;

1864 }

1865 input:only-child,

1866 .button:only-child,

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

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

1869 border-radius:2px;

1870 border-right-width: 0;

1871 }

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

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

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

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

1876 border-right-width: 0;

1877 }

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

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

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

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

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

1883 }

1884 }

1885

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

1887

1888 .table0,

1889 .item0 {

1890 background: $offwhite;

1891 }

1892

1893 .table1,

1894 .item1 {

1895 background: #fff;

1896 }

1897

1898 /* Rules for OpenID logo */

1899

1900 .openid_logo {

1901 vertical-align: text-bottom;

1902 border: 0;

1903 }

1904

1905 /* Rules for rich text */

1906

1907 .richtext,

1908 .prose {

1909 h1, h2 {

1910 padding-bottom: $lineheight/2;

1911 border-bottom: 1px dashed #cccccc;

1912 margin-bottom: $lineheight/2;

1913 }

1914

1915 h1 {

1916 font-size: 24px;

1917 }

1918

1919 h2 {

1920 font-size: 18px;

1921 }

1922

1923 h3 {

1924 font-size: $typeheight;

1925 }

1926

1927 code {

1928 font-size: 13px;

1929 background: #e8e8e8;

1930 padding: 2px 3px;

1931 }

1932

1933 pre {

1934 font-size: 13px;

1935 background: #e8e8e8;

1936 padding: 2px 3px;

1937

1938 code {

1939 padding: 0;

1940 }

1941 }

1942

1943 img {

1944 padding: $lineheight;

1945 background-color: $offwhite;

1946 display: block;

1947 max-width: 100%;

1948 margin: auto;

1949 }

1950

1951 blockquote {

1952 border-left: $lineheight solid $offwhite;

1953 padding-left: $lineheight;

1954 margin: 0;

1955 color: #7E7E7E;

1956 }

1957

1958 ul, ol {

1959 padding-left: $lineheight;

1960 margin-bottom: $lineheight;

1961 margin-left: $lineheight;

1962 }

1963

1964 ul li {

1965 list-style: disc;

1966 }

1967

1968 ol li {

1969 list-style: decimal;

1970 }

1971 }

1972

1973 .diary_post .richtext {

1974 margin-top: $lineheight;

1975 }

1976

1977 .comments .richtext {

1978 margin-left: 70px;

1979 margin-top: 0;

1980 }

1981

1982 /* Rules for rich text editors */

1983

1984 .richtext_container {

1985 margin-bottom: $lineheight;

1986

1987 .richtext_content {

1988 width: 50%;

1989 display: inline-block;

1990 vertical-align: top;

1991

1992 .richtext_preview {

1993 display: inline-block;

1994 padding: $lineheight;

1995 background-color: $offwhite;

1996 overflow-x: auto;

1997

1998 &.loading {

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

2000 background-repeat: no-repeat;

2001 background-position: center;

2002 }

2003

2004 > :first-child {

2005 margin-top: 0px;

2006 }

2007 }

2008 }

2009

2010 .richtext_help {

2011 display: inline-block;

2012 vertical-align: top;

2013 margin-left: 15px;

2014 background-color: #f8f8ff;

2015 padding: $lineheight/2;

2016 width: 220px;

2017

2018 ul {

2019 margin-bottom: 0;

2020 }

2021

2022 h4.heading, li {

2023 border-bottom: 1px solid #ccc;

2024 margin-bottom: $lineheight/4;

2025 padding-bottom: $lineheight/4;

2026 }

2027

2028 li h4, li span, li p {

2029 display: inline-block;

2030 vertical-align: top;

2031 font-size: 11px;

2032 }

2033

2034 li h4 {

2035 width: 40%;

2036 margin: 0;

2037 }

2038

2039 li span, li p {

2040 width: 50%;

2041 margin-left: $lineheight/2;

2042 margin-bottom: $lineheight/4;

2043 white-space: nowrap;

2044 }

2045 }

2046 }

2047

2048 /* Rules for the user notes list */

2049

2050 .note_list {

2051 tr.creator {

2052 background-color: #eeeeee;

2053 }

2054

2055 td {

2056 padding: 3px;

2057 }

2058

2059 p {

2060 margin-bottom: 0px;

2061 }

2062 }

2063

2064 /* Rules for the notes interface */

2065

2066 .leaflet-popup-content .note {

2067 padding-top: $lineheight/2;

2068 }

2069

2070 .leaflet-popup-content .note {

2071 h2 {

2072 margin-bottom: $lineheight/2;

2073 }

2074

2075 div {

2076 margin-top: $lineheight/2;

2077 }

2078

2079 .permalink {

2080 position: absolute;

2081 top: $lineheight/4;

2082 left: $lineheight/4;

2083 min-width: 15px;

2084 min-height: 15px;

2085 }

2086

2087 .permalink span {

2088 display: none;

2089 padding-left: $lineheight;

2090 }

2091

2092 .permalink:hover span {

2093 display: block;

2094 }

2095

2096 .warning {

2097 display: block;

2098 background-color: #ffe0cc;

2099 padding: 4px 6px;

2100 margin-bottom: $lineheight/2;

2101 }

2102

2103 .comment_body {

2104 margin-top: 2px;

2105 margin-bottom: 2px;

2106

2107 p {

2108 margin-top: 0px;

2109 margin-bottom: 0px;

2110 }

2111 }

2112

2113 .comment {

2114 width: 100%;

2115 height: 100px;

2116 }

2117

2118 .buttons {

2119 margin-top: $lineheight/4;

2120 text-align: right;

2121 }

2122 }

2123

2124 /*

2125 * Rules for the iD editor

2126 */

2127

2128 .id-embed {

2129 width: 100%;

2130 height: 100%;

2131 }

2132

2133 /* Rules for rotating sidebar ads */

2134 .ad-container {

2135 display: block;

2136 height: 120px;

2137 margin: auto;

2138 overflow: hidden;

2139 position: relative;

2140 border-bottom: 1px solid #ccc;

2141

2142 a {

2143 display: block;

2144 width: 165px;

2145 margin: auto;

2146 }

2147

2148 .ad {

2149 height: 100px;

2150 border: 0;

2151 background: #fff;

2152 }

2153 }

2154

2155 /* Rules for dropdown menus */

2156

2157 .dropdown {

2158 position: relative;

2159 }

2160

2161 .dropdown-toggle {

2162 *margin-bottom: -3px;

2163 }

2164

2165 .dropdown-toggle:active,

2166 .open .dropdown-toggle {

2167 outline: 0;

2168 }

2169

2170 .caret {

2171 display: inline-block;

2172 width: 0;

2173 height: 0;

2174 vertical-align: top;

2175 border-top: 4px solid #000000;

2176 border-right: 4px solid transparent;

2177 border-left: 4px solid transparent;

2178 content: "";

2179 }

2180

2181 .dropdown .caret {

2182 margin-top: 8px;

2183 margin-left: 2px;

2184 }

2185

2186 .dropdown-menu {

2187 position: absolute;

2188 top: 100%;

2189 left: 0;

2190 z-index: 1000;

2191 display: none;

2192 float: left;

2193 min-width: 160px;

2194 padding: 5px 0;

2195 margin: 0;

2196 list-style: none;

2197 background-color: #ffffff;

2198 border: 1px solid #ccc;

2199 *border-right-width: 2px;

2200 *border-bottom-width: 2px;

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

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

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

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

2205 -moz-background-clip: padding;

2206 background-clip: padding-box;

2207 }

2208

2209 .dropdown-menu.pull-right {

2210 right: 0;

2211 left: auto;

2212 }

2213

2214 .dropdown-menu .divider {

2215 *width: 100%;

2216 height: 1px;

2217 margin: 9px 1px;

2218 *margin: -5px 0 5px;

2219 overflow: hidden;

2220 background-color: #e5e5e5;

2221 border-bottom: 1px solid #ffffff;

2222 }

2223

2224 .dropdown-menu > li > a {

2225 display: block;

2226 padding: 3px 10px;

2227 clear: both;

2228 font-weight: normal;

2229 line-height: 20px;

2230 color: #333333;

2231 white-space: nowrap;

2232 }

2233

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

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

2236 .dropdown-submenu:hover > a,

2237 .dropdown-submenu:focus > a {

2238 color: #ffffff;

2239 text-decoration: none;

2240 background-color: $green;

2241 }

2242

2243 .dropdown-menu > .active > a,

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

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

2246 color: #ffffff;

2247 text-decoration: none;

2248 background-color: $green;

2249 outline: 0;

2250 }

2251

2252 .dropdown-menu > .disabled > a,

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

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

2255 color: #999999;

2256 }

2257

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

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

2260 text-decoration: none;

2261 cursor: default;

2262 background-color: transparent;

2263 background-image: none;

2264 }

2265

2266 .open {

2267 *z-index: 1000;

2268 }

2269

2270 .open > .dropdown-menu {

2271 display: block;

2272 }

2273

2274 .dropdown-backdrop {

2275 position: fixed;

2276 top: 0;

2277 right: 0;

2278 bottom: 0;

2279 left: 0;

2280 z-index: 990;

2281 }

2282

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

2284 .site-welcome {

2285 .center {

2286 text-align: center;

2287 .sprite {

2288 float: none;

2289 margin: auto;

2290 }

2291 }

2292

2293 .sprite {

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

2295 background-size: 500px 250px;

2296 display: block;

2297 float: left;

2298 }

2299

2300 .icon-list {

2301 padding-bottom: 20px;

2302 div {

2303 margin-bottom: 10px;

2304 p {

2305 padding-top: 10px;

2306 }

2307 }

2308 }

2309 .sprite.small {

2310 width: 50px;

2311 height: 50px;

2312 }

2313

2314 .sprite.x {

2315 background-position: -50px 0;

2316 }

2317

2318 .sprite.term {

2319 margin-right: 10px;

2320 vertical-align: middle;

2321 }

2322

2323 .sprite.node {

2324 background-position: -100px 0;

2325 }

2326

2327 .sprite.way {

2328 background-position: -150px 0;

2329 }

2330

2331 .sprite.tag {

2332 background-position: -200px 0;

2333 }

2334

2335 .sprite.editor {

2336 background-position: -250px 0;

2337 }

2338

2339 .sprite.question {

2340 background-position: -300px 0;

2341 }

2342

2343 .start-mapping {

2344 margin: auto;

2345 cursor: pointer;

2346 border: none;

2347 padding: 20px 40px;

2348 font-size: 30px;

2349 text-decoration: none;

2350 }

2351

2352 .note-box {

2353 margin-top: 20px;

2354 background-color: $offwhite;

2355 }

2356

2357 .icon.note {

2358 background-color: #333;

2359 border-radius: 4px;

2360 }

2361 }

2362

2363 .site-about #content {

2364 background-color: #000;

2365 background-position: 50% 50%;

2366 background-repeat: no-repeat;

2367 background-size: cover;

2368 background-attachment: fixed;

2369

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

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

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

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

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

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

2376

2377 .caption {

2378 max-width: 200px;

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

2380 position: fixed;

2381 text-align: right;

2382 right: 20px;

2383 bottom: 60px;

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

2385 color: #fff;

2386 display: none;

2387 }

2388

2389 .caption a {

2390 color: white;

2391 white-space: nowrap;

2392 text-decoration: none;

2393 }

2394

2395 a.next {

2396 display: block;

2397 position: fixed;

2398 right: 10px;

2399 bottom: 10px;

2400 width: 40px;

2401 height: 40px;

2402 border-radius: 5px;

2403 text-indent: -9999px;

2404 overflow: hidden;

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

2406 background-color: #000;

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

2408 }

2409

2410 #content-body {

2411 display: block;

2412 position: relative;

2413 margin: auto;

2414 color: #333;

2415 width: 50%;

2416 min-width: 320px;

2417 max-width: 640px;

2418

2419 .section {

2420 margin-bottom: 30px;

2421 }

2422

2423 .section:last-child {

2424 margin-bottom: 0;

2425 }

2426 }

2427

2428 .text {

2429 background: white;

2430 padding: 40px;

2431 }

2432

2433 .attr {

2434 position: relative;

2435 padding: 170px 20px 20px 20px;

2436 background: #333;

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

2438 margin-bottom: 0;

2439

2440 strong {

2441 display: block;

2442 color: white;

2443 font-size: 25px;

2444 span {

2445 color: #76c551;

2446 }

2447 }

2448

2449 .user-image {

2450 position: absolute;

2451 top: 0px;

2452 right: 240px;

2453 left: 0px;

2454 height: 150px;

2455 background-position: 0 50%;

2456 background-repeat: no-repeat;

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

2458 background-size: cover;

2459 background-color: #76c551;

2460 }

2461

2462 .byosm {

2463 position: absolute;

2464 top: 0px;

2465 right: 0px;

2466 z-index: 1;

2467 width: 240px;

2468 height: 150px;

2469 padding: 20px 20px 20px 40px;

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

2471 white-space: nowrap;

2472 color: #fff;

2473 background: #76c551

2474 }

2475

2476 .byosm span {

2477 display: inline-block;

2478 width: 25px;

2479 margin-left: -25px;

2480 }

2481 }

2482

2483 h2 {

2484 margin-bottom: 10px;

2485 }

2486

2487 .icon {

2488 width: 30px;

2489 height: 30px;

2490 margin-right: 10px;

2491 vertical-align: middle;

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

2493

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

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

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

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

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

2499 }

2500 }