form.mocomood{
  box-sizing: border-box;
  border-radius:3px;
  border:1px solid #D5B854;
  box-shadow:0 0 3px rgba(0,0,0,0.1);
  display:block;
  clear:both;
  font-size:inherit;
  width:5em;
  height:5em;
  background:yellow;
  border-radius:100%;
  text-align:center;
  position:relative;
  font-family:Georgia, Times, 'Times New Roman', serif;
  background: #FFF385; /* Old browsers */
  background: -moz-linear-gradient(top, #FFF385 0%, #F8E17B 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF385), color-stop(100%,#F8E17B)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #FFF385 0%,#F8E17B 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #FFF385 0%,#F8E17B 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #FFF385 0%,#F8E17B 100%); /* IE10+ */
  background: linear-gradient(to bottom, #FFF385 0%,#F8E17B 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF385', endColorstr='#F8E17B',GradientType=0 ); /* IE6-9 */
}

form.mocomood *,form.mocomood *:before,form.mocomood *:after {
  box-sizing: inherit;
  outline:none;
  user-select:none;
  border:0;padding:0;margin:0;
}

form.mocomood .mocomood-count,
form.mocomood .mocomood-button{
  position:absolute;
  left:0;
  width:80%;
  margin:0 10%;
  height:50%;
  color:#261D00;
  line-height:1em;
  font-weight:bold;
}

form.mocomood .mocomood-count{
  border-top: 1px solid #D5B854;
  top:45%;
  font-size:2em;
  line-height:1em;
}
article{position:relative}
form.mocomood .mocomood-button{
  background:none;
  height:100%;
  padding-bottom:50%;
}
form.mocomood:hover .mocomood-button,
form.mocomood:hover .mocomood-count{
  color:#D39E0A;
}

form.mocomood.mocomood-disabled .mocomood-button,
form.mocomood.mocomood-disabled .mocomood-button:active{
  cursor:text;
}

form.mocomood {
left: 50%;
margin: .5em 0;
margin-left: -2.5em;

}