/* With very grateful thanks to Matson Dawson who provided a simple, elegant solution */
/* when all other web sites produced solutions that didn't quite work                 */
/* https://www.mdawson.net/                                                           */

.tabbedpanel {
  margin-top: 5px;
	width: 960px;
  height: auto;
}

.tabbedpanel input[type="radio"]:hover + label{
  text-decoration:underline;
	background-color:#DDDDDD;
}

/* Configure the radio buttons to hide off screen */
.tabbedpanel > input[type="radio"] {
  position: absolute;
  left:-100px;
  top:-100px;
}

/* Configure labels to look like tabs */
.tabbedpanel > input[type="radio"] + label {
  /* inline-block such that the label can be given dimensions */
  display: inline-block;
 
  /* A nice curved border around the tab */
	border-radius: .25em .25em 0 0;
	-moz-border-radius: .25em .25em 0 0;
  -webkit-border-radius: .25em .25em 0 0;
     
  /* the bottom border is handled by the tab content div */
  border-bottom: 0;
 
  /* Padding around tab text */
  padding: 5px 10px;
 
  /* Set the background color to default gray (non-selected tab) */
  background-color:#f0f0f0;
}

/* Focused tabs need to be highlighted as such */
.tabbedpanel > input[type="radio"]:focus + label {
  border-bottom: 1px solid black;
}

/* Checked tabs must be white with the bottom border removed */
.tabbedpanel > input[type="radio"]:checked + label {
  background-color:#CCCCCC;
  font-weight: bold;
  border-bottom: 5px solid black;
  margin-bottom: -1px;
}

.tabbedpanel > div {
  display: none;
  border: none;
  background-color: white;
  padding: 10px 10px;
  height: 100%;
  overflow: auto;
     
  border-radius: 0 5px 5px 5px;
  -moz-border-radius: 0 5px 5px 5px;
  -webkit-border-radius: 0 5px 5px 5px;
}

/* This matchs tabs displaying to their associated radio inputs */
.tab1:checked ~ .tab1, 
.tab2:checked ~ .tab2, 
.tab3:checked ~ .tab3, 
.tab4:checked ~ .tab4, 
.tab5:checked ~ .tab5, 
.tab6:checked ~ .tab6, 
.tab7:checked ~ .tab7, 
.tab8:checked ~ .tab8, 
.tab9:checked ~ .tab9, 
.tab10:checked ~ .tab10, 
.tab11:checked ~ .tab11
{
  display: block;
}