#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: 12px 0 22px 0; }
#logo img { width: 60%; height: auto; }
#topSlide { width: 90%; margin: 0 auto 28px auto; }
.wideText { font-size: 0.95em; color: #f4c024; margin: 0 auto; display: block; }
.featureText { font-size: 0.95em; color: #f4c024; margin: 0 auto; display: block; }
#symbolsSlide { width: 90%; margin: 0 auto; color: #f4c024; }
#symbolsSlide h2 { margin: 0; color: #ffffff; font-size: 1.25em; }
.symbolBlock { display: inline-block; }
.symbolBlockMiddle { }
.symbolImage { position: relative; display: inline-block; }
.symbolImage img { width: 100%; height: 100%; }
.symbolImage80 { position: relative; display: inline-block; }
.symbolImage80 img { width: 100%; height: 100%; }
.symbolImageTriple { position: relative; display: inline-block; }
.symbolImageTriple img { width: 100%; height: 100%; }
.symbolNumbers { display: inline-block; vertical-align: top; text-align: left; }
.symbolNumbersFreeSpins { display: inline-block; vertical-align: top; text-align: left; margin: 0 8px 0 8px; }
.symbolNumbersFreeSpins2 { display: inline-block; vertical-align: top; text-align: left; margin: 0 8px 0 8px; }
.anyPartOf { display: inline-block; vertical-align: top; text-align: left; margin: 34px 0 0 8px; }
.symbolImage80 { position: relative; display: inline-block; }
.symbolImage80 img { width: 100%; height: 100%; }
.white { color: white; }
.symbolTextFreeSpins { }
.symbolTextFreeSpins2 { font-size: 0.9em; }
.symbolWildText { display: inline-block; vertical-align: top; }
.separator { }
.separator img { width: 90%; height: auto; }
.helpSlide { position: relative; height: auto; width: 100%; color: #f4c024; display: block; }
.helpSlide h2 { margin: 0 0 14px 0; color: #ffffff; font-size: 1.25em; }
.imageText { margin: 0 auto 10px auto; }
#freeSpinsTitle { position: absolute; color: #ffffff; text-shadow: 0px 0px 8px #f79027, 0px 0px 8px #f79027, 0px 0px 8px #f79027; }
#freeSpinsText { position: absolute; }
#freeSpinsText2 { position: absolute; line-height: 95%; }
#featureBonus { background: url("../Mobile/Menu/Generic/help_cashpots.jpg") no-repeat; background-size: contain; margin: 0 auto; }
#featureWildMultipliers { background: url("../Mobile/Menu/Generic/help_wildMultipliers.jpg") no-repeat; background-size: contain; margin: 0 auto; }
#featureFreeSpins { background: url("../Mobile/Menu/Generic/help_freeSpins.jpg") no-repeat; background-size: contain; margin: 0 auto; }
#gameVersion { margin: 0 0 40px 0; }
#payLinesSlide { width: 90%; margin: 0 auto; color: white; }
#payLinesSlide h2 { margin: 0 0 14px 0; font-size: 2em; }
.payLineBlock { display: inline-block; margin: 10px 10px 10px 10px; }
.payLineBlock img {}
		
@media screen and (min-width: 960px) {
.wideText { width: 80%; }
.featureText { width: 54%; }
.symbolBlock { margin: 20px 0 0 0; }
.symbolBlockMiddle { margin: 20px 0 0 0; }
.symbolImage { width: 128px; height: 128px; }
.symbolImage80 { width: 70px; height: 65px; }
.symbolImageTriple { width: 44px; height: 128px; }
.symbolNumbers { width: 128px; height: 100px; font-size: 1.3em; margin: 0 18px 0 18px; padding: 28px 0 0 0; }
.symbolNumbersFreeSpins { width: 170px; }
.symbolNumbersFreeSpins2 { width: 260px; }
.anyPartOf { width: 54px; font-size: 0.9em; margin: 12px 0 0 4px; }
.symbolTextFreeSpins { font-size: 1.3em; }
.symbolWildText { width: 180px; font-size: 1.1em; padding: 18px 0 0 0; }
.separator { margin: 90px 0 90px 0; }
.imageText { width: 660px; height: 371px; }
#freeSpinsTitle { top: 134px; left: 30px; font-size: 1.1em; }
#freeSpinsText { top: 156px; left: 10px; font-size: 0.7em; width: 145px; }
#freeSpinsText2 { top: 204px; left: 10px; font-size: 0.65em; width: 145px; }
#featureBonus { width: 590px; height: 332px; }
#featureWildMultipliers { width: 590px; height: 313px; }
#featureFreeSpins { width: 590px; height: 313px; }
}

@media screen and (max-width: 959px) and (orientation: landscape) {
.wideText { width: 96%; }
.featureText { width: 62%; }
.symbolBlock { margin: 10px 0 0 0; }
.symbolBlockMiddle { margin: 10px 0 0 0; }
.symbolImage { width: 64px; height: 64px; }
.symbolImage80 { width: 40px; height: 37px; }
.symbolImageTriple { width: 22px; height: 64px; }
.symbolNumbers { width: 78px; height: 50px; font-size: 1em; margin: 0 9px 0 9px; padding: 4px 0 0 0; }
.symbolNumbersFreeSpins { width: 170px; }
.symbolNumbersFreeSpins2 { width: 280px; }
.anyPartOf { width: 54px; font-size: 0.8em; margin: 12px 0 0 4px; }
.symbolTextFreeSpins { font-size: 1.1em; }
.symbolWildText { width: 130px; font-size: 0.9em; padding: 16px 0 0 0; }
.separator { margin: 45px 0 45px 0; }
.imageText { width: 430px; height: 242px; }
#freeSpinsTitle { top: 134px; left: 46px; font-size: 0.85em; }
#freeSpinsText { top: 164px; left: 36px; font-size: 0.6em; width: 100px; }
#freeSpinsText2 { top: 210px; left: 34px; font-size: 0.53em; width: 108px; }
#featureBonus { width: 360px; height: 202px; }
#featureWildMultipliers { width: 360px; height: 191px; }
#featureFreeSpins { width: 360px; height: 191px; }
}

@media screen and (max-width: 959px) and (orientation: portrait) {
.wideText { width: 96%; }
.featureText { width: 62%; }
.symbolBlock { margin: 10px 0 0 0; }
.symbolBlockMiddle { margin: 10px 0 0 0; }
.symbolImage { width: 64px; height: 64px; }
.symbolImage80 { width: 40px; height: 37px; }
.symbolImageTriple { width: 22px; height: 64px; }
.symbolNumbers { width: 78px; height: 50px; font-size: 1em; margin: 0 9px 0 9px; padding: 4px 0 0 0; }
.symbolNumbersFreeSpins { width: 170px; }
.symbolNumbersFreeSpins2 { width: 280px; }
.anyPartOf { width: 54px; font-size: 0.8m; margin: 4px 0 0 4px; }
.symbolTextFreeSpins { font-size: 1.1em; }
.symbolWildText { width: 130px; font-size: 0.9em; padding: 6px 0 6px 0; margin: 0 auto; }
.separator { margin: 45px 0 45px 0; }
.imageText { width: 95%; height: 100%; }
#freeSpinsTitle { top: 134px; left: 40px; font-size: 0.80em; }
#freeSpinsText { top: 156px; left: 24px; font-size: 0.6em; width: 118px; }
#freeSpinsText2 { top: 196px; left: 22px; font-size: 0.53em; width: 122px; }
#featureBonus { width: 280px; height: 160px; }
#featureWildMultipliers { width: 280px; height: 160px; }
#featureFreeSpins { width: 280px; height: 160px; }
}

@media screen and (max-width: 460px) and (orientation: portrait) {
.wideText { width: 96%; }
.featureText { width: 96%; }
.symbolBlock { margin: 10px 0 0 0; }
.symbolBlockMiddle { margin: 10px 0 0 0; }
.symbolImage { width: 64px; height: 64px; }
.symbolImage80 { width: 40px; height: 37px; }
.symbolImageTriple { width: 22px; height: 64px; }
.symbolNumbers { width: 78px; height: 50px; font-size: 1em; margin: 0 9px 0 9px; padding: 4px 0 0 0; }
.symbolNumbersFreeSpins { width: 150px; }
.symbolNumbersFreeSpins2 { width: 220px; }
.anyPartOf { width: 54px; font-size: 0.7em; margin: 4px 0 0 4px; }
.symbolTextFreeSpins { font-size: 1.1em; }
.symbolWildText { width: 130px; font-size: 0.9em; padding: 6px 0 6px 0; margin: 0 auto; }
.separator { margin: 45px 0 45px 0; }
.imageText { width: 95%; height: 120%; }
.imageCashpot { width: 12%; height: 18%; }
#freeSpinsTitle { top: 134px; left: 44px; font-size: 0.80em; }
#freeSpinsText { top: 164px; left: 36px; font-size: 0.6em; width: 100px; }
#freeSpinsText2 { top: 204px; left: 32px; font-size: 0.6em; width: 108px; }
#featureBonus { width: 280px; height: 160px; }
#featureWildMultipliers { width: 280px; height: 160px; }
#featureFreeSpins { width: 280px; height: 160px; }
}

@media screen and (max-width: 320px) and (orientation: portrait) {
	.wideText { width: 96%; }
	.featureText { width: 96%; }
	.symbolBlock { margin: 10px 0 0 0; }
	.symbolBlockMiddle { margin: 10px 0 0 0; }
	.symbolImage { width: 64px; height: 64px; }
	.symbolImage80 { width: 40px; height: 37px; }
	.symbolImageTriple { width: 22px; height: 64px; }
	.symbolNumbers { width: 78px; height: 50px; font-size: 1em; margin: 0 9px 0 9px; padding: 4px 0 0 0; }
	.symbolNumbersFreeSpins { width: 150px; }
	.symbolNumbersFreeSpins2 { width: 220px; }
	.anyPartOf { width: 54px; font-size: 0.7em; margin: 4px 0 0 4px; }
	.symbolTextFreeSpins { font-size: 1.1em; }
	.symbolWildText { width: 130px; font-size: 0.9em; padding: 6px 0 6px 0; margin: 0 auto; }
	.separator { margin: 45px 0 45px 0; }
	.imageText { width: 95%; height: 120%; }
	.imageCashpot { width: 12%; height: 18%; }
	#freeSpinsTitle { top: 134px; left: 44px; font-size: 0.80em; }
	#freeSpinsText { top: 164px; left: 36px; font-size: 0.6em; width: 100px; }
	#freeSpinsText2 { top: 204px; left: 32px; font-size: 0.6em; width: 108px; }
	#featureBonus { width: 210px; height: 120px; }
	#featureWildMultipliers { width: 210px; height: 120px; }
	#featureFreeSpins { width: 210px; height: 120px; }
}

#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 { width: 98%; padding: 0 0 0 2%; } // check this, CR has this line as well but it seems redundant due to below */

#game_rules #game_rules_logo {
	width: 250px; height: 160px;
	background: url('../Mobile/Loading/Super_Eight_Logo.png') no-repeat;
	background-size: contain;
	margin: 20px auto 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;
}