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 $lightgrey: #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 icons */

145

146 .icon {

147 display:inline-block;

148 vertical-align:top;

149 width:20px;

150 height:20px;

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

152 text-indent:-9999px;

153 overflow:hidden;

154 }

155

156 .icon-pre-text {

157 margin-right: 5px;

158 }

159

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

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

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

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

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

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

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

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

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

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

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

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

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

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

174

175 /* Rules for links */

176

177 a {

178 color: #00f;

179 text-decoration: none;

180 &:hover {

181 text-decoration: underline;

182 }

183 }

184

185 /* Rules for horizontal lines */

186

187 hr {

188 border: none;

189 background-color: #ccc;

190 color: #ccc;

191 height: 1px;

192 }

193

194 /* General styles for tables */

195

196 table {

197 width: 100%;

198 margin-bottom: $lineheight;

199 th, td {

200 text-align: left;

201 padding: $lineheight/4;

202 line-height: $lineheight;

203 }

204 th {

205 font-weight: bold;

206 vertical-align: top;

207 }

208 td {

209 vertical-align: middle;

210 }

211 }

212

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

214

215 #left {

216 position: absolute;

217 height: 100%;

218 width: 185px;

219 font-size: 11px;

220 line-height: 1.1;

221 z-index: 100;

222 border-right: 1px solid #ccc;

223 }

224

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

226

227 #logo {

228 display: block;

229 width: 170px;

230 min-width: 170px;

231 padding: $lineheight $lineheight/4;

232 text-align: center;

233 margin: auto;

234 }

235

236 #logo h1 {

237 font-size: 18px;

238 line-height: 1;

239 text-align: center;

240 margin: 0;

241 }

242

243 #logo h2 {

244 font-size: $lineheight/2;

245 line-height: 15px;

246 margin: 0;

247 }

248

249 /* Rules for the site name */

250

251 #small-title {

252 display: none;

253

254 img {

255 vertical-align: text-bottom;

256 }

257 }

258

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

260

261 .sidebar-copy {

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

263 p {

264 margin: $lineheight/4 0;

265 }

266 }

267 .sidebar-copy.intro {

268 border-top: 1px solid #ccc;

269 }

270

271 /*

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

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

274 * undergoing maintenance.

275 */

276

277 .sidebar-alert {

278 padding: $lineheight/4;

279 border-top: 1px solid #ccc;

280 margin-top: 4px;

281 margin-bottom: -5px;

282 background: #e00;

283 font-size: 12px;

284 font-weight: bold;

285 p {

286 margin: $lineheight/4;

287 }

288 }

289

290 /*

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

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

293 * donation drives.

294 */

295

296 .sidebar-notice {

297 padding: $lineheight/4;

298 border-top: 1px solid #ccc;

299 margin-top: 4px;

300 margin-bottom: -5px;

301 background: #ea0;

302 font-size: 12px;

303 p {

304 margin: $lineheight/4;

305 }

306 }

307

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

309

310 .left_menu {

311 left: 0px;

312 margin: 0;

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

314 font-size: 12px;

315 line-height: 1.25;

316 list-style-type: none;

317 border-bottom: 1px solid #ccc;

318 border-top: 1px solid #ccc;

319 img {

320 margin: $lineheight/2 0px;

321 }

322

323 ul {

324 padding: 0;

325 margin: 0;

326 }

327

328 li {

329 list-style-type: none;

330 padding: 0;

331 margin: 0;

332 }

333

334 h4 {

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

336 font-size: 12px;

337 margin: 0;

338 }

339 }

340

341 /*

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

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

344 * and the tag cloud on the traces pages.

345 */

346

347 .optionalbox {

348 left: 0px;

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

350 margin: $lineheight/4 0;

351 text-align: left;

352 }

353

354 /* Rules for the search box */

355

356 #search_field {

357 position: relative;

358

359 form {

360 width: 165px;

361 }

362

363 input[type="text"] {

364 width: 165px;

365 padding: 3px;

366 font-size: $typeheight;

367 line-height: 1.1;

368 height: 25px;

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

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

371 }

372

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

374 outline: none;

375 border: 1px solid #000;

376 }

377

378 input[type="submit"] {

379 border: 0;

380 margin: 0;

381 padding: 0;

382 width: 15px;

383 height: 15px;

384 min-width: 0;

385 text-indent: -1000px;

386 overflow: hidden;

387 background: image-url("sprite.png") -2px -2px no-repeat;

388 position: absolute;

389 top: $lineheight/4;

390 right: $lineheight/4;

391 cursor: pointer;

392 }

393 }

394

395 .search_help {

396 margin: $lineheight/4 0 0 0;

397 }

398

399 /* Utility for de-emphasizing content */

400

401 .deemphasize {

402 color: #999;

403 a {

404 color: $blue;

405 }

406 }

407

408 /* Rules for donation request box */

409

410 a.donate {

411 display: block;

412 width: 163px;

413 padding: $lineheight/4;

414 border: 1px solid #AED1A0;

415 background: #cbeea7;

416 font-size: $typeheight;

417 line-height: 1.4;

418 text-align: center;

419 border-radius: 2px;

420 color: #222;

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

422

423 &:hover {

424 background: #9ed485;

425 text-decoration: none;

426 }

427 }

428

429 /* Rules for Creative Commons logo button */

430

431 #cclogo {

432 margin: $lineheight/2 0;

433 float: right;

434 }

435

436 /* Rules for tabbed navigation bar */

437

438 #top-bar {

439 position: relative;

440 margin-left: 185px;

441 height: 30px;

442 border-bottom: 1px solid #ccc;

443 background: white;

444 z-index: 100;

445 }

446

447 .site-edit #top-bar,

448 .site-index #top-bar,

449 .site-export #top-bar {

450 position: fixed;

451 top: 0;

452 left: 0;

453 right: 0;

454 }

455

456 #tabnav {

457 height: 29px;

458 margin-bottom:0;

459 overflow: hidden;

460 li {

461 display: inline;

462 }

463 a, a:link, a:visited {

464 float: left;

465 font-weight: bold;

466 padding: 3px $lineheight/2;

467 text-decoration: none;

468 color: #333;

469 float: left;

470 margin-right: 1px;

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

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

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

474 transition: color 200ms ease-in;

475 }

476 }

477

478 .site-index #tabnav a#viewanchor,

479 .site-edit #tabnav a#editanchor,

480 .changeset-list #tabnav a#historyanchor {

481 border-bottom: 1px solid #aaa;

482 background: #9ed485;

483 color: #000;

484 }

485

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

487 text-decoration: underline;

488 }

489

490 #tabnav a:link.disabled,

491 #tabnav a:visited.disabled,

492 #tabnav a:link:hover.disabled,

493 #tabnav a:visited:hover.disabled {

494 color: #ccc;

495 cursor: default;

496 &:hover {

497 text-decoration: none;

498 }

499 }

500

501 /* Utility for styling notification numbers */

502

503 .count-number {

504 padding: 2px $lineheight/4;

505 border-radius: 2px;

506 background: #d7d7ff;

507 margin: 0 2px;

508 font-size: 11px;

509 color: #333;

510 }

511

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

513

514 #greeting {

515 float: right;

516 padding-top: 3px;

517 margin-right: $lineheight/4;

518 }

519

520 .greeting-bar-unread {

521 font-weight: bold;

522 }

523

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

525

526 #noscript {

527 z-index: 20000000;

528 position: absolute;

529 top: 15px;

530 left: 15px;

531 }

532

533 /* Rules for bootstrap tooltips */

534

535 .tooltip {

536 position: absolute;

537 display: none;

538 color: #333;

539 text-align: left;

540 font-size: 12px;

541 max-width: 250px;

542 }

543

544 .tooltip.in {

545 opacity: 0.8;

546 z-index: 1030;

547 height: auto;

548 display: block;

549 }

550

551 .tooltip.top {

552 margin-top: -10px;

553 text-align: center;

554 }

555

556 .tooltip.right {

557 margin-left: 10px;

558 }

559

560 .tooltip.bottom {

561 margin-top: 10px;

562 text-align: center;

563 }

564

565 .tooltip.left {

566 margin-left: -10px;

567 text-align: right;

568 }

569

570 .tooltip-inner {

571 display: inline-block;

572 padding: 10px;

573 font-weight: normal;

574 background-color: white;

575 }

576

577 .tooltip-arrow {

578 position: absolute;

579 width: 0;

580 height: 0;

581 border-color: transparent;

582 border-style: solid;

583 }

584

585 .tooltip.top .tooltip-arrow {

586 bottom: -5px;

587 left: 50%;

588 margin-left: -5px;

589 border-top-color: white;

590 border-width: 5px 5px 0;

591 }

592

593 .tooltip.right .tooltip-arrow {

594 top: 50%;

595 left: -5px;

596 margin-top: -5px;

597 border-right-color: white;

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

599 }

600

601 .tooltip.left .tooltip-arrow {

602 top: 50%;

603 right: -5px;

604 margin-top: -5px;

605 border-left-color: white;

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

607 }

608

609 .tooltip.bottom .tooltip-arrow {

610 top: -5px;

611 left: 50%;

612 margin-left: -5px;

613 border-bottom-color: white;

614 border-width: 0 5px 5px;

615 }

616

617 /* Rules for Leaflet maps */

618

619 .leaflet-control .control-button {

620 display: block;

621 height: 40px;

622 width: 40px;

623 background-color: #333;

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

625 -bottom: 1px solid #333;

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

627 margin-bottom: 10px;

628 outline: none;

629

630 &:hover {

631 background-color: black;

632 }

633

634 &.active {

635 background-color: #9ed485;

636 }

637

638 &.disabled {

639 background-color: #333;

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

641 cursor: default;

642 }

643

644 .icon {

645 margin: 10px;

646 }

647 }

648

649 .leaflet-control .zoomin,

650 .control-layers .control-button {

651 margin-bottom: 0px;

652 border-radius: 4px 0 0 0;

653 }

654

655 .site .leaflet-control .zoomout,

656 .control-key .control-button {

657 margin-bottom: 0;

658 border-radius: 0;

659 }

660

661 .leaflet-control .zoomout, // For non-main page maps

662 .control-locate .control-button,

663 .control-share .control-button {

664 border-radius: 0 0 0 4px;

665 }

666

667 /* Rules for the home page */

668

669 .site-export #map,

670 .site-index #map,

671 .site-edit #map {

672 height: 100%;

673 overflow: hidden;

674 }

675

676 #map-ui {

677 display: none;

678 position: relative;

679 float: right;

680 width: 250px;

681 height: 100%;

682 background: white;

683 border-left: 1px solid #CCC;

684 overflow: auto;

685

686 .section {

687 border-bottom: 1px solid #DDD;

688 padding: 15px;

689 }

690

691 a.close-button {

692 float: right;

693 padding:5px;

694 font-size:20px;

695 line-height:10px;

696 color:#222;

697 border:1px solid #ddd;

698 }

699 }

700

701 .layers-ui,

702 .share-ui {

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

704 margin-bottom: 0;

705 }

706 }

707

708 .layers-ui {

709 li {

710 border-radius: 4px;

711 overflow: hidden;

712 margin-bottom: 10px;

713 }

714

715 label {

716 display: block;

717 padding: 5px 5px 5px 7px;

718 background-color: #eee;

719 cursor: pointer;

720 }

721

722 li.active label {

723 background-color: #ccc;

724 }

725

726 .base-layers {

727 .leaflet-container {

728 width: 100%;

729 height: 50px;

730 cursor: pointer;

731 }

732 }

733 }

734

735 .share-ui {

736 .share-tabs {

737 margin-bottom: 10px;

738

739 a {

740 color: #fff;

741 text-decoration: none;

742 background-color: $lightblue;

743 padding: 5px 10px;

744 }

745

746 a:first-child {

747 border-right: 1px solid #fff;

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

749 }

750

751 a:last-child {

752 border-left: 1px solid #fff;

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

754 }

755

756 a.active {

757 background-color: $blue;

758 }

759 }

760

761 .share-tab {

762 display: none;

763 }

764

765 .share-link {

766 input[type=text],

767 textarea {

768 width: 100%;

769 font-family: monospace;

770 font-size: small;

771 line-height: 1.3;

772 }

773 }

774

775 .share-image {

776 label {

777 margin-right: 10px;

778 }

779 }

780

781 #embed_html {

782 resize: vertical;

783 }

784

785 #mapnik_scale {

786 width: 100px;

787 }

788 }

789

790 .leaflet-top.leaflet-right {

791 top: $lineheight/2 !important;

792 .leaflet-control {

793 margin-right: 0px !important;

794 margin-top: 0px !important;

795 }

796 }

797

798 .leaflet-popup-scrolled {

799 padding-right: $lineheight;

800 border-bottom: 0px !important;

801 border-top: 0px !important;

802 }

803

804 .leaflet-popup-content-wrapper {

805 border-radius: 4px !important;

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

807 }

808

809 /* Rules for edit menu */

810

811 .menuicon {

812 padding: 0 $lineheight/4;

813 font-weight: normal;

814 display: inline-block;

815 &:hover {

816 text-decoration: none !important;

817 }

818 }

819

820 .menu {

821 display: none;

822 z-index: 10000;

823 position: absolute;

824 background-color: #ffffff;

825 border: 1px solid $lightgrey;

826 border-top: 0px;

827 ul {

828 margin: 0px;

829 }

830 li {

831 padding: 2px $lineheight/4;

832 border-top: 1px solid #eee;

833 white-space: nowrap;

834 }

835 }

836

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

838

839 #attribution {

840 display: none;

841 }

842

843 .attribution_license,

844 .attribution_project {

845 text-align: left;

846 }

847

848 .attribution_notice {

849 text-align: center;

850 }

851

852 /* Rules for the popout map sidebar */

853

854 #sidebar {

855 display: none;

856 position: relative;

857 float: left;

858 border-right: 1px solid $lightgrey;

859 width: 33.3333%;

860 height: 100%;

861 ul {

862 margin-bottom: 0;

863 &:last-child {

864 border-bottom: 1px solid #ccc;

865 }

866 li {

867 margin-bottom: $lineheight/4;

868 &:last-child {

869 margin-bottom: 0;

870 }

871 }

872 }

873 }

874

875 .sidebar_heading {

876 position: relative;

877 padding: $lineheight/2 $lineheight;

878 z-index: 9999;

879 background: $offwhite;

880 border-bottom: 1px solid #ccc;

881 h4 {

882 margin: 0;

883 }

884 }

885

886 .sidebar_close {

887 position: absolute;

888 height: $lineheight;

889 top: 0px;

890 bottom: 0;

891 right: $lineheight;

892 margin: auto;

893 }

894

895 #sidebar_content {

896 position: relative;

897 margin-bottom: 20px;

898 overflow: auto;

899 height: 100%;

900 width: 100%;

901 h4 {

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

903 margin-top: $lineheight/2;

904 margin-bottom: 0;

905 border-bottom: 1px solid #ddd;

906 }

907 }

908

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

910

911 #mapkey {

912 .mapkey-table-key img {

913 display: block;

914 margin-left: auto;

915 margin-right: auto;

916 }

917 td {

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

919 }

920 }

921

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

923

924 .search_searching {

925 margin-top: $lineheight/4;

926 margin-bottom: $lineheight/4;

927 }

928

929 .search_results_entry {

930 margin-bottom: 0;

931

932 .search_details {

933 display: block;

934 text-align: right;

935 }

936 }

937

938 .search_results_entry .search_searching {

939 text-align: center;

940 margin: $lineheight auto;

941 width: $lineheight;

942 display: block;

943 }

944

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

946

947 .search_results_error {

948 color: #f00;

949 }

950

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

952

953 #browse_content {

954 position: relative;

955 .browse_show_list.button {

956 position: absolute;

957 left: $lineheight;

958 right: $lineheight;

959 bottom: -40px;

960 margin-bottom: 0;

961 }

962 a.more-details {

963 position: absolute;

964 top: 0;

965 right: $lineheight;

966 }

967 ul li {

968 margin-bottom: 0;

969 }

970 }

971

972 .browse_details {

973 position: relative;

974 }

975

976 .browse_status {

977 display: none;

978 }

979

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

981

982 .export_bounds {

983 text-align: center;

984 }

985

986 .export_area_inputs {

987 margin-bottom: $lineheight/2;

988 input[type="text"] {

989 width: 80px;

990 margin-bottom: 5px;

991 }

992 }

993

994 .export_bound {

995 margin: $lineheight/4;

996 }

997

998 /* Rules for the main content area */

999

1000 #content {

1001 padding: $lineheight;

1002 position: relative;

1003 }

1004

1005 .site-edit #content,

1006 .site-index #content,

1007 .site-export #content {

1008 position: fixed;

1009 padding: 0;

1010 top: 30px; bottom: 0;

1011 left: 184px; right: 0;

1012 border-left: 1px solid #ccc;

1013 }

1014

1015 .wrapper {

1016 margin-left: 184px;

1017 border-left: 1px solid #ccc;

1018 text-align: left;

1019 }

1020

1021 #content.maximised {

1022 top: 0;

1023 left: 0;

1024 right: 0;

1025 bottom: 0;

1026 border: 0;

1027 z-index: 1000;

1028 }

1029

1030 #slim_container {

1031 width: 100%;

1032 }

1033

1034 #slim_container_content {

1035 max-width: 50em;

1036 background-color: #FFFFFF;

1037 margin: $lineheight/2 auto;

1038 padding: 3px;

1039 border-radius: 25px;

1040 -moz-border-radius: 25px;

1041 border: 1px solid #e6e6e6;

1042 }

1043

1044 #slim_content {

1045 margin: $lineheight/2;

1046 margin-top: 95px;

1047 max-width: 50em;

1048

1049 .content-heading {

1050 margin-bottom: 15px;

1051 }

1052 }

1053

1054 #slim_header {

1055 margin: 30px $lineheight/2;

1056 position: absolute;

1057 top: 0px;

1058 margin-right: $lineheight/4;

1059 img {

1060 vertical-align: middle;

1061 margin-bottom: $lineheight/4;

1062 margin-right: $lineheight/4;

1063 }

1064 }

1065

1066 .content-heading {

1067 position: relative;

1068 padding: $lineheight;

1069 background: $offwhite;

1070 h1, h2 {

1071 margin-bottom: $lineheight/2;

1072 line-height: 100%;

1073 &:last-child {

1074 margin-bottom: 0;

1075 }

1076 }

1077 p {

1078 margin-top: $lineheight/2;

1079 margin-bottom: 0px;

1080 }

1081 }

1082

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

1084

1085 .content_map {

1086 position: relative;

1087 width: 45%;

1088 height: 400px;

1089 border: 1px solid #ccc;

1090 margin-bottom: $lineheight;

1091 float: right;

1092 }

1093

1094 .content_map #small_map {

1095 height: 100%;

1096 width: 100%;

1097 margin-bottom: $lineheight;

1098 }

1099

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

1101

1102 #changeset_list {

1103 width: 100%;

1104 ul {

1105 padding: $lineheight/2 0;

1106 margin-bottom: 0px;

1107 border-top: 1px solid #ccc;

1108 &:last-child {

1109 border-bottom: 1px solid #ccc;

1110 }

1111 }

1112 .selected {

1113 background: #FFFFC0;

1114 }

1115 .date,

1116 .user {

1117 border-left: 1px solid #ccc;

1118 padding-left: $lineheight/4;

1119 margin-right: $lineheight/4;

1120 }

1121 }

1122

1123 #changeset_list_map_wrapper {

1124 position: absolute;

1125 width: 50%;

1126 height: 490px;

1127 top: 0;

1128 right: 0;

1129 }

1130

1131 #changeset_list_map_wrapper.scrolled {

1132 position: fixed;

1133 }

1134

1135 #changeset_list_map {

1136 position: absolute;

1137 bottom: $lineheight;

1138 top: $lineheight;

1139 right: $lineheight;

1140 left: $lineheight;

1141 border: 1px solid #ccc;

1142 }

1143

1144 #changeset_list_map_wrapper.scrolled #changeset_list_map {

1145 margin-left: 93px;

1146 }

1147

1148 /* Rules for the data browser */

1149

1150 .browse-section {

1151 border-top: 1px solid #ccc;

1152 margin-top: $lineheight/2;

1153 padding-top: $lineheight/2;

1154 &:first-child {

1155 margin-top: 0;

1156 }

1157 .warning {

1158 background-color: #ffe0cc;

1159 margin: 0px;

1160 padding: 4px 6px;

1161 max-width: 100%;

1162 }

1163 h4, p {

1164 margin-bottom: $lineheight/4;

1165 }

1166 ul, .bbox, .geo {

1167 display: inline-block;

1168 vertical-align: top;

1169 max-width: 65%;

1170 }

1171 ul p {

1172 margin-left: 0;

1173 margin-bottom: 0;

1174 }

1175 h4 {

1176 float: left;

1177 width: 33.3333%;

1178 display: inline-block;

1179 vertical-align: top;

1180 }

1181 }

1182

1183 .bbox {

1184 div {

1185 width: 33.3333%;

1186 text-align: center;

1187 padding: $lineheight/4 0;

1188 overflow: hidden;

1189 text-overflow: ellipsis;

1190 float: left;

1191 }

1192 .max_lat,

1193 .min_lat {

1194 margin-left: auto;

1195 margin-right: auto;

1196 width: 100%;

1197 }

1198 }

1199

1200 #browse_map .geolink {

1201 display: none;

1202 }

1203

1204 #browse_map .secondary-actions {

1205 margin-bottom: $lineheight/2;

1206 }

1207

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

1209

1210 #trace_list {

1211 font-size: $lineheight/2;

1212 border-width: 0px;

1213 text-align: right;

1214

1215 .trace_summary {

1216 font-size: 12px;

1217 color: gray;

1218 }

1219

1220 .trace_pending {

1221 color: red;

1222 }

1223

1224 .trace_public {

1225 color: green;

1226 }

1227

1228 .trace_identifiable {

1229 color: green;

1230 }

1231

1232 .trace_trackable {

1233 color: red;

1234 }

1235

1236 .trace_private {

1237 color: red;

1238 }

1239 }

1240

1241 /* Rules for the user profile page */

1242

1243 #userinformation {

1244

1245 min-height: 100px;

1246 .userinformation-inner {

1247 float: left;

1248 }

1249 h2 {

1250 margin-top: 0;

1251 }

1252 .user-description {

1253 width: 100%;

1254 clear: both;

1255 }

1256 .deemphasize {

1257 margin: 0;

1258 }

1259 }

1260

1261 .admin-user-info small {

1262 margin-bottom: $lineheight/2;

1263 display: inline;

1264 margin-right: $lineheight;

1265 }

1266

1267 .activity-block {

1268 clear: left;

1269 border-bottom: 1px solid #ccc;

1270 padding-bottom: $lineheight;

1271 float: left;

1272 h3 {

1273 margin-bottom: $lineheight/2;

1274 }

1275 }

1276

1277 .contact-activity {

1278 margin-top: $lineheight;

1279 width: 100%;

1280 }

1281

1282 .activity-details p {

1283 margin-left: 70px;

1284 margin-bottom: 0;

1285 }

1286

1287 #friends-container .contact-activity ul {

1288 margin-left: 70px;

1289 }

1290

1291 .user-view {

1292 p#no_home_location {

1293 margin: $lineheight;

1294 }

1295 .user_thumbnail {

1296 margin-top: $lineheight/4;

1297 float: left;

1298 }

1299 }

1300

1301 /* Rules for the user map */

1302

1303 .content_map .leaflet-popup-content {

1304 margin: $lineheight/2;

1305 min-height: 50px;

1306 }

1307

1308 /* Rules for user popups on maps */

1309

1310 .user_popup {

1311 min-width: 200px;

1312 p {

1313 padding: 0 0 5px 0;

1314 margin-top: 0 0 0 60px;

1315 font-size: 12px;

1316 }

1317 img.user_thumbnail {

1318 float: left;

1319 margin: 0 $lineheight/2 0 0;

1320 }

1321 }

1322

1323 /* Rules for the user list */

1324

1325 #user_list {

1326 font-size: $lineheight/2;

1327 width: 100%;

1328

1329 tr {

1330 vertical-align: middle;

1331 }

1332

1333 p {

1334 margin-top: 0px;

1335 margin-bottom: 0px;

1336 }

1337 }

1338

1339 #user_list_actions {

1340 float: right;

1341 margin-top: $lineheight/2;

1342 }

1343

1344 /* Rules for the diary list page */

1345

1346 .diary_entry-list img.user_thumbnail {

1347 float: left;

1348 }

1349

1350 .diary_post {

1351 max-width: 740px;

1352 position: relative;

1353 margin-top: $lineheight/2;

1354 padding-top: $lineheight;

1355 border-top: 1px solid #ccc;

1356

1357 &:first-child {

1358 margin-top: 0;

1359 border-top: 0;

1360 padding-top: 0;

1361 }

1362 h1, h2 {

1363 font-size: 21px;

1364 line-height: 1em;

1365 }

1366 small.deemphasize {

1367 float: left;

1368 display: block;

1369 }

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

1371 }

1372

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

1374 display: inline;

1375 }

1376

1377 #content .post_heading {

1378 margin-bottom: $lineheight;

1379 h2 {

1380 margin-top: 0;

1381 margin-bottom: $lineheight/2;

1382 font-size: 24px;

1383 }

1384 }

1385

1386 /* Rules for the diary entry page */

1387

1388 .diary_entry {

1389 #map {

1390 position: relative;

1391 width: 90%;

1392 height: 400px;

1393 border: 1px solid #ccc;

1394 display: none;

1395 margin-bottom: $lineheight;

1396 }

1397 #newcomment {

1398 border-top: 1px solid #ccc;

1399 padding-top: $lineheight;

1400 margin-top: $lineheight/2;

1401 }

1402 .comments {

1403 max-width: 740px;

1404 }

1405 .diary-comment {

1406 margin-top: $lineheight/2;

1407 border-top: 1px dashed #ccc;

1408 padding-top: $lineheight/2;

1409 &:first-child {

1410 margin-top: $lineheight;

1411 padding-top: $lineheight;

1412 border-top: 1px solid #ccc;

1413 }

1414 p {

1415 margin-bottom: $lineheight/2;

1416 }

1417 .comment-heading {

1418 margin-bottom: 0;

1419 margin-top: 0;

1420 }

1421 }

1422 }

1423

1424 .diary_entry-view img.user_thumbnail {

1425 float: left;

1426 }

1427

1428 /* Rules for the login page */

1429

1430 #login_openid_buttons {

1431 margin-bottom: 0;

1432 }

1433

1434 #login_openid_buttons li {

1435 float: left;

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

1437 }

1438

1439 /* Rules for the account confirmation page */

1440

1441 #terms {

1442 .legale {

1443 border: 1px solid #ccc;

1444 padding: $lineheight;

1445 margin-bottom: $lineheight;

1446 overflow: auto;

1447 height: 10em;

1448

1449 &:p#last {

1450 margin-bottom: 0px;

1451 }

1452

1453 &:ol {

1454 margin-bottom: 0px;

1455 }

1456

1457 &:img {

1458 display: block;

1459 margin: $lineheight auto inherit auto;

1460 }

1461 }

1462

1463 form.sign {

1464 input[type=submit] {

1465 float: left;

1466 }

1467 #decline {

1468 background: $grey;

1469 &:hover {

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

1471 }

1472 }

1473 }

1474 fieldset {

1475 margin-bottom: $lineheight;

1476 }

1477 #contributorGuidance {

1478 background-color: $offwhite;

1479 border-radius: 4px;

1480 -moz-border-radius: 4px;

1481 }

1482 .signing-buttons {

1483 height: 50px;

1484 }

1485 }

1486

1487 /* Rules for the account settings page */

1488

1489 #accountForm .user_map {

1490 position: relative;

1491 width: 500px;

1492 height: 400px;

1493 border: 1px solid #ccc;

1494 }

1495

1496 #accountForm .user_image {

1497 margin-bottom: 0;

1498 }

1499

1500 #accountForm #user_image {

1501 margin-left: 20px;

1502 }

1503

1504 #accountForm ul.accountImage-options {

1505 margin-left: 120px;

1506 }

1507

1508 .nohome .location {

1509 display: none;

1510 }

1511

1512 #homerow .message {

1513 display: none;

1514 }

1515

1516 .nohome .message {

1517 display: inline !important;

1518 }

1519

1520 .content_map.settings_map {

1521 width: 50%;

1522 float: none;

1523 }

1524

1525 /* Rules for the oauth settings page */

1526

1527 .oauth_clients .buttons .oauth-edit {

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

1529 }

1530

1531 .oauth_clients .buttons .oauth-delete {

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

1533 }

1534

1535 /* Rules for messages pages */

1536

1537 .messages {

1538 width: 100%;

1539 border: 1px solid #ddd;

1540

1541 input[type="submit"] {

1542 margin: auto;

1543 }

1544 tbody tr {

1545 border-top: 1px solid #ccc;

1546 }

1547

1548 .inbox-row {

1549 background: #f8f8ff;

1550 }

1551

1552 .inbox-row-unread {

1553 background:#CBEEA7;

1554 }

1555

1556 .right {

1557 float: right;

1558 }

1559

1560 tr td,

1561 tr th {

1562 padding: $lineheight/4;

1563 }

1564 p:last-child,

1565 h2:last-child,

1566 h3:last-child,

1567 ol:last-child,

1568 ul:last-child {

1569 margin-bottom:0;

1570 }

1571 tr td {

1572 height: 30px;

1573 border-right: 1px solid $lightgrey;

1574 }

1575 }

1576

1577 .inbox-row .inbox-mark-read {

1578 display: none;

1579 }

1580

1581 .info-line {

1582 margin-bottom: $lineheight;

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

1584 border-bottom: 1px solid #ccc;

1585

1586 form, form div {

1587 display: inline;

1588 }

1589 }

1590

1591 .info-line .user_thumbnail_tiny {

1592 vertical-align: middle;

1593 }

1594

1595 .inbox-mark-unread,

1596 .inbox-mark-read,

1597 .inbox-delete {

1598 width: 1%;

1599 }

1600

1601 .inbox-row-unread .inbox-mark-unread {

1602 display: none;

1603 }

1604

1605 .message-read .message-buttons {

1606 margin-top: $lineheight;

1607 padding-top: $lineheight;

1608 border-top: 1px solid $lightgrey;

1609 }

1610

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

1612 border-radius: 0;

1613 }

1614

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

1616

1617 .flash {

1618 padding: $lineheight;

1619 &#error {

1620 background-color: #ff7070;

1621 }

1622 &#warning {

1623 background-color: #ffe0cc;

1624 }

1625 &#notice {

1626 background-color: #CBEEA7;

1627 }

1628 }

1629

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

1631

1632 .field_with_errors {

1633 padding: 2px;

1634 background-color: #ff7070;

1635 display: table;

1636 }

1637

1638 /* Rules for rails validation error boxes */

1639

1640 #errorExplanation {

1641 width: 400px;

1642 border: 2px solid #ff7070;

1643 padding: 0 $lineheight/2;

1644 margin-bottom: $lineheight;

1645 background-color: #f0f0f0;

1646

1647 h2 {

1648 margin: 0 -10px 10px -10px;

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

1650 font-weight: bold;

1651 font-size: 12px;

1652 background-color: #c00;

1653 color: #fff;

1654 text-align: left;

1655 }

1656

1657 p {

1658 color: #333;

1659 margin-bottom: 0px;

1660 padding: $lineheight/4;

1661 }

1662

1663 ul {

1664 padding-left: $lineheight;

1665

1666 li {

1667 font-size: 12px;

1668 list-style: disc;

1669 }

1670 }

1671 }

1672

1673 /* Rules for forms */

1674

1675 .standard-form {

1676 fieldset {

1677 margin-bottom: $lineheight;

1678 }

1679 label.standard-label {

1680 display: block;

1681 margin-bottom: $lineheight/4;

1682 font-size: $typeheight;

1683 font-weight: bold;

1684 line-height: 1.5;

1685 }

1686 label.standard-label.secondary {

1687 display: inline-block;

1688 font-weight: normal;

1689 }

1690 .form-help {

1691 font-weight: normal;

1692 }

1693 .form-column {

1694 float: left;

1695 margin-right: 20px;

1696 }

1697 .form-divider {

1698 margin-top: $lineheight;

1699 padding-top: $lineheight;

1700 border-top: 1px solid $lightgrey;

1701 }

1702 .form-row {

1703 margin-bottom: $lineheight/2;

1704 }

1705 .form-list {

1706 margin-bottom: 0;

1707 }

1708 .form-list li {

1709 margin-bottom: 5px;

1710 }

1711 input[type="checkbox"],

1712 input[type="radio"] {

1713 float: left;

1714 margin-top: 5px;

1715 }

1716 }

1717

1718 #remember_me_openid {

1719 display: block;

1720 }

1721

1722 input[type="checkbox"],

1723 input[type="radio"] {

1724 margin-right: 5px;

1725 }

1726

1727 input[type="text"],

1728 input[type="email"],

1729 input[type="url"],

1730 input[type="password"],

1731 textarea {

1732 border: 1px solid #ccc;

1733 padding: 2px 5px;

1734 margin: 0;

1735 width: 200px;

1736 }

1737

1738 textarea {

1739 padding: 5px;

1740 width: 100%;

1741 }

1742

1743 /* Rules for user images */

1744

1745 img.user_image {

1746 max-width: 100px;

1747 max-height: 100px;

1748 border: 1px solid #ccc;

1749 margin-bottom: $lineheight;

1750 float: left;

1751 margin-right: $lineheight;

1752 }

1753

1754 img.user_thumbnail {

1755 max-width: 50px;

1756 max-height: 50px;

1757 border: 1px solid #ccc;

1758 margin-right: $lineheight;

1759 }

1760

1761 img.user_thumbnail_tiny {

1762 max-width: 25px;

1763 max-height: 25px;

1764 border: 1px solid #ccc;

1765 }

1766

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

1768

1769 .nowrap {

1770 white-space: nowrap;

1771 }

1772

1773 /* Rules for geo microformats */

1774

1775 abbr.geo {

1776 border-bottom: none;

1777 }

1778

1779 /* Rules for RSS buttons */

1780

1781 .rsssmall {

1782 position: relative;

1783 top: 5px;

1784 }

1785

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

1787

1788 ul.secondary-actions {

1789 font-style: normal;

1790 margin-bottom: 0;

1791 margin-left: 0;

1792 &.pager {

1793 display: inline-block;

1794 margin-right: 60px;

1795 }

1796 li {

1797 display: block;

1798 float: left;

1799 list-style: none;

1800 border-left: 1px solid #ccc;

1801 padding-left: $lineheight/4;

1802 margin-right: $lineheight/4;

1803 &:first-child {

1804 border-left: 0;

1805 padding-left: 0;

1806 }

1807 &:last-child {

1808 margin-right: 0px;

1809 }

1810 }

1811 }

1812

1813 /* Utility for managing inner content areas */

1814

1815 .inner22 { padding: $lineheight;}

1816

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

1818

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

1820

1821 .inner02 { padding: 0 $lineheight;}

1822

1823 /* Utility for general button styles */

1824

1825 input[type="button"],

1826 input[type="submit"],

1827 input[type="reset"],

1828 a.button {

1829 cursor: pointer;

1830 border: 0;

1831 display: inline-block;

1832 line-height: 20px;

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

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

1835 min-width: 120px;

1836 margin: 0 0 $lineheight/2 0;

1837 color: white;

1838 background: $blue;

1839 text-align: center;

1840 border-radius: 2px;

1841 -moz-border-radius: 2px;

1842 &:hover {

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

1844 text-decoration: none;

1845 }

1846 &.deemphasize {

1847 background: $lightblue;

1848 &:hover {

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

1850 }

1851 }

1852 &:disabled {

1853 background: $lightgrey;

1854 &:hover {

1855 background: $lightgrey;

1856 }

1857 }

1858 &:last-child {

1859 margin-bottom: 0;

1860 }

1861 }

1862

1863 .buttons {

1864 min-width: 200px;

1865 input[type="submit"],

1866 input[type="button"],

1867 input[type="reset"],

1868 .button {

1869 box-sizing: border-box;

1870 float: left;

1871 border-radius: 0;

1872 margin:0;

1873 min-width: 100px;

1874 max-width: 180px;

1875 border-right:1px solid white;

1876 text-overflow: ellipsis;

1877 white-space: nowrap;

1878 overflow: hidden;

1879 }

1880 input:first-child,

1881 .button:first-child {

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

1883 }

1884 input:last-child,

1885 .button:last-child {

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

1887 border-right-width: 0;

1888 }

1889 input:only-child,

1890 .button:only-child,

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

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

1893 border-radius:2px;

1894 border-right-width: 0;

1895 }

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

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

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

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

1900 border-right-width: 0;

1901 }

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

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

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

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

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

1907 }

1908 }

1909

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

1911

1912 .table0,

1913 .item0 {

1914 background: $offwhite;

1915 }

1916

1917 .table1,

1918 .item1 {

1919 background: #fff;

1920 }

1921

1922 /* Rules for OpenID logo */

1923

1924 .openid_logo {

1925 vertical-align: text-bottom;

1926 border: 0;

1927 }

1928

1929 /* Rules for rich text */

1930

1931 .richtext,

1932 .prose {

1933 h1, h2 {

1934 padding-bottom: $lineheight/2;

1935 border-bottom: 1px dashed #cccccc;

1936 margin-bottom: $lineheight/2;

1937 }

1938

1939 h1 {

1940 font-size: 24px;

1941 }

1942

1943 h2 {

1944 font-size: 18px;

1945 }

1946

1947 h3 {

1948 font-size: $typeheight;

1949 }

1950

1951 code {

1952 font-size: 13px;

1953 background: #e8e8e8;

1954 padding: 2px 3px;

1955 }

1956

1957 pre {

1958 font-size: 13px;

1959 background: #e8e8e8;

1960 padding: 2px 3px;

1961

1962 code {

1963 padding: 0;

1964 }

1965 }

1966

1967 img {

1968 padding: $lineheight;

1969 background-color: $offwhite;

1970 display: block;

1971 max-width: 100%;

1972 margin: auto;

1973 }

1974

1975 blockquote {

1976 border-left: $lineheight solid $offwhite;

1977 padding-left: $lineheight;

1978 margin: 0;

1979 color: #7E7E7E;

1980 }

1981

1982 ul, ol {

1983 padding-left: $lineheight;

1984 margin-bottom: $lineheight;

1985 margin-left: $lineheight;

1986 }

1987

1988 ul li {

1989 list-style: disc;

1990 }

1991

1992 ol li {

1993 list-style: decimal;

1994 }

1995 }

1996

1997 .diary_post .richtext {

1998 margin-top: $lineheight;

1999 }

2000

2001 .comments .richtext {

2002 margin-left: 70px;

2003 margin-top: 0;

2004 }

2005

2006 /* Rules for rich text editors */

2007

2008 .richtext_container {

2009 margin-bottom: $lineheight;

2010

2011 .richtext_content {

2012 width: 50%;

2013 display: inline-block;

2014 vertical-align: top;

2015

2016 .richtext_preview {

2017 display: inline-block;

2018 padding: $lineheight;

2019 background-color: $offwhite;

2020 overflow-x: auto;

2021

2022 &.loading {

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

2024 background-repeat: no-repeat;

2025 background-position: center;

2026 }

2027

2028 > :first-child {

2029 margin-top: 0px;

2030 }

2031 }

2032 }

2033

2034 .richtext_help {

2035 display: inline-block;

2036 vertical-align: top;

2037 margin-left: 15px;

2038 background-color: #f8f8ff;

2039 padding: $lineheight/2;

2040 width: 220px;

2041

2042 ul {

2043 margin-bottom: 0;

2044 }

2045

2046 h4.heading, li {

2047 border-bottom: 1px solid #ccc;

2048 margin-bottom: $lineheight/4;

2049 padding-bottom: $lineheight/4;

2050 }

2051

2052 li h4, li span, li p {

2053 display: inline-block;

2054 vertical-align: top;

2055 font-size: 11px;

2056 }

2057

2058 li h4 {

2059 width: 40%;

2060 margin: 0;

2061 }

2062

2063 li span, li p {

2064 width: 50%;

2065 margin-left: $lineheight/2;

2066 margin-bottom: $lineheight/4;

2067 white-space: nowrap;

2068 }

2069 }

2070 }

2071

2072 /* Rules for the user notes list */

2073

2074 .note_list {

2075 tr.creator {

2076 background-color: #eeeeee;

2077 }

2078

2079 td {

2080 padding: 3px;

2081 }

2082

2083 p {

2084 margin-bottom: 0px;

2085 }

2086 }

2087

2088 /* Rules for the notes interface */

2089

2090 .leaflet-popup-content .note {

2091 padding-top: $lineheight/2;

2092 }

2093

2094 .leaflet-popup-content .note {

2095 h2 {

2096 margin-bottom: $lineheight/2;

2097 }

2098

2099 div {

2100 margin-top: $lineheight/2;

2101 }

2102

2103 .permalink {

2104 position: absolute;

2105 top: $lineheight/4;

2106 left: $lineheight/4;

2107 min-width: 15px;

2108 min-height: 15px;

2109 }

2110

2111 .permalink span {

2112 display: none;

2113 padding-left: $lineheight;

2114 }

2115

2116 .permalink:hover span {

2117 display: block;

2118 }

2119

2120 .warning {

2121 display: block;

2122 background-color: #ffe0cc;

2123 padding: 4px 6px;

2124 margin-bottom: $lineheight/2;

2125 }

2126

2127 .comment_body {

2128 margin-top: 2px;

2129 margin-bottom: 2px;

2130

2131 p {

2132 margin-top: 0px;

2133 margin-bottom: 0px;

2134 }

2135 }

2136

2137 .comment {

2138 width: 100%;

2139 height: 100px;

2140 }

2141

2142 .buttons {

2143 margin-top: $lineheight/4;

2144 text-align: right;

2145 }

2146 }

2147

2148 /*

2149 * Rules for the iD editor

2150 */

2151

2152 .site-edit-id {

2153 #left,

2154 #large-title {

2155 display: none;

2156 }

2157

2158 #small-title {

2159 display: inline-block;

2160 width: 185px;

2161 height: 30px;

2162 font-size: 14px;

2163 margin: 0;

2164 background-color: #eee;

2165 border-bottom: 1px solid #ccc;

2166 text-align: center;

2167 padding-top: 7px;

2168 }

2169

2170 #content {

2171 left: 0;

2172 }

2173 }

2174

2175 .id-embed {

2176 width: 100%;

2177 height: 100%;

2178 }

2179

2180 /* Rules for rotating sidebar ads */

2181 .ad-container {

2182 display: block;

2183 height: 120px;

2184 overflow: hidden;

2185 position: relative;

2186 border-bottom: 1px solid #ccc;

2187 }

2188

2189 .ad {

2190 height: 100px;

2191 border: 0;

2192 background: #fff;

2193 }