.circleButton {
  border-style: solid;
  border-width: 1px;
  border-radius: 15px;
  border-color: #ccc;
  width: 30px;
  height: 30px;
  transition: border-color 0.4s, background-color 0.4s, opacity 0.4s, border-style 0.4s, box-shadow 0.4s, transform 0.4s;
  cursor: pointer;
  background-color: transparent;
  opacity: 1;
}
.circleButton.green { border-color: #006600; }
.circleButton.red { border-color: #800000; }
.circleButton.blue { border-color: #336699; }

.circleButton.small { width: 20px; height: 20px; }
.circleButton.large { width: 37px; height: 37px; }

.circleButton.clear { border-style: none; }

.circleButton:disabled {
	border-style: solid;
	border-color: #595959;
	cursor: auto;
}

.circleButton:hover { border-color: #595959; border-style: solid; box-shadow: 0 0px 1px #595959; }
.circleButton.clear:hover { border-style: none; box-shadow: none; }
.circleButton:disabled:hover { box-shadow: none; }
.circleButton.blackHover:hover { border-color: rgba(0,0,0,0.7); }

.circleButton.selected { background-color: #336699; border-style: none; }
.circleButton.highLight { box-shadow: 0 0px 7px #ccc; }
.circleButton.shadow { box-shadow: 0 0px 5px #595959; background-color: rgba(0,0,0,0.3); }
.circleButton.shadow:hover { box-shadow: 0 0px 5px #ccc; }
.circleButton.selected:hover { background-color: rgba(89, 89, 89, 0.8); }
.circleButton.selected.highLight:hover { background-color: #3f7fc0; }

.circleButton.icon { background-image: url("jpeg/strip1_strip33.png"); background-size: 1420px 35px; }
.circleButton.icon.small { background-size: 1024px 26px; }
.circleButton.icon.large { background-size: 2410px 49px; }

.circleButton.menu { background-position: -618px -2px; background-size: 1816px 35px; }
.circleButton.menu:hover { background-position: -563px -2px; }

.circleButton.plus { background-position: -782px -3px; }
.circleButton.plus:hover { background-position: -739px -3px; }

.circleButton.minus { background-position: -567px -3px; }
.circleButton.minus:hover { background-position: -524px -3px; }

.circleButton.search { background-position: -1388px -3px; background-size: 1816px 35px; }
.circleButton.search:hover { background-position: -1333px -3px; }

.circleButton.settings { background-position: -1254px -3.5px; background-size: 1420px 35px; }
.circleButton.settings:hover { background-position: -1211px -3.5px; }

.circleButton.play { background-position: -837px -4px; background-size: 1816px 37px; }
.circleButton.play:hover { background-position: -782px -4px; }
.circleButton.play:disabled { background-position: -782px -4px; }

.circleButton.stop { background-position: -1774px -2px; background-size: 1816px 32px; }
.circleButton.stop:hover { background-position: -1664px -2px; }

.circleButton.upArrow { background-position: -2215px -5px; background-size: 2675px 60px; }
.circleButton.upArrow:hover { background-position: -2134px -5px; }

.circleButton.eye { background-position: -93px -4px; }
.circleButton.eye.small { background-position: -67px -2px; background-size: 1024px 23px; }
.circleButton.eye.blue { background-position: -7px -4px; }
.circleButton.eye.blue.small { background-position: -5px -2px; }
.circleButton.eye:hover { background-position: -50px -4px; }
.circleButton.eye.small:hover { background-position: -36px -2px; }

.circleButton.info { background-position: -179px -3.5px; }
.circleButton.info.small { background-position: -636px -14px; background-size: 4721px 70px; }
.circleButton.info:hover { background-position: -136px -3.5px; }
.circleButton.info.small:hover { background-position: -493px -14px; }

.circleButton.remove { background-position: -868px -4px; }
.circleButton.remove.small { background-position: -627px -4px; }
.circleButton.remove.large { background-position: -1480px -7px; }
.circleButton.remove.red { background-position: -911px -4px; }
.circleButton.remove.red.small { background-position: -658px -4px; }
.circleButton.remove.red.large { background-position: -1553px -7px; }
.circleButton.remove:hover { background-position: -825px -4px; }
.circleButton.remove.small:hover { background-position: -596px -4px; }
.circleButton.remove.large:hover { background-position: -1407px -7px; }

@media (max-width: 1500px) {
  .circleButton.tmpSmall { width: 20px; height: 20px; }
  .circleButton.remove.tmpSmall { background-position: -627px -4px; background-size: 1024px 26px; }
  .circleButton.remove.red.tmpSmall { background-position: -658px -4px; }
  .circleButton.remove.tmpSmall:hover { background-position: -596px -4px; }
}


.circleButton.loop { background-position: -276px -1px; background-size: 1288px 32px; }
.circleButton.loop.blue { background-position: -198px -1px; }
.circleButton.loop:hover { background-position: -237px -1px; }

.circleButton.reset { background-position: -1000px -4px; }
.circleButton.reset:hover { background-position: -957px -4px; }

.circleButton.checkmark { background-position: -394px -3.5px; background-size: 1420px 35px;}
.circleButton.checkmark:hover { background-position: -351px -3.5px; }