.tabcontent
    {
    word-wrap: break-word;
    /*white-space: pre-wrap; /* css-3 */
    width: 80vw;
    max-height: 25em;
    overflow: auto;
    }

.tabcontent p,.tabcontent h1,.tabcontent h2,.tabcontent h3,.tabcontent h4
{
  margin: 1em;
}

.tabcontent ul,.tabcontent li
{
  margin: 0em;
}

article.tabs
{
position: relative;
display: block;
width: 80vw;
height: 25em;
padding-bottom: 20px;
margin-top: 15px;
margin-bottom: 15px;
}

article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 25em;
width: 80vw;
padding: 10px 20px;
background-color: #ddd;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index:0;
}


article.tabs section:first-child
{
  z-index: 1;
}

article.tabs section h2
{
 position: absolute;
 font-size: 1em;
 font-weight: normal;
 width: 10em;
 height: 1.8 em;
 top: -1.8em;
 left: 10px;
 padding: 0;
 margin: 0;
 color: #999;
 background-color: #ddd;
 border-radius: 5px 5px 0 0;
}

article.tabs section:nth-child(1),
article.tabs section:nth-child(1) h2
{
 background-color: #cde;
}
article.tabs section:nth-child(2) h2
{
 left: 170px; 
}

article.tabs section:nth-child(3) h2
{
 left: 360px;
}

article.tabs section:nth-child(4) h2
{
 left: 540px;
 background-color: #555;
}

article.tabs section h2 a
{
 display: block;
 width: 100%;
 line-height: 1.8em;
 text-align: center;
 text-decoration: none;
 color: inherit;
 outline: 0 none;
}

article.tabs section:target,
article.tabs section:target h2
{
 color: #333;
 background-color: #cde;
 z-index: 2;
}