/*
* Stylesheet for SVG Spinner.
* Copyright (c) 2014 P Schlup Maths Technology Ltd.
*/

.heading {
	font-size: 1.5em;
	font-weight: bold;
}

.spinner {
	white-space: nowrap;
}

	.spinner > div {
		white-space: normal;
	}

/*
* Spinner SVG styles.
*/

.spinnerSvg,
.spinnerResults {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.spinnerSvg {
	width: 300px;
	text-align: center;
}

	.spinnerSvg path.wedge {
		fill: white;
		stroke: black;
		stroke-width: 1;
	}

		.spinnerSvg path.wedge[highlight-wedge="true"] {
			stroke-width: 4;
		}
	
		.spinner[design-mode="true"] .spinnerSvg path.wedge {
			cursor: pointer;
		}
	
			.spinner[design-mode="true"] .spinnerSvg path.wedge:hover {
				stroke-width: 4;
			}
		
	.spinnerSvg .wedgeButtons {
		text-align: center;
	}
	
		.spinnerSvg .wedgeButtons button {
			margin: 0.2em 0;
		}

/*
* Crayons
*/

table.crayonsTable {
	width: 100%;
}

	table.crayonsTable tr {
		height: 7em;
		vertical-align: bottom;
	}

.crayon {
	margin: 0.1em;
	float: left;
	vertical-align: bottom;
}

	.crayon .crayonTip {
		position: relative;
		top: 0.1em;
		width: 60%;
		margin: 0 20%;
		height: 1em;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
	}

	.crayon .crayonBody {
		position: relative;
		width: 2em;
		height: 4em;
		border-radius: 2px;
		overflow: hidden;
	}

		.crayon[active-crayon="true"] .crayonBody {
			height: 5.3em;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
		}
	
		.crayon .crayonBody .crayonBodyGlaze {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to right, rgba(0,0,0,0.1) 0%,rgba(255, 255, 255, 0.2) 30%, rgba(0, 0, 0, 0.4) 100%);
		}

	.spinner[design-mode="true"] .crayon {
		cursor: pointer;
	}

		.spinner[design-mode="true"] .crayon:hover .crayonBody {
			height: 4.2em;
		}

		.spinner[design-mode="true"] .crayon[active-crayon="true"]:hover .crayonBody {
			height: 5.5em;
		}

/*
* Graph
*/

.graphContainer {
	position: relative;
	margin: 10px 10px 30px 0;
	padding: 0;
	height: 200px;
	white-space: nowrap;
}

	.graphContainer .axes {
		position: relative;
		height: 100%;
		display: inline-block;
	}

	.graphContainer .yticks {
		position: relative;
		display: inline-block;
		width: 70px;
		height: 100%;
		vertical-align: top;
	}

		.graphContainer .yticks .tickLabel {
			position: absolute;
			right: 0.2em;
		}
		
			.graphContainer .yticks .tickLabel .label {
				position: relative;
				top: -0.5em;
				padding-right: 0.2em;
			}

			.graphContainer .yticks .tickLabel .tick {
				position: absolute;
				right: -0.5em;
				width: 0.5em;
				border-bottom: 1px solid;
			}

	.graphContainer .xticks {
		position: absolute;
		left: 0;
		bottom: -1.2em;
		width: 100%;
		height: 1.2em;
	}
	
		.graphContainer .xticks .categoryLabel {
			position: relative;
			display: inline-block;
			text-align: center;
		}
		
			.graphContainer .xticks .categoryLabel .tick {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 0.5em;
				margin-right: -1px;
				border-right: 1px solid;
			}
			
			.graphContainer .xticks .categoryLabel:first-child .tick {
				border-left: 1px solid;
			}

	.graphContainer .graph {
		position: relative;
		width: 360px;
		height: 100%;
		border-left: 1px solid;
		border-bottom: 1px solid;
		overflow: hidden;
	}

	.graphContainer[category-count="2"] .graph {
		width: 280px;
	}
	.graphContainer[category-count="3"] .graph {
		width: 420px;
	}
	.graphContainer[category-count="4"] .graph {
		width: 560px;
	}
	.graphContainer[category-count="5"] .graph {
		width: 700px;
	}
	
		.graphContainer .graph .barGroup {
			position: absolute;
			bottom: 0;
			height: 100%;
		}

		.graphContainer .graph .bar {
			position: absolute;
			bottom: 0;
			height: 0;
			margin: -1px;
			border: 1px solid;
			border-bottom: none;
			
			transition: height 1.0s;
			-webkit-transition: height 1.0s;
			-moz-transition: height 1.0s;
		}
		
		
	.graphContainer .buttonsContainer {
		margin: 1em;
	}

	
	.graphContainer .gridLines {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.graphContainer .gridLines .gridLineY {
		position: absolute;
		left: 0;
		width: 100%;
		border-bottom: 1px solid #cacaca	;
	}
	
/*
* Results table.
*/

.tableContainer {
}
	.tableContainer .tableHead {
		background-color: #d9d9d9;
	}

	.tableContainer .tableRow.odd {
		background-color: #f7f7f7;
	}
	
	.tableContainer .tableRow.even {
		background-color: #eaeaea;
	}

	.tableContainer .data {
		text-align: center;
	}

		.tableContainer .tableHead div.label,
		.tableContainer .tableHead div.data {
			font-weight: bold;
			text-align: center;
		}
	
		.tableContainer .tableHead div.label,
		.tableContainer .tableHead div.data,
		.tableContainer .tableRow  div.label,
		.tableContainer .tableRow  div.data {
			display: inline-block;
			vertical-align: middle;
		}
	
	.tableContainer div.tableHead,
	.tableContainer div.tableRow {
		padding: 0.2em;
		white-space: nowrap;
	}
	
	.tableContainer div.label {
		width: 70px;
	}
	
	.tableContainer div.data {
		width: 140px;
	}
	
[design-mode="true"] .graphContainer,
[design-mode="true"] .tableContainer {
	display: none;
}

.spinnerHint {
	position: absolute;
	padding: 1em;
	border: 1px solid;
	background: #FFFBB7;
	border-radius: 12px;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 0 8px rgba(0,0,0,0.5);
}

	.spinnerHint.chooseColor {
		left: 68px;
		top: 418px;
	}

	.spinnerHint.paintWedge {
		display: none;
		left: 170px;
		top: 20px;
	border-bottom-left-radius: 0;
	}
	
	.spinnerHint .arrowUp {
		position: absolute;
		left: 50%;
		margin-left: -16px;
		top: -16px;
		border-bottom: 16px solid;
		border-left: 16px solid transparent;
		border-right: 16px solid transparent;
	}

	.spinnerHint .arrowInnerUp {
		position: absolute;
		left: 50%;
		margin-left: -14px;
		top: -14px;
		border-bottom: 14px solid #FFFBB7;
		border-left: 14px solid transparent;
		border-right: 14px solid transparent;
	}



	.spinnerHint .arrow {
		position: absolute;
		left: -1px;
		bottom: -16px;
		border-top: 16px solid;
		border-left: 16px solid transparent;
		border-right: 16px solid transparent;
	}

	.spinnerHint .arrowInner {
		position: absolute;
		left: 1px;
		bottom: -14px;
		border-top: 14px solid #FFFBB7;
		border-left: 14px solid transparent;
		border-right: 14px solid transparent;
	}


.unsupported {
	width: 80%;
	margin: 2em auto;
	padding: 2em;
	border: 1px solid;
	background: #fffbb7;
	text-align: center;
}