/*	Main Style Sheet */


td, th {
	vertical-align: top;
}

/*	Colours & Fonts
 	======================================================================== */

	html {
		--bodyFont: "Source Sans Pro", sans-serif;
		--monoFont: "Source Code Pro", monospace;

		--bodyBackground: #F3F8F8;
		--textColour:		#666666;
		--headingColour:	#003A32;
		--anchorColour:	#0F7F64;
		--bannerText:	white;
		--bannerBackground: #003A32;
		--wrapperColour:white;

		--menuBackground: #BED4E3;
		--menuHereBackground: white;
		--menuExternal: #003A32;
		--menuAnchor: #AD3C2D;
		--menuAnchorHover: white;
		--menuColour: #DDDDDD;
		--menuBorder: #003A32;
		--menuItemBorder: #AAAAAA;
		--menuParagraph:	white;

		--headerGradientTop:		#446B58;
		--headerGradientBottom:	#003A32;
	}

/*	Body
 	======================================================================== */

	html {
		font-family: var(--bodyFont);
		font-size: 1em;
		background-color: var(--bodyBackground);
	}

/*	Most Common Containers
 	======================================================================== */

	p {
		margin: .25em 0em;
		line-height: 1.6;
		color: var(--textColour);
	}

	h1, h2, h3 {
		font-family: var(--bodyFont);
	}

	h2, h3 {
		color: var(--headingColour);
	}

	h2 {
		padding-bottom: .125em;
		border-bottom: 3px solid;
		font-size: 200%;
		margin: 0em 0em .125em 0em;
	}

	h3 {
		margin-bottom: 0px;
		font-size: 150%;
	}

	/*	Anchors	*/

	a {
		text-decoration: none;
		font-weight: bold;
		color: var(--anchorColour);
	}
	a:hover {
		text-decoration: underline;
	}
	a img {
		border: none;
	}

/*	Banner
 	======================================================================== */

	header {
		background: linear-gradient(var(--bannerBackground),bottom,#446B58,#003A32 51%);
	}

	div#banner {
		background-image: url(images/logo.png);
		background-repeat: no-repeat;
		background-position: 666px bottom;

		h1 {
			margin: 0px;
			top: 16px;
			left: 16px;
			font-size: 48px;
			width: 100%;
			position: relative;

			 &>span {
				position: absolute;
				top: 50px;
				left: 4px;
				font-size: 24px;
			}
		}
	}

/*	Contents
 	======================================================================== */

	article {
		background-color: var(--wrapperColour);
	}

/*	Menu
 	======================================================================== */

	/* Menu Side Bar */

	nav {
		position: fixed;
		top: 104px;
		margin-left: 8px;
		padding: 0px !important;
		border: 4px solid var(--menuBorder);
		border-radius: 4px;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.37), 0 6px 18px black;

		img {
			display: block;
		}

		p {
			padding: 0em .75em;
			text-align: left;
			var(--bodyFont);
			line-height: 1.5;
			color: var(--menuParagraph);
		}

		ul {
			list-style: none;
			margin-left: 0px; /* IE only*/
			padding-left: 0px; /* FF only*/
			margin: 0px;
		}

		li {
			border: 1px none var(--menuItemBorder);
			&>a {
				background-color: var(--menuAnchor);
				color: var(--menuColour);
				border-color: var(--menuBorder);
			}
			&>a:hover {
				color: var(--menuAnchorHover);
			}
		}
		li+li {
			border-style: solid none none none;
		}



		li>a,
		li#here span {
			text-decoration: none;
			display: block;
			text-align: left;
			font-size: 120%;
			padding: .5em 1em;
			border: none;
		}

		li>a[href^="http:"] {
			background: var(--menuExternal) url(images/external.png) 154px center no-repeat;
		}

		li#here {

		}
		li#here span {
			background-color: var(--menuHereBackground);
			text-transform: uppercase;
			text-align: right;
		}
	}

/*	Main
 	======================================================================== */

	div#main {
		h2 {
			margin-top: 8px;
		}

		p {
			padding: .5em;
			text-align: justify;
		}

		p:hover {
			background-color: #eee;
		}

		#mainimage {
			float: left;
			margin: .5em 1em .125em 0em;
			border: 4px solid rgb(62, 99, 125);
			padding: 4px;
		}
	}

/*	Secondary
 	======================================================================== */

	div#secondary {
		/* font-family: times, "times new roman", serif; */
	}

	div#secondary p {
		text-align: left;
		font-size: 12px;
		line-height: 1.5;
	}

	.code {
		font-family: monospace;
		font-weight: bold;
	}

/*	Footer
 	======================================================================== */

	div#footer p {
		padding: .5em 1.5em;
	}

	#footer {
		background-color: rgb(62, 99, 125);
		background-color: var(--bannerBackground);
		color: white;
	}

	div#footer p {
		color: white;
	}

/*	Training
 	======================================================================== */

	ul#techniques {
		color: var(--textColour);
		list-style-type: square;
		list-style-position: inside;
		margin: 0px;
		padding: 0px;
		margin-left: 8px;
		padding-left: 8px;
	}

	ul#techniques li {
		margin: 4px 0px;
	}

	ul#outline {
		color: var(--textColour);
		list-style-type: square;
		list-style-position: inside;
		margin: 0px;
		padding: 0px;
		margin-left: 8px;
		padding-left: 8px;
		cursor: default;
	}

	ul#outline li {
		margin: 4px 0px;
	}

/*	Miscellaneous
 	======================================================================== */


	/*	Popup Notes */
	span.note {
		position: relative;
		border: 1px dotted;
		border-style: none none dotted none;
	}
	span.note:hover {

	}
	span.note:hover:after {
		display: block;
		content: attr(title);
		position: absolute;
		background: rgba(208,208,208,.9);
		border: 2px solid #666;
		border-radius: 4px;
		left: -.5em;
		bottom: 1.5em;
		padding: .25em .5em;
		white-space: nowrap;
	}

	/*	Details List */

	dl#details {
		qwidth: 28em;
		color: var(--textColour);
		margin: .5em .5em;
		line-height: 1.6;
	}

	dl#details dt {
		font-weight: bold;
		font-size: 125%;
		border: thin black;
		border-style: none none solid none;
		padding-bottom: .125em;
		margin-top: .5em;
	}

	dl#details dd {
		margin: .5em 0em;
	}

/*	Float Classes */

	.floatleft {
		float: left;
	}
	.floatright {
		float: right;
	}

	.clear {
		clear: both;
	}

	h2+p, h2+table {
		margin-top: 0px;
	}