#htmlHelpPageElm::-webkit-scrollbar { -webkit-appearance: none; }
#htmlHelpPageElm::-webkit-scrollbar:vertical { width: 12px; }
#htmlHelpPageElm::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #cccccc; }
#htmlHelpPageElm::-webkit-scrollbar-track { border-radius: 10px; background-color: #cccccc; }

body { text-align: center; }
#logo { margin: -10px 0 22px 0; }
#logo img { width: 70%; height: auto; }
#topSlide { width: 90%; margin: -40px auto 28px auto; }

#symbolsSlide { width: 90%; margin: 0 auto; color: #f4c024; }
#symbolsSlide h2 { margin: 0; color: #ffeb00; font-size: 2em; text-shadow: -1px 0 #db597e, 0 1px #db597e, 1px 0 #db597e, 0 -1px #db597e; filter: shadow(color=#db597e, Direction=240); text-decoration: underline; }
.symbolBlock { display: inline-block; }
.symbolImage { position: relative; display: inline-block; }
.symbolImage img { width: 100%; height: 100%; }
.symbolNumbers { display: inline-block; vertical-align: top; text-align: left; }

.symbolBlockMiddle { margin: 0 auto; }
#symbolWildBlock { width: 872px; height: 146px; margin: 0 auto; transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0); background: url("../Mobile/Real_Money/SD/Menu/Generic/Bonus_Help/Wild_Help_BG.png") no-repeat; background-size: contain; }
#symbolImageWildWild { position: absolute; }
#symbolImageWildWild img { width: 102px; height: 102px; }
#symbolImageWildBonus { position: absolute; }
#symbolImageWildBonus img { width: 102px; height: 102px; }
#symbolImageWildScatter { position: absolute; }
#symbolImageWildScatter img { width: 102px; height: 102px; }
#symbolImageWildSuperWild { position: absolute; }
#symbolImageWildSuperWild img { width: 102px; height: 102px; }
#symbolWildText { position: absolute; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; filter: shadow(color=#bbb, Direction=120); display: inline-block; }
		
.separator { }
		
.helpSlide { position: relative; height: auto; width: 100%; color: white; display: block; }
.helpSlide h2 { margin: 0 0 14px 0; color: #ffeb00; font-size: 2em; text-shadow: -1px 0 #db597e, 0 1px #db597e, 1px 0 #db597e, 0 -1px #db597e; filter: shadow(color=#db597e, Direction=240); text-decoration: underline; }
.topText { font-size: 0.95em; color: white; margin: 0 auto; width: 98%; display: block; }
.featureText { font-size: 0.95em; color: white; margin: 0 auto; width: 56%; display: block; }
		
.featureImageSide { width: 166px; height: 321px; transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0); color: #ffeb00; display: inline-block; }
.featureImageScreen { transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0); margin: 0 auto; }
.featuresImageText { margin: 0 auto; padding: 0 16px 0 16px; }

/*.outline { position: absolute; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; filter: shadow(color=#bbb, Direction=120); }*/
.white { color: white; }

#superWildTitle { position: absolute; top: 128px; left: 32px; }
#superWildText { position: absolute; top: 150px; left: 12px; width: 140px; }
#freeSpinsTitle { position: absolute; top: 128px; left: 36px; }
#freeSpinsText { position: absolute; top: 150px; left: 12px; width: 140px; font-size: 0.95em; }
#freeSpinsText2 { position: absolute; top: 219px; left: 12px; width: 140px; font-size: 0.85em; }
#candyBombTitle { position: absolute; top: 128px; left: 28px; }
#candyBombText { position: absolute; top: 150px; left: 12px; width: 140px; font-size: 0.9em; }
#lollipopBonusTitle { position: absolute; top: 128px; left: 12px; }
#lollipopBonusText { position: absolute; top: 150px; left: 12px; width: 140px; font-size: 0.85em; }

#featureSuperWild { background: url("../Mobile/Real_Money/SD/Menu/Generic/Super_Wild_Help/Expanding_Wild_BG.png") no-repeat; background-size: contain; }
#featureFreeSpins { background: url("../Mobile/Real_Money/SD/Menu/Generic/Free_Spins_Bonus_Help/Free_Spins_BG.png") no-repeat; background-size: contain; }
#featureCandyBomb { background: url("../Mobile/Real_Money/SD/Menu/Generic/Candy_Bomb_Bonus_Help/Candy_Bomb_Bonus_BG.png") no-repeat; background-size: contain; }
#featureLollipopBonus { background: url("../Mobile/Real_Money/SD/Menu/Generic/Lollipop_Bonus_Help/Bonus_Game_BG.png") no-repeat; background-size: contain; }

#payLinesSlide { width: 90%; margin: 0 auto; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0); -o-transform: translate(0,0); }
#payLinesSlide h2 { margin: 0 0 14px 0; color: #ffeb00; font-size: 2em; text-shadow: -1px 0 #db597e, 0 1px #db597e, 1px 0 #db597e, 0 -1px #db597e; filter: shadow(color=#db597e, Direction=240); text-decoration: underline; }
.payLineBlock { display: inline-block; }
.payLineBlock img {}

#endImage {}

#gameVersion { margin: 0 0 40px 0; }
		
@media screen and (min-width: 960px) {
.symbolBlock { margin: 20px 0 0 0; }
.symbolBlockMiddle { margin: 20px 0 0 0; }
.symbolImage { width: 128px; height: 128px; }
.symbolNumbers { width: 76px; height: 100px; font-size: 1.3em; margin: 0 12px 0 0; padding: 28px 0 0 0; }

.separator { margin: 80px 0 60px 0; }
.featureImageSide { margin: 10px auto; }
.featureImageScreen { width: 650px; height: 370px; }

#symbolWildBlock { width: 580px; height: 96px; }
#symbolImageWildWild { top: 6px; left: 18px; }
#symbolImageWildBonus { top: 6px; left: 348px; }
#symbolImageWildScatter { top: 6px; left: 440px; }
#symbolImageWildSuperWild { top: 6px; left: 532px; }
#symbolWildText { top: 20px; left: 76px; /*top: 27px; left: 122px;*/ width: 236px; font-size: 1.1em; }

.featuresImageText { width: 95%; height: auto; /*272px;*/ }

#featureSuperWild { width: 650px; height: 370px; }
#featureFreeSpins { width: 650px; height: 370px; }
#featureCandyBomb { width: 650px; height: 370px; }
#featureLollipopBonus { width: 650px; height: 370px; }

}

@media screen and (max-width: 959px) and (orientation: landscape) {
.symbolBlock { margin: 10px 0 0 0; }
.symbolBlockMiddle { margin: 10px 0 0 0; }
.symbolImage { width: 64px; height: 64px; }
.symbolNumbers { width: 60px; height: 50px; font-size: 1em; margin: 0 0 0 0; padding: 4px 0 0 0; }

.separator { margin: 60px 0 45px 0; }
.featureImageSide { margin: 10px auto; }
.featureImageScreen { width: 452px; height: 260px; margin: 0 auto; }

#symbolWildBlock { /*width: 90%;*/ width: 420px; height: 70px; /*width: 420px; height: 74px;*/ }
#symbolImageWildWild { top: 0; left: 6px; }
#symbolImageWildWild img { width: 72px; height: 72px; }
#symbolImageWildBonus { top: 0; left: 216px; }
#symbolImageWildBonus img { width: 72px; height: 72px; }
#symbolImageWildScatter { top: 0; left: 280px; }
#symbolImageWildScatter img { width: 72px; height: 72px; }
#symbolImageWildSuperWild { top: 0; left: 342px; }
#symbolImageWildSuperWild img { width: 72px; height: 72px; }
#symbolWildText { top: 12px; left: 64px; width: 168px; font-size: 0.8em; }

#featureSuperWild { width: 420px; height: 240px; }
#featureFreeSpins { width: 420px; height: 240px; }
#featureCandyBomb { width: 420px; height: 240px; }
#featureLollipopBonus { width: 420px; height: 240px; }

.payLineBlock { margin: 0px -22px 0 -22px; font-size: 0.65em; }
.payLineBlock img { width: 50%; height: 50%; }

#endImage img { width: 60%; height: 60%; }
}

@media screen and (max-width: 959px) and (orientation: portrait) {
.symbolBlock { margin: 10px 0 0 0; }
.symbolBlockMiddle { margin: 10px 0 0 0; }
.symbolImage { width: 64px; height: 64px; }
.symbolNumbers { width: 60px; height: 50px; font-size: 1em; margin: 0 0 0 0; padding: 4px 0 0 0; }

.separator { margin: 60px 0 45px 0; }
.featureImageSide { margin: 10px auto; }
.featureImageScreen { width: 300px; height: 170px; /*width: 100%; height: auto;*/ margin: 0 auto; }
.featureImageScreen img { width: 100%; height: auto; }

#symbolWildBlock { width: 300px; height: 70px; }
#symbolImageWildWild { top: 0; left: 6px; }
#symbolImageWildWild img { width: 72px; height: 72px; }
#symbolImageWildBonus { top: 0; left: 216px; }
#symbolImageWildBonus img { width: 72px; height: 72px; }
#symbolImageWildScatter { top: 0; left: 280px; }
#symbolImageWildScatter img { width: 72px; height: 72px; }
#symbolImageWildSuperWild { top: 0; left: 342px; }
#symbolImageWildSuperWild img { width: 72px; height: 72px; }
#symbolWildText { top: 12px; left: 46px; width: 148px; font-size: 0.8em; }
}

@media screen and (max-width: 460px) and (orientation: portrait) {
.symbolBlock { margin: 10px 0 0 0; }
.symbolBlockMiddle { margin: 10px 0 0 0; }
.symbolImage { width: 64px; height: 64px; }
.symbolNumbers { width: 68px; height: 50px; font-size: 1em; margin: 0 10px 0 0; padding: 4px 0 0 0; }

.separator { margin: 60px 0 45px 0; }
.featureImageSide { margin: 10px auto; }
.featureImageScreen { width: 300px; height: 170px; /*width: 100%; height: auto;*/ margin: 0 auto; }
.featureImageScreen img { width: 100%; height: auto; }

#symbolWildBlock { width: 300px; height: 50px; }
#symbolImageWildWild { top: 0; left: 6px; }
#symbolImageWildWild img { width: 72px; height: 72px; }
#symbolImageWildBonus { top: 0; left: 216px; }
#symbolImageWildBonus img { width: 72px; height: 72px; }
#symbolImageWildScatter { top: 0; left: 280px; }
#symbolImageWildScatter img { width: 72px; height: 72px; }
#symbolImageWildSuperWild { top: 0; left: 342px; }
#symbolImageWildSuperWild img { width: 72px; height: 72px; }
#symbolWildText { top: 8px; left: 40px; width: 96px; font-size: 0.7em; }
}

#htmlHelpPageElm h1 {
	color: red;
}

#htmlHelpPageElm .scrollLink {
	color: cyan;
}

#htmlHelpPageElm #gameVersion:before {
	content: "V: ";
}

#htmlHelpPageElm #gameVersion.desktop {
	color: gold;
}

#htmlHelpPageElm #gameVersion.desktop:after {
	content: " d";
}

#htmlHelpPageElm #gameVersion.mobile {
	color: magenta;
}

#htmlHelpPageElm #gameVersion.mobile:after {
	content: " m";
}

/* Game Rules */
#game_rules #game_rules_logo {
	width: 320px; height: 140px;
	background: url('../Mobile/Real_Money/SD/Loading/compressed/CS_Logo.png') no-repeat;
	background-size: 320px 140px;
	margin: 0 auto;
}
#game_rules {
	font-size: 100%;
	text-align: left;
	margin: 0 auto;
	width: 70%;
	padding: 0px 0 4em 0;
}
#game_rules .title {
	font-size: 200%;
	text-align: center;
	margin: 0.5em 0 -0.5em 0;
}
#game_rules .subtitle {
	font-size: 150%;
	text-align: center;
	margin: 2em 0 0.5em 0;
}