ddprrt/dabblet.css

## dabblet.css
/**
 * Tab box using :target
 */

.container {
	position: relative;
	top: 300px;
}
ul {
	font: normal normal normal 14px/16px Arial;
	list-style-type: none;
	padding: 0;
	position:absolute;
	top: 0px;
	margin: 0;
	z-index:3;
}

ul::after {
	clear: both;
}

ul > li {
	display: block;
	float: left;
	min-width: 50px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	text-align: center;
}

ul > li:last-child {
	border-right: 1px solid black;
}

ul > li > a {
	padding: 7px 10px;
	text-decoration: none;
	color: #333;
	display: block;
	background: linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(202,200,180,1) 100%);
	font-weight: bold;
}
#tab1:target ~ ul #link1,
#tab2:target ~ ul #link2,
#tab3:target ~ ul #link3 {
	height: 31px;
	border-bottom: 0px;
}


#tab1:target ~ ul #link1 a,
#tab2:target ~ ul #link2 a,
#tab3:target ~ ul #link3 a,
ul > li > a:active {
	background: linear-gradient(top, rgba(200,220,220,1) 0%,rgba(130,140,149,1) 36%, rgba(255,255,255,1) 100%);
	height: 17px;
}


.tab:target {
	display: block;
}

.info,
.tab {
	border: 1px solid;
	height: 100px;
	padding: 10px;
	position: absolute;
	top: 31px;
	width: 300px;
	background: white;
	z-index: 2;
	display: none;
}

.info { display: block; z-index:1; background: transparent }

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<div class="container">
<div class="tab" id="tab1">
	This is tab 1
</div>

<div class="tab" id="tab2">
	This is tab 2
</div>


<div class="tab" id="tab3">
	This is tab 3
</div>

<div class="info">
	please click a tab
</div>

<ul>
 	<li id="link1"><a href="#tab1">Tab 1</a></li>
 	<li id="link2"><a hreF="#tab2" >Tab 2</a></li>
 	<li id="link3"><a hreF="#tab3">Tab 3</a></li>
</ul>
</div>

<div class="bordered">
</div>

## settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
	/**
	* Tab box using :target
	*/

	.container {
	position: relative;
	top: 300px;
	}
	ul {
	font: normal normal normal 14px/16px Arial;
	list-style-type: none;
	padding: 0;
	position:absolute;
	top: 0px;
	margin: 0;
	z-index:3;
	}

	ul::after {
	clear: both;
	}

	ul > li {
	display: block;
	float: left;
	min-width: 50px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	text-align: center;
	}

	ul > li:last-child {
	border-right: 1px solid black;
	}

	ul > li > a {
	padding: 7px 10px;
	text-decoration: none;
	color: #333;
	display: block;
	background: linear-gradient(top, rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(202,200,180,1) 100%);
	font-weight: bold;
	}
	#tab1:target ~ ul #link1,
	#tab2:target ~ ul #link2,
	#tab3:target ~ ul #link3 {
	height: 31px;
	border-bottom: 0px;
	}


	#tab1:target ~ ul #link1 a,
	#tab2:target ~ ul #link2 a,
	#tab3:target ~ ul #link3 a,
	ul > li > a:active {
	background: linear-gradient(top, rgba(200,220,220,1) 0%,rgba(130,140,149,1) 36%, rgba(255,255,255,1) 100%);
	height: 17px;
	}


	.tab:target {
	display: block;
	}

	.info,
	.tab {
	border: 1px solid;
	height: 100px;
	padding: 10px;
	position: absolute;
	top: 31px;
	width: 300px;
	background: white;
	z-index: 2;
	display: none;
	}

	.info { display: block; z-index:1; background: transparent }
	<!-- content to be placed inside <body>…</body> -->

	<div class="container">
	<div class="tab" id="tab1">
	This is tab 1
	</div>

	<div class="tab" id="tab2">
	This is tab 2
	</div>


	<div class="tab" id="tab3">
	This is tab 3
	</div>

	<div class="info">
	please click a tab
	</div>

	<ul>
	<li id="link1"><a href="#tab1">Tab 1</a></li>
	<li id="link2"><a hreF="#tab2" >Tab 2</a></li>
	<li id="link3"><a hreF="#tab3">Tab 3</a></li>
	</ul>
	</div>

	<div class="bordered">
	</div>