/* ===========================================================
 *
 *  Name:        selectordie.css
 *  Updated:     2014-04-27
 *  Created by:  Per V @ Vst.mn
 *  What?:       Base CSS for Select or Die
 *
 *  Copyright (c) 2014 Per Vestman
 *  Dual licensed under the MIT and GPL licenses.
 *
 *  No, I don't usually comment my CSS, but in this
 *  case it might "help" someone.
 *
 *  Beards, Rock & Loud Guns | Cogs 'n Kegs
 * =========================================================== */

/* Remove, change to fit your needs */


/* The SoD - Please keep this first three lines intact, otherwise all hell will break looooooose */
.sod_select {
	display:inline-block;position:relative;width:200px;height:40px;padding:10px 15px;
	border:2px solid #eb6877;outline:0;outline-offset:-2px;
	line-height:1em;text-transform:uppercase;text-align:right;
	cursor:pointer;
  }
/* Up/Down arrows */
.sod_select:before,
.sod_select:after {
	position:absolute;right:10px;top:10px;
	font-family:FontAweSome;content:"\f0c9";font-size:1.1em;color:#000;
	}
/* Change the border color on hover, focus and when open */
.sod_select:hover,
.sod_select.open,
.sod_select.focus {border-color:#ccc;}
 .sod_select.open {color:#919191;}

/* When the entire SoD is disabled, go crazy! */
.sod_select.disabled {border-color:#828282;color:#b2b2b2;cursor:not-allowed;}
/* The "label", or whatever we should call it. Keep the first three lines for truncating. */
.sod_select .sod_label {overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:15px;}

/* Options list wrapper */
.sod_select .sod_list {
	display:none;position:absolute;top:100%;left:-2px;
	width:200px;height:auto;margin:0;
	border:2px solid #ccc;border-top:1px dashed #ccc;
	color:#666;
	background:#fff;z-index:1;
	}

/* Shows the option list (don't edit) */
.sod_select.open .sod_list {display:block;}

/* Don't display the options when  */
.sod_select.disabled.open .sod_list {display:none;}

/* When the option list is displayed above the SoD */
.sod_select.above .sod_list {top:auto;bottom:100%;border-top:2px solid #eb6877;border-bottom:none; }

/* Options list container */
.sod_select .sod_list ul {margin:0;padding:0;overflow-y:auto; }

/* All the options. Keep the first three lines for truncating... */
.sod_select .sod_list li {position:relative;list-style-type:none;padding:10px 10px;font-size:.9em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

/* Disabled option */
.sod_select .sod_list .disabled{color:#ccc;background:inherit;}

/* Hover state for options, also used when a user uses his/hers up/down keys */
.sod_select .sod_list .active {color:#444;background:#f7f7f7;}

/*Make room for the check mark */
.sod_select .sod_list .selected {font-size:1em;font-weight:600;padding-right:30px;}

/* Displays a check mark for the selected option */
.sod_select .sod_list .selected:before {
	display:inline-block;position:absolute;right:10px;top:50%;
	-webkit-transform:translateY(-50%);
	-ms-transform:translateY(-50%);
	transform:translateY(-50%);
	font-family:FontAweSome;content:"\f00c";color:#99ddde;
	}

/* Hide native select */
.sod_select select {display:none !important;}

/* The native select in touch mode. Keep this first line. Sorry, keep everything. */
.sod_select.touch select {
	display:block !important;
	position:absolute;left:0;top:0;
	-webkit-appearance:menulist-button;
	width:100%;height:100%;
	opacity:0;z-index:1;
	}