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 $grey: #AAA;

8 $hovercolor: 20%;

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

12 /* Minimal CSS reset */

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

15 margin: 0;

16 padding: 0;

17 border: 0;

18 font-size:100%;

19 }

21 fieldset,img { border: 0; }

23 legend { color: #000; }

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

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

29 table {

30 border-collapse: collapse;

31 border-spacing: 0;

32 }

34 li { list-style: none; }

36 input,

37 select,

38 textarea,

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

41 abbr, acronym {

42 border-bottom: .1em dotted;

43 cursor: help;

44 }

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

48 .clearfix:before,

49 .clearfix:after {

50 content: " ";

51 display: table;

52 }

54 .clearfix:after {

55 clear: both;

56 }

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

60 * {

61 -moz-box-sizing: border-box;

62 -webkit-box-sizing: border-box;

63 box-sizing: border-box;

64 }

66 body {

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

68 font-size: $typeheight;

69 line-height: 1.6666;

70 color: #222;

71 background-color: #fff;

72 margin: 0px;

73 padding: 0px;

74 text-align: left;

75 }

77 body.slim {

78 background-color: #f0f0f0;

79 }

81 h1, h2, h3 {

82 margin-top: $lineheight/2;

83 margin-bottom: $lineheight;

84 font-weight: bold;

85 line-height: 1.2;

86 }

88 h1, h2 {

89 font-size: 32px;

90 }

92 #content h2 {

93 font-size: 21px;

94 }

96 h3 {

97 font-size: 21px;

98 margin-top: $lineheight/2;

99 margin-bottom: $lineheight;

100 }

101

102 h4,h5,h6 {

103 font-size: $typeheight;

104 margin-top: $lineheight/2;

105 margin-bottom: $lineheight/2;

106 font-weight: bold;

107 line-height: 1.5;

108 }

109

110 p, ul {

111 margin-bottom: $lineheight;

112 }

113

114 p > img {

115 width: auto;

116 max-width: 100%;

117 }

118

119 small, aside {

120 font-size: 12px;

121 }

122

123 h1:first-child,

124 h2:first-child,

125 h3:first-child,

126 h4:first-child,

127 h5:first-child,

128 h6:first-child {

129 margin-top: 0;

130 }

131

132 .column-1 {

133 width: 50%;

134 margin-bottom: $lineheight/2;

135 }

136

137 .small_icon {

138 vertical-align: middle;

139 margin-right: $lineheight/4;

140 }

141

142 /* Rules for links */

143

144 a {

145 color: #00f;

146 text-decoration: none;

147 &:hover {

148 text-decoration: underline;

149 }

150 }

151

152 /* Rules for horizontal lines */

153

154 hr {

155 border: none;

156 background-color: #ccc;

157 color: #ccc;

158 height: 1px;

159 }

160

161 /* General styles for tables */

162

163 table {

164 width: 100%;

165 margin-bottom: $lineheight;

166 th, td {

167 text-align: left;

168 padding: $lineheight/4;

169 line-height: $lineheight;

170 }

171 th {

172 font-weight: bold;

173 vertical-align: top;

174 }

175 td {

176 vertical-align: middle;

177 }

178 }

179

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

181

182 #left {

183 position: absolute;

184 height: 100%;

185 width: 185px;

186 font-size: 11px;

187 line-height: 1.1;

188 z-index: 100;

189 border-right: 1px solid #ccc;

190 }

191

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

193

194 #logo {

195 display: block;

196 width: 170px;

197 min-width: 170px;

198 padding: $lineheight $lineheight/4;

199 text-align: center;

200 margin: auto;

201 }

202

203 #logo h1 {

204 font-size: 18px;

205 line-height: 1;

206 text-align: center;

207 margin: 0;

208 }

209

210 #logo h2 {

211 font-size: $lineheight/2;

212 line-height: 15px;

213 margin: 0;

214 }

215

216 /* Rules for the site name */

217

218 #small-title {

219 display: none;

220 }

221

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

223

224 .sidebar-copy {

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

226 p {

227 margin: $lineheight/4 0;

228 }

229 }

230 .sidebar-copy.intro {

231 border-top: 1px solid #ccc;

232 }

233

234 /*

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

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

237 * undergoing maintenance.

238 */

239

240 .sidebar-alert {

241 padding: $lineheight/4;

242 border-top: 1px solid #ccc;

243 margin-top: 4px;

244 margin-bottom: -5px;

245 background: #e00;

246 font-size: 12px;

247 font-weight: bold;

248 p {

249 margin: $lineheight/4;

250 }

251 }

252

253 /*

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

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

256 * donation drives.

257 */

258

259 .sidebar-notice {

260 padding: $lineheight/4;

261 border-top: 1px solid #ccc;

262 margin-top: 4px;

263 margin-bottom: -5px;

264 background: #ea0;

265 font-size: 12px;

266 p {

267 margin: $lineheight/4;

268 }

269 }

270

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

272

273 .left_menu {

274 left: 0px;

275 margin: 0;

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

277 font-size: 12px;

278 line-height: 1.25;

279 list-style-type: none;

280 border-bottom: 1px solid #ccc;

281 border-top: 1px solid #ccc;

282 img {

283 margin: $lineheight/2 0px;

284 }

285

286 ul {

287 padding: 0;

288 margin: 0;

289 }

290

291 li {

292 list-style-type: none;

293 padding: 0;

294 margin: 0;

295 }

296

297 h4 {

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

299 font-size: 12px;

300 margin: 0;

301 }

302

303 li:last-child h4 {

304 padding-top: 0;

305 }

306 }

307

308 /* Rules for SOTM advert */

309

310 #sotm {

311 width: 165px;

312 margin: $lineheight/2;

313 padding: 0px;

314 border: 0px;

315 background: #fff;

316 img {

317 width: 165px;

318 }

319 }

320

321 /*

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

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

324 * and the tag cloud on the traces pages.

325 */

326

327 .optionalbox {

328 left: 0px;

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

330 margin: $lineheight/4 0;

331 text-align: left;

332 }

333

334 /* Rules for the search box */

335

336 #search_field {

337 position: relative;

338

339 form {

340 width: 165px;

341 }

342

343 input[type="text"] {

344 width: 165px;

345 padding: 3px;

346 font-size: $typeheight;

347 line-height: 1.1;

348 height: 25px;

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

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

351 }

352

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

354 outline: none;

355 border: 1px solid #000;

356 }

357

358 input[type="submit"] {

359 border: 0;

360 margin: 0;

361 padding: 0;

362 width: 15px;

363 height: 15px;

364 text-indent: -1000px;

365 overflow: hidden;

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

367 position: absolute;

368 top: $lineheight/4;

369 right: $lineheight/4;

370 cursor: pointer;

371 }

372 }

373

374 .search_help {

375 margin: $lineheight/4 0 0 0;

376 }

377

378 /* Utility for de-emphasizing content */

379

380 .deemphasize {

381 color: #999;

382 a {

383 color: $blue;

384 }

385 }

386

387 /* Rules for donation request box */

388

389 .donate {

390 display: block;

391 width: 164px;

392 padding: $lineheight/4;

393 border: 1px solid #AED1A0;

394 background: #cbeea7;

395 font-size: $typeheight;

396 line-height: 1.4;

397 text-align: center;

398 border-radius: 2px;

399 color: #222;

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

401

402 &:hover {

403 background: #9ed485;

404 text-decoration: none;

405 }

406 span {

407 margin: 0;

408 padding-left: 18px;

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

410 }

411 }

412

413 /* Rules for Creative Commons logo button */

414

415 #cclogo {

416 margin: $lineheight/2 0;

417 float: right;

418 }

419

420 /* Rules for tabbed navigation bar */

421

422 #top-bar {

423 position: relative;

424 margin-left: 185px;

425 height: 30px;

426 border-bottom: 1px solid #ccc;

427 background: white;

428 z-index: 100;

429 }

430

431 .site-edit #top-bar,

432 .site-index #top-bar,

433 .site-export #top-bar {

434 position: fixed;

435 left: 0;

436 right: 0;

437 }

438

439 #tabnav {

440 height: 30px;

441 margin-bottom:0;

442 overflow: hidden;

443 li {

444 display: inline;

445 }

446 a, a:link, a:visited {

447 float: left;

448 font-weight: bold;

449 padding: 3px $lineheight/2;

450 text-decoration: none;

451 color: #333;

452 float: left;

453 margin-right: 1px;

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

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

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

457 transition: color 200ms ease-in;

458 }

459 }

460

461 .site-index #tabnav a#viewanchor,

462 .site-edit #tabnav a#editanchor,

463 .changeset-list #tabnav a#historyanchor,

464 .site-export #tabnav a#exportanchor {

465 border-bottom: 1px solid #aaa;

466 background: #9ed485;

467 color: #000;

468 }

469

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

471 text-decoration: underline;

472 }

473

474 #tabnav a:link.disabled,

475 #tabnav a:visited.disabled,

476 #tabnav a:link:hover.disabled,

477 #tabnav a:visited:hover.disabled {

478 color: #ccc;

479 cursor: default;

480 &:hover {

481 text-decoration: none;

482 }

483 }

484

485 /* Utility for styling notification numbers */

486

487 .count-number {

488 padding: 2px $lineheight/4;

489 border-radius: 3px;

490 background: #d7d7ff;

491 margin: 0 2px;

492 font-size: 11px;

493 color: #333;

494 }

495

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

497

498 #greeting {

499 float: right;

500 padding-top: 3px;

501 margin-right: $lineheight/4;

502 }

503

504 .greeting-bar-unread {

505 font-weight: bold;

506 }

507

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

509

510 #noscript {

511 z-index: 20000000;

512 position: absolute;

513 top: 15px;

514 left: 15px;

515 }

516

517 /* Rules for Leaflet maps */

518

519 .leaflet-control-attribution {

520 a.disabled {

521 color: #99c9dc;

522 cursor: default;

523 text-decoration: none;

524 }

525

526 ul.secondary-actions {

527 float: left;

528 margin-right: $lineheight/4;

529

530 &:only-child {

531 margin-right: 0px;

532 }

533 }

534 }

535

536 .site-index .leaflet-top,

537 .site-export .leaflet-top {

538 top: $lineheight/2 !important;

539 .leaflet-control {

540 margin-top: 0px !important;

541 }

542 }

543

544 .site-index #map .olControlScaleLine,

545 .site-export #map .olControlScaleLine {

546 left: $lineheight/2 !important;

547 }

548

549 .leaflet-popup-scrolled {

550 padding-right: $lineheight;

551 border-bottom: 0px !important;

552 border-top: 0px !important;

553 }

554

555 .leaflet-popup-content-wrapper {

556 border-radius: 4px !important;

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

558 }

559

560 /* Rules for edit menu */

561

562 .menuicon {

563 padding: 0 $lineheight/4;

564 font-weight: normal;

565 display: inline-block;

566 &:hover {

567 text-decoration: none !important;

568 }

569 }

570

571 .menu {

572 display: none;

573 z-index: 10000;

574 position: absolute;

575 background-color: #ffffff;

576 border: 1px solid #cccccc;

577 border-top: 0px;

578 ul {

579 margin: 0px;

580 }

581 li {

582 padding: 2px $lineheight/4;

583 border-top: 1px solid #eee;

584 white-space: nowrap;

585 }

586 }

587

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

589

590 #attribution {

591 display: none;

592 }

593

594 .attribution_license,

595 .attribution_project {

596 text-align: left;

597 }

598

599 .attribution_notice {

600 text-align: center;

601 }

602

603 /* Rules for the popout map sidebar */

604

605 #sidebar {

606 display: none;

607 position: absolute;

608 overflow: auto;

609 top: 0px;

610 bottom: 0px;

611 left: 0px;

612 border-right: 1px solid #ccc;

613 width: 33.3333%;

614 .sidebar_heading {

615 position: relative;

616 padding: $lineheight/2 $lineheight;

617 z-index: 9999;

618 background: $offwhite;

619 border-bottom: 1px solid #ccc;

620 }

621 h4 {

622 margin: 0;

623 }

624 ul {

625 margin-bottom: 0;

626 li {

627 margin-bottom: $lineheight/4;

628 &:last-child {

629 margin-bottom: 0;

630 }

631 }

632 }

633 }

634

635 #sidebar_close {

636 position: absolute;

637 height: $lineheight;

638 top: 0px;

639 bottom: 0;

640 right: $lineheight;

641 margin: auto;

642 }

643

644 #sidebar_content {

645 position: relative;

646 bottom: 0;

647 width: 100%;

648 h4 {

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

650 margin-top: $lineheight/2;

651 margin-bottom: 0;

652 border-bottom: 1px solid #ddd;

653 }

654 }

655

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

657

658 #mapkey {

659 padding: $lineheight;

660 .mapkey-table-key img {

661 display: block;

662 margin-left: auto;

663 margin-right: auto;

664 }

665 td {

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

667 }

668 }

669

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

671

672 .search_searching {

673 margin-top: $lineheight/4;

674 margin-bottom: $lineheight/4;

675 }

676

677 .search_results_entry {

678 margin-bottom: 0;

679

680 .search_details {

681 display: block;

682 text-align: right;

683 }

684 }

685

686 .search_results_entry .search_searching {

687 text-align: center;

688 margin: $lineheight auto;

689 width: $lineheight;

690 display: block;

691 }

692

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

694

695 .search_results_error {

696 color: #f00;

697 }

698

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

700

701 #browse_content {

702 position: relative;

703 .browse_show_list.button {

704 position: absolute;

705 left: $lineheight;

706 right: $lineheight;

707 bottom: -40px;

708 margin-bottom: 0;

709 }

710 a.more-details {

711 position: absolute;

712 top: 0;

713 right: $lineheight;

714 }

715 ul li {

716 margin-bottom: 0;

717 }

718 }

719

720 .browse_details {

721 position: relative;

722 }

723

724 .browse_status {

725 display: none;

726 }

727

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

729

730 .export_bounds {

731 text-align: center;

732 }

733

734 .export_area_inputs {

735 margin-bottom: $lineheight/2;

736 }

737

738 .export_bound {

739 margin: $lineheight/4;

740 }

741

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

743 width: 100%;

744 }

745

746 #sidebar #marker_inputs li:last-child {

747 margin-bottom: $lineheight/2;

748 }

749

750 #export_osm,

751 #export_mapnik,

752 #export_osmarender {

753 display: none;

754 }

755

756 .export_buttons {

757 width: 100%;

758 text-align: center;

759 }

760

761 #drag_box {

762 display: inline;

763 padding: $lineheight/2 $lineheight;

764 }

765

766 #export_commit {

767 width: 50%;

768 margin: auto;

769 }

770

771 /* Rules for the main content area */

772

773 #content {

774 padding: $lineheight;

775 position: relative;

776 }

777

778 .site-edit #content,

779 .site-index #content,

780 .site-export #content {

781 position: fixed;

782 padding: 0;

783 top: 30px; bottom: 0;

784 left: 184px; right: 0;

785 border-left: 1px solid #ccc;

786 }

787

788 .wrapper {

789 margin-left: 184px;

790 border-left: 1px solid #ccc;

791 text-align: left;

792 }

793

794 .site-edit #content {

795 top: 30px;

796 }

797

798 #content.maximised {

799 top: 0;

800 left: 0;

801 right: 0;

802 bottom: 0;

803 border: 0;

804 z-index: 1000;

805 }

806

807 #slim_container {

808 width: 100%;

809 }

810

811 #slim_container_content {

812 max-width: 50em;

813 background-color: #FFFFFF;

814 margin: $lineheight/2 auto;

815 padding: 3px;

816 border-radius: 25px;

817 -moz-border-radius: 25px;

818 border: 1px solid #e6e6e6;

819 }

820

821 #slim_content {

822 margin: $lineheight/2;

823 margin-top: 95px;

824 max-width: 50em;

825

826 .content-heading {

827 margin-bottom: 15px;

828 }

829 }

830

831 #slim_header {

832 margin: 30px $lineheight/2;

833 position: absolute;

834 top: 0px;

835 margin-right: $lineheight/4;

836 img {

837 vertical-align: middle;

838 margin-bottom: $lineheight/4;

839 margin-right: $lineheight/4;

840 }

841 }

842

843 .content-heading {

844 position: relative;

845 padding: $lineheight;

846 background: $offwhite;

847 h1, h2 {

848 margin-bottom: $lineheight/2;

849 line-height: 100%;

850 &:last-child {

851 margin-bottom: 0;

852 }

853 }

854 p {

855 margin-top: $lineheight/2;

856 margin-bottom: 0px;

857 }

858 }

859

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

861

862 .content_map {

863 position: relative;

864 width: 45%;

865 height: 400px;

866 border: 1px solid #ccc;

867 margin-bottom: $lineheight;

868 float: right;

869 }

870

871 .content_map #small_map {

872 height: 100%;

873 width: 100%;

874 margin-bottom: $lineheight;

875 }

876

877 /* Rules for the home page */

878

879 .site-export #map,

880 .site-index #map {

881 position: absolute;

882 top: 0px;

883 bottom: 0px;

884 left: 0px;

885 right: 0px;

886 }

887

888 /* Rules for the edit page */

889

890 .site-edit #map {

891 position: absolute;

892 top: 0px;

893 bottom: 0px;

894 left: 0px;

895 right: 0px;

896 overflow: hidden;

897 }

898

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

900

901 #changeset_list {

902 width: 100%;

903 ul {

904 padding: $lineheight/2 0;

905 margin-bottom: 0px;

906 border-top: 1px solid #ccc;

907 &:last-child {

908 border-bottom: 1px solid #ccc;

909 }

910 }

911 .selected {

912 background: #FFFFC0;

913 }

914 .date,

915 .user {

916 border-left: 1px solid #ccc;

917 padding-left: $lineheight/4;

918 margin-right: $lineheight/4;

919 }

920 }

921

922 #changeset_list_map_wrapper {

923 position: absolute;

924 width: 50%;

925 height: 490px;

926 top: 0;

927 right: 0;

928 }

929

930 #changeset_list_map_wrapper.scrolled {

931 position: fixed;

932 }

933

934 #changeset_list_map {

935 position: absolute;

936 bottom: $lineheight;

937 top: $lineheight;

938 right: $lineheight;

939 left: $lineheight;

940 border: 1px solid #ccc;

941 }

942

943 #changeset_list_map_wrapper.scrolled #changeset_list_map {

944 margin-left: 93px;

945 }

946

947 /* Rules for the data browser */

948

949 .browse-section {

950 border-top: 1px solid #ccc;

951 margin-top: $lineheight/2;

952 padding-top: $lineheight/2;

953 &:first-child {

954 margin-top: 0;

955 }

956 .warning {

957 background-color: #ffe0cc;

958 margin: 0px;

959 padding: 4px 6px;

960 max-width: 100%;

961 }

962 h4, p {

963 margin-bottom: $lineheight/4;

964 }

965 p, ul, .bbox, .geo {

966 display: inline-block;

967 vertical-align: top;

968 max-width: 65%;

969 }

970 ul p {

971 margin-left: 0;

972 margin-bottom: 0;

973 }

974 h4 {

975 width: 33.3333%;

976 display: inline-block;

977 vertical-align: top;

978 }

979 }

980

981 .bbox {

982 div {

983 width: 33.3333%;

984 text-align: center;

985 padding: $lineheight/4 0;

986 overflow: hidden;

987 text-overflow: ellipsis;

988 float: left;

989 }

990 .max_lat,

991 .min_lat {

992 margin-left: auto;

993 margin-right: auto;

994 width: 100%;

995 }

996 }

997

998 #browse_map .geolink {

999 display: none;

1000 }

1001

1002 #browse_map .secondary-actions {

1003 margin-bottom: $lineheight/2;

1004 }

1005

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

1007

1008 #trace_list {

1009 font-size: $lineheight/2;

1010 border-width: 0px;

1011 text-align: right;

1012

1013 .trace_summary {

1014 font-size: 12px;

1015 color: gray;

1016 }

1017

1018 .trace_pending {

1019 color: red;

1020 }

1021

1022 .trace_public {

1023 color: green;

1024 }

1025

1026 .trace_identifiable {

1027 color: green;

1028 }

1029

1030 .trace_trackable {

1031 color: red;

1032 }

1033

1034 .trace_private {

1035 color: red;

1036 }

1037 }

1038

1039 /* Rules for the user profile page */

1040

1041 #userinformation {

1042 min-height: 100px;

1043 .userinformation-inner {

1044 float: left;

1045 }

1046 h2 {

1047 margin-top: 0;

1048 }

1049 .user-description {

1050 width: 100%;

1051 clear: both;

1052 }

1053 .deemphasize {

1054 margin: 0;

1055 }

1056 }

1057

1058 .admin-user-info small {

1059 margin-bottom: $lineheight/2;

1060 display: inline;

1061 margin-right: $lineheight;

1062 }

1063

1064 .activity-block {

1065 clear: left;

1066 border-bottom: 1px solid #ccc;

1067 padding-bottom: $lineheight;

1068 float: left;

1069 h3 {

1070 margin-bottom: $lineheight/2;

1071 }

1072 }

1073

1074 .contact-activity {

1075 margin-top: $lineheight;

1076 width: 100%;

1077 }

1078

1079 .activity-details p {

1080 margin-left: 72px;

1081 margin-bottom: 0;

1082 }

1083

1084 #friends-container .contact-activity ul {

1085 margin-left: 72px;

1086 }

1087

1088 .user-view {

1089 p#no_home_location {

1090 margin: $lineheight;

1091 }

1092 .user_thumbnail {

1093 margin-top: $lineheight/4;

1094 float: left;

1095 }

1096 }

1097

1098 /* Rules for the user map */

1099

1100 .content_map .leaflet-popup-content {

1101 margin: $lineheight/2;

1102 min-height: 50px;

1103 }

1104

1105 /* Rules for user popups on maps */

1106

1107 .user_popup {

1108 min-width: 200px;

1109

1110 p {

1111 padding-top: 0;

1112 padding-bottom: 5px;

1113 margin-top: 0;

1114 margin-bottom: 0;

1115 margin-left: 60px;

1116 font-size: 12px;

1117 }

1118

1119 img.user_thumbnail {

1120 float: left;

1121 margin: 0 $lineheight/2 0 0;

1122 }

1123 }

1124

1125 /* Rules for the user list */

1126

1127 #user_list {

1128 font-size: $lineheight/2;

1129 width: 100%;

1130

1131 tr {

1132 vertical-align: middle;

1133 }

1134

1135 p {

1136 margin-top: 0px;

1137 margin-bottom: 0px;

1138 }

1139 }

1140

1141 #user_list_actions {

1142 float: right;

1143 margin-top: $lineheight/2;

1144 }

1145

1146 /* Rules for the diary list page */

1147

1148 .diary_entry-list img.user_thumbnail {

1149 float: left;

1150 }

1151

1152 .diary_post {

1153 max-width: 740px;

1154 position: relative;

1155 margin-top: $lineheight/2;

1156 padding-top: $lineheight;

1157 border-top: 1px solid #ccc;

1158

1159 &:first-child {

1160 margin-top: 0;

1161 border-top: 0;

1162 padding-top: 0;

1163 }

1164 h1, h2 {

1165 font-size: 21px;

1166 line-height: 1;

1167 }

1168 small.deemphasize {

1169 float: left;

1170 display: block;

1171 }

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

1173 }

1174

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

1176 display: inline;

1177 }

1178

1179 #content .post_heading {

1180 margin-bottom: $lineheight;

1181 h2 {

1182 margin-top: 0;

1183 margin-bottom: $lineheight/2;

1184 font-size: 24px;

1185 }

1186 }

1187

1188 /* Rules for the diary entry page */

1189

1190 .diary_entry {

1191 #map {

1192 position: relative;

1193 width: 90%;

1194 height: 400px;

1195 border: 1px solid #ccc;

1196 display: none;

1197 margin-bottom: $lineheight;

1198 }

1199 #newcomment {

1200 border-top: 1px solid #ccc;

1201 padding-top: $lineheight;

1202 margin-top: $lineheight/2;

1203 }

1204 .comments {

1205 max-width: 740px;

1206 }

1207 .diary-comment {

1208 margin-top: $lineheight/2;

1209 border-top: 1px dashed #ccc;

1210 padding-top: $lineheight/2;

1211 &:first-child {

1212 margin-top: $lineheight;

1213 padding-top: $lineheight;

1214 border-top: 1px solid #ccc;

1215 }

1216 p {

1217 margin-bottom: $lineheight/2;

1218 }

1219 .comment-heading {

1220 margin-bottom: 0;

1221 margin-top: 0;

1222 }

1223 }

1224 }

1225

1226 .diary_entry-view img.user_thumbnail {

1227 float: left;

1228 }

1229

1230 /* Rules for the login page */

1231

1232 #login_openid_buttons {

1233 height: 56px;

1234 }

1235

1236 #login_openid_buttons li {

1237 float: left;

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

1239 }

1240

1241 /* Rules for the account confirmation page */

1242

1243 #terms {

1244 .legale {

1245 border: 1px solid #ccc;

1246 padding: $lineheight;

1247 margin-bottom: $lineheight;

1248 overflow: auto;

1249 height: 10em;

1250

1251 &:p#last {

1252 margin-bottom: 0px;

1253 }

1254

1255 &:ol {

1256 margin-bottom: 0px;

1257 }

1258

1259 &:img {

1260 display: block;

1261 margin: $lineheight auto inherit auto;

1262 }

1263 }

1264

1265 form.sign {

1266 input[type=submit] {

1267 float: left;

1268 }

1269 #decline {

1270 background: $grey;

1271 &:hover {

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

1273 }

1274 }

1275 }

1276 fieldset {

1277 margin-bottom: $lineheight;

1278 }

1279 #contributorGuidance {

1280 background-color: $offwhite;

1281 border-radius: 4px;

1282 -moz-border-radius: 4px;

1283 }

1284 .signing-buttons {

1285 height: 50px;

1286 }

1287 }

1288

1289 /* Rules for the account settings page */

1290

1291 #accountForm .user_map {

1292 position: relative;

1293 width: 500px;

1294 height: 400px;

1295 border: 1px solid #ccc;

1296 }

1297

1298 .accountImage-options {

1299 width: 50%;

1300 display: inline-block;

1301 }

1302

1303 .nohome .location {

1304 display: none;

1305 }

1306

1307 #homerow .message {

1308 display: none;

1309 }

1310

1311 .nohome .message {

1312 display: inline !important;

1313 }

1314

1315 .content_map.settings_map {

1316 float: none;

1317 width: 50%;

1318 }

1319

1320 /* Rules for message in/out box page */

1321

1322 .messages {

1323 width: 100%;

1324 border: 1px solid #ddd;

1325

1326 tbody tr {

1327 border-top: 1px solid #ccc;

1328 }

1329

1330 .inbox-row {

1331 background: #f8f8ff;

1332 }

1333

1334 .inbox-row-unread {

1335 background:#CBEEA7;

1336 }

1337

1338 .right {

1339 float: right;

1340 }

1341

1342 tr td,

1343 tr th {

1344 padding: $lineheight/4;

1345 }

1346 }

1347

1348 .inbox-row .inbox-mark-read {

1349 display: none;

1350 }

1351

1352 .info-line {

1353 margin-bottom: $lineheight;

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

1355 border-bottom: 1px solid #ccc;

1356

1357 form, form div {

1358 display: inline;

1359 }

1360 }

1361

1362 .info-line .user_thumbnail_tiny {

1363 vertical-align: middle;

1364 }

1365

1366 .inbox-row-unread .inbox-mark-unread {

1367 display: none;

1368 }

1369

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

1371

1372 .flash {

1373 padding: $lineheight;

1374 &#error {

1375 background-color: #ff7070;

1376 }

1377 &#warning {

1378 background-color: #ffe0cc;

1379 }

1380 &#notice {

1381 background-color: #CBEEA7;

1382 }

1383 }

1384

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

1386

1387 .field_with_errors {

1388 padding: 2px;

1389 background-color: #ff7070;

1390 display: table;

1391 }

1392

1393 /* Rules for rails validation error boxes */

1394

1395 #errorExplanation {

1396 width: 400px;

1397 border: 2px solid #ff7070;

1398 padding: $lineheight/2;

1399 margin-bottom: $lineheight;

1400 background-color: #f0f0f0;

1401 h2 {

1402 margin: -10px;

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

1404 font-weight: bold;

1405 font-size: 12px;

1406 background-color: #c00;

1407 color: #fff;

1408 text-align: left;

1409 }

1410

1411 p {

1412 color: #333;

1413 margin-bottom: 0px;

1414 padding: $lineheight/4;

1415 }

1416

1417 ul li {

1418 font-size: 12px;

1419 list-style: disc;

1420 }

1421

1422 }

1423

1424 /* Rules for forms */

1425

1426 .standard-form {

1427 fieldset {

1428 margin-bottom: $lineheight;

1429 }

1430 label {

1431 display: block;

1432 width: 300px;

1433 margin-right: $lineheight/2;

1434 font-size: $typeheight;

1435 font-weight: bold;

1436 line-height: 1.5;

1437 }

1438 .form-row {

1439 margin-bottom: $lineheight/2;

1440 }

1441 input[name=remember_me] {

1442 float: left;

1443 }

1444 }

1445

1446 #remember_me_openid {

1447 display: block;

1448 }

1449

1450 input[type="text"],

1451 input[type="email"],

1452 input[type="url"],

1453 input[type="password"],

1454 textarea {

1455 border: 1px solid #ccc;

1456 }

1457

1458 /* Rules for user images */

1459

1460 img.user_image {

1461 max-width: 100px;

1462 max-height: 100px;

1463 border: 1px solid #ccc;

1464 margin-bottom: $lineheight;

1465 float: left;

1466 margin-right: $lineheight;

1467 }

1468

1469 img.user_thumbnail {

1470 max-width: 50px;

1471 max-height: 50px;

1472 border: 1px solid #ccc;

1473 margin-right: $lineheight;

1474 }

1475

1476 img.user_thumbnail_tiny {

1477 max-width: 25px;

1478 max-height: 25px;

1479 border: 1px solid #ccc;

1480 }

1481

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

1483

1484 .nowrap {

1485 white-space: nowrap;

1486 }

1487

1488 /* Rules for geo microformats */

1489

1490 abbr.geo {

1491 border-bottom: none;

1492 }

1493

1494 /* Rules for RSS buttons */

1495

1496 .rsssmall {

1497 position: relative;

1498 top: 5px;

1499 }

1500

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

1502

1503 ul.secondary-actions {

1504 font-style: normal;

1505 margin-bottom: 0;

1506 margin-left: 0;

1507 &.pager {

1508 display: inline-block;

1509 margin-right: 60px;

1510 }

1511 li {

1512 display: block;

1513 float: left;

1514 list-style: none;

1515 border-left: 1px solid #ccc;

1516 padding-left: $lineheight/4;

1517 margin-right: $lineheight/4;

1518 &:first-child {

1519 border-left: 0;

1520 padding-left: 0;

1521 }

1522 &:last-child {

1523 margin-right: 0px;

1524 }

1525 }

1526 }

1527

1528 /* Utility for managing inner content areas */

1529

1530 .inner22 { padding: $lineheight;}

1531

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

1533

1534 .inner02 { padding: 0 $lineheight;}

1535

1536 /* Utility for general button styles */

1537

1538 input[type="button"],

1539 input[type="submit"],

1540 input[type="reset"],

1541 a.button {

1542 cursor: pointer;

1543 border: 0;

1544 display: block;

1545 padding: $lineheight/4;

1546 min-width: 120px;

1547 margin-bottom: $lineheight/2;

1548 color: white;

1549 background: $blue;

1550 text-align: center;

1551 border-radius: 2px;

1552 -moz-border-radius: 2px;

1553 &:hover {

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

1555 text-decoration: none;

1556 }

1557 &:last-child {

1558 margin-bottom: 0;

1559 }

1560 }

1561

1562 a.button.submit {

1563 background-color: #cbeea7;

1564 &:hover {

1565 background-color: #9ed485;

1566 }

1567 }

1568

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

1570

1571 .table0,

1572 .item0 {

1573 background: $offwhite;

1574 }

1575

1576 .table1,

1577 .item1 {

1578 background: #fff;

1579 }

1580

1581 /* Rules for OpenID logo */

1582

1583 .openid_logo {

1584 vertical-align: text-bottom;

1585 border: 0;

1586 }

1587

1588 /* Rules for rich text */

1589

1590 .richtext {

1591 h1, h2 {

1592 padding-bottom: $lineheight/2;

1593 border-bottom: 1px dashed #cccccc;

1594 margin-bottom: $lineheight/2;

1595 }

1596

1597 h1 {

1598 font-size: 24px;

1599 }

1600

1601 h2 {

1602 font-size: 18px;

1603 }

1604

1605 h3 {

1606 font-size: $typeheight;

1607 }

1608

1609 code {

1610 font-size: 13px;

1611 background: #e8e8e8;

1612 padding: 2px 3px;

1613 }

1614

1615 pre {

1616 font-size: 13px;

1617 background: #e8e8e8;

1618 padding: 2px 3px;

1619

1620 code {

1621 padding: 0;

1622 }

1623 }

1624

1625 img {

1626 padding: $lineheight;

1627 background-color: $offwhite;

1628 display: block;

1629 max-width: 100%;

1630 margin: auto;

1631 }

1632

1633 blockquote {

1634 border-left: $lineheight solid $offwhite;

1635 padding-left: $lineheight;

1636 margin: 0;

1637 color: #7E7E7E;

1638 }

1639

1640 ul, ol {

1641 font-style: italic;

1642 padding-left: $lineheight;

1643 margin-bottom: $lineheight;

1644 margin-left: $lineheight;

1645 }

1646

1647 ul li {

1648 list-style: disc;

1649 }

1650

1651 ol li {

1652 list-style: decimal;

1653 }

1654 }

1655

1656 .diary_post .richtext {

1657 margin-top: $lineheight;

1658 }

1659

1660 .comments .richtext {

1661 margin-left: 70px;

1662 margin-top: 0;

1663 }

1664

1665 /* Rules for rich text editors */

1666

1667 .richtext_container {

1668 .richtext_content {

1669 display: inline-block;

1670 vertical-align: top;

1671

1672 .richtext_preview {

1673 display: inline-block;

1674 padding: $lineheight;

1675 background-color: $offwhite;

1676 overflow-x: auto;

1677

1678 &.loading {

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

1680 background-repeat: no-repeat;

1681 background-position: center;

1682 }

1683

1684 > :first-child {

1685 margin-top: 0px;

1686 }

1687 }

1688 }

1689

1690 .richtext_help {

1691 display: inline-block;

1692 vertical-align: top;

1693 margin-left: 15px;

1694 background-color: #f8f8ff;

1695 padding: $lineheight/2;

1696 width: 300px;

1697 max-width: 450px;

1698

1699 ul {

1700 margin-bottom: 0;

1701 }

1702

1703 h4.heading, li {

1704 border-bottom: 1px solid #ccc;

1705 margin-bottom: $lineheight/4;

1706 padding-bottom: $lineheight/4;

1707 }

1708

1709 li h4, li span, li p {

1710 display: inline-block;

1711 vertical-align: top;

1712 font-size: 11px;

1713 }

1714

1715 li h4 {

1716 width: 35%;

1717 margin: 0;

1718 }

1719

1720 li span, li p {

1721 width: 60%;

1722 margin-left: $lineheight/2;

1723 margin-bottom: $lineheight/4;

1724 white-space: nowrap;

1725 }

1726

1727 input.richtext_doedit,

1728 input.richtext_dopreview {

1729 margin-right: $lineheight/2;

1730 }

1731 }

1732

1733 .buttons input[type="submit"] {

1734 display: inline-block;

1735 margin-bottom:0;

1736 width:99px;

1737 min-width:99px;

1738 }

1739 .buttons input:first-child {

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

1741 margin-right:1px;

1742 }

1743 .buttons input:last-child {

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

1745 }

1746 }

1747

1748 /* Rules for the user notes list */

1749

1750 .note_list {

1751 tr.creator {

1752 background-color: #eeeeee;

1753 }

1754

1755 td {

1756 padding: 3px;

1757 }

1758

1759 p {

1760 margin-bottom: 0px;

1761 }

1762 }

1763

1764 /* Rules for the notes interface */

1765

1766 .note {

1767 padding-top: $lineheight/2;

1768 }

1769

1770 .note {

1771 h2 {

1772 margin-bottom: $lineheight/2;

1773 }

1774

1775 div {

1776 margin-top: $lineheight/2;

1777 }

1778

1779 .permalink {

1780 position: absolute;

1781 top: $lineheight/4;

1782 left: $lineheight/4;

1783 min-width: 15px;

1784 min-height: 15px;

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

1786 }

1787

1788 .permalink span {

1789 display: none;

1790 padding-left: $lineheight;

1791 }

1792

1793 .permalink:hover span {

1794 display: block;

1795 }

1796

1797 .warning {

1798 display: block;

1799 background-color: #ffe0cc;

1800 padding: 4px 6px;

1801 margin-bottom: $lineheight/2;

1802 }

1803

1804 .comment_body {

1805 margin-top: 2px;

1806 margin-bottom: 2px;

1807

1808 p {

1809 margin-top: 0px;

1810 margin-bottom: 0px;

1811 }

1812 }

1813

1814 .comment {

1815 width: 100%;

1816 height: 100px;

1817 }

1818

1819 .buttons {

1820 margin-top: $lineheight/4;

1821 text-align: right;

1822 }

1823 }

1824

1825 /*

1826 * Rules for the iD editor

1827 */

1828 .id-embed {

1829 width: 100%;

1830 height: 100%;

1831 }

1832

1833 /* Rules for rotating sidebar ads */

1834 .ad-container {

1835 display: block;

1836 height: 120px;

1837 overflow: hidden;

1838 position: relative;

1839 border-bottom: 1px solid #ccc;

1840 }

1841

1842 .ads {

1843 width: 370px;

1844 position: absolute;

1845 left: 0%;

1846 }

1847

1848 .ad {

1849 float: left;

1850 height: 120px;

1851 padding: $lineheight/2;

1852 border: 0px;

1853 background: #fff;

1854 }