Template:USTC-Software/css/Timeline

.VivaTimeline dl {

   position: relative;
   top: 0;
   padding: 20px 0;
   margin: 0

}

.VivaTimeline dl:before {

   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   z-index: 100;
   width: 2px;
   margin-left: -1px;
   content: ;
   background-color: #ccd1d9

}

.VivaTimeline dl dt {

   position: relative;
   top: 30px;
   z-index: 200;
   width: 120px;
   padding: 3px 5px;
   margin: 0 auto 30px;
   font-weight: 400;
   color: #fff;
   text-align: center;
   background-color: #aab2bd;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px

}

.VivaTimeline dl dd {

   position: relative;
   z-index: 200

}

.VivaTimeline dl dd .circ {

   position: absolute;
   top: 40px;
   left: 50%;
   z-index: 200;
   width: 22px;
   height: 22px;
   margin-left: -11px;
   background-color: #4fc1e9;
   border: 4px solid #f5f7fa;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%

}

.VivaTimeline dl dd .time {

   position: absolute;
   top: 31px;
   left: 50%;
   display: inline-block;
   width: 100px;
   padding: 10px 20px;
   color: #4fc1e9

}

.VivaTimeline dl dd .events {

   position: relative;
   width: 47%;
   padding: 10px 0 0;
   margin-top: 31px;
   background-color: #CCC;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px

}

.VivaTimeline dl dd .events:before {

   position: absolute;
   top: 12px;
   width: 0;
   height: 0;
   content: ;
   border-style: solid;
   border-width: 6px

}

.VivaTimeline dl dd .events .events-object {

   margin: 0 auto;

}

.VivaTimeline dl dd .events .events-header {

   min-height: 30px;
   line-height: 20px;
   text-align: center;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;

}

.VivaTimeline dl dd .events .events-body {

   overflow: hidden;
   zoom: 1;
   background-color: #EEE;
   padding: 10px;    

} .VivaTimeline dl dd .events .events-body .row{

   display:none;  

}

.VivaTimeline dl dd .events .events-body .events-desc {

   text-indent: 2em;
   padding: 0 15px;

}

.VivaTimeline dl dd .events .events-footer {

   text-align:center;

} .VivaTimeline dl dd .events .events-footer ol {

   list-style: none; 
   margin: 0 auto; 
   padding: 0;

} .VivaTimeline dl dd .events .events-footer ol li {

   background: #32b487; 
   border-radius: 5px; 
   margin: 10px; 
   display: inline-block; 
   width: 10px; 
   height: 10px;
   cursor: pointer;

} .VivaTimeline dl dd .events .events-footer ol .active{

   transform: scale(2);

}

.VivaTimeline dl dd.pos-right .time {

   margin-left: -100px;
   text-align: right

}

.VivaTimeline dl dd.pos-right .events {

   float: right

}

.VivaTimeline dl dd.pos-right .events:before {

   left: -12px;
   border-color: transparent #CCC transparent transparent

}

.VivaTimeline dl dd.pos-left .time {

   margin-left: 0;
   text-align: left

}

.VivaTimeline dl dd.pos-left .events {

   float: left

}

.VivaTimeline dl dd.pos-left .events:before {

   right: -12px;
   border-color: transparent transparent transparent #CCC

}

.VivaTimeline .carousel-indicators{

   bottom: 0;

}

@media screen and (max-width: 767px) {

   .VivaTimeline dl:before {
       left: 90px
   }
   .VivaTimeline dl dt {
       margin: 0 30px 30px
   }
   .VivaTimeline dl dd .circ {
       left: 90px
   }
   .VivaTimeline dl dd .time {
       left: 20px
   }
   .VivaTimeline dl dd.pos-left .time {
       padding: 10px 0;
       margin-left: 0;
       text-align: left
   }
   .VivaTimeline dl dd.pos-left .events {
       float: right;
       width: 73%;
       margin-right: 4%;
   }
   .VivaTimeline dl dd.pos-left .events:before {
       left: -12px;
       border-color: transparent #CCC transparent transparent
   }
   .VivaTimeline dl dd.pos-right .time {
       padding: 10px 0;
       margin-left: 0;
       text-align: left
   }
   .VivaTimeline dl dd.pos-right .events {
       float: right;
       width: 73%;
       margin-right: 4%;
   }
   /*
   .VivaTimeline dl dd .events .events-body {
       display: none;
   }
   .VivaTimeline dl dd .events .events-footer {
       display: none;
   }
   */

}

@media screen and (max-width: 500px) {

   .VivaTimeline dl dd.pos-left .events {
       float: right;
       width: 63%;
       margin-right: 4%;
   }
   .VivaTimeline dl dd.pos-right .events {
       float: right;
       width: 63%;
       margin-right: 4%;
   }

}