html {
	overflow-y: scroll
}

body {
	margin: 0 auto;
	padding: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
	font-family: "Ubuntu", "Trebuchet MS", sans-serif;
	font-weight: 300;
	font-size: 12pt;
	color: #fff;
	overflow: hidden
}

body.black {
	background-color: #222
}

.modal-title, .modal-body {
	color: #212529;
}

.box {
	border-radius: 5px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	color: #fff
}

.clearfix {
	clear: both
}

hr {
	border: none;
	border-bottom: solid 2px rgba(255, 255, 255, 0.5)
}

h1,h2,h3,h4,h5,h6,strong,dfn {
	font-weight: 400
}

strong,dfn {
	font-weight: 400;
	font-style: normal;
	color: #cf0
}

h1,h2,h3 {
	font-weight: 300
}

h1 {
	margin-top: 1em
}

a {
	color: #aef;
	-webkit-transition: color 250ms ease-in-out;
	transition: color 250ms ease-in-out
}

a:hover {
	color: #c4f3ff
}

canvas {
	border: solid 2px rgba(0, 0, 0, 0.35);
	border-radius: 5px;
	background-color: #fff;
	background-clip: padding-box
}

img {
	border: none 0
}

ul {
	list-style-type: square
}

input[type='text'],input[type='search'],input[type='password'],input[type='submit'],textarea,div.CodeMirror,button,.button,label
	{
	font-size: 10pt;
	vertical-align: middle
}

label {
	padding: 0
}

input[type='text'],input[type='search'],input[type='password'],input[type='button'],input[type='submit'],button,.button,a.button-primary,textarea,div.CodeMirror
	{
	margin: 2px 0;
	padding: 5px 8px;
	border: solid 1px rgba(0, 0, 0, 0.35);
	border-radius: 3px;
	background-color: #fff;
	background-clip: padding-box;
	font-weight: 300;
	font-family: "Ubuntu", "Trebuchet MS", sans-serif;
	color: #000;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
	-webkit-transition-property: padding, border-color, background-color,
		color, box-shadow;
	transition-property: padding, border-color, background-color, color,
		box-shadow
}

input[type='text']:focus,div.CodeMirror-focused,input[type='search']:focus,input[type='password']:focus,textarea:focus
	{
	outline: none;
	border-color: #f63;
	background-color: #ffe;
	box-shadow: 0 0 5px 1px #f96
}

input[type='text'][disabled],input[type='search'][disabled],input[type='password'][disabled],textarea[disabled]
	{
	color: #999
}

input[type='text'].invalid,input[type='search'].invalid,input[type='password'].invalid,textarea.invalid
	{
	background-color: #fee;
	box-shadow: 0 0 5px 2px #c33
}

input[type='text'].transparent,input[type='search'].transparent,input[type='password'].transparent,textarea.transparent
	{
	border-color: transparent;
	background: none;
	color: #fff
}

input[type='text'].transparent:focus,div.transparent.CodeMirror-focused,input[type='search'].transparent:focus,input[type='password'].transparent:focus,textarea.transparent:focus
	{
	border-color: #9cf;
	box-shadow: none
}

div.CodeMirror {
	padding: 0;
	border-radius: 5px;
	line-height: 1.2em;
	font-family: "Oxygen Mono", "Monaco", monospace;
	font-weight: 400
}

textarea {
	border-radius: 3px;
	padding: 5px
}

button,.button,input[type='button'],input[type='submit'],a.button-primary
	{
	-webkit-appearance: none;
	display: inline-block;
	margin: 2px 0;
	border-radius: 3px;
	background-color: #48d;
	background-image: none;
	font-family: "Ubuntu", "Trebuchet MS", sans-serif;
	font-weight: 400;
	color: #fff;
	text-decoration: none
}

button:hover,button:active,button:hover:active,button:focus,.button:hover,.button:active,.button:hover:active,.button:focus,input[type='button']:hover,input[type='button']:active,input[type='button']:hover:active,input[type='button']:focus,input[type='submit']:hover,input[type='submit']:active,input[type='submit']:hover:active,input[type='submit']:focus,a.button-primary:hover,a.button-primary:active,a.button-primary:hover:active,a.button-primary:focus
	{
	color: #fff;
	background-image: none
}

button:hover:active,.button:hover:active,input[type='button']:hover:active,input[type='submit']:hover:active,a.button-primary:hover:active
	{
	background-color: #37c
}

button:focus,.button:focus,input[type='button']:focus,input[type='submit']:focus,a.button-primary:focus
	{
	outline: none;
	border-color: #fff;
	box-shadow: 0 0 3px #fff
}

button::-ms-clear,.button::-ms-clear,input[type='button']::-ms-clear,input[type='submit']::-ms-clear,a.button-primary::-ms-clear
	{
	display: none;
	width: 0;
	height: 0
}

button.green,.button.green,input[type='button'].green,input[type='submit'].green,a.button-primary.green
	{
	background-color: #096
}

button.green:hover:active,.button.green:hover:active,input[type='button'].green:hover:active,input[type='submit'].green:hover:active,a.button-primary.green:hover:active
	{
	background-color: #085
}

button.red,.button.red,input[type='button'].red,input[type='submit'].red,a.button-primary.red
	{
	background-color: #d44
}

button.red:hover:active,.button.red:hover:active,input[type='button'].red:hover:active,input[type='submit'].red:hover:active,a.button-primary.red:hover:active
	{
	background-color: #c33
}

pre,code {
	font-family: "Oxygen Mono", "Monaco", monospace
}

pre {
	padding: 10px 15px;
	border: solid 1px rgba(0, 0, 0, 0.35);
	border-radius: 5px;
	background-color: #fff;
	background-image: url("/projects/resources/images/grid-fg.png");
	background-clip: padding-box;
	font-size: 10pt;
	color: #111;
	overflow-x: auto;
	overflow-y: hidden
}

code,pre,div.CodeMirror {
	font-family: "Oxygen Mono", "Monaco", monospace, "Ubuntu",
		"Trebuchet MS", sans-serif
}

code {
	color: #cf0
}

.ui-slider {
	position: relative;
	width: 100px;
	height: 8px;
	border-radius: 5px
}

.ui-slider.light {
	background-color: #ddd;
	background-color: rgba(255, 255, 255, 0.5)
}

.ui-slider.dark {
	background-color: #222;
	background-color: rgba(0, 0, 0, 0.5)
}

.ui-slider-handle {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	margin-left: -6px;
	border-radius: 5px;
	background: #fff
}

table {
	border: solid 1px rgba(0, 0, 0, 0.4);
	border-spacing: 0
}

th {
	background-color: rgba(0, 0, 0, 0.3);
	font-weight: 400
}

tr {
	background-color: rgba(0, 0, 0, 0.1)
}

tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.2)
}

td,th {
	padding: 8px 20px
}

div.MathJax {
	color: #fff
}

#MathJax_Message {
	display: none
}

span.MathJax_Preview {
	color: rgba(255, 255, 255, 0.5)
}

span.MathJax_Error {
	color: #f63
}

a.nav {
	position: absolute;
	top: 5px;
	left: 10px;
	z-index: 5;
	color: #fff;
	color: rgba(255, 255, 255, 0.75);
	font-size: 11pt;
	text-decoration: none;
	-webkit-transition: color 250ms ease-in-out;
	transition: color 250ms ease-in-out
}

a.nav:hover {
	color: #fff
}

a.author {
	left: auto;
	right: 10px;
	text-transform: none
}

a.author .by {
	position: relative;
	top: -1px;
	left: -2px;
	font-size: 8pt;
	font-style: italic
}

@media print {
	hr {
		border-bottom: solid 1px #000
	}
	* {
		color: #000 !important
	}
}

div.box {
	border-bottom: thin solid white;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

#app {
	display: inline-block;
	margin: auto;
	padding: 0;
	overflow: hidden
}

#controls,#tools,#colors,#stroke-container {
	margin: 0 5px;
	display: inline-block;
	vertical-align: middle;
	color: white;
}

a.author {
	position: static;
	margin: 0
}

h1 {
	margin: 0
}

#canvas {
	float: left;
	margin: 0;
	border-width: 0;
	border-radius: 0
}

#canvas:active+#sidebar {
	pointer-events: none
}

#sidebar {
	float: left;
	min-height: 700px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.5);
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
	-webkit-transition-property: opacity;
	transition-property: opacity
}

#logBar {
	float: left;
	min-width: 300px;
	min-height: 700px;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: lightgray;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;
	-webkit-transition-property: opacity;
	transition-property: opacity
}

#sidebar * {
	white-space: normal
}

#controls {
	margin-right: 0;
	font-size: 0
}

#controls button:focus {
	box-shadow: none
}

#tools img {
	width: 50px;
	height: 20px;
	margin: 1px;
	padding: 0;
	border-radius: 0;
	background-clip: border-box;
	font-size: 9pt
}

#tools {
	margin: 0px;
	font-size: 0;
	width: 350px;
}

#singles img {
	width: 50px;
	margin: 1px;
	padding: 0;
	border-radius: 0;
	background-clip: border-box;
	font-size: 9pt
}

#singles {
	margin: 0px;
	font-size: 0;
	width: 350px;
}

#players {
	margin: 0px;
	font-size: 0;
	width: 350px;
}

.player, .singlePointNoRotation {
	width: 40px;
	background-color: white;
	border:1px solid white;
}

.player.chosen, .singlePointNoRotation.chosen {
	border:1px solid red;
}

.chosenField {
	border:2px solid white;
}

.tool {
	-webkit-transition-property: border-color, background-color, color,
		box-shadow;
	transition-property: border-color, background-color, color, box-shadow
}

.tool.chosen {
	color: #36c
}

.tool.chosen,.tool.chosen:hover,.tool.chosen:hover:active,.tool.chosen:focus {
	background-color: #fff
}

#Hints {
	max-width: 350px;
	text-align: left;
}

#colors {
	width: 210px;
	font-size: 0;
	overflow: hidden;
	border: thin solid white;
}

.color {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-clip: padding-box;
	white-space: normal;
	cursor: pointer;
}

#box {
	display: inline-block;
	width: 60px;
	height: 60px
}

#stroke {
	width: 20px;
	height: 20px;
	background-color: white;
	background-clip: padding-box;
	border: solid 1px rgba(0, 0, 0, 0.5);
	border-radius: 50%
}

#slider {
	margin-top: 20px
}