/*
Copyright (C) 2015 Jan-Dirk van Dingenen

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
/* 
    Created on : 4-okt-2015, 16:06:34
    Author     : Gebruiker
*/

body {
    margin:0px;
    background-color:#E1E1E1;
}

::selection {
  background: transparent;
}
::-moz-selection {
  background: transparent; 
}

#game {
    height: 900px;
    width: 1020px;
     -webkit-overflow-scrolling: touch;
    position:relative;
    margin: 0 auto;
    background-color:#fff;
    font-family: 'Boogaloo', cursive;
}

button {
    font-family: 'Boogaloo', cursive;
}

#city {
    border: solid 1px rgb(0, 0, 0);
    width: 900px;
    height: 900px;
    position: relative;
    /*box-shadow:4px 4px 10px 4px rgba(0,0,0,1);*/
    float:left;
    background-color:#b1b1b1;
}

#sidebar {
    height:900px;
    float:left;
    width:110px;
}

#freeTiles{
    width: 110px;
    height: 430px;
    border: solid 1px #000;
    box-sizing: border-box;
    position:relative;
    background-color: rgba(0,0,0,0.1);
    margin-left:2px;
}

#speed{
    width: 110px;
    height: 250px;
    box-sizing: border-box;
    position:relative;
    margin-top:10px;
}

#pizzaScore {
    width: 110px;
    height: 95px;
    box-sizing: border-box;
    position:relative;
    margin-top:5px;
    text-align: center;
}

#pizzaScore #score {
    margin-bottom:10px;
    font-weight:bold;
}

#pizzaScore #fails {
    font-weight:bold;
}

#go {
    text-align: center;
    height: 95px;
    position:relative;
    margin-left: 3px;
}

#go button#goButton, #go button#stopButton {
    margin-top: 10px;
    height: 40px;
    font-weight: bold;
    font-size: 20px;
    cursor:pointer;
    width: 80px;
    position: absolute;
    top: 0px;
    left: 15px;
    z-index:2;
}

#go button#stopButton {
    top: 50px
}

#go img.dirArrow {    
    height: 40px;
    position:absolute;
    top:10px;
    left:32px;  
    z-index: 1;
}


#freeTiles .tile {
    box-shadow:2px 2px 3px rgba(0,0,0,5);
}

#city .pizzaHouse{
    width:100px;
    height:100px;
    background-image:url(pizzahouse.png);
    position:absolute;
}

#city #pizza1 {
    top:0px;
    left:0px;
}

#city #pizza2 {
    top:0px;
    right:0px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

#city #pizza3 {
    bottom:0px;
    left:0px;
}

#city #pizza4 {
    bottom:0px;
    right:0px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.scooter {
    width:100px;
    height:100px;
    background-image:url(scooter.png);
    position:absolute;
}


.tile {
    position:absolute !important;
    background-image:url('roads.png');
    background-color:#b1b1b1;
    overflow:hidden;
    box-sizing: border-box;    
    cursor:move;
}

.tile.noMove {
    //opacity:0.8;
    background-color:rgb(177, 150, 150);
    cursor:no-drop;
}

.tile:hover {
    border:solid 1px rgba(255,255,255,1);
    /*box-shadow:4px 4px 7px 1px rgba(0,0,0,1);*/
    z-index:10;
}

.tile.noMove:hover, .tile.playerTile:hover {
    border:none;
    box-shadow:none;
    transform:none;
    z-index:0;
}

.tile.ui-draggable-dragging {
    border:solid 1px rgba(255,255,255,1);
    box-shadow:4px 4px 7px 1px rgba(0,0,0,1);
    z-index:15;
    opacity:0.7;
}
.tile.tileActive:after {
    content:' ';
    position:absolute;
    width:100px;
    height:100px;
    border:solid 1px rgba(255,255,255,0.5);
}

.tile.tileHover {
    border:solid 2px rgba(0,200,0,1);
}

.tile.tileHover:after {
    content:' ';
    position:absolute;
    width:100px;
    height:100px;
    background-color:rgba(0,180,0,0.3);
    border:none;
    z-index:2;
}

.tile0 {background-position:0 0;}
.tile1 {background-position:-100px 0;}
.tile2 {background-position:-200px 0;}
.tile3 {background-position:-300px 0;}
.tile4 {background-position:-400px 0;}

.tile5 {background-position: 0 -100px;}
.tile6 {background-position:-100px -100px;}
.tile7 {background-position:-200px -100px;}
.tile8 {background-position:-300px -100px;}
.tile9 {background-position:-400px -100px;}

.tile10 {background-position: 0 -200px;}
.tile11 {background-position:-100px -200px;}
.tile12 {background-position:-200px -200px;}
.tile13 {background-position:-300px -200px;}
.tile14 {background-position:-400px -200px;}

.tile15 {background-position: 0 -300px;}
.tile16 {background-position:-100px -300px;}
.tile17 {background-position:-200px -300px;}
.tile18 {background-position:-300px -300px;}
.tile19 {background-position:-400px -300px;}

.tile20 {background-position: 0 -400px;}
.tile21 {background-position:-100px -400px;}
.tile22 {background-position:-200px -400px;}
.tile23 {background-position:-300px -400px;}
.tile24 {background-position:-400px -400px;}

.arrow {
    width:104px;
    height:104px;
    background-image:url(arrow.png);
    position: absolute;   
    z-index:5;
    cursor:pointer;
    opacity:0.9;
}

.arrow.active {
    background-image:url(arrowActive.png);
}

.arrow.dir2, .dirArrow.dir2 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.arrow.dir3, .dirArrow.dir3 {
    -webkit-transform: rotate(180deg);
    transform: rotateZ(180deg);
}

.arrow.dir4, .dirArrow.dir4 {
    -webkit-transform: rotate(270deg);
    transform: rotateZ(270deg);
}

.order {
    position:absolute;
    width:50px;
    height:50px;
    pointer-events: none;
    background-image: url('order.png');
    background-size: cover;
    z-index:20;
}

.order.deliverWarm {
    background-image: url('deliveryWarm.png');
}

.order.deliverCold {
    background-image: url('deliveryCold.png');
}

.order .time {
    color: rgb(0, 0, 0);
    font-family: arial;
    font-weight: bold;
    font-size: 11px;
    float: right;
    clear: both;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 18px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    box-sizing: border-box;
    border: solid 1px rgba(0,0,0,0.5);
    pointer-events: none;
}

.order .pay {
    color: rgb(0, 255, 0);
    font-family: arial;
    font-weight: bold;
    font-size: 10px;
    float: left;
    clear: both;
    width: 20px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    z-index: -1;
    background-size: contain;
    background-color: rgb(0, 128, 0);
    margin-top: 18px;
    pointer-events: none;
}

.order .pay:before {
    content:"$";
}

img.light {
    position:absolute;
    left: 44px;
    bottom: 35px;    
    pointer-events: none;
}

img.light.Green {
    box-shadow: 0 0 5px rgb(0, 255, 0);
}

img.light.Yellow {
    box-shadow: 0 0 5px rgb(255, 255, 0);
}

img.light.Red {
    box-shadow: 0 0 5px rgb(255, 0, 0);
}


#other {
    font-family:arial;
    position:absolute;
    top:0px;
    right:5px;
}

#other a {
    color:#666;
    font-size:10px;
}

#highscore {
    z-index: 25;
    width: 410px;
    height: 80vh;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: calc(50% - 40vh);
    left: calc(50% - 210px);
    font-size: 20px;
    cursor:pointer;
    overflow-y:auto;
    overflow-x:hidden;
    /*box-shadow: 
                 0px -5px 10px  -5px  #761701,
                 0px  5px 10px  -5px  #23361A, 
                 5px  0px 10px  0px  #761701, 
                -5px  0px 10px  0px  #23361A; */
    box-shadow: 0px 0px 20px rgba(255,255,255,0.4);
    background-image:url(highback.jpg);
}

#highscore .backBottom {
    position:absolute;
    bottom: 0px;
    left:0px;
    height: 97px;
    width:430px;
    background-image:url(backBottom.png);
}

#highscore h1 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#highscore table {
    width:100%;
    border-spacing: 0;
    border-collapse: collapse;
}

#highscore table tr.yourscore {
  color: rgb(170, 0, 0);
  text-shadow: 0 0 2px #fff;
  font-size: 150%;
}

#highscore table td.rank {
  width: 84%;
  padding-left:35px;
}

#inputscore {
  display: none;
  z-index: 25;
  width: 320px;
  height: 120px;
  padding: 10px;
  border: solid 1px rgb(200, 200, 0);
  box-shadow: 0px 0px 20px 3px rgba(200, 200, 0, 0.9);
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 150px);
  font-size: 20px;
  cursor: pointer;
}

input#yourname {
  height: 30px;
  width: 290px;
  margin-top: 8px;
  margin-bottom: 8px;
  line-height: 30px;
  font-size: 30px;
  padding-left: 5px;
  outline-color: rgb(250, 250, 250);
}

button#okbutton {
  width: 299px;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  height: 25px;
  cursor: pointer;
  font-size: 20px;
  border: solid 1px rgb(0, 0, 0);
}

button#okbutton:hover {
      background-color: rgb(60, 60, 60);
}

#overlay {
    width:100%;
    height:100%;
    z-index:20;
    position:absolute;
    top:0px;
    left:0px;
    background-color: rgba(0, 0, 0, 0.5);
}