﻿.eduDiv {
    display:inline-block;
    box-sizing:border-box;
    padding:15px;
    background:silver;
    border-radius:10px;
    margin-bottom:10px;
}

.eduGroups {
    position:relative;
    display:block;
    box-sizing:border-box;
    width:940px;
}

/* Configure the radio buttons to hide off screen */
.eduGroups > input[type="radio"] {
    position:absolute;
    left:-1000px;
    top:-1000px;
}

/* Configure labels to look like tabs */
.eduGroups > input[type="radio"] + label {
    position:relative;
    font-size:14px;
    text-shadow: 0px 1px 0px rgba(255,255,255,.5);
    position:absolute;
    box-sizing:border-box;
    height:50px;
    width:150px;
    margin:0;
    padding:10px;
    background-color:silver;
}

.eduGroups > input[type="radio"] + label:hover {
    color:maroon;
    cursor:pointer;
}

input.tab01 + label { top:0; }
input.tab02 + label { top:50px; }
input.tab03 + label { top:100px; }
input.tab04 + label { top:150px; }
input.tab05 + label { top:200px; }
input.tab06 + label { top:250px; }
input.tab07 + label { top:300px; }
input.tab08 + label { top:350px; }
input.tab09 + label { top:400px; }
input.tab10 + label { top:450px; }

/* Checked tabs must be white with the bottom border removed */
.eduGroups > input[type="radio"]:checked + label {
    margin-right:-1px;
    font-weight:bold;
}

/* The tab content must fill the widgets size and have a nice border */
.eduGroups > div {
    font-size:16px;
    position:relative;
    display:none;
    box-sizing:border-box;
    min-height:600px;
    margin-left:150px;
    border:1px solid gray;
    background-color: white;
    padding:20px;
    height:100%;
    border-radius: 5px 5px 5px 5px;
    box-shadow:0 0 20px 1px rgba(0,0,0,0.4);
}

/* This matchs tabs displaying to thier associated radio inputs */
.tab01:checked ~ .tab01,
.tab02:checked ~ .tab02,
.tab03:checked ~ .tab03,
.tab04:checked ~ .tab04,
.tab05:checked ~ .tab05,
.tab06:checked ~ .tab06,
.tab07:checked ~ .tab07,
.tab08:checked ~ .tab08,
.tab09:checked ~ .tab09,
.tab10:checked ~ .tab10 {
    display:block;
}

/* ==== Add an arrow in front of the selected tab ==== */
.tab01:checked + label::before,
.tab02:checked + label::before,
.tab03:checked + label::before,
.tab04:checked + label::before,
.tab05:checked + label::before,
.tab06:checked + label::before,
.tab07:checked + label::before,
.tab08:checked + label::before,
.tab09:checked + label::before,
.tab10:checked + label::before {
    content:"";
    position:absolute;
    left:-5px;
    top:12px;
    height:0;
    width:0;
    border-style:solid;
    border-width:5px 0 5px 10px;
    border-color:transparent transparent transparent maroon;
}
.eduDiscuss {
    border-top:1px solid gray;
    margin-top:20px;
}
.eduUL {
    padding-top:0;
    margin-top:0;
}
.eduH2 {
    text-align:center;
    text-decoration:underline;
    font-weight:bold;
    margin-bottom:30px;
}
.eduTBL {
    border-collapse:collapse;
    margin:0 auto;
}
.eduTBL > tbody > tr > td {
    white-space:nowrap;
    vertical-align:top;
    padding:5px 8px;
}