.casper-menu .button-containers {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.button-containers .menu-button-container,
.menu-button-container .menu-button {
   float: left;
   height: 40px;
   position: relative;
   width: 200px;
}

.menu-button-container .menu-button {
   cursor: default;
   pointer-events: none;
}
.menu-button-container .menu-button.button-activated {
   cursor: pointer;
   pointer-events: all;
}

.menu-button-container .menu-button .icon {
   height: 100%;
   left: 0;
   position: absolute;
   width: 100%;
   z-index: 1;
}

.menu-button-container .menu-button .label-container {
   float: left;
   height: 100%;
   padding-left: 40px;
   position: relative;
   width: 100%;
   z-index: 0;
}

.menu-button .label-container .label {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.menu-button-container .groups-container {
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
}

.menu-button-container .groups-container .group-container {
   left: 0;
   position: absolute;
   top: 0;
}

.group-container.group-deactivated: { pointer-events: none; }
.group-container .menu-button {
   left: 0px;
   opacity: 0;

   transition-property: opacity;
   transition-duration: .2s;

   -webkit-transition-property: opacity;
   -webkit-transition-duration: .2s;
}

.group-container .group-index-0.menu-button.button-activate { 
   transition-delay: 0;
   -webkit-transition-delay: 0;
}
.group-container .group-index-1.menu-button.button-activate {
   transition-delay: .2s;
   -webkit-transition-delay: .2s;
}
.group-container .group-index-2.menu-button.button-activate { 
   transition-delay: .4s;
   -webkit-transition-delay: .4s;
}
.group-container .group-index-3.menu-button.button-activate { 
   transition-delay: .6s;
   -webkit-transition-delay: .6s;
}
.group-container .group-index-4.menu-button.button-activate { 
   transition-delay: .8s; 
   -webkit-transition-delay: .8s; 
}
.group-container .group-index-5.menu-button.button-activate { 
   transition-delay: 1s; 
   -webkit-transition-delay: 1s; 
}

.group-container .group-index-0.menu-button.button-deactivate { 
   transition-delay: .5s; 
   -webkit-transition-delay: .5s; 
}
.group-container .group-index-1.menu-button.button-deactivate { 
   transition-delay: .4s; 
   -webkit-transition-delay: .4s; 
}
.group-container .group-index-2.menu-button.button-deactivate { 
   transition-delay: .3s; 
   -webkit-transition-delay: .3s; 
}
.group-container .group-index-3.menu-button.button-deactivate { 
   transition-delay: .2s; 
   -webkit-transition-delay: .2s; 
}
.group-container .group-index-4.menu-button.button-deactivate { 
   transition-delay: .1s; 
   -webkit-transition-delay: .1s; 
}
.group-container .group-index-5.menu-button.button-deactivate { 
   transition-delay: 0; 
   -webkit-transition-delay: 0; 
}

.group-container .menu-button.button-deactivate { opacity: 0; }
.group-container .menu-button.button-deactivated { opacity: 0; }
.group-container .menu-button.button-activate { opacity: 1; }
.group-container .menu-button.button-activated { opacity: 1; }

.group-container .menu-button.button-add {
   opacity: 1;
}
.group-container .menu-button.button-added { left: 0px; }
.group-container .menu-button.button-remove {
   opacity: 0;
}
.group-container .menu-button.button-removed { left: 10px; }


/* =================== *
 * ## Rotation Menu ##
 * =================== */

.casper-rotation-menu .buttons-container,
.casper-rotation-menu .buttons-container .menu-button-container {
   height: 0;
   position: absolute;
   width: 0;
}

.casper-rotation-menu .menu-button {
   height: 40px;
   width: 40px;

   transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
}
.casper-rotation-menu .main-button.selected {
   height: 30px;
   width: 30px;
}

.casper-rotation-menu .menu-button .icon-container {
   height: 100%;
   width: 100%;
}

.casper-rotation-menu .menu-button .icon-container .icon {
   height: 100%;
   padding: 10px;
   width: 100%;
}

.casper-rotation-menu [data-level="0"] > .menu-button .label-container,
.casper-rotation-menu .menu-button[data-level="0"] .label-container {
   display: none;
}

.casper-rotation-menu .menu-button .label-container {
   left: 0;
   padding-left: 0;
   position: absolute;
   top: -44px;
   width: auto;

   transform: translate(-50%,-100%);
   -webkit-transform: translate(-50%,-100%);
}
.casper-rotation-menu .menu-button .label-container .label {
   font-size: 12px;
   height: 20px;
   line-height: 20px;
   padding-left: 0;
   text-align: center;
   white-space: nowrap;
   width: auto;
}

.casper-rotation-menu .groups-container,
.casper-rotation-menu .groups-container .group-container {
   float: left;
   height: 0;
   left: 0;
   position: absolute;
   top: 0;
   width: 0;
}

.casper-rotation-menu .groups-container .group-container { overflow: visible; }

.casper-rotation-menu .group-container .rotation-wrapper {
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
}

.casper-rotation-menu .rotation-wrapper .pivot {
   height: 0;
   top: 0;
   position: absolute;
   width: 0;

   transform: rotate(0deg);
   transition: transform .25s linear;

   -webkit-transform: rotate(0deg);
   -webkit-transition: -webkit-transform .25s linear;
}
.casper-rotation-menu .rotation-wrapper .pivot.p1 {left: 0; }
.casper-rotation-menu .rotation-wrapper .pivot.p2 { left: 100%; }

.casper-rotation-menu .rotation-wrapper .strut {
   float: left;
   height: 1px;
   position: relative;

   /* testing */
   width: 80px;
}