div.reaction_buttons{  } div.reaction_buttons li.reaction_button { line-height: 2.2em; cursor: pointer;
list-style: none;
text-align: center;
display: inline-block;
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
} div.reaction_buttons li.reaction_button:hover {
opacity: 0.6; } div.reaction_buttons ul.graph {
clear: both;
padding: 0;
width: 90%;
}
div.reaction_buttons ul.graph li.reaction_button {
height: 125px;
padding: 0;
position: relative;
vertical-align: bottom;
margin: 0 auto;
padding-left: 10px;
text-align: left;
display: block;
background: #4ecdc4;
border: 1px solid #4ecdc4;
background-image: -moz-linear-gradient(#76d8d1, #4ecdc4 70%);
background-image: -webkit-linear-gradient(#76d8d1, #4ecdc4 70%);
background-image: linear-gradient(#76d8d1, #4ecdc4 70%);
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
-moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}
div.reaction_buttons li.reaction_button:before {
float: left;
content:"";
display:inline-block;
width:3.5em;
height:3.5em;
background:url(//tabi-rin.com/wp-content/plugins/reaction-buttons/image1.png) no-repeat;
background-size:contain;
margin-right: 8px;
}
div.good_button_box {
float: left;
}
span.count_number {
position: relative;
background-color: #fff;
border: #778899 solid 1px;
border-radius: 0.3em;
padding: 4px 12px;
text-align: center;
color: #333;
}
span.count_number::before {
content: "";
position: absolute;
border: 5px solid transparent;
border-right: 6px solid #778899;
right: 101%;
top: 35%;
}
span.count_number::after {
content: "";
position: absolute;
border: 5px solid transparent;
border-right: 6px solid #fff;
margin-right: -4px;
right: 107%;
top: 35%;
}
@media (min-width: 700px) {
div.reaction_buttons ul.graph {
height: 250px;
width: 100%;
}
div.reaction_buttons ul.graph li.reaction_button {
height: 250px;
margin: 0 1.8% 0 0;
padding: 0;
width: 17%;
display: inline-block;
}
div.reaction_buttons ul.graph li.reaction_button span.button_name {
bottom: -4em;
position: absolute;
}
div.reaction_buttons ul.graph li.reaction_button span.braces {
display: none;
}
div.reaction_buttons ul.graph li.reaction_button span.count_number {
bottom: 3px;
position: absolute;
font-size: 2em;
font-weight: bold;
}
} div.reaction_buttons li.voted,
div.reaction_buttons li.voted:hover {
cursor: default;
}   #sidebar div.widget_reaction_buttons h3 {
margin: 0;
margin-top: 4px;
font-size: 1.1em;
}
#sidebar div.widget_reaction_buttons ol {
margin-left: 25px;
}
@media screen and (max-width: 767px) {
div.sns li {
width: 100%;
}
div.good_user {
width: 100%;
}
}