@charset "UTF-8";
body {
	font-family:"HelveticaNeue-Light", "Helvetica Neue", "Arial", sans-serif;
	font-weight:200;
	font-size:16px;
	line-height:1.5em;
}
div{margin:40px auto;text-align:center;}
#animated{
	width:160px;
	height:160px;
}
#slider{
	width:300px;
}
img{margin:0 10px;}
p, pre, h1, h2 {
	margin-left:10px;
}
code {
	font-family:"Lucida Console", Monaco, monospace;
	font-size:12px;
	line-height:20px;
}
.label{
	float:left;
}
.wrap{width:700px;margin:20px 0 0 350px;}
.text{position:absolute;width:300px;left:10px;top:0;text-align:left;}

/*--------------------------------------------------------------------ONE */
.border1 .ten #animated.round{
	-moz-border-image:url("images/border1.png") 10% round round;
	-webkit-border-image:url("images/border1.png") 10% round round;
	border-image:url("images/border1.png") 10% round round;
}
.border1 .ten #animated.stretch{
	-moz-border-image:url("images/border1.png") 10% stretch stretch;
	-webkit-border-image:url("images/border1.png") 10% stretch stretch;
	border-image:url("images/border1.png") 10% stretch stretch;
}
.border1 .ten #animated.repeat{
	-moz-border-image:url("images/border1.png") 10% repeat repeat;
	-webkit-border-image:url("images/border1.png") 10% repeat repeat;
	border-image:url("images/border1.png") 10% repeat repeat;
}
.border1 .twenty-five #animated.round{
	-moz-border-image:url("images/border1.png") 25% round round;
	-webkit-border-image:url("images/border1.png") 25% round round;
	border-image:url("images/border1.png") 25% round round;
}
.border1 .twenty-five #animated.stretch{
	-moz-border-image:url("images/border1.png") 25% stretch stretch;
	-webkit-border-image:url("images/border1.png") 25% stretch stretch;
	border-image:url("images/border1.png") 25% stretch stretch;
}
.border1 .twenty-five #animated.repeat{
	-moz-border-image:url("images/border1.png") 25% repeat repeat;
	-webkit-border-image:url("images/border1.png") 25% repeat repeat;
	border-image:url("images/border1.png") 25% repeat repeat;
}
.border1 .thirty-three #animated.round{
	-moz-border-image:url("images/border1.png") 33% round round;
	-webkit-border-image:url("images/border1.png") 33% round round;
	border-image:url("images/border1.png") 33% round round;
}
.border1 .thirty-three #animated.stretch{
	-moz-border-image:url("images/border1.png") 33% stretch stretch;
	-webkit-border-image:url("images/border1.png") 33% stretch stretch;
	border-image:url("images/border1.png") 33% stretch stretch;
}
.border1 .thirty-three #animated.repeat{
	-moz-border-image:url("images/border1.png") 33% repeat repeat;
	-webkit-border-image:url("images/border1.png") 33% repeat repeat;
	border-image:url("images/border1.png") 33% repeat repeat;
}
.border1 .fifty #animated.round{
	-moz-border-image:url("images/border1.png") 50% round round;
	-webkit-border-image:url("images/border1.png") 50% round round;
	border-image:url("images/border1.png") 50% round round;
}
.border1 .fifty #animated.stretch{
	-moz-border-image:url("images/border1.png") 50% stretch stretch;
	-webkit-border-image:url("images/border1.png") 50% stretch stretch;
	border-image:url("images/border1.png") 50% stretch stretch;
}
.border1 .fifty #animated.repeat{
	-moz-border-image:url("images/border1.png") 50% repeat repeat;
	-webkit-border-image:url("images/border1.png") 50% repeat repeat;
	border-image:url("images/border1.png") 50% repeat repeat;
}

/*--------------------------------------------------------------------TWO */
.border2 .ten #animated.round{
	-moz-border-image:url("images/border2.png") 10% round round;
	-webkit-border-image:url("images/border2.png") 10% round round;
	border-image:url("images/border2.png") 10% round round;
}
.border2 .ten #animated.stretch{
	-moz-border-image:url("images/border2.png") 10% stretch stretch;
	-webkit-border-image:url("images/border2.png") 10% stretch stretch;
	border-image:url("images/border2.png") 10% stretch stretch;
}
.border2 .ten #animated.repeat{
	-moz-border-image:url("images/border2.png") 10% repeat repeat;
	-webkit-border-image:url("images/border2.png") 10% repeat repeat;
	border-image:url("images/border2.png") 10% repeat repeat;
}
.border2 .twenty-five #animated.round{
	-moz-border-image:url("images/border2.png") 25% round round;
	-webkit-border-image:url("images/border2.png") 25% round round;
	border-image:url("images/border2.png") 25% round round;
}
.border2 .twenty-five #animated.stretch{
	-moz-border-image:url("images/border2.png") 25% stretch stretch;
	-webkit-border-image:url("images/border2.png") 25% stretch stretch;
	border-image:url("images/border2.png") 25% stretch stretch;
}
.border2 .twenty-five #animated.repeat{
	-moz-border-image:url("images/border2.png") 25% repeat repeat;
	-webkit-border-image:url("images/border2.png") 25% repeat repeat;
	border-image:url("images/border2.png") 25% repeat repeat;
}
.border2 .thirty-three #animated.round{
	-moz-border-image:url("images/border2.png") 33% round round;
	-webkit-border-image:url("images/border2.png") 33% round round;
	border-image:url("images/border2.png") 33% round round;
}
.border2 .thirty-three #animated.stretch{
	-moz-border-image:url("images/border2.png") 33% stretch stretch;
	-webkit-border-image:url("images/border2.png") 33% stretch stretch;
	border-image:url("images/border2.png") 33% stretch stretch;
}
.border2 .thirty-three #animated.repeat{
	-moz-border-image:url("images/border2.png") 33% repeat repeat;
	-webkit-border-image:url("images/border2.png") 33% repeat repeat;
	border-image:url("images/border2.png") 33% repeat repeat;
}
.border2 .fifty #animated.round{
	-moz-border-image:url("images/border2.png") 50% round round;
	-webkit-border-image:url("images/border2.png") 50% round round;
	border-image:url("images/border2.png") 50% round round;
}
.border2 .fifty #animated.stretch{
	-moz-border-image:url("images/border2.png") 50% stretch stretch;
	-webkit-border-image:url("images/border2.png") 50% stretch stretch;
	border-image:url("images/border2.png") 50% stretch stretch;
}
.border2 .fifty #animated.repeat{
	-moz-border-image:url("images/border2.png") 50% repeat repeat;
	-webkit-border-image:url("images/border2.png") 50% repeat repeat;
	border-image:url("images/border2.png") 50% repeat repeat;
}

/*--------------------------------------------------------------------THREE */
.border3 .ten #animated.round{
	-moz-border-image:url("images/border3.png") 10% round round;
	-webkit-border-image:url("images/border3.png") 10% round round;
	border-image:url("images/border3.png") 10% round round;
}
.border3 .ten #animated.stretch{
	-moz-border-image:url("images/border3.png") 10% stretch stretch;
	-webkit-border-image:url("images/border3.png") 10% stretch stretch;
	border-image:url("images/border3.png") 10% stretch stretch;
}
.border3 .ten #animated.repeat{
	-moz-border-image:url("images/border3.png") 10% repeat repeat;
	-webkit-border-image:url("images/border3.png") 10% repeat repeat;
	border-image:url("images/border3.png") 10% repeat repeat;
}
.border3 .twenty-five #animated.round{
	-moz-border-image:url("images/border3.png") 25% round round;
	-webkit-border-image:url("images/border3.png") 25% round round;
	border-image:url("images/border3.png") 25% round round;
}
.border3 .twenty-five #animated.stretch{
	-moz-border-image:url("images/border3.png") 25% stretch stretch;
	-webkit-border-image:url("images/border3.png") 25% stretch stretch;
	border-image:url("images/border3.png") 25% stretch stretch;
}
.border3 .twenty-five #animated.repeat{
	-moz-border-image:url("images/border3.png") 25% repeat repeat;
	-webkit-border-image:url("images/border3.png") 25% repeat repeat;
	border-image:url("images/border3.png") 25% repeat repeat;
}
.border3 .thirty-three #animated.round{
	-moz-border-image:url("images/border3.png") 33% round round;
	-webkit-border-image:url("images/border3.png") 33% round round;
	border-image:url("images/border3.png") 33% round round;
}
.border3 .thirty-three #animated.stretch{
	-moz-border-image:url("images/border3.png") 33% stretch stretch;
	-webkit-border-image:url("images/border3.png") 33% stretch stretch;
	border-image:url("images/border3.png") 33% stretch stretch;
}
.border3 .thirty-three #animated.repeat{
	-moz-border-image:url("images/border3.png") 33% repeat repeat;
	-webkit-border-image:url("images/border3.png") 33% repeat repeat;
	border-image:url("images/border3.png") 33% repeat repeat;
}
.border3 .fifty #animated.round{
	-moz-border-image:url("images/border3.png") 50% round round;
	-webkit-border-image:url("images/border3.png") 50% round round;
	border-image:url("images/border3.png") 50% round round;
}
.border3 .fifty #animated.stretch{
	-moz-border-image:url("images/border3.png") 50% stretch stretch;
	-webkit-border-image:url("images/border3.png") 50% stretch stretch;
	border-image:url("images/border3.png") 50% stretch stretch;
}
.border3 .fifty #animated.repeat{
	-moz-border-image:url("images/border3.png") 50% repeat repeat;
	-webkit-border-image:url("images/border3.png") 50% repeat repeat;
	border-image:url("images/border3.png") 50% repeat repeat;
}

/*--------------------------------------------------------------------FOUR */
.border4 .ten #animated.round{
	-moz-border-image:url("images/border4.png") 10% round round;
	-webkit-border-image:url("images/border4.png") 10% round round;
	border-image:url("images/border4.png") 10% round round;
}
.border4 .ten #animated.stretch{
	-moz-border-image:url("images/border4.png") 10% stretch stretch;
	-webkit-border-image:url("images/border4.png") 10% stretch stretch;
	border-image:url("images/border4.png") 10% stretch stretch;
}
.border4 .ten #animated.repeat{
	-moz-border-image:url("images/border4.png") 10% repeat repeat;
	-webkit-border-image:url("images/border4.png") 10% repeat repeat;
	border-image:url("images/border4.png") 10% repeat repeat;
}
.border4 .twenty-five #animated.round{
	-moz-border-image:url("images/border4.png") 25% round round;
	-webkit-border-image:url("images/border4.png") 25% round round;
	border-image:url("images/border4.png") 25% round round;
}
.border4 .twenty-five #animated.stretch{
	-moz-border-image:url("images/border4.png") 25% stretch stretch;
	-webkit-border-image:url("images/border4.png") 25% stretch stretch;
	border-image:url("images/border4.png") 25% stretch stretch;
}
.border4 .twenty-five #animated.repeat{
	-moz-border-image:url("images/border4.png") 25% repeat repeat;
	-webkit-border-image:url("images/border4.png") 25% repeat repeat;
	border-image:url("images/border4.png") 25% repeat repeat;
}
.border4 .thirty-three #animated.round{
	-moz-border-image:url("images/border4.png") 33% round round;
	-webkit-border-image:url("images/border4.png") 33% round round;
	border-image:url("images/border4.png") 33% round round;
}
.border4 .thirty-three #animated.stretch{
	-moz-border-image:url("images/border4.png") 33% stretch stretch;
	-webkit-border-image:url("images/border4.png") 33% stretch stretch;
	border-image:url("images/border4.png") 33% stretch stretch;
}
.border4 .thirty-three #animated.repeat{
	-moz-border-image:url("images/border4.png") 33% repeat repeat;
	-webkit-border-image:url("images/border4.png") 33% repeat repeat;
	border-image:url("images/border4.png") 33% repeat repeat;
}
.border4 .fifty #animated.round{
	-moz-border-image:url("images/border4.png") 50% round round;
	-webkit-border-image:url("images/border4.png") 50% round round;
	border-image:url("images/border4.png") 50% round round;
}
.border4 .fifty #animated.stretch{
	-moz-border-image:url("images/border4.png") 50% stretch stretch;
	-webkit-border-image:url("images/border4.png") 50% stretch stretch;
	border-image:url("images/border4.png") 50% stretch stretch;
}
.border4 .fifty #animated.repeat{
	-moz-border-image:url("images/border4.png") 50% repeat repeat;
	-webkit-border-image:url("images/border4.png") 50% repeat repeat;
	border-image:url("images/border4.png") 50% repeat repeat;
}

/*--------------------------------------------------------------------FIVE */
.border5 .ten #animated.round{
	-moz-border-image:url("images/border5.png") 10% round round;
	-webkit-border-image:url("images/border5.png") 10% round round;
	border-image:url("images/border5.png") 10% round round;
}
.border5 .ten #animated.stretch{
	-moz-border-image:url("images/border5.png") 10% stretch stretch;
	-webkit-border-image:url("images/border5.png") 10% stretch stretch;
	border-image:url("images/border5.png") 10% stretch stretch;
}
.border5 .ten #animated.repeat{
	-moz-border-image:url("images/border5.png") 10% repeat repeat;
	-webkit-border-image:url("images/border5.png") 10% repeat repeat;
	border-image:url("images/border5.png") 10% repeat repeat;
}
.border5 .twenty-five #animated.round{
	-moz-border-image:url("images/border5.png") 25% round round;
	-webkit-border-image:url("images/border5.png") 25% round round;
	border-image:url("images/border5.png") 25% round round;
}
.border5 .twenty-five #animated.stretch{
	-moz-border-image:url("images/border5.png") 25% stretch stretch;
	-webkit-border-image:url("images/border5.png") 25% stretch stretch;
	border-image:url("images/border5.png") 25% stretch stretch;
}
.border5 .twenty-five #animated.repeat{
	-moz-border-image:url("images/border5.png") 25% repeat repeat;
	-webkit-border-image:url("images/border5.png") 25% repeat repeat;
	border-image:url("images/border5.png") 25% repeat repeat;
}
.border5 .thirty-three #animated.round{
	-moz-border-image:url("images/border5.png") 33% round round;
	-webkit-border-image:url("images/border5.png") 33% round round;
	border-image:url("images/border5.png") 33% round round;
}
.border5 .thirty-three #animated.stretch{
	-moz-border-image:url("images/border5.png") 33% stretch stretch;
	-webkit-border-image:url("images/border5.png") 33% stretch stretch;
	border-image:url("images/border5.png") 33% stretch stretch;
}
.border5 .thirty-three #animated.repeat{
	-moz-border-image:url("images/border5.png") 33% repeat repeat;
	-webkit-border-image:url("images/border5.png") 33% repeat repeat;
	border-image:url("images/border5.png") 33% repeat repeat;
}
.border5 .fifty #animated.round{
	-moz-border-image:url("images/border5.png") 50% round round;
	-webkit-border-image:url("images/border5.png") 50% round round;
	border-image:url("images/border5.png") 50% round round;
}
.border5 .fifty #animated.stretch{
	-moz-border-image:url("images/border5.png") 50% stretch stretch;
	-webkit-border-image:url("images/border5.png") 50% stretch stretch;
	border-image:url("images/border5.png") 50% stretch stretch;
}
.border5 .fifty #animated.repeat{
	-moz-border-image:url("images/border5.png") 50% repeat repeat;
	-webkit-border-image:url("images/border5.png") 50% repeat repeat;
	border-image:url("images/border5.png") 50% repeat repeat;
}