/**
	sexy-combo 2.1.3 : http://code.google.com/p/sexy-combo/
	
	This is an example custom skin.
*/
div.custom {
    border-top-width: 0px;
    padding-right: 0px;
    padding-left: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    padding-bottom: 0px;
    /*margin: 0px;
    width: 146px;
    padding-top: 0px;
    white-space: nowrap;
    height: 24px;*/
    border-right-width: 0px;
    height: 30px;
}

div.custom input {
    border-right: #3a3c6c 1px solid;

    border-top: #3a3c6c 1px solid;

    background: url(../images/sexy-input-bg.jpg) #fff repeat-x 0px 0px;
    left: 0px;

    margin: 0px;
    font: 11px/ 19px tahoma, arial, helvetica, sans-serif;
    vertical-align: middle;
    border-left: #3a3c6c 1px solid;
    width: 187px;

    border-bottom: #3a3c6c 1px solid;
    top: 0px;
    height: 19px;
    padding: 2px 4px;
}

div.custom div.icon {
    border-top-width: 0px;
    border-left-width: 0px;
    background: url(../images/arrow.jpg) no-repeat 0px 0px;
    left: 187px;
    border-bottom-width: 0px;
    width: 24px;
    cursor: pointer;
    top: 0px;
    height: 24px;
    border-right-width: 0px
}

div.custom div.list-wrapper {
    border-right: #006b66 1px solid;
    padding-right: 0px;
    border-top: #006b66 0px solid;
    padding-left: 0px;
    left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    border-left: #006b66 1px solid;
    width: 181px;
    bottom: auto;
    padding-top: 0px;
    border-bottom: #006b66 1px solid;
    top: 20px;
    background-color: #ffffff
}

div.custom.blue-combo div.list-wrapper {
    background: #008881
}

div.custom.black-combo div.list-wrapper {
    background: #333
}

div.custom div.list-wrapper-up {
    border-right: #3a3c6c 1px solid;
    border-top: #3a3c6c 1px solid;
    border-left: #3a3c6c 1px solid;
    bottom: 20px;
    border-bottom: #3a3c6c 0px solid;
    top: auto
}

div.custom ul {
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    list-style-type: none;
    height: 200px;
    text-align: left;
}

div.custom li {
    padding-right: 0px;
    padding-left: 5px;
    padding-bottom: 0px;
    margin: 0px;
    font: 11px tahoma, arial, helvetica, sans-serif;
    cursor: pointer;
    padding-top: 4px;
    /*background-color: #ffffff*/
}

div.custom li.active {
    /*background-color: rgb(160, 169, 194)*/
    background: #00aaa0;
}

div.custom.black-combo li.active {
    background: #686868;
}

div.custom li.active {
    /*background-color: rgb(160, 169, 194)*/
    background: #00aaa0;
}

div.custom input.empty {
    color: gray;
}

/**
	sexy-combo 2.1.3 : http://code.google.com/p/sexy-combo/
	
	This is the base structure, a skin css file is also needed
*/

/*wrapper of all elements*/
div.combo {
    position: relative;
    left: 0px;
    top: 0px;
}

/*text input*/
.combo input {
    position: absolute;
}

/*icon*/
.combo div.icon {
    position: absolute;
}

/*list wrapper*/
.combo div.list-wrapper {
    position: absolute;
    overflow: hidden;
    /*we should set height and max-height explicitly*/
    height: 380px;
    max-height: 300px;
    /*should be always at the top*/
    z-index: 99999;

}

.combo.black-combo div.list-wrapper {
    max-height: 150px;
}

/*"drop-up" list wrapper*/
.combo div.list-wrapper-up {
}

/*dropdown list*/
.combo ul {
}

/*dropdown list item*/
.combo li {
    height: 20px;
}

/*active (hovered) list item*/
.combo li.active {
}

.combo .visible {
    display: block;
}

.combo .invisible {
    display: none;
}

/*used when emptyText config opt is set. Applied to text input*/
.combo input.empty {
}