/* ---------------------------------------- 
Celine 
---------------------------------------- */

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

div { border-color: transparent; }

.ck2 { 
	background: rgb(255,255,255);
	opacity: 1;
 }




.second {
	transition: background-color 1s;


	border-style: outset;
	border-width: 30px;
	border-top-color: rgb(128, 0, 0); 
	border-right-color: rgb(255, 0, 0);
	border-left-color:rgb(204, 0, 0);
	border-bottom-color: rgb(255, 102, 102);
}



.second:hover{
	background-color: white;
	/*border-style: outset;
	border-width: 30px;
	border-top-color: rgb(153, 0, 0); 
	border-right-color: rgb(255, 0, 0);
	border-left-color:rgb(204, 0, 0);
	border-bottom-color: red;*/
/*	transform: rotate(45deg);*/

        -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
        transform: scale(0.8);
        border-radius:50%;
}

.second: { 
	background: url(../images/swirl.jpg)

 }

.example {
/*	border: transparent;*/
   /* /border width, border-style, color/*/

/*	background-outline-color:white;*/
	background-color: black;
	/*transform: rotate(45deg);*/
	transition: background-color 1s;
}


.example { 
	background-color: black;
	opacity: 1;
	border-style: inset;
	border-width: 30px;
	border-top-color: rgb(0, 0, 153);
	border-right-color: blue;
	border-left-color: blue;
	border-bottom-color: rgb(72, 191, 255);


}





.example:hover { 
	background-color: red;
	cursor: pointer;
		/*transform: rotate(45deg);*/
}

/*img< class= "image" 

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
*/

/*.example:active {
	background: url(../images/pattern.jpg);
}*/

/*.example div { 
	opacity: 1;
	background-color: white; 
			background-position: center;
		
	border-radius: 50%;
	width: 50%;
	height: 50%;
	margin-top: 25%; 
	margin-bottom: 25%;
	margin-left: 25%;
	transform: rotate(45deg);

}


*/

*/




}