/* INFO/HELP BLUE CIRCLE
 *
 * Provides the style for the FrogOS blue circle with an 'i' (or sometimes a '?')
 * Classes:
 *      .os-circle-generic: provides the blue circle icon with no text
 *      .os-circle-info: as above but appends the italicised 'i'
 *      .os-circle-help: as above but a bold, not-italicised '?'
 */
.os-circle-generic {
  background: #00aae5;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 13pt;
  margin-left: 5px;
  padding-top: 2px;
  text-align: center;
  width: 22px;
  height: 20px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 1px -2px rgba(0, 0, 0, 0.05);
  text-shadow: 0px -1px 4px #444444;
  filter: dropshadow(color=#444444, offx=0, offy=-1);
}
.os-circle-info {
  background: #00aae5;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 13pt;
  margin-left: 5px;
  padding-top: 2px;
  text-align: center;
  width: 22px;
  height: 20px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 1px -2px rgba(0, 0, 0, 0.05);
  text-shadow: 0px -1px 4px #444444;
  filter: dropshadow(color=#444444, offx=0, offy=-1);
  font-family: serif;
  font-style: italic;
  font-weight: bold;
}
.os-circle-info:after {
  content: 'i';
}
.os-circle-help {
  background: #00aae5;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-size: 13pt;
  margin-left: 5px;
  padding-top: 2px;
  text-align: center;
  width: 22px;
  height: 20px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.15), 0 1px -2px rgba(0, 0, 0, 0.05);
  text-shadow: 0px -1px 4px #444444;
  filter: dropshadow(color=#444444, offx=0, offy=-1);
  font-family: sans;
}
.os-circle-help:after {
  content: '?';
}
.ie9 .os-circle-info,
.ie9 .os-circle-help {
  filter: none;
}
/* CIRCLED TICK
 * Provides styling for the FrogOS tick within a circle
 *
 * Classes:
 *      .os-circled-tick: default grey (unselected) tick
 *      &.active: green (selected) tick
 *      &.small: smaller version
 */
.os-circled-tick {
  background: url('../../../public/icon/UI/icons.png?v=2410_0_1') no-repeat;
  background-position: -449px -129px;
  display: inline-block;
  width: 27px;
  height: 27px;
}
.os-circled-tick.small {
  background-position: -364px -208px;
  width: 20px;
  height: 20px;
}
.os-circled-tick.active {
  background-position: -402px -234px;
}
.os-circled-tick.active.small {
  background-position: -364px -182px;
}