@charset "utf-8";
/*  
    Site Name   : A Theory Tank Inc. Project
    URI         : http://www.theorytank.com
    Description : Global style sheets (including reset, typography, and forms)
    Version     : 0.0.1
    Author      : Theory Tank Inc.
    Author URI  : http://www.theorytank.com

    Document    : frontendupload.css
    Created on  : Jan 30, 2013, 3:15:00 PM
    Author      : Chris Murphy
    Description :
        UI Component styles for A Theory Tank Inc. Project
*/


/* FRONT END UPLOADER
---------------------------------------------------------- */
[data-control-type~="ui-front-end-uploader"]
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	    
    
    display: inline-block;
    position: relative;

    min-width: 100px; min-height: 100px;
    width: 100%;
    margin: 0; padding: 0;
    overflow: hidden;
    
}

[data-control-type~="ui-front-end-uploader"][data-default-uploader="true"]
{
    min-width: 0; min-height: 0;
}

[data-control-type~="ui-front-end-uploader"] .file-drop-target
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	    

    position: relative;
    
    width: 100%;
    margin: 0; padding: 25% 0;
    
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    
    border: 5px dashed #ddd;
}

[data-control-type~="ui-front-end-uploader"] .file-drop-target .file-drop-instructions
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	    
    
    margin: 0 0 14px 0; padding: 0 1em;
    
    width: 100%;
    
    text-align: center;
    color: #ddd;
    
    font-size: 26px !important;
    line-height: 1.625em;
}

[data-control-type~="ui-front-end-uploader"] .file-drop-target .file-drop-browse-divider,
[data-control-type~="ui-front-end-uploader"] .file-drop-target .file-drop-browse
{
    margin: 0;
    text-align: center;
}

[data-control-type~="ui-front-end-uploader"] .file-drop-target .file-drop-browse-divider
{
    margin: 0 0 1em 0;
    font-size: .875em;
}

[data-control-type~="ui-front-end-uploader"] .file-drop-target .file-drop-browse .ui-control[data-control-type~="ui-button"]
{
    color: #444;
    background: rgb(250, 250, 250);
}

/* PREVIEW */
[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-upload-preview"],
[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-upload-preview"] img
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	    
}

[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-upload-preview"]
{
    width: 100%; height: auto;
    
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: -1;
    
    overflow: hidden;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
}

[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-upload-preview"] > img
{
    display: block;
    margin: 0; padding: 0;
    height: auto; width: 100%;
    max-width: 1000%;
}

/* PREVIEW BUCKET*/
[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-preview-bucket"],
[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-preview-bucket"] img
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;	    
}

[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-preview-bucket"]
{
    width: 100%; height: 120px;
    overflow: hidden;
}

[data-control-type~="ui-front-end-uploader"] [data-control-type~="ui-preview-bucket"] > img
{
    display: inline-block;
    margin: 0; 
    padding: 0 5px 0 0;
    height: auto; width: 15%;
    max-width: 1000%;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
}