/*
.newListSelected  = DIV container for ul
.selectedTxt      = the selected text, visually will be the "box wich shows the selected"
.newListop        = The list, visually will be the "list of options"
.newListHover     = what an option looks like when its hovered over in the list
.hiLite           = what an option looks like in the list, once it is selected
*/
:focus {outline:none;}

.js ul.newList {left:-9999px;}

/*==================================
red curvy example
====================================*/
ul.newList * {
  margin:0;
  padding:0;
}

/* un ordered list style (represents the seslect box) */
ul.newList {
  margin:0;
  padding:0;
  list-style:none;
  color:#000;
  width:275px; 
  overflow:auto; 
  z-index:9999;
  height: 300px;
  border:1px solid #ddd;
  background:#fafafa;
  position:absolute;
  top:44px; 
  left:0;
}

.newListSelected {
  width:277px;
  color:#000;
  display: inline-block;
  margin: 0px!important;
}

.newListSelected span {
  width:284px; display:block;
}

/* The selected text */
.selectedTxt {
  background: url(../images/core/arrow-down.gif) no-repeat right 7px #fafafa;
  border:1px solid #ddd;
  padding:6px;
  overflow: hidden;
}

ul.newList li {
  list-style:none!important;
  background-image: none!important;
  padding:6px!important;
  margin: 0px!important;
}



/* Selected text highlight in the list */
.hiLite {
  background:#8c5ba6!important; 
  color:#fff!important;
}

/* Hover effect for list */
.newListHover {
  background:#80D255!important; 
  color:#000!important; 
  cursor:default;
}

/* Option Title */
.newListOptionTitle {
  font-weight:bold;
}

/* Option title list */
.newListOptionTitle ul {
  margin:3px 0 0;
}