Window Titlebars

by XTREME104

HTML

<div class="window mac" onmousedown="function () { this.top = window.event.clientY + 'px';}">
    <div class="chrome">
        <div class="nav">
            <button class="close"/>
            <button class="minimize"/>
            <button class="expand"/>
        </div>
        Mac
    </div>
</div>

<div class="window windows" onmousedown="function () { this.top = window.event.clientY + 'px';}">
    <div class="chrome">
        <div class="nav">
            <button class="minimize"/>
            <button class="maximize"/>
            <button class="close"/>
        </div>
        Windows
    </div>
    <p>Content</p>
</div>

CSS

div.window {
    position: absolute;
    width: 800px;
    height: 600px;
}

div.window > div.chrome {
    overflow: hidden;
    position: relative;
    font: 14px/26px 'lucinda grande', Helvetica-neue, Helvetica, Arial;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

div.window.mac > div.chrome {
    background: #cfcfcf;
    background: -webkit-linear-gradient(top, #cfcfcf 0%, #a8a8a8 100%);
    background: -moz-linear-gradient(top, #cfcfcf 0%, #a8a8a8 100%);
    border-radius: 6px 6px 0 0;
}

div.window.windows > div.chrome {
    background: rgba(0,0,230,0.1);
    border-radius: 7px 7px 0 0;
}

div.window.mac > div.chrome, div.window.mac > div.chrome * {
    color: #111;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

div.window.windows > div.chrome, div.window.windows > div.chrome * {
    text-shadow: 0 0 10px rgba(255,255,255,1);
}

div.window.mac > div.chrome > div.nav {
    position: absolute;
    top: 6px;
    left: 8px;
}

div.window.windows > div.chrome > div.nav {
    position: absolute;
    top: -3px;
    right: 6px;
}

div.window.mac > div.chrome > div.nav > button {
    position: relative;
    overflow: hidden;
    display: block;
    float: left;
    width: 14px;
    height: 14px;
    margin-right: 7px;
    font: bold 14px/14px 'Helvetica-neue', Helvetica, Arial;
    text-align: center;
    color: white;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.3), inset 0 1px 3px 0 rgba(0,0,0,0.8), 0 1px 0 0 rgba(255,255,255,0.4);
    border-radius: 7px;
    border: none;
}

div.window.windows > div.chrome > div.nav > button {
    position: relative;
    overflow: hidden;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    font: bold 14px/14px 'Helvetica-neue', Helvetica, Arial;
    text-align: center;
    color: white;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.4);
}

div.window.windows > div.chrome > div.nav >...