@charset "UTF-8";

html {
  margin: 0 auto;
  width: 100%;
}

body {
  margin: 0 auto;
  width: 100%;
  font-family: Arial, serif;
}

header {
  background: url(images/dog_comp2.jpg);
  background-size: cover;
  background-position: 0 30%;
  height: 180px;
  padding: 20px;
  color: white;
  text-align: right;
  margin-bottom: 30px;
}

div.divRow {
  width: 100%;
  margin: 0 auto;
  width: 565px;
}

div.formRow {
  padding: 10px 10px;
}

div#pet_pics {
  margin: 0 auto;
  width: 420px;
}

div#pet_pics img {
  width: 100px;
}

fieldset legend {
  font-size: 24px;
}

fieldset.field_left {
  width: 252px;
  float: left;
}

fieldset.field_right {
  width: 252px;
  margin-top: 3px;
}

fieldset.pet_type {
  width: 80px;
}

fieldset.pet_type input {
  float: left;
}

fieldset.pet_info textarea {
  width: 250px;
}

fieldset#comp input {
  float: left;
}

fieldset.field_board {
  width: 533px;
  margin: 0 auto;
}

input:focus {
  background-color: rgb(242, 242, 242);
}

textarea:focus {
  background-color: rgb(242, 242, 242);
}

input#kennel_size {
  width: 430px;
  text-align: center;
}

div#kennel_nums p {
  margin-top: -25px;
  float: left;
  width: 70px;
}

div#buttons {
  margin: 0 auto;
  text-align: center;
  width: 200px;
  margin-bottom: 30px;
}

input[type="submit"], input[type="reset"] {
  font-size: 1.2em;
  padding: 5px 10px;
  background: rgb(166, 166, 166);
  border-radius: 5px;
  color: white;
}

input#owner_name:focus:valid,
input#phone_number:focus:valid,
input#owner_email:focus:valid {
  background: rgb(220, 255, 220) url(images/pc_valid.png)
  bottom right / contain no-repeat;
}

input#owner_name:focus:invalid,
input#phone_number:focus:invalid,
input#owner_email:focus:invalid {
  background: rgb(255, 232, 233) url(images/pc_invalid.png)
  bottom right / contain no-repeat;
}