body{
    font-family:Verdana, sansserif;
}

h1{
    color:#68075A;
}


h2{
    color:#1B4163;
}

h3{
    color:#8AA793;
}


h4{
    color:#41548C;
}


#wrapper {
    padding:10px;
    height:600px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
}

#wrapper > form {
    position:relative;
    padding-left:20px;
}


#wrapper > form > input {
    display:none;
}


#wrapper > form > label {
    float:left;
    padding:5px;
}




#wrapper > form > label > span {
    position:relative;
    display:block;
    width:130px;
    height:39px;
    margin:2px;
    padding:5px;
    border-top-style:solid;
    border-left-style:solid;
    border-right-style:solid;
    border-width;1px;
    border-top-right-radius:7px;
    border-top-left-radius:7px;
    background-color:#aaa;
    z-index:-1;
}

#wrapper > form > label > div {
    position:absolute;
    display:none;
    background-color:#fff;
    left:0px;
    top:58px;
    width:98.5%;
    padding:5px;
    border-style:solid;
    border-width:1px;
    border-radius:7px;
    box-shadow:1px 2px 3px 2px #888;
}

#wrapper > form > input:checked + label > span  {
    background-color:#fff;
    z-index:10;
}

#wrapper > form > input:checked + label > div {
    display:block;
}

/* Styling the panels */

.panel > div {
    width:50%;
    float:left;
}

.panel > div > div{
    display:inline-block;
    vertical-align:top;
    width:250px;
    font-size:75%;
}

.panel > div > div > h1 {
    color:#4aa;
    margin-bottom:0px;
    font-size:133%;
}


.panel > div > div > h2 {
    color:#4aa;
    margin-bottom:0px;
    font-size:115%;
}

.panel > div > div > p {
    margin-top:10px;
}

.panel > div > ul {
    position:relative;
    display:inline-block;
    margin:10px;
    padding:0px;
    width:200px;
    border-radius:7px;
    box-shadow:0px 0px 5px 2px #888;
}



.panel > div > ul > li {
    list-style:none;
    display:block;
    padding:7px;
    border-bottom:solid;
    border-width:1px;
    border-color:#fff;
}


.panel > div > ul > li:first-child {
    border-top-right-radius:7px;
    border-top-left-radius:7px;
}


.panel > div > ul > li:last-child {
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
    border-bottom-style:none;
}

.panel > div > ul > li > ul {
    display:none;
    position:absolute;
    padding:0px;
    top:0px;
    left:180px;
    width:240px;
    min-height:96%;
    border-radius:7px;
    box-shadow:0px 0px 5px 2px #888;
    background-color:#fff;
    z-index:100;
}


.panel > div > ul > li > ul > li{
    list-style:none;
    display:block;
    padding:7px;
    border-bottom:solid;
    border-width:1px;
}

.panel > div > ul > li > ul > li:hover{
    background-color:#aaa;
}

.panel > div > ul > li:hover > ul {
    display:block;
}

.panel > div > ul > li:hover > span{
    color:#fff;
}


.panel > div > ul > li > ul > li:first-child {
    border-top-right-radius:7px;
    border-top-left-radius:7px;
}