/* the reaction buttons region */
div.reaction_buttons{
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
}

div.reaction_buttons_tagline{
    display: inline;
    margin-right: 10px;
}

/* a single button */
div.reaction_buttons .reaction_button {
    border: 1px dotted #000;
    line-height: 2em;
    padding: 5px;
    margin: 3px;
    cursor: pointer;
    list-style: none;
    text-align: center;
    display: inline-block;
    background: none;
}

/* the button while hovering over it */
div.reaction_buttons li.reaction_button:hover {
}

/* special setings for display as a graph,
 * inspired by http://geoffgraham.me/creating-a-responsive-css-bar-chart/ */
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);
}
@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;
    }
}

/* the button after voting */ 
div.reaction_buttons li.voted,
div.reaction_buttons li.voted:hover {
    cursor: default;
}

/* number of votes including parantheses.
.reaction_buttons .reaction_button .count {
}
 */

/* number of votes in between the parantheses.
.reaction_buttons .reaction_button .count_number {
}
 */
 
/* simple sidebar settings */ 
#sidebar div.widget_reaction_buttons h3 {
	margin: 0;
	margin-top: 4px;
	font-size: 1.1em;
}

#sidebar div.widget_reaction_buttons ol {
	margin-left: 25px;
}



div.reaction_buttons .reaction_button_0 {
  background-color: #bfffbf;
  border-color: #82ad82;
}

div.reaction_buttons .reaction_button_0:hover,
div.reaction_buttons .reaction_button_0:focus,
div.reaction_buttons .reaction_button_0:active,
div.reaction_buttons .reaction_button_0.active,
.open .dropdown-toggle.reaction_button_0 {
  background-color: #6eff6e;
  border-color: #52bf52;
}

div.reaction_buttons .reaction_button_0:active,
div.reaction_buttons .reaction_button_0.active,
.open .dropdown-toggle.reaction_button_0 {
  background-image: none;
}

div.reaction_buttons .reaction_button_0.disabled,
div.reaction_buttons .reaction_button_0[disabled],
fieldset[disabled] div.reaction_buttons .reaction_button_0,
div.reaction_buttons .reaction_button_0.disabled:hover,
div.reaction_buttons .reaction_button_0[disabled]:hover,
fieldset[disabled] div.reaction_buttons .reaction_button_0:hover,
div.reaction_buttons .reaction_button_0.disabled:focus,
div.reaction_buttons .reaction_button_0[disabled]:focus,
fieldset[disabled] div.reaction_buttons .reaction_button_0:focus,
div.reaction_buttons .reaction_button_0.disabled:active,
div.reaction_buttons .reaction_button_0[disabled]:active,
fieldset[disabled] div.reaction_buttons .reaction_button_0:active,
div.reaction_buttons .reaction_button_0.disabled.active,
div.reaction_buttons .reaction_button_0[disabled].active,
fieldset[disabled] div.reaction_buttons .reaction_button_0.active {
  background-color: #bfffbf;
  border-color: #82ad82;
}

div.reaction_buttons .reaction_button_1 {
  background-color: #bfe1ff;
  border-color: #8299ad;
}

div.reaction_buttons .reaction_button_1:hover,
div.reaction_buttons .reaction_button_1:focus,
div.reaction_buttons .reaction_button_1:active,
div.reaction_buttons .reaction_button_1.active,
.open .dropdown-togglediv.reaction_buttons .reaction_button_1 {
  background-color: #47a9ff;
  border-color: #40a6ff;
} 

div.reaction_buttons .reaction_button_1:active,
div.reaction_buttons .reaction_button_1.active,
.open .dropdown-togglediv.reaction_buttons .reaction_button_1 {
  background-image: none;
}

div.reaction_buttons .reaction_button_1.disabled,
div.reaction_buttons .reaction_button_1[disabled],
fieldset[disabled] div.reaction_buttons .reaction_button_1,
div.reaction_buttons .reaction_button_1.disabled:hover,
div.reaction_buttons .reaction_button_1[disabled]:hover,
fieldset[disabled] div.reaction_buttons .reaction_button_1:hover,
div.reaction_buttons .reaction_button_1.disabled:focus,
div.reaction_buttons .reaction_button_1[disabled]:focus,
fieldset[disabled] div.reaction_buttons .reaction_button_1:focus,
div.reaction_buttons .reaction_button_1.disabled:active,
div.reaction_buttons .reaction_button_1[disabled]:active,
fieldset[disabled] div.reaction_buttons .reaction_button_1:active,
div.reaction_buttons .reaction_button_1.disabled.active,
div.reaction_buttons .reaction_button_1[disabled].active,
fieldset[disabled] div.reaction_buttons .reaction_button_1.active {
  background-color: #428bca;
  border-color: #357ebd;
}

div.reaction_buttons .reaction_button_2 {
  background-color: #5bc0de;
  border-color: #46b8da;
}

div.reaction_buttons .reaction_button_2:hover,
div.reaction_buttons .reaction_button_2:focus,
div.reaction_buttons .reaction_button_2:active,
div.reaction_buttons .reaction_button_2.active,
.open .dropdown-togglediv.reaction_buttons .reaction_button_2 {
  background-color: #bff0ff;
  border-color: #8fb4bf;
}

div.reaction_buttons .reaction_button_2:active,
div.reaction_buttons .reaction_button_2.active,
.open .dropdown-togglediv.reaction_buttons .reaction_button_2 {
  background-image: none;
}

div.reaction_buttons .reaction_button_2.disabled,
div.reaction_buttons .reaction_button_2[disabled],
fieldset[disabled] div.reaction_buttons .reaction_button_2,
div.reaction_buttons .reaction_button_2.disabled:hover,
div.reaction_buttons .reaction_button_2[disabled]:hover,
fieldset[disabled] div.reaction_buttons .reaction_button_2:hover,
div.reaction_buttons .reaction_button_2.disabled:focus,
div.reaction_buttons .reaction_button_2[disabled]:focus,
fieldset[disabled] div.reaction_buttons .reaction_button_2:focus,
div.reaction_buttons .reaction_button_2.disabled:active,
div.reaction_buttons .reaction_button_2[disabled]:active,
fieldset[disabled] div.reaction_buttons .reaction_button_2:active,
div.reaction_buttons .reaction_button_2.disabled.active,
div.reaction_buttons .reaction_button_2[disabled].active,
fieldset[disabled] div.reaction_buttons .reaction_button_2.active {
  background-color: #5bc0de;
  border-color: #46b8da;
}

div.reaction_buttons .reaction_button_3 {
  background-color: #f0ad4e;
  border-color: #eea236;
}

div.reaction_buttons .reaction_button_3:hover,
div.reaction_buttons .reaction_button_3:focus,
div.reaction_buttons .reaction_button_3:active,
div.reaction_buttons .reaction_button_3.active,
.open .dropdown-togglediv.reaction_buttons .reaction_button_3 {
  background-color: #ffe4bf;
  border-color: #bfab8f;
}

div.reaction_buttons .reaction_button_3:active,
div.reaction_buttons .reaction_button_3.active,
.open .dropdown-togglediv.reaction_buttons .reaction_button_3 {
  background-image: none;
}

div.reaction_buttons .reaction_button_3.disabled,
div.reaction_buttons .reaction_button_3[disabled],
fieldset[disabled] div.reaction_buttons .reaction_button_3,
div.reaction_buttons .reaction_button_3.disabled:hover,
div.reaction_buttons .reaction_button_3[disabled]:hover,
fieldset[disabled] div.reaction_buttons .reaction_button_3:hover,
div.reaction_buttons .reaction_button_3.disabled:focus,
div.reaction_buttons .reaction_button_3[disabled]:focus,
fieldset[disabled] div.reaction_buttons .reaction_button_3:focus,
div.reaction_buttons .reaction_button_3.disabled:active,
div.reaction_buttons .reaction_button_3[disabled]:active,
fieldset[disabled] div.reaction_buttons .reaction_button_3:active,
div.reaction_buttons .reaction_button_3.disabled.active,
div.reaction_buttons .reaction_button_3[disabled].active,
fieldset[disabled] div.reaction_buttons .reaction_button_3.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}

div.reaction_buttons .btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

div.reaction_buttons .btn-sm,
div.reaction_buttons .btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}


div.reaction_buttons .btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

div.reaction_buttons .btn:hover,
div.reaction_buttons .btn:focus {
  color: #333333;
  text-decoration: none;
}

div.reaction_buttons .btn:active,
div.reaction_buttons .btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

div.reaction_buttons .btn.disabled,
div.reaction_buttons .btn[disabled],
div.reaction_buttons fieldset[disabled] .btn {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
}