/* Global Declaration */

#leftcolumn .selector, 
#leftcolumn .selector span, 
#leftcolumn .checker span,
#leftcolumn .radio span, 
#leftcolumn .uploader, 
#leftcolumn .uploader span.action {
  background-image: url(/images/sprite.png);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

.selector, 
.radio, 
.checker, 
.uploader,
.selector *, 
.radio *, 
.checker *, 
.uploader *{
  margin: 0;
  padding: 0;
}

/* SPRITES */

/* Select */

#leftcolumn .selector {
  background-position: -483px -130px;
  line-height: 26px;
  height: 26px;
}

#leftcolumn .selector span {
  background-position: right 0px;
  height: 26px;
  line-height: 26px;
}

#leftcolumn .selector select {
  /* change these to adjust positioning of select element */
  top: 0px;
  left: 0px;
  *width: 160px;
  **margin-left: 17px;
}

#leftcolumn .selector:active, 
#leftcolumn .selector.active {
  background-position: -483px -156px;
}

#leftcolumn .selector:active span, 
#leftcolumn .selector.active span {
  background-position: right -26px;
}

/* Sex selection */

#uniform-sex-0.checker, #uniform-sex-1.checker, #uniform-sex-2.checker {
  width: 55px;
  height: 55px;
  float: left;
  margin-left: 7px;
  margin-top: 10px;
}

#uniform-sex-1.checker {
	margin-top: -7px;
	margin-left: 5px;
	*margin-top: 10px;
}

#uniform-sex-2.checker {
	margin-top: -24px;
	margin-left: 5px;
	*margin-top: -8px;
}

#uniform-sex-0.checker input, #uniform-sex-1.checker input, #uniform-sex-2.checker input {
  width: 55px;
  height: 55px;
  cursor: pointer;
}

#uniform-sex-0.checker span {
  background: url(/images/catalogus/layout/icons/male_sprite.png);
  height: 55px;
  width: 55px;
}

#uniform-sex-0.checker span.checked, #uniform-sex-1.checker span.checked, #uniform-sex-2.checker span.checked {
  background-position: 0px -55px;
}

/* Female */

#uniform-sex-1.checker span {
  background: url(/images/catalogus/layout/icons/female_sprite.png);
  height: 55px;
  width: 55px;
}

#uniform-sex-2.checker span {
  background: url(/images/catalogus/layout/icons/kids_sprite.png);
  height: 55px;
  width: 55px;
}

/****************/

/* Special selection */

#uniform-specialoffers.checker, #uniform-exclusiveoffers.checker{
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 15px;
  *margin-left: 0px;
}

#uniform-specialoffers.checker input, #uniform-exclusiveoffers.checker input{
  width: 30px;
  height: 30px;
  cursor: pointer;
}

#uniform-specialoffers.checker span, #uniform-exclusiveoffers.checker span {
  background: url(/images/catalogus/layout/icons/checkbox.png);
  height: 30px;
  width: 30px;
  float: left;
  margin-top: 2px;
  *margin-left: -35px;
  *margin-top: -26px;
}

#uniform-specialoffers span.checked, #uniform-exclusiveoffers span.checked {
  background-position: 0px -30px;
}

#specialoffers-label, #exclusiveoffers-label {
	float: right;
	width: 135px;
	margin-top: 10px;
}
/****************/

/* Price selection */

#uniform-price-1.checker, #uniform-price-2.checker, #uniform-price-3.checker, #uniform-price-4.checker{
  width: 30px;
  height: 20px;
}

#uniform-price-1.checker input, #uniform-price-2.checker input, #uniform-price-3.checker input, #uniform-price-4.checker input{
  width: 30px;
  height: 20px;
  cursor: pointer;
}

#uniform-price-1.checker span, #uniform-price-2.checker span, #uniform-price-3.checker span, #uniform-price-4.checker span {
  background: url(/images/catalogus/layout/icons/checkbox_price.png);
  width: 30px;
  height: 20px;
  margin-top: -4px;
  margin-right: 5px;
}

#uniform-price-1 span.checked, #uniform-price-2 span.checked, #uniform-price-3 span.checked, #uniform-price-4 span.checked {
  background-position: 0px -30px;
}

/* PRESENTATION */

/* Button */

#submitwrapper #leftcolumn .button {
  height: 30px;
}

#submitwrapper #leftcolumn .button span {
  height: 22px;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: red;
}

/* Select */
div.selector {
  width: 180px;
  font-size: 12px;
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

div.selector select {
  min-width: 160px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  border: solid 1px #fff;
  margin-left: 10px;
}

div.selector span {
  padding: 0px 25px 0px 2px;
  cursor: pointer;
}

div.selector span {
  color: #666;
  width: 138px;
  text-shadow: 0 1px 0 #fff;
}

/* Radio */
div.radio {
  margin-right: 3px;
}

/*

CORE FUNCTIONALITY 

Not advised to edit stuff below this line
-----------------------------------------------------
*/

.selector, 
.checker,  
.radio, 
.uploader {
  display: -moz-inline-box;
  display: inline-block;
  vertical-align: middle;
  zoom: 1;
  *display: inline;
}

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

/* Button */

/* Select */

div.selector {
  position: relative;
  padding-left: 10px;
  overflow: hidden;
}

div.selector span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.selector select {
  position: absolute;
  opacity: 0;
  filter: alpha(opacity:0);
  height: 25px;
  border: none;
}

/* Checker */

div.checker {
  position: relative;
}

div.checker span {
  display: -moz-inline-box;
  display: inline-block;
  text-align: center;
}

div.checker input {
  opacity: 0;
  filter: alpha(opacity:0);
  display: inline-block;
  background: none;
}