/*! blogvio_editor/editor/preview.styl */
.preview-area
	position relative
	height 545px
	width 560px
	z-index 1
	.preview-toolbar
		padding-left 15px
		left 0
		right 0
		height 55px
		position absolute
		bottom 0
		box-shadow 0 1px 2px 0 rgba(0,0,0,0.1),0 0 3px 0 rgba(0,0,0,0.1)
		background #fafafa
		border-radius 4px
		z-index 2
		text-align left
	label
		line-height 56px
		font-smoothing antialiased
		font-family 'ProximaNova-Regular', sans-serif
		font-size 15px
		color darkpurple
	.control
		display inline-block
		vertical-align top
		margin-top 10px
	.control-dropdown:last-child
		width 150px
	.control-stepper
		width 98px
		margin-left 10px
	.control-dropdown
		margin-left 10px
		margin-right 10px
		width 137px
		float right
		+ label
			float right
	.widget-container
		position absolute
		z-index 1
		transition opacity 0.001s
		left 50%
		top 50%
		.widget
			overflow hidden
.preview-area.loading
	.preview-loader-container
		visibility visible
	.widget-container
		opacity 0
.preview-loader-container
	visibility hidden
	absolute top left
	right 0
	bottom 0
	text-align center
	vertical-align middle
	z-index 2
	&:after
		content ""
		width 0
		height 100%
		display inline-block
		vertical-align middle
.preview-loader
	height 52px
	width 34px
	display inline-block
	vertical-align middle
	overflow hidden
	transfrom translate3d(0,0,0)
	animation-duration 2s
	animation-iteration-count infinite
	animation-timing-function step-start

.preview-area[data-category='photo'] .preview-loader
	background url('img/loaders/photo-white.png') no-repeat left top
	animation-name  animate-photo
.preview-area[data-category='audio'] .preview-loader
	background url('img/loaders/audio-white.png') no-repeat left top
	animation-name  animate-audio
	width 52px
	height 38px
.preview-area[data-category='video'] .preview-loader
	background url('img/loaders/video-white.png') no-repeat left top
	animation-name animate-video
	width 41px
	height 24px
.preview-area[data-category='util'] .preview-loader
	background url('img/loaders/util-white.png') no-repeat left top
	animation-name animate-util
	width 30px
	height 33px
/**
for i in [0..14]
 console.log "#{(i*100)/59}%{background-position:#{i*(-34)}px 0}"
for i in [15]
  console.log "#{(i*100)/59}%{background-position:#{15*(-34)}px 0}"
for i in [29..36]
 console.log "#{(i*100)/59}%{background-position:#{(i-14)*(-34)}px 0}"
for i in [37]
 console.log "#{(i*100)/59}%{background-position:0 0}"
for i in [59]
 console.log "#{(i*100)/59}%{background-position:0 0}"
 **/
@keyframes animate-photo
	0%{background-position:0px 0}
	1.694915254237288%{background-position:-34px 0}
	3.389830508474576%{background-position:-68px 0}
	5.084745762711864%{background-position:-102px 0}
	6.779661016949152%{background-position:-136px 0}
	8.474576271186441%{background-position:-170px 0}
	10.169491525423728%{background-position:-204px 0}
	11.864406779661017%{background-position:-238px 0}
	13.559322033898304%{background-position:-272px 0}
	15.254237288135593%{background-position:-306px 0}
	16.949152542372882%{background-position:-340px 0}
	18.64406779661017%{background-position:-374px 0}
	20.338983050847457%{background-position:-408px 0}
	22.033898305084747%{background-position:-442px 0}
	23.728813559322035%{background-position:-476px 0}
	25.423728813559322%{background-position:-510px 0}
	49.152542372881356%{background-position:-510px 0}
	50.847457627118644%{background-position:-544px 0}
	52.54237288135593%{background-position:-578px 0}
	54.23728813559322%{background-position:-612px 0}
	55.932203389830505%{background-position:-646px 0}
	57.6271186440678%{background-position:-680px 0}
	59.32203389830509%{background-position:-714px 0}
	61.016949152542374%{background-position:-748px 0}
	62.71186440677966%{background-position:0 0}
	100%{background-position:0 0}
/**
for i in [0..21]
 console.log "#{(i*100)/59}%{background-position:#{i*(-52)}px 0}"
for i in [22..33]
  console.log "#{(i*100)/59}%{background-position:#{21*(-52)}px 0}"
for j in [34..55]
  i=59-j-4
  console.log "#{(j*100)/59}%{background-position:#{i*(-52)}px 0}"
for i in [59]
 console.log "#{(i*100)/59}%{background-position:0 0}"
**/
@keyframes animate-audio	
	0%{background-position:0px 0}
	1.694915254237288%{background-position:-52px 0}
	3.389830508474576%{background-position:-104px 0}
	5.084745762711864%{background-position:-156px 0}
	6.779661016949152%{background-position:-208px 0}
	8.474576271186441%{background-position:-260px 0}
	10.169491525423728%{background-position:-312px 0}
	11.864406779661017%{background-position:-364px 0}
	13.559322033898304%{background-position:-416px 0}
	15.254237288135593%{background-position:-468px 0}
	16.949152542372882%{background-position:-520px 0}
	18.64406779661017%{background-position:-572px 0}
	20.338983050847457%{background-position:-624px 0}
	22.033898305084747%{background-position:-676px 0}
	23.728813559322035%{background-position:-728px 0}
	25.423728813559322%{background-position:-780px 0}
	27.11864406779661%{background-position:-832px 0}
	28.8135593220339%{background-position:-884px 0}
	30.508474576271187%{background-position:-936px 0}
	32.20338983050848%{background-position:-988px 0}
	33.898305084745765%{background-position:-1040px 0}
	35.59322033898305%{background-position:-1092px 0}
	57.6271186440678%{background-position:-1092px 0}
	59.32203389830509%{background-position:-1040px 0}
	61.016949152542374%{background-position:-988px 0}
	62.71186440677966%{background-position:-936px 0}
	64.40677966101696%{background-position:-884px 0}
	66.10169491525424%{background-position:-832px 0}
	67.79661016949153%{background-position:-780px 0}
	69.49152542372882%{background-position:-728px 0}
	71.1864406779661%{background-position:-676px 0}
	72.88135593220339%{background-position:-624px 0}
	74.57627118644068%{background-position:-572px 0}
	76.27118644067797%{background-position:-520px 0}
	77.96610169491525%{background-position:-468px 0}
	79.66101694915254%{background-position:-416px 0}
	81.35593220338983%{background-position:-364px 0}
	83.05084745762711%{background-position:-312px 0}
	84.7457627118644%{background-position:-260px 0}
	86.44067796610169%{background-position:-208px 0}
	88.13559322033899%{background-position:-156px 0}
	89.83050847457628%{background-position:-104px 0}
	91.52542372881356%{background-position:-52px 0}
	93.22033898305085%{background-position:0px 0}
	100%{background-position:0 0}
/**
for i in [0..20]
 console.log "#{(i*100)/59}%{background-position:#{i*(-41)}px 0}"
for i in [54]
 console.log "#{(i*100)/59}%{background-position:#{20*(-41)}px 0}"
for i in [55,56]
 console.log "#{(i*100)/59}%{background-position:#{(i-34)*(-41)}px 0}"
for i in [57]
 console.log "#{(i*100)/59}%{background-position:0 0}"
**/
@keyframes animate-video
	0%{background-position:0px 0}
	1.694915254237288%{background-position:-41px 0}
	3.389830508474576%{background-position:-82px 0}
	5.084745762711864%{background-position:-123px 0}
	6.779661016949152%{background-position:-164px 0}
	8.474576271186441%{background-position:-205px 0}
	10.169491525423728%{background-position:-246px 0}
	11.864406779661017%{background-position:-287px 0}
	13.559322033898304%{background-position:-328px 0}
	15.254237288135593%{background-position:-369px 0}
	16.949152542372882%{background-position:-410px 0}
	18.64406779661017%{background-position:-451px 0}
	20.338983050847457%{background-position:-492px 0}
	22.033898305084747%{background-position:-533px 0}
	23.728813559322035%{background-position:-574px 0}
	25.423728813559322%{background-position:-615px 0}
	27.11864406779661%{background-position:-656px 0}
	28.8135593220339%{background-position:-697px 0}
	30.508474576271187%{background-position:-738px 0}
	32.20338983050848%{background-position:-779px 0}
	33.898305084745765%{background-position:-820px 0}
	91.52542372881356%{background-position:-820px 0}
	93.22033898305085%{background-position:-861px 0}
	94.91525423728814%{background-position:-902px 0}
	96.61016949152543%{background-position:0 0}
/**
console.log "0%{background-position:0 0}"
for j in [9..17]
  i=j-9
  console.log "#{(j*100)/59}%{background-position:#{i*(-30)}px 0}"
console.log "#{(38*100)/59}%{background-position:#{i*(-30)}px 0}"
for j in [39..43]
  i=j-30
  console.log "#{(j*100)/59}%{background-position:#{i*(-30)}px 0}"
console.log "#{(44*100)/59}%{background-position:0 0}"
**/	
@keyframes animate-util
	0%{background-position:0 0}
	15.254237288135593%{background-position:0px 0}
	16.949152542372882%{background-position:-30px 0}
	18.64406779661017%{background-position:-60px 0}
	20.338983050847457%{background-position:-90px 0}
	22.033898305084747%{background-position:-120px 0}
	23.728813559322035%{background-position:-150px 0}
	25.423728813559322%{background-position:-180px 0}
	27.11864406779661%{background-position:-210px 0}
	28.8135593220339%{background-position:-240px 0}
	64.40677966101696%{background-position:-240px 0}
	66.10169491525424%{background-position:-270px 0}
	67.79661016949153%{background-position:-300px 0}
	69.49152542372882%{background-position:-330px 0}
	71.1864406779661%{background-position:-360px 0}
	72.88135593220339%{background-position:-390px 0}
	74.57627118644068%{background-position:0 0}