.about-wraper{
  padding: 10px; background-color: #F9F9F9;border: 1px solid #c9d8db;
  small{color: #969696;}
}

.contris{
	padding: 0; float: right;
	li{list-style: none; display: inline-block; margin-left: 5px;}
	img{width: 25px; height: 25px; border-radius: 100%}
}

.resource-list{
	position: relative;
	.list-group-item{
		border-color: #F0F0F0;  border-left: 0; border-right: 0;

		&:hover{
			span.yes .op{display: inline-block;}
		}

		&:first-child{
			border: 0;
		}
	}

	.opers{
		position: absolute;right: 10px; width: 100px; top: 10px;text-align: right;
		a{
			margin-left: 10px; opacity: 0.5; display: inline-block;
			&:hover{
				opacity: 1;
			}
			&.op{display: none;}
		}
		.tx{
			width: 20px; height: 20px; border-radius: 4px;-webkit-transition:all,.5s,ease,0s;
			
		}
	}
	
}
.panel-footer small{
	color: #898989;
	a{color: #898989;  font-weight: bold;}
}

.diff-wraper{
	& > article{
		padding: 20px; background-color:#FFF;display: block;
	}
}

.diff-list{
	padding: 0;
	li{list-style: none; display: block; border-bottom: #D3D3D3  1px dashed }
	.tx{width: 20px; height: 20px; border-radius: 3px;}
}




.repo-item{
	display: block; height: 150px; background-color: #FD635E;  text-align: center;margin: 15px 0;  box-shadow: 1px 1px 1px #DDD;
	*{color: #FFF;}
  i.fa{font-size: 3em;}
  h3{margin: 0; font-size: 18px;  padding: 0; padding-top: 30px; padding-bottom: 20px; text-align: center;}
  &.h-2{
  	height: 330px;
  	h3{font-size: 2em;  padding-top: 50px;}
  	i.fa{font-size: 10em;}
  }
}

.repo-list {
	.more{display: block; width: 200px; text-align: center; padding: 20px 0; margin: 0 auto; margin-top: 50px; background-color: #EEE; color: #bbb}
}

.repo-extra{
  margin-top: 20px;
  .panel-heading{
    text-align: center;
    h4{display: inline-block;}
  }
}


.experience{
  padding: 10px;
  border-bottom: #DDD 1px dashed;  
  .text {
    border: 0;
    width: 100%;
    outline: none;
  }

  .inner{
    padding-right: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: block;
  }

  .title{
    font-size: 16px; 
    font-weight: bold;
    margin-right: 10px;
  }
  .tx{
    width: 20px;
    height: 20px;
    border-radius: 100%;
    margin-right: 5px;
  }

  a{
    text-decoration: none;
  }

  .visit{
    position: absolute;
    right: 15px;
  }
}


.view-wraper{
  border: 0; border-top: 0;box-shadow:none;
  & > .nav-heading {
    padding: 5px; font-size: 12px; background-color: #FFF;
    & > ol{
      padding-bottom: 0;margin-bottom: 0; background-color: #FFF;
    }

  }
  & > .main-heading{
    padding: 20px;  position: relative;min-height: 120px; background-color: #FFF;
    & > h2{font-size: 20px; font-weight: bolder; margin: 0; padding: 0; padding-bottom: 10px;} 
    & > .menu{
      width: 150px;  float: right;
      & > *{
        display: block; background-color: #19C2FF; text-decoration: none;  width: 100%; margin-bottom: 10px; padding: 5px 10px; text-align: center; color: #FFF;
        &.gitbtn{background-color: #EF4245;color: #FFF;}

        
      }
      .com{
        padding: 0;
        & > a{
          display: inline-block; width: 50%; text-align: center; color: #FFF;padding: 5px 0; text-decoration: none;
        }
        a + a{
            background-color: #E7E7E7;   color: #19C2FF;
        }
      }
    }
    & > p{color: #7E7E7E}
  }

  & > .params{
    overflow: hidden;color: #868686;background-color: #FFF; color: rgba(81, 162, 81, .91);font-size: 12px;font-weight: bold;
    & > div{
      border: #E4E4E4 1px solid; padding: 10px; border-right: 0; text-align: center; border-top: 0;
    }
  } 

  & > .banner-title{
    border: #E4E4E4 1px solid; text-align: center; font-size: 20px; padding: 10px 0; border-left: 0; border-right: 0;
  }



  & > .detail{
    padding: 30px; /* padding-right: 150px;  */position: relative; display: block;word-break: break-all; font-size: 15px;
    img{max-width: 100%}
    & > .bar{
      position: absolute; right: 0px; top: 20px;
      ul{
        margin:0 ;padding: 0;
        li{
          display: block; padding: 10px;color: hsl(0, 0%, 60%);; font-weight: bold;

        }
      }
    }
   
   

    &>article{
      z-index: -1; 
    }

    .no-zh{
      text-align: center; 
      h4{margin: 20px 0;}
    }
  }

  &>.panel-footer{
    color: #919191;
    a{color: #444}
  }

  .edit-footer{
    border-top: #C5C5C5 1px dashed;  padding: 10px 0; color: #999;  font-size: 13px; margin-top: 10px;
    
    
  }
}


.doc-wraper{
  padding: 30px;
  width: 65%;
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  border: 1px solid #c9d8db; 
  margin-bottom: 100px;
  margin-top: 100px;
  background-color: #FFF;
}
.doc-title{
  padding: 5px; text-align: center;position: absolute; width: 100%; z-index: 100;
  .btns-wrap{position: absolute;top: 10px;right: 10px;}
  .doc-merge-btn {position: absolute;top: 10px;right: 250px;}
  h4{display: inline-block}
}

.doc-toolboxs {
  position: fixed;
  z-index: 100;
  width: 100%;
  top: 0;
  padding: 10px;
  a {
    color: #a7a6a6;
    font-size: 20px;
    margin: 0 10px;
    &:hover {
      color: #333
    }
  }
}

.doc-repo {
  text-align: center;
  padding: 10px 0;
  position: absolute;
  width: 100%;
  top: 0;
  .cover {
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: #EEE 1px solid;
    padding: 3px;
    margin-top: 20px
  }
}

#doc-preview {
  display: none;

  img {
    max-width: 100%
  }
}

.doc-view-tip {
  position: fixed;
  top: 100px;
  background-color: #222;
  right: 0;
}

.doc-submit-tip {
  text-align: center;
  width: 360px;
  margin: 200px auto;
  display: none
}


#repo-trends{
  max-width: 750px; margin: 0 auto; background-color:#FFF; color:#FFF;
  .trend-head{
    background-color: #DA552F;padding:20px 50px; text-align: center; position: relative;
    
    .category{background-color:rgba(0, 0, 0, 0.3); color: #DA552F; padding: 10px; border-radius: 100px; display: inline-block}
    .period{position: absolute; right: 20px; bottom: 10px;}
    &.bottom{
      background-color: #DDD; text-align: center;color: #696969;
    }
  }
}


.repo-menus{
  text-align: center; font-size: 14px;    margin-top: 20px;
  & > a{
    display: inline-block;margin: 15px; color: #444;text-decoration: none;
    &.active{color: #d9534f;font-weight: bold;}
  }
}


.sub-menus{
  text-align: center; font-size: 13px;
  & > a{
    display: inline-block;margin: 15px; color: #979797; display: none;text-decoration: none;
    &.on{display: inline-block;}
    &.active{color: #d9534f;font-weight: bold;}
  }
}

.repo-banner{
  padding: 30px 0;  padding-top: 0px; position: relative; background-color: #F8F8F8;
  .inner{
     max-width: 1000px;  margin: 0 auto; position: relative; padding: 0 10px;
  }
  .cover{
    padding: 10px; background-color: #FFF; box-shadow: 1px 1px 10px #f4f4f4;
  }
  .repo-title{
    a{text-decoration: none; color: #333; }
  }
  .menu{
      margin: 20px 0; 
    a{
      display: inline-block;padding: 5px 20px; color: #FFF; text-decoration: none;
      background-color: #EEE;  margin-right: 40px;  border-radius: 100px;  background-color: #19C2FF;
      
      &.gitbtn{background-color: #EF4245}
      &.download{
        background-color: #FFF; border-radius: 100%; font-size: 35px; text-align: center; 
        padding: 0;  color: #29B996; position: relative;  width: 50px;  height: 10px;
        i{ position: absolute; top: -12px; left: 0;}
      }
    }
  }

  .params{
    color: rgba(81,162,81,0.91);font-weight: bold; 
    div{display: inline-block; margin: 20px 40px; margin-left: 0;}
    
    .using{
      color: #bbb;
      float: right;
      margin: 20px 0;
      span{
        padding: 4px 5px;
        padding-right: 10px;
      }
      .me{
        border: #bbb 1px solid;
        cursor: pointer;
        padding: 4px 10px;
      }
      a{color: #bbb}
      i.fa{
        font-size: 14px;
        color: #bbb;
        cursor: pointer;
      }
      &.active-true{
        .me{
          color: #ff9500;
          border-color: #ff9500;
        }
        
      }
    }
  }

  .repo-crumb{
    max-width: 1000px; margin: 0 auto; padding: 30px 0;  position: relative;
    a{
      display: inline-block; width: 40px; height: 30px; text-align: center; line-height: 30px;
      background-color: #F5F5F5; color: #DDD;
      
      &.root{
         background-color: #DDD;  color: #FFF;
      }
    }
  }
  
  .collect{
    width: 30px;color: #CCC; display: inline-block; text-align: center;position: absolute; right: 0; top: 0px; 
    i{
      font-size: 30px;cursor: pointer;
    }
    a{
      color: #ccc;
    }
    .icon-heart{
      position: absolute;
      left: 0;
      top: 0;
      width: 30px;
      height: 30px;
      &.on{fill: #EF4245}
      &.expand{
        width: 120px;
        height: 120px;
        opacity: 0;
        left: -45px;
        top: -45px;
        fill: #BBB!important;
      }
    }

   }

  #repot_rend{
    position: absolute; bottom: 0; z-index: -1;  height: 200px;
  }


  .run-code{
    display: inline-block;   position: absolute; right: 0; 
    width: 40px;  text-align: center; line-height: 35px; margin: 0; 
    box-shadow: 0px 0px 1px #C2C2C2;   bottom: 100px; overflow: hidden; font-size: 12px; box-sizing: content-box;

    a{
      display: block; text-decoration: none;height: 40px; line-height: 40px;color: #FFF;
      &:nth-child(1){
        background-color: #8a6d3b;
      }
      &:nth-child(2){
        background-color: #ff9500;
      }
    }

    &.no-code{
      a{
        &:nth-child(1){
          background-color: #9F9F9F; color: #888888
        }
      }
    }
  }


  .thirty-tool{
    margin-top: 20px; text-align: right;
    a{
      display: inline-block;  margin-left: 30px; color: #cda3a2;
      line-height: 40px; text-align: center; border-radius: 100%; 
      &:hover{
        color: #cda3a2;
      }
    }
  }

}


.using-wraper{
  padding: 10px;
  h4{
    text-align: center;
    padding: 30px;
  }
  .use-item{
    text-align: center;
    margin: 10px 0;
    h5{
      height: 30px; overflow: hidden;
    }
    .tx{
     width: 50px;
     height: 50px;
     border-radius: 3px;
   }
  }
}


.repo-detail-item {
  border: #DDD 1px solid;
  border-top: 0;
  padding: 20px;
}
.repo-relates {

  a{
    color: #444
  }
  
  .related-item {
    //border: #DDD 1px solid;
    display: block;
    text-decoration: none;
    position: relative;
    padding-left: 70px;
    padding-right: 50px;
     color: #a7a7a7;
    //border: rgba(221, 221, 221, 0.32) 1px dashed;
    margin-top: 40px;
    h5 {
      color: #444
    }
    .fresh {
      top: 20px;
    }
    .cover {
      width: 100%;
      border-radius: 5px;
      width: 60px;
      height: 60px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .desc {
      height: 30px;
      overflow: hidden;
      font-size: 13px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: block;
    }
    .extras {
      color: #b3b3b3;
       font-size: 13px;
      .fa-heart {
        margin-left: 10px;
      }
    }

    &:hover {
      color: #3a3636
    }
  }
}


.canotlocktip {
  text-align: center;
  padding: 50px;
  margin-top: 10%;
  line-height: 25px;

  ul {
    width: 200px;
    display: block;
    margin: 20px auto;
    text-align: left;
  }
}


.repo-contribute {
  border: #DDD 1px solid;
  position: relative;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 0;
  padding: 10px;
  .mem-wraper{
    display: inline-block;  
    margin: 10px; 
    text-decoration: none;

    .flag {
      display: inline-block; 
      width: 10px;
      height: 10px;
      border-radius: 100%;
      margin-right: 5px;
    }

    a {
      color: #C2C1C1; 
    }
    
    .tx{
      width: 30px; 
      height: 30px;  
      border-radius: 100%;
      margin-right: 5px;
    }
  }

  .bar {
    height: 10px;
    background-color: #EEE;
    float: left;
    width: 100%;
  }

  .bottom-per {
    position: absolute;
    width: 100%;
    overflow: hidden;
    left: 0;
  }

  .no-translation {
    padding: 10px;
    color: #676767
  }

  .lang{
        display: inline-block;  
        background-color: #EEE;
        padding: 0 10px;
        position: absolute; 
        right: 10px; 
        top: 50%;
        margin-top: -15px;
        font-size: 12px; 
        z-index: 100;
        span{
          color: #C2C2C2;  cursor: pointer;
          &.on{
            color: rgb(255, 123, 123)
          }
        }
        span + span:before{
          padding: 0 5px;color: #ccc;content: "/\00a0";
        }
      
    }
}


.repo-article {
  border: #DDD 1px solid;
  border-top: #EEE 1px solid;
  padding: 20px;
  margin-top: 10px;
}
