.content-wrapper{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow:hidden;
}
.header{
    height:50px;
    width:100%;
    background-color: lightgreen;
    position: absolute;
    top:0;
    left:0;
    right:0;
    z-index: 100;
}
.footer{
    height:50px;
    width:100%;
    background-color: lightgreen;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    padding:15px 10px;
    z-index: 100;
}
.header-menu{
   position: absolute;
    left:10px;
    top:10px;
    width:100%;
}
.header-menu .dropdown-menu{
    width:80%;
    z-index: 200;
}
.spot-item{
    width:80%;
    margin-left:10%;
    background-color: lightblue;
    margin-bottom: 10px;
    color:white;
    padding:10px;
    cursor: pointer;
}
.spot-list{
    text-align: center;
}
.link-div{
    text-align: center;
}
.link-div a{
    color:white;
    text-decoration: none;
    cursor: pointer;
}
.search-input{
    width:80%;
    margin-left:10%;
    position: absolute;
    top:80px;
}
.home-view{
    position: absolute;
    z-index: 50;
    padding:20px;
    text-align: center;
}
.user-view{
    width:60%;
    height:70%;
    bottom:50px;
    right:0px;
    background-color: white;
}
.user-profile{
    width:30%;
}
.rect{
    background-color: lightgreen;
    width:80%;
    height:25px;
    padding:5px;
    text-align: center;
    display: inline-block;
    margin-bottom: 10px;
    margin-right: 10px;
}
.search-view{
    width:100%;
    left:0;
    right:0;
    top:50px;
    bottom:50px;
    background-color: lightgray;
}
.list-view{
    width:100%;
    left:0;
    right:0;
    top:50px;
    bottom:50px;
    background-color: lightyellow;
}
.neighbor-view{
    width:100%;
    left:0;
    right:0;
    height:200px;
    bottom:50px;
    background-color:lightgoldenrodyellow;
}
.scroll-list{
    height:80px;
    overflow-y: scroll;
}
.link-div .active{
    color:#333333;
}
.route-view{
    width:50%;
    height:50%;
    bottom:100px;
    right:0px;
    background-color: white;
}
.start-end{
    width:90%;
    margin-left:5%;
    position: absolute;
    top:80px;
}
.start-end .route-input{
    width:35%;
    display: inline-block;
    margin-right: 10px;
}
.demo-photo{
    width:40%;
    margin-right:10px;
}
.title{
    width:100%;
    padding:20px;
    color:white;
    text-align: center;
}
.btn-return{
    position: absolute;
    right:10px;
    top:10px;
}
.default-overview{
    width:100%;
    left:0;
    right:0;
    height:200px;
    bottom:50px;
    background-color: white;
    overflow-y:scroll;
}
.more-overview{
    height:400px;
}
.top-slide-bar{
   position: absolute;
    top:0px;
    width:60%;
    left:20%;
    height:5px;
    background-color: green;
    cursor: pointer;
}
.comment-overview{
    width:50%;
    left:50px;
    bottom:100px;
    height:300px;
    background-color: white;
}
.comment-item{
    display:inline-block;
    margin-right:10px;
    min-width:100px;
    margin-bottom: 10px;
    font-size: 14px;
}
.comment-icon{
    display: inline-block;
    width:16px;
    height:16px;
    border-radius: 8px;
    margin-right: 10px;
}

.activity-view,.place-view,.suggest-view{
    width:100%;
    left:0;
    right:0;
    bottom:80px;
    height:130px;
    background-color: white;
}
.question-view{
    width:100%;
    left:0;
    right:0;
    top:50px;
    bottom:80px;
    background-color: white;
}