1/* ================ The Timeline ================ */
2
3.timeline {
4  position: relative;
5  width: 660px;
6  margin: 0 auto;
7  margin-top: 20px;
8  padding: 1em 0;
9  list-style-type: none;
10}
11
12.timeline:before {
13  position: absolute;
14  left: 50%;
15  top: 0;
16  content: ' ';
17  display: block;
18  width: 6px;
19  height: 100%;
20  margin-left: -3px;
21  background: rgb(80,80,80);
22  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
23  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
24  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
25  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
26  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
27  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
28
29  z-index: 5;
30}
31
32.timeline li {
33  padding: 1em 0;
34  margin: 0;
35}
36
37.timeline li:after {
38  content: "";
39  display: block;
40  height: 0;
41  clear: both;
42  visibility: hidden;
43}
44
45.direction-l {
46  position: relative;
47  width: 300px;
48  float: left;
49  text-align: right;
50}
51
52.direction-r {
53  position: relative;
54  width: 300px;
55  float: right;
56}
57
58.flag-wrapper {
59  position: relative;
60  display: inline-block;
61
62  text-align: center;
63}
64
65.flag {
66  position: relative;
67  display: inline;
68  background: rgb(248,248,248);
69  padding: 6px 10px;
70  border-radius: 5px;
71
72  font-weight: 600;
73  text-align: left;
74}
75
76.direction-l .flag {
77  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
78  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
79  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
80}
81
82.direction-r .flag {
83  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
84  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
85  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
86}
87
88.direction-l .flag:before,
89.direction-r .flag:before {
90  position: absolute;
91  top: 50%;
92  right: -40px;
93  content: ' ';
94  display: block;
95  width: 12px;
96  height: 12px;
97  margin-top: -10px;
98  background: #fff;
99  border-radius: 10px;
100  border: 4px solid rgb(255,80,80);
101  z-index: 10;
102}
103
104.direction-r .flag:before {
105  left: -40px;
106}
107
108.direction-l .flag:after {
109  content: "";
110  position: absolute;
111  left: 100%;
112  top: 50%;
113  height: 0;
114  width: 0;
115  margin-top: -8px;
116  border: solid transparent;
117  border-left-color: rgb(248,248,248);
118  border-width: 8px;
119  pointer-events: none;
120}
121
122.direction-r .flag:after {
123  content: "";
124  position: absolute;
125  right: 100%;
126  top: 50%;
127  height: 0;
128  width: 0;
129  margin-top: -8px;
130  border: solid transparent;
131  border-right-color: rgb(248,248,248);
132  border-width: 8px;
133  pointer-events: none;
134}
135
136.time-wrapper {
137  display: inline;
138
139  line-height: 1em;
140  font-size: 0.66666em;
141  color: rgb(250,80,80);
142  vertical-align: middle;
143}
144
145.direction-l .time-wrapper {
146  float: left;
147}
148
149.direction-r .time-wrapper {
150  float: right;
151}
152
153.time {
154  display: inline-block;
155  padding: 4px 6px;
156  background: rgb(248,248,248);
157}
158
159.desc {
160  margin: 1em 0.75em 0 0;
161
162  font-size: 0.77777em;
163  font-style: italic;
164  line-height: 1.5em;
165}
166
167.direction-r .desc {
168  margin: 1em 0 0 0.75em;
169}
170
171/* ================ Timeline Media Queries ================ */
172
173@media (max-width: 660px) {
174
175.timeline {
176 	width: 100%;
177	padding: 4em 0 1em 0;
178}
179
180.timeline li {
181	padding: 2em 0;
182}
183
184.direction-l,
185.direction-r {
186	float: none;
187	width: 100%;
188
189	text-align: center;
190}
191
192.flag-wrapper {
193	text-align: center;
194}
195
196.flag {
197	background: rgb(255,255,255);
198	z-index: 15;
199}
200
201.direction-l .flag:before,
202.direction-r .flag:before {
203  position: absolute;
204  top: -30px;
205	left: 50%;
206	content: ' ';
207	display: block;
208	width: 12px;
209	height: 12px;
210	margin-left: -9px;
211	background: #fff;
212	border-radius: 10px;
213	border: 4px solid rgb(255,80,80);
214	z-index: 10;
215}
216
217.direction-l .flag:after,
218.direction-r .flag:after {
219	content: "";
220	position: absolute;
221	left: 50%;
222	top: -8px;
223	height: 0;
224	width: 0;
225	margin-left: -8px;
226	border: solid transparent;
227	border-bottom-color: rgb(255,255,255);
228	border-width: 8px;
229	pointer-events: none;
230}
231
232.time-wrapper {
233	display: block;
234	position: relative;
235	margin: 4px 0 0 0;
236	z-index: 14;
237}
238
239.direction-l .time-wrapper {
240	float: none;
241}
242
243.direction-r .time-wrapper {
244	float: none;
245}
246
247.desc {
248	position: relative;
249	margin: 1em 0 0 0;
250	padding: 1em;
251	background: rgb(245,245,245);
252	-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
253	-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
254	box-shadow: 0 0 1px rgba(0,0,0,0.20);
255
256  z-index: 15;
257}
258
259.direction-l .desc,
260.direction-r .desc {
261	position: relative;
262	margin: 1em 1em 0 1em;
263	padding: 1em;
264
265  z-index: 15;
266}
267
268}
269
270@media (min-width: 400px) and (max-width: 660px) {
271
272.direction-l .desc,
273.direction-r .desc {
274	margin: 1em 4em 0 4em;
275}
276
277}
278