@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.ttf');
	src:url('../fonts/icomoon.eot@n17u11') format('embedded-opentype'),
		url('../fonts/icomoon.ttf@n17u11') format('truetype'),
		url('../fonts/icomoon.woff@n17u11') format('woff'),
		url('../fonts/icomoon.svg?n17u11') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-clock:before {
	content: "\e601";
}
.icon-alarm:before {
	content: "\e602";
}
.icon-plus:before {
	content: "\e603";
}
.icon-minus:before {
	content: "\e604";
}
.icon-cancel-circle:before {
	content: "\e605";
}
.icon-play2:before {
	content: "\e606";
}
.icon-pause:before {
	content: "\e607";
}

.fs0 {
	font-size: 16px;
}
.fs1 {
	font-size: 32px;
}

.fs2 {
	font-size: 50px;
}


body {
    background-color: #457e86;
    padding-top: 50px;

		   -moz-user-select: none;
		-webkit-user-select: none;
		    -ms-user-select: none;
		        user-select: none;
}

.topbar {
  background-color: rgba(0,0,0,0.1);
  position: fixed;
  top: 0px;
  left: 0px;
  height: 30px;
  width: 100%;
  z-index: 1000;
	box-shadow: 0px 3px 3px #033;
	-webkit-box-shadow: 0px 3px 3px #033;
	color: #eee;
	font-family: 'open sans';
	font-size: 21px;
}

canvas {
   display : block;
   margin : auto;
   z-index: 1;
   position: absolute;
}

#counterCanvas {
  width: 350px;
  height: 350px;
  position: relative;
  margin: 0 auto;
}

#counterControls {
  position: absolute;
  margin: 0 auto;
  z-index: 2;
  height: 350px;
  width: 100%;
}

#spacer {
  height: 115px;
  width: 100%;
  color: #033;
  padding-top: 60px;
}

#sessionTimeDiv {
	font-family: 'open sans';
	font-size: 45px;
	text-shadow: 1px 1px 2px #033;
  height: 50px;
  width: 100%;
  color: #6c6;
}

#breakTimeDiv {
	font-family: 'open sans';
	font-size: 45px;
	text-shadow: 1px 1px 2px #033;
  height: 50px;
  width: 100%;
  color: #c66;
	padding-top: 15px;
}

#controls {
  height: 70px;
  width: 100%;
  color: #72aab3;
  padding-top: 5px;
}

#cancel {
  padding-right: 40px;
}

#play_pause {
  padding-left: 40px;
}

#setTimes {
  height: 50px;
  width: 100%;
  padding-top: 6px;
  color: #72aab3;
}

.icon-plus, .icon-minus {
	color: #72aab3;
	text-shadow: 0px 0px 0px #033;
}