@charset "utf-8";

.floatLeft {
	padding: 1em;
	border: 2px solid rgba(23,9,207,1.00);
	margin: 1em;
	font-size: 1.2em;
	color: blue;
	float: left;
	height: 5em;
	overflow:visible;
	max-width: 10em;
	background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(77,74,74,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(77,74,74,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(77,74,74,1.00) 100%);
	border-radius: 12px;
}

hr {
	margin-top:7em;
	clear: left;
}

div#transform1 {
background-color: skyblue;
color:black;
-webkit-transform: scale(2, 1.786);
-moz-transform: scale(2, 1.786);
-o-transform: scale(2, 1.786);
-ms-transform: scale(2, 1.786);
transform:scale(2, 1.786);
/* from http://www.css3maker.com/css3-transform.html */
}

#transform2 {
	
  -webkit-perspective: 300px; 
      -ms-perspective: 300px; 
          perspective: 300px;
  -webkit-transform: rotateY(180deg);  -webkit-transform-style: preserve-3d;
      -ms-transform: rotateY(180deg);      -ms-transform-style: preserve-3d;
          transform: rotateY(180deg);          transform-style: preserve-3d;
}
#translate1 {
	transform: -webkit-translate(200px,150px);
	transform: -ms-translate(200px,150px);
	transform: translate(200px,150px);
}

#translate {
	height: 3em;
	
}

/* mouse over link */
#translate2:hover {
	transition:All 1s ease-in;
-webkit-transition:All 1s ease-in;
-moz-transition:All 1s ease-in;
-o-transition:All 1s ease-in;
	transform: rotate( 10deg ) -webkit-translate(5px, 1.5px);
	transform: rotate( 10deg ) -ms-translate(5px, 1.5px);
	transform: rotate( 10deg ) translate(5px, 1.5px);
	font-size:larger;
}
/* link is active must be after :hover, click moves to other page thou */
#translate2:active {
	transform: -webkit-translate(1px,2px);
	transform: -ms-translate(1px,2px);
	transform: translate(1px,2px);
}

#multiple1:hover {
	
	-webkit-transform: rotate(39deg) scale(1.034) skew(-26deg) translate(73px);
	-moz-transform: rotate(39deg) scale(1.034) skew(-26deg) translate(73px);
	-o-transform: rotate(39deg) scale(1.034) skew(-26deg) translate(73px);
	-ms-transform: rotate(39deg) scale(1.034) skew(-26deg) translate(73px);
	transform: rotate(39deg) scale(1.034) skew(-26deg) translate(73px);
}

#multiple2 {
	-webkit-transform: scale(0.8) rotate(10deg) translateX(91px);
-webkit-transform-origin: 0% 0%;
-moz-transform: scale(0.8) rotate(10deg) translateX(91px);
-moz-transform-origin: 0% 0%;
-o-transform: scale(0.8) rotate(10deg) translateX(91px);
-o-transform-origin: 0% 0%;
-ms-transform: scale(0.8) rotate(10deg) translateX(91px);
-ms-transform-origin: 0% 0%;
transform: scale(0.8) rotate(10deg) translateX(91px);
transform-origin: 0% 0%; /*default origin is center of element */
}

#transition1 {
	font-size: 1.5em;
	color: white;
	background-color: black;
	-webkit-transition: all 5s ease-in 1s;
	/* properties, duration timing-function delay */
	-o-transition: all 5s ease-in 1s;
	transition: all 5s ease-in 1s;
}

#transition1:hover {
	border-color: rgba(0,0,0,1);
	border-width: 5px;
	background-color: rgba(235,235,235,1);
	color: rgba(19,19,19,1);
}

.navButton {
background-color: orange;
transition-property: background-color; /* change only background, all for all properties */
transition-duration: 1s; /* 1 second duration */
}

.navButton:hover {
background-color: blue;
}

.navButton2 {
	background-color: orange;
	color: black;
	border: medium outset rgba(0,255,147,1.00);
	transition-property: color, background-color, border-color;
	transition-duration: 100ms, 2.75s, 5s;
}

.navButton2:hover {
	color : lime;
	background-color: red;
	border-color: blue;
}

.navButton3 {
	background-color: orange;
	color: black;
	border: medium outset rgba(0,255,147,1.00);
	transition-property: color, background-color, border-color;
	transition-timing-function: ease-in, ease-out, linear;
	transition-duration: 100ms, 5s, 10s;
	transition-delay: 0s, 2s, 7s; /*delaying a transition start */
}

.navButton3:hover {
	color : lime;
	background-color: red;
	border-color: blue;
}

/* page 336 */
.navButton4 { color: black; 
background-color: #FF6603;
border: 5px solid #660034; 
transition-property: color, background-color, border-color;
transition-duration: 1s, 1s, .5s; transition-delay: .5s, .5s, 1s; 
}

.navButton4:hover {
	 color: white; background-color: #660034; 
border-color: #FF6603; }

@keyframes growAndGlow {
from {
background-color: yellow;
}

50% {
transform: scale(1.5);
background-color: blue;
} 
to {
transform: scale(3);
background-color: red;
}
}

.animation1 {
	border: medium inset skyblue;
	background-color: aquamarine;
	-webkit-animation-name: growAndGlow;
	-webkit-animation-delay: 3s;
	animation-name: growAndGlow;
	animation-delay: 3s;
	animation-duration: 5s;
}
	
@keyframes fadeIn {
from { opacity: 0; color:black; }
to { opacity: 1; color: blue;}
}
.announcement {
	/* always list browser specific first */
	color: limegreen; /*default text color 0..5 */
	border: 5px solid #660034;
-webkit-animation-name: fadeIn; /* may not need browser specific */
-webkit-animation-delay: 10s;
-webkit-animation-duration: 5s;
animation-name: fadeIn;
animation-delay: 10s; /*start animation in 15 seconds */
animation-duration: 5s; /*transition will for from 5 to 10seconds */
animation-iteration-count: 2; /* repeat 3 times */
}

@keyframes subtle {
	from { transform: translate( 6px, 6px ); }
	to { transform: translate( -20px, -20px ); background-color:white; }
	/* translate not working, but not be supported */
}

#animation3 {
	border: 5px outset #660034;
box-shadow: gray;
border-radius: 6px;
background-color: skyblue;
}

#animation3:hover {
	

/* opacity : 0.1;

animation: fadeIn 10s, jitter 5s ease 7s; */
-webkit-animation: subtle 50ms ease-in-out 2s 5;
-o-animation: subtle 50ms ease-in-out 2s 5;
animation: subtle 50ms ease-in-out 2s 5;
}