/*
Common app CSS
  TODO:
  Move to separate file
*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

/* 
Archipelag Matematyki
Dział: Optymalizacja liniowa
Gra: Cięcie desek
*/

body {
    background: #000000;
    padding: 0px;
    margin: 0px;
    font-family:arial, sans-serif;
}
#color-selector {
  position:absolute;
  bottom:23px;
  right:95px;
}
#color-selector .dot {
  width:10px;
  height:10px;
  top:1px;
  left:1px;
  border-radius:50%;
  position:absolute;
  
  background-color:#f0f;
}
#color-selector .outer-dot {
  width:12px;
  cursor:pointer;
  height:12px;
  border-radius:50%;
  float:left;
  margin:5px;
  background:rgba(0,0,0,0.5);
  position:relative;
}

#app-container {
  overflow:hidden;
}
#app-container .splash {
    position: absolute;
    text-align: center;
    left:300px;
    top:50px;
}
#app-container .ui-window {
    background:#fff;
    padding:15px;
    width:550px;
}
#app-container .ui-window h1 {
    padding-top:0px;
    margin-top:0px;
    font-size:1.2em;
}
#app-container {
    width:800px;
    height:600px;
    background-image: url(img/bg.png?1380360711);
    margin:auto;
    margin-top:50px;
    position: relative;
}
/* #game-ui #cutting-table, */

#game-ui #cutting-table #cut-area {
  position:relative;
}
#game-ui #cutting-table,
#game-ui #cutting-table #cut-area *{
  position:absolute;
}

#game-ui #cutting-table {
  left:64px;
  bottom:40px;
  height:130px;
  width:672px;
}

#game-ui #cutting-table #saw-front,
#game-ui #cutting-table #saw-back {
  top:-70px;
  height:113px;  
}
#game-ui #cutting-table #saw-front {
  width:59px;
  z-index:100;
  background-image:url(img/saw-front.png?1379963651) ;
  background-repeat:no-repeat;
}
#game-ui #cutting-table #saw-back {
  width:37px;
  margin-left:-37px;
  z-index:90;
  background-image:url(img/saw-back.png?1379963651);
}
#game-ui #cutting-table .cut-mark {
  width:2px;
  height:123px;
  margin-left:-2px;
  background:url(img/cut-mark.png?1379918714);
}

#game-ui #cutting-table .cut-mark-wrapper {
  height:123px;
  z-index:100;
  margin-top:-35px;
}
#game-ui #cutting-table .cut-mark-wrapper .cut-mark-value {
  width:90px;
  padding-left:4px;
  position:absolute;
  bottom:48px;
  left:-100px;
  font-size:18px;
  text-align:right;
  color:#000;
  font-weight:normal;
}
#game-ui #cutting-table .cut-mark.possible {
  background:url(img/possible-cut-mark.png?1380359832);
}
#game-ui #cutting-table .cut-mark-wrapper.active .cut-mark.possible {
  background:url(img/active-cut-mark.png?1380359679);
}
#game-ui #cutting-table #board {
  width:672px;
  height:56px;
  z-index:91;  
}

#game-ui #cutting-table #board-left-length {
  position:absolute;
  top:-25px;
  display:block;
  text-align:right;
  right:0px;
}
#game-ui #cutting-table #board .board-piece {
  height:56px;
  background-image:url(img/board.png?1380353949);
}


#game-ui #cutting-table .title {
  padding-bottom:40px;
}
#game-ui #cutting-table .title,
#game-ui #status-box .container .title {
  font-size:18px;
}
#status-box {
  width:400px;
  z-index:100;
  height:280px;
  border:1px solid #ccc;
  background:rgba(255,255,255,0.35);
  position:absolute;
  left:350px;
  top:30px;
}
#game-ui #status-box .container {
  clear:left;
}
#status-box .half-box {
  width:50%;
  float:left;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box; 
  padding:25px;
  text-align:right;
}
#status-box .big-value-box {
  font-size:24px;
}
#status-box #built .value {
  padding-top:35px;

}
#status-box #built .title-image-wrapper {
  padding:35px 35px 0px 0px;
}
#status-box #waste .big-value-box {
  padding-top:35px;
}
#status-box #waste .title-image-wrapper {

  padding:16px 76px 0px 0px;
}
#status-box #plan .title-image-wrapper {
  padding:0px;
  padding-left:4px;
  padding-top:43px;
  width:80px;
  box-sizing: content-box;
}
#status-box #plan .plan-table-wrapper {
  width:270px;
  padding:10px;
  text-align:center;
}
#status-box #plan table {
  width:100%;
}
#status-box #plan table tr th {
  font-weight:normal;
}
#status-box #plan table *{
  font-size:13px;
}
#app-container .status-box {
    background:#00c6ff;
    padding:15px;
    color:#fff;
    position: absolute;
    left:95px;
    top:25px;
}
#app-container .progress-box {
    background:#00c6ff;
    padding:15px;
    color:#fff;
    position: absolute;
    right:50px;
    top:525px;
}
#app-container .board .cell {
    cursor: pointer;
    float:left;
    width:73px;
    height:72px;
}
#app-container .menu-container {
    width:143px;
    height:189px;
    position:absolute;
    left:100px;
    top:80px;
}
.popup-window .close-button {
    position:absolute;
    right:-13px;
    top:-13px;
    width:26px;
    height:26px;
    background:url('img/close.png?1379920724');
    cursor: pointer;
}
#app-container table.highscores tr th.nick {
    width:300px;
}
#app-container table.highscores tr td {
    border-bottom: 1px solid #eee;
    padding:3px;
}
#app-container table.highscores {
    text-align:left;
    margin:auto;
}
#app-container button{
    color:#fff;
    cursor:pointer;
    text-transform: uppercase;
    width:125px;
    height:37px;
    margin-bottom:15px;
    font-size:0px;
    border:none;
    padding:0px;
}
table.credits {
  width:500px;
  margin:auto;
}
table.credits tr td {
  padding:5px;
}
table.credits tr.alt td {
  background-color:#eee;
}
#app-container button.small {
    width:78px;
    height:23px;
    font-size:0px;
    background: url(img/buttons/tworcy_2.PNG?1380129122);
}
#app-container button.small.credits {
  position:absolute;
  bottom:16px;
  left:114px;
}
#app-container #won-box .cup {
    width:550px;
    height:309px;
    background: url(img/cup.png?1379920724);
}
#app-container #highscore-box,
#app-container #board-selection-box,
#app-container #difficulty-selection-box {
    text-align: center;
}

#app-container button.ui-button.highscore {
  background-image:url(img/buttons/najlepsi_2.PNG?1380129036);
}
#app-container button.ui-button.restart {
  background-image:url(img/buttons/restart_2.PNG?1380129164);
}
#app-container button.ui-button.help {
  background-image:url(img/buttons/pomoc_2.PNG?1380128994);
}
#app-container button.ui-button.new-game {
  background-image:url(img/buttons/nowagra.PNG?1380460733);
}

#app-container button.ui-button.options {
  background-image:url(img/buttons/opcje_2.PNG?1380129072);
}

#app-container button.ui-button.last {
    margin-right:0px;
}
#app-container .board .cell.first {
    clear:left;
}
#app-container .board .cell.on .dot {
    background-position: 0px 72px;
}
#app-container .board .cell.on {
    background-color:#fff;
}
#app-container .board .cell .dot {
    width:73px;
    height:72px;
    background:url(img/light-state.png?1379920724);
}
