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

398 .site-index #view_tab,

399 .changeset-list #history_tab,

400 .site-export #export_tab,

401 .site-edit #edit_tab {

402 background-color: $green;

403

404 .tab {

405 color: #fff;

406 }

407

408 .caret {

409 border-top-color: #fff;

410 }

411 }

412

413 nav.secondary {

414 position: absolute;

415 right: 0;

416

417 > ul a,

418 .dropdown-toggle {

419 display: inline-block;

420 font-weight: bold;

421 text-decoration: none;

422 color: $darkgrey;

423 padding: 5px 5px;

424 }

425

426 .user-menu {

427 $border: 1px solid $grey;

428

429 border: $border;

430 border-radius: 4px;

431 margin-left: 10px;

432

433 > li {

434 border-right: $border;

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

436 }

437

438 a {

439 padding: 5px 15px;

440 }

441 }

442

443 .caret {

444 border-top-color: $grey;

445 margin-top: 10px;

446 }

447

448 img.user_thumbnail_tiny {

449 border: 0;

450 vertical-align: top;

451 margin-top: 2px;

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

453 }

454

455 #inboxanchor {

456 display: inline-block;

457 vertical-align: top;

458 height: 20px;

459 margin: 2px 7px 0 0;

460 background-color: $grey;

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

462 }

463

464 .dropdown-menu {

465 left: auto;

466 right: 0;

467

468 .count-number {

469 float: right;

470 padding: 0 5px;

471 margin: 0;

472 }

473 }

474 }

475

476 /* Utility for styling notification numbers */

477

478 .count-number {

479 padding: 2px $lineheight/4;

480 border-radius: 2px;

481 background: #d7d7ff;

482 margin: 0 2px;

483 font-size: 11px;

484 color: #333;

485 }

486

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

488

489 #noscript {

490 z-index: 20000000;

491 position: absolute;

492 top: 15px;

493 left: 15px;

494 }

495

496 /* Rules for bootstrap tooltips */

497

498 .tooltip {

499 position: absolute;

500 display: none;

501 color: #333;

502 text-align: left;

503 font-size: 12px;

504 max-width: 250px;

505 }

506

507 .tooltip.in {

508 opacity: 0.8;

509 z-index: 1030;

510 height: auto;

511 display: block;

512 }

513

514 .tooltip.top {

515 margin-top: -10px;

516 text-align: center;

517 }

518

519 .tooltip.right {

520 margin-left: 10px;

521 }

522

523 .tooltip.bottom {

524 margin-top: 10px;

525 text-align: center;

526 }

527

528 .tooltip.left {

529 margin-left: -10px;

530 text-align: right;

531 }

532

533 .tooltip-inner {

534 display: inline-block;

535 padding: 10px;

536 font-weight: normal;

537 background-color: white;

538 }

539

540 .tooltip-arrow {

541 position: absolute;

542 width: 0;

543 height: 0;

544 border-color: transparent;

545 border-style: solid;

546 }

547

548 .tooltip.top .tooltip-arrow {

549 bottom: -5px;

550 left: 50%;

551 margin-left: -5px;

552 border-top-color: white;

553 border-width: 5px 5px 0;

554 }

555

556 .tooltip.right .tooltip-arrow {

557 top: 50%;

558 left: -5px;

559 margin-top: -5px;

560 border-right-color: white;

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

562 }

563

564 .tooltip.left .tooltip-arrow {

565 top: 50%;

566 right: -5px;

567 margin-top: -5px;

568 border-left-color: white;

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

570 }

571

572 .tooltip.bottom .tooltip-arrow {

573 top: -5px;

574 left: 50%;

575 margin-left: -5px;

576 border-bottom-color: white;

577 border-width: 0 5px 5px;

578 }

579

580 /* Rules for Leaflet maps */

581

582 .leaflet-control .control-button {

583 display: block;

584 height: 40px;

585 width: 40px;

586 background-color: #333;

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

588 -bottom: 1px solid #333;

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

590 margin-bottom: 10px;

591 outline: none;

592

593 &:hover {

594 background-color: black;

595 }

596

597 &.active {

598 background-color: #9ed485;

599 }

600

601 &.disabled {

602 background-color: #333;

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

604 cursor: default;

605 }

606

607 .icon {

608 margin: 10px;

609 }

610 }

611

612 .leaflet-control .zoomin,

613 .control-layers .control-button {

614 margin-bottom: 0px;

615 border-radius: 4px 0 0 0;

616 }

617

618 .leaflet-control .zoomout,

619 .control-key .control-button {

620 margin-bottom: 0;

621 border-radius: 0;

622 }

623

624 .control-locate .control-button,

625 .control-share .control-button {

626 border-radius: 0 0 0 4px;

627 }

628

629 /* Rules for the home page */

630

631 #map {

632 height: 100%;

633 overflow: hidden;

634 }

635

636 #map-ui {

637 display: none;

638 position: relative;

639 float: right;

640 width: 250px;

641 height: 100%;

642 background: white;

643 overflow: auto;

644

645 .section {

646 border-bottom: 1px solid #DDD;

647 padding: 15px;

648 }

649

650 a.close-button {

651 float: right;

652 padding:5px;

653 font-size:20px;

654 line-height:10px;

655 color:#222;

656 border:1px solid #ddd;

657 }

658 }

659

660 .layers-ui,

661 .share-ui {

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

663 margin-bottom: 0;

664 }

665 }

666

667 .layers-ui {

668 li {

669 border-radius: 4px;

670 overflow: hidden;

671 margin-bottom: 10px;

672 }

673

674 label {

675 display: block;

676 padding: 5px 5px 5px 7px;

677 background-color: #eee;

678 cursor: pointer;

679 }

680

681 li.active label {

682 background-color: #ccc;

683 }

684

685 .base-layers {

686 .leaflet-container {

687 width: 100%;

688 height: 50px;

689 cursor: pointer;

690 }

691 }

692 }

693

694 .share-ui {

695 .share-tabs {

696 margin-bottom: 10px;

697

698 a {

699 color: #fff;

700 text-decoration: none;

701 background-color: $lightblue;

702 padding: 5px 10px;

703 }

704

705 a:first-child {

706 border-right: 1px solid #fff;

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

708 }

709

710 a:last-child {

711 border-left: 1px solid #fff;

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

713 }

714

715 a.active {

716 background-color: $blue;

717 }

718 }

719

720 .share-tab {

721 display: none;

722 }

723

724 .share-link {

725 input[type=text],

726 textarea {

727 width: 100%;

728 font-family: monospace;

729 font-size: small;

730 line-height: 1.3;

731 }

732 }

733

734 .share-image {

735 label {

736 margin-right: 10px;

737 }

738 }

739

740 #embed_html {

741 resize: vertical;

742 }

743

744 #mapnik_scale {

745 width: 100px;

746 }

747 }

748

749 .leaflet-top.leaflet-right {

750 top: $lineheight !important;

751 .leaflet-control {

752 margin-right: 0px !important;

753 margin-top: 0px !important;

754 }

755 }

756

757 .leaflet-popup-scrolled {

758 padding-right: $lineheight;

759 border-bottom: 0px !important;

760 border-top: 0px !important;

761 }

762

763 .leaflet-popup-content-wrapper {

764 border-radius: 4px !important;

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

766 }

767

768 /* Rules for edit menu */

769

770 .menu {

771 display: none;

772 z-index: 10000;

773 position: absolute;

774 background-color: #ffffff;

775 border: 1px solid $lightgrey;

776 border-top: 0px;

777 ul {

778 margin: 0px;

779 }

780 li {

781 padding: 2px $lineheight/4;

782 border-top: 1px solid #eee;

783 white-space: nowrap;

784 }

785 }

786

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

788

789 #attribution {

790 display: none;

791 }

792

793 .attribution_license,

794 .attribution_project {

795 text-align: left;

796 }

797

798 .attribution_notice {

799 text-align: center;

800 }

801

802 /* Rules for the sidebar */

803

804 #sidebar {

805 border-right: $keyline;

806

807 .alert {

808 background: #e00;

809 }

810

811 h2, h3, h4 {

812 padding: $lineheight;

813 border-bottom: $keyline;

814 }

815

816 h4 {

817 font-weight: normal;

818 }

819

820 .icon.close {

821 position: absolute;

822 right: $lineheight;

823 }

824

825 p {

826 margin: 0;

827 }

828

829 .footer {

830 position: absolute;

831 bottom: 0;

832 }

833

834 p.credits {

835 font-size: 11px;

836 color: #999;

837

838 a {

839 color: #666;

840 }

841 }

842 }

843

844 .sidebar_heading {

845 position: relative;

846 padding: $lineheight/2 $lineheight;

847 background: $offwhite;

848 border-bottom: 1px solid #ccc;

849 h4 {

850 margin: 0;

851 }

852 }

853

854 .sidebar_close {

855 position: absolute;

856 height: $lineheight;

857 top: 0px;

858 bottom: 0;

859 right: $lineheight;

860 margin: auto;

861 }

862

863 #sidebar_content {

864 position: absolute;

865 top: 72px;

866 bottom: 0;

867 width: 100%;

868 overflow-y: auto;

869 }

870

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

872

873 #mapkey {

874 .mapkey-table-key img {

875 display: block;

876 margin-left: auto;

877 margin-right: auto;

878 }

879 td {

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

881 }

882 }

883

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

885

886 .search_searching {

887 margin-top: $lineheight/4;

888 margin-bottom: $lineheight/4;

889 }

890

891 .search_results_entry {

892 .search_searching {

893 text-align: center;

894 margin: $lineheight auto;

895 width: $lineheight;

896 display: block;

897 }

898

899 ul li {

900 border-bottom: 1px solid #ccc;

901 }

902

903 .search_details {

904 display: block;

905 float: right;

906 text-align: right;

907 margin-top: 0.2em;

908 margin-left: 0.5em;

909 }

910 }

911

912 .search_results_error {

913 color: #f00;

914 }

915

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

917

918 #browse_content {

919 position: relative;

920 .browse_show_list.button {

921 position: absolute;

922 left: $lineheight;

923 right: $lineheight;

924 bottom: -40px;

925 margin-bottom: 0;

926 }

927 a.more-details {

928 position: absolute;

929 top: 0;

930 right: $lineheight;

931 }

932 ul li {

933 margin-bottom: 0;

934 }

935 }

936

937 .browse_details {

938 position: relative;

939 }

940

941 .browse_status {

942 display: none;

943 }

944

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

946

947 .export_bounds {

948 text-align: center;

949 }

950

951 .export_area_inputs {

952 margin-bottom: $lineheight/2;

953 input[type="text"] {

954 width: 80px;

955 margin-bottom: 5px;

956 }

957 }

958

959 .export_bound {

960 margin: $lineheight/4;

961 }

962

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

964

965 .site-index,

966 .site-export,

967 .site-edit,

968 .changeset-list,

969 .browse {

970 #content {

971 position: absolute;

972 top: $headerHeight;

973 bottom: 0;

974 width: 100%;

975 }

976

977 #sidebar, #map {

978 position: relative;

979 height: 100%;

980 overflow-x: hidden;

981 overflow-y: auto;

982 }

983

984 #sidebar {

985 float: left;

986 width: $sidebarWidth;

987 }

988 }

989

990 .content-heading {

991 position: relative;

992 padding: $lineheight;

993 background: $lightgrey;

994 border-bottom: $keyline;

995 }

996

997 .content-body {

998 padding: $lineheight;

999 }

1000

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

1002

1003 .user-new,

1004 .user-create,

1005 .user-terms,

1006 .user-confirm {

1007 .content-heading {

1008 height: 200px;

1009 }

1010 }

1011

1012 .user-new,

1013 .user-create,

1014 .user-terms {

1015 .content-body {

1016 padding: 0;

1017 }

1018 }

1019

1020 .header-illustration {

1021 background-position: 0 0;

1022 background-repeat: no-repeat;

1023 position: absolute;

1024 height: 200px;

1025 width: 100%;

1026 left: 0;

1027 bottom: 0;

1028

1029 &.new-user-main {

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

1031 }

1032

1033 &.confirm-main {

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

1035 }

1036

1037 &.new-user-terms {

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

1039 }

1040

1041 &.new-user-arm {

1042 height: 110px;

1043 width: 130px;

1044 left: 260px;

1045 top: 160px;

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

1047 }

1048 }

1049

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

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

1052 .wrapper {

1053 margin-left: $sidebarWidth;

1054 text-align: left;

1055 }

1056

1057 }

1058

1059 #content.maximised {

1060 top: 0;

1061 left: 0;

1062 right: 0;

1063 bottom: 0;

1064 border: 0;

1065 z-index: 1000;

1066 }

1067

1068 #slim_container {

1069 width: 100%;

1070 }

1071

1072 #slim_container_content {

1073 max-width: 50em;

1074 background-color: #FFFFFF;

1075 margin: $lineheight/2 auto;

1076 padding: 3px;

1077 border-radius: 25px;

1078 -moz-border-radius: 25px;

1079 border: 1px solid #e6e6e6;

1080 }

1081

1082 #slim_content {

1083 margin: $lineheight/2;

1084 margin-top: 95px;

1085 max-width: 50em;

1086

1087 .content-heading {

1088 margin-bottom: 15px;

1089 }

1090 }

1091

1092 #slim_header {

1093 margin: 30px $lineheight/2;

1094 position: absolute;

1095 top: 0px;

1096 margin-right: $lineheight/4;

1097 img {

1098 vertical-align: middle;

1099 margin-bottom: $lineheight/4;

1100 margin-right: $lineheight/4;

1101 }

1102 }

1103

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

1105

1106 .content_map {

1107 position: relative;

1108 width: 45%;

1109 height: 400px;

1110 border: 1px solid #ccc;

1111 margin-bottom: $lineheight;

1112 float: right;

1113 }

1114

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

1116

1117 #sidebar .changesets {

1118 li {

1119 padding: $lineheight;

1120 border-bottom: $keyline;

1121 }

1122

1123 p {

1124 padding: 0;

1125 }

1126 }

1127

1128 /* Rules for the data browser */

1129

1130 body.browse #sidebar_content {

1131 .browse-section {

1132 padding: 20px;

1133 border-bottom: 1px solid #CCC;

1134

1135 ul {

1136 margin: 0;

1137 }

1138 }

1139

1140 .browse-field {

1141 margin-bottom: 10px;

1142

1143 h4 {

1144 margin: 0;

1145 padding: 5px 0 5px 10px;

1146 font-size: 12px;

1147 border: 1px solid #CCC;

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

1149 background-color: #F6F6F6;

1150 }

1151

1152 p {

1153 margin: 0;

1154 padding: 7px 10px;

1155 font-size: 12px;

1156 background-color: #FFF;

1157 border: 1px solid #CCC;

1158 border-top: 0;

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

1160 }

1161 }

1162

1163 .browse-tag-list {

1164 border: 1px solid #CCC;

1165 border-radius: 4px;

1166 font-size: 12px;

1167

1168 li {

1169 border-bottom: 1px solid #CCC;

1170 }

1171

1172 li:last-child {

1173 border-bottom: 0;

1174 }

1175

1176 .browse-tag-k,

1177 .browse-tag-v {

1178 display: inline-block;

1179 width: 50%;

1180 height: 30px;

1181 float: left;

1182 padding: 9px 10px;

1183 }

1184

1185 .browse-tag-k {

1186 font-weight: bold;

1187 background-color: #F6F6F6;

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

1189 }

1190

1191 .browse-tag-v {

1192 border-left: 1px solid #CCC;

1193 }

1194 }

1195 }

1196

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

1198

1199 #trace_list {

1200 font-size: $lineheight/2;

1201 border-width: 0px;

1202 text-align: right;

1203

1204 .trace_summary {

1205 font-size: 12px;

1206 color: gray;

1207 }

1208

1209 .trace_pending {

1210 color: red;

1211 }

1212

1213 .trace_public {

1214 color: green;

1215 }

1216

1217 .trace_identifiable {

1218 color: green;

1219 }

1220

1221 .trace_trackable {

1222 color: red;

1223 }

1224

1225 .trace_private {

1226 color: red;

1227 }

1228 }

1229

1230 /* Rules for the user profile page */

1231

1232 #userinformation {

1233

1234 min-height: 100px;

1235 .userinformation-inner {

1236 float: left;

1237 }

1238 h2 {

1239 margin-top: 0;

1240 }

1241 .user-description {

1242 width: 100%;

1243 clear: both;

1244 }

1245 .deemphasize {

1246 margin: 0;

1247 }

1248 }

1249

1250 .admin-user-info small {

1251 margin-bottom: $lineheight/2;

1252 display: inline;

1253 margin-right: $lineheight;

1254 }

1255

1256 .activity-block {

1257 clear: left;

1258 border-bottom: 1px solid #ccc;

1259 padding-bottom: $lineheight;

1260 float: left;

1261 h3 {

1262 margin-bottom: $lineheight/2;

1263 }

1264 }

1265

1266 .contact-activity {

1267 margin-top: $lineheight;

1268 width: 100%;

1269 }

1270

1271 .activity-details p {

1272 margin-left: 70px;

1273 margin-bottom: 0;

1274 }

1275

1276 #friends-container .contact-activity ul {

1277 margin-left: 70px;

1278 }

1279

1280 .user-view {

1281 p#no_home_location {

1282 margin: $lineheight;

1283 }

1284 .user_thumbnail {

1285 margin-top: $lineheight/4;

1286 float: left;

1287 }

1288 }

1289

1290 /* Rules for the user map */

1291

1292 .content_map .leaflet-popup-content {

1293 margin: $lineheight/2;

1294 min-height: 50px;

1295 }

1296

1297 /* Rules for user popups on maps */

1298

1299 .user_popup {

1300 min-width: 200px;

1301 p {

1302 padding: 0 0 5px 0;

1303 margin-top: 0 0 0 60px;

1304 font-size: 12px;

1305 }

1306 img.user_thumbnail {

1307 float: left;

1308 margin: 0 $lineheight/2 0 0;

1309 }

1310 }

1311

1312 /* Rules for the user list */

1313

1314 #user_list {

1315 font-size: $lineheight/2;

1316 width: 100%;

1317

1318 tr {

1319 vertical-align: middle;

1320 }

1321

1322 p {

1323 margin-top: 0px;

1324 margin-bottom: 0px;

1325 }

1326 }

1327

1328 #user_list_actions {

1329 float: right;

1330 margin-top: $lineheight/2;

1331 }

1332

1333 /* Rules for the diary list page */

1334

1335 .diary_entry-list img.user_thumbnail {

1336 float: left;

1337 }

1338

1339 .diary_post {

1340 max-width: 740px;

1341 position: relative;

1342 margin-top: $lineheight/2;

1343 padding-top: $lineheight;

1344 border-top: 1px solid #ccc;

1345

1346 &:first-child {

1347 margin-top: 0;

1348 border-top: 0;

1349 padding-top: 0;

1350 }

1351 h1, h2 {

1352 font-size: 21px;

1353 line-height: 1em;

1354 }

1355 small.deemphasize {

1356 float: left;

1357 display: block;

1358 }

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

1360 }

1361

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

1363 display: inline;

1364 }

1365

1366 #content .post_heading {

1367 margin-bottom: $lineheight;

1368 h2 {

1369 margin-top: 0;

1370 margin-bottom: $lineheight/2;

1371 font-size: 24px;

1372 }

1373 }

1374

1375 /* Rules for the diary entry page */

1376

1377 .diary_entry {

1378 #map {

1379 position: relative;

1380 width: 90%;

1381 height: 400px;

1382 border: 1px solid #ccc;

1383 display: none;

1384 margin-bottom: $lineheight;

1385 }

1386 #newcomment {

1387 border-top: 1px solid #ccc;

1388 padding-top: $lineheight;

1389 margin-top: $lineheight/2;

1390 }

1391 .comments {

1392 max-width: 740px;

1393 }

1394 .diary-comment {

1395 margin-top: $lineheight/2;

1396 border-top: 1px dashed #ccc;

1397 padding-top: $lineheight/2;

1398 &:first-child {

1399 margin-top: $lineheight;

1400 padding-top: $lineheight;

1401 border-top: 1px solid #ccc;

1402 }

1403 p {

1404 margin-bottom: $lineheight/2;

1405 }

1406 .comment-heading {

1407 margin-bottom: 0;

1408 margin-top: 0;

1409 }

1410 }

1411 }

1412

1413 .diary_entry-view img.user_thumbnail {

1414 float: left;

1415 }

1416

1417 /* Rules for the log in page */

1418

1419 #login_openid_buttons {

1420 margin-bottom: 0;

1421 }

1422

1423 #login_openid_buttons li {

1424 float: left;

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

1426 }

1427

1428 /* Rules for the account confirmation page */

1429

1430 .user-terms {

1431 .legale {

1432 border: 1px solid #ccc;

1433 padding: $lineheight;

1434 margin-bottom: $lineheight;

1435 overflow: auto;

1436 height: 10em;

1437 }

1438

1439 #decline {

1440 background: $lightblue;

1441 &:hover {

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

1443 }

1444 }

1445

1446 .form-row {

1447 margin: auto;

1448 max-width: 370px;

1449 }

1450 }

1451

1452 /* Rules for the account settings page */

1453

1454 #accountForm .user_map {

1455 position: relative;

1456 width: 500px;

1457 height: 400px;

1458 border: 1px solid #ccc;

1459 }

1460

1461 #accountForm .user_image {

1462 margin-bottom: 0;

1463 }

1464

1465 #accountForm #user_image {

1466 margin-left: 20px;

1467 }

1468

1469 #accountForm ul.accountImage-options {

1470 margin-left: 120px;

1471 }

1472

1473 .nohome .location {

1474 display: none;

1475 }

1476

1477 #homerow .message {

1478 display: none;

1479 }

1480

1481 .nohome .message {

1482 display: inline !important;

1483 }

1484

1485 .content_map.settings_map {

1486 width: 50%;

1487 float: none;

1488 }

1489

1490 /* Rules for the oauth settings page */

1491

1492 .oauth_clients .buttons .oauth-edit {

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

1494 }

1495

1496 .oauth_clients .buttons .oauth-delete {

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

1498 }

1499

1500 /* Rules for messages pages */

1501

1502 .messages {

1503 width: 100%;

1504 border: 1px solid #ddd;

1505

1506 input[type="submit"] {

1507 margin: auto;

1508 }

1509 tbody tr {

1510 border-top: 1px solid #ccc;

1511 }

1512

1513 .inbox-row {

1514 background: #f8f8ff;

1515 }

1516

1517 .inbox-row-unread {

1518 background:#CBEEA7;

1519 }

1520

1521 .right {

1522 float: right;

1523 }

1524

1525 tr td,

1526 tr th {

1527 padding: $lineheight/4;

1528 }

1529 p:last-child,

1530 h2:last-child,

1531 h3:last-child,

1532 ol:last-child,

1533 ul:last-child {

1534 margin-bottom:0;

1535 }

1536 tr td {

1537 height: 30px;

1538 border-right: 1px solid $lightgrey;

1539 }

1540 }

1541

1542 .inbox-row .inbox-mark-read {

1543 display: none;

1544 }

1545

1546 .info-line {

1547 margin-bottom: $lineheight;

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

1549 border-bottom: 1px solid #ccc;

1550

1551 form, form div {

1552 display: inline;

1553 }

1554 }

1555

1556 .info-line .user_thumbnail_tiny {

1557 vertical-align: middle;

1558 }

1559

1560 .inbox-mark-unread,

1561 .inbox-mark-read,

1562 .inbox-delete {

1563 width: 1%;

1564 }

1565

1566 .inbox-row-unread .inbox-mark-unread {

1567 display: none;

1568 }

1569

1570 .message-read .message-buttons {

1571 margin-top: $lineheight;

1572 padding-top: $lineheight;

1573 border-top: 1px solid $lightgrey;

1574 }

1575

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

1577 border-radius: 0;

1578 }

1579

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

1581

1582 .flash {

1583 padding: $lineheight;

1584 &#error {

1585 background-color: #ff7070;

1586 }

1587 &#warning {

1588 background-color: #ffe0cc;

1589 }

1590 &#notice {

1591 background-color: #CBEEA7;

1592 }

1593 }

1594

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

1596

1597 .field_with_errors {

1598 padding: 2px;

1599 background-color: #ff7070;

1600 display: inline-block;

1601 }

1602

1603 .formError {

1604 display: inline-block;

1605 padding: 5px 10px;

1606 margin-top: 5px;

1607 border-radius: 4px;

1608 font-size: 12px;

1609 color: #fff;

1610 background-color: #ff7070;

1611 }

1612

1613 /* Rules for rails validation error boxes */

1614

1615 #errorExplanation {

1616 width: 400px;

1617 border: 2px solid #ff7070;

1618 padding: 0 $lineheight/2;

1619 margin-bottom: $lineheight;

1620 background-color: #f0f0f0;

1621

1622 h2 {

1623 margin: 0 -10px 10px -10px;

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

1625 font-weight: bold;

1626 font-size: 12px;

1627 background-color: #c00;

1628 color: #fff;

1629 text-align: left;

1630 }

1631

1632 p {

1633 color: #333;

1634 margin-bottom: 0px;

1635 padding: $lineheight/4;

1636 }

1637

1638 ul {

1639 padding-left: $lineheight;

1640

1641 li {

1642 font-size: 12px;

1643 list-style: disc;

1644 }

1645 }

1646 }

1647

1648 /* Rules for forms */

1649

1650 .standard-form {

1651 fieldset {

1652 margin-bottom: $lineheight;

1653 }

1654 label.standard-label {

1655 display: block;

1656 margin-bottom: $lineheight/4;

1657 font-size: $typeheight;

1658 font-weight: bold;

1659 line-height: 1.5;

1660 }

1661 label.standard-label.secondary {

1662 display: inline-block;

1663 font-weight: normal;

1664 }

1665 .form-help {

1666 font-weight: normal;

1667 }

1668 .form-column {

1669 float: left;

1670 margin-right: 20px;

1671 }

1672 .form-divider {

1673 margin-top: $lineheight;

1674 padding-top: $lineheight;

1675 border-top: 1px solid $lightgrey;

1676 }

1677 .horizontal-list .form-row {

1678 float: left;

1679 padding-right: 10px;

1680 }

1681 .form-row {

1682 margin-bottom: $lineheight/2;

1683 }

1684 .form-list {

1685 margin-bottom: 0;

1686 }

1687 .form-list li {

1688 margin-bottom: 5px;

1689 }

1690 input[type="checkbox"],

1691 input[type="radio"] {

1692 float: left;

1693 margin-top: 5px;

1694 }

1695 }

1696

1697 #remember_me_openid {

1698 display: block;

1699 }

1700

1701 input[type="checkbox"],

1702 input[type="radio"] {

1703 margin-right: 5px;

1704 }

1705

1706 input[type="text"],

1707 input[type="email"],

1708 input[type="url"],

1709 input[type="password"],

1710 textarea {

1711 border: 1px solid #ccc;

1712 padding: 2px 5px;

1713 margin: 0;

1714 width: 200px;

1715 }

1716

1717 textarea {

1718 padding: 5px;

1719 width: 100%;

1720 }

1721

1722 /* Rules for user images */

1723

1724 img.user_image {

1725 max-width: 100px;

1726 max-height: 100px;

1727 border: 1px solid #ccc;

1728 margin-bottom: $lineheight;

1729 float: left;

1730 margin-right: $lineheight;

1731 }

1732

1733 img.user_thumbnail {

1734 max-width: 50px;

1735 max-height: 50px;

1736 border: 1px solid #ccc;

1737 margin-right: $lineheight;

1738 }

1739

1740 img.user_thumbnail_tiny {

1741 max-width: 25px;

1742 max-height: 25px;

1743 border: 1px solid #ccc;

1744 }

1745

1746 /* Rules for geo microformats */

1747

1748 abbr.geo {

1749 border-bottom: none;

1750 }

1751

1752 /* Rules for RSS buttons */

1753

1754 .rsssmall {

1755 position: relative;

1756 top: 5px;

1757 }

1758

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

1760

1761 ul.secondary-actions {

1762 font-style: normal;

1763 margin-bottom: 0;

1764 margin-left: 0;

1765 &.pager {

1766 display: inline-block;

1767 margin-right: 60px;

1768 }

1769 > li {

1770 display: block;

1771 float: left;

1772 list-style: none;

1773 border-left: 1px solid #ccc;

1774 padding-left: $lineheight/4;

1775 margin-right: $lineheight/4;

1776 &:first-child {

1777 border-left: 0;

1778 padding-left: 0;

1779 }

1780 &:last-child {

1781 margin-right: 0px;

1782 }

1783 }

1784 }

1785

1786 /* Utility for managing inner content areas */

1787

1788 .inner22 { padding: $lineheight;}

1789

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

1791

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

1793

1794 .inner20 { padding: $lineheight 0;}

1795

1796 .inner02 { padding: 0 $lineheight;}

1797

1798 /* Utility for general button styles */

1799

1800 input[type="button"],

1801 input[type="submit"],

1802 input[type="reset"],

1803 a.button {

1804 cursor: pointer;

1805 border: 0;

1806 display: inline-block;

1807 line-height: 20px;

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

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

1810 min-width: 120px;

1811 margin: 0 0 $lineheight/2 0;

1812 color: white;

1813 background: $blue;

1814 text-align: center;

1815 border-radius: 2px;

1816 -moz-border-radius: 2px;

1817 &:hover {

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

1819 text-decoration: none;

1820 }

1821 &.deemphasize {

1822 background: $lightblue;

1823 &:hover {

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

1825 }

1826 }

1827 &:disabled {

1828 background: $lightgrey;

1829 &:hover {

1830 background: $lightgrey;

1831 }

1832 }

1833 &:last-child {

1834 margin-bottom: 0;

1835 }

1836 }

1837

1838 .buttons {

1839 min-width: 200px;

1840 input[type="submit"],

1841 input[type="button"],

1842 input[type="reset"],

1843 .button {

1844 box-sizing: border-box;

1845 float: left;

1846 border-radius: 0;

1847 margin:0;

1848 min-width: 100px;

1849 max-width: 180px;

1850 border-right:1px solid white;

1851 text-overflow: ellipsis;

1852 white-space: nowrap;

1853 overflow: hidden;

1854 }

1855 input:first-child,

1856 .button:first-child {

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

1858 }

1859 input:last-child,

1860 .button:last-child {

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

1862 border-right-width: 0;

1863 }

1864 input:only-child,

1865 .button:only-child,

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

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

1868 border-radius:2px;

1869 border-right-width: 0;

1870 }

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

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

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

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

1875 border-right-width: 0;

1876 }

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

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

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

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

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

1882 }

1883 }

1884

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

1886

1887 .table0,

1888 .item0 {

1889 background: $offwhite;

1890 }

1891

1892 .table1,

1893 .item1 {

1894 background: #fff;

1895 }

1896

1897 /* Rules for OpenID logo */

1898

1899 .openid_logo {

1900 vertical-align: text-bottom;

1901 border: 0;

1902 }

1903

1904 /* Rules for rich text */

1905

1906 .richtext,

1907 .prose {

1908 h1, h2 {

1909 padding-bottom: $lineheight/2;

1910 border-bottom: 1px dashed #cccccc;

1911 margin-bottom: $lineheight/2;

1912 }

1913

1914 h1 {

1915 font-size: 24px;

1916 }

1917

1918 h2 {

1919 font-size: 18px;

1920 }

1921

1922 h3 {

1923 font-size: $typeheight;

1924 }

1925

1926 code {

1927 font-size: 13px;

1928 background: #e8e8e8;

1929 padding: 2px 3px;

1930 }

1931

1932 pre {

1933 font-size: 13px;

1934 background: #e8e8e8;

1935 padding: 2px 3px;

1936

1937 code {

1938 padding: 0;

1939 }

1940 }

1941

1942 img {

1943 padding: $lineheight;

1944 background-color: $offwhite;

1945 display: block;

1946 max-width: 100%;

1947 margin: auto;

1948 }

1949

1950 blockquote {

1951 border-left: $lineheight solid $offwhite;

1952 padding-left: $lineheight;

1953 margin: 0;

1954 color: #7E7E7E;

1955 }

1956

1957 ul, ol {

1958 padding-left: $lineheight;

1959 margin-bottom: $lineheight;

1960 margin-left: $lineheight;

1961 }

1962

1963 ul li {

1964 list-style: disc;

1965 }

1966

1967 ol li {

1968 list-style: decimal;

1969 }

1970 }

1971

1972 .diary_post .richtext {

1973 margin-top: $lineheight;

1974 }

1975

1976 .comments .richtext {

1977 margin-left: 70px;

1978 margin-top: 0;

1979 }

1980

1981 /* Rules for rich text editors */

1982

1983 .richtext_container {

1984 margin-bottom: $lineheight;

1985

1986 .richtext_content {

1987 width: 50%;

1988 display: inline-block;

1989 vertical-align: top;

1990

1991 .richtext_preview {

1992 display: inline-block;

1993 padding: $lineheight;

1994 background-color: $offwhite;

1995 overflow-x: auto;

1996

1997 &.loading {

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

1999 background-repeat: no-repeat;

2000 background-position: center;

2001 }

2002

2003 > :first-child {

2004 margin-top: 0px;

2005 }

2006 }

2007 }

2008

2009 .richtext_help {

2010 display: inline-block;

2011 vertical-align: top;

2012 margin-left: 15px;

2013 background-color: #f8f8ff;

2014 padding: $lineheight/2;

2015 width: 220px;

2016

2017 ul {

2018 margin-bottom: 0;

2019 }

2020

2021 h4.heading, li {

2022 border-bottom: 1px solid #ccc;

2023 margin-bottom: $lineheight/4;

2024 padding-bottom: $lineheight/4;

2025 }

2026

2027 li h4, li span, li p {

2028 display: inline-block;

2029 vertical-align: top;

2030 font-size: 11px;

2031 }

2032

2033 li h4 {

2034 width: 40%;

2035 margin: 0;

2036 }

2037

2038 li span, li p {

2039 width: 50%;

2040 margin-left: $lineheight/2;

2041 margin-bottom: $lineheight/4;

2042 white-space: nowrap;

2043 }

2044 }

2045 }

2046

2047 /* Rules for the user notes list */

2048

2049 .note_list {

2050 tr.creator {

2051 background-color: #eeeeee;

2052 }

2053

2054 td {

2055 padding: 3px;

2056 }

2057

2058 p {

2059 margin-bottom: 0px;

2060 }

2061 }

2062

2063 /* Rules for the notes interface */

2064

2065 .leaflet-popup-content .note {

2066 padding-top: $lineheight/2;

2067 }

2068

2069 .leaflet-popup-content .note {

2070 h2 {

2071 margin-bottom: $lineheight/2;

2072 }

2073

2074 div {

2075 margin-top: $lineheight/2;

2076 }

2077

2078 .permalink {

2079 position: absolute;

2080 top: $lineheight/4;

2081 left: $lineheight/4;

2082 min-width: 15px;

2083 min-height: 15px;

2084 }

2085

2086 .permalink span {

2087 display: none;

2088 padding-left: $lineheight;

2089 }

2090

2091 .permalink:hover span {

2092 display: block;

2093 }

2094

2095 .warning {

2096 display: block;

2097 background-color: #ffe0cc;

2098 padding: 4px 6px;

2099 margin-bottom: $lineheight/2;

2100 }

2101

2102 .comment_body {

2103 margin-top: 2px;

2104 margin-bottom: 2px;

2105

2106 p {

2107 margin-top: 0px;

2108 margin-bottom: 0px;

2109 }

2110 }

2111

2112 .comment {

2113 width: 100%;

2114 height: 100px;

2115 }

2116

2117 .buttons {

2118 margin-top: $lineheight/4;

2119 text-align: right;

2120 }

2121 }

2122

2123 /*

2124 * Rules for the iD editor

2125 */

2126

2127 .id-embed {

2128 width: 100%;

2129 height: 100%;

2130 }

2131

2132 /* Rules for rotating sidebar ads */

2133 .ad-container {

2134 display: block;

2135 height: 120px;

2136 margin: auto;

2137 overflow: hidden;

2138 position: relative;

2139 border-bottom: 1px solid #ccc;

2140

2141 a {

2142 display: block;

2143 width: 165px;

2144 margin: auto;

2145 }

2146

2147 .ad {

2148 height: 100px;

2149 border: 0;

2150 background: #fff;

2151 }

2152 }

2153

2154 /* Rules for dropdown menus */

2155

2156 .dropdown {

2157 position: relative;

2158 }

2159

2160 .dropdown-toggle {

2161 *margin-bottom: -3px;

2162 }

2163

2164 .dropdown-toggle:active,

2165 .open .dropdown-toggle {

2166 outline: 0;

2167 }

2168

2169 .caret {

2170 display: inline-block;

2171 width: 0;

2172 height: 0;

2173 vertical-align: top;

2174 border-top: 4px solid #000000;

2175 border-right: 4px solid transparent;

2176 border-left: 4px solid transparent;

2177 content: "";

2178 }

2179

2180 .dropdown .caret {

2181 margin-top: 8px;

2182 margin-left: 2px;

2183 }

2184

2185 .dropdown-menu {

2186 position: absolute;

2187 top: 100%;

2188 left: 0;

2189 z-index: 1000;

2190 display: none;

2191 float: left;

2192 min-width: 160px;

2193 padding: 5px 0;

2194 margin: 0;

2195 list-style: none;

2196 background-color: #ffffff;

2197 border: 1px solid #ccc;

2198 *border-right-width: 2px;

2199 *border-bottom-width: 2px;

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

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

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

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

2204 -moz-background-clip: padding;

2205 background-clip: padding-box;

2206 }

2207

2208 .dropdown-menu.pull-right {

2209 right: 0;

2210 left: auto;

2211 }

2212

2213 .dropdown-menu .divider {

2214 *width: 100%;

2215 height: 1px;

2216 margin: 9px 1px;

2217 *margin: -5px 0 5px;

2218 overflow: hidden;

2219 background-color: #e5e5e5;

2220 border-bottom: 1px solid #ffffff;

2221 }

2222

2223 .dropdown-menu > li > a {

2224 display: block;

2225 padding: 3px 10px;

2226 clear: both;

2227 font-weight: normal;

2228 line-height: 20px;

2229 color: #333333;

2230 white-space: nowrap;

2231 }

2232

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

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

2235 .dropdown-submenu:hover > a,

2236 .dropdown-submenu:focus > a {

2237 color: #ffffff;

2238 text-decoration: none;

2239 background-color: $green;

2240 }

2241

2242 .dropdown-menu > .active > a,

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

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

2245 color: #ffffff;

2246 text-decoration: none;

2247 background-color: $green;

2248 outline: 0;

2249 }

2250

2251 .dropdown-menu > .disabled > a,

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

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

2254 color: #999999;

2255 }

2256

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

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

2259 text-decoration: none;

2260 cursor: default;

2261 background-color: transparent;

2262 background-image: none;

2263 }

2264

2265 .open {

2266 *z-index: 1000;

2267 }

2268

2269 .open > .dropdown-menu {

2270 display: block;

2271 }

2272

2273 .dropdown-backdrop {

2274 position: fixed;

2275 top: 0;

2276 right: 0;

2277 bottom: 0;

2278 left: 0;

2279 z-index: 990;

2280 }

2281

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

2283 .site-welcome {

2284 .center {

2285 text-align: center;

2286 .sprite {

2287 float: none;

2288 margin: auto;

2289 }

2290 }

2291

2292 .sprite {

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

2294 background-size: 500px 250px;

2295 display: block;

2296 float: left;

2297 }

2298

2299 .icon-list {

2300 padding-bottom: 20px;

2301 div {

2302 margin-bottom: 10px;

2303 p {

2304 padding-top: 10px;

2305 }

2306 }

2307 }

2308 .sprite.small {

2309 width: 50px;

2310 height: 50px;

2311 }

2312

2313 .sprite.x {

2314 background-position: -50px 0;

2315 }

2316

2317 .sprite.term {

2318 margin-right: 10px;

2319 vertical-align: middle;

2320 }

2321

2322 .sprite.node {

2323 background-position: -100px 0;

2324 }

2325

2326 .sprite.way {

2327 background-position: -150px 0;

2328 }

2329

2330 .sprite.tag {

2331 background-position: -200px 0;

2332 }

2333

2334 .sprite.editor {

2335 background-position: -250px 0;

2336 }

2337

2338 .sprite.question {

2339 background-position: -300px 0;

2340 }

2341

2342 .start-mapping {

2343 margin: auto;

2344 cursor: pointer;

2345 border: none;

2346 padding: 20px 40px;

2347 font-size: 30px;

2348 text-decoration: none;

2349 }

2350

2351 .note-box {

2352 margin-top: 20px;

2353 background-color: $offwhite;

2354 }

2355

2356 .icon.note {

2357 background-color: #333;

2358 border-radius: 4px;

2359 }

2360 }

2361

2362 .site-about #content {

2363 background-color: #000;

2364 background-position: 50% 50%;

2365 background-repeat: no-repeat;

2366 background-size: cover;

2367 background-attachment: fixed;

2368

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

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

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

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

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

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

2375

2376 .caption {

2377 max-width: 200px;

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

2379 position: fixed;

2380 text-align: right;

2381 right: 20px;

2382 bottom: 60px;

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

2384 color: #fff;

2385 display: none;

2386 }

2387

2388 .caption a {

2389 color: white;

2390 white-space: nowrap;

2391 text-decoration: none;

2392 }

2393

2394 a.next {

2395 display: block;

2396 position: fixed;

2397 right: 10px;

2398 bottom: 10px;

2399 width: 40px;

2400 height: 40px;

2401 border-radius: 5px;

2402 text-indent: -9999px;

2403 overflow: hidden;

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

2405 background-color: #000;

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

2407 }

2408

2409 #content-body {

2410 display: block;

2411 position: relative;

2412 margin: auto;

2413 color: #333;

2414 width: 50%;

2415 min-width: 320px;

2416 max-width: 640px;

2417

2418 .section {

2419 margin-bottom: 30px;

2420 }

2421

2422 .section:last-child {

2423 margin-bottom: 0;

2424 }

2425 }

2426

2427 .text {

2428 background: white;

2429 padding: 40px;

2430 }

2431

2432 .attr {

2433 position: relative;

2434 padding: 170px 20px 20px 20px;

2435 background: #333;

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

2437 margin-bottom: 0;

2438

2439 strong {

2440 display: block;

2441 color: white;

2442 font-size: 25px;

2443 span {

2444 color: #76c551;

2445 }

2446 }

2447

2448 .user-image {

2449 position: absolute;

2450 top: 0px;

2451 right: 240px;

2452 left: 0px;

2453 height: 150px;

2454 background-position: 0 50%;

2455 background-repeat: no-repeat;

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

2457 background-size: cover;

2458 background-color: #76c551;

2459 }

2460

2461 .byosm {

2462 position: absolute;

2463 top: 0px;

2464 right: 0px;

2465 z-index: 1;

2466 width: 240px;

2467 height: 150px;

2468 padding: 20px 20px 20px 40px;

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

2470 white-space: nowrap;

2471 color: #fff;

2472 background: #76c551

2473 }

2474

2475 .byosm span {

2476 display: inline-block;

2477 width: 25px;

2478 margin-left: -25px;

2479 }

2480 }

2481

2482 h2 {

2483 margin-bottom: 10px;

2484 }

2485

2486 .icon {

2487 width: 30px;

2488 height: 30px;

2489 margin-right: 10px;

2490 vertical-align: middle;

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

2492

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

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

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

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

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

2498 }

2499 }