Link to article: Manhattan Crisis Hub.
/* Table */
table.listpages-table,
table.timeline {
width: 100%;
word-break: break-word;
}
table.listpages-table th {
background-color: #666;
color: #fff;
}
table.listpages-table td {
vertical-align: top;
}
table.listpages-table td:not(:first-child) {
text-align: center;
}
table.listpages-table tr:nth-child(2n+1) td {
background-color: rgba(210, 210, 210, .5);
}
table.timeline {
border-spacing: 0;
}
table.timeline td {
vertical-align: top;
}
table.timeline td.label {
font-size: 1.5em;
font-weight: bold;
text-align: center;
}
table.timeline td.left {
border-right: solid 1px #999;
width: 50%;
text-align: right;
padding: 5px 6px 5px 0;
}
table.timeline td.right {
padding: 5px 0 5px 6px;
}
table.timeline div.crucial {
font-family: monospace;
font-size: 1.1em;
color: #999;
}
table.timeline div.title {
font-size: 1.25em;
}
table.timeline div.description {
display: inline-block;
text-align: left;
padding: 2px 0 8px;
}
table.timeline div.description p:first-child {
margin-top: 0;
}
/* Fragment */
.pointer {
display: none;
}
.fragmentWrapWrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-mask: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 4%, rgba(255, 255, 255, 1) 96%, rgba(255, 255, 255, 0) 100%);
mask: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 4%, rgba(255, 255, 255, 1) 96%, rgba(255, 255, 255, 0) 100%);
}
.fragmentWrapWrap .mask {
position: relative;
z-index: 1;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 4%;
}
.fragmentWrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 92%;
-webkit-transition: -webkit-transform .3s ease-in-out;
-moz-transition: -moz-transform .3s ease-in-out;
-ms-transition: -ms-transform .3s ease-in-out;
-o-transition: -o-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
}
.fragment {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
box-sizing: border-box;
width: 100%;
padding: 0 .5em;
}
.fragment .subtitle {
padding-right: 1em;
text-align: right;
color: #aaa;
}
#u-p-1:target ~ .fragmentWrapWrap .fragmentWrap {
-webkit-transform: translate(-100%);
-moz-transform: translate(-100%);
-ms-transform: translate(-100%);
-o-transform: translate(-100%);
transform: translate(-100%);
}
#u-p-2:target ~ .fragmentWrapWrap .fragmentWrap {
-webkit-transform: translate(-200%);
-moz-transform: translate(-200%);
-ms-transform: translate(-200%);
-o-transform: translate(-200%);
transform: translate(-200%);
}
#u-p-3:target ~ .fragmentWrapWrap .fragmentWrap {
-webkit-transform: translate(-300%);
-moz-transform: translate(-300%);
-ms-transform: translate(-300%);
-o-transform: translate(-300%);
transform: translate(-300%);
}
#u-p-4:target ~ .fragmentWrapWrap .fragmentWrap {
-webkit-transform: translate(-400%);
-moz-transform: translate(-400%);
-ms-transform: translate(-400%);
-o-transform: translate(-400%);
transform: translate(-400%);
}
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
text-align: center; margin: 15px 0px 25px;
display: inline-block; border-radius: 10px; border:dashed 1px #444444; background:#F5F5F5; float:top; width:95%; padding:10px
fragment
timeline
left
right
label
left
title
right
description
left
right
label
left
description
right
title
left
right
label
left
title
right
description
left
right
label
left
title
right
description
left
description
right
title
left
right
label
left
title
right
description
left
description
right
title
left
right
label
left
title
right
description
left
description
right
title
left
right
label
left
title
right
description
left
description
right
title
left
right
label
left
title
right
description
left
description
right
title
left
right
blockquote
blockquote
blockquote
blockquote
blockquote