/*
   New Perspectives on HTML and CSS
   IT270 Final Project

   Author: Christina Morita
   Date:  November 1, 2015

   Filename:         form.css

*/

/* Field set styles */
fieldset { 
    background-color: slategray; 
    border: 1px solid darkslateblue; 
    float: left; 
    margin: 10px 0px 10px 2.5%; 
    width: 100%;
    border-radius: 10px;
}

body {
   background-image: url(joshuatree.jpg); 
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: top;
   width: 95%;
   min-width: 1000px;
   max-width: 1400px;
   height: 100%
   margin: 0;
   padding: 0;
   font-family: Verdana, Geneva, sans-serif;
}

legend { 
    background-color: green; 
    color: white; 
    padding: 3px 0px; 
    text-indent: 0px; 
    width: 100%;
    text-align: center;
    border-radius: 10px;
    border: 1px solid darkslateblue;
}


/* Label styles */
label { 
    clear: left;
    color: yellow;
    font-weight: bold;
    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;
}

select { 
    display: block; 
    float: left; 
    font-size: 0.9em; 
    margin: 7px 0px; 
    width: 50%;
}

/* Check box styles */
#warranty { 
    color: yellow; 
    float: left; 
    margin: 5px auto; 
    text-align: center;
    width: 90%;
}

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

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

/* Button styles */
form p { 
    text-align: center;
    font-family: Verdana, Helvetica, sans-serif;
    color: green;
}

input[type="submit"], input[type="reset"], input[type="button"] {  
    display: block;
    float: left; 
    height: 40px;
    width: 100px;
}

/* Validation styles */
input:focus, select:focus, textarea:focus { 
    background-color: green;
}


input:focus:valid { 
    background: green; 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: green; url(stop.png) bottom right
no-repeat;

    -o-background-size: contain; 
    -moz-background-size: contain; 
    -webkit-background-size: contain; 
    background-size: contain;
}