div.tabs {
  min-height: 23em;			/* No height: can grow if :target doesn't work */
  position: relative;			/* Establish a containing block */
  line-height: 1;			/* Easier to calculate with */
  z-index: 0}				/* So that we can put other things behind */

div.tabs > div {
  display: inline}			/* Puts the buttons on one line */

div.tabs > div > a {
  color: black;				/* Looks more like a button than a link */
  background: #ccc;			/* Active tab colour??? */
  padding: 0.2em;			/* Tab padding */
  border: 0.1em outset #bbb;		/* Tab depth and top tab depth colour */
  border-bottom: 0.1em solid #CCC} 	/* Visually connect tab and tab body */

div.tabs > div:not(:target) > a {
  border-bottom: none;			/* Make the bottom border disappear */
  background: #ccc}			/* Inactive tab colour */

div.tabs > div:target > a,		/* Apply to the targeted item or... */
:target #summary > a {			/* ... to the default item */
  border-bottom: 0.1em solid #CCC; 	/* Visually connect tab and tab body */
  background: #fcfdf5}			/* Active tab colour */

div.tabs > div > div {
  background: #fcfdf5;	        	/* Body colour */
  z-index: -2;				/* Behind, because the borders overlap */
  left: 0; top: 1.3em;			/* body positinging, increase top to descend body */
  bottom: 0; right: 0;			/* Other sides flush with containing block */
  overflow: auto;			/* Scroll bar if needed */
  padding: 0.3em;			/* Top leading */
  border: 0.1em outset #BBB}		/* 3D look */

div.tabs > div:not(:target) > div { 	/* Protect CSS1 & CSS2 browsers */
  position: absolute }			/* All these DIVs overlap */

div.tabs > div:target > div, :target #summary > div {
  position: absolute;			/* All these DIVs overlap */
  z-index: -1}				/* Raise it above the others */