/* reset styles */

html {
   font-size: 16px;
}

a,
article,
body,
div,
fieldset,
figure,
figcaption,
footer,
form,
header,
h1,
h2,
h3,
img,
input,
label,
legend,
li,
nav,
p,
section,
table,
tbody,
td,
th,
thead,
ul {
   border: 0;
   padding: 0;
   margin: 0;
}

img {
   max-width: 100%;
   height: auto;
   width: auto;
   display: block;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

ul {
   list-style-type: none;
}


/* body and container */

body {
   margin: 0 auto;
   font-family: Arial, Helvetica, sans-serif;
   background-color: darkslategray;
   max-width: 700px;
}

.body-content {
   max-width: 700px;
   margin: 15px auto;
}

p {
   line-height: 1.4em;
}

a:link {
   color: #6666ff;
}

a:visited {
   color: #888;
}

a:active {
   position: relative;
   top: 1px;
   left: 1px;
}


/* skip navigation link */

p.skipnavigation a {
   position: relative;
   left: -10000px;
}

p.skipnavigation a:focus {
   color: #faf3d1;
   background-color: #6666ff;
   margin-left: 5%;
   left: auto;
   z-index: 2;
   font-weight: bold;
}


/* header section */

header {
   width: 100%;
}

h1 {
   text-align: center;
   font-weight: 700;
   min-height: 150px;
   overflow: hidden;
}

.header-foreground {
   z-index: 2;
   position: relative;
}

#header-logo {
   display: inline-block;
   float: left;
   margin-left: 10%;
}

#header-contact-info {
   display: inline-block;
   margin-top: 1%;
}

.header-background {
   z-index: 1;
   position: relative;
   top: -5%;
   max-width: 700px;
   background-color: #faf3d1;
}

.header-background img {
   position: absolute;
   left: 0;
   bottom: 0;
   background-color: #faf3d1;
}


/* site navigation */

nav.sitenavigation {
   background-color: darkslategray;
   position: relative;
   text-align: center;
}

nav.sitenavigation ul {
   background-color: #663333;
   width: 100%;
   border: 3px solid black;
   display: block;
}

div.navigation-menu-button {
   float: right;
   display: none;
}

nav.sitenavigation li {
   font-size: 1.25em;
   line-height: 1.4em;
   padding: 0.3em 0;
   text-align: center;
   display: inline-block;
}

nav.sitenavigation li a {
   padding: 0.2em 0.6em;
}

nav.sitenavigation a:link {
   font-weight: bold;
   font-size: 1.25em;
   color: #fffcf7;
   text-decoration: none;
}

nav.sitenavigation a:visited {
   color: #bcbcbc;
}

nav.sitenavigation a:hover,
nav.sitenavigation a:focus {
   color: #ff0000;
   background-color: #fffcf7;
}


/* main content */

article {
   margin: 0 auto;
   padding: 1em 1em 2em;
   position: relative;
   overflow: auto;
   text-align: left;
   clear: both;
   background-color: #ffffcc;
   /*   background-color: #e3d5ba;*/
   /*   background-color: #fffcf7;*/
}

h2,
h3 {
   padding-bottom: 0.25em;
   margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 900;
}

h2 {
   width: 72%;
   font-size: 1.8em;
}

h3 {
   padding-bottom: 0;
}

p.introtext,
p.imagemap {
   width: 72%;
}

p.imagemap img {
   max-width: none;
}

.block-text {
   text-indent: 1em;
   padding-bottom: 1em;
}

#estimate-emphasis {
   font-weight: bold;
   font-style: italic;
}

#main-logo {
   display: block;
   margin: 0 auto;
   background-color: #ffffcc;
}

div.container p a {
   display: block;
   padding: 1em 0.5em;
}

div.container p a:visited {
   color: #330066;
}

div.container p a:active {
   position: relative;
   top: 1px;
   left: 1px;
}

/* FAQ styles */

div.faq {
   padding-bottom: 1.5em;
}

.faq-q {
   font-weight: bold;
   font-size: 1.2em;
}

.faq-a {
   display: inline-block;
   margin-left: 1em;
   padding-top: 0;
   padding-bottom: 0.5em;
}

.faq-a span {
   font-weight: bold;
   font-size: 1.2em;
}

/* end FAQ styles */

figure {
   padding-right: 1em;
   float: left;
}

figcaption {
   padding-top: 0.5em;
   font-size: 0.8em;
   font-style: italic;
   text-align: center;
}


/* form styles */

form {
   padding: 0.1em;
}


/* fieldset styles */

fieldset {
   margin: 1em 0;
   padding: 2%;
   border: 1px solid #777;
}

legend {
   font-size: 1.25em;
   font-weight: bold;
}

.contactinfo {
   border: none;
}

.submitbutton {
   padding-top: 0.5em;
   text-align: center;
}


/* field styles */

.additionalinfo textarea {
   border: 1px solid #ccc;
   padding: 0.2em;
   font-size: 1em;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   width: 100%;
   height: 20em;
}

.contactinfo input {
   position: absolute;
   left: 10%;
   padding: 0.25em 0.5em;
   max-width: 70%;
}

.contact-reason {
   display: table-row;
   text-align: center;
   padding: 2% 0;
}

#emailinput,
#nameinput {
   width: 15em;
}

#phoneinput {
   width: 12em;
}

#submit {
   border: none;
   padding: 0.4em 0.6em;
   background-color: darkslategray;
   color: #fff;
   font-size: 1.25em;
   border-radius: 10px;
}


/* label styles */

label {
   font-size: 1em;
}

.contactinfo label {
   display: block;
   position: relative;
   margin: 0.8em 0;
}

.contact-reason label {
   display: table-cell;
   width: 33%;
}

.additionalinfo label {
   word-wrap: normal;
}


/* table styles */

table {
   width: 75%;
   margin-bottom: 1.25em;
}

td,
th {
   border: 1px solid black;
}

td {
   padding: 0.3em;
   text-align: left;
   font-weight: 600;
}

td.price {
   text-align: center;
}

td.price:before {
   content: "$";
}

td.price:after {
   content: ".00";
}

td .subtext {
   line-height: inherit;
   display: block;
   font-size: smaller;
   font-weight: normal;
}

thead th {
   padding: 0.1em 0.3em;
   text-align: center;
   font-weight: 900;
}

tbody th {
   padding: 0.1em 0.3em;
   text-align: left;
}

.table-service-column {
   width: 65%;
}


/* mobile styles */


/*

@media screen and (min-width: 460px) {
   div.navigation-menu-button {
      display: block;
      float: right;
   }
   nav.sitenavigation ul {
      border: 3px solid black;
      display: none;
      position: absolute;
      right: 5%;
      top: 70%;
      z-index: 2;
   }
   .header-background {
      position: relative;
      top: -100%;
   }
}
*/


/* small screen styles */

@media screen and (max-width: 720px) {
   header {
      float: left;
      width: 80%;
   }
   nav.sitenavigation {
      background-color: transparent;
      padding: 5% 1%;
      float: right;
      position: fixed;
      right: 2%;
      z-index: 5;
   }
   div.navigation-menu-button {
      display: block;
      float: right;
   }
   nav.sitenavigation ul {
      display: none;
      position: absolute;
      top: 80%;
      right: 5%;
      width: auto;
   }
   nav.sitenavigation li {
      margin: 0.3em 0.5em;
      font-size: 1em;
      display: block;
      text-align: left;
   }
   .nav-item-second-line {
      margin-left: 0.6em;
   }
   body {
      padding: 1em;
   }
   h1 {
      min-height: 0;
      font-size: 2.5em;
      line-height: 1.4em;
      text-align: center;
   }
   #header-logo {
      display: none;
   }
   #header-contact-info {
      height: 90%;
      width: 90%;
      position: relative;
      display: inline-block;
   }
   .contactinfo input {
      left: 25%;
   }
   .contact-reason {
      display: block;
      text-align: left;
   }
   .contact-reason label {
      display: block;
      width: 100%;
   }
   p.imagemap {
      display: none;
   }
}


/* standard/desktop screen styles */


/*
@media screen and (min-width: 1024px) {
   header {
      float: none;
      width: auto;
   }
   div.navigation-menu-button {
      display: none;
   }
   nav.sitenavigation {
      width: 100%;
      padding: 0;
   }
   nav.sitenavigation ul {
      border: none;
      width: 100%;
      display: static;
   }
   nav.sitenavigation li {
      display: inline-block;
   }
}
*/


/* footer section */

footer {
   padding: 0.5em;
   color: #fff;
   text-align: center;
}