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

body {
	font-family: Tahoma, Verdana, Geneva, sans-serif;
	margin: 2em 6em;
	font-weight: bold;
}

h1 {
	font-size: 1em;
	text-transform:uppercase; 
	margin: 4em 0 2em;
	letter-spacing: .2em;
	color: #ccc;
	border-top: 1px solid #ccc;
	}

.figure {
	clear: left;
}

/* FIGURE 18-1 */
#fig1 a.smooth {
	display: block;
	text-decoration:none;
	text-align: center;
	padding: .5em 1em;
	width: 10em;
	border-radius: 1em;
	background-color: mediumblue;
	color: #fff;
    -webkit-transition-property: background-color; 
    -moz-transition-property: background-color; 
    -0-transition-property: background-color; 
    -ms-transition-property: background-color; 
    transition-property: background-color; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -0-transition-duration: 0.3s; 
    -ms-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
}
#fig1 a:hover, #fig1 a:focus {
	background-color: red;
}
	

/* FIGURE 18-3 */
#timing_box {
  width: 600px;
  background-color: #c6de89;
  padding: 0;
  margin: 0;
  }
p.tf {
  background-color: #fff;
  border: 4px solid #009Ac7;
  margin: 1em 0;
  width: 120px;
  padding: 15px 15px;
  font-weight: normal;
  -webkit-transition-duration: 4s;
  -moz-transition-duration: 4s;
  -o-transition-duration: 4s;
  -ms-transition-duration: 4s;
  transition-duration: 4s;
  }
  
#timing_box:hover .tf {
	width: 562px;
}

#ease {
	-webkit-transition-timing-function: ease;
	-moz-transition-timing-function: ease;
	-o-transition-timing-function: ease;
	-ms-transition-timing-function: ease;
	transition-timing-function: ease;
}
#linear {
	-webkit-transition-timing-function: linear;
	-moz-transition-timing-function: linear;
	-o-transition-timing-function: linear;
	-ms-transition-timing-function: linear;
	transition-timing-function: linear;
}
#ease-in {
	-webkit-transition-timing-function: ease-in;
	-moz-transition-timing-function: ease-in;
	-o-transition-timing-function: ease-in;
	-ms-transition-timing-function: ease-in;
	transition-timing-function: ease-in;
}
#ease-out {
	-webkit-transition-timing-function: ease-out;
	-moz-transition-timing-function: ease-out;
	-o-transition-timing-function: ease-out;
	-ms-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
#ease-in-out {
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	-ms-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}
#steps{
	-webkit-transition-timing-function: steps(4,end);
	-moz-transition-timing-function: steps(4,end);
	-o-transition-timing-function: steps(4,end);
	-ms-transition-timing-function: steps(4,end);
	transition-timing-function: steps(4,end);	
}
#step-start {
	-webkit-transition-timing-function: step-start;
	-moz-transition-timing-function: step-start;
	-o-transition-timing-function: step-start;
	-ms-transition-timing-function: step-start;
	transition-timing-function: step-start;	
}
#step-end {
	-webkit-transition-timing-function: step-end;
	-moz-transition-timing-function: step-end;
	-o-transition-timing-function: step-end;
	-ms-transition-timing-function: step-end;
	transition-timing-function: step-end;	

}
/* end FIGURE 18-3 */



/* FIGURE 18-4 */
#fig4 a.smooth {
	display: block;
	text-decoration:none;
	text-align: center;
	padding: .5em 1em;
	width: 10em;
	border-radius: 1em;
	background-color: mediumblue;
	color: #fff;
    -webkit-transition-property: background-color, color, letter-spacing; 
    -moz-transition-property: background-color color, letter-spacing; 
    -0-transition-property: background-color, color, letter-spacing; 
    -ms-transition-property: background-color, color, letter-spacing; 
    transition-property: background-color, color, letter-spacing; 
    -webkit-transition-duration: 0.3s, 2s, 0.3s; 
    -moz-transition-duration: 0.3s, 2s, 0.3s; 
    -0-transition-duration: 0.3s 2s, 0.3s; 
    -ms-transition-duration: 0.3s, 2s, 0.3s; 
    transition-duration: 0.3s, 2s, 0.3s; 
    -webkit-transition-timing-function: ease-out, ease-in, ease-out; 
    -moz-transition-timing-function: ease-out, ease-in, ease-out;
    -0-transition-timing-function: ease-out, ease-in, ease-out;
    -ms-transition-timing-function: ease-out, ease-in, ease-out;
    transition-timing-function: ease-out, ease-in, ease-out; 
		
}
#fig4 a:hover, #fig4 a:focus {
	background-color: red;
	letter-spacing: 3px;
	color: black;
}
/* end figure 18-4 */



/* FIGURE 18-5 */
#fig5 a.smooth {
	display: block;
	text-decoration:none;
	text-align: center;
	padding: .5em 1em;
	width: 6em;
	border-radius: 1em;
	border: 2px solid rgb(175,175,175);
	background-color: rgb(190, 190, 190);
	text-shadow: #666 .1em .1em .1em;
	color: #fff;
	position: relative;
	box-shadow: 0 4px 2px rgba(0,0,0,.5);
    -webkit-transition-property: background-color, top, box-shadow; 
    -moz-transition-property: background-color, top, box-shadow; 
    -0-transition-property: background-color, top, box-shadow; 
    -ms-transition-property: background-color, top, box-shadow; 
    transition-property: background-color, top, box-shadow; 
    -webkit-transition-duration: 0.2s, 0.1s, 0.1s; 
    -moz-transition-duration: 0.2s, 0.1s, 0.1s; 
    -0-transition-duration: 0.2s, 0.1s, 0.1s; 
    -ms-transition-duration: 0.2s, 0.1s, 0.1s; 
    transition-duration: 0.2s, 0.1s, 0.1s; 
    -webkit-transition-timing-function: ease, ease-in-out; 
    -moz-transition-timing-function: ease, ease-in-out; 
    -0-transition-timing-function: ease, ease-in-out; 
    -ms-transition-timing-function: ease, ease-in-out; 
    transition-timing-function: ease, ease-in-out; 
	-webkit-transition-delay: 0, .1s, .1s;
}

#fig5 a:hover, #fig5 a:focus {
	background-color: #fdca00;
	border-color: #fda700;

}
#fig5 a:active {
	top: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,.5);

}
/* end figure 18-5 */



/* FIGURE 18-7 */

#fig7 .container {
	position: relative;
	width: 600px;
	height: 300px;
	padding: 0px 20px 100px 20px;
	/* outline: 1px dashed #ccc; */
}
#fig7 .img1, #fig7 .img2 {
	position: absolute;
	top: 0;
	left:0;
	margin: 50px;
}

#fig7 .img1 {
	opacity: .2;
}
#fig7 .img2 {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
/* end figure 18-7 */



/* FIGURE 18-8 */

#fig8 .container {
	position: relative;
	width: 800px;
	height: 300px;
	padding: 150px;
	/* outline: 1px dashed #ccc; */
}
#fig8 .img1, #fig8 .img3, #fig8 .img4, #fig8 .img5 {
	position: absolute;
	top: 0;
	left:0;
	margin: 100px;
}

#fig8 .img1 {
	opacity: .2;
}

#fig8 .img3, #fig8 .img4, #fig8 .img5 {
	-webkit-transform: rotate(25deg);
	-moz-transform: rotate(25deg);
	-o-transform: rotate(25deg);
	-ms-transform: rotate(25deg);
	transform: rotate(25deg);
}

#fig8 .img3 {
	-webkit-transform-origin: top center;
	-moz-transform-origin: top center;
	-o-transform-origin: top center;
	-ms-transform-origin: top center;
	transform-origin: top center;
}
#fig8 .img4 {
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom;
	-o-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	transform-origin: right bottom;
}
#fig8 .img5 {
	-webkit-transform-origin: 400px 0;
	-moz-transform-origin: 400px 0;
	-o-transform-origin: 400px 0;
	-ms-transform-origin: 400px 0;
	transform-origin: 400px 0;
}

/* end figure 18-8 */



/* FIGURE 18-9 */

#fig9 .container {
	position: relative;
	width: 800px;
	height: 300px;
	padding: 100px;
	/* outline: 1px dashed #ccc; */
}
#fig9 .img1, #fig9 .img2 {
	position: absolute;
	top: 0;
	left:0;
	margin: 50px;
}

#fig9 .img1 {
	opacity: .2;
}
#fig9 .img2 {
  -webkit-transform: translate(90px, 60px);
  -moz-transform: translate(90px, 60px);
  -o-transform: translate(90px, 60px);
  -ms-transform: translate(90px, 60px);
  transform: translate(90px, 60px);
}
#fig9 .img4 {
  -webkit-transform: translate(-5%, -25%);
  -moz-transform: translate(-5%, -25%);
  -o-transform: translate(-5%, -25%);
  -ms-transform: translate(-5%, -25%);
  transform: translate(-5%, -25%);
}
/* end figure 18-9 */



/* FIGURE 18-10 */
#fig10 .container {
	position: relative;
	width: 800px;
	height: 300px;
	padding: 50px 100px;
	/* outline: 1px dashed #ccc; */
}
#fig10 .img1, #fig10 .img2, #fig10 .img3, #fig10 .img4 {
	position: absolute;
	top: 0;
	left:0;
	margin: 50px;
}

#fig10 .img1 {
	opacity: .2;
}
#fig10 .img2 {
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
}
#fig10 .img3 {
  -webkit-transform: scale(.75);
  -moz-transform: scale(.75);
  -o-transform: scale(.75);
  -ms-transform: scale(.75);
  transform: scale(.75);
}
#fig10 .img4 {
  -webkit-transform: scale(1.5, .5);
  -moz-transform: scale(1.5, .5);
  -o-transform: scale(1.5, .5);
  -ms-transform: scale(1.5, .5);
  transform: scale(1.5, .5);
}
/* end figure 18-10 */




/* FIGURE 18-11 */
#fig11 .container {
	position: relative;
	width: 800px;
	height: 300px;
	padding: 120px;
	/* outline: 1px dashed #ccc;*/
}
#fig11 .img1, #fig11 .img2, #fig11 .img3, #fig11 .img4 {
	position: absolute;
	top: 0;
	left:0;
	margin: 150px;
}

#fig11 .img1, #fig11 .img2 {
	margin-top: 50px;
	margin-bottom: 50px;
}
#fig11 .img1 {
	opacity: .2;
}
#fig11 .img2 {
  -webkit-transform: skewX(15deg);
  -moz-transform: skewX(15deg);
  -o-transform: skewX(15deg);
  -ms-transform: skewX(15deg);
  transform: skewX(15deg);
}
#fig11 .img3 {
  -webkit-transform: skewY(30deg);
  -moz-transform: skewY(30deg);
  -o-transform: skewY(30deg);
  -ms-transform: skewY(30deg);
  transform: skewY(30deg);
}
#fig11 .img4 {
  -webkit-transform: skew(15deg, 30deg);
  -moz-transform: skew(15deg, 30deg);
  -o-transform: skew(15deg, 30deg);
  -ms-transform: skew(15deg, 30deg);
  transform: skew(15deg, 30deg);
}
/* end figure 18-11 */


/* FIGURE 18-12 */
#fig12 .container {
	position: relative;
	width: 600px;
	height: 200px;
	padding: 50px;
	/* outline: 1px dashed #ccc; */
}
#fig12 #origimg, #tiltimg {
	position: absolute;
	top: 50px;
	left: 50px;
	}

#fig12 #origimg, #tiltimg {
	width: 200px;
	height: 150px;
}

#fig12 #origimg {
	opacity: .25;

}

#fig12 #tiltimg:hover {
	-webkit-transform: scale(1.5) rotate(-5deg) translate(50px, 30px);
	-moz-transform: scale(1.5) rotate(-5deg) translate(50px, 30px);
	-o-transform: scale(1.5) rotate(-5deg) translate(50px, 30px);
	-ms-transform: scale(1.5) rotate(-5deg) translate(50px, 30px);
	transform: scale(1.5) rotate(-5deg) translate(50px, 30px);
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}
/* end figure 18-12 */



/* FIGURE 18-13 */

#fig13 ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#fig13 li {
	float: left;
	margin-right: 10px;
}
#fig13 li:last-of-type {
	margin-right: 0;
}
#fig13 a {
	display: block;
}
#fig13 img {
	width: 200px;
	height: 150px;
	box-shadow: 2px 2px 2px rgba(0,0,0,.4);
	-webkit-transition: -webkit-transform .3s ease-in-out; 
	-moz-transition: -moz-transform .3s ease-in-out; 
	-o-transition: -o-transform .3s ease-in-out; 
	-ms-transition: -ms-transform .3s ease-in-out; 
	transition: transform .3s ease-in-out; 
}

#fig13 a:hover img {
	box-shadow: 6px 6px 6px rgba(0,0,0,.3);
}
#fig13 a:hover #img1, a:focus #img1  {
	-webkit-transform: scale(1.5) rotate(-3deg);
	-moz-transform: scale(1.5) rotate(-3deg);
	-o-transform: scale(1.5) rotate(-3deg);
	-ms-transform: scale(1.5) rotate(-3deg);
	transform: scale(1.5) rotate(-3deg);
}
#fig13 a:hover #img2, a:focus #img2  {
	-webkit-transform: scale(1.5) rotate(5deg);
	-moz-transform: scale(1.5) rotate(5deg);
	-o-transform: scale(1.5) rotate(5deg);
	-ms-transform: scale(1.5) rotate(5deg);
	transform: scale(1.5) rotate(5deg);
}
#fig13 a:hover #img3, a:focus #img3  {
	-webkit-transform: scale(1.5) rotate(-7deg);
	-moz-transform: scale(1.5) rotate(-7deg);
	-o-transform: scale(1.5) rotate(-7deg);
	-ms-transform: scale(1.5) rotate(-7deg);
	transform: scale(1.5) rotate(-7deg);
}
#fig13 a:hover #img4, a:focus #img4  {
    -webkit-transform: scale(1.5) rotate(2deg);
	-moz-transform: scale(1.5) rotate(2deg);
	-o-transform: scale(1.5) rotate(2deg);
	-ms-transform: scale(1.5) rotate(2deg);
    transform: scale(1.5) rotate(2deg);
}
/* end figure 18-13 */


/* FIGURE 18-15 */

#fig15 {
	clear: left;
}

#fig15 ul {
	width: 1000px;
	height: 150px;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-perspective: 600;
	-moz-perspective: 600;
	perspective: 600;
}

#fig15 li {
	float: left;
	margin-right: 10px;
	-webkit-transform: rotateY(45deg);
	-moz-transform: rotateY(45deg);
	transform: rotateY(45deg);
}

#fig15 li img {
	width: 200px;
	height: 150px;
}




/* FIGURE 18-16 */


#fig16 ul {
	width: 1000px;
	height: 100px;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-perspective: 600;
	-moz-perspective: 600;
	perspective: 600;
}

#fig16 li {
	float: left;
	margin-right: 10px;
	-webkit-transform: rotateX(45deg);
	-moz-transform: rotateX(45deg);
	transform: rotateX(45deg);
}

#fig16 li img {
	width: 200px;
	height: 150px;
}





/* FIGURE 18-18 */

@-webkit-keyframes colors {
  0% { background-color: red; }
  20% { background-color: orange; }
  40% { background-color: yellow; }
  60% { background-color: green; }
  80% { background-color: blue; }
  100% { background-color: purple; }
}

@-moz-keyframes colors {
  0% { background-color: red; }
  20% { background-color: orange; }
  40% { background-color: yellow; }
  60% { background-color: green; }
  80% { background-color: blue; }
  100% { background-color: purple; }
}
@-o-keyframes colors {
  0% { background-color: red; }
  20% { background-color: orange; }
  40% { background-color: yellow; }
  60% { background-color: green; }
  80% { background-color: blue; }
  100% { background-color: purple; }
}
@-ms-keyframes colors {
  0% { background-color: red; }
  20% { background-color: orange; }
  40% { background-color: yellow; }
  60% { background-color: green; }
  80% { background-color: blue; }
  100% { background-color: purple; }
} 

#fig18 div {
	width: 10em;
	padding: 1em;
	font-size: 2em;
	text-align: center;
	color: #fff;
	background-color: gray;
	border-radius: 1em;
}
#fig18 #magic {
	-webkit-animation: colors 20s linear infinite alternate;
	-moz-animation: colors 20s linear infinite alternate;
	-o-animation: colors 20s linear infinite alternate;
	-ms-animation: colors 20s linear infinite alternate;
	animation: colors 20s linear infinite alternate;
}

/* end figure 18-18 */





/*  3D TRANSFORMS, FIRST TRY */
#threed {
	-webkit-perspective: 800;
	perspective: 800;
	-webkit-perspective-origin: center top;
	perspective-origin: center top;
}

#threed .item {
	display: block;
	float: left;
	margin: 5px;
	margin-bottom: 4em;
	-webkit-transform: rotateY(45deg);
	transform: rotateY(45deg);
}