.skillbar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:80%;
    height:35px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    -webkit-transition:0.4s linear;
    -moz-transition:0.4s linear;
    -ms-transition:0.4s linear;
    -o-transition:0.4s linear;
    transition:0.4s linear;
    -webkit-transition-property:width, background-color;
    -moz-transition-property:width, background-color;
    -ms-transition-property:width, background-color;
    -o-transition-property:width, background-color;
    transition-property:width, background-color;
}

.post h1
{
    text-align: left;
    margin-bottom: 0;
    font: 300 1.556em/1.3em "futura-pt", Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    color: #a2a84b;
}
section.skillbar {
    padding-left: 20%;
}

section.skillbar h2 {
    font-size: 35px;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 20px;
    font: 'Coiny', cursive;
    color: rgb(83, 82, 65);
}


.skillbar-title {
    position:absolute;
    top:0;
    left:0;
    width:110px;
    font-weight:bold;
    font-size:13px;
    color:#ffffff;    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:4px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:25px;
    line-height:25px;
    -webkit-border-top-left-radius:3px;
    -webkit-border-bottom-left-radius:3px;
    -moz-border-radius-topleft:3px;
    -moz-border-radius-bottomleft:3px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.skillbar-bar {
    height:25px;
    width:0px;
    background:#6adcfa;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}


.skill-bar-percent {
    position:absolute;
    right:-35px;
    top:0;
    font-size:15px;
    height:25px;
    line-height:25px;
    color:#a2a84b;
    color:rgba(0, 0, 0, 0.4);
    font-weight: bold;
}


.skills-diagram {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  max-width: 35em;
  margin: 2em auto 2em;
}
.skills-diagram > dd {
  /* Hide inner attributes */
  display: none;
}
.skills-diagram dt {
  display: inline-block;
  vertical-align: top;
  
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  
  -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
  
  /* set defaults to skill-2 */
  width: 2em;
  height: 2em;
  line-height: 2em;
}

.skills-diagram dt:hover {
  -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

/* Support vertical mode */
.skills-diagram-vertical dt {
  display: block;
  /* .25em is an equivalent to inline-block's horizontal whitespace margin */
  margin: .25em auto;
}

/* Provide 10 different sizes */
.skills-diagram .skill-2 {
    width: 5em;
    height: 5em;
    line-height: 5em;
    background-color: rgba(170, 102, 185, 0.37);
    border-color: rgb(170, 102, 185);
    color: rgb(136, 94, 156);
}
.skills-diagram .skill-3 {
    vertical-align: middle;
    width: 5em;
    height: 5em;
    line-height: 5em;
    background-color: rgba(216, 150, 9, 0.35);
    border-color: rgb(228, 136, 13);
    color: rgb(202, 114, 21);
}
.skills-diagram .skill-4 {
  width: 4em;
  height: 4em;
  line-height: 4em;
  
  background-color: rgba(234, 112, 97, .3);
  border-color: rgba(234, 112, 97, 1);
  color: rgba(234, 112, 97, 1);
}
.skills-diagram .skill-5 {
  vertical-align: bottom;

  width: 5em;
  height: 5em;
  line-height: 5em;
  background-color: rgba(109, 182, 173, .3);
  border-color: rgba(109, 182, 173, 1);
  color: rgba(109, 182, 173, 1);
}
.skills-diagram .skill-6 {
  vertical-align: top;
  
  width: 6em;
  height: 6em;
  line-height: 6em;
  
  background-color: rgba(195, 192, 100, .3);
  border-color: rgba(195, 192, 100, 1);
  color: rgba(195, 192, 100, 1);
}
.skills-diagram .skill-7 {
  width: 7em;
  height: 7em;
  line-height: 7em;
  
  background-color: rgba(214, 89, 102, .3);
  border-color: rgba(214, 89, 102, 1);
  color: rgba(214, 89, 102, 1);
}
.skills-diagram .skill-8 {
    vertical-align: bottom;

    width: 8em;
    height: 8em;
    line-height: 8em;
    background-color: rgba(46, 138, 75, .3);
    border-color: rgba(46, 138, 75, 1);
    color: rgba(46, 138, 75, 1);
}
.skills-diagram .skill-9 {
    width: 11em;
    height: 11em;
    line-height: 11em;
    background-color: rgba(106, 220, 250, 0.3);
    border-color: rgba(45, 190, 228, 0.54);
    color: #2692af;
    }
.skills-diagram .skill-10 {
  width: 14em;
  height: 14em;
  line-height: 14em;
  background-color: rgba(81, 112, 144, .3);
  border-color: rgba(81, 112, 144, 1);
  color: rgba(81, 112, 144, 1);
}