/*
   New Perspectives on HTML and CSS
   Additional Cases
   Case Problem 1

   Application Forms Style Sheet
   Author: David Katelansky
   Date:   08/06/2015

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

*/

fieldset
{
   background-color: rgb(231, 231, 255);
   border: 1px solid rgb(67, 76, 169);
   float: left;
   margin: 10px 0px 10px 2.5%;
   width: 46%;
}

legend
{
   background-color: rgb(67, 76, 169);
   color: white;
   padding: 5px;
}

label
{
   float: left;
   clear: left;
   display: block;
   font-size: 0.9em;
   margin: 7px 4% 7px 5px;
   width: 40%;
}

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

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

#years
{
   width: 50px;
}

#call
{  
   position: relative;
   left: -50%;
   width: 25px;  
}

label.call
{
   position: relative;
   top: -24px;
   margin-left: 5%;
   width: auto;   
}

#call:after 
{
  content: "";
  display: block;
  clear: left;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#sub
{     
   position: relative;
   bot: 1px;
   height: 40px;
   width: 200px;
   margin-right: 20px;
   clear: left;
   float: left;
}

#sub:after
{
   content: "";
  display: block;
  clear: left;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cancl
{   
   position: relative;
   bot: 1px;
   float: left;
   height: 40px;
   width: 200px;
   margin-right: 20px;
}

input:focus, selection option:focus
{
   background-color: ivory;
}

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

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