Small fixes
[fsf-giving-guide.git] / stylesheet.css
CommitLineData
afb35b89
RL
1/*Typography*/
2
3@font-face {
4b239f9e
RL
4 font-family: 'Signika Regular';
5 src: local('Signika Regular'), url('fonts/Signika-Regular.ttf') format('truetype');
6}
7
8@font-face {
afb35b89
RL
9 font-family: 'Signika Light';
10 src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
11}
12
13@font-face {
08daf010
RL
14 font-family: 'Signika Bold';
15 src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
16}
17
18@font-face {
afb35b89
RL
19 font-family: 'Open Sans';
20 src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
21}
22
08daf010
RL
23@font-face {
24 font-family: 'Open Sans Bold';
25 src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
26}
27
afb35b89
RL
28/*Style common HTML tags*/
29
30html {
afb35b89 31 font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
ed78f54d 32 font-size: 14px;
4b239f9e 33 line-height: 1.4;
afb35b89 34 color: #363636;
1d1ca77b 35 background-color: #fff;
afb35b89
RL
36 width: 100%;
37}
38
08daf010 39/* Type something: */
afb35b89 40
4b239f9e 41a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
08daf010 42
4b239f9e 43p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
afb35b89
RL
44
45i { font-style: italic; }
46b { font-style: oblique; }
47
4b239f9e 48li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
08daf010 49/* ul {margin: 1em 2em 0em 4em;} */
afb35b89
RL
50
51br {margin-bottom: 20em; margin-top: 20em;}
52
dd0353ce 53h1 { font-size: 2.20em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 1em; }
08daf010 54h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
4b239f9e 55h3 { font-size: 1.625em; font-family: 'Signika Bold'; color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
08daf010
RL
56h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
57h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
58h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
afb35b89
RL
59
60/*Site-specific*/
61
08daf010
RL
62 /* Header */
63
64.header {
08daf010
RL
65}
66
b190b1f5
RL
67/* Navbar */
68
32d56408 69.header_wrapper {
c8033ceb 70 background-color: #2CAF8F;
f5810b45 71 height: 450px;
c8033ceb 72}
82460b03 73
4b239f9e
RL
74.header a {
75 border-bottom: 0;
08daf010
RL
76}
77
32d56408
RL
78.navbar_wrapper {
79 max-width: 1300px;
73f66771 80 min-width: 1110px;
32d56408
RL
81 margin: auto;
82 text-align: center;
83}
84
08daf010 85.logo_wrapper {
196ca9db 86 padding: 1.3em;
32d56408 87 float: left;
196ca9db
RL
88}
89
4b239f9e
RL
90.join_wrapper {
91 padding: 1.2em;
92 float: right;
32d56408 93 display: inline-block;
08daf010
RL
94}
95
4b239f9e 96.logo, .join {
32d56408
RL
97 max-width: 200px;
98 min-width: 200px;
08daf010
RL
99}
100
73f66771 101.share_wrapper {
73f66771
RL
102}
103
104.share {
dd0353ce
RL
105 text-align: center;
106}
107
108.share a{
b1f938b2 109 background-color: #FDD53A;
dd0353ce
RL
110 border-bottom: 0;
111 padding: .6em 2em;
112 font-family: 'Signika Bold';
113 font-size: 1.4em;
114 color: #2CAF8F;
115 border-radius: 50em;
116}
117
118.share a:hover {
119 background-color: #FDDE56;
73f66771
RL
120}
121
32d56408
RL
122.navbar {
123 width: 537px;
124 padding: 1em;
196ca9db 125 height: 2.55556em;
32d56408
RL
126 display: inline-block;
127/* float: left; */
afb35b89
RL
128}
129
82460b03 130.navbar li {
4b239f9e
RL
131 font-family: 'Signika Regular';
132 font-size: 1em;
133 background-color: white;
08daf010
RL
134 list-style-type: none;
135 border-right: 1px #9BD2BF solid;
4b239f9e
RL
136 padding: 0 30px 0 30px;
137 line-height: 2.6;
08daf010 138 float: left;
08daf010
RL
139}
140
141.navbar li:first-child {
142 border-radius: 100px 0 0 100px;
08daf010
RL
143}
144
145.navbar li:last-child {
146 border-right: 0;
147 border-radius: 0 100px 100px 0;
08daf010 148}
4b239f9e 149
08daf010
RL
150.navbar li:hover {
151 background-color: #FFDD55;
08daf010
RL
152}
153
154.navbar li a {
155 display: block;
156 text-decoration: none;
08daf010
RL
157}
158
159.navbar li a:hover {
160 color: #4B423B;
161}
162
430f57db 163.intro,
f51aceb5 164.share {
32d56408 165 max-width: 1300px;
73f66771 166 min-width: 1170px;
32d56408
RL
167}
168
f51aceb5
RL
169.intro_wrapper,
170.intro_img {
e592611b 171 max-width: 500px;
f51aceb5
RL
172 min-width: 00px;
173}
174
175.intro_wrapper {
82460b03 176 float: right;
b1f938b2 177 color: white;
f51aceb5
RL
178 padding-right: 4em;
179}
180
181.intro_img{
182 float: left;
183 padding-left: 4em;
82460b03
RL
184}
185
186.intro_wrapper h2 {
187 color: #FFDD55;
188}
189
190.intro_img img{
f51aceb5 191 width: 100%;
82460b03 192}
812f895f
RL
193
194/* Comparisons */
195
196.wrapper,
f5810b45 197.section_wrapper,
dd0353ce 198.buy_avoid,
f5810b45 199.recommended {
dd0353ce 200 max-width: 750px;
812f895f
RL
201 min-width: 750px;
202 margin: auto;
203}
204
205.main_title {
e2256b1a 206 width: 100%;
dd0353ce
RL
207 text-align: left;
208 border-bottom: 1px solid lightgray;
812f895f 209 margin-top: 3em;
dd0353ce 210 margin-bottom: 2em;
812f895f
RL
211 display: inline-block;
212}
213
c8033ceb
RL
214.buy a {
215 border-bottom: none;
216}
217
dd0353ce
RL
218.product_img {
219 margin: auto;
220 /* width: 168px; */
221 height: 168px;
222}
223
c8033ceb
RL
224.product {
225 margin: auto;
dd0353ce
RL
226 display: block;
227 /* margin-bottom: 8em; */
228 /* max-width: 168px; */
229 max-height: 168px;
c8033ceb
RL
230}
231
232.good,
233.bad {
dd0353ce 234 display: none; /* FIXME: This is temporary until I fix the sizes*/
c8033ceb
RL
235 position: relative;
236 top: 175px;
237 left: 84px;
238 width: 60px;
239}
240
c8033ceb
RL
241.free, .proprietary {
242 text-align: center;
243}
244
245.free li,
246.proprietary li {
247 text-align: left;
248}
249
250.buy img,
251.avoid img {
c8033ceb
RL
252 max-width: 151px;
253 height: 42px;
254}
255
dd0353ce
RL
256.buy_avoid_wrapper {
257 margin-top: 2em;
258 min-width: 100%;
259 max-width: 100%;
260 display: inline-block;
261}
262
263.buy {
264 text-align: center;
265 margin: auto;
266 width: 45.555555%;
267 float: left;
268
269}
270
271.avoid {
272 text-align: center;
273 margin: auto;
274 width: 45.555555%;
275 float: right;
276}
277
c8033ceb
RL
278.free {
279 float: left;
dd0353ce 280 width: 45.555555%;
c8033ceb
RL
281}
282
283.proprietary {
284 float: right;
dd0353ce 285 width: 45.555555%;
c8033ceb 286}
f5810b45
RL
287
288/* Recommended Section */
289
dd0353ce 290.topic_title {
f5810b45
RL
291 border-bottom: 1px solid #2CAF8F;
292 width: 100%;
293 text-align: left;
294 margin-top: 3em;
295 display: inline-block;
296}
297
298.recommend_wrapper {
299 padding-top: 1em;
300 margin: auto;
301 width: 750px;
302}
303
304.recommended_product {
305 text-align: center;
306 width: 29%;
307 margin: 1em;
308 display: inline-block
309}
310
311.recommended_product_img {
312 width: 120px;
313}
dd0353ce
RL
314
315.recommend_wrapper .buy {
316 float: none;
317 text-align: center;
318 width: 100%;
319}
430f57db
RL
320
321.remark {
322 margin-top: 3em;
323 font-weight: bold;
324}