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

   Comment Form Style Sheet
   Author: David Katelansky
   Date:   06/23/2015

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

*/

fieldset
{
   background-color: rgb(245, 245, 255);
   margin-top: 15px;
   margin-bottom: 15px;
   margin-left: auto;
   margin-right: auto;
   padding: 5px;
   width: 90%;
}

label
{
   display: block;
   clear: left;
   float: left;
   font-size: 0.9em;
   width: 100%;
   margin-top: 5px;
   margin-bottom: 5px;  
   line-height: 150%;   
}

input
{
   display: block;
   float: right;
   font-size: 0.9em;
   width: 55%;
   margin-left: 10px;
   margin-right: 10px;  
   position: relative;
   top: -20px;   
}

input.commentBox
{
   height: 150px;
}

input.submit
{
   clear: both;
   float: none;
   width: 200px;
   height: 30px;
   margin-top: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
}

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

input:focus:invalid
{
   background-color: rgb(240, 225, 225);
   background-image: url("stop.png");
   background-position: 100% 100%;
   background-repeat: no-repeat;
   background-size: contain;
}

input.commentBox:focus:valid
{
   background-color: rgb(225, 240, 225);
   background-image: url("go.png");
   background-position: 100% 100%;
   background-repeat: no-repeat;
   background-size: 30px;
}

input.commentBox:focus:invalid
{
   background-color: rgb(240, 225, 225);
   background-image: url("stop.png");
   background-position: 100% 100%;
   background-repeat: no-repeat;
   background-size: 30px;
}