/*
New Perspectives on HTML and CSS
Final Project

Oform Style Sheet
Author: Joshua Aguilar
Date:   1/31/2016

Filename:         oform.css
Supporting files:

*/
body section h1{
  color: white;
}

section p {
  color: white;
}

/*Field set styles */
fieldset {
  border: 1px solid rgb(255, 0, 0);
  margin: 10px 0px 10px 2.5%;
  width: 80%;
}

legend {
  background-color: rgb(255, 0, 0);
  align-items: center;
  color: white;
  padding: 3px 0px;
  text-indent: 5px;
  width: 100%;
}

/* Label styles */
label {
  color: white;
  clear: left;
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 4% 7px 5px;
  width: 40%; figure 6-18
}

/* Input control styles */
input {
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 0px;
  width: 50%;
}

/* Selection list styles */
select {
  display: block;
  float: left;
  font-size: 0.9em;
  margin: 7px 0px;
}

/* Option button styles */
fieldset.optionGroup {
  border-width: 0px;
}

fieldset.optionGroup label {
  display: inline;
  float: none;
  margin: 0px 3px 0px 0px;
  width: 30px;
}

fieldset.optionGroup input {
  display: inline;
  float: none; margin:
  0px 20px 0px 0px;
  width: 20px;
}

/* Text area styles */
textarea {
  display: inline-block;
  font-size: 0.9em;
  float: none;
  height: 150px;
  margin: 10px 0px;
  width: 50%;
}

/* Check box styles */
#additional {
  color: rgb(255, 0, 0);
  float: left;
  margin: 10px auto;
  text-align: justify;
  width: 90%;
}

#additional input {
  display: inline;
  float: none;
  width: 20px;
}

/* Button styles */
form p {
  text-align: center;
  float: left;
  width: 200px;
}
input[type=”submit”], input[type=”reset”], input[type=”button”] {
  display: inline;
  float: left
  height: 40px;
  width: 200px;
}

/* Validation styles */
input:focus:valid {
  background: rgb(220, 255, 220) url(go.png) bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

input:focus:invalid {
  background: rgb(255, 232, 233) url(stop.png) bottom right no-repeat;
  -o-background-size: contain;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
}

input#fName, #lName {
  width: 250px;
}

input#street {
  width: 350px;
}

input#phone, #city, #dob {
  width: 150px;
}

input#state {
  width: 40px;
}

input#zip {
  width: 80px;
}