body {-webkit-touch-callout: none;}

#TouchControl {display: none; pointer-events: none; position: absolute; vertical-align: bottom; bottom: 0px; left: 0px; height: 110px; width: 100%; z-index: 249; -webkit-touch-callout: none; -webkit-user-drag: none; -webkit-user-select: none; user-select: none;}
.iOS #TouchControl.On {display: block; pointer-events: auto;}
.iOS #TitleBar {position: absolute;}

.iOS .TouchButton {user-select: none; display: none; opacity: 0.9; margin: 5px; text-align: center; padding-top: 40px; box-sizing: border-box; border-radius: 100px; width: 100px; height: 100px; background: rgba(250, 250, 250, 0.3); background: radial-gradient(ellipse at center, rgba(91,91,91,1) 14%,rgba(102,102,102,1) 41%,rgba(102,102,102,1) 54%,rgba(76,76,76,1) 69%,rgba(0,0,0,1) 100%); font-size: 30pt; line-height: 0.5; color: rgba(255,255,255,0.5); -webkit-user-select: none; user-select: none !important; -webkit-touch-callout: none; -webkit-user-drag: none;}
    #LeftDirectionButton {padding-right: 10px;}
    #RightDirectionButton {padding-left: 10px;}
    #JumpButton span {display: inline-block; margin-top: -6px; font-size: 40pt;}
    #ReplayWordTouchIcon {display: inline-block; margin-top: -16px; width: 50px; height: 50px; background-size: contain; background-position: center; opacity: 0.5; background-image: url("graphics/icons/say.png");}
    .Touch .TouchButton span.Grey {filter: grayscale(1) brightness(2);}
    .Touch .TouchButton span {pointer-events: none !important; user-select: none !important; -webkit-touch-callout: none; -webkit-user-drag: none;}
    .Touch .TouchButton.On {display: inline-block;}
    .Touch #DirectionPad.On {display: inline-table; padding-top: 0px; border-radius: 100px; width: 100px; height: 100px;}
        .Touch .DirectionPadRow {width: 100%; height: 33.33%; display: table-row;}
        .Touch .DirectionPadCell {font-size: 20pt; width: 33.33%; height: 33.33%; display: table-cell; text-align: center; vertical-align: middle;}
    .Touch .Left {float: left;}
    .Touch .Right {float: right;}
    .TouchButton.Active {filter: brightness(0.8);}

.iOS .GameItemTitle {text-shadow: 1px 1px black, 2px 2px black, 3px 3px black;}
.iOS #TitleScreen {height: 720px;}
.iOS #TitleScreenBackground {width: calc(102%); left: -0.5%; top: -0.5%;}
    .iOS .TitleScreenControls {display: none;}
    .iOS .TitleScreenCopyrightText {bottom: 10px;}
.iOS .SpellingTiles #Grid, .iOS .FreeSpell #Grid {top: 0px;}
.iOS .SpellingTiles #Graphics, .iOS .FreeSpell #Graphics, .iOS .IFrame #Graphics {height: 720px !important; overflow: visible;}
.iOS .Archery #Cursor {opacity: 0;}
.iOS .Archery .Target .Text.Hover {opacity: 1;}

.iOS .PlatformSeries #World {overflow-y: hidden;}

.iOS .Adventure .ArcticNight #Background2, .Touch .Adventure .ArcticNight #Background4 {display: none;}
.iOS .Adventure .ArcticNight #Background3 {--left: -50px;}

/* Hack for iPad not showing Shield and Scores in Race and Horse */
.iOS .RaceSeries #ShieldStatus {top: 2px !important; margin-left: -28% !important;}
.iOS .RaceSeries #ScoreStatus {top: 2px !important; right: 90px; left: unset;}
.iOS .Horse #ShieldStatus {top: 2px !important; margin-left: -34% !important;}
.iOS .Horse #ScoreStatus {top: 2px !important; right: 5px; left: unset;}

.iOS .GamePadder {display: none;}
.iOS .Section {text-align: left; display: inline-flex; flex-wrap: wrap; justify-content: center;}
.iOS .Section p, .iOS .Section h1, .iOS .Section h2, .iOS .Section h3 {text-align: center; width: 100%;}

/* .iOS .Literacy .SpellingPractice #KeyEnter, .iOS .Literacy .Assessment #KeyEnter {position: relative; top: -304px; left: -90px;} */
.iOS .Literacy .SpellingPractice #KeyboardAnswerBox, .iOS .Literacy .Assessment #KeyboardAnswerBox {--left: 178px;}

/* Smallest Device */
@media only screen 
    and (min-width: 0px) and (max-width: 344px) {
    #TitleBarIcon {display: none;}
    #TitleBarText {display: none;}
    .Link {padding: 0px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
    #GameControlButtons .RoundButton {margin: 0px;}
    #TeachersButton, #ParentsButton, #ProgressButton, #AboutButton {display: none !important;}
    .GameItemTitle {font-size: 19pt;}
    .Touch .TouchButton {width: 50px; height: 50px; font-size: 15pt; padding-top: 20px;}
    .iOSApp.Touch .TouchButton {width: 68px; height: 68px; font-size: 20pt; padding-top: 28px;}
    #ReplayWordTouchIcon {width: 25px; height: 25px; margin-top: -8px;}
    #JumpButton span {font-size: 15pt;}
    .iOSApp.Touch #JumpButton span {font-size: 24pt;}
    .Touch #DirectionPad.On {width: 50px; height: 50px;}
    .Touch .DirectionPadCell {font-size: 10pt;}
    #ReplayWordButton {display: none;}
    #ChangeSkinButton {display: none; margin-right: 5px; padding-top: 21px;}
    #ChangeSkinButton span {width: 25px; height: 25px;}
}


/******************** TitleBar ********************/

/* Squeeze TitleBar. Remove All TitleBar Text. Shrink Logo. Hide ProgressButton. */
@media only screen 
    and (min-width: 344px) and (max-width: 382px) {
    #TitleBarIcon {margin: 0px 2px 0px 0px; pointer-events: none; border-radius: 4px;}
    #TitleBarText {display: none;}
    .Link {padding: 0px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
    #GameControlButtons .RoundButton {margin: 0px;}
    #TeachersButton, #ParentsButton, #ProgressButton {display: none !important;}
    .GameItemTitle {font-size: 19pt;}
    .Touch .TouchButton {width: 50px; height: 50px; font-size: 15pt; padding-top: 20px;}
    .iOSApp.Touch .TouchButton {width: 68px; height: 68px; font-size: 20pt; padding-top: 28px;}
    #ReplayWordTouchIcon {width: 25px; height: 25px; margin-top: -8px;}
    #JumpButton span {font-size: 15pt;}
    .iOSApp.Touch #JumpButton span {font-size: 24pt;}
    .Touch #DirectionPad.On {width: 50px; height: 50px;}
    .Touch .DirectionPadCell {font-size: 10pt;}
    #ReplayWordButton {display: none;}
    #ChangeSkinButton {display: none; margin-right: 5px; padding-top: 21px;}
    #ChangeSkinButton span {width: 25px; height: 25px;}
}

/* Squeeze TitleBar. Remove All TitleBar Text. Shrink Logo. */
@media only screen 
    and (min-width: 382px) and (max-width: 454px) {
    #TitleBarIcon {margin: 0px 2px 0px 0px; pointer-events: none; border-radius: 4px;}
    #TitleBarText {display: none;}
    .Link {padding: 0px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
    #GameControlButtons .RoundButton {margin: 0px;}
    #TeachersButton, #ParentsButton {display: none;}
    .GameItemTitle {font-size: 19pt;}
    .Touch .TouchButton {width: 50px; height: 50px; font-size: 15pt; padding-top: 20px;}
    .iOSApp.Touch .TouchButton {width: 68px; height: 68px; font-size: 20pt; padding-top: 28px;}
    #ReplayWordTouchIcon {width: 25px; height: 25px; margin-top: -8px;}
    #JumpButton span {font-size: 15pt;}
    .iOSApp.Touch #JumpButton span {font-size: 24pt;}
    .Touch #DirectionPad.On {width: 50px; height: 50px;}
    .Touch .DirectionPadCell {font-size: 10pt;}
    #ReplayWordButton {display: none;}
    #ChangeSkinButton {display: none; margin-right: 5px;}
    #ChangeSkinButton span {width: 25px; height: 25px;}
}

/* Squeeze TitleBar. Remove All TitleBar Text. Shrink Logo. */
@media only screen 
    and (min-width: 454px) and (max-width: 474px) {
    #TitleBarIcon {margin: 0px 2px 0px 0px; pointer-events: none; border-radius: 4px;}
    #TitleBarText {display: none;}
    .Link {padding: 0px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
    #GameControlButtons .RoundButton {margin: 0px;}
    .GameItemTitle {font-size: 19pt;}
    .Touch .TouchButton {width: 50px; height: 50px; font-size: 15pt; padding-top: 20px;}
    .iOSApp.Touch .TouchButton {width: 68px; height: 68px; font-size: 20pt; padding-top: 28px;}
    #ReplayWordTouchIcon {width: 25px; height: 25px; margin-top: -8px;}
    #JumpButton span {font-size: 15pt;}
    .iOSApp.Touch #JumpButton span {font-size: 24pt;}
    .Touch #DirectionPad.On {width: 50px; height: 50px;}
    .Touch .DirectionPadCell {font-size: 10pt;}
    #ReplayWordButton {display: none;}
    #ChangeSkinButton {margin-right: 5px; padding-top: 21px;}
    #ChangeSkinButton span {width: 25px; height: 25px;}
}

/* Squeeze TitleBar. Remove All TitleBar Text */
@media only screen 
    and (min-width: 474px) and (max-width: 688px) {
    #TitleBarIcon {margin: 0px 6px 0px 0px;}
    #TitleBarText {display: none;}
    .Link {padding: 0px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
    #GameControlButtons .RoundButton {margin: 0px;}
    .GameItemTitle {font-size: 19pt;}
    .Touch .TouchButton {width: 50px; height: 50px; font-size: 15pt; padding-top: 20px;}
    .iOSApp.Touch .TouchButton {width: 68px; height: 68px; font-size: 20pt; padding-top: 28px;}
    #ReplayWordTouchIcon {width: 25px; height: 25px; margin-top: -8px;}
    #JumpButton span {font-size: 15pt;}
    .iOSApp.Touch #JumpButton span {font-size: 24pt;}
    .Touch #DirectionPad.On {width: 50px; height: 50px;}
    .Touch .DirectionPadCell {font-size: 10pt;}
    #ChangeSkinButton {margin-right: 5px; padding-top: 21px;}
    #ChangeSkinButton span {width: 25px; height: 25px;}
}

/* Squeeze TitleBar. Remove Link Text. Squeeze Icons */
@media only screen 
    and (min-width: 688px) and (max-width: 726px) {
    #TitleBarIcon {margin: 0px 6px 0px 0px;}
    #TitleBarText {margin-right: 4px;}
    .GameItemTitle {font-size: 19pt;}
    .Link {padding: 0px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
    #GameControlButtons .RoundButton {margin: 0px;}
}

/* Squeeze TitleBar. Remove Link Text */
@media only screen 
    and (min-width: 726px) and (max-width: 820px) {
    #TitleBarIcon {margin: 0px 6px 0px 0px;}
    #TitleBarText {margin-right: 4px;}
    .GameItemTitle {font-size: 19pt;}
    .Link {padding: 0px 4px;}
    .GamesText {display: none;}
    .LinkText {display: none;}
}

/* Squeeze TitleBar. Remove Link Icons */
@media only screen 
    and (min-width: 820px) and (max-width: 1045px) {
    #TitleBarIcon {margin: 0px 6px 0px 0px;}
    #TitleBarText {margin-right: 4px;}
    .GameItemTitle {font-size: 19pt;}
    .Link {padding: 0px 4px;}
    .Link img {display: none;}
    .GamesText {display: none;}
    .Touch .KeypadKey {margin-left: 1px; margin-right: 1px;}
}

/* Squeeze TitleBar more. */
@media only screen 
    and (min-width: 1045px) and (max-width: 1085px) {
    #TitleBarIcon {margin: 0px 6px 0px 0px;}
    #TitleBarText {margin-right: 4px;}
    .Link {padding: 0px 4px;}
    .LinkText {font-size: 10pt;}
}

/* Squeeze TitleBar */
@media only screen 
    and (min-width: 1085px) and (max-width: 1194px) {
    #TitleBarIcon {margin: 0px 6px 0px 4px;}
    #TitleBarText {margin-right: 4px;}
    .Link {padding: 0px 8px;}
    .LinkText {font-size: 10pt;}
}


/******************** Maths SubToolBar ********************/

/* Squeeze Maths SubToolBar */
@media only screen 
    and (max-width: 1172.5px) {
    #SubToolBar .Toolbar {min-width: unset;}
    .Maths #SubToolBar .ToolbarButton {padding-left: 3px; padding-right: 3px;}
}

/* Squeeze Maths SubToolBar and wrap items */
@media only screen 
    and (max-width: 1082px) {
    #SubToolBar .Toolbar {min-width: unset;}
    .Maths #SubToolBar .ToolbarButton {padding-top: 0px;}
}

/* Squeeze Maths SubToolBar */
@media only screen 
    and (max-width: 622.5px) {
    .Maths #SubToolBar .Toolbar {min-width: unset;}
    .Maths #SubToolBar .ToolbarButton {padding-top: 0px; padding-left: 1.5px; padding-right: 1.5px;}
}



/******************** Spelling SubToolBar ********************/

/* Squeeze Spelling SubToolBar */
@media only screen 
    and (max-width: 841px) {
    .Literacy #SubToolBar .Toolbar {min-width: unset; max-width: 841px;}
    .Literacy #SubToolBar .Toolbar .ToolbarButton {padding-top: 0px;}
}


/******************** Teacher SubToolBar ********************/

/* Squeeze Teacher SubToolBar */
@media only screen 
    and (max-width: 833px) {
    .TeachersPage #TeachersNavigationBar .Toolbar {min-width: 453px; width: calc(100% - 70px); margin-left: 70px;}
    .TeachersPage #TeachersNavigationBar .Toolbar .ToolbarButton {padding-top: 0px; padding-left: 1.5px; padding-right: 1.5px;}
    .TeachersPage #TeachersNavigationBar .Toolbar .ToolbarButton img {display: none;}
}

/* Squeeze Teacher SubToolBar */
@media only screen 
    and (max-width: 1100px) {
    .TeachersPage #TeachersNavigationBar .Toolbar {min-width: 453px; width: calc(100% - 70px); margin-left: 70px;}
    .TeachersPage #TeachersNavigationBar .Toolbar .ToolbarButton {padding-left: 1.5px; padding-right: 1.5px;}
    .TeachersPage #TeachersNavigationBar .Toolbar .ToolbarButton img {display: none;}
}

/* Squeeze Teacher SubToolBar */
@media only screen 
    and (max-width: 1200px) {
    .TeachersPage #TeachersNavigationBar .Toolbar {min-width: 453px; width: calc(100% - 70px); margin-left: 70px;}
    .TeachersPage #TeachersNavigationBar .Toolbar .ToolbarButton {padding-left: 1.5px; padding-right: 1.5px;}
}

/* Squeeze Teacher SubToolBar */
@media only screen {
    .TeachersPage #TeachersNavigationBar .Toolbar {min-width: 453px; width: calc(100% - 70px); margin-left: 70px;}
}

/* Hide Padder when down to one GameItem per row */
@media only screen 
    and (max-width: 440px) {
    .GamePadder {display: none !important;}
}