Updates.
[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;
08daf010 35 background-color: #fffefb;
afb35b89
RL
36 width: 100%;
37}
38
afb35b89 39
08daf010 40/* Type something: */
afb35b89 41
4b239f9e 42a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none; }
08daf010 43
4b239f9e 44p { line-height: 1.4; margin-bottom: 1.5em; font-size: 1em; }
afb35b89
RL
45
46i { font-style: italic; }
47b { font-style: oblique; }
48
4b239f9e 49li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4; }
08daf010 50/* ul {margin: 1em 2em 0em 4em;} */
afb35b89
RL
51
52br {margin-bottom: 20em; margin-top: 20em;}
53
54h1 { font-size: 2.75em; font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
08daf010 55h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
4b239f9e 56h3 { font-size: 1.625em; font-family: 'Signika Bold'; color: #484848; margin-bottom: 0.5em; margin-top: 2em; }
08daf010
RL
57h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
58h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
59h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
afb35b89
RL
60
61/*Site-specific*/
62
08daf010
RL
63 /* Header */
64
65.header {
82460b03 66/* background-image: url("images/banner.png"); */
c8033ceb 67/* background-color: #2CAF8F; */
82460b03
RL
68/* background-repeat: no-repeat; */
69/* height: 710px; */
70/* background-size: 550px; */
71/* background-position: 5% 30%; */
08daf010
RL
72}
73
b190b1f5
RL
74/* Navbar */
75
c8033ceb
RL
76.navbar {
77 background-color: #2CAF8F;
82460b03 78 height: 500px;
c8033ceb 79}
82460b03 80
4b239f9e
RL
81.header a {
82 border-bottom: 0;
08daf010
RL
83}
84
85.logo_wrapper {
196ca9db 86 padding: 1.3em;
4b239f9e 87 float: left
196ca9db
RL
88}
89
4b239f9e
RL
90.join_wrapper {
91 padding: 1.2em;
92 float: right;
08daf010
RL
93}
94
4b239f9e
RL
95.logo, .join {
96 width: 210px;
08daf010
RL
97}
98
4b239f9e
RL
99.nav_wrapper {
100 padding: 1em 5em 1em 9em;
196ca9db 101 height: 2.55556em;
4b239f9e 102 float: left;
afb35b89
RL
103}
104
82460b03 105.navbar li {
4b239f9e
RL
106 font-family: 'Signika Regular';
107 font-size: 1em;
108 background-color: white;
08daf010
RL
109 list-style-type: none;
110 border-right: 1px #9BD2BF solid;
4b239f9e
RL
111 padding: 0 30px 0 30px;
112 line-height: 2.6;
08daf010 113 float: left;
08daf010
RL
114}
115
116.navbar li:first-child {
117 border-radius: 100px 0 0 100px;
08daf010
RL
118}
119
120.navbar li:last-child {
121 border-right: 0;
122 border-radius: 0 100px 100px 0;
08daf010 123}
4b239f9e 124
08daf010
RL
125.navbar li:hover {
126 background-color: #FFDD55;
08daf010
RL
127}
128
129.navbar li a {
130 display: block;
131 text-decoration: none;
08daf010
RL
132}
133
134.navbar li a:hover {
135 color: #4B423B;
136}
137
b190b1f5
RL
138/* Comparisons */
139
4e5b767f
RL
140.wrapper,
141.section_wrapper {
4b239f9e 142 width: 750px;
08daf010 143 margin: auto;
82460b03 144}
08daf010 145
4b239f9e
RL
146.main_title {
147 text-align: center;
4e5b767f 148 margin-top: 3em;
2ee67775 149 display: inline-block;
4b239f9e
RL
150}
151
08daf010
RL
152.wrapper .intro_phrase {
153 width: 450px;
154 text-align: center;
b190b1f5 155 font-family: 'Signika Bold';
08daf010
RL
156 margin: 1.2em auto;
157 color: #bababa;
08daf010 158}
c8033ceb 159
82460b03
RL
160.intro_wrapper {
161 width: 40%;
162 float: right;
163 color: white !important;
164 padding-top: 2em;
165 padding-right: 6em;
166}
167
168.intro_wrapper h2 {
169 color: #FFDD55;
170}
171
172.intro_img img{
173 width: 40%;
174 float: left;
175 padding: 2em;
176 padding-left: 6em;
177
178}
c8033ceb
RL
179.buy a {
180 border-bottom: none;
181}
182
183.product_img,
184.product {
185 margin: auto;
186 width: 168px;
187}
188
189.good,
190.bad {
191 position: relative;
192 top: 175px;
193 left: 84px;
194 width: 60px;
195}
196
197.buy, .avoid,
198.free, .proprietary {
199 text-align: center;
200}
201
202.free li,
203.proprietary li {
204 text-align: left;
205}
206
207.buy img,
208.avoid img {
209 margin-top: 2em;
210 max-width: 151px;
211 height: 42px;
212}
213
214.free {
215 float: left;
216 width: 45%;
217}
218
219.proprietary {
220 float: right;
221 width: 45%;
222}