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

   The Spice Bowl Payment Form Style Sheet
   Author: David Katelansky
   Date:   06/24/2015

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

*/

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

fieldset legend
{
   background-color: rgb(239, 198, 145);
   color: black;
   margin-top: 10px;
   margin-bottom: 10px;
   text-indent: 20px;
   width: 100%;
   border-radius: 10px;
}

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

fieldset.optionGroup label
{
   display: inline;
   float: none;
   width: 100px;
}

fieldset.optionGroup input
{
   display: inline;
   width: 20px;
   float: none;   
}

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

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

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

select option
{
   display: inline;
   float: none;
   margin: 0px;
   width: 20px;
}

input.notes
{
   display: block;
   float: left;
   font-size: 0.9em;
   height: 75px;
   width: 60%;
}

input.csc
{
   width: 50px;
}

#submit
{
   background-color: rgb(239, 198, 145);
   float: none;
   width: 150px;
   height: 30px;
   margin-top: 10px;
   margin-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
   border-radius: 15px;
}

input:focus, select:focus, input.notes:focus;
{
   background-color: rgb(255, 218, 165);
}

input:focus:invalid
{
   background-color: rgb(255, 245, 215);
   background-image: url("stop.png");
   background-position: 100% 100%;
   background-repeat: no-repeat;
}

input:focus:valid
{
   background-color: rgb(215, 255, 215);
   background-image: url("go.png");
   background-position: 100% 100%;
   background-repeat: no-repeat;
}

#info input
{
   display: inline;
   float: none;
}