/*
   New Perspectives on HTML and CSS
   Final Project
  
   Donation Form Style Sheet
   Author: Claudia Lindsay
   Date:   10/15/2015

   Filename:         donationform.css
   Supporting Files: go.png, stop.png

*/

article {
	overflow: auto;
}

#box {
	background-color: rgb(224, 224, 224);
    margin: 15px auto;
    padding: 5px;
    width: 90%;
	border-width:3px;	
    border-style:groove;
}

fieldset {
   border: none;
   margin: 5px;
}

legend {
   background-color: rgba(252, 115, 115, 0.5);
   color: black;
   margin-top: 10px;
   margin-bottom: 10px;
   text-indent: 20px;
   width: 100%;

   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}

label {
   clear: left;
   display: block;
   float: left;
   font-size: 0.8em;
   text-align: right;
   margin: 2px 5px;
   width: 25%;
}

input {
   display: block;
   float: left;
   font-size: 0.9em;
   margin: 2px 0px;
   width: 60%;
}

select {
   display: block;
   float: left;
   font-size: 0.9em;
   margin: 2px;
}

textarea {
   display: block;
   float: left;
   font-size: 0.9em;
   height: 85px;
   width: 60%;
}

fieldset.optionGroup {
   margin-left: 25%;
}



fieldset.optionGroup img {
	border: none;
	max-width: 30px; 
    max-height: 30px;
}

input[type="radio"] {
   display: inline;
   width: 20px;
}

#csc {
   width: 50px;
}

input[type="submit"] {
   background-color: rgba(252, 115, 115, 0.5);

   float: none;
   height: 30px;
   margin: 30px auto;
   width: 150px;
   
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
}

/* Validation styles */
input:focus, textarea:focus {
   background-color: rgb(255, 218, 165);
}

input:focus:invalid {
   background: rgb(255, 245, 215) url(stop.png) bottom right no-repeat;
}

input:focus:valid {
   background: rgb(215, 255, 215) url(go.png) bottom right no-repeat;
}