HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<input type="checkbox" name="checkvaliditems" id="checkvaliditems" />
<label for="checkvaliditems">Check for valid squares</label>
<div class="crossword-board-container">
<div class="crossword-board">
<!-- ROW 1 -->
<input id="item1-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item1-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[hH]{1}$" required="required" value="" />
<input id="item1-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item1-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
<input id="item1-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[uU]{1}$" required="required" value="" />
<input id="item1-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item1-7"></span>
<span class="crossword-board__item--blank" id="item1-8"></span>
<input id="item1-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item1-10"></span>
<input id="item1-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item1-12"></span>
<input id="item1-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[fF]{1}$" required="required" value="" />
<!-- ROW 1 -->
<!-- ROW 2 -->
<input id="item2-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item2-2"></span>
<span class="crossword-board__item--blank" id="item2-3"></span>
<input id="item2-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item2-5"></span>
<input id="item2-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item2-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<input id="item2-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item2-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[mM]{1}$" required="required" value="" />
<input id="item2-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item2-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item2-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<input id="item2-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<!-- ROW 2 -->
<!-- ROW 3 -->
<input id="item3-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item3-2"></span>
<input id="item3-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item3-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item3-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item3-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item3-7"></span>
<span class="crossword-board__item--blank" id="item3-8"></span>
<input id="item3-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item3-10"></span>
<input id="item3-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item3-12"></span>
<input id="item3-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<!-- ROW 3 -->
<!-- ROW 4 -->
<input id="item4-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[gG]{1}$" required="required" value="" />
<input id="item4-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item4-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item4-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item4-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item4-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item4-7"></span>
<input id="item4-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
<input id="item4-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item4-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[pP]{1}$" required="required" value="" />
<input id="item4-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[hH]{1}$" required="required" value="" />
<input id="item4-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item4-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
<!-- ROW 4 -->
<!-- ROW 5 -->
<input id="item5-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[hH]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item5-2"></span>
<input id="item5-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
<input id="item5-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
<input id="item5-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item5-6"></span>
<input id="item5-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[fF]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item5-8"></span>
<input id="item5-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item5-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<input id="item5-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item5-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item5-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<!-- ROW 5 -->
<!-- ROW 6 -->
<input id="item6-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item6-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item6-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item6-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item6-5"></span>
<input id="item6-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[jJ]{1}$" required="required" value="" />
<input id="item6-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item6-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<input id="item6-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<input id="item6-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[yY]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item6-11"></span>
<input id="item6-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item6-13"></span>
<!-- ROW 6 -->
<!-- ROW 7 -->
<span class="crossword-board__item--blank" id="item7-1"></span>
<input id="item7-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item7-3"></span>
<span class="crossword-board__item--blank" id="item7-4"></span>
<input id="item7-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<input id="item7-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item7-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item7-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item7-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item7-10"></span>
<span class="crossword-board__item--blank" id="item7-11"></span>
<input id="item7-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item7-13"></span>
<!-- ROW 7 -->
<!-- ROW 8 -->
<span class="crossword-board__item--blank" id="item8-1"></span>
<input id="item8-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item8-3"></span>
<input id="item8-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[hH]{1}$" required="required" value="" />
<input id="item8-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item8-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" required="required" value="" />
<input id="item8-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item8-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item8-9"></span>
<input id="item8-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[vV]{1}$" required="required" value="" />
<input id="item8-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item8-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item8-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<!-- ROW 8 -->
<!-- ROW 9 -->
<input id="item9-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item9-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
<input id="item9-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[fF]{1}$" required="required" value="" />
<input id="item9-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[uU]{1}$" required="required" value="" />
<input id="item9-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item9-6"></span>
<input id="item9-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item9-8"></span>
<input id="item9-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[bB]{1}$" required="required" value="" />
<input id="item9-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item9-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[dD]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item9-12"></span>
<input id="item9-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[wW]{1}$" required="required" value="" />
<!-- ROW 9 -->
<!-- ROW 10 -->
<input id="item10-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item10-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item10-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<input id="item10-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item10-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[cC]{1}$" required="required" value="" />
<input id="item10-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item10-7"></span>
<input id="item10-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[nN]{1}$" required="required" value="" />
<input id="item10-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<input id="item10-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[gG]{1}$" required="required" value="" />
<input id="item10-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item10-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item10-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<!-- ROW 10 -->
<!-- ROW 11 -->
<input id="item11-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item11-2"></span>
<input id="item11-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item11-4"></span>
<input id="item11-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item11-6"></span>
<span class="crossword-board__item--blank" id="item11-7"></span>
<input id="item11-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item11-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item11-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
<input id="item11-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[mM]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item11-12"></span>
<input id="item11-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[lL]{1}$" required="required" value="" />
<!-- ROW 11 -->
<!-- ROW 12 -->
<input id="item12-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item12-2" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[cC]{1}$" required="required" value="" />
<input id="item12-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[cC]{1}$" required="required" value="" />
<input id="item12-4" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[uU]{1}$" required="required" value="" />
<input id="item12-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item12-6" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[aA]{1}$" required="required" value="" />
<input id="item12-7" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[cC]{1}$" required="required" value="" />
<input id="item12-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[yY]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item12-9"></span>
<input id="item12-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[uU]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item12-11"></span>
<span class="crossword-board__item--blank" id="item12-12"></span>
<input id="item12-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[vV]{1}$" required="required" value="" />
<!-- ROW 12 -->
<!-- ROW 13 -->
<input id="item13-1" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[mM]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item13-2"></span>
<input id="item13-3" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[kK]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item13-4"></span>
<input id="item13-5" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<span class="crossword-board__item--blank" id="item13-6"></span>
<span class="crossword-board__item--blank" id="item13-7"></span>
<input id="item13-8" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[sS]{1}$" required="required" value="" />
<input id="item13-9" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[oO]{1}$" required="required" value="" />
<input id="item13-10" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[rR]{1}$" required="required" value="" />
<input id="item13-11" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[tT]{1}$" required="required" value="" />
<input id="item13-12" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[iI]{1}$" required="required" value="" />
<input id="item13-13" class="crossword-board__item" type="text" minlength="1" maxlength="1" pattern="^[eE]{1}$" required="required" value="" />
<div class="crossword-board crossword-board--highlight crossword-board--highlight--across">
<span id="across-1" class="crossword-board__item-highlight crossword-board__item-highlight--across-1"></span>
<span id="across-7" class="crossword-board__item-highlight crossword-board__item-highlight--across-7"></span>
<span id="across-8" class="crossword-board__item-highlight crossword-board__item-highlight--across-8"></span>
<span id="across-10" class="crossword-board__item-highlight crossword-board__item-highlight--across-10"></span>
<span id="across-11" class="crossword-board__item-highlight crossword-board__item-highlight--across-11"></span>
<span id="across-14" class="crossword-board__item-highlight crossword-board__item-highlight--across-14"></span>
<span id="across-16" class="crossword-board__item-highlight crossword-board__item-highlight--across-16"></span>
<span id="across-17" class="crossword-board__item-highlight crossword-board__item-highlight--across-17"></span>
<span id="across-19" class="crossword-board__item-highlight crossword-board__item-highlight--across-19"></span>
<span id="across-21" class="crossword-board__item-highlight crossword-board__item-highlight--across-21"></span>
<span id="across-22" class="crossword-board__item-highlight crossword-board__item-highlight--across-22"></span>
<span id="across-23" class="crossword-board__item-highlight crossword-board__item-highlight--across-23"></span>
<span id="across-26" class="crossword-board__item-highlight crossword-board__item-highlight--across-26"></span>
<span id="across-28" class="crossword-board__item-highlight crossword-board__item-highlight--across-28"></span>
<span id="across-29" class="crossword-board__item-highlight crossword-board__item-highlight--across-29"></span>
<span id="across-30" class="crossword-board__item-highlight crossword-board__item-highlight--across-30"></span>
<span id="across-31" class="crossword-board__item-highlight crossword-board__item-highlight--across-31"></span>
<span id="across-32" class="crossword-board__item-highlight crossword-board__item-highlight--across-32"></span>
<span id="across-33" class="crossword-board__item-highlight crossword-board__item-highlight--across-33"></span>
</div>
<div class="crossword-board crossword-board--highlight crossword-board--highlight-down">
<span id="down-1" class="crossword-board__item-highlight crossword-board__item-highlight--down-1"></span>
<span id="down-2" class="crossword-board__item-highlight crossword-board__item-highlight--down-2"></span>
<span id="down-3" class="crossword-board__item-highlight crossword-board__item-highlight--down-3"></span>
<span id="down-4" class="crossword-board__item-highlight crossword-board__item-highlight--down-4"></span>
<span id="down-5" class="crossword-board__item-highlight crossword-board__item-highlight--down-5"></span>
<span id="down-6" class="crossword-board__item-highlight crossword-board__item-highlight--down-6"></span>
<span id="down-8" class="crossword-board__item-highlight crossword-board__item-highlight--down-8"></span>
<span id="down-9" class="crossword-board__item-highlight crossword-board__item-highlight--down-9"></span>
<span id="down-12" class="crossword-board__item-highlight crossword-board__item-highlight--down-12"></span>
<span id="down-13" class="crossword-board__item-highlight crossword-board__item-highlight--down-13"></span>
<span id="down-15" class="crossword-board__item-highlight crossword-board__item-highlight--down-15"></span>
<span id="down-18" class="crossword-board__item-highlight crossword-board__item-highlight--down-18"></span>
<span id="down-19" class="crossword-board__item-highlight crossword-board__item-highlight--down-19"></span>
<span id="down-20" class="crossword-board__item-highlight crossword-board__item-highlight--down-20"></span>
<span id="down-21" class="crossword-board__item-highlight crossword-board__item-highlight--down-21"></span>
<span id="down-22" class="crossword-board__item-highlight crossword-board__item-highlight--down-22"></span>
<span id="down-23" class="crossword-board__item-highlight crossword-board__item-highlight--down-23"></span>
<span id="down-24" class="crossword-board__item-highlight crossword-board__item-highlight--down-24"></span>
<span id="down-25" class="crossword-board__item-highlight crossword-board__item-highlight--down-25"></span>
<span id="down-26" class="crossword-board__item-highlight crossword-board__item-highlight--down-26"></span>
<span id="down-27" class="crossword-board__item-highlight crossword-board__item-highlight--down-27"></span>
<span id="down-28" class="crossword-board__item-highlight crossword-board__item-highlight--down-28"></span>
<span id="down-30" class="crossword-board__item-highlight crossword-board__item-highlight--down-30"></span>
</div>
<div class="crossword-board crossword-board--labels">
<span id="label-1" class="crossword-board__item-label crossword-board__item-label--1"><span class="crossword-board__item-label-text">1</span></span>
<span id="label-2" class="crossword-board__item-label crossword-board__item-label--2"><span class="crossword-board__item-label-text">2</span></span>
<span id="label-3" class="crossword-board__item-label crossword-board__item-label--3"><span class="crossword-board__item-label-text">3</span></span>
<span id="label-4" class="crossword-board__item-label crossword-board__item-label--4"><span class="crossword-board__item-label-text">4</span></span>
<span id="label-5" class="crossword-board__item-label crossword-board__item-label--5"><span class="crossword-board__item-label-text">5</span></span>
<span id="label-6" class="crossword-board__item-label crossword-board__item-label--6"><span class="crossword-board__item-label-text">6</span></span>
<span id="label-7" class="crossword-board__item-label crossword-board__item-label--7"><span class="crossword-board__item-label-text">7</span></span>
<span id="label-8" class="crossword-board__item-label crossword-board__item-label--8"><span class="crossword-board__item-label-text">8</span></span>
<span id="label-9" class="crossword-board__item-label crossword-board__item-label--9"><span class="crossword-board__item-label-text">9</span></span>
<span id="label-10" class="crossword-board__item-label crossword-board__item-label--10"><span class="crossword-board__item-label-text">10</span></span>
<span id="label-11" class="crossword-board__item-label crossword-board__item-label--11"><span class="crossword-board__item-label-text">11</span></span>
<span id="label-12" class="crossword-board__item-label crossword-board__item-label--12"><span class="crossword-board__item-label-text">12</span></span>
<span id="label-13" class="crossword-board__item-label crossword-board__item-label--13"><span class="crossword-board__item-label-text">13</span></span>
<span id="label-14" class="crossword-board__item-label crossword-board__item-label--14"><span class="crossword-board__item-label-text">14</span></span>
<span id="label-15" class="crossword-board__item-label crossword-board__item-label--15"><span class="crossword-board__item-label-text">15</span></span>
<span id="label-16" class="crossword-board__item-label crossword-board__item-label--16"><span class="crossword-board__item-label-text">16</span></span>
<span id="label-17" class="crossword-board__item-label crossword-board__item-label--17"><span class="crossword-board__item-label-text">17</span></span>
<span id="label-18" class="crossword-board__item-label crossword-board__item-label--18"><span class="crossword-board__item-label-text">18</span></span>
<span id="label-19" class="crossword-board__item-label crossword-board__item-label--19"><span class="crossword-board__item-label-text">19</span></span>
<span id="label-20" class="crossword-board__item-label crossword-board__item-label--20"><span class="crossword-board__item-label-text">20</span></span>
<span id="label-21" class="crossword-board__item-label crossword-board__item-label--21"><span class="crossword-board__item-label-text">21</span></span>
<span id="label-22" class="crossword-board__item-label crossword-board__item-label--22"><span class="crossword-board__item-label-text">22</span></span>
<span id="label-23" class="crossword-board__item-label crossword-board__item-label--23"><span class="crossword-board__item-label-text">23</span></span>
<span id="label-24" class="crossword-board__item-label crossword-board__item-label--24"><span class="crossword-board__item-label-text">24</span></span>
<span id="label-25" class="crossword-board__item-label crossword-board__item-label--25"><span class="crossword-board__item-label-text">25</span></span>
<span id="label-26" class="crossword-board__item-label crossword-board__item-label--26"><span class="crossword-board__item-label-text">26</span></span>
<span id="label-27" class="crossword-board__item-label crossword-board__item-label--27"><span class="crossword-board__item-label-text">27</span></span>
<span id="label-28" class="crossword-board__item-label crossword-board__item-label--28"><span class="crossword-board__item-label-text">28</span></span>
<span id="label-29" class="crossword-board__item-label crossword-board__item-label--29"><span class="crossword-board__item-label-text">29</span></span>
<span id="label-30" class="crossword-board__item-label crossword-board__item-label--30"><span class="crossword-board__item-label-text">30</span></span>
<span id="label-31" class="crossword-board__item-label crossword-board__item-label--31"><span class="crossword-board__item-label-text">31</span></span>
<span id="label-32" class="crossword-board__item-label crossword-board__item-label--32"><span class="crossword-board__item-label-text">32</span></span>
<span id="label-33" class="crossword-board__item-label crossword-board__item-label--33"><span class="crossword-board__item-label-text">33</span></span>
</div>
<div class="crossword-clues">
<dl class="crossword-clues__list crossword-clues__list--across">
<dt class="crossword-clues__list-title">Across</dt>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-1" data-number="1">Cover (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-7" data-number="7">Water (5,3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-8" data-number="8">Indian Dress (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-10" data-number="10">Without payment (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-11" data-number="11">Parentless child (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-14" data-number="14">Signal agreement (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-16" data-number="16">Vigilant (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-17" data-number="17">Row (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-19" data-number="19">Wobbly dessert (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-21" data-number="21">Unfashionable (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-22" data-number="22">Nun's outfit (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-23" data-number="23">Singlet (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-26" data-number="26">As a joke (2,3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-28" data-number="28">Offer (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-29" data-number="29">Choose (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-30" data-number="30">Nullify (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-31" data-number="31">Particle of matter (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-32" data-number="32">Precision (8)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--across-33" data-number="33">A sally (6)</dd>
</dl>
<dl class="crossword-clues__list crossword-clues__list--down">
<dt class="crossword-clues__list-title">Down</dt>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-1" data-number="1">Slim (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-2" data-number="2">Public speaker (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-3" data-number="3">Podium (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-4" data-number="4">Gemstone (7)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-5" data-number="5">Turning tool (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-6" data-number="6">Mock attack (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-8" data-number="8">Sound of mind (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-9" data-number="9">To free (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-12" data-number="12">Fold (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-13" data-number="13">Regions (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-15" data-number="15">Stinking (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-18" data-number="18">Senseless (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-19" data-number="19">Quick short punch (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-20" data-number="20">Permit (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-21" data-number="21">Ballerinas (7)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-22" data-number="22">Shade (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-23" data-number="23">Vitality (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-24" data-number="24">Dutch cheese (4)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-25" data-number="25">Dozen (6)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-26" data-number="26">Muslim religion (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-27" data-number="27">Group of sheep (5)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-28" data-number="28">Wager (3)</dd>
<dd class="crossword-clues__list-item crossword-clues__list-item--down-30" data-number="30">No votes (4)</dd>
</dl>
</div>
<div class="crossword-complete">
well done, champ!
</div>
</div>
</div>
$crossword-item-size: 50px;
$crossword-column-count: 13;
$crossword-row-count: 13;
$color-valid-item: #9AFF67;
$color-focus-item: #FFFF74;
.crossword-board-container {
position: relative;
background: #FFFFFF;
}
.crossword-board {
position: absolute;
z-index: 1;
background: transparent;
border: 1px solid #000000;
width: ($crossword-item-size * $crossword-column-count);
height: ($crossword-item-size * $crossword-row-count);
display: grid;
grid-template: repeat(13,7.6923076923076925%) / repeat(13,7.6923076923076925%);
list-style-type: none;
padding: 0;
margin: 0 auto;
}
.crossword-board__item {
border: 1px solid #000000;
background: transparent;
position: relative;
z-index: 100;
text-align: center;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
&:active,
&:focus {
background: $color-focus-item;
border: 1px solid #000000;
outline: 1px solid #000000;
}
}
.crossword-board__item--blank {
background: #000000;
border: 1px solid #000000;
outline: 1px solid #000000;
}
.crossword-board--labels {
position: absolute;
z-index: 60;
}
.crossword-board__item-label {
position: relative;
}
.crossword-board__item-label-text {
position: absolute;
top: 2px;
left: 2px;
font-size: 14px;
line-height: 1;
}
.crossword-board__item-label--1 {
grid-column: 1/1;
}
.crossword-board__item-label--2 {
grid-column: 4/4;
}
.crossword-board__item-label--3 {
grid-column: 6/6;
}
.crossword-board__item-label--4 {
grid-column: 9/9;
}
.crossword-board__item-label--5 {
grid-column: 11/11;
}
.crossword-board__item-label--6 {
grid-column: 13/13;
}
.crossword-board__item-label--7 {
grid-column: 6/6;
grid-row: 2/2;
}
.crossword-board__item-label--8 {
grid-column: 3/3;
grid-row: 3/3;
}
.crossword-board__item-label--9 {
grid-column: 5/5;
grid-row: 3/3;
}
.crossword-board__item-label--10 {
grid-column: 1/1;
grid-row: 4/4;
}
.crossword-board__item-label--11 {
grid-column: 8/8;
grid-row: 4/4;
}
.crossword-board__item-label--12 {
grid-column: 10/10;
grid-row: 4/4;
}
.crossword-board__item-label--13 {
grid-column: 12/12;
grid-row: 4/4;
}
.crossword-board__item-label--14 {
grid-column: 3/3;
grid-row: 5/5;
}
.crossword-board__item-label--15 {
grid-column: 7/7;
grid-row: 5/5;
}
.crossword-board__item-label--16 {
grid-column: 9/9;
grid-row: 5/5;
}
.crossword-board__item-label--17 {
grid-column: 1/1;
grid-row: 6/6;
}
.crossword-board__item-label--18 {
grid-column: 2/2;
grid-row: 6/6;
}
.crossword-board__item-label--19 {
grid-column: 6/6;
grid-row: 6/6;
}
.crossword-board__item-label--20 {
grid-column: 8/8;
grid-row: 6/6;
}
.crossword-board__item-label--21 {
grid-column: 5/5;
grid-row: 7/7;
}
.crossword-board__item-label--22 {
grid-column: 4/4;
grid-row: 8/8;
}
.crossword-board__item-label--23 {
grid-column: 10/10;
grid-row: 8/8;
}
.crossword-board__item-label--24 {
grid-column: 11/11;
grid-row: 8/8;
}
.crossword-board__item-label--25 {
grid-column: 13/13;
grid-row: 8/8;
}
.crossword-board__item-label--26 {
grid-column: 1/1;
grid-row: 9/9;
}
.crossword-board__item-label--27 {
grid-column: 3/3;
grid-row: 9/9;
}
.crossword-board__item-label--28 {
grid-column: 9/9;
grid-row: 9/9;
}
.crossword-board__item-label--29 {
grid-column: 1/1;
grid-row: 10/10;
}
.crossword-board__item-label--30 {
grid-column: 8/8;
grid-row: 10/10;
}
.crossword-board__item-label--31 {
grid-column: 8/8;
grid-row: 11/11;
}
.crossword-board__item-label--32 {
grid-column: 1/1;
grid-row: 12/12;
}
.crossword-board__item-label--33 {
grid-column: 8/8;
grid-row: 13/13;
}
.crossword-board--highlight {
position: absolute;
z-index: 50;
}
.crossword-board__item-highlight {
background: $color-valid-item;
display: grid;
opacity: 0;
transition: opacity 0.3s linear;
}
/***********************************************************/
/** ACROSS ANSWERS HIGHLIGHTING START */
/***********************************************************/
.crossword-board__item-highlight--across-1 {
grid-column: 1/7;
}
.crossword-board__item-highlight--across-7 {
grid-column: 6/14;
grid-row: 2;
}
.crossword-board__item-highlight--across-8 {
grid-column: 3/7;
grid-row: 3;
}
.crossword-board__item-highlight--across-10 {
grid-column: 1/7;
grid-row: 4;
}
.crossword-board__item-highlight--across-11 {
grid-column: 8/14;
grid-row: 4;
}
.crossword-board__item-highlight--across-14 {
grid-column: 3/6;
grid-row: 5;
}
.crossword-board__item-highlight--across-16 {
grid-column: 9/14;
grid-row: 5;
}
.crossword-board__item-highlight--across-17 {
grid-column: 1/5;
grid-row: 6;
}
.crossword-board__item-highlight--across-19 {
grid-column: 6/11;
grid-row: 6;
}
.crossword-board__item-highlight--across-21 {
grid-column: 5/10;
grid-row: 7;
}
.crossword-board__item-highlight--across-22 {
grid-column: 4/9;
grid-row: 8;
}
.crossword-board__item-highlight--across-23 {
grid-column: 10/14;
grid-row: 8;
}
.crossword-board__item-highlight--across-26 {
grid-column: 1/6;
grid-row: 9;
}
.crossword-board__item-highlight--across-28 {
grid-column: 9/12;
grid-row: 9;
}
.crossword-board__item-highlight--across-29 {
grid-column: 1/7;
grid-row: 10;
}
.crossword-board__item-highlight--across-30 {
grid-column: 8/14;
grid-row: 10;
}
.crossword-board__item-highlight--across-31 {
grid-column: 8/12;
grid-row: 11;
}
.crossword-board__item-highlight--across-32 {
grid-column: 1/9;
grid-row: 12;
}
.crossword-board__item-highlight--across-33 {
grid-column: 8/14;
grid-row: 13;
}
.crossword-board__item-highlight--across-33 {
grid-column: 8/14;
grid-row: 13;
}
#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-1 {
opacity: 1;
}
#item2-6:valid ~ #item2-7:valid ~ #item2-8:valid ~ #item2-9:valid ~ #item2-10:valid ~ #item2-11:valid ~ #item2-12:valid ~ #item2-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-7 {
opacity: 1;
}
#item3-3:valid ~ #item3-4:valid ~ #item3-5:valid ~ #item3-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-8 {
opacity: 1;
}
#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid ~ #item4-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-10 {
opacity: 1;
}
#item4-8:valid ~ #item4-9:valid ~ #item4-10:valid ~ #item4-11:valid ~ #item4-12:valid ~ #item4-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-11 {
opacity: 1;
}
#item5-3:valid ~ #item5-4:valid ~ #item5-5:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-14 {
opacity: 1;
}
#item5-9:valid ~ #item5-10:valid ~ #item5-11:valid ~ #item5-12:valid ~ #item5-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-16 {
opacity: 1;
}
#item6-1:valid ~ #item6-2:valid ~ #item6-3:valid ~ #item6-4:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-17 {
opacity: 1;
}
#item6-6:valid ~ #item6-7:valid ~ #item6-8:valid ~ #item6-9:valid ~ #item6-10:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-19 {
opacity: 1;
}
#item7-5:valid ~ #item7-6:valid ~ #item7-7:valid ~ #item7-8:valid ~ #item7-9:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-21 {
opacity: 1;
}
#item8-4:valid ~ #item8-5:valid ~ #item8-6:valid ~ #item8-7:valid ~ #item8-8:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-22 {
opacity: 1;
}
#item8-10:valid ~ #item8-11:valid ~ #item8-12:valid ~ #item8-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-23 {
opacity: 1;
}
#item9-1:valid ~ #item9-2:valid ~ #item9-3:valid ~ #item9-4:valid ~ #item9-5:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-26 {
opacity: 1;
}
#item9-9:valid ~ #item9-10:valid ~ #item9-11:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-28 {
opacity: 1;
}
#item10-1:valid ~ #item10-2:valid ~ #item10-3:valid ~ #item10-4:valid ~ #item10-5:valid ~ #item10-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-29 {
opacity: 1;
}
#item10-8:valid ~ #item10-9:valid ~ #item10-10:valid ~ #item10-11:valid ~ #item10-12:valid ~ #item10-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-30 {
opacity: 1;
}
#item11-8:valid ~ #item11-9:valid ~ #item11-10:valid ~ #item11-11:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-31 {
opacity: 1;
}
#item12-1:valid ~ #item12-2:valid ~ #item12-3:valid ~ #item12-4:valid ~ #item12-5:valid ~ #item12-6:valid ~ #item12-7:valid ~ #item12-8:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-32 {
opacity: 1;
}
#item13-8:valid ~ #item13-9:valid ~ #item13-10:valid ~ #item13-11:valid ~ #item13-12:valid ~ #item13-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--across-33 {
opacity: 1;
}
/***********************************************************/
/** ACROSS ANSWERS HIGHLIGHTING END */
/***********************************************************/
/***********************************************************/
/** DOWN ANSWERS HIGHLIGHTING START */
/***********************************************************/
.crossword-board__item-highlight--down-1 {
grid-column: 1;
grid-row: 1/7;
}
.crossword-board__item-highlight--down-2 {
grid-column: 4;
grid-row: 1/7;
}
.crossword-board__item-highlight--down-3 {
grid-column: 6;
grid-row: 1/5;
}
.crossword-board__item-highlight--down-4 {
grid-column: 9;
grid-row: 1/8;
}
.crossword-board__item-highlight--down-5 {
grid-column: 11;
grid-row: 1/6;
}
.crossword-board__item-highlight--down-6 {
grid-column: 13;
grid-row: 1/6;
}
.crossword-board__item-highlight--down-8 {
grid-column: 3;
grid-row: 3/7;
}
.crossword-board__item-highlight--down-9 {
grid-column: 5;
grid-row: 3/6;
}
.crossword-board__item-highlight--down-12 {
grid-column: 10;
grid-row: 4/7;
}
.crossword-board__item-highlight--down-13 {
grid-column: 12;
grid-row: 4/9;
}
.crossword-board__item-highlight--down-15 {
grid-column: 7;
grid-row: 5/10;
}
.crossword-board__item-highlight--down-18 {
grid-column: 2;
grid-row: 6/11;
}
.crossword-board__item-highlight--down-19 {
grid-column: 6;
grid-row: 6/9;
}
.crossword-board__item-highlight--down-20 {
grid-column: 8;
grid-row: 6/9;
}
.crossword-board__item-highlight--down-21 {
grid-column: 5;
grid-row: 7/14;
}
.crossword-board__item-highlight--down-22 {
grid-column: 4;
grid-row: 8/11;
}
.crossword-board__item-highlight--down-23 {
grid-column: 10;
grid-row: 8/14;
}
.crossword-board__item-highlight--down-24 {
grid-column: 11;
grid-row: 8/12;
}
.crossword-board__item-highlight--down-25 {
grid-column: 13;
grid-row: 8/14;
}
.crossword-board__item-highlight--down-26 {
grid-column: 1;
grid-row: 9/14;
}
.crossword-board__item-highlight--down-27 {
grid-column: 3;
grid-row: 9/14;
}
.crossword-board__item-highlight--down-28 {
grid-column: 9;
grid-row: 9/12;
}
.crossword-board__item-highlight--down-30 {
grid-column: 8;
grid-row: 10/14;
}
#item1-1:valid ~ #item2-1:valid ~ #item3-1:valid ~ #item4-1:valid ~ #item5-1:valid ~ #item6-1:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-1 {
opacity: 1;
}
#item1-4:valid ~ #item2-4:valid ~ #item3-4:valid ~ #item4-4:valid ~ #item5-4:valid ~ #item6-4:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-2 {
opacity: 1;
}
#item1-6:valid ~ #item2-6:valid ~ #item3-6:valid ~ #item4-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-3 {
opacity: 1;
}
#item1-9:valid ~ #item2-9:valid ~ #item3-9:valid ~ #item4-9:valid ~ #item5-9:valid ~ #item6-9:valid ~ #item7-9:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-4 {
opacity: 1;
}
#item1-11:valid ~ #item2-11:valid ~ #item3-11:valid ~ #item4-11:valid ~ #item5-11:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-5 {
opacity: 1;
}
#item1-13:valid ~ #item2-13:valid ~ #item3-13:valid ~ #item4-13:valid ~ #item5-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-6 {
opacity: 1;
}
#item3-3:valid ~ #item4-3:valid ~ #item5-3:valid ~ #item6-3:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-8 {
opacity: 1;
}
#item3-5:valid ~ #item4-5:valid ~ #item5-5:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-9 {
opacity: 1;
}
#item4-10:valid ~ #item5-10:valid ~ #item6-10:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-12 {
opacity: 1;
}
#item4-12:valid ~ #item5-12:valid ~ #item6-12:valid ~ #item7-12:valid ~ #item8-12:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-13 {
opacity: 1;
}
#item5-7:valid ~ #item6-7:valid ~ #item7-7:valid ~ #item8-7:valid ~ #item9-7:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-15 {
opacity: 1;
}
#item6-2:valid ~ #item7-2:valid ~ #item8-2:valid ~ #item9-2:valid ~ #item10-2:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-18 {
opacity: 1;
}
#item6-6:valid ~ #item7-6:valid ~ #item8-6:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-19 {
opacity: 1;
}
#item6-8:valid ~ #item7-8:valid ~ #item8-8:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-20 {
opacity: 1;
}
#item7-5:valid ~ #item8-5:valid ~ #item9-5:valid ~ #item10-5:valid ~ #item11-5:valid ~ #item12-5:valid ~ #item13-5:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-21 {
opacity: 1;
}
#item8-4:valid ~ #item9-4:valid ~ #item10-4:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-22 {
opacity: 1;
}
#item8-10:valid ~ #item9-10:valid ~ #item10-10:valid ~ #item11-10:valid ~ #item12-10:valid ~ #item13-10:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-23 {
opacity: 1;
}
#item8-11:valid ~ #item9-11:valid ~ #item10-11:valid ~ #item11-11:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-24 {
opacity: 1;
}
#item8-13:valid ~ #item9-13:valid ~ #item10-13:valid ~ #item11-13:valid ~ #item12-13:valid ~ #item13-13:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-25 {
opacity: 1;
}
#item9-1:valid ~ #item10-1:valid ~ #item11-1:valid ~ #item12-1:valid ~ #item13-1:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-26 {
opacity: 1;
}
#item9-3:valid ~ #item10-3:valid ~ #item11-3:valid ~ #item12-3:valid ~ #item13-3:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-27 {
opacity: 1;
}
#item9-9:valid ~ #item10-9:valid ~ #item11-9:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-28 {
opacity: 1;
}
#item10-8:valid ~ #item11-8:valid ~ #item12-8:valid ~ #item13-8:valid
~ .crossword-board--highlight .crossword-board__item-highlight--down-30 {
opacity: 1;
}
/***********************************************************/
/** DOWN ANSWERS HIGHLIGHTING END */
/***********************************************************/
#checkvaliditems:checked ~ .crossword-board-container .crossword-board__item:valid {
background: $color-valid-item;
}
.crossword-clues {
position: absolute;
top: 0;
left: ($crossword-item-size * $crossword-column-count);
width: ($crossword-item-size * $crossword-column-count);
}
.crossword-clues__list {
margin: 0 0 0 60px;
padding: 0;
display: inline-block;
vertical-align: top;
}
.crossword-clues__list-title {
font-weight: bold;
padding: 4px;
}
.crossword-clues__list-item {
margin: 0;
padding: 4px;
&:before {
content: attr(data-number) '. ';
}
}
#item1-1:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-focus-item;
}
#item1-2:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-2:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-2:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-focus-item;
}
#item1-3:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-3:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-3:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-focus-item;
}
#item1-4:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-4:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-4:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-focus-item;
}
#item1-5:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-5:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-5:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-focus-item;
}
#item1-6:active ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-6:focus ~ .crossword-clues .crossword-clues__list-item--across-1,
#item1-6:hover ~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-focus-item;
}
#item2-6:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-6:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-6:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-7:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-7:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-7:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-8:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-8:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-8:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-9:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-9:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-9:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-10:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-10:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-10:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-11:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-11:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-11:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-12:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-12:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-12:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item2-13:active ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-13:focus ~ .crossword-clues .crossword-clues__list-item--across-7,
#item2-13:hover ~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-focus-item;
}
#item3-3:active ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-3:focus ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-3:hover ~ .crossword-clues .crossword-clues__list-item--across-8 {
background: $color-focus-item;
}
#item3-4:active ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-4:focus ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-4:hover ~ .crossword-clues .crossword-clues__list-item--across-8 {
background: $color-focus-item;
}
#item3-5:active ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-5:focus ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-5:hover ~ .crossword-clues .crossword-clues__list-item--across-8 {
background: $color-focus-item;
}
#item3-6:active ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-6:focus ~ .crossword-clues .crossword-clues__list-item--across-8,
#item3-6:hover ~ .crossword-clues .crossword-clues__list-item--across-8 {
background: $color-focus-item;
}
#item4-1:active ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-1:focus ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-1:hover ~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-focus-item;
}
#item4-2:active ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-2:focus ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-2:hover ~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-focus-item;
}
#item4-3:active ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-3:focus ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-3:hover ~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-focus-item;
}
#item4-4:active ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-4:focus ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-4:hover ~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-focus-item;
}
#item4-5:active ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-5:focus ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-5:hover ~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-focus-item;
}
#item4-6:active ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-6:focus ~ .crossword-clues .crossword-clues__list-item--across-10,
#item4-6:hover ~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-focus-item;
}
#item4-8:active ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-8:focus ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-8:hover ~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-focus-item;
}
#item4-9:active ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-9:focus ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-9:hover ~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-focus-item;
}
#item4-10:active ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-10:focus ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-10:hover ~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-focus-item;
}
#item4-11:active ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-11:focus ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-11:hover ~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-focus-item;
}
#item4-12:active ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-12:focus ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-12:hover ~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-focus-item;
}
#item4-13:active ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-13:focus ~ .crossword-clues .crossword-clues__list-item--across-11,
#item4-13:hover ~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-focus-item;
}
#item5-3:active ~ .crossword-clues .crossword-clues__list-item--across-14,
#item5-3:focus ~ .crossword-clues .crossword-clues__list-item--across-14,
#item5-3:hover ~ .crossword-clues .crossword-clues__list-item--across-14 {
background: $color-focus-item;
}
#item5-4:active ~ .crossword-clues .crossword-clues__list-item--across-14,
#item5-4:focus ~ .crossword-clues .crossword-clues__list-item--across-14,
#item5-4:hover ~ .crossword-clues .crossword-clues__list-item--across-14 {
background: $color-focus-item;
}
#item5-5:active ~ .crossword-clues .crossword-clues__list-item--across-14,
#item5-5:focus ~ .crossword-clues .crossword-clues__list-item--across-14,
#item5-5:hover ~ .crossword-clues .crossword-clues__list-item--across-14 {
background: $color-focus-item;
}
#item5-9:active ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-9:focus ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-9:hover ~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-focus-item;
}
#item5-10:active ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-10:focus ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-10:hover ~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-focus-item;
}
#item5-10:active ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-10:focus ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-10:hover ~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-focus-item;
}
#item5-11:active ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-11:focus ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-11:hover ~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-focus-item;
}
#item5-12:active ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-12:focus ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-12:hover ~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-focus-item;
}
#item5-13:active ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-13:focus ~ .crossword-clues .crossword-clues__list-item--across-16,
#item5-13:hover ~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-focus-item;
}
#item6-1:active ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-1:focus ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-1:hover ~ .crossword-clues .crossword-clues__list-item--across-17 {
background: $color-focus-item;
}
#item6-2:active ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-2:focus ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-2:hover ~ .crossword-clues .crossword-clues__list-item--across-17 {
background: $color-focus-item;
}
#item6-3:active ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-3:focus ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-3:hover ~ .crossword-clues .crossword-clues__list-item--across-17 {
background: $color-focus-item;
}
#item6-4:active ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-4:focus ~ .crossword-clues .crossword-clues__list-item--across-17,
#item6-4:hover ~ .crossword-clues .crossword-clues__list-item--across-17 {
background: $color-focus-item;
}
#item6-6:active ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-6:focus ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-6:hover ~ .crossword-clues .crossword-clues__list-item--across-19 {
background: $color-focus-item;
}
#item6-7:active ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-7:focus ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-7:hover ~ .crossword-clues .crossword-clues__list-item--across-19 {
background: $color-focus-item;
}
#item6-8:active ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-8:focus ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-8:hover ~ .crossword-clues .crossword-clues__list-item--across-19 {
background: $color-focus-item;
}
#item6-9:active ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-9:focus ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-9:hover ~ .crossword-clues .crossword-clues__list-item--across-19 {
background: $color-focus-item;
}
#item6-10:active ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-10:focus ~ .crossword-clues .crossword-clues__list-item--across-19,
#item6-10:hover ~ .crossword-clues .crossword-clues__list-item--across-19 {
background: $color-focus-item;
}
#item7-5:active ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-5:focus ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-5:hover ~ .crossword-clues .crossword-clues__list-item--across-21 {
background: $color-focus-item;
}
#item7-6:active ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-6:focus ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-6:hover ~ .crossword-clues .crossword-clues__list-item--across-21 {
background: $color-focus-item;
}
#item7-7:active ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-7:focus ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-7:hover ~ .crossword-clues .crossword-clues__list-item--across-21 {
background: $color-focus-item;
}
#item7-8:active ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-8:focus ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-8:hover ~ .crossword-clues .crossword-clues__list-item--across-21 {
background: $color-focus-item;
}
#item7-9:active ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-9:focus ~ .crossword-clues .crossword-clues__list-item--across-21,
#item7-9:hover ~ .crossword-clues .crossword-clues__list-item--across-21 {
background: $color-focus-item;
}
#item8-4:active ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-4:focus ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-4:hover ~ .crossword-clues .crossword-clues__list-item--across-22 {
background: $color-focus-item;
}
#item8-5:active ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-5:focus ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-5:hover ~ .crossword-clues .crossword-clues__list-item--across-22 {
background: $color-focus-item;
}
#item8-6:active ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-6:focus ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-6:hover ~ .crossword-clues .crossword-clues__list-item--across-22 {
background: $color-focus-item;
}
#item8-7:active ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-7:focus ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-7:hover ~ .crossword-clues .crossword-clues__list-item--across-22 {
background: $color-focus-item;
}
#item8-8:active ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-8:focus ~ .crossword-clues .crossword-clues__list-item--across-22,
#item8-8:hover ~ .crossword-clues .crossword-clues__list-item--across-22 {
background: $color-focus-item;
}
#item8-10:active ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-10:focus ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-10:hover ~ .crossword-clues .crossword-clues__list-item--across-23 {
background: $color-focus-item;
}
#item8-11:active ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-11:focus ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-11:hover ~ .crossword-clues .crossword-clues__list-item--across-23 {
background: $color-focus-item;
}
#item8-12:active ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-12:focus ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-12:hover ~ .crossword-clues .crossword-clues__list-item--across-23 {
background: $color-focus-item;
}
#item8-13:active ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-13:focus ~ .crossword-clues .crossword-clues__list-item--across-23,
#item8-13:hover ~ .crossword-clues .crossword-clues__list-item--across-23 {
background: $color-focus-item;
}
#item9-1:active ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-1:focus ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-1:hover ~ .crossword-clues .crossword-clues__list-item--across-26 {
background: $color-focus-item;
}
#item9-2:active ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-2:focus ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-2:hover ~ .crossword-clues .crossword-clues__list-item--across-26 {
background: $color-focus-item;
}
#item9-3:active ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-3:focus ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-3:hover ~ .crossword-clues .crossword-clues__list-item--across-26 {
background: $color-focus-item;
}
#item9-4:active ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-4:focus ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-4:hover ~ .crossword-clues .crossword-clues__list-item--across-26 {
background: $color-focus-item;
}
#item9-5:active ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-5:focus ~ .crossword-clues .crossword-clues__list-item--across-26,
#item9-5:hover ~ .crossword-clues .crossword-clues__list-item--across-26 {
background: $color-focus-item;
}
#item9-9:active ~ .crossword-clues .crossword-clues__list-item--across-28,
#item9-9:focus ~ .crossword-clues .crossword-clues__list-item--across-28,
#item9-9:hover ~ .crossword-clues .crossword-clues__list-item--across-28 {
background: $color-focus-item;
}
#item9-10:active ~ .crossword-clues .crossword-clues__list-item--across-28,
#item9-10:focus ~ .crossword-clues .crossword-clues__list-item--across-28,
#item9-10:hover ~ .crossword-clues .crossword-clues__list-item--across-28 {
background: $color-focus-item;
}
#item9-11:active ~ .crossword-clues .crossword-clues__list-item--across-28,
#item9-11:focus ~ .crossword-clues .crossword-clues__list-item--across-28,
#item9-11:hover ~ .crossword-clues .crossword-clues__list-item--across-28 {
background: $color-focus-item;
}
#item10-1:active ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-1:focus ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-1:hover ~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-focus-item;
}
#item10-2:active ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-2:focus ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-2:hover ~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-focus-item;
}
#item10-3:active ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-3:focus ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-3:hover ~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-focus-item;
}
#item10-4:active ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-4:focus ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-4:hover ~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-focus-item;
}
#item10-5:active ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-5:focus ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-5:hover ~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-focus-item;
}
#item10-6:active ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-6:focus ~ .crossword-clues .crossword-clues__list-item--across-29,
#item10-6:hover ~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-focus-item;
}
#item10-8:active ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-8:focus ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-8:hover ~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-focus-item;
}
#item10-9:active ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-9:focus ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-9:hover ~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-focus-item;
}
#item10-10:active ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-10:focus ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-10:hover ~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-focus-item;
}
#item10-11:active ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-11:focus ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-11:hover ~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-focus-item;
}
#item10-12:active ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-12:focus ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-12:hover ~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-focus-item;
}
#item10-13:active ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-13:focus ~ .crossword-clues .crossword-clues__list-item--across-30,
#item10-13:hover ~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-focus-item;
}
#item11-8:active ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-8:focus ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-8:hover ~ .crossword-clues .crossword-clues__list-item--across-31 {
background: $color-focus-item;
}
#item11-9:active ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-9:focus ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-9:hover ~ .crossword-clues .crossword-clues__list-item--across-31 {
background: $color-focus-item;
}
#item11-10:active ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-10:focus ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-10:hover ~ .crossword-clues .crossword-clues__list-item--across-31 {
background: $color-focus-item;
}
#item11-11:active ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-11:focus ~ .crossword-clues .crossword-clues__list-item--across-31,
#item11-11:hover ~ .crossword-clues .crossword-clues__list-item--across-31 {
background: $color-focus-item;
}
#item12-1:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-1:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-1:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-2:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-2:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-2:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-3:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-3:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-3:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-4:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-4:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-4:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-5:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-5:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-5:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-6:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-6:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-6:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-7:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-7:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-7:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item12-8:active ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-8:focus ~ .crossword-clues .crossword-clues__list-item--across-32,
#item12-8:hover ~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-focus-item;
}
#item13-8:active ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-8:focus ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-8:hover ~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-focus-item;
}
#item13-9:active ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-9:focus ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-9:hover ~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-focus-item;
}
#item13-10:active ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-10:focus ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-10:hover ~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-focus-item;
}
#item13-11:active ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-11:focus ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-11:hover ~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-focus-item;
}
#item13-12:active ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-12:focus ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-12:hover ~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-focus-item;
}
#item13-13:active ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-13:focus ~ .crossword-clues .crossword-clues__list-item--across-33,
#item13-13:hover ~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-focus-item;
}
#item1-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item1-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item1-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-focus-item;
}
#item2-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item2-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item2-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-focus-item;
}
#item3-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item3-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item3-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-focus-item;
}
#item4-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item4-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item4-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-focus-item;
}
#item5-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item5-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item5-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-focus-item;
}
#item6-1:active ~ .crossword-clues .crossword-clues__list-item--down-1,
#item6-1:focus ~ .crossword-clues .crossword-clues__list-item--down-1,
#item6-1:hover ~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-focus-item;
}
#item1-4:active ~ .crossword-clues .crossword-clues__list-item--down-2,
#item1-4:focus ~ .crossword-clues .crossword-clues__list-item--down-2,
#item1-4:hover ~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-focus-item;
}
#item2-4:active ~ .crossword-clues .crossword-clues__list-item--down-2,
#item2-2:focus ~ .crossword-clues .crossword-clues__list-item--down-2,
#item2-4:hover ~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-focus-item;
}
#item3-4:active ~ .crossword-clues .crossword-clues__list-item--down-2,
#item3-4:focus ~ .crossword-clues .crossword-clues__list-item--down-2,
#item3-4:hover ~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-focus-item;
}
#item4-4:active ~ .crossword-clues .crossword-clues__list-item--down-2,
#item4-4:focus ~ .crossword-clues .crossword-clues__list-item--down-2,
#item4-4:hover ~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-focus-item;
}
#item5-4:active ~ .crossword-clues .crossword-clues__list-item--down-2,
#item5-4:focus ~ .crossword-clues .crossword-clues__list-item--down-2,
#item5-4:hover ~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-focus-item;
}
#item6-4:active ~ .crossword-clues .crossword-clues__list-item--down-2,
#item6-4:focus ~ .crossword-clues .crossword-clues__list-item--down-2,
#item6-4:hover ~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-focus-item;
}
#item1-6:active ~ .crossword-clues .crossword-clues__list-item--down-3,
#item1-6:focus ~ .crossword-clues .crossword-clues__list-item--down-3,
#item1-6:hover ~ .crossword-clues .crossword-clues__list-item--down-3 {
background: $color-focus-item;
}
#item2-6:active ~ .crossword-clues .crossword-clues__list-item--down-3,
#item2-6:focus ~ .crossword-clues .crossword-clues__list-item--down-3,
#item2-6:hover ~ .crossword-clues .crossword-clues__list-item--down-3 {
background: $color-focus-item;
}
#item3-6:active ~ .crossword-clues .crossword-clues__list-item--down-3,
#item3-6:focus ~ .crossword-clues .crossword-clues__list-item--down-3,
#item3-6:hover ~ .crossword-clues .crossword-clues__list-item--down-3 {
background: $color-focus-item;
}
#item4-6:active ~ .crossword-clues .crossword-clues__list-item--down-3,
#item4-6:focus ~ .crossword-clues .crossword-clues__list-item--down-3,
#item4-6:hover ~ .crossword-clues .crossword-clues__list-item--down-3 {
background: $color-focus-item;
}
#item1-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item1-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item1-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item2-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item2-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item2-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item3-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item3-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item3-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item4-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item4-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item4-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item5-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item5-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item5-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item6-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item6-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item6-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item7-9:active ~ .crossword-clues .crossword-clues__list-item--down-4,
#item7-9:focus ~ .crossword-clues .crossword-clues__list-item--down-4,
#item7-9:hover ~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-focus-item;
}
#item1-11:active ~ .crossword-clues .crossword-clues__list-item--down-5,
#item1-11:focus ~ .crossword-clues .crossword-clues__list-item--down-5,
#item1-11:hover ~ .crossword-clues .crossword-clues__list-item--down-5 {
background: $color-focus-item;
}
#item2-11:active ~ .crossword-clues .crossword-clues__list-item--down-5,
#item2-11:focus ~ .crossword-clues .crossword-clues__list-item--down-5,
#item2-11:hover ~ .crossword-clues .crossword-clues__list-item--down-5 {
background: $color-focus-item;
}
#item3-11:active ~ .crossword-clues .crossword-clues__list-item--down-5,
#item3-11:focus ~ .crossword-clues .crossword-clues__list-item--down-5,
#item3-11:hover ~ .crossword-clues .crossword-clues__list-item--down-5 {
background: $color-focus-item;
}
#item4-11:active ~ .crossword-clues .crossword-clues__list-item--down-5,
#item4-11:focus ~ .crossword-clues .crossword-clues__list-item--down-5,
#item4-11:hover ~ .crossword-clues .crossword-clues__list-item--down-5 {
background: $color-focus-item;
}
#item5-11:active ~ .crossword-clues .crossword-clues__list-item--down-5,
#item5-11:focus ~ .crossword-clues .crossword-clues__list-item--down-5,
#item5-11:hover ~ .crossword-clues .crossword-clues__list-item--down-5 {
background: $color-focus-item;
}
#item1-13:active ~ .crossword-clues .crossword-clues__list-item--down-6,
#item1-13:focus ~ .crossword-clues .crossword-clues__list-item--down-6,
#item1-13:hover ~ .crossword-clues .crossword-clues__list-item--down-6 {
background: $color-focus-item;
}
#item2-13:active ~ .crossword-clues .crossword-clues__list-item--down-6,
#item2-13:focus ~ .crossword-clues .crossword-clues__list-item--down-6,
#item2-13:hover ~ .crossword-clues .crossword-clues__list-item--down-6 {
background: $color-focus-item;
}
#item3-13:active ~ .crossword-clues .crossword-clues__list-item--down-6,
#item3-13:focus ~ .crossword-clues .crossword-clues__list-item--down-6,
#item3-13:hover ~ .crossword-clues .crossword-clues__list-item--down-6 {
background: $color-focus-item;
}
#item4-13:active ~ .crossword-clues .crossword-clues__list-item--down-6,
#item4-13:focus ~ .crossword-clues .crossword-clues__list-item--down-6,
#item4-13:hover ~ .crossword-clues .crossword-clues__list-item--down-6 {
background: $color-focus-item;
}
#item5-13:active ~ .crossword-clues .crossword-clues__list-item--down-6,
#item5-13:focus ~ .crossword-clues .crossword-clues__list-item--down-6,
#item5-13:hover ~ .crossword-clues .crossword-clues__list-item--down-6 {
background: $color-focus-item;
}
#item3-3:active ~ .crossword-clues .crossword-clues__list-item--down-8,
#item3-3:focus ~ .crossword-clues .crossword-clues__list-item--down-8,
#item3-3:hover ~ .crossword-clues .crossword-clues__list-item--down-8 {
background: $color-focus-item;
}
#item4-3:active ~ .crossword-clues .crossword-clues__list-item--down-8,
#item4-3:focus ~ .crossword-clues .crossword-clues__list-item--down-8,
#item4-3:hover ~ .crossword-clues .crossword-clues__list-item--down-8 {
background: $color-focus-item;
}
#item5-3:active ~ .crossword-clues .crossword-clues__list-item--down-8,
#item5-3:focus ~ .crossword-clues .crossword-clues__list-item--down-8,
#item5-3:hover ~ .crossword-clues .crossword-clues__list-item--down-8 {
background: $color-focus-item;
}
#item6-3:active ~ .crossword-clues .crossword-clues__list-item--down-8,
#item6-3:focus ~ .crossword-clues .crossword-clues__list-item--down-8,
#item6-3:hover ~ .crossword-clues .crossword-clues__list-item--down-8 {
background: $color-focus-item;
}
#item3-5:active ~ .crossword-clues .crossword-clues__list-item--down-9,
#item3-5:focus ~ .crossword-clues .crossword-clues__list-item--down-9,
#item3-5:hover ~ .crossword-clues .crossword-clues__list-item--down-9 {
background: $color-focus-item;
}
#item4-5:active ~ .crossword-clues .crossword-clues__list-item--down-9,
#item4-5:focus ~ .crossword-clues .crossword-clues__list-item--down-9,
#item4-5:hover ~ .crossword-clues .crossword-clues__list-item--down-9 {
background: $color-focus-item;
}
#item5-5:active ~ .crossword-clues .crossword-clues__list-item--down-9,
#item5-5:focus ~ .crossword-clues .crossword-clues__list-item--down-9,
#item5-5:hover ~ .crossword-clues .crossword-clues__list-item--down-9 {
background: $color-focus-item;
}
#item4-10:active ~ .crossword-clues .crossword-clues__list-item--down-12,
#item4-10:focus ~ .crossword-clues .crossword-clues__list-item--down-12,
#item4-10:hover ~ .crossword-clues .crossword-clues__list-item--down-12 {
background: $color-focus-item;
}
#item5-10:active ~ .crossword-clues .crossword-clues__list-item--down-12,
#item5-10:focus ~ .crossword-clues .crossword-clues__list-item--down-12,
#item5-10:hover ~ .crossword-clues .crossword-clues__list-item--down-12 {
background: $color-focus-item;
}
#item6-10:active ~ .crossword-clues .crossword-clues__list-item--down-12,
#item6-10:focus ~ .crossword-clues .crossword-clues__list-item--down-12,
#item6-10:hover ~ .crossword-clues .crossword-clues__list-item--down-12 {
background: $color-focus-item;
}
#item4-12:active ~ .crossword-clues .crossword-clues__list-item--down-13,
#item4-12:focus ~ .crossword-clues .crossword-clues__list-item--down-13,
#item4-12:hover ~ .crossword-clues .crossword-clues__list-item--down-13 {
background: $color-focus-item;
}
#item5-12:active ~ .crossword-clues .crossword-clues__list-item--down-13,
#item5-12:focus ~ .crossword-clues .crossword-clues__list-item--down-13,
#item5-12:hover ~ .crossword-clues .crossword-clues__list-item--down-13 {
background: $color-focus-item;
}
#item6-12:active ~ .crossword-clues .crossword-clues__list-item--down-13,
#item6-12:focus ~ .crossword-clues .crossword-clues__list-item--down-13,
#item6-12:hover ~ .crossword-clues .crossword-clues__list-item--down-13 {
background: $color-focus-item;
}
#item7-12:active ~ .crossword-clues .crossword-clues__list-item--down-13,
#item7-12:focus ~ .crossword-clues .crossword-clues__list-item--down-13,
#item7-12:hover ~ .crossword-clues .crossword-clues__list-item--down-13 {
background: $color-focus-item;
}
#item8-12:active ~ .crossword-clues .crossword-clues__list-item--down-13,
#item8-12:focus ~ .crossword-clues .crossword-clues__list-item--down-13,
#item8-12:hover ~ .crossword-clues .crossword-clues__list-item--down-13 {
background: $color-focus-item;
}
#item5-7:active ~ .crossword-clues .crossword-clues__list-item--down-15,
#item5-7:focus ~ .crossword-clues .crossword-clues__list-item--down-15,
#item5-7:hover ~ .crossword-clues .crossword-clues__list-item--down-15 {
background: $color-focus-item;
}
#item6-7:active ~ .crossword-clues .crossword-clues__list-item--down-15,
#item6-7:focus ~ .crossword-clues .crossword-clues__list-item--down-15,
#item6-7:hover ~ .crossword-clues .crossword-clues__list-item--down-15 {
background: $color-focus-item;
}
#item7-7:active ~ .crossword-clues .crossword-clues__list-item--down-15,
#item7-7:focus ~ .crossword-clues .crossword-clues__list-item--down-15,
#item7-7:hover ~ .crossword-clues .crossword-clues__list-item--down-15 {
background: $color-focus-item;
}
#item8-7:active ~ .crossword-clues .crossword-clues__list-item--down-15,
#item8-7:focus ~ .crossword-clues .crossword-clues__list-item--down-15,
#item8-7:hover ~ .crossword-clues .crossword-clues__list-item--down-15 {
background: $color-focus-item;
}
#item9-7:active ~ .crossword-clues .crossword-clues__list-item--down-15,
#item9-7:focus ~ .crossword-clues .crossword-clues__list-item--down-15,
#item9-7:hover ~ .crossword-clues .crossword-clues__list-item--down-15 {
background: $color-focus-item;
}
#item6-2:active ~ .crossword-clues .crossword-clues__list-item--down-18,
#item6-2:focus ~ .crossword-clues .crossword-clues__list-item--down-18,
#item6-2:hover ~ .crossword-clues .crossword-clues__list-item--down-18 {
background: $color-focus-item;
}
#item7-2:active ~ .crossword-clues .crossword-clues__list-item--down-18,
#item7-2:focus ~ .crossword-clues .crossword-clues__list-item--down-18,
#item7-2:hover ~ .crossword-clues .crossword-clues__list-item--down-18 {
background: $color-focus-item;
}
#item8-2:active ~ .crossword-clues .crossword-clues__list-item--down-18,
#item8-2:focus ~ .crossword-clues .crossword-clues__list-item--down-18,
#item8-2:hover ~ .crossword-clues .crossword-clues__list-item--down-18 {
background: $color-focus-item;
}
#item9-2:active ~ .crossword-clues .crossword-clues__list-item--down-18,
#item9-2:focus ~ .crossword-clues .crossword-clues__list-item--down-18,
#item9-2:hover ~ .crossword-clues .crossword-clues__list-item--down-18 {
background: $color-focus-item;
}
#item10-2:active ~ .crossword-clues .crossword-clues__list-item--down-18,
#item10-2:focus ~ .crossword-clues .crossword-clues__list-item--down-18,
#item10-2:hover ~ .crossword-clues .crossword-clues__list-item--down-18 {
background: $color-focus-item;
}
#item6-6:active ~ .crossword-clues .crossword-clues__list-item--down-19,
#item6-6:focus ~ .crossword-clues .crossword-clues__list-item--down-19,
#item6-6:hover ~ .crossword-clues .crossword-clues__list-item--down-19 {
background: $color-focus-item;
}
#item7-6:active ~ .crossword-clues .crossword-clues__list-item--down-19,
#item7-6:focus ~ .crossword-clues .crossword-clues__list-item--down-19,
#item7-6:hover ~ .crossword-clues .crossword-clues__list-item--down-19 {
background: $color-focus-item;
}
#item7-6:active ~ .crossword-clues .crossword-clues__list-item--down-19,
#item7-6:focus ~ .crossword-clues .crossword-clues__list-item--down-19,
#item7-6:hover ~ .crossword-clues .crossword-clues__list-item--down-19 {
background: $color-focus-item;
}
#item6-8:active ~ .crossword-clues .crossword-clues__list-item--down-20,
#item6-8:focus ~ .crossword-clues .crossword-clues__list-item--down-20,
#item6-8:hover ~ .crossword-clues .crossword-clues__list-item--down-20 {
background: $color-focus-item;
}
#item7-8:active ~ .crossword-clues .crossword-clues__list-item--down-20,
#item7-8:focus ~ .crossword-clues .crossword-clues__list-item--down-20,
#item7-8:hover ~ .crossword-clues .crossword-clues__list-item--down-20 {
background: $color-focus-item;
}
#item8-8:active ~ .crossword-clues .crossword-clues__list-item--down-20,
#item8-8:focus ~ .crossword-clues .crossword-clues__list-item--down-20,
#item8-8:hover ~ .crossword-clues .crossword-clues__list-item--down-20 {
background: $color-focus-item;
}
#item7-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item7-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item7-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item8-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item8-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item8-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item9-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item9-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item9-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item10-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item10-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item10-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item11-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item11-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item11-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item12-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item12-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item12-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item13-5:active ~ .crossword-clues .crossword-clues__list-item--down-21,
#item13-5:focus ~ .crossword-clues .crossword-clues__list-item--down-21,
#item13-5:hover ~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-focus-item;
}
#item8-4:active ~ .crossword-clues .crossword-clues__list-item--down-22,
#item8-4:focus ~ .crossword-clues .crossword-clues__list-item--down-22,
#item8-4:hover ~ .crossword-clues .crossword-clues__list-item--down-22 {
background: $color-focus-item;
}
#item9-4:active ~ .crossword-clues .crossword-clues__list-item--down-22,
#item9-4:focus ~ .crossword-clues .crossword-clues__list-item--down-22,
#item9-4:hover ~ .crossword-clues .crossword-clues__list-item--down-22 {
background: $color-focus-item;
}
#item10-4:active ~ .crossword-clues .crossword-clues__list-item--down-22,
#item10-4:focus ~ .crossword-clues .crossword-clues__list-item--down-22,
#item10-4:hover ~ .crossword-clues .crossword-clues__list-item--down-22 {
background: $color-focus-item;
}
#item8-10:active ~ .crossword-clues .crossword-clues__list-item--down-23,
#item8-10:focus ~ .crossword-clues .crossword-clues__list-item--down-23,
#item8-10:hover ~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-focus-item;
}
#item9-10:active ~ .crossword-clues .crossword-clues__list-item--down-23,
#item9-10:focus ~ .crossword-clues .crossword-clues__list-item--down-23,
#item9-10:hover ~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-focus-item;
}
#item10-10:active ~ .crossword-clues .crossword-clues__list-item--down-23,
#item10-10:focus ~ .crossword-clues .crossword-clues__list-item--down-23,
#item10-10:hover ~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-focus-item;
}
#item11-10:active ~ .crossword-clues .crossword-clues__list-item--down-23,
#item11-10:focus ~ .crossword-clues .crossword-clues__list-item--down-23,
#item11-10:hover ~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-focus-item;
}
#item12-10:active ~ .crossword-clues .crossword-clues__list-item--down-23,
#item12-10:focus ~ .crossword-clues .crossword-clues__list-item--down-23,
#item12-10:hover ~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-focus-item;
}
#item13-10:active ~ .crossword-clues .crossword-clues__list-item--down-23,
#item13-10:focus ~ .crossword-clues .crossword-clues__list-item--down-23,
#item13-10:hover ~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-focus-item;
}
#item8-11:active ~ .crossword-clues .crossword-clues__list-item--down-24,
#item8-11:focus ~ .crossword-clues .crossword-clues__list-item--down-24,
#item8-11:hover ~ .crossword-clues .crossword-clues__list-item--down-24 {
background: $color-focus-item;
}
#item9-11:active ~ .crossword-clues .crossword-clues__list-item--down-24,
#item9-11:focus ~ .crossword-clues .crossword-clues__list-item--down-24,
#item9-11:hover ~ .crossword-clues .crossword-clues__list-item--down-24 {
background: $color-focus-item;
}
#item10-11:active ~ .crossword-clues .crossword-clues__list-item--down-24,
#item10-11:focus ~ .crossword-clues .crossword-clues__list-item--down-24,
#item10-11:hover ~ .crossword-clues .crossword-clues__list-item--down-24 {
background: $color-focus-item;
}
#item11-11:active ~ .crossword-clues .crossword-clues__list-item--down-24,
#item11-11:focus ~ .crossword-clues .crossword-clues__list-item--down-24,
#item11-11:hover ~ .crossword-clues .crossword-clues__list-item--down-24 {
background: $color-focus-item;
}
#item8-13:active ~ .crossword-clues .crossword-clues__list-item--down-25,
#item8-13:focus ~ .crossword-clues .crossword-clues__list-item--down-25,
#item8-13:hover ~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-focus-item;
}
#item9-13:active ~ .crossword-clues .crossword-clues__list-item--down-25,
#item9-13:focus ~ .crossword-clues .crossword-clues__list-item--down-25,
#item9-13:hover ~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-focus-item;
}
#item10-13:active ~ .crossword-clues .crossword-clues__list-item--down-25,
#item10-13:focus ~ .crossword-clues .crossword-clues__list-item--down-25,
#item10-13:hover ~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-focus-item;
}
#item11-13:active ~ .crossword-clues .crossword-clues__list-item--down-25,
#item11-13:focus ~ .crossword-clues .crossword-clues__list-item--down-25,
#item11-13:hover ~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-focus-item;
}
#item12-13:active ~ .crossword-clues .crossword-clues__list-item--down-25,
#item12-13:focus ~ .crossword-clues .crossword-clues__list-item--down-25,
#item12-13:hover ~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-focus-item;
}
#item13-13:active ~ .crossword-clues .crossword-clues__list-item--down-25,
#item13-13:focus ~ .crossword-clues .crossword-clues__list-item--down-25,
#item13-13:hover ~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-focus-item;
}
#item9-1:active ~ .crossword-clues .crossword-clues__list-item--down-26,
#item9-1:focus ~ .crossword-clues .crossword-clues__list-item--down-26,
#item9-1:hover ~ .crossword-clues .crossword-clues__list-item--down-26 {
background: $color-focus-item;
}
#item10-1:active ~ .crossword-clues .crossword-clues__list-item--down-26,
#item10-1:focus ~ .crossword-clues .crossword-clues__list-item--down-26,
#item10-1:hover ~ .crossword-clues .crossword-clues__list-item--down-26 {
background: $color-focus-item;
}
#item11-1:active ~ .crossword-clues .crossword-clues__list-item--down-26,
#item11-1:focus ~ .crossword-clues .crossword-clues__list-item--down-26,
#item11-1:hover ~ .crossword-clues .crossword-clues__list-item--down-26 {
background: $color-focus-item;
}
#item12-1:active ~ .crossword-clues .crossword-clues__list-item--down-26,
#item12-1:focus ~ .crossword-clues .crossword-clues__list-item--down-26,
#item12-1:hover ~ .crossword-clues .crossword-clues__list-item--down-26 {
background: $color-focus-item;
}
#item13-1:active ~ .crossword-clues .crossword-clues__list-item--down-26,
#item13-1:focus ~ .crossword-clues .crossword-clues__list-item--down-26,
#item13-1:hover ~ .crossword-clues .crossword-clues__list-item--down-26 {
background: $color-focus-item;
}
#item9-3:active ~ .crossword-clues .crossword-clues__list-item--down-27,
#item9-3:focus ~ .crossword-clues .crossword-clues__list-item--down-27,
#item9-3:hover ~ .crossword-clues .crossword-clues__list-item--down-27 {
background: $color-focus-item;
}
#item10-3:active ~ .crossword-clues .crossword-clues__list-item--down-27,
#item10-3:focus ~ .crossword-clues .crossword-clues__list-item--down-27,
#item10-3:hover ~ .crossword-clues .crossword-clues__list-item--down-27 {
background: $color-focus-item;
}
#item11-3:active ~ .crossword-clues .crossword-clues__list-item--down-27,
#item11-3:focus ~ .crossword-clues .crossword-clues__list-item--down-27,
#item11-3:hover ~ .crossword-clues .crossword-clues__list-item--down-27 {
background: $color-focus-item;
}
#item12-3:active ~ .crossword-clues .crossword-clues__list-item--down-27,
#item12-3:focus ~ .crossword-clues .crossword-clues__list-item--down-27,
#item12-3:hover ~ .crossword-clues .crossword-clues__list-item--down-27 {
background: $color-focus-item;
}
#item13-3:active ~ .crossword-clues .crossword-clues__list-item--down-27,
#item13-3:focus ~ .crossword-clues .crossword-clues__list-item--down-27,
#item13-3:hover ~ .crossword-clues .crossword-clues__list-item--down-27 {
background: $color-focus-item;
}
#item9-9:active ~ .crossword-clues .crossword-clues__list-item--down-28,
#item9-9:focus ~ .crossword-clues .crossword-clues__list-item--down-28,
#item9-9:hover ~ .crossword-clues .crossword-clues__list-item--down-28 {
background: $color-focus-item;
}
#item10-9:active ~ .crossword-clues .crossword-clues__list-item--down-28,
#item10-9:focus ~ .crossword-clues .crossword-clues__list-item--down-28,
#item10-9:hover ~ .crossword-clues .crossword-clues__list-item--down-28 {
background: $color-focus-item;
}
#item11-9:active ~ .crossword-clues .crossword-clues__list-item--down-28,
#item11-9:focus ~ .crossword-clues .crossword-clues__list-item--down-28,
#item11-9:hover ~ .crossword-clues .crossword-clues__list-item--down-28 {
background: $color-focus-item;
}
#item10-8:active ~ .crossword-clues .crossword-clues__list-item--down-30,
#item10-8:focus ~ .crossword-clues .crossword-clues__list-item--down-30,
#item10-8:hover ~ .crossword-clues .crossword-clues__list-item--down-30 {
background: $color-focus-item;
}
#item11-8:active ~ .crossword-clues .crossword-clues__list-item--down-30,
#item11-8:focus ~ .crossword-clues .crossword-clues__list-item--down-30,
#item11-8:hover ~ .crossword-clues .crossword-clues__list-item--down-30 {
background: $color-focus-item;
}
#item12-8:active ~ .crossword-clues .crossword-clues__list-item--down-30,
#item12-8:focus ~ .crossword-clues .crossword-clues__list-item--down-30,
#item12-8:hover ~ .crossword-clues .crossword-clues__list-item--down-30 {
background: $color-focus-item;
}
#item13-8:active ~ .crossword-clues .crossword-clues__list-item--down-30,
#item13-8:focus ~ .crossword-clues .crossword-clues__list-item--down-30,
#item13-8:hover ~ .crossword-clues .crossword-clues__list-item--down-30 {
background: $color-focus-item;
}
#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid
~ .crossword-clues .crossword-clues__list-item--across-1 {
background: $color-valid-item;
}
#item2-6:valid ~ #item2-7:valid ~ #item2-8:valid ~ #item2-9:valid ~ #item2-10:valid ~ #item2-11:valid ~ #item2-12:valid ~ #item2-13:valid
~ .crossword-clues .crossword-clues__list-item--across-7 {
background: $color-valid-item;
}
#item3-3:valid ~ #item3-4:valid ~ #item3-5:valid ~ #item3-6:valid
~ .crossword-clues .crossword-clues__list-item--across-8 {
background: $color-valid-item;
}
#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid ~ #item4-6:valid
~ .crossword-clues .crossword-clues__list-item--across-10 {
background: $color-valid-item;
}
#item4-8:valid ~ #item4-9:valid ~ #item4-10:valid ~ #item4-11:valid ~ #item4-12:valid ~ #item4-13:valid
~ .crossword-clues .crossword-clues__list-item--across-11 {
background: $color-valid-item;
}
#item5-3:valid ~ #item5-4:valid ~ #item5-5:valid
~ .crossword-clues .crossword-clues__list-item--across-14 {
background: $color-valid-item;
}
#item5-9:valid ~ #item5-10:valid ~ #item5-11:valid ~ #item5-12:valid ~ #item5-13:valid
~ .crossword-clues .crossword-clues__list-item--across-16 {
background: $color-valid-item;
}
#item6-1:valid ~ #item6-2:valid ~ #item6-3:valid ~ #item6-4:valid
~ .crossword-clues .crossword-clues__list-item--across-17 {
background: $color-valid-item;
}
#item6-6:valid ~ #item6-7:valid ~ #item6-8:valid ~ #item6-9:valid ~ #item6-10:valid
~ .crossword-clues .crossword-clues__list-item--across-19 {
background: $color-valid-item;
}
#item7-5:valid ~ #item7-6:valid ~ #item7-7:valid ~ #item7-8:valid ~ #item7-9:valid
~ .crossword-clues .crossword-clues__list-item--across-21 {
background: $color-valid-item;
}
#item8-4:valid ~ #item8-5:valid ~ #item8-6:valid ~ #item8-7:valid ~ #item8-8:valid
~ .crossword-clues .crossword-clues__list-item--across-22 {
background: $color-valid-item;
}
#item8-10:valid ~ #item8-11:valid ~ #item8-12:valid ~ #item8-13:valid
~ .crossword-clues .crossword-clues__list-item--across-23 {
background: $color-valid-item;
}
#item9-1:valid ~ #item9-2:valid ~ #item9-3:valid ~ #item9-4:valid ~ #item9-5:valid
~ .crossword-clues .crossword-clues__list-item--across-26 {
background: $color-valid-item;
}
#item9-9:valid ~ #item9-10:valid ~ #item9-11:valid
~ .crossword-clues .crossword-clues__list-item--across-28 {
background: $color-valid-item;
}
#item10-1:valid ~ #item10-2:valid ~ #item10-3:valid ~ #item10-4:valid ~ #item10-5:valid ~ #item10-6:valid
~ .crossword-clues .crossword-clues__list-item--across-29 {
background: $color-valid-item;
}
#item10-8:valid ~ #item10-9:valid ~ #item10-10:valid ~ #item10-11:valid ~ #item10-12:valid ~ #item10-13:valid
~ .crossword-clues .crossword-clues__list-item--across-30 {
background: $color-valid-item;
}
#item11-8:valid ~ #item11-9:valid ~ #item11-10:valid ~ #item11-11:valid
~ .crossword-clues .crossword-clues__list-item--across-31 {
background: $color-valid-item;
}
#item12-1:valid ~ #item12-2:valid ~ #item12-3:valid ~ #item12-4:valid ~ #item12-5:valid ~ #item12-6:valid ~ #item12-7:valid ~ #item12-8:valid
~ .crossword-clues .crossword-clues__list-item--across-32 {
background: $color-valid-item;
}
#item13-8:valid ~ #item13-9:valid ~ #item13-10:valid ~ #item13-11:valid ~ #item13-12:valid ~ #item13-13:valid
~ .crossword-clues .crossword-clues__list-item--across-33 {
background: $color-valid-item;
}
#item1-1:valid ~ #item2-1:valid ~ #item3-1:valid ~ #item4-1:valid ~ #item5-1:valid ~ #item6-1:valid
~ .crossword-clues .crossword-clues__list-item--down-1 {
background: $color-valid-item;
}
#item1-4:valid ~ #item2-4:valid ~ #item3-4:valid ~ #item4-4:valid ~ #item5-4:valid ~ #item6-4:valid
~ .crossword-clues .crossword-clues__list-item--down-2 {
background: $color-valid-item;
}
#item1-6:valid ~ #item2-6:valid ~ #item3-6:valid ~ #item4-6:valid
~ .crossword-clues .crossword-clues__list-item--down-3 {
background: $color-valid-item;
}
#item1-9:valid ~ #item2-9:valid ~ #item3-9:valid ~ #item4-9:valid ~ #item5-9:valid ~ #item6-9:valid ~ #item7-9:valid
~ .crossword-clues .crossword-clues__list-item--down-4 {
background: $color-valid-item;
}
#item1-11:valid ~ #item2-11:valid ~ #item3-11:valid ~ #item4-11:valid ~ #item5-11:valid
~ .crossword-clues .crossword-clues__list-item--down-5 {
background: $color-valid-item;
}
#item1-13:valid ~ #item2-13:valid ~ #item3-13:valid ~ #item4-13:valid ~ #item5-13:valid
~ .crossword-clues .crossword-clues__list-item--down-6 {
background: $color-valid-item;
}
#item3-3:valid ~ #item4-3:valid ~ #item5-3:valid ~ #item6-3:valid
~ .crossword-clues .crossword-clues__list-item--down-8 {
background: $color-valid-item;
}
#item3-5:valid ~ #item4-5:valid ~ #item5-5:valid
~ .crossword-clues .crossword-clues__list-item--down-9 {
background: $color-valid-item;
}
#item4-10:valid ~ #item5-10:valid ~ #item6-10:valid
~ .crossword-clues .crossword-clues__list-item--down-12 {
background: $color-valid-item;
}
#item4-12:valid ~ #item5-12:valid ~ #item6-12:valid ~ #item7-12:valid ~ #item8-12:valid
~ .crossword-clues .crossword-clues__list-item--down-13 {
background: $color-valid-item;
}
#item5-7:valid ~ #item6-7:valid ~ #item7-7:valid ~ #item8-7:valid ~ #item9-7:valid
~ .crossword-clues .crossword-clues__list-item--down-15 {
background: $color-valid-item;
}
#item6-2:valid ~ #item7-2:valid ~ #item8-2:valid ~ #item9-2:valid ~ #item10-2:valid
~ .crossword-clues .crossword-clues__list-item--down-18 {
background: $color-valid-item;
}
#item6-6:valid ~ #item7-6:valid ~ #item8-6:valid
~ .crossword-clues .crossword-clues__list-item--down-19 {
background: $color-valid-item;
}
#item6-8:valid ~ #item7-8:valid ~ #item8-8:valid
~ .crossword-clues .crossword-clues__list-item--down-20 {
background: $color-valid-item;
}
#item7-5:valid ~ #item8-5:valid ~ #item9-5:valid ~ #item10-5:valid ~ #item11-5:valid ~ #item12-5:valid ~ #item13-5:valid
~ .crossword-clues .crossword-clues__list-item--down-21 {
background: $color-valid-item;
}
#item8-4:valid ~ #item9-4:valid ~ #item10-4:valid
~ .crossword-clues .crossword-clues__list-item--down-22 {
background: $color-valid-item;
}
#item8-10:valid ~ #item9-10:valid ~ #item10-10:valid ~ #item11-10:valid ~ #item12-10:valid ~ #item13-10:valid
~ .crossword-clues .crossword-clues__list-item--down-23 {
background: $color-valid-item;
}
#item8-11:valid ~ #item9-11:valid ~ #item10-11:valid ~ #item11-11:valid
~ .crossword-clues .crossword-clues__list-item--down-24 {
background: $color-valid-item;
}
#item8-13:valid ~ #item9-13:valid ~ #item10-13:valid ~ #item11-13:valid ~ #item12-13:valid ~ #item13-13:valid
~ .crossword-clues .crossword-clues__list-item--down-25 {
background: $color-valid-item;
}
#item9-1:valid ~ #item10-1:valid ~ #item11-1:valid ~ #item12-1:valid ~ #item13-1:valid
~ .crossword-clues .crossword-clues__list-item--down-26 {
background: $color-valid-item;
}
#item9-3:valid ~ #item10-3:valid ~ #item11-3:valid ~ #item12-3:valid ~ #item13-3:valid
~ .crossword-clues .crossword-clues__list-item--down-27 {
background: $color-valid-item;
}
#item9-9:valid ~ #item10-9:valid ~ #item11-9:valid
~ .crossword-clues .crossword-clues__list-item--down-28 {
background: $color-valid-item;
}
#item10-8:valid ~ #item11-8:valid ~ #item12-8:valid ~ #item13-8:valid
~ .crossword-clues .crossword-clues__list-item--down-30 {
background: $color-valid-item;
}
.crossword-complete {
position: absolute;
z-index: 1000;
top: 50%;
left: 200%;
font-size: 100px;
line-height: 1;
color: red;
width: 100%;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
#item1-1:valid ~ #item1-2:valid ~ #item1-3:valid ~ #item1-4:valid ~ #item1-5:valid ~ #item1-6:valid ~ #item1-9:valid ~ #item1-11:valid ~ #item1-13:valid ~
#item2-1:valid ~ #item2-4:valid ~ #item2-6:valid ~ #item2-7:valid ~ #item2-8:valid ~ #item2-9:valid ~ #item2-10:valid ~ #item2-11:valid ~ #item2-12:valid ~ #item2-13:valid ~
#item3-1:valid ~ #item3-3:valid ~ #item3-4:valid ~ #item3-5:valid ~ #item3-6:valid ~ #item3-9:valid ~ #item3-11:valid ~ #item3-13:valid ~
#item4-1:valid ~ #item4-2:valid ~ #item4-3:valid ~ #item4-4:valid ~ #item4-5:valid ~ #item4-6:valid ~ #item4-8:valid ~ #item4-9:valid ~ #item4-10:valid ~ #item4-11:valid ~ #item4-12:valid ~ #item4-13:valid ~
#item5-1:valid ~ #item5-3:valid ~ #item5-4:valid ~ #item5-5:valid ~ #item5-7:valid ~ #item5-9:valid ~ #item5-10:valid ~ #item5-11:valid ~ #item5-12:valid ~ #item5-13:valid ~
#item6-1:valid ~ #item6-2:valid ~ #item6-3:valid ~ #item6-4:valid ~ #item6-6:valid ~ #item6-7:valid ~ #item6-8:valid ~ #item6-9:valid ~ #item6-10:valid ~ #item6-12:valid ~
#item7-2:valid ~ #item7-5:valid ~ #item7-6:valid ~ #item7-7:valid ~ #item7-8:valid ~ #item7-9:valid ~ #item7-12:valid ~
#item8-2:valid ~ #item8-4:valid ~ #item8-5:valid ~ #item8-6:valid ~ #item8-7:valid ~ #item8-8:valid ~ #item8-10:valid ~ #item8-11:valid ~ #item8-12:valid ~ #item8-13:valid ~
#item9-1:valid ~ #item9-2:valid ~ #item9-3:valid ~ #item9-4:valid ~ #item9-5:valid ~ #item9-7:valid ~ #item9-9:valid ~ #item9-10:valid ~ #item9-11:valid ~ #item9-13:valid ~
#item10-1:valid ~ #item10-2:valid ~ #item10-3:valid ~ #item10-4:valid ~ #item10-5:valid ~ #item10-6:valid ~ #item10-8:valid ~ #item10-9:valid ~ #item10-10:valid ~ #item10-11:valid ~ #item10-12:valid ~ #item10-13:valid ~
#item11-1:valid ~ #item11-3:valid ~ #item11-5:valid ~ #item11-8:valid ~ #item11-9:valid ~ #item11-10:valid ~ #item11-11:valid ~ #item11-13:valid ~
#item12-1:valid ~ #item12-2:valid ~ #item12-3:valid ~ #item12-4:valid ~ #item12-5:valid ~ #item12-6:valid ~ #item12-7:valid ~ #item12-8:valid ~ #item12-10:valid ~ #item12-13:valid ~
#item13-1:valid ~ #item13-3:valid ~ #item13-5:valid ~ #item13-8:valid ~ #item13-9:valid ~ #item13-10:valid ~ #item13-11:valid ~ #item13-12:valid ~ #item13-13:valid ~ .crossword-complete {
opacity: 1;
}
#checkvaliditems {
background: $color-valid-item;
cursor: pointer;
position: absolute;
top: 35px;
left: 37px;
}
[for="checkvaliditems"] {
padding: 10px 10px 10px 40px;
margin: 20px;
display: inline-block;
background: $color-valid-item;
cursor: pointer;
}
Also see: Tab Triggers