BenjaminAdams/css-nav-tabs.html

## css-nav-tabs.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head></head><body>
<style>
.tab-area p {
  font-size: 11px;
  color: #666;
}


.tab-area {
  width: 21%;
  margin: 2%;
  float: left;
}

input {
  display: none;
}

.tab-link {
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  color: #007db8;
  font-weight: bold;
  text-decoration: none;
  display: block;
  float: left;
  height:25px;
  width: 332px;
  padding: 5px 0;
  text-align: center;
  border: 1px solid lightgray;
  border-left: 0;
  border-bottom: 0;

  background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, #FFFFFF),
	color-stop(1, #EFEFEF)
);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #EFEFEF 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #EFEFEF 100%);


}

.tab-link:hover {
  background: #eee;
}

.tab-link:nth-of-type(1) {
  border-left: 1px solid lightgray;
}

.tab-link:hover {
  color: #666;
}

.tab {
  clear: both;
  background: white;
  padding: 25px;
  display: none;
  height: 180px;
  border: 1px solid lightgray;
}

.target-fix {
  display: block;
  top: 0;
  left: 0;
  position: fixed;
}

  .tab-area {
    width: 1000px;
    margin: 2% 2% 5%;
  }


.tab-area input:nth-of-type(1):checked ~ label:nth-of-type(1),
.tab-area input:nth-of-type(2):checked ~ label:nth-of-type(2),
.tab-area input:nth-of-type(3):checked ~ label:nth-of-type(3) {
    background: #F9F9F9;
	color: rgb(68, 68, 68);
}


.tab-area input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
.tab-area input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tab-area input:nth-of-type(3):checked ~ .tab:nth-of-type(3)
{
  display: block;
}

.tabs-focus .tab-link:focus:after,
.tabs-hover .tab-link:hover:after,
#tabC:target ~ a:nth-of-type(3):after,
#tabB:target ~ a:nth-of-type(2):after,
#tabC:not(:target) ~ #tabB:not(:target) ~ a:nth-of-type(1):after,
#tab-C:checked ~ label:nth-of-type(3):after,
#tab-B:checked ~ label:nth-of-type(2):after,
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):after {
  position: absolute;
  content: "";
  margin: 5px 0 0 0;
  width: 332px;
  height: 5px;
  display: block;
  background: white;
}

.tabs-focus .tab-link:focus:before,
.tabs-hover .tab-link:hover:before,
#tabC:target ~ a:nth-of-type(3):before,
#tabB:target ~ a:nth-of-type(2):before,
#tabC:not(:target) ~ #tabB:not(:target) ~ a:nth-of-type(1):before,
#tab-C:checked ~ label:nth-of-type(3):before,
#tab-B:checked ~ label:nth-of-type(2):before,
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):before {
content: ' ';
height: 5px;
background-color: #007db8;
display: block;
position: relative;
top: -5px;
}


</style>

<section class="tab-area tabs-checked">

		<input checked="" type="radio" name="tab" id="tab-A">
		<input type="radio" name="tab" id="tab-B">
		<input type="radio" name="tab" id="tab-C">

		<label class="tab-link" for="tab-A">Tab 1</label>
		<label class="tab-link" for="tab-B">Tab 2</label>
		<label class="tab-link" for="tab-C">Tab 3</label>

		<article class="tab">
			<h3>Tab 2</h3>
			<p>Lorem Ipsum Dolor Sit</p>
		</article>
		<article class="tab">
			<h3>Tab 2</h3>
			<p>Lorem Ipsum Dolor Sit</p>
		</article>
		<article class="tab">
			<h3>Tab 3</h3>
			<p>Lorem Ipsum Dolor Sit</p>
		</article>


	</section>


</body>

</html>