* { margin: 0; padding: 0; }
body { font: 12px 'Trebuchet MS', Helvetica, Arial, sans-serif; text-align: center; }

#test { width: 1000px; margin: 20px auto; text-align: left; }
div.test { padding: 5px 0 15px 0; }

h2.header { background: #eee; font-size: 12px; height: 22px; line-height: 22px; overflow: hidden; }
h2.header span { float: left; height: 22px; line-height: 22px; padding: 0 10px; white-space: nowrap; }
h2.header span.blue { background: #6e8a9f; color: #fff; }
h2.header span.red { background: #c62142; color: #fff; }
h2.header span.beige { background: #cdcab8; color: #fff; }
h2.header span.orange { background: #f57e20; color: #fff; }


h2.title { background: #eee; font-size: 12px; height: 22px; line-height: 22px; overflow: hidden; }
h2.title span { float: left; height: 22px; line-height: 22px; padding: 0 10px; white-space: nowrap; }
h2.title span.blue { background: #6e8a9f; color: #fff; }
h2.title span.red { background: #c62142; color: #fff; }
h2.title span.beige { background: #cdcab8; color: #fff; }
h2.title span.orange { background: #f57e20; color: #fff; }

h2 { background: #eee; font-size: 12px; height: 22px; line-height: 22px; overflow: hidden; }
h2 span { float: left; height: 22px; line-height: 22px; padding: 0; white-space: nowrap; }
h2 span.blue { background: #6e8a9f; color: #fff; padding:0 10px;}
h2 span.red { background: #c62142; color: #fff; padding:0 10px;  }
h2 span.beige { background: #cdcab8; color: #fff; padding:0 10px;}
h2 span.orange { background: #f57e20; color: #fff; padding:0 10px;}