/* Set the size and font of the tab widget */
.tabGroup {
    color:#0000CD;
    font:12px Arial, sans-serif; 
    margin-left: 10px;
    width: 820px;
    height: 380px;
}
 
/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
    position: absolute;
    left:-100px;
    top:-100px;
}
 
/* Configure labels to look like tabs */
.tabGroup > 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: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 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:#ddd;
}
 
/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
    border:1px solid #ccc;
}
 
/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
    background-color:#F7F8D6;
    font-weight: bold;
    border-bottom: 1px solid #F7F8D6;
    margin-bottom: -1px;
}
 
/* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
    display: none;
    border: 1px solid #ccc;
    background-color: #F7F8D6;
    padding: 10px 10px;
    height: 100%;
    overflow: auto;
     
    box-shadow: 0 0 20px #444;
    -moz-box-shadow: 0 0 20px #444;
    -webkit-box-shadow: 0 0 20px #444;
     
    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 thier 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 {
    display: block;
}
