Aplicando estándares (Parte 2)

El ejemplo que quiero mostrar, intenta dejar el codigo HTML, de forma simple y fácil de entender, y trata de pasar toda la complejidad a la hoja de estilos en cascada.
Elegi para este ejemplo, la representacion HTML de una ventana, como puede ser una de windows. La idea es mostrar como es el codigo y lo que se aplico para lograr el resultado final.
Partiendo de un html básico, lo que traté, fue separar el contenido, en partes lógicas, por ejemplo habrá una barra, esta tendrá dos bloques de botones, tendra un texto(título), etc.

Paso 1
El codigo sería:
<div id="pad">
<div id="winbar">
<div id="toolbar">
<a id="minimize" href="#">Minimizar</a>
<a id="maximize" href="#">Maximizar</a>
<a id="close" href="#">Cerrar</a>
</div>
<div id="buttonbar">
<a id="close" href="#">Cerrar</a>
<a id="maximize" href="#">Maximizar</a>
<a id="minimize" href="#">Minimizar</a>
</div>
Titulo de la ventana
</div>
<div id="content">
Este es el texto que se mostrara en la pagina, y de deberia mantener
el tamaño que corresponda, asdklasdjasd
asASDKAdsjasdlka kalsdkasjd, alklskdal ower werworkrworwoerwer,
asdas, asd sadasd,asd asdas sadds dda dasd
</div>
</div>

y se vería algo asi...









Paso 2
Ahora llegó la parte mas linda, aplique estilo al #pad, #winbar, #toolbar, y #buttonbar , dandole apariencia de barra de windows.


div#pad {
border: thin solid Blue;
margin: 5px;
font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
min-width: 300px;
overflow: hidden;
}

div#winbar { background-color: rgb(65, 105, 225);
width: 100%;
min-height: 20px;
min-width: 300px;
text-align: center;
color: White;
font-size: 10pt;
font-weight: bold;
overflow: hidden;
}

div#winbar div#toolbar { border-style: none;
position: relative;
background-color: transparent;
float: left;
width: 70px;
display: block;
}

div#winbar div#buttonbar { border-style: none;
position: relative;
background-color: transparent;
width: 70px;
float: right;
display: block;
}














Paso 3
Despues apliqué, a cada link el estilo con la imagen y las dimensiones de 14x14, desplazando el texto del link, hacia un lugar no visible.


Paso 4
Finalmente aplique el estilo con scroll, para el contenido de la "ventana", permitiendo hacer scroll. En la figura podemos ver el detalle del los divs remarcados con color, para que se note el trabajo hecho





Modelo Terminado