/* * Selecter Plugin [Formstone Library] * @author Ben Plum * @version 1.9.2 * * Copyright © 2012 Ben Plum <mr@benplum.com> * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> */ 	.selecter-element { left: -999999px; position: absolute; }	.selecter {display:block;margin:0;position:relative;width:325px;z-index:1;float:left;background:url("/css/styles/img/bg/inputs.png") 0 -22px;}	.selecter .selecter-selected {color:#666;cursor:pointer;display: block;font-size:12px;margin:0;overflow:hidden;padding:0 5px;position:relative;text-overflow:clip;z-index:49;		height:29px;line-height:29px;background: url("/css/styles/img/ico/select.png") no-repeat scroll right 2px transparent;}		.selecter .selecter-options { border:0;background-color:#3A3A3A;border-radius: 0 0 3px 3px;display:none;left:0;margin:0;max-height:260px;overflow:auto;overflow-x:hidden;		padding:0;position:absolute;top:100%;width:100%;*width:auto;z-index: 50;}	.selecter .selecter-group { background: #F9F9F9; border-bottom: 1px solid #e3e3e3; color: #999; display: block; font-size: 11px; padding: 5px 10px 4px; 		text-transform: uppercase; }	.selecter .selecter-item {border-bottom:1px solid #111;color:#666;cursor:pointer;display:block;font-size:12px;margin:0;overflow:hidden;padding:8px 10px;text-overflow:ellipsis;		width:100%;		-webkit-box-sizing: border-box; 		-moz-box-sizing: border-box;		box-sizing: border-box;	}	.selecter .selecter-item.selected { background: #222; }	.selecter .selecter-item:hover, 	.selecter .selecter-item.selected:hover { background-color: #222; }	.selecter .selecter-item.first { border-radius: 0; } 	.selecter .selecter-item.last { border-radius: 0 0 2px 2px; border-bottom: 0; }		/* Open */	.selecter.open { z-index: 3; }	.selecter.open .selecter-selected { border-radius: 3px 3px 0 0; z-index: 51; }		.selecter:hover .selecter-selected,	.selecter.open .selecter-selected, 	.selecter.focus .selecter-selected { }		/* 'Cover' Positioning */	.selecter.cover .selecter-options { border-radius: 3px; border-width: 1px; top: 0; }	.selecter.cover .selecter-options .selecter-item.first { border-radius: 3px 3px 0 0; }	.selecter.cover.open .selecter-selected { border-radius: 3px 3px 0 0; z-index: 49; }		/* 'Bottom' Positioning */	.selecter.bottom .selecter-options { border-width: 1px 1px 0; bottom: 100%; top: auto; }	.selecter.bottom .selecter-item.last { border: none; }	.selecter.bottom.open .selecter-selected { border-radius: 0 0 3px 3px; }	.selecter.bottom.open .selecter-options { border-radius: 3px 3px 0 0; }		/* 'Bottom' + 'Cover' Positioning */	.selecter.bottom.cover .selecter-options { bottom: 0; top: auto; }	.selecter.bottom.cover.open .selecter-selected { border-radius: 3px; }	.selecter.bottom.cover.open .selecter-options { border-radius: 3px; }		/* 'Mobile' Positioning */	.selecter.mobile .selecter-options { box-shadow: 0 0 15px rgba(0, 0, 0, 0.75); bottom: auto; border-radius: 5px; left: 5%; position: fixed; top: 5%; width: 90%; z-index: 101; }	.selecter.mobile .selecter-item.first { border-radius: 5px 5px 0 0; }	.selecter.mobile .selecter-item.last { border-bottom: none; border-radius: 0 0 5px 5px; }	.selecter.mobile.open .selecter-selected { border-radius: 5px; }		/* 'Mobile' Overlay */	.selecter .selecter-overlay { background: rgba(0, 0, 0, 0.5); display: none; height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 100; }	.selecter.open .selecter-overlay { display: block; }		/* Multiple Select */	.selecter.multiple .selecter-options { border-radius: 3px; border-width: 1px; box-shadow: none; display: block; position: static; width: 100%; }		/* 'Disabled' State */	.selecter.disabled .selecter-selected { background: #fff; border-color: #eee; color: #ccc; cursor: default; }	.selecter.disabled .selecter-options { background: #fff; border-color: #eee; }	.selecter.disabled .selecter-group,	.selecter.disabled .selecter-item { border-color: #eee; color: #ccc; cursor: default; }	.selecter.disabled .selecter-item:hover { background: #fff; }	.selecter.disabled .selecter-item.selected { background: #fafafa; }		/* Media Queries */	@media screen and (max-width: 740px) {		.selecter { max-width: 40%; }	}	@media screen and (max-width: 500px) {		.selecter { max-width: 100%; } 	}