Template:SYSU-Software/CSS/Notebook

.begin {

 text-align: center;
 margin-top: 4em;
 margin-bottom: 1em;
 font-size: 150%;
 font-family: arial;

}

.final {

 text-align: center;
 margin-top: 1em;
 margin-bottom: 4em;
 font-size: 150%;
 font-family: arial;

}

.container {

   width: 75%;
   margin: 0 auto;
   font-family: arial;
   font-size:medium;

}

.container::after {

 content: ;
 display: table;
 clear: both;

}

1. timeline {

 position: relative;
 padding: 2em 0;
 margin-bottom: 1em;

}

1. timeline::before {

 /* this is the vertical line */
 content: ;
 position: absolute;
 top: 0;
 left: 50%;
 height: 100%;
 width: 4px;
 background: #d7e4ed;
 margin-left: -2px;

}

.timeline-block {

 position: relative;
 margin: 2em 0;

} .timeline-block:after {

 content: "";
 display: table;
 clear: both;

} .timeline-block:first-child {

 margin-top: 0;

} .timeline-block:last-child {

 margin-bottom: 0;

}

.timeline-node {

 position: absolute;
 background-color: #D7E4ED;
 top: 0;
 left: 0;
 width: 10px;
 height: 10px;
 border-radius: 50%;
 box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 left: 50%;
 top: 50px;
 margin-left: -5px;
 margin-top: -12px;
 -webkit-transform: translateZ(0);
 -webkit-backface-visibility: hidden;

}

.timeline-content, .timeline-content-right{

 width: 43%;
 background: #f5f7fc;
 padding: 1.5em;
 padding-top: 1.8em;
 box-shadow: 3px 3px 3px #D7E4ED;
 border-radius: 0.25em;

}

.timeline-content {

 float: left;

}

.timeline-content-right {

 float: right;

}

.timeline-content .date, .timeline-content-right .date {

 font-size: 150%;

}

.timeline-content .people, .timeline-content-right .people {

 margin-top: 25px;
 font-size: 90%;
 margin-bottom: 15px;
 color: #515151 !important;

}

.timeline-content .image, .timeline-content-right .image {

 margin-top: 20px;
 text-align: center;

}