/*
body{margin:0px;padding:0px;color:white;font-family:微软雅黑;}
html,body{height:100%;width:100%;}
canvas{display:block;}

#myCanvas{
  background:#001022;
}

#myButtons{
  bottom:20px;
  left:20px;
  position:absolute;
}

#myButtons{
  padding:5px;
}

#bar{
  background-color:black;
  width:100%;
  height:120px;
  position:fixed;
  bottom:0px;
}

#buttons{
 float:left;
 height:120px;
 margin-left:50px;
}

#startAnimation{
  display:;
  margin:0px 0px 0px 40px;
}

#startAnimation img{
  width:75px;
}

#stopAnimation{
  display:;
  margin:0px 0px 0px 40px;
}

#stopAnimation img{
  width:75px;
}
#button img{
  width:75px;
  cursor:pointer;
}

#constraint{
   width:400px;
   height:122px;
   margin:0px 150px 0px;
   float:left;
   position:relative;
   left:160px;
}

#bar h1{
   font-size:25px;
   margin:5px;
}

#constraint ul{
   margin:5px;
   padding:0px;
   list-style:none;
}

#timer{
  float:left;
}

#time{
  margin-left:5px;
  font-size:20px;
}

#alertConstraint{
  width:;
  position:fixed;
  top:-120px;
  left:600px;
  background-color:black;
  padding:10px 60px 10px 60px;
}

#alertConstraint h1{
  font-size:25px;
  margin:10px 0px 10px 0px;
}

#countingDown{
  position:fixed;
  top:0px;
  right:0px;
  background-color:black;
  padding:10px 60px 10px 60px;
}

#countingDown h1{
  font-size:25px;
  margin:10px 0px 10px 0px;
}
#countingDown p{
  font-size:25px;
  margin:10px 0px 10px 0px;
}*/
@media only screen and (-moz-min-device-pixel-ratio: 1), only screen and (-o-min-device-pixel-ratio:1/1), 
only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1)
{
  body{margin:0px;padding:0px;color:white;font-family:"Microsoft YaHei";}
  html,body{height:100%;width:100%;}
  canvas{display:block;}
  h1{margin:5px;font-size:25px;}

  #myCanvas{
    background:#224771;
  }



  /*#bar{
    background-color:black;
    width:100%;
    height:120px;
    position:fixed;
    bottom:0px;
  }*/
  /*
  #buttons{
   float:left;
   height:120px;
   margin-left:50px;
  }

  #startAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #startAnimation img{
    width:75px;
  }

  #stopAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #stopAnimation img{
    width:75px;
  }
  #button img{
    width:75px;
    cursor:pointer;
  }
*/
#constraint{
   width:100%;
   height:80px;
   padding:5px;
   position:fixed;
   top:-100px;
   background-color:black;
   margin:0px;
  }

#constraintArea{
   width:230px;
   height:60px;
   display:inline-block;
   /*position:fixed;
   left:0px;
   top:0px;*/
   margin:0px 15px;
}
#constraintArea h1{
   width:200px;
   margin:0px;
}

#constraintArea ul{
   display:200px;
}

#constraint ul{
   margin:0px;
   padding:0px;
   list-style:none;
}
#countingDown{
   display:inline-block;
   font-size:30px;
   padding:0px;
   margin:20px 10px 0px;
   position:absolute;
   right:30px;
   top:5px;
   /*position:fixed;
   right:0px;
   top:0px;*/
}

#timer{
  position:fixed;
  bottom:0px;
  width:100%;
  height:80px;
  background-color:black;
  text-align:center;
}
#timer h1{
 float:left;
 margin-left:30px;
}

#time{
  font-size:20px;
  margin:20px;
}
}
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio:1.5/1), 
only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)
{
  body{margin:0px;padding:0px;color:white;font-family:"Microsoft YaHei";}
  html,body{height:100%;width:100%;}
  canvas{display:block;}
  h1{margin:5px;font-size:25px;}

  #myCanvas{
    background:#224771;
  }



  /*#bar{
    background-color:black;
    width:100%;
    height:120px;
    position:fixed;
    bottom:0px;
  }*/
  /*
  #buttons{
   float:left;
   height:120px;
   margin-left:50px;
  }

  #startAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #startAnimation img{
    width:75px;
  }

  #stopAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #stopAnimation img{
    width:75px;
  }
  #button img{
    width:75px;
    cursor:pointer;
  }
*/
#constraint{
   width:100%;
   height:80px;
   padding:5px;
   position:fixed;
   top:-100px;
   background-color:black;
   margin:0px;
  }

#constraintArea{
   width:230px;
   height:60px;
   display:inline-block;
   /*position:fixed;
   left:0px;
   top:0px;*/
   margin:0px 15px;
}
#constraintArea h1{
   width:200px;
   margin:0px;
}

#constraintArea ul{
   display:200px;
}

#constraint ul{
   margin:0px;
   padding:0px;
   list-style:none;
}
#countingDown{
   display:inline-block;
   font-size:30px;
   padding:0px;
   margin:20px 10px 0px;
   position:absolute;
   right:30px;
   top:5px;
   /*position:fixed;
   right:0px;
   top:0px;*/
}

#timer{
  position:fixed;
  bottom:0px;
  width:100%;
  height:80px;
  background-color:black;
  text-align:center;
}
#timer h1{
 float:left;
 margin-left:30px;
}

#time{
  font-size:20px;
  margin:20px;
}
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio:2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)
{
  body{margin:0px;padding:0px;color:white;font-family:"Microsoft YaHei";}
  html,body{height:100%;width:100%;}
  canvas{display:block;}
  h1{margin:5px;font-size:25px;}

  #myCanvas{
    background:#224771;
  }



  /*#bar{
    background-color:black;
    width:100%;
    height:120px;
    position:fixed;
    bottom:0px;
  }*/
  /*
  #buttons{
   float:left;
   height:120px;
   margin-left:50px;
  }

  #startAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #startAnimation img{
    width:75px;
  }

  #stopAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #stopAnimation img{
    width:75px;
  }
  #button img{
    width:75px;
    cursor:pointer;
  }
*/
#constraint{
   width:100%;
   height:80px;
   padding:5px;
   position:fixed;
   top:-100px;
   background-color:black;
   margin:0px;
  }

#constraintArea{
   width:230px;
   height:60px;
   display:inline-block;
   /*position:fixed;
   left:0px;
   top:0px;*/
   margin:0px 15px;
}
#constraintArea h1{
   width:200px;
   margin:0px;
}

#constraintArea ul{
   display:200px;
}

#constraint ul{
   margin:0px;
   padding:0px;
   list-style:none;
}
#countingDown{
   display:inline-block;
   font-size:30px;
   padding:0px;
   margin:20px 10px 0px;
   position:absolute;
   right:30px;
   top:5px;
   /*position:fixed;
   right:0px;
   top:0px;*/
}

#timer{
  position:fixed;
  bottom:0px;
  width:100%;
  height:80px;
  background-color:black;
  text-align:center;
}
#timer h1{
 float:left;
 margin-left:30px;
}

#time{
  font-size:20px;
  margin:20px;
}
}
@media only screen and (-moz-min-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio:3/1), 
only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-device-pixel-ratio: 3)
{
  body{margin:0px;padding:0px;color:white;font-family:"Microsoft YaHei";}
  html,body{height:100%;width:100%;}
  canvas{display:block;}
  h1{margin:5px;font-size:25px;}

  #myCanvas{
    background:#224771;
  }



  /*#bar{
    background-color:black;
    width:100%;
    height:120px;
    position:fixed;
    bottom:0px;
  }*/
  /*
  #buttons{
   float:left;
   height:120px;
   margin-left:50px;
  }

  #startAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #startAnimation img{
    width:75px;
  }

  #stopAnimation{
    display:;
    margin:0px 0px 0px 40px;
  }

  #stopAnimation img{
    width:75px;
  }
  #button img{
    width:75px;
    cursor:pointer;
  }
*/
#constraint{
   width:100%;
   height:80px;
   padding:5px;
   position:fixed;
   top:-100px;
   background-color:black;
   margin:0px;
  }

#constraintArea{
   width:230px;
   height:60px;
   display:inline-block;
   /*position:fixed;
   left:0px;
   top:0px;*/
   margin:0px 15px;
}
#constraintArea h1{
   width:200px;
   margin:0px;
}

#constraintArea ul{
   display:200px;
}

#constraint ul{
   margin:0px;
   padding:0px;
   list-style:none;
}
#countingDown{
   display:inline-block;
   font-size:30px;
   padding:0px;
   margin:20px 10px 0px;
   position:absolute;
   right:30px;
   top:5px;
   /*position:fixed;
   right:0px;
   top:0px;*/
}

#timer{
  position:fixed;
  bottom:0px;
  width:100%;
  height:80px;
  background-color:black;
  text-align:center;
}
#timer h1{
 float:left;
 margin-left:30px;
}

#time{
  font-size:20px;
  margin:20px;
}
}