body{
        background: #f4f4f4;
        margin: 0px;
        width: device-width;
        font-family: Roboto,'Droid Sans','Helvetica Neue',sans-self;
        font-weight: 200;
        letter-spacing: 1;
        font-size: 14px;
        -webkit-text-size-adjust:none;
        /*background-image: url("../img/home.jpg");
        background-size: 100%;*/

    }
    .statusBat{
        height: 20px;
        background-image: url("img/default.png");
        background-size: cover;

        
    }
    .headingBar{
        display: table;
        height:44px;
        width: 100%;
        background: rgb(228,228,228);
        box-shadow: 0px 1px 1px #888888;

    }
    #headingTop{
        display: table-cell;
        font-size: 17px;
        text-align: center;
        vertical-align: middle;
    }
    .F-left{
        float: left;
        margin-left: 5px;
    }
    
    .F-center{
        float: center;
    }
    .F-right{
        float: right;
        margin-right: 5px;
    }
    .T-center{
        text-align: center;
        
    }
    .T-right{
        text-align: right;
    }
    .icon-resize{
        height: 30px;
        margin-right: 15px;
        margin-left: 15px;
    }
    .page-start{
        width: 100%;
        position: relative;
        /*height: window.height;
        需要用js来赋值,或者设置合适的照片大小*/
    }
    .background-resize{
        width: 100%;
        opacity: 1;
    }
    
    .hover-div{
        position: absolute;
        left: 0;
        bottom: 15px;
        background-color: rgba(0,0,0,0.2);
        height: 265px;
        width: 46%;
        color: white;
    }
    .hover-div img{
        margin-right: 10px;
    }
    .hover-left{
        position: absolute;
        right: 0;
        bottom: 15px;
        
        height: 90px;
        width: 75px;
        font-size: 9x;
        line-height: 100%;
        padding-right: 7px;
    }
    .hover-left img{
        height: 10px;
        margin-left: 7px;
    }
    .big-temp{
        
        font-size: 110px;
        font-weight: 100;
        line-height: 80%;
        margin-bottom: 10px;
    }
    .Half{
        display: inline-block;
        width: 45%;
        
    }
    .Half img{
        width: 40%;
        margin-right:5px;

    }
    .Third{
        display: inline-block;
        width: 31%;
        text-align: center;
    }
    .Third img{
        width: 60%;
        text-align: center;
        margin-right: 0;
    }
    .Third2 {
        display: inline-block;
        width: 31%;
        text-align: center;
    }
    .Third2 img{
        width: 100%;
        margin: 0;
    }    
    .Fourth{
        display: inline-block;
        width: 24%;
    }
    .Fifth{
        display: inline-block;
        width: 19%;   
    }
    .Sixth{
        display: inline-block;
        width: 16.66%;
    }
    .Sixth img{
        
        height: 15px;
    }
    
    .weatherIcon{
        width: 30%;
       /* -webkit-filter: invert(100%);*/

    }
    .Color-red{
        color: red;
    }
    
    
    
    .brief{
        margin-top: 5px;
    }
    .brief img{
        height: 30px;
    }
    .Forecast{
        font-size: 10px;
        margin-top: 10px;
        
    }
    .Forecast p{
        margin: 0;
        
    }
    .Location{

    }
    .Location img{
        height: 17px;
    }
    .detailW{
        font-size: 20px;
    }
    



    .subline{height: 10px;}
    .supDot{font-size: 50px;vertical-align: super;}
    .forcastBtn{height: 114px;}
    .humPadding{padding-top: 25px;}
    .precMargin{margin-top: 10px;}

.selectedDate{
    display: block;
    position: relative;
}







/*sytle1*/

.sign_img{
    width: 8%;
    overflow: hidden;
}

.sign_img2{
    height: 25px;
    width: 25px;
    margin-right: 2px;
    margin-left: 1px;
    /*width: 10%;*/
    overflow: hidden;
}

.sign_img3{
    width: 30%;
    overflow: hidden;
}

.side_btn{
    background-color:#FFFFFF;
    width: 100%;
    border:0.5;
}

.home-bottom{
    width:100%;
    /*height:50px;*/
    position:fixed;
    bottom:0px;
    /*margin:1px;*/
    background-color:#F8FBEF;
}

.temperature{
    font-size:200%;
    width:100%;
    overflow: hidden;
}

.min_temperature{
    font-size:80%;
}

.weather_img{
    width:100%;
    overflow: hidden;
}

.share{
    position:fixed;
    bottom:0px;
}



   
  
    .idImg{
        height: 200px;
        width: 100%;
    }

    
    table{
        width: 100%;
        /*text-align: center;
        font-size: 28px;
       */
    }
    td{
        padding: 5px;
        
        
    }
    .borderAll{
        border: 1px solid black;
        /*box-shadow: 0px 1px 3px #888888;*/
    }
    .v-middle{
        vertical-align: middle;
    }
    .t-middle{
        text-align: center;
    }
    .f-left{
        float: left;
    }
    .f-right{
        
        float: right;
        
    }
    .resizeImg{
        width: 5px;
    }
    .ui-btn{
        padding: 3px;
    }
    .ui-input-search{
        margin-right: 5px;
        margin-left: 5px;
        margin-top: 0px;
        margin-bottom: 0px;
       
    }
    /*#searchArea{
        background: grey;
        padding-top: 8px;
        padding-bottom: 8px;

    }*/
    .floatBox{
        margin: 3px;
        position: relative;
    }
    
    
    .itemPrice{
        position: absolute;
        left: 5px;
        bottom: 5px;
    }
    .itemName{
        position: absolute;
        right: 5px;
        bottom: 5px;
    }


/*detail page*/
/*.Img-cover{
    width: 100%;
    height: 200px;
    overflow: hidden;
}*/

.col-xs-8{
    padding: 0;
}

.backdrop{
    /*background-image: url("img/siderBar.jpg");
    background-size: cover;*/
    
    width:100%;
    z-index: 4000;
    position: fixed;
    left: 0;
    top: 0;   
    background: rgba(23,25,24,0.3);
    color: white;
}


.but_it_btn{
    float : right;
    padding-top: 2px;
    padding-bottom: 2px;
}



.sidebar{
        /*background-color: #282738;
        opacity: 0.8;
        margin-top: 128px;*/
        margin-left: 0;
        width:100%;
        /*height:1334px;*/
        box-shadow: 5px 0px 5px #333333;
        position: relative;
        
    }
    .backgroundSize{
        width: 100%;
        
    }
    
    .hover-siderbar font{
        font-size: 18px;
    }
    
    
    /*#location{
        width:100%;
        overflow: hidden;
    }
    */
    .borderRight{
        border-right: 1px white dotted;
    }
    
    
    
    .gender_btn{
        width:40%;
        /*height:50px;*/
    }
    
    .genre_btn{
        width:55%;
        /*height:50px;*/
        margin-bottom: 10px;
    }
    .set{
        position: fixed;
        left: 3%;
        
        bottom:10px;
    }
    .Bottonsize{
        height:40px;
    }
    .finder{
        position:fixed;
        right: 36%;
        
        bottom:10px;

    }
    
    .col-xs-6{
        padding: 0;
    }
    
    
    #main_image{
        width:100%;
        overflow: hidden;      
    }
    
    .profile_img{
        margin-top: 33px;
        width:33%;
        border:2px solid white;
        border-radius: 3px;
    }
    .profileName{
        font-size: 14px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .likedNum{
        color: white;
        font-size: 24px;
    }
    .likedTitle{
        color: white;
        font-size: 10px;
    }
    .location_edge{
        width: 90%;
        margin: 0 auto;
        border-top: solid 2px white; 
        border-bottom:1px dotted white;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .location{
        color: white;
        width:70%;
        margin: 0 auto 14px auto;
        border: 1px white solid;
        border-radius: 3px;
    }
    .location form{
        display: inline-block;
        width: 80%;
    }
    .location input{
        color: white;
        height: 25px;
        font-size: 12px;

    }
    .location input:focus{
        color: white;
    }
    .liked{
        margin-top: 5px;
        margin-bottom: 10px;
    }
    .optionHeading{
        margin-bottom: 10px;
        margin-top: 6px;
        font-size: 17px;
        line-height: 100%;
    }
    .optionBody{
        margin-bottom: 30px;
    }
    .location_btn{
        width: 100%;
        background: none;
        border:none;
        padding-left: 4px;
        
    }
    .eighth{
        display: inline-block;
        width: 12.5%;
        text-align: center; 
    }

    .locationResize{
        height: 16px;
        text-align: center; 
    }
    .location_btn input:focus {
    color: white;
    }

    .blank{
        
        height: 500px;                   
    }
    .hover-siderbar{
        position: absolute;
        top: 0;
    }
/*card-view*/

    .card_view1{
    
    padding: 0;
    }

    .card_img{
        width:100%;
    }
    .card_item{
        padding: 2.5% 0.7% 0.5% 0.7%;

    }
     
    .card_item span{
        line-height: 10px;
        font-size: 8px;
    }
     .card_item img{
        width: 100%;
        max-height: 90px;
        max-width: 100%;
        margin: auto;
    }


 /*style.css*/

/* for Search*/
.clothesListView{
    width: 100%;
}

.searchPage{
    font-size: 12px;
}
.searchArea{
    background: #f0eff5;
    padding: 7px 7px;
}
.searchArea form{
    display: inline-block;
    width: 63%;
}
.searchArea form input{
    padding: 5px 5px;
    height: 20px;
    width: 100%;
}

.likedHeart{
        position:  absolute;
        right: 7px;
        top: 10px;
    }
.resizeHeartImg{
        width: 30px;
        margin-right: 3px;
        margin-top: -2px;
    }
    .resizeHeartImg2{
        width: 30px;
        float: center;
       
    }




/*style of cloth img*/
.cover-img{
    width: 100%;
    height: 350px;
    overflow: hidden;
    position: relative;
    
}

.detailImg{
     
     display: block;
    width: auto;
    max-height: 300px;
    max-width: 100%;
    margin: auto;
    text-align: center;
}
.thumbnail{
    margin-bottom: 10px;
}
.thumbnail .cover {
    width: 100%;
    height: 175px;
    overflow: hidden;
    
}
.table{
    display: table;
    height: 100%;
}
.table-cell{
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

.resizeItemImg{
    /*cursor: pointer;*/
    display: block;
    width: auto;
    max-height: 175px;
    max-width: 100%;
    margin: auto;
    text-align: center;
    position: relative;
    
}
.cloth-preview{
    margin: 5px;
}
.thumbnail{
    margin-bottom: 0;
}
.thumbnail .cover img {
    /*min-width: 100%;
    min-height: 100%;*/
    overflow: hidden;
    /*text-align: center;*/
    vertical-align: middle;
}

.thumbnail .caption{
    height: 30px;
    padding: 0px;
    padding-top: 10px;
    
}
.panel-heading{
    background: white;
}
.panel-title{
    
    font-size: 12px;
    display: inline-block;
    margin:0px;
    
    
}
.bigName{
    font-size: 18px;
}

.NameHalf{
    width: 70%;
    display: inline-block;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    vertical-align: top;

}
.PriceHalf{
    width: 25%;
    display: inline-block;
    vertical-align: top;
    text-align: right;
}
.empty img{
    width: 100%;
}

.hihi{
    width: 35%;
    float: right;
    text-align: center;
}
/*新增*/
.searchBtn {
    display: inline-block;
    height: 20px;
    width: 50%;
    font-size: 9px;
    
    background: rgb(53, 126, 189);
    color:white;
    border:none;
    vertical-align: top;
    text-align: center;
    
    
    
}   
.dropdown {
    position: relative;
    display: inline-block;
    z-index: 4;
    vertical-align: top;
    width: 45%;
    /*float: right;*/
}/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 3px 7px;
    font-size: 10px;
    border: none;
    cursor: pointer;
    height: 20px;
    text-align: right;
    
    
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <div> - needed to position the dropdown content */


/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 80px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 6px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown mencard_itemu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}      





.dottedLine{
    border-right: dotted white 1px;
}


#buyButton{
    padding: 3px 10px;
    border: 1px solid black;
    /*border-radius: 4px;*/
    background: #333333;
    color: white;
    font-weight: 300;
}
.statusBar{
   /* height: 100px;*/
    line-height: 1.4;
}
.loadmoreBtn{
    display: block;
    width: 100%;
    text-align: center;
    line-height: 2.0;
    vertical-align: bottom;
    font-size: 20px;
}
.peopleImg{
    margin-bottom: 10px; 
    width: 80%;
}