/* 
 * The styling in this file is purely so we can have a custom image for the Browse / Submit button for file uploads.
 * Storing in separate CSS in case it needs to be reused in the future.  A working example using this is serviceHubContent.jsp
 * Author: David Tran
 */

/* This is the top level of the div headers and is used to specify the overall length */
div.main {
	width:400px;
}

/* This specifies the overall div for the browse feature */
div.file_input {
	float:left; 
	position:relative; 
	height:30px;
	width:84%;
}

/* Div containing the actual input type=file */
div.file_input_real {	
	position:relative;
	width:100%;
	z-index:2;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	opacity:0;
}

/* Div containing the fake text and Browse button to customize the browse button */
div.file_input_faux {
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%; 
	z-index:1; 
	margin:0;
}

div.file_submit {
	float:left; 
	position:relative; 
	height:30px; 
	width:16%;
}

/* Div containing the actual input type=file */
div.file_submit_real {	
	position:relative;
	width:100%;
	z-index:2;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter:alpha(opacity=0);
	opacity:0;
}

div.file_submit_faux {
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%; 
	z-index:1; 
	margin:0;
}

/* Setting the width here doesn't work for some reason */
div.file_input input[type=file] {
	position:relative; 
	z-index:2; 
}


div.file_submit input[type=submit] {
	position:relative; 
	z-index:2; 
}