/* Global Declaration */
.selector,
.selector span,
.checker span,
.radio span,
.uploader,
.uploader span.action { background-image: url(sprite-aristo.png); background-repeat: no-repeat; }
.selector,
.radio,
.checker,
.uploader,
.selector *,
.radio *,
.checker *,
.uploader * { margin: 0; padding: 0; }

/* SPRITES */

/* Select */
.selector { background-position: -483px -160px; line-height: 32px; height: 32px; }
.selector span { background-position: right 0; height: 32px; line-height: 32px; }
.selector select { top: 0; left: 0; }
.selector: active,
.selector.active { background-position: -483px -192px; }
.selector: active span,
.selector.active span { background-position: right -32px; }
.selector.focus,
.selector.hover,
.selector: hover { background-position: -483px -224px; }
.selector.focus span,
.selector.hover span,
.selector: hover span { background-position: right -64px; }
.selector.focus: active,
.selector.focus.active,
.selector: hover: active,
.selector.active: hover { background-position: -483px -256px; }
.selector.focus: active span,
.selector: hover: active span,
.selector.active: hover span,
.selector.focus.active span { background-position: right -96px; }
.selector.disabled,
.selector.disabled: active,
.selector.disabled.active { background-position: -483px -288px; }
.selector.disabled span,
.selector.disabled: active span,
.selector.disabled.active span { background-position: right -128px; }

/* Checkbox */
.checker { width: 23px; height: 23px; }
.checker input { width: 23px; height: 23px; }
.checker span { background-position: 0 -320px; height: 23px; width: 23px; }
.checker: active span,
.checker.active span { background-position: -23px -320px; }
.checker.focus span,
.checker: hover span { background-position: -46px -320px; }
.checker.focus: active span,
.checker: active: hover span,
.checker.active: hover span,
.checker.focus.active span { background-position: -69px -320px; }
.checker span.checked { background-position: -92px -320px; }
.checker: active span.checked,
.checker.active span.checked { background-position: -115px -320px; }
.checker.focus span.checked,
.checker: hover span.checked { background-position: -138px -320px; }
.checker.focus: active span.checked,
.checker: hover: active span.checked,
.checker.active: hover span.checked,
.checker.active.focus span.checked { background-position: -161px -320px; }
.checker.disabled span,
.checker.disabled: active span,
.checker.disabled.active span { background-position: -184px -320px; }
.checker.disabled span.checked,
.checker.disabled: active span.checked,
.checker.disabled.active span.checked { background-position: -207px -320px; }

/* radio */
.radio { width: 23px; height: 23px; }
.radio input { width: 23px; height: 23px; }
.radio span { height: 23px; width: 23px; background-position: 0 -343px; }
.radio: active span,
.radio.active span { background-position: -23px -343px; }
.radio.focus span,
.radio: hover span { background-position: -46px -343px; }
.radio.focus: active span,
.radio: active: hover span,
.radio.active: hover span,
.radio.active.focus span { background-position: -69px -343px; }
.radio span.checked { background-position: -92px -343px; }
.radio: active span.checked,
.radio.active span.checked { background-position: -115px -343px; }
.radio.focus span.checked,
.radio: hover span.checked { background-position: -138px -343px; }
.radio.focus: active span.checked,
.radio: hover: active span.checked,
.radio.focus.active span.checked,
.radio.active: hover span.checked { background-position: -161px -343px; }
.radio.disabled span,
.radio.disabled: active span,
.radio.disabled.active span { background-position: -184px -343px; }
.radio.disabled span.checked,
.radio.disabled: active span.checked,
.radio.disabled.active span.checked { background-position: -207px -343px; }

/* uploader */
.uploader { background-position: 0 -366px; height: 32px; }
.uploader span.action { background-position: right -494px; height: 24px; line-height: 24px; }
.uploader span.filename { height: 24px; margin: 4px 0 4px 4px; line-height: 24px; }
.uploader.focus,
.uploader.hover,
.uploader: hover { background-position: 0 -430px; }
.uploader.focus span.action,
.uploader.hover span.action,
.uploader: hover span.action { background-position: right -526px; }
.uploader.active span.action,
.uploader: active span.action { background-position: right -558px; }
.uploader.focus.active span.action,
.uploader: focus.active span.action,
.uploader.focus: active span.action,
.uploader: focus: active span.action { background-position: right -590px; }
.uploader.disabled { background-position: 0 -398px; }
.uploader.disabled span.action { background-position: right -462px; }

/* PRESENTATION */

/* Select */
.selector { margin-bottom: 20px; width: 190px; font-weight: bold; color: #464545; font-size: 14px; }
.selector select { width: 190px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1em; border: solid 1px #fff; }
.selector span { padding: 0 25px 0 2px; cursor: pointer; }
.selector span { color: #666; width: 158px; text-shadow: 0 1px 0 #fff; }
.selector.disabled span { color: #bbb; }

/* checker */
.checker { margin-right: 10px; }

/* radio */
.radio { margin-right: 10px; }

/* uploader */
.uploader { width: 190px; margin-bottom: 20px; cursor: pointer; }
.uploader span.action { width: 83px; text-align: center; text-shadow: rgba(255,255,255,0.5) 0 1px 0; background-color: #fff; font-weight: bold; color: #1c4257; }
.uploader span.filename { color: #777; width: 82px; border-right: solid 1px #567c91; font-size: 90%; font-size: 11px; }
.uploader input { width: 190px; }
.uploader.disabled span.action { color: #aaa; }
.uploader.disabled span.filename { border-color: #ddd; color: #aaa; }

/*
CORE FUNCTIONALITY 

Not advised to edit stuff below this line
*/

.selector select: focus,
.radio input: focus,
.checker input: focus,
.uploader input: focus { outline: 0; }

/* Select */
.selector { position: relative; padding-left: 10px; }
.selector span { display: block; float: left; }
.selector select { position: absolute; opacity: 0; }

/* checker */
.checker { position: relative; float: left; }
.checker span { display: block; float: left; text-align: center; }
.checker input { opacity: 0; display: inline-block; }

/* radio */
.radio { position: relative; float: left; }
.radio span { display: block; float: left; text-align: center; }
.radio input { opacity: 0; text-align: center; display: inline-block; }

/* uploader */
.uploader { position: relative; float: left; overflow: hidden; }
.uploader span.action { float: left; display: inline; padding: 4px 0; overflow: hidden; cursor: pointer; }
.uploader span.filename { padding: 0 10px; float: left; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uploader input { opacity: 0; position: absolute; top: 0; right: 0; bottom: 0; float: right; }