/*
 * This is a sample CSS file for FancySelect.
 * You can easily change styles such as colors, backgrounds, borders, font
 * and dimensions to customize FancySelect look, but be careful about the
 * layout properties -some of them are essential to make FancySelect works
 * as expected.
*/
/* The following rules set style for the <select> replacement
 * Select is replaced by an inline <div class="fancy-select"> */
div.fancy-select {
    display: inline-block; /* Needed to behave like a select element */
    min-width: 57px;
    height: 25px;
    *display: inline; /* IE7 fix */
    *zoom: 1; /* IE7 fix */
    vertical-align: middle;
    margin: 0px 0px 0px 0px;
    overflow: hidden; /* For float clearing */
    cursor: pointer;
    padding: 0px;
    color: #11337b;
    background-color: #ffffff;
    border: 1px solid #bfbebe;
    /* border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* This is the arrow on the right side. The triangle is
 * rendered using a base64 encoded PNG :  )
 * See the magic here:   http://ptrn.it/x0Hdzg */
div.fancy-select .arrow {
    display: block;
    float: left;
    height: 7px;    
    width: 7px;
    margin: 9px 0px 0px 6px;
    background-image: url(img/pg_flechita_paises.png);
    background-position: left top;
    background-repeat: no-repeat;
}

/* The following rule set style for the dropdown list,
 * which is a <ul class="fancy-select"> */
ul.fancy-select {
    width: 57px;
    margin: 0; /* Reccomended! */
    padding: 0;
    z-index: 35;
    height: auto;
    overflow: auto;
    background-color: #ffffff;
    border: 1px solid #bfbebe;
    /* border radius */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

ul.fancy-select li {
    margin: 0;
    padding: 0px;
    list-style-type: none; /* We do not need bullets */
    border: 0px none;
    background-color: #ffffff;
    overflow: hidden; /* For float clearing */
    border-top: none; /* Avoid double-borders */
    cursor: pointer;
    *width: 150px; /* IE7 fix, we HAVE TO se fixed with :  ( */
    *margin-bottom: -3px; /* IE7 fix */
    text-align: center;
}

ul.fancy-select li .image {
    margin: 5px 9.5px 5px 0;
    opacity: 0.5;
    filter:  alpha(opacity=5);
}

ul.fancy-select li:hover {
    background-color: #f6f6f6;
}

ul.fancy-select li:hover .image {
    opacity: 1;
    filter:  alpha(opacity=1);
}

/* This is for the currently selected option */
ul.fancy-select li.selected {
    background-color: #f6f6f6;
}

ul.fancy-select li.selected .image {
    opacity: 1;
    filter:  alpha(opacity=1);
}

/* This is for the disabled options */
ul.fancy-select li.disabled {
    background-color: #dddddd;
    color: #666666;
    cursor: default;
}

/* The following rules set style for inner content of the <select>
 * replacement and the dropdown list. Just an image and a text left-floated */
.fancy-select .image {
    display: block;
    float: right;
    width: 38px;
    height: 21px;
    margin: 2px 2px 2px 0; 
}

.fancy-select .text {
    display: block;
    float: left;
    width: auto;
    height: 20px;
    line-height: 14px;
    padding: 8px 7px 0px;
    font-size: 14px;
    color: #11337b;
    font-weight: bold;
}

ul.fancy-select .text {
    display: block;
    float: left;
    width: 229px;
    height: 35px;
    line-height: 35px;
    padding: 0 11px;
    font-size: 12px;
    color: #6C6F70;
}

/* Some rules to have bigger images for "fancy-select-big" class */
ul.fancy-select-big li .image {
    display: block;
    float: left;
    width: 64px;
    height: 64px;
}

ul.fancy-select-big li {
    *width: 64px; /* IE7 fix, we HAVE TO se fixed with :  ( */
}