/*
 * jQuery CSSEmoticons plugin 0.2.9
 *
 * Copyright (c) 2010 Steve Schwartz (JangoSteve)
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Date: Sun Oct 22 1:00:00 2010 -0500
 */

 /* Basic styles for emoticons */
span.css-emoticon {
	font-family: "Trebuchet MS", sans-serif; /* seems to give the best and most consistent emoticon appearance */
	font-size: 0.65em;
	font-weight: bold;
	color: #000000;
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
	transform: rotate(90deg);
	width: 1.54em; /* note that this is a multiple of this span's font-size, not containing text font-size */
	height: 1.54em; /* so, relative to containing text, width and height are 0.9 x 1.6 = 1.44em */
	text-align: center;
	padding: 0;
	line-height: 1.34em;
	border-radius: 1.54em;
	box-shadow: 1px -1px 2px rgba(0,0,0,0.5);
	border: 1px solid rgba(0,0,0,0.25);
	background-color: #ffcc00;
	background-image: linear-gradient(to right, #fff4c8, #fc0);
	transition-property: color, background, transform;
	transition-duration: 1s, 1s;
	transition-timing-function: linear, ease-in;

	/* Styles for two-character emoticons that need more letter-spacing for proportionality */
	&.spaced-emoticon {
		padding-left: 0.2em;
		width: 1.34em;
		letter-spacing: 0.2em;

		&.small-emoticon {
			padding-left: 0;
			width: 1.82em;
			letter-spacing: 0.1em;
		}
	}
	/* Styles for emoticons that need to have smaller characters to fit inside the circle */
	&.small-emoticon {
		font-size: 0.55em;
		width: 1.82em;
		height: 1.82em;
		line-height: 1.72em;
		border-radius: 1.82em;
	}
	/* Styles for additional colors */
	&.red-emoticon {
		background-color: #eb0542;
		background-image: linear-gradient(to right, #fa376e, #eb0542);
	}
	&.pink-emoticon {
		background-color: #ff8fd4;
		background-image: linear-gradient(to right, #ffade1, #ff8fd4);
	}
	/* styles for emoticons that need no rotation, like O_o */
	&.no-rotate {
		transform: rotate(0deg);
		box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
		font-size: 0.45em;
		width: 2.2em;
		height: 2.2em;
		line-height: 1.9em;
		border-radius: 2.2em;
		background-image: linear-gradient(#fff4c8, #fc0);

		&.red-emoticon {
			background-image: linear-gradient(#fa376e, #eb0542);
		}
		&.pink-emoticon {
			background-image: linear-gradient(#ffade1, #ff8fd4);
		}
	}
	/* Styles for emoticons that need to be rotated counter-clockwise, like <3 */
	&.counter-rotated {
		transform: rotate(-90deg);
		box-shadow: -1px 1px 2px rgba(0,0,0,0.5);
		background-image: linear-gradient(to left, #fff4c8, #fc0);

		&.red-emoticon {
			background-image: linear-gradient(to left, #fa376e, #eb0542);
		}
		&.pink-emoticon {
			background-image: linear-gradient(to left, #ffade1, #ff8fd4);
		}
	}
	/* Styles for animated states */
	&.un-transformed-emoticon, &.animated-emoticon:hover {
		letter-spacing: inherit;
		color: inherit;
		overflow: visible;
		transform: rotate(0deg);
		background: none;
		background-image: none;
		box-shadow: none;
		border-color: transparent;
	}
	&.nintendo-controller {
		font-size: .8em;
		height: 1.2em;
		line-height: 1em;
		width: 2.7em;
		vertical-align: bottom;
		border-radius: 0;
		background: linear-gradient(to right, #a5aabd, #74798c);
	}
}
/* This is a dirty dirty hack, because webkit doesn't properly do the padding+width=total-width as it should
	I think the width of the border may be throwing things off, because it's more noticable for small icons */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	span.css-emoticon.spaced-emoticon {
		width: 1.4em;
	}
}

html[dir="rtl"] span.css-emoticon {
	transform: rotate(-90deg) !important;

	&.un-transformed-emoticon, &.animated-emoticon:hover {
		transform: rotate(0deg) !important;
	}
}
