1html, body {
2  font-family: 'Roboto', sans-serif;
3  font-size: 15px;
4}
5body {
6  background-color: #f6f6f6;
7  padding-bottom: 50px;
8  padding-top: 80px;
9}
10
11header {
12  min-height: 80px;
13  color: #f6f6f6;
14  position: fixed;
15  top: 0;
16  left: 0;
17  width: 100%;
18  z-index: 99;
19}
20header h1 {
21  margin: 10px 0;
22  font-size: 50px;
23  line-height: 60px;
24  font-weight: 100;
25  text-rendering: auto;
26}
27header menu {
28  margin: 20px 0 0;
29  padding: 0;
30  height: 40px;
31}
32header menu ul {
33  margin: 0;
34  padding: 0;
35  float: right;
36}
37header menu li {
38  list-style: none;
39  float: left;
40  margin: 0;
41  padding: 0;
42}
43header menu li a {
44  display: inline-block;
45  height: 40px;
46  font-size: 17px;
47  line-height: 40px;
48  padding: 0 20px;
49  color: #f6f6f6;
50}
51header menu li a:hover {
52  color: #f6f6f6;
53  text-decoration: none;
54}
55header menu li a img {
56  margin: 0;
57  padding: 5px 0;
58  vertical-align: bottom;
59  width: 30px;
60  height: 30px;
61}
62
63#subtitle {
64  position: absolute;
65  top: 80px;
66  left: 0;
67  width: 100%;
68}
69h2 {
70  font-weight: 200;
71  font-size: 26px;
72  line-height: 30px;
73  padding: 15px 0;
74  margin: 0;
75  color: #eee;
76}
77h2 strong {
78  font-weight: 300;
79}
80
81a.dl {
82  font-weight: 300;
83  font-size: 30px;
84  line-height: 40px;
85  padding: 3px 10px;
86  display: inline-block;
87  border-radius: 6px;
88  color: #f0f0f0;
89  margin: 5px 0;
90}
91a.dl:hover {
92  color: #f0f0f0;
93  text-decoration: none;
94}
95
96.content-nav {
97  margin-top: 130px;
98  width: 220px;
99}
100.content-nav.affix {
101  top: 0;
102}
103.content-nav li.active a, .content-nav li.active a:hover {
104  background-color: transparent;
105  color: #555;
106  border-left-width: 2px;
107}
108.content-nav .secondary a {
109  color: #aaa;
110}
111.content-nav .secondary a:hover {
112  color: #888;
113}
114
115h3 {
116  font-weight: 300;
117  font-style: italic;
118  color: #888;
119  font-size: 20px;
120  padding-top: 115px;
121  margin-top: 0;
122}
123
124h4 {
125  font-weight: 400;
126  text-transform: uppercase;
127  color: #888;
128  font-size: 15px;
129  padding-top: 20px;
130}
131
132p.license {
133  font-family: fixed-width;
134}
135
136.row .logo {
137  text-align: center;
138  margin-top: 150px;
139}
140.row .logo img {
141  height: 30px;
142}
143
144pre, code {
145  color: #666;
146}
147code {
148  border: 0;
149  background-color: transparent;
150}
151
152/* Widescreen desktop. */
153@media (min-width: 1200px) {
154  .content-nav {
155    width: 270px;
156  }
157}
158
159/* Smaller width browser, tablets. */
160@media (max-width: 979px) {
161  .content-nav {
162    width: 166px;
163  }
164}
165
166/* One-column mobile display. */
167@media (max-width: 767px) {
168  header {
169    position: absolute;
170    top: 0;
171    left: 0;
172    width: 100%;
173    padding-left: 20px;
174  }
175  header menu {
176    display: none;
177  }
178  #subtitle {
179    position: absolute;
180    top: 80px;
181    left: 0;
182    width: 100%;
183    padding-left: 20px;
184  }
185  .content-nav {
186    display: none;
187  }
188}