@charset "UTF-8";
/* CSS Document */
/* * is a universal */

body {font:1em/1.5em "Lucida Sans", sans-serif; /*1em is font size/ 1.5em is line height */	}

/*form header information */
h2, label {font-family: Arial, Verdana, Helvetica, sans-serif;}

h2 {
	margin:0;
	display:inline; /*h2 behaves like a block  element, we don't want this - this puts it onto one line */
}


label {
	width:150px;
	margin-top:3px;
	display:inline-block;
	float:left;
	padding:3px;
}

input {
	height:20px;
	width:220px;
	padding:5px 8px; /*5px for top and bottom, 8px for left and right */	
}


input, textarea {
	border:1px solid #aaa;
	box-shadow:0 0 3px #ccc, 0 10px 15px #eee inset;/* vertical horizontal blur */ 
	border-radius:10px;
	transition:padding .25s;	
}


/* adding interactivity to form fields */
input:focus, textarea:focus {
	background:#fff;
	border:1px solid #555;
	box-shadow:0 0 3px #aaa;
 	/*changes the field to let you know you are there */
	padding-right:10px; /* expands the box size */
	
	}



/* required field and form text */
.form_hint, .required_notification {
	font-size:.8em;
}

.required_notification {
	margin:5px 0 0 0; /*top bottom left top ? */
	display:inline; /*lines it up with top line */
	float:right;
	color:#d45252; /* check WebAIM to check accessibility */	
}

.form_hint {
	background:#d45252;
	border-radius:3px;
	color:#fff;
	margin-left:8px;
	padding:1px 6px; /*1px for top an dbottom 6 px for left and right */
	position:absolute;
	z-index:999;
	display:none;
}



/* using pseudo-elements before and after it is the :: */
.form_hint::before { 
	content:/*unicode for geometric shapes */ "\25C0"; /* gives a left pointing triangle */
	color:#d45252;
	position:absolute;
	top:1px;
	left:-6px;	
}

input:focus + .form_hint {display:inline;}
input:required:valid + .form_hint {background:#28921f;}
input:required:valid + .form_hint::before {background:#28921f;}



input:required, textarea:required {
	background:#fff url(images/red_asterisk.png) no-repeat 98% center; /*puts a red asterisk inside the text fields that are to be filled out */
}

/*message bubble when you didn't fill in the form properly - when the browser feels that is was not filled in right */
input:focus:invalid, tetarea:focus:invalid {
	background:#fff url(images/invalid.png) no-repeat 98% center; /* exclamation mark for accessibility image */
	box-shadow:0 0 40px #d45252;
	border-color:#b03535;
}

input:required:valid, textarea:required:valid {
	background:#fff url(images/valid.png) no-repeat 98% center; /*visibility of check mark image */
	box-shadow:0 0 5px #5cd053;
	border-color:#28921f;	
}



ul {
	/* list-style:none;
	list-style-position:outside; */
	list-style:none outside;
	width:300px;
	margin:0;
	padding:0;
}

li {
	padding:12px;
	border-bottom:1px solid #ccc;
	position:relative;	
}


li:first-child, li:last-child {
	border-bottom:1px solid #777;
}


/* *:focus {
	outline:blue; */ /*when not used there is a blue outline on the form 
}*/


/* submit button styles */

button.submit  {
	background:#68b12f;
	background:linear-gradient(to top, #68b12f, #50911e);
	/*not complete - do put in the various webkits */
	border:1px solid #509111;
	border-bottom:1px solid #5b992b;
	border-radius:3px;
	box-shadow:0 1px 0 #9fd574;
	color:#fff;
	font-weight:bold;
	padding:6px 20px;
	text-align:center;
	text-shadow:0 -1px 0 #396715;	
}

button.submit:hover, button.submit:focus {
	opacity:85%;
	cursor:pointer; /* changes arrow to finger */
}


button.submit:active {
	border:1px solid #20911e;
	box-shadow:0 0 10px 5px #356b0b inset;	
}


/*to make the button live - get form processing script from host server - some charge for that */


/* 
input[type=type] {
	width:100px;
	transition:ease-in-out, width .35s ease-in-out;
}

input[type=text]:focus {
	width:250px;
} */