/*
   New Perspectives on HTML and CSS, 7th Edition
   Tutorial 7
   Case Problem 1

   ACGIP Registration Validation Style Sheet
   Author: Atrin Molanorouzi 
   Date: 4/7/2026   

   Filename: cg_validate.css

*/


/* Validation Styles */
input:invalid,
textarea:invalid,
select:invalid {
   background-color: #fee;
   border: 1px solid #d33;
}

input:valid,
textarea:valid,
select:valid {
   background-color: #efe;
   border: 1px solid #393;
}

input:focus,
select:focus,
textarea:focus {
   background-color: rgb(245, 245, 140);
}

#fnBox:focus:valid,
#lnBox:focus:valid,
#addBox:focus:valid,
#mailBox:focus:valid,
#phoneBox:focus:valid,
#idBox:focus:valid {
   background-color: rgb(220, 255, 220);
   background-image: url("cg_valid.png");
   background-repeat: no-repeat;
   background-position: right center;
}

#fnBox:focus:invalid,
#lnBox:focus:invalid,
#addBox:focus:invalid,
#mailBox:focus:invalid,
#phoneBox:focus:invalid,
#idBox:focus:invalid {
   background-color: rgb(255, 232, 232);
   background-image: url("cg_invalid.png");
   background-repeat: no-repeat;
   background-position: right center;
}

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
   box-shadow: 0 0 6px rgba(211, 0, 0, 0.5);
}

input:focus:valid,
textarea:focus:valid,
select:focus:valid {
   box-shadow: 0 0 6px rgba(0, 153, 0, 0.5);
}