1. *,
    
  2. *:before,
    
  3. *:after {
    
  4.   box-sizing: border-box;
    
  5. }
    
  6. 
    
  7. body {
    
  8.   color: #333;
    
  9.   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
    
  10.     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    
  11.     sans-serif;
    
  12.   font-size: 15px;
    
  13.   line-height: 24px;
    
  14.   margin: 0;
    
  15.   padding: 0;
    
  16. }
    
  17. 
    
  18. button {
    
  19.   background: white;
    
  20.   border-radius: 2px;
    
  21.   border: 1px solid rgba(0, 0, 0, 0.24);
    
  22.   cursor: pointer;
    
  23.   font-size: 16px;
    
  24.   margin: 10px;
    
  25.   padding: 6px 8px;
    
  26. }
    
  27. 
    
  28. h1,
    
  29. h2,
    
  30. h3,
    
  31. h4,
    
  32. h5,
    
  33. h6 {
    
  34.   color: #171717;
    
  35.   font-weight: 600;
    
  36. }
    
  37. 
    
  38. h1 {
    
  39.   font-size: 32px;
    
  40.   margin: 24px 0;
    
  41. }
    
  42. 
    
  43. h2 {
    
  44.   font-size: 24px;
    
  45.   margin: 24px 0 16px;
    
  46. }
    
  47. 
    
  48. h3 {
    
  49.   font-size: 18px;
    
  50.   margin: 8px 0 16px;
    
  51. }
    
  52. 
    
  53. h4, h5, h6 {
    
  54.   font-size: 16px;
    
  55.   margin: 0 0 16px;
    
  56. }
    
  57. 
    
  58. code {
    
  59.   font-size: 90%;
    
  60. }
    
  61. 
    
  62. a {
    
  63.   text-decoration: none;
    
  64. }
    
  65. 
    
  66. a:link:hover,
    
  67. a:link:focus {
    
  68.   text-decoration: underline;
    
  69. }
    
  70. 
    
  71. textarea {
    
  72.   border-radius: 2px;
    
  73.   border: 1px solid #d9d9d9;
    
  74.   font-size: 12px;
    
  75.   min-height: 100px;
    
  76.   min-width: 300px;
    
  77.   padding: 8px;
    
  78. }
    
  79. 
    
  80. .header {
    
  81.   background: #171717;
    
  82.   overflow: hidden;
    
  83.   padding: 8px;
    
  84. }
    
  85. 
    
  86. .header a {
    
  87.   text-decoration: none;
    
  88.   color: white;
    
  89. }
    
  90. 
    
  91. .header a:hover,
    
  92. .header a:focus{
    
  93.   text-decoration: underline;
    
  94. }
    
  95. 
    
  96. .header select {
    
  97.   margin-left: 8px;
    
  98.   max-width: 150px;
    
  99. }
    
  100. 
    
  101. .header__inner {
    
  102.   display: table;
    
  103.   margin: 0 auto;
    
  104.   overflow: hidden;
    
  105.   text-align: center;
    
  106.   width: 100%;
    
  107. }
    
  108. 
    
  109. .header__logo {
    
  110.   color: #efefef;
    
  111.   display: table-cell;
    
  112.   vertical-align: middle;
    
  113.   white-space: nowrap;
    
  114. }
    
  115. 
    
  116. .header__logo img {
    
  117.   display: inline-block;
    
  118.   margin-right: 0.8rem;
    
  119.   vertical-align: middle;
    
  120. }
    
  121. 
    
  122. .header-controls {
    
  123.   display: table-cell;
    
  124.   text-align: right;
    
  125.   vertical-align: middle;
    
  126.   width: 100%;
    
  127. }
    
  128. 
    
  129. .header__checkbox {
    
  130.   vertical-align: middle;
    
  131. }
    
  132. 
    
  133. .header__label {
    
  134.   font-size: 12px;
    
  135.   color: #ccc;
    
  136. }
    
  137. 
    
  138. .sr-only {
    
  139.   clip: rect(0, 0, 0, 0);
    
  140.   height: 0;
    
  141.   margin: -1px;
    
  142.   position: absolute;
    
  143.   width: 0;
    
  144. }
    
  145. 
    
  146. .container {
    
  147.   margin: 0 auto;
    
  148.   max-width: 900px;
    
  149.   overflow: hidden;
    
  150.   padding: 2rem;
    
  151. }
    
  152. 
    
  153. .control-label {
    
  154.   display: block;
    
  155.   font-size: 1.2rem;
    
  156.   letter-spacing: 0.01em;
    
  157.   margin-bottom: 0.4rem;
    
  158.   text-transform: uppercase;
    
  159. }
    
  160. 
    
  161. .field {
    
  162.   padding: 0.8rem;
    
  163. }
    
  164. 
    
  165. fieldset {
    
  166.   border: 1px solid #aaa;
    
  167.   float: left;
    
  168.   padding: 1.6rem;
    
  169.   width: 49%;
    
  170. }
    
  171. 
    
  172. .control-box {
    
  173.   overflow: hidden;
    
  174. }
    
  175. 
    
  176. ul,
    
  177. ol {
    
  178.   margin: 0 0 16px 0;
    
  179. }
    
  180. 
    
  181. p {
    
  182.   margin: 16px 0;
    
  183. }
    
  184. 
    
  185. .type-subheading {
    
  186.   font-size: 1.8rem;
    
  187.   font-weight: 600;
    
  188.   line-height: 1.5;
    
  189.   margin: 0 0 1.6rem;
    
  190. }
    
  191. 
    
  192. .hint {
    
  193.   font-style: italic;
    
  194.   line-height: 1.5;
    
  195. }
    
  196. 
    
  197. .footnote {
    
  198.   border-left: 4px solid #aaa;
    
  199.   color: #444;
    
  200.   font-size: 14px;
    
  201.   font-style: italic;
    
  202.   margin-left: 8px;
    
  203.   padding-left: 16px;
    
  204. }
    
  205. 
    
  206. .test-case {
    
  207.   border-radius: 0.2rem;
    
  208.   border: 1px solid #d9d9d9;
    
  209.   margin: 3.2rem 0 3.2rem;
    
  210. }
    
  211. 
    
  212. .test-case__title {
    
  213.   padding: 10px 15px 8px;
    
  214.   line-height: 16px;
    
  215.   font-size: 18px;
    
  216.   border-bottom: 1px dashed #d9d9d9;
    
  217.   margin: 0 0 -1px;
    
  218. }
    
  219. 
    
  220. .test-case__title__check {
    
  221.   display: inline-block;
    
  222.   margin-right: 8px;
    
  223.   vertical-align: middle;
    
  224. }
    
  225. 
    
  226. .test-case__body {
    
  227.   padding: 10px;
    
  228. }
    
  229. 
    
  230. .test-case__desc {
    
  231.   font-style: italic;
    
  232.   margin: 15px 0;
    
  233.   padding: 0 15px;
    
  234. }
    
  235. 
    
  236. .test-case--complete {
    
  237.   border-color: #5cb85c;
    
  238. }
    
  239. 
    
  240. .test-case--complete .test-case__title {
    
  241.   color: #5cb85c;
    
  242. }
    
  243. 
    
  244. .test-case__details {
    
  245.   border-bottom: 1px dashed #d9d9d9;
    
  246.   font-size: 80%;
    
  247.   text-transform: uppercase;
    
  248.   letter-spacing: 0.02em;
    
  249.   margin: 0;
    
  250.   padding: 0 15px;
    
  251. }
    
  252. 
    
  253. .test-case__details > * {
    
  254.   display: inline-block;
    
  255. }
    
  256. 
    
  257. .test-case__details > dt,
    
  258. .test-case__details > dd {
    
  259.   padding: 8px 0 6px;
    
  260. }
    
  261. 
    
  262. .test-case__details > dt {
    
  263.   color: #464a4c;
    
  264.   font-weight: 600;
    
  265. }
    
  266. 
    
  267. .test-case__details > dd {
    
  268.   margin-left: 1rem;
    
  269. }
    
  270. 
    
  271. .test-case__details > dd + dt {
    
  272.   margin-left: 1.5rem;
    
  273. }
    
  274. 
    
  275. .test-case__invalid-version {
    
  276.   font-style: italic;
    
  277.   font-size: 1.6rem;
    
  278.   color: #5cb85c;
    
  279. }
    
  280. 
    
  281. .test-fixture {
    
  282.   padding: 20px;
    
  283.   margin: 0 -15px; /* opposite of .test-case padding */
    
  284.   background-color: #f4f4f4;
    
  285.   border-top: 1px solid #d9d9d9;
    
  286. }
    
  287. 
    
  288. .field-group {
    
  289.   overflow: hidden;
    
  290. }
    
  291. 
    
  292. table {
    
  293.   border: 1px solid #d9d9d9;
    
  294.   border-width: 1px 1px 1px 0;
    
  295.   border-collapse: collapse;
    
  296.   margin: 16px 0;
    
  297.   font-size: 14px;
    
  298.   line-height: 20px;
    
  299.   width: 100%;
    
  300. }
    
  301. 
    
  302. td,
    
  303. th {
    
  304.   text-align: left;
    
  305.   border: 1px solid #d9d9d9;
    
  306.   padding: 6px;
    
  307. }
    
  308. 
    
  309. tbody tr:nth-child(even) {
    
  310.   background: #f0f0f0;
    
  311. }