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