/*
For use with the Uniform plugin:
http://pixelmatrixdesign.com/uniform/
*/


/* Select */

div.selector {
	position:relative;
	width:214px;
  line-height:35px;
	height:35px;
  /*margin-bottom:20px;*/
  margin-left:-3px;
	padding-left:10px;
	overflow:hidden;
}

div.selector span {
	float:left;
	width:180px;
  height:35px;
	line-height:35px;
  padding:0px 32px 0px 2px;
  cursor:pointer;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

div.selector select {
	position:absolute;
	top:3px;
	left:3px;
	width: 100%;
	height:29px;
	opacity:0;
	border:none;
	background:none;
	-webkit-margin-start:10px;
}

/*
div.selector select option:first-child {
	display:none;
}
*/

/* Webkit Only:
@media screen and (-webkit-min-device-pixel-ratio:0) {
  div.selector select {
	  
	}
}
*/
div.selector select option {
    line-height: 20px !important;
    border-bottom: #000 1px solid;
}

div.selector select option:disabled {
    background-color: #f9f9f9;
    color: #bbbbbb;
    font-weight: normal;
    text-decoration: line-through;
}


div.selector.disabled span {
	color:#bbb;
}

/* Variable Widths Classes ====== */
/* 
subtract 10 from desired width for div.selector
subtract 34 from div.selector to get span width
*/

div.selector.width100 {
	width:90px;
}
div.selector.width100 span {
	width:56px;
}
div.selector.width150 {
	width:140px;
}
div.selector.width150 span {
	width:106px;
}
div.selector.width160 {
	width:150px;
}
div.selector.width160 span {
	width:116px;
}

div.selector.width195 {
	width:185px;
}
div.selector.width195 span {
	width:151px;
}
div.selector.width220 {
	width:210px;
}
div.selector.width220 span {
	width:176px;
}
div.selector.width250 {
	width:240px;
}
div.selector.width250 span {
	width:206px;
}
div.selector.width266 {
	width:256px;
}
div.selector.width266 span {
	width:222px;
}
div.selector.width274 {
	width:264px;
}
div.selector.width274 span {
	width:230px;
}

div.selector.width300 {
	width:290px;
}
div.selector.width300 span {
	width:256px;
}

div.selector.width420 {
	width:410px;
}
div.selector.width420 span {
	width:376px;
}



/* Checkbox & Radio */

div.checker,
div.radio {
	position:relative;
	float:left;
  width:19px;
  height:19px;
  margin-right:10px;
  margin-top:-1px;
}

div.checker span,
div.radio span {
	float:left;
  height:19px;
  width:19px;
	text-align:center;
}

div.checker input,
div.radio input {
  display:inline-block;
  width:19px;
  height:19px;
  opacity:0;
  background:none;
}




/* ALL THE SPRITE POSITIONING DO NOT EDIT =============== */

.selector select:focus, 
.radio input:focus, 
.checker input:focus {
  outline: 0;
}

div.selector, 
div.selector span, 
div.checker span, 
div.radio span {
  background-image: url(../images/uniform-sprite.png);
  background-repeat: no-repeat;
}

div.selector {
  background-position: -483px -175px;
}
div.selector span {
  background-position: right 0px;
}
div.selector:active, 
div.selector.active {
	background-position: -483px -210px;
}

div.selector:active span, 
div.selector.active span {
	background-position: right -35px;
}

div.selector.focus, 
div.selector.hover, 
div.selector:hover {
	background-position: -483px -245px;
}

div.selector.focus span, 
div.selector.hover span, 
div.selector:hover span {
	background-position: right -70px;
}

div.selector.focus:active,
div.selector.focus.active,
div.selector:hover:active,
div.selector.active:hover {
	background-position: -483px -280px;
}

div.selector.focus:active span,
div.selector:hover:active span,
div.selector.active:hover span,
div.selector.focus.active span {
	background-position: right -105px;
}

div.selector.disabled,
div.selector.disabled:active,
div.selector.disabled.active {
	background-position: -483px -315px;
}

div.selector.disabled span,
div.selector.disabled:active span,
div.selector.disabled.active span {
  background-position: right -140px;
}



div.checker span {
  background-position: 0px -350px;	
}
div.checker:active span, 
div.checker.active span {
	background-position: -19px -350px;
}

div.checker.focus span,
div.checker:hover span {
	background-position: -38px -350px;
}

div.checker.focus:active span,
div.checker:active:hover span,
div.checker.active:hover span,
div.checker.focus.active span {
	background-position: -57px -350px;
}

div.checker span.checked {
	background-position: -76px -350px;
}

div.checker:active span.checked, 
div.checker.active span.checked {
	background-position: -95px -350px;
}

div.checker.focus span.checked,
div.checker:hover span.checked {
	background-position: -114px -350px;
}

div.checker.focus:active span.checked,
div.checker:hover:active span.checked,
div.checker.active:hover span.checked,
div.checker.active.focus span.checked {
	background-position: -133px -350px;
}

div.checker.disabled span,
div.checker.disabled:active span,
div.checker.disabled.active span {
	background-position: -152px -350px;
}

div.checker.disabled span.checked,
div.checker.disabled:active span.checked,
div.checker.disabled.active span.checked {
	background-position: -171px -350px;
}



div.radio span {
  background-position: 0px -369px;	
}
div.radio:active span, 
div.radio.active span {
	background-position: -19px -369px;
}

div.radio.focus span, 
div.radio:hover span {
	background-position: -38px -369px;
}

div.radio.focus:active span,
div.radio:active:hover span,
div.radio.active:hover span,
div.radio.active.focus span {
	background-position: -57px -369px;
}

div.radio span.checked {
	background-position: -76px -369px;
}

div.radio:active span.checked,
div.radio.active span.checked {
	background-position: -95px -369px;
}

div.radio.focus span.checked, div.radio:hover span.checked {
	background-position: -114px -369px;
}

div.radio.focus:active span.checked, 
div.radio:hover:active span.checked,
div.radio.focus.active span.checked,
div.radio.active:hover span.checked {
	background-position: -133px -369px;
}

div.radio.disabled span,
div.radio.disabled:active span,
div.radio.disabled.active span {
	background-position: -152px -369px;
}

div.radio.disabled span.checked,
div.radio.disabled:active span.checked,
div.radio.disabled.active span.checked {
	background-position: -171px -369px;
}