playing with snakes, multiple

WORKS w/2!

by sanford

HTML

<div class="snakeout snake1">
    <div id="l1" class="snakewrapper snakeleftwrapper">
    <div class="leftcurvewrap">
    <div class="leftcurve">
        </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="rightcurvewrap">
    <div class="rightcurve">
        </div>
    </div>

</div>
</div>
<div class="snakeout snake2">
    <div id="l1" class="snakewrapper snakeleftwrapper">
    <div class="leftcurvewrap">
    <div class="leftcurve">
        </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="rightcurvewrap">
    <div class="rightcurve">
        </div>
    </div>

</div>
</div>

CSS

.leftcurve,.rightcurve{
    border-style: dotted;
 }
.snakeout * {
   -webkit-transition-property: border-color,outline;
   -moz-transition-property: border-color,outline;
   transition-property: border-color,outline;
    -webkit-transition-duration: 900ms;   
    -moz-transition-duration: 900ms;   
    transition-duration: 900ms;   
    border-color: #222;
}
.snakeout + .snakeout {
    position: relative;
    left: -90px;
}
.snakeout:hover *:not(.rightcurvewrap):not(.leftcurvewrap) {
    border-color: #ffcc00;
}
.leftcurve{
    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;
    margin-top: -138px;
}
.rightcurve{
    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;
    margin-top: -2px;
}

.leftcurvewrap, .leftcurve
,.rightcurvewrap, .rightcurve{
   ZZoutline: red dotted 1px;
}
.leftcurvewrap,.leftcurve{
        width: 24px;
}
.rightcurvewrap,.rightcurve{
        width: 24px;
 }
.leftcurve,.rightcurve {
    height: 140px;
}
.leftcurvewrap {
    height: 2px;
}
.rightcurvewrap {
    height: 2px;
}

.leftcurvewrap,.rightcurvewrap{
    ZZbackground-color: white;
    border-color: white;  
    border-style:solid;
}
.leftcurve,.rightcurve{
    background-color:  transparent;
}
/* zindexing section */
.leftcurvewrap,.rightcurvewrap
,.leftcurve,.rightcurve
,.leftcts,.rightcts
,.snakectrwrapper
{
    position: relative;   
  
} 
.leftcurvewrap{z-index:75;ZZoutline: blue solid 1px; }
.leftcurve{z-index:65;ZZoutline: navy solid 1px; }
.leftcts {z-index:55;ZZoutline: blue solid 1px; }
.snakectrwrapper {z-index:55;ZZoutline: darkred solid 1px;}
.rightcurvewrap{z-index:55;ZZoutline: darkred solid 1px; }
.rightcurve{z-index:45;ZZoutline: darkred solid 1px; }
.rightcts {z-index:35;ZZoutline: red solid 1px; }
/* /zindexing */

.leftcurvewrap{
    float: right;
    margin-bottom: -2px;
    border-width: 0px 0px...