/* Global setup
----------------------------------------------------------------------- */

/* This is the main container, housing all animation elements */
#seasonsAnim {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1136px;
	z-index: -1;
}

/* This is an element with a repeating gradient background which gradually 
   fades the falling leaves out when they reach the bottom of it */
.masker {
	position: absolute;
	bottom: -200px;
	width: 100%;
	height: 500px;
	z-index: 1;
	background: url(../images/global/bgs/sky_bg_mask.png) 0 0 repeat-x;
}





/* Main season container ----------------------------------------- */

/* All seasons are positioned in the top left of the screen and are
   as wide as the viewport. */
.season {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%; /* masker top + height */
	overflow: hidden;
}

/* This is a class utilized by the JS to calculate dimensions and
   positioning, needed to pin the trees to the viewport corners. */
.offscreen {
	display: block;
	left: -9999px;
	top: -9999px;
}





/* Trees ----------------------------------------- */

/* Both trees are pinned to the top corners of the viewport. */
.tree {
	position: absolute;
	top: 0;
}

.tree.left { left: 0; }

.tree.right { right: 0; }

/* individual branches */
.tree li { list-style: none; position: absolute; }






/* Falling leaves ----------------------------------------- */

/* This houses the falling leaves. */
.season .leaf-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

/* The li's are the actual leaves */
.leaf-container li {
	position: absolute;
	list-style: none;
}








/* Summer
----------------------------------------------------------------------- */

/* Branches ----------------------------------------- */

/* The branches all use the same image to minimize filesize. The branches are
   then tiled using absolute positioning. */
#season-summer .tree li {
	width: 197px;
	height: 191px;
	background-image: url(../images/global/seasons/summer-branches.png);
}

#season-summer .tree.left {
	width: 371px;
	height: 635px;
	padding: 0 300px 0 0; /* this is the overlap, ignored in the js */
}

#season-summer .tree.right {
	width: 383px;
	height: 741px;
}

/* Positioning setup of the branches */
#season-summer .tree.left li {
	background-position: 0 100%;
	margin: -80px 0 0 -99px; /* place the "anchor" in the center using half-width and half-height */
}

#season-summer .tree.right li {
	background-position: 0 0;
	margin: -80px -99px 0 0; /* place the "anchor" in the center using half-width and half-height */
}


/* Number of branches is defined in the JS. */

/* Left branches */
#season-summer .left .branch-0 { top: 321px; left: 159px; }
#season-summer .left .branch-1 { top: 339px; left: -2px; }
#season-summer .left .branch-2 { top: 502px; left: 155px; }
#season-summer .left .branch-3 { top: -64px; left: 551px; }
#season-summer .left .branch-4 { top: 518px; left: 38px; }
#season-summer .left .branch-5 { top: 642px; left: 19px; }
#season-summer .left .branch-6 { top: 127px; left: 92px; }
#season-summer .left .branch-7 { top: 289px; left: 82px; }
#season-summer .left .branch-8 { top: 240px; left: 31px; }
#season-summer .left .branch-9 { top: 51px; left: 16px; }
#season-summer .left .branch-10 { top: -25px; left: 432px; }
#season-summer .left .branch-11 { top: 463px; left: 293px; }
#season-summer .left .branch-12 { top: 572px; left: 207px; }
#season-summer .left .branch-13 { top: 467px; left: 406px; }
#season-summer .left .branch-14 { top: 53px; left: 248px; }
#season-summer .left .branch-15 { top: 97px; left: 365px; }
#season-summer .left .branch-16 { top: -57px; left: 132px; }

/* Right branches */
#season-summer .right .branch-0 { top: 75px; right: 60px; }
#season-summer .right .branch-1 { top: 498px; right: 132px; }
#season-summer .right .branch-2 { top: 582px; right: 17px; }
#season-summer .right .branch-3 { top: 619px; right: 70px; }
#season-summer .right .branch-4 { top: 540px; right: 160px; }
#season-summer .right .branch-5 { top: 387px; right: -55px; }
#season-summer .right .branch-6 { top: 467px; right: -67px; }
#season-summer .right .branch-7 { top: 385px; right: 83px; }
#season-summer .right .branch-8 { top: 561px; right: 266px; }
#season-summer .right .branch-9 { top: 552px; right: 365px; }
#season-summer .right .branch-10 { top: 506px; right: 245px; }
#season-summer .right .branch-11 { top: 198px; right: -3px; }
#season-summer .right .branch-12 { top: 120px; right: -80px; }
#season-summer .right .branch-13 { top: -76px; right: 227px; }
#season-summer .right .branch-14 { top: -48px; right: 230px; }
#season-summer .right .branch-15 { top: 6px; right: 273px; }
#season-summer .right .branch-16 { top: 2px; right: 143px; }
#season-summer .right .branch-17 { top: 151px; right: 219px; }


/* Falling leaves ----------------------------------------- */

/* Leaves utilize a sprite to provide some variety */
#season-summer .leaf-container li {
	background-image: url(../images/global/seasons/summer-leaves.png);
}

/* Number of leaf types are defined in the Foh settings in the JS */
#season-summer .type1 { width: 33px; height: 28px; background-position: -1px 0; }
#season-summer .type2 { width: 25px; height: 33px; background-position: -5px -30px; }
#season-summer .type3 { width: 24px; height: 26px; background-position: -5px -69px; }






/* Fall
----------------------------------------------------------------------- */

/* Branches ----------------------------------------- */

#season-fall .tree li {
	width: 245px;
	height: 266px;
	background-image: url(../images/global/seasons/fall-branches.png);
}

#season-fall .tree.left {
	width: 417px;
	height: 817px;
	padding: 0 140px 0 0; /* this is the overlap, ignored in the js */
}

#season-fall .tree.right {
	width: 313px;
	height: 893px;
	padding: 0 0 0 40px; /* this is the overlap, ignored in the js */
}

#season-fall .tree.left li {
	background-position: 0 0;
}

#season-fall .tree.right li {
	background-position: 0 -266px;
}


/* Left branches */
							/*	Y			X		*/
#season-fall .left .branch-0 { top: -127px; left: 345px; }
#season-fall .left .branch-1 { top: -54px; left: 169px; }
#season-fall .left .branch-2 { top: -40px; left: -15px; }
#season-fall .left .branch-3 { top: 148px; left: 0px; }
#season-fall .left .branch-4 { top: 292px; left: -30px; z-index:3; }
#season-fall .left .branch-5 { top: 355px; left: 140px; z-index:2; }
#season-fall .left .branch-6 { top: 413px; left: 235px; }
#season-fall .left .branch-7 { top: 422px; left: 34px; z-index:4; }
#season-fall .left .branch-8 { top: 500px; left: -45px; z-index:5; }
#season-fall .left .branch-9 { top: 593px; left: -120px; }

/* Right branches */
#season-fall .right .branch-0 { top: -120px; right: 45px; }
#season-fall .right .branch-1 { top: -31px; right: -40px; }
#season-fall .right .branch-2 { top: 109px; right: -9px; }
#season-fall .right .branch-3 { top: 276px; right: -129px; }
#season-fall .right .branch-4 { top: 382px; right: -56px; }
#season-fall .right .branch-5 { top: 463px; right: -8px; }
#season-fall .right .branch-6 { top: 492px; right: 114px; }
#season-fall .right .branch-7 { top: 595px; right: -39px; }
#season-fall .right .branch-8 { top: 669px; right: -160px; }

/* Falling leaves ----------------------------------------- */

#season-fall .leaf-container li {
	background: url(../images/global/seasons/fall-leaves.png) no-repeat;
}

#season-fall .type1 { width: 57px; height: 37px; background-position: 0 0; }
#season-fall .type2 { width: 78px; height: 44px; background-position: 0 44px; }
#season-fall .type3 { width: 53px; height: 35px; background-position: 0 -97px; }







/* Winter
----------------------------------------------------------------------- */

/* Fall
----------------------------------------------------------------------- */

/* Branches ----------------------------------------- */

#season-winter .tree li {
	width: 245px;
	height: 266px;
	background-image: url(../images/global/seasons/winter-branches1.png);
}

#season-winter .tree.left {
	width: 417px;
	height: 817px;
	padding: 0 140px 0 0; /* this is the overlap, ignored in the js */
}

#season-winter .tree.right {
	width: 313px;
	height: 893px;
	padding: 0 0 0 40px; /* this is the overlap, ignored in the js */
}

#season-winter .tree.left li {
	background-position: 0 0;
}

#season-winter .tree.right li {
	background-position: 0 -266px;
}


/* Left branches */
							/*	Y			X		*/
#season-winter .left .branch-0 { top: -127px; left: 345px; }
#season-winter .left .branch-1 { top: -54px; left: 169px; }
#season-winter .left .branch-2 { top: -40px; left: -15px; }
#season-winter .left .branch-3 { top: 148px; left: 70px; }
#season-winter .left .branch-4 { top: 292px; left: -10px; z-index:3; }
#season-winter .left .branch-5 { top: 355px; left: 140px; z-index:2; }
#season-winter .left .branch-6 { top: 413px; left: 235px; }
#season-winter .left .branch-7 { top: 422px; left: 34px; z-index:4; }
#season-winter .left .branch-8 { top: 500px; left: -45px; z-index:5; }
#season-winter .left .branch-9 { top: 593px; left: -120px; }
#season-winter .left .branch-10 { top: 276px; left: 129px; }
#season-winter .left .branch-11 { top: 148px; left: -30px; }


/* Right branches */
#season-winter .right .branch-0 { top: -120px; right: 45px; }
#season-winter .right .branch-1 { top: -31px; right: -40px; }
#season-winter .right .branch-2 { top: 109px; right: -9px; }
#season-winter .right .branch-3 { top: 276px; right: -129px; }
#season-winter .right .branch-4 { top: 382px; right: -56px; }
#season-winter .right .branch-5 { top: 463px; right: -8px; }
#season-winter .right .branch-6 { top: 492px; right: 114px; }
#season-winter .right .branch-7 { top: 595px; right: -39px; }
#season-winter .right .branch-8 { top: 630px; right: -160px; }

/* Falling leaves ----------------------------------------- */

#season-winter .leaf-container li {
	background: url(../images/global/seasons/winter-flakes.png) no-repeat;
}

#season-winter .type1 { width: 57px; height: 37px; background-position: 0 0; }
#season-winter .type2 { width: 78px; height: 44px; background-position: 0 44px; }
#season-winter .type3 { width: 53px; height: 35px; background-position: 0 -97px; }





/* Spring
----------------------------------------------------------------------- */

/* Branches ----------------------------------------- */

#season-spring .tree li {
	width: 200px;
	height: 191px;
	background-image: url(../images/global/seasons/spring-branches.png);
}

#season-spring .tree.left {
	width: 371px;
	height: 713px;
	padding: 0 140px 0 0; /* this is the overlap, ignored in the js */
}

#season-spring .tree.right {
	width: 369px;
	height: 735px;
	padding: 0 0 0 40px; /* this is the overlap, ignored in the js */
}

#season-spring .tree.left li {
	background-position: 0 100%;
	margin: -80px 0 0 -100px; /* place the "anchor" in the center using half-width and half-height */
}

#season-spring .tree.right li {
	background-position: 0 0;
	margin: -80px -100px 0 0; /* place the "anchor" in the center using half-width and half-height */
}


/* Left branches */
#season-spring .left .branch-0 { top: px; left: px; }
#season-spring .left .branch-1 { top: px; left: px; }
#season-spring .left .branch-2 { top: px; left: px; }
#season-spring .left .branch-3 { top: px; left: px; }
#season-spring .left .branch-4 { top: px; left: px; }
#season-spring .left .branch-5 { top: px; left: px; }
#season-spring .left .branch-6 { top: px; left: px; }
#season-spring .left .branch-7 { top: px; left: px; }
#season-spring .left .branch-8 { top: px; left: px; }
#season-spring .left .branch-9 { top: px; left: px; }
#season-spring .left .branch-10 { top: px; left: px; }

/* Right branches */
#season-spring .right .branch-0 { top: px; right: px; }
#season-spring .right .branch-1 { top: px; right: px; }
#season-spring .right .branch-2 { top: px; right: px; }
#season-spring .right .branch-3 { top: px; right: px; }
#season-spring .right .branch-4 { top: px; right: px; }
#season-spring .right .branch-5 { top: px; right: px; }
#season-spring .right .branch-6 { top: px; right: px; }
#season-spring .right .branch-7 { top: px; right: px; }
#season-spring .right .branch-8 { top: px; right: px; }
#season-spring .right .branch-9 { top: px; right: px; }
#season-spring .right .branch-10 { top: px; right: px; }


/* Falling leaves ----------------------------------------- */

#season-spring .leaf-container li {
	background-image: url(../images/global/seasons/spring-leaves.png);
}

#season-spring .type1 { width: 57px; height: 37px; background-position: 0 0; }
#season-spring .type2 { width: 78px; height: 44px; background-position: 0 -44px; }
#season-spring .type3 { width: 53px; height: 35px; background-position: 0 -97px; }