body {
	background-image:url('taust.jpg');
}

.vasak {
	float: left;
}

.parem { 
	float: right;
	width: 200px;

}

.big {
	/*width: 620px;	*/
	height:auto;
	margin: 70px auto;
	padding: 10px;
	border-radius: 2%;
	float: right;
	position: relative;
}


.small {
    height: 40px;
    width: 40px;
    float: left;
    border: 1px solid #404040;
    border-radius: 10%;
    position: relative;

}

.highlighted {
   border: 1px solid #ffffff;
}

h4 {
   color: white;
   font-family: Arial, Garamond, Verdana;
   margin: 10px 10px 0 15px;

}

.must {
	width: 200px;
	height:290px;
	background-color: #141414;
	position: absolute;
	top: 0px;
	right: 10%;
	border-bottom-right-radius: 5%;
	border-bottom-left-radius: 5%; 
}

.spectro p {
	font-family: 'Pacifico', 'Arial', cursive;
	font-size: 48px;
	color: white;
	text-align: center;
	margin: 0 auto;
}

.counter p {
	font-family: Arial;
	font-size: 10;
	color: white; 
	margin: 0 10px 0 15px;
}


.stopwatch {
	position: absolute;
	top: 190px;
}

.tutorial {
	font-family: Arial;
	font-size: 1em;
	color: white;
	margin: 0 10px 0 15px;
}

.buttons {
	margin: 20px 0 0 15px;
}

#start {
   border: 1px solid #3D3D3D;
   background: #5E5E5E;
   background: -webkit-gradient(linear, left top, left bottom, from(#4A4A4A), to(#9e9e9e));
   background: -webkit-linear-gradient(top, #5E5E5E, #9e9e9e);
   background: -moz-linear-gradient(top, #5E5E5E, #9e9e9e);
   background: -ms-linear-gradient(top, #5E5E5E, #9e9e9e);
   background: -o-linear-gradient(top, #5E5E5E, #9e9e9e);
   padding: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;   
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Arial;
   text-decoration: none;
   vertical-align: middle;
   }
#start:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#start:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

#stop {
   border: 1px solid #3D3D3D;
   background: #5E5E5E;
   background: -webkit-gradient(linear, left top, left bottom, from(#5E5E5E), to(#9e9e9e));
   background: -webkit-linear-gradient(top, #5E5E5E, #9e9e9e);
   background: -moz-linear-gradient(top, #5E5E5E, #9e9e9e);
   background: -ms-linear-gradient(top, #5E5E5E, #9e9e9e);
   background: -o-linear-gradient(top, #5E5E5E, #9e9e9e);
   padding: 5px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Arial;
   text-decoration: none;
   vertical-align: middle;
   }
#stop:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#stop:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.pause {
   background: #28597a !important;
}
   

@media (max-width: 768px) {
	.big {
	margin-top: 40px;
	}
  .must {
    position: initial !important;
    width:100%;
    height: auto;
    padding-bottom: 10px;
  }
  .must .spectro {
    margin-bottom: 20px;
  }
  .must .stopwatch {
  	position: initial;
  	overflow: auto;
  }
  .must .stopwatch h4 {
  	float: left;
  }
   .must .stopwatch .buttons {
     float:right;
     margin: 6px 10px 0 15px;
   }
}