* { margin: 0 auto; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body { background-color: white;  /*D8E1E8 was pretty good, #F1FFFF was too */ text-align: center; margin: 0 auto 760px auto; overflow: auto;	/*min-width: 1000px;*/ max-width:1300px; padding:0;	width:100%;	background:#fff; height: auto;}

#menuContainer{ /*min-width:1000px;*/ position:absolute; width:100%; z-index:101; left:0px; top:0px; }
#mainPanel, #highScoreContainer{top:75px; position:relative;}
#highScoreContainer{top:90px;}

.grid { background: white; margin: 0 0 20px 0; }
.grid:after {/* Or @extend clearfix */ 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-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%; }
.col-2-5 { width: 40%;}
.col-3-5 { width: 60%;}
.module { padding: 20px; background: #eee; }

/* Opt-in outside padding */
.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); }
#validWordBank{ background: rgb(172,216,69); border-radius: inherit; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position:relative; border: 3px solid #709719; behavior: url(../utilities/PIE/PIE.htc);}
#validWordBank > p{font-family:'Overpass', arial; font-weight: 700; font-size:1.2em; margin:0.1em 0 0.6em 0; color:#095409;}
#invalidWordBank{ background: #F2762E; background: #FFD505; border-radius: inherit; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position:relative; border: 3px solid #a38700; behavior: url(../utilities/PIE/PIE.htc); }
#invalidWordBank > p{font-family:'Overpass', arial; font-weight: 700; font-size:1.2em; margin:0.1em 0 0.6em 0; color:#605100;}
#centerEntryModule{ border: 6px solid rgb(96, 152, 198); background: #DFF4FF; border-radius: inherit; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; position:relative; behavior: url(../utilities/PIE/PIE.htc);color:#054c87; }
#centerEntryModule h1{font-family: 'Kavoon', sans-serif;	font-size:3.4em; margin:10px auto 30px auto; color: #055485; text-shadow: 2px 3px 0px #aed1d9;}
#startingLetterBox span{ padding: 4px; font-size:18px; }
.floatCenterWrap{ position:relative; float: left; left: 50%; }
.floatCenterObj{ display: block; text-align: left; position: relative; float: left; left: -50%; }
#WordCaptureBox, #badWordCaptureBox{ padding: 4px; font-size: 18px; color:#095409;}
#badWordCaptureBox{color:#625200;}
#WordCaptureBox div, #badWordCaptureBox div{ -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

div #gInput, div #inputHint { position: absolute; width: 69%; height: 55px; line-height: 55px; font-size: 2em; font-weight: bold; font-family: Arial; top:220px; left:23%; behavior: url(../utilities/PIE/PIE.htc); padding:5px;}
div #gInput {background-color:transparent;color: #000;}
div #inputHint{color: #bbb;}

.redGlow { position: relative; outline:none; border-color:red; box-shadow:0 0 5px red; behavior: url(../utilities/PIE/PIE.htc);}
.endTimer{/*background:#ffa8a8; font-family: 'Concert One'; border-radius: 5px; margin-left:-5px; padding:0px 5px 2px 5px;*/}

#centerEntryModule.level_1{border-color: #2a79a2; background-color: #d3edf3; margin:0px;}
#centerEntryModule.level_2{}
#centerEntryModule.level_3{}
#centerEntryModule.level_4{border:6px solid rgb(205, 72, 72); margin:0px; background:repeating-linear-gradient(-90deg, #ffd1d1 0px, #ffdbdb 15px, #ffe0e0 25px, #ffdbdb 35px, #ffd1d1 65px); box-shadow:inset 1px 1px 131px rgba(222, 0, 0, 0.56), 0 4px 45px -5px red; color: #810000;}
#centerEntryModule.level_4 h1{color:#810000; text-shadow:2px 3px 0px #f09191;}
#centerEntryModule.level_4 .ui-state-default, .level_4 .stoUIClickable{background: #be4646; color: #ffe3e3; border-color: #810000;}
#centerEntryModule.level_4 .ui-state-active{background: #8d4f4f; border-color:#4d0101;}
#centerEntryModule.level_4 #gInput{box-shadow: 0px 0px 15px 3px #ff6666; border: 3px solid #aa4b4b; border-radius: 5px;}
#centerEntryModule.level_4 #xStatsToggleBut{color: #810000; font-size: 1.2em;}
.level_4 #moreArrow{border-top-color:#810000;}
.level_4 #lessArrow{border-bottom-color:#810000;}

a {color:#369;}
a:hover {color:#fff;	text-decoration:none;}
h1, h2, h3 {margin:.8em 0 .2em 0; padding:0;}
p {margin:.4em 0 .8em 0; padding:0;}
#header {float:left;	width:100%;	padding:0;margin:60px 0 0 0;}
#header p {padding:.5em 15px	.2em 15px;margin:0;}
/*#header h1  {padding:.4em 15px .2em 15px;margin:0;font-family: “Gill Sans”, “Trebuchet MS”, Calibri, sans-serif;font-size: 275%;}*/
#header h2  {padding:0.2em 15px 2em 15px;margin:0;font-family: Verdana,Geneva,Arial,helvetica,sans-serif;font-size: 110%;line-height: 24px;font-weight: normal;}
.topLeftLink{position:absolute; left:24px; top:14px;}
.topLeftLink a{color:#810000; font-size:1.7em; font-weight:bold;}
.level_1 .topLeftLink a{color:#055485;}

/* *************************** */
/* AFTER HOLY GRAIL CSS LAYOUT */
/* *************************** */

.wordBank{min-height:310px;}
#resetBtn{position:relative;/*width:40%;*/height:59px;font-size:1.3em;margin: 41px auto -19px auto;left: 0px;top: -44px;visibility: hidden;cursor: hand; cursor: pointer;}
#wrapStats, #wrapExtraStats { position: relative; left: 0px; top: 0px; width: 86%; height: 110px; display: inline-block; margin-left:0px; font-size: 0.8em;}
.statsText{font-family:'Concert One'; font-size:1.1em;}
#timerText, #scoreText, #highScoreText{font-size:1.2em; font-weight:bold;}
#xStatsToggleBut{ position: relative; width: 100px; height:25px; margin-top:-30px; margin-bottom:10px; color: #13567c; cursor: hand; cursor: pointer; z-index:101;}
#moreArrow, #lessArrow{ display: inline-block; height:12px; width:0; border-left: 8px solid transparent; border-right: 8px solid transparent; }
#moreArrow{ border-top: 10px solid #13567c; }
#lessArrow{ border-bottom: 10px solid #13567c; display:none; margin-bottom:2px; }
#extraStatsHidden{display: none; margin: 42px 0 6px 0;}
#multBillboard{ background-color: #e3e3e3; border: 4px solid #888; display: inline-block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; text-align: center; vertical-align: middle;}
.level_4 #multBillboard{
	border-color:rgb(188,9,0);
	background-color: rgb(255, 189, 189);
}
#multText{font-family: 'Concert One'; font-size:2.8em; position:absolute; z-index:102; left:15px; top:47px;}
.level_1 #multText{color: #1468BC;}
.level_2 #multText{color: #938700;}
.level_3 #multText{color: #F75900;}
.level_4 #multText{font-size:3.2em; color: #ffeded; left:10px; top:40px;}
#multBox { text-align: center !important; position: absolute !important; left: 0px; top: 0px; margin-left: -35px; width: 130px; height: 130px; text-align: center; line-height: 130px;}
#multBox:before { display:inline-block; height:100%; vertical-align: middle; margin-right: -0.25em; content: '';}
#timer, #SLB_letters, #wbkScore, #multText, .statsText{ display: inline; font-size:2.5em;}
#clearDataBtn{position: absolute; top: -32px; left: 0px;}
.hsBorderBottom{margin-bottom:20px; padding-bottom:25px; border-bottom:2px solid #769726;}
#highScoreContainer .tinyPic{vertical-align:middle; width:38px; height:38px;}
#highScoreContainer .adjName{display: inline-block; vertical-align: middle; line-height: 25px; width: 74%; text-align: center; text-decoration: underline; font-size: 1.2em;}
#highScoreContainer a:hover span{color: #369; font-weight: bold; margin-right:-4px;}
.uname a{min-width:198px; display:inline-block;}
.SLtoClick{text-decoration:underline;}
.SLtoClick:hover{cursor:pointer; background:rgba(0,0,0,0.2);}
#highScoreContainer tr:hover {background: rgba(0, 0, 0, 0.1);}
#slbLettersSelectDropDown{position: absolute; left: 8%; top: 334px; text-align:left;}
#slbLettersSelectDropDown .boldFont {display:block; padding-bottom:5px;}
#slbLettersSelectDropDown .ui-selectmenu-button{width:180px !important;}
#slbLettersSelect-button{z-index:95;}
#slbLettersSelect-menu{max-height:300px;}
#timerDiv { width: 150px; text-align: left; position: absolute; left: 0px; top: 0px; margin-left: 122px;}
#scoreDiv { width: auto; text-align: left; position: absolute; left: 0px; top: -5px; margin-left: 246px; padding:5px 12px; }
#highScoreDiv { width: 200px; text-align: left; position: absolute; left: 0px; top: 0px; margin-left: 415px; }
#wordValueDiv{ width: 300px; text-align: left; position: absolute; left: 0px; top: 15.5px; margin-left: 2%; }
#wordScoreDiv{ width: 200px; text-align: left; position: absolute; left: 0px; top: 15.5px; margin-left: 21%;}
#numWordsDiv{ width: 200px; text-align: left; position: absolute; left: 0px; top: 15.5px; margin-left: 40%;}
#typingSpeedDiv{ width: 150px; text-align: left; position: absolute; left: 0px; top: 0px; margin-left: 65%; }
#aveTypingSpeedDiv{ width: 150px; text-align: left; position: absolute; left: 0px; top: 0px; margin-left: 87%; }
#main{  text-align:left;}
.instructions{ height:250px;}
#instructDiv{ text-align:left; height:200px; padding:0 35px 0 35px;}
#instructDiv h3{ text-align:center;}
#diffSelectContainer{ position: relative; text-align: center; margin:0 auto; top:0px; right:3%; height:50px; z-index:10;}
#diffSelectDropDown{ position: absolute !important; right: 0px;}
#diffTypeSelected{ position: absolute !important; left: 68px; top:0px;}
.instructWrap{ margin-top:-32px;}
.widerOL{ margin-right:-25px;}
.orangeButton { font-family: Arial; color: #000000; font-size: 28px; padding: 10px 60px; text-decoration: none; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 2px 3px 5px #666666; -moz-box-shadow: 2px 3px 5px #666666; box-shadow: 2px 3px 5px #666666; text-shadow: 1px 1px 8px #cfcfcf; border: solid #e36e07 4px; background: -webkit-gradient(linear, 0 0, 0 100%, from(#ffbc5e), to(#fc8124)); background: -moz-linear-gradient(top, #ffbc5e, #fc8124); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffbc5e, endColorStr=#fc8124); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffbc5e, endColorStr=#fc8124); display:inline-block;}
.orangeButton:hover { background: #f58813;}

/* IE only */
.ie .grid { width:98%; }
.ie .col-1-1 { width: 98%; }
.ie .col-2-3, .ie .col-4-6 { width: 62%; }
.ie .col-1-6 { width: 15%; }
.ie .col-1-2 { width: 48%; }
.ie .col-1-4 { width: 23%; }
.ie .col-1-3 { width: 31%; }
.ie .col-1-8 { width: 11%; }
.ie div #gInput, .ie div #inputHint { left:45px; }
.ie #wrapStats,.ie #wrapExtraStats{ left: 35px;}
.ie #multBox { padding-top:35px;}
.ie .floatCenterObj, .ie .floatCenterWrap { left:0px;}
.ie div #inputHint, .ie8 div #inputHint{ color: #000;}

#fbLikeDiv{ position: relative; text-align: center; margin: 0 auto; width: 90px; height: 80px; margin-top: 8px; margin-bottom: -80px; margin-right: 120px; z-index: 90;}


.module table {width:100%; text-align:center;}
.module #personalAlphaHS table {width:75%; text-align:center;}
table th, table td { padding: 5px 10px;}
table td.shortCol, table td.shortCol{width:25px;}
.module table.table3Col {width:62%; text-align:center;}
.module table.table5Col {width:85%; text-align:center;}

.scoreBubble{position: absolute; top: 100px; left: 340px; font-size: 2em; font-family: 'Concert One'; padding: 3px 8px; border-radius: 9px; color: #055485;}
.level_4 .scoreBubble{color:#810000;}
.hugeScoreBubble{top:70px; font-size:3.3em;	text-shadow: 0px 0px 6px #ffffff;}

.bigScoreBubble, .hugeScoreBubble, .level_4 .bigScoreBubble, .level_4 .hugeScoreBubble{
background: #ff802a;
	border: 2px solid #9d5600;
	color:white;
}

.highScores .module{background: #e7ffab; border-color: #769726;}

.sensePlug{display:inline-block; position:relative;}
#topleadPlug{width: 728px; height: 90px; top:70px;}
#topsecondLeadPlug{width: 728px; height: 90px; top:62px;}
#largeRectPlug{width: 336px; height: 280px;top:22px;}

@media only screen and ( max-width: 1040px ) {
	body{height:2660px;}
}

@media only screen and ( max-width: 1018px ) {
	#mainPanel{font-size:0.8em;}
	#diffSelectContainer{top:15px;}
	div #gInput, div #inputHint{width:64%;}
	#WordCaptureBox, #badWordCaptureBox{font-size:1em;}
}

@media only screen and ( max-width: 895px ) {
	.level_4 #multText{left:-4px; top:44px;}
	#multText{left: -2px; top: 48px;}
	#multBox{margin-left:-55px;}
	.module{padding:12px;}
	#timerDiv{margin-left:77px;}
	#scoreDiv{margin-left:182px;}
	#highScoreDiv{margin-left:291px;}
	#slbLettersSelectDropDown .ui-selectmenu-button{width:140px !important;}
	.uname a{min-width:88px;}
	table th, table td {padding:4px;}
	.stoFancyList{width:94%;}
}

@media only screen and ( max-width: 767px ) {
	#mainPanel{font-size:0.6em;}
	table th, table td {padding:4px;}
	div #gInput, div #inputHint{top:160px; height:40px; line-height:40px;}
	#wrapStats{height:10px;}
	#wrapExtraStats{height:50px;}
	#slbLettersSelectDropDown{top:223px;}
	#diffSelectContainer{top:26px;}
	#highScoreContainer [class*='col-']{width:100%;}
	#topleadPlug{width: 320px;height: 100px;}
	#topsecondLeadPlug{width: 320px;height: 100px;}
	#scoreDiv{margin-left:162px;}
	#highScoreDiv{margin-left:271px;}
}

@media only screen and ( max-width: 624px ) {
	#mainPanel [class*='col-']{width:100%;}
	.wordBank{min-height:0px; margin:15px 0px;}
	[class*='col-']{width:100%;}
	body{height:4210px;}
	#highScoreDiv{width:auto;}
}

@media only screen and ( max-width: 551px ) {
	body{height:4510px;}
}

@media only screen and ( max-width: 450px ) {
	body{height:4810px;}
}