/*
   Note the use of percentages and vws. This is to make the form responsive, meaning that no matter
   the size of the screen, the form should resize correctly. If you are viewing it on a laptop, shrink it
   using Ctrl-minus and see how it gets proportionately small. Then enlarge it with Ctrl-plus to see how
   it grows. Notice that this only applies to the form, not the header, since it fails to use responsive 
   design.
*/
body 
{
   margin-left:2%;
   font-family: Arial, Helvetica, sans-serif;
}

h4
{
	color:darkcyan;
    font-size: 1.7vw;
	font-style:italic;
	margin-top:1.3em;
    margin-top:2vw;
    margin-bottom:2.5vw;
}

/* set font size for formt */
form
{
    font-size: 1.4vw;
}

/* set formatting for text boxes. Try leaving out the font-family and see what happens. */
input[type=text]
{
    margin-left:1.4vw; 
    width:6vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3vw;
}

/* set formatting for buttons. Try leaving out the font-family and see what happens. */
input[type=button]
{
    margin-top:2vw;
    margin-bottom:2vw;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.3vw;
    margin-left:9vw; 
    width:6vw;
    display:block;
}


/* formatting for labels; need the float property for the width to work, and need
   the width to make the text align work. */
label
{
    float:left;
    width:17.5vw;
	text-align:right;    
    margin-right:.9vw;
    
	margin-left:auto;
    color: black;
    text-align: left;
    font-weight: normal;
}