* {
  font-family: calibri, Georgia, Serif;
}

body {
  margin: 15px;
  padding: 3px;
  background-color: #B8B8B8;
}

div.clear {
  clear: both;
}

div.mainContent a {
  color: #cccc66;
}

iframe {
  /* iframe frameborder is deprecated in html5, use CSS instead */
  border: 0;
}

div.main {
  background-color: #E8E8E8;
  
  /* 
     http://www.cssmatic.com/box-shadow 
     Ensure compatibility with all modern browsers
  */
  -webkit-box-shadow: 10px 10px 5px 0px #A0A0A0;
  -moz-box-shadow: 10px 10px 5px 0px #A0A0A0;
  box-shadow: 10px 10px 5px 0px #A0A0A0;
}

header {
  background-color: #727E1B;
  margin: 0px;
  background-image: url('http://ftextures.com/textures/Dark-brown-hardwood-planks.jpg');
  background-position: left top;
}

header h1 {
  font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  color: white;
  padding: 15px 0px;
  font-weight: 900;
  margin: 0;
}

header h2 {
  font-size: 1em;
  margin: 0;
  padding: 0;
  color: white;
  text-transform: uppercase;
}

header h1, header h2, div.mainContent h3 {
  text-align: center;
}

header h1 {
  text-shadow: 3px 3px #484848;
}

div.mainContent h3 {
  text-shadow: 2px 2px #A0A0A0;
  text-align: left;
  margin-top: 0;
}

div.experienceContent h3 {
  color: white;
}

header nav {
  background-color: #F0DC97;
  border-top: 1px solid #A0A0A0;
  border-bottom: 1px solid #A0A0A0;
  margin-top: 1em;
}  

footer {
  font-style: italic;
  text-align: center;
  font-size: .75em;
  color: #A0A0A0;
  padding: 1.25em 0;
}

header nav ul {
  display: block;
  text-align: center;
  list-style-type: none;
  margin: .5em;
}

header nav ul li {
  display: inline-block;
  padding: 0 1em;
  margin: 0;
}

div.homeContent iframe {
  float: right;
  margin-left: 1em;
  width: 40%;
  height: 20em;
}

header nav ul li a, header nav ul li span.current {
  font-weight: bold;
  color: black;
  font-size: .75em;
  text-decoration: none;
}

header nav ul li span.current {
  text-decoration: underline;
}

header nav ul li a:hover {
  text-decoration:underline;  
}

div.mainContent {
  padding: 1em;
}

div.experienceContent {
  background-color: #363434;
  background-image: url('../img/steam.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

div.experienceContent p, div.experienceContent td,
div.partsContent p, div.partsContent td {
  padding: .5em;
}

div.experienceContent p, div.experienceContent td {
  color: #cccccc;
}

div.experienceContent table,
div.partsContent table {
  border-spacing: 0;
  border-collapse: separate;
  border-bottom: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  width: 50%;
  margin: 0 2em;
  background-color: rgba(68, 77, 84, .85);
}

div.partsContent table {
  background-color: default;
  float: left;
  margin: auto;
}

div.experienceContent table td,
div.partsContent table td {
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
}

div.partsContent thead td,
div.experienceContent thead td {
  font-size: 1em;
  font-weight: bold;
  border-bottom: 3px solid #cccccc;
}

div.partsContent table thead td {
  background-color: #5b9bd5;
}

div.partsContent tr:nth-child(even) {
  background: #d2deef
}

div.partsContent tr:nth-child(odd) {
  background: #e5e8ed;
}

.quarter {
  width: 25%;
}

.half {
  width: 40%;
}

.left {
  float: left;
}

.right {
  float: right;
}

div.installationContent div.left, 
div.installationContent div.right {
  width: 50%;
}

div.installationContent div.right img,
div.installationContent div.left img ,
div.installationContent div.right iframe,
div.installationContent div.left iframe {
  width: 40%;
  float: right;
  margin: 1em;
}

div.contactContent form {
  margin: 0 auto;
}

div.contactContent form dt {
  float: left;
  width: 10em;
}

div.contactContent form dd {
  margin-bottom: 1em;
}

div.contactContent textarea {
  width: 75%;
  height: 10em;
  padding: .5em;
}

div.contactContent input {
  width: 45%;
  height: 1.5em;
  padding: .5em;
}

div.contactContent input[type="submit"] {
  width: auto;
  height: 3em;
  font-weight: bold;
 
}

span.required {
  color: red;
}

div.partsContent div.newegg {
  vertical-align: middle;
  float: right;
  width: 50%;
}

div.partsContent div.newegg img {
  width: 50%;
}

div.newegg {
  height: 100%;
  vertical-align: middle;
  text-align: center;
}

/*
  for non-javascript friends, pretend the show/hide functionality on the installation page
  doesn't exist.
*/
p.hideLink, p.hideLink {
  display: none;
}

/*
  begin responsive design stuff for devices with <768px width. basically remove the float
  property from two-column stuff to make it stack instead of float.
*/
@media all and (max-width: 768px) {
  div.left,
  div.right,
  div.installationContent div.left img,
  div.contactContent form dt,
  div.partsContent div.newegg ,
  div.partsContent table,
  div.experienceContent table,
  div.homeContent iframe  {
   float: none;
  }
  div.partsContent div.newegg {
    width: auto;
  }
  div.partsContent div.newegg img {
    margin: 1em auto;
  }
  div.experienceContent table, div.partsContent table {
    width: 90%;
    margin-bottom: 1em;
  }
  .half, div.left, div.right,
  div.installationContent div.left,
  div.installationContent div.right,
  div.installationContent div.right img,
  div.installationContent div.left img,
  div.installationContent div.right iframe,
  div.installationContent div.left iframe  {
    width: 90%;
  }
  div.installationContent div.right img,
  div.installationContent div.left img,
  div.installationContent div.right iframe,
  div.installationContent div.left iframe {
    float: none;
  }
  div.homeContent iframe {
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
    width: 80%;
  }
}