/* ========== Skills Bars Style Sheet ========== */


/* ===== Table of Content =====
        1) General Styling
        2) Edit Progress Bar Color
        3) Skills Percentage
===== END Table of Content =====*/

/* ------------------------------
1) General Styling =========-- */
.skimiler {
    float: left;
    margin: 10px auto 0 0;
    width: 330px;
}

.skiller {
    margin-top: 35px;
    margin-bottom: 35px;
    padding-top: 35px;
    font-size: 12px;
    line-height: 2em;
    position: relative;
    overflow: hidden;
}

.col {
    width: 100%;
}

.skiller h4{
    margin-bottom: 25px;
}


#skill {
    list-style: none outside none;
}
.skiller ul {
    padding-left: 0;
    margin-left: 0;
}

#skill li 
{ 
    margin-left: 0;
    padding-left: 0; 
} 


#skill li {
    float: left;
    background: #222;
    height: 25px;
    margin-bottom: 35px;
    width: 100%;
    padding: 0;
}

#skill li em {
    position: relative;
    top: -24px;
    left: 5px;
}

#skill li small {
    margin-left: 10px;
}

#skill span {
    color: #fff;
    padding-bottom: 12px;
}

/*-----------------------------
2) Theme Colors ==========-- */
/* To change the color of the skills bars, replace "#2c97ff" Hex Code with a different one -- */
body .expand-html5 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    right-margin: 0;
}

body .expand-css3 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-jquery {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-photoshop {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-dreamweaver {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left: 0;
}

/*---------------------------------
3) Skills Percentage =========-- */
/* If you want to change the speed of the progress, change the "2s" to any number */
/* If you want to change the percentage, remember to change them in ALL 3 SECTIONS! */

/* Section 1 ---------- */
.html5       { width:70%;  -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;         }
.jquery      { width:50%;  -moz-animation:jquery 2s ease-out;	   -webkit-animation:jquery 2s ease-out;	   }
.photoshop   { width:10%;  -moz-animation:photoshop 2s ease-out;   -webkit-animation:photoshop 2s ease-out;    }
.dreamweaver { width:100%; -moz-animation:dreamweaver 2s ease-out; -webkit-animation:dreamweaver 2s ease-out;  }

/* Section 2 ---------- */ 
@-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%;} }

/* Section 3 ---------- */ 
@-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%;} }


body .expand-html {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    right-margin: 0;
}

body .expand-css {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-jqueryy {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-java {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-SQL {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left: 0;
}
.html       { width:85%;  -moz-animation:html 2s ease-out;       -webkit-animation:html 2s ease-out;        }
.css        { width:80%;  -moz-animation:css 2s ease-out;        -webkit-animation:css 2s ease-out;         }
.jqueryy      { width:45%;  -moz-animation:jqueryy 2s ease-out;	   -webkit-animation:jqueryy 2s ease-out;	   }
.java   { width:65%;  -moz-animation:java 2s ease-out;   -webkit-animation:java 2s ease-out;    }
.SQL { width:80%; -moz-animation:SQL 2s ease-out; -webkit-animation:SQL 2s ease-out;  }

/* Section 2 ---------- */ 
@-moz-keyframes html       { 0%  { width:0px;} 100%{ width:85%;}   }
@-moz-keyframes css      { 0%  { width:0px;} 100%{ width::80%;}  }
@-moz-keyframes jqueryy      { 0%  { width:0px;} 100%{ width::45%;}  }
@-moz-keyframes java   { 0%  { width:0px;} 100%{ width::65%;}  }
@-moz-keyframes SQL { 0%  { width:0px;} 100%{ width::80%;} }

/* Section 3 ---------- */ 
@-webkit-keyframes html       { 0%  { width:0px;} 100%{ width:85%;}   }
@-webkit-keyframes css       { 0%  { width:0px;} 100%{ width:80%;}  }
@-webkit-keyframes jqueryy      { 0%  { width:0px;} 100%{ width:45%;}  }
@-webkit-keyframes java   { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes SQL { 0%  { width:0px;} 100%{ width:80%;} }

body .expand-html1 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    right-margin: 0;
}

body .expand-perl {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-prezi {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-java2 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-blender {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left: 0;
}
.html1       { width:40%;  -moz-animation:html1 2s ease-out;       -webkit-animation:html1 2s ease-out;        }
.prezi       { width:100%;  -moz-animation:prezi 2s ease-out;        -webkit-animation:prezi 2s ease-out;         }
.perl      { width:50%;  -moz-animation:perl 2s ease-out;	   -webkit-animation:perl 2s ease-out;	   }
.java2   { width:50%;  -moz-animation:java2 2s ease-out;   -webkit-animation:java2 2s ease-out;    }
.blender { width:40%; -moz-animation:blender 2s ease-out; -webkit-animation:blender 2s ease-out;  }

/* Section 2 ---------- */
@-moz-keyframes html1       { 0%  { width:0px;} 100%{ width:40%;}   }
@-moz-keyframes prezi      { 0%  { width:0px;} 100%{ width::100%;}  }
@-moz-keyframes perl      { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes java2   { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes blender { 0%  { width:0px;} 100%{ width::40%;} }

/* Section 3 ---------- */
@-webkit-keyframes html1       { 0%  { width:0px;} 100%{ width:40%;}   }
@-webkit-keyframes prezi       { 0%  { width:0px;} 100%{ width:100%;}  }
@-webkit-keyframes perl      { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes java2   { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes blender { 0%  { width:0px;} 100%{ width:40%;} }

body .expand-office {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    right-margin: 0;
}

body .expand-css2 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-flash {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-java4 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-photoshop {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left: 0;
}
.office       { width:90%;  -moz-animation:office 2s ease-out;       -webkit-animation:office 2s ease-out;        }
.css2       { width:50%;  -moz-animation:css2 2s ease-out;        -webkit-animation:css2 2s ease-out;         }
.flash      { width:60%;  -moz-animation:flash 2s ease-out;	   -webkit-animation:flash 2s ease-out;	   }
.java4   { width:50%;  -moz-animation:java4 2s ease-out;   -webkit-animation:java4 2s ease-out;    }
.photoshop { width:50%; -moz-animation:photoshop 2s ease-out; -webkit-animation:photoshop 2s ease-out;  }

/* Section 2 ---------- */
@-moz-keyframes office       { 0%  { width:0px;} 100%{ width:90%;}   }
@-moz-keyframes css2     { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes flash      { 0%  { width:0px;} 100%{ width::60%;}  }
@-moz-keyframes java4   { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes blender { 0%  { width:0px;} 100%{ width::50%;} }

/* Section 3 ---------- */
@-webkit-keyframes office       { 0%  { width:0px;} 100%{ width:90%;}   }
@-webkit-keyframes css2       { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes flash      { 0%  { width:0px;} 100%{ width:60%;}  }
@-webkit-keyframes java4   { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes photoshop { 0%  { width:0px;} 100%{ width:50%;} }

body .expand-c {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    right-margin: 0;
}

body .expand-bash {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-perll {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-java3 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-html2 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left: 0;
}
.c       { width:60%;  -moz-animation:c 2s ease-out;       -webkit-animation:c 2s ease-out;        }
.bash      { width:50%;  -moz-animation:bash 2s ease-out;        -webkit-animation:bash 2s ease-out;         }
.perll      { width:30%;  -moz-animation:perll 2s ease-out;	   -webkit-animation:perll 2s ease-out;	   }
.java3   { width:50%;  -moz-animation:java3 2s ease-out;   -webkit-animation:java3 2s ease-out;    }
.html2 { width:10%; -moz-animation:html2 2s ease-out; -webkit-animation:html2 2s ease-out;  }

/* Section 2 ---------- */
@-moz-keyframes c       { 0%  { width:0px;} 100%{ width:60%;}   }
@-moz-keyframes bash     { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes perll      { 0%  { width:0px;} 100%{ width::30%;}  }
@-moz-keyframes java3   { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes html2 { 0%  { width:0px;} 100%{ width::10%;} }

/* Section 3 ---------- */
@-webkit-keyframes c       { 0%  { width:0px;} 100%{ width:60%;}   }
@-webkit-keyframes bash       { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes perll      { 0%  { width:0px;} 100%{ width:30%;}  }
@-webkit-keyframes java3   { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes html2 { 0%  { width:0px;} 100%{ width:10%;} }

body .expand-cc {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    right-margin: 0;
}

body .expand-perl2 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-java5 {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-r {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left-margin: 0;
}

body .expand-php {
    background: #2c97ff;
    height: 25px;
    position: absolute;
    left: 0;
}
.cc       { width:75%;  -moz-animation:cc 2s ease-out;       -webkit-animation:cc 2s ease-out;        }
.php     { width:50%;  -moz-animation:php 2s ease-out;        -webkit-animation:php 2s ease-out;         }
.perl2      { width:60%;  -moz-animation:perl2 2s ease-out;	   -webkit-animation:perl2 2s ease-out;	   }
.java5   { width:80%;  -moz-animation:java5 2s ease-out;   -webkit-animation:java5 2s ease-out;    }
.r { width:55%; -moz-animation:r 2s ease-out; -webkit-animation:r 2s ease-out;  }

/* Section 2 ---------- */
@-moz-keyframes cc       { 0%  { width:0px;} 100%{ width:75%;}   }
@-moz-keyframes php     { 0%  { width:0px;} 100%{ width::50%;}  }
@-moz-keyframes perl2      { 0%  { width:0px;} 100%{ width::60%;}  }
@-moz-keyframes java5   { 0%  { width:0px;} 100%{ width::80%;}  }
@-moz-keyframes r { 0%  { width:0px;} 100%{ width::55%;} }

/* Section 3 ---------- */
@-webkit-keyframes cc       { 0%  { width:0px;} 100%{ width:75%;}   }
@-webkit-keyframes php      { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes perl2      { 0%  { width:0px;} 100%{ width:60%;}  }
@-webkit-keyframes java5   { 0%  { width:0px;} 100%{ width:80%;}  }
@-webkit-keyframes r { 0%  { width:0px;} 100%{ width:55%;} }