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

1 /* Parameters */

2 $lineheight: 20px;

3 $typeheight: 14px;

5 $offwhite: #f4f4ff;

6 $blue: #7092FF;

7 $lightblue: #B8C5F0;

8 $grey: #AAA;

9 $keyline: #CCC;

10 $hovercolor: 20%;

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

14 /* Minimal CSS reset */

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

17 margin: 0;

18 padding: 0;

19 border: 0;

20 font-size:100%;

21 }

23 fieldset,img { border: 0; }

25 legend { color: #000; }

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

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

31 table {

32 border-collapse: collapse;

33 border-spacing: 0;

34 }

36 li { list-style: none; }

38 input,

39 select,

40 textarea,

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

43 abbr, acronym {

44 border-bottom: .1em dotted;

45 cursor: help;

46 }

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

50 .clearfix:before,

51 .clearfix:after {

52 content: " ";

53 display: table;

54 }

56 .clearfix:after {

57 clear: both;

58 }

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

62 * {

63 -moz-box-sizing: border-box;

64 -webkit-box-sizing: border-box;

65 box-sizing: border-box;

66 }

68 body {

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

70 font-size: $typeheight;

71 line-height: 1.6666;

72 color: #222;

73 background-color: #fff;

74 margin: 0px;

75 padding: 0px;

76 text-align: left;

77 }

79 body.slim {

80 background-color: #f0f0f0;

81 }

83 h1, h2, h3 {

84 margin-top: $lineheight/2;

85 margin-bottom: $lineheight;

86 font-weight: bold;

87 line-height: 1.2;

88 }

90 h1, h2 {

91 font-size: 32px;

92 }

94 #content h2 {

95 font-size: 21px;

96 }

98 h3 {

99 font-size: 21px;

100 margin-top: $lineheight/2;

101 margin-bottom: $lineheight;

102 }

103

104 h4,h5,h6 {

105 font-size: $typeheight;

106 margin-top: $lineheight/2;

107 margin-bottom: $lineheight/2;

108 font-weight: bold;

109 line-height: 1.5;

110 }

111

112 p, ul {

113 margin-bottom: $lineheight;

114 }

115

116 p > img {

117 width: auto;

118 max-width: 100%;

119 }

120

121 small, aside {

122 font-size: 12px;

123 }

124

125 h1:first-child,

126 h2:first-child,

127 h3:first-child,

128 h4:first-child,

129 h5:first-child,

130 h6:first-child {

131 margin-top: 0;

132 }

133

134 .column-1 {

135 width: 50%;

136 margin: 0 0 $lineheight/2 0;

137 }

138

139 .small_icon {

140 vertical-align: middle;

141 margin-right: $lineheight/4;

142 }

143

144 /* Rules for links */

145

146 a {

147 color: #00f;

148 text-decoration: none;

149 &:hover {

150 text-decoration: underline;

151 }

152 }

153

154 /* Rules for horizontal lines */

155

156 hr {

157 border: none;

158 background-color: #ccc;

159 color: #ccc;

160 height: 1px;

161 }

162

163 /* General styles for tables */

164

165 table {

166 width: 100%;

167 margin-bottom: $lineheight;

168 th, td {

169 text-align: left;

170 padding: $lineheight/4;

171 line-height: $lineheight;

172 }

173 th {

174 font-weight: bold;

175 vertical-align: top;

176 }

177 td {

178 vertical-align: middle;

179 }

180 }

181

182 /* Rules for the whole left sidebar, including the logo */

183

184 #left {

185 position: absolute;

186 height: 100%;

187 width: 185px;

188 font-size: 11px;

189 line-height: 1.1;

190 z-index: 100;

191 border-right: 1px solid #ccc;

192 }

193

194 /* Rules for the OpenStreetMap logo in the top left corner */

195

196 #logo {

197 display: block;

198 width: 170px;

199 min-width: 170px;

200 padding: $lineheight $lineheight/4;

201 text-align: center;

202 margin: auto;

203 }

204

205 #logo h1 {

206 font-size: 18px;

207 line-height: 1;

208 text-align: center;

209 margin: 0;

210 }

211

212 #logo h2 {

213 font-size: $lineheight/2;

214 line-height: 15px;

215 margin: 0;

216 }

217

218 /* Rules for the site name */

219

220 #small-title {

221 display: none;

222 }

223

224 /* Rules for the introductory text displayed in the left sidebar to new users */

225

226 .sidebar-copy {

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

228 p {

229 margin: $lineheight/4 0;

230 }

231 }

232 .sidebar-copy.intro {

233 border-top: 1px solid #ccc;

234 }

235

236 /*

237 * Rules for alert boxes shown in the left sidebar when important

238 * information needs to be conveyed such as when the site is

239 * undergoing maintenance.

240 */

241

242 .sidebar-alert {

243 padding: $lineheight/4;

244 border-top: 1px solid #ccc;

245 margin-top: 4px;

246 margin-bottom: -5px;

247 background: #e00;

248 font-size: 12px;

249 font-weight: bold;

250 p {

251 margin: $lineheight/4;

252 }

253 }

254

255 /*

256 * Rules for notice boxes shown in the left sidebar when important, but

257 * non-critical information needs to be conveyed such as notices about

258 * donation drives.

259 */

260

261 .sidebar-notice {

262 padding: $lineheight/4;

263 border-top: 1px solid #ccc;

264 margin-top: 4px;

265 margin-bottom: -5px;

266 background: #ea0;

267 font-size: 12px;

268 p {

269 margin: $lineheight/4;

270 }

271 }

272

273 /* Rules for the menu displayed in the left sidebar */

274

275 .left_menu {

276 left: 0px;

277 margin: 0;

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

279 font-size: 12px;

280 line-height: 1.25;

281 list-style-type: none;

282 border-bottom: 1px solid #ccc;

283 border-top: 1px solid #ccc;

284 img {

285 margin: $lineheight/2 0px;

286 }

287

288 ul {

289 padding: 0;

290 margin: 0;

291 }

292

293 li {

294 list-style-type: none;

295 padding: 0;

296 margin: 0;

297 }

298

299 h4 {

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

301 font-size: 12px;

302 margin: 0;

303 }

304

305 li:last-child h4 {

306 padding-top: 0;

307 }

308 }

309

310 /* Rules for SOTM advert */

311

312 #sotm {

313 width: 165px;

314 margin: $lineheight/2;

315 padding: 0px;

316 border: 0px;

317 background: #fff;

318 img {

319 width: 165px;

320 }

321 }

322

323 /*

324 * Rules for "optional boxes" which appear in the left sidebar on

325 * certain pages. Current users are the seach box on the main page

326 * and the tag cloud on the traces pages.

327 */

328

329 .optionalbox {

330 left: 0px;

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

332 margin: $lineheight/4 0;

333 text-align: left;

334 }

335

336 /* Rules for the search box */

337

338 #search_field {

339 position: relative;

340

341 form {

342 width: 165px;

343 }

344

345 input[type="text"] {

346 width: 165px;

347 padding: 3px;

348 font-size: $typeheight;

349 line-height: 1.1;

350 height: 25px;

351 padding: 2px 0px 2px $lineheight/4;

352 box-shadow: inset #DDD 0px 1px 3px;

353 }

354

355 input[type="text"]:focus {

356 outline: none;

357 border: 1px solid #000;

358 }

359

360 input[type="submit"] {

361 border: 0;

362 margin: 0;

363 padding: 0;

364 width: 15px;

365 height: 15px;

366 min-width: 0;

367 text-indent: -1000px;

368 overflow: hidden;

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

370 position: absolute;

371 top: $lineheight/4;

372 right: $lineheight/4;

373 cursor: pointer;

374 }

375 }

376

377 .search_help {

378 margin: $lineheight/4 0 0 0;

379 }

380

381 /* Utility for de-emphasizing content */

382

383 .deemphasize {

384 color: #999;

385 a {

386 color: $blue;

387 }

388 }

389

390 /* Rules for donation request box */

391

392 .donate {

393 display: block;

394 width: 163px;

395 padding: $lineheight/4;

396 border: 1px solid #AED1A0;

397 background: #cbeea7;

398 font-size: $typeheight;

399 line-height: 1.4;

400 text-align: center;

401 border-radius: 2px;

402 color: #222;

403 margin: $lineheight/2 $lineheight/2 0px $lineheight/2;

404

405 &:hover {

406 background: #9ed485;

407 text-decoration: none;

408 }

409 span {

410 margin: 0;

411 padding-left: 18px;

412 background: image-url("sprite.png") 0 -29px no-repeat;

413 }

414 }

415

416 /* Rules for Creative Commons logo button */

417

418 #cclogo {

419 margin: $lineheight/2 0;

420 float: right;

421 }

422

423 /* Rules for tabbed navigation bar */

424

425 #top-bar {

426 position: relative;

427 margin-left: 185px;

428 height: 30px;

429 border-bottom: 1px solid #ccc;

430 background: white;

431 z-index: 100;

432 }

433

434 .site-edit #top-bar,

435 .site-index #top-bar,

436 .site-export #top-bar {

437 position: fixed;

438 left: 0;

439 right: 0;

440 }

441

442 #tabnav {

443 height: 29px;

444 margin-bottom:0;

445 overflow: hidden;

446 li {

447 display: inline;

448 }

449 a, a:link, a:visited {

450 float: left;

451 font-weight: bold;

452 padding: 3px $lineheight/2;

453 text-decoration: none;

454 color: #333;

455 float: left;

456 margin-right: 1px;

457 -webkit-transition: color 200ms ease-in;

458 -moz-transition: color 200ms ease-in;

459 -o-transition: color 200ms ease-in;

460 transition: color 200ms ease-in;

461 }

462 }

463

464 .site-index #tabnav a#viewanchor,

465 .site-edit #tabnav a#editanchor,

466 .changeset-list #tabnav a#historyanchor,

467 .site-export #tabnav a#exportanchor {

468 border-bottom: 1px solid #aaa;

469 background: #9ed485;

470 color: #000;

471 }

472

473 #tabnav a:link:hover, #tabnav a:visited:hover {

474 text-decoration: underline;

475 }

476

477 #tabnav a:link.disabled,

478 #tabnav a:visited.disabled,

479 #tabnav a:link:hover.disabled,

480 #tabnav a:visited:hover.disabled {

481 color: #ccc;

482 cursor: default;

483 &:hover {

484 text-decoration: none;

485 }

486 }

487

488 /* Utility for styling notification numbers */

489

490 .count-number {

491 padding: 2px $lineheight/4;

492 border-radius: 2px;

493 background: #d7d7ff;

494 margin: 0 2px;

495 font-size: 11px;

496 color: #333;

497 }

498

499 /* Rules for greeting bar in the top right corner */

500

501 #greeting {

502 float: right;

503 padding-top: 3px;

504 margin-right: $lineheight/4;

505 }

506

507 .greeting-bar-unread {

508 font-weight: bold;

509 }

510

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

512

513 #noscript {

514 z-index: 20000000;

515 position: absolute;

516 top: 15px;

517 left: 15px;

518 }

519

520 /* Rules for Leaflet maps */

521

522 .leaflet-control-attribution {

523 a.disabled {

524 color: #99c9dc;

525 cursor: default;

526 text-decoration: none;

527 }

528

529 ul.secondary-actions {

530 float: left;

531 margin-right: $lineheight/4;

532

533 &:only-child {

534 margin-right: 0px;

535 }

536 }

537 }

538

539 .site-index .leaflet-top,

540 .site-export .leaflet-top {

541 top: $lineheight/2 !important;

542 .leaflet-control {

543 margin-top: 0px !important;

544 }

545 }

546

547 .site-index #map .olControlScaleLine,

548 .site-export #map .olControlScaleLine {

549 left: $lineheight/2 !important;

550 }

551

552 .leaflet-popup-scrolled {

553 padding-right: $lineheight;

554 border-bottom: 0px !important;

555 border-top: 0px !important;

556 }

557

558 .leaflet-popup-content-wrapper {

559 border-radius: 4px !important;

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

561 }

562

563 /* Rules for edit menu */

564

565 .menuicon {

566 padding: 0 $lineheight/4;

567 font-weight: normal;

568 display: inline-block;

569 &:hover {

570 text-decoration: none !important;

571 }

572 }

573

574 .menu {

575 display: none;

576 z-index: 10000;

577 position: absolute;

578 background-color: #ffffff;

579 border: 1px solid $keyline;

580 border-top: 0px;

581 ul {

582 margin: 0px;

583 }

584 li {

585 padding: 2px $lineheight/4;

586 border-top: 1px solid #eee;

587 white-space: nowrap;

588 }

589 }

590

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

592

593 #attribution {

594 display: none;

595 }

596

597 .attribution_license,

598 .attribution_project {

599 text-align: left;

600 }

601

602 .attribution_notice {

603 text-align: center;

604 }

605

606 /* Rules for the popout map sidebar */

607

608 #sidebar {

609 display: none;

610 position: absolute;

611 overflow: auto;

612 top: 0px;

613 bottom: 0px;

614 left: 0px;

615 border-right: 1px solid $keyline;

616 width: 33.3333%;

617 .sidebar_heading {

618 position: relative;

619 padding: $lineheight/2 $lineheight;

620 z-index: 9999;

621 background: $offwhite;

622 border-bottom: 1px solid #ccc;

623 }

624 h4 {

625 margin: 0;

626 }

627 ul {

628 margin-bottom: 0;

629 &:last-child {

630 border-bottom: 1px solid #ccc;

631 }

632 li {

633 margin-bottom: $lineheight/4;

634 &:last-child {

635 margin-bottom: 0;

636 }

637 }

638 }

639 }

640

641 #sidebar_close {

642 position: absolute;

643 height: $lineheight;

644 top: 0px;

645 bottom: 0;

646 right: $lineheight;

647 margin: auto;

648 }

649

650 #sidebar_content {

651 position: relative;

652 margin-bottom: 20px;

653 width: 100%;

654 h4 {

655 padding: 0 $lineheight $lineheight/2 $lineheight;

656 margin-top: $lineheight/2;

657 margin-bottom: 0;

658 border-bottom: 1px solid #ddd;

659 }

660 }

661

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

663

664 #mapkey {

665 padding: $lineheight $lineheight 0 $lineheight;

666 .mapkey-table-key img {

667 display: block;

668 margin-left: auto;

669 margin-right: auto;

670 }

671 td {

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

673 }

674 }

675

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

677

678 .search_searching {

679 margin-top: $lineheight/4;

680 margin-bottom: $lineheight/4;

681 }

682

683 .search_results_entry {

684 margin-bottom: 0;

685

686 .search_details {

687 display: block;

688 text-align: right;

689 }

690 }

691

692 .search_results_entry .search_searching {

693 text-align: center;

694 margin: $lineheight auto;

695 width: $lineheight;

696 display: block;

697 }

698

699 ul.results-list li { border-bottom: 1px solid #ccc; }

700

701 .search_results_error {

702 color: #f00;

703 }

704

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

706

707 #browse_content {

708 position: relative;

709 .browse_show_list.button {

710 position: absolute;

711 left: $lineheight;

712 right: $lineheight;

713 bottom: -40px;

714 margin-bottom: 0;

715 }

716 a.more-details {

717 position: absolute;

718 top: 0;

719 right: $lineheight;

720 }

721 ul li {

722 margin-bottom: 0;

723 }

724 }

725

726 .browse_details {

727 position: relative;

728 }

729

730 .browse_status {

731 display: none;

732 }

733

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

735

736 .export_bounds {

737 text-align: center;

738 }

739

740 .export_area_inputs {

741 margin-bottom: $lineheight/2;

742 input[type="text"] {

743 width: 60px;

744 margin-bottom: 5px;

745 }

746 }

747

748 .export_bound {

749 margin: $lineheight/4;

750 }

751

752 .export_details input[type="text"]#export_html_text {

753 width: 100%;

754 }

755

756 #sidebar #marker_inputs li:last-child {

757 margin-bottom: $lineheight/2;

758 }

759

760 #export_osm,

761 #export_mapnik,

762 #export_osmarender {

763 display: none;

764 }

765

766 /* Rules for the main content area */

767

768 #content {

769 padding: $lineheight;

770 position: relative;

771 }

772

773 .site-edit #content,

774 .site-index #content,

775 .site-export #content {

776 position: fixed;

777 padding: 0;

778 top: 30px; bottom: 0;

779 left: 184px; right: 0;

780 border-left: 1px solid #ccc;

781 }

782

783 .wrapper {

784 margin-left: 184px;

785 border-left: 1px solid #ccc;

786 text-align: left;

787 }

788

789 .site-edit #content {

790 top: 30px;

791 }

792

793 #content.maximised {

794 top: 0;

795 left: 0;

796 right: 0;

797 bottom: 0;

798 border: 0;

799 z-index: 1000;

800 }

801

802 #slim_container {

803 width: 100%;

804 }

805

806 #slim_container_content {

807 max-width: 50em;

808 background-color: #FFFFFF;

809 margin: $lineheight/2 auto;

810 padding: 3px;

811 border-radius: 25px;

812 -moz-border-radius: 25px;

813 border: 1px solid #e6e6e6;

814 }

815

816 #slim_content {

817 margin: $lineheight/2;

818 margin-top: 95px;

819 max-width: 50em;

820

821 .content-heading {

822 margin-bottom: 15px;

823 }

824 }

825

826 #slim_header {

827 margin: 30px $lineheight/2;

828 position: absolute;

829 top: 0px;

830 margin-right: $lineheight/4;

831 img {

832 vertical-align: middle;

833 margin-bottom: $lineheight/4;

834 margin-right: $lineheight/4;

835 }

836 }

837

838 .content-heading {

839 position: relative;

840 padding: $lineheight;

841 background: $offwhite;

842 h1, h2 {

843 margin-bottom: $lineheight/2;

844 line-height: 100%;

845 &:last-child {

846 margin-bottom: 0;

847 }

848 }

849 p {

850 margin-top: $lineheight/2;

851 margin-bottom: 0px;

852 }

853 }

854

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

856

857 .content_map {

858 position: relative;

859 width: 45%;

860 height: 400px;

861 border: 1px solid #ccc;

862 margin-bottom: $lineheight;

863 float: right;

864 }

865

866 .content_map #small_map {

867 height: 100%;

868 width: 100%;

869 margin-bottom: $lineheight;

870 }

871

872 /* Rules for the home page */

873

874 .site-export #map,

875 .site-index #map {

876 position: absolute;

877 top: 0px;

878 bottom: 0px;

879 left: 0px;

880 right: 0px;

881 }

882

883 /* Rules for the edit page */

884

885 .site-edit #map {

886 position: absolute;

887 top: 0px;

888 bottom: 0px;

889 left: 0px;

890 right: 0px;

891 overflow: hidden;

892 }

893

894 /* Rules for the changeset list shown by the history tab etc */

895

896 #changeset_list {

897 width: 100%;

898 ul {

899 padding: $lineheight/2 0;

900 margin-bottom: 0px;

901 border-top: 1px solid #ccc;

902 &:last-child {

903 border-bottom: 1px solid #ccc;

904 }

905 }

906 .selected {

907 background: #FFFFC0;

908 }

909 .date,

910 .user {

911 border-left: 1px solid #ccc;

912 padding-left: $lineheight/4;

913 margin-right: $lineheight/4;

914 }

915 }

916

917 #changeset_list_map_wrapper {

918 position: absolute;

919 width: 50%;

920 height: 490px;

921 top: 0;

922 right: 0;

923 }

924

925 #changeset_list_map_wrapper.scrolled {

926 position: fixed;

927 }

928

929 #changeset_list_map {

930 position: absolute;

931 bottom: $lineheight;

932 top: $lineheight;

933 right: $lineheight;

934 left: $lineheight;

935 border: 1px solid #ccc;

936 }

937

938 #changeset_list_map_wrapper.scrolled #changeset_list_map {

939 margin-left: 93px;

940 }

941

942 /* Rules for the data browser */

943

944 .browse-section {

945 border-top: 1px solid #ccc;

946 margin-top: $lineheight/2;

947 padding-top: $lineheight/2;

948 &:first-child {

949 margin-top: 0;

950 }

951 .warning {

952 background-color: #ffe0cc;

953 margin: 0px;

954 padding: 4px 6px;

955 max-width: 100%;

956 }

957 h4, p {

958 margin-bottom: $lineheight/4;

959 }

960 p, ul, .bbox, .geo {

961 display: inline-block;

962 vertical-align: top;

963 max-width: 65%;

964 }

965 ul p {

966 margin-left: 0;

967 margin-bottom: 0;

968 }

969 h4 {

970 width: 33.3333%;

971 display: inline-block;

972 vertical-align: top;

973 }

974 }

975

976 .bbox {

977 div {

978 width: 33.3333%;

979 text-align: center;

980 padding: $lineheight/4 0;

981 overflow: hidden;

982 text-overflow: ellipsis;

983 float: left;

984 }

985 .max_lat,

986 .min_lat {

987 margin-left: auto;

988 margin-right: auto;

989 width: 100%;

990 }

991 }

992

993 #browse_map .geolink {

994 display: none;

995 }

996

997 #browse_map .secondary-actions {

998 margin-bottom: $lineheight/2;

999 }

1000

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

1002

1003 #trace_list {

1004 font-size: $lineheight/2;

1005 border-width: 0px;

1006 text-align: right;

1007

1008 .trace_summary {

1009 font-size: 12px;

1010 color: gray;

1011 }

1012

1013 .trace_pending {

1014 color: red;

1015 }

1016

1017 .trace_public {

1018 color: green;

1019 }

1020

1021 .trace_identifiable {

1022 color: green;

1023 }

1024

1025 .trace_trackable {

1026 color: red;

1027 }

1028

1029 .trace_private {

1030 color: red;

1031 }

1032 }

1033

1034 /* Rules for the user profile page */

1035

1036 #userinformation {

1037

1038 min-height: 100px;

1039 .userinformation-inner {

1040 float: left;

1041 }

1042 h2 {

1043 margin-top: 0;

1044 }

1045 .user-description {

1046 width: 100%;

1047 clear: both;

1048 }

1049 .deemphasize {

1050 margin: 0;

1051 }

1052 }

1053

1054 .admin-user-info small {

1055 margin-bottom: $lineheight/2;

1056 display: inline;

1057 margin-right: $lineheight;

1058 }

1059

1060 .activity-block {

1061 clear: left;

1062 border-bottom: 1px solid #ccc;

1063 padding-bottom: $lineheight;

1064 float: left;

1065 h3 {

1066 margin-bottom: $lineheight/2;

1067 }

1068 }

1069

1070 .contact-activity {

1071 margin-top: $lineheight;

1072 width: 100%;

1073 }

1074

1075 .activity-details p {

1076 margin-left: 70px;

1077 margin-bottom: 0;

1078 }

1079

1080 #friends-container .contact-activity ul {

1081 margin-left: 70px;

1082 }

1083

1084 .user-view {

1085 p#no_home_location {

1086 margin: $lineheight;

1087 }

1088 .user_thumbnail {

1089 margin-top: $lineheight/4;

1090 float: left;

1091 }

1092 }

1093

1094 /* Rules for the user map */

1095

1096 .content_map .leaflet-popup-content {

1097 margin: $lineheight/2;

1098 min-height: 50px;

1099 }

1100

1101 /* Rules for user popups on maps */

1102

1103 .user_popup {

1104 min-width: 200px;

1105 p {

1106 padding: 0 0 5px 0;

1107 margin-top: 0 0 0 60px;

1108 font-size: 12px;

1109 }

1110 img.user_thumbnail {

1111 float: left;

1112 margin: 0 $lineheight/2 0 0;

1113 }

1114 }

1115

1116 /* Rules for the user list */

1117

1118 #user_list {

1119 font-size: $lineheight/2;

1120 width: 100%;

1121

1122 tr {

1123 vertical-align: middle;

1124 }

1125

1126 p {

1127 margin-top: 0px;

1128 margin-bottom: 0px;

1129 }

1130 }

1131

1132 #user_list_actions {

1133 float: right;

1134 margin-top: $lineheight/2;

1135 }

1136

1137 /* Rules for the diary list page */

1138

1139 .diary_entry-list img.user_thumbnail {

1140 float: left;

1141 }

1142

1143 .diary_post {

1144 max-width: 740px;

1145 position: relative;

1146 margin-top: $lineheight/2;

1147 padding-top: $lineheight;

1148 border-top: 1px solid #ccc;

1149

1150 &:first-child {

1151 margin-top: 0;

1152 border-top: 0;

1153 padding-top: 0;

1154 }

1155 h1, h2 {

1156 font-size: 21px;

1157 line-height: 1;

1158 }

1159 small.deemphasize {

1160 float: left;

1161 display: block;

1162 }

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

1164 }

1165

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

1167 display: inline;

1168 }

1169

1170 #content .post_heading {

1171 margin-bottom: $lineheight;

1172 h2 {

1173 margin-top: 0;

1174 margin-bottom: $lineheight/2;

1175 font-size: 24px;

1176 }

1177 }

1178

1179 /* Rules for the diary entry page */

1180

1181 .diary_entry {

1182 #map {

1183 position: relative;

1184 width: 90%;

1185 height: 400px;

1186 border: 1px solid #ccc;

1187 display: none;

1188 margin-bottom: $lineheight;

1189 }

1190 #newcomment {

1191 border-top: 1px solid #ccc;

1192 padding-top: $lineheight;

1193 margin-top: $lineheight/2;

1194 }

1195 .comments {

1196 max-width: 740px;

1197 }

1198 .diary-comment {

1199 margin-top: $lineheight/2;

1200 border-top: 1px dashed #ccc;

1201 padding-top: $lineheight/2;

1202 &:first-child {

1203 margin-top: $lineheight;

1204 padding-top: $lineheight;

1205 border-top: 1px solid #ccc;

1206 }

1207 p {

1208 margin-bottom: $lineheight/2;

1209 }

1210 .comment-heading {

1211 margin-bottom: 0;

1212 margin-top: 0;

1213 }

1214 }

1215 }

1216

1217 .diary_entry-view img.user_thumbnail {

1218 float: left;

1219 }

1220

1221 /* Rules for the login page */

1222

1223 #login_openid_buttons {

1224 margin-bottom: 0;

1225 }

1226

1227 #login_openid_buttons li {

1228 float: left;

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

1230 }

1231

1232 /* Rules for the account confirmation page */

1233

1234 #terms {

1235 .legale {

1236 border: 1px solid #ccc;

1237 padding: $lineheight;

1238 margin-bottom: $lineheight;

1239 overflow: auto;

1240 height: 10em;

1241

1242 &:p#last {

1243 margin-bottom: 0px;

1244 }

1245

1246 &:ol {

1247 margin-bottom: 0px;

1248 }

1249

1250 &:img {

1251 display: block;

1252 margin: $lineheight auto inherit auto;

1253 }

1254 }

1255

1256 form.sign {

1257 input[type=submit] {

1258 float: left;

1259 }

1260 #decline {

1261 background: $grey;

1262 &:hover {

1263 background: darken($grey, $hovercolor);

1264 }

1265 }

1266 }

1267 fieldset {

1268 margin-bottom: $lineheight;

1269 }

1270 #contributorGuidance {

1271 background-color: $offwhite;

1272 border-radius: 4px;

1273 -moz-border-radius: 4px;

1274 }

1275 .signing-buttons {

1276 height: 50px;

1277 }

1278 }

1279

1280 /* Rules for the account settings page */

1281

1282 #accountForm .user_map {

1283 position: relative;

1284 width: 500px;

1285 height: 400px;

1286 border: 1px solid #ccc;

1287 }

1288

1289 #accountForm .user_image {

1290 margin-bottom: 0;

1291 }

1292

1293 #accountForm #user_image {

1294 margin-left: 20px;

1295 }

1296

1297 #accountForm ul.accountImage-options {

1298 margin-left: 120px;

1299 }

1300

1301 .nohome .location {

1302 display: none;

1303 }

1304

1305 #homerow .message {

1306 display: none;

1307 }

1308

1309 .nohome .message {

1310 display: inline !important;

1311 }

1312

1313 .content_map.settings_map {

1314 width: 50%;

1315 float: none;

1316 }

1317

1318 /* Rules for the oauth settings page */

1319

1320 .oauth_clients .buttons .oauth-edit {

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

1322 }

1323

1324 .oauth_clients .buttons .oauth-delete {

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

1326 }

1327

1328 /* Rules for messages pages */

1329

1330 .messages {

1331 width: 100%;

1332 border: 1px solid #ddd;

1333

1334 input[type="submit"] {

1335 margin: auto;

1336 }

1337 tbody tr {

1338 border-top: 1px solid #ccc;

1339 }

1340

1341 .inbox-row {

1342 background: #f8f8ff;

1343 }

1344

1345 .inbox-row-unread {

1346 background:#CBEEA7;

1347 }

1348

1349 .right {

1350 float: right;

1351 }

1352

1353 tr td,

1354 tr th {

1355 padding: $lineheight/4;

1356 }

1357 tr td {

1358 height: 30px;

1359 border-right: 1px solid $keyline;

1360 }

1361 }

1362

1363 .inbox-row .inbox-mark-read {

1364 display: none;

1365 }

1366

1367 .info-line {

1368 margin-bottom: $lineheight;

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

1370 border-bottom: 1px solid #ccc;

1371

1372 form, form div {

1373 display: inline;

1374 }

1375 }

1376

1377 .info-line .user_thumbnail_tiny {

1378 vertical-align: middle;

1379 }

1380

1381 .inbox-mark-unread,

1382 .inbox-mark-read,

1383 .inbox-delete {

1384 width: 1%;

1385 }

1386

1387 .inbox-row-unread .inbox-mark-unread {

1388 display: none;

1389 }

1390

1391 .message-read .message-buttons {

1392 margin-top: $lineheight;

1393 padding-top: $lineheight;

1394 border-top: 1px solid $keyline;

1395 }

1396

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

1398 border-radius: 0;

1399 }

1400

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

1402

1403 .flash {

1404 padding: $lineheight;

1405 &#error {

1406 background-color: #ff7070;

1407 }

1408 &#warning {

1409 background-color: #ffe0cc;

1410 }

1411 &#notice {

1412 background-color: #CBEEA7;

1413 }

1414 }

1415

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

1417

1418 .field_with_errors {

1419 padding: 2px;

1420 background-color: #ff7070;

1421 display: table;

1422 }

1423

1424 /* Rules for rails validation error boxes */

1425

1426 #errorExplanation {

1427 width: 400px;

1428 border: 2px solid #ff7070;

1429 padding: $lineheight/2;

1430 margin-bottom: $lineheight;

1431 background-color: #f0f0f0;

1432 h2 {

1433 margin: -10px;

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

1435 font-weight: bold;

1436 font-size: 12px;

1437 background-color: #c00;

1438 color: #fff;

1439 text-align: left;

1440 }

1441

1442 p {

1443 color: #333;

1444 margin-bottom: 0px;

1445 padding: $lineheight/4;

1446 }

1447

1448 ul li {

1449 font-size: 12px;

1450 list-style: disc;

1451 }

1452

1453 }

1454

1455 /* Rules for forms */

1456

1457 .standard-form {

1458 fieldset {

1459 margin-bottom: $lineheight;

1460 }

1461 label.standard-label {

1462 display: block;

1463 margin-bottom: $lineheight/4;

1464 font-size: $typeheight;

1465 font-weight: bold;

1466 line-height: 1.5;

1467 }

1468 label.standard-label.secondary {

1469 display: inline-block;

1470 font-weight: normal;

1471 }

1472 .form-help {

1473 font-weight: normal;

1474 }

1475 .form-column {

1476 float: left;

1477 margin-right: 20px;

1478 }

1479 .form-divider {

1480 margin-top: $lineheight;

1481 padding-top: $lineheight;

1482 border-top: 1px solid $keyline;

1483 }

1484 .form-row {

1485 margin-bottom: $lineheight/2;

1486 }

1487 .form-list {

1488 margin-bottom: 0;

1489 }

1490 .form-list li {

1491 margin-bottom: 5px;

1492 }

1493 input[type="checkbox"],

1494 input[type="radio"] {

1495 float: left;

1496 margin-top: 5px;

1497 margin-right: 5px;

1498 }

1499 }

1500

1501 #remember_me_openid {

1502 display: block;

1503 }

1504

1505 input[type="text"],

1506 input[type="email"],

1507 input[type="url"],

1508 input[type="password"],

1509 textarea {

1510 border: 1px solid #ccc;

1511 padding: 2px 5px;

1512 margin: 0;

1513 width: 200px;

1514 }

1515

1516 textarea {

1517 padding: 5px;

1518 width: 100%;

1519 height: 100% !important;

1520 }

1521

1522 /* Rules for user images */

1523

1524 img.user_image {

1525 max-width: 100px;

1526 max-height: 100px;

1527 border: 1px solid #ccc;

1528 margin-bottom: $lineheight;

1529 float: left;

1530 margin-right: $lineheight;

1531 }

1532

1533 img.user_thumbnail {

1534 max-width: 50px;

1535 max-height: 50px;

1536 border: 1px solid #ccc;

1537 margin-right: $lineheight;

1538 }

1539

1540 img.user_thumbnail_tiny {

1541 max-width: 25px;

1542 max-height: 25px;

1543 border: 1px solid #ccc;

1544 }

1545

1546 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */

1547

1548 .nowrap {

1549 white-space: nowrap;

1550 }

1551

1552 /* Rules for geo microformats */

1553

1554 abbr.geo {

1555 border-bottom: none;

1556 }

1557

1558 /* Rules for RSS buttons */

1559

1560 .rsssmall {

1561 position: relative;

1562 top: 5px;

1563 }

1564

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

1566

1567 ul.secondary-actions {

1568 font-style: normal;

1569 margin-bottom: 0;

1570 margin-left: 0;

1571 &.pager {

1572 display: inline-block;

1573 margin-right: 60px;

1574 }

1575 li {

1576 display: block;

1577 float: left;

1578 list-style: none;

1579 border-left: 1px solid #ccc;

1580 padding-left: $lineheight/4;

1581 margin-right: $lineheight/4;

1582 &:first-child {

1583 border-left: 0;

1584 padding-left: 0;

1585 }

1586 &:last-child {

1587 margin-right: 0px;

1588 }

1589 }

1590 }

1591

1592 /* Utility for managing inner content areas */

1593

1594 .inner22 { padding: $lineheight;}

1595

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

1597

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

1599

1600 .inner02 { padding: 0 $lineheight;}

1601

1602 /* Utility for general button styles */

1603

1604 input[type="button"],

1605 input[type="submit"],

1606 input[type="reset"],

1607 a.button {

1608 cursor: pointer;

1609 border: 0;

1610 display: inline-block;

1611 line-height: 20px;

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

1613 min-width: 120px;

1614 margin: 0 0 $lineheight/2 0;

1615 color: white;

1616 background: $blue;

1617 text-align: center;

1618 border-radius: 2px;

1619 -moz-border-radius: 2px;

1620 &:hover {

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

1622 text-decoration: none;

1623 }

1624 &.deemphasize {

1625 background: $lightblue;

1626 &:hover {

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

1628 }

1629 }

1630 &:last-child {

1631 margin-bottom: 0;

1632 }

1633 }

1634

1635 .buttons {

1636 min-width: 200px;

1637 input[type="submit"],

1638 input[type="button"],

1639 input[type="reset"],

1640 .button {

1641 box-sizing: border-box;

1642 float: left;

1643 border-radius: 0;

1644 margin:0;

1645 min-width: 100px;

1646 max-width: 150px;

1647 border-right:1px solid white;

1648 }

1649 input:first-child,

1650 .button:first-child {

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

1652 }

1653 input:last-child,

1654 .button:last-child {

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

1656 border-right-width: 0;

1657 }

1658 input:only-child,

1659 .button:only-child,

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

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

1662 border-radius:2px;

1663 border-right-width: 0;

1664 }

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

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

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

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

1669 border-right-width: 0;

1670 }

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

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

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

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

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

1676 }

1677 }

1678

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

1680

1681 .table0,

1682 .item0 {

1683 background: $offwhite;

1684 }

1685

1686 .table1,

1687 .item1 {

1688 background: #fff;

1689 }

1690

1691 /* Rules for OpenID logo */

1692

1693 .openid_logo {

1694 vertical-align: text-bottom;

1695 border: 0;

1696 }

1697

1698 /* Rules for rich text */

1699

1700 .richtext,

1701 .prose {

1702 h1, h2 {

1703 padding-bottom: $lineheight/2;

1704 border-bottom: 1px dashed #cccccc;

1705 margin-bottom: $lineheight/2;

1706 }

1707

1708 h1 {

1709 font-size: 24px;

1710 }

1711

1712 h2 {

1713 font-size: 18px;

1714 }

1715

1716 h3 {

1717 font-size: $typeheight;

1718 }

1719

1720 code {

1721 font-size: 13px;

1722 background: #e8e8e8;

1723 padding: 2px 3px;

1724 }

1725

1726 pre {

1727 font-size: 13px;

1728 background: #e8e8e8;

1729 padding: 2px 3px;

1730

1731 code {

1732 padding: 0;

1733 }

1734 }

1735

1736 img {

1737 padding: $lineheight;

1738 background-color: $offwhite;

1739 display: block;

1740 max-width: 100%;

1741 margin: auto;

1742 }

1743

1744 blockquote {

1745 border-left: $lineheight solid $offwhite;

1746 padding-left: $lineheight;

1747 margin: 0;

1748 color: #7E7E7E;

1749 }

1750

1751 ul, ol {

1752 font-style: italic;

1753 padding-left: $lineheight;

1754 margin-bottom: $lineheight;

1755 margin-left: $lineheight;

1756 }

1757

1758 ul li {

1759 list-style: disc;

1760 }

1761

1762 ol li {

1763 list-style: decimal;

1764 }

1765 }

1766

1767 .diary_post .richtext {

1768 margin-top: $lineheight;

1769 }

1770

1771 .comments .richtext {

1772 margin-left: 70px;

1773 margin-top: 0;

1774 }

1775

1776 /* Rules for rich text editors */

1777

1778 .richtext_container {

1779 margin-bottom: $lineheight;

1780

1781 .richtext_content {

1782 width: 50%;

1783 display: inline-block;

1784 vertical-align: top;

1785

1786 .richtext_preview {

1787 display: inline-block;

1788 padding: $lineheight;

1789 background-color: $offwhite;

1790 overflow-x: auto;

1791

1792 &.loading {

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

1794 background-repeat: no-repeat;

1795 background-position: center;

1796 }

1797

1798 > :first-child {

1799 margin-top: 0px;

1800 }

1801 }

1802 }

1803

1804 .richtext_help {

1805 display: inline-block;

1806 vertical-align: top;

1807 margin-left: 15px;

1808 background-color: #f8f8ff;

1809 padding: $lineheight/2;

1810 width: 300px;

1811 max-width: 450px;

1812

1813 ul {

1814 margin-bottom: 0;

1815 }

1816

1817 h4.heading, li {

1818 border-bottom: 1px solid #ccc;

1819 margin-bottom: $lineheight/4;

1820 padding-bottom: $lineheight/4;

1821 }

1822

1823 li h4, li span, li p {

1824 display: inline-block;

1825 vertical-align: top;

1826 font-size: 11px;

1827 }

1828

1829 li h4 {

1830 width: 35%;

1831 margin: 0;

1832 }

1833

1834 li span, li p {

1835 width: 60%;

1836 margin-left: $lineheight/2;

1837 margin-bottom: $lineheight/4;

1838 white-space: nowrap;

1839 }

1840 }

1841 }

1842

1843 /* Rules for the user notes list */

1844

1845 .note_list {

1846 tr.creator {

1847 background-color: #eeeeee;

1848 }

1849

1850 td {

1851 padding: 3px;

1852 }

1853

1854 p {

1855 margin-bottom: 0px;

1856 }

1857 }

1858

1859 /* Rules for the notes interface */

1860

1861 .note {

1862 padding-top: $lineheight/2;

1863 }

1864

1865 .note {

1866 h2 {

1867 margin-bottom: $lineheight/2;

1868 }

1869

1870 div {

1871 margin-top: $lineheight/2;

1872 }

1873

1874 .permalink {

1875 position: absolute;

1876 top: $lineheight/4;

1877 left: $lineheight/4;

1878 min-width: 15px;

1879 min-height: 15px;

1880 background: image-url("sprite.png") 0 -45px no-repeat;

1881 }

1882

1883 .permalink span {

1884 display: none;

1885 padding-left: $lineheight;

1886 }

1887

1888 .permalink:hover span {

1889 display: block;

1890 }

1891

1892 .warning {

1893 display: block;

1894 background-color: #ffe0cc;

1895 padding: 4px 6px;

1896 margin-bottom: $lineheight/2;

1897 }

1898

1899 .comment_body {

1900 margin-top: 2px;

1901 margin-bottom: 2px;

1902

1903 p {

1904 margin-top: 0px;

1905 margin-bottom: 0px;

1906 }

1907 }

1908

1909 .comment {

1910 width: 100%;

1911 height: 100px;

1912 }

1913

1914 .buttons {

1915 margin-top: $lineheight/4;

1916 text-align: right;

1917 }

1918 }

1919

1920 /*

1921 * Rules for the iD editor

1922 */

1923 .id-embed {

1924 width: 100%;

1925 height: 100%;

1926 }

1927

1928 /* Rules for rotating sidebar ads */

1929 .ad-container {

1930 display: block;

1931 height: 120px;

1932 overflow: hidden;

1933 position: relative;

1934 border-bottom: 1px solid #ccc;

1935 }

1936

1937 .ad {

1938 height: 100px;

1939 border: 0;

1940 background: #fff;

1941 }