inst/rmarkdown/templates/posterdown_betterland/resources/template.html - IDS-Mannheim/posterdown - Gitiles

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml"$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
 <head>
 <meta charset="utf-8" />
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="pandoc" />
 <meta name="viewport" content="width=device-width, initial-scale=1">

 $for(author-meta)$<meta name="author" content="$author-meta$" />$endfor$
 $if(date-meta)$<meta name="date" content="$date-meta$" />$endif$
 <title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>

 $for(header-includes)$
 $header-includes$
 $endfor$

 $if(highlightjs)$
 <link rel="stylesheet" href="$highlightjs$/$if(highlightjs-theme)$$highlightjs-theme$$else$default$endif$.css" $if(html5)$$else$type="text/css" $endif$/>
 <script src="$highlightjs$/highlight.js"></script>
 <script type="text/javascript">hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>
 $endif$

 $if(highlighting-css)$<style type="text/css">$highlighting-css$</style>$endif$

 $for(css)$
 <link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
 $endfor$

 <!--
 Font-awesome icons ie github or twitter
 -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/brands.css" integrity="sha384-n9+6/aSqa9lBidZMRCQHTHKJscPq6NW4pCQBiMmHdUCvPN8ZOg2zJJTkC7WIezWv" crossorigin="anonymous">

 <!--
 Google fonts api stuff
 -->
 <link href='https://fonts.googleapis.com/css?family=$if(main_fontfamily)$$main_fontfamily$$else$Special Elite$endif$' rel='stylesheet'>
 <link href='https://fonts.googleapis.com/css?family=$if(font_family)$$font_family$$else$Rasa$endif$' rel='stylesheet'>

 <!--
 Here are the required style attributes for css to make this poster work :)
 -->
 <style>
 @page {
 size: $if(poster_width)$$poster_width$$else$46in$endif$ $if(poster_height)$$poster_height$$else$32in$endif$;
 margin: 0;
 padding: 0;
 background-color: $if(body_bgcol)$$body_bgcol$$else$#ffffff$endif$;
 }
 body {
 margin: 0px;
 padding: 0px;
 width: $if(poster_width)$$poster_width$$else$46in$endif$;
 height: $if(poster_height)$$poster_height$$else$32in$endif$;
 text-align: justify;
 font-size: $if(body_textsize)$$body_textsize$$else$45px$endif$;
 background-color: $if(body_bgcol)$$body_bgcol$$else$#FFFFFF$endif$;
 color: $if(body_textcol)$$body_textcol$$else$#000000$endif$;
 }
 /* RMarkdown Class Styles */
 /* center align leaflet map,
 from https://stackoverflow.com/questions/52112119/center-leaflet-in-a-rmarkdown-document */
 .html-widget {
 margin: auto;
 position: sticky;
 margin-top: 2cm;
 margin-bottom: 2cm;
 }
 .leaflet.html-widget.html-widget-static-bound.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom {
 position: sticky;
 width: 100%;
 }
 pre.sourceCode.r, pre.sourceCode.python {
 background-color: #ffffff20;
 border: solid $if(secondary_colour)$$secondary_colour$$else$#008080$endif$ 1mm;
 border-radius: 0.5em;
 padding: 4mm;
 margin: auto;
 margin-top: 1em;
 margin-bottom: 1em;
 /* align-items: center; */
 }
 div.sourceCode {
 background-color: transparent;
 width: $if(codechunk_width)$$codechunk_width$$else$85%$endif$;
 margin-left: auto;
 margin-right: auto;
 }
 code.sourceCode.r, code.sourceCode.python {
 background-color: transparent;
 font-size: $if(codechunk_textsize)$$codechunk_textsize$$else$20pt$endif$;
 border-radius: 2mm;
 }
 code {
 font-size: 25pt;
 font-family: monospace;
 background-color: $if(secondary_colour)$$secondary_colour$24$else$#00808024$endif$;
 color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
 padding: 1.2mm;
 line-height: 1;
 border-radius: 2mm;
 }
 caption {
 margin-bottom: 10px;
 font-size: $if(caption_textsize)$$caption_textsize$$else$20pt$endif$;
 font-style: italic;
 }

 tbody tr:nth-child(odd) {
     background-color: $if(primary_colour)$$primary_colour$$else$#0b4545$endif$20;
 }
 .table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{
   border-spacing: 0;
   font-size: 40%;
   border-style: none;
   padding-top: 15px;
   padding-bottom: 15px;
   padding-right: 1em;
   padding-left: 1em;
   line-height: 1em;
 }
 table {
   margin: auto;
 }
 th {
   padding-left: 5mm;
   padding-right: 5mm;
 }
 .caption {
 font-size: $if(caption_textzie)$$caption_textsize$$else$20pt$endif$;
 font-style: italic;
 padding-top: 0;
 }
 .references {
 font-size: $if(reference_textsize)$$reference_textsize$$else$20px$endif$;
 line-height: 90%;
 }
 /* Create three unequal columns that floats next to each other */
 .column {
 float: left;
 padding: 0px;
 }
 .outer {
 width: $if(poster_width)$$poster_width$$else$46in$endif$;
 height: $if(poster_height)$$poster_height$$else$32in$endif$;
 -webkit-column-count: 2; /* Chrome, Safari, Opera */
 -moz-column-count: 2; /* Firefox */
 column-count: 2;
 -webkit-column-fill: auto;
 -moz-column-fill: auto;
 column-fill: auto;
 -webkit-column-rule-width: $if(main_width)$$main_width$$else$0.5$endif$;
 -moz-column-rule-width: $if(main_width)$$main_width$$else$0.5$endif$;
 column-rule-width: $if(main_width)$$main_width$$else$0.5$endif$;
 -webkit-column-rule-style: solid;
 -moz-column-rule-style: solid;
 column-rule-style: solid;
 -webkit-column-rule-color: black;
 -moz-column-rule-color: black;
 column-rule-color: black;
 $if(main_width)$
 -webkit-column-gap: calc($main_width$ * 100%);
 $else$
 -webkit-column-gap: 50%;
 $endif$
 background-color: $if(body_bgcol)$$body_bgcol$$else$#ffffff$endif$;
 font-family: $if(font_family)$$font_family$$else$Rasa$endif$;
 color: $if(body_textcol)$$body_textcol$$else$#000000$endif$;
 }
 span.citation {
   color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
   font-weight: bold;
 }
 a {
 text-decoration: none;
 color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
 }
 #title {
 font-size: $if(title_textsize)$$title_textsize$$else$125pt$endif$;
 text-align: left;
 margin: 0;
 line-height: 90%;
 border-bottom: 0;
 }
 #author {
 color: $if(author_textcol)$$author_textcol$$else$$if(primary_colour)$$primary_colour$$else$#0b4545$endif$$endif$;
 margin: 0;
 text-align: left;
 line-height: 65%;
 font-size: $if(author_textsize)$$author_textsize$$else$1.17em$endif$;
 }
 #affiliation {
 padding-top: 1em;
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-style: italic;
 font-size: $if(affiliation_textsize)$$affiliation_textsize$$else$25px$endif$;
 margin: 0;
 }
 sup {
 color: $if(accent_colour)$$accent_colour$$else$#cc0000$endif$;
 }
 .affiliation sup {
 font-size: 20px;
 }
 .author sup {
 font-size: 30px;
 }
 .author_extra {
 color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
 margin: 0;
 line-height: 85%;
 font-size: $if(authorextra_textsize)$$authorextra_textsize$$else$35px$endif$;
 }
 .outer h1 {
 text-align: center;
 margin-top: 0.5in;
 margin-bottom: 0.5in;
 }
 .outer h2 {
 text-align: center;
 }
 .outer p {
 color: $if(body_textcol)$$body_textcol$$else$#000000$endif$;
 }
 .outer ol {
 text-align: left;
 }
 .main {
 width: calc($if(poster_width)$$poster_width$$else$46in$endif$ * $if(main_width)$$main_width$$else$0.5$endif$);
 height: $if(poster_height)$$poster_height$$else$32in$endif$;
 position: absolute;
 $if(main_width)$
 margin-left: calc($if(poster_width)$$poster_width$$else$46in$endif$ * ((1 - $main_width$) / 2));
 $else$
 margin-left: calc($if(poster_width)$$poster_width$$else$46in$endif$ * 0.25);
 $endif$
 background-color: $if(primary_colour)$$primary_colour$$else$#0b4545$endif$;
 color: $if(main_textcol)$$main_textcol$$else$#FFFFFF90$endif$;
 font-family: $if(main_fontfamily)$$main_fontfamily$$else$Special Elite$endif$;
 $if(main_image)$
 background-image: url($main_image$);
 background-position: center; /* Center the image */
 background-repeat: no-repeat; /* Do not repeat the image */
 background-size: cover; /* Resize the background image to cover the entire container */
 $else$
 background-image: linear-gradient($if(primary_colour)$$primary_colour$$else$#0b4545$endif$ 50%, $if(secondary_colour)$$secondary_colour$$else$#008080$endif$);
 }
 $endif$
 .main strong {
 color: $if(mainstrong_fontcol)$$mainstrong_fontcol$$else$#FFFFFF$endif$;
 }
 img.main-img-left {
 width: $if(mainimage_leftsize)$$mainimage_leftsize$$else$20%$endif$;
 left: 0.5in;
 bottom: 0.2in;
 position: absolute;
 }
 img.main-img-right {
 width: $if(mainimage_rightsize)$$mainimage_rightsize$$else$18%$endif$;
 right: 0.5in;
 bottom: 0.2in;
 position: absolute;
 }
 .main p {
 padding-top: 20%;
 font-size: $if(main_textsize)$$main_textsize$$else$170px$endif$;
 text-align: left;
 }
 .fab {
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 25px;
 }
 .twitter, i {
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 35px;
 text-decoration: none;
 }
 a.email {
 text-decoration: none;
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 35px;
 }
 .envelope {
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 5px;
 text-decoration: none;
 }
 .globe {
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 5px;
 text-decoration: none;
 }
 .github > .fab {
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 40px;
 text-decoration: none;
 }
 .globetext {
 color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
 font-size: 35px;
 text-decoration: none;
 }
 .poster_wrap {
 width: $if(poster_width)$$poster_width$$else$46in$endif$;
 height: $if(poster_height)$$poster_height$$else$32in$endif$;
 padding: 0cm;
 background-color: $if(body_bgcol)$$body_bgcol$$else$#ffffff$endif$;
 }
 span > #tab:mytable {
   font-weight: bold;
 }
 .section {
   padding-left: $if(column_padding)$$column_padding$$else$10mm$endif$;
   padding-right: $if(column_padding)$$column_padding$$else$10mm$endif$;
 }
 .main p {
   padding-left: $if(main_padding)$$column_padding$$else$30mm$endif$;
   padding-right: $if(main_padding)$$column_padding$$else$30mm$endif$;
 }
 .main_pic {
   width: $if(main_picwidth)$$main_picwidth$$else$50%$endif$;
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 .orcid img {
   width: 3%;
 }
 </style>
 $if(custom_css)$
 <link rel="stylesheet" href=$custom_css$>
 $else$$endif$
 </head>
 <body>

 $for(include-before)$
 $include-before$
 $endfor$

 <div class="poster_wrap">
 <div class="column outer">
 <br>
 <div class="title section">
 $if(title)$
 <h1 id="title">$title$</h1>
 <br>
 $else$$endif$
 $if(author)$
 <h3 id="author" class="author">

 $for(author)$
 $if(author.main)$
 $author.name$<sup> $author.affil$$if(author.orcid)$, <a class="orcid" href="https://orcid.org/$author.orcid$"><img src="https://raw.githubusercontent.com/brentthorne/posterdown/master/images/orcid.jpg"></a>$else$$endif$</sup><br>
 $if(author.twitter)$<a class="twitter" href="https://mobile.twitter.com/$author.twitter$"><i class="fab fa-twitter"></i>&nbsp;@$author.twitter$</a> <br>
 $else$$endif$
 $if(author.email)$
 <a class='envelope'><i class="fas fa-envelope"></i></a> $author.email$ <br>
 $else$$endif$
 $if(author.website)$
 <a class='globe'><i class="fas fa-globe"></i></a> <a class='globetext'> $author.website$</a> <br>
 $else$$endif$
 $if(author.github)$
 <a class='github'><i class="fab fa-github"></i></a><a class='globetext' href="https://github.com/$author.github$"> &nbsp;@$author.github$</a>
 $else$$endif$
 $else$$endif$
 $sep$ $endfor$
 </h3>
 $else$$endif$

 $if(author)$
 <h5 id="author_extra" class="author_extra">
 $for(author)$
 $if(author.main)$
 $else$
 $author.name$<sup>$author.affil$$if(author.orcid)$, <a class="orcid" href="https://orcid.org/$author.orcid$"><img src="https://raw.githubusercontent.com/brentthorne/posterdown/master/images/orcid.jpg"></a>$else$$endif$</sup>
 $endif$
 $sep$ $endfor$
 </h5>
 $else$$endif$

 <p id="affiliation" class="affiliation">
 $for(affiliation)$<sup>$affiliation.num$</sup> $affiliation.address$$sep$<br> $endfor$
 </p>

 </div>
 $body$

 </div>
 <div class="main">
 <p>$for(main_findings)$$main_findings$$sep$<br><br> $endfor$</p>
 $if(logoleft_name)$$logoleft_name$$else$$endif$
 $if(logoright_name)$$logoright_name$$else$$endif$
 </div>
 </div>

 $if(math)$
 <!-- dynamically load mathjax for compatibility with self-contained -->
 <script>
 (function () {
 var script = document.createElement("script");
 script.type = "text/javascript";
 var src = "$if(mathjax)$$mathjax$$endif$";
 if (src === "" || src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
 if (location.protocol !== "file:" && /^https?:/.test(src))
 src = src.replace(/^https?:/, '');
 script.src = src;
 document.getElementsByTagName("head")[0].appendChild(script);
 })();
 </script>
 $endif$

 $for(include-after)$
 $include-after$
 $endfor$

 </body>
 </html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml"$if(lang)$ lang="$lang$" xml:lang="$lang$"$endif$>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="generator" content="pandoc" />
	<meta name="viewport" content="width=device-width, initial-scale=1">

	$for(author-meta)$<meta name="author" content="$author-meta$" />$endfor$
	$if(date-meta)$<meta name="date" content="$date-meta$" />$endif$
	<title>$if(title-prefix)$$title-prefix$ - $endif$$pagetitle$</title>

	$for(header-includes)$
	$header-includes$
	$endfor$

	$if(highlightjs)$
	<link rel="stylesheet" href="$highlightjs$/$if(highlightjs-theme)$$highlightjs-theme$$else$default$endif$.css" $if(html5)$$else$type="text/css" $endif$/>
	<script src="$highlightjs$/highlight.js"></script>
	<script type="text/javascript">hljs.configure({languages: []}); hljs.initHighlightingOnLoad();</script>
	$endif$

	$if(highlighting-css)$<style type="text/css">$highlighting-css$</style>$endif$

	$for(css)$
	<link rel="stylesheet" href="$css$" $if(html5)$$else$type="text/css" $endif$/>
	$endfor$

	<!--
	Font-awesome icons ie github or twitter
	-->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/brands.css" integrity="sha384-n9+6/aSqa9lBidZMRCQHTHKJscPq6NW4pCQBiMmHdUCvPN8ZOg2zJJTkC7WIezWv" crossorigin="anonymous">

	<!--
	Google fonts api stuff
	-->
	<link href='https://fonts.googleapis.com/css?family=$if(main_fontfamily)$$main_fontfamily$$else$Special Elite$endif$' rel='stylesheet'>
	<link href='https://fonts.googleapis.com/css?family=$if(font_family)$$font_family$$else$Rasa$endif$' rel='stylesheet'>

	<!--
	Here are the required style attributes for css to make this poster work :)
	-->
	<style>
	@page {
	size: $if(poster_width)$$poster_width$$else$46in$endif$ $if(poster_height)$$poster_height$$else$32in$endif$;
	margin: 0;
	padding: 0;
	background-color: $if(body_bgcol)$$body_bgcol$$else$#ffffff$endif$;
	}
	body {
	margin: 0px;
	padding: 0px;
	width: $if(poster_width)$$poster_width$$else$46in$endif$;
	height: $if(poster_height)$$poster_height$$else$32in$endif$;
	text-align: justify;
	font-size: $if(body_textsize)$$body_textsize$$else$45px$endif$;
	background-color: $if(body_bgcol)$$body_bgcol$$else$#FFFFFF$endif$;
	color: $if(body_textcol)$$body_textcol$$else$#000000$endif$;
	}
	/* RMarkdown Class Styles */
	/* center align leaflet map,
	from https://stackoverflow.com/questions/52112119/center-leaflet-in-a-rmarkdown-document */
	.html-widget {
	margin: auto;
	position: sticky;
	margin-top: 2cm;
	margin-bottom: 2cm;
	}
	.leaflet.html-widget.html-widget-static-bound.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom {
	position: sticky;
	width: 100%;
	}
	pre.sourceCode.r, pre.sourceCode.python {
	background-color: #ffffff20;
	border: solid $if(secondary_colour)$$secondary_colour$$else$#008080$endif$ 1mm;
	border-radius: 0.5em;
	padding: 4mm;
	margin: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	/* align-items: center; */
	}
	div.sourceCode {
	background-color: transparent;
	width: $if(codechunk_width)$$codechunk_width$$else$85%$endif$;
	margin-left: auto;
	margin-right: auto;
	}
	code.sourceCode.r, code.sourceCode.python {
	background-color: transparent;
	font-size: $if(codechunk_textsize)$$codechunk_textsize$$else$20pt$endif$;
	border-radius: 2mm;
	}
	code {
	font-size: 25pt;
	font-family: monospace;
	background-color: $if(secondary_colour)$$secondary_colour$24$else$#00808024$endif$;
	color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
	padding: 1.2mm;
	line-height: 1;
	border-radius: 2mm;
	}
	caption {
	margin-bottom: 10px;
	font-size: $if(caption_textsize)$$caption_textsize$$else$20pt$endif$;
	font-style: italic;
	}

	tbody tr:nth-child(odd) {
	background-color: $if(primary_colour)$$primary_colour$$else$#0b4545$endif$20;
	}
	.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{
	border-spacing: 0;
	font-size: 40%;
	border-style: none;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 1em;
	padding-left: 1em;
	line-height: 1em;
	}
	table {
	margin: auto;
	}
	th {
	padding-left: 5mm;
	padding-right: 5mm;
	}
	.caption {
	font-size: $if(caption_textzie)$$caption_textsize$$else$20pt$endif$;
	font-style: italic;
	padding-top: 0;
	}
	.references {
	font-size: $if(reference_textsize)$$reference_textsize$$else$20px$endif$;
	line-height: 90%;
	}
	/* Create three unequal columns that floats next to each other */
	.column {
	float: left;
	padding: 0px;
	}
	.outer {
	width: $if(poster_width)$$poster_width$$else$46in$endif$;
	height: $if(poster_height)$$poster_height$$else$32in$endif$;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
	-webkit-column-fill: auto;
	-moz-column-fill: auto;
	column-fill: auto;
	-webkit-column-rule-width: $if(main_width)$$main_width$$else$0.5$endif$;
	-moz-column-rule-width: $if(main_width)$$main_width$$else$0.5$endif$;
	column-rule-width: $if(main_width)$$main_width$$else$0.5$endif$;
	-webkit-column-rule-style: solid;
	-moz-column-rule-style: solid;
	column-rule-style: solid;
	-webkit-column-rule-color: black;
	-moz-column-rule-color: black;
	column-rule-color: black;
	$if(main_width)$
	-webkit-column-gap: calc($main_width$ * 100%);
	$else$
	-webkit-column-gap: 50%;
	$endif$
	background-color: $if(body_bgcol)$$body_bgcol$$else$#ffffff$endif$;
	font-family: $if(font_family)$$font_family$$else$Rasa$endif$;
	color: $if(body_textcol)$$body_textcol$$else$#000000$endif$;
	}
	span.citation {
	color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
	font-weight: bold;
	}
	a {
	text-decoration: none;
	color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
	}
	#title {
	font-size: $if(title_textsize)$$title_textsize$$else$125pt$endif$;
	text-align: left;
	margin: 0;
	line-height: 90%;
	border-bottom: 0;
	}
	#author {
	color: $if(author_textcol)$$author_textcol$$else$$if(primary_colour)$$primary_colour$$else$#0b4545$endif$$endif$;
	margin: 0;
	text-align: left;
	line-height: 65%;
	font-size: $if(author_textsize)$$author_textsize$$else$1.17em$endif$;
	}
	#affiliation {
	padding-top: 1em;
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-style: italic;
	font-size: $if(affiliation_textsize)$$affiliation_textsize$$else$25px$endif$;
	margin: 0;
	}
	sup {
	color: $if(accent_colour)$$accent_colour$$else$#cc0000$endif$;
	}
	.affiliation sup {
	font-size: 20px;
	}
	.author sup {
	font-size: 30px;
	}
	.author_extra {
	color: $if(secondary_colour)$$secondary_colour$$else$#008080$endif$;
	margin: 0;
	line-height: 85%;
	font-size: $if(authorextra_textsize)$$authorextra_textsize$$else$35px$endif$;
	}
	.outer h1 {
	text-align: center;
	margin-top: 0.5in;
	margin-bottom: 0.5in;
	}
	.outer h2 {
	text-align: center;
	}
	.outer p {
	color: $if(body_textcol)$$body_textcol$$else$#000000$endif$;
	}
	.outer ol {
	text-align: left;
	}
	.main {
	width: calc($if(poster_width)$$poster_width$$else$46in$endif$ * $if(main_width)$$main_width$$else$0.5$endif$);
	height: $if(poster_height)$$poster_height$$else$32in$endif$;
	position: absolute;
	$if(main_width)$
	margin-left: calc($if(poster_width)$$poster_width$$else$46in$endif$ * ((1 - $main_width$) / 2));
	$else$
	margin-left: calc($if(poster_width)$$poster_width$$else$46in$endif$ * 0.25);
	$endif$
	background-color: $if(primary_colour)$$primary_colour$$else$#0b4545$endif$;
	color: $if(main_textcol)$$main_textcol$$else$#FFFFFF90$endif$;
	font-family: $if(main_fontfamily)$$main_fontfamily$$else$Special Elite$endif$;
	$if(main_image)$
	background-image: url($main_image$);
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
	$else$
	background-image: linear-gradient($if(primary_colour)$$primary_colour$$else$#0b4545$endif$ 50%, $if(secondary_colour)$$secondary_colour$$else$#008080$endif$);
	}
	$endif$
	.main strong {
	color: $if(mainstrong_fontcol)$$mainstrong_fontcol$$else$#FFFFFF$endif$;
	}
	img.main-img-left {
	width: $if(mainimage_leftsize)$$mainimage_leftsize$$else$20%$endif$;
	left: 0.5in;
	bottom: 0.2in;
	position: absolute;
	}
	img.main-img-right {
	width: $if(mainimage_rightsize)$$mainimage_rightsize$$else$18%$endif$;
	right: 0.5in;
	bottom: 0.2in;
	position: absolute;
	}
	.main p {
	padding-top: 20%;
	font-size: $if(main_textsize)$$main_textsize$$else$170px$endif$;
	text-align: left;
	}
	.fab {
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 25px;
	}
	.twitter, i {
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 35px;
	text-decoration: none;
	}
	a.email {
	text-decoration: none;
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 35px;
	}
	.envelope {
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 5px;
	text-decoration: none;
	}
	.globe {
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 5px;
	text-decoration: none;
	}
	.github > .fab {
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 40px;
	text-decoration: none;
	}
	.globetext {
	color: $if(affiliation_textcol)$$affiliation_textcol$$else$#00000060$endif$;
	font-size: 35px;
	text-decoration: none;
	}
	.poster_wrap {
	width: $if(poster_width)$$poster_width$$else$46in$endif$;
	height: $if(poster_height)$$poster_height$$else$32in$endif$;
	padding: 0cm;
	background-color: $if(body_bgcol)$$body_bgcol$$else$#ffffff$endif$;
	}
	span > #tab:mytable {
	font-weight: bold;
	}
	.section {
	padding-left: $if(column_padding)$$column_padding$$else$10mm$endif$;
	padding-right: $if(column_padding)$$column_padding$$else$10mm$endif$;
	}
	.main p {
	padding-left: $if(main_padding)$$column_padding$$else$30mm$endif$;
	padding-right: $if(main_padding)$$column_padding$$else$30mm$endif$;
	}
	.main_pic {
	width: $if(main_picwidth)$$main_picwidth$$else$50%$endif$;
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	.orcid img {
	width: 3%;
	}
	</style>
	$if(custom_css)$
	<link rel="stylesheet" href=$custom_css$>
	$else$$endif$
	</head>
	<body>

	$for(include-before)$
	$include-before$
	$endfor$

	<div class="poster_wrap">
	<div class="column outer">
	<br>
	<div class="title section">
	$if(title)$
	<h1 id="title">$title$</h1>
	<br>
	$else$$endif$
	$if(author)$
	<h3 id="author" class="author">

	$for(author)$
	$if(author.main)$
	$author.name$<sup> $author.affil$$if(author.orcid)$, <a class="orcid" href="https://orcid.org/$author.orcid$"><img src="https://raw.githubusercontent.com/brentthorne/posterdown/master/images/orcid.jpg"></a>$else$$endif$</sup><br>
	$if(author.twitter)$<a class="twitter" href="https://mobile.twitter.com/$author.twitter$"><i class="fab fa-twitter"></i> @$author.twitter$</a> <br>
	$else$$endif$
	$if(author.email)$
	<a class='envelope'><i class="fas fa-envelope"></i></a> $author.email$ <br>
	$else$$endif$
	$if(author.website)$
	<a class='globe'><i class="fas fa-globe"></i></a> <a class='globetext'> $author.website$</a> <br>
	$else$$endif$
	$if(author.github)$
	<a class='github'><i class="fab fa-github"></i></a><a class='globetext' href="https://github.com/$author.github$">  @$author.github$</a>
	$else$$endif$
	$else$$endif$
	$sep$ $endfor$
	</h3>
	$else$$endif$

	$if(author)$
	<h5 id="author_extra" class="author_extra">
	$for(author)$
	$if(author.main)$
	$else$
	$author.name$<sup>$author.affil$$if(author.orcid)$, <a class="orcid" href="https://orcid.org/$author.orcid$"><img src="https://raw.githubusercontent.com/brentthorne/posterdown/master/images/orcid.jpg"></a>$else$$endif$</sup>
	$endif$
	$sep$ $endfor$
	</h5>
	$else$$endif$

	<p id="affiliation" class="affiliation">
	$for(affiliation)$<sup>$affiliation.num$</sup> $affiliation.address$$sep$<br> $endfor$
	</p>

	</div>
	$body$

	</div>
	<div class="main">
	<p>$for(main_findings)$$main_findings$$sep$<br><br> $endfor$</p>
	$if(logoleft_name)$$logoleft_name$$else$$endif$
	$if(logoright_name)$$logoright_name$$else$$endif$
	</div>
	</div>

	$if(math)$
	<!-- dynamically load mathjax for compatibility with self-contained -->
	<script>
	(function () {
	var script = document.createElement("script");
	script.type = "text/javascript";
	var src = "$if(mathjax)$$mathjax$$endif$";
	if (src === "" \|\| src === "true") src = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML";
	if (location.protocol !== "file:" && /^https?:/.test(src))
	src = src.replace(/^https?:/, '');
	script.src = src;
	document.getElementsByTagName("head")[0].appendChild(script);
	})();
	</script>
	$endif$

	$for(include-after)$
	$include-after$
	$endfor$

	</body>
	</html>