/*
   New Perspectives on HTML and CSS
   Tutorial 6
   Case Problem 4

   Order Form Style Sheet
   Author: Claudia Lindsay
   Date:   10/05/2015  

   Filename:         oform.css
   Supporting files: go.png, mclogo.png, stop.png

*/

/* Field set styles */
fieldset {
	border: 5px ridge rgb(0, 0, 255);
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   float: left;
   margin: 9px 0px 10px 2%;
   width: 45%
}   


legend {
	border: 7px ridge rgb(0, 0, 255);
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   border-radius: 7px;
   background-color: rgb(0,0,255);
   color: white;
   padding: 2px 0px;
   text-indent: 5px;
   width: 98.7%;
}

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

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

input#state {
   width: 50px;
}

/* 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: block;
   font-size: 0.9em;
   float: left;
   height: 150px;
   margin: 10px 0px;
   width: 50%;
}

/* Check box styles */
#newsletter {
   color: rgb(0, 0, 255);
   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;
}

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

/* Validation styles */
input:focus, select:focus, textarea:focus {
   background-color: rgb(102, 153, 255);
}

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