/* ****************************************************************/
/* NAV MENU START */

#main-header { top: 0px; left: 0px; padding: 0px 9px 0px 0px; background-color: #64b4cf; position: fixed; width: 100%; z-index: 2147483647; border-bottom: 2px solid #333; margin-bottom:25px; box-shadow: 0px 0px 17px 2px #3b3b3b; /*min-width:700px;*/}
#logo, #slogan { float: left; }
#slogan { font-style: italic; color: #333; padding-top: 20px; padding-left: 15px; }
#top-logo {z-index: 1001; position: fixed; padding-left: 10px; top: 0px; left: 0px;}
#top-navigation { float: right; padding: 0; line-height: 1; }
#top-navigation nav { float: left; }
#top-navigation li  { display: inline-block; margin-top: 3px; margin-bottom:1px;vertical-align:text-bottom;}
#top-navigation li.has-sub-menu .sub-menu{ visibility: hidden;}
#top-navigation li.has-sub-menu:hover .sub-menu,
#top-navigation li.has-sub-menu.force-open .sub-menu{ visibility: visible !important; display: block;}
#top-navigation li#userMenu{margin: 3px -3px 1px 0px;}
#top-navigation li#userMenu span.main_text:not(.menu_2line){padding: 18px 15px 18px 24px;}
#top-navigation li#userMenu span.sf-sub-indicator{top: 6px; left: -8px;}
#top-navigation li#userMenu span.main_text.menu_2line ~ span.sf-sub-indicator {top:0px; left: -14px;}
#top-navigation a { color: #333; font-weight: 400; text-decoration: none; /*padding: 14px 18px;*/ display: block; position: relative; }
#top-navigation > ul > li.sfHover > a, #top-navigation > ul > li > a:hover, #top-navigation > ul > li > a:focus, .mobile_nav { color: #fff; background-color: #ff8a1d; -webkit-box-shadow: inset 0 0 30px #d9531f; -moz-box-shadow: inset 0 0 30px #d9531f; box-shadow: inset 0 0 30px #d9531f; }
#top-navigation > ul > li > a:hover + ul, #top-navigation > ul > li > ul:hover, .mobile_nav { visibility: visible !important; display: block !important;}

#top-navigation li.current-menu-item > a, .et_mobile_menu li.current-menu-item > a { font-weight: 800; color: #F0F0F0; background-color: #005E7C;}
#top-navigation li.current-menu-item > a:hover { color: #fff; }
#top-navigation > ul > li > a, #footer-bottom li a { /*overflow: hidden;*/ height: 54px;}
span.menu_slide, span.main_text { display: block; position: relative; padding: 18px; }
li.menu_2line {top:-4px;}
li.menu_1line a {top:3px;}
span.menu_2line{ display: inline-block; opacity: 1; top: 5px; line-height: 1.4; text-align: center; padding: 0px 22px; }
span.sf-sub-indicator { margin-left: -5px; margin-right: -4px;  left: -14px; position: relative; font-size: 0.8em; }
.bottom-nav span.menu_slide, .bottom-nav span.main_text { padding: 23px 20px; }
#top-navigation .current {background-color: #005E7C; color: #F0F0F0; font-weight: bold;}
#top-navigation .current a {font-weight: bold; color: #F0F0F0;}
#top-navigation .current span {font-weight: bold; color: #F0F0F0;}
#top-navigation .sub-menu, .sub-menu {width:224px; margin-left: -2px; box-shadow: 0px 0px 24px -6px rgba(0,0,0,0.48); background-color:rgb(232, 244, 252); top: 57px; border: 2px solid rgb(152, 200, 223); color: rgb(20, 80, 136); box-shadow: 4px 7px 24px -6px rgba(0,0,0,0.48);}
#top-navigation .game-menu .sub-menu{width:265px;}
#top-navigation .sub-menu li {width:100%; height: 100%; margin:-1px -1px;border:none; text-align: left;}
#top-navigation .sub-menu .strong a{font-weight: 800; font-size: 1.1em;}
#top-navigation .sub-menu strong {color: #a15a00; text-shadow: 0px 0px 1px rgb(255 255 255); font-weight: 800; background: #ffc352; border-radius: 6px; padding: 1px 4px; }
#top-navigation .game-menu .sub-menu {width:265px;}
#top-navigation .game-menu .sub-menu li{line-height:28px;}
#top-navigation #et_mobile_nav_menu .sub-menu li{height:auto; text-align:center; padding:0; margin:0;}
#top-navigation .sub-menu li a {height:100%; width:100%; padding: 17px 10px; font-size: 1em; margin:-1px -1px;border:none; font-family:'open sans'; color:#024a61; font-weight:600;}
#top-navigation .sub-menu .blackRoundedSquare{background:#024a61; border-radius:5px; height:16px; width: 16px; margin:0px 1px; display:inline-block;}
#top-navigation .sub-menu li.current a{color:#f0f0f0;}
#top-navigation #et_mobile_nav_menu .sub-menu li a{height: auto; padding:0; margin:0;}
#top-navigation .sub-menu li:hover {background-color:#ff8a1d; }				
#top-navigation .sub-menu li:hover a, .sub-menu li:hover a{color: white; padding-left: 20px; font-weight:bold;}
#top-navigation .sub-menu div.widget div ul{position:relative; width: 100%; margin-top: 15px; border: 1px solid rgb(60, 150, 179);}  
#top-navigation .has-sub-menu:hover .sub-menu div.widget div ul {visibility: visible;}
#top-navigation .sub-menu div.widget div ul li a{font-size:1.12em; text-decoration:none; color: inherit;}
#top-navigation .sub-menu li.premium-li img{position: absolute; display: inline-block; width: 37px; top: 50%; margin-top: -19px; margin-left: -2px;}
#top-navigation .sub-menu li.premium-li span{display: inline-block; margin-left: 42px;}
#top-navigation .sub-menu .menuImg{display:inline-block; width:54px; vertical-align:middle; text-align: center; margin-right:12px;}
#top-navigation .sub-menu .twg .menuImg{width:58px;}
#top-navigation .sub-menu .menuImg img{width:50px; margin: 4px 0px -4px 0px;}
#top-navigation .sub-menu .menuImg.text{font-size:22px; line-height:24px; vertical-align:middle; margin: -4px 12px 4px auto;}
#top-navigation .sub-menu .menuImg .text{font-size:36px; line-height:30px; vertical-align:middle;}
#top-navigation .sub-menu .tpg .menuImg.text{font-family: 'GB Garamond'; font-size:52px; margin: -10px 10px 4px 3px; color: #3f58ff;} 
#top-navigation .sub-menu .tpg.current .menuImg.text{color: #d9c1ff;}
#top-navigation .sub-menu .menuImg .fa{padding:0px 1px;}
#top-navigation .sub-menu .tta .menuImg { color: #005976; font-family: 'open sans'; font-weight: 800;}
#top-navigation .sub-menu .tta.current .menuImg { color: #b4edff;}
body #top-navigation .sub-menu .fft .menuImg span {color:#ff5413;}
body #top-navigation .sub-menu .ttf .menuImg .fa {color:#024a61;}
#top-navigation .fft.current span {color:#ff8100;}
#top-navigation .sub-menu .ttf .menuImg {color: #73c7ff; filter: drop-shadow(-1px 1px 0px #0f71b3cc) drop-shadow(1px -1px 0px #0f71b3cc) drop-shadow(1px 1px 0px #0f71b3cc) drop-shadow(-1px -1px 0px #0f71b3cc); font-size: 28px;}
#top-navigation .sub-menu .wtg .menuImg .blackRoundedSquare{background-color:#036199;}
#top-navigation .sub-menu .wtg.current .menuImg .blackRoundedSquare{background-color:#b4edff;}
				
#top-navigation #et_mobile_nav_menu { display: none; }
#top-navigation #et_mobile_nav_menu #mobile_pages_menu { height:auto; font-size:1.3em; border: 2px solid rgb(152, 200, 223); margin-left:-135px;}
#mobile_pages_menu li:not(:last-child){border-bottom: 1px solid #A1C3D0;}
#menu-main li ul, .et_mobile_menu {z-index: 9999; width: 238px; background: #fff; -webkit-box-shadow: 0 3px 4px rgba(0,0,0,0.04); -moz-box-shadow: 0 3px 4px rgba(0,0,0,0.04); box-shadow: 0 3px 4px rgba(0,0,0,0.04); visibility: hidden; border: 1px solid #e9e9e9;}
#menu-main li ul {position: absolute; }
.has-sub-menu span:hover > ul, .has-sub-menu span ul:hover { visibility: visible; display: block;}
a{text-decoration: underline;}
a:hover{text-decoration:none;}

/* START - better nav hover techniques */
#top-navigation > ul > li > a:hover + ul, #top-navigation > ul > li > ul:hover, #top-navigation > ul > li > a:hover + div, #top-navigation > ul > li > div:hover, #top-navigation > ul > li > a:focus + ul, #top-navigation > ul > li > ul:focus, #top-navigation > ul > li > a:focus + div, #top-navigation > ul > li > div:focus, .mobile_nav { visibility: visible !important; display: block !important;}
#top-navigation div.sub-menu{position: absolute; right:66px; width:370px; height:auto; background-color: #EDF7FA; padding: 25px 30px 5px 30px; border: 2px solid rgb(152, 200, 223); color: rgb(20, 80, 136); box-shadow: 4px 7px 24px -6px rgba(0,0,0,0.48); -moz-transition: all .65s; -webkit-transition: all .65s; -o-transition: all .65s; transition: all .65s;}
#top-navigation ul.sub-menu{}
#top-navigation div.sub-menu div.hasNormalLinks a{display: inline-block; text-decoration: underline; color: blue;}
#top-navigation ul li:hover ul, #top-navigation ul li:hover div {display:block; visibility: visible !important;}
#top-navigation ul ul:hover + a, #top-navigation ul div:hover + a, #top-navigation #manualHover{color: #fff !important; background-color: #ff8a1d; -webkit-box-shadow: inset 0 0 30px #d9531f; -moz-box-shadow: inset 0 0 30px #d9531f; box-shadow: inset 0 0 30px #d9531f;}
#top-navigation .socialLogin {text-align: center; margin: 10px auto;}
#top-navigation .socialLogin a {display:inline-block !important;}
.socialLogin a:hover img {opacity:0.8;}
/* END - better nav hover techniques */

/* NAV MENU END */
/* ****************************************************************/

/**********************/
/* PROFILE MENU START */

#profileMenu{ height: 66px; padding: 10px 70px 0px 70px; margin: 15px 0 -5px 0;}
#profileMenu ul {display: inline-block; list-style-type: none; margin: 0 auto; text-align: center; padding: 0; overflow: hidden;}
#profileMenu li {float: left; border:1px solid #7BA3AA; background: #DCEFF2; padding:0px 10px;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
box-shadow: inset 1px -5px 11px -7px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 1px -5px 11px -7px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 1px -5px 11px -7px rgba(0, 0, 0, 0.33);}
/*#profileMenu li:last-child { border-right: none;}*/
#profileMenu li a { display: block; text-align: center; padding: 14px 16px; text-decoration: none;}
#profileMenu li:hover{background: repeating-linear-gradient( 135deg, #f6bd6b, #f6bd6b 1px, #ECB76F 5px); border: 1px solid #739497;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;}
#profileMenu li a:hover:not(.active) { color:#005e7c;}
#profileMenu .active { background-color: #005E7C;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;}
#profileMenu .active a { color:white; font-weight:bold;}

/* PROFILE MENU END   */
/**********************/


/***************************************/
/* Settings/Hamburger Menu Integration */
#top-navigation li#settingsMenu { display: inline-block; margin-top: 3px; margin-bottom: 1px; vertical-align: text-bottom; } 
#top-navigation li#settingsMenu > a { padding: 0; height: 54px; display: flex; align-items: center; } 
#top-navigation button{box-shadow: none; margin:0;}
#settings-button { background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 15px 18px; height: 100%; transition: all 0.2s ease; justify-content: center; } 
#settings-button .hamburger-line { width: 22px; height: 3px; background-color: #333; border-radius: 2px; transition: all 0.2s ease; }
#top-navigation li#settingsMenu:hover > a, #top-navigation li#settingsMenu > a:hover { -webkit-box-shadow: inset 0 0 30px #d9531f; -moz-box-shadow: inset 0 0 30px #d9531f; box-shadow: inset 0 0 30px #d9531f; }
#top-navigation li#settingsMenu:hover #settings-button .hamburger-line { background-color: #fff; }
#top-navigation #settings-menu { width: 244px; box-shadow: 0px 0px 24px -6px rgba(0,0,0,0.48); top: 57px; box-shadow: 4px 7px 24px -6px rgba(0,0,0,0.48); position: absolute; visibility: hidden; list-style: none; padding: 0; margin: 0; right: 7px; left: auto; }
#top-navigation li#settingsMenu.has-sub-menu:hover #settings-menu { visibility: visible !important; display: block; }
#top-navigation #settings-menu > li { width: 100%; height: 100%; margin: -1px -1px; border: none; text-align: left; padding: 0; background-color: transparent; position: relative; }
#top-navigation #settings-menu > li > a { height: 100%; width: 100%; padding: 17px 10px; font-size: 1em; margin: -1px -1px; border: none; font-family: 'open sans'; color: #024a61; font-weight: 600; display: block; background-color: transparent; }
#top-navigation #settings-menu > li:hover { background-color: #ff8a1d; }
#top-navigation #settings-menu > li:hover > a { color: white; padding-left: 20px; font-weight: bold; background-color: transparent; }
#top-navigation #settings-menu li#theme-menu-item button { width: 100%; padding: 17px 10px; font-size: 1em; margin: -1px -1px; border: none; font-family: 'open sans'; color: #024a61; font-weight: 600; background-color: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; }
#top-navigation #settings-menu li#theme-menu-item:hover { background-color: #ff8a1d; }
#top-navigation #settings-menu li#theme-menu-item:hover button { color: white; padding-left: 20px; font-weight: bold; }
#top-navigation #settings-menu li#theme-menu-item button .theme-swatches { display: flex; gap: 3px; margin-left: auto; }
#top-navigation #settings-menu li#theme-menu-item button .theme-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.2); }
#top-navigation #settings-menu li#theme-menu-item:hover button .theme-swatch { border-color: rgba(255, 255, 255, 0.4); }
#top-navigation #settings-menu li#theme-menu-item button .theme-label { font-size: 0.85em; opacity: 0.7; }
#top-navigation #settings-menu #theme-submenu { width: 180px; box-shadow: 4px 7px 20px -2px rgba(0,0,0,0.78); position: absolute; left: -182px; top: -2px; display: none; list-style: none; border-radius: 6px; padding: 0; margin: 0; z-index: 10000; }
#top-navigation #settings-menu #theme-submenu li:first-child{border-top-right-radius: 6px; border-top-left-radius: 6px;}
#top-navigation #settings-menu #theme-submenu li:last-child{border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}
#top-navigation #settings-menu #theme-submenu.show { display: block !important; }
#top-navigation #theme-submenu li { width: 100%; margin: -1px 0px 0px 0px; border: none; text-align: left; padding: 0; background-color: transparent; display: flex; align-items: center; justify-content: space-between; }
#top-navigation #theme-submenu li a { height: 100%; width: 100%; padding: 17px 14px; font-size: 1em; margin: -1px -1px; border: none; font-family: 'open sans'; color: #024a61; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; background-color: transparent; }
#top-navigation #theme-submenu li:hover { background-color: #ff8a1d; }
#top-navigation #theme-submenu li:hover a { color: white; padding-left: 20px; font-weight: bold; background-color: transparent; }
.theme-name { flex: 1; }
#top-navigation #settingsMenu .color-swatches { display: flex; gap: 4px; }
#top-navigation hr {border: 1px solid #d4e4ef;}
#theme-submenu .color-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.15); }
/***************************************/

/* GENERAL START */
/* ***********************/
* {margin:0 auto; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{height:auto; background-color: #B1B1B1; text-align:center; overflow: auto; /*min-width:1014px;*/ font-family: 'Open Sans', Arial, sans-serif; width: 100%;}
h2,h3{padding: 0 20px 5px 20px; margin-bottom:10px;}
h2{display:inline-block; border-bottom: 1px solid lightgray; }
h3{padding:0 10px 5px 10px; margin-bottom:5px; font-size:1.4em;}
h4{font-size:1.0em;}
a {/*color: rgb(31, 106, 187);*/color:#0082C3;}
a:hover {color: rgb(219, 142, 0);}
a:visited {color: rgb(22, 61, 104);}
body #container {width:90%; height:100%; -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0 0 50px rgba(0, 0, 0, 0.35); box-shadow: 0 0 50px rgba(0, 0, 0, 0.35); background-color: #fff; padding: 25px 0 100px 0; margin-top: 100px; min-height:560px; -webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;}
p{margin-bottom:10px;}
table td {padding:0px 15px;}
table th {padding:10px 15px;}
#pageMain > h2 {margin-top:30px;}
#pageMain > p {text-align:left;}
h2.second_h1{border:none; font-size:1.8em; margin-top:15px;}
/*input[type=submit]{padding:5px 9px;}*/


.cf:before,.cf:after{content: " "; display: table;}
.cf:after{clear:both;}
.right {float:right;}
.left {float:left;}
.txtLeft{text-align:left;}
.txtRight{text-align:right;}
.long{width:75%;}
.short{width:33%;}

.orangeCTA, .oCTA{border: 3px solid #E38F1D; background-color: rgb(255,237,201); -webkit-box-shadow: 3px 7px 40px -13px #353535; box-shadow: 3px 7px 40px -13px #353535;}
.stoInfoBox{display:inline-block; padding: 10px 25px; border: 2px solid #7CB9CE; background-color: #DFF4FF; 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}
.stoInfoBox .stoInfoTitle{background-color: #7CB9CE; color: #11485B; width: 100%;}

.largeBtn{padding: 10px 40px; font-size: 20px; font-weight: bold !important; text-decoration: none !important;}
.mediumBtn{padding: 7px 25px; font-size: 18px; font-weight: bold !important; text-decoration: none !important;}
.smallBtn{padding:3px 12px; font-size:18px !important; text-decoration: none !important;}
.tinyBtn{font-size:14px !important; padding:4px !important;}
.fullWidth{width:100%;}
.readingLineWidth{width:45em; text-align:left;}
.centerTxt{text-align: center;}
.sideMarginsSmall{margin:0px 4px 0px 12px;}

.borderRad_4, .br4{-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.borderRad_8, .br8{-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}

.dkBlueBkgd{background-color:#005E7C; color: white;}
.orangeBkgd{color: white; background-color: #FF8513; -webkit-box-shadow: inset 0 0 30px #d9531f; -moz-box-shadow: inset 0 0 30px #d9531f; box-shadow: inset 0 0 30px #d9531f;}
.orangeBkgd a{color:white;}

.flatBlueBtn{color: white; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); background: #2577AD; border: 0; border-bottom: 2px solid #095C93;cursor: pointer; -webkit-box-shadow: inset 0 -2px #095C93; box-shadow: inset 0 -2px #095C93; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.flatBlueBtn:hover { color: #f2f2f2; background: /*#1E87CD*/#095C93;}
.flatBlueBtn:active {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none;}
.flatGoldBtn{background: #ffe574; border: 1px solid #c19400; border-radius: 4px; box-shadow: inset 0 -2px #ad8e00; cursor: pointer;}
.flatGoldBtn:hover {background: #ffd650; border: 1px solid #a78000 !important;}
.flatGoldBtn:active {background: #ffd650; border: 1px solid #a78000 !important;}

.STOinterfaceBtn{ padding: 4px 22px; font-size: 1.05em; font-weight: bold;}
.flatOrangeBtn{color: black; text-align: center; background-color: #FF8608; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; display: inline-block; cursor: pointer; font-family: arial; border-bottom: 2px solid #C76A00; box-shadow: inset 0 -1px #C76A00; text-shadow: 0px 0px 9px #FFFFFF; border-right: 1px solid rgb(228, 168, 60); border-left: 1px solid rgb(228,168,60); border-top: 1px solid rgb(228,168,60);}
.flatOrangeBtn:hover{ background-color: #EC7800; text-shadow: none; color: black;}

.submitButtonOrange {color: white; text-align: center; background-color:#ffa114;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;border:1px solid #cc5b04;display:inline-block;cursor:pointer;font-family:arial;border-bottom: 2px solid /*#2a8bcc*/#095C93; box-shadow: inset 0 -2px /*#2a8bcc*/#095C93; text-shadow:0px 0px 8px #8a4b07;}
.submitButtonOrange:hover {color: #f2f2f2; background-color:#de7e09;}
.submitButtonOrange:active {position:relative;top:1px;}

.submitButtonCarrot {color: white !important; text-align: center; background-color:#e67e22;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:0px solid #9e5618;display:inline-block;cursor:pointer;font-family:arial;border-bottom: 2px solid #9e5618; box-shadow: inset 0 -2px #9e5618; text-shadow:0px 0px 8px #CD7120;}
.submitButtonCarrot:hover {color: #f2f2f2; background-color:#d6670d;}
.submitButtonCarrot:active {	position:relative;top:1px;}

.submitButtonPumpkin {color: white; text-align: center; background-color:#d35400;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #b84700;display:inline-block;cursor:pointer;font-family:arial;font-size:17px;font-weight:bold;padding:7px 22px;text-decoration:none;}
.submitButtonPumpkin:hover {	color: #f2f2f2; background-color:#b84700;}
.submitButtonPumpkin:active {position:relative;top:1px;}

.submitButtonBlue {color: white; text-align: center; background-color:#4f8ecc;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #1b5891;display:inline-block;cursor:pointer;font-family:arial;font-size:18px;font-weight:bold;padding:7px 22px;text-decoration:none;border-bottom: 2px solid #114e8a; box-shadow: inset 0 -2px #114e8a;}
.submitButtonBlue:hover {color: #f2f2f2; background-color:#3b76ad;}
.submitButtonBlue:active {position:relative;	top:1px;}

.stoUI {font-size: 1.1em; font-weight: bold; color: #2d495f; }
.stoUIHeader{background-color:#084563; border:1px solid #053C5C; color: #d1e3ed;}
.stoUIContent, .stoUIClickable option{background-color:#93c3cd; border:1px solid #a6c9e2; color: #222;}
.stoUIClickable, .stoUIClickable select, .stoUIradio label span, .stoUImenu ul li{background: #93c3cd; background: repeating-linear-gradient( 135deg, #93c3cd, #93C2CC 1px, #9DC9D1 5px); border: 1px solid #739497; color:#2d495f; padding: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;}
.stoUIClickable:hover, .stoUIradio input:hover + span, .stoUImenu ul li:hover{background: #fae8b6; border: 1px solid #739497; color:#1d5987; font-weight:bold; cursor: pointer;}
.stoUIClickable:active, .stoUIradio input:checked + span, .stoUImenu ul li.active {background: #f6bd6b; background: repeating-linear-gradient( 135deg, #f6bd6b, #f6bd6b 1px, #ECB76F 5px); border: 1px solid #739497; color:#4A2C02; font-weight:bold;}

.stoUIradio label{overflow:auto; display:inline-block; position: relative; width:170px; margin:4px; cursor:pointer; }
.stoUIradio label input{visibility: hidden;}
.stoUIradio label span{text-align:center; padding:4px; margin:0; display:block;}
.stoUIradio label span h3{margin:0;}

.stoUIradio .radioRight{margin-left: -9px;}
.stoUIradio .radioLeft{margin-right: -9px;}
.stoUImenu .radioRight{margin-left: -2px;}
.stoUImenu .radioLeft{margin-right: -2px;}
.stoUIradio .radioRight > span, .stoUImenu .radioRight{-webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-bottomleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
.stoUIradio .radioLeft > span, .stoUImenu .radioLeft{-webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.stoUIradio .radioMiddle > span, .stoUImenu .radioMiddle > li{-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px;}



#heading {color: #666666; position: relative; height: auto; padding: 0px; margin: 0 auto; top: 0px; left: 0px;}
#heading h1 {font-size: 2.2em; text-align: center; letter-spacing: -0.04em; border-bottom: 1px solid gray; text-shadow: 1px 2px rgba(200, 200, 200, 0.5); color: #2B2828; padding-bottom: 10px; margin-bottom:30px;}
#heading h4{margin-bottom:15px;}
#heading h1.noUnderline{border-bottom:none; margin:0;}
#heading .borderBottom{border-bottom: 1px solid gray;}
#headInfo { color:black; font-family: Verdana, Geneva, sans-serif; left: 0px; width: 734px; line-height: 25px; font-size: 1.1em; margin: 10px auto;}
#generalLeadAd, .leadAd, #topleadPlug {width:728px; height:90px;}
#sideSkyAd {width:160px; height:600px;}
/*#container ul {margin-right:10%; margin-left: 7%; max-width:1000px;}
#container li {text-align: left;list-style-type: none;margin: 0 0 30px 0;clear:both;}*/
#container ul li {list-style-type: none;}
li .listTitle{font-weight:bold; font-size:1.1em;}
li .listTitle_large{font-weight:bold; font-size:1.3em;}
li .listBody{margin:10px 0px 0px 15px;}
#container .readWidth{max-width:800px; width:50%;}
#fft {margin-bottom:65px !important;}
#uts img {margin:25px 40px !important;}
/*li img{border: 5px solid rgb(70, 163, 236);-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px; float:left; margin: 30px 40px 70px 40px;}*/

aside{height: 100%; width:320px; float:right; padding: 0 10px; border-left:1px dashed #aaa;}
.widget{margin-bottom:20px; box-sizing: border-box;}
.widget h4, .widget h3{text-align:left; margin:0 0 10px 0; padding: 0 5px; border-bottom:1px solid #ddd;}
.widget .inner{margin:0 10px;}
.widget div{text-align: left; font-size:0.8em;}
.widget #formErrors div{font-size: 14px; font-weight: 400; line-height:19px;}
.widget div.message{font-size:1em; line-height:1.3em;}
.widget form div{font-size:1em; padding:4px 0;}
.widget form div.alignInput label {width:68px; padding-right:3px;}
.widget form div.checkbox label { display: block; padding-left: 15px; text-indent: -15px;}
.widget form div.checkbox input { width: 13px; height: 13px; padding: 0; margin: 0; vertical-align: middle; position: relative; top: -1px;}
.widget div.field input {width:100%;}
#heading,#pageMain {/*offset by aside width using margin-right*/margin-right: 320px; padding:5px 20px;}
.noWidgets #heading, .noWidgets #pageMain {margin:0 auto; padding:5px 30px;}
form div{padding:8px 0;}
div.field input{font-size:1.1em; padding:6px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; border: 1px solid #8BA2B3;}
form div.alignInput label {width:105px; display:inline-block; text-align:right; padding-right:5px;}
form.longFormLabels div.alignInput label {width:200px;}
#formErrors, .formErrors {padding:2px 0 10px 0; font-weight: bold; color: red; /*border-bottom: 1px solid #eee;*/ }
#formErrors{width: 60%;}
.formErrors.notTop{padding:0px;}
form #formErrors {border: none;}
#formInfo{display:block; padding: 5px 0 10px 0; margin-bottom:20px; font-weight: bold; color: rgb(236, 137, 33); border-bottom: 1px solid #eee; width: 50%;}
.sub-menu #formInfo, .sub-menu #formErrors, .widget #formErrors{width:100%;}

#pageMain > div, #dashboard_div div {padding:10px 0;}
.largeTxt {font-size: 1.3em;}
.bigTxt {font-size: 1.6em;}
.hugeTxt {font-size: 1.8em;}
.giantTxt {font-size: 2.2em;}
.note {font-size:0.9em;}
form .note {margin-top:30px;}
.noteSmall {font-size:0.7em;}
.boldFont, .bold{font-weight: bold;}
.notBold{font-weight:normal;}
.circle-image{display:inline-block; position:relative; vertical-align:text-top; width:80px;height:80px;-webkit-border-radius: 30%;border-radius: 30%; margin:-15px 15px -15px 0px; border:2px solid #005e7c;}
#loggedInInfo .circle-image{width:28px; height:28px; margin: -3px 1px 0 1px; border:none;}
#userMenu .circle-image{margin:-15px 10px 0px -10px; width:46px;height:46px; border-width:1px;}
.circle-image.tinyPic{width:28px; height:28px; margin:0px 1px; border:none;}
.circle-image-premium-icon{width:28px; /*height:32px; */display:inline-block; position: absolute; left:0px; top:-3px; filter: drop-shadow(.5px 1.5px 0px #593e0077);}
.circle-image-premium-icon.largePic{width:96px; height:96px; position:relative; }
h1.noUnderline {position:relative; display:inline-block;}
.circle-image.premium {border: 2px solid orange; box-shadow: 0px 0px 6px 0px #fbae5a;}
h1 .circle-image-premium-icon{ width: 39px; left: -14px; top: -27px;}
/* starburst */
.starburst-container{ position: absolute; }
.starburst-container.tiny{ width:22px; height:22px; top:1px; left: -1px; filter: drop-shadow(1px 2px 1px #33333377);}
.starburst-container.small{ width:28px; height:28px; top:-20px; left: -10px; filter: drop-shadow(1px 2px 1px #33333377);}
.starburst-container.medium{ width:42px; height:42px; top:-23px; left: -23px;}
.starburst-container.mediumLarge{ width:56px; height:56px; top:-9px; left: -16px;}
.starburst-container.large{ width:74px; height:74px; top:-42px; left: 50%; transform: translate(-50%, 0);}
#top-navigation .sub-menu li.premium-li .starburst-container.small{left:12px; top:9px;}
#top-navigation .sub-menu li:hover .starburst-container.small{left:22px;}
div.starburst-container.relative{ position: relative; left: auto; transform: none; top: 0;}
.starburst { width: 200px; position:absolute; left:4px; top:4px; aspect-ratio: 1; z-index:1; background: linear-gradient(135deg,#EDC951,#F8CA00);}
.starburst.outline {background: #7d6100; /*width: 2.6em; height: 2.6em;*/ width: 90%; height: 90%;}
.starburst { background: linear-gradient(135deg,#EDC951,#F8CA00); width: 86%; height: 86%; text-align: center; color: #fff; border-radius:4%; position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); padding:0; margin:0;}
.starburst, .starburst span { display: flex; align-items: center; justify-content: center;}
.starburst span { width: 100%;  height: 100%; background: inherit; transform: rotate(45deg); border-radius:4%; margin: 0 !important;}
.starburst:before, .starburst:after, .starburst span:before, .starburst span:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: inherit; z-index: -1; transform: rotate(30deg); border-radius:4%;}
.starburst:after { transform: rotate(-30deg);}
.starburst span:after { transform: rotate(30deg);}
.starburst span:before { transform: rotate(-30deg);	}
.starburst-inside{ background: #4786ff; width: 100%; height: 100%; position: absolute; z-index: 77; top: 0; left: 0; border-radius: 50%; border: 6px solid #0e398b; box-shadow: inset 0px 0px 8px 6px #00388d6b;}
.starburst-inside > div { top: 0px; height: 100%; padding: 10px; filter: drop-shadow(2px 4px 1px #333333bb);}
.starburst-icon {position: absolute; z-index: 99; filter: drop-shadow(3px 5px 2px #333333aa); width: 100%; left: 50%; top: 50%; transform: translate(-50%, -55%);}
.starburst-container.tiny .starburst.outline, .starburst-container.small .starburst.outline {width: 92%; height: 92%;}
.starburst-container.tiny .starburst-inside, .starburst-container.small .starburst-inside, .starburst-container.mediumLarge {border: 3px solid #0e398b;}
.starburst-container.tiny .starburst-icon, .starburst-container.small .starburst-icon {width: 113%; filter: drop-shadow(1px 2px 1px #333333cc);}

.grid {background: white; margin: 0 0 20px 0; }
.grid:after { content: ""; display: table; clear: both; }
[class*='col-'] { float: left; padding-right: 20px; }
.grid [class*='col-']:last-of-type { padding-right: 0; }
.col-1-1 { width: 100%; }
.col-5-6 {width: 83.33%}
.col-3-5 {width: 60%}
.col-3-4 {width: 75%}
.col-2-5 {width: 40%}
.col-2-3, .col-4-6 {width: 66.66%; }
.col-1-6 {width: 16.66%; }
.col-1-2 {width: 50%; }
.col-1-4 {width: 25%; }
.col-1-3 {width: 33.33%; }
.col-1-8 {width: 12.5%; }
.module {padding: 20px; background: #eee; }
.grid-pad { padding: 20px 0 20px 20px; }
.grid-pad [class*='col-']:last-of-type { padding-right: 20px; }
.module { background-color: #C8DBE0; border: 2px solid #52727C; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 3px 7px 40px -13px #353535; box-shadow: 3px 7px 40px -13px #353535; position: relative; behavior: url(../utilities/PIE/PIE.htc);}

.flex{display:flex;}
[class*='flex-']{padding: 0 10px;}
.flex-1{flex:1;}
.flex-2{flex:2;}
.flex-3{flex:3;}
.flex-4{flex:4;}
.flex-5{flex:5;}
.flex-6{flex:6;}
.flex-7{flex:7;}
.flex-8{flex:8;}
.flex-9{flex:9;}
.flex-10{flex:10;}

.responsiveCols > div{display:inline-block; vertical-align:top;}
.responsiveCols a.login {display:inline-block; top:0; margin-top:63%;}
.responsiveCols .rc-1-2{width:50%; padding-right:10px;}
.responsiveCols .lastCol{padding-left:10px; padding-right:0px;}

.stoTT{ position:absolute; width:290px; height:290px; z-index: 150; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; display:none;}
.stoTT .divider{ border-bottom: 2px solid #666; margin: 0px 12px; padding:4px 0px; font-size:1.1em;}
.stoTT .mStat{ padding:18px 0px; font-size:1.8em; font-weight:bold;}
.stoTT .mStat .noteSmall{ font-size:14px;}
.lessonButton .stoTT .divider{font-size:1.8em; font-weight: bold; padding: 10px 0px 20px 0px;}
#kbDiv.hideAcc .stoTT .accToHide, #kbDiv.hideSpd .stoTT .spdToHide, #kbDiv.hideAcc .accToHide, #kbDiv.hideSpd .spdToHide{ display:none;}
#kbDiv .stoTT .divider{font-family: TexGyreCursor-Bold, Courier, monospace; font-size:1.8em; font-weight: bold; padding: 10px 0px 20px 0px;}
.stoTT .align{text-align:left;}
.stoTT .align span{display: inline-block; text-align:right; width:57%; padding:3px 8px 4px 0px;}
.stoTT .align .noteSmall{width:auto;}
#kbDiv .stoTT{color:black; text-align:center; font-size:1.2em; display: none; top:-123px; margin-left: -30px; padding: 10px; position: absolute; z-index: 1000; width:190px; height:110px;}
#kbLegend .stoTT div{padding-bottom: 12px;}
#kbLegend .stoTT .keySpdRange div{padding-bottom: 0px; margin-top: 20px;}
#keysFilled .stoTT, .lessonButton .stoTT{height:212px; top:-230px; width: 240px; font-weight:normal; font-size:1em;}
.key:hover .stoTT, div[class^="p"]:hover .stoTT, #kbDiv .keyRows div[class^="p"]:hover > span { display: block;}

/* Specifics */
#control_div{top: -124px; position: relative;}
#kbDiv{height: 420px; background: #404040; border: 3px inset #FF8505; top: 0px; left: 0px;}
#kbWrap #kbDiv #keysFilled{text-align: left; font-weight:bold; font-size: 1.05em; top: 0px; left: 0px; margin-left: 20px; width: 720px; height: 280px; /*background: url(../images/keysFilledDk.png) no-repeat top left;*/}
#klDiv{width: 720px; top: 0px; left: 0px;}
#keysLabels{position: relative; top: -266px; left: 24px; width: 720px; height: 280px; /*background: url(../images/keysLabels.png) no-repeat top left;*/}

.keyRows {margin-top: 6px;}
.key{color:black; font-weight:bold;}
.keyRows > div, .key {width: 41px; height: 40px; line-height: 18px; position: relative; display: inline-block; top: 0px; padding: 3px 5px 0px 7px; margin: 0; background-color: #999; top: 1px; vertical-align: top; 
	        border-radius: 6px;
	   -moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	        box-shadow: inset 1px -1px 5px 0px #666;
	-webkit-box-shadow: inset 1px -1px 5px 0px #666;
	   -moz-box-shadow: inset 1px -1px 5px 0px #666;
}
.keyRows > div.tall{padding:0px 5px 0px 7px;}
#keyRow1 > div{padding:1px 5px 0px 7px;}
.keyRows div[class^="p"]:hover {cursor: pointer; border: 3px solid #F2FF00;
	        box-shadow: inset 1px 1px 5px 0px #666;
	-webkit-box-shadow: inset 1px 1px 5px 0px #666;
	   -moz-box-shadow: inset 1px 1px 5px 0px #666}
#keysFilled div.keyRows{left:11px; padding:0; position:relative;}
#keysFilled div.keyRows div.functionKey{font-size:0.8em;}
#keysFilled div.keyRows div.smLH{line-height:14px;}
#keysFilled #key1_1{width:42px;}
#keysFilled #key2_1{width:64px;}
#keysFilled #key3_1{width:76px;}
#keysFilled #key4_1{width:97px;}
#keysFilled #key1_14{width:91px;}
#keysFilled #key2_14{width:69px;}
#keysFilled #key3_13{width:102px;}
#keysFilled #key4_12{width:127px;}
#keysFilled #key5_1{margin-left:170px; width:270px;}
.keyRows .p_5 {color: black; background-color: #37CFFF /*#5ADA00*/;}
.keyRows .p_4 {background-color: #B5EDFF;}
.keyRows .p_3 {background-color: white;}
.keyRows .p_2 {background-color: #FF8888;}
.keyRows .p_1 {background-color: #FF5858;}
.keyRows .p_0 {color: white; background-color: red;}

#kbLegend{color: white; font-weight: bold;}
#kbLegend span.kbl_label {padding-top: 6px; display: inline-block; margin:0px 3px;}
#kbLegend span.key{padding:6px 4px 2px 2px; width:34px; height:34px;}

.bolt-icon{width: 39px;
    height: 45px;
    line-height: 30px;
    display: inline-block;
    position: absolute;
    left: -6px;
top: -7px;}

/* SCREEN START */
/* **********************/
@media only screen and ( max-width: 1330px ) {
#headColDiv div{width:307px}
#headColDiv #headCol1 {margin-left: 98px;}
#headColDiv #headCol2 {margin-left: 403px;}
#headColDiv #headCol3 {margin-left: 710px;}
}

@media only screen and ( max-width: 1018px ) {
	#top-logo img {height:59px;width:294px; }
}

@media only screen and ( min-width: 960px ) and ( max-width: 1030px ) {
.container { width: 728px; }
#slogan { display: none; }
#main-header { text-align: center; }
.nav li li { text-align: left; }
#logo { float: none; }
#top-logo img {height:60px;width:300px; }
}

@media only screen and ( max-width: 895px ) {
	#menu-main > li {display:none;}
	#menu-main #userMenu, #menu-main #et_mobile_nav_menu{display:inline-block;}
	#centerConsole{margin-top:277px;}
	#main, #menuContainer{top:118px;}
	#affAd {top:142px;}
	#wrapHeading{margin-top:47px;}
	#centerConsoleWrap{margin-top:306px !important;}
	.readingLineWidth{width: 42em;}
	.responsiveCols a.login {margin-top: 0;}
	body #container{margin-bottom:790px;}
	[class*='col-'] { width: 100%;}
	body footer {height: 440px;}
	oter #centFoot { border-left: none; border-right:none; border-top: 1px solid rgb(82, 105, 126); border-bottom: 1px solid rgb(82, 105, 126);padding-bottom: 25px;}
}

@media only screen and ( max-width: 725px ) {
	body #container{margin-bottom:820px;}
	body footer {height: 880px;}
	.readingLineWidth{width: 38em;}
}

@media only screen and ( max-width: 624px ) {
	body #container{margin-bottom:850px;}
	body footer {height: 910px;}
	.readingLineWidth{width: 32em;}
}

@media only screen and ( max-width: 551px ) {
	body #container{margin-bottom:950px;}
	body footer {height: 1010px;}
	.readingLineWidth{width: 26em;}
	#top-logo img{width:60px; object-fit: cover; object-position: 0% 0;}
}

@media only screen and ( min-width: 1919px ) and ( max-width: 2561px ) {
#body-area { padding-top: 100px; }
}