html,body{height:100%}
.wrap{width:100%;height:100%;position:relative}
.head{height:20px;position:fixed;top:0;left:0;width:100%} 
.bodywrap{margin-top:100px;width:102%;margin-left:-1%}
.userleft{width:200px;height:100%}
.userright{width:400px;height:100%}
.userleft,.usercenter,.userright,.bodywrap{height:100%}
.userleft{float:left;}
.usercenter{margin-left:20px; overflow:scroll; overflow-x:hidden}
.userright{float:right;}
.usercenter{margin-top: 20px;}
.userleft{background-color:#aaa}
.userright{background-color:#ccc}
.usercenter{background-color: #F3CD8C }
.head{background-color:#777}
li {
    border-bottom: 1px solid #DDD;
    padding-bottom: 13px;
 
}




@media (min-width:992px) {
    .desktop-only {
        display:block 
    }
}

@media (max-width: 991px) {
    .mobile-only {
        display:block 
    }
 
    .desktop-only {
        display:none 
    }
}

footer {
	text-align: center;
	background: #100;
	color: #dedcb9;
	padding: 0.5em 0;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

ul#list-nav {
  list-style:none;
  margin:20px;
  padding:0;
  width:525px
}

ul#list-nav li {
  display:inline
}

ul#list-nav li a {
  text-decoration:none;
  padding:5px 0;
  width:100px;
  background:#485e49;
  color:#eee;
  float:left;
  text-align:center;
  border-left:1px solid #fff;
}

ul#list-nav li a:hover {
  background:#a2b3a1;
  color:#000
}