/* file button scheme adapted from code at
 http://the-echoplex.net/log/how-to-style-a-html-file-upload-control-using-css-and-javascript
 also, tweaked based on http://jsfiddle.net/3zNMK/21/
 */


.file-upload {
	overflow: hidden;
	display: inline-block;
	position: relative;	
	cursor: pointer;
	}
	


.file-upload img {
  	position: absolute;
	width:100%;
	height:100%;
	top: 0;
	left: 0;
	margin: 0;
  }
  
  /* alt CSS button:   <span class="button">Choose a File</span> */
  
  .file-upload .button {
  background: #333;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  margin-right: 5px;
  padding: 4px 18px;
  text-transform: uppercase;
}

	/* this puts input in upper right of the box. 
	NOTE: original was 'left 0:, which in Mozilla resulted in 
	inability to activate with mouse. In any case, no matter
	what I've tried, in CHROME the part of the box that gets filled
	will cancel the custor: pointed attribute. But it works,
	and still allows me to use the a button image.
	Anyway, whatever the particular broswers file text, this 
	makes it big enough to fill the box, and 
	since the overflow of the box is blocked, the
	whole box should be active. The opacity makes 
	it invisible, without deactivating it in IE 8 */
	
.file-upload input {
	cursor: pointer;
	font-size: 2em;			/* change */
	filter: alpha(opacity=0); 	/* make 30 to test, IE <= 8 */
	 -moz-opacity: 0;  			/* .3 to test */
	 opacity: 0; 				/* make .3 to test */
	position: absolute;
	width: 100%;			/* added */
	top: 0;
	 right: 0;
	}
	
	
/* Adjust / Set the initial button size. This is needed for the enclosing div of a
 that will hold a button image or XCSS button for me, as well 
 as any other button images. Unfortunately I can't do this by percent, so
 another adjusted copy may need to be placed in the @media rule for small screen
*/
.file-upload,.button-size { width: 115px; height: 41px; width: 8rem; height: 3rem; }