@font-face
{
    font-family: "Bubbleboy 2";
    src: url("../fonts/bubbleboy-2.ttf") format('truetype'),
    url("../fonts/bubbleboy-2.svg#font") format('svg');
}


*
{
    padding: 0;
    margin: 0;
}

body
{
    font-family: 'Bubbleboy 2', 'Comic Sans MS', Arial, sans-serif;
    color: rgb(252, 233, 45);
    text-shadow: 1px 1px 0 #000000;
    background-color: black;
}

/*
.color-primary
{
    color: rgb(252, 233, 45);
}

.color-secondary
{
    color: white;
}

.color-disabled
{
    color: rgb(178, 178, 178);
}
*/

.ui-widget
{
    font-family: 'Bubbleboy 2', 'Comic Sans MS', Arial, sans-serif;
    font-size: 14px;
    line-height: 29px;
}

/* Required for Chrome :( */
#body
{    
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;    
}

#window
{
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px #333 solid;
    position: absolute;
    width: 800px;
    height: 520px;
    margin-left: -400px;
    margin-top: -260px;
    background: black url( ../images/background-blue.jpg ) center center no-repeat;
    left: 50%;
    top: 50%;
}

#window div.ad
{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: white;
    border: 1px solid blue;
}

#window #ad1
{    
    left: 27px;
    top: 36px;
}

#window #ad2
{        
    left: 27px;
    top: 284px;
}

/* Progress Bars */

#window div.progress-container
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position: absolute;
    width: 200px;
    height: 26px;
    margin-left: -101px; /* Take into account border */
    background-image: url( ../images/transparent/70.png );
    border: 1px #ccc solid;
}

#window #timer-progress-container
{    
    left: 50%;
    top: 47px;
}

#window #score-progress-container
{    
    left: 50%;
    top: 450px;
}

#window div.progress-container .ui-corner-left
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#window div.progress-container .ui-corner-right
{
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

#window #timer-progress-container .ui-widget-header
{
    background-image: url( ../images/progress-blue.png );
    border: none;
}

#window #score-progress-container .ui-widget-header
{
    background-image: url( ../images/progress-yellow.png );
    border: none;
}

#window #timer-progress-container .ui-widget-content,
#window #score-progress-container .ui-widget-content
{
    background: none;
    border: 1px solid transparent;
}

#window div.progressbar
{
    width: 192px;
    height: 18px;
    margin: 4px;
}

#window #score-progress-label
{
    position: absolute;
    font-size: 12px;
    left: 50%;
    top: 497px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    margin-left: -100px;
    margin-top: -20px;
    text-align: center;    
}

#window div.label
{
    position: absolute;
    font-size: 12px;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

/* Level, Score and High Score */

#window #score-label
{    
    left: 50%;
    top: 23px;
    margin-left: -200px;
    margin-top: -20px;    
}

#window #level-label
{    
    left: 50%;
    top: 497px;    
    margin-left: -100px;
    margin-top: -20px;       
}

#window #high-score-label
{    
    left: 50%;
    top: 23px;    
    margin-left: 0px;
    margin-top: -20px;   
}

/* Help */

#window #help-label
{    
    text-align: left;
    left: 23px;
    top: 497px;
    margin-top: -20px;
}

#window #help-label span
{
    cursor: pointer;
}

/* Music and Sound Volume */

#window #audio-label span
{
    cursor: pointer;
    color: rgb(178, 178, 178);
}

#window #audio-label span.on
{
    color: rgb(252, 233, 45);
}

#window #audio-label
{
    text-align: right;
    left: 777px;
    top: 497px;
    margin-left: -200px;
    margin-top: -20px;
}

#window #music-slider-container .ui-slider-horizontal,
#window #sound-slider-container .ui-slider-horizontal
{
    height: 8px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-image: url( ../images/transparent/90.png );
    border: 1px #ccc solid;
}

#window #music-slider-container .ui-slider .ui-slider-handle,
#window #sound-slider-container .ui-slider .ui-slider-handle
{
    height: 16px;
    width: 16px;
    margin-left: -8px;
    top: -5px;
    background-image: url( ../images/progress-yellow.png );
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border-color: #333;
}

#window #music-slider-container
{
    position: absolute;
    left: 543px;
    top: 270px;
    width: 197px;
    height: 10px;
    padding: 0 30px;
}

#window #sound-slider-container
{
    position: absolute;
    left: 543px;
    top: 340px;
    width: 197px;
    height: 10px;    
    padding: 0 30px;
}

/* Board */

#window #board-container
{
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 3px white solid;
    background-image: url( ../images/transparent/90.png );
    position: absolute;
    width: 256px;
    height: 320px;
    margin-left: -143px; /* Take into account border */
    margin-top: -173px;  /* Take into account border */
    left: 50%;
    top: 50%;
    padding: 12px;
}

#window div.float-text
{
    position: absolute;
    width: 400px;
    height: 200px;
    line-height: 200px;
    margin-left: -200px;
    margin-top: -100px;
    left: 10px;
    top: 10px;    
    text-align: center;
    z-index: 200;
}

div.grid
{
    position: absolute;
    left: 12px;
    top: 12px;
    width: 256px;
    height: 320px;
    z-index: 100;
}

div.grid div.cell
{
    float: left;
    width: 32px;
    height: 32px;
    /* background-color: olive; */
}

div.selector
{
    position: absolute;
    width: 96px;
    height: 96px;
    z-index: 200;
}

div.selector div.cell
{
    visibility: hidden;
    float: left;
    width: 32px;
    height: 32px;
}

div.selector.active div.cell
{
    background-image: url( ../images/selector-active.png );
}

div.selector.inactive div.cell
{
    background-image: url( ../images/selector-inactive.png );
}

div.tile
{
    z-index: 2;
    position: absolute;
    width: 32px;
    height: 32px;
    background-position: center center;
}

div.tile.blue
{
    background-image: url( ../images/tiles/tile-blue.png );
}

div.tile.green
{
    background-image: url( ../images/tiles/tile-green.png );
}

div.tile.purple
{
    background-image: url( ../images/tiles/tile-purple.png );
}

div.tile.red
{
    background-image: url( ../images/tiles/tile-red.png );
}

div.tile.yellow
{
    background-image: url( ../images/tiles/tile-yellow.png );
}

div.tile div.item
{
    z-index: 3;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
}

div.tile div.item.x2
{
    background-image: url( ../images/items/item-x2.png );
}

div.tile div.item.x3
{
    background-image: url( ../images/items/item-x3.png );
}

div.tile div.item.x4
{
    background-image: url( ../images/items/item-x4.png );
}

div.tile div.item.bomb
{
    background-image: url( ../images/items/item-bomb.png );
}

div.tile div.item.gravity
{
    background-image: url( ../images/items/item-gravity.png );
}

div.tile div.item.rocket.up
{
    background-image: url( ../images/items/item-rocket-up.png );
}

div.tile div.item.rocket.down
{
    background-image: url( ../images/items/item-rocket-down.png );
}

div.tile div.item.rocket.left
{
    background-image: url( ../images/items/item-rocket-left.png );
}

div.tile div.item.rocket.right
{
    background-image: url( ../images/items/item-rocket-right.png );
}

img.tile-clone
{
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    z-index: 50;
}

img.explosion
{
    width: 90px;
    height: 90px;
    display: block;
    position: absolute;
    z-index: 60;
    margin-left: -29px;
    margin-top: -29px;
}

div.board
{
    z-index: 1;
    position: relative;
    width: 256px;
    height: 320px;
}

div.hidden
{
    display: none;
}