Dance Capsules CSS

by sanford

HTML

<link rel="stylesheet" href="http://alpha.dancecapsules.merce.broadleafclients.com/stylesheets/global.css">
<!--  / HEADER CONTAINER \ --> 

    <div id="headerCntr"> 

      

      <!--  / LINK BOX \ --> 

      <div class="linkBox"> 

        <ul> 

          <li class="selected"><a href="index.cfm">Capsules Home</a></li> 

          <li><a href="about.cfm">About The Project</a></li> 

          <li class="last"><a href="##" 

    class="login"

    title="Log in">

Log In

              </a><form class="login" name="login" enctype="multipart/mime" method="post"><div class="inputwrapper username" data-wrapped-value="default"><input type="text"></div><div class="inputwrapper password" data-wrapped-value="default"><input type="password"></div><div class="inputwrapper image"><input type="image" title="Log In" src="http://127.0.0.1/otherpeople/trans.gif"></div></form>

</li> 

        </ul> 

      </div> 

      <!--  \ LINK BOX / --> 

      

      <h1><a href="index.cfm">Merce Cunningham</a></h1> 

    </div> 

    <!--  \ HEADER CONTAINER / -->

CSS

INPUT[type=image] {
    width: 70px !important;
    height: 100px !important;
    padding: 0 !important;
    border: 0 !important;
    -webkit-transition: none !important;
    float:right;
}
INPUT[type=image] {
    background-image: url(http://127.0.0.1/otherpeople/dwsites/alpha.dancecapsules/images/spritely/stalks70.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}
INPUT[type=image]:hover {
    background-position: -70px 0;
}

.linkBox li.last {
    overflow: visible;
    position: relative;
    z-index: 1000;
}
.linkBox li.last FORM {
    display:block;
    position:absolute;
    opacity: 0;    
    ZZtop:0;
}
.linkBox li.last:hover FORM {    
    opacity: 1;
}

.linkBox li.last input[type=password] {
    border-top: none;
}

.linkBox li.last input {
    border-left: 1px solid #969696;
    border-right: 1px solid #969696;
    border-top: 1px solid #969696;
    border-bottom: 1px solid #969696;
    padding: 4px;
    ZZwidth: 132px;
    ZZleft: -21px;
    width: 113px;
    left: -2px;
    height: 26px;
    position:relative;
    ZZz-index: -1; /* must be IE ONLY! or it sends input behind */
    color: #969696;
}
.linkBox li.last * {
     -webkit-transition: all 512ms ease-out;
}
.linkBox li.last .inputwrapper[data-wrapped-value=default]:hover input  {
    ZZbackground-color: #ffe1de; /* old */
    background-color: #ffe6c9; /* new */
}
.linkBox li.last .inputwrapper[data-wrapped-value=default] input {
    background-color: #696969;
}

.linkBox li.last .inputwrapper[data-wrapped-value=default]:after {
    font-style: italic;
    ZZwidth: 132px;
    ZZleft:-20px;
    display:block;
    height: 26px;
    line-height: 26px;
    padding: 2px 2px 2px 6px;
    ZZbackground-color: #ff4c11;
    position:relative;
    margin-top: -30px;
    opacity: 1;
    color: white;
}
.linkBox li.last .inputwrapper.username[data-wrapped-value=default]:after { content: "username"; }
.linkBox li.last .inputwrapper.password[data-wrapped-value=default]:after {...

JavaScript

// notify input wrappers that inputs have changed
$$('INPUT').addEvents({
    keyup : function(e) { 
                this.getParent('.inputwrapper').set( 'data-wrapped-value', this.get('value') ); 
            }

});