body {
	margin:0px;
	padding:0px;
}

.cfind-main div, .cfind-main input {
	font-family: 'Droid Sans', sans-serif;
	font-size:14px;
}

.cfind-main div {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.cfind-main a {
	color:#555;
	text-decoration:none;
}

.cfind-main a:hover {
	text-decoration:underline;
	color:#000;
}

.cfind-main form {
	margin:0px;
	padding:0px;
}

.cfind-main {
	margin:10px;
	max-width:1200px;
	border-bottom:thin solid #aaa;
	padding-bottom:30px;
	background-color:#fff;
	min-width:780px;
}

/* TOOLS */

.cfind-tools {
	margin-bottom:30px;
}

.cfind-tools ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

.cfind-tools ul li {
	float:left;
	padding:0px;
	margin-right:5px;
	line-height:40px;
    position:relative;
}

.cfind-tools ul {
	margin-bottom:10px;
}

.cfind-tools ul:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.cfind-tools ul li .fa {
	width:60px;
	background-color:#4285F4;
	color:#fff;
	cursor:pointer;
	text-align:center;
	display:block;
	line-height:40px;
}

.cfind-tools ul li .fa:hover {
	opacity:.8;
	text-decoration:none;
}

.cfind-tools ul li .fa-remove {
	background-color:#EA4336;
}

.cfind-tools ul li .fa-file-photo-o {
	background-color:#FBBC05;
}

.cfind-tools ul li .fa-arrow-up {
	background-color:#34A853;
}

.cfind-tools ul li .fa-plus {
    position:absolute;
    top:1px;
    right:1px;
    line-height:20px;
    width:20px;
    color:#fff;
    background:none;
    border:none !important;
}

.cfind-tools ul li > div {
	position:absolute;
	padding:10px;
	border:thin solid #ccc;
	border-top:none;
	background:#fff;
	z-index:999;
	box-shadow:2px 4px 5px #aaa;
	display:none;
}

.cfind-tools ul li[data-active="true"] .fa {
	background-color:#fff;
	color:#555;
	border:thin solid #ccc;
	border-bottom:none;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}

.cfind-tools ul li[data-active="true"] > div {
	display:block;
}

.cfind-tools ul li > div label {
	font-size:12px;
}

.cfind-tools ul li > div input[type=text], .cfind-tools ul li > div input[type=file] {
	padding:2px 10px;
	border:thin solid #ccc;
	display:block;
	margin-right:5px;
	margin-bottom:5px;
	width:300px;
}

.cfind-tools ul li > div input[type=submit] {
	border:none;
	background-color:#4285F4;
	padding:5px 40px;
	color:#fff;
	cursor:pointer;
}

.cfind-tools ul li[data-disable="1"] .fa {
	background-color:#555;
}

.cfind-tools .cfind-path {
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	padding:0px 30px;
	border:thin solid #ccc;
	width:calc(100% - 465px);
	width:-moz-calc(100% - 465px);
	width:-webkit-calc(100% - 465px);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	position:relative;
}

.cfind-tools .cfind-search {
	margin-right:0px;
}

.cfind-tools .cfind-search input[type=text] {
	line-height:40px;
	height:42px;
	width:200px;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	padding:0px 10px 0px 25px;
	border:thin solid #ccc;
	appereance:none;
}

.cfind-tools .cfind-search {
	position:relative;
}

.cfind-tools .cfind-search:before {
	
	color:#34A853;
	position:absolute;
	left:10px;
	top:14px;
	content:"\f002";
	
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cfind-tools .cfind-path:before {
	color:#4285F4;
	position:absolute;
	left:10px;
	top:13px;
	content:"\f07c";
	
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* FOLDER */

.cfind-explorer {
	float:left;
	width:256px;
	padding-right:10px;
	height:500px;
	overflow:auto;
}

.cfind-explorer li {
	white-space:nowrap;
}


/**
 * Framework starts from here ...
 * http://cssdeck.com/labs/pure-css-tree-menu-framework
 * ------------------------------
 */

.cfind-explorer ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

.cfind-explorer ul li {
	padding:5px 20px 0px 20px;
	position:relative;
}
 
.cfind-explorer > ul,
.cfind-explorer > ul ul {
	margin:0;
	padding:0;
	list-style:none;
}

.cfind-explorer > ul ul {
	margin-left:1em; /* indentation */
	position:relative;
}

.cfind-explorer > ul ul ul { margin-left:.5em; } /* (indentation/2) */

.cfind-explorer > ul ul:before {
	content:"";
	display:block;
	width:0;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	border-left:1px solid;
}

.cfind-explorer > ul li {
	margin:0;
	padding:0 1.5em; /* indentation + .5em */
	line-height:2em; /* default list item's `line-height` */
	color:#369;
	font-weight:bold;
	position:relative;
}

.cfind-explorer > ul ul li:before {
	content:"";
	display:block;
	width:10px; /* same with indentation */
	height:0;
	border-top:1px solid;
	margin-top:11px; /* border top width */
	position:absolute;
	top:0em; /* (line-height/2) */
	left:0;
}

.cfind-explorer > ul ul li:last-child:before {
	background:#fff; /* same with body background */
	height:auto;
	top:0em; /* (line-height/2) */
	bottom:0;
}

/* END of Framework */

.cfind-explorer li.active > a {
	color:#4285F4;
}	

/* ITEMS */

.cfind-items {
	width:calc(100% - 256px - 280px - 10px);
	width:-moz-calc(100% - 256px - 280px - 10px);
	width:-webkit-calc(100% - 256px - 280px - 10px);
	padding:0px 5px;
	height:500px;
	overflow:auto;
	float:left;
}

.cfind-items ul {
	display:block;
	margin:0px;
	padding:0px;
	list-style:none;
}

.cfind-items ul:after {
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
}

.cfind-items ul li {
	float:left;
	width:80px;
	margin-right:10px;
	margin-bottom:10px;
	padding:5px;
	border:thin solid #fff;
}

.cfind-item-file figure, .cfind-item-folder figure {
	width:calc(100% - 10px);
	width:-moz-calc(100% - 10px);
	width:-webkit-calc(100% - 10px);
	padding-bottom:100%;
	padding-left:0px;
	padding-right:0px;
	margin-left:0px;
	margin-top:0px;
	padding-top:0px;
}

.cfind-items ul li span {
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:12px;
}

.cfind-items ul li:hover {
	border:thin solid #C3AC13;
	background-color:#FBF4C0;
}

.cfind-items ul li[data-active="true"] {
	border:thin solid #EF8011;
	background-color:#FBF4C0;
}

.cfind-item-folder figure {
	background:url('../images/folder.png') no-repeat center center;
	background-size:contain;
}

.cfind-item-file figure {
	background:url('../images/file.png') no-repeat center center;
	background-size:contain;
}

.cfind-item-file[data-type="zip"] figure,
.cfind-item-file[data-type="rar"] figure,
.cfind-item-file[data-type="7z"] figure,
.cfind-item-file[data-type="tar"] figure,
.cfind-item-file[data-type="gz"] figure {
	background-image:url('../images/file-zip.png');
}

.cfind-item-file[data-type="jpg"] figure,
.cfind-item-file[data-type="jpeg"] figure,
.cfind-item-file[data-type="png"] figure,
.cfind-item-file[data-type="gif"] figure,
.cfind-item-file[data-type="bmp"] figure {
	background-color:#aaa;
}

.cfind-item-file[data-type="doc"] figure,
.cfind-item-file[data-type="docx"] figure {
	background-image:url('../images/file-doc.png');
}

.cfind-item-file[data-type="xls"] figure,
.cfind-item-file[data-type="xlsx"] figure {
	background-image:url('../images/file-xls.png');
}

.cfind-item-file[data-type="pdf"] figure {
	background-image:url('../images/file-pdf.png');
}

.cfind-item-file[data-type="mp3"] figure {
	background-image:url('../images/file-audio.png');
}

.cfind-item-file[data-type="mp4"] figure,
.cfind-item-file[data-type="mkv"] figure,
.cfind-item-file[data-type="flv"] figure,
.cfind-item-file[data-type="avi"] figure {
	background-image:url('../images/file-video.png');
}

/* DETAIL */

.cfind-detail {
	float:left;
	width:290px;
	min-height:500px;
	overflow-x:auto;
	border-left:thin solid #ccc;
	padding:10px 10px 10px 15px;
	color:#000;
}

.cfind-detail h3 {
	margin-top:0px;
	padding-top:0px;
}

.cfind-detail .cfind-item-file figure {
	border-top:thin solid #ccc;
	border-bottom:thin solid #ccc;
    background-color:#aaa;
}

.cfind-detail .remove {
	line-height:30px;
	background-color:#EA4336;
	display:inline-block;
	text-align:center;
	color:#fff;
	width:140px;
	margin-right:10px;
}

.cfind-detail .use {
	line-height:30px;
	background-color:#4285F4;
	display:inline-block;
	text-align:center;
	color:#fff;
	width:100px;
}

.cfind-detail .remove:hover, .cfind-detail .use:hover {
	color:#fff;
	text-decoration:none;
	opacity:.8;
}

/* MESSAGE */

.cfind-message {
	margin-bottom:10px;
	padding:8px 15px 8px 30px;
	border:thin solid #8CA102;
	background-color:#FAFFDB;
	position:relative;
}

.cfind-message:before {
	position:absolute;
	left:10px;
	top:8px;
	
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f06a";
	color:#8CA102;
}

.cfind-message.cfind-message-success {
	border:thin solid #34A853;
	background-color:#DBFFE4;
}

.cfind-message.cfind-message-error {
	border:thin solid #A12802;
	background-color:#FFE2D7;
}

.cfind-message.cfind-message-error:before {
	content: "\f071";
	color:#f00;
}
.cfind-message.cfind-message-success:before {
	content: "\f164";
	color:#34A853;
}



.cfind-select-area .selection-area {
    margin-bottom:20px;
}

.cfind-select-area .selection-area:after {
    display:block;
    content:"*drag on image to select area";
    font-style:italic;
}

.cfind-select-area .selection-area img { 
    max-width:100%;
    border:thin solid #555;
    height:auto;
}

.cfind-select-area .btn {
    background-color:#4285F4;
    color:#fff;
    padding:10px 20px;
    text-decoration:none;
}

.cfind-select-area input[type=text].size {
    padding:5px 10px;
    width:100px;
    text-align:right;
}

.cfind-detail .use.cfind-use-crop, .cfind-select-area .btn.selection-area-confirm {
    background-color:#017A14;
}

.cfind-main, .cfind-select-area {
	margin:10px;
	max-width:1200px;
	border-bottom:thin solid #aaa;
	padding-bottom:30px;
	background-color:#fff;
	min-width:780px;
}

.cfind-select-area {
    display:none;
}