styles.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  1. @import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);
  2. body {
  3. padding:50px;
  4. font:14px/1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  5. color:#777;
  6. font-weight:300;
  7. }
  8. h1, h2, h3, h4, h5, h6 {
  9. color:#222;
  10. margin:0 0 20px;
  11. }
  12. p, ul, ol, table, pre, dl {
  13. margin:0 0 20px;
  14. }
  15. h1, h2, h3 {
  16. line-height:1.1;
  17. }
  18. h1 {
  19. font-size:28px;
  20. }
  21. h2 {
  22. color:#393939;
  23. }
  24. h3, h4, h5, h6 {
  25. color:#494949;
  26. }
  27. a {
  28. color:#39c;
  29. font-weight:400;
  30. text-decoration:none;
  31. }
  32. a small {
  33. font-size:11px;
  34. color:#777;
  35. margin-top:-0.6em;
  36. display:block;
  37. }
  38. .wrapper {
  39. width:860px;
  40. margin:0 auto;
  41. }
  42. blockquote {
  43. border-left:1px solid #e5e5e5;
  44. margin:0;
  45. padding:0 0 0 20px;
  46. font-style:italic;
  47. }
  48. code, pre {
  49. font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal;
  50. color:#333;
  51. font-size:12px;
  52. }
  53. pre {
  54. padding:8px 15px;
  55. background: #f8f8f8;
  56. border-radius:5px;
  57. border:1px solid #e5e5e5;
  58. overflow-x: auto;
  59. }
  60. table {
  61. width:100%;
  62. border-collapse:collapse;
  63. }
  64. th, td {
  65. text-align:left;
  66. padding:5px 10px;
  67. border-bottom:1px solid #e5e5e5;
  68. }
  69. dt {
  70. color:#444;
  71. font-weight:700;
  72. }
  73. th {
  74. color:#444;
  75. }
  76. img {
  77. max-width:100%;
  78. }
  79. ul.download {
  80. list-style:none;
  81. height:40px;
  82. padding:0;
  83. background: #eee;
  84. background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
  85. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
  86. background: -webkit-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  87. background: -o-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  88. background: -ms-linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  89. background: linear-gradient(top, #f8f8f8 0%,#dddddd 100%);
  90. border-radius:5px;
  91. border:1px solid #d2d2d2;
  92. box-shadow:inset #fff 0 1px 0, inset rgba(0,0,0,0.03) 0 -1px 0;
  93. width:270px;
  94. }
  95. ul.download li {
  96. width:89px;
  97. float:left;
  98. border-right:1px solid #d2d2d2;
  99. height:40px;
  100. }
  101. ul.download a {
  102. line-height:1;
  103. font-size:11px;
  104. color:#999;
  105. display:block;
  106. text-align:center;
  107. padding-top:6px;
  108. height:40px;
  109. }
  110. strong {
  111. color:#222;
  112. font-weight:700;
  113. }
  114. header ul li + li {
  115. width:88px;
  116. border-left:1px solid #fff;
  117. }
  118. header ul li + li + li {
  119. border-right:none;
  120. width:89px;
  121. }
  122. header ul a strong {
  123. font-size:14px;
  124. display:block;
  125. color:#222;
  126. }
  127. section {
  128. width:500px;
  129. float:right;
  130. padding-bottom:50px;
  131. }
  132. small {
  133. font-size:11px;
  134. }
  135. hr {
  136. border:0;
  137. background:#e5e5e5;
  138. height:1px;
  139. margin:0 0 20px;
  140. }
  141. footer {
  142. width:270px;
  143. float:left;
  144. position:fixed;
  145. bottom:50px;
  146. }
  147. @media print, screen and (max-width: 960px) {
  148. div.wrapper {
  149. width:auto;
  150. margin:0;
  151. }
  152. header, section, footer {
  153. float:none;
  154. position:static;
  155. width:auto;
  156. }
  157. header {
  158. padding-right:320px;
  159. }
  160. section {
  161. border:1px solid #e5e5e5;
  162. border-width:1px 0;
  163. padding:20px 0;
  164. margin:0 0 20px;
  165. }
  166. header a small {
  167. display:inline;
  168. }
  169. header ul {
  170. position:absolute;
  171. right:50px;
  172. top:52px;
  173. }
  174. }
  175. @media print, screen and (max-width: 720px) {
  176. body {
  177. word-wrap:break-word;
  178. }
  179. header {
  180. padding:0;
  181. }
  182. header ul, header p.view {
  183. position:static;
  184. }
  185. pre, code {
  186. word-wrap:normal;
  187. }
  188. }
  189. @media print, screen and (max-width: 480px) {
  190. body {
  191. padding:15px;
  192. }
  193. header ul {
  194. display:none;
  195. }
  196. }
  197. @media print {
  198. body {
  199. padding:0.4in;
  200. font-size:12pt;
  201. color:#444;
  202. }
  203. }