/* Specification tab navigation and content */

#specs-nav {
  /* that does the centering of the inner ul */
  display: table;
  margin: 0 auto;
  margin-top: 1em;
}

ul.tabs {
  float: left;
}

ul.tabs li {
  /* low resolution shows stacked tabs */
  width: 100%;
  float: left;
  margin-right: 0.4em;
  display: block;
}

ul.tabs li a {
  position: relative;
  display: block;
  color: #444;
  background: #ccc;
  padding: 0.5em;
  text-decoration: none;
  transition: all 0.2s linear 0s;
}

ul.tabs li a:hover,
ul.tabs li.active a {
  background-color: #1d6ca3;
  color: white;
}

ul.tabs li.active a span {
  /* position it absolute (relative to the surrounding li) */
  position: absolute;
  /* center the backround image */
  left: 50%;
  /* adjust the center (50%) position by the half width */
  margin-left: -20px;
  bottom: -12px;
  /* width and height of the used background image */
  width: 40px;
  height: 20px;
  background: url("/assets/styles/active-tab-arrow.png") no-repeat
    scroll 0px 0px transparent;
  z-index: 10;
}

ul.tabs li.last {
  margin-right: 0;
}

.tabcontent { 
  padding-top: 20px;
}

.tabcontent table {
  /* the default for small screens */
  width: 100%;
  /* remove the default space between table cells! */
  border-spacing: 0px;
  /* and 'collapse' two touching borders to one border */
  border-collapse: collapse;
  
  float: left;

  margin-bottom: 1em;
}

.tabcontent td,
.tabcontent th {
  border: 1px solid #aaa;
  padding: 0.2em;
}

.tabcontent th {
  font-weight: 800;
  text-align: left;
}

.tabcontent th.head {
  text-align: center;
  background-color: #1d6ca3;
  color: white;
}

.tabcontent tr:nth-child(even) {
  background-color: #f4f4f4;
}

@media screen and (min-width: 768px) {
  ul.tabs li {
    width: auto;
  }
  .tabcontent { 
    min-height: 31em;
  }
  .tabcontent table {
    margin: 1%;
  }
}