$single-column-max-width: 750px;
$cell-width: 300px;

$theme-color: #2781ce;
$white: rgb(252, 252, 252);
$black: #292929;

$pale-grey: #DEDEDE;
$mid-grey: rgb(165, 165, 165);
$grey: #A6A6A6;

// All borrowed from CertSimple
$dark-blue: #1e5799;
$mid-blue: #2781ce;
$light-blue: #7db9e8;
$sky-gradient: linear-gradient(to bottom, $dark-blue 0%, $mid-blue 58%, $light-blue 100%);

$fonts: "Open Sans", "Segoe UI", "sans-serif";

/* apply a natural box layout model to all elements, but allowing components to change */
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

body {
	font-family: $fonts;
	color: $black;
	padding: 0;
	margin: 0;
	background-color: white;
}

a {
	color: $theme-color;
	&:hover, &:active, &:visited {
		color: $theme-color;
	}
}

p {
	font-family: $fonts;
	margin: 6px 0;
}

h1, h2, h3 {
	font-family: $fonts;
	font-weight: 400;
	margin: 0;
	padding: 12px 0;
}

th img {
	max-height: 40px;
}

header {
	background: $sky-gradient;
	color: white;
	display:flex;
	flex-direction: row;
	align-items: center;
	.intro {
		max-width: $single-column-max-width;
		padding: 24px;
		margin: 0 auto;
		text-align: center;
		h1 {
			font-weight: 100;
			color: white;
		}
		a {
			text-decoration: underline;
			&:hover, &:active, &:visited {
				color: white;
				text-decoration: underline;
			}
		}
		p {
			font-size: 10pt;
			color: white;
			&.aside {
				color: white;
				text-transform: none;
			}
		}
		.chop-box {
			overflow: hidden;
			position: absolute;
			width: 120px;
			height: 120px;
			top: 0;
			right: 0;



			.edit-me {
				text-align: center;
				color: white;
				width: 250px;
				color: $theme-color;
				background-color: white;
				transform: rotate(45deg);
				position: absolute;
				top: 30px;
				right: -70px;
				padding: 3px;
				text-decoration: none;
				font-weight: 400;
			}
		}
		a.logo {
			text-decoration: none;
			h1 {
				padding: 12px;
				font-size: 24pt;
				img {
					height: 20px;
					padding-right: 6px;
				}
				small {
					font-weight: 400;
					display: block;
					font-size: 12px;
					text-transform: uppercase;
					letter-spacing: 0.1rem;
				}
			}
		}

	}
}

/* See http://projectcerbera.com/web/articles/code-in-pre#style */
code {
	white-space: pre-wrap;
}

.enable-operating-systems {
	padding: 12px;
	text-align: center;
	img {
		cursor: pointer;
		padding: 3px;
		margin-right: 20px;
		height: 40px;
		width: 100px;
		opacity: 0.4;
		&.enabled {
			border-radius: 3px;
			border: 1px solid $theme-color;
			opacity: 1.0;
		}
	}
}

.aside {
	color: $black;
	font-weight: 400;
	font-size: 10pt;
}

.commands {
	max-width: 100%;
	overflow-x: auto;
	h2 {
		padding: 12px;
	}
}

// Technique from: https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css
table {
	margin: 12px;
	padding: 0;
	border-collapse: collapse;
	border-spacing: 0;
	tr {
		border-bottom: 1px solid $black;
	}
	th, td {
		padding: 10px;
		text-align: center;
		// min-width and max-width are required, even despite width setting
		//  - tables are magic.
		min-width: $cell-width;
		max-width: 400px;
		width: $cell-width;
		padding: 10px;
		text-align: center;
	}
	tbody {
		// Only for headers inside tbody
		td, th {
			border-left: 1px solid $black;
			border-right: 1px solid $black;
		}
	}
	td {

		// References
		a {
			float: right;
			display: block;
			text-transform: uppercase;
			text-decoration: none;
			color: $mid-grey;
			font-size: 8pt;
			&:hover, &:active, &:visited {
				color: $mid-grey;
			}
		}
	}
	th {
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: 1px;
	}
}
@media screen and (max-width: $single-column-max-width) {
	.commands {
		padding: 12px;
	}
	table {
		width: 100%;
		margin: 0;
		border: 0;
		thead {
			display: none;
		}
		tr {
			margin-bottom: 10px;
			display: block;
			border-bottom: 1px solid $black;
			th {
				border-top: 1px solid $black;
			}
		}
		th, td {
			display: block;
			width: auto;
			max-width: none;
			min-width: none;
		}
		td {
			text-align: right;
			font-size: 13px;
			border-bottom: 1px dotted $mid-grey;
		}
		td:last-child {
			border-bottom: 0;
		}

		td:before {
			content: attr(data-label);
			float: left;
			text-transform: uppercase;
			font-weight: bold;
		}
	}
}

.notes {
	padding: 12px;
	p {
		font-size: 10pt;
		color: $mid-grey;
	}
}
