/* form-v1 - basic form elements =================================================================================================================== */

/* Use code like this to target input types anywhere --------------
input:not([type=submit]):not([type=file]):not([type=button]) {
	background-color:#fff; 
	border: 2px solid #777; 
	padding: 10px; 
	border-radius:0px;
	color:black;
	width: 80%;
}

input:not([type=submit]):not([type=file]):not([type=button]):hover{
	background-color: #fff; 
	border: 2px solid #fff; 
	color:black;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.6);
}

input[type="text"]:disabled {
    background: #dddddd;
}
-----------------------------------------------------------------*/

select {
	padding: 5px;
	border: 2px solid #ddd;
	}
select:not([disabled]):hover{
	border:2px solid rgba(60, 132, 245, 1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
	}
	
select option {
    margin:40px;
    /* background: gray; */
    /* color:#fff; */
    /* text-shadow:0 1px 0 rgba(0,0,0,0.4); */
	}

input, textarea, select, button {
	box-sizing: border-box; /*neccessary to prevent padding from pushing out of bounds - tested in Chrome*/
    font-size: 18px;
    padding: 10px;
    margin: 5px 0px;
	}

fieldset {
    border: 1px solid #C0C0C0;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

label{
	color:#000;
	/* border:none; */
	vertical-align: middle;
	/* margin-left: 8px; */
	}
	
/*name could be anything*/
.elements-light label{
	color:#333;
	vertical-align: middle;
	/* border:none; */
	}
	
	
input[type="text"]{
	width: 100%;
    border: 2px solid #808080
	}
input[type="text"]:not([disabled]):hover{
	border:2px solid rgba(60, 132, 245, 1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
	} 

input[type="search"]{
	width: 100%;
    border: 2px solid #808080
	}

input[type="search"]:not([disabled]):hover{
	border:2px solid rgba(60, 132, 245, 1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
	} 
	
input[type="password"]{
	width: 100%;
    border: 2px solid #808080
	}
input[type="password"]:not([disabled]):hover{
	border:2px solid rgba(60, 132, 245, 1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
	} 

	
input[type="email"]:not([disabled]):hover, input[type="tel"]:not([disabled]):hover, input[type="url"]:not([disabled]):hover, input[type="number"]:not([disabled]):hover, input[type="date"]:not([disabled]):hover, input[type="month"]:not([disabled]):hover, input[type="week"]:not([disabled]):hover, input[type="time"]:not([disabled]):hover, input[type="datetime"]:not([disabled]):hover, input[type="datetime-local"]:not([disabled]):hover, input[type="color"]:not([disabled]):hover{
	border:2px solid rgba(60, 132, 245, 1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
	} 
		
input[type="radio"]{
	height:25px;
	width:25px;
	vertical-align: middle;
	} 
	
input[type="checkbox"]{
	height:25px;
	width:25px;
	vertical-align: middle;
	} 
	
textarea{
	width: 100%;
	height: 100px;
	font-family: Arial, Helvetica, sans-serif;
	border:2px solid gray;
	}
	
textarea:not([disabled]):hover{
	border:2px solid rgba(60, 132, 245, 1);
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 1);
	}
	
input[type="color"]{
	padding:0;
	height: 30px;
    width: 70px;
	} 
	
input[type=range].range-vert {
	transform: rotate(90deg);
	height: 250px;
    width: 250px;
    margin-left: -100px;
	} 
	
input[type=range][orient=vertical].range-vert2 {
	writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
	} 
	
/*form buttons*/
input[type="button"]{
	padding:10px;
	width:auto;
	white-space: nowrap;
	text-decoration:none;
	border:none;
	background:rgba(0,0,0,0.6);
	border-radius:4px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border:2px rgba(60, 132, 245,0.5) solid;
	-moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.52);
	} 
input[type="button"]:not([disabled]):hover{
	text-shadow: -1px -1px 3px rgba(0,0,0,1), 1px 1px 3px rgba(0,0,0,1), 0px 0px 4px rgba(0,0,0,1); 
	background:rgba(60, 132, 245, 0.5);
	cursor: pointer;
	color: #fff;
	} 
input[type="button"]:disabled {
    color:gray;
	box-shadow: none;
	border:2px solid gray;
	}
	
input[type="submit"]{
	padding:10px;
	width:auto;
	white-space: nowrap;
	text-decoration:none;
	border:none;
	background:rgba(0,0,0,0.6);
	border-radius:4px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border:2px rgba(60, 132, 245,0.5) solid;
	-moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.52);
	} 
input[type="submit"]:not([disabled]):hover{
	text-shadow: -1px -1px 3px rgba(0,0,0,1), 1px 1px 3px rgba(0,0,0,1), 0px 0px 4px rgba(0,0,0,1); 
	background:rgba(60, 132, 245, 0.5);
	cursor: pointer;
	color: #fff;
	} 
input[type="submit"]:disabled {
    color:gray;
	box-shadow: none;
	border:2px solid gray;
	}
	
input[type="reset"]{
	padding:10px;
	width:auto;
	white-space: nowrap;
	text-decoration:none;
	border:none;
	background:rgba(0,0,0,0.6);
	border-radius:4px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border:2px rgba(60, 132, 245,0.5) solid;
	-moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.52);
	} 
input[type="reset"]:not([disabled]):hover{
	text-shadow: -1px -1px 3px rgba(0,0,0,1), 1px 1px 3px rgba(0,0,0,1), 0px 0px 4px rgba(0,0,0,1); 
	background:rgba(60, 132, 245, 0.5);
	cursor: pointer;
	color: #fff;
	} 
input[type="reset"]:disabled {
    color:gray;
	box-shadow: none;
	border:2px solid gray;
	}
	
/*Custom File button - uses styling on label ======================================*/
input[type="file"]#file-upload {
    display: none;
	}
input[type="file"]#file-upload-disabled {
    display: none;
	}

label.file-btn-1 {
    display: inline-block;
    padding:10px;
	width:auto;
	white-space: nowrap;
	text-decoration:none;
	border:none;
	background:rgba(0,0,0,0.6);
	border-radius:4px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border:2px rgba(60, 132, 245,0.5) solid;
	-moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.52);
	}
 
label.file-btn-1:not([disabled]):hover{
	text-shadow: -1px -1px 3px rgba(0,0,0,1), 1px 1px 3px rgba(0,0,0,1), 0px 0px 4px rgba(0,0,0,1); 
	background:rgba(60, 132, 245, 0.5);
	cursor: pointer;
	color: #fff;
	} 
/*To Do: figure out how to apply this css to a disabled custom file/label button*/
label.file-btn-1:disabled {
    color:gray;
	box-shadow: none;
	border:2px solid gray;
	}
/* end Custom File button //////////////////////////////////////////////////////// */

	
button{
	padding:10px;
	width:auto;
	white-space: nowrap;
	text-decoration:none;
	border:none;
	background:rgba(0,0,0,0.6);
	border-radius:4px;
	color: #fff;
	font-size: 18px;
	text-align: center;
	border:2px rgba(60, 132, 245,0.5) solid;
	-moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.52);
	} 

button:not([disabled]):hover{
	text-shadow: -1px -1px 3px rgba(0,0,0,1), 1px 1px 3px rgba(0,0,0,1), 0px 0px 4px rgba(0,0,0,1); 
	background:rgba(60, 132, 245, 0.5);
	cursor: pointer;
	color: #fff;
	} 
button:disabled {
    color:gray;
	box-shadow: none;
	border:2px solid gray;
	}
/* End form-v1  ///////////////////////////////////////////////////////////////////////////////////////////////////////////// */




/* Testing  ------------------------------------------ */