@charset "UTF-8";

/*!
* This is an examples CSS file containing rules for the
* ThinkVitamin article "The Science of CSS Transitions"
* written by Faruk Ateş, published by Carsonified.
* 
* Copyright (c) 2010 Carsonified.
*/

/* Common style rules for the example sections */
.example {
	border: 1px solid #444;
	width: 470px;
}
.example blockquote p {
	margin: 0 !important;
}
.example pre {
	border-bottom: 1px solid #444;
	display: block;
}
.example h4 {
	background: #444;
	border: none;
	color: #fffef7;
	font-size: 16px;
	height: 20px;
	margin: 0 !important;
	padding: 4px 6px !important;
}
/* Example 1: a background color transition on a blockquote element */
#example-1 .example-area {
	padding: 10px;
}
#example-1 .example-area blockquote {
	background: #eee;
	border: 1px solid #666;
	margin: 20px;
	padding: 4px;
	
	transition: all .3s linear;
	-o-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
}
#example-1 .example-area blockquote:hover {
	background: #aaa;
}
/* Example 2: animation speeds for four items */
#example-2 .example-area {
	border-bottom: 6px solid #dbdfcd;
	height: 200px;
	position: relative;
}
#example-2 .item {
	background: #ccc;
	bottom: 0;
	color: #444;
	margin: 0 20px;
	height: 30px;
	line-height: 30px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 90px;
}
/* These are used in examples 2 and 3, so I'm using 
   a generic class name instead of specific ID selectors */
.example-area .item {
	transition: all 1s linear;
	-o-transition: all 1s linear;
	-moz-transition: all 1s linear;
	-webkit-transition: all 1s linear;
}
.example-area .item-2 {
	left: 110px;
	transition-duration: .75s;
	-o-transition-duration: .75s;
	-moz-transition-duration: .75s;
	-webkit-transition-duration: .75s;
}
.example-area .item-3 {
	left: 220px;
	transition-duration: .5s;
	-o-transition-duration: .5s;
	-moz-transition-duration: .5s;
	-webkit-transition-duration: .5s;
}
.example-area .item-4 {
	left: 330px;
	transition-duration: .25s;
	-o-transition-duration: .25s;
	-moz-transition-duration: .25s;
	-webkit-transition-duration: .25s;
}
#example-2 .item:hover,
#example-2 .item:focus {
	color: #444;
	height: 200px;
}
/* Example 3: (the same) animation speeds for links in text */
#example-3 .example-area p {
	margin: 8px;
}
#example-3 .item,
#example-3 .item {
	background: #fffef7;
	padding: 2px 4px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}
#example-3 .item:hover,
#example-3 .item:focus {
	background: rgb(235, 111, 0);
	color: #fff;
}
/* Example 4: color transitions and avoiding the browser
   having to "fill in" its own intermediate color */
#example-4 .item {
	color: #222;
	float: left;
	font-size: 11px;
	font-weight: bold;
	height: 75px;
	margin: 0 15px;
	text-align: center;
	text-decoration: none;
	width: 75px;
	transition: background-color .5s linear;
	-o-transition: background-color .5s linear;
	-moz-transition: background-color .5s linear;
	-webkit-transition: background-color .5s linear;
}
#example-4 .layer {
	display: inline-block;
	height: 75px;
	padding: 5px 0;
	vertical-align: bottom;
	width: 233px;
}
#example-4 .lower {
	background: url(background-img.png) 0 0 repeat;
	border-left: 1px solid #ccc;
}
#example-4 .item-1 { background: transparent; }
#example-4 .item-2 { background: #fffef7; }
#example-4 .item-3 { background: #fffef7; }
#example-4 .item-4 { background: rgba(255, 254, 247, 0); }

#example-4 .item:hover,
#example-4 .item:focus {
	background-color: rgb(235, 111, 0);
	background-color: rgba(235, 111, 0, 1);
	color: #222;
}