* {margin:0;padding:0}

/* Set the target element as a fixed position element to prevent page jump */
/*span {
  display:block;
  position:fixed;
  top:0;
  left:0;
}*/

/* --Basic tab dimension-- */
#tab {
  width:100%;
  height:auto;
  margin:10px auto 10px;
}

#tab > ul {
  margin:0 0;
  padding:0 0 0 20px;
  height:30px;
  overflow:hidden;
}

#tab > ul li {
  float:left;
  display:inline;
  list-style:none;
  margin:0 1px 0 0;
  padding:0 0;
}

#tab > ul li a {
  display:block;
  background-color:#0076A1;
  font-weight:bold;
  font-size:11px;
  line-height:30px;
  height:30px;
  color:white;
  text-decoration:none;
  padding:0 30px;
}

#tab > div {
  clear:both;
  background-color:white;
  padding:0 15px;
  height:0;
  overflow:hidden;
  visibility:hidden;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
  -ms-transition:all .4s ease-in-out;
  -o-transition:all .4s ease-in-out;
  transition:all .4s ease-in-out;
}


/* ================================
   Here's the CSS :target job list
   ================================ */

/* Reset the first tab button and the first tab content to the default behaviour if the hash is active */
span:target ~ #tab > ul li:first-child a {
  background-color:#0076A1;
  color:white;
}

span:target ~ #tab > div:first-of-type {
  visibility:hidden;
  height:0;
  padding:0 15px;
}

/* Always show the first tab container by default */
span ~ #tab > div:first-of-type,
/* Show a specific tab content based on the 'selected' target element */
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4,
#tab-5:target ~ #tab > div.tab-content-5,
#tab-6:target ~ #tab > div.tab-content-6,
#tab-7:target ~ #tab > div.tab-content-7 {
  visibility:visible;
  height:100%;
  padding:10px 15px;
}

/* Always set the first tab with a 'current color' by default */
span ~ #tab > ul li:first-child a,
/* Set the current tab button color based on the 'selected' target element */
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"],
#tab-5:target ~ #tab > ul li a[href$="#tab-5"],
#tab-6:target ~ #tab > ul li a[href$="#tab-6"],
#tab-7:target ~ #tab > ul li a[href$="#tab-7"] {
  background-color:#4A5F70;
  color:white;
}