1  @font-face {
  2    font-family: 'Noto Sans';
  3    font-weight: 400;
  4    font-style: normal;
  5    src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot');
  6    src: url('../fonts/Noto-Sans-regular/Noto-Sans-regular.eot?#iefix') format('embedded-opentype'),
  7         local('Noto Sans'),
  8         local('Noto-Sans-regular'),
  9         url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff2') format('woff2'),
 10         url('../fonts/Noto-Sans-regular/Noto-Sans-regular.woff') format('woff'),
 11         url('../fonts/Noto-Sans-regular/Noto-Sans-regular.ttf') format('truetype'),
 12         url('../fonts/Noto-Sans-regular/Noto-Sans-regular.svg#NotoSans') format('svg');
 13  }
 14  
 15  @font-face {
 16    font-family: 'Noto Sans';
 17    font-weight: 700;
 18    font-style: normal;
 19    src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot');
 20    src: url('../fonts/Noto-Sans-700/Noto-Sans-700.eot?#iefix') format('embedded-opentype'),
 21         local('Noto Sans Bold'),
 22         local('Noto-Sans-700'),
 23         url('../fonts/Noto-Sans-700/Noto-Sans-700.woff2') format('woff2'),
 24         url('../fonts/Noto-Sans-700/Noto-Sans-700.woff') format('woff'),
 25         url('../fonts/Noto-Sans-700/Noto-Sans-700.ttf') format('truetype'),
 26         url('../fonts/Noto-Sans-700/Noto-Sans-700.svg#NotoSans') format('svg');
 27  }
 28  
 29  @font-face {
 30    font-family: 'Noto Sans';
 31    font-weight: 400;
 32    font-style: italic;
 33    src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot');
 34    src: url('../fonts/Noto-Sans-italic/Noto-Sans-italic.eot?#iefix') format('embedded-opentype'),
 35         local('Noto Sans Italic'),
 36         local('Noto-Sans-italic'),
 37         url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff2') format('woff2'),
 38         url('../fonts/Noto-Sans-italic/Noto-Sans-italic.woff') format('woff'),
 39         url('../fonts/Noto-Sans-italic/Noto-Sans-italic.ttf') format('truetype'),
 40         url('../fonts/Noto-Sans-italic/Noto-Sans-italic.svg#NotoSans') format('svg');
 41  }
 42  
 43  @font-face {
 44    font-family: 'Noto Sans';
 45    font-weight: 700;
 46    font-style: italic;
 47    src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot');
 48    src: url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.eot?#iefix') format('embedded-opentype'),
 49         local('Noto Sans Bold Italic'),
 50         local('Noto-Sans-700italic'),
 51         url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff2') format('woff2'),
 52         url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.woff') format('woff'),
 53         url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.ttf') format('truetype'),
 54         url('../fonts/Noto-Sans-700italic/Noto-Sans-700italic.svg#NotoSans') format('svg');
 55  }
 56  
 57  body {
 58    background-color: #fff;
 59    padding:50px;
 60    font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 61    color:#727272;
 62    font-weight:400;
 63  }
 64  
 65  h1, h2, h3, h4, h5, h6 {
 66    color:#222;
 67    margin:0 0 20px;
 68  }
 69  
 70  p, ul, ol, table, pre, dl {
 71    margin:0 0 20px;
 72  }
 73  
 74  h1, h2, h3 {
 75    line-height:1.1;
 76  }
 77  
 78  h1 {
 79    font-size:28px;
 80  }
 81  
 82  h2 {
 83    color:#393939;
 84  }
 85  
 86  h3, h4, h5, h6 {
 87    color:#494949;
 88  }
 89  
 90  a {
 91    color:#39c;
 92    text-decoration:none;
 93  }
 94  
 95  a:hover {
 96    color:#069;
 97  }
 98  
 99  a small {
100    font-size:11px;
101    color:#777;
102    margin-top:-0.3em;
103    display:block;
104  }
105  
106  a:hover small {
107    color:#777;
108  }
109  
110  .wrapper {
111    width:860px;
112    margin:0 auto;
113  }
114  
115  blockquote {
116    border-left:1px solid #e5e5e5;
117    margin:0;
118    padding:0 0 0 20px;
119    font-style:italic;
120  }
121  
122  code, pre {
123    font-family:Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace;
124    color:#333;
125    font-size:12px;
126  }
127  
128  pre {
129    padding:8px 15px;
130    background: #f8f8f8;
131    border-radius:5px;
132    border:1px solid #e5e5e5;
133    overflow-x: auto;
134  }
135  
136  table {
137    width:100%;
138    border-collapse:collapse;
139  }
140  
141  th, td {
142    text-align:left;
143    padding:5px 10px;
144    border-bottom:1px solid #e5e5e5;
145  }
146  
147  dt {
148    color:#444;
149    font-weight:700;
150  }
151  
152  th {
153    color:#444;
154  }
155  
156  img {
157    max-width:100%;
158  }
159  
160  header {
161    width:270px;
162    float:left;
163    position:fixed;
164    -webkit-font-smoothing:subpixel-antialiased;
165  }
166  
167  header ul {
168    list-style:none;
169    height:40px;
170    padding:0;
171    background: #f4f4f4;
172    border-radius:5px;
173    border:1px solid #e0e0e0;
174    width:270px;
175  }
176  
177  header li {
178    width:89px;
179    float:left;
180    border-right:1px solid #e0e0e0;
181    height:40px;
182  }
183  
184  header li:first-child a {
185    border-radius:5px 0 0 5px;
186  }
187  
188  header li:last-child a {
189    border-radius:0 5px 5px 0;
190  }
191  
192  header ul a {
193    line-height:1;
194    font-size:11px;
195    color:#999;
196    display:block;
197    text-align:center;
198    padding-top:6px;
199    height:34px;
200  }
201  
202  header ul a:hover {
203    color:#999;
204  }
205  
206  header ul a:active {
207    background-color:#f0f0f0;
208  }
209  
210  strong {
211    color:#222;
212    font-weight:700;
213  }
214  
215  header ul li + li + li {
216    border-right:none;
217    width:89px;
218  }
219  
220  header ul a strong {
221    font-size:14px;
222    display:block;
223    color:#222;
224  }
225  
226  section {
227    width:500px;
228    float:right;
229    padding-bottom:50px;
230  }
231  
232  small {
233    font-size:11px;
234  }
235  
236  hr {
237    border:0;
238    background:#e5e5e5;
239    height:1px;
240    margin:0 0 20px;
241  }
242  
243  footer {
244    width:270px;
245    float:left;
246    position:fixed;
247    bottom:50px;
248    -webkit-font-smoothing:subpixel-antialiased;
249  }
250  
251  @media print, screen and (max-width: 960px) {
252  
253    div.wrapper {
254      width:auto;
255      margin:0;
256    }
257  
258    header, section, footer {
259      float:none;
260      position:static;
261      width:auto;
262    }
263  
264    header {
265      padding-right:320px;
266    }
267  
268    section {
269      border:1px solid #e5e5e5;
270      border-width:1px 0;
271      padding:20px 0;
272      margin:0 0 20px;
273    }
274  
275    header a small {
276      display:inline;
277    }
278  
279    header ul {
280      position:absolute;
281      right:50px;
282      top:52px;
283    }
284  }
285  
286  @media print, screen and (max-width: 720px) {
287    body {
288      word-wrap:break-word;
289    }
290  
291    header {
292      padding:0;
293    }
294  
295    header ul, header p.view {
296      position:static;
297    }
298  
299    pre, code {
300      word-wrap:normal;
301    }
302  }
303  
304  @media print, screen and (max-width: 480px) {
305    body {
306      padding:15px;
307    }
308  
309    header ul {
310      width:99%;
311    }
312  
313    header li, header ul li + li + li {
314      width:33%;
315    }
316  }
317  
318  @media print {
319    body {
320      padding:0.4in;
321      font-size:12pt;
322      color:#444;
323    }
324  }