/*
   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

*/

section, nav, article, aside, footer, header, legend, label, input{
   display: block;
}

/* fieldset styles */
fieldset {
	background-color: rgb(255, 255, 204);
	border: 1px solid rgb(0,0,255);
	margin: 10px auto;
	width: 70%;
}

legend {
	background-color: rgb(0,0,255);
	color: white;
	padding: 8px 8px;
	text-indent: 10px;
	width: 98.6%;
}

/* Label styles */

label {
	clear: left;
	float: left;
	font-size: 15px;
	margin: 9px 17px 5px;
	width: 20%;
}


/* Input styles */

/* For the input control elements, used margins and floated the block display to the left to 
   fall in line with the positioning of the labels */
input {
	display: block;
	float: left;
	font-size: 0.9em;
	margin: 9px 0px;
	width: 50%;
}

/* Adjusted the width of the following input boxes */
input#state, input#computersInHousehold {
	width: 50px;
}

input#fName, input#lName, input#city {
	width: 300px;
}

input#zip, input#phone {
	width: 150px;
}


/* Selection list styles */

/* Employed styles for the select control elements that are similar to the ones for the 
   input control elements */
select {
	display: block;
	float: left;
	font-size: 0.9em;
	margin: 7px 0px;
}


/* Option button styles */

/* Used a class selector to position the option items within the option control element
   (styles are also made to the corresponding labels and inputs) */
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;
}

/* Used a class selector to tweak the positioning after swapping the position of the 
   label(s) and input box(es) of the warranty check box control element (as compared with  
   the other radio control element items in which the label precedes the input box) */
fieldset.optionGroup2 {
	border-width: 0px;
}

fieldset.optionGroup2 label {
	display: inline;
	float: none;
	margin: 0px 20px 0px 0px;
	width: 30px;
	font-size: 0.8em;
}

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


/* Text area styles */

/* Set similar styles for the text area box as for the other control elements, with 
   a main difference of a much larger height measurement here */
textarea {
	display: block;
	font-size: 0.9em;
	float: left;
	height: 150px;
	margin: 10px 0px;
	width: 50%;
}


/* Check box styles */

/* Used a class selector to add styles to adjust the positioning of check box control 
   label(s) and input box(es) */
.optionsRight {
	width: 50%;
	display: block;
	float: left;
	margin-top: 5px;
}

/* Applied styles to the newsletter label and input check box to center them within 
   the page, employ a blue font color, and set their widths */
#newsletter {
	color: rgb(0,0,204);
	float: none;
	margin: 10px auto 0px;
	text-align: center;
	width: 90%;
}

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


/* Button styles */

/* Used to center the text in the custom Contact Me button */
form p {
	text-align: center;
}

/* Used a percentage left margin for the Submit button to try to maintain a 
   fluid layout */
input[type="submit"] {
	margin-left: 18%;
}

/* For the Submit and Reset buttons, set height and width and displayed them as blocks so 
   they will appear side-by-side and provide the ability to add the newly created custom 
   Contact Me button on the same line  */
input[type="submit"], input[type="reset"] {
	display: block;
	float: left;
	height: 40px;
	width: 200px;
	margin-right: 10px;
	margin-bottom: 15px;
}

/* Applied styles to the "mailto" link in order to create a custom Contact Me button that 
   looks identical to the Submit and Reset buttons */
#emailButton {
	color: rgb(33,33,33);
	display: block;
	margin-top: 9px;
	margin-bottom: 15px;
	width: 100%;
	float: left;
	height: 39px;
	line-height: 39px;
	width: 200px;
	font-size: 0.9em;
	background: linear-gradient(rgb(236,236,236), rgb(213,213,213));
	border: 1px solid rgb(112,112,112);
}

/* Applied hover styles to the custom Contact Me button so the hover effect 
   would be identical to the one for the Submit and Reset buttons */
#emailButton:hover {
	background: none;
	background-color: rgba(0,255,255,0.4);
	border: 1px solid rgb(30,144,255);
}

/* Other styles */

/* Used class selector to change the color of the asterisk used to indicate 
   that a field is required to red */
.redReq {
	color: red;
	font-style: normal;
}


/* Validation styles */

/* When focus is on the input, select, or textarea control elements, the 
   background color is changed to light green */
input:focus, select:focus, textarea:focus {
	background-color: rgb(220,255,220);
}

/* Added a check mark image to the right side of an input field when it has been determined 
   to be valid */
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;
}

/* Added an "X" image to the right side of an input field when it has been determined 
   to be invalid */
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;
}