demo.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. @import url(http://fonts.googleapis.com/css?family=Antic|Love+Ya+Like+A+Sister);
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. body {
  7. background: #f6f6f6;
  8. font-family: 'Tahoma', 'Arial', serif;
  9. font-size: 12px;
  10. }
  11. h3 {
  12. font-family: 'Love Ya Like A Sister', cursive;
  13. }
  14. .lightGrey {
  15. color: #888;
  16. }
  17. #page {
  18. width: 800px;
  19. margin: auto;
  20. text-align: center;
  21. }
  22. #page > h3 {
  23. font-size: 30px;
  24. padding-top: 10px;
  25. padding-bottom: 30px;
  26. }
  27. #page > .listTitle {
  28. margin-top: 30px;
  29. padding-bottom: 8px;
  30. font-family: 'Antic', 'Tahoma', serif;
  31. color: #666;
  32. }
  33. #page > label {
  34. margin-left: 10px;
  35. vertical-align: super;
  36. font-family: 'Tahoma', 'Arial', serif;
  37. font-size: 13px;
  38. color: #666;
  39. cursor: pointer;
  40. }
  41. #page span.actions {
  42. text-decoration: none;
  43. cursor: pointer;
  44. }
  45. #page span.actions:hover {
  46. text-decoration: underline;
  47. color: #444;
  48. }
  49. #page #showCode {
  50. font-weight: bold;
  51. cursor: pointer;
  52. }
  53. #page #showCode:hover {
  54. color: #444;
  55. text-decoration: underline;
  56. }
  57. #page #pageCode {
  58. text-align: left;
  59. width: 800px;
  60. margin: auto;
  61. height: 300px;
  62. overflow: auto;
  63. overflow-x: hidden;
  64. overflow-y: auto;
  65. border: 1px solid #e0e0e0;
  66. display: none;
  67. }
  68. #page #pageCode::-webkit-scrollbar {
  69. width: 6px;
  70. height: 6px;
  71. }
  72. #page #pageCode::-webkit-scrollbar-button:start:decrement,
  73. #page #pageCode::-webkit-scrollbar-button:end:increment {
  74. display: block;
  75. height: 10px;
  76. }
  77. #page #pageCode::-webkit-scrollbar-button:vertical:increment {
  78. background-color: #fff;
  79. }
  80. #page #pageCode::-webkit-scrollbar-track-piece {
  81. background-color: #e4e4e4;
  82. -webkit-border-radius: 3px;
  83. -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.12);
  84. }
  85. #page #pageCode::-webkit-scrollbar-thumb:vertical {
  86. height: 50px;
  87. background-color: #aaa;
  88. -webkit-border-radius: 3px;
  89. }
  90. #page #pageCode::-webkit-scrollbar-thumb:horizontal {
  91. width: 50px;
  92. background-color: #aaa;
  93. -webkit-border-radius: 3px;
  94. }
  95. #page #pageCode ol {
  96. background: #eaeaea;
  97. }
  98. #page #pageCode ol li {
  99. margin-left: 40px;
  100. background: #fcfcfc;
  101. }
  102. #footer {
  103. margin: auto;
  104. margin-top: 40px;
  105. padding: 10px 0px;
  106. min-height: 100px;
  107. width: 500px;
  108. border-top: 1px solid #888;
  109. box-shadow: inset 0px 1px 0px #fff;
  110. text-align: center;
  111. }
  112. #footer > h3 {
  113. padding-bottom: 10px;
  114. font-size: 18px;
  115. color: #222;
  116. }
  117. #footer h4 {
  118. color: #444;
  119. }
  120. #footer a {
  121. text-decoration: none;
  122. color: #888;
  123. }
  124. #footer a:hover {
  125. text-decoration: underline;
  126. color: #444;
  127. }