.hundredchart h1
	{
		font-size:15px;
		border:none;
		line-height:15px;
		padding:0px;
		margin:5px 5px;
		
	}
	
	.hundredchart .toggle-button
	{
		margin-right:5px;
		padding:0px 5px;
		border-radius:5px;
		height:38px;
	}
	
	.hundredchart .pattern.disabled .toggle-button
	{
		background-color:#ddd;
		border-color:#ccc;
	}
	
	.hundredchart .add-pattern-button
	{
		float:right;
	}
	
	.hundredchart .reset-button
	{
		float:right;
		background-color:/*red*/#DB7662;
		border-color:/*dark-red*/#AE5E4E;
	}
	
	.hundredchart.tableschart.static .toolbox
	{
		display:none;
	}
	
	.hundredchart.tableschart .toolbox
	{
		width:600px;
		margin-left:0px;
		margin-top:10px;
	}
	
	.hundredchart.static .toolbox
	{
		display:none;
	}
	
	.hundredchart.static .cell
	{
		cursor:auto;
		pointer-events:none;
	}
	
	
	.hundredchart .toolbox
	{
		width:450px;
		//height:310px;
		background-color:#eee;
		display:inline-block;
		margin-left:10px;
		vertical-align:top;
		padding:5px;
		border-radius:5px;
		border-bottom:2px solid #ccc;
	}

	.hundredchart .tally-board
	{
		position:absolute;
		top:30px;
		right:10px;
		width:200px;
		height:40px;
	}
	
	.hundredchart svg line
	{
		stroke:/*blue*/#58BAF0 !important;
	}
	
	
	.hundredchart .palette
	{
		padding:2px;
		background-color:white;
		line-height:0px;
		border-radius:5px;
		position:relative;
	}

	.hundredchart .swatch
	{
		display:inline-block;
		width:36px;
		height:36px;
		background-color:#fff;
		margin:0px;
		border:2px solid #fff;
		border-radius:5px;
		cursor:pointer;
	}
	
	.hundredchart .dropdown-swatch
	{
		width:26px;
		height:26px;
		margin:0px;	
		background-size:26px 26px;
	}
	

	.hundredchart .swatch.selected
	{
		border:2px solid /*blue*/#58BAF0;
		background-color:/*blue*/#58BAF0;
	}
	
	.hundredchart .eraser{ background-image:url('../../../bin/img/icon-eraser.png'); }
	
	.hundredchart .type1{ background-image:url('../../../bin/img/cell1.png'); }
	.hundredchart .type2{ background-image:url('../../../bin/img/cell2.png'); }
	.hundredchart .type3{ background-image:url('../../../bin/img/cell3.png'); }
	
	/*cell background combinations
	NOTE: cell backgrounds are declared from top to bottom layer*/
	.hundredchart .type1.type2{ background-image:url('../../../bin/img/cell2.png'), url('../../../bin/img/cell1.png'); }
	.hundredchart .type1.type3{ background-image:url('../../../bin/img/cell3.png'), url('../../../bin/img/cell1.png'); }
	.hundredchart .type2.type3{ background-image:url('../../../bin/img/cell3.png'), url('../../../bin/img/cell2.png'); }
	.hundredchart .type1.type2.type3{ background-image:url('../../../bin/img/cell3.png'), url('../../../bin/img/cell2.png'), url('../../../bin/img/cell1.png'); }
	
	.hundredchart .patterns
	{
		margin-bottom:5px;
	}
	
	.hundredchart .patterns .pattern
	{
		background-color:white;
		padding:5px;
		border-radius:5px;
		
		margin-top:5px;
		position:relative;
	}
	
	.hundredchart .patterns .pattern
	{
		
	}
	
	.hundredchart .patterns .pattern.preset .delete-button, .hundredchart .patterns .pattern.preset svg
	{
		display:none;
	}
	
	.hundredchart .patterns .pattern.preset .drop-down-wrapper, .hundredchart .patterns .pattern.preset .input-wrapper
	{
		pointer-events:none;
	}
	
	.hundredchart .patterns .pattern .delete-button
	{
		float:right;
		background-color:/*red*/#DB7662;
		border-color:/*dark-red*/#AE5E4E;
		border-radius:5px;
		width:20px;
		height:20px;
		padding:0px 5px;
	}
	
	.hundredchart .chart
	{
		display:inline-block;
		border-left:1px solid #ddd;
		border-bottom:2px solid #bbb;
		vertical-align:top;
		border-radius:5px;
		overflow:hidden;
	}
	
	.hundredchart .cell.highlight
	{
		background-color:/*blue*/#58BAF0;
	}
	
	.hundredchart .cell.row-shade
	{
		box-shadow:inset 0px 2px /*blue*/#58BAF0, inset 0px -2px /*blue*/#58BAF0;
	}
	
	.hundredchart .cell.col-shade
	{
		box-shadow:inset 2px 0px /*blue*/#58BAF0, inset -2px 0px /*blue*/#58BAF0;
	}
	
	.hundredchart .cell.col-shade.row-shade
	{
		background-color:/*blue*/#58BAF0;
	}
	
	.hundredchart .cell.col-0, .hundredchart .cell.row-0
	{
		background-color:/*pale-pink*/#F3D6E9;
	}
	
	.hundredchart .cell.col-0.row-shade, .hundredchart .cell.row-0.col-shade
	{
		background-color:/*pale-dark-pink*/#EBBBDA;
	}
	
	.hundredchart .cell
	{
		width:36px;
		height:32px;
		display:inline-block;
		text-align:center;
		border-right:1px solid #ddd;
		border-top:1px solid #ddd;
		cursor:pointer;
		padding-top:4px;
		background-size:36px 36px;
	}