body
{
  font-family: Helvetice, Arial, sans-serif;  
}

#canvas1Div
{
  margin: auto auto auto auto;
  background-image: url(repository/background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  width: 1366px;
  height: 768px;
  border: solid 5px dodgerblue;
  cursor: none;
  z-index: 1;
}

#canvas1
{
  margin: 100px 100px 0px 100px;
  width: 1166px;
  height: 568px;
  //border: solid 5px dodgerblue;
  //border: none;
  z-index: 2;
}

#menu
{
  visibility: visible;
  background-color: dodgerblue;
  position: absolute;
  height: 300px;
  top: 250px;
  cursor: default;
  
  width: 33%;
  left: 33%;  
  
  border: solid 6px orange;
  border-radius: 4px;
  z-index: 5;
  
  color: orange;
  font-size: 75px;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -user-select: none;
}

#buttons
{
  margin: 30px auto auto auto;
  width: 300px;
  height: 200px;
  text-align:  center;
}

#gameover
{
  visibility: hidden;
  //visibility: visible;
  background-color: dodgerblue;
  position: absolute;
  height: 400px;
  top: 200px;
  cursor: default;
  
  width: 33%;
  left: 33%;  
  
  border: solid 6px orange;
  border-radius: 4px;
  z-index: 5;
  
  color: orange;
  text-align: center;
  font-size: 75px;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -user-select: none;
}

#gameoverText
{
  margin: 10px auto auto auto;
}

#paused
{
  visibility: hidden;
  background-color: dodgerblue;
  position: absolute;
  height: 200px;
  top: 30%;
  cursor: default;
  
  width: 600px;
  left: 33%;  
  
  border: solid 6px orange;
  border-radius: 4px;
  z-index: 3;
  
  color: orange;
  text-align: center;
  font-size: 100px;
  line-height: 200px;
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -user-select: none;
}

.myButton 
{
  margin: auto auto auto;
	-moz-box-shadow:inset 0px 0px 0px 0px #fff6af;
	-webkit-box-shadow:inset 0px 0px 0px 0px #fff6af;
	box-shadow:inset 0px 0px 0px 0px #fff6af;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
	background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
	background-color:#ffec64;
	border:5px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:arial;
	font-size:28px;
	font-weight:bold;
	padding:14px 31px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffee66;
}

.myButton:hover 
{
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
	background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
	background-color:#ffab23;
}

.myButton:active 
{
	position:relative;
	top:1px;
}

#slika
{
  margin: auto auto auto auto;
  width:300px;
  height: 300px;
  text-align:  center;    
}