/*
 * global.css
 * 
 * Global CSS for the Yukendo webgame.
 * 
 * Author: Johannes Marbach
 * 
 * Copyright (c) 2008, 2009, rapidrabbit GbR.
 * All rights reserved.
 *
 */

/* Container */

#container {
    width: 800px;
    height: 600px;
    background-image: url(../images/background.jpg);
	border-style: solid;
	border-color: #fff;
	border-width: thin;
}

/* Game area */

#game-area {
    float: left;
    margin: 40px 0 0 20px;
}

#game-area .frame-top-left, #game-area .frame-top-right,
#game-area .frame-bottom-left, #game-area .frame-bottom-right {
    width: 23px;
    height: 23px;
}

#game-area .frame-top-left {
    background-image: url(../images/frame/top-left.gif);
}

#game-area .frame-top-center {
    background-image: url(../images/frame/top-center.gif);
}

#game-area .frame-top-right {
    background-image: url(../images/frame/top-right.gif);
}

#game-area .frame-left {
    background-image: url(../images/frame/left.gif);
}

#game-area .frame-right {
    background-image: url(../images/frame/right.gif);
}

#game-area .frame-bottom-left {
    background-image: url(../images/frame/bottom-left.gif);
}

#game-area .frame-bottom-center {
    background-image: url(../images/frame/bottom-center.gif);
}

#game-area .frame-bottom-right {
    background-image: url(../images/frame/bottom-right.gif);
}

/* Game menu */

#game-menu {
    float: right;
    margin: 250px 15px 0 0;
}

.game-menu-button {
    cursor: pointer;
    width: 236px;
}

#play-button, #play-random-button, #blank-button, #pause-button {
    height: 37px;
}

#level-select {
    float: right; 
    margin: -2px 20px 0 0;
}

#mark-rows-columns-button, #mark-clusters-button {
    height: 37px;
}

#play-button {
    background-image: url(../images/buttons/play_en.png);
}

#play-button:hover {
    background-image: url(../images/buttons/play-hover_en.png);
}

#play-random-button {
    background-image: url(../images/buttons/play-random_en.png);
}

#play-random-button:hover {
    background-image: url(../images/buttons/play-random-hover_en.png);
}

#blank-button {
    background-image: url(../images/buttons/blank_en.png);
}

#blank-button:hover {
    background-image: url(../images/buttons/blank-hover_en.png);
}

#mark-rows-columns-button {
  background-image: url(../images/buttons/mark-rows-columns_en.png);
}

#mark-rows-columns-button:hover, #mark-rows-columns-button.pressed {
  background-image: url(../images/buttons/mark-rows-columns-hover_en.png);
}

#mark-clusters-button {
  background-image: url(../images/buttons/mark-clusters_en.png);
}

#mark-clusters-button:hover, #mark-clusters-button.pressed {
  background-image: url(../images/buttons/mark-clusters-hover_en.png);
}

#pause-button {
  background-image: url(../images/buttons/pause.png);
}

#pause-button:hover, #pause-button.pressed {
  background-image: url(../images/buttons/pause-hover.png);
}

#timer {
    font-family: Times, Georgia, serif;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0 0 20px;
    color: #3D540C;
}

/* Game layers */

#puzzle {
    position: relative;
}

#puzzle div table tr td {
    width: 50px;
    height: 50px;
}

#puzzle div.border-layer {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 2;
}

#puzzle div.operation-cursor-layer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

#puzzle div.operation-cursor-layer table tr td {
    vertical-align: top;
}

#puzzle div.operation-cursor-layer table tr td div {
    padding: 2px 0px 0px 3px;
    font-size: 60%;
    font-family: sans;
}

#puzzle div.value-layer {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}

#puzzle div.row-marker-layer {
    position: absolute;
    top: 0px;
    right: -45px;
    z-index: 0;
}

#puzzle div.column-marker-layer {
    position: absolute;
    bottom: -45px;
    left: 0px;
    z-index: 0;
}

#puzzle div.column-marker-layer table tr td,
#puzzle div.row-marker-layer table tr td {
    background-repeat: no-repeat;
    background-position: center center;
}

#puzzle div.column-marker-layer table tr td.marker-set,
#puzzle div.row-marker-layer table tr td.marker-set {
    background-image: url(../images/marker.png);
}

#slider {
    position: absolute;
    z-index: 3;
    height: 0px;
    width: 0px;
    background-image: url(../images/frame/cover.gif);
}

#over-layer {
    position: absolute;
    z-index: 3;
    background-image: url(../images/solved.png);
}

/* Border classes */

.border-outer-nw {
    background-image: url(../images/borders/outer-nw.png);
}

.border-outer-nsw {
    background-image: url(../images/borders/outer-nsw.png);
}

.border-outer-new {
    background-image: url(../images/borders/outer-new.png);
}

.border-outer-nsew {
    background-image: url(../images/borders/outer-nsew.png);
}

.border-inner-n-outer-w {
    background-image: url(../images/borders/inner-n-outer-w.png);
}

.border-inner-n-outer-sw {
    background-image: url(../images/borders/inner-n-outer-sw.png);
}

.border-inner-n-outer-ew {
    background-image: url(../images/borders/inner-n-outer-ew.png);
}

.border-inner-n-outer-sew {
    background-image: url(../images/borders/inner-n-outer-sew.png);
}

.border-inner-w-outer-n {
    background-image: url(../images/borders/inner-w-outer-n.png);
}

.border-inner-w-outer-ns {
    background-image: url(../images/borders/inner-w-outer-ns.png);
}

.border-inner-w-outer-ne {
    background-image: url(../images/borders/inner-w-outer-ne.png);
}

.border-inner-w-outer-nse {
    background-image: url(../images/borders/inner-w-outer-nse.png);
}

.border-inner-nw {
    background-image: url(../images/borders/inner-nw.png);
}

.border-inner-nw-outer-s {
    background-image: url(../images/borders/inner-nw-outer-s.png);
}

.border-inner-nw-outer-e {
    background-image: url(../images/borders/inner-nw-outer-e.png);
}

.border-inner-nw-outer-se {
    background-image: url(../images/borders/inner-nw-outer-se.png);
}

.border-inner-nw-outer-c {
    background-image: url(../images/borders/inner-nw-outer-c.png);
}

.border-inner-nw-outer-sc {
    background-image: url(../images/borders/inner-nw-outer-sc.png);
}

.border-inner-nw-outer-ec {
    background-image: url(../images/borders/inner-nw-outer-ec.png);
}

.border-inner-nw-outer-sec {
    background-image: url(../images/borders/inner-nw-outer-sec.png);
}