@mainFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;
@backgroundGreen: #90AD3C;
@greenButton: #90AD3C;
@greenButtonHover: #485339;
@orangeButton: #373737;
@orangeButtonHover: #6E6E6E;
@headerHeight: 40px;
@setupButtonWidth: 150px;
@trainingManualNav: 160px;
@tooltipButtonSize: 20px;
@trainingmanualheight: 365px;

.button (@color; @hoverColor) {
	line-height: 1em;
	padding: 6px 12px;
	border-radius: 4px;
	cursor: pointer;
	color: #fff;
	font-weight: bold;
	background: @color;

	&:hover,
	&.active {
		background: @hoverColor;
	}
}

body {
	font-family: @mainFontFamily;
	font-size: 14px;
}

.training-manual {
	width: 90%;
	margin: 20px auto;
	border: 2px solid @backgroundGreen;
	border-radius: 7px;

	.training-manual-header {
		height: @headerHeight;
		padding: 0 4px;
		overflow: hidden;
		background-color: @backgroundGreen;
		vertical-align: middle;

		h1 {
			margin: 0 (@setupButtonWidth + 8px) 0 0;
			color: #fff;
			line-height: @headerHeight;
			text-align: center;
			font-size: 1.75em;
			font-weight: bold;
		}

		button {
			float: right;
			margin: 5px;
			width: @setupButtonWidth;
			border: 1px solid #000;
			font-size: 14px;
			.button (@orangeButton; @orangeButtonHover);
		}
	}

	.training-manual-wrapper {
		padding: 8px;

		.training-manual-wrapper-inner {
			height: @trainingmanualheight;
			overflow: hidden;
			background-color: #ffffff;
			border: 1px solid #ffffff;
			border-radius: 4px;
			position: relative;
		}


		.training-manual-nav {
			width: @trainingManualNav;
			padding: 2px;
			float: left;

			ul {
				display: inline-block;
				position: relative;
				vertical-align: middle;
				padding: 0;
				margin: 0;

				li {
					list-style: none;
					margin-top: 2px;

					&:first-child {
						margin-top: 0;
					}

					button {
						border: 0;
						.button (@greenButton; @greenButtonHover);
						width: 165px;
						padding: 6px 0;
						font-size: 14px;
					}
				}
			}
		}

		.training-manual-tabs {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: @trainingManualNav + 10px;

			.training-manual-tab {
				display: none;
				position: absolute;
				top: 4px;
				right: 4px;
				bottom: 4px;
				left: 4px;
				overflow: auto;
				background-color: #fff;
				border: 1px solid #ccc;
				border-radius: 4px;
				padding: 4px;

				&.active {
					display: block;
				}

				h2,
				p {
					margin: 0;
					text-align: center;
				}

				h2 {
					font-size: 1.65em;
					color: @backgroundGreen;
				}

				p.comment {
					font-size: .921em;
					font-style: italic;
				}

				.training-list {
					margin-top: 8px;

					li {
						padding: 4px;
						overflow: hidden;

						button {
							position: relative;
							float: left;
							width: @tooltipButtonSize;
							height: @tooltipButtonSize;
							line-height: @tooltipButtonSize;
							border: 1px solid #999;
							border-radius: 100%;
							box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.5);
							padding: 0;
							background-color: @orangeButton;
							font-size: 1em;
							cursor: pointer;

							&:hover {
								background-color: @orangeButtonHover;
							}

							span {
								position: absolute;
								top: 3px;
								left: 3px;
								width: @tooltipButtonSize * .5;
								height: @tooltipButtonSize * .5;
								line-height: @tooltipButtonSize * .5;
								border: 1px solid #ccc;
								border-radius: 100%;
								box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 1);
								background-color: #fff;
								text-align: center;
								font-family: Georgia, serif;
								font-size: .75em;
								font-style: italic;
							}
						}

						a {
							float: left;
							line-height: @tooltipButtonSize;
							margin-left: 8px;
							color: @orangeButton;
							font-size: 1.75em;
							font-weight: bold;
							text-decoration: none;
						}
					}
				}

				&#startPage {
					h2,
					p {
						padding-top: 5%;
					}

					p {
						font-size: 1.333em;
					}
				}
			}
		}
	}
}

.ui-dialog .ui-dialog-content {
	padding: .5em 0;
}

.ui-tooltip,
.arrow:after {
	background: @backgroundGreen;
	border: 3px solid #fff !important;
}

.ui-tooltip {
	padding: 8px 4px;
	border-radius: 4px 4px 0 4px;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	box-shadow: 0 0 3px #000;
}

.ui-widget-header {
	background: none no-repeat 0 0 @backgroundGreen;
	border: 0;
	font-family: @mainFontFamily;
}

.arrow {
	width: 10px;
	height: 10px;
	overflow: hidden;
	position: absolute;
	right: 0;
	margin-right: -10px;
	bottom: -3px;
	border-bottom: 3px solid #fff;
}

.arrow.top {
	top: 0;
	bottom: auto;
}

.arrow.left {
	left: 0;
}

.arrow:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -20px;
	width: 25px;
	height: 25px;
	box-shadow: 6px 5px 9px -9px black;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	tranform: rotate(45deg);
}

.arrow.top:after {
	bottom: -20px;
	top: auto;
}