@charset "utf-8";

html, body						{ font-family: arial; }

.html5video						{ background-color: #eeeeee; text-align: center; position: relative; border: 1px solid #dddddd; display: inline-block; }
.html5video:after				{ content: 'Drop your image here or click to add one!'; font-size: 30px; color: #bbbbbb; position: absolute; bottom: 60%; left: 0; width: 100%; text-align: center; z-index:0;}
.html5video:before				{ content: ''; font-family:"Glyphicons Halflings"; font-size: 60px; color: #dbdbdb; position: absolute; top: 40%; left: 0; width: 100%; text-align: center; z-index:0;}

.html5video.loading:after		{ content: 'Please wait, image is loading'; }
.html5video.loading:before		{ content: ''; }

.html5video.done				{ text-align: left; line-height: 1px; height: auto !important; }
.html5video.done:after			{ content: '';}
.html5video.done:before			{ content: '';}

/* not an image */
.html5video.notAnImage			{ background-color: #f2dede; border-color: #ebccd1; }
.html5video.notAnImage:after	{ content: 'The selected file is not an image!'; color: #a94442; }
.html5video.notAnImage:before	{ content: ''; color: #ebccd1; }

.html5video.alert-danger		{ background-color: #f2dede; }
.html5video.alert-danger:after	{ content: ''; }

.html5video.smalltext:after		{ font-size: 20px; }

.html5video > span				{ font-size: 30px; color: #bbbbbb; position: absolute; top: 35%; left: 0; width: 100%; text-align: center; z-index:0;}
.html5video > span.loader		{ display: none; }
.html5video > input[type=file]	{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; opacity: 0; cursor: pointer; z-index:2; height: 100% /* IE HACK*/ }
.html5video > input[type=text]	{ display: none; }

/*.html5video .progress			{ bottom: 10px; left: 10px; right: 10px; display: none;  }*/

.html5video .cropWrapper		{ overflow: hidden; position: absolute; top:0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: #eeeeee}
/*.html5video canvas.final		{ background-color: #eeeeee;}*/

.html5video img					{ z-index: 20; position: relative; }
.html5video img.ghost			{ opacity: .2; z-index: auto; float:left /* HACK for not scrolling*/; }
.html5video img.main			{ cursor: move; }
.html5video .final img.main 	{ cursor: auto; }
.html5video img.preview			{ width: 100%; }

.html5video .tools				{ position: absolute; top: 10px; right: 10px; z-index: 99; display: inline-block; }
.html5video .tools > *			{ margin: 0 0 0 5px; }

.html5video > .tools			{ }

.html5video.smalltools .tools .btn	{ padding: 1px 4px; font-size: 12px; }

.html5video .progress			{ position: relative; width: 100%; height: height:5px; backgroud-color: #000; }
.html5video .progress .time		{ position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #ccc; }

.html5video .image				{ position: absolute; top: 0; left: 0; width: 100%; z-index: 100  }
.html5video .image .tools		{ z-index: 200;}

.html5video .thumb				{ margin: 0.5% 0.5% 0 0; position: relative; z-index: 100; display: inline-block; }
.html5video .thumb:nth-child(3n) { margin: 0; }
.html5video .thumb .tools		{ z-index: 200; top: 5px; right: 5px; }