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 }

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

45 .clearfix:before,

46 .clearfix:after {

47 content: " ";

48 display: table;

49 }

51 .clearfix:after {

52 clear: both;

53 }

55 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

69 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

85 .fillL { background-color: white; }

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

89 * {

90 -webkit-box-sizing: border-box;

91 -moz-box-sizing: border-box;

92 box-sizing: border-box;

93 }

95 body {

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

97 font-size: $typeheight;

98 line-height: 1.6666;

99 color: #222;

100 background-color: #fff;

101 margin: 0px;

102 padding: 0px;

103 text-align: left;

104 height: 100%;

105 }

106

107 h1, h2, h3 {

108 font-weight: 600;

109 line-height: 1.2;

110 }

111

112 h4, h5 {

113 font-weight: 500;

114 }

115

116 h1 {

117 font-size: 18px;

118 }

119

120 h2, h3 {

121 font-size: 16px;

122 }

123

124 p > img {

125 width: auto;

126 max-width: 100%;

127 }

128

129 small, aside {

130 font-size: 12px;

131 }

132

133 #container { position: relative; }

134

135 .column-1 {

136 width: 50%;

137 margin: 0 0 $lineheight/2 0;

138 }

139

140 .small_icon {

141 vertical-align: middle;

142 margin-right: $lineheight/4;

143 }

144

145 .red { color: $red; }

146

147 /* Rules for icons */

148

149 .icon {

150 display:inline-block;

151 vertical-align:top;

152 width:20px;

153 height:20px;

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

155 text-indent:-9999px;

156 overflow:hidden;

157 }

158

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

175

176 /* Rules for links */

177

178 a {

179 color: #24d;

180 text-decoration: none;

181 -webkit-appearance: none;

182 outline: 0;

183 &:hover {

184 text-decoration: underline;

185 }

186 }

187

188 /* Rules for horizontal lines */

189

190 hr {

191 border: none;

192 background-color: #ccc;

193 color: #ccc;

194 height: 1px;

195 }

196

197 /* General styles for tables */

198

199 table {

200 width: 100%;

201 margin-bottom: $lineheight;

202 th, td {

203 text-align: left;

204 padding: $lineheight/4;

205 line-height: $lineheight;

206 }

207 th {

208 font-weight: 600;

209 vertical-align: top;

210 }

211 td {

212 vertical-align: middle;

213 }

214 }

215

216 /* Utility for de-emphasizing content */

217

218 .deemphasize {

219 color: #999;

220 a {

221 color: $blue;

222 }

223 }

224

225 /* Rules for the header */

226

227 #menu-icon {

228 display: none !important;

229 float: right;

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

231 background-size: 30px 30px;

232 display: block;

233 width: 30px;

234 height: 30px;

235 margin: 14px 10px 0 0;

236 opacity: 0.6;

237 }

238

239 header {

240 height: $headerHeight;

241 position: relative;

242 z-index: 1001;

243 font-size: 14px;

244

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

246 display: inline-block;

247 }

248

249 > * {

250 height: 100%;

251 padding: $lineheight/2;

252 }

253

254 h1, nav.primary {

255 float: left;

256 }

257

258 a, a:hover {

259 text-decoration: none;

260 }

261

262 img.logo {

263 width: 30px;

264 height: 30px;

265 margin-top: -2px;

266 vertical-align: middle;

267 }

268

269 h1 {

270 margin: 0;

271 padding-top: 15px;

272

273 a {

274 color: #000;

275 }

276 }

277 }

278

279 nav.primary {

280 > ul {

281 $border: 1px solid $green;

282

283 border: $border;

284 border-radius: $border-radius;

285

286 > li {

287 border-right: $border;

288 float: left;

289 &:last-child {

290 border-right: 0;

291 }

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

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

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

295 &.dropdown {

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

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

298 }

299 }

300 }

301

302 a.tab,

303 .dropdown-toggle {

304 display: inline-block;

305 font-weight: 500;

306 color: $green;

307 padding: 5px 15px;

308 }

309

310 .dropdown-toggle {

311 padding: 5px 6px;

312 }

313

314 .caret {

315 border-top-color: $green;

316 margin-top: 10px;

317 }

318

319 .disabled a {

320 color: #ccc;

321 cursor: default;

322

323 .caret {

324 border-top-color: #ccc;

325 }

326 }

327

328 > ul li.current {

329 background-color: $green;

330

331 .tab {

332 color: #fff;

333 }

334

335 .caret {

336 border-top-color: #fff;

337 }

338 }

339 }

340

341 nav.secondary {

342 position: absolute;

343 right: 0;

344

345 > ul {

346 vertical-align: middle;

347 a, .dropdown-toggle {

348 display: inline-block;

349 text-decoration: none;

350 color: $darkgrey;

351 padding: 5px;

352

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

354 }

355 }

356

357 > ul li.current a {

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

359 }

360

361 .user-menu {

362 $border: 1px solid $grey;

363 border: $border;

364 border-radius: $border-radius;

365 margin-left: 10px;

366

367 > li {

368 border-right: $border;

369 float: left;

370 &:last-child {

371 border-right: 0;

372

373 > a {

374 border-radius: 0 $border-radius $border-radius 0;

375 }

376 }

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

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

379 }

380

381 a {

382 padding: 5px 15px;

383

384 }

385

386 &.logged-in > a {

387 padding: 0;

388 > .user-button {

389 line-height: 1.8;

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

391 display: inline-block;

392 color: $darkgrey;

393 }

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

395 }

396 }

397

398 .caret {

399 border-top-color: $grey;

400 margin-top: 9px;

401 }

402

403 img.user_thumbnail_tiny {

404 border: 0;

405 vertical-align: top;

406 margin-top: 0px;

407 margin: 4px 0 0 4px;

408 border-radius: 2px;

409 }

410

411 #inboxanchor {

412 display: inline-block;

413 vertical-align: top;

414 height: 25px;

415 margin: 3px 0 3px 3px;

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

417 line-height: 20px;

418 border-radius: 2;

419 }

420

421 .dropdown-menu {

422 left: auto;

423 right: -1px;

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

425

426 .count-number {

427 float: right;

428 padding: 0 5px;

429 margin: 0;

430 }

431 }

432 }

433

434 #compact-secondary-nav {

435 display: none;

436 ul li a {

437 width: 100%;

438 color: #333;

439 &:hover { color: #fff; }

440 }

441 }

442

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

444 #compact-secondary-nav {

445 display: inline-block;

446 }

447 .compact-hide {

448 display: none;

449 }

450 }

451

452 /* Utility for styling notification numbers */

453

454 .count-number {

455 padding: 2px $lineheight/4;

456 border-radius: 2px;

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

458 margin: 0 2px;

459 font-size: 11px;

460 color: #333;

461 }

462

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

464

465 #noscript {

466 z-index: 20000000;

467 position: absolute;

468 top: 15px;

469 left: 15px;

470 }

471

472 /* Rules for bootstrap tooltips */

473

474 .tooltip {

475 position: absolute;

476 display: none;

477 color: #333;

478 text-align: left;

479 font-size: 12px;

480 max-width: 250px;

481 }

482

483 .tooltip.in {

484 opacity: 0.8;

485 z-index: 1030;

486 height: auto;

487 display: block;

488 }

489

490 .tooltip.top {

491 margin-top: -10px;

492 text-align: center;

493 }

494

495 .tooltip.right {

496 margin-left: 10px;

497 }

498

499 .tooltip.bottom {

500 margin-top: 10px;

501 text-align: center;

502 }

503

504 .tooltip.left {

505 margin-left: -10px;

506 text-align: right;

507 }

508

509 .tooltip-inner {

510 display: inline-block;

511 padding: 10px;

512 font-weight: normal;

513 background-color: white;

514 }

515

516 .tooltip-arrow {

517 position: absolute;

518 width: 0;

519 height: 0;

520 border-color: transparent;

521 border-style: solid;

522 }

523

524 .tooltip.top .tooltip-arrow {

525 bottom: -5px;

526 left: 50%;

527 margin-left: -5px;

528 border-top-color: white;

529 border-width: 5px 5px 0;

530 }

531

532 .tooltip.right .tooltip-arrow {

533 top: 50%;

534 left: -5px;

535 margin-top: -5px;

536 border-right-color: white;

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

538 }

539

540 .tooltip.left .tooltip-arrow {

541 top: 50%;

542 right: -5px;

543 margin-top: -5px;

544 border-left-color: white;

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

546 }

547

548 .tooltip.bottom .tooltip-arrow {

549 top: -5px;

550 left: 50%;

551 margin-left: -5px;

552 border-bottom-color: white;

553 border-width: 0 5px 5px;

554 }

555

556 /* Rules for Leaflet maps */

557

558 .leaflet-control .control-button {

559 display: block;

560 height: 40px;

561 width: 40px;

562 background-color: #333;

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

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

565 margin-bottom: 10px;

566 outline: none;

567

568 &:hover {

569 background-color: black;

570 }

571

572 &.active {

573 background-color: #9ed485;

574 }

575

576 &.disabled {

577 background-color: #333;

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

579 cursor: default;

580 }

581

582 .icon {

583 margin: 10px;

584 }

585 }

586

587 .leaflet-control .zoomin,

588 .control-layers .control-button {

589 margin-bottom: 0px;

590 border-radius: 4px 0 0 0;

591 }

592

593 .leaflet-control .zoomout,

594 .control-key .control-button {

595 margin-bottom: 0;

596 border-radius: 0;

597 }

598

599 .control-locate .control-button,

600 .control-share .control-button {

601 border-radius: 0 0 0 4px;

602 }

603

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

605

606 .map-layout {

607 #content {

608 overflow: hidden;

609 position: absolute;

610 top: $headerHeight;

611 bottom: 0;

612 width: 100%;

613 }

614

615 #sidebar, #map {

616 position: relative;

617 height: 100%;

618 overflow-x: hidden;

619 overflow-y: auto;

620 }

621

622 #sidebar {

623 float: left;

624 width: $sidebarWidth;

625 background: #fff;

626 font-size: 12px;

627

628 h2 {

629 padding: $lineheight $lineheight $lineheight/2;

630 }

631

632 h3, h4 {

633 margin-top: $lineheight;

634 margin-bottom: $lineheight/2;

635 font-size: 13px;

636 }

637

638 .icon.close {

639 float: right;

640 cursor: pointer;

641 }

642 }

643

644 .welcome {

645 display: none;

646 }

647

648 .overlay-sidebar #sidebar {

649 position: absolute;

650 z-index: 1000;

651 height: auto;

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

653 overflow: hidden;

654 .welcome {

655 display: block;

656 }

657 #sidebar_content {

658 display: none;

659 }

660 }

661

662 .welcome {

663 p {

664 padding: $lineheight/2 $lineheight $lineheight;

665 font-size: 110%;

666 font-weight: 300;

667 }

668

669 .button {

670 width: 50%;

671 float: left;

672 margin: 0;

673 border-radius: 0;

674 font-weight: normal;

675 padding: .6em;

676

677 &.learn-more {

678 border-right: 1px solid #fff;

679 }

680 }

681 }

682

683 #map {

684 height: 100%;

685 overflow: hidden;

686 }

687

688 #map-ui {

689 display: none;

690 position: relative;

691 float: right;

692 width: 250px;

693 height: 100%;

694 background: white;

695 overflow: auto;

696

697 .section {

698 border-bottom: 1px solid #DDD;

699 padding: 10px 20px;

700 }

701

702 a.close-button {

703 float: right;

704 padding:5px;

705 font-size:20px;

706 line-height:10px;

707 color:#222;

708 border:1px solid #ddd;

709 }

710

711 .tooltip {

712 opacity: 1;

713 border: 1px solid #ccc;

714 .tooltip-arrow {

715 border-top-color: #ccc;

716 }

717 }

718 }

719 }

720

721 .layers-ui,

722 .share-ui {

723 li:last-child {

724 margin-bottom: 0;

725 }

726 }

727

728 .layers-ui {

729 .base-layers {

730 .leaflet-container {

731 width: 100%;

732 height: 50px;

733 cursor: pointer;

734 }

735

736 li {

737 overflow: hidden;

738 border-radius: 3px;

739 border: 2px solid #fff;

740 margin-bottom: 8px;

741 position: relative;

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

743

744 label {

745 position: absolute;

746 top: 0;

747 left: 0;

748 padding: 2px 6px;

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

750 cursor: pointer;

751 font-weight: 600;

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 input {

889 display: block;

890 margin-left: auto;

891 margin-right: auto;

892 }

893 }

894

895 #sidebar {

896 #sidebar_loader,

897 .loader,

898 .load_more {

899 text-align: center;

900 margin: $lineheight auto;

901 width: 40px;

902 display: block;

903 }

904 }

905

906 /* Rules for the search box */

907

908 header .search_form {

909 display: none;

910 }

911

912 .search_form {

913 position: relative;

914 padding: $lineheight/2;

915 background-color: $lightgrey;

916

917 .query_wrapper {

918 position: relative;

919 overflow: hidden;

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

921 }

922

923 input[type=text] {

924 width: 100%;

925 height: 30px;

926 border-right: none;

927

928 transition: 300ms linear;

929 -webkit-transition: 300ms linear;

930 -moz-transition: 300ms linear;

931 }

932

933 input:focus {

934 outline: none;

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

936 }

937

938 input[type=submit] {

939 float: right;

940 width: auto;

941 min-width: 0;

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

943 }

944

945 .describe_location {

946 position: absolute;

947 top: 6px;

948 right: 6px;

949 font-size: 10px;

950 color: $blue;

951 }

952 }

953

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

955

956 #mapkey {

957 .mapkey-table-key img {

958 display: block;

959 margin-left: auto;

960 margin-right: auto;

961 }

962 td {

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

964 }

965 }

966

967 /* Rules for search sidebar */

968

969 .search_results_entry {

970 ul li {

971 border-bottom: $keyline;

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

973 }

974

975 .search_details {

976 display: block;

977 float: right;

978 text-align: right;

979 margin-top: 0.2em;

980 margin-left: 0.5em;

981 }

982 }

983

984 .search_results_error {

985 color: #f00;

986 }

987

988 /* Rules for entity history */

989

990 #sidebar_content {

991 .browse_details {

992 position: relative;

993 border-bottom: $keyline;

994 }

995 }

996

997 .browse_status {

998 display: none;

999 }

1000

1001 /* Rules for the history sidebar */

1002

1003 #sidebar .changesets {

1004 li {

1005 padding: 15px 20px;

1006 border-bottom: 1px solid #ddd;

1007 cursor: pointer;

1008

1009 &.selected { background: #FFFFE6; }

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

1011 }

1012

1013 h4 {

1014 margin: 0;

1015 a {

1016 color: #000;

1017 }

1018 }

1019 }

1020

1021 /* Rules for the browse sidebar */

1022

1023 #sidebar_content {

1024 .browse-section {

1025 padding: $lineheight/2 $lineheight;

1026 border-bottom: 1px solid #ddd;

1027

1028 h4:first-child {

1029 margin-top: 0;

1030 word-wrap: break-word;

1031 }

1032 }

1033

1034 .browse-section:last-of-type {

1035 border-bottom: none;

1036 }

1037

1038 .paginate {

1039 float: right;

1040 padding: 1px 6px;

1041 border: 1px solid #eee;

1042 border-radius: 3px;

1043 }

1044

1045 .paginate ul {

1046 padding-left: 20px;

1047 }

1048

1049 .browse-field {

1050 margin-bottom: 10px;

1051

1052 h4 {

1053 padding: 5px 0 5px 10px;

1054 font-size: 12px;

1055 border: 1px solid #CCC;

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

1057 background-color: #F6F6F6;

1058 }

1059

1060 p {

1061 padding: 7px 10px;

1062 font-size: 12px;

1063 background-color: #FFF;

1064 border: 1px solid #CCC;

1065 border-top: 0;

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

1067 }

1068 }

1069

1070 .browse-tag-list {

1071 background-color: #F6F6F6;

1072 border: 1px solid #ddd;

1073 border-radius: 3px;

1074 font-size: 12px;

1075 table-layout: fixed;

1076 border-collapse: separate;

1077

1078 th, td {

1079 border-bottom: 1px solid #ddd;

1080 }

1081

1082 tr:last-child th, tr:last-child td {

1083 border-bottom: 0;

1084 }

1085

1086 .browse-tag-k,

1087 .browse-tag-v {

1088 width: 50%;

1089 padding: 6px 10px;

1090 word-wrap: break-word;

1091 }

1092

1093 .browse-tag-k {

1094 font-weight: 500;

1095 background-color: #F6F6F6;

1096 }

1097

1098 .browse-tag-v {

1099 border-left: 1px solid #ddd;

1100 background-color: #fff;

1101 }

1102 }

1103

1104 .warning {

1105 margin: $lineheight/2 0;

1106 padding: $lineheight/2;

1107 font-size: 90%;

1108 }

1109

1110 .note-comments li {

1111 margin: $lineheight/2 0;

1112

1113 p {

1114 margin-left: 10px;

1115 }

1116 }

1117

1118 .note-description {

1119 overflow: hidden;

1120 margin: 0 0 10px 10px;

1121 }

1122 }

1123

1124 /* Rules for export sidebar */

1125

1126 .export_form {

1127 padding: $lineheight;

1128

1129 .export_area_inputs,

1130 .export_button {

1131 text-align: center;

1132 }

1133

1134 .export_area_inputs {

1135 margin-bottom: $lineheight/2;

1136 input[type="text"] {

1137 width: 80px;

1138 text-align: center;

1139 margin-bottom: 5px;

1140 }

1141 }

1142

1143 .export_boxy {

1144 background: #eee;

1145 border: 1px solid #ccc;

1146 border-radius: 3px;

1147

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

1149 #minlon {

1150 float: left;

1151 margin-left: -1px;

1152 }

1153 #maxlon {

1154 float: right;

1155 margin-right: -1px;

1156 }

1157 #minlat { margin-bottom: 0; }

1158 }

1159

1160 .export_bound {

1161 margin: $lineheight/4;

1162 }

1163

1164 .export_button {

1165 margin-top: $lineheight;

1166 margin-bottom: $lineheight;

1167 }

1168

1169 dl {

1170 padding-left: $lineheight/2;

1171 dd {

1172 margin-left: 0;

1173 margin-bottom: 10px;

1174 }

1175 }

1176 }

1177

1178 /* Rules for edit pages */

1179

1180 .site-edit {

1181 #content {

1182 position: absolute;

1183 top: $headerHeight;

1184 bottom: 0;

1185 width: 100%;

1186 }

1187

1188 #map {

1189 height: 100%;

1190 overflow: hidden;

1191 }

1192 }

1193

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

1195

1196 .content-heading {

1197 background: $lightgrey;

1198

1199 h1 { font-size: 22px; }

1200 }

1201

1202 .content-body {

1203 h1, h2, h3, p, ul, ol {

1204 margin-bottom: $lineheight;

1205 }

1206

1207 h1, h2, h3 {

1208 margin-top: $lineheight/2;

1209 }

1210 }

1211

1212 .content-inner {

1213 position: relative;

1214 max-width: 900px;

1215 margin: auto;

1216 padding: $lineheight;

1217 }

1218

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

1220

1221 .user-new,

1222 .user-create,

1223 .user-terms {

1224 .content-body .content-inner {

1225 padding: 0;

1226 }

1227 }

1228

1229 .user-new,

1230 .user-create,

1231 .user-terms,

1232 .user-confirm {

1233 .content-heading .content-inner {

1234 height: 200px;

1235 }

1236 }

1237

1238 .header-illustration {

1239 background-position: 0 0;

1240 background-repeat: no-repeat;

1241 position: absolute;

1242 height: 200px;

1243 width: 100%;

1244 left: 0;

1245 bottom: 0;

1246

1247 &.new-user-main {

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

1249 }

1250

1251 &.confirm-main {

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

1253 }

1254

1255 &.new-user-terms {

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

1257 }

1258

1259 &.new-user-arm {

1260 height: 110px;

1261 width: 130px;

1262 left: 260px;

1263 top: 160px;

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

1265 z-index: 100;

1266 }

1267 }

1268

1269 #content.maximised {

1270 top: 0;

1271 left: 0;

1272 right: 0;

1273 bottom: 0;

1274 border: 0;

1275 z-index: 2000;

1276 }

1277

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

1279

1280 .content_map {

1281 position: relative;

1282 width: 45%;

1283 height: 400px;

1284 border: 1px solid #ccc;

1285 margin-bottom: $lineheight;

1286 float: right;

1287 }

1288

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

1290

1291 #trace_list {

1292 font-size: $lineheight/2;

1293 border-width: 0px;

1294 text-align: right;

1295

1296 .trace_summary {

1297 font-size: 12px;

1298 color: gray;

1299 }

1300

1301 .trace_pending {

1302 color: red;

1303 }

1304

1305 .trace_public {

1306 color: green;

1307 }

1308

1309 .trace_identifiable {

1310 color: green;

1311 }

1312

1313 .trace_trackable {

1314 color: red;

1315 }

1316

1317 .trace_private {

1318 color: red;

1319 }

1320 }

1321

1322 /* Rules for the user profile page */

1323

1324 #userinformation {

1325

1326 min-height: 100px;

1327 .userinformation-inner {

1328 float: left;

1329 }

1330 h2 {

1331 margin-top: 0;

1332 }

1333 .user-description {

1334 width: 100%;

1335 clear: both;

1336 }

1337 .deemphasize {

1338 margin: 0;

1339 }

1340 }

1341

1342 .admin-user-info small {

1343 margin-bottom: $lineheight/2;

1344 display: inline;

1345 margin-right: $lineheight;

1346 }

1347

1348 .activity-block {

1349 clear: left;

1350 border-bottom: 1px solid #ccc;

1351 padding-bottom: $lineheight;

1352 float: left;

1353 h3 {

1354 margin-bottom: $lineheight/2;

1355 }

1356 }

1357

1358 .contact-activity {

1359 margin-top: $lineheight;

1360 width: 100%;

1361 }

1362

1363 .activity-details p {

1364 margin-left: 70px;

1365 margin-bottom: 0;

1366 }

1367

1368 #friends-container .contact-activity ul {

1369 margin-left: 70px;

1370 }

1371

1372 .user-view {

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

1374 .content-inner {

1375 max-width: none;

1376 }

1377 p#no_home_location {

1378 margin: $lineheight;

1379 }

1380 .user_thumbnail {

1381 margin-top: $lineheight/4;

1382 float: left;

1383 }

1384 }

1385

1386 /* Rules for the user map */

1387

1388 .content_map .leaflet-popup-content {

1389 margin: $lineheight/2;

1390 min-height: 50px;

1391 }

1392

1393 /* Rules for user popups on maps */

1394

1395 .user_popup {

1396 min-width: 200px;

1397 p {

1398 padding: 0 0 5px 0;

1399 margin-top: 0 0 0 60px;

1400 font-size: 12px;

1401 }

1402 img.user_thumbnail {

1403 float: left;

1404 margin: 0 $lineheight/2 0 0;

1405 }

1406 }

1407

1408 /* Rules for the user list */

1409

1410 #user_list {

1411 font-size: $lineheight/2;

1412 width: 100%;

1413

1414 tr {

1415 vertical-align: middle;

1416 }

1417

1418 p {

1419 margin-top: 0px;

1420 margin-bottom: 0px;

1421 }

1422 }

1423

1424 #user_list_actions {

1425 float: right;

1426 margin-top: $lineheight/2;

1427 }

1428

1429 /* Rules for the diary list page */

1430

1431 .diary_post {

1432 position: relative;

1433 margin-top: $lineheight/2;

1434 padding-top: $lineheight;

1435 border-top: 1px solid #ccc;

1436

1437 .post_heading {

1438 margin-bottom: $lineheight;

1439

1440 h2 {

1441 margin-top: 0;

1442 margin-bottom: $lineheight/2;

1443 font-size: 24px;

1444 }

1445 }

1446

1447 img.user_thumbnail {

1448 float: left;

1449 }

1450

1451 small.deemphasize {

1452 float: left;

1453 display: block;

1454 }

1455

1456 ul.secondary-actions {

1457 display: inline-block;

1458 }

1459 }

1460

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

1462 display: inline;

1463 }

1464

1465 /* Rules for the diary entry page */

1466

1467 .diary_entry {

1468 #map {

1469 position: relative;

1470 width: 90%;

1471 height: 400px;

1472 border: 1px solid #ccc;

1473 display: none;

1474 margin-bottom: $lineheight;

1475 }

1476 #newcomment {

1477 border-top: 1px solid #ccc;

1478 padding-top: $lineheight;

1479 margin-top: $lineheight/2;

1480 }

1481 .comments {

1482 max-width: 740px;

1483 }

1484 .diary-comment {

1485 margin-top: $lineheight/2;

1486 border-top: 1px dashed #ccc;

1487 padding-top: $lineheight/2;

1488 &:first-child {

1489 margin-top: $lineheight;

1490 padding-top: $lineheight;

1491 border-top: 1px solid #ccc;

1492 }

1493 p {

1494 margin-bottom: $lineheight/2;

1495 }

1496 .comment-heading {

1497 margin-bottom: 0;

1498 margin-top: 0;

1499 }

1500 }

1501 }

1502

1503 .diary_entry-view img.user_thumbnail {

1504 float: left;

1505 }

1506

1507 /* Rules for the log in page */

1508

1509 #login_openid_buttons {

1510 margin-bottom: 0;

1511 }

1512

1513 #login_openid_buttons li {

1514 float: left;

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

1516 }

1517

1518 /* Rules for the account confirmation page */

1519

1520 .user-terms {

1521 .legale {

1522 border: 1px solid #ccc;

1523 padding: $lineheight;

1524 margin-bottom: $lineheight;

1525 overflow: auto;

1526 height: 20em;

1527 }

1528

1529 #decline {

1530 background: $lightblue;

1531 &:hover {

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

1533 }

1534 }

1535 }

1536

1537 /* Rules for the account settings page */

1538

1539 #accountForm .user_map {

1540 position: relative;

1541 width: 500px;

1542 height: 400px;

1543 border: 1px solid #ccc;

1544 }

1545

1546 #accountForm .user_image {

1547 margin-bottom: 0;

1548 }

1549

1550 #accountForm #user_image {

1551 margin-left: 20px;

1552 }

1553

1554 #accountForm ul.accountImage-options {

1555 margin-left: 120px;

1556 }

1557

1558 .nohome .location {

1559 display: none;

1560 }

1561

1562 #homerow .message {

1563 display: none;

1564 }

1565

1566 .nohome .message {

1567 display: inline !important;

1568 }

1569

1570 .content_map.settings_map {

1571 width: 50%;

1572 float: none;

1573 }

1574

1575 /* Rules for the oauth settings page */

1576

1577 .oauth_clients .buttons .oauth-edit {

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

1579 }

1580

1581 .oauth_clients .buttons .oauth-delete {

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

1583 }

1584

1585 /* Rules for messages pages */

1586

1587 .messages {

1588 width: 100%;

1589 border: 1px solid #ddd;

1590

1591 input[type="submit"] {

1592 margin: auto;

1593 }

1594 tbody tr {

1595 border-top: 1px solid #ccc;

1596 }

1597

1598 .inbox-row {

1599 background: #f8f8ff;

1600 }

1601

1602 .inbox-row-unread {

1603 background:#CBEEA7;

1604 }

1605

1606 .right {

1607 float: right;

1608 }

1609

1610 tr td,

1611 tr th {

1612 padding: $lineheight/4;

1613 }

1614 p:last-child,

1615 h2:last-child,

1616 h3:last-child,

1617 ol:last-child,

1618 ul:last-child {

1619 margin-bottom:0;

1620 }

1621 tr td {

1622 height: 30px;

1623 border-right: 1px solid $lightgrey;

1624 }

1625 }

1626

1627 .inbox-row .inbox-mark-read {

1628 display: none;

1629 }

1630

1631 .info-line {

1632 margin-bottom: $lineheight;

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

1634 border-bottom: 1px solid #ccc;

1635

1636 form, form div {

1637 display: inline;

1638 }

1639 }

1640

1641 .info-line .user_thumbnail_tiny {

1642 vertical-align: middle;

1643 }

1644

1645 .inbox-sent {

1646 white-space: nowrap;

1647 }

1648

1649 .inbox-mark-unread,

1650 .inbox-mark-read,

1651 .inbox-delete {

1652 width: 1%;

1653 }

1654

1655 .inbox-row-unread .inbox-mark-unread {

1656 display: none;

1657 }

1658

1659 .message-read .message-buttons {

1660 margin-top: $lineheight;

1661 margin-bottom: $lineheight * 1.5;

1662 padding-top: $lineheight;

1663 border-top: 1px solid $lightgrey;

1664 }

1665

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

1667 border-radius: 0;

1668 }

1669

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

1671

1672 .error {

1673 padding: $lineheight;

1674 background-color: #ff7070;

1675 }

1676

1677 .warning {

1678 padding: $lineheight;

1679 background-color: #ffe0cc;

1680 }

1681

1682 .notice {

1683 padding: $lineheight;

1684 background-color: #CBEEA7;

1685 }

1686

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

1688

1689 .formError {

1690 display: inline-block;

1691 padding: 5px 10px;

1692 margin-top: 5px;

1693 border-radius: 4px;

1694 font-size: 12px;

1695 color: #fff;

1696 background-color: #ff7070;

1697 }

1698

1699 /* Rules for rails validation error boxes */

1700

1701 #errorExplanation {

1702 width: 400px;

1703 border: 2px solid #ff7070;

1704 padding: 0 $lineheight/2;

1705 margin-bottom: $lineheight;

1706 background-color: #f0f0f0;

1707

1708 h2 {

1709 margin: 0 -10px 10px -10px;

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

1711 font-weight: bold;

1712 font-size: 12px;

1713 background-color: #c00;

1714 color: #fff;

1715 text-align: left;

1716 }

1717

1718 p {

1719 color: #333;

1720 margin-bottom: 0px;

1721 padding: $lineheight/4;

1722 }

1723

1724 ul {

1725 padding-left: $lineheight;

1726

1727 li {

1728 font-size: 12px;

1729 list-style: disc;

1730 }

1731 }

1732 }

1733

1734 /* Rules for forms */

1735

1736 .standard-form {

1737 fieldset {

1738 margin-bottom: $lineheight;

1739 }

1740 label.standard-label {

1741 display: block;

1742 margin-bottom: $lineheight/4;

1743 font-size: $typeheight;

1744 font-weight: bold;

1745 line-height: 1.5;

1746 }

1747 label.standard-label.secondary {

1748 display: inline-block;

1749 font-weight: normal;

1750 }

1751 .form-help {

1752 font-weight: normal;

1753 }

1754 .form-column {

1755 float: left;

1756 margin-right: 20px;

1757 }

1758 .form-divider {

1759 margin-top: $lineheight;

1760 padding-top: $lineheight;

1761 border-top: 1px solid $lightgrey;

1762 }

1763 .horizontal-list .form-row {

1764 float: left;

1765 padding-right: 10px;

1766 }

1767 .form-row {

1768 margin-bottom: $lineheight/2;

1769 }

1770 .form-list {

1771 margin-bottom: 0;

1772 }

1773 .form-list li {

1774 margin-bottom: 5px;

1775 }

1776 input[type="checkbox"],

1777 input[type="radio"] {

1778 float: left;

1779 margin-top: 5px;

1780 }

1781 }

1782

1783 #remember_me_openid {

1784 display: block;

1785 }

1786

1787 input[type="checkbox"],

1788 input[type="radio"] {

1789 margin-right: 5px;

1790 }

1791

1792 input[type="text"],

1793 input[type="email"],

1794 input[type="url"],

1795 input[type="password"],

1796 textarea {

1797 border: 1px solid #ccc;

1798 padding: 2px 5px;

1799 margin: 0;

1800 width: 200px;

1801

1802 &.field_with_errors {

1803 border: 2px solid #ff7070;

1804 }

1805 }

1806

1807 textarea {

1808 padding: 5px;

1809 width: 100%;

1810 }

1811

1812 /* Rules for user images */

1813

1814 img.user_image {

1815 max-width: 100px;

1816 max-height: 100px;

1817 border: 1px solid #ccc;

1818 margin-bottom: $lineheight;

1819 float: left;

1820 margin-right: $lineheight;

1821 }

1822

1823 img.user_thumbnail {

1824 max-width: 50px;

1825 max-height: 50px;

1826 border: 1px solid #ccc;

1827 margin-right: $lineheight;

1828 }

1829

1830 img.user_thumbnail_tiny {

1831 width: auto;

1832 height: auto;

1833 max-width: 25px;

1834 max-height: 25px;

1835 border: 1px solid #ccc;

1836 }

1837

1838 /* Rules for geo microformats */

1839

1840 abbr.geo {

1841 border-bottom: none;

1842 }

1843

1844 /* Rules for RSS buttons */

1845

1846 .rsssmall {

1847 position: relative;

1848 top: 3px;

1849 }

1850

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

1852

1853 ul.secondary-actions {

1854 font-style: normal;

1855 margin-bottom: 0;

1856 margin-left: 0;

1857 &.pager {

1858 display: inline-block;

1859 margin-right: 60px;

1860 }

1861 > li {

1862 display: block;

1863 float: left;

1864 list-style: none;

1865 border-left: 1px solid #ccc;

1866 padding-left: $lineheight/2;

1867 margin-right: $lineheight/2;

1868 &:first-child {

1869 border-left: 0;

1870 padding-left: 0;

1871 }

1872 &:last-child {

1873 margin-right: 0px;

1874 }

1875 }

1876 }

1877

1878 div.secondary-actions {

1879 padding: 10px;

1880 text-align: center;

1881 }

1882

1883 /* Utility for managing inner content areas */

1884

1885 .inner22 { padding: $lineheight;}

1886

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

1888

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

1890

1891 .inner20 { padding: $lineheight 0;}

1892

1893 .inner02 { padding: 0 $lineheight;}

1894

1895 /* Utility for general button styles */

1896

1897 input[type="button"],

1898 input[type="submit"],

1899 input[type="reset"],

1900 a.button {

1901 cursor: pointer;

1902 border: 0;

1903 display: inline-block;

1904 line-height: 20px;

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

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

1907 min-width: 120px;

1908 margin: 0 0 $lineheight/2 0;

1909 color: white;

1910 background: $blue;

1911 text-align: center;

1912 border-radius: 2px;

1913 -moz-border-radius: 2px;

1914 &:hover {

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

1916 text-decoration: none;

1917 }

1918 &.deemphasize {

1919 background: $lightblue;

1920 &:hover {

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

1922 }

1923 }

1924 &:disabled {

1925 background: $lightgrey;

1926 &:hover {

1927 background: $lightgrey;

1928 }

1929 }

1930 &:last-child {

1931 margin-bottom: 0;

1932 }

1933 }

1934

1935 .buttons {

1936 min-width: 200px;

1937 input[type="submit"],

1938 input[type="button"],

1939 input[type="reset"],

1940 .button {

1941 box-sizing: border-box;

1942 float: left;

1943 border-radius: 0;

1944 margin:0;

1945 min-width: 75px;

1946 max-width: 180px;

1947 border-right:1px solid white;

1948 text-overflow: ellipsis;

1949 white-space: nowrap;

1950 overflow: hidden;

1951 }

1952 input:first-child,

1953 .button:first-child {

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

1955 }

1956 input:last-child,

1957 .button:last-child {

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

1959 border-right-width: 0;

1960 }

1961 input:only-child,

1962 .button:only-child,

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

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

1965 border-radius:2px;

1966 border-right-width: 0;

1967 }

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

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

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

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

1972 border-right-width: 0;

1973 }

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

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

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

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

1978 border-right-width: 1px;

1979 }

1980 }

1981

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

1983

1984 .table0,

1985 .item0 {

1986 background: $offwhite;

1987 }

1988

1989 .table1,

1990 .item1 {

1991 background: #fff;

1992 }

1993

1994 /* Rules for OpenID logo */

1995

1996 .openid_logo {

1997 vertical-align: text-bottom;

1998 border: 0;

1999 }

2000

2001 /* Rules for rich text */

2002

2003 .richtext,

2004 .prose {

2005 h1, h2 {

2006 padding-bottom: $lineheight/2;

2007 border-bottom: 1px dashed #cccccc;

2008 margin-bottom: $lineheight/2;

2009 }

2010

2011 h1 {

2012 font-size: 24px;

2013 }

2014

2015 h2 {

2016 font-size: 18px;

2017 }

2018

2019 h3 {

2020 font-size: $typeheight;

2021 }

2022

2023 code {

2024 font-size: 13px;

2025 background: #e8e8e8;

2026 padding: 2px 3px;

2027 }

2028

2029 pre {

2030 font-size: 13px;

2031 background: #e8e8e8;

2032 padding: 2px 3px;

2033

2034 code {

2035 padding: 0;

2036 }

2037 }

2038

2039 img {

2040 padding: $lineheight;

2041 background-color: $offwhite;

2042 display: block;

2043 max-width: 100%;

2044 margin: auto;

2045 }

2046

2047 blockquote {

2048 border-left: $lineheight solid $offwhite;

2049 padding-left: $lineheight;

2050 margin: 0;

2051 color: #7E7E7E;

2052 }

2053

2054 ul, ol {

2055 padding-left: $lineheight;

2056 margin-bottom: $lineheight;

2057 margin-left: $lineheight;

2058 }

2059

2060 ul li {

2061 list-style: disc;

2062 }

2063

2064 ol li {

2065 list-style: decimal;

2066 }

2067 }

2068

2069 .diary_post .richtext {

2070 margin-top: $lineheight;

2071 }

2072

2073 .comments .richtext {

2074 margin-left: 70px;

2075 margin-top: 0;

2076 }

2077

2078 /* Rules for rich text editors */

2079

2080 input.richtext_title[type="text"] {

2081 width: 50%;

2082 width: -moz-calc(100% - 235px);

2083 width: -webkit-calc(100% - 235px);

2084 width: calc(100% - 235px);

2085

2086 @media only screen and (max-width:768px) {

2087 width: 100%;

2088 }

2089 }

2090

2091 .richtext_container {

2092 margin-bottom: $lineheight;

2093

2094 .richtext_content {

2095 width: 50%;

2096 width: -moz-calc(100% - 235px);

2097 width: -webkit-calc(100% - 235px);

2098 width: calc(100% - 235px);

2099 display: inline-block;

2100 vertical-align: top;

2101

2102 @media only screen and (max-width:768px) {

2103 width: 100%;

2104 }

2105

2106 .richtext_preview {

2107 display: inline-block;

2108 padding: $lineheight;

2109 background-color: $offwhite;

2110 overflow-x: auto;

2111

2112 &.loading {

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

2114 background-repeat: no-repeat;

2115 background-position: center;

2116 }

2117

2118 > :first-child {

2119 margin-top: 0px;

2120 }

2121 }

2122 }

2123

2124 .richtext_help {

2125 display: inline-block;

2126 vertical-align: top;

2127 margin-left: 15px;

2128 background-color: #f8f8ff;

2129 padding: $lineheight/2;

2130 width: 220px;

2131

2132 ul {

2133 margin-bottom: 0;

2134 }

2135

2136 h4.heading, li {

2137 border-bottom: 1px solid #ccc;

2138 margin-bottom: $lineheight/4;

2139 padding-bottom: $lineheight/4;

2140 }

2141

2142 li h4, li span, li p {

2143 display: inline-block;

2144 vertical-align: top;

2145 font-size: 11px;

2146 }

2147

2148 li h4 {

2149 width: 40%;

2150 margin: 0;

2151 }

2152

2153 li span, li p {

2154 width: 50%;

2155 margin-left: $lineheight/2;

2156 margin-bottom: $lineheight/4;

2157 white-space: nowrap;

2158 }

2159 }

2160 }

2161

2162 /* Rules for the user notes list */

2163

2164 .note_list {

2165 tr.creator {

2166 background-color: #eeeeee;

2167 }

2168

2169 td {

2170 padding: 3px;

2171 }

2172

2173 p {

2174 margin-bottom: 0px;

2175 }

2176 }

2177

2178 /* Rules for the iD editor */

2179

2180 .id-embed {

2181 width: 100%;

2182 height: 100%;

2183 }

2184

2185 /* Rules for dropdown menus */

2186

2187 .dropdown {

2188 position: relative;

2189 }

2190

2191 .dropdown-toggle {

2192 *margin-bottom: -3px;

2193 }

2194

2195 .dropdown-toggle:active,

2196 .open .dropdown-toggle {

2197 outline: 0;

2198 }

2199

2200 .caret {

2201 display: inline-block;

2202 width: 0;

2203 height: 0;

2204 vertical-align: top;

2205 border-top: 4px solid #000000;

2206 border-right: 4px solid transparent;

2207 border-left: 4px solid transparent;

2208 content: "";

2209 }

2210

2211 .dropdown .caret {

2212 margin-top: 8px;

2213 margin-left: 2px;

2214 }

2215

2216 .dropdown-menu {

2217 position: absolute;

2218 top: 100%;

2219 left: -1px;

2220 z-index: 1000;

2221 display: none;

2222 float: left;

2223 min-width: 160px;

2224 padding: 5px 0;

2225 margin: 0;

2226 list-style: none;

2227 background-color: #ffffff;

2228 border: 1px solid #ccc;

2229 border-radius: 0 3px 3px;

2230 *border-right-width: 2px;

2231 *border-bottom-width: 2px;

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

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

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

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

2236 -moz-background-clip: padding;

2237 background-clip: padding-box;

2238 }

2239

2240 .dropdown-menu.pull-right {

2241 right: 0;

2242 left: auto;

2243 }

2244

2245 .dropdown-menu .divider {

2246 *width: 100%;

2247 height: 1px;

2248 margin: 9px 1px;

2249 *margin: -5px 0 5px;

2250 overflow: hidden;

2251 background-color: #e5e5e5;

2252 border-bottom: 1px solid #ffffff;

2253 }

2254

2255 .dropdown-menu > li > a {

2256 display: block;

2257 padding: 3px 10px;

2258 clear: both;

2259 font-weight: normal;

2260 line-height: 20px;

2261 color: #333333;

2262 white-space: nowrap;

2263 }

2264

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

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

2267 .dropdown-submenu:hover > a,

2268 .dropdown-submenu:focus > a {

2269 color: #ffffff;

2270 text-decoration: none;

2271 background-color: $green;

2272 }

2273

2274 .dropdown-menu > .active > a,

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

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

2277 color: #ffffff;

2278 text-decoration: none;

2279 background-color: $green;

2280 outline: 0;

2281 }

2282

2283 .dropdown-menu > .disabled > a,

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

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

2286 color: #999999;

2287 }

2288

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

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

2291 text-decoration: none;

2292 cursor: default;

2293 background-color: transparent;

2294 background-image: none;

2295 }

2296

2297 .open {

2298 *z-index: 1000;

2299 }

2300

2301 .open > .dropdown-menu {

2302 display: block;

2303 }

2304

2305 .dropdown-backdrop {

2306 position: fixed;

2307 top: 0;

2308 right: 0;

2309 bottom: 0;

2310 left: 0;

2311 z-index: 990;

2312 }

2313

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

2315 .site-welcome, .site-fixthemap {

2316 .center {

2317 text-align: center;

2318 .sprite {

2319 float: none;

2320 margin: auto;

2321 }

2322 }

2323

2324 .sprite {

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

2326 background-size: 500px 250px;

2327 display: block;

2328 float: left;

2329 }

2330

2331 .icon-list {

2332 padding-bottom: 20px;

2333 div {

2334 margin-bottom: 10px;

2335 p {

2336 padding-top: 10px;

2337 }

2338 }

2339 }

2340 .sprite.small {

2341 width: 50px;

2342 height: 50px;

2343 }

2344

2345 .sprite.x {

2346 background-position: -50px 0;

2347 }

2348

2349 .sprite.term {

2350 margin-right: 10px;

2351 vertical-align: middle;

2352 }

2353

2354 .sprite.node {

2355 background-position: -100px 0;

2356 }

2357

2358 .sprite.way {

2359 background-position: -150px 0;

2360 }

2361

2362 .sprite.tag {

2363 background-position: -200px 0;

2364 }

2365

2366 .sprite.editor {

2367 background-position: -250px 0;

2368 }

2369

2370 .sprite.question {

2371 background-position: -300px 0;

2372 }

2373

2374 .start-mapping {

2375 margin: auto;

2376 cursor: pointer;

2377 border: none;

2378 padding: 20px 40px;

2379 font-size: 30px;

2380 text-decoration: none;

2381 }

2382

2383 .note-box {

2384 margin-top: 20px;

2385 background-color: $offwhite;

2386 }

2387

2388 .icon.note {

2389 background-color: #333;

2390 border-radius: 4px;

2391 }

2392 }

2393

2394 .site-about #content {

2395 //background-color: #000;

2396 background-color: #eee;

2397 background-position: 50% 50%;

2398 background-repeat: no-repeat;

2399 background-size: cover;

2400 background-attachment: fixed;

2401

2402 .caption {

2403 max-width: 200px;

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

2405 position: fixed;

2406 text-align: right;

2407 right: 20px;

2408 bottom: 60px;

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

2410 color: #eee;

2411 opacity: 0.8;

2412 display: none;

2413 }

2414

2415 .caption a {

2416 color: white;

2417 white-space: nowrap;

2418 text-decoration: none;

2419 }

2420

2421 a.next {

2422 display: block;

2423 position: fixed;

2424 right: 10px;

2425 bottom: 10px;

2426 width: 40px;

2427 height: 40px;

2428 border-radius: 5px;

2429 text-indent: -9999px;

2430 overflow: hidden;

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

2432 background-color: #000;

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

2434 }

2435

2436 .content-inner {

2437 position: relative;

2438 color: #333;

2439 min-width: 320px;

2440 max-width: 640px;

2441

2442 .section {

2443 margin-bottom: 30px;

2444 }

2445

2446 .section:last-child {

2447 margin-bottom: 0;

2448 }

2449 }

2450

2451 .text {

2452 background: white;

2453 padding: 40px;

2454 }

2455

2456 .attr {

2457 position: relative;

2458 padding: 170px 40px 20px;

2459 background: #333;

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

2461 margin-bottom: 0;

2462 margin-top: -20px;

2463

2464 h1 {

2465 display: block;

2466 color: white;

2467 font-weight: 300;

2468 font-size: 34px;

2469 span {

2470 color: #76c551;

2471 }

2472 }

2473

2474 .user-image {

2475 position: absolute;

2476 top: 0px;

2477 right: 240px;

2478 left: 0px;

2479 height: 150px;

2480 background-position: 0 50%;

2481 background-repeat: no-repeat;

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

2483 background-size: cover;

2484 background-color: #76c551;

2485 }

2486

2487 .byosm {

2488 position: absolute;

2489 top: 0px;

2490 right: 0px;

2491 z-index: 1;

2492 width: 240px;

2493 height: 150px;

2494 padding: 20px 20px 20px 40px;

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

2496 white-space: nowrap;

2497 color: #fff;

2498 background: #76c551;

2499 }

2500

2501 .byosm span {

2502 display: inline-block;

2503 width: 20px;

2504 margin-left: -20px;

2505 }

2506 }

2507

2508 h2 {

2509 margin-bottom: 10px;

2510 }

2511

2512 .icon {

2513 width: 30px;

2514 height: 30px;

2515 margin-right: 10px;

2516 vertical-align: middle;

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

2518

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

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

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

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

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

2524 }

2525 }

2526

2527 @import 'browse';

2528

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

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

2531 display: none;

2532 }

2533 }

2534