Colours - suggestions about graphic design of website • page 3/3 • Lichess Feedback • lichess.org

This is the code for the pieces i recommend.
<div class="game-editor-controls analysis-board-controls" ng-controller="DiagramEditorCtrl" ng-init="init(true,
'classic',
'metal',
true,
'',
'',
'',
'',
'',
'',
'')">

<div justified="true">
<ul class="nav nav-tabs nav-justified" ng-hide="isTinyMCE">
<li ng-class="{active: tab.selected === 'selfAnalysis' || tab.selected === 'manualAnalysis'}" class="active">
<a ng-click="onTabChange('selfAnalysis')">
<div tip-placement="bottom" tip="Self Analysis">
<i class="icon-chess-board-search"></i>
</div>
</a>
</li>
<li ng-class="{active: tab.selected == 'computerAnalysis'}">
<a ng-click="onTabChange('computerAnalysis')">
<div tip-placement="bottom" tip="Computer Analysis">
<i class="icon-computer-search"></i>
</div>
</a>
</li>
<li ng-class="{active: tab.selected == 'openings'}">
<a ng-click="onTabChange('openings')">
<div tip-placement="bottom" tip="Openings">
<i class="icon-book-alt"></i>
</div>
</a>
</li>
<li ng-class="{active: tab.selected == 'info'}">
<a ng-click="onTabChange('info')">
<div tip-placement="bottom" tip="Game Info">
<i class="icon-circle-info"></i>
</div>
</a>
</li>
<li ng-class="{active: tab.selected == 'share'}" ng-show="showPublishTab">
<a ng-click="onTabChange('share')">
<div tip-placement="bottom" tip="Share">
<i class="icon-share"></i>
</div>
</a>
</li>
</ul>
</div>

<div class="section-wrapper computer-analysis-controls" ng-show="showAnalysisControls" ng-class="{'hideTopBorder': showAutoAnalysisButton()}">
<div class="sendToAutoAnalysis ng-hide" ng-show="showAutoAnalysisButton()">
<button type="submit" title="Computer Analysis" class="btn full-width btn-primary" ng-click="onTabChange("computerAnalysis")">Computer Analysis</button>

<hr>
</div>
<div class="controls">
<input select-on-click="" ng-model="game.fen" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-pattern" spellcheck="false" ng-change="loadFen(game.fen)" tip="Current FEN" ng-pattern="/^\S+\s+[wb]\s+\S+\s+\S+\s+\d+\s+\d+.*$/" ng-trim="true">
</div>

<div class="move-control-group">
<div class="controls control-group">
<button class="btn btn-icon " id="alwaysonplaybutton" tip="Play / Pause" ng-click="playpause('alwaysonplaybutton')">
<i class="icon-play"></i>
</button>

<button class="btn btn-icon " id="backwardbuttonbegin" tip="First Move">
<i class="icon-chevron-previous"></i>
</button>

<button class="btn btn-icon " id="backwardbutton" tip="Previous Move">
<i class="icon-chevron-left"></i>
</button>

<button class="btn btn-icon " id="forwardbutton" tip="Next Move">
<i class="icon-chevron-right"></i>
</button>

<button class="btn btn-icon " id="forwardbuttonend" tip="Last Move">
<i class="icon-chevron-next"></i>
</button>

</div>
<div class="controls">
<div class="align-center board-controls">

<a class="iconized " ng-click="newAnalysis($event)" title="New Analysis" tip="New Analysis" tip-popup-delay="50">
<i class="icon-plus"></i>
</a>

<a class="iconized " ng-click="flipBoard()" title="Flip Board" tip="Flip Board" tip-popup-delay="50">
<i class="icon-repeat"></i>
</a>

<a class="iconized " ng-click="resetBoard()" title="Reset" tip="Reset" tip-popup-delay="50">
<i class="icon-undo"></i>
</a>

<a class="iconized " ng-click="shareBoard()" title="Download" tip="Download" tip-popup-delay="50">
<i class="icon-download"></i>
</a>

<a class="iconized " ng-click="playVsComputer()" title="Finish Vs Computer" tip="Finish Vs Computer" tip-popup-delay="50">
<i class="icon-chess-move"></i>
</a>

</div>
</div>
</div>
</div>

<div class="initialEmptyArea" ng-show="initialEmpty && tab.selected == 'selfAnalysis'">
<div class="initialEmptyText">
Make moves or... </div>

<div class="accordion-panel flex shrink" is-open="isSetupOpen" ng-class="isSetupOpen ? 'expand' : ''">
<heading xmlns="http://www.w3.org/1999/html" class="big-icon flex">
<a ng-click="onPanelChange('isSetupOpen', !isSetupOpen )">
<i class="icon-plus"></i> Set up Position <i class="pull-right icon-caret-right" ng-class="{'icon-caret-down': isSetupOpen, 'icon-caret-right': !isSetupOpen}"></i>
</a>
</heading>
</div>

<div class="accordion-panel flex shrink" is-open="isFenOpen" ng-class="isFenOpen ? 'expand' : ''">
<heading xmlns="http://www.w3.org/1999/html" class="big-icon flex">
<a ng-click="onFenPgnChange('FEN')">
<i class="icon-chess-pawn-rook"></i> Load FEN <i class="pull-right icon-caret-right" ng-class="{'icon-caret-down': isFenOpen, 'icon-caret-right': !isFenOpen}"></i>
</a>
<article class="sideFenPgnForm setup-control expand shrink" ng-class="isFenOpen ? 'open': ''">
<form ng-submit="editFen(userEnteredFen, true)" class="ng-pristine ng-valid ng-valid-pattern">
<input id="loadFENinput" type="text" placeholder="Paste FEN" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" tip="Paste FEN" ng-model="userEnteredFen" ng-change="pastedSetup && editFen(userEnteredFen, true)" ng-paste="pastedSetup = true" ng-pattern="/^\S+\s+[wb]\s+\S+\s+\S+\s+\d+\s+\d+.*$/">
<button type="button" class="btn btn-primary full-width" ng-click="editFen(userEnteredFen, true)">Load</button>
</form>
</article>
</heading>
</div>
<div class="accordion-panel flex shrink" is-open="isPgnOpen" ng-class="isPgnOpen ? 'expand' : ''">
<heading xmlns="http://www.w3.org/1999/html" class="big-icon flex">
<a ng-click="onFenPgnChange('PGN')">
<i class="icon-chess-board"></i> Load PGN <i class="pull-right icon-caret-right" ng-class="{'icon-caret-down': isPgnOpen, 'icon-caret-right': !isPgnOpen}"></i>
</a>
<article class="sideFenPgnForm setup-control expand shrink" ng-class="isPgnOpen ? 'open': ''" scroll="" outer-scroll="scrollOuter">
<textarea id="loadPGNinput" placeholder="Paste PGN" class="pastePgn input-full-width ng-pristine ng-untouched ng-valid ng-empty" ng-change="pastedSetup && editPgn(userEnteredPgn)" ng-model="userEnteredPgn" ng-paste="pastedSetup = true"></textarea>
<button type="button" class="btn btn-primary full-width" ng-click="editPgn(userEnteredPgn, true)">Load</button>
</article>
</heading>
</div>
</div>

<form id="selfAnalysisTab" name="form" novalidate="" class="accordion-holder tabContainer flex ng-pristine ng-valid ng-valid-pattern ng-valid-date ng-hide" ng-show="tab.selected == 'selfAnalysis' && !initialEmpty" ng-class="isSetupOpen ? 'fullHeight' : ''">

<div class="accordion-panel flex shrink" is-open="isSetupOpen" ng-class="isSetupOpen ? 'expand' : ''">

<heading xmlns="http://www.w3.org/1999/html" ng-show="isTinyMCE" class="ng-hide">
<a ng-click="onPanelChange('isSetupOpen', !isSetupOpen)">
Setup <i class="pull-right icon-caret-right" ng-class="{'icon-caret-down': isSetupOpen, 'icon-caret-right': !isSetupOpen}"></i>
</a>
</heading>

<article class="setup-control expand shrink side-bar-override" ng-class="{'open': isSetupOpen, 'side-bar-override': !isTinyMCE}">
<div class="section-header expand shrink floating-heading" ng-hide="isTinyMCE">
<h3>
<a class="iconized right" ng-click="closeSetup()">
<i class="icon-x"></i>
</a>
<i class="icon-plus"></i>
Set up Position </h3>
</div>

<div id="divNewPieces" class="pull-left ng-hide" ng-show="isSetupOpen"><img id="divBoard_NEW_bp" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/bp.png" style="width: 45px; position: absolute; top: 13px; left: 3px;"><img id="divBoard_NEW_br" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/br.png" style="width: 45px; position: absolute; top: 13px; left: 51px;"><img id="divBoard_NEW_bn" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/bn.png" style="width: 45px; position: absolute; top: 13px; left: 99px;"><img id="divBoard_NEW_bb" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/bb.png" style="width: 45px; position: absolute; top: 13px; left: 147px;"><img id="divBoard_NEW_bq" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/bq.png" style="width: 45px; position: absolute; top: 13px; left: 195px;"><img id="divBoard_NEW_bk" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/bk.png" style="width: 45px; position: absolute; top: 13px; left: 243px;"><img id="divBoard_NEW_wp" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/wp.png" style="width: 45px; position: absolute; top: 61px; left: 3px;"><img id="divBoard_NEW_wr" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/wr.png" style="width: 45px; position: absolute; top: 61px; left: 51px;"><img id="divBoard_NEW_wn" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/wn.png" style="width: 45px; position: absolute; top: 61px; left: 99px;"><img id="divBoard_NEW_wb" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/wb.png" style="width: 45px; position: absolute; top: 61px; left: 147px;"><img id="divBoard_NEW_wq" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/wq.png" style="width: 45px; position: absolute; top: 61px; left: 195px;"><img id="divBoard_NEW_wk" class="divBoard_piece chess_com_draggable" src="//images.chesscomfiles.com/chess-themes/pieces/classic/90/wk.png" style="width: 45px; position: absolute; top: 61px; left: 243px;"></div>

<div id="manualSetup">

<div class="controls select-and-links">
<div class="select-style smaller-select">
<select class="chess-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="firstMove" ng-change="changeFirstMove(firstMove)" tip="Side to Move">
<option value="white">White to Move</option>
<option value="black">Black to Move</option>
</select>
</div>
<div class="pull-right board-controls setup-controls">

<a class="iconized " ng-click="flipBoard()" title="Flip Board" tip="Flip Board" tip-popup-delay="50">
<i class="icon-repeat"></i>
</a>

<a class="iconized " ng-click="resetToStarting()" title="Reset" tip="Reset" tip-popup-delay="50">
<i class="icon-undo"></i>
</a>

<a class="iconized " ng-click="clearBoard()" title="Clear" tip="Clear" tip-popup-delay="50">
<i class="icon-trash"></i>
</a>

</div>
</div>

<div class="controls labels-list">
<label>
<span tip="White's Castling Ability">White</span>
</label>
<label>
<span tip="Black's Castling Ability">Black</span>
</label>
<label>
<input type="checkbox" ng-model="castling.wk" ng-true-value="'k'" ng-false-value="'-'" ng-change="updateCastling()" tip="White Kingside Castling" class="ng-pristine ng-untouched ng-valid ng-not-empty"> <span tip="White Kingside Castling">(O-O)</span>
</label>
<label>
<input type="checkbox" ng-model="castling.bk" ng-true-value="'K'" ng-false-value="'-'" ng-change="updateCastling()" tip="Black Kingside Castling" class="ng-pristine ng-untouched ng-valid ng-not-empty"> <span tip="Black Kingside Castling">(O-O)</span>
</label>
<label>
<input type="checkbox" ng-model="castling.wq" ng-true-value="'q'" ng-false-value="'-'" ng-change="updateCastling()" tip="White Queenside Castling" class="ng-pristine ng-untouched ng-valid ng-not-empty"> <span tip="White Queenside Castling">(O-O-O)</span>
</label>
<label>
<input type="checkbox" ng-model="castling.bq" ng-true-value="'Q'" ng-false-value="'-'" ng-change="updateCastling()" tip="Black Queenside Castling" class="ng-pristine ng-untouched ng-valid ng-not-empty"> <span tip="Black Queenside Castling">(O-O-O)</span>
</label>
</div>

<div>
<div class="controls">
<input type="text" placeholder="Enter FEN" class="input-full-width ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-pattern" tip="Starting FEN" ng-change="loadFen(info.FEN)" ng-model="info.FEN" ng-paste="pastedSetup = isTinyMCE" ng-pattern="/^\S+\s+[wb]\s+\S+\s+\S+\s+\d+\s+\d+.*$/">
</div>
<div class="controls">
<textarea id="pgn" placeholder="Enter PGN" class="input-full-width ng-pristine ng-untouched ng-valid ng-not-empty" ng-change="editPgn(setup.pgnBody)" ng-model="setup.pgnBody" ng-paste="pastedSetup = isTinyMCE"></textarea>
</div>
</div>
</div>
<button class="btn btn-primary full-width" ng-hide="isTinyMCE" ng-click="closeSetup()">Done</button>
</article>
</div>

<div class="accordion-panel flex shrink expand" is-open="isMovesOpen" ng-class="{expand: isMovesOpen, lastPanel: !isTinyMCE && !isMovesOpen}">
<heading xmlns="http://www.w3.org/1999/html" ng-show="isTinyMCE" class="ng-hide">
<a ng-click="onPanelChange('isMovesOpen', !isMovesOpen)">
Moves <i class="pull-right icon-caret-down" ng-class="{'icon-caret-down': isMovesOpen, 'icon-caret-right': !isMovesOpen}"></i>
</a>
</heading>

<article class="moves-control list-of-moves expand shrink open lastPanel" ng-class="{open: isMovesOpen, lastPanel: !isTinyMCE}">
<div id="divGameOutput" class="list-wrap" context-menu="menuMaker(event)" scroll="" outer-scroll="scrollOuter"><div id="divGameOutput_vertical" style="display: none;"></div><div id="divGameOutput_horizontal" class="notationHorizontal" style="display: block;"></div></div>
<div class="menuExplanation ng-hide" ng-show="showMenuExplanation && hasMoves" ng-click="hideMenuExplanation()">
Right-click to add comments and annotations </div>
<span id="placeholder"></span>
<div ng-show="isTinyMCE" class="ng-hide">
<div class="controls">
<input select-on-click="" ng-model="game.fen" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-not-empty ng-valid-pattern" spellcheck="false" ng-change="loadFen(game.fen)" tip="Current FEN" ng-pattern="/^\S+\s+[wb]\s+\S+\s+\S+\s+\d+\s+\d+.*$/" ng-trim="true">
</div>
<div class="controls control-group tinyMCEButtons">
<button class="btn btn-icon " tip="First Move" ng-click="goToMove('first')">
<i class="icon-chevron-previous"></i>
</button>

<button class="btn btn-icon " tip="Previous Move" ng-click="goToMove('previous')">
<i class="icon-chevron-left"></i>
</button>

<button class="btn btn-icon " tip="Next Move" ng-click="goToMove('next')">
<i class="icon-chevron-right"></i>
</button>

<button class="btn btn-icon " tip="Last Move" ng-click="goToMove('last')">
<i class="icon-chevron-next"></i>
</button>

</div>
</div>
</article>
</div>

<div class="accordion-panel flex shrink ng-hide" is-open="isDetailsOpen" ng-class="isDetailsOpen ? 'expand' : ''" ng-show="isTinyMCE">
<heading xmlns="http://www.w3.org/1999/html" ng-show="isTinyMCE" class="ng-hide">
<a ng-click="onPanelChange('isDetailsOpen', !isDetailsOpen)">
Details <i class="pull-right icon-caret-right" ng-class="{'icon-caret-down': isDetailsOpen, 'icon-caret-right': !isDetailsOpen}"></i>
</a>
</heading>

<article class="details-control " ng-class="isDetailsOpen ? 'open': ''" scroll="">
<div class="controls">
<input ng-model="info.White" type="text" class="normal-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="White player" tip="White player">
<input ng-model="info.WhiteElo" ng-pattern="/^(?:\d{3,4}|\?)$/" type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="Rating" tip="White ELO">
</div>
<div class="controls">
<input ng-model="info.Black" type="text" class="normal-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="Black player" tip="Black player">
<input ng-model="info.BlackElo" ng-pattern="/^(?:\d{3,4}|\?)$/" type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="Rating" tip="Black ELO">
</div>
<div class="controls">
<div class="select-style">
<select class="chess-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="info.Result" tip="Result">
<option value="*">No result (*)</option>
<option value="1-0">White won (1-0)</option>
<option value="0-1">Black won (0-1)</option>
<option value="1/2-1/2">Draw (1/2-1/2)</option>
</select>
</div>
</div>

<hr>

<div class="controls">
<input ng-model="info.Event" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="Event" tip="Event">
</div>
<div class="controls">
<input ng-model="info.Site" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="Event location" tip="Event location">
</div>

<div class="controls">
<input type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="Round" tip="Round" ng-model="info.Round" ng-pattern="/^\d+$/">
<input type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="ECO" tip="ECO" ng-model="info.ECO" ng-pattern="/^[A-E]\d{1,2}[a-z]?$/">
<span class="calendar-wrapper">
<input type="text" class="date-time ng-pristine ng-untouched ng-valid ng-empty ng-valid-date" placeholder="Date" tip="Date" datepicker-popup="yyyy.MM.dd" ng-model="info.Date" is-open="calendarOpen" close-text="Close">
<span class="input-group-btn white">
<button type="button" class="btn btn-default" ng-click="openCalendar($event)">
<i class="icon-calendar"></i>
</button>
</span>
</span>
</div>
</article>

</div>

<div class="accordion-panel flex shrink ng-hide" is-open="isThemeOpen" ng-class="{'last-visible': isTinyMCE && !showPublishTab, 'expand': isThemeOpen}" ng-show="isTinyMCE">
<heading xmlns="http://www.w3.org/1999/html" ng-show="isTinyMCE" class="ng-hide">
<a ng-click="onPanelChange('isThemeOpen', !isThemeOpen)">
Theme <i class="pull-right icon-caret-right" ng-class="{'icon-caret-down': isThemeOpen, 'icon-caret-right': !isThemeOpen}"></i>
</a>
</heading>

<article class="theme-control expand shrink" ng-class="isThemeOpen ? 'open': ''">
<div class="controls">
<label>Board</label>
<div class="chess-select ui-select-container ui-select-bootstrap dropdown ng-valid ng-not-empty" ng-class="{open: $select.open}" ng-model="setup.colorScheme" on-select="changeBoard($item)" append-to-body="true"><div class="ui-select-match" ng-hide="$select.open && $select.searchEnabled" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}"><span tabindex="-1" class="btn btn-default form-control ui-select-toggle" aria-label="Select box activate" ng-disabled="$select.disabled" ng-click="$select.activate()" style="outline: 0;"><span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted ng-hide"></span> <span ng-hide="$select.isEmpty()" class="ui-select-match-text pull-left" ng-class="{'ui-select-allow-clear': $select.allowClear && !$select.isEmpty()}" ng-transclude=""><span>
Metal
</span></span> <i class="caret pull-right" ng-click="$select.toggle($event)"></i> <a ng-show="$select.allowClear && !$select.isEmpty() && ($select.disabled !== true)" aria-label="Select box clear" style="margin-right: 10px" ng-click="$select.clear($event)" class="btn btn-xs btn-link pull-right ng-hide"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i></a></span></div><input type="search" autocomplete="off" tabindex="-1" aria-expanded="true" aria-label="Select box" aria-owns="ui-select-choices-0" aria-activedescendant="ui-select-choices-row-0-0" class="form-control ui-select-search ng-pristine ng-untouched ng-valid ng-empty ng-hide" placeholder="" ng-model="$select.search" ng-show="$select.searchEnabled && $select.open" style="width: 10px;"><ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu ng-hide" role="listbox" ng-show="$select.open && $select.items.length > 0" repeat="colorScheme in colorSchemes"><li class="ui-select-choices-group" id="ui-select-choices-0"><div class="divider ng-hide" ng-show="$select.isGrouped && $index > 0"></div><div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header ng-hide" ng-bind="$group.name"></div></li></ul><div class="ui-select-no-choice"></div><ui-select-single></ui-select-single><input ng-disabled="$select.disabled" class="ui-select-focusser ui-select-offscreen" type="text" id="{{ $select.focusserId }}" aria-label="{{ $select.focusserTitle }}" aria-haspopup="true" role="button"></div>
</div>
<div class="controls">
<label>Pieces</label>
<div class="chess-select ui-select-container ui-select-bootstrap dropdown ng-valid ng-not-empty" ng-class="{open: $select.open}" ng-model="setup.pieceStyle" on-select="changePieces($item)" append-to-body="true"><div class="ui-select-match" ng-hide="$select.open && $select.searchEnabled" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}"><span tabindex="-1" class="btn btn-default form-control ui-select-toggle" aria-label="Select box activate" ng-disabled="$select.disabled" ng-click="$select.activate()" style="outline: 0;"><span ng-show="$select.isEmpty()" class="ui-select-placeholder text-muted ng-hide"></span> <span ng-hide="$select.isEmpty()" class="ui-select-match-text pull-left" ng-class="{'ui-select-allow-clear': $select.allowClear && !$select.isEmpty()}" ng-transclude=""><span>
Classic
</span></span> <i class="caret pull-right" ng-click="$select.toggle($event)"></i> <a ng-show="$select.allowClear && !$select.isEmpty() && ($select.disabled !== true)" aria-label="Select box clear" style="margin-right: 10px" ng-click="$select.clear($event)" class="btn btn-xs btn-link pull-right ng-hide"><i class="glyphicon glyphicon-remove" aria-hidden="true"></i></a></span></div><input type="search" autocomplete="off" tabindex="-1" aria-expanded="true" aria-label="Select box" aria-owns="ui-select-choices-1" aria-activedescendant="ui-select-choices-row-1-0" class="form-control ui-select-search ng-pristine ng-untouched ng-valid ng-empty ng-hide" placeholder="" ng-model="$select.search" ng-show="$select.searchEnabled && $select.open" style="width: 10px;"><ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu ng-hide" role="listbox" ng-show="$select.open && $select.items.length > 0" repeat="pieceStyle in pieceStyles"><li class="ui-select-choices-group" id="ui-select-choices-1"><div class="divider ng-hide" ng-show="$select.isGrouped && $index > 0"></div><div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header ng-hide" ng-bind="$group.name"></div></li></ul><div class="ui-select-no-choice"></div><ui-select-single></ui-select-single><input ng-disabled="$select.disabled" class="ui-select-focusser ui-select-offscreen" type="text" id="{{ $select.focusserId }}" aria-label="{{ $select.focusserTitle }}" aria-haspopup="true" role="button"></div>
</div>
<div class="checkbox-control">
<label class="checkbox-inline" for="Coordinates">
<input type="checkbox" id="Coordinates" ng-model="setup.boardCoords" ng-checked="setup.boardCoords" ng-change="changeShowCoordinates(setup.boardCoords)" class="ng-pristine ng-untouched ng-valid ng-not-empty">Coordinates </label>
</div>
<div class="checkbox-control">
<label class="checkbox-inline" for="Flip Board">
<input type="checkbox" id="Flip Board" ng-model="setup.boardFlip" ng-checked="setup.boardFlip" ng-click="flipBoard()" class="ng-pristine ng-untouched ng-valid ng-empty">Flip Board </label>
</div>
<div class="checkbox-control">
<label class="checkbox-inline" for="isPuzzle">
<input type="checkbox" id="isPuzzle" ng-model="isPuzzle" ng-checked="isPuzzle" ng-change="changeIsPuzzle(isPuzzle)" class="ng-pristine ng-untouched ng-valid ng-empty">Puzzle </label>
</div>
</article>
</div>

<div class="form-controls ng-hide" ng-show="isTinyMCE">
<button ng-click="cancel()" type="button" class="mce-close btn btn-medium" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button ng-show="!diagramId" ng-click="insert()" type="submit" class="btn btn-medium btn-primary">Insert</button>
<button ng-show="diagramId" ng-click="insert()" type="submit" class="btn btn-medium btn-primary ng-hide">Save</button>
</div>
</form>

<div id="computerAnalysisTab" ng-show="tab.selected === 'computerAnalysis' || tab.selected === 'manualAnalysis'" class="tabContainer ng-hide" ng-class="{'showBottomButton': showAutoAnalysisButton()}">

<div id="computer-analysis-sidebar" ng-controller="ComputerAnalysisCtrl">

<div class="cheatWarning ng-hide" ng-show="ComputerAnalysis.showCheatWarning">
<div><span class="warning-icon"><i class="icon-circle-danger"></i></span> Analysis cannot be performed on this position because it matches one of your games in progress. Return to analyze your game after it is over.</div>
</div>

<div ng-show="ComputerAnalysis.manual && !ComputerAnalysis.showCheatWarning" class="ng-hide">
<div ng-mouseover="evalMouseOver()" ng-mouseleave="evalMouseOut()">
<div class="game-opening ng-hide" ng-show="(selectedOpening && ComputerAnalysis.pvCount > 0) && !evalHover && !engineInfoHidden" ng-click="loadOpeningHref(selectedOpening.url)" ng-class="{'clickable':selectedOpening.url}">
<p class="eco-classify no-wrap" ng-class="{'with-arrow':selectedOpening.url}">
<span ng-show="selectedOpening.code !== null">: </span>
<span id="eco-classify-name">
<span ng-bind="selectedOpening.name" ng-attr-title="[[selectedOpening.name]]"></span>
</span>
</p>
</div>

<score-meter class="score-meter-container" score-info="scoreInfo" ng-show="(!selectedOpening || ComputerAnalysis.pvCount === 0) && !evalHover && !engineInfoHidden"><div ng-click="scoreMeterHelp()" class="score-meter"><div class="score-meter-white" ng-style="{ width: barWidths.whitePercent }" style="width: 50%;"><span ng-bind="scoreText" ng-show="scoreInfo.score >= 0"></span></div><div class="score-meter-black" ng-style="{ width: barWidths.blackPercent }" style="width: 50%;"><span ng-bind="scoreText" ng-show="scoreInfo.score < 0" class="ng-hide"></span></div></div></score-meter>

<div class="engine-controls ng-hide" ng-show="evalHover || engineInfoHidden">
<a href="//support.chess.com/customer/portal/articles/1444875-what-do-the-computer-evaluation-numbers-mean-like-2-25-" target="_blank">
<button class="close" tip="Help" ng-hide="engineInfoHidden">
<i class="icon-circle-question"></i>
</button>
</a>
<button class="close" ng-click="hideEngineInfo()" tip="Hide" ng-hide="engineInfoHidden">
<i class="icon-x"></i>
</button>

<button class="close ng-hide" ng-click="showEngineInfo()" tip="Show" ng-show="engineInfoHidden">
<i class="icon-chip"></i>
</button>
</div>
</div>

<div>
<div id="computerPVContainer" ng-hide="engineInfoHidden"></div>
<div class="computerAnalysisInfoBar">
<span id="computerAnalysisInfo"></span>
<span ng-click="ComputerAnalysis.openSettings()" tip="Settings" class="pull-right settingsButton" tip-placement="bottom">
<i class="icon-circle-gearwheel"></i>
</span>
<span class="pull-right settingsButton" ng-hide="ComputerAnalysis.engineManuallyStopped || ComputerAnalysis.engineFinished" ng-click="ComputerAnalysis.stopEngine()" tip="Pause Engine" tip-placement="bottom">
<i class="icon-pause"></i>
</span>
<span class="pull-right settingsButton ng-hide" ng-hide="!ComputerAnalysis.engineManuallyStopped && !ComputerAnalysis.engineFinished" ng-click="ComputerAnalysis.resumeManualEngine()" tip="Start Engine" tip-placement="bottom">
<i class="icon-play"></i>
</span>
</div>

<div id="computerPVContainerPreview" class="popover bottom board-popover" style="display:block">
<div class="arrow"></div>
<div class="popover-content">
<div class="game-preview" ng-style="board" fen="ComputerAnalysis.preview.fen" size="'24'" flip-board="ComputerAnalysis.preview.flipBoard" piece-style="ComputerAnalysis.preview.pieceStyle" color-scheme="ComputerAnalysis.preview.colorScheme" auto-resize="true" static-board="false" board-popover="true" highlight-color="ComputerAnalysis.preview.highlightColor" highlight-squares="ComputerAnalysis.preview.highlightSquares" style="width: 192px; height: 0px; max-width: 100%; padding-bottom: 100%; background-image: url("//images.chesscomfiles.com/chess-themes/boards/metal/24.jpg");"></div>
</div>
</div>
</div>
</div>

<div ng-show="ComputerAnalysis.displayStates.setupModal" class="computer-analysis-sidebar-body-parent ng-hide">
<div class="computer-analysis-sidebar-body">
<h1>Computer Analysis</h1>
<ul>
<li><span>In-depth comments on key moves</span></li>
<li><span>Highlight blunders and missed wins</span></li>
<li><span>Timeline of score</span></li>
<li><span>Full game stats</span></li>
</ul>
<button type="submit" title="Quick" class="btn full-width ng-hide" ng-click="ComputerAnalysis.startAutoAnalyze(0)" ng-show="hasMoves && !positionInvalid">Quick</button>

<button type="submit" title="Deep" class="btn full-width ng-hide" ng-click="ComputerAnalysis.startAutoAnalyze(1)" ng-show="hasMoves && !positionInvalid">Deep</button>

<button type="submit" title="Maximum" class="btn full-width ng-hide" ng-click="ComputerAnalysis.startAutoAnalyze(2)" ng-show="hasMoves && !positionInvalid">Maximum</button>

</div>
</div>

<div ng-show="ComputerAnalysis.displayStates.upgradeModal" class="ng-hide">
<div class="computer-analysis-sidebar-body">
<h1>Computer Analysis</h1>
<span class="upgrade-modal-headings">Premium</span>
<p>Deep evaluations and best lines</p>
<a class="btn full-width btn-info learn-more" title="Learn More" href="www.chess.com/membership?c=computer-analysis" target="_self">Learn More</a>

<span class="upgrade-modal-headings">Quick</span>
<p>Overview of best moves and mistakes</p>




</div>
</div>

<div ng-show="ComputerAnalysis.auto && !ComputerAnalysis.showCheatWarning" class="score-graph-parent ng-hide">
<div class="remaining-time" ng-show="ComputerAnalysis.gameAnalysis.percentComplete < 100">
<div>
<span>Analyzing: </span>
<span ng-bind="ComputerAnalysis.gameAnalysis.percentComplete + '%'">0%</span>
(<span ng-bind="ComputerAnalysis.gameAnalysis.completionTimeEstimate | secondsToTime">0:00</span>)
<span class="thinking-indicator thinking-12 ng-hide" ng-show="ComputerAnalysis.gameAnalysis.completionTimeEstimate"></span>
</div>
</div>

<div class="game-opening ng-hide" ng-show="selectedOpening && ComputerAnalysis.gameAnalysis.percentComplete === 100" ng-click="loadOpeningHref(selectedOpening.url)" ng-class="{'clickable':selectedOpening.url}">
<p class="eco-classify no-wrap" ng-class="{'with-arrow':selectedOpening.url}">
<span ng-show="selectedOpening.code !== null">: </span>
<span id="eco-classify-name">
<span ng-bind="selectedOpening.name" ng-attr-title="[[selectedOpening.name]]"></span>
</span>
</p>
</div>

<score-meter class="score-meter-container ng-hide" score-info="scoreInfo" ng-show="selectedOpening === null && ComputerAnalysis.gameAnalysis.percentComplete === 100"><div ng-click="scoreMeterHelp()" class="score-meter"><div class="score-meter-white" ng-style="{ width: barWidths.whitePercent }" style="width: 50%;"><span ng-bind="scoreText" ng-show="scoreInfo.score >= 0"></span></div><div class="score-meter-black" ng-style="{ width: barWidths.blackPercent }" style="width: 50%;"><span ng-bind="scoreText" ng-show="scoreInfo.score < 0" class="ng-hide"></span></div></div></score-meter>

<div class="score-graph-container score-graph" game-analysis="ComputerAnalysis.gameAnalysis" click="selectMoveNode($moveNode)"> <div class="score-graph-ticks" ng-style="{width:graphWidth}">  </div> <div class="score-graph-scores" ng-style="{width:graphWidth}">  </div></div>
</div>

<div id="analysisMoveOutput" scroll="">
<div id="talliesTable" ng-hide="ComputerAnalysis.manual">
<table class="tallies-table">
<tbody><tr class="table-header">
<th>Strength</th>
<th class="tallies-right">White</th>
<th class="tallies-right">Black</th>
</tr>
<tr>
<td class="excellent top-row">Excellent</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.white.excellent">0</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.black.excellent">0</td>
</tr>
<tr>
<td class="good">Good</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.white.good">0</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.black.good">0</td>
</tr>
<tr>
<td class="inaccuracy">Inaccuracy (?!)</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.white.inaccurate">0</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.black.inaccurate">0</td>
</tr>
<tr>
<td class="mistake">Mistake (?)</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.white.mistake">0</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.black.mistake">0</td>
</tr>
<tr>
<td class="blunder">Blunder (??)</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.white.blunder">0</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.tallies.black.blunder">0</td>
</tr>
<tr>
<td class="bottom-row">Avg. Diff</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.avgDifference.white | number : 2">0.00</td>
<td class="tallies-right" ng-bind="ComputerAnalysis.gameAnalysis.avgDifference.black | number : 2">0.00</td>
</tr>
</tbody></table>
</div>

<div class="play-may-continue ng-hide" ng-show="ComputerAnalysis.gameAnalysis.playMayContinue && ComputerAnalysis.auto">
<span id="playMayContinue">Play may have continued </span>
<a class="action-icon" title="Retry vs Computer" ng-click="playVsComputer(ComputerAnalysis.gameAnalysis.playMayContinue.moveNode, true, ComputerAnalysis.gameAnalysis.playMayContinue.moveLan, true)">
<i class="icon-computer"></i>
</a>
</div>
<div class="autoExit ng-hide" ng-show="ComputerAnalysis.auto && ComputerAnalysis.gameAnalysis.percentComplete === 100" ng-click="reloadComputerAnalysis()">
Reset automated computer analysis <a class="action-icon">
<i class="icon-exit"></i>
</a>
</div>
<div class="menuExplanation ng-hide" ng-show="showMenuExplanation && hasMoves && ComputerAnalysis.manual" ng-click="hideMenuExplanation()">
Right-click to add comments and annotations </div>
<div ng-show="ComputerAnalysis.showUpgradeAnalysis && ComputerAnalysis.auto" class="upgrade-control-group ng-hide">
<a class="btn btn-upgrade-analysis" title="Unlock Unlimited Analysis" href="www.chess.com/membership?c=computer-analysis" target="_blank">Unlock Unlimited Analysis</a>
</div>
</div>

</div>
</div>

<div id="openingsTab" ng-show="tab.selected == 'openings'" class="openings tabContainer flex ng-hide">
<div class="openings-table">
<div class="section-wrapper openings-wrapper">
<div class="opening-description header-clickable">
<h1 class="section-clickable">
<a ng-href="" target="_blank">

</a>
</h1>

<div class="opening-move-list">

</div>
</div>

<ul class="opening-stats" ng-show="opening.stats">
<li class="white ng-hide" ng-show="opening.stats.whiteWon > 0">
<span style="width: %;" ng-bind="(opening.stats.whiteWon|number:1) + '%'" ng-class="opening.stats.whiteWon < 20 ? 'hide-text' : ''" title="%">%</span>
<div class="opening-label">White Wins</div>
</li>

<li class="draw ng-hide" ng-show="opening.stats.draw > 0">
<span style="width: %;" ng-bind="(opening.stats.draw|number:1) + '%'" ng-class="opening.stats.draw < 20 ? 'hide-text' : ''" title="0.00%" class="hide-text">0.0%</span>
<div class="opening-label">Draw</div>
</li>

<li class="black ng-hide" ng-show="opening.stats.blackWon > 0">
<span style="width: %;" ng-bind="(opening.stats.blackWon|number:1) + '%'" ng-class="opening.stats.blackWon < 20 ? 'hide-text' : ''" title="%">%</span>
<div class="opening-label">Black Wins</div>
</li>
</ul>
<div ng-show="opening.noOpeningData" class="noOpeningData ng-hide">
There are no games with this position found in the database. </div>
<div ng-show="!opening.stats && !opening.noOpeningData" class="ng-hide">
Loading... </div>
<div ng-show="opening.showUpgrade" class="upgrade-control-group ng-hide">
<h4>Take Your Openings to the Next Level</h4>
Get unlimited access to the Explorer by upgrading your account. Review and play the same winning lines as top grandmasters! <a class="btn btn-upgrade-explorer" title="Unlock Explorer" href="www.chess.com/membership?c=explorer" target="_blank">Unlock Explorer</a>
</div>
</div>
</div>

<div class="openings-table">
<div class="section-header header-clickable ng-hide" ng-hide="opening.noOpeningData || !opening.gamesUrlTitle">
<h3 class="section-clickable">
<a ng-href="" target="_blank">

</a>
</h3>
</div>
</div>

<div class="section-wrapper move-list master-games" ng-hide="opening.noOpeningData" scroll="">
<ul class="unstyled">

</ul>
</div>
</div>

<div id="infoTab" ng-show="tab.selected == 'info'" class="tabContainer flex ng-hide">
<article class="details-control " ng-class="isDetailsOpen ? 'open': ''" scroll="">
<div class="controls">
<input ng-model="info.White" type="text" class="normal-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="White player" tip="White player">
<input ng-model="info.WhiteElo" ng-pattern="/^(?:\d{3,4}|\?)$/" type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="Rating" tip="White ELO">
</div>
<div class="controls">
<input ng-model="info.Black" type="text" class="normal-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="Black player" tip="Black player">
<input ng-model="info.BlackElo" ng-pattern="/^(?:\d{3,4}|\?)$/" type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="Rating" tip="Black ELO">
</div>
<div class="controls">
<div class="select-style">
<select class="chess-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="info.Result" tip="Result">
<option value="*">No result (*)</option>
<option value="1-0">White won (1-0)</option>
<option value="0-1">Black won (0-1)</option>
<option value="1/2-1/2">Draw (1/2-1/2)</option>
</select>
</div>
</div>

<hr>

<div class="controls">
<input ng-model="info.Event" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="Event" tip="Event">
</div>
<div class="controls">
<input ng-model="info.Site" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty" placeholder="Event location" tip="Event location">
</div>

<div class="controls">
<input type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="Round" tip="Round" ng-model="info.Round" ng-pattern="/^\d+$/">
<input type="text" class="short-width ng-pristine ng-untouched ng-valid ng-empty ng-valid-pattern" placeholder="ECO" tip="ECO" ng-model="info.ECO" ng-pattern="/^[A-E]\d{1,2}[a-z]?$/">
<span class="calendar-wrapper">
<input type="text" class="date-time ng-pristine ng-untouched ng-valid ng-empty ng-valid-date" placeholder="Date" tip="Date" datepicker-popup="yyyy.MM.dd" ng-model="info.Date" is-open="calendarOpen" close-text="Close">
<span class="input-group-btn white">
<button type="button" class="btn btn-default" ng-click="openCalendar($event)">
<i class="icon-calendar"></i>
</button>
</span>
</span>
</div>
</article>

</div>

<div id="shareTab" ng-show="tab.selected == 'share'" class="tabContainer flex ng-hide">
<article class="details-control" scroll="" outer-scroll="scrollOuter">
<form class="form-horizontal ng-pristine ng-valid">
<div class="form-group">
<div class="col-md-12">
<label for="diagram_url">URL</label>
<input select-on-click="" id="diagram_url" ng-model="diagramURL" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty" spellcheck="false">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label for="embed_url">Embed</label>
<input select-on-click="" id="embed_url" ng-model="embedUrl" type="text" class="input-full-width ng-pristine ng-untouched ng-valid ng-empty" spellcheck="false">
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label">Board</label>
<div class="col-md-8">
<div class="select-style">
<select class="chess-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="setup.colorScheme" ng-change="changeBoard(setup.colorScheme)" append-to-body="true" ng-options="colorScheme.name for colorScheme in colorSchemes track by colorScheme.code"><option label="8-Bit" value="8_bit">8-Bit</option><option label="Bases" value="bases">Bases</option><option label="Blue" value="blue">Blue</option><option label="Brown" value="brown">Brown</option><option label="Bubblegum" value="bubblegum">Bubblegum</option><option label="Burled Wood" value="burled_wood">Burled Wood</option><option label="Dark Wood" value="dark_wood">Dark Wood</option><option label="Dash" value="dash">Dash</option><option label="Glass" value="glass">Glass</option><option label="Graffiti" value="graffiti">Graffiti</option><option label="Green" value="green">Green</option><option label="Icy Sea" value="icy_sea">Icy Sea</option><option label="Light" value="light">Light</option><option label="Lolz" value="lolz">Lolz</option><option label="Marble" value="marble">Marble</option><option label="Metal" value="metal" selected="selected">Metal</option><option label="Neon" value="neon">Neon</option><option label="Newspaper" value="newspaper">Newspaper</option><option label="Orange" value="orange">Orange</option><option label="Overlay" value="overlay">Overlay</option><option label="Parchment" value="parchment">Parchment</option><option label="Purple" value="purple">Purple</option><option label="Red" value="red">Red</option><option label="Sand" value="sand">Sand</option><option label="Sky" value="sky">Sky</option><option label="Stone" value="stone">Stone</option><option label="Tan" value="tan">Tan</option><option label="Tournament" value="tournament">Tournament</option><option label="Translucent" value="translucent">Translucent</option><option label="Walnut" value="walnut">Walnut</option></select>
</div>
</div>
</div>

<div class="form-group">
<label class="col-md-4 control-label">Pieces</label>
<div class="col-md-8">
<div class="select-style">
<select class="chess-select ng-pristine ng-untouched ng-valid ng-not-empty" ng-model="setup.pieceStyle" ng-change="changePieces(setup.pieceStyle)" append-to-body="true" ng-options="pieceStyle.name for pieceStyle in pieceStyles track by pieceStyle.code"><option label="8-Bit" value="8_bit" selected="selected">8-Bit</option><option label="Alpha" value="alpha">Alpha</option><option label="Bases" value="bases">Bases</option><option label="Blindfold" value="blindfold">Blindfold</option><option label="Book" value="book">Book</option><option label="Bubblegum" value="bubblegum">Bubblegum</option><option label="Cases" value="cases">Cases</option><option label="Classic" value="classic" selected="selected">Classic</option><option label="Club" value="club">Club</option><option label="Condal" value="condal">Condal</option><option label="Dash" value="dash">Dash</option><option label="Game Room" value="game_room">Game Room</option><option label="Glass" value="glass">Glass</option><option label="Gothic" value="gothic">Gothic</option><option label="Graffiti" value="graffiti">Graffiti</option><option label="Icy Sea" value="icy_sea">Icy Sea</option><option label="Light" value="light">Light</option><option label="Lolz" value="lolz">Lolz</option><option label="Marble" value="marble">Marble</option><option label="Maya" value="maya">Maya</option><option label="Metal" value="metal">Metal</option><option label="Modern" value="modern2">Modern</option><option label="Nature" value="nature">Nature</option><option label="Neon" value="neon">Neon</option><option label="Neo" value="neo">Neo</option><option label="Neo-Wood" value="neo_wood">Neo-Wood</option><option label="Newspaper" value="newspaper">Newspaper</option><option label="Ocean" value="ocean">Ocean</option><option label="Sky" value="sky">Sky</option><option label="Space" value="space">Space</option><option label="Tigers" value="tigers">Tigers</option><option label="Tournament" value="tournament">Tournament</option><option label="Vintage" value="vintage">Vintage</option><option label="Wood" value="wood">Wood</option><option label="3D - Wood" value="3dwood">3D - Wood</option><option label="3D - Staunton" value="3d_staunton">3D - Staunton</option><option label="3D - Plastic" value="3dplastic">3D - Plastic</option><option label="3D - ChessKid" value="3dchesskid">3D - ChessKid</option></select>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<label class="checkbox-inline" for="Coordinates">
<input type="checkbox" id="Coordinates" ng-model="setup.boardCoords" ng-checked="setup.boardCoords" ng-change="changeShowCoordinates(setup.boardCoords)" class="ng-pristine ng-untouched ng-valid ng-not-empty">Coordinates </label>
<label class="checkbox-inline" for="isPuzzle">
<input type="checkbox" id="isPuzzle" ng-model="isPuzzle" ng-checked="isPuzzle" ng-change="changeIsPuzzle(isPuzzle)" class="ng-pristine ng-untouched ng-valid ng-empty">Puzzle </label>
</div>
</div>
</form>

<hr class="openingHR">

<p class="diagramExplanation"></p>
<p>
<div id="mceu_0" class="mce-tinymce mce-container mce-panel" hidefocus="1" tabindex="-1" role="application" style="visibility: hidden; border-width: 1px;"><div id="mceu_0-body" class="mce-container-body mce-stack-layout"><div id="mceu_1" class="mce-edit-area mce-container mce-panel mce-stack-layout-item mce-first" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><iframe id="diagram_ifr" frameborder="0" allowtransparency="true" title="Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help" src='javascript:""' style="width: 100%; height: 220px; display: block;"></iframe></div><div id="mceu_2" class="mce-statusbar mce-container mce-panel mce-stack-layout-item mce-last" hidefocus="1" tabindex="-1" role="group" style="border-width: 1px 0px 0px;"><div id="mceu_2-body" class="mce-container-body mce-flow-layout"><div id="mceu_3" class="mce-path mce-flow-layout-item mce-first"><div role="button" class="mce-path-item mce-last" data-index="0" tabindex="-1" id="mceu_3-0" aria-level="0">p</div></div><div id="mceu_4" class="mce-flow-