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