playing with snakes

by sanford

HTML

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

</div>
</div>
<!--<div class="snakeout snake2">
    <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: #222;
}
.snakeout * {
   -webkit-transition-property: border-color,outline;
     -webkit-transition-duration: 5000ms;   
}
.snake2 {
    position: relative;
    left: -90px;
}
.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 {
   ZZoutline: red dotted 1px;
}
.wraplr,.curvelr {
        width: 48px;
    height: 140px;
}
.wrapul,.curveul {
        width: 48px;
     height: 140px;
 }
.wraplr,.wrapul {
    background-color: white;
    border-color: white;  
    border-style:solid;

    }
.wraplr {
    float: right;
    margin-bottom: -2px;
    border-width: 0px 0px 2px 0;
    margin-top: 18px;
    z-index: 30;
    position: relative;    
    /* outline: darkgreen solid 1px; */
}
.wrapul {
    border-width:2px 0 0 0;
    z-index: 20;
     position: relative;    
}


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

}
.snakectrwrapper {
    height: 308px; /* content area + curve area + left curve margin */
    width: 200px;
    border-width: 2px 0 2px 0;
    border-style: dotted;
    border-color: #222;
    -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: #222;
    padding: 0px;
}

.leftcts {
    border-width: 2px 0 2px 2px;
    -moz-border-radius: 24px 0 0 24px;    
    -webkit-border-radius: 24px 0 0 24px;   ...