Ubuntu logo in HTML/CSS (for the Fronteers CSS challenge)

index.html

<style>
#ubuntulogo {
    width: 108px;
    height: 108px;
    position:relative;
}
#ubuntulogo, #inner, .line { background-color: white; }
#outer { 
    background-color: #d40000; 
    background-image: -webkit-radial-gradient(-3px 45px, #fb8b00 44px, transparent 44px), -webkit-radial-gradient(70px 0, #f44800 45px, transparent 20px);    
}
#inner, #outer, .human, .line { position: absolute; }
#inner {
    top: 27px;
    left: 39px;
    width: 52px;
    height: 52px;
    border-radius: 26px;
    z-index:100;
}
#outer {
    top: 8px;
    left: 20px;
    width: 90px;
    height: 90px;
    border-radius: 45px;
}
.human {
    width: 20px;
    height: 20px;
    border-radius: 14px;
    border: 4px solid white;
}
#human1 { top: 39px; left: 0; background-color: #f44800; }
#human2 { top: -4px; right: 4px; background-color: #d40000; }
#human3 { bottom: -4px; right: 4px; background-color: #fb8b00; }
.line {
    width: 24px;
    height: 8px;
    z-index: 200;
}
#line1 { top: 47px; right: -4px; }
#line2 {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    top: 18px;
    left: 34px;
}
#line3 {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    bottom: 20px;
    left: 34px;
}
</style>
<div id="ubuntulogo">
    <div id="inner"></div>
    <div id="outer"></div>
    <div class="human" id="human1"></div>
    <div class="human" id="human2"></div>
    <div class="human" id="human3"></div>
    <div class="line" id="line1"></div>
    <div class="line" id="line2"></div>
    <div class="line" id="line3"></div>
</div>