.tabs {
  position:relative; 
  top:12px;
  /*width: 20em;*/
  /*font-family: "lucida grande", sans-serif;*/
}

[role="tablist"] {
  margin: 0 0 -0.1em;
  overflow: visible;
}

[role="tab"] {
  position: relative;
  margin: 0;
  padding: 0.3em 0.5em 0.4em;
  border: 1px solid #dbdad8;
  border-radius: 0.2em 0.2em 0 0;
  box-shadow: 0 0 0.2em #bbbab9;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  /*background: hsl(220, 20%, 94%);*/
  background-color: #f1f2f6;
}

[role="tab"]:hover::before,
[role="tab"]:focus::before,
[role="tab"][aria-selected="true"]::before {
  position: absolute;
  bottom: 100%;
  right: -1px;
  left: -1px;
  border-radius: 0.2em 0.2em 0 0;
  border-top: 4px solid #f2c858;
  /*border-top: 3px solid hsl(20, 96%, 48%);*/
  content: '';
}

[role="tab"][aria-selected="true"] {
  border-radius: 0;
  background: white; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#f6ebce, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#f6ebce, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#f6ebce, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#f6ebce, white); /* Standard syntax */
  /*background: hsl(220, 43%, 99%);*/
  outline: 0;
}

[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
  border-top: 4px solid #f2c858;
}

[role="tab"][aria-selected="true"]::after {
  position: absolute;
  z-index: 3;
  bottom: -3.7px;
  right: 0;
  left: 0;
  height: 0.45em;
  background: white;
  background: -webkit-linear-gradient(#fdfcf8, white); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#fdfcf8, white); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#fdfcf8, white); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#fdfcf8, white); /* Standard syntax */
  box-shadow: none;
  content: '';
}

[role="tab"]:hover,
[role="tab"]:focus,
[role="tab"]:active {
  outline: 0;
  border-radius: 0;
  color: inherit;
}

[role="tab"]:hover::before,
[role="tab"]:focus::before {
  border-color: #f2c858;
}

[role="tabpanel"] {
  position: relative;
  z-index: 2;
  padding: 0.5em 0.5em 0.7em;
  border: 1px solid hsl(219, 1%, 72%);
  border-radius: 0 0.2em 0.2em 0.2em;
  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
  /*background: hsl(220, 43%, 99%);*/
}

[role="tabpanel"]:focus {
  border-color: #f2c858;
  box-shadow: 0 0 0.2em #f2c858;
  outline: 0;
}

[role="tabpanel"]:focus::after {
  position: absolute;
  bottom: 0;
  right: -1px;
  left: -1px;
  border-bottom: 3px solid #f2c858;;
  border-radius: 0 0 0.2em 0.2em;
  content: '';
}

/*Responsiveness*/
@media only screen and (max-width: 520px) {

	[role="tab"] {   

		height: 2.4em;
		width: 100%;
		display: block;
		margin-bottom:0 !important;
		position: static;
	}
	
	[role="tab"]:hover,
	[role="tab"]:focus,
	[role="tab"][aria-selected="true"] {
		border-top: 4px solid #f2c858;
	}
	
	[role="tab"]:hover::before,
    [role="tab"]:focus::before,
	[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
	  	border-top: none;
	}
	
	[role="tab"]::before {
		border-top: none;
	}
}