html,body{padding: 0;margin: 0;width: 100%;height: 100%}
.wapper{
  zoom: 1;
  position: relative;
  font-size: 13px;
height:100%;
}

.content, .svgBg, .period, .events, .ruler{
  transform-origin: left top;
}

.ruler{
  position: fixed;
  z-index: 4;
  left:0;
  font-size: 8px;
}
.svgBg{
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  /*background-image: url("./spring/images/spring.jpg");*/
  background-size: contain;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.svgBg .thickLine{
  opacity: 0.7;
  strokeWidth : 1.2,
}
.svgBg .thinLine{
  opacity: 0.5;
  strokeWidth : 1,
}
.period{
  position: fixed;
  top: 0;
  z-index: 2;
  overflow:visible;
}
.period .text{
  fill: #36c;
  text-shadow: 1px 1px #fff, -1px -1px #fff, -1px 1px #fff, 1px -1px #fff;
  font-family: "cursive";
  font-weight: bold;
}
.events{
  position: fixed;
  z-index: 2;
  pointer-events: none 
}
.events .text{
  fill: #fff;
  text-shadow: 1px 1px 1px #333, -1px -1px 1px #333, -1px 1px 1px #333, 1px -1px 1px #333;
  letter-spacing: 0.8em; 
  top:100px;
  pointer-events: auto ;
  writing-mode: vertical-rl;
}



.connection{
  position: absolute;
  z-index: 2;
  pointer-events: none 
}

.connection .text{
  pointer-events: auto ;
  writing-mode: vertical-rl;
  cursor: pointer;
}

.connection textPath{
  cursor: pointer;
}
.connection path{
  opacity: 0.6;
}
.connection.active path{
  stroke: #f55;
}

.content{
  position: absolute;
  top: 0;
  z-index: 3;
  pointer-events: none ;
}

.content .group
{
  position: relative;
  pointer-events: auto;
}
 .group .title
{
  position: absolute;
  writing-mode: vertical-rl;
  /*text-shadow: 1px 1px #eee;*/
  pointer-events: auto ;
  text-anchor : middle;
}
.content .item
{
 position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}
.item .descBox{
  text-shadow: 3px 3px 3px #ddd;
}
.item .dotText{
  text-shadow: 3px 3px 3px #eee;
}





.content.focus .item,.content.focus .group .title{
  opacity: 0.2;
}
.content.focus .show{
  opacity: 1;
}
.item .contGroup,.item .descBox
{
  display: none;
}
.show .contGroup,.show .descBox
{
  display: block;
}
.content.focus-item .item .contGroup,.content.focus-item .item .descBox{
  display: none;
}

.content.focus-item .item .currPoint {
  display: block;
}

.vertical .name,.vertical .descBox, .vertical .dotText{
  writing-mode: tb-rl
}
.vertical .title, .vertical .events.common .text{
  writing-mode: horizontal-tb
}