html,body{
	height:100%;padding:0;margin:0;background-color:#f1f3f5;
}
* {
  box-sizing: border-box;
  font-family:'Dosis', 'Open Sans', sans-serif;
}
 
 ::-webkit-scrollbar {
 width:5px;

}
::-webkit-scrollbar-button {
    width: 0;

}
::-webkit-scrollbar-track {



    border-radius:10px;
}
::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0.2);

    border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {

}

h1, h2, h3, h4 {
  font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  line-height: 1.2;
  
}

pre {
  background: #222;
  color: white;
  position: relative;
}
pre code {
  display: block;
  padding: 1rem;
  overflow: auto;
}
pre[data-type] {
  margin-top: 0; 
}
pre[data-type]::before {
  /*content: attr(data-type);*/
  position: absolute;
  bottom: 100%;
  margin-bottom: 2px;
  left: 0;
  color: black;
  display:none;
}
figure {
  background: #ccc;
  margin: 0;
  padding: 1rem;
}
figcaption form {
  display: inline-block;
}

.codepen-mover-button {
  position: absolute;
  bottom: 5px;
  right: 8px;
}
ul,li{margin:0;padding:0;list-style:none;}
  
.posts li{border-radius:3px;/*border-radius:5px;*/border:solid 1px #eee;background-color:#fff;font-size:11pt;margin-bottom:75px;padding:15px;

-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.posts .header:after{content:' ';clear:both;display:block;}
.posts .userphoto{position:relative; float:left;width:50px;height:50px; display:inline-block; border: 2px solid rgba(0, 0, 0, 0.12);padding:3px;border-radius:100%;}
.posts .userphoto .img{width:100%;height:100%;   
    display: inline-block;
    line-height: 0; 
    background: white;
background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:100%; 
}
.res{margin: 10px   0px 0  0px ;border-radius:5px;overflow:hidden;}
.user span{font-size:10pt;color:#ccc;font-weight:100;padding-left:15px;display:none;}
.user i{position:absolute;right:15px;font-size:13pt;color:#ccc;font-weight:100;padding-left:15px; }
.user{padding: 5px 0 0 15px;float:left;}
.user h3{font-size:12pt;font-weight:600;font-family:'arial';}
.user p{font-weight:300;font-size:10pt;color:#ccc;}
.user h3,.user p{margin:0;padding:0;}
 
 .footer:after{content:' ';clear:both;display:block;}
.footer>div{float:left;padding:15px 5px;color:#aaa;}
.content{padding:15px 0;font-size:12pt;}
li:nth-child(20) .userphoto,
li:nth-child(2) .userphoto,
li:nth-child(15) .userphoto,
li:nth-child(5) .userphoto 

{border-color:#8bc34a;}
li{position:relative; }
.comments{-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
	border-top:solid 1px #ebedf0;
 max-height:400px;
 overflow-y:auto;
 overflow-x:hidden;
       background-color: rgba(0,0,0,0.01);
	padding:15px;
	 margin: 0 -15px -15px -15px
;position:relative !important;
}
 
.comments .header{padding:0;margin-bottom:10px;margin:0;}
.comments .userphoto{height:40px;width:40px;}
.comments .content{padding:0 0 20px 0;font-size:10pt;color:#444;}
.comments .content:after{content:' ';clear:both;display:none;border-top:solid 1px #ebedf0;margin-top:15px;} 
.comments .content:last-child:after{display:none;}
/*.status{width:15px;height:15px;background-color:red;position:absolute;bottom:5px;right:5px;border:solid #fff 3px;border-radius:100%;}*/