.center {
padding: 15px 0;
}
.material-icons, .icon-text {
vertical-align: bottom;
}
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: .5em .5em 0;
}
summary {
font-weight: normal;
margin: -.5em -.5em 0;
padding: .5em;
}
details[open] {
padding: .5em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: .5em;
}
/* [CONTAINER] */
/* More accurate sizing */
.avtl, div.ewrap, div.event {
box-sizing: border-box;
}
.avtl {
position: relative;
/* Width restriction if you want */
max-width: 840px;
margin: 0 auto;
}
/* This will draw the vertical line */
.avtl::before {
content: '';
width: 5px;
background-color: #DE421A;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
}
/* [EVENT WRAPPER] */
div.ewrap {
padding: 10px 40px;
position: relative;
width: 50%;
left: 0; /* default to left */
}
div.right {
left: 50%;
}
/* [EVENT ITSELF] */
div.event {
padding: 20px 30px;
background-color: #EFF8FB;
position: relative;
font-size: 0.9em;
border-radius: 6px;
}
/* [THE DATE & TEST] */
strong.date {
font-size: 0.8em;
font-weight: bold;
color: #333;
}
p.text {
margin: 0;
}
/* [ADD SPEECH BUBBLE TRIANGLE] */
div.ewrap::before {
content: '';
border: 10px solid transparent;
border-left-color: #EFF8FB;
border-right: 0;
position: absolute;
right: 30px;
top: 20%;
}
div.ewrap.right::before {
content: '';
border: 10px solid transparent;
border-right-color: #EFF8FB;
border-left: 0;
position: absolute;
right: auto;
left: 30px;
top: 20%;
}
/* [ADD CIRCLE ON VERTICAL LINE] */
div.ewrap::after {
content: '';
background: #fff;
border: 4px solid #DE421A;
width: 16px;
height: 16px;
border-radius: 20px;
position: absolute;
top: 20%;
right: -14px;
}
div.ewrap.right::after {
content: '';
background: #fff;
border: 4px solid #DE421A;
width: 16px;
height: 16px;
border-radius: 20px;
position: absolute;
top: 20%;
right: auto;
left: -10px;
}