467fb20592f3e6b492bbc551e7f005b4f2c6785d
[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: 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 {
77 }
78
79 .top {
80 position: relative;
81 }
82
83 .top a {
84 border-bottom: 0;
85 }
86
87 .upper_links li {
88 list-style: none;
89 display: inline-block;
90 padding: 1em;
91 float: left;
92 }
93
94 .navbar ul {
95 background-color: white;
96 border-radius: 100px;
97 text-align: center;
98 width: 875px;
99 height: 3.55556em;
100 margin: auto;
101 -webkit-transition: background 3s;
102 transition: background-color 3s;
103 }
104
105 .navbar li {
106 font-weight: bold;
107 list-style-type: none;
108 border-right: 1px #9BD2BF solid;
109 padding: 0 10px 0 10px;
110 line-height: 3.7;
111 float: left;
112 width: 91px;
113 height: 3.55556em;
114 }
115
116 .navbar li:first-child {
117 border-radius: 100px 0 0 100px;
118 width: 81px;
119 }
120
121 .navbar li:last-child {
122 border-right: 0;
123 border-radius: 0 100px 100px 0;
124 width: 81px;
125 }
126 .navbar li:hover {
127 background-color: #FFDD55;
128
129 }
130
131 .navbar li a {
132 display: block;
133 text-decoration: none;
134 border: 0;
135
136 }
137
138 .navbar li a:hover {
139 color: #4B423B;
140 }
141
142 .wrapper {
143 width: 700px;
144 margin: auto;
145 }
146
147 .wrapper .intro_phrase {
148 width: 450px;
149 text-align: center;
150 font-family: Signika Bold;
151 margin: 1.2em auto;
152 color: #bababa;
153
154 }
155
156 /* #comparisons {
157 padding-top: 100px;
158 background-color: #fbfbfb;
159 background-size: cover;
160 position: absolute;
161 width: 100%;
162 max-width: 1150px;
163 }
164
165 .main_title {
166 margin-left: 2em;
167 margin-bottom: 3em;
168 }
169
170 .section_wrapper {
171 margin-bottom: 4em;
172 }
173
174 .title {
175 text-align: center;
176 font-size: 1.5em;
177 }
178
179 #free {
180 position: relative;
181 background-color: red;
182 float: left;
183 width: 45%;
184 max-width: 450px;
185 }
186
187 #sign {
188 position: relative;
189 background-color: green;
190 width: 240px;
191 float: left;
192 margin-top: 3em;
193 }
194
195 #proprietary {
196 position: relative;
197 background-color: blue;
198 width: 45%;
199 max-width: 450px;
200 float: right;
201 }
202
203 .product {
204 display: block;
205 margin: auto;
206 width: 250px;
207 height: 250px;
208 }
209
210 .sign {
211 display: block;
212 margin: auto;
213 width: 149px;
214 height: 149px;
215 }
216
217 .separator {
218 width: 1px;
219 height: 324px;
220 margin: auto;
221 margin-left: 7.5em;
222 margin-top: 3em;}
223
224 #section_wrapper {
225 position: relative;
226 } */