@import "base.less";

div.custom-select {
    background:none;
    color:#666666;
    cursor: default;
    font-family: "Open Sans", sans-serif, "Arial";
    font-size: 13px;
    font-weight: 400;
    position:relative;
    z-index:150;
    div.selector {
        background: url(/images/buttons.png) -4px -74px no-repeat;
        height:20px;
        position:absolute;
        right:0;
        top:0;
        width:20px;
        z-index:0;
    }
    div.title {
        background-color: transparent;
        background-repeat: no-repeat;
        background-position-x: -3px;
        background-image: url("/images/flags/flags_1x.png");
        cursor:pointer;
        height:16px;
        line-height:18px;
        padding-left:29px;
        position:relative;
        white-space:nowrap;
        z-index:1;
    }
    ul.options {
        background: #fff;
        .shadowFullCustomizable(0, 1px, 1px, rgba(0,0,0,0.2));
        display: none;
        left: -15px;
        list-style: none;
        margin: 0;
        padding: 6px 12px 6px;
        position: absolute;
        top: 25px;
        width: 100%;
        z-index: 10000;
        li.option {
            background-image: none;
            border-width: 0 1px;
            cursor: default;
            float: none;
            height: 30px;
            line-height: 1.2em;
            list-style: none;
            margin: 0;
            padding: 10px 0 0;
            white-space: nowrap;
            a {
                background-position-x: -3px;
                background-repeat: no-repeat;
                color: #666666;
                display: block;
                height:16px;
                line-height: 15px;
                margin: 2px 0;
                padding: 1px 1px 1px 30px;
                text-decoration: none;
                text-transform: none;
                width: 75px;
                background-image: url("/images/flags/flags_1x.png");
                &:hover {
                    text-decoration:underline;
                }
            }
        }
        li.option.en-US, div.title.en-US {
            a {
                background-position-y: -27px;
            }
        }
        li.option.es-ES {
            a {
                background-position-y: -51px;
            }
        }
        li.option.de-DE {
            a {
                background-position-y: -3px;
            }
        }
        li.option.fr-FR {
            a {
                background-position-y: -75px;
            }
        }
        li.option.ru-RU {
            a {
                background-position-y: -147px;
            }
        }
        li.option.it-IT {
            a {
                background-position-y: -99px;
            }
        }
    }
    div.title.en-US {
        background-position-y: -27px;
    }
    div.title.es-ES {
        background-position-y: -51px;
    }
    div.title.de-DE {
        background-position-y: -3px;
    }
    div.title.fr-FR {
        background-position-y: -75px;
    }
    div.title.ru-RU {
        background-position-y: -147px;
    }
    div.title.it-IT {
        background-position-y: -99px;
    }
}
div.custom-select.open {
    z-index:10000;
    ul.options {
        display: block !important;
        width: 106px;
    }
}
div.open {
    ul.options {
        z-index:100000;
    }
}
.comboBox {
    border:solid 1px #c7c7c7;
}
#LanguageSelector {
    float: right;
    text-align: left;
    width: 103px;
}
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    div.custom-select {
        div.title, ul.options li.option a {
            background-image: url("/images/flags/flags_2x.png");
            background-size: 24px auto;
        }
    }
}