/* the reaction buttons region */
div.reaction_buttons {
    margin-top: 30px;
    font-size: 0.8em;
    text-align: left;
/*	margin-left: 30px;*/
/*	color: #4060a0;*/
	color: #999;
}

/* a single normal button */
div.reaction_buttons li.reaction_button {
	list-style-type: none;
	line-height: 1.4em;
	padding: 5px;
	margin: 0 3px 30px 0;
	border: 1px solid #4060a0;
	cursor: pointer;
	display: inline-block;

	border-radius: 5px;        /* CSS3‘�ˆÄ */  
	-webkit-border-radius: 5px;    /* Safari,Google Chrome—p */  
	-moz-border-radius: 5px;   /* Firefox—p */  

	font-size: 85%;
	color:#4060a0;
	text-decoration:none;
}

/* the button while hovering over it */
div.reaction_buttons li.reaction_button:hover {
	background-color: #4060a0;
	color: #fff;
}


/* 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;
}