types.css

.test {
  padding: 20px;
  background: blue;
  width: 200px;
}

.panel {
  min-width: 100px;
  -webkit-border-radius: 5px;

  -webkit-box-shadow: 0px 1px 3px #DDDDDD;
  border: 1px solid #D9D9D9;
  background: #fff;
}

.panel > span {
  display: block;
  font-size: 11px;
  padding: 4px 10px 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  
  background: -webkit-gradient(linear, left top, left bottom, from(#A4ABBA), to(#71829E));
  color: #fff;
  text-shadow: none;  
}

.panel.orange > span {
  background: -webkit-gradient(linear, left top, left bottom, from(#E29D3B), to(#DA7F3B));
}

.panel.black > span {
  background: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#363636));
  color: #fff;
  text-shadow: 0 1px 1px #000;
}

.panel > div {
  padding: 7px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

.panel >:only-child {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}

.app {
  width: 800px;
  height: 400px;
  -webkit-box-shadow: 0px 0px 50px #2C2D2E;
  
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}

.app .title {
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#AEB0B3), to(#79797A));
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #000;
}

.sidebar {
  min-width: 10px;
  min-height: 10px;
  width: 100px;
  height: 100px;
  background: #D0D7E3;
  border-left: 1px solid #ADADAD;
  border-right: 1px solid #ADADAD;
}

.footer {
  background: -webkit-gradient(linear, left top, left bottom, from(#AEB0B3), to(#79797A));
  width: 300px;
  height: 30px;
  line-height: 30px;
}