/*
      Module 7
	  Final Web Design Project
	  
      ASK Computer Solutions Website Project
      Author: Allan A. Seals III
	  Class: IT-270
      Date:   August 30, 2015

      Filename:         contactStyles.css
      Supporting files: contact.html, allan.jpg, styles.css, index.html

   */
/* Allows text to be wrapped around the picture */
   #phoneNumber{
	float: right;								
	margin: 0 0 10px 10px;
   }

#article_1{
	background-color: DeepSkyBlue;
	border: 1px solid DarkViolet;
}

#a1{
	color: DarkViolet;
	
}


/* Field set styles */
/* sets the values for the styles in the fieldset boxes. */
fieldset {	
	background-color: DeepSkyBlue;
	border: 1px solid DarkViolet;
	float:left;
	margin: 10px 0px 10px 2.5%;
	width: 46%;
}
/* the legend is the titlebar for the form. width is how long across the top
   of the field set. padding is the space around the text of the legend. */
legend {									
	background-color: DarkViolet;
	color: white;
	padding: 3px 0px;
	text-indent: 5px;
	width: 100%;
}

/*Label styles */

label {
	clear: left;				/*only dispaly a lable when the line is clear */
	display: block; 			/*displays each lable as block */
	float: left;				/* tells the block how to layout */
	font-size: 0.9em;
	margin: 7px 4% 7px 5px;
	width: 40%;
	text-align: left;			/*over rides inherited center, positions text at left margin for labels*/
}

/* Input control styles */

input {
	display: block;
	float: left;
	font-size: 0.9em;
	margin: 7px 0px;
	width: 50%;
}
/* limit the input box size for state*/
input#state{
	width:50px;
}

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

/* Option button styles*/
fieldset.optionGroup {						/* this sets the border margin for "was your visit friendly" */
	border-width: 0px;
}

fieldset.optionGroup label {					/* this tells the labels for "was your visit friendly" how to display*/
	display: inline;					
	float: none;
	margin: 0px 3px 0px 0px;
	width: 20px;
}

fieldset.optionGroup input {
	display: inline;					/* this tells the radios for "was your visit friendly" how to display*/
	float: none;
	margin: 0px 20px 0px 0px;
	width: 20px;
}

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

/* Check box style */

#newsletter {
	color: DarkViolet;
	float: none;
	margin: 10px auto;
	text-align: center;
	width: 90%;
}
#newsletter input {
	display: inline;
	float: none;
	width: 20px;
}
input#ordersPerMonth{
	width:70px;
}

/* Range slider styles */
label.sliderLabel { 
	clear: none;
	font-size: 0.7em; 
	margin: 10px 0px; 
	text-align: center; 
	width: 10px
}
input[type="range"] { 					/* [] selects an attribute. to be more you can name the attribute*/
	width: 150px;						/*sets the width of the slider */
	color: red;
}

/* Button styles */
section p { 
	color: DarkViolet;
	text-align: center;
}
input[type="submit"], input[type="reset"] { 
	display: inline; 
	float: none; 
	height: 40px;
	width: 200px;
}

/* Validation styles */
	input:focus,													/* changes styles of selected element in form. This changes background to light green */
	textarea:focus { background-color: rgb(220, 255, 220);
	
}	

input:focus:valid { 
	background: rgb(220, 255, 220) url(go.png) bottom right no-repeat;	/* changes styles of selected element in form. This changes background to light green and the border to green and a checkmark*/
	-o-background-size: contain; 
	-moz-background-size: contain; 
	-webkit-background-size: contain; 
	background-size: contain;
	border-color: green;
}

input:focus:invalid { 
	background: rgb(255, 232, 233) url(stop.png) bottom right no-repeat;			/* changes styles of selected element in form. This changes background to light red, border to red, and a red x */
	-o-background-size: contain; 
	-moz-background-size: contain; 
	-webkit-background-size: contain; 
	background-size: contain;
	border-color:red;
}