@font-face{
font-family:'FuturaHandwritten';
font-style:normal;
src:url('FuturaHandwritten.ttf') format('truetype');
}

html,body{
width:100%;
height:100%;
}

body{

margin:0;
overflow:hidden;

background:#fff;

font-family:'FuturaHandwritten';
color:#333;
font-size:20px;

}
#preloader{
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
width:200px;
height:50px;
font-size:30px;
text-align:center;
}
#main{
width:100%;
height:calc(100% - 60px);
position:relative;
overflow:hidden;
}
#footer{
position:absolute;
z-index:1000;
width:100%;
height:60px;
background:#222;
}
s{
text-decoration:line-through;
}

#translations{
margin:10px auto;
font-size:10.5px;
line-height:19px;
color:#fff;
text-align:center;
width:960px;
letter-spacing:-0.5px;
}
#translations a{
color:#dd4040;
}
#translations a:hover{
color:#ee5151;
}



/*********************/
/******* SOUND *******/
/*********************/
#sound{
position:absolute;
left:13px;
top:5px;
width:100px;
height:50px;
cursor:pointer;
}
#sound > div{
position:absolute;
}
#sound #sound_icon{
background:url(../assets/ui/sound.png);
background-size:auto 100%;
width:40px;
height:40px;
top:5px;
left:2px;
}
#sound #sound_on, #sound #sound_off{
left:52px;
font-size:30px;
line-height:55px;
}
#sound #sound_on{
color:#fff;
}
#sound #sound_off{
color:#595959;
}
#sound[sound=off] #sound_icon{
background-position:-40px 0;
}
#sound[sound=on] #sound_on, #sound[sound=off] #sound_off{
display:block;
}
#sound[sound=off] #sound_on, #sound[sound=on] #sound_off{
display:none;
}

.sharing{
position:absolute;
width:120px;
height:40px;
top:10px;
right:13px;
}
.sharing img{
width:40px;
height:40px;
}

/*************************/
/******* SLIDESHOW *******/
/*************************/

#slideshow_container{
width:0; height:0;
position:absolute;
margin:auto; 
top:0; left:0; right:0; bottom:0;
}
#slideshow{

/*border:1px solid rgba(0,0,0,0.2);*/
width:960px;
height:540px;

/* Center this thing */
position:absolute;
left:-480px;
top:-270px;

}
.object{
position:absolute;
transition:left 0.5s ease-in-out, top 0.5s ease-in-out;
}
.fader{
transition:opacity 0.5s ease-in-out !important;
}

/******** Text Box ********/

.textbox{}
.textbox > div{
position:absolute;
}
/* fake bold */
.textbox b{
font-weight:normal;
text-shadow:1px 0 0 currentColor;
}


.label{
position:absolute;
}

/********* Button ********/

.no-select{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
.button{
z-index:0;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

transform-origin:97.5px 27.5px;
transition:transform 0.1s ease-out;

text-align:center;
}
.button #background{
position:absolute;
background:url(../assets/ui/button.png);
width:250px; height:125px;
background-size:100%;
top:-35px; left:-30px;
pointer-events:none;
cursor:default;
}
.button #text{

font-family:'FuturaHandwritten';
color:#000;
font-size:24px;

width:180px;
height:30px;
text-align:center;

position:absolute;
top:14px; left:5px;

cursor:default;

}
.button #hitbox{
position:absolute;
width:195px; height:55px;
cursor:pointer;
}
.button[hover=yes]{
z-index:100;
transform:scale(1.02, 1.02);
}
.button[hover=yes] #background{
background-position:0px -125px !important;
}
.button[deactivated=yes] #background{
background-position:0px -250px !important;
}
.button[deactivated=yes] #text{
color:#CCCCCC;
}
.button[deactivated=yes] #hitbox{
display:none;
}
.button[size=short]{
transform-origin:57.5px 27.5px;
}
.button[size=short] #background{
background:url(../assets/ui/button_short.png);
background-size:100%;
width:150px; left:-20px;
}
.button[size=short] #text{
width:105px;
/*font-size:18px;
top:18px;*/
}
.button[size=short] #hitbox{
width:115px;
}
.button[size=long]{
transform-origin:172.5px 27.5px;
}
.button[size=long] #background{
background:url(../assets/ui/button_long.png);
background-size:100%;
width:400px;
}
.button[size=long] #text{
width:330px;
top:11px;
}
.button[size=long] #hitbox{
width:345px;
}
.button:active{
transform:scale(0.95, 0.95);
}


/*************************/
/****** SANDBOX UI *******/
/*************************/

#sandbox_tabs{
position:absolute;
left:460px; top:-10px;
background:url(../assets/ui/sandbox_tabs.png);
width:500px; height:470px;
background-size:auto 100%;

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none; 
cursor:default;
}
#sandbox_tabs > div{
position:absolute;
}
#sandbox_tabs .hitbox{
cursor:pointer;
font-size:25px;
top:22px;
}
#sandbox_tabs .sandbox_page{
width:433px;
height:385px;
left:33px;
top:80px;
}
.incdec{
width:0; height:0;
position:absolute;
}
.incdec > div{
position:absolute;
}
.incdec > .incdec_num{
width:50px; height:50px;
font-size:25px;
text-align:center;
top:-16px;
left:-25px;
cursor:default;
}
.incdec > .incdec_control{
left:-10px;
width:20px; height:20px;
background:url(../assets/ui/sandbox_incdec.png);
background-size:auto 100%;
cursor:pointer;
}
.incdec > .incdec_control[arrow=up]{top:-35px; background-position:0px 0px;}
.incdec > .incdec_control[arrow=up]:hover{background-position:-20px 0px;}
.incdec > .incdec_control[arrow=down]{bottom:-35px; background-position:-40px 0px;}
.incdec > .incdec_control[arrow=down]:hover{background-position:-60px 0px;}

.slider{
position:absolute;
height:40px;
}
.slider > div{
position:absolute;
}
.slider > .slider_bg{
top:0;
width:100%; height:30px;
background:url(../assets/ui/slider_bg.png);
background-size:auto 100%;
}
.slider > .slider_knob{
top:0;
width:30px; height:30px;
background:url(../assets/ui/slider_knob.png);
background-size:100% 100%;
cursor:-webkit-grab;
cursor:-moz-grab;
cursor:grab;
}
.slider > .slider_knob:active{
cursor:-webkit-grabbing;
cursor:-moz-grabbing;
cursor:grabbing;
}

.sandbox_pop{
position:absolute;
}
.sandbox_pop>div{
position:absolute;
}
.sandbox_pop_icon{
width:40px;
height:40px;
background:url(../assets/ui/sandbox_hats.png);
background-size:auto 100%;
}
.sandbox_pop_label{
font-size:18px;
width:150px;
top:8px;
left:50px;
}

/*************************/
/******* SCRATCHER *******/
/*************************/

.scratcher{
position:absolute;
top:0; left:0;
width:100%; height:100%;
background:url(../assets/ui/scratch.png);
background-size:200% 2000%;
display:none;

z-index:200;
}

/*************************/
/****** SCOREBOARD *******/
/*************************/

#scoreboard{
position:absolute;
width:200px; height:100px;
background:url(../assets/iterated/iterated_scoreboard.png);
background-size:100% 100%;
}
#scoreboard > div{
position:absolute;
width:60px; height:60px;
text-align:center;
font-size:50px;
color:#666666;
}
#scoreboard > div:nth-child(1){
left:20px;
top:21px;
}
#scoreboard > div:nth-child(2){
right:15px;
top:21px;
}

/*************************/
/****** CHARACTERS *******/
/*************************/

.character{
position:absolute;
height:114px;
}
.character #peep{
background:url(../assets/tournament/peep_characters.png);
background-size:auto 100%;
width:105px;
height:114px;
top:-5px;
left:-10px;
}
.character #desc{
width:calc(100% - 100px);
font-size:18px;
height:114px;
right:0;
line-height:1.2em;
}
.character #peep[char=tft]{   background-position:0 0;}
.character #peep[char=all_d]{ background-position:-105px 0;}
.character #peep[char=all_c]{ background-position:-210px 0;}
.character #peep[char=grudge]{background-position:-315px 0;}
.character #peep[char=prober]{background-position:-420px 0;}
.character #peep[char=tf2t]{  background-position:-525px 0;}
.character #peep[char=pavlov]{background-position:-630px 0;}
.character #peep[char=random]{background-position:-735px 0;}

.tft{color:#4089DD;}
.all_d{color:#52537F;}
.all_c{color:#FF75FF;}
.grudge{color:#efc701;}
.prober{color:#f6b24c;}
.tf2t{color:#88A8CE;}
.pavlov{color:#86C448;}
.random{color:#FF5E5E;}

.icon{
width:25px; height:25px;
background:url(../assets/ui/sandbox_hats.png);
background-size:auto 100%;
display:inline-block;
position:relative;
top:1px;
}
.icon_label{
display:inline-block;
font-size:20px;
position:relative;
top:-3px;
}
.tft .icon{background-position:0 0;}
.all_d .icon{background-position:-25px 0;}
.all_c .icon{background-position:-50px 0;}
.grudge .icon{background-position:-75px 0;}
.prober .icon{background-position:-100px 0;}
.tf2t .icon{background-position:-125px 0;}
.pavlov .icon{background-position:-150px 0;}
.random .icon{background-position:-175px 0;}

/*************************/
/****** MISC STUFF *******/
/*************************/

.score_small{
width:40px; height:40px;
background:url(../assets/tournament/score_small.png);
background-size:auto 100%;
display:inline-block;
}
.score_small[payoff=R]{background-position:0 0;}
.score_small[payoff=T]{background-position:-40px 0;}
.score_small[payoff=S]{background-position:-80px 0;}
.score_small[payoff=P]{background-position:-120px 0;}

/*************************/
/***** SLIDE SELECT ******/
/*************************/

#select{
width:100%;
text-align:center;
padding-top:15px;
}
#select .dot{
width:30px;
height:30px;
border-radius:40px;
border:1px solid #fff;
display:inline-block;
margin:0 5px;
cursor:pointer;
}
#select .dot[selected]{
background:#fff;
}

/*************************/
/******* CREDITS *********/
/*************************/

.credits{
color:#888;
}
.credits .big{
font-size:40px;
line-height:42px;
color:#fff;
}
.credits .divider{
display:block;
height:40px;
}
.credits a{
color:#dd4040;
}
.credits a:hover{
color:#ee5151;
}

/****************/
/** ADDITIONAL **/
/****************/

@font-face{
font-family:'Itim';
font-style:normal;
src:url('Itim-Regular.ttf') format('truetype');
}

body{font-family:'FuturaHandwritten',Itim}
#translations{line-height:16px}
.button #text{font-family:'FuturaHandwritten',Itim}
#sound {width:140px;}
#sound #sound_on, #sound #sound_off{font-size:25px;}
.credits .divider{height:30px}
div#slideshow > div:nth-child(6) > div.label:nth-child(2),
#sandbox_tabs > div:nth-child(5) > div:nth-child(2) > div:nth-child(2){left:190px !important;top:0px !important}

div#slideshow > div:nth-child(6) > div.label:nth-child(3),
#sandbox_tabs > div:nth-child(5) > div:nth-child(2) > div:nth-child(3){left:70px !important;top:0px !important}

div#slideshow > div:nth-child(6) > div.label:nth-child(4),
#sandbox_tabs > div:nth-child(5) > div:nth-child(2) > div:nth-child(4){left:260px !important}

div#slideshow > div:nth-child(6) > div.label:nth-child(5),
#sandbox_tabs > div:nth-child(5) > div:nth-child(2) > div:nth-child(5){left:10px !important}

.ins_lnk{
color:inherit;
text-decoration:none;
}
.ins_lnk:hover, ins_lnk:focus{
text-decoration:underline;
}