header {
    height: 2.75rem;
    width: 100%;
    top: 0;
    z-index: 101;
}
header.fixed {
    /*background-color: #FFF;*/
}
.download-icon, .back-icon {
    font-size: 1.75rem;
    color: #fff;
    /*font-size: 2rem;*/
    margin-top: 0.6rem;
}
.download-icon {
    margin-right: 0.5rem;
}
.back-icon {
    font-size: 1.75rem;
    padding: 0.5rem;
    margin: 0;
}
.download-count {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    right: 0.25rem;
    top: 0.25rem;
    background-color: #d66262;
    color: #fff;
    font-size: 0.625rem;
    text-align: center;
    line-height: 1.15rem;
}
header > .bg {
    width: 100%;
    height: 100%;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1E2530), to(#3B4452));;
}
header > .search {
    z-index: 102;
    /*top: 1.25rem;*/
    height: 2.75rem;
    width: 100%;
}
.search-input-wrapper {
    height: 100%;
    width: 100%;
    padding-right: .5rem;
}
.index-header .search-input-wrapper,
.common-header .search-input-wrapper {
    width: 16rem;
    width: -webkit-calc(100% - 2.6rem);
    width: calc(100% - 2.6rem);
    margin-right: 2.6rem;
}
/* temp override, should be removed when download manager goes live*/
.index-header .search-input-wrapper,
.common-header .search-input-wrapper {
    width: 16.75rem;
    width: -webkit-calc(100% - 3.3rem);
    width: calc(100% - 3.3rem);
    margin-right: 0;
}
.common-header .search-input-wrapper {}
.search-header .search-input-wrapper {
    width: 16.75rem;
    width: -webkit-calc(100% - 3rem - 1rem);
    width: calc(100% - 3rem - 1rem);
    margin-left: 3rem;
}
.search-input {
    margin: 0.5rem 0.5rem 0 0.5rem;
    border: none;
    height: 1.75rem;
    vertical-align: middle;
    font-size: 0.75rem;
    border-radius: 2px;
    font-size: 0.875rem;
    width: 100%;
    width: calc(100% - .5rem);
}
.search-input:focus {
    outline: none;
}
.search-hint {
    z-index: 103;
    font-size: 0.875rem;
    position: absolute;
    display: block;
    height: 1.75rem;
    line-height: 1.75rem;
}
.index-header .search-input {
    width: -webkit-calc(100% - 1.875rem);
    width: calc(100% - 1.875rem);
    max-width: calc(100% - 1.875rem);
    min-width: calc(100% - 1.875rem);
    padding-left: 1.875rem;
}
.index-header .search-hint {
    left: 1rem;
    top: 1rem;

}
.search-header .search-input {
    width: -webkit-calc(100% - 1.875rem - .375rem);
    width: calc(100% - 1.875rem - .375rem);

    padding-right: 1.875rem;
    padding-left: .375rem;
}
.search-header .search-hint {
    right: 1rem;
    top: .625rem;
    height: 1.5rem;
    line-height: 1.5rem;
    padding-left: .375rem;
    border-left: 1px solid #CCC;
}
.search-header + .sug-list {
    display: none;
    position: absolute;
    top: 100%;
    width: 100%;
    min-height: 1rem;
}
.search-header + .sug-list.active {
    display: block;
}
.search-header + .sug-list > li {
    height: 1rem;
    line-height: 1rem;
    width: -webkit-calc(100% - 1rem);
    width: calc(100% - 1rem);
    padding-left: 1rem;
    border-bottom: 1px solid #CCC;
}
.common-header .title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
}
.common-header .title > h1 {
    color: #FFF;
    font-size: 1.25rem;
}
.common-header .sort,
.common-header .option-right {
    position: absolute;
    height: 100%;
    line-height: 2.75rem;
    color: #FFF;
    font-size: .875rem;
    vertical-align: middle;
    text-align: center;
    width: 4rem;
    right: 0;
}
.common-header + .sort-type-list,
.search-header + .sug {
    display: none;
    position: fixed;
    top: 2.75rem;
    z-index: 102;
    height: -webkit-calc(100% - 2.75rem);
    height: calc(100% - 2.75rem);
    width: 100%;
    background-color: rgba(0,0,0,.8);
}
.common-header + .sort-type-list.expanded,
.search-header + .sug.expanded {
    display: block;
}
.common-header + .sort-type-list > .shader,
.search-header + .sug > .shader {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background-color: #999;
    opacity: .2;
    z-index: 102;
}
.common-header + .sort-type-list ul,
.search-header + .sug ul {
    position: absolute;
    z-index: 103;
    width: 100%;
    background-color: #FFF;
}
.common-header + .sort-type-list ul > li,
.search-header + .sug ul > li {
    color: #999;
    display: block;
    height: 2.75rem;
    line-height: 2.75rem;
    padding-left: 1rem;
    border-bottom: 1px solid #E5E6EB;
}
.common-header + .sort-type-list ul > li.active,
.search-header + .sug ul > li.active {
    color: orange;
}
.common-header + .sort-type-list ul > li > i {
    margin-right: 1rem;
    visibility: hidden;
}
.common-header + .sort-type-list ul > li.active > i{
    visibility: visible;
    line-height: 2.75rem;
}