@charset "utf-8";
/* CSS Document */

/** resized with js **/
#worldContainer {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    position : relative;
    background:#000; /*url('../img/worldContainerBG.png');*/
    overflow : hidden;

}

#dragContainer {
    margin: 0px;
    padding: 0px;
    position : absolute;
    z-index : 0;
}

.draggable {
    cursor:hand;
    cursor:grab;
    cursor:-moz-grab;
    cursor:-webkit-grab;
}

.dragging {
    cursor:grabbing;
    cursor:-moz-grabbing;
    cursor:-webkit-grabbing;
}

.custom_cursor.dragging {
    cursor: url(../img/site/closedhand.cur), default !important;
}

.custom_cursor.draggable {
    cursor: url(../img/site/openhand.cur), default !important;
}

.worldTile {
    padding : 0;
    width : 96px;
    height : 96px;
    position : absolute;
    /* allow for dynamic z-index setting up to 1000 */
    z-index : 100;
}

.loadingTile {
    background:url('../img/tile-loader.gif') no-repeat 40px 40px;
}

/*.emptyTile {
}*/

/*.editableTile {
    background: url('../img/editableTileBG.png') no-repeat scroll top left;
    width: 97px;
    height: 97px;
}*/

/*.pendingTile {

}*/

.playableTile {
    background: url('../img/tileDepth.png') no-repeat scroll top left;
    width: 111px;
    height: 111px;
}

.tileColourTint {
    position : absolute;
    float : left;
    width : 96px;
    height : 96px;
}

/*.createdTile .tileColourTint {
    background : #FACE09;
    opacity : 0.1;
    display : block;
}*/

/*.playedTile .tileColourTint {
    background : #3D2E82;
    opacity : 0.2;
    display : block;
}*/

/*.pendingTile .tileColourTint {
    background : #f98508;
    opacity : 0.2;
    display : block;
}*/

/*.emptyTile .tileColourTint {
    display : none;
}
*/
.worldTileContent {
    position : relative;
}

.worldTileContent .tileImage{
    position : absolute;
    float : left;
}

.tileIconContainer {
    position : absolute;
    float : left;
    height : 20px;
    width : 96px;
    padding-top:38px;
    text-align:center;
}

.tileIcon {
    height : 20px;
    width : 20px;
    margin : 2px;
}

.emptyTile .tileIcon{
    display : none;
}

#tileButton{
    position : relative;
    z-index : 5000;
}

#tileButton a {
    color : #fff;
    text-align : center;
    padding-top : 2px;
    font-size : 10px;
    margin-left:13px;
    margin-top:39px;
}

#tileButton #playLevelButton {
    float: left;
    background: url('../img/playLevelButton.png') no-repeat scroll top left;
    width: 70px;
    height: 17px;
    position:absolute;
}

#tileButton #createLevelButton {
    float: left;
    background: url('../img/createLevelButton.png') no-repeat scroll top left;
    width: 70px;
    height: 17px;
    position:absolute;
}

#miniMap {
    color : #fff;
    font-size : 10px;
    width : 300px;
    height : 200px;
    background : #000;
    border : 1px solid #666;
    z-index : 10000;
    position:fixed;
    top: 95px;
    left: 15px;
    overflow : hidden;
}

#miniMapCanvasContainer {
    position : absolute;
    background : #000;
/*    border : 1px solid green;*/
    width : 4000px;
    height : 4000px;
    float : left;
}

#miniMapCanvas {
    position : absolute;
/*    border : 1px solid blue;*/
}

#miniMapLimits {
    border : 3px solid #e50013;
    width : 20px;
    height : 20px;
    position : absolute;
    top : 0;
    left : 0;
    float : left;
    display : none;
    /*opacity : 0.8;*/
}


/* DEBUG CSS STYLES */

.levelBrowserDebug {
    position : absolute;
    top : 80px;
    float : left;
    width : 500px;
    height : 20px;
    background : #060;
    z-index : 1000;
    color : #fff;
    font-size : 10px;
}

.levelBrowserDebugText {
    float : left;
    margin : 2px 10px;
}


.debugTileText {
    color : #fff;
    font-size : 10px;
    position : absolute;
    float : left;
    margin : 10px;
    display : none;
}

.loadingDebug p {
    margin-left : 10px;
}