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 $green: #7ebc6f;

9 $grey: #CCC;

10 $lightgrey: #EEE;

11 $darkgrey: #AAA;

12 $hovercolor: 20%;

13 $headerHeight: 75px;

14 $sidebarWidth: 350px;

15 $keyline: 1px solid $grey;

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

19 /* Minimal CSS reset */

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

22 margin: 0;

23 padding: 0;

24 border: 0;

25 font-size:100%;

26 }

28 fieldset,img { border: 0; }

30 legend { color: #000; }

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

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

36 table {

37 border-collapse: collapse;

38 border-spacing: 0;

39 }

41 li { list-style: none; }

43 input,

44 select,

45 textarea,

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

48 abbr, acronym {

49 border-bottom: .1em dotted;

50 cursor: help;

51 }

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

55 .clearfix:before,

56 .clearfix:after {

57 content: " ";

58 display: table;

59 }

61 .clearfix:after {

62 clear: both;

63 }

65 /* Basic grid */

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

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

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

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

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

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

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

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

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

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

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

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

79 .col12 { width:100%; }

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

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

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

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

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

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

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

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

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

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

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

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

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

95 .fillL { background-color: white; }

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

99 * {

100 -moz-box-sizing: border-box;

101 -webkit-box-sizing: border-box;

102 box-sizing: border-box;

103 }

104

105 body {

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

107 font-size: $typeheight;

108 line-height: 1.6666;

109 color: #222;

110 background-color: #fff;

111 margin: 0px;

112 padding: 0px;

113 text-align: left;

114 }

115

116 body.slim {

117 background-color: #f0f0f0;

118 }

119

120 h1, h2, h3 {

121 font-weight: bold;

122 line-height: 1.2;

123 }

124

125 h1 {

126 font-size: 18px;

127 }

128

129 h2, h3 {

130 font-size: 16px;

131 }

132

133 p {

134 margin-bottom: $lineheight;

135 }

136

137 p > img {

138 width: auto;

139 max-width: 100%;

140 }

141

142 small, aside {

143 font-size: 12px;

144 }

145

146 h1:first-child,

147 h2:first-child,

148 h3:first-child,

149 h4:first-child,

150 h5:first-child,

151 h6:first-child {

152 margin-top: 0;

153 }

154

155 .column-1 {

156 width: 50%;

157 margin: 0 0 $lineheight/2 0;

158 }

159

160 .small_icon {

161 vertical-align: middle;

162 margin-right: $lineheight/4;

163 }

164

165 /* Rules for icons */

166

167 .icon {

168 display:inline-block;

169 vertical-align:top;

170 width:20px;

171 height:20px;

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

173 text-indent:-9999px;

174 overflow:hidden;

175 }

176

177 .icon-pre-text {

178 margin-right: 5px;

179 }

180

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

196

197 /* Rules for links */

198

199 a {

200 color: #00f;

201 text-decoration: none;

202 &:hover {

203 text-decoration: underline;

204 }

205 }

206

207 /* Rules for horizontal lines */

208

209 hr {

210 border: none;

211 background-color: #ccc;

212 color: #ccc;

213 height: 1px;

214 }

215

216 /* General styles for tables */

217

218 table {

219 width: 100%;

220 margin-bottom: $lineheight;

221 th, td {

222 text-align: left;

223 padding: $lineheight/4;

224 line-height: $lineheight;

225 }

226 th {

227 font-weight: bold;

228 vertical-align: top;

229 }

230 td {

231 vertical-align: middle;

232 }

233 }

234

235 /* Rules for the search box */

236

237 #search_form {

238 position: relative;

239 padding: $lineheight;

240 background-color: $lightgrey;

241 border-bottom: $keyline;

242

243 #query_wrapper {

244 overflow: hidden;

245 }

246

247 input {

248 width: 100%;

249 height: 30px;

250 border-right: none;

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

252

253 transition: 300ms linear;

254 -webkit-transition: 300ms linear;

255 -moz-transition: 300ms linear;

256 }

257

258 input:focus {

259 outline: none;

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

261 }

262

263 input[type=submit] {

264 float: right;

265 width: auto;

266 min-width: 0;

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

268 }

269 }

270

271 /* Utility for de-emphasizing content */

272

273 .deemphasize {

274 color: #999;

275 a {

276 color: $blue;

277 }

278 }

279

280 /* Rules for donation request box */

281

282 a.donate {

283 display: block;

284 width: 163px;

285 padding: $lineheight/4;

286 border: 1px solid #AED1A0;

287 background: #cbeea7;

288 font-size: $typeheight;

289 line-height: 1.4;

290 text-align: center;

291 border-radius: 2px;

292 color: #222;

293 margin: $lineheight/2 auto;

294

295 &:hover {

296 background: #9ed485;

297 text-decoration: none;

298 }

299 }

300

301 /* Rules for the header */

302

303 header {

304 height: $headerHeight;

305 position: relative;

306 border-bottom: $keyline;

307 z-index: 1001;

308

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

310 display: inline-block;

311 }

312

313 > * {

314 height: 100%;

315 padding: $lineheight;

316 }

317

318 h1, nav.primary {

319 float: left;

320 }

321

322 img.logo {

323 width: 30px;

324 height: 30px;

325 vertical-align: middle;

326 }

327

328 h1 {

329 margin: 0;

330 border-right: $keyline;

331 }

332 }

333

334 nav.primary {

335 > ul {

336 border: 1px solid darken($green, 20%);

337 border-radius: 4px;

338 }

339

340 a.tab {

341 display: inline-block;

342 font-weight: bold;

343 text-decoration: none;

344 color: $green;

345 padding: 5px 15px;

346 border-right: 1px solid darken($green, 20%);

347 }

348

349 #edit_tab a.tab {

350 border-right: 1px solid lighten($green, 20%);

351 }

352

353 .dropdown-toggle {

354 padding: 5px 10px 5px 5px;

355 }

356

357 .caret {

358 margin-top: 15px;

359 border-top-color: $green;

360 }

361

362 .disabled a {

363 color: #ccc;

364 cursor: default;

365

366 &:hover {

367 text-decoration: none;

368 }

369

370 .caret {

371 border-top-color: #ccc;

372 }

373 }

374 }

375

376 .site-index #view_tab,

377 .changeset-list #history_tab,

378 .site-export #export_tab,

379 .site-edit #edit_tab {

380 background-color: $green;

381

382 .tab {

383 color: #fff;

384 }

385

386 .caret {

387 border-top-color: #fff;

388 }

389 }

390

391 nav.secondary {

392 position: absolute;

393 right: 0;

394

395 > ul a {

396 font-weight: bold;

397 text-decoration: none;

398 color: $darkgrey;

399 padding-right: 10px;

400 }

401

402 .dropdown {

403 border: 1px solid $grey;

404 border-radius: 4px;

405 }

406

407 img {

408 vertical-align: top;

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

410 margin-right: 5px;

411 }

412

413 #inboxanchor {

414 display: inline-block;

415 position: relative;

416 height: 20px;

417 top: -2px;

418 margin: 0 2px 0 0;

419 padding: 0 5px 0 0;

420 border-radius: 2px;

421 }

422

423 .dropdown-toggle {

424 display: block;

425 padding: 3px 7px;

426 color: #000;

427 text-decoration: none;

428 }

429

430 .dropdown-menu {

431 left: auto;

432 right: 0;

433

434 .count-number {

435 float: right;

436 padding: 0 5px;

437 margin: 0;

438 }

439 }

440 }

441

442 /* Utility for styling notification numbers */

443

444 .count-number {

445 padding: 2px $lineheight/4;

446 border-radius: 2px;

447 background: #d7d7ff;

448 margin: 0 2px;

449 font-size: 11px;

450 color: #333;

451 }

452

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

454

455 #noscript {

456 z-index: 20000000;

457 position: absolute;

458 top: 15px;

459 left: 15px;

460 }

461

462 /* Rules for bootstrap tooltips */

463

464 .tooltip {

465 position: absolute;

466 display: none;

467 color: #333;

468 text-align: left;

469 font-size: 12px;

470 max-width: 250px;

471 }

472

473 .tooltip.in {

474 opacity: 0.8;

475 z-index: 1030;

476 height: auto;

477 display: block;

478 }

479

480 .tooltip.top {

481 margin-top: -10px;

482 text-align: center;

483 }

484

485 .tooltip.right {

486 margin-left: 10px;

487 }

488

489 .tooltip.bottom {

490 margin-top: 10px;

491 text-align: center;

492 }

493

494 .tooltip.left {

495 margin-left: -10px;

496 text-align: right;

497 }

498

499 .tooltip-inner {

500 display: inline-block;

501 padding: 10px;

502 font-weight: normal;

503 background-color: white;

504 }

505

506 .tooltip-arrow {

507 position: absolute;

508 width: 0;

509 height: 0;

510 border-color: transparent;

511 border-style: solid;

512 }

513

514 .tooltip.top .tooltip-arrow {

515 bottom: -5px;

516 left: 50%;

517 margin-left: -5px;

518 border-top-color: white;

519 border-width: 5px 5px 0;

520 }

521

522 .tooltip.right .tooltip-arrow {

523 top: 50%;

524 left: -5px;

525 margin-top: -5px;

526 border-right-color: white;

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

528 }

529

530 .tooltip.left .tooltip-arrow {

531 top: 50%;

532 right: -5px;

533 margin-top: -5px;

534 border-left-color: white;

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

536 }

537

538 .tooltip.bottom .tooltip-arrow {

539 top: -5px;

540 left: 50%;

541 margin-left: -5px;

542 border-bottom-color: white;

543 border-width: 0 5px 5px;

544 }

545

546 /* Rules for Leaflet maps */

547

548 .leaflet-control .control-button {

549 display: block;

550 height: 40px;

551 width: 40px;

552 background-color: #333;

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

554 -bottom: 1px solid #333;

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

556 margin-bottom: 10px;

557 outline: none;

558

559 &:hover {

560 background-color: black;

561 }

562

563 &.active {

564 background-color: #9ed485;

565 }

566

567 &.disabled {

568 background-color: #333;

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

570 cursor: default;

571 }

572

573 .icon {

574 margin: 10px;

575 }

576 }

577

578 .leaflet-control .zoomin,

579 .control-layers .control-button {

580 margin-bottom: 0px;

581 border-radius: 4px 0 0 0;

582 }

583

584 .leaflet-control .zoomout,

585 .control-key .control-button {

586 margin-bottom: 0;

587 border-radius: 0;

588 }

589

590 .control-locate .control-button,

591 .control-share .control-button {

592 border-radius: 0 0 0 4px;

593 }

594

595 /* Rules for the home page */

596

597 #map {

598 height: 100%;

599 overflow: hidden;

600 }

601

602 #map-ui {

603 display: none;

604 position: relative;

605 float: right;

606 width: 250px;

607 height: 100%;

608 background: white;

609 overflow: auto;

610

611 .section {

612 border-bottom: 1px solid #DDD;

613 padding: 15px;

614 }

615

616 a.close-button {

617 float: right;

618 padding:5px;

619 font-size:20px;

620 line-height:10px;

621 color:#222;

622 border:1px solid #ddd;

623 }

624 }

625

626 .layers-ui,

627 .share-ui {

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

629 margin-bottom: 0;

630 }

631 }

632

633 .layers-ui {

634 li {

635 border-radius: 4px;

636 overflow: hidden;

637 margin-bottom: 10px;

638 }

639

640 label {

641 display: block;

642 padding: 5px 5px 5px 7px;

643 background-color: #eee;

644 cursor: pointer;

645 }

646

647 li.active label {

648 background-color: #ccc;

649 }

650

651 .base-layers {

652 .leaflet-container {

653 width: 100%;

654 height: 50px;

655 cursor: pointer;

656 }

657 }

658 }

659

660 .share-ui {

661 .share-tabs {

662 margin-bottom: 10px;

663

664 a {

665 color: #fff;

666 text-decoration: none;

667 background-color: $lightblue;

668 padding: 5px 10px;

669 }

670

671 a:first-child {

672 border-right: 1px solid #fff;

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

674 }

675

676 a:last-child {

677 border-left: 1px solid #fff;

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

679 }

680

681 a.active {

682 background-color: $blue;

683 }

684 }

685

686 .share-tab {

687 display: none;

688 }

689

690 .share-link {

691 input[type=text],

692 textarea {

693 width: 100%;

694 font-family: monospace;

695 font-size: small;

696 line-height: 1.3;

697 }

698 }

699

700 .share-image {

701 label {

702 margin-right: 10px;

703 }

704 }

705

706 #embed_html {

707 resize: vertical;

708 }

709

710 #mapnik_scale {

711 width: 100px;

712 }

713 }

714

715 .leaflet-top.leaflet-right {

716 top: 10px !important;

717 .leaflet-control {

718 margin-right: 0px !important;

719 margin-top: 0px !important;

720 }

721 }

722

723 .leaflet-popup-scrolled {

724 padding-right: $lineheight;

725 border-bottom: 0px !important;

726 border-top: 0px !important;

727 }

728

729 .leaflet-popup-content-wrapper {

730 border-radius: 4px !important;

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

732 }

733

734 /* Rules for edit menu */

735

736 .menu {

737 display: none;

738 z-index: 10000;

739 position: absolute;

740 background-color: #ffffff;

741 border: 1px solid $lightgrey;

742 border-top: 0px;

743 ul {

744 margin: 0px;

745 }

746 li {

747 padding: 2px $lineheight/4;

748 border-top: 1px solid #eee;

749 white-space: nowrap;

750 }

751 }

752

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

754

755 #attribution {

756 display: none;

757 }

758

759 .attribution_license,

760 .attribution_project {

761 text-align: left;

762 }

763

764 .attribution_notice {

765 text-align: center;

766 }

767

768 /* Rules for the sidebar */

769

770 #sidebar {

771 border-right: $keyline;

772

773 .alert {

774 background: #e00;

775 }

776

777 h2, h3, h4 {

778 padding: $lineheight;

779 border-bottom: $keyline;

780 }

781

782 h4 {

783 font-weight: normal;

784 }

785

786 .icon.close {

787 position: absolute;

788 right: $lineheight;

789 }

790

791 p {

792 padding: $lineheight;

793 margin: 0;

794 }

795

796 .footer {

797 position: absolute;

798 bottom: 0;

799 }

800

801 p.credits {

802 font-size: 11px;

803 color: #999;

804

805 a {

806 color: #666;

807 }

808 }

809 }

810

811 .sidebar_heading {

812 position: relative;

813 padding: $lineheight/2 $lineheight;

814 background: $offwhite;

815 border-bottom: 1px solid #ccc;

816 h4 {

817 margin: 0;

818 }

819 }

820

821 .sidebar_close {

822 position: absolute;

823 height: $lineheight;

824 top: 0px;

825 bottom: 0;

826 right: $lineheight;

827 margin: auto;

828 }

829

830 #sidebar_content {

831 position: absolute;

832 top: 72px;

833 bottom: 0;

834 width: 100%;

835 overflow-y: auto;

836 }

837

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

839

840 #mapkey {

841 .mapkey-table-key img {

842 display: block;

843 margin-left: auto;

844 margin-right: auto;

845 }

846 td {

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

848 }

849 }

850

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

852

853 .search_searching {

854 margin-top: $lineheight/4;

855 margin-bottom: $lineheight/4;

856 }

857

858 .search_results_entry {

859 .search_searching {

860 text-align: center;

861 margin: $lineheight auto;

862 width: $lineheight;

863 display: block;

864 }

865

866 ul li {

867 border-bottom: 1px solid #ccc;

868 }

869

870 .search_details {

871 display: block;

872 float: right;

873 text-align: right;

874 margin-top: 0.2em;

875 margin-left: 0.5em;

876 }

877 }

878

879 .search_results_error {

880 color: #f00;

881 }

882

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

884

885 #browse_content {

886 position: relative;

887 .browse_show_list.button {

888 position: absolute;

889 left: $lineheight;

890 right: $lineheight;

891 bottom: -40px;

892 margin-bottom: 0;

893 }

894 a.more-details {

895 position: absolute;

896 top: 0;

897 right: $lineheight;

898 }

899 ul li {

900 margin-bottom: 0;

901 }

902 }

903

904 .browse_details {

905 position: relative;

906 }

907

908 .browse_status {

909 display: none;

910 }

911

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

913

914 .export_bounds {

915 text-align: center;

916 }

917

918 .export_area_inputs {

919 margin-bottom: $lineheight/2;

920 input[type="text"] {

921 width: 80px;

922 margin-bottom: 5px;

923 }

924 }

925

926 .export_bound {

927 margin: $lineheight/4;

928 }

929

930 /* Rules for the sidebar and main content area */

931

932 .site-index,

933 .site-export,

934 .site-edit,

935 .changeset-list,

936 .browse {

937 #content {

938 position: absolute;

939 top: $headerHeight;

940 bottom: 0;

941 width: 100%;

942 }

943

944 #sidebar, #map {

945 position: relative;

946 height: 100%;

947 overflow-x: hidden;

948 overflow-y: auto;

949 }

950

951 #sidebar {

952 float: left;

953 width: $sidebarWidth;

954 }

955 }

956

957 .content-heading {

958 position: relative;

959 padding: $lineheight;

960 background: $lightgrey;

961 border-bottom: $keyline;

962 }

963

964 .content-body {

965 padding: $lineheight;

966 }

967

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

969

970 .user-new,

971 .user-create,

972 .user-terms,

973 .user-confirm {

974 .content-heading {

975 height: 200px;

976 }

977 }

978

979 .user-new,

980 .user-create,

981 .user-terms {

982 .content-body {

983 padding: 0;

984 }

985 }

986

987 .header-illustration {

988 background-position: 0 0;

989 background-repeat: no-repeat;

990 position: absolute;

991 height: 200px;

992 width: 100%;

993 left: 0;

994 bottom: 0;

995

996 &.new-user-main {

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

998 }

999

1000 &.confirm-main {

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

1002 }

1003

1004 &.new-user-terms {

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

1006 }

1007

1008 &.new-user-arm {

1009 height: 110px;

1010 width: 130px;

1011 left: 260px;

1012 top: 160px;

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

1014 }

1015 }

1016

1017 @media only screen and (max-width:900px) {

1018 .header-illustration.new-user-arm { display: none;}

1019 .wrapper {

1020 margin-left: $sidebarWidth;

1021 text-align: left;

1022 }

1023

1024 }

1025

1026 #content.maximised {

1027 top: 0;

1028 left: 0;

1029 right: 0;

1030 bottom: 0;

1031 border: 0;

1032 z-index: 1000;

1033 }

1034

1035 #slim_container {

1036 width: 100%;

1037 }

1038

1039 #slim_container_content {

1040 max-width: 50em;

1041 background-color: #FFFFFF;

1042 margin: $lineheight/2 auto;

1043 padding: 3px;

1044 border-radius: 25px;

1045 -moz-border-radius: 25px;

1046 border: 1px solid #e6e6e6;

1047 }

1048

1049 #slim_content {

1050 margin: $lineheight/2;

1051 margin-top: 95px;

1052 max-width: 50em;

1053

1054 .content-heading {

1055 margin-bottom: 15px;

1056 }

1057 }

1058

1059 #slim_header {

1060 margin: 30px $lineheight/2;

1061 position: absolute;

1062 top: 0px;

1063 margin-right: $lineheight/4;

1064 img {

1065 vertical-align: middle;

1066 margin-bottom: $lineheight/4;

1067 margin-right: $lineheight/4;

1068 }

1069 }

1070

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

1072

1073 .content_map {

1074 position: relative;

1075 width: 45%;

1076 height: 400px;

1077 border: 1px solid #ccc;

1078 margin-bottom: $lineheight;

1079 float: right;

1080 }

1081

1082 /* Rules for the changeset list shown by the history tab */

1083

1084 #sidebar .changesets {

1085 li {

1086 padding: $lineheight;

1087 border-bottom: $keyline;

1088 }

1089

1090 p {

1091 padding: 0;

1092 }

1093 }

1094

1095 /* Rules for the data browser */

1096

1097 body.browse #sidebar_content {

1098 .browse-section {

1099 padding: 20px;

1100 border-bottom: 1px solid #CCC;

1101

1102 ul {

1103 margin: 0;

1104 }

1105 }

1106

1107 .browse-field {

1108 margin-bottom: 10px;

1109

1110 h4 {

1111 margin: 0;

1112 padding: 5px 0 5px 10px;

1113 font-size: 12px;

1114 border: 1px solid #CCC;

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

1116 background-color: #F6F6F6;

1117 }

1118

1119 p {

1120 margin: 0;

1121 padding: 7px 10px;

1122 font-size: 12px;

1123 background-color: #FFF;

1124 border: 1px solid #CCC;

1125 border-top: 0;

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

1127 }

1128 }

1129

1130 .browse-tag-list {

1131 border: 1px solid #CCC;

1132 border-radius: 4px;

1133 font-size: 12px;

1134

1135 li {

1136 border-bottom: 1px solid #CCC;

1137 }

1138

1139 li:last-child {

1140 border-bottom: 0;

1141 }

1142

1143 .browse-tag-k,

1144 .browse-tag-v {

1145 display: inline-block;

1146 width: 50%;

1147 height: 30px;

1148 float: left;

1149 padding: 9px 10px;

1150 }

1151

1152 .browse-tag-k {

1153 font-weight: bold;

1154 background-color: #F6F6F6;

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

1156 }

1157

1158 .browse-tag-v {

1159 border-left: 1px solid #CCC;

1160 }

1161 }

1162 }

1163

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

1165

1166 #trace_list {

1167 font-size: $lineheight/2;

1168 border-width: 0px;

1169 text-align: right;

1170

1171 .trace_summary {

1172 font-size: 12px;

1173 color: gray;

1174 }

1175

1176 .trace_pending {

1177 color: red;

1178 }

1179

1180 .trace_public {

1181 color: green;

1182 }

1183

1184 .trace_identifiable {

1185 color: green;

1186 }

1187

1188 .trace_trackable {

1189 color: red;

1190 }

1191

1192 .trace_private {

1193 color: red;

1194 }

1195 }

1196

1197 /* Rules for the user profile page */

1198

1199 #userinformation {

1200

1201 min-height: 100px;

1202 .userinformation-inner {

1203 float: left;

1204 }

1205 h2 {

1206 margin-top: 0;

1207 }

1208 .user-description {

1209 width: 100%;

1210 clear: both;

1211 }

1212 .deemphasize {

1213 margin: 0;

1214 }

1215 }

1216

1217 .admin-user-info small {

1218 margin-bottom: $lineheight/2;

1219 display: inline;

1220 margin-right: $lineheight;

1221 }

1222

1223 .activity-block {

1224 clear: left;

1225 border-bottom: 1px solid #ccc;

1226 padding-bottom: $lineheight;

1227 float: left;

1228 h3 {

1229 margin-bottom: $lineheight/2;

1230 }

1231 }

1232

1233 .contact-activity {

1234 margin-top: $lineheight;

1235 width: 100%;

1236 }

1237

1238 .activity-details p {

1239 margin-left: 70px;

1240 margin-bottom: 0;

1241 }

1242

1243 #friends-container .contact-activity ul {

1244 margin-left: 70px;

1245 }

1246

1247 .user-view {

1248 p#no_home_location {

1249 margin: $lineheight;

1250 }

1251 .user_thumbnail {

1252 margin-top: $lineheight/4;

1253 float: left;

1254 }

1255 }

1256

1257 /* Rules for the user map */

1258

1259 .content_map .leaflet-popup-content {

1260 margin: $lineheight/2;

1261 min-height: 50px;

1262 }

1263

1264 /* Rules for user popups on maps */

1265

1266 .user_popup {

1267 min-width: 200px;

1268 p {

1269 padding: 0 0 5px 0;

1270 margin-top: 0 0 0 60px;

1271 font-size: 12px;

1272 }

1273 img.user_thumbnail {

1274 float: left;

1275 margin: 0 $lineheight/2 0 0;

1276 }

1277 }

1278

1279 /* Rules for the user list */

1280

1281 #user_list {

1282 font-size: $lineheight/2;

1283 width: 100%;

1284

1285 tr {

1286 vertical-align: middle;

1287 }

1288

1289 p {

1290 margin-top: 0px;

1291 margin-bottom: 0px;

1292 }

1293 }

1294

1295 #user_list_actions {

1296 float: right;

1297 margin-top: $lineheight/2;

1298 }

1299

1300 /* Rules for the diary list page */

1301

1302 .diary_entry-list img.user_thumbnail {

1303 float: left;

1304 }

1305

1306 .diary_post {

1307 max-width: 740px;

1308 position: relative;

1309 margin-top: $lineheight/2;

1310 padding-top: $lineheight;

1311 border-top: 1px solid #ccc;

1312

1313 &:first-child {

1314 margin-top: 0;

1315 border-top: 0;

1316 padding-top: 0;

1317 }

1318 h1, h2 {

1319 font-size: 21px;

1320 line-height: 1em;

1321 }

1322 small.deemphasize {

1323 float: left;

1324 display: block;

1325 }

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

1327 }

1328

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

1330 display: inline;

1331 }

1332

1333 #content .post_heading {

1334 margin-bottom: $lineheight;

1335 h2 {

1336 margin-top: 0;

1337 margin-bottom: $lineheight/2;

1338 font-size: 24px;

1339 }

1340 }

1341

1342 /* Rules for the diary entry page */

1343

1344 .diary_entry {

1345 #map {

1346 position: relative;

1347 width: 90%;

1348 height: 400px;

1349 border: 1px solid #ccc;

1350 display: none;

1351 margin-bottom: $lineheight;

1352 }

1353 #newcomment {

1354 border-top: 1px solid #ccc;

1355 padding-top: $lineheight;

1356 margin-top: $lineheight/2;

1357 }

1358 .comments {

1359 max-width: 740px;

1360 }

1361 .diary-comment {

1362 margin-top: $lineheight/2;

1363 border-top: 1px dashed #ccc;

1364 padding-top: $lineheight/2;

1365 &:first-child {

1366 margin-top: $lineheight;

1367 padding-top: $lineheight;

1368 border-top: 1px solid #ccc;

1369 }

1370 p {

1371 margin-bottom: $lineheight/2;

1372 }

1373 .comment-heading {

1374 margin-bottom: 0;

1375 margin-top: 0;

1376 }

1377 }

1378 }

1379

1380 .diary_entry-view img.user_thumbnail {

1381 float: left;

1382 }

1383

1384 /* Rules for the log in page */

1385

1386 #login_openid_buttons {

1387 margin-bottom: 0;

1388 }

1389

1390 #login_openid_buttons li {

1391 float: left;

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

1393 }

1394

1395 /* Rules for the account confirmation page */

1396

1397 .user-terms {

1398 .legale {

1399 border: 1px solid #ccc;

1400 padding: $lineheight;

1401 margin-bottom: $lineheight;

1402 overflow: auto;

1403 height: 10em;

1404

1405 &:p#last {

1406 margin-bottom: 0px;

1407 }

1408

1409 &:ol {

1410 margin-bottom: 0px;

1411 }

1412

1413 &:img {

1414 display: block;

1415 margin: $lineheight auto inherit auto;

1416 }

1417 }

1418

1419 #decline {

1420 background: $lightblue;

1421 &:hover {

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

1423 }

1424 }

1425

1426 .form-row {

1427 margin: auto;

1428 max-width: 370px;

1429 }

1430 }

1431

1432 /* Rules for the account settings page */

1433

1434 #accountForm .user_map {

1435 position: relative;

1436 width: 500px;

1437 height: 400px;

1438 border: 1px solid #ccc;

1439 }

1440

1441 #accountForm .user_image {

1442 margin-bottom: 0;

1443 }

1444

1445 #accountForm #user_image {

1446 margin-left: 20px;

1447 }

1448

1449 #accountForm ul.accountImage-options {

1450 margin-left: 120px;

1451 }

1452

1453 .nohome .location {

1454 display: none;

1455 }

1456

1457 #homerow .message {

1458 display: none;

1459 }

1460

1461 .nohome .message {

1462 display: inline !important;

1463 }

1464

1465 .content_map.settings_map {

1466 width: 50%;

1467 float: none;

1468 }

1469

1470 /* Rules for the oauth settings page */

1471

1472 .oauth_clients .buttons .oauth-edit {

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

1474 }

1475

1476 .oauth_clients .buttons .oauth-delete {

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

1478 }

1479

1480 /* Rules for messages pages */

1481

1482 .messages {

1483 width: 100%;

1484 border: 1px solid #ddd;

1485

1486 input[type="submit"] {

1487 margin: auto;

1488 }

1489 tbody tr {

1490 border-top: 1px solid #ccc;

1491 }

1492

1493 .inbox-row {

1494 background: #f8f8ff;

1495 }

1496

1497 .inbox-row-unread {

1498 background:#CBEEA7;

1499 }

1500

1501 .right {

1502 float: right;

1503 }

1504

1505 tr td,

1506 tr th {

1507 padding: $lineheight/4;

1508 }

1509 p:last-child,

1510 h2:last-child,

1511 h3:last-child,

1512 ol:last-child,

1513 ul:last-child {

1514 margin-bottom:0;

1515 }

1516 tr td {

1517 height: 30px;

1518 border-right: 1px solid $lightgrey;

1519 }

1520 }

1521

1522 .inbox-row .inbox-mark-read {

1523 display: none;

1524 }

1525

1526 .info-line {

1527 margin-bottom: $lineheight;

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

1529 border-bottom: 1px solid #ccc;

1530

1531 form, form div {

1532 display: inline;

1533 }

1534 }

1535

1536 .info-line .user_thumbnail_tiny {

1537 vertical-align: middle;

1538 }

1539

1540 .inbox-mark-unread,

1541 .inbox-mark-read,

1542 .inbox-delete {

1543 width: 1%;

1544 }

1545

1546 .inbox-row-unread .inbox-mark-unread {

1547 display: none;

1548 }

1549

1550 .message-read .message-buttons {

1551 margin-top: $lineheight;

1552 padding-top: $lineheight;

1553 border-top: 1px solid $lightgrey;

1554 }

1555

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

1557 border-radius: 0;

1558 }

1559

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

1561

1562 .flash {

1563 padding: $lineheight;

1564 &#error {

1565 background-color: #ff7070;

1566 }

1567 &#warning {

1568 background-color: #ffe0cc;

1569 }

1570 &#notice {

1571 background-color: #CBEEA7;

1572 }

1573 }

1574

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

1576

1577 .field_with_errors {

1578 padding: 2px;

1579 background-color: #ff7070;

1580 display: inline-block;

1581 }

1582

1583 .formError {

1584 display: inline-block;

1585 padding: 5px 10px;

1586 margin-top: 5px;

1587 border-radius: 4px;

1588 font-size: 12px;

1589 color: #fff;

1590 background-color: #ff7070;

1591 }

1592

1593 /* Rules for rails validation error boxes */

1594

1595 #errorExplanation {

1596 width: 400px;

1597 border: 2px solid #ff7070;

1598 padding: 0 $lineheight/2;

1599 margin-bottom: $lineheight;

1600 background-color: #f0f0f0;

1601

1602 h2 {

1603 margin: 0 -10px 10px -10px;

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

1605 font-weight: bold;

1606 font-size: 12px;

1607 background-color: #c00;

1608 color: #fff;

1609 text-align: left;

1610 }

1611

1612 p {

1613 color: #333;

1614 margin-bottom: 0px;

1615 padding: $lineheight/4;

1616 }

1617

1618 ul {

1619 padding-left: $lineheight;

1620

1621 li {

1622 font-size: 12px;

1623 list-style: disc;

1624 }

1625 }

1626 }

1627

1628 /* Rules for forms */

1629

1630 .standard-form {

1631 fieldset {

1632 margin-bottom: $lineheight;

1633 }

1634 label.standard-label {

1635 display: block;

1636 margin-bottom: $lineheight/4;

1637 font-size: $typeheight;

1638 font-weight: bold;

1639 line-height: 1.5;

1640 }

1641 label.standard-label.secondary {

1642 display: inline-block;

1643 font-weight: normal;

1644 }

1645 .form-help {

1646 font-weight: normal;

1647 }

1648 .form-column {

1649 float: left;

1650 margin-right: 20px;

1651 }

1652 .form-divider {

1653 margin-top: $lineheight;

1654 padding-top: $lineheight;

1655 border-top: 1px solid $lightgrey;

1656 }

1657 .horizontal-list .form-row {

1658 float: left;

1659 padding-right: 10px;

1660 }

1661 .form-row {

1662 margin-bottom: $lineheight/2;

1663 }

1664 .form-list {

1665 margin-bottom: 0;

1666 }

1667 .form-list li {

1668 margin-bottom: 5px;

1669 }

1670 input[type="checkbox"],

1671 input[type="radio"] {

1672 float: left;

1673 margin-top: 5px;

1674 }

1675 }

1676

1677 #remember_me_openid {

1678 display: block;

1679 }

1680

1681 input[type="checkbox"],

1682 input[type="radio"] {

1683 margin-right: 5px;

1684 }

1685

1686 input[type="text"],

1687 input[type="email"],

1688 input[type="url"],

1689 input[type="password"],

1690 textarea {

1691 border: 1px solid #ccc;

1692 padding: 2px 5px;

1693 margin: 0;

1694 width: 200px;

1695 }

1696

1697 textarea {

1698 padding: 5px;

1699 width: 100%;

1700 }

1701

1702 /* Rules for user images */

1703

1704 img.user_image {

1705 max-width: 100px;

1706 max-height: 100px;

1707 border: 1px solid #ccc;

1708 margin-bottom: $lineheight;

1709 float: left;

1710 margin-right: $lineheight;

1711 }

1712

1713 img.user_thumbnail {

1714 max-width: 50px;

1715 max-height: 50px;

1716 border: 1px solid #ccc;

1717 margin-right: $lineheight;

1718 }

1719

1720 img.user_thumbnail_tiny {

1721 max-width: 25px;

1722 max-height: 25px;

1723 border: 1px solid #ccc;

1724 }

1725

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

1727

1728 .nowrap {

1729 white-space: nowrap;

1730 }

1731

1732 /* Rules for geo microformats */

1733

1734 abbr.geo {

1735 border-bottom: none;

1736 }

1737

1738 /* Rules for RSS buttons */

1739

1740 .rsssmall {

1741 position: relative;

1742 top: 5px;

1743 }

1744

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

1746

1747 ul.secondary-actions {

1748 font-style: normal;

1749 margin-bottom: 0;

1750 margin-left: 0;

1751 &.pager {

1752 display: inline-block;

1753 margin-right: 60px;

1754 }

1755 > li {

1756 display: block;

1757 float: left;

1758 list-style: none;

1759 border-left: 1px solid #ccc;

1760 padding-left: $lineheight/4;

1761 margin-right: $lineheight/4;

1762 &:first-child {

1763 border-left: 0;

1764 padding-left: 0;

1765 }

1766 &:last-child {

1767 margin-right: 0px;

1768 }

1769 }

1770 .dropdown-menu {

1771 left: auto;

1772 right: 0;

1773 }

1774 }

1775

1776 /* Utility for managing inner content areas */

1777

1778 .inner22 { padding: $lineheight;}

1779

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

1781

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

1783

1784 .inner20 { padding: $lineheight 0;}

1785

1786 .inner02 { padding: 0 $lineheight;}

1787

1788 /* Utility for general button styles */

1789

1790 input[type="button"],

1791 input[type="submit"],

1792 input[type="reset"],

1793 a.button {

1794 cursor: pointer;

1795 border: 0;

1796 display: inline-block;

1797 line-height: 20px;

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

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

1800 min-width: 120px;

1801 margin: 0 0 $lineheight/2 0;

1802 color: white;

1803 background: $blue;

1804 text-align: center;

1805 border-radius: 2px;

1806 -moz-border-radius: 2px;

1807 &:hover {

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

1809 text-decoration: none;

1810 }

1811 &.deemphasize {

1812 background: $lightblue;

1813 &:hover {

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

1815 }

1816 }

1817 &:disabled {

1818 background: $lightgrey;

1819 &:hover {

1820 background: $lightgrey;

1821 }

1822 }

1823 &:last-child {

1824 margin-bottom: 0;

1825 }

1826 }

1827

1828 .buttons {

1829 min-width: 200px;

1830 input[type="submit"],

1831 input[type="button"],

1832 input[type="reset"],

1833 .button {

1834 box-sizing: border-box;

1835 float: left;

1836 border-radius: 0;

1837 margin:0;

1838 min-width: 100px;

1839 max-width: 180px;

1840 border-right:1px solid white;

1841 text-overflow: ellipsis;

1842 white-space: nowrap;

1843 overflow: hidden;

1844 }

1845 input:first-child,

1846 .button:first-child {

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

1848 }

1849 input:last-child,

1850 .button:last-child {

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

1852 border-right-width: 0;

1853 }

1854 input:only-child,

1855 .button:only-child,

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

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

1858 border-radius:2px;

1859 border-right-width: 0;

1860 }

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

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

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

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

1865 border-right-width: 0;

1866 }

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

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

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

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

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

1872 }

1873 }

1874

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

1876

1877 .table0,

1878 .item0 {

1879 background: $offwhite;

1880 }

1881

1882 .table1,

1883 .item1 {

1884 background: #fff;

1885 }

1886

1887 /* Rules for OpenID logo */

1888

1889 .openid_logo {

1890 vertical-align: text-bottom;

1891 border: 0;

1892 }

1893

1894 /* Rules for rich text */

1895

1896 .richtext,

1897 .prose {

1898 h1, h2 {

1899 padding-bottom: $lineheight/2;

1900 border-bottom: 1px dashed #cccccc;

1901 margin-bottom: $lineheight/2;

1902 }

1903

1904 h1 {

1905 font-size: 24px;

1906 }

1907

1908 h2 {

1909 font-size: 18px;

1910 }

1911

1912 h3 {

1913 font-size: $typeheight;

1914 }

1915

1916 code {

1917 font-size: 13px;

1918 background: #e8e8e8;

1919 padding: 2px 3px;

1920 }

1921

1922 pre {

1923 font-size: 13px;

1924 background: #e8e8e8;

1925 padding: 2px 3px;

1926

1927 code {

1928 padding: 0;

1929 }

1930 }

1931

1932 img {

1933 padding: $lineheight;

1934 background-color: $offwhite;

1935 display: block;

1936 max-width: 100%;

1937 margin: auto;

1938 }

1939

1940 blockquote {

1941 border-left: $lineheight solid $offwhite;

1942 padding-left: $lineheight;

1943 margin: 0;

1944 color: #7E7E7E;

1945 }

1946

1947 ul, ol {

1948 padding-left: $lineheight;

1949 margin-bottom: $lineheight;

1950 margin-left: $lineheight;

1951 }

1952

1953 ul li {

1954 list-style: disc;

1955 }

1956

1957 ol li {

1958 list-style: decimal;

1959 }

1960 }

1961

1962 .diary_post .richtext {

1963 margin-top: $lineheight;

1964 }

1965

1966 .comments .richtext {

1967 margin-left: 70px;

1968 margin-top: 0;

1969 }

1970

1971 /* Rules for rich text editors */

1972

1973 .richtext_container {

1974 margin-bottom: $lineheight;

1975

1976 .richtext_content {

1977 width: 50%;

1978 display: inline-block;

1979 vertical-align: top;

1980

1981 .richtext_preview {

1982 display: inline-block;

1983 padding: $lineheight;

1984 background-color: $offwhite;

1985 overflow-x: auto;

1986

1987 &.loading {

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

1989 background-repeat: no-repeat;

1990 background-position: center;

1991 }

1992

1993 > :first-child {

1994 margin-top: 0px;

1995 }

1996 }

1997 }

1998

1999 .richtext_help {

2000 display: inline-block;

2001 vertical-align: top;

2002 margin-left: 15px;

2003 background-color: #f8f8ff;

2004 padding: $lineheight/2;

2005 width: 220px;

2006

2007 ul {

2008 margin-bottom: 0;

2009 }

2010

2011 h4.heading, li {

2012 border-bottom: 1px solid #ccc;

2013 margin-bottom: $lineheight/4;

2014 padding-bottom: $lineheight/4;

2015 }

2016

2017 li h4, li span, li p {

2018 display: inline-block;

2019 vertical-align: top;

2020 font-size: 11px;

2021 }

2022

2023 li h4 {

2024 width: 40%;

2025 margin: 0;

2026 }

2027

2028 li span, li p {

2029 width: 50%;

2030 margin-left: $lineheight/2;

2031 margin-bottom: $lineheight/4;

2032 white-space: nowrap;

2033 }

2034 }

2035 }

2036

2037 /* Rules for the user notes list */

2038

2039 .note_list {

2040 tr.creator {

2041 background-color: #eeeeee;

2042 }

2043

2044 td {

2045 padding: 3px;

2046 }

2047

2048 p {

2049 margin-bottom: 0px;

2050 }

2051 }

2052

2053 /* Rules for the notes interface */

2054

2055 .leaflet-popup-content .note {

2056 padding-top: $lineheight/2;

2057 }

2058

2059 .leaflet-popup-content .note {

2060 h2 {

2061 margin-bottom: $lineheight/2;

2062 }

2063

2064 div {

2065 margin-top: $lineheight/2;

2066 }

2067

2068 .permalink {

2069 position: absolute;

2070 top: $lineheight/4;

2071 left: $lineheight/4;

2072 min-width: 15px;

2073 min-height: 15px;

2074 }

2075

2076 .permalink span {

2077 display: none;

2078 padding-left: $lineheight;

2079 }

2080

2081 .permalink:hover span {

2082 display: block;

2083 }

2084

2085 .warning {

2086 display: block;

2087 background-color: #ffe0cc;

2088 padding: 4px 6px;

2089 margin-bottom: $lineheight/2;

2090 }

2091

2092 .comment_body {

2093 margin-top: 2px;

2094 margin-bottom: 2px;

2095

2096 p {

2097 margin-top: 0px;

2098 margin-bottom: 0px;

2099 }

2100 }

2101

2102 .comment {

2103 width: 100%;

2104 height: 100px;

2105 }

2106

2107 .buttons {

2108 margin-top: $lineheight/4;

2109 text-align: right;

2110 }

2111 }

2112

2113 /*

2114 * Rules for the iD editor

2115 */

2116

2117 .id-embed {

2118 width: 100%;

2119 height: 100%;

2120 }

2121

2122 /* Rules for rotating sidebar ads */

2123 .ad-container {

2124 display: block;

2125 height: 120px;

2126 margin: auto;

2127 overflow: hidden;

2128 position: relative;

2129 border-bottom: 1px solid #ccc;

2130

2131 a {

2132 display: block;

2133 width: 165px;

2134 margin: auto;

2135 }

2136

2137 .ad {

2138 height: 100px;

2139 border: 0;

2140 background: #fff;

2141 }

2142 }

2143

2144 /* Rules for dropdown menus */

2145

2146 .dropdown {

2147 position: relative;

2148 }

2149

2150 .dropdown-toggle {

2151 *margin-bottom: -3px;

2152 }

2153

2154 .dropdown-toggle:active,

2155 .open .dropdown-toggle {

2156 outline: 0;

2157 }

2158

2159 .caret {

2160 display: inline-block;

2161 width: 0;

2162 height: 0;

2163 vertical-align: top;

2164 border-top: 4px solid #000000;

2165 border-right: 4px solid transparent;

2166 border-left: 4px solid transparent;

2167 content: "";

2168 }

2169

2170 .dropdown .caret {

2171 margin-top: 8px;

2172 margin-left: 2px;

2173 }

2174

2175 .dropdown-menu {

2176 position: absolute;

2177 top: 100%;

2178 left: 0;

2179 z-index: 1000;

2180 display: none;

2181 float: left;

2182 min-width: 160px;

2183 padding: 5px 0;

2184 margin: 0;

2185 list-style: none;

2186 background-color: #ffffff;

2187 border: 1px solid #ccc;

2188 *border-right-width: 2px;

2189 *border-bottom-width: 2px;

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

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

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

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

2194 -moz-background-clip: padding;

2195 background-clip: padding-box;

2196 }

2197

2198 .dropdown-menu.pull-right {

2199 right: 0;

2200 left: auto;

2201 }

2202

2203 .dropdown-menu .divider {

2204 *width: 100%;

2205 height: 1px;

2206 margin: 9px 1px;

2207 *margin: -5px 0 5px;

2208 overflow: hidden;

2209 background-color: #e5e5e5;

2210 border-bottom: 1px solid #ffffff;

2211 }

2212

2213 .dropdown-menu > li > a {

2214 display: block;

2215 padding: 3px 10px;

2216 clear: both;

2217 font-weight: normal;

2218 line-height: 20px;

2219 color: #333333;

2220 white-space: nowrap;

2221 }

2222

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

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

2225 .dropdown-submenu:hover > a,

2226 .dropdown-submenu:focus > a {

2227 color: #ffffff;

2228 text-decoration: none;

2229 background-color: #0081c2;

2230 }

2231

2232 .dropdown-menu > .active > a,

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

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

2235 color: #ffffff;

2236 text-decoration: none;

2237 background-color: #0081c2;

2238 outline: 0;

2239 }

2240

2241 .dropdown-menu > .disabled > a,

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

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

2244 color: #999999;

2245 }

2246

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

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

2249 text-decoration: none;

2250 cursor: default;

2251 background-color: transparent;

2252 background-image: none;

2253 }

2254

2255 .open {

2256 *z-index: 1000;

2257 }

2258

2259 .open > .dropdown-menu {

2260 display: block;

2261 }

2262

2263 .dropdown-backdrop {

2264 position: fixed;

2265 top: 0;

2266 right: 0;

2267 bottom: 0;

2268 left: 0;

2269 z-index: 990;

2270 }

2271

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

2273 .site-welcome {

2274 .center {

2275 text-align: center;

2276 .sprite {

2277 float: none;

2278 margin: auto;

2279 }

2280 }

2281

2282 .sprite {

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

2284 background-size: 500px 250px;

2285 display: block;

2286 float: left;

2287 }

2288

2289 .icon-list {

2290 padding-bottom: 20px;

2291 div {

2292 margin-bottom: 10px;

2293 p {

2294 padding-top: 10px;

2295 }

2296 }

2297 }

2298 .sprite.small {

2299 width: 50px;

2300 height: 50px;

2301 }

2302

2303 .sprite.x {

2304 background-position: -50px 0;

2305 }

2306

2307 .sprite.term {

2308 margin-right: 10px;

2309 vertical-align: middle;

2310 }

2311

2312 .sprite.node {

2313 background-position: -100px 0;

2314 }

2315

2316 .sprite.way {

2317 background-position: -150px 0;

2318 }

2319

2320 .sprite.tag {

2321 background-position: -200px 0;

2322 }

2323

2324 .sprite.editor {

2325 background-position: -250px 0;

2326 }

2327

2328 .sprite.question {

2329 background-position: -300px 0;

2330 }

2331

2332 .start-mapping {

2333 margin: auto;

2334 cursor: pointer;

2335 border: none;

2336 padding: 20px 40px;

2337 font-size: 30px;

2338 text-decoration: none;

2339 }

2340

2341 .note-box {

2342 margin-top: 20px;

2343 background-color: $offwhite;

2344 }

2345

2346 .icon.note {

2347 background-color: #333;

2348 border-radius: 4px;

2349 }

2350 }