Widget:TimelineTest

<style> .sidebar {

       max-width:100%;

margin:0px auto;

   }

table tr th.infobox-label {

   text-align: left;
   text-transform: uppercase;
   font-weight: bold;
   font-size: .9em;
   line-height: 1.25em;
   color: #deb975;
   background-color: #474440;
   vertical-align: middle;
   width: 50%;

}

.filters {

           display: flex;
           flex-wrap: wrap;

}

   h3.sort-title {
       font-size: 1.15rem !important;
       border-bottom: 2px solid #474440 !important;
       margin-top: 0px !important;

color:#ccc5b9;

   }

   .grid {
       max-width: 100%;
       display: flex;
       flex-direction: row;
       align-content: space-between;
       flex-wrap: wrap;
       margin: 0px auto;
   }
   
   .grid-item {
       width:30%;

margin:10px;

   }

/* On screens that are 992px wide or less, go from four columns to two columns */ @media screen and (max-width: 992px) {

 .button-group {
   flex: 1;
 }

.grid-item {

       min-width:350px;
       max-width:90%;

}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) {

.button-group {
   flex: 100%;
 }

.grid-item {

       min-width:350px;
       max-width:90%;
   }

} </style>

<link rel="stylesheet" href="http://anaxasdiaries.com/jplist/jplist.styles.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

<script src="http://anaxasdiaries.com/jplist/jplist.min.js"></script> <script> jplist.init(); </script>