span.glav, 
span.podlej, 
span.obst, 
span.skaz, 
span.opred, 
span.dopolnenie, 
span.prid, 
span.oborot {
text-indent: 0em;
}


.podlej, .skaz, .dopolnenie, .obst {
  position: relative;
  display: inline-block;

}

/* Подлежащее */
.podlej:before{
  position: relative;
  display: inline-block;
 content: " ";
  display: block;
  position: absolute;
  border: solid black;
  
  border-width: 0em;
  width: 100%;
  height: 0.4em;
  top: 0.9em;
  border-width: 0 0 0.1em 0;

}

/* Сказуемое */
.skaz:before{
  position: relative;
  display: inline-block;
 content: " ";
  display: block;
  position: absolute;
  border-bottom: 0.3em double black;
  width: 100%;
  height: 0.4em;
  top: 0.9em;
}


/* Дополнение */
.dopolnenie:before{
  position: relative;
  display: inline-block;
 content: " ";
  display: block;
  position: absolute;
  border-bottom: 0.15em dashed black;
  width: 100%;
  height: 0.4em;
  top: 1em;
}

/* Обстоятельство */
.obst:after{
background: url(img/dots.png);
background-size: 1.1em 1.7em; 
  background-position: left bottom; 
  background-repeat: repeat-x;
	  height:1.1em;
	  top:0.7em;
  width:100%;
 content: "";
  display: block;
  position: absolute;
}

/* Главное предложение */
.glav {
  position: relative;
  display: inline-block;
}
.glav:before{
 content: " ";
  display: block;
  position: absolute;
  border: solid black;
  border-width:  0.1em 0 0.1em 0.1em;
  left: -0.4em;
  width: 0.4em;
  height: 90%;
  top: 0em;
 }
.glav:after{
content: " ";
display: block;
position: absolute;
border: solid black;
border-width: 0.1em 0.1em 0.1em 0em;
right: -0.4em;
width: 0.4em;
height: 90%;
top: 0em;
}

/* Придаточное */
.prid {
  position: relative;
  display: inline-block;
  padding-left:0.7em;

}
.prid:before{
 content: " ";
  display: block;
  position: absolute;
  border-left:0.1em solid black;
  border-radius: 100%;
  left: 0.4em;
  top: 0em;
  width: 0.6em;
  height: 90%;
}

.prid:after{
 content: " ";
  display: block;
  position: absolute;
  border-right:0.1em solid black;
  border-radius: 100%;
  right: -0.3em;
  width: 0.6em;
  top: 0em;
  height: 90%;
 }

/* Определение */
.opred{
position: relative;
display: inline-block;
 }

.opred:after{
display: block;
position: absolute;
content: " ";
background: url(img/wave.png);
background-size: 0.7em 0.3em; 
background-position: left bottom; 
background-repeat: repeat-x;
height:0.5em;
top:1.1em;
width:100%;
}


/* Причастный оборот */
.oborot {
  position: relative;
  display: inline-block;
  margin-left:0.6em;
}

.oborot:before {
 content: " ";
  display: block;
  position: absolute;
  border-left:0.1em solid black;
  left: -0.3em;
  width: 0.6em;
  top: 0.1em;
  height: 85%;
  }

.oborot:after {
 content: " ";
  display: block;
  position: absolute;
  border-right:0.1em solid black;
  right: -0.3em;
  width: 0.6em;
  top: 0.1em;
  height: 85%;
    }