*{
    box-sizing: border-box
}
body{
    background-color:#42A5DB;
}
a{
    text-decoration: none;
    color:#42A5DB;
    font-weight: bold;
}

ul, li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

div.main{
    display: inline-block;
    margin: 20px auto;
    padding:20px;
    background: rgba(255,255,255,0.2);
    position:absolute;
    left:50%;
    margin-left:-482px;
    min-width: 965px;
}
div.main > div{
    display: inline-block;
    vertical-align: top;
}

div.main > div.content{
    width:700px;
    background-color: #fff;
    padding:20px;
}

.left{
    width:200px; 
    margin-right:20px;
    background: #fff;
    padding: 0 10px;
    box-sizing: border-box;   
}

.left > ul{
    width:100%;
    font-size:15px;
    margin:20px 0px 20px 0;
}

.left > ul > li:hover i{
    display: block;
    color:#fff;
}

.left > ul > li:hover{
    color:#fff;
    background: #ddd;
}

.left > ul > li{
    color:#666;
    cursor: pointer;
    padding:5px;
    border-radius: 2px;
    margin-bottom:10px;
}

.left > ul > li>a{
    color:#333;
}

.left >ul >li.active {
    background: #42A5DB;
}
.left > ul > li.active >a{
    color: #fff;
}