playing with curvy pipe

by sanford

HTML

<div class="snakeout">
    <div id="l1" class="snakewrapper snakeleftwrapper">
    <div class="wraplr">
    <div class="curvelr">
        </div>
    </div>
    <div class="leftcts">
    </div>
</div>
<div id="c1" class="snakewrapper snakectrwrapper">
</div>
<div id="r1" class="snakewrapper snakerightwrapper">
    <div class="rightcts">
     </div>    
    <div class="wrapul">
    <div class="curveul">
        </div>
    </div>

</div>
</div>

CSS

.curvelr,.curveul {
    border-style: dotted;
    border-color: #ccc;
}
.snakeout * {
   -webkit-transition-property: border-color,outline;
 -webkit-transition-duration: 5000ms;   
}
.snakeout:hover *:not(.wrapul):not(.wraplr) {
    border-color: #ffcc00;
}
.curvelr {
    border-width: 0 2px 2px 0;
    -moz-border-radius: 0 0 24px 0;
    -webkit-border-radius: 0 0 24px 0;
    border-radius: 0 0 24px 0;
}
.curveul {
    border-width: 2px 0 0 2px;
    -moz-border-radius: 24px 0 0 0;
    -webkit-border-radius: 24px 0 0 0;
    border-radius: 24px 0 0 0;
}

.wraplr, .curvelr
,.wrapul, .curveul {
    width: 48px;
    height: 96px;
    ZZoutline: red dotted 1px;
}
.wraplr,.wrapul {
    background-color: white;
    border-color: white;  
    border-style:solid;
    z-index: 30;
    position: relative;
    }
.wraplr {
    float: right;
    margin-bottom: -2px;
    border-width: 0px 0px 2px 0;
    margin-top: 18px;
    /* outline: darkgreen solid 1px; */
}
.wrapul {
    border-width:2px 0 0 0;
}


.snakewrapper {
    float:left;        
}
.snakeleftwrapper {
    width: 100px;
    height: 250px;
    ZZoutline: darkblue dotted 1px;

}
.snakectrwrapper {
    height: 264px;
    width: 200px;
    border-width: 2px 0 2px 0;
    border-style: dotted;
    border-color: #ccc;
    -moz-border-radius: 24px 0 24px 0;
    -webkit-border-radius: 24px 0 24px 0;
    border-radius: 24px 0 24px 0;
    ZZoutline: darkblue dotted 2px;

    margin-right: -2px;
    background-color: white;

}
snakerightwrapper {
}
.leftcts,.rightcts {
    width: 100px;
    height: 150px;
    border-style: dotted;
    border-color: #ccc;
}
.leftcts {
    border-width: 2px 0 2px 2px;
    -moz-border-radius: 24px 0 0 24px;    
    -webkit-border-radius: 24px 0 0 24px;    
    border-radius: 24px 0 0 24px;    
    clear: right;
}
.rightcts {
    border-width: 2px 2px 2px 0;
    -moz-border-radius: 0px 24px 24px 0;    
    -webkit-border-radius: 0px 24px 24px 0;    
    border-radius: 0px 24px 24px 0;    
   ...