Bea /* ---------------------------------------- 
Your Name
---------------------------------------- */

/* 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: rgb(255,245,0);
}

/*div {border: solid gray .1px;}*/

.bd {
	background: black;
}

}
.first {
	background-color: black;
	transition: background-color 3s;
}

.first:hover { 
	background-color: #DB7D1F;
	cursor: pointer;
	transition: color-red;

	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	transform: rotate(45deg);
	margin-top: 25%;
}

.first:active {
	background: black; 
	background-attachment: 
}

/*.corners {
	border-style: ridge;
	border-width: 20px;
	border-top-color: white;
	border-right-color: red;
	border-left-color: yellow;
	border-bottom-color: orange;*/

/*	../desktop/beaCC/css/intro-to-css/css/template_05/black.png*/


/*NEXT*/




.second {
	background-color: black;
	transition: background-color 4s;
}

.second:hover { 
	background-color: orange;
	cursor: pointer;
	transition: color-red;
}

.second:active {
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.second div { 
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
	border-color: black
	width: 75%;
	height: 20%;
	transform: rotate(90deg);
	margin-top: 20%;
}

/*.second div { 
	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	width: 100%;
	height: 50%;
	transform: rotate(45deg);
	margin-top: 25%;
}*/




/*NEXT*/


}
.third {
	background-color: black;
	transition: background-color 3s;
}

.third:hover { 
	background-color: #DB7D1F;
	cursor: pointer;
	transition: color-red;

	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	transform: rotate(45deg);
	margin-top: 25%;
}

.third:active {
	background: black; 
	background-attachment: 
}




/*NEXT*/



.fourth {
	background-color: black;
	transition: background-color 4s;
}

.fourth:hover { 
	background-color: red;
	cursor: pointer;
	transition: color-red;
}

.fourth:active {
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
}

.fourth div { 
	background: url(http://www.armstrong.com/pdbupimages-flr/197037.jpg);
	border-color: black
	width: 75%;
	height: 20%;
	transform: rotate(180deg);
	margin-top: 20%;
}








/*EXTRA 

.second:hover { 
	background-color: #DB7D1F;
	cursor: pointer;
	transition: color-red;
	
	background: url(http://static.tumblr.com/bsqr7bz/5BCm39rtj/black-and-white-stripes1.jpg);
	width: 100%;
	height: 50%;
	transform: rotate(45deg);
	margin-top: 25%;
}*/