ChatSkins.js

/* Fall Skin - by Seaside98
   Winter Skin - by Nxtstep101
   JavaScript - by Seaside98 
   Version 2.2.1
   Change Log:
	1.0.0 - Fall skin and script
	2.0.0 - Winter skin and rewrite of script
		2.1.0 - Fixed css loading problems
		2.2.0 - Added cookies
		2.2.1 - Winter skin is no longer default */
// Set initial skin
setTimeout(function() { 
	if($.cookie('skinType')=='normal') {
		goNormal();
	} else if($.cookie('skinType')=='fall') {
		goFall();
	} else if($.cookie('skinType')=='winter') {
		goWinter();
	}
}, 1000);
console.log("Chat skins intitialized.");
inlineAlert("Commands: /fall, /winter, /normal, /more, /less");
$('.ChatWindow').attr('id','ChatWindow');
// Variable delcarations
var fallCss = '<link href="http://lmbtest.wikia.com/index.php?title=MediaWiki:Fall.css&action=raw&ctype=text/css" rel="stylesheet" type="text/css" id="ChatSkins"/>';
var winterCss = '<link href="http://lmbtest.wikia.com/index.php?title=MediaWiki:Winter.css&action=raw&ctype=text/css" rel="stylesheet" type="text/css" id="ChatSkins"/>';
var skinType = 'normal';
var snowLeft = 0;
var snowflakes;
var totalSnow = 0;
var defaultSnow = 0;
// Chat commands
$('#Write textarea').keydown(function(e) {
	if( $('#Write textarea').val() == "/more" && e.keyCode == 13 && skinType != 'normal' ) {
		unKey(this);
		handleSnow(true);
	} else if( $('#Write textarea').val() == "/less" && e.keyCode == 13 && skinType != 'normal' ) {
		unKey(this);
		handleSnow(false);
	} else if( $('#Write textarea').val() == "/fall" && e.keyCode == 13 ) {
		unKey(this);
		if(skinType != 'fall') {
			goFall();
		} else {
			goNormal();
		}
	} else if( $('#Write textarea').val() == "/normal" && e.keyCode == 13 ) {
		unKey(this);
		goNormal();
	} else if( $('#Write textarea').val() == "/winter" && e.keyCode == 13 ) {
		unKey(this);
		if(skinType != 'winter') {
			goWinter();
		} else {
			goNormal();
		}
	}
});
// Prevent message from sending
function unKey(that) {
	$(that).unbind('keypress').val('');
}
// Inline alerts
function inlineAlert(text) {
	mainRoom.model.chats.add(new models.InlineAlert( {text:(text)} ));
}
// Create initial snow
function createSnow(number) {
	snowflakes = new Snowflakes('ChatWindow', 'snowflakesContainer');
	if(!$.cookie('skinClear')) {
		snowflakes.create(number);
		totalSnow = number;
	}
	console.log("There are a total of "+totalSnow+" objects.");
}
// Add or remove snow
function handleSnow(addSub) {
	if(addSub) {
		snowflakes.moreSnow(defaultSnow);
		totalSnow+=defaultSnow;
		$.cookie('skinClear',null);
	} else {
		if(totalSnow == defaultSnow) {
			snowflakes.lessSnow(defaultSnow);
			totalSnow = 0;
			$.cookie('skinClear','0',{expires: 5});
		} else {
			snowflakes.lessSnow(totalSnow-defaultSnow);
			totalSnow = defaultSnow;
		}
	}
	console.log("There are a total of "+totalSnow+" objects.");
}
// Switch to normal skin
function goNormal() {
	skinType = 'normal';
	totalSnow = 0;
	defaultSnow = 0;
	$('#skinBackground').remove();
	$('#ChatSkins').remove();
	$.cookie('skinType','normal',{expires: 5});
}
// Switch to fall skin
function goFall() {
	clearOld();
	skinType = 'fall';
	defaultSnow = 20;
	snowLeft = 25;
	$('.ChatWindow').prepend('<div id="skinBackground"><div class="fallHover"></div><div id="snowflakesContainer"></div></div>');
	$('head').append(fallCss);
	createSnow(20);
	$.cookie('skinType','fall',{expires: 5});
}
// Switch to winter skin
function goWinter() {
	clearOld();
	skinType = 'winter';
	defaultSnow = 50;
	snowLeft = 0;
	$('.ChatWindow').prepend('<div id="skinBackground"><div id="snowflakesContainer"></div></div>');
	$('head').append(winterCss);
	createSnow(50);
	$.cookie('skinType','winter',{expires: 5});
}
// Reset page for new skin
function clearOld() {
	totalSnow = 0;
	$('#skinBackground').remove();
	$('#ChatSkins').remove();
}

// Falling Things
// https://github.com/dmolsen/CSS3-Snowflakes
function Snowflakes(_pageContainer, _snowflakesContainer) {
	this.snowID = 1;
	this.sizes = new Array('', 'snowflakeSizeSM', 'snowflakeSizeMED', 'snowflakeSizeLRG');
	this.speeds = new Array('', 'snowflakeSpeedSlow', 'snowflakeSpeedMed', 'snowflakeSpeedFast');
	this.opacities = new Array('', 'snowflakeOpacityFaint', 'snowflakeOpacityLight', 'snowflakeOpacityDark');
	this.delays = new Array('', 'snowflakeDelay1', 'snowflakeDelay2', 'snowflakeDelay3', 'snowflakeDelay4', 'snowflakeDelay5', 'snowflakeDelay6');
	this.pageContainer = document.getElementById(_pageContainer);
	this.snowflakesContainer = document.getElementById(_snowflakesContainer);
}
Snowflakes.prototype.randomFromTo = function (from, to) {
	return Math.floor(Math.random() * (to - from + 1) + from);
};
Snowflakes.prototype.findKeyframeAnimation = function (a) {
	var ss = document.styleSheets;
	for (var i = ss.length - 1; i >= 0; i--) {
		try {
			var s = ss[i],
				rs = s.cssRules ? s.cssRules : s.rules ? s.rules : [];

			for (var j = rs.length - 1; j >= 0; j--) {
				if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a) {
					return rs[j];
				}
			}
		} catch (e) {
		}
	}
	return null;
};
Snowflakes.prototype.updateKeyframeHeight = function() {
	if (keyframes = this.findKeyframeAnimation("falling")) {
		var height = this.pageContainer.offsetHeight;
		if ((window.innerHeight) > height) {
			height = window.innerHeight;
		}
		if (keyframes.cssText.match(new RegExp('webkit'))) {
			var newRule = "100% { -webkit-transform: translate3d(0,"+height+"px,0) rotate(360deg); }";
		} else if (keyframes.cssText.match(new RegExp('moz'))) {
            var newRule = "-moz-transform: translate(0,"+height+"px) rotate(360deg);";
		} else {
			var newRule = "transform: translate(0,"+height+"px) rotate(360deg);";
		}
		if (navigator.userAgent.indexOf("Firefox")!=-1) { keyframes.appendRule(newRule); } else { keyframes.insertRule(newRule); }
	}
};
Snowflakes.prototype.create = Snowflakes.prototype.moreSnow = function (snowflakeCount) {
	var i = 0;
	this.updateKeyframeHeight();
	while (i < snowflakeCount) {
		var snowflake = document.createElement('i');
		var size = this.sizes[this.randomFromTo(0, this.sizes.length - 1)];
		var speed = this.speeds[this.randomFromTo(0, this.speeds.length - 1)];
		var opacity = this.opacities[this.randomFromTo(0, this.opacities.length - 1)];
		var delay = this.delays[this.randomFromTo(0, this.delays.length - 1)];
		snowflake.setAttribute('id', 'snowId' + this.snowID);
		snowflake.setAttribute('class', 'snowflake ' + size + ' ' + speed + ' ' + opacity + ' ' + delay);
		snowflake.setAttribute('style', 'left: ' + this.randomFromTo(snowLeft, 100) + '%;');
		this.snowflakesContainer.appendChild(snowflake);
		i++;
		this.snowID++;
	}
};
Snowflakes.prototype.lessSnow = function(snowflakeCount) {
	if (this.snowflakesContainer.childNodes.length >= snowflakeCount) {
		var snowRemoveCount = 0;
		while (snowRemoveCount < snowflakeCount) {
			this.snowflakesContainer.removeChild(this.snowflakesContainer.lastChild);
			snowRemoveCount++;
		}
	}
};

Fall.css

#WikiaPage {
	background-color: transparent !important;
}

.ping {
	color: red !important;
}

.WikiaPage {
	background-color: transparent;
}

.client-js {
	height: 100%;
}

.ChatWindow {
	background-image: url(http://images.wikia.com/lmbtest/images/e/ee/Fall_Tree_Neon.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-color: black;
	background-position: center;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	overflow: hidden;
	height: 100%;
}

#skinBackground {
	position: absolute;
	height: 100%;
	width: 100%;
	margin-top: -10px;
	background-color: rgba(0, 0, 0, 0.3);
}

.fallHover {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	background-image: url(http://images3.wikia.nocookie.net/lmbtest/images/f/f0/Fall_Tree.png);
	opacity: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	position: relative;
	z-index: -1;
}

.ChatWindow:hover .fallHover {
	opacity: 1;
}

#snowflakesContainer {
	top: 0px;
	position: absolute;
	width: 100%;
}

.snowflake {
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease;
	position: absolute;
	display: inline-block;
	background-image: url(http://images.wikia.com/lmbtest/images/b/b8/Fall_Leaf_Neon.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.5;
	width: 4%;
	height: 0;
	padding-bottom: 4%;
	z-index: -1;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-webkit-transform-origin: left -20px;
	-webkit-animation: falling 7.7s linear 2s infinite;
	transform-origin: left -20px;
	animation: falling 7.7s linear 2s infinite;
}

.ChatWindow:hover .snowflake {
	background-image: url(http://images.wikia.com/lmbtest/images/6/63/Fall_Leaf.png);
}

#ChatHeader {
	border-radius: 20px 20px 0 !important;
	background-color: rgba(253, 109, 42, 0.2) !important;
	background-image: none !important;
	pointer-events: all;
	transition: background .4s;
	-moz-transition: background .4s;
	-webkit-transition: background .4s;
	-ms-transition: background .4s;
}

.Chat .you {
	background: none;
}

.Chat .inline-alert {
	text-shadow: 0 0 5px black;
}

#Write .message {
	background: rgba(253, 109, 42, 0.2) !important;
	border: none !important;
	transition: background .4s;
	-moz-transition: background .4s;
	-webkit-transition: background .4s;
	-ms-transition: background .4s;
}

#Write .message:hover,#ChatHeader:hover {
	background: rgba(253, 109, 42, 0.4) !important;
}

#ChatHeader a:not(#partyMenuButton),#partyMenuButton>span,#Rail .User,#Rail .public,#UserStatsMenu .actions li, #chatOptionsButton {
	transition: background .4s;
	-moz-transition: background .4s;
	-webkit-transition: background .4s;
	-ms-transition: background .4s;
}

#ChatHeader .public.wordmark a#partyMenuButton:hover {
	background: none !important;
}

#ChatHeader a:not(#partyMenuButton):hover,#partyMenuButton>span:hover,#partyMenuButton.active>span,#partyMenu,#Rail .User:hover,#Rail .public:hover,#UserStatsMenu .actions li:hover, #chatOptionsButton:hover {
	background: rgba(253, 76, 42, 0.4) !important;
}

#Rail .selected, .ChatWindow #WikiaPage #Rail .private {
	background: rgba(253, 109, 42, 0.2) !important;
}

#Rail .selected:hover,#UserStatsMenu {
	background: rgba(253, 109, 42, 0.4) !important;
}

#UserStatsMenu {
	border: none !important;
	border-radius: 20px !important;
}

#ChatHeader span,#ChatHeader a,#UserStatsMenu li,#UserStatsMenu a,#Rail,.Chat span,#Write textarea {
	color: white !important;
	text-shadow: 0 0 5px black;
}

#Write input {
	border-radius: 0 20px 20px 0 !important;
}

#partyMenu {
	border-radius: 0 0 20px 20px;
}

#Write .message {
	border-radius: 20px !important;
	padding: 0 20px;
}

.ChatWindow #Rail .private {
	background-color: transparent !important;
	background-image: none !important;
}

@keyframes falling {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	100% {
		transform: translate3d(0, 1000px, 0) rotate(360deg);
	}
}

@-webkit-keyframes falling {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
	}

	100% {
		-webkit-transform: translate3d(0, 1000px, 0) rotate(360deg);
	}
}

.snowflakeSizeLRG {
	padding-bottom: 4%;
	width: 4%;
	-webkit-transform-origin: left -30px;
	transform-origin: left -30px;
}

.snowflakeSizeMED {
	padding-bottom: 3%;
	width: 3%;
	-webkit-transform-origin: left -30px;
	transform-origin: left -30px;
}

.snowflakeSizeSM {
	padding-bottom: 2%;
	width: 2%;
	-webkit-transform-origin: -30px 0;
	transform-origin: left -30px;
}

.snowflakeSpeedSlow {
	-webkit-animation-duration: 7.1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: -10px -20px;
	animation-duration: 7.1s;
	animation-iteration-count: infinite;
	transform-origin: -10px -20px;
}

.snowflakeSpeedMed {
	-webkit-animation-duration: 6.6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: -10px -20px;
	animation-duration: 6.6s;
	animation-iteration-count: 12;
	transform-origin: -10px -20px;
}

.snowflakeSpeedFast {
	-webkit-animation-duration: 5.9s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: -10px -20px;
	animation-duration: 5.9s;
	animation-iteration-count: 12;
	transform-origin: -10px -20px;
}

.snowflakeOpacityFaint {
	opacity: 0.1;
}

.snowflakeOpacityLight {
	opacity: 0.3;
}

.snowflakeOpacityDark {
	opacity: 0.7;
}

.snowflakeDelay1 {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
}

.snowflakeDelay2 {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.snowflakeDelay3 {
	-webkit-animation-delay: 4.6s;
	animation-delay: 4.6s;
}

.snowflakeDelay4 {
	-webkit-animation-delay: 6.3s;
	animation-delay: 6.3s;
}

.snowflakeDelay5 {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.snowflakeDelay6 {
	-webkit-animation-delay: 8.1s;
	animation-delay: 8.1s;
}

.snowflakeSizeLRG.snowflakeDelay2 {
	-webkit-animation-timing-function: ease-in-out;
}

.snowflakeSizeLRG.snowflakeDelay1 {
	-webkit-animation-timing-function: ease-out;
}

.snowflakeSizeLRG.snowflakeDelay2 {
	animation-timing-function: ease-in-out;
}

.snowflakeSizeLRG.snowflakeDelay1 {
	animation-timing-function: ease-out;
}

.snowflakeSpeedMed.snowflakeDelay2 {
	opacity: 0.5;
}

.snowflakeSpeedMed.snowflakeDelay1 {
	opacity: 0.3;
}

.snowflakeSpeedFast.snowflakeDelay2 {
	opacity: 0.7;
}

.snowflakeSpeedFast.snowflakeDelay1 {
	opacity: 0.6;
	-webkit-animation-timing-function: ease-in;
	-webkit-transform-origin: left 10px;
	animation-timing-function: ease-in;
	transform-origin: left 10px;
}

.snowflakeSpeedSlow {
	opacity: 0.8;
}

Winter.css

#ChatHeader .User {
	border: none;
	width: auto;
	padding-top: 8px;
}

#ChatHeader .public.wordmark a {
	display: inline-block;
	height: 40px;
	margin-left: 7px;
}

.ChatWindow #Rail .selected, .ChatWindow #UserStatsMenu {
	box-shadow: none;
	-webkit-box-shadow: none;
}

.ChatWindow #Rail .public {
	cursor: pointer;
	padding-bottom: 10px;
}

#ChatHeader .User img {
	display: none;
}

#ChatHeader, #WikiaPage {
	border: none;
}

#UserStatsMenu .info, #WikiaPage {
	background: transparent;
}

#ChatHeader {
	background: url(http://static4.wikia.nocookie.net/__cb20131130211408/lmbtest/images/9/9e/Christmaslights2.gif) !important;
	background-size: auto 100% !important;
	background-repeat: repeat-x !important;
	margin-left: 0;
	margin-right: 0;
}

#ChatHeader .public.wordmark a, #Write .wikia-button {
	background: -webkit-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
	background: -moz-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
	background: linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#162C5E', endColorstr='#3E69BF',GradientType=0 ) !important;
	opacity: .5;
	padding-left: 5px;
	padding-right: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: ease-in-out .5s;
	-moz-transition: ease-in-out .5s;
	transition: ease-in-out .5s;
}

#Write .wikia-button {
	margin-right: 30px;
	margin-bottom: 2px;
	border: 0;
}

#ChatHeader .public.wordmark a:hover, #Write .wikia-button:hover {
	background: -webkit-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
	background: -moz-linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
	background: linear-gradient(#162C5E, #2C4E95, #3E69BF) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#162C5E', endColorstr='#3E69BF',GradientType=0 ) !important;
	opacity: 1;
}

.User .username {
	color: #fff;
}

.Chat li, #chatOptionsButton {
	background-color: rgba(0,0,0,0) !important;
}

#chatOptionsButton {
	width: auto !important;
	font-size: 100% !important;
	font-weight: bold;
	padding: 5px 0 !important;
}

.ChatWindow .Chat {
	border: 0;
}

.Chat .message, .Chat .username, #UserStatsMenu li, #UserStatsMenu .label, #chatOptionsButton, .username, #pingspan, .ChatWindow #UserStatsMenu .edits, .ChatWindow #UserStatsMenu .since, .ChatWindow #UserStatsMenu li span {
	color: #fff !important;
	text-shadow: 0 0 5px #fff;
}

.Chat .inline-alert, .Chat .time {
	color: whitesmoke;
	text-shadow: 0 0 7px #fff;
}

.ChatWindow #Rail .public {
	background: #132759 !important;
}

.ChatWindow #Rail .User {
	background: rgba(0, 0, 0, 0) !important;
	-webkit-transition: ease-in-out .75s;
	-moz-transition: ease-in-out .75s;
	transition: ease-in-out .75s;
}

.ChatWindow #Rail .User:hover, #chatOptionsButton:hover {
	background: -webkit-linear-gradient(#132759, #3967BD, #132759) !important;
	background: -moz-linear-gradient(#132759, #3967BD, #132759) !important;
	background: linear-gradient(#132759, #3967BD, #132759) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#132759', endColorstr='#132759',GradientType=0 ) !important;
	opacity: 1;
}

#Rail, #UserStatsMenu {
	background: -webkit-linear-gradient(rgba(19,39,89,.5), rgba(57,103,189,.5), rgba(19,39,89,.5)) !important;
	background: -moz-linear-gradient(rgba(19,39,89,.5), rgba(57,103,189,.5), rgba(19,39,89,.5)) !important;
	background: -webkit-linear-gradient(rgba(19,39,89,.5), rgba(57,103,189,.5), rgba(19,39,89,.5)) !important;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#132759', endColorstr='#132759',GradientType=0 ) !important;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#Rail {
	overflow-x: hidden;
}

.Write [name="message"] {
	color: #fff;
}

.ChatWindow #UserStatsMenu .actions {
	padding: 0;
}

.ChatWindow #UserStatsMenu {
	border: 0;
	box-shadow: none;
	-webkit-box-shadow: none;
}

.ChatWindow #Write .message {
	background: rgba(254,254,254,.2);
	border: 0;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	padding: 10px;
	-webkit-transition: ease-in .75s;
	-moz-transition: ease-in .75s;
	transition: ease-in .75s;
	width: 100%;
}

.ChatWindow #Write .message:hover {
	background: rgba(254,254,254,.5);
}

.ChatWindow #Rail .private {
	background: #132759 !important;
}

.ChatWindow #Write > img, .ChatWindow .Chat .avatar, .ChatWindow #Rail .User > img, .ChatWindow #UserStatsMenu .info > img {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	border: 0;
}

.Chat a {
	display: inline-block;
	color: #fff;
	text-decoration: underline;
}

#pingspan {
	color: #ccc;
}

.splotch {
	padding: 2px 4px;
	border: 0;
}

@-webkit-keyframes shakey {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
	100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes shakey {
	0% { transform: translate(2px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(0px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(2px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(2px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.Chat a:hover, .ChatWindow #UserStatsMenu .actions li:hover {
	background: transparent;
	-webkit-animation-name: shakey;
	-webkit-animation-duration: 0.8s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	animation-name: shakey;
	animation-duration: 0.8s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#skinBackground {
	background-image: url(http://img.wallbeam.com/36processed/lovely%20winter%20night%20hd%20wallpaper.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #0a0706;
	background-position: center;
	overflow: hidden;
	margin-top: -10px;
	height: 100%;
	width: 100%;
	position: absolute;
}

#snowflakesContainer {
	top: 0px;
	position: absolute;
	width: 100%;
	z-index: 20;
}

.snowflake {
	position: absolute;
	display: inline-block;
	background-color: white;
	opacity: 0.5;
	width: 7px;
	height: 7px;
	z-index: -1;
	border-radius: 50%;
	-webkit-transform-origin: left -20px;
	-webkit-animation: falling 7.7s linear 2s infinite;
	transform-origin: left -20px;
	animation: falling 7.7s linear 2s infinite;
}

@keyframes falling {
	0% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}

	100% {
		transform: translate3d(0, 1000px, 0) rotate(360deg);
	}
}

@-webkit-keyframes falling {
	0% {
		-webkit-transform: translate3d(0, 0, 0) rotate(0deg);
	}

	100% {
		-webkit-transform: translate3d(0, 1000px, 0) rotate(360deg);
	}
}

.snowflakeSizeLRG {
	height: 11px;
	width: 11px;
	-webkit-transform-origin: left -30px;
	transform-origin: left -30px;
}

.snowflakeSizeMED {
	height: 9px;
	width: 9px;
	-webkit-transform-origin: left -30px;
	transform-origin: left -30px;
}

.snowflakeSizeSM {
	height: 5px;
	width: 5px;
	-webkit-transform-origin: -30px 0;
	transform-origin: left -30px;
}

.snowflakeSpeedSlow {
	-webkit-animation-duration: 7.1s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: -10px -20px;
	animation-duration: 7.1s;
	animation-iteration-count: infinite;
	transform-origin: -10px -20px;
}

.snowflakeSpeedMed {
	-webkit-animation-duration: 6.6s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: -10px -20px;
	animation-duration: 6.6s;
	animation-iteration-count: 12;
	transform-origin: -10px -20px;
}

.snowflakeSpeedFast {
	-webkit-animation-duration: 5.9s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: -10px -20px;
	animation-duration: 5.9s;
	animation-iteration-count: 12;
	transform-origin: -10px -20px;
}

.snowflakeOpacityFaint {
	opacity: 0.1;
}

.snowflakeOpacityLight {
	opacity: 0.3;
}

.snowflakeOpacityDark {
	opacity: 0.7;
}

.snowflakeDelay1 {
	-webkit-animation-delay: 3.4s;
	animation-delay: 3.4s;
}

.snowflakeDelay2 {
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.snowflakeDelay3 {
	-webkit-animation-delay: 4.6s;
	animation-delay: 4.6s;
}

.snowflakeDelay4 {
	-webkit-animation-delay: 6.3s;
	animation-delay: 6.3s;
}

.snowflakeDelay5 {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.snowflakeDelay6 {
	-webkit-animation-delay: 8.1s;
	animation-delay: 8.1s;
}

.snowflakeSizeLRG.snowflakeDelay2 {
	-webkit-animation-timing-function: ease-in-out;
}

.snowflakeSizeLRG.snowflakeDelay1 {
	-webkit-animation-timing-function: ease-out;
}

.snowflakeSizeLRG.snowflakeDelay2 {
	animation-timing-function: ease-in-out;
}

.snowflakeSizeLRG.snowflakeDelay1 {
	animation-timing-function: ease-out;
}

.snowflakeSpeedMed.snowflakeDelay2 {
	opacity: 0.5;
}

.snowflakeSpeedMed.snowflakeDelay1 {
	opacity: 0.3;
}

.snowflakeSpeedFast.snowflakeDelay2 {
	opacity: 0.7;
}

.snowflakeSpeedFast.snowflakeDelay1 {
	opacity: 0.6;
	-webkit-animation-timing-function: ease-in;
	-webkit-transform-origin: left 10px;
	animation-timing-function: ease-in;
	transform-origin: left 10px;
}

.snowflakeSpeedSlow {
	opacity: 0.8;
}