/* UI ICONS */
.uiIcon {
background-image:url(/static/base/images/ui-icons.png);
height: 40px;
margin-right: 10px;
background-color: #0192d3;
margin-left: 10px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
width: 40px;
line-height: 0;
font-size: 0 !important;
text-indent: -9999;
display: inline-block;
}
.uiIconMedium {
width: 30px;
height: 30px;
}
.uiIcon svg {
width: 18px;
height: 40px;
}
.uiIconMedium svg {
height: 32px;
}

.uiIcon use {
fill:#ffffff;
}
.uiIcon.larger-inner svg {
width: 24px;
height: 40px;
}
.uiIconSmall {
width: 24px;
height: 23px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}
.uiIconBig {
background-color: #ffa800;
width: 50px;
height: 50px;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px
}
.iconLarge {
width: 74px;
height: 70px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
background-color: transparent !important;
}
.uiIconYellow {
background-color:#ffda00 !important;
}
.uiIconRed {
background-color:#cc0000 !important;
}
.header .uiIcon, .header .uiIcon {
background-color:transparent !important;
}
.uiIcon:active {
}
span.uiIcon {
vertical-align: middle;
margin-right: 5px;
text-align: center;
}
.uiIcon.disabled {
opacity: 0.4;
}
.uiIcon.alert {
background-color: #ff0000 !important;
background-position: -65px -260px;
}
.reduceFont {
background-position: -223px -133px;
}
.increaseFont {
background-position: -266px -132px;
}
.readAloud {
background-position: -576px -127px;
background-color: transparent !important;
}
.iconPause {
background-position: -231px -47px;
}
.iconPlay {
background-position: -284px -47px;
}
.iconReplay {
background-position: -125px -47px;
}
.iconBack {
background-position: -73px -47px;
}
.maxVocab {
background-position: -310px -127px;
}
.gamesLink {
background-position: 544px -261px;
}
.chaptersIcon {
background-position: 342px -129px;
}
.incomplete-chapter {
background-position: -457px -329px;
}
.new-chapter {
background-position: -457px -282px;
}
.score-chapter {
background-position: -457px -239px;
}
.homeIcon {
background-position: 676px -129px;
}
.okIcon {
background-position: 630px -383px;
}
.noIcon {
background-position: 675px -386px;
}
.maxreadingIcon {
background-position: 527px -473px;
}
.maxphonicsIcon {
background-position: -574px -727px;
}
.prekphonicsIcon {
background-position: 354px -474px;
}
.maxmusicIcon {
background-position: 577px -471px;
}
.maxvocabIcon {
background-position: 638px -471px;
}
.chartIcon {
background-position: 690px -473px;
}
.outlineIcon {
background-position: 384px -128px;
}
.summaryIcon {
background-position: 256px -128px;
}
.questionIcon {
background-position: 584px -379px;
background-color: #ffa800;
}
.closeWindow {
background-position: -52px -529px;
background-color: transparent !important;
position: absolute;
margin-top: -50px;
right: 0;
margin-right: -30px;
}
.iconOutline.iconLarge {
background-position: -350px -326px;
}
.iconSummary.iconLarge {
background-position: -350px -246px;
}
.header .uiIcon.helpIcon {
background-color: transparent;
background-position: 581px -384px;
margin-right: 0;
}

.roundedButton {
height: 37px;
border-radius: 40px;
line-height: 40px;
min-width: 7em;
display: inline-block;
vertical-align: middle;
color: white;
text-align: center;
padding-left: 0.8em;
font-size: 1.2em;
padding-right: 0.8em;
border: 0;
}
.cyanButton {
background-color:#2EBCBC;
}
.roundedButton.disabled {
   background-color:#a7a9ab;
}
button.roundedButton {
line-height:0;
}
.settingsIcon {
background-position: 201px -137px;
}
.maxplacesIcon {
background-position: 259px -474px;
}
.maxbiosIcon {
background-position: 307px -474px;
}

.orangeButton {
background-color: #ff9f00;
}
.orangeButton:active {
background-color:#fa8631;
}
.blueButton {
background-color:#3366cc;
}
.lightBlueButton {
background-color: #89BEDF;
}
.purpleButton, .purpleIcon {
background-color: #B6388B;
}
.purpleButton:active, .purpleButton.active, .purpleButton.clicked, .purpleIcon:active {
background-color:#9774c6 !important;
}
.crimsonButton {
background-color: #EE8984;
}
.grayButton {
background-color:#999999;
}
.crimsonButton:active, .crimsonButton.active {
background-color:#f15f5f !important;
}
.practiceButton {
margin-left:2em;
margin-right:2em;
}