* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
	font-family : 'Indie Flower';
    font-size : 24px;
}

/* headers */
@font-face {
    font-family: 'Permanent Marker';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/PermanentMarker.ttf) format('truetype');
}

/* body */
@font-face {
    font-family: 'Indie Flower';
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/IndieFlower.ttf) format('truetype');
}


html,body {
    /* height: 768px; /* horible but there is an ios bug! */
    width : 100%;
    overflow : hidden;
}

body {
	background: #000;
	color: #fff;
    /*border : 1px #ffff00 solid;*/
}
.clear { 
    clear:both; 
}
.background {
    position : absolute;
    top :0;
    left: 0;
}

/* active style */
.csstransforms .cn-wrapper li.active a {
  background-color: hsla(0, 88%, 70%, 1);
}

/* iphone experimental */
@media screen and (max-width:480px) {
  .csstransforms .cn-wrapper {
    font-size: .68em;
  }

  .cn-button {
    font-size: 1em;
  }

  .csstransforms .cn-wrapper li {
    font-size: 1.52em;
  }
}

#pages {
    position : absolute;
    top : 0;
    left : 0;
    width : 100%;
    height : 50%;
    border : 32px solid rgba(0,0,0,0.75 );
    background-color : rgba(64, 64, 64, 1);
}
#pages .page {
    padding : 16px 0px;
}

#pages .page H1 {
    text-align : center;
    padding : 0 0 10px 0;
    font-family: 'Permanent Marker';    
}
.hide {
    display : none !important;
}
.show {
    display : block;
}

input[type='range']{
    background: #0c0;
    height:30px;
}

input[type='range']::-webkit-slider-thumb{
    background:#f60;
    height:30px;
    width:30px;
    border-radius: 30px;
}

#menudial {
    background-image : url("../img/menu.png");
    position : absolute;
    bottom : 0;
    left : 50%;

    width : 200px;
    height : 200px;

    margin-left : -100px;
    margin-bottom : -100px;

    display : block;
    z-index: 9;
}
#menubutton {
    border: none;
    background-color: rgba(0,0,0, 0.25);
    position: absolute;
    bottom : 0;
    left : 50%;
    
    height : 64px;
    width : 64px;

    margin-left : -32px;
    margin-bottom: -32px;

    border-radius: 50%;
    cursor: pointer;
    z-index: 11;
    font-size : 2em;
}

/* spin options */
.select {
    width : 116px;
    height : 120px;
    float : left;
}
.select h2 {
    font-size : 1em;
    transform : rotate(270deg);
    -webkit-transform: rotate(270deg);
    position : absolute;
    left : 0;
    bottom: 50%;
}
#background-options {
    width : 100%;
}
.toOuterWrapper {
    display : block;
    float : left;
    width : 120px;
    height : 80px;
    overflow: hidden;
    padding-left :32px;
    position:relative;
    border : none;
    margin :4px;
    -webkit-perspective:400px;
    -webkit-perspective-origin: 50% 50%;
    -webkit-transform-style : preserve-3d;
}
.testing {
	background: -webkit-linear-gradient(rgba(64,64,64,1) 0%, rgba(64,64,64,0) 20%, rgba(64,64,64,0) 80%, rgba(64,64,64,1) 100%);
    width : 120px;
    height : 80px;
    position : absolute;
    top: 0px;
    left: 0px;
    z-index : 999;
    
}
.toInnerWrapper {
    margin : 15px;
    width : 50px;
    height : 50px;
    position : absolute;            
    -webkit-transform-style : preserve-3d;
}
.toOption {
    display: block;
    position:absolute;
    text-align : center;
    line-height : 50px;
    font-size : 1em;
    width : 50px;
    height : 50px;
    border-radius: 10px;
    overflow : hidden;
}
#button-random {
    border: none;
    background-color: rgba(255,255,255, 0.15);
    position: absolute;
    bottom : 0;
    left : 25%;
    
    height : 64px;
    width : 64px;

    margin-left : -32px;
    margin-bottom: 0px;

    border-radius: 50%;
    cursor: pointer;
    z-index: 11;
    font-size : 2em;
}