form div.required
{
    margin-bottom:              1px;
}

form label
{
    display:                    block;
    color:                      #555;
    font-size:                  16px;
    line-height:                20px;
    letter-spacing:             -0.1em;
    margin-top:                 0px;
    font-weight:                bold;
    text-align:                 right;
    vertical-align:             top;
    white-space:                nowrap;
}

form label.invalid
{
    color:                      #ec1c24;
    text-shadow:                0px 0px 2px #eeadad;
}

form div.field_message
{
    color:                      #777;
    font-size:                  9px;
    line-height:                13px;
    text-align:                 right;
    min-height:                 16px;
    white-space:                nowrap;
    overflow:                   hidden;
    padding-top:                3px;
}

/* Thanks again, Firefox. */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
    form div.field_message
    {
        padding-top:            1px;
    }
}

form div.field_message a
{
    color:                      inherit;
    font-weight:                bold;
    text-decoration:            none;
    letter-spacing:             0.2em;
}

form div.field_message .error
{
    color:                      #ff0404;
}

form input[type="submit"]
{
    display:                    block;
    width:                      100px;
    margin:                     1em auto 1em auto;
}

/* Quick reset */
form input[type="text"], input[type="password"], textarea 
{
	margin:                     0;
	padding:                    0;
	border:                     0;
	outline:                    0;
	font-size:                  100%;
	vertical-align:             baseline;
	background:                 transparent;
	
	/* This actually makes text fields obey the grid */
    -webkit-box-sizing:         border-box;
    -moz-box-sizing:            border-box;
}

form input[type="text"], input[type="password"], textarea
{
    font-family:                Helvetica, Arial, sans-serif; /*Firefox needs this */
    display:                    block;
    font-size:                  12px;
    text-align:                 left !important;
    text-shadow:                0px 0px 2px #fff;
    margin-left:                5px;
    margin-right:               5px;
    padding:                    3px 0px 3px 5px;
    background-image:           -webkit-gradient(linear, left top, left bottom, color-stop(0.0, rgba(210,210,210, 0.5)),  color-stop(0.6, rgba(245,245,245, 0.3)) );
    background-position:        top left;
    background-repeat:          no-repeat;
    outline:                    0 none;
    -webkit-border-radius:      8px;  
    -moz-border-radius:         8px;   
    border-top:                 1px solid #AAA;
    border-left:                1px solid #BBB;
    border-right:               1px solid #CCC;
    border-bottom:              1px solid #DDD;
    color:                      #333;
    -webkit-box-shadow:         inset 1px 1px 3px rgba(200, 200, 200, 0.3);
    -moz-box-shadow:            inset 1px 1px 3px rgba(200, 200, 200, 0.3);
}

@media screen and (max-device-width: 480px) 
{ 
    form textarea
    {
        height:                 6em !important;
    }
}

form input.invalid, textarea.invalid
{
    color:                      #A11;
    background-color:           rgba(255, 0, 0, 0.1);
    background-image:           -webkit-gradient(linear, left top, left bottom, color-stop(0.0, rgba(255,100,100, 0.1)),  color-stop(0.5, rgba(255,255,255, 0.0)) );
    border-top:                 1px solid #C11;
    border-left:                1px solid #C11;
    border-right:               1px solid #F66;
    border-bottom:              1px solid #F66;
    
    -webkit-box-shadow:         inset 0px 0px 5px rgba(200, 0, 0, 0.3);
    -moz-box-shadow:            inset 0px 0px 5px rgba(200, 0, 0, 0.3);
    
    -webkit-animation-name:             invalidfieldpulse;
    -webkit-animation-duration:         0.2s;
    -webkit-animation-direction:        alternate;
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  ease-in-out;
}

@-webkit-keyframes invalidfieldpulse
{
    from
    {
        color:                      rgb(255, 0, 0);
    }
    
    to
    {
        color:                      rgb(125, 0, 0);
    }
}

form object#spinner
{
    display:                    block; 
    height:                     40px; 
    width:                      40px;
    margin-top:                 5px; 
    margin-left:                auto; 
    margin-right:               auto;  
}