diff options
Diffstat (limited to 'website/assets/css/marketing-old-ie.css')
-rw-r--r-- | website/assets/css/marketing-old-ie.css | 295 |
1 files changed, 295 insertions, 0 deletions
diff --git a/website/assets/css/marketing-old-ie.css b/website/assets/css/marketing-old-ie.css new file mode 100644 index 0000000..b4b9631 --- /dev/null +++ b/website/assets/css/marketing-old-ie.css | |||
@@ -0,0 +1,295 @@ | |||
1 | * { | ||
2 | -webkit-box-sizing: border-box; | ||
3 | -moz-box-sizing: border-box; | ||
4 | box-sizing: border-box; | ||
5 | } | ||
6 | |||
7 | /* | ||
8 | * -- BASE STYLES -- | ||
9 | * Most of these are inherited from Base, but I want to change a few. | ||
10 | */ | ||
11 | |||
12 | body { | ||
13 | line-height: 1.7em; | ||
14 | color: #7f8c8d; | ||
15 | font-size: 13px; | ||
16 | } | ||
17 | |||
18 | h1, | ||
19 | h2, | ||
20 | h3, | ||
21 | h4, | ||
22 | h5, | ||
23 | h6, | ||
24 | label { | ||
25 | color: #34495e; | ||
26 | } | ||
27 | |||
28 | .pure-img-responsive { | ||
29 | max-width: 100%; | ||
30 | height: auto; | ||
31 | } | ||
32 | |||
33 | /* | ||
34 | * -- LAYOUT STYLES -- | ||
35 | * These are some useful classes which I will need | ||
36 | */ | ||
37 | |||
38 | .l-box { | ||
39 | padding: 1em; | ||
40 | } | ||
41 | |||
42 | .l-box-lrg { | ||
43 | padding: 2em; | ||
44 | border-bottom: 1px solid rgba(0,0,0,0.1); | ||
45 | } | ||
46 | |||
47 | .is-center { | ||
48 | text-align: center; | ||
49 | } | ||
50 | |||
51 | /* | ||
52 | * -- PURE FORM STYLES -- | ||
53 | * Style the form inputs and labels | ||
54 | */ | ||
55 | |||
56 | .pure-form label { | ||
57 | margin: 1em 0 0; | ||
58 | font-weight: bold; | ||
59 | font-size: 100%; | ||
60 | } | ||
61 | |||
62 | .pure-form input[type] { | ||
63 | border: 2px solid #ddd; | ||
64 | box-shadow: none; | ||
65 | font-size: 100%; | ||
66 | width: 100%; | ||
67 | margin-bottom: 1em; | ||
68 | } | ||
69 | |||
70 | /* | ||
71 | * -- PURE BUTTON STYLES -- | ||
72 | * I want my pure-button elements to look a little different | ||
73 | */ | ||
74 | |||
75 | .pure-button { | ||
76 | background-color: #1f8dd6; | ||
77 | color: white; | ||
78 | padding: 0.5em 2em; | ||
79 | border-radius: 5px; | ||
80 | } | ||
81 | |||
82 | a.pure-button-primary { | ||
83 | background: white; | ||
84 | color: #1f8dd6; | ||
85 | border-radius: 5px; | ||
86 | font-size: 120%; | ||
87 | } | ||
88 | |||
89 | /* | ||
90 | * -- MENU STYLES -- | ||
91 | * I want to customize how my .pure-menu looks at the top of the page | ||
92 | */ | ||
93 | |||
94 | .home-menu { | ||
95 | padding: 0.5em; | ||
96 | text-align: center; | ||
97 | box-shadow: 0 1px 1px rgba(0,0,0, 0.10); | ||
98 | } | ||
99 | |||
100 | .home-menu.pure-menu-open { | ||
101 | background: #2d3e50; | ||
102 | } | ||
103 | |||
104 | .pure-menu.pure-menu-open.pure-menu-fixed { | ||
105 | /* Fixed menus normally have a border at the bottom. */ | ||
106 | border-bottom: none; | ||
107 | /* I need a higher z-index here because of the scroll-over effect. */ | ||
108 | z-index: 4; | ||
109 | } | ||
110 | |||
111 | .home-menu .pure-menu-heading { | ||
112 | color: white; | ||
113 | font-weight: 400; | ||
114 | font-size: 120%; | ||
115 | } | ||
116 | |||
117 | .home-menu .pure-menu-selected a { | ||
118 | color: white; | ||
119 | } | ||
120 | |||
121 | .home-menu a { | ||
122 | color: #6FBEF3; | ||
123 | } | ||
124 | |||
125 | .home-menu li a:hover, | ||
126 | .home-menu li a:focus { | ||
127 | background: none; | ||
128 | border: none; | ||
129 | color: #AECFE5; | ||
130 | } | ||
131 | |||
132 | /* | ||
133 | * -- SPLASH STYLES -- | ||
134 | * This is the blue top section that appears on the page. | ||
135 | */ | ||
136 | |||
137 | .splash-container { | ||
138 | background: #1f8dd6; | ||
139 | z-index: 1; | ||
140 | overflow: hidden; | ||
141 | /* The following styles are required for the "scroll-over" effect */ | ||
142 | width: 100%; | ||
143 | height: 88%; | ||
144 | top: 0; | ||
145 | left: 0; | ||
146 | position: fixed !important; | ||
147 | } | ||
148 | |||
149 | .splash { | ||
150 | /* absolute center .splash within .splash-container */ | ||
151 | width: 80%; | ||
152 | height: 50%; | ||
153 | overflow: auto; | ||
154 | margin: auto; | ||
155 | position: absolute; | ||
156 | top: 100px; | ||
157 | left: 0; | ||
158 | bottom: 0; | ||
159 | right: 0; | ||
160 | text-align: center; | ||
161 | text-transform: uppercase; | ||
162 | } | ||
163 | |||
164 | /* This is the main heading that appears on the blue section */ | ||
165 | |||
166 | .splash-head { | ||
167 | font-size: 20px; | ||
168 | font-weight: bold; | ||
169 | color: white; | ||
170 | border: 3px solid white; | ||
171 | padding: 1em 1.6em; | ||
172 | font-weight: 100; | ||
173 | border-radius: 5px; | ||
174 | line-height: 1em; | ||
175 | } | ||
176 | |||
177 | /* This is the subheading that appears on the blue section */ | ||
178 | |||
179 | .splash-subhead { | ||
180 | color: white; | ||
181 | letter-spacing: 0.05em; | ||
182 | opacity: 0.8; | ||
183 | } | ||
184 | |||
185 | /* | ||
186 | * -- CONTENT STYLES -- | ||
187 | * This represents the content area (everything below the blue section) | ||
188 | */ | ||
189 | |||
190 | .content-wrapper { | ||
191 | /* These styles are required for the "scroll-over" effect */ | ||
192 | position: absolute; | ||
193 | top: 87%; | ||
194 | width: 100%; | ||
195 | min-height: 12%; | ||
196 | z-index: 2; | ||
197 | background: white; | ||
198 | } | ||
199 | |||
200 | /* This is the class used for the main content headers (<h2>) */ | ||
201 | |||
202 | .content-head { | ||
203 | font-weight: 400; | ||
204 | text-transform: uppercase; | ||
205 | letter-spacing: 0.1em; | ||
206 | margin: 2em 0 1em; | ||
207 | } | ||
208 | |||
209 | /* This is a modifier class used when the content-head is inside a ribbon */ | ||
210 | |||
211 | .content-head-ribbon { | ||
212 | color: white; | ||
213 | } | ||
214 | |||
215 | /* This is the class used for the content sub-headers (<h3>) */ | ||
216 | |||
217 | .content-subhead { | ||
218 | color: #1f8dd6; | ||
219 | } | ||
220 | |||
221 | .content-subhead i { | ||
222 | margin-right: 7px; | ||
223 | } | ||
224 | |||
225 | /* This is the class used for the dark-background areas. */ | ||
226 | |||
227 | .ribbon { | ||
228 | background: #2d3e50; | ||
229 | color: #aaa; | ||
230 | } | ||
231 | |||
232 | /* This is the class used for the footer */ | ||
233 | |||
234 | .footer { | ||
235 | background: #111; | ||
236 | } | ||
237 | |||
238 | /* | ||
239 | * -- TABLET (AND UP) MEDIA QUERIES -- | ||
240 | * On tablets and other medium-sized devices, we want to customize some | ||
241 | * of the mobile styles. | ||
242 | */ | ||
243 | |||
244 | /* We increase the body font size */ | ||
245 | |||