@charset "utf-8";
/* CSS Document */
.container {
	width: 930px;
	position: relative;
	height: auto;
	margin-top: 5px;
}

.skill-content { width:378px; margin:10; position:relative; float:left; font-size:18px; line-height:1em; color: #090; padding-right: 0; padding-bottom: 30px; padding-left: 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; }
.col { width:390px; }

.skill-content-2 { width:378px; position:relative; float:right; font-size:18px; line-height:1em; color: #090; padding-top: 0px; padding-right: 0; padding-bottom: 30px; padding-left: 0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; right: 30px; margin: 10; }
.col { width:390px; }

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

#skill li {
  margin-bottom: 40px;
  background: #000;
  height: 10px;
  padding: 2px;
  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:-25px; }

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

.photoshop         { width:80%;  -moz-animation:photoshop 2s ease-out;       -webkit-animation:photoshop 2s ease-out;       }
.illustrator       { width:50%;  -moz-animation:illustrator 2s ease-out;     -webkit-animation:illustrator 2s ease-out;        }
.dreamweaver       { width:70%;  -moz-animation:dreamweaver 2s ease-out;     -webkit-animation:dreamweaver 2s ease-out;      }
.indesign          { width:40%;  -moz-animation:indesign 2s ease-out;        -webkit-animation:indesign 2s ease-out;   }
.flash             { width:25%; -moz-animation:flash 2s ease-out;           -webkit-animation:flash 2s ease-out; }
.html              { width:50%;  -moz-animation:html 2s ease-out;            -webkit-animation:html 2s ease-out;       }
.css               { width:65%;  -moz-animation:css 2s ease-out;             -webkit-animation:css 2s ease-out;        }
.jquery            { width:10%;  -moz-animation:jquery 2s ease-out;          -webkit-animation:jquery 2s ease-out;      }
.javascript        { width:10%;  -moz-animation:javascript 2s ease-out;      -webkit-animation:javascript 2s ease-out;   }
.php               { width:2%; -moz-animation:php 2s ease-out;             -webkit-animation:php 2s ease-out; }

@-moz-keyframes photoshop          { 0%  { width:0px;} 100%{ width:80%;}  }
@-moz-keyframes illustrator        { 0%  { width:0px;} 100%{ width:50%;}  }
@-moz-keyframes dreamweaver        { 0%  { width:0px;} 100%{ width:70%;}  }
@-moz-keyframes indesign           { 0%  { width:0px;} 100%{ width:40%;}  }
@-moz-keyframes flash              { 0%  { width:0px;} 100%{ width:25%;} }
@-moz-keyframes html               { 0%  { width:0px;} 100%{ width:50%;}  }
@-moz-keyframes css                { 0%  { width:0px;} 100%{ width:65%;}  }
@-moz-keyframes jquery             { 0%  { width:0px;} 100%{ width:10%;}  }
@-moz-keyframes javascript         { 0%  { width:0px;} 100%{ width:10%;}  }
@-moz-keyframes php                { 0%  { width:0px;} 100%{ width:2%;} }

@-webkit-keyframes photoshop       { 0%  { width:0px;} 100%{ width:80%;}  }
@-webkit-keyframes illustrator     { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes dreamweaver     { 0%  { width:0px;} 100%{ width:70%;}  }
@-webkit-keyframes indesign        { 0%  { width:0px;} 100%{ width:40%;}  }
@-webkit-keyframes flash           { 0%  { width:0px;} 100%{ width:25%;} }
@-webkit-keyframes html            { 0%  { width:0px;} 100%{ width:50%;}  }
@-webkit-keyframes css             { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes jquery          { 0%  { width:0px;} 100%{ width:10%;}  }
@-webkit-keyframes javascript      { 0%  { width:0px;} 100%{ width:10%;}  }
@-webkit-keyframes php             { 0%  { width:0px;} 100%{ width:2%;} }