/*
   IT 270 Final Project

   CPI Form Style Sheet

   Author:  Conor Moore
   Date:    11/7/2015

*/

/* Form styles */

form {
   margin: 10px 350px;
}

fieldset {
   background-color: white;
   border: 1px solid black;
   float: none;
   margin: auto;
   width: 800px;
}

legend {
   background-color: white;
   color: black;
   padding: 3px 0px;
   text-indent: 5px;
   width: 100%;
   border: 1px solid black;
   font-size: 24px;
   font-weight: bold;
}

label {
   clear: left;
   display: block;
   float: left;
   font-size: .9em;
   margin 7px 4% 7px 5px;
   width: 40%;
}


/* Input box styles */

input {
   display: block;
   float: left;
   font-size: .9em;
   margin: 7px 0px;
   width: 50%;
}

/* Selection box styles */

select {
   display: block;
   float: left;
   font-size: .9em;
   margin: 7px 0px;
}

/* Option group styles */

fieldset.optionGroup {
   border-width: 0px;
   width: 200px;
}

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;
}

/* Textarea styles */

textarea {
   display: block;
   font-size: .9em;
   float: left;
   height: 150px;
   margin: 10px 0px;
   width: 50%;
}

/* Checkbox styles */

#newsletter {
   color: red;
   float: none;
   margin: 10px auto;
   text-align: center;
   width: 90%;
}

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

/* Button styles */

form p {
   text-align: center;
   float: none;
   clear: left;
}

input[type="submit"], input[type="reset"] {
   display: inline;
   float: none;
   height: 40px;
   width: 200px;
}

/* Validation styles */

input:focus, select:focus, textarea:focus {
   background-color: rgb(220, 255, 220);
}

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;
}