body {
        margin:0;
        padding:0;
}

#adArea {
	background: #ffffff;
    overflow: hidden;
    text-overflow: clip;
    cursor:pointer;
	border: 1px solid #eee;
}

.pic1{
width:300px;
height:250px;
}

.pic2{
	width:300px;
	height:250px;
}

.pic3{
	width:300px;
	height:250px;
}





.wrap {
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	position: absolute;
	  -webkit-perspective: 600px;
	      -ms-perspective: 600px;
	perspective: 600px;
	perspective-origin: 50% 50%;
	  -webkit-perspective-origin: 50% 50%;
	      -ms-perspective-origin: 50% 50%;
}

.cube {
	position: relative;
	width: 300px;
	height: 250px;
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform-origin: 50% 50%;
	  -webkit-perspective-origin: 50% 50%;
	      -ms-perspective-origin: 50% 50%;
	transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);

  -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
      -ms-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
}
.f00 {
	transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
      -ms-transform: rotateY(-90deg);
	/*transform-origin: center left;*/
}

.f1 {
	transform: rotateY(-90deg) translateX(-150px);
  	-webkit-transform: rotateY(-90deg) translateX(-150px);
      	-ms-transform: rotateY(-90deg) translateX(-150px);

	transform-origin: center left;
	-webkit-transform-origin: center left;
	    -ms-transform-origin: center left;
}
.f2 {
	transform: translateZ(150px);
  -webkit-transform: translateZ(150px);
      -ms-transform: translateZ(150px);
}
.f3 {
	transform: rotateY(90deg) translateX(150px);
  -webkit-transform: rotateY(90deg) translateX(150px);
      -ms-transform: rotateY(90deg) translateX(150px);

	transform-origin: center right;
	  -webkit-transform-origin: center right;
	      -ms-transform-origin: center right;
}
.f4 {
	transform: translateZ(-150px) rotateY(180deg);
  -webkit-transform: translateZ(-150px) rotateY(180deg);
      -ms-transform: translateZ(-150px) rotateY(180deg);
}
.f5 {
	transform: rotateX(90deg) translateZ(-100px);
  -webkit-transform: rotateX(90deg) translateZ(-100px);
      -ms-transform: rotateX(90deg) translateZ(-100px);
}
.f6 {
	transform: rotateX(90deg) translateZ(150px);
  -webkit-transform: rotateX(90deg) translateZ(150px);
      -ms-transform: rotateX(90deg) translateZ(150px);
}

.f7 {
	transform: rotateX(90deg) translateZ(-60px);
  -webkit-transform: rotateX(90deg) translateZ(-60px);
      -ms-transform: rotateX(90deg) translateZ(-60px);
}


.ff1 {
	transform: rotateY(-90deg) translateX(-150px) translateZ(-1px);
  -webkit-transform: rotateY(-90deg) translateX(-150px) translateZ(-1px);
      -ms-transform: rotateY(-90deg) translateX(-150px) translateZ(-1px);

	transform-origin: center left;
	  -webkit-transform-origin: center left;
	      -ms-transform-origin: center left;
}
.ff2 {
	transform: translateZ(148px);
  -webkit-transform: translateZ(148px);
      -ms-transform: translateZ(148px);
}
.ff3 {
	transform: rotateY(90deg) translateX(150px) translateZ(-1px);
  -webkit-transform: rotateY(90deg) translateX(150px) translateZ(-1px);
      -ms-transform: rotateY(90deg) translateX(150px) translateZ(-1px);

	transform-origin: center right 1px;
	  -webkit-transform-origin: center right 1px;
	      -ms-transform-origin: center right 1px;
}
.ff4 {
	transform: translateZ(-148px) rotateY(180deg);
  -webkit-transform: translateZ(-148px) rotateY(180deg);
      -ms-transform: translateZ(-148px) rotateY(180deg);
}

.face {
	-webkit-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;

	  -webkit-perspective: 800px;
	      -ms-perspective: 800px;
	perspective: 800px;

	perspective-origin: 50% 100px;
	  -webkit-perspective-origin: 50% 100px;
	      -ms-perspective-origin: 50% 100px;
}

#dragArea {
	background-color: red;
	opacity: 0.0;
}


.dragEl {
	position: absolute;
	width: 86px;
	height: 86px;
}

.rct {
	width:300px;
	height:250px;
    position: absolute;
}

.scale0 {
	-ms-transform: scale(0); /* IE 9 */
    -webkit-transform: scale(0); /* Safari */
    transform: scale(0);
}

.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }

.zIndex2400{ z-index: 2400 !important; }
.zIndex2600 { z-index: 2600 !important; }
.zIndex3000 { z-index: 3000 !important; }
.zIndex4000 { z-index: 4000 !important; }
.zIndex5000 { z-index: 5000 !important; }

.posAbs{
	position: absolute;
}
.noVis{
	visibility: hidden;
}
.noEvents{
  pointer-events: none;
}
.noDisplay{
  display: none;
}