<!DOCTYPE html>
<html lang="{{ settings.langattr | default('en') }}">
	<head>
		<meta charset="UTF-8">
		<title>{% block title %}{% endblock %}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<meta name="description" content="{{ metatabs.meta.description }}" />
		<meta name="author" content="{{ metatabs.meta.author }}" />
		<meta name="generator" content="TYPEMILL" />
		<link rel="canonical" href="{{ item.urlAbs }}" />

		{{ assets.renderMeta() }}

		{% block stylesheets %}
    
			<link rel="stylesheet" href="{{ base_url }}/themes/cyanine/css/tachyons.min.css?20220527" />
			<link rel="stylesheet" href="{{ base_url }}/themes/cyanine/css/style.css?20220527" />
			
			<style>

				/*******************
				**  LAYOUT SIZES  **
				*******************/
			
				{% if settings.themes.cyanine.layoutsize == 'large' %}
					@media screen and (min-width: 50em){
						.grid-container{
							max-width: 82rem;
							grid-template-columns: 25% 75%;
						}
						.grid-main{
							max-width: 48rem;
							margin: 0 auto;
						}
					}
				{% elseif settings.themes.cyanine.layoutsize == 'full' %}
					@media screen and (min-width: 70em){
						.grid-container{
							max-width: 100%;
							grid-template-columns: 20% 80%;
						}
						.grid-main{
							padding-left: 4rem;
							padding-right: 4rem;
							margin: 0 auto;
						}
					}
				{% else %}
					@media screen and (min-width: 50em){
						.grid-container{
							max-width: 64rem;
							grid-template-columns: 30% 70%;
						}
					}
				{% endif %}



				/*******************
				**  FONT FAMILIES **
				*******************/

				body,.landingpagecontrast{
					font-family: {{ settings.themes.cyanine.font|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
				}
				h1,h2,h3,h4,h5,h6,.logo{
					font-family: {{ settings.themes.cyanine.fontheadline|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
				}
				.navigation, button, .button, .mainnavigation{
					font-family: {{ settings.themes.cyanine.fontnavi|default('-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif') }};
				}

				/*******************
				**      COLORS    **
				*******************/
				body,.landingpagecontrast,.account,form input[type="submit"],from button,form .button{
					background: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
				}
				main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagecontrast, .landingpagenews,form input[type="submit"],from button,form .button{
					border-color: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
				}
				.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
					background: {{ settings.themes.cyanine.brandcolorprimary|default('lightseagreen') }};
				}
				body,.landingpagecontrast, a,
				.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited,
				.account, .account a, .account a:link, .account a:hover, .account a:focus, .account a:visited,
				form input[type="submit"],from button,form .button{
					color: {{ settings.themes.cyanine.fontcolorprimary|default('#F7F7F7') }};
				}
				.landingpagecontrast a, .landingpagecontrast a:link, .landingpagecontrast a:visited{
					border-color: {{ settings.themes.cyanine.fontcolorprimary|default('#F7F7F7') }};
				}

				main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews,button.expander, .notice4{
					background: {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
				}
				.notice4{
					box-shadow: 0 -100px 80px 0px {{ settings.themes.cyanine.brandcolorsecondary|default('#f7f7f7') }};
				}
				main, footer, .landingpageintro, .landingpageinfo, .landingpageteaser, .landingpagenavi, .landingpagenews, .logo a, button.expander{
					color: {{ settings.themes.cyanine.fontcolorsecondary|default('#333') }};					
				}
				button.expander{
					border-color: {{ settings.themes.cyanine.fontcolorsecondary|default('#333') }};
				}

				main a, main a:before, footer a, .landingpageintro p a, .landingpageinfo p a, .landingpageteaser p a, .landingpagenavi p a{
					color: {{ settings.themes.cyanine.fontcolorlink|default('#007474') }};
			  	}
				.TOC li a, .TOC li a:hover,.TOC li a:focus,.TOC li a:active{
					border-color: {{ settings.themes.cyanine.fontcolorlink|default('#007474') }};
				}

				.navigation, button, .button,thead{
					background: {{ settings.themes.cyanine.brandcolortertiary|default('lightseagreen') }};
				}
				.navigation, button, .button{
					border-color: {{ settings.themes.cyanine.bordercolortertiary|default('lightseagreen') }};
				}
				.navigation, button, .button,thead,
				.navigation a,.navigation a:hover,.navigation a:focus, .navigation a:active{
					color: {{ settings.themes.cyanine.fontcolortertiary|default('#F7F7F7') }};
				}
				article pre{
					border-left: 4px solid {{ settings.themes.cyanine.brandcolortertiary|default('lightseagreen') }};
				}
				article pre, article code{
					background: {{ settings.themes.cyanine.codebackground|default('#ddd') }};
					color: {{ settings.themes.cyanine.codecolor|default('#333') }};
				}

				.mainnavigation a:hover,.mainnavigation a:focus,.mainnavigation a:active, .mainnavigation .active > a:first-child{
					background: {{ settings.themes.cyanine.contentnavihoverbackground|default('lightseagreen') }};
					color: {{ settings.themes.cyanine.contentnavihovercolor|default('white') }};
				}
				.landingpagenews li, .newsbox{
					background: {{ settings.themes.cyanine.newsbackground|default('white') }};
				}
				.landingpagenews li a{
					color: {{ settings.themes.cyanine.newscolor|default('#333') }};
				}
				.mainnavigation li, tr, hr, .notice4{
					border-color: {{ settings.themes.cyanine.thinbordercolor|default('lightgray') }};
				}
				
				.notice1{
				    background-color: #ffded4;
				    border-left: 4px solid #f65a3c;
				}
				.notice2{
					background-color: #fff3d4;
					border-left: 4px solid #f6b73c;
				}
				.notice3{
				    background-color: #d4e0ff;
				    border-left: 4px solid #3c7bf6;	
				}

				{% if settings.themes.cyanine.noticecolors %}
					.notice1 {
						background-color: #fafafa;
						border-left: 10px solid #000;
						color: #333;
					}
					.notice2 {
						background-color: #eee;
						border-left: 10px solid #999;
						color: #333;
					}
					.notice3{
						background-color: #444;
						border-left: 10px solid #ccc;
						color: #fff;
					}
				{% endif %}

			</style>

			{{ assets.renderCSS() }}
			
		{% endblock %}
	</head>
	<body class="optimize-text pa2">

		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<defs>
				<symbol id="icon-user" viewBox="0 0 20 28">
					<path d="M20 21.859c0 2.281-1.5 4.141-3.328 4.141h-13.344c-1.828 0-3.328-1.859-3.328-4.141 0-4.109 1.016-8.859 5.109-8.859 1.266 1.234 2.984 2 4.891 2s3.625-0.766 4.891-2c4.094 0 5.109 4.75 5.109 8.859zM16 8c0 3.313-2.688 6-6 6s-6-2.688-6-6 2.688-6 6-6 6 2.688 6 6z"></path>
				</symbol>
				<symbol id="icon-pencil" viewBox="0 0 32 32">
					<path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z"></path>
				</symbol>
				<symbol id="icon-printer" viewBox="0 0 32 32">
					<path d="M8 2h16v4h-16v-4z"></path>
					<path d="M30 8h-28c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h6v8h16v-8h6c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2zM4 14c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM22 28h-12v-10h12v10z"></path>
				</symbol>
			</defs>
		</svg>

		{% if is_loggedin() %}
			<div class="account fixed pb2 top-0 right-0 left-0">
				<div class="account fixed h1 w2 w2 right-2">
					<a href="{{base_url}}/tm/account"><div class="account fixed h2 w2 top-0 br-100 tc">
						<svg class="icon baseline icon-user w1 h1 mt2"><use xlink:href="#icon-user"></use></svg>
					</div></a>
				</div>
			</div>
		{% endif %}

		{% block content %}{% endblock %}
			
		{% include 'partials/footer.twig' %}

		{% block javascripts %}

			<script src="{{ base_url }}/system/typemill/author/js/typemillutils.js?20220108"></script>
			<script>typemillUtilities.start();</script>
			
			{% if settings.themes.cyanine.collapseNav %}
				<script>
					var expandButton 	= document.getElementById("expander");
					
					if(expandButton !== null)
					{
						var expandLabel		= expandButton.dataset.expandlabel;
						var collapseLabel	= expandButton.dataset.collapselabel;

						expandButton.addEventListener('click', function(e)
						{
							var contentnav = document.getElementById("contentnav");
							
							contentnav.classList.toggle("collapse");

							if(contentnav.classList.contains("collapse"))
							{
								expandButton.innerHTML = expandLabel;
							}
							else
							{
								expandButton.innerHTML = collapseLabel;
							}
						});
					}
				</script>
			{% endif %}

			{{ assets.renderJS() }}
		
		{% endblock %}

	</body>
</html>