ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px;/*--Set height of tabs--*/
  border-bottom: 1px solid #666;
  border-left: 1px solid #666;
  width: 100%;
  font: 80%/0.9 arial, helvetica, sans-serif;
}

ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px;/*--Subtract 1px from the height of the unordered list--*/
  line-height: 31px;/*--Vertically aligns the text within the tab--*/
  border: 1px solid #666;
  border-left: none;
  margin-bottom: -1px;/*--Pull the list item down 1px--*/
  overflow: hidden;
  position: relative;
  background: #454545;
}

ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;
  padding: 0 20px;
  border: 1px solid #454545;/*--Gives the bevel look with a 1px white border inside the list item--*/
  outline: none;
}

ul.tabs li a:hover {
  background: #454545;
}

html ul.tabs li.active, html ul.tabs li.active a:hover {/*--Makes sure that the active tab does not listen to the hover properties--*/
  background: #454545;
  border-bottom: 1px solid #454545;/*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
  border: 1px solid #666;
  border-top: none;
  overflow: hidden;
  clear: both;
  float: left;
  width: 100%;
  background: #454545;
  height: 260px;
}

.tab_content {
  padding: 20px;
  
}