/*
	arty.css
	General styles
	ArtyFishL 2016 Redesign
	Jamie Lievesley (jamie@jamiegl.co.uk)
	8 October 2015 21:15
*/


/*
	COLOUR PALETTE {

	http://www.materialpalette.com/green/red

	Primary: 		#4CAF50;
	Dark primary: 	#388E3C;
	Light Primary: 	#C8E6C9;
	Accent: 		#03A9F4;

	Primary text: 	#212121;
	Secondary text: #727272;
	Divider: 		#B6B6B6;
	Text/Icons: 	#FFFFFF;
	}
*/



/* Animation keyframes. */

@-webkit-keyframes spin {
    from { 	-webkit-transform: rotate(0deg); }
    to { 	-webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {	transform: rotate(0deg);}
    to {	transform: rotate(360deg);}
}

@-webkit-keyframes spin-reverse {
    from { 	-webkit-transform: rotate(360deg); }
    to { 	-webkit-transform: rotate(0deg); }
}
@keyframes spin-reverse {
    from {	transform: rotate(360deg);}
    to {	transform: rotate(0deg);}
}

@-webkit-keyframes overlayBox-expand {
	0% {   -webkit-transform: scale(0.1, 0.1); opacity: 0; }
	25% {  -webkit-transform: scale(0.1, 0.1); opacity: 0; }
	50% {  -webkit-transform: scale(1, 0.1);               }
	100% { -webkit-transform: scale(1, 1);     opacity: 1; }
}
@keyframes overlayBox-expand {
    0% {   transform: scale(0.1, 0.1); opacity: 0; }
	25% {  transform: scale(0.1, 0.1); opacity: 0; }
	50% {  transform: scale(1, 0.1);               }
	100% { transform: scale(1, 1);     opacity: 1; }
}

@-webkit-keyframes nav-spin {
    from { 	-webkit-transform: rotate(180deg); }
    to { 	-webkit-transform: rotate(0deg); }
}
@keyframes nav-spin {
    from {	transform: rotate(180deg);}
    to {	transform: rotate(0deg);}
}

@-webkit-keyframes nav-spin-reverse {
    from { 	-webkit-transform: rotate(-180deg); }
    to { 	-webkit-transform: rotate(0deg); }
}
@keyframes nav-spin-reverse {
    from {	transform: rotate(-180deg);}
    to {	transform: rotate(0deg);}
}

@-webkit-keyframes searchBar-input-expand {
    from { 	width: 0; }
    to { 	width: calc(100vw - 205px); }
}
@keyframes searchBar-input-expand {
    from { 	width: 0; }
    to { 	width: calc(100vw - 190px); }
}

@-webkit-keyframes blackout-nav-mobile-hide {
    0% { 	display: block; opacity: 0.8; }
    99% { 	display: block; opacity: 0;   }
	100% { 	display: none;  opacity: 0;   }
}
@keyframes blackout-nav-mobile-hide {
    0% { 	display: block; opacity: 0.8; }
    99% { 	display: block; opacity: 0;   }
	100% { 	display: none;  opacity: 0;   }
}

@-webkit-keyframes logo-slidein {
    from { 	background-position: 71px -32px;  }
    to { 	background-position: 71px center; }
}
@keyframes logo-slidein {
    from { 	background-position: 71px -32px;  }
    to { 	background-position: 71px center; }
}

@-webkit-keyframes logo-slideout {
	from { 	background-position: 71px center; }
    to { 	background-position: 71px -32px;  }
}
@keyframes logo-slideout {
    from { 	background-position: 71px center; }
    to { 	background-position: 71px -32px;  }
}

/* Loading spinner animations */
@-webkit-keyframes spinner-dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;  }
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;  }
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;  }
}
@keyframes spinner-dash {
	0% {
		stroke-dasharray: 1,200;
		stroke-dashoffset: 0;  }
	50% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -35;  }
	100% {
		stroke-dasharray: 89,200;
		stroke-dashoffset: -124;  }
}
@-webkit-keyframes spinner-colour {
	100%, 0% {
		stroke: #d62d20;  }
	40% {
		stroke: #0057e7;  }
	66% {
		stroke: #008744;  }
	80%, 90% {
		stroke: #ffa700;  }
}
@keyframes spinner-colour {
	100%, 0% {
		stroke: #d62d20;  }
	40% {
		stroke: #0057e7;  }
	66% {
		stroke: #008744;  }
	80%, 90% {
		stroke: #ffa700;  }
}




/*
 FIX SOME DEFAULT THINGS
*/


/* Remove default margins etc as they can confuse things */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Vertically align paragraphs */

p {
	vertical-align: middle;
}

wbr::after {
	content: '\00200B';
}


/*
 SETUP BASIC STUFF
*/


/* Set up some basic stuff for the entire body */

body {
	display: block;
	text-align : left ;
	font-family: Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;
	font-weight: 300;
	color: #000000;
	font-size : 1.0em;
}
/* Preload Images */
body:after{
    display:none;
    /*content: url('./../img/marcus_head.png') url('./../img/jamie_surprise.png');*/
}


/*
 PAGE STYLES
 */

body, #container {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: block;
}
#container {
	background-color: #C8E6C9;
	overflow: hidden;
}

.ellipsisAfter::after {
	content: '\2026';
}


/* Links. */

button.a {
	display: inline;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	font-size: 16px;
	font-weight: 300;
	cursor: pointer;
}
a:not(.nostyle):not(.min),
.a :not(.min) {
	color: #03A9F4;
	text-decoration: none;
	font-weight: 300;
}
a:not(.nostyle):not(.min):not(:hover):link,
a:link .a:not(.min):not(:hover) {
    color: #03A9F4;
}
a:not(.nostyle):not(.min):visited,
a:visited .a:not(.min):not(:hover) {
    color: #03A9F4;
}
a:not(.nostyle):active,
a:active .a:not(:hover) {
    color: #03A9F4;
}
a:not(.nostyle):hover,
.a:hover {
	color: #388E3C !important;
	/*text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #FFFFFF;*/
}
/*
a:not(.nostyle):hover,
.a:hover {
	color: #FFFFFF !important;
	padding: 5px 10px;
	margin-left: -10px;
	margin-right: -10px;
	background-color: #03A9F4;
	z-index: 20;
	border-radius: 5px;
}
*/
a:not(.nostyle).withIcon,
.a.withIcon {
	background-position: left center;
	background-size: auto 100%;
	background-clip: border-box;
	padding-left: 26px;
}




/* Page content */

.test, .hidden, .dev {
	display: none !important;
	z-index: -1;
}

#container {
	overflow: hidden;
}

#container-content {
	position: absolute;
	right: 0;
	top: 56px;
	display: block;
	float: right;
	margin: 0;
	padding: 30px;
	width: calc(100vw - 126px);
	height: calc(100vh - 116px);
	overflow: auto;
	overflow-x: hidden;
	overflow-y: auto;
}
.nonav #container-content {
	width: calc(100vw - 60px);
}

.actionBar.expanded ~ #container-content {
	top: 96px;
	height: calc(100vh - 156px);
}

#nav-controlcb:checked ~ #container-content {
	width: calc(100vw - 10em - 96px);
	-webkit-transition: width 250ms;
	transition: width 250ms;
}
#nav-controlcb:not(:checked) ~ #container-content {
	-webkit-transition: width 250ms;
	transition: width 250ms;
}

#container.container-logged-out              .logged-in,
#container-ajax-content.container-logged-out .logged-in {
	display: none;
}
#container.container-logged-in              .logged-out,
#container-ajax-content.container-logged-in .logged-out {
	display: none;
}

/* Action Bar */

.actionBar {
	display: block;
	overflow: hidden;
	width: 100vw;
	height: 56px;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #4CAF50;
	background-image: url('./../img/logo32.png');
	background-size: 32px 32px;
    background-repeat: no-repeat;
	background-position: 71px center;
}
.actionBar.expanded { /* Background is two layers {top layer that does fading (via js)},{image layer}. */
	height: 176px;
	background-image: none, none;
	background-size: 100% 100%, auto auto;
	background-position: center center, center center;
}
.actionBar.expanded.crop-vertical {
	background-size: 100%, 100%, 100% auto;
}
.actionBar.expanded.crop-horizontal {
	background-size: 100% 100%, auto 176px;
}
.actionBar.expanded.crop-cover {
	background-size: 100% 100%, cover;
}
.actionBar.expanded.crop-stretch {
	background-size: 100% 100%, 100% 100%;
}
.actionBar.logoout {
	-webkit-animation: logo-slideout 250ms linear;
	animation: logo-slideout 250ms linear;
}
.actionBar.logoin {
	-webkit-animation: logo-slidein 250ms linear;
	animation: logo-slidein 250ms linear;
}
.actionBar .hidden {
	display: none;
}
.fullscreen .actionBar {
	position: fixed;
	background-color: transparent;
}

.actionBar-text {
	display: inline-block;
	color: #FFFFFF;
	font-size: 1.5em;
	font-weight: 300;
	max-width: calc(100vw - 174px);
	margin-left: 46px;
	margin-top: calc((56px - 1.5em) / 2);
	height: 1.5em;
	line-height: 1.5em;
	vertical-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-bottom: none;
	/*width: calc(100% - 135px);*/
}
.actionBar.expanded .actionBar-text {
	padding-top: 56px;
	margin-left: 30px;
    font-size: 2.0em;
}
.actionBar.expanded:not(.transform) .actionBar-text {
	-webkit-transition: padding-left 250ms;
	transition: padding-left 250ms;
}
@media screen and (min-width: 501px) {
	#nav-controlcb:checked ~ .actionBar.expanded .actionBar-text {
		padding-left: 150px;
	}
	#nav-controlcb:checked ~ .actionBar.expanded:not(.transform) .actionBar-text {
		-webkit-transition: padding-left 250ms;
		transition: padding-left 250ms;
	}
}

.actionBar-button, .actionBar-button-back, #actionBar-button-nav, nav a {
	display: inline-block;
	float: right;
	height: 36px;
	/*line-height: 36px;*/
	padding: 0 5px;
	margin: 10px;
	border: none;
	color: #FFFFFF;
	font-size: 1.0em;
	background-color: transparent;
	text-overflow: ellipsis;
	border-radius: 2px;
}
.actionBar-button:first-of-type {
	margin-right: 15px;
}
.actionBar-button:hover, .actionBar-button-back:hover, #actionBar-button-nav:hover, nav a:hover {
	box-shadow: 0 0 5px #C8E6C9;
	background-color: #03A9F4;
	cursor: pointer;
}
.actionBar-button.withIcon, nav a.withIcon {
	color: #C8E6C9;
	padding-left: 36px;
	background-position: 5px center;
}
.actionBar-button.withIcon:hover, nav a.withIcon:hover {
	color: #212121;
}
nav a.withIcon.selected:hover {
	color: #FFFFFF;
}
.actionBar-button.onlyIcon, .actionBar-button-back, #actionBar-button-nav, nav a.onlyIcon {
	width: 36px;
	padding: 0px;
	background-position: center center;
}

#actionBar-button-nav, .actionBar-button-back {
	float: left;
	margin-left: 15px;
	margin-right: 15px;

	-webkit-animation: nav-spin-reverse 250ms linear;
	animation: nav-spin-reverse 250ms linear;
}
#nav-controlcb:checked ~ .actionBar #actionBar-button-nav, #actionBar-button-nav.back {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiBzdHlsZT0id2lkdGg6MjRweDtoZWlnaHQ6MjRweCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNS40MSwxNi41OEwxMC44MywxMkwxNS40MSw3LjQxTDE0LDZMOCwxMkwxNCwxOEwxNS40MSwxNi41OFoiIC8+DQo8L3N2Zz4=");

	-webkit-animation: nav-spin 250ms linear;
	animation: nav-spin 250ms linear;
}
#nav-controlcb:checked ~ .actionBar #actionBar-button-nav:hover, #actionBar-button-nav.back:hover {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIyNHB4IiBzdHlsZT0id2lkdGg6MjRweDtoZWlnaHQ6MjRweCIgdmlld0JveD0iMCAwIDI0IDI0Ij4NCjxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xNS40MSwxNi41OEwxMC44MywxMkwxNS40MSw3LjQxTDE0LDZMOCwxMkwxNCwxOEwxNS40MSwxNi41OFoiIC8+DQo8L3N2Zz4=");
}
#actionBar-button-nav.unback {
	-webkit-animation: nav-spin-reverse 250ms linear !important;
	animation: nav-spin-reverse 250ms linear !important;
}


/* Search bar. */

.searchBar-input {
	display: inline-block;
	color: #212121;
	background-color: #C8E6C9;
	font-size: 1.0em;
	padding: 0.25em 0.5em;
	width: calc(100vw - 190px);
	margin-left: 44px;
	margin-top: calc((56px - 1.75em) / 2);
	vertical-align: center;
	overflow: hidden;
	border: none;

	-webkit-animation: searchBar-input-expand 250ms linear;
	animation: searchBar-input-expand 250ms linear;
	animation-fill-mode: none;
}

.searchBar .actionBar-button:first-of-type {
	margin-right: 10px;
}
.searchBar .actionBar-button:last-of-type {
	margin-right: 15px;
}



/* Navigation drawer. */

#nav-controlcb {
	display: none;
}

nav {
	display: inline-block;
	position: relative;
	float: left;
	height: calc(100vh - 56px);
	width: 66px;
	overflow: hidden;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #4CAF50;
}
nav:hover, #nav-controlcb:checked ~ nav {
	width: calc(10em + 30px);
	-webkit-transition: width 250ms, margin-left 250ms;
	transition: width 250ms, margin-left 250ms;
}
#nav-controlcb:not(:checked) ~ nav:not(:hover) {
	-webkit-transition: width 250ms, margin-left 250ms;
	transition: width 250ms, margin-left 250ms;
	overflow-y: hidden;
}
.actionBar.expanded ~ nav {
	margin-top: -120px;
}
@media screen and (min-width: 501px) {
	.actionBar.expanded ~ nav:not(:hover) {
		background-color: transparent;
		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjUwcHgiIGhlaWdodD0iOTAwcHgiIHN0eWxlPSJ3aWR0aDoyNTBweDtoZWlnaHQ6OTAwcHgiIHZpZXdCb3g9IjAgMCAyNTAgOTAwIj4NCjxyZWN0IGZpbGw9IiM0Q0FGNTAiIHg9IjAiIHk9IjAiIHdpZHRoPSIyNTBweCIgaGVpZ2h0PSI5MDBweCIgLz4NCjwvc3ZnPg==");
		background-position: 0 120px;
		background-repeat: no-repeat;
	}
}

nav .bottom {
	display: block;
	position: absolute;
	bottom: 0;
	background-color: inherit;
}

nav a {
	display: block;
	float: initial;
	margin-left: 15px;
	margin-right: 15px;
	padding-left: 51px !important;
	width: auto;
	line-height: 36px;
	text-decoration: none;
	background-color: inherit;
}
nav:hover a, #nav-controlcb:checked ~ nav a {
	padding-left: 36px !important;
	-webkit-transition: padding-left 250ms;
	transition: padding-left 250ms;
}
nav:not(:hover) a, #nav-controlcb:not(:checked) ~ nav a {
	-webkit-transition: padding-left 250ms;
	transition: padding-left 250ms;
}
nav a.selected {
	background-color: #727272;
}

#blackout-nav-mobile {
	opacity: 0;
}

/* Nav bar toggles visible/hidden on mobile. */
@media screen and (max-width: 500px) {

	.actionBar.expanded .actionBar-text {
		padding-top: 106px;
	}

	#container-content {
		width: 100vw !important;
	}
	.actionBar.expanded ~ #container-content {
		top: 176px;
		height: calc(100vh - 236px);
	}

	#nav-controlcb:checked ~ #blackout-nav-mobile {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		height: 100vh;
		width: 100vw;
		background-color: #000000;
		z-index: 90;
		opacity: 0.8;

		-webkit-transition: opacity 250ms;
		transition: opacity 250ms;
	}
	#nav-controlcb:not(:checked) ~ #blackout-nav-mobile {
		-webkit-animation: blackout-nav-mobile-hide 250ms linear;
		animation: blackout-nav-mobile-hide 250ms linear;
	}

	nav {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		margin-top: 0 !important;
		height: 100vh;
		z-index: 100;
	}
	#nav-controlcb:not(:checked) ~ nav {
		margin-left: calc(-10em - 30px);

		-webkit-transition: margin-left 250ms;
		transition: margin-left 250ms;
	}
	#nav-controlcb:checked ~ nav {
		margin-left: 0;

		-webkit-transition: margin-left 250ms;
		transition: margin-left 250ms;
	}
}


/* Floating Button */

.button-floating {
	display: block;
	position: absolute;
	height: 56px;
	width: 56px;
	bottom: 15px;
	right: 15px;
	line-height: 46px;
	background-position: center center;
	border: none;
	background-color: #03A9F4;
	box-shadow: 0 0 10px #212121;
	border-radius: 28px;
}
.button-floating:hover {
	box-shadow: 0 0 10px #111111;
	cursor: pointer;
}

/* Hide button when screen too small (ie when search bar brings up mobile virtual keyboard). */
@media screen and (max-height: 100px) {
	.button-floating {
		display: none;
	}
}


/* Dialogs within blackout overlay */
.overlayBox {
	display: none;
}
.overlayBox.blackoutOverlayChild {
	display: block;
	position: absolute;
	max-width: 500px;
	max-height: calc(100vh - 120px);
	overflow: auto;
	margin: 30px auto;
	padding: 30px;
	background-color: #4CAF50;
	color: black;

	-webkit-animation-name: overlayBox-expand;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-timing-function: linear;

	animation-name: overlayBox-expand;
    animation-duration: 1000ms;
    animation-timing-function: linear;

	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}
.overlayBox::before {
	content: '';
	padding-left: 30px;
}
.overlayBox::after {
	content: '';
	padding-right: 30px;
}

.overlayBox h1 {
	color: white;
	font-weight: 300;
	font-size: 1.5em;
	margin-bottom: 15px;
}
.overlayBox h2 {
	color: #C8E6C9;
	font-weight: 300;
	font-size: 1.25em;
	margin-top: 15px;
	margin-bottom: 5px;
}
.overlayBox h1.withIcon, .overlayBox h2.withIcon {
	background-position: left center;
	padding-left: 33px;
}

.overlayBox button {
	float: none;
	width: auto;
}
.overlayBox button.end {
	float: right;
	margin-bottom: 30px;
	margin-left: 15px;
}

#container-devOptionsSetValue h1::after {
	content: attr(data-suffix);
}

/* Button generalisations. */

.materialButton {
	display: inline-block;
	height: 36px;
	/*line-height: 36px;*/
	padding: 0 5px;
	margin-top: 15px;
	border: none;
	background-color: #C8E6C9;
	color: #212121;
	font-size: 1.0em;
	text-overflow: ellipsis;
	border-radius: 2px;
}
.materialButton:hover {
	box-shadow: 0 0 5px #C8E6C9;
	color: black;
	cursor: pointer;
}
.materialButton.withIcon {
	padding-left: 36px;
	background-position: 5px center;
}
.materialButton.onlyIcon {
	width: 36px;
	padding: 0px;
	background-position: center center;
}
.materialButton.selected {
	border-bottom: 5px solid #03A9F4;
	color: #212121;
}
.materialButton.unselected {
	border-bottom: 5px solid #C8E6C9;
	color: #727272;
}
.materialButton.toggled {
	border-bottom: 5px solid #03A9F4;
}
.materialButton.untoggled {
	border-bottom: 5px solid #B6B6B6;
	color: #727272;
}
.materialButton.acc {
	background-color: #03A9F4;
	color: #C8E6C9;
}
.materialButton.acc:hover {
	color: #FFFFFF;
}


/*
 AJAXED CONTENT
*/

#container-ajax {
	padding: 30px;
}

@media screen and (max-width: 500px) {
	/* Mobile device no left/right padding. */
	#container-content, #container-ajax {
		padding: 30px 0;
	}
}

#container-ajax-meta {
	display: none;
}

.ajax-meta-var {
	display: none;
}

#container-ajax-content {
	color: #C8E6C9;
}


/* Loading animation (source: http://david.ingledow.co.uk/blog/google-material-designs-animated-loading-spinner-svg-and-css/)*/
.spinner {
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	width: 100px;
	height: 100px;
	position: relative;
}
.path {
	-webkit-animation:
		spinner-dash 1.5s ease-in-out infinite,
		spinner-colour 6s ease-in-out infinite;
	animation:
		spinner-dash 1.5s ease-in-out infinite,
		spinner-colour 6s ease-in-out infinite;
	stroke-dasharray: 1,200;
	stroke-dashoffset: 0;
	stroke-linecap: round;
}

.container-loading-spinner,
.container-loading-spinner > * {
	display: block;
	margin: auto;
}
.container-loading-spinner figcaption {
	text-align: center;
	color: #727272;
}
.container-loading-spinner.lighttext figcaption {
	color: #C8E6C9;
}


/* Link popup */


#popup-link-controlcb, #container-popup-link {
	display: none;
}

#popup-link-controlcb:checked ~ #blackout-popup-link {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	width: 100vw;
	background-color: #000000;
	z-index: 70;
	opacity: 0.8;

	-webkit-transition: opacity 250ms;
	transition: opacity 250ms;
}
#popup-link-controlcb:not(:checked) ~ #blackout-popup-link {
	-webkit-animation: blackout-nav-mobile-hide 250ms linear;
	animation: blackout-nav-mobile-hide 250ms linear;
}

#popup-link-controlcb:checked ~ #container-popup-link {
	display: block;
	position: absolute;
	left: 50%;
	top: 10vh;
	max-height: 80vh;
	width: 0;
	height: auto;
	overflow: visible;
	z-index: 80;
}

#container-popup-link iframe {
	display: block;
	border: none;
	height: 100%;
	width: 80vw;
	height: 80vh;
	margin-left: -40vw;
	border-radius: 1px;
}

#popup-link-spinner {
	background-color: #388E3C;
	padding: 30px;
	width: 150px;
	margin-left: -75px;
	border-radius: 1px;
}

@media screen and (max-width: 800px) {

	#popup-link-controlcb:checked ~ #container-popup-link {
		max-height: 100vh;
		top: 0;
	}

	#container-popup-link iframe {
		width: 100vw;
		height: calc(100vh - 48px);
		margin-left: -50vw;
	}
	#container-popup-link::before {
		content: 'This page is in a popup';
		display: block;
		text-align: center;
		height: 48px;
		width: 100vw;
		line-height: 48px;
		background-color: #388E3C;
		color: #C8E6C9;
		margin-left: -50vw;
		opacity: 0.8;
		pointer-events: none;
	}

}


/* Content cards */


.container-notice {
	background-color: #FFFFFF;
	color: #212121;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	padding: 30px;
	box-shadow: 0 0 2px #B6B6B6;
	border-radius: 1px;
}

.container-notice h2 {
	font-size: 1.5em;
	font-weight: 300;
	margin-bottom: 15px;
}
.container-notice.error h2,
.container-notice .error {
	color: #F44336;
}
.container-notice.error h2.error::before {
	content: '\26A0';
	padding-right: 0.5ex;
}
.error-403::before {
	color: #973365;
}
.error-404::before {
	color: #FE9900;
}
.error-500::before {
	color: #36779D;
}

.container-notice p {
	margin-bottom: 10px;
}
.container-notice p:last-of-type {
	margin-bottom: 0;
}
.container-notice p.secondary,
.container-notice span.secondary {
	color: #727272;
}

.container-notice button.materialButton {
	color: #4CAF50;
}
.container-notice button.materialButton:hover {
	color: #388E3C;
}
.container-notice button.materialButton.acc {
	color: #03A9F4;
	background-color: transparent;
}
.container-notice button.materialButton.acc:hover {
	text-shadow: -1px -1px 1px #FFF, 1px 1px 1px #FFF;
}

/* Right aligned image with text-wrap (or top-aligned on smaller screens) */

.container-notice img.right {
	float: right;
	clear: right;
	display: block;
	width: 256px;
	height: auto;
	margin-left: 20px;
	margin-bottom: 20px;
}

@media screen and (max-width: 800px) {
	.container-notice img.right {
		float: initial;
		display: block;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
	}
}

/* Expandable/collapsable text. */
/* Format:
	<input id="expandable-xxx-controlcb" type="checkbox" autocomplete="false"
		class="expandable-controlcb" onload="$(this).prop('checked', false)" />
	<span class="expandable">
		...
	</span>
	<label class="nostyle withIcon accent more" for="expandable-xxx-controlcb"></label>
*/

.expandable-controlcb {
	display: none;
}
.expandable-controlcb + .expandable {
	display: block;
	max-height: 0;
	overflow: hidden;
	-webkit-transition: max-height 500ms ease-out;
	transition: max-height 500ms ease-out;
}
.expandable-controlcb:checked + .expandable {
	max-height: 1000px;
	-webkit-transition: max-height 500ms ease-in;
	transition: max-height 500ms ease-in;
}
p + .expandable-controlcb + .expandable p {
	margin-top: 10px;
}
.expandable-controlcb + .expandable + label {
	display: block;
	color: #03A9F4;
	cursor: pointer;
	margin-top: 10px;
	background-position: left center;
	padding-left: 33px;
}
.expandable-controlcb + .expandable + label:hover {
	color: #388E3C;
}
.expandable-controlcb:not(:checked) + .expandable + label::after {
	content: 'MORE\2026';
}
.expandable-controlcb:checked + .expandable + label::after {
	content: 'LESS';
}


hr {
  border: none;
  background-color: #BDBDBD;
  height: 1px;
  margin-bottom: 30px;
  max-width: 810px;
}


/* Special radio buttons and checkboxes. */
fieldset {
	border: none;
}

.label-cb {
	background-color: #4CAF50;
}
.label-cb.bigImage {
	display: inline-block;
	height: 96px;
	width: 96px;
	line-height: 96px;
	text-align: center;
	background-color: #4CAF50;
	border-bottom: 5px solid #727272;
	color: #B2B2B2;
	overflow: hidden;
}
.label-cb.bigImage:hover {
	color: #C8E6C9;
}
.label-cb.withIcon {
	line-height: 148px;
	padding-left: 5px;
	background-position: center 15px;
	background-size: 40px 40px;
}
fieldset input[type="checkbox"]:checked + label.label-cb,
fieldset input[type="radio"]:checked    + label.label-cb {
	border-bottom: 5px solid #03A9F4;
	color: #C8E6C9;
}
fieldset input[type="checkbox"]:checked + label.label-cb:hover,
fieldset input[type="radio"]:checked    + label.label-cb:hover {
	color: #FFFFFF;
}


/* Sections. (headers and grids) */


.container-section-grid,
.container-section-form,
.container-section-table {
	display: block;
	margin-top: 30px;
}

.container-section-grid .subtitle {
	display: block;
	color: #727272;
	margin-bottom: 20px;
}

.section-heading {
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	max-width: 750px;
	font-size: 1.1em;
	font-weight: 300;
	color: #03A9F4;
}
.section-heading.withIcon {
	background-position: 5px center;
	padding-left: 36px;
}

.section-heading .section-heading-more {
	float: right;
}

.container-section-grid-inner {
	display: -webkit-flex;
	display: flex;
	/*float: left;*/
	margin: 0 auto;
	width: auto;
	max-width: 100%;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
	align-content: space-between;
	-webkit-flex-flow: row wrap;
	-webkit-justify-content: center;
}

.container-section-grid-inner a.nostyle {
	text-decoration: none;
	font-weight: 300;
	padding: 0;
	margin: 0;
	color: inherit !important;
}

.container-section-grid-inner div {
	display: inline-block;
	position: relative;
	padding: 15px;
	margin: 15px;
	background-color: #FFFFFF;
	color: #212121;
	width: 300px;
	max-width: 345px;
	vertical-align: top;
	float: left;
	box-shadow: 0 0 10px #B6B6B6;
	border-radius: 3px;

	flex-basis: 300px;
	flex-grow: 1;
	flex-shrink: 1;
	-webkit-flex-basis: 300px;
	-webkit-flex-grow: 1;
	-webkit-flex-shrink: 1;
}
.container-section-grid-inner > div:only-child {
	max-width: 750px;
}
.container-section-grid-inner div:hover {
	box-shadow: 0 0 15px #03A9F4;
	cursor: pointer;
}

article h3 {
	font-size: 1.5em;
	font-weight: 300;
	margin-bottom: 5px;
	color: #212121;
}

.container-section-grid-inner p {
	margin-bottom: 10px;
}

.container-section-grid-inner img {
	display: block;
	border: 0;
	width: 256px;
	height: auto;
	max-width: 100%;
	margin: auto;
	margin-bottom: 0;
	padding-top: 20px;
}
.container-section-grid-inner img:-moz-broken {
	height: auto;
}

.container-section-grid-inner h3.withIcon {
	vertical-align: bottom;
	line-height: 32px;
}

.container-section-grid-inner h3.withIcon::before {
	display: inline-block;
	content: 'M';
	color: transparent;
	margin-right: 10px;
	height: 32px;
	width: 32px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 32px 32px;
}

.container-section-grid-inner span.a {
	font-weight: normal;
}

/* Rearange tiles that are very wide. */
@media screen and (min-width: 750px) {

	.container-section-grid-inner > div:only-child {
		min-height: 286px;
	}

	.container-section-grid-inner > div:only-child p,
	.container-section-grid-inner > div:only-child p ~ a,
	.container-section-grid-inner > div:only-child p ~ .a {
		max-width: calc(100% - 286px);
		float: left;
		clear: left;
	}
	.container-section-grid-inner > div:only-child img {
		float: right;
		clear: right;
		position: absolute;
		right: 15px;
		top: 15px;
	}

}

/* Expand limited tile sizes when only room for one tile per row. */
@media screen and (max-width: 865px) {

	.container-section-grid-inner > div {
		max-width: 750px;
	}
}
@media screen and (max-width: 995px) {

	#nav-controlcb:checked ~ #container-content .container-section-grid-inner > div {
		max-width: 750px;
	}
}

/* Grid sections on mobile. */
@media screen and (max-width: 500px) {

	.section-heading {
		margin-left: 16px;
		margin-right: 16px;
	}

}


/* Form. */

.container-section-form form {
	background-color: #FFFFFF;
	color: #212121;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	padding: 30px;
	box-shadow: 0 0 2px #B6B6B6;
	border-radius: 1px;
}

.container-section-form form label {
	display: block;
	color: #727272;
	margin-bottom: 10px;
}

.container-section-form form input,
.container-section-form form textarea {
	display: block;
	margin-bottom: 20px;
}
.container-section-form form input[type="text"],
.container-section-form form textarea {
	width: 100%;
	max-width: 300px;
	background-color: #FFFFFF;
	padding: 5px 0;
	border: none;
	border-bottom: 1px solid #03A9F4;
	color: #212121;
	caret-color: #03A9F4;
	-moz-caret-color: #03A9F4;
	-webkit-caret-color: #03A9F4;
}
.container-section-form form input[type="text"]:focus,
.container-section-form form textarea:focus {
	color: #000000;
	border-bottom: 1px solid #388E3C;
}
.container-section-form form ::-webkit-input-placeholder {
	color: #727272;
	opacity: 0.8;
}
.container-section-form form :-moz-placeholder {
	color: #727272;
	opacity: 0.8;
}
.container-section-form form ::-moz-placeholder {
	color: #727272;
	opacity: 0.8;
}
.container-section-form form :-ms-input-placeholder {
	color: #727272;
	opacity: 0.8;
}
.container-section-form form ::input-placeholder {
	color: #727272;
	opacity: 0.8;
}
.container-section-form form ::placeholder {
	color: #727272;
	opacity: 0.8;
}

.container-section-form form :invalid {
	box-shadow: none;
}
.container-section-form form :-moz-submit-invalid {
	box-shadow: none;
}
.container-section-form form :-moz-ui-invalid,
.container-section-form form .form-error-mark,
.container-section-form form.form-show-errors :invalid {
	box-shadow:none;
	border-bottom: 1px solid #FF5252 !important;
}

.container-section-form form .container-submit {
	display: block;
	width: 100%;
	max-width: 300px;
	height: calc(1.0em + 10px);
}
.container-section-form form input[type="submit"] {
	display: inline-block;
	float: right;
	background-color: transparent;
	border: none;
	font-size: 1.0em;
	color: #03A9F4;
	text-transform: uppercase;
	cursor: pointer;
	margin-bottom: 0;
	padding: 5px;
}
.container-section-form form input[type="submit"]:hover {
	color: #388E3C;
}

.container-section-form form .g-recaptcha {
	margin-bottom: 20px;
}

.container-section-form .form-error-msg {
	display: block;
	color: #F44336;
	font-size: 1.0em;
}
.container-section-form label .form-error-msg {
	display: inline;
}
.container-section-form label .form-error-msg::before {
	display: inline-block;
	content: '';
	width: 1ex;
}


/* Table section. */

.container-section-table {
	background-color: #FFFFFF;
	color: #212121;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	padding: 15px 0;
	box-shadow: 0 0 2px #B6B6B6;
	border-radius: 1px;
}

.container-section-table > .container-table-row {
	display: block;
	padding: 15px 30px;
	border-bottom: 1px solid #B6B6B6;
}
.container-section-table > .container-table-row:last-child {
	border-bottom: none;
}

.container-table-row img {
	display: inline-block;
	width: 32px;
	height: 32px;
	margin-right: 15px;
}

.container-table-row h3 {
	display: inline-block;
	font-size: 1.5em;
	font-weight: 300;
	color: #212121;
}
.container-table-row h3.withIcon {
	vertical-align: top;
	line-height: 32px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 32px 32px;
	padding-left: 44px;
}

.container-table-row .subtitle {
	display: inline-block;
	color: #727272;
	margin-left: 15px;
	margin-bottom: 15px;
	vertical-align: top;
	line-height: 32px;
}
.container-table-row h3.withIcon + .subtitle {
	line-height: 32px;
	vertical-align: top;
}