@import "defaults";

/* always visible styles */

#alchemy select.has_sb {
	display: none !important;
}

#alchemy .selectbox {
	display: inline-block;
	*display: inline;
	margin: 0;
	position: relative;
	zoom: 1;
	font-size: 11px;
}

#alchemy .selectbox.full_width .display.full_width {
	width: 340px;
}

#alchemy .selectbox .display {
	border: 1px solid $button-border-color;
	cursor: default;
	display: block;
	font-weight: normal;
	height: 23px;
	line-height: 23px;
	padding: 0 23px 0 5px;
	position: relative;
	text-decoration: none;
	overflow: hidden;
	@include rounded-corner;
	background: $button-bg-color image-url('alchemy/shading.png') repeat-x 0 -69px;
}

#alchemy .content_editor.validation_failed .selectbox .display {
	border-color: #931f23;
}

#alchemy .selectbox .display .text {
	text-shadow: $button-text-shadow;
}

#alchemy .selectbox .display.long {
	width: 100px;
}

#alchemy .selectbox .display.short {

}

#alchemy .selectbox .display.medium {

}

#alchemy .selectbox.disabled .display {
	color: #999;
}

#alchemy .selectbox.focused .display {
	border: 1px solid $button-hover-border-color;
}

#alchemy .selectbox.focused .display .text {
	text-shadow: none;
}

#alchemy .selectbox.focused .display .arrow_btn,
#alchemy .selectbox .display:hover .arrow_btn {
	background: $button-hover-bg-color image-url('alchemy/shading.png') repeat-x 50% -75px;
}


#alchemy .selectbox .display:active .arrow_btn {
	background-color: #e5e5e5;
}

#alchemy .selectbox .display:active .arrow_btn .interior {
	background-color: #e5e5e5;
}

#alchemy .selectbox .display.hover {
	cursor: pointer;
}

#alchemy .selectbox .display.hover .arrow_btn .interior {
	background: #e6f0f5 image-url('alchemy/shading.png') repeat-x 0 -75px;
}

#alchemy .selectbox .display .arrow_btn {
	background: #ededed image-url('alchemy/shading.png') repeat-x 0 -75px;
	display: block;
	height: 23px;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 19px;
}

#alchemy .selectbox .display .arrow_btn .interior {
	display: block;
	height: 23px;
	width: 19px;
}

#alchemy .selectbox .display .arrow_btn .arrow {
	background: image-url('alchemy/ui-icons_666666_256x240.png') no-repeat -63px -11px;
	display: block;
	height: 23px;
	width: 19px;
}

#alchemy .selectbox .text {
	line-height: 23px;
	text-align: left;
}

#alchemy .selectbox .value {
	display: none;
}

/* dropdown styles */

#alchemy .items {
	background: $button-bg-color;
	border: 1px solid $button-border-color;
	display: block;
	list-style-type: none;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99999;
	-moz-box-shadow: 0 3px 5px rgba(0,0,0,.5);
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,.5);
	box-shadow: 0 3px 5px rgba(0,0,0,.5);
	@include rounded-corner;
	padding: 0;
	line-height: 15px;
	font-size: 11px;
}

#alchemy .items.long {
	width: 128px;
}

#alchemy .items.full_width {
	width: 386px;
}

#new_page_form tbody tr td.second_row div.selectbox .display{
	width: 100px;
}

#alchemy .items.very_long {
	min-width: 191px;
}

#alchemy .items.above {
	
}

#alchemy .items li {
	display: block;
	margin: 0;
	padding: 0;
	white-space:nowrap;
}

#alchemy .items li:first-child {
	margin-top: 0;
}

#alchemy .items li .item {
	color: $text-color;
	cursor: default;
	display: block;
	text-decoration: none;
	padding: 2px 12px 2px 6px;
}

#alchemy .items li.selected .item {
	background-color: #e6f0f5;
	color: $text-color;
}

#alchemy .items li.disabled .item {
	color: #999;
}

#alchemy .items li.hover > .item {
	background-color: #e6f0f5;
	color: $text-color;
	cursor: pointer;
}

#alchemy .items .value {
	display: none;
}

/* optgroup styles */

#alchemy .items .optgroup .items {
	border: none;
	margin: 0;
	padding: 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}

#alchemy .items .optgroup>.label {
	font-weight: bold;
	line-height: 23px;
}

#alchemy .items .optgroup .items li .item {
	padding-left: 1em;
}

#alchemy .items>li.first .item {
	@include top-rounded-border;
}

#alchemy .items>li.last .item {
	@include bottom-rounded-border;
}

/* for optgroups */

#alchemy .items>li>.label {
	line-height: 27px;
	padding: 4px 6px;
}