Completely new design!
[fsf-giving-guide.git] / stylesheet.css
CommitLineData
afb35b89
RL
1/*Typography*/
2
3@font-face {
4 font-family: 'Signika Light';
5 src: local('Signika Light'), url('fonts/Signika-Light.ttf') format('truetype');
6}
7
8@font-face {
08daf010
RL
9 font-family: 'Signika Bold';
10 src: local('Signika Bold'), url('fonts/Signika-Bold.ttf') format('truetype');
11}
12
13@font-face {
afb35b89
RL
14 font-family: 'Open Sans';
15 src: local('Open Sans'), url('fonts/OpenSans-Regular.ttf') format('truetype');
16}
17
08daf010
RL
18@font-face {
19 font-family: 'Open Sans Bold';
20 src: local('Open Sans Bold'), url('fonts/OpenSans-Bold.ttf') format('truetype');
21}
22
afb35b89
RL
23/*Style common HTML tags*/
24
25html {
afb35b89 26 font-family: 'Open Sans', 'DejaVu Sans', Arial, sans-serif;
08daf010
RL
27 font-size: 0.9em;
28 line-height: 1.4em;
afb35b89 29 color: #363636;
08daf010 30 background-color: #fffefb;
afb35b89
RL
31 width: 100%;
32}
33
afb35b89 34
08daf010 35/* Type something: */
afb35b89 36
08daf010
RL
37a { color: #1F8A70; border-bottom: 1px solid #dbd145; text-decoration: none;}
38
39p { line-height: 1.4em; margin-bottom: 1.5em; font-size: 1em;}
afb35b89
RL
40
41i { font-style: italic; }
42b { font-style: oblique; }
43
44li {list-style-type: circle; padding: 0.4em 0.2em; line-height: 1.4em; }
08daf010 45/* ul {margin: 1em 2em 0em 4em;} */
afb35b89
RL
46
47br {margin-bottom: 20em; margin-top: 20em;}
48
49h1 { font-size: 2.75em; font-family: 'Signika Light'; margin-bottom: 0.5em; margin-top: 1em; }
08daf010
RL
50h2 { font-size: 1.75em; font-family: 'Signika Light'; color: #2CAF8F; margin-bottom: 0.5em; margin-top: 2em; }
51h3 { font-size: 1.625em; font-family: 'Signika Light'; color: #b495d3; margin-bottom: 0.5em; margin-top: 2em; }
52h4 { font-size: 1.375em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
53h5 { font-size: 1.25em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
54h6 { font-size: 1.125em; font-family: 'Signika Light'; color: #4d4d4d; margin-bottom: 0.5em; margin-top: 2em; }
afb35b89
RL
55
56/*Site-specific*/
57
08daf010
RL
58 /* Header */
59
60.header {
61 background-image: url("images/banner.png");
62 background-color: #2CAF8F;
63 background-repeat: no-repeat;
64 height: 776px;
65 background-size: 110%;
66 background-position: bottom;
67}
68
69.logo {
70 width: 180px;
71 height: 21px;
72 padding: 1.3em;
73
74}
75
76.logo_wrapper {
afb35b89
RL
77}
78
08daf010
RL
79.top {
80 position: relative;
81}
82
83.top a {
84 border-bottom: 0;
85 color: white;
86}
87
88.upper_links {
89 position: absolute;
90 text-align: center;
91 margin-left: 23%;
92}
93
94.upper_links li {
95 list-style: none;
96 display: inline-block;
97 padding: 1em;
98 float: left;
99}
100
101.navbar ul {
102 background-color: white;
103 border-radius: 100px;
104 text-align: center;
105 width: 875px;
106 height: 3.55556em;
107 margin: auto;
108 -webkit-transition: background 3s;
109 transition: background-color 3s;
afb35b89
RL
110}
111
08daf010
RL
112 .navbar li {
113 font-weight: bold;
114 list-style-type: none;
115 border-right: 1px #9BD2BF solid;
116 padding: 0 10px 0 10px;
117 line-height: 3.7;
118 float: left;
119 width: 91px;
120 height: 3.55556em;
121}
122
123.navbar li:first-child {
124 border-radius: 100px 0 0 100px;
125 width: 81px;
126}
127
128.navbar li:last-child {
129 border-right: 0;
130 border-radius: 0 100px 100px 0;
131 width: 81px;
132}
133.navbar li:hover {
134 background-color: #FFDD55;
135
136}
137
138.navbar li a {
139 display: block;
140 text-decoration: none;
141 border: 0;
142
143}
144
145.navbar li a:hover {
146 color: #4B423B;
147}
148
149.wrapper {
150 width: 700px;
151 margin: auto;
152}
153
154.wrapper .intro_phrase {
155 width: 450px;
156 text-align: center;
157 font-family: Signika Bold;
158 margin: 1.2em auto;
159 color: #bababa;
160
161}
162
163/* #comparisons {
164 padding-top: 100px;
afb35b89 165 background-color: #fbfbfb;
08daf010 166 background-size: cover;
afb35b89
RL
167 position: absolute;
168 width: 100%;
169 max-width: 1150px;
170}
171
172.main_title {
173 margin-left: 2em;
174 margin-bottom: 3em;
175}
176
177.section_wrapper {
178 margin-bottom: 4em;
179}
180
181.title {
182 text-align: center;
183 font-size: 1.5em;
184}
185
186#free {
187 position: relative;
08daf010 188 background-color: red;
afb35b89
RL
189 float: left;
190 width: 45%;
191 max-width: 450px;
192}
193
194#sign {
195 position: relative;
08daf010 196 background-color: green;
afb35b89
RL
197 width: 240px;
198 float: left;
199 margin-top: 3em;
200}
201
202#proprietary {
203 position: relative;
08daf010 204 background-color: blue;
afb35b89
RL
205 width: 45%;
206 max-width: 450px;
207 float: right;
208}
209
210.product {
211 display: block;
212 margin: auto;
213 width: 250px;
214 height: 250px;
215}
216
217.sign {
218 display: block;
219 margin: auto;
220 width: 149px;
221 height: 149px;
222}
223
224.separator {
225 width: 1px;
226 height: 324px;
227 margin: auto;
228 margin-left: 7.5em;
08daf010 229 margin-top: 3em;}
afb35b89
RL
230
231#section_wrapper {
232 position: relative;
afb35b89 233} */