/* ---------------------------------------- 
Rachel J. Lee
---------------------------------------- */

/* NOTES:

1. DO NOT use width or height properties for any parent-level divs (these are divs you will be adding classes to).
2. Use % over px for sizing interior divs
3. Remember: if you do not give dimention and style to interior divs, we will not see them. By default, divs are invisible.

*/

/* so we can tell that our file is loading */
body {
	background-color: wheat;
}

div {
	border: none;
}

/*___________________________________________________________________________________*/


.red-rl {
	background-color: firebrick;
}

.red-rl:hover {
	background-color: seagreen;
	cursor: pointer;
	
}

.red-rl:active {
	background: url(../images/leaves2.gif) no-repeat;
	background-size: 100%;
}

.red-rl div {
    background-size: 100%;
    background-color: firebrick;
    animation-name: redchange;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    left:0px;
    top:0px;
   	transform:rotate(0deg);
   	border-style: none;

}

@keyframes redchange {
    0% {background-color: firebrick;}
    50% {background-color: seagreen;}
    100% {background-color: firebrick;}
}


/*______________________________________________________________________________________*/


.brown-rl {
	background-color: sandybrown;
	background-size:100%;

}

.brown-rl div{
 	background-size:100%;
 	background-color: sandybrown;
 	animation-name: brownchange;
 	animation-duration: 4s;
 	animation-iteration-count: infinite;
 	border-style: none;
 	animation-delay: 1s;
}

@keyframes brownchange {
		0% {background-color: firebrick;}
		50% {background-color: sandybrown;}
		100% {background-color: firebrick;}
}

.brown-rl:hover {
	background-color: firebrick;
	cursor: pointer;
}

.brown-rl:active {
	background: url(../images/leaves2.gif) no-repeat;
	background-size:100%;

}

/*_______________________________________________________________________________________*/

.green-rl {
	background-color: seagreen;
}

.green-rl div{
 	background-size: 100%;
 	background-color: sandybrown;
 	animation-name: greenchange;
 	animation-duration: 4s;
 	animation-iteration-count: infinite;
 	position: absolute;
 	border-style: none;
 	left: 0px;
 	top: 0px;
 	animation-delay: 2s;
}

@keyframes greenchange {
		0% {background-color: sandybrown;}
		50% {background-color: seagreen;}
		100% {background-color: sandybrown;}
}

.green-rl:hover {
	background-color: sandybrown;
	cursor: pointer;
}

.green-rl:active {
	background: url(../images/leaves2.gif) no-repeat;
	background-size: 100%;
}