.content {
    width: 278px;
    margin: 0;
    position: relative;
    float: left;
    font-size: 20px;
    line-height: 2em;
    padding: 30px 0 30px;
}

.col {
    width: 350px;
}

#skill {
    list-style: none;
    padding-top: 30px;
}

#skill li {
    margin-bottom: 70px;
    background: #000;
    height: 5px;
    border-radius: 3px;
    border-left: 1px solid #111;
    border-top: 1px solid #111;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
}

#skill li em {
    position: relative;
    top: -30px;
}

.expand {
    height: 3px;
    margin: 4px 0;
    background: #2187e7;
    position: absolute;
    box-shadow: 0px 0px 10px 1px rgba(0,198,255,0.4);
}

.html5 {
    width: 100%;
    -moz-animation: html5 2s ease-out;
    -webkit-animation: html5 2s ease-out;
}

.css3 {
    width: 90%;
    -moz-animation: css3 2s ease-out;
    -webkit-animation: css3 2s ease-out;
}

.javascript {
    width: 50%;
    -moz-animation: jquery 2s ease-out;
    -webkit-animation: jquery 2s ease-out;
}

.java {
    width: 50%;
    -moz-animation: photoshop 2s ease-out;
    -webkit-animation: photoshop 2s ease-out;
}

.ruby {
    width: 100%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

.rails {
    width: 90%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

.apex {
    width: 50%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}

.visualforce {
    width: 70%;
    -moz-animation: dreamweaver 2s ease-out;
    -webkit-animation: dreamweaver 2s ease-out;
}



@-moz-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-moz-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-moz-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-moz-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    };
}

@-moz-keyframes dreamweaver {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}

@-webkit-keyframes html5 {
    0% {
        width: 0px;
    }

    100% {
        width: 70%;
    };
}

@-webkit-keyframes css3 {
    0% {
        width: 0px;
    }

    100% {
        width: 90%;
    };
}

@-webkit-keyframes jquery {
    0% {
        width: 0px;
    }

    100% {
        width: 50%;
    };
}

@-webkit-keyframes photoshop {
    0% {
        width: 0px;
    }

    100% {
        width: 10%;
    };
}

@-webkit-keyframes dreamweaver {
    0% {
        width: 0px;
    }

    100% {
        width: 100%;
    };
}