.demoOptions {
    position: absolute;

    width: 339px;

    bottom: 5%;
    left: 0;
    right: 0;

    margin: 0 auto;
    padding: 0;

    font-size: 0;
    text-align: center;

    list-style: none;
    z-index: 1;
}

.demoOptions li {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.3);

    background: url('../images/icon-sprite.png') no-repeat;

    opacity: 0.2;

    cursor: pointer;

    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

.demoOptions li.spacer {
    background: none;
    width: 50px;
    padding: 0;
    margin: 0;
}


.demoOptions li.active {
    opacity: 1;
}

.demoOptions li + li {
    margin-left: 29px;
}





.demoOptions li.basic {
    background-position: 0 -50px;
}

.demoOptions li.wire {
    background-position: -50px -50px;
}

.demoOptions li.coreCenterCross {
    background-position: -100px -50px;
}

.demoOptions li.corner {
    background-position: -150px -50px;
}

.demoOptions li.expanded {
    background-position: -200px -50px;
}

.demoOptions li.pretty {
    background-position: -250px -50px;
}


.cubelet.wireframe-hiding .sticker,
.cubelet.wireframe-showing .sticker,
.face.wireframe-hiding .sticker,
.face.wireframe-showing .sticker
{
    background: transparent;
}

.cubelet.wireframe-hiding .face,
.face.wireframe-hiding {
    opacity: 0;
}

.cubelet.wireframe-showing .face,
.face.wireframe-showing {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    opacity: 1;
}



/**
 * Transitions
 */


.purty .face {
    transition: background-color 1s;
}

.face {
    transition: background-color 1s, border 1s, opacity 1s;
}

/* NOTE: using opacity on stickers causes artifacts */
.face .sticker {
    transition: background-color 1s, opacity 0.5s;
}


.face .sticker.hidden {
    /*opacity: 0;*/
    background: transparent;
}

/* 
 Don't allow manipulation of cube
 This results in all interactions falling back to rotating the cube
 This is used in conjunction with the line `cube.finalShuffle = true;` in demo.js
*/
.face,
.cubelet,
.sticker,
.wireframe {
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#container > .cube > div {
    z-index: -1;
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}


/* Makes for longer fades when setting opacity on cubelets */
.cubelet {
    transition: opacity 1s;
}

/* Used to cancel out transitions */

.noTransition .cubelet,
.noTransition .face,
.noTransition .sticker {
    transition: none !important;
}