.c2-sb-wrap { position: relative; font-size: 14px; color: #000; font-family: 'MyriadProSemiBold'; /* color and font here */ }
.c2-def-val { color:#666;  }
.c2-sb-inner-wrap { position: relative; height: 30px; padding-left: 8px; border:1px solid #ddd; background-color:#fff; min-width: 300px; /* background shadow and border here */ }
.c2-sb-text { position: relative;  height: 30px; line-height:30px; overflow: hidden; cursor: pointer; display:block; padding-right:35px; text-overflow:ellipsis; white-space: nowrap; }
.c2-sb-button { position: absolute; right:0; top:0; border-left:1px solid #ddd; width: 30px; height: 30px; font-size: 0px; line-height: 0px; text-indent: -4000px; background: #fff; cursor: pointer; }
.c2-sb-button:after { position:absolute; left:50%; top:50%; margin:-2px 0 0 -4px;  border:4px outset transparent; border-top:4px solid #00addc; content:''; width:0; height:0;  }
.c2-sb-list-wrap { display: none; position: absolute; left: 0px; right:0; top: 100%; margin-top:-1px; border: 1px solid #cfc9bc; background: #eee; max-height:220px; overflow-x:hidden;}
.c2-sb-list { display: block; position: relative; list-style-type: none;  display: block; overflow-x: hidden; }
.c2-sb-list-item { display: block; width: 100%; }
.c2-sb-list-item-link { display: block; height: 38px; line-height:38px; color:#666;  white-space: nowrap; text-decoration: none; padding:0 8px; text-overflow:ellipsis; position:relative; overflow:hidden; }
.c2-sb-list-item-link:hover,
.c2-sb-list-item-link-active { background: #00addc; color:#fff;  text-decoration:none; }

.c2-sb-wrap:hover .c2-sb-button { background-color:#00c0f5; }
.c2-sb-wrap:hover .c2-sb-button:after { border-top-color:#fff; }
.c2-sb-wrap.c2-sb-open .c2-sb-button { background-color:#00addc; }
.c2-sb-wrap.c2-sb-open .c2-sb-button:after { border-top:4px outset transparent; border-bottom:4px solid #fff; margin-top:-6px;  }

/* States */
.c2-sb-wrap,
.c2-sb-wrap .c2-sb-inner-wrap,
.c2-sb-wrap .c2-sb-text,
.c2-sb-wrap .c2-sb-button { z-index: 10; }
.c2-sb-wrap .c2-sb-list-wrap { z-index: 6; }

.c2-sb-closing,
.c2-sb-closing .c2-sb-inner-wrap,
.c2-sb-closing .c2-sb-text,
.c2-sb-closing .c2-sb-button { z-index: 15; }
.c2-sb-closing .c2-sb-list-wrap { z-index: 11; }

.c2-sb-open,
.c2-sb-open .c2-sb-inner-wrap,
.c2-sb-open .c2-sb-text,
.c2-sb-open .c2-sb-button { z-index: 20; }
.c2-sb-open .c2-sb-list-wrap { z-index: 16; }
