/* CSS Document */

	table.stats{border-radius:5px !important; margin: 0px auto;			max-width: 1200px;}
		table.stats tr{background:#fafafa;}
		table.stats tr:nth-child(even){background:#eeeeee;}
		table.stats tr th, 
		table.stats tr td{ font-size:16px;}

		table.stats tr th, 
		table.stats tr td{ padding:13px 5px; text-align: center;vertical-align: middle;}
		table.stats tr th:first-child, 
		table.stats tr td:first-child{ text-align: left;}
		table.stats tr:first-child {background:#ff0000; color: #ffffff;border-bottom:5px solid #ffffff;} 
		table.stats tr:nth-child(even) td{background: #fdfdfd;}
		table.comments{
			width: 100%;
			margin: 30px auto;
			max-width: 1200px;
		}
		
		table.comments th{
			color: red; font-size:20px; text-transform: uppercase;font-weight: bold;
		}
		
		table.comments div{
			padding: 20px 10px;
			margin:10px;
			border-radius:5px;
			box-shadow: 5px 5px 5px #dddddd;
		}
		
		table.comments .sd div{ background: rgba(255,219,219,0.50); border:1px solid rgba(255,219,219,0.90); }
		table.comments .d div{ background: rgba(255,208,150,0.50); border:1px solid rgba(255,208,150,0.90); }
		table.comments .a div{ background: rgba(255,249,178,0.50); border:1px solid rgba(255,249,178,0.90); }
		table.comments .sa div{ background: rgba(226,255,210,0.50); border:1px solid rgba(226,255,210,0.90); }
		
		
		#rateio_container_outer h1 {text-align: left !important; color:#555555; padding:30px 10px;font-size: 24px; background:#dddddd; display: block;margin-bottom:20px;}
		#rateio_container_outer h2 {text-align: center; color:#555555; padding:30px 10px;font-size: 24px; background:#fafafa; display: block;margin:20px 0px;}

		
		#stats .back{ 
			text-decoration:none;
			background:#dddddd;color:#555555;
			border-radius:30px;
			width:60px; height:60px; top:10px; left:10px; font-size:60px; text-align:center; display: block;line-height:45px;}
		#stats .back:hover{
			background:#555555;
			color:#cccccc;
		}


/* CSS Document */
#rateio{position: relative; 
z-index: 10000000;	
}
#rateio_container{
background:#ffffff !important;
	    animation-name: bounce;
    animation-duration: 1s;
	width:50px;
	height:50px;
	border: 1px solid #eeeeee;
	padding:10px;
	border-radius: 30% 30% 0% 30%;
	box-shadow: 5px 5px 15px rgba(100,100,100,0.5);
	font-size:14px;
	position: fixed;
	bottom:10px;
	right:10px;
	z-index: 100000000;	
	border: 1px solid #fafafa;
	
}

#rateio.middleright #rateio_container{
	bottom:50%;
	right:0px;
	border-radius: 30% 0% 0% 30%;
}


#rateio textarea{margin-top:10px;width: 100%; border-radius:10px; border:1px solid #999999; box-shadow: inset 5px 5px 5px #cccccc;
font-family:"Arial", "Helvetica", sans-serif;padding:20px;}
#rateio input{margin-top:20px;border: 0px; background: rgba(162,0,2,1.00); border-radius: 4px; color:#ffffff; font-size:16px;padding:10px 20px;}
#rateio #smileys{padding: 10px 0px;}
#rateio #smileys div.smiley{ 
	border-radius:50%;
	text-indent:-10000px;
	cursor: pointer; 
	background-color:rgba(255,0,0,1); 
	margin-right:10px; 
	display: inline-block; 
	width:43px;
	height:43px;}

#rateio #smileys div.smiley:hover{  transform:scale(1.2); transition: all .2s; }

#smileysinstruct{display: inline-block;width:76px;	height:43px; background: url("/wp-content/plugins/rateio/widget/images/yourrating.png") no-repeat; float:left; }

#rateio #smiley4{background: url("/wp-content/plugins/rateio/widget/images/smileys.png") no-repeat; background-position:-0px 0px; }
#rateio #smiley3{background: url("/wp-content/plugins/rateio/widget/images/smileys.png") no-repeat; background-position:-50px 0px;}
#rateio #smiley2{background: url("/wp-content/plugins/rateio/widget/images/smileys.png") no-repeat; background-position:-100px 0px;}
#rateio #smiley1{background: url("/wp-content/plugins/rateio/widget/images/smileys.png") no-repeat; background-position:-150px 0px;}

#rateio #smiley4.active{ transform:scale(1.3); box-shadow: 5px 5px 5px #bbbbbb;}
#rateio #smiley3.active{ transform:scale(1.3)}
#rateio #smiley2.active{ transform:scale(1.3)}
#rateio #smiley1.active{ transform:scale(1.3)}
#rateio #loader{ display:none; padding:30px 0px; }
#rateio .active{
	    animation-name: zoomer;
    animation-duration: 1s;
}


#rateio_container #rateio_close{
	display: none;
	font-size:20px;
	color:#ffffff;
	background: rgba(181,0,3,1.00);
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	position: absolute;
	right: 10px;
	bottom:10px;
	font-family:"Arial", "Helvetica", sans-serif;
	padding:10px;
	border-radius:50%;
	line-height:1;
	width:40px;
	height: 40px;
	
}
#rateio_container #rateio_logo{
	display: block;
	font-size:30px;
	color: rgba(181,0,3,1.00);
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
#rateio_container #rateio_logo img{ 
	width:30px;
}


#rateio_container #rateio_inner{
	right:-800px;
	font-family:"Arial", "Helvetica", sans-serif;
	transform:scale(0);
}


#rateio_container.open{
	transition: all .5s ease-out;
	width:460px;
	height:350px !important;
	padding:60px 60px 100px 100px;
}

#rateio_container.open #rateio_logo{
	display: none;
}
#rateio_container.open #rateio_close{
	display: block;
}


#rateio_container.open #rateio_inner{
	
	transition: all .5s ease-out;
	transition-delay: .50s;
	right:0px;
	transform:scale(1);
}

.question{font-weight: bold; font-size:18px; color:#555555;}


@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    30%{
        transform: translateY(-50px);
    }
    50%{
        transform: translateY(5px);
    }
    70%{
        transform: translateY(-25px);
    }
    80%{
        transform: translateY(2px);
    }
    90%{
        transform: translateY(-15px);
    }
    100%{
        transform: translateY(0);
    }
}

@keyframes zoomer{
    0%{
        transform: scale(1);
    }
    30%{
        transform: scale(1.4);
    }
    50%{
        transform: scale(1.1);
    }
    70%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1.2);
    }
}

@media all and (max-width:768px){
	#rateio_container.open{
	transition: all .5s ease-out;
	width:300px;
	height:350px !important;
	padding:20px;
	}
	#rateio.middleright #rateio_container{
	bottom:30%;
	right:0px;
	border-radius: 30px 0% 0% 30px;
}
	#smileysinstruct{display: none;}
}