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

1 @import "parameters";

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

5 /* Minimal CSS reset */

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

8 margin: 0;

9 padding: 0;

10 border: 0;

11 font-size:100%;

12 }

14 fieldset,img { border: 0; }

16 legend { color: #000; }

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

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

22 table {

23 border-collapse: collapse;

24 border-spacing: 0;

25 }

27 li { list-style: none; }

29 input,

30 select,

31 textarea,

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

34 abbr, acronym {

35 border-bottom: .1em dotted;

36 cursor: help;

37 }

39 strong {

40 font-weight: bold;

41 font-weight: 500;

42 }

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

46 .clearfix:before,

47 .clearfix:after {

48 content: " ";

49 display: table;

50 }

52 .clearfix:after {

53 clear: both;

54 }

56 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

70 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

86 .fillL { background-color: white; }

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

90 * {

91 -webkit-box-sizing: border-box;

92 -moz-box-sizing: border-box;

93 box-sizing: border-box;

94 }

96 body {

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

98 font-size: $typeheight;

99 line-height: 1.6666;

100 color: #222;

101 background-color: #fff;

102 margin: 0px;

103 padding: 0px;

104 text-align: left;

105 height: 100%;

106 }

107

108 body.slim {

109 background-color: #f0f0f0;

110 }

111

112 h1, h2, h3 {

113 font-weight: bold;

114 font-weight: 500;

115 line-height: 1.2;

116 }

117

118 h4, h5 {

119 font-weight: bold;

120 font-weight: 500;

121 }

122

123 h1 {

124 font-size: 18px;

125 }

126

127 h2, h3 {

128 font-size: 16px;

129 }

130

131 p > img {

132 width: auto;

133 max-width: 100%;

134 }

135

136 small, aside {

137 font-size: 12px;

138 }

139

140 #container { position: relative; }

141

142 .column-1 {

143 width: 50%;

144 margin: 0 0 $lineheight/2 0;

145 }

146

147 .small_icon {

148 vertical-align: middle;

149 margin-right: $lineheight/4;

150 }

151

152 .red { color: $red; }

153

154 /* Rules for icons */

155

156 .icon {

157 display:inline-block;

158 vertical-align:top;

159 width:20px;

160 height:20px;

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

162 text-indent:-9999px;

163 overflow:hidden;

164 }

165

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

182

183 /* Rules for links */

184

185 a {

186 color: #24d;

187 text-decoration: none;

188 -webkit-appearance: none;

189 outline: 0;

190 &:hover {

191 text-decoration: underline;

192 }

193 }

194

195 /* Rules for horizontal lines */

196

197 hr {

198 border: none;

199 background-color: #ccc;

200 color: #ccc;

201 height: 1px;

202 }

203

204 /* General styles for tables */

205

206 table {

207 width: 100%;

208 margin-bottom: $lineheight;

209 th, td {

210 text-align: left;

211 padding: $lineheight/4;

212 line-height: $lineheight;

213 }

214 th {

215 font-weight: bold;

216 font-weight: 500;

217 vertical-align: top;

218 }

219 td {

220 vertical-align: middle;

221 }

222 }

223

224 /* Utility for de-emphasizing content */

225

226 .deemphasize {

227 color: #999;

228 a {

229 color: $blue;

230 }

231 }

232

233 /* Rules for the header */

234

235 #menu-icon {

236 display: none !important;

237 float: right;

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

239 background-size: 30px 30px;

240 display: block;

241 width: 30px;

242 height: 30px;

243 margin: 14px 10px 0 0;

244 opacity: 0.6;

245 }

246

247 header {

248 height: $headerHeight;

249 position: relative;

250 z-index: 1001;

251 font-size: 14px;

252

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

254 display: inline-block;

255 }

256

257 > * {

258 height: 100%;

259 padding: $lineheight/2;

260 }

261

262 h1, nav.primary {

263 float: left;

264 }

265

266 a, a:hover {

267 text-decoration: none;

268 }

269

270 img.logo {

271 width: 30px;

272 height: 30px;

273 margin-top: -2px;

274 vertical-align: middle;

275 }

276

277 h1 {

278 margin: 0;

279 padding-top: 15px;

280

281 a {

282 color: #000;

283 }

284 }

285 }

286

287 nav.primary {

288 > ul {

289 $border: 1px solid $green;

290

291 border: $border;

292 border-radius: $border-radius;

293

294 > li {

295 border-right: $border;

296 float: left;

297 &:last-child {

298 border-right: 0;

299 }

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

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

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

303 &.dropdown {

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

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

306 }

307 }

308 }

309

310 a.tab,

311 .dropdown-toggle {

312 display: inline-block;

313 font-weight: bold;

314 font-weight: 500;

315 color: $green;

316 padding: 5px 15px;

317 }

318

319 .dropdown-toggle {

320 padding: 5px 6px;

321 }

322

323 .caret {

324 border-top-color: $green;

325 margin-top: 10px;

326 }

327

328 .disabled a {

329 color: #ccc;

330 cursor: default;

331

332 .caret {

333 border-top-color: #ccc;

334 }

335 }

336

337 > ul li.current {

338 background-color: $green;

339

340 .tab {

341 color: #fff;

342 }

343

344 .caret {

345 border-top-color: #fff;

346 }

347 }

348 }

349

350 nav.secondary {

351 position: absolute;

352 right: 0;

353

354 > ul {

355 vertical-align: middle;

356 a, .dropdown-toggle {

357 display: inline-block;

358 text-decoration: none;

359 color: $darkgrey;

360 padding: 3px 5px 5px 5px;

361

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

363 }

364 }

365

366 > ul li.current a {

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

368 }

369

370 .user-menu {

371 $border: 1px solid $grey;

372 border: $border;

373 border-radius: $border-radius;

374 margin-left: 10px;

375

376 > li {

377 border-right: $border;

378 float: left;

379 &:last-child {

380 border-right: 0;

381

382 > a {

383 border-radius: 0 $border-radius $border-radius 0;

384 }

385 }

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

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

388 }

389

390 a {

391 padding: 5px 15px;

392

393 }

394

395 &.logged-in > a {

396 padding: 0;

397 > .user-button {

398 line-height: 1.8;

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

400 display: inline-block;

401 color: $darkgrey;

402 }

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

404 }

405 }

406

407 .caret {

408 border-top-color: $grey;

409 margin-top: 9px;

410 }

411

412 img.user_thumbnail_tiny {

413 border: 0;

414 vertical-align: top;

415 margin-top: 0px;

416 margin: 4px 0 0 4px;

417 border-radius: 2px;

418 }

419

420 #inboxanchor {

421 display: inline-block;

422 vertical-align: top;

423 height: 25px;

424 margin: 3px 0 3px 3px;

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

426 line-height: 20px;

427 border-radius: 2;

428 }

429

430 .dropdown-menu {

431 left: auto;

432 right: -1px;

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

434

435 .count-number {

436 float: right;

437 padding: 0 5px;

438 margin: 0;

439 }

440 }

441 }

442

443 #compact-secondary-nav {

444 display: none;

445 ul li a {

446 width: 100%;

447 color: #333;

448 &:hover { color: #fff; }

449 }

450 }

451

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

453 #compact-secondary-nav {

454 display: inline-block;

455 }

456 .compact-hide {

457 display: none;

458 }

459 }

460

461 /* Utility for styling notification numbers */

462

463 .count-number {

464 padding: 2px $lineheight/4;

465 border-radius: 2px;

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

467 margin: 0 2px;

468 font-size: 11px;

469 color: #333;

470 }

471

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

473

474 #noscript {

475 z-index: 20000000;

476 position: absolute;

477 top: 15px;

478 left: 15px;

479 }

480

481 /* Rules for bootstrap tooltips */

482

483 .tooltip {

484 position: absolute;

485 display: none;

486 color: #333;

487 text-align: left;

488 font-size: 12px;

489 max-width: 250px;

490 }

491

492 .tooltip.in {

493 opacity: 0.8;

494 z-index: 1030;

495 height: auto;

496 display: block;

497 }

498

499 .tooltip.top {

500 margin-top: -10px;

501 text-align: center;

502 }

503

504 .tooltip.right {

505 margin-left: 10px;

506 }

507

508 .tooltip.bottom {

509 margin-top: 10px;

510 text-align: center;

511 }

512

513 .tooltip.left {

514 margin-left: -10px;

515 text-align: right;

516 }

517

518 .tooltip-inner {

519 display: inline-block;

520 padding: 10px;

521 font-weight: normal;

522 background-color: white;

523 }

524

525 .tooltip-arrow {

526 position: absolute;

527 width: 0;

528 height: 0;

529 border-color: transparent;

530 border-style: solid;

531 }

532

533 .tooltip.top .tooltip-arrow {

534 bottom: -5px;

535 left: 50%;

536 margin-left: -5px;

537 border-top-color: white;

538 border-width: 5px 5px 0;

539 }

540

541 .tooltip.right .tooltip-arrow {

542 top: 50%;

543 left: -5px;

544 margin-top: -5px;

545 border-right-color: white;

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

547 }

548

549 .tooltip.left .tooltip-arrow {

550 top: 50%;

551 right: -5px;

552 margin-top: -5px;

553 border-left-color: white;

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

555 }

556

557 .tooltip.bottom .tooltip-arrow {

558 top: -5px;

559 left: 50%;

560 margin-left: -5px;

561 border-bottom-color: white;

562 border-width: 0 5px 5px;

563 }

564

565 /* Rules for Leaflet maps */

566

567 .leaflet-control .control-button {

568 display: block;

569 height: 40px;

570 width: 40px;

571 background-color: #333;

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

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

574 margin-bottom: 10px;

575 outline: none;

576

577 &:hover {

578 background-color: black;

579 }

580

581 &.active {

582 background-color: #9ed485;

583 }

584

585 &.disabled {

586 background-color: #333;

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

588 cursor: default;

589 }

590

591 .icon {

592 margin: 10px;

593 }

594 }

595

596 .leaflet-control .zoomin,

597 .control-layers .control-button {

598 margin-bottom: 0px;

599 border-radius: 4px 0 0 0;

600 }

601

602 .leaflet-control .zoomout,

603 .control-key .control-button {

604 margin-bottom: 0;

605 border-radius: 0;

606 }

607

608 .control-locate .control-button,

609 .control-share .control-button {

610 border-radius: 0 0 0 4px;

611 }

612

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

614

615 .map-layout {

616 #content {

617 overflow: hidden;

618 position: absolute;

619 top: $headerHeight;

620 bottom: 0;

621 width: 100%;

622 }

623

624 #sidebar, #map {

625 position: relative;

626 height: 100%;

627 overflow-x: hidden;

628 overflow-y: auto;

629 }

630

631 #sidebar {

632 float: left;

633 width: $sidebarWidth;

634 background: #fff;

635 font-size: 13px;

636

637 h2 {

638 padding: $lineheight $lineheight $lineheight/2;

639 }

640

641 h3, h4 {

642 margin-top: $lineheight;

643 margin-bottom: $lineheight/2;

644 }

645

646 .icon.close {

647 float: right;

648 cursor: pointer;

649 }

650 }

651

652 .overlay-sidebar #sidebar {

653 position: absolute;

654 z-index: 1000;

655 height: auto;

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

657 overflow: hidden;

658 }

659

660 .welcome {

661 p {

662 padding: $lineheight/2 $lineheight $lineheight;

663 font-size: 110%;

664 font-weight: normal;

665 font-weight: 300;

666 }

667

668 .button {

669 width: 50%;

670 float: left;

671 margin: 0;

672 border-radius: 0;

673 font-weight: normal;

674 padding: .6em;

675

676 &.learn-more {

677 border-right: 1px solid #fff;

678 }

679 }

680 }

681

682 #map {

683 height: 100%;

684 overflow: hidden;

685 }

686

687 #map-ui {

688 display: none;

689 position: relative;

690 float: right;

691 width: 250px;

692 height: 100%;

693 background: white;

694 overflow: auto;

695

696 .section {

697 border-bottom: 1px solid #DDD;

698 padding: 10px 20px;

699 }

700

701 a.close-button {

702 float: right;

703 padding:5px;

704 font-size:20px;

705 line-height:10px;

706 color:#222;

707 border:1px solid #ddd;

708 }

709

710 .tooltip {

711 opacity: 1;

712 border: 1px solid #ccc;

713 .tooltip-arrow {

714 border-top-color: #ccc;

715 }

716 }

717 }

718 }

719

720 .layers-ui,

721 .share-ui {

722 li:last-child {

723 margin-bottom: 0;

724 }

725 }

726

727 .layers-ui {

728 .base-layers {

729 .leaflet-container {

730 width: 100%;

731 height: 50px;

732 cursor: pointer;

733 }

734

735 li {

736 overflow: hidden;

737 border-radius: 3px;

738 border: 2px solid #fff;

739 margin-bottom: 8px;

740 position: relative;

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

742

743 label {

744 position: absolute;

745 top: 0;

746 left: 0;

747 padding: 2px 6px;

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

749 cursor: pointer;

750 font-weight: bold;

751 font-weight: 500;

752 font-size: 16px;

753 text-stroke: 2px #fff;

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

755 z-index: 2; // For IE9

756 input[type="radio"] {

757 display: none;

758 }

759 }

760

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

762 &:hover {

763 border-color: $grey;

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

765 }

766 }

767 }

768

769 .overlay-layers {

770 p {

771 font-size: 13px;

772 margin-bottom: 8px;

773 }

774 li.disabled { color: #999; }

775 }

776 }

777

778 .share-ui {

779 .share-tabs {

780 margin-bottom: 10px;

781

782 a {

783 color: #fff;

784 text-decoration: none;

785 background-color: $lightblue;

786 padding: 5px 10px;

787 }

788

789 a:first-child {

790 border-right: 1px solid #fff;

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

792 }

793

794 a:last-child {

795 border-left: 1px solid #fff;

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

797 }

798

799 a.active {

800 background-color: $blue;

801 }

802 }

803

804 .share-tab {

805 display: none;

806 }

807

808 .share-link {

809 input[type=text],

810 textarea {

811 width: 100%;

812 font-family: monospace;

813 font-size: small;

814 line-height: 1.3;

815 }

816 }

817

818 .share-image {

819 label {

820 margin-right: 10px;

821 }

822 }

823

824 #embed_html {

825 resize: vertical;

826 }

827

828 #mapnik_scale {

829 width: 100px;

830 }

831 }

832

833 .leaflet-top {

834 top: $lineheight/2 !important;

835 .leaflet-control {

836 margin-right: 0px !important;

837 margin-top: 0px !important;

838 }

839 }

840

841 .leaflet-popup-scrolled {

842 padding-right: $lineheight;

843 border-bottom: 0px !important;

844 border-top: 0px !important;

845 }

846

847 .leaflet-popup-content-wrapper {

848 border-radius: 4px !important;

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

850 }

851

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

853

854 #attribution {

855 display: none;

856 }

857

858 .attribution_license,

859 .attribution_project {

860 text-align: left;

861 }

862

863 .attribution_notice {

864 text-align: center;

865 }

866

867 .donate-attr { color: darken($green, 10%) !important; }

868

869 /* Rules for the sidebar */

870

871 .sidebar_heading {

872 position: relative;

873 padding: $lineheight/2 $lineheight;

874 // background: $offwhite;

875 // border-bottom: 1px solid #ccc;

876 > .close {

877 float: right;

878 margin-top: 2px;

879 cursor: pointer;

880 }

881 }

882

883 #browse_status {

884 p {

885 padding: $lineheight;

886 }

887 }

888

889 #sidebar {

890 #sidebar_loader,

891 .loader,

892 .load_more {

893 text-align: center;

894 margin: $lineheight auto;

895 width: 40px;

896 display: block;

897 }

898 }

899

900 /* Rules for the search box */

901

902 header .search_form {

903 display: none;

904 }

905

906 .search_form {

907 position: relative;

908 padding: $lineheight/2;

909 background-color: $lightgrey;

910

911 .query_wrapper {

912 position: relative;

913 overflow: hidden;

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

915 }

916

917 input[type=text] {

918 width: 100%;

919 height: 30px;

920 border-right: none;

921

922 transition: 300ms linear;

923 -webkit-transition: 300ms linear;

924 -moz-transition: 300ms linear;

925 }

926

927 input:focus {

928 outline: none;

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

930 }

931

932 input[type=submit] {

933 float: right;

934 width: auto;

935 min-width: 0;

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

937 }

938

939 .describe_location {

940 position: absolute;

941 top: 6px;

942 right: 6px;

943 font-size: 10px;

944 color: $blue;

945 }

946 }

947

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

949

950 #mapkey {

951 .mapkey-table-key img {

952 display: block;

953 margin-left: auto;

954 margin-right: auto;

955 }

956 td {

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

958 }

959 }

960

961 /* Rules for search sidebar */

962

963 .search_results_entry {

964 ul li {

965 border-bottom: $keyline;

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

967 }

968

969 .search_details {

970 display: block;

971 float: right;

972 text-align: right;

973 margin-top: 0.2em;

974 margin-left: 0.5em;

975 }

976 }

977

978 .search_results_error {

979 color: #f00;

980 }

981

982 /* Rules for entity history */

983

984 #sidebar_content {

985 .browse_details {

986 position: relative;

987 border-bottom: $keyline;

988 }

989 }

990

991 .browse_status {

992 display: none;

993 }

994

995 /* Rules for the history sidebar */

996

997 #sidebar .changesets {

998 li {

999 padding: 15px 20px;

1000 border-bottom: 1px solid #ddd;

1001 cursor: pointer;

1002

1003 &.selected { background: #FFFFE6; }

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

1005 }

1006

1007 h4 {

1008 margin: 0;

1009 a {

1010 color: #000;

1011 }

1012 }

1013 }

1014

1015 /* Rules for the browse sidebar */

1016

1017 #sidebar_content {

1018 .browse-section {

1019 padding: $lineheight/2 $lineheight;

1020 border-bottom: 1px solid #ddd;

1021

1022 h4:first-child {

1023 margin-top: 0;

1024 }

1025 }

1026

1027 :last-child {

1028 border-bottom: none;

1029 }

1030

1031 .paginate {

1032 float: right;

1033 padding: 1px 6px;

1034 border: 1px solid #eee;

1035 border-radius: 3px;

1036 }

1037

1038 .paginate ul {

1039 padding-left: 20px;

1040 }

1041

1042 .browse-field {

1043 margin-bottom: 10px;

1044

1045 h4 {

1046 padding: 5px 0 5px 10px;

1047 font-size: 12px;

1048 border: 1px solid #CCC;

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

1050 background-color: #F6F6F6;

1051 }

1052

1053 p {

1054 padding: 7px 10px;

1055 font-size: 12px;

1056 background-color: #FFF;

1057 border: 1px solid #CCC;

1058 border-top: 0;

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

1060 }

1061 }

1062

1063 .browse-tag-list {

1064 background-color: #F6F6F6;

1065 border: 1px solid #ddd;

1066 border-radius: 3px;

1067 font-size: 12px;

1068

1069 li {

1070 border-bottom: 1px solid #ddd;

1071 }

1072

1073 li:last-child {

1074 border-bottom: 0;

1075 }

1076

1077 .browse-tag-k,

1078 .browse-tag-v {

1079 display: inline-block;

1080 width: 50%;

1081 float: left;

1082 padding: 6px 10px;

1083 }

1084

1085 .browse-tag-k {

1086 font-weight: bold;

1087 font-weight: 500;

1088 background-color: #F6F6F6;

1089 }

1090

1091 .browse-tag-v {

1092 border-left: 1px solid #ddd;

1093 background-color: #fff;

1094 }

1095 }

1096

1097 .warning {

1098 margin: $lineheight/2 0;

1099 padding: $lineheight/2;

1100 font-size: 90%;

1101 }

1102

1103 .note-comments li {

1104 margin: $lineheight/2 0;

1105

1106 p {

1107 margin-left: 10px;

1108 }

1109 }

1110

1111 .note-description {

1112 margin: 0 0 10px 10px;

1113 }

1114 }

1115

1116 /* Rules for export sidebar */

1117

1118 .export_form {

1119 padding: $lineheight;

1120

1121 .export_area_inputs,

1122 .export_button {

1123 text-align: center;

1124 }

1125

1126 .export_area_inputs {

1127 margin-bottom: $lineheight/2;

1128 input[type="text"] {

1129 width: 80px;

1130 text-align: center;

1131 margin-bottom: 5px;

1132 }

1133 }

1134

1135 .export_boxy {

1136 background: #eee;

1137 border: 1px solid #ccc;

1138 border-radius: 3px;

1139

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

1141 #minlon {

1142 float: left;

1143 margin-left: -1px;

1144 }

1145 #maxlon {

1146 float: right;

1147 margin-right: -1px;

1148 }

1149 #minlat { margin-bottom: 0; }

1150 }

1151

1152 .export_bound {

1153 margin: $lineheight/4;

1154 }

1155

1156 .export_button {

1157 margin-top: $lineheight;

1158 }

1159

1160 dl {

1161 padding-left: $lineheight/2;

1162 dd {

1163 margin-left: 0;

1164 margin-bottom: 10px;

1165 }

1166 }

1167 }

1168

1169 /* Rules for edit pages */

1170

1171 .site-edit {

1172 #content {

1173 position: absolute;

1174 top: $headerHeight;

1175 bottom: 0;

1176 width: 100%;

1177 }

1178

1179 #map {

1180 height: 100%;

1181 }

1182 }

1183

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

1185

1186 .content-heading {

1187 background: $lightgrey;

1188

1189 h1 { font-size: 22px; }

1190 }

1191

1192 .content-body {

1193 h1, h2, h3, p {

1194 margin-bottom: $lineheight;

1195 }

1196

1197 h1, h2, h3 {

1198 margin-top: $lineheight/2;

1199 }

1200 }

1201

1202 .content-inner {

1203 position: relative;

1204 max-width: 900px;

1205 margin: auto;

1206 padding: $lineheight;

1207 }

1208

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

1210

1211 .user-new,

1212 .user-create,

1213 .user-terms {

1214 .content-body .content-inner {

1215 padding: 0;

1216 }

1217 }

1218

1219 .user-new,

1220 .user-create,

1221 .user-terms,

1222 .user-confirm {

1223 .content-heading .content-inner {

1224 height: 200px;

1225 }

1226 }

1227

1228 .header-illustration {

1229 background-position: 0 0;

1230 background-repeat: no-repeat;

1231 position: absolute;

1232 height: 200px;

1233 width: 100%;

1234 left: 0;

1235 bottom: 0;

1236

1237 &.new-user-main {

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

1239 }

1240

1241 &.confirm-main {

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

1243 }

1244

1245 &.new-user-terms {

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

1247 }

1248

1249 &.new-user-arm {

1250 height: 110px;

1251 width: 130px;

1252 left: 260px;

1253 top: 160px;

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

1255 z-index: 100;

1256 }

1257 }

1258

1259 #content.maximised {

1260 top: 0;

1261 left: 0;

1262 right: 0;

1263 bottom: 0;

1264 border: 0;

1265 z-index: 1000;

1266 }

1267

1268 #slim_container {

1269 width: 100%;

1270 }

1271

1272 #slim_container_content {

1273 max-width: 50em;

1274 background-color: #FFFFFF;

1275 margin: $lineheight/2 auto;

1276 padding: 3px;

1277 border-radius: 25px;

1278 -moz-border-radius: 25px;

1279 border: 1px solid #e6e6e6;

1280 }

1281

1282 #slim_content {

1283 margin: $lineheight/2;

1284 margin-top: 95px;

1285 max-width: 50em;

1286

1287 .content-heading {

1288 margin-bottom: 15px;

1289 }

1290 }

1291

1292 #slim_header {

1293 margin: 30px $lineheight/2;

1294 position: absolute;

1295 top: 0px;

1296 margin-right: $lineheight/4;

1297 img {

1298 vertical-align: middle;

1299 margin-bottom: $lineheight/4;

1300 margin-right: $lineheight/4;

1301 }

1302 }

1303

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

1305

1306 .content_map {

1307 position: relative;

1308 width: 45%;

1309 height: 400px;

1310 border: 1px solid #ccc;

1311 margin-bottom: $lineheight;

1312 float: right;

1313 }

1314

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

1316

1317 #trace_list {

1318 font-size: $lineheight/2;

1319 border-width: 0px;

1320 text-align: right;

1321

1322 .trace_summary {

1323 font-size: 12px;

1324 color: gray;

1325 }

1326

1327 .trace_pending {

1328 color: red;

1329 }

1330

1331 .trace_public {

1332 color: green;

1333 }

1334

1335 .trace_identifiable {

1336 color: green;

1337 }

1338

1339 .trace_trackable {

1340 color: red;

1341 }

1342

1343 .trace_private {

1344 color: red;

1345 }

1346 }

1347

1348 /* Rules for the user profile page */

1349

1350 #userinformation {

1351

1352 min-height: 100px;

1353 .userinformation-inner {

1354 float: left;

1355 }

1356 h2 {

1357 margin-top: 0;

1358 }

1359 .user-description {

1360 width: 100%;

1361 clear: both;

1362 }

1363 .deemphasize {

1364 margin: 0;

1365 }

1366 }

1367

1368 .admin-user-info small {

1369 margin-bottom: $lineheight/2;

1370 display: inline;

1371 margin-right: $lineheight;

1372 }

1373

1374 .activity-block {

1375 clear: left;

1376 border-bottom: 1px solid #ccc;

1377 padding-bottom: $lineheight;

1378 float: left;

1379 h3 {

1380 margin-bottom: $lineheight/2;

1381 }

1382 }

1383

1384 .contact-activity {

1385 margin-top: $lineheight;

1386 width: 100%;

1387 }

1388

1389 .activity-details p {

1390 margin-left: 70px;

1391 margin-bottom: 0;

1392 }

1393

1394 #friends-container .contact-activity ul {

1395 margin-left: 70px;

1396 }

1397

1398 .user-view {

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

1400 .content-inner {

1401 max-width: none;

1402 }

1403 p#no_home_location {

1404 margin: $lineheight;

1405 }

1406 .user_thumbnail {

1407 margin-top: $lineheight/4;

1408 float: left;

1409 }

1410 }

1411

1412 /* Rules for the user map */

1413

1414 .content_map .leaflet-popup-content {

1415 margin: $lineheight/2;

1416 min-height: 50px;

1417 }

1418

1419 /* Rules for user popups on maps */

1420

1421 .user_popup {

1422 min-width: 200px;

1423 p {

1424 padding: 0 0 5px 0;

1425 margin-top: 0 0 0 60px;

1426 font-size: 12px;

1427 }

1428 img.user_thumbnail {

1429 float: left;

1430 margin: 0 $lineheight/2 0 0;

1431 }

1432 }

1433

1434 /* Rules for the user list */

1435

1436 #user_list {

1437 font-size: $lineheight/2;

1438 width: 100%;

1439

1440 tr {

1441 vertical-align: middle;

1442 }

1443

1444 p {

1445 margin-top: 0px;

1446 margin-bottom: 0px;

1447 }

1448 }

1449

1450 #user_list_actions {

1451 float: right;

1452 margin-top: $lineheight/2;

1453 }

1454

1455 /* Rules for the diary list page */

1456

1457 .diary_post {

1458 position: relative;

1459 margin-top: $lineheight/2;

1460 padding-top: $lineheight;

1461 border-top: 1px solid #ccc;

1462

1463 .post_heading {

1464 margin-bottom: $lineheight;

1465

1466 h2 {

1467 margin-top: 0;

1468 margin-bottom: $lineheight/2;

1469 font-size: 24px;

1470 }

1471 }

1472

1473 img.user_thumbnail {

1474 float: left;

1475 }

1476

1477 small.deemphasize {

1478 float: left;

1479 display: block;

1480 }

1481

1482 ul.secondary-actions {

1483 display: inline-block;

1484 }

1485 }

1486

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

1488 display: inline;

1489 }

1490

1491 /* Rules for the diary entry page */

1492

1493 .diary_entry {

1494 #map {

1495 position: relative;

1496 width: 90%;

1497 height: 400px;

1498 border: 1px solid #ccc;

1499 display: none;

1500 margin-bottom: $lineheight;

1501 }

1502 #newcomment {

1503 border-top: 1px solid #ccc;

1504 padding-top: $lineheight;

1505 margin-top: $lineheight/2;

1506 }

1507 .comments {

1508 max-width: 740px;

1509 }

1510 .diary-comment {

1511 margin-top: $lineheight/2;

1512 border-top: 1px dashed #ccc;

1513 padding-top: $lineheight/2;

1514 &:first-child {

1515 margin-top: $lineheight;

1516 padding-top: $lineheight;

1517 border-top: 1px solid #ccc;

1518 }

1519 p {

1520 margin-bottom: $lineheight/2;

1521 }

1522 .comment-heading {

1523 margin-bottom: 0;

1524 margin-top: 0;

1525 }

1526 }

1527 }

1528

1529 .diary_entry-view img.user_thumbnail {

1530 float: left;

1531 }

1532

1533 /* Rules for the log in page */

1534

1535 #login_openid_buttons {

1536 margin-bottom: 0;

1537 }

1538

1539 #login_openid_buttons li {

1540 float: left;

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

1542 }

1543

1544 /* Rules for the account confirmation page */

1545

1546 .user-terms {

1547 .legale {

1548 border: 1px solid #ccc;

1549 padding: $lineheight;

1550 margin-bottom: $lineheight;

1551 overflow: auto;

1552 height: 20em;

1553 }

1554

1555 #decline {

1556 background: $lightblue;

1557 &:hover {

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

1559 }

1560 }

1561 }

1562

1563 /* Rules for the account settings page */

1564

1565 #accountForm .user_map {

1566 position: relative;

1567 width: 500px;

1568 height: 400px;

1569 border: 1px solid #ccc;

1570 }

1571

1572 #accountForm .user_image {

1573 margin-bottom: 0;

1574 }

1575

1576 #accountForm #user_image {

1577 margin-left: 20px;

1578 }

1579

1580 #accountForm ul.accountImage-options {

1581 margin-left: 120px;

1582 }

1583

1584 .nohome .location {

1585 display: none;

1586 }

1587

1588 #homerow .message {

1589 display: none;

1590 }

1591

1592 .nohome .message {

1593 display: inline !important;

1594 }

1595

1596 .content_map.settings_map {

1597 width: 50%;

1598 float: none;

1599 }

1600

1601 /* Rules for the oauth settings page */

1602

1603 .oauth_clients .buttons .oauth-edit {

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

1605 }

1606

1607 .oauth_clients .buttons .oauth-delete {

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

1609 }

1610

1611 /* Rules for messages pages */

1612

1613 .messages {

1614 width: 100%;

1615 border: 1px solid #ddd;

1616

1617 input[type="submit"] {

1618 margin: auto;

1619 }

1620 tbody tr {

1621 border-top: 1px solid #ccc;

1622 }

1623

1624 .inbox-row {

1625 background: #f8f8ff;

1626 }

1627

1628 .inbox-row-unread {

1629 background:#CBEEA7;

1630 }

1631

1632 .right {

1633 float: right;

1634 }

1635

1636 tr td,

1637 tr th {

1638 padding: $lineheight/4;

1639 }

1640 p:last-child,

1641 h2:last-child,

1642 h3:last-child,

1643 ol:last-child,

1644 ul:last-child {

1645 margin-bottom:0;

1646 }

1647 tr td {

1648 height: 30px;

1649 border-right: 1px solid $lightgrey;

1650 }

1651 }

1652

1653 .inbox-row .inbox-mark-read {

1654 display: none;

1655 }

1656

1657 .info-line {

1658 margin-bottom: $lineheight;

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

1660 border-bottom: 1px solid #ccc;

1661

1662 form, form div {

1663 display: inline;

1664 }

1665 }

1666

1667 .info-line .user_thumbnail_tiny {

1668 vertical-align: middle;

1669 }

1670

1671 .inbox-mark-unread,

1672 .inbox-mark-read,

1673 .inbox-delete {

1674 width: 1%;

1675 }

1676

1677 .inbox-row-unread .inbox-mark-unread {

1678 display: none;

1679 }

1680

1681 .message-read .message-buttons {

1682 margin-top: $lineheight;

1683 padding-top: $lineheight;

1684 border-top: 1px solid $lightgrey;

1685 }

1686

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

1688 border-radius: 0;

1689 }

1690

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

1692

1693 .error {

1694 padding: $lineheight;

1695 background-color: #ff7070;

1696 }

1697

1698 .warning {

1699 padding: $lineheight;

1700 background-color: #ffe0cc;

1701 }

1702

1703 .notice {

1704 padding: $lineheight;

1705 background-color: #CBEEA7;

1706 }

1707

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

1709

1710 .field_with_errors {

1711 padding: 2px;

1712 background-color: #ff7070;

1713 display: inline-block;

1714 }

1715

1716 .formError {

1717 display: inline-block;

1718 padding: 5px 10px;

1719 margin-top: 5px;

1720 border-radius: 4px;

1721 font-size: 12px;

1722 color: #fff;

1723 background-color: #ff7070;

1724 }

1725

1726 /* Rules for rails validation error boxes */

1727

1728 #errorExplanation {

1729 width: 400px;

1730 border: 2px solid #ff7070;

1731 padding: 0 $lineheight/2;

1732 margin-bottom: $lineheight;

1733 background-color: #f0f0f0;

1734

1735 h2 {

1736 margin: 0 -10px 10px -10px;

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

1738 font-weight: bold;

1739 font-weight: 500;

1740 font-size: 12px;

1741 background-color: #c00;

1742 color: #fff;

1743 text-align: left;

1744 }

1745

1746 p {

1747 color: #333;

1748 margin-bottom: 0px;

1749 padding: $lineheight/4;

1750 }

1751

1752 ul {

1753 padding-left: $lineheight;

1754

1755 li {

1756 font-size: 12px;

1757 list-style: disc;

1758 }

1759 }

1760 }

1761

1762 /* Rules for forms */

1763

1764 .standard-form {

1765 fieldset {

1766 margin-bottom: $lineheight;

1767 }

1768 label.standard-label {

1769 display: block;

1770 margin-bottom: $lineheight/4;

1771 font-size: $typeheight;

1772 font-weight: bold;

1773 font-weight: 500;

1774 line-height: 1.5;

1775 }

1776 label.standard-label.secondary {

1777 display: inline-block;

1778 font-weight: normal;

1779 }

1780 .form-help {

1781 font-weight: normal;

1782 }

1783 .form-column {

1784 float: left;

1785 margin-right: 20px;

1786 }

1787 .form-divider {

1788 margin-top: $lineheight;

1789 padding-top: $lineheight;

1790 border-top: 1px solid $lightgrey;

1791 }

1792 .horizontal-list .form-row {

1793 float: left;

1794 padding-right: 10px;

1795 }

1796 .form-row {

1797 margin-bottom: $lineheight/2;

1798 }

1799 .form-list {

1800 margin-bottom: 0;

1801 }

1802 .form-list li {

1803 margin-bottom: 5px;

1804 }

1805 input[type="checkbox"],

1806 input[type="radio"] {

1807 float: left;

1808 margin-top: 5px;

1809 }

1810 }

1811

1812 #remember_me_openid {

1813 display: block;

1814 }

1815

1816 input[type="checkbox"],

1817 input[type="radio"] {

1818 margin-right: 5px;

1819 }

1820

1821 input[type="text"],

1822 input[type="email"],

1823 input[type="url"],

1824 input[type="password"],

1825 textarea {

1826 border: 1px solid #ccc;

1827 padding: 2px 5px;

1828 margin: 0;

1829 width: 200px;

1830 }

1831

1832 textarea {

1833 padding: 5px;

1834 width: 100%;

1835 }

1836

1837 /* Rules for user images */

1838

1839 img.user_image {

1840 max-width: 100px;

1841 max-height: 100px;

1842 border: 1px solid #ccc;

1843 margin-bottom: $lineheight;

1844 float: left;

1845 margin-right: $lineheight;

1846 }

1847

1848 img.user_thumbnail {

1849 max-width: 50px;

1850 max-height: 50px;

1851 border: 1px solid #ccc;

1852 margin-right: $lineheight;

1853 }

1854

1855 img.user_thumbnail_tiny {

1856 max-width: 25px;

1857 max-height: 25px;

1858 border: 1px solid #ccc;

1859 }

1860

1861 /* Rules for geo microformats */

1862

1863 abbr.geo {

1864 border-bottom: none;

1865 }

1866

1867 /* Rules for RSS buttons */

1868

1869 .rsssmall {

1870 position: relative;

1871 top: 3px;

1872 }

1873

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

1875

1876 ul.secondary-actions {

1877 font-style: normal;

1878 margin-bottom: 0;

1879 margin-left: 0;

1880 &.pager {

1881 display: inline-block;

1882 margin-right: 60px;

1883 }

1884 > li {

1885 display: block;

1886 float: left;

1887 list-style: none;

1888 border-left: 1px solid #ccc;

1889 padding-left: $lineheight/2;

1890 margin-right: $lineheight/2;

1891 &:first-child {

1892 border-left: 0;

1893 padding-left: 0;

1894 }

1895 &:last-child {

1896 margin-right: 0px;

1897 }

1898 }

1899 }

1900

1901 div.secondary-actions {

1902 padding: 10px;

1903 text-align: center;

1904 }

1905

1906 /* Utility for managing inner content areas */

1907

1908 .inner22 { padding: $lineheight;}

1909

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

1911

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

1913

1914 .inner20 { padding: $lineheight 0;}

1915

1916 .inner02 { padding: 0 $lineheight;}

1917

1918 /* Utility for general button styles */

1919

1920 input[type="button"],

1921 input[type="submit"],

1922 input[type="reset"],

1923 a.button {

1924 cursor: pointer;

1925 border: 0;

1926 display: inline-block;

1927 line-height: 20px;

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

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

1930 min-width: 120px;

1931 margin: 0 0 $lineheight/2 0;

1932 color: white;

1933 background: $blue;

1934 text-align: center;

1935 border-radius: 2px;

1936 -moz-border-radius: 2px;

1937 &:hover {

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

1939 text-decoration: none;

1940 }

1941 &.deemphasize {

1942 background: $lightblue;

1943 &:hover {

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

1945 }

1946 }

1947 &:disabled {

1948 background: $lightgrey;

1949 &:hover {

1950 background: $lightgrey;

1951 }

1952 }

1953 &:last-child {

1954 margin-bottom: 0;

1955 }

1956 }

1957

1958 .buttons {

1959 min-width: 200px;

1960 input[type="submit"],

1961 input[type="button"],

1962 input[type="reset"],

1963 .button {

1964 box-sizing: border-box;

1965 float: left;

1966 border-radius: 0;

1967 margin:0;

1968 min-width: 75px;

1969 max-width: 180px;

1970 border-right:1px solid white;

1971 text-overflow: ellipsis;

1972 white-space: nowrap;

1973 overflow: hidden;

1974 }

1975 input:first-child,

1976 .button:first-child {

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

1978 }

1979 input:last-child,

1980 .button:last-child {

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

1982 border-right-width: 0;

1983 }

1984 input:only-child,

1985 .button:only-child,

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

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

1988 border-radius:2px;

1989 border-right-width: 0;

1990 }

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

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

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

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

1995 border-right-width: 0;

1996 }

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

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

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

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

2001 border-right-width: 1px;

2002 }

2003 }

2004

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

2006

2007 .table0,

2008 .item0 {

2009 background: $offwhite;

2010 }

2011

2012 .table1,

2013 .item1 {

2014 background: #fff;

2015 }

2016

2017 /* Rules for OpenID logo */

2018

2019 .openid_logo {

2020 vertical-align: text-bottom;

2021 border: 0;

2022 }

2023

2024 /* Rules for rich text */

2025

2026 .richtext,

2027 .prose {

2028 h1, h2 {

2029 padding-bottom: $lineheight/2;

2030 border-bottom: 1px dashed #cccccc;

2031 margin-bottom: $lineheight/2;

2032 }

2033

2034 h1 {

2035 font-size: 24px;

2036 }

2037

2038 h2 {

2039 font-size: 18px;

2040 }

2041

2042 h3 {

2043 font-size: $typeheight;

2044 }

2045

2046 code {

2047 font-size: 13px;

2048 background: #e8e8e8;

2049 padding: 2px 3px;

2050 }

2051

2052 pre {

2053 font-size: 13px;

2054 background: #e8e8e8;

2055 padding: 2px 3px;

2056

2057 code {

2058 padding: 0;

2059 }

2060 }

2061

2062 img {

2063 padding: $lineheight;

2064 background-color: $offwhite;

2065 display: block;

2066 max-width: 100%;

2067 margin: auto;

2068 }

2069

2070 blockquote {

2071 border-left: $lineheight solid $offwhite;

2072 padding-left: $lineheight;

2073 margin: 0;

2074 color: #7E7E7E;

2075 }

2076

2077 ul, ol {

2078 padding-left: $lineheight;

2079 margin-bottom: $lineheight;

2080 margin-left: $lineheight;

2081 }

2082

2083 ul li {

2084 list-style: disc;

2085 }

2086

2087 ol li {

2088 list-style: decimal;

2089 }

2090 }

2091

2092 .diary_post .richtext {

2093 margin-top: $lineheight;

2094 }

2095

2096 .comments .richtext {

2097 margin-left: 70px;

2098 margin-top: 0;

2099 }

2100

2101 /* Rules for rich text editors */

2102

2103 .richtext_container {

2104 margin-bottom: $lineheight;

2105

2106 .richtext_content {

2107 width: 50%;

2108 display: inline-block;

2109 vertical-align: top;

2110

2111 .richtext_preview {

2112 display: inline-block;

2113 padding: $lineheight;

2114 background-color: $offwhite;

2115 overflow-x: auto;

2116

2117 &.loading {

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

2119 background-repeat: no-repeat;

2120 background-position: center;

2121 }

2122

2123 > :first-child {

2124 margin-top: 0px;

2125 }

2126 }

2127 }

2128

2129 .richtext_help {

2130 display: inline-block;

2131 vertical-align: top;

2132 margin-left: 15px;

2133 background-color: #f8f8ff;

2134 padding: $lineheight/2;

2135 width: 220px;

2136

2137 ul {

2138 margin-bottom: 0;

2139 }

2140

2141 h4.heading, li {

2142 border-bottom: 1px solid #ccc;

2143 margin-bottom: $lineheight/4;

2144 padding-bottom: $lineheight/4;

2145 }

2146

2147 li h4, li span, li p {

2148 display: inline-block;

2149 vertical-align: top;

2150 font-size: 11px;

2151 }

2152

2153 li h4 {

2154 width: 40%;

2155 margin: 0;

2156 }

2157

2158 li span, li p {

2159 width: 50%;

2160 margin-left: $lineheight/2;

2161 margin-bottom: $lineheight/4;

2162 white-space: nowrap;

2163 }

2164 }

2165 }

2166

2167 /* Rules for the user notes list */

2168

2169 .note_list {

2170 tr.creator {

2171 background-color: #eeeeee;

2172 }

2173

2174 td {

2175 padding: 3px;

2176 }

2177

2178 p {

2179 margin-bottom: 0px;

2180 }

2181 }

2182

2183 /* Rules for the iD editor */

2184

2185 .id-embed {

2186 width: 100%;

2187 height: 100%;

2188 }

2189

2190 /* Rules for dropdown menus */

2191

2192 .dropdown {

2193 position: relative;

2194 }

2195

2196 .dropdown-toggle {

2197 *margin-bottom: -3px;

2198 }

2199

2200 .dropdown-toggle:active,

2201 .open .dropdown-toggle {

2202 outline: 0;

2203 }

2204

2205 .caret {

2206 display: inline-block;

2207 width: 0;

2208 height: 0;

2209 vertical-align: top;

2210 border-top: 4px solid #000000;

2211 border-right: 4px solid transparent;

2212 border-left: 4px solid transparent;

2213 content: "";

2214 }

2215

2216 .dropdown .caret {

2217 margin-top: 8px;

2218 margin-left: 2px;

2219 }

2220

2221 .dropdown-menu {

2222 position: absolute;

2223 top: 100%;

2224 left: -1px;

2225 z-index: 1000;

2226 display: none;

2227 float: left;

2228 min-width: 160px;

2229 padding: 5px 0;

2230 margin: 0;

2231 list-style: none;

2232 background-color: #ffffff;

2233 border: 1px solid #ccc;

2234 border-radius: 0 3px 3px;

2235 *border-right-width: 2px;

2236 *border-bottom-width: 2px;

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

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

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

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

2241 -moz-background-clip: padding;

2242 background-clip: padding-box;

2243 }

2244

2245 .dropdown-menu.pull-right {

2246 right: 0;

2247 left: auto;

2248 }

2249

2250 .dropdown-menu .divider {

2251 *width: 100%;

2252 height: 1px;

2253 margin: 9px 1px;

2254 *margin: -5px 0 5px;

2255 overflow: hidden;

2256 background-color: #e5e5e5;

2257 border-bottom: 1px solid #ffffff;

2258 }

2259

2260 .dropdown-menu > li > a {

2261 display: block;

2262 padding: 3px 10px;

2263 clear: both;

2264 font-weight: normal;

2265 line-height: 20px;

2266 color: #333333;

2267 white-space: nowrap;

2268 }

2269

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

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

2272 .dropdown-submenu:hover > a,

2273 .dropdown-submenu:focus > a {

2274 color: #ffffff;

2275 text-decoration: none;

2276 background-color: $green;

2277 }

2278

2279 .dropdown-menu > .active > a,

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

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

2282 color: #ffffff;

2283 text-decoration: none;

2284 background-color: $green;

2285 outline: 0;

2286 }

2287

2288 .dropdown-menu > .disabled > a,

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

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

2291 color: #999999;

2292 }

2293

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

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

2296 text-decoration: none;

2297 cursor: default;

2298 background-color: transparent;

2299 background-image: none;

2300 }

2301

2302 .open {

2303 *z-index: 1000;

2304 }

2305

2306 .open > .dropdown-menu {

2307 display: block;

2308 }

2309

2310 .dropdown-backdrop {

2311 position: fixed;

2312 top: 0;

2313 right: 0;

2314 bottom: 0;

2315 left: 0;

2316 z-index: 990;

2317 }

2318

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

2320 .site-welcome {

2321 .center {

2322 text-align: center;

2323 .sprite {

2324 float: none;

2325 margin: auto;

2326 }

2327 }

2328

2329 .sprite {

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

2331 background-size: 500px 250px;

2332 display: block;

2333 float: left;

2334 }

2335

2336 .icon-list {

2337 padding-bottom: 20px;

2338 div {

2339 margin-bottom: 10px;

2340 p {

2341 padding-top: 10px;

2342 }

2343 }

2344 }

2345 .sprite.small {

2346 width: 50px;

2347 height: 50px;

2348 }

2349

2350 .sprite.x {

2351 background-position: -50px 0;

2352 }

2353

2354 .sprite.term {

2355 margin-right: 10px;

2356 vertical-align: middle;

2357 }

2358

2359 .sprite.node {

2360 background-position: -100px 0;

2361 }

2362

2363 .sprite.way {

2364 background-position: -150px 0;

2365 }

2366

2367 .sprite.tag {

2368 background-position: -200px 0;

2369 }

2370

2371 .sprite.editor {

2372 background-position: -250px 0;

2373 }

2374

2375 .sprite.question {

2376 background-position: -300px 0;

2377 }

2378

2379 .start-mapping {

2380 margin: auto;

2381 cursor: pointer;

2382 border: none;

2383 padding: 20px 40px;

2384 font-size: 30px;

2385 text-decoration: none;

2386 }

2387

2388 .note-box {

2389 margin-top: 20px;

2390 background-color: $offwhite;

2391 }

2392

2393 .icon.note {

2394 background-color: #333;

2395 border-radius: 4px;

2396 }

2397 }

2398

2399 .site-about #content {

2400 //background-color: #000;

2401 background-color: #eee;

2402 background-position: 50% 50%;

2403 background-repeat: no-repeat;

2404 background-size: cover;

2405 background-attachment: fixed;

2406

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

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

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

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

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

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

2413

2414 .caption {

2415 max-width: 200px;

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

2417 position: fixed;

2418 text-align: right;

2419 right: 20px;

2420 bottom: 60px;

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

2422 color: #eee;

2423 opacity: 0.8;

2424 display: none;

2425 }

2426

2427 .caption a {

2428 color: white;

2429 white-space: nowrap;

2430 text-decoration: none;

2431 }

2432

2433 a.next {

2434 display: block;

2435 position: fixed;

2436 right: 10px;

2437 bottom: 10px;

2438 width: 40px;

2439 height: 40px;

2440 border-radius: 5px;

2441 text-indent: -9999px;

2442 overflow: hidden;

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

2444 background-color: #000;

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

2446 }

2447

2448 .content-inner {

2449 position: relative;

2450 color: #333;

2451 min-width: 320px;

2452 max-width: 640px;

2453

2454 .section {

2455 margin-bottom: 30px;

2456 }

2457

2458 .section:last-child {

2459 margin-bottom: 0;

2460 }

2461 }

2462

2463 .text {

2464 background: white;

2465 padding: 40px;

2466 }

2467

2468 .attr {

2469 position: relative;

2470 padding: 170px 40px 20px;

2471 background: #333;

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

2473 margin-bottom: 0;

2474 margin-top: -20px;

2475

2476 h1 {

2477 display: block;

2478 color: white;

2479 font-weight: normal;

2480 font-weight: 300;

2481 font-size: 34px;

2482 span {

2483 color: #76c551;

2484 }

2485 }

2486

2487 .user-image {

2488 position: absolute;

2489 top: 0px;

2490 right: 240px;

2491 left: 0px;

2492 height: 150px;

2493 background-position: 0 50%;

2494 background-repeat: no-repeat;

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

2496 background-size: cover;

2497 background-color: #76c551;

2498 }

2499

2500 .byosm {

2501 position: absolute;

2502 top: 0px;

2503 right: 0px;

2504 z-index: 1;

2505 width: 240px;

2506 height: 150px;

2507 padding: 20px 20px 20px 40px;

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

2509 white-space: nowrap;

2510 color: #fff;

2511 background: #76c551;

2512 }

2513

2514 .byosm span {

2515 display: inline-block;

2516 width: 20px;

2517 margin-left: -20px;

2518 }

2519 }

2520

2521 h2 {

2522 margin-bottom: 10px;

2523 }

2524

2525 .icon {

2526 width: 30px;

2527 height: 30px;

2528 margin-right: 10px;

2529 vertical-align: middle;

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

2531

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

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

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

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

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

2537 }

2538 }

2539

2540 @import 'browse';

2541

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

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

2544 display: none;

2545 }

2546 }

2547