html{
    background : #e5e5e5;
}

html,article,section{
    font-size : 12px;
    font-family:"Arial";
    font-weight:bold;
}
article{
    width : 800px;
    margin:0 auto 24px auto;
    background : #fff;
    padding-bottom : 48px;
}
.about_me {
    position : relative;
}

.about_me h1{
   background-color:#42d5ff;
   height : 162px;
   color : #fff;
   font-weight : bold;
   overflow : hidden;
   
}

.about_me h1 .text{
    padding: 0 0 0 300px;
     height : 13.5rem;
    display:block;
    line-height: 220px;
}

.about_me h1 .text .small{
    font-size : 65px;
}

.about_me h1 .big{
    font-size: 156px;
}

.head,.head .pic{
    border-radius : 8px;
    border: solid 1px #e5e5e5;
}

.head{
    position:absolute;
    top:30px;
    left : 29px; 
    padding : 12px;
    background-color:#fff;
}

.head .pic{
    height : 185px;
    width : 185px;
    position : relative;    /*for fix pie.htc bug*/
    background:url(../images/head.png) no-repeat;
}

.about_me .info{
    margin-left : 372px;
}
.about_me .info li{
    margin-top : 12px;
}
.about_me .info img, .about_me .info  span{
    vertical-align: middle;
}
.about_me .info a{
    color : #42d5ff;
    text-decoration : none;
}
.about_me .info li span{
    display : inline-block;
    font-size : 18px;
    padding-left : 15px;
}
.about_me .info a:hover{
    color : #00C6FF;
}

article  section{
    padding : 30px 36px 30px 30px;
    color : #42d5ff;
}
article  section .title{
    background:url(../images/hex_blue.png) no-repeat;
    height : 48px; 
    line-height: 48px;
    font-size : 29px;
    padding-left : 29px;
    position : relative;
}

article  section .title h2{
    font-weight:bold;
}

.title_bar{
    height : 2px;
    width : 538px;
    border : solid 1px #7de2ff;
    position : absolute;
    left: 195px;
    top : 11px;
    border-left: 0;
}
article  section:nth-child(odd){
    background : #ff8e6d;
    color : #fff;
}
article  section:nth-child(odd) .title  {
    background:url(../images/hex_white.png) no-repeat;
}
article  section.odd .title_bar {
    border : solid 1px #fff;
    border-left: 0;
}

article  section .title .big{
    font-size : 40px;
}

.container{
    position : relative;
    margin-left : 270px;
    zoom : 1;
}


.timeline .bar{
    float: left;
    padding-top: 6px;
    bottom:0;
}
.timeline .text{
    padding-left : 18px;
    font-size : 16px;
}
.timeline .text span{
    padding-left : 24px;
    display: block;
    margin-top : 12px;
}
.timeline .text .time{
    font-size : 0;
    position:relative;
}
.timeline .text .time  span{
    padding-left : 0px;
    margin-top : 0px;
    display : inline;
}

.timeline .circle , .timeline .line{
    border : solid 1px #42d5ff;
}

.timeline .circle{
    display: inline-block;
    vertical-align: middle;
    background : #fff;
    margin-left: -23px;
    position: relative;
    *display : inline;
    *zoom : 1;    
}

.circle{
  height : 10px;
  width : 10px;
  border-radius:100px;
}

.timeline .line{
    width:0px;
    border:1px solid #42d5ff;
    top:0px;
    bottom:0px;
    position:absolute;
    margin:10px 0 40px 0;
}
.timeline  .text .time{
    font-size : 18px;
    margin-top: 46px;
}
.timeline .text .time:first-child{
   margin-top: 0px;
}

.skill{
    font-size : 18px;
}
.skill div{
    line-height: 24px;
    margin-bottom : 22px;
}