.speedo-theme-rain.speedo-container
{
	background: #F1F1F1 none repeat-x scroll 0 0;
	background-clip: padding-box;
	border: 1px solid #E5E5E5;
	outline: 0;
	position: fixed;
	padding: 35px 24px 24px;
	z-index: 100004;
	left: 50%;
	top: 50%;
	color: #333;
}

.speedo-theme-rain .speedo-popup-caption
{
	position: absolute;
	left: 10px;
	top: 4px;
	padding: 0;
	/*margin: -1.8em 0 0;*/
	margin: 0;
	color: #333;
}

.speedo-theme-rain .speedo-popup-drag-area
{
	cursor: move;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 30px;
	z-index: 100;
}

.speedo-theme-rain .speedo-ui-close
{
	position: absolute;
	background: #E54040 url('images/close-btn.png') no-repeat center center;
	right: 0px;
	top: 0px;
	/*width: 46px;
	height: 46px;*/
	width: 30px;
	height: 30px;
	cursor: pointer;
	z-index: 1000;
	
	transition: background-color 1s;
	-moz-transition: background-color 1s;
	-webkit-transition: background-color 1s;
}

.speedo-theme-rain .speedo-ui-close:hover
{
	background-color: #D83C3C;
}

.speedo-theme-rain .speedo-content-holder
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.speedo-theme-rain.speedo-overlay
{
	background: #000;
	filter: alpha(opacity=80);
	-moz-opacity: .80;
    z-index: 10000;
	height: 100%;
    left: 0;
    opacity: 0.8;
    position: fixed;
    top: 0;
    width: 100%;

	/* Draw sky */
	margin: -100px 0;
	padding: 0 0 100px 0;
	background: #c9dbe9;
	background: -webkit-linear-gradient(top, #a1bcd1 75%, #fff 100%);
	background: -linear-gradient(top, #c9dbe9 75%, #fff 100%);
	background: -moz-linear-gradient(top, #a1bcd1 75%, #fff 100%);
	background: -ms-linear-gradient(top, #a1bcd1 75%, #fff 100%);
}

/* Clouds animation */

.speedo-theme-rain.speedo-overlay .cloud
{
	width: 200px; height: 60px;
	background: #fff;
	
	border-radius: 200px;
	-moz-border-radius: 200px;
	-webkit-border-radius: 200px;
	
	position: relative; 
}

.speedo-theme-rain.speedo-overlay .cloud:before,
.speedo-theme-rain.speedo-overlay .cloud:after
{
	content: '';
	position: absolute; 
	background: #fff;
	width: 100px; height: 80px;
	position: absolute; top: -15px; left: 10px;
	
	border-radius: 100px;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
	-moz-transform: rotate(30deg);
}

.speedo-theme-rain.speedo-overlay .cloud:after
{
	width: 120px; height: 120px;
	top: -55px; left: auto; right: 15px;
}

/* Time to animate */
.speedo-theme-rain.speedo-overlay .x1
{
	-webkit-animation: moveclouds 15s linear infinite;
	-moz-animation: moveclouds 15s linear infinite;
	-o-animation: moveclouds 15s linear infinite;
	-ms-animation: moveclouds 15s linear infinite;
	animation: moveclouds 15s linear infinite;
}

.speedo-theme-rain.speedo-overlay .x2
{
	left: 200px;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
	opacity: 0.6; 
	
	-webkit-animation: moveclouds 25s linear infinite;
	-moz-animation: moveclouds 25s linear infinite;
	-o-animation: moveclouds 25s linear infinite;
	-ms-animation: moveclouds 25s linear infinite;
	animation: moveclouds 25s linear infinite;
}

.speedo-theme-rain.speedo-overlay .x3
{
	left: -250px; top: -200px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
	-ms-animation: moveclouds 20s linear infinite;
	animation: moveclouds 20s linear infinite;
}

.speedo-theme-rain.speedo-overlay .x4
{
	left: 470px; top: -250px;
	
	-webkit-transform: scale(0.75);
	-moz-transform: scale(0.75);
	transform: scale(0.75);
	opacity: 0.75; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 18s linear infinite;
	-moz-animation: moveclouds 18s linear infinite;
	-o-animation: moveclouds 18s linear infinite;
	-ms-animation: moveclouds 18s linear infinite;
	animation: moveclouds 18s linear infinite;
}

.speedo-theme-rain.speedo-overlay .x5
{
	left: -150px; top: -150px;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 0.8; /*opacity proportional to the size*/
	
	-webkit-animation: moveclouds 20s linear infinite;
	-moz-animation: moveclouds 20s linear infinite;
	-o-animation: moveclouds 20s linear infinite;
	-ms-animation: moveclouds 20s linear infinite;
	animation: moveclouds 20s linear infinite;
}

@-webkit-keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds
{
	0% {margin-left: 1000px; background: red;}
	100% {margin-left: -1000px; background: orange;}
}
@-ms-keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

@keyframes moveclouds
{
	0% {margin-left: 1000px;}
	100% {margin-left: -1000px;}
}

/* Rain drops animation.*/

/* default animation and transform */
.speedo-theme-rain.speedo-overlay span
{
	display: inline-block;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	-webkit-animation: falling 3s linear 2s 20;
	-webkit-transform-origin: left -20px;
	-webkit-animation-direction:normal;
	/*-webkit-animation-iteration-count: 20;*/
	/*-webkit-animation-delay: 2s;*/
	-webkit-animation-fill-mode: none;
	-webkit-animation-play-state:running;
	/* or */
	-moz-animation: falling 3s linear 2s 20;
	-o-animation: falling 3s linear 2s 20;
	-ms-animation: falling 3s linear 2s 20;
	animation: falling 3s linear 2s 20;
}

/* playing with timing functions to make it a teeny bit more random like */
.speedo-theme-rain.speedo-overlay span:nth-of-type(5n)
{
	-webkit-animation-timing-function:ease-in-out;
	-moz-animation-timing-function:ease-in-out;
	-o-animation-timing-function:ease-in-out;
	-ms-animation-timing-function:ease-in-out;
	animation-timing-function:ease-in-out;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(5n+1)
{
	-webkit-animation-timing-function:ease-out;
	-moz-animation-timing-function:ease-out;
	-o-animation-timing-function:ease-out;
	-ms-animation-timing-function:ease-out;
	animation-timing-function:ease-out;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(5n+2)
{
	-webkit-animation-timing-function:ease;
	-moz-animation-timing-function:ease;
	-o-animation-timing-function:ease;
	-ms-animation-timing-function:ease;
	animation-timing-function:ease;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(5n+3)
{
	-webkit-animation-timing-function:ease-in;
	-moz-animation-timing-function:ease-in;
	-o-animation-timing-function:ease-in;
	-ms-animation-timing-function:ease-in;
	animation-timing-function:ease-in;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(5n+4)
{
	-webkit-animation-timing-function:linear;
	-moz-animation-timing-function:linear;
	-o-animation-timing-function:linear;
	-ms-animation-timing-function:linear;
	animation-timing-function:linear;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(11n)
{
	-webkit-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
	-moz-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
	-o-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
	-ms-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
	animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);
}
	
/* playing with opacity to make it a teeny bit more random like */
.speedo-theme-rain.speedo-overlay span:nth-of-type(7n){opacity: 0.5}
.speedo-theme-rain.speedo-overlay span:nth-of-type(7n+2) {opacity: 0.3}
.speedo-theme-rain.speedo-overlay span:nth-of-type(7n+4) {opacity: 0.7}
.speedo-theme-rain.speedo-overlay span:nth-of-type(7n+6)
{
	opacity: 0.6;
	-webkit-animation-timing-function:ease-in;
	-webkit-transform-origin: left 10px;
	-moz-animation-timing-function:ease-in;
	-moz-transform-origin: left 10px;
	-o-animation-timing-function:ease-in;
	-o-transform-origin: left 10px;
	-ms-animation-timing-function:ease-in;
	-ms-transform-origin: left 10px;
	animation-timing-function:ease-in;
	transform-origin: left 10px;
}
.speedo-theme-rain.speedo-overlay span:nth-of-type(7n+1){opacity: 0.8}

/* different sizes, and default origins based on size */
.speedo-theme-rain.speedo-overlay span:nth-of-type(4n)
{
	height:30px;
	width:30px;
	-webkit-transform-origin: right -30px;
	-moz-transform-origin: right -30px;
	-o-transform-origin: right -30px;
	-ms-transform-origin: right -30px;
	transform-origin: right -30px;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+1)
{
	height:24px;
	width:24px;
	-webkit-transform-origin: left -30px;
	-moz-transform-origin: left -30px;
	-o-transform-origin: left -30px;
	-ms-transform-origin: left -30px;
	transform-origin: left -30px;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+2)
{
	height:10px;
	width:10px;
	-webkit-transform-origin: -30px 0;
	-moz-transform-origin: -30px 0;
	-o-transform-origin: -30px 0;
	-ms-transform-origin: -30px 0;
	transform-origin: -30px 0;
}
	
/* different speeds, with iteration counts to equal 3minutes approx. */
.speedo-theme-rain.speedo-overlay span:nth-of-type(4n)
{
	-webkit-animation-duration: 5.3s; 
	-webkit-animation-iteration-count: 12;
	-webkit-transform-origin: -10px -20px;
	-moz-animation-duration: 5.3s; 
	-moz-animation-iteration-count: 12;
	-moz-transform-origin: -10px -20px;
	-o-animation-duration: 5.3s; 
	-o-animation-iteration-count: 12;
	-o-transform-origin: -10px -20px;
	-ms-animation-duration: 5.3s; 
	-ms-animation-iteration-count: 12;
	-ms-transform-origin: -10px -20px;
	animation-duration: 5.3s; 
	animation-iteration-count: 12;
	transform-origin: -10px -20px;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+1)
{
	-webkit-animation-duration: 3.1s; 
	-webkit-animation-iteration-count: 20;
	-webkit-transform-origin: 10px -20px;
	-moz-animation-duration: 3.1s; 
	-moz-animation-iteration-count: 20;
	-moz-transform-origin: 10px -20px;
	-o-animation-duration: 3.1s; 
	-o-animation-iteration-count: 20;
	-o-transform-origin: 10px -20px;
	-ms-animation-duration: 3.1s; 
	-ms-animation-iteration-count: 20;
	-ms-transform-origin: 10px -20px;
	animation-duration: 3.1s; 
	animation-iteration-count: 20;
	transform-origin: 10px -20px;
}
.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+2)
{
	-webkit-animation-duration: 1.7s;
	-webkit-animation-iteration-count: 35;
	-webkit-transform-origin: right -20px;
	-moz-animation-duration: 1.7s;
	-moz-animation-iteration-count: 35;
	-moz-transform-origin: right -20px;
	-o-animation-duration: 1.7s;
	-o-animation-iteration-count: 35;
	-o-transform-origin: right -20px;
	-ms-animation-duration: 1.7s;
	-ms-animation-iteration-count: 35;
	-ms-transform-origin: right -20px;
	animation-duration: 1.7s;
	animation-iteration-count: 35;
	transform-origin: right -20px;
}

/* different delays so they don't all start at the same time */
.speedo-theme-rain.speedo-overlay span:nth-of-type(3n)
{
	-webkit-animation-delay: 2.3s;
	-moz-animation-delay: 2.3s;
	-o-animation-delay: 2.3s;
	-ms-animation-delay: 2.3s;
	animation-delay: 2.3s;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(3n+1)
{
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-o-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(3n+2)
{
	-webkit-animation-delay: 3.4s;
	-moz-animation-delay: 3.4s;
	-o-animation-delay: 3.4s;
	-ms-animation-delay: 3.4s;
	animation-delay: 3.4s;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n):before
{
	left: 4px;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+1):before
{
	left: 2px;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+2):before
{
	border-width: 5px;
	top: -8px;
	left: -1px;
}
	
.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+3):before
{
	border-width: 8px;
	left: -1px;
	top: -13px;
}	
	
/* different speeds, with iteration counts to equal 3minutes approx. */
.speedo-theme-rain.speedo-overlay span:nth-of-type(4n)
{
	-webkit-animation-duration: 2s; 
	-webkit-animation-iteration-count: 24;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+1)
{
	-webkit-animation-duration: 1.5s; 
	-webkit-animation-iteration-count: 40;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(4n+2)
{
	-webkit-animation-duration: 1.75s;
	-webkit-animation-iteration-count: 70;
}	
	
.speedo-theme-rain.speedo-overlay span:nth-of-type(3n)
{
	-webkit-animation-delay: 1.1s;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(3n+1)
{
	-webkit-animation-delay: .2s;
}

.speedo-theme-rain.speedo-overlay span:nth-of-type(3n+2)
{
	-webkit-animation-delay: 1.9s;
}
	 
.speedo-theme-rain.speedo-overlay span
{
	background-image: none;
	background-color: #fff;
	position:relative;
	-webkit-animation-name: fallingrain;
	opacity: 1 !important;
	-webkit-transform-origin:0 0;

}
	
@-webkit-keyframes fallingrain
{
	0% {-webkit-transform: translate3d(-200px,0,0) rotate(-15deg) scale(0.9,0.9); }
	100% { -webkit-transform: translate3d(200px,2000px,0) rotate(-15deg) scale(1.1,1.1); }	
}