תבנית:תרשים/styles.css

table.DiagramTable {
	border-collapse: collapse; 
	table-layout: auto;
	height: 100%;
}
.DiagramTable td {
    position: relative;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    height: 100%;
}
.DiagramTable tr {
}

div.Diagram1 {
    position: absolute;
    width: 100%; 
    height:100%;
    box-sizing: border-box;
    z-index:3;
    top:0;
}

div.Diagram2 {
    position: absolute;
    padding: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.Diagram3 {
    position: absolute;
    top: 0;
    right: 0;
    height: 1.8em;
}
div.interval2 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
    z-index:0;
    border-left:  2px solid black;
}
div.interval4 {
	position: absolute;
	bottom: 0;
	left: 0;
	height:50%;
    z-index:0;
    border-top:  2px solid black;
}

div.interval6 {
	position: absolute;
	bottom: 0;
	right: 0;
	height:50%; 
    z-index:0;
    border-top:  2px solid black;
}

div.interval8 {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%; 
    z-index:0;
    border-left:  2px solid black;
}

div.interval28 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50%;
	height:100%;
    z-index:0;
    border-left:  2px solid black;
}

div.empty28 {
	position: absolute;
	bottom: 0;
	right: 0;
	width: calc(50% + 2px);
	height: 100%;
	border-left: solid white; 
	z-index: 3;
}
div.empty46 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height:calc(50% + 2px);
	border-top: solid white; 
	z-index: 3;
}

div.empty1 {
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 0;
	height: calc(50% + 2px);
	right: calc(50% + 2px);
	border-right: solid white;
	border-top: solid white;
}
div.empty3 {
	position: absolute;
	z-index: 3;
	bottom: 0;
	right: 0;
	height: calc(50% + 2px);
	width: calc(50% + 2px);
	border-left: solid white;
	border-top: solid white;
}
div.empty7 {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
	bottom: calc(50% + 2px);
	right: calc(50% + 2px);
	border-right: solid white;
	border-bottom: solid white;
}
div.empty9 {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	bottom: calc(50% + 2px);
	width: calc(50% + 2px);
	border-left: solid white;
	border-bottom: solid white;
}
div.interval46 {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height:50%;
    z-index:0;
    border-top:  2px solid black;
}

.DiagramLegend td {
	text-align:right;
	padding: 2px;
	vertical-align: text-top;
}
div.background {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;	
}

div.corner1{
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          z-index:0;
          right: 50%;
          height:50%;
          border-radius: 0 8px  0 0;
}
div.corner3{
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          z-index:0;
          width: 50%; 
          height:50%; 
          border-radius: 8px  0 0 0 ;
}
div.corner7{
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index:0;
          bottom: 50%; 
          right: 50%; 
          border-radius: 0  0  8px   0;
}
div.corner9{
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          z-index:0;
          width:  50%; 
          bottom:  50%; 
          border-radius: 0  0   0 8px;
}