
/* jquery-wheel */
.jquery-wheel {
  border: 1px solid #CCC;
  float: left;
  margin: 10px -1px;
}

/* 2D main container START */
.jquery-wheel.jquery-wheel-2d {
  background: #FFF;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; 
  user-select: none;
}
/* 2D main container END */

/* 2D inner containers START */
.jquery-wheel-2d .jquery-wheel-in2 {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}
.jquery-wheel-2d .jquery-wheel-in {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
/* 2D inner containers END */

/* 2D wheel items START */
.jquery-wheel-2d .jquery-wheel-in > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  opacity: 0.6;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
}
.jquery-wheel-2d .jquery-wheel-in > div.sel {
  font-weight: bold;
  opacity: 1;
}
.jquery-wheel-2d .jquery-wheel-in .item_img {
  height: 80%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 15%;
  width: auto;
}
/* 2D wheel items END */


/* 3D main container START */
.jquery-wheel.jquery-wheel-3d {
  background: #FFF;
  cursor: pointer;
  overflow: hidden;
  -webkit-perspective: 1100px;
  -moz-perspective: 1100px;
  -o-perspective: 1100px;
  perspective: 1100px;
  position: relative;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 3D main container END */

/* 3D inner containers START */
.jquery-wheel-3d .jquery-wheel-in2 {
  bottom: auto;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 1;
}
.jquery-wheel-3d .jquery-wheel-in {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-30px) rotateX(0deg);
  transform: translateZ(-30px) rotateX(0deg);
  width: 100%;
}
/* 3D inner containers END */

/* 3D wheel items START */
.jquery-wheel-3d .jquery-wheel-in > div {
  background-size: auto 90%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  left: 0;
  opacity: 0.6;
  overflow: hidden;
  position: absolute;
  text-align: center;
  text-overflow: ellipsis;
  top: 0;
  width: 100%;
}
.jquery-wheel-3d .jquery-wheel-in > div.sel {
  font-weight: bold;
  opacity: 1;
}
.jquery-wheel-3d .jquery-wheel-in .item_img {
  height: 84%;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 8%;
  width: auto;
}
/* 3D wheel items END */


/* ajax loading START */
.jquery-wheel .load { display: none; }
.jquery-wheel.loading .load {
  background: #EEE url('/admin/images/ajax_loading.gif') center center no-repeat;
  display: block;
  text-align: center;
  height: 100%;
  position: relative;
  z-index: 100;
}
/* ajax loading END */

/* ajax loading error START */
.jquery-wheel.ajax_error { cursor: default; }
.jquery-wheel.ajax_error .error {
  background: #FFF8F8;
  text-align: center;
  height: 100%;
  position: relative;
  z-index: 100;
}
.jquery-wheel.ajax_error .error .icon {
  display: block;
  height: 50px;
  background: transparent url('/admin/images/error_icon.png') center center no-repeat;
}
/* ajax loading error END */


/* 'new' style START */
.jquery-wheel.new .jquery-wheel-st0 {
  border-top: 1px solid #BBB;
  border-bottom: 1px solid #BBB;
  content: ' ';
  left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 30;
}
/* 'new' style END */

/* 'old' style START */
.jquery-wheel.old .jquery-wheel-st0 {
  background: transparent url('/admin/images/old_st00.png') left center repeat;
  background-size: auto 100%;
  border: none;
  content: ' ';
  left: 0;
  opacity: 0.7;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 30;
}
.jquery-wheel.old .jquery-wheel-st1 {
  background: transparent url('/admin/images/old_st1.png') left center repeat;
  background-size: 100% 100%;
  left: 0;
  height: 51%;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 28;
}
.jquery-wheel.old .jquery-wheel-st2 {
  background: transparent url('/admin/images/old_st2.png') left center repeat;
  background-size: auto 100%;
  bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  z-index: 28;
}
.jquery-wheel.old .jquery-wheel-st3 {
  background: transparent url('/admin/images/old_st3.png') left center repeat;
  background-size: auto 100%;
  bottom: 0;
  left: 6px;
  height: 51%;
  position: absolute;
  right: 6px;
  z-index: 28;
}
.jquery-wheel.old .jquery-wheel-st4 {
  background: transparent url('/admin/images/old_st4.png') left center no-repeat;
  background-size: 100% 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 6px;
  z-index: 28;
}
.jquery-wheel.old .jquery-wheel-in > div {
  opacity: 1;
}
/* 'old' style END */