﻿.sortby-block {
    position:relative;
}

.label-sortby {
    font-size: 13px;
    font-weight: bold;
    left: 10px;
    position: absolute;
    text-align: right;
    top: 10px;
    z-index: 99;
}

div.fancy-select {
        color: #46565D;
      /* font-weight: bold;*/ 
        position: relative;
        font-size: 13px;
}

div.fancy-select.disabled {
        opacity: 0.5;
}

div.fancy-select select:focus + div.trigger {
        box-shadow: none;
}

div.fancy-select select:focus + div.trigger.open {
        box-shadow: none;
}

div.fancy-select div.trigger {
        background: transparent url(/OnlineCatalog/Images/arrow-down.png) no-repeat 170px center;
        color: #4B5468;
        cursor: pointer;
        padding: 10px 10px 9px 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        width: 118px;
        white-space: nowrap;

        transition: all 240ms ease-out;
        -webkit-transition: all 240ms ease-out;
        -moz-transition: all 240ms ease-out;
        -ms-transition: all 240ms ease-out;
        -o-transition: all 240ms ease-out;
}

div.fancy-select div.trigger:after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        top: 20px;
        right: 9px;
}

div.fancy-select div.trigger.open {
        background: #000 url(/OnlineCatalog/Images/arrow-down-hover.png) no-repeat 170px center;
        color: #FFF;
        box-shadow: none;
}
    div.fancy-select div.trigger:hover {
        background: #000 url(/OnlineCatalog/Images/arrow-down-hover.png) no-repeat 170px center;
        color: #FFF;
    }
div.fancy-select div.trigger.open:after {
        border-top-color: #7A8498;
}

div.fancy-select ul.options {
        background: #FFF;
        border: 4px solid #E1E1E1;
        list-style: none;
        margin: 0;
        position: absolute;
        top: 40px;
        left: 0;
        visibility: hidden;
        opacity: 0;
        overflow: auto;
        padding-left:0;
        min-width: 190px;
        z-index: 50;
        transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
        -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
        -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
        -ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
        -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.open {
        visibility: visible;
        top: 37px;
        opacity: 1;

        /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
        /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
        transition: opacity 300ms ease-out, top 300ms ease-out;
        -webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
        -moz-transition: opacity 300ms ease-out, top 300ms ease-out;
        -ms-transition: opacity 300ms ease-out, top 300ms ease-out;
        -o-transition: opacity 300ms ease-out, top 300ms ease-out;
}

div.fancy-select ul.options.overflowing {
        top: auto;
        bottom: 40px;

        transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
        -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
        -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
        -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
        -o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.overflowing.open {
        top: auto;
        bottom: 50px;

        transition: opacity 300ms ease-out, bottom 300ms ease-out;
        -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
        -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
        -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
        -o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}

div.fancy-select ul.options li {
        color: #666;
        cursor: pointer;
        font-size: 13px;
        padding: 8px 12px;
        white-space: nowrap;

        transition: all 150ms ease-out;
        -webkit-transition: all 150ms ease-out;
        -moz-transition: all 150ms ease-out;
        -ms-transition: all 150ms ease-out;
        -o-transition: all 150ms ease-out;
}

div.fancy-select ul.options li.selected {
        background: #FFF;
        color: #666;
}

div.fancy-select ul.options li.hover {
        color: #000;
}