/* ===========================================================
 *  Name:          selectordie_dev.css
 *  Updated:       2014-10-10
 *  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.
 *  Oddny | Cogs 'n Kegs
 * =========================================================== */
	.sod_select,
	.sod_select *    {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	/* The SoD - Please keep this first three lines intact, otherwise all hell will break looooooose */
	.sod_select {
		display: block;
		position: relative;
		line-height: 1;
		width: 100%;
		padding: 12px 28px;
		border: 2px solid #fff;
		-webkit-border-radius: 5px; 
		-moz-border-radius: 5px; 
		border-radius: 5px; 
		color: #fff;
		font-size: 13px;
		font-family: Avenir-Heavy;
		outline: 0;
		outline-offset: -2px; /* Opera */
		cursor: pointer;
	}

    /* Up/Down arrows */
    /* 
    .sod_select:before,
    .sod_select:after{
        content: "\25B2";
        position: absolute;
        right: 10px;
        top: 12px;
        font-size: 7px;
    } 
    */

    /* Down arrow */
	/*    
	.sod_select:after {
        content: "\25BC";
        top: auto;
        bottom: 12px;
    }
    */

    .sod_select:before{
		content: "";
		position: absolute;
		right: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		display: inline-block;
		color: #fff;
		height: 8px;
		width: 14px;
		background: url(arrow_down.png);
	}

	/* Change the border color on hover, focus and when open */
	.sod_select:hover,
	.sod_select.open,
	.sod_select.focus { cursor: pointer; }
	.sod_select.open { 		
		-webkit-border-bottom-left-radius: 0; 
		-moz-border-bottom-left-radius: 0; 
		border-bottom-left-radius: 0; 
		-webkit-border-bottom-right-radius: 0; 
		-moz-border-bottom-right-radius: 0; 
		border-bottom-right-radius: 0; 
	}

	.sod_select.focus { }


	/* 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 {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #fff;
		font-family: Avenir-Heavy;
		font-size: 13px;
		padding-right: 15px;
	 }

	.sod_select .sod_prefix { /* Use this if you're using a prefix and want to style it */ }
	.sod_select .sod_placeholder { /* Use this if you're using a placeholder and want to style it */ }



	/* Options list wrapper */
	.sod_select .sod_list_wrapper     {
		position: absolute;
		top: 100%;
		left: -2px;
		display: none;
		height: auto;
		right: -2px;
		margin: 0;
		background: #e1582a;
		border: 2px solid #fff;
		border-top: none;
		color: #fff;
		font-family: Avenir-Heavy;
		font-size: 13px;
		z-index: 1;
	}

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

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

	/* When the option list is displayed above the SoD */
	.sod_select.above.open {
		-webkit-border-top-left-radius: 0; 
		-moz-border-top-left-radius: 0; 
		border-top-left-radius: 0; 

		-webkit-border-top-right-radius: 0; 
		-moz-border-top-right-radius: 0; 
		border-top-right-radius: 0; 
	}
	.sod_select.above .sod_list_wrapper    {
		top: auto;
		bottom: 100%;
		border-top: 2px solid #fff;
		border-bottom: none;
	}

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

	/* All the options. Keep the first three lines for truncating... */
	.sod_select .sod_option    {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		position: relative;
		padding: 12px 28px;
		list-style-type: none;
	}

	/* Optgroups */
	.sod_select .sod_option.optgroup,
	.sod_select .sod_option.optgroup.disabled {
		background: inherit;
		color: #939393;
		font-size: 10px;
		font-style: italic;
	}

	/* Children of an optgroup */
	.sod_select .sod_option.groupchild { padding-left: 20px; }

	/* Used together with placeholderOption / data-placeholder-option */
	.sod_select .sod_option.is-placeholder {
		display: none;
	}

	/* Disabled option */
	.sod_select .sod_option.disabled     {
		background: inherit;
		color: #cccccc;
	}

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

	/*Make room for the check mark */
	.sod_select .sod_option.selected   {
		padding-right: 25px;
	}

	/* Displays a check mark for the selected option */
	.sod_select .sod_option.selected:before {
		content: "";
		position: absolute;
		right: 10px;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		display: inline-block;
		color: #fff;
		height: 9px;
		width: 10px;
		background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTAgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTAgOSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8cGF0aCBmaWxsPSIjRDlEOUQ4IiBkPSJNNCw2LjdDMy42LDYuMywzLjUsNi4xLDMuMSw1LjdDMi42LDUuMiwyLDQuNiwxLjUsNC4xYy0wLjgtMC44LTIsMC40LTEuMiwxLjJjMC45LDAuOSwxLjksMS45LDIuOCwyLjgNCgkJYzAuNywwLjcsMS4zLDEsMiwwQzYuNyw2LDguMywzLjcsOS44LDEuNUMxMC41LDAuNSw5LTAuMyw4LjMsMC42bDAsMEM2LjcsMi45LDUuNyw0LjQsNCw2LjciLz4NCjwvZz4NCjwvc3ZnPg0K);
	 }

	/* Add a .no_highlight class to you SoD to hide the check mark and don't bold the option */
	.sod_select.no_highlight .sod_option.selected { font-weight: 300; }
	.sod_select.no_highlight .sod_option.selected:before { display: none; }

	.sod_select .sod_option.link { /* If data-link is set on a specific option */ }
	.sod_select .sod_option.linkexternal { /* If data-link-external is set on a specific option */ }



	/* 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   {
		-webkit-appearance: menulist-button;
		position: absolute;
		top: 0;
		left: 0;
		display: block !important;
		height: 100%;
		width: 100%;
		opacity: 0;
		z-index: 1;
	}