|
0
|
1 @font-face {
|
|
|
2 font-family: 'Source Sans Pro';
|
|
|
3 font-style: normal;
|
|
|
4 font-weight: 400;
|
|
|
5 src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(source_sans.woff) format('woff');
|
|
|
6 }
|
|
|
7
|
|
|
8 body, html { margin: 0; padding: 0; height: 100%; }
|
|
|
9 section, article { display: block; padding: 0; }
|
|
|
10
|
|
|
11 body {
|
|
|
12 background: #f8f8f8;
|
|
|
13 font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
|
|
|
14 line-height: 1.5;
|
|
|
15 }
|
|
|
16
|
|
|
17 p { margin-top: 0; }
|
|
|
18
|
|
|
19 h2, h3, h1 {
|
|
|
20 font-weight: normal;
|
|
|
21 margin-bottom: .7em;
|
|
|
22 }
|
|
|
23 h1 { font-size: 140%; }
|
|
|
24 h2 { font-size: 120%; }
|
|
|
25 h3 { font-size: 110%; }
|
|
|
26 article > h2:first-child, section:first-child > h2 { margin-top: 0; }
|
|
|
27
|
|
|
28 #nav h1 {
|
|
|
29 margin-right: 12px;
|
|
|
30 margin-top: 0;
|
|
|
31 margin-bottom: 2px;
|
|
|
32 color: #d30707;
|
|
|
33 letter-spacing: .5px;
|
|
|
34 }
|
|
|
35
|
|
|
36 a, a:visited, a:link, .quasilink {
|
|
|
37 color: #A21313;
|
|
|
38 }
|
|
|
39
|
|
|
40 em {
|
|
|
41 padding-right: 2px;
|
|
|
42 }
|
|
|
43
|
|
|
44 .quasilink {
|
|
|
45 cursor: pointer;
|
|
|
46 }
|
|
|
47
|
|
|
48 article {
|
|
|
49 max-width: 700px;
|
|
|
50 margin: 0 0 0 160px;
|
|
|
51 border-left: 2px solid #E30808;
|
|
|
52 border-right: 1px solid #ddd;
|
|
|
53 padding: 30px 50px 100px 50px;
|
|
|
54 background: white;
|
|
|
55 z-index: 2;
|
|
|
56 position: relative;
|
|
|
57 min-height: 100%;
|
|
|
58 box-sizing: border-box;
|
|
|
59 -moz-box-sizing: border-box;
|
|
|
60 }
|
|
|
61
|
|
|
62 #nav {
|
|
|
63 position: fixed;
|
|
|
64 padding-top: 30px;
|
|
|
65 max-height: 100%;
|
|
|
66 box-sizing: -moz-border-box;
|
|
|
67 box-sizing: border-box;
|
|
|
68 overflow-y: auto;
|
|
|
69 left: 0; right: none;
|
|
|
70 width: 160px;
|
|
|
71 text-align: right;
|
|
|
72 z-index: 1;
|
|
|
73 }
|
|
|
74
|
|
|
75 @media screen and (min-width: 1000px) {
|
|
|
76 article {
|
|
|
77 margin: 0 auto;
|
|
|
78 }
|
|
|
79 #nav {
|
|
|
80 right: 50%;
|
|
|
81 width: auto;
|
|
|
82 border-right: 349px solid transparent;
|
|
|
83 }
|
|
|
84 }
|
|
|
85
|
|
|
86 #nav ul {
|
|
|
87 display: block;
|
|
|
88 margin: 0; padding: 0;
|
|
|
89 margin-bottom: 32px;
|
|
|
90 }
|
|
|
91
|
|
|
92 #nav a {
|
|
|
93 text-decoration: none;
|
|
|
94 }
|
|
|
95
|
|
|
96 #nav li {
|
|
|
97 display: block;
|
|
|
98 margin-bottom: 4px;
|
|
|
99 }
|
|
|
100
|
|
|
101 #nav li ul {
|
|
|
102 font-size: 80%;
|
|
|
103 margin-bottom: 0;
|
|
|
104 display: none;
|
|
|
105 }
|
|
|
106
|
|
|
107 #nav li.active ul {
|
|
|
108 display: block;
|
|
|
109 }
|
|
|
110
|
|
|
111 #nav li li a {
|
|
|
112 padding-right: 20px;
|
|
|
113 display: inline-block;
|
|
|
114 }
|
|
|
115
|
|
|
116 #nav ul a {
|
|
|
117 color: black;
|
|
|
118 padding: 0 7px 1px 11px;
|
|
|
119 }
|
|
|
120
|
|
|
121 #nav ul a.active, #nav ul a:hover {
|
|
|
122 border-bottom: 1px solid #E30808;
|
|
|
123 margin-bottom: -1px;
|
|
|
124 color: #E30808;
|
|
|
125 }
|
|
|
126
|
|
|
127 #logo {
|
|
|
128 border: 0;
|
|
|
129 margin-right: 12px;
|
|
|
130 margin-bottom: 25px;
|
|
|
131 }
|
|
|
132
|
|
|
133 section {
|
|
|
134 border-top: 1px solid #E30808;
|
|
|
135 margin: 1.5em 0;
|
|
|
136 }
|
|
|
137
|
|
|
138 section.first {
|
|
|
139 border: none;
|
|
|
140 margin-top: 0;
|
|
|
141 }
|
|
|
142
|
|
|
143 #demo {
|
|
|
144 position: relative;
|
|
|
145 }
|
|
|
146
|
|
|
147 #demolist {
|
|
|
148 position: absolute;
|
|
|
149 right: 5px;
|
|
|
150 top: 5px;
|
|
|
151 z-index: 25;
|
|
|
152 }
|
|
|
153
|
|
|
154 .yinyang {
|
|
|
155 position: absolute;
|
|
|
156 top: -10px;
|
|
|
157 left: 0; right: 0;
|
|
|
158 margin: auto;
|
|
|
159 display: block;
|
|
|
160 height: 120px;
|
|
|
161 }
|
|
|
162
|
|
|
163 .actions {
|
|
|
164 margin: 1em 0 0;
|
|
|
165 min-height: 100px;
|
|
|
166 position: relative;
|
|
|
167 }
|
|
|
168
|
|
|
169 @media screen and (max-width: 800px) {
|
|
|
170 .actions {
|
|
|
171 padding-top: 120px;
|
|
|
172 }
|
|
|
173 .actionsleft, .actionsright {
|
|
|
174 float: none;
|
|
|
175 text-align: left;
|
|
|
176 margin-bottom: 1em;
|
|
|
177 }
|
|
|
178 }
|
|
|
179
|
|
|
180 th {
|
|
|
181 text-decoration: underline;
|
|
|
182 font-weight: normal;
|
|
|
183 text-align: left;
|
|
|
184 }
|
|
|
185
|
|
|
186 #features ul {
|
|
|
187 list-style: none;
|
|
|
188 margin: 0 0 1em;
|
|
|
189 padding: 0 0 0 1.2em;
|
|
|
190 }
|
|
|
191
|
|
|
192 #features li:before {
|
|
|
193 content: "-";
|
|
|
194 width: 1em;
|
|
|
195 display: inline-block;
|
|
|
196 padding: 0;
|
|
|
197 margin: 0;
|
|
|
198 margin-left: -1em;
|
|
|
199 }
|
|
|
200
|
|
|
201 .rel {
|
|
|
202 margin-bottom: 0;
|
|
|
203 }
|
|
|
204 .rel-note {
|
|
|
205 margin-top: 0;
|
|
|
206 color: #555;
|
|
|
207 }
|
|
|
208
|
|
|
209 pre {
|
|
|
210 padding-left: 15px;
|
|
|
211 border-left: 2px solid #ddd;
|
|
|
212 }
|
|
|
213
|
|
|
214 code {
|
|
|
215 padding: 0 2px;
|
|
|
216 }
|
|
|
217
|
|
|
218 strong {
|
|
|
219 text-decoration: underline;
|
|
|
220 font-weight: normal;
|
|
|
221 }
|
|
|
222
|
|
|
223 .field {
|
|
|
224 border: 1px solid #A21313;
|
|
|
225 }
|
