Create Windows logo without using image and javascript only use CSS.

HTML

<div id="windows">
    <div class="canvas">
        <div class="icon">
            <div class="window1">
                <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>
                <div class="window-e2 shadow2"></div>
                <div class="window-e2"></div>
                <div class="window-e3"></div>
                <div class="window-e4 shadow3"></div>
                <div class="window-e4"></div>
            </div>
            <div class="window4">
                <div class="window-e1 shadow3"></div>
                <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>
                <div class="window-e2 shadow2"></div>
                <div class="window-e2"></div>
                <div class="window-e3"></div>

                <div class="window-e4"></div>
            </div>
            <div class="window3">
                <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>
                <div class="window-e2 shadow2"></div>
                <div class="window-e2"></div>
                <div class="window-e3"></div>
                <div class="window-e4 shadow3"></div>
                <div class="window-e4"></div>
            </div>
            <div class="window2">
                <div class="window-e1 shadow3"></div>
                <div class="window-e1"></div>
                <div class="window-e2 shadow1"></div>
                <div class="window-e2 shadow2"></div>
                <div class="window-e2"></div>
                <div class="window-e3"></div>
                <div class="window-e4"></div>
            </div>
            <div class="glow"></div>
            <div class="registered">®</div>
        </div>
    </div>
</div>

CSS : 

.canvas { 
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(250,250,250,0.2) inset, 0 2px 2px RGBA(0,0,0,0.5);
    height: 300px;
    overflow: hidden;
    position: relative;
    text-indent:-9999px;
    width: 530px;
    z-index: 10;
}
.icon, .icon * {
    position: absolute;
}#windows .canvas { 
    background: #fff;
}
#windows .icon { 
    left:193px; 
    position: absolute; 
    top:20px;
    -moz-transform: rotate(16deg);
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
}
.window-e1,
.window2,
.window3,
.window4 { 
    position:absolute;
}
.window-e1 { 
    border-radius:100px/67px;
    clip: rect(0px 77px 67px 0);
    height: 67px;
    left: 9px;
    position: absolute;
    top: 11px;
    width:102px;
}
.window-e2 {
    height: 85px;
    left: 0;
    position: absolute;
    top:27px;
    -moz-transform:skewy(-30deg);
    -webkit-transform:skewy(-30deg);
    transform:skewy(-30deg);
    width:25px;
}
.window-e3 { 
    height: 41px;
    left: 24px;
    position: absolute;
    top: 64px;
    width: 62px;
}
.window-e4 { 
    background: #fff;
    opacity:1;
    border-radius:100px/67px;
    clip:rect(0 77px 12px 16px);
    height: 67px;
    left: 9px;
    position: absolute;
    top: 96px;
    width:100px;
}
.window1 { 
    left:0;
    position: absolute;
    top:0;
}
.window1 .window-e1,
.window1 .window-e2,
.window1 .window-e3 { 
    background: #d53407;
}
.window2 {
    left: 183px;
    position:absolute;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 119px;
}
.window2 .window-e1,
.window2 .window-e2,
.window2 .window-e3 { 
    background: #7dae1c;
}
.window3 { 
    left: 0;
    position: absolute;
    top:95px;
}
.window3 .window-e1,
.window3 .window-e2,
.window3 .window-e3 { 
    background: #3576ac;
}
.window4 {
    left: 183px;
    position:absolute;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 214px;
}
.window4 .window-e1,
.window4 .window-e2,
.window4 .window-e3 { 
    background: #fac112;
}
#windows .glow {
    background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0.7),rgba(255,255,255,0));
    background: -webkit-gradient(radial,50% 50%,20,50% 50%,100,from(rgba(255,255,255,0.7)),to(rgba(255,255,255,0)));
    height: 214px;
    position: absolute;
    width:182px;
}
#windows .registered {
    left:190px;
    position: absolute;
    -moz-transform: rotate(-16deg);
    -webkit-transform: rotate(-16deg);
    transform: rotate(-16deg);
    top:160px;
}
#windows .shadow1,
#windows .shadow2,
#windows .shadow3 { 
    background: #ccc;
}
.window1 .window-e4,
.window3 .window-e4 { 
    top:101px;
}
.window1 .shadow1,
.window3 .shadow1 {
    left: 65px;
    clip: rect(0px 30px 94px 21px);
    -moz-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    top: 16px;
}
.window1 .shadow2,
.window3 .shadow2 { 
    clip:rect(50px 40px 90px 5px);
    top:30px;
    width:32px;
}
.window1 .shadow3,
.window3 .shadow3 {
    clip: rect(0 77px 12px 16px);
    top:96px;
}
.window2 .shadow1,
.window4 .shadow1 {
    clip:rect(0px 10px 90px 5px);
    left: -10px; top: 28px;
}
.window2 .shadow2,
.window4 .shadow2 { 
    clip:rect(70px 40px 90px 5px);
    left:-6px;
    top:-44px;
}
.window2 .shadow3,
.window4 .shadow3 {
    clip:rect(0 73px 22px 0px);
    left:9px;
    top:6px;
}