div#eightbitme-content {
	margin: 0px auto;
}

div#eightbitme-gallery-content {
	margin: 0px auto;
}

div#eightbitme-gallery-items {
    background-color: white;
    padding: 10px;
    border: 3px solid #999;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #000;
    margin-bottom: 30px;
}

#eightbitme-creator-main {
    position: relative;
    overflow-y: auto;
    margin-bottom: 30px;
    background-color: white;
    padding: 10px;
    border: 3px solid #999;
    color: #000;
}

/* CREATOR */

#creator-preload-image-1 {
    background: url('/img/8bitme/machine-no-back.png') no-repeat -9999px -9999px; 
}
#creator-preload-image-2 {
    background: url('/img/8bitme/machine-back.png') no-repeat -9999px -9999px; 
}
#creator-preload-image-3 {
    background: url('/img/8bitme/machine-wheel.png') no-repeat -9999px -9999px; 
}

#creator-final-step-container {
}

#creator-final-step-carousel {
    position: relative;
    width: 1140px;
}

#creator-step-result {
    position: absolute;
    top: 2px;
    left: 520px;
}

#creator-step-result-options {
    position: absolute;
    top: 15px;
    left: 800px;
}

#creator-buttons {
    text-align: center;
    margin-bottom: 20px;
} 

div.creator-button {
    padding: 5px 10px;
    border-radius: 5px;
    background-color: #DDD;
    color: #333;
    cursor: pointer;
    display: inline-block;
    margin-right: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.creator-button:hover {
    background-color: #AAA;
}

div.creator-button a {
    color: #333;
    font-weight: normal;
    text-decoration: none;
}
 
div.creator-icon-button {
    padding-left: 35px;
    background-repeat: no-repeat;
    background-position: 5px 50%;
}

div#creator-button-restart {
    background-image: url('/img/8bitme/creator/restart-icon.png');
}

div#creator-button-tweet {
    background-image: url('/img/8bitme/creator/twitter-icon.png');
}

div#creator-button-facebook {
    background-image: url('/img/8bitme/creator/facebook-icon.png');
}

div#creator-button-add {
    background-image: url('/img/8bitme/creator/gallery-icon.png');
}

#creator-step-0 {
    /*padding-top: 30px;*/
    text-align: center;
}

.creator-step-0-label   {
    display: inline-block;
    width: 200px;
    margin-bottom: 25px;
}

div.creator-step-title {
    font-size: 24px;
    margin-bottom: 10px;
}

div.creator-subgroup-carousel {
    padding: 6px;
    background-color: #E5E5E5;
    border-radius: 8px;
   /* white-space:nowrap; */ 
    overflow-x:hidden;
    overflow-y:hidden;
    margin-bottom: 15px;
}

div.creator-subgroup-carousel div:first-child {
    margin-bottom: 15px;
}

div.creator-subgroup-divider {
    height: 25px;
}

.creator-item {
    display: inline-block;
    margin-right: 6px;
    margin-bottom: 6px;
    border: 3px solid #FFF;
    border-radius: 8px;
    padding: 7px;
    cursor: pointer;
    background-color: #FFF;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.creator-item-selected {
    border: 3px solid #157A4E !important;
 }

/* MACHINE */

div#eightbitme-machine {
    position: relative;
    width: 500px;
    height: 450px;
}

div#eightbitme-machine-back {
	position: absolute;
	width: 80px;
	height: 161px;
	left: 33px;
	top: 189px;
	background-image: url('/img/8bitme/machine-back.png');
	z-index: 5;
}

div#eightbitme-machine-wheel {
	position: absolute;
	width: 188px;
	height: 186px;
	left: 13px;
	top: 166px;
	background-image: url('/img/8bitme/machine-wheel.png');
	z-index: 10;
}

div#eightbitme-machine-wheel.animating {
    -webkit-animation:spin 6s ease-in-out 1;
    animation:spin 6s ease-in 1;
}

div#eightbitme-machine-body {
	position: absolute;
	width: 500px;
	height: 424px;
	left: 0px;
	top: 0px;
	background-image: url('/img/8bitme/machine-no-back.png');
	z-index: 15;
}

div#pixel-1 {
    display: none;
	position: absolute;
	width: 10px;
	height: 10px;
	left: 182px;
	top: 385px;
	background-color: #cbc9ca;
	z-index: 0;
}

div#pixel-1.animating {
    -webkit-animation: pixel1 1.2s linear infinite;
    animation: pixel1 1.2s linear infinite;
}

div#pixel-2 {
    display: none;
	position: absolute;
	width: 18px;
	height: 18px;
	left: 194px;
	top: 385px;
	background-color: #a6a5a6;
	z-index: 0;
}

div#pixel-2.animating {
    -webkit-animation: pixel2 1.7s linear infinite;
    animation: pixel2 1.7s linear infinite;
}

@-webkit-keyframes pixel1 { 
	0%, 20%	{ -webkit-transform: translateY(0) translateX(0); opacity: 1; }
	100%	{ -webkit-transform: translateY(35px) translateX(-5px); opacity: 0; }
}

@-webkit-keyframes pixel2 { 
	0%, 20%	{ -webkit-transform: translateY(0) translateX(0); opacity: 1; }
	100%	{ -webkit-transform: translateY(45px) translateX(5px); opacity: 0; }
}

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(720deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(720deg); transform:rotate(720deg); } }

/***********/
/* GALLERY */
/***********/

div.gallery-item {
    flex-grow: 0;
    flex-shrink: 0;
    width: 80px;
    height: 220px;
    margin: 0 10px;
}

div.gallery-item img {
    margin-left: 10px;
    cursor: pointer;
}

div.gallery-item img:hover {
    -ms-transform: scale(1.1,1.1); /* IE 9 */
    -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    transform: scale(1.1,1.1);
}
 
div.gallery-item-name {
    font-size: 13px;
    word-wrap: break-word;
    text-align: center;
    font-style: italic;
}