:root { --hurdle-version: "1.0.2"; } /* This file's release. tools/bump.sh sets it; bodyload() checks every file agrees before the game starts. */

/* HTML ELEMENTS */

	body {
		display: flex;
		justify-content: center;
		min-width: 375px;
		margin: 8px 0px; /* no side margin: with min-width it made a 375px-wide phone scroll sideways */
		background-color: #080808;
		color: #DDDDDD;
		font-family: Arial, Helvetica, sans-serif;
		touch-action: pan-x pan-y; /* https://stackoverflow.com/questions/37808180/disable-viewport-zooming-ios-10-safari */
		zoom: var(--page-zoom, 1); /* fitpagetowindow() (game.js): up to 150% on big screens, never below 100% */
	}
	select	{ font-size: 11px; }
	button { font-size: 12px; color: #000000; }
	a { color: #DDDDDD; }

/* MAIN PAGE-STRUCTURE ELEMENTS */

	#ctrbox 	{ position: absolute; margin: 0 auto; height: calc((100vh - 16px) / var(--page-zoom, 1)); } /* the window, less body's 8px margins; zoom scales vh too, so divide it back out */
	#pagetitle 	{ font-size: 32px; font-weight: bolder; text-align: center; width: 100%; }
	#menu 		{ position: absolute; top: 13px; left: 20px; cursor: pointer; }
	#reset 		{ position: absolute; top: 13px; right: 20px; cursor: pointer; }
	#info 		{ position: absolute; top: 13px; left: 50px; cursor: pointer; }
	#score		{ position: absolute; top: 13px; right: 50px; cursor: pointer; }
	#challenge  { position: absolute; top: 12px; left: 72px; cursor: pointer; }
	#clock 		{ position: absolute; top: 35px; left: 150px; width: 75px; font-size: 12px; border: 1px solid #666666; color: #FFBBBB; background-color: #080808; border-radius: 3px; z-index: 5; text-align: center; }
	#underline 	{ margin: 0 auto; border-bottom: 1px solid #333333; height: 0px; width: 375px; top: 60px; }
	#mainbox 	{ position: relative; top: 0px; display:grid; height: 85%; }
	#workspace 	{ clear: both; margin: 0 auto; padding: 8px; height: 428px; }

/* TIMER AND KEYBOARD ELEMENTS */

	#timer 		 { margin: 0 auto; }
	#progressbar { width: 280px; }
	#keyboard	 { bottom: 20px; height: 140px; margin-left: auto; margin-right: auto; }
	#keyrow1, #keyrow2, #keyrow3 { clear: both; }
	#keyspacer 	 { float: left; width: 20px; height: 40px; }

/* POPUP DIVS */

	#message {
		display: none;
		position: absolute;
		margin: 0 auto;
		top: 100px;
		background-color: #CCCCCC;
		color: #333333;
		padding:10px;
		border-radius: 5px;
		z-index: 6;
	}

	#settings, #information, #scoreboard, #challenges {
		display: none;
		position: absolute;
		margin: 0 auto;
		min-width: 375px;
		width: 100%;
		max-width: 400px; /* phone-sized on every screen: fills a phone, stays centred on a wide one */
		height: 100%;
		min-height: 680px;
		top: 0px;
		background-color: #181818;
		border-radius: 8px;
	}
	#scoreboard {
		top: 100px;
		height: 600px;
		min-height: 600px;
		border: 1px solid #333333;
	}
	#challenges {
		top: 100px;
		height: 270px;
		min-height: 270px;
		border: 1px solid #333333;
	}

	#settingsheader, #infoheader, #variationsheader, #scoreheader, #distributionheader, #challengeheader {
		font-size: 11px;
		font-weight: bold;
		text-align: center;
		clear: both;
		padding: 10px;
		margin: 10px;
	}
	#variationsheader 																	{ padding-top: 16px; padding-bottom: 0px; }
	#closesettings, #closeinfo, #closescore, #closechallenges 							{ position: absolute; top: 8px; right: 8px; cursor: pointer; }
	#closesettings:after, #closeinfo:after, #closescore:after, #closechallenges:after	{ display: inline-block; font-size: 28px; content: "\00d7"; /* This will render the times 'X' */ }
	#savesettings 																		{ position: absolute; bottom: 10px; right: 10px; cursor: pointer; }
	#specialannouncement {
		display: none;
		position: absolute;
		margin: 0 auto;
		max-width: 340px;
		height: 50px;
		top: 58px;
		background-color: #181818;
		border-radius: 8px;
		padding: 10px;
		font-size: 12px;
	}
	.shortlist {
		float: left;
		background-color: #CCCCCC;
		color: #222222;
		border-radius: 8px;
		padding: 6px;
		margin: 0px 8px;
		cursor: pointer;
	}
	.icon 		{ display: inline-block; width: 12%; }
	.posticon 	{ display: inline-block; width:80%; vertical-align:top; }
	.closespecial { position: absolute; bottom: 10px; right: 10px; }


/* INFORMATION AND SETTINGS PAGE LAYOUTS */

	.scoretypeheader {
		clear: both;
		background-color: #181818;
		padding-left: 10px;
		padding-right: 6px;
		padding-top: 8px;
		padding-bottom: 6px;
		color: #CCCCCC;
	}
	.indent {
		padding-left: 18px;
		padding-right: 18px;
	}
	.textleft {
		float:left;
		width:220px;
		height:24px;
		padding-top: 4px;
		padding-left: 10px;
		clear:both;
		text-align: left;
		vertical-align: middle;
	}
	.textfull {
		float:left;
		width:365px; /* 375 with its padding: fits a 375px-wide phone */
		height:24px;
		padding-top: 4px;
		padding-left: 10px;
		clear:both;
		text-align: left;
		vertical-align: middle;
	}
	.scorepara {
		float:left;
		max-width:375px; /* wraps inside a phone-width popup rather than running off its edge */
		padding: 4px 0px 4px 10px;
		clear:both;
		text-align: left;
		vertical-align: middle;
	}
	.title, .scoretext {
		float: left;
		font-size: 11px;
		color: #EEEEEE;
	}
	.desc {
		padding-top: 5px;
		float: left;
		clear: both;
		font-size: 8px;
		color: #888888;
	}
	.right {
		padding-top: 1px;
		padding-left: 6px;
		font-size: 10px;
		clear: none;
	}
	.inputright {
		float:right;
		text-align: right;
		padding-right: 10px;
		width:160px;
		height:24px;
		padding-top: 4px;
		vertical-align: middle;
	}
	.spacer {
		float: left;
		clear: both;
		height:1px;
		width: 95%;
		margin: 6px 10px;
		border-bottom: 1px solid #444444;
	}

/* CHALLENGES WINDOW */

	#challengecontent 	{ background-color: #051100; }
	#cancelchallenge 	{ position: absolute; bottom: 10px; right: 10px; cursor: pointer; }
	.li_challenge {
		float: left;
		clear: both;
		width: 91%;
		background-color: #222222;
		color: #BBBBBB;
		border: 1px solid #CCCCCC;
		border-radius: 8px;
		padding: 6px;
		margin: 3px 10px;
		font-size: 11px;
		vertical-align: middle;
		cursor: pointer;
	}
	.li_challenge:hover 		{ background-color: #444444; color: #DDDDDD; border: 1px solid #DDDDDD; }
	.challenge_completed 		{ background-color: #111111; color: #888888; border: 1px solid #888888; cursor: default; }
	.challenge_completed:hover 	{ background-color: #111111; color: #888888; border: 1px solid #888888; cursor: default; }
	.green 						{ color:#558844;  }
	.red 						{ color:#dd3333; }

/* STATISTICS */

	#tabbox {
		float: left;
		background-color: #181818;
		width: 100%;
	}
	#scorecontent {
		background-color: #051100;
	}
	.statstab {
		float:left;
		font-size: 10px;
		padding: 5px;
		color: #555555;
		border-radius: 7px 7px 0px 0px;
		background-color: #222222;
	}
	.statstabselected {
		float:left;
		font-size: 10px;
		padding: 5px;
		color: #DDDDDD;
		border-radius: 7px 7px 0px 0px;
		background-color: #558844;
	}
	.statspacer {
		float: left;
		clear: both;
		height: 10px;
		width: 350px;
	}
	.basicstatrow {
		float:left;
		clear:both;
		width:365px; /* 375 with its padding: fits a 375px-wide phone */
		height:20px;
		padding-top: 2px;
		padding-left: 10px;
		text-align: left;
		vertical-align: middle;
	}
	.stattitle {
		float: left;
		width: 120px;
		padding-top: 1px;
		font-size: 13px;
		color: #558844;
	}
	.stat {
		float: left;
		font-size: 16px;
		font-weight: bolder;
		color: #EEEEEE;
	}
	.histogrambarlabel {
		float: left;
		font-size: 12px;
		padding-right: 6px;
		padding-top: 2px;
	}
	.histogramfullbar {
		float: left;
		width: 340px; /* with its label, fits a 365px row; game.js scales the fill to this */
		height: 16px;
		background-color: #222222;
	}
	.histogramfill {
		float: left;
		width: 10px;
		height: 14px;
		font-size: 12px;
		text-align: right;
		padding-top: 2px;
		background-color: #558844;
	}



/* SYNC AND OTHER DEVICES (bottom of the statistics window) */

	#syncbox { float: left; clear: both; width: 355px; padding: 14px 10px 0px 10px; font-size: 11px; color: #AAAAAA; line-height: 18px; }
	#synclinks { padding-top: 4px; }
	#linkpanel { padding-top: 8px; }
	#linkerror { color: #dd3333; min-height: 16px; }
	#linkcodeinput { width: 110px; margin: 4px 0px; font-size: 14px; text-transform: uppercase; }
	.linkcode { font-size: 26px; font-weight: bold; letter-spacing: 3px; color: #EEEEEE; padding: 6px 0px; }

/* KEYBOARD AND GAME GRID / SCORING */

	.row { position: relative; clear: both; }
	.letter {
		width: 55px;
		height: 55px;
		margin: 1px;
		float: left;
		font-size: 37px;     /* about 85% of the original 44px, which nearly filled the tile */
		line-height: 57px;   /* 2px over the tile's inner height: centres the capital letters, which the default line spacing left near the top */
		font-weight: bolder;
		color: #EEEEEE;
		background-color: #080808;
		border: 1px solid #444444;
		text-align: center;
		vertical-align: middle;
		border-radius: 3px;
	}
	.letterkey, .backspace, .enter {
		width: 10px;
		height: 20px;
		margin: 3px;
		padding: 12px 10px 8px 10px;
		border-radius: 5px;
		float: left;
		font-size: 14px;
		font-weight: bolder;
		color: #CCCCCC;
		background-color: #555555;
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
	}
	.backspace, .enter {
		width: 46px;
		padding: 12px 2px 8px 2px;
		font-size: 12px;
	}
	.greenletter, .yellowletter, .darkgrayletter, .pinkletter, .orangeletter { border: 1px solid #111111; }
	.smallletter 	{ width: 47px; height: 47px; font-size: 31px; line-height: 49px; }
	.smallestletter { width: 35px; height: 35px; font-size: 25px; line-height: 37px; }
	.lightgrayletter, .lightgraykey 	{ background-color: #555555; }
	.darkgrayletter, .darkgraykey 		{ background-color: #222222; }

	.greenletter, .greenkey, input:checked + .slider { background-color: #558844; /* #8a64d6; */ }
	.yellowletter, .yellowkey 			{ background-color: #bb9933; /* #729efd; */ }
	.orangeletter 						{ background-color: #dd8833; /* #3acadf; */ }
	.darkredkey 						{ background-color: #2A2222; color: #553333; }
	.pinkletter, .pinkkey 				{ background-color: #f8b195; /* #ff8888; */ }
	.redtext 							{ color: #dd3333; }
	.greentext							{ color: #558844; }

/* FONT AWESOME */

	.fa { font-family: FontAwesome; }
	.medium-icon { font-size: 20px; padding-right: 6px; }
	.large-icon { font-size:30px; padding-right: 6px; }

/* SLIDER SWITCHES */

	/* The switch - the box around the slider */
	.switch { position: relative; display: inline-block; width: 22px; height: 14px; vertical-align: middle; background-color: #111111; }
	.switch input { display:none; /* Hide default HTML checkbox */ }
	/* The slider */
	.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 12px; background-color: #aaaaaa; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; }
	.slider:before { position: absolute; content: ""; height: 10px; width: 10px; left: 2px; bottom: 2px; border-radius: 50%; background-color: white; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; }
	input:checked + .slider:before { -moz-transform: translateX(8px); -webkit-transform: translateX(8px); -ms-transform: translateX(8px); transform: translateX(8px); }