Toolbar CSS tests

by nilloc

HTML

<div id="save_controls" class="controls"></div>
<div id="play_controls" class="controls"></div>
<div id="user_controls" class="controls"></div>

CSS

body{
    background: #3D668F url(/img/top-bg.png) repeat-x;
}
.controls{
    box-shadow:0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,0.5),  0 -1px 0 rgba(0,0,0,0.45);
    float:left;
}

#save_controls{
    box-shadow:0 1px 3px rgba(0,0,0,0.4) inset, 0 1px 0 rgba(255,255,255,0.5),  0 -1px 0 rgba(0,0,0,0.45);
    border-radius:6px;
    height:32px;
    margin:5px 30px;
    width:100px;
    background:rgb(255,255,255);
}

#play_controls{
    border-radius:20px;
    margin:6px 10px;
    height:30px;
    width:68px;
}

#user_controls{
    border-radius:6px;
    height:32px;
    margin:5px 30px;
    width:100px;
}