@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 500px 207px; }
}

body
{
  background-image: url(../background.gif);
  background-position: 0px 0px;
  background-repeat: repeat;
  animation: animatedBackground 20s linear infinite;
}

#divMain
{
  width: 800px;
  position: fixed;
  left: 50%;
  margin-left: -400px;
}

/* === Map style ======================= */
#divMap
{
  background-image: url("back_custom.png");
  border-style: solid;
  border-width: 5px;
  height: 300px;
  width: 800px;
}

#svgMap
{
  margin: 23px 98px;
  pointer-events: all;
}

#svgGraphics
{
  position: absolute;
  display: block;
  left: 0px;
  top: 0px;
  margin: 25px 100px;
  height: 300px;
  width: 600px;
  pointer-events: none;
}

.Stage
{
  r: 10;
  fill:rgba(70,130,230, 0.25);
}

.NewStage
{
  stroke:rgba(216,216,251, 0.25) !important;
  fill:rgba(212,212,247, 0.25) !important;
  stoke-width:50px;
}

.NewStage:hover
{
  stroke:rgba(255,255,0,1);
  stoke-width:10px;
  fill:rgba(255,255,0,0.25) !important;
}

.CompletedStage
{
  stroke:rgba(200,200,200, 0.25);
  stoke-width:5px;
}

.HiddenStage
{
  display: none;
  stroke:rgba(80,150,220, 0.25);
  stoke-width:5px;
  fill: rgba(102, 179, 255, 0.25) !important; 
}

.CompletedStage.s1 {fill: rgba(236, 191, 76, 0.25)}
.CompletedStage.s2 {fill: rgba(228, 176, 78, 0.25)}
.CompletedStage.s3 {fill: rgba(234, 160, 105, 0.25)}
.CompletedStage.s4 {fill: rgba(223, 153, 128, 0.25)}
.CompletedStage.s5 {fill: rgba(238, 155, 155, 0.25)}
.CompletedStage.s6 {fill: rgba(221, 151, 179, 0.25)}
.CompletedStage.s7 {fill: rgba(213, 150, 211, 0.25)}
.CompletedStage.s8 {fill: rgba(188, 147, 216, 0.25)}
.CompletedStage.s9 {fill: rgba(150, 151, 209, 0.25)}
.CompletedStage.s10 {fill: rgba(122, 151, 212, 0.25)}
.CompletedStage.s11 {fill: rgba(122, 166, 197, 0.25)}
.CompletedStage.s12 {fill: rgba(118, 185, 194, 0.25)}
.CompletedStage.s13 {fill: rgba(102, 190, 169, 0.25)}
.CompletedStage.s14 {fill: rgba(130, 188, 147, 0.25)}
.CompletedStage.s15 {fill: rgba(142, 188, 118, 0.25)}
.CompletedStage.s16 {fill: rgba(92, 156, 73, 0.25)}

.VisibleRoad
{
  stroke: rgb(70, 130, 230, 0.25);
  stroke-width: 2;
  z-index: 0;
}

.OpenRoad
{
  stroke: rgba(102, 179, 255, 0.25);
  stroke-width: 5;
  z-index: 0;
}

.HiddenRoad
{
  display: none;
}

.Crossroad
{
  stroke: rgba(102, 179, 255, 0);
  fill: rgba(70, 130, 230, 0);
}

/* === Editor UI ========================= */
.hidden {
    display: none;
}

.levelList
{
  float: left;
}

#lstLevels 
{
  width: 200px;
}

#divListControls
{
  
}

#divGenerator
{
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #eeeeee;
  border-style: solid;
  border-width: 2px;
  display: none;
}

#divGenerator span
{
  display: block;
  margin: 5px;
}

#txtNo { width: 54px; }
#txtRoad { width: 54px; }
#txtRoadSec { width: 54px; }
#txtX { width: 54px; }
#txtY { width: 54px; }

/* === Level card ========================== */
#divLevelDetail
{
	width: 800px;
	height: 150px;
	background: #f9db00;
	border-style: solid;
	border-width: 5px;
}

#divTitle
{
	width: 590px;
	background-color: #f9cf00;
	color: #242633;
    float:left;
}

#divCourseCard
{

}

#divResults
{

	text-align: center;
}

.button
{

    position: relative;
    right: 0;
    width: 140px;
    height: 44px;
    color: #242633;
    font-size: 16px;
    padding-top: 14px;
    background-color: #f9cf00;

	display: block-inline;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 7px 0px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 7px 0px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 7px 0px 0px rgba(0,0,0,0.2);
}

.button:hover
{
    -moz-animation: link 0.15s ease 0.05s both;
    -webkit-animation: link 0.15s ease 0.05s both;
    animation: link 0.15s ease 0.05s both;
    animation-name: link;
    animation-duration: 0.15s;
    animation-timing-function: ease;
    animation-delay: 0.05s;
    animation-iteration-count: initial;
    animation-direction: initial;
    animation-fill-mode: both;
    animation-play-state: initial;

	padding-top:5px;
    display: block-inline;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.2);
}

.thumbnail
{
    width: 200px;
    float: right;
}

/* === Graphics ========================= */
.mario
{
  height: 36px;
  width: 36px;
  display: block;
  position: absolute;

  -ms-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%; 
}

.mario.left
{
  transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}

.mario.right
{
}

.mario.idle
{
  background: url(../mario_idle.gif);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

.mario.ready
{
  background: url(../mario_ready.gif);
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: center;
}

.mario.walk
{
  background: url(../mario_walking.gif);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Items */
.item
{
  background: url(item_collection.png);
  background-image: url(item_collection.png);
  background-size: 100px 25px;
  height: 25px;
  width: 25px;
  display: block;
  position: absolute;
  transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
}

.itemtype_1
{
  background-position: 0 0;
}

.itemtype_2
{
  background-position: -25px 0;
}

.itemtype_3
{
  background-position: -50px 0;
}

.itemtype_4
{
  background-position: -75px 0;
}