@charset "UTF-8";
/* CSS Document */

	body{margin:0px}

	img{max-width:100%;}

	#page{
		width:100vw;
		height:600vw;
		position:relative;
	
		overflow:hidden;
		
		background-color:none;
		z-index:3;
		}
		
	#bg{
		width:100%;
		position:relative;
		top:-.1vw;
		height:610vw;
		
		z-index:1;
		}

/* Introduction */

	#title{
		position:absolute;
		top:29vw;
		left:27vw;
		
		font-size:8.5vw;
		font-family: "marydale",sans-serif;
		color:white;
		
		background-color:none; 
		z-index:20;
		}

	#title2{
		position:absolute;
		top:34vw;
		left:37vw;
		
		font-size:13vw;
		font-family: "marydale",sans-serif;
		color:white;
		
		background-color:none; 
		z-index:20;
		}
		
	#the{
		position:absolute;
		top:39vw;
		left:22.3vw;
		
		font-size:8.5vw;
		font-family: "marydale",sans-serif;
		color:white;
		
		background-color:none; 
		z-index:20;
		}

	#laburnum{
		width:36%;
		position:absolute;
		top:.25vw;
		margin:2%;
		margin-left:0%;
			
		background-color:none;
		z-index:5;
		}
			
	#laburnum2{
		width:32%;
		position:absolute;
		top:75vw;
		left:66vw;
		margin:2%;
		margin-right:0%;
			
		background-color:none;
		z-index:5;
		}

	#factoids{
		width:100%;
		position:absolute;
		top:2vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		text-align:right;
		color:#494848;
			
		background-color:none;
		z-index:100;
		}	
	
	#factoid{
		width:73%;
		position:absolute;
		top:80vw;
		left:3vw;
					
		background-color:none;
		z-index:18;
		}
		
	#factoid2{
		width:60%;
		position:absolute;
		top:92vw;
		left:15vw;
					
		background-color:none;
		z-index:40;
		}
			
	#factoid3{
		width:60%;
		position:absolute;
		top:102vw;
		left:19vw;
			
		background-color:none;
		z-index:5;
		}

/* Robin Tale */

	#robin{
		width:58%;
		position:absolute;
		top:161vw;
		left:43vw;
			
		background-color:none;
		z-index:5;
		}
			
	#factoid5{
		width:45%;
		position:absolute;
		top:186vw;
		left:14.5vw;
		
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:25;
		}

	#robinback{
		width:58%;
		position:absolute;
		top:266vw;
			
		background-color:none;
		z-index:5;
		}

	#bird{
		width:25%;
		position:absolute;
		top:242vw;
		left:64vw;
			
		background-color:none;
		z-index:5;
		}
		
	#factoid6{
		width:40%;
		position:absolute;
		top:205vw;
		left:60vw;
		
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:25;
		}
		
	.indent{
		text-indent:100px;
		font-size:1.8vw;
		}
		
	#smaller{
		width:55%;
		position:absolute;
		left:7.6vw;
		font-size:1.2vw;
		}

	#factoid7{
		width:30%;
		position:absolute;
		top:242vw;
		left:11vw;
		
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:25;
		}
		
	#branch{
		width:50%;
		position:absolute;
		top:135vw;
		
		z-index:2;
		}
	
	#branch2{
		width:45%;
		position:absolute;
		top:255vw;
		left:55vw;
		
		z-index:2;
		}
	
	#branch3{
		width:39%;
		position:absolute;
		top:145vw;
		left:62vw;
		opacity:0.8;
		
		z-index:2;
		}
	
	#branch4{
		width:60%;
		position:absolute;
		top:200vw;
		
		z-index:2;
		}

		/* The Tale... */
		
		#robintale{
			width:70%;
			position:absolute;
			top:160vw;
			left:1.9vw;
			
			transform:rotate(0deg);
			
			font-size:6vw;
			font-family: "marydale",sans-serif;
			text-align:left;
			color:white;
			
			background-color:blue;
			z-index:19;
			}
			
		#robintale2{
			width:70%;
			position:absolute;
			left:14vw;
		
			
			transform:rotate(-5deg);
			z-index:5;
			display:none;
			}
			
		#robintale3{
			width:70%;
			position:absolute;
			left:17vw;
			top:6.1vw;
			
			transform:rotate(-5deg);
			z-index:5;
			}
			
		#robintale4{
			width:70%;
			position:absolute;
			left:14vw;
			top:12.8vw;
			
			transform:rotate(-5deg);
			z-index:5;
			}

		#hover{
			width:25vw;
			height:6vw;
			position:absolute;
			top:175vw;
			left:27.5vw;

			transform:rotate(-5deg);

			background-color:red;
			z-index:46;
			display:none;
			}

		#aerophobia{
			width:13%;
			position:absolute;
			left:29.3vw;
			top:177.2vw;

			font-size:1.3vw;
			font-family: "marydale",sans-serif;
			text-align:left;
			color:white;
			line-height:160%;
			
			transform:rotate(-5deg);
			z-index:5;
			}

/* Chameleon Tale */

	#chameleonlook{
		width:74%;
		position:absolute;
		top:353vw;
			
		background-color:none;
		z-index:5;
		}
			
	#eye{
		width:1.1%;
		position:absolute;
		top:193.5vw;
		left:56vw;
			
		transform:rotate(5deg);
		z-index:5;
		}
			
	#fade{
		width:68%;
		position:absolute;
		top:418vw;
		left:30vw;
		margin:2%;
		margin-right:0%;
		
		background-color:none;
		z-index:41;
		}
			
	#eyefade{
		width:1.1%;
		position:absolute;
		top:19.5vw;
		left:20.8vw;
			
		transform:rotate(0deg);
		z-index:44;
		}
	
	#fulleyefade{
		width:8.5%;
		position:absolute;
		top:16.65vw;
		left:18.65vw;
			
		background-color:none;
		transform:rotate(0deg);
		z-index:43;
		}
			
	#group{
		width:29%;
		position:absolute;
		top:415vw;
			
		background-color:none;
		z-index:5;
		}
			
	#fly{
		width:2.5%;
		position:absolute;
		left:100vw;
		top:375vw;
			
		background-color:none;
		z-index:30;
		}
	
	#chameleonfade{
		width:100%;
		position:absolute;
		top:1vw;
		
		z-index:42;}
		
	#twigfade{
		width:100%;
		position:absolute;
		top:.5vw;
		
			
		background-color:none;
		z-index:5;
		}	
			
	#factoid8{
		width:45%;
		position:absolute;
		top:378vw;
		left:14vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
			
	#factoid9{
		width:38%;
		position:absolute;
		top:390vw;
		left:8vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
			
	#factoid10{
		width:30%;
		position:absolute;
		top:440vw;
		left:7vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
		
	#leaf{
		width:60%;
		position:absolute;
		top:312vw;
		left:40vw;
		
		z-index:2;
		}
		
	#leaf2{
		width:60%;
		position:absolute;
		top:388vw;
		left:40vw;
		
		z-index:2;
		}
		
	#leaf3{
		width:50%;
		position:absolute;
		top:330vw;
		opacity:.8;
		
		z-index:2;
		}
				
		/* The Tale... */
		
		#chameleontale{
			width:70%;
			position:absolute;
			top:350vw;
			left:39vw;
			
			transform:rotate(0deg);
			
			font-size:6vw;
			font-family: "marydale",sans-serif;
			text-align:left;
			color:white;
			
			background-color:blue;
			z-index:19;
			}
			
		#chameleontale2{
			width:70%;
			position:absolute;
			left:7vw;
			
			transform:rotate(-8deg);
			}
			
		#chameleontale3{
			width:70%;
			position:absolute;
			left:15vw;
			top:5vw;
			
			transform:rotate(-8deg);
			}
			
		#chameleontale4{
			width:70%;
			position:absolute;
			left:23vw;
			top:10vw;
			
			transform:rotate(-8deg);
			display:none;
			}

/* Ending/References */
		
	#laburnum3{
		width:36%;
		position:absolute;
		top:490vw;
		margin:2%;
		margin-left:0%;
			
		background-color:none;
		z-index:5;
		}
			
	#laburnum4{
		width:36%;
		position:absolute;
		top:550vw;
		left:61.7vw;
		margin:2%;
		margin-right:0%;
			
		background-color:none;
		z-index:5;
		}
		
	#factoid11{
		width:50%;
		position:absolute;
		top:512vw;
		left:27vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
		
	#factoid12{
		width:60%;
		position:absolute;
		top:524vw;
		left:21vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
		
	#learn{
		width:70%;
		position:absolute;
		top:568vw;
		left:51vw;
			
		font-size:2vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
			
	#click{
		width:21%;
		position:absolute;
		top:568vw;
		height:3vw;
		left:51vw;
			
		background-color:none;
		z-index:6;
		}
		
	#links{
		width:70%;
		position:absolute;
		top:570vw;
			
		font-size:1.5vw;
		font-family: "calluna",serif;
		color:#494848;
			
		background-color:none;
		z-index:5;
		}
			
		a:link{text-decoration:none; color:#494848;}
		a:visited{text-decoration:none; color:#494848;}
		a:hover{text-decoration:none; color:#908C8C}
		a:active{text-decoration:none; color:#908C8C}
			
	#link1{
		width:100%;
		position:absolute;
		top:1.75vw;
		left:47.5vw;
			
		background-color:none;
		z-index:5;
		display:none;
		}
			
	#link2{
		width:100%;
		position:absolute;
		top:6.75vw;
		left:58vw;
			
		background-color:none;
		z-index:5;
		display:none;
		}
	
	#link3{
		width:100%;
		position:absolute;
		top:11.75vw;
		left:45vw;
	
		background-color:none;
		z-index:5;
		display:none;
		}
			
	#link4{
		width:100%;
		position:absolute;
		top:16.75vw;
		left:43.5vw;
			
		background-color:none;
		z-index:5;
		display:none;
		}
			
	#link5{
		width:100%;
		position:absolute;
		top:21.75vw;
		left:65vw;
			
		background-color:none;
		z-index:5;
		display:none;
		}