Cutesy (thread)

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<style>
#cutesy-thread{
  width: 300px;
  height: 400px;
  background: url(https://i.pinimg.com/originals/ac/6f/c7/ac6fc71f870e35bd628fcffbc29b7926.gif);
  background-size: 355px;
  background-position: bottom;
  position: relative;
  margin: 0px auto;
  overflow: hidden;
  border: 1px solid #D46751;
}

#cutesy-thread .overlay{
  width: 300px;
  height: 400px;
  background: #F1EAE0;
  position: absolute;
  opacity: 0.65;
  top: 0px;
  left: 0px;
}

#cutesy-thread ::-webkit-scrollbar {
  width: 0px;
  border-radius: 50px;
}

#cutesy-thread ::-webkit-scrollbar-track {
  background: transparent;
  border: 1px solid #5F5AB2;
}

#cutesy-thread ::-webkit-scrollbar-thumb {
  background: #5F5AB2;
  border: 1px solid #FBCDC0;
  border-radius: 50px;
}

#cutesy-thread .outer{
  width: 50px;
  height: 100px;
  background: transparent;
  position: absolute;
  top: 30px;
  left: 30px;
  -webkit-transition: 0.6s ease-in 0s;
  transition: 0.6s ease-in 0s;
}
#cutesy-thread:hover .outer{
  top: -150px;
}

#cutesy-thread .top{
  width: 50px;
  height: 90px;
  background: #F1EAE0;
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid #9FAA55;
}
#cutesy-thread .top2{
  width: 50px;
  height: 81.5px;
  background: #fff;
  position: absolute;
  top: 4px;
  left: 4px;
  border: 1px solid #D46751;
  font-size: 9px;
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  line-height: 19px;
  letter-spacing: 0px;
  color: #B14D39;
  padding-top: 8px;
}

#cutesy-thread .inner{
  width: 240px;
  height: 340px;
  background: #fff;
  border: 0.5px solid #5F5AB2;
  outline: 8px solid #fff;
  position: absolute;
  bottom: 28px;
  right: -250px;
  -webkit-transition: 0.6s ease-in 0s;
  transition: 0.6s ease-in 0s;
}
#cutesy-thread:hover .inner{
  right: 28px;
}

#cutesy-thread .header{
  width: 200px;
  height: 70px;
  background: transparent;
  border-bottom: 1px solid #D46751;
  position: absolute;
  top: 22px;
  left: 20px;
}

#cutesy-thread .icon{
  width: 50px;
  height: 70px;
  background: transparent;
  position: absolute;
  top: 0px;
  left: 0px;
}
#cutesy-thread .icon .sf{
  color: #9FAA55;
  font-size: 75px;
}

#cutesy-thread .textbox{
  width: 192px;
  height: 203px;
  background: #fff;
  position: absolute;
  bottom: 2px;
  left: 2.5px;
  transition: 0.5s ease-in 0s;
  color: #413C99;
  overflow: auto;
  text-align: justify;
  font-size: 9.5px;
  font-family: 'Nunito', sans-serif;
  line-height: 11.5px;
  letter-spacing: 0px;
  border: 21px solid #fff;
}

</style>

<center>
<div id='cutesy-thread'>

  <div class='overlay'></div>

  <div class='outer'>
      <div class='top'></div>
      <div class='top2'>
        C<br>U<br>T<br>E
      </div>
  </div>

  <div class='inner'>
      <div class='header'>
        <div class='icon'>
        <a href="https://shadowplayers.jcink.net/index.php?showuser=95" title="hanie ©">
        <span class="sf sf-cactus-o"></span></a></div>
      </div>

      <div class='textbox'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum vitae sem ut maximus. Suspendisse in tincidunt dui. Morbi luctus, ligula id finibus luctus, ligula augue malesuada orci, vitae porta urna tortor non ipsum. Proin efficitur elit neque, a hendrerit odio feugiat ut.
        Ut et est mi. Aliquam placerat, justo ut vehicula bibendum, nunc urna hendrerit orci, in sollicitudin nunc velit vitae ante.
        <p>
        Mauris dolor sapien, facilisis ut rutrum et, suscipit sed neque. Cras a sapien odio. Integer rhoncus leo at mi convallis congue. Duis finibus nunc quis ligula luctus rutrum nec sed nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque commodo ultricies venenatis. Pellentesque et turpis et turpis lobortis aliquet et in massa. Mauris sed erat iaculis, dictum nulla vitae, fringilla sapien.
      </div>
  </div>

</div>
</center>