@charset "utf-8";
@import url("./fonts.css");

/* ----- RESET BROWSER DEFAULTS ----- */
*
{
	margin: 0;
	padding: 0;
}

a
{
	text-decoration: none;
}

a#themeSwitcher
{
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	cursor: pointer;
	display: block;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: 400;
}

ul,
dl
{
	list-style: none;
}

html
{
	font-size: 10px;
	min-width: 344px;
	padding: 5px 20px;
}

body
{
	font-size: 1.7rem;
	line-height: 1.35em;

	font-family: "Chrono", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

	max-width: 92rem;
	margin: 0 auto 0 auto;
	padding: 1.6rem 0rem 1.6rem 0rem;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

strong,
b
{
	font-weight: 600;
}

em,
i
{
	font-style: italic;
}

strong em,
em strong
b i,
i b
{
	font-weight: 600;
	font-style: italic;
}

a.logo
{
	display: inline-block;
	background-image: url("/images/panic-logo-gray.svg");
	background-image: url("//signserver.panic.com/get/svg");
	background-repeat: no-repeat;
	background-size: 4.8rem 4.8rem;
	width: 4.8rem;
	height: 4.8rem;
	margin-right: 0.8rem;
	font-size: 4.8rem;
	color: transparent;
	text-indent: -99999px;
	line-height: 4.8rem;
}

a.siteTitle
{
	display: inline-block;
	font-weight: 200;
	text-decoration: none;
	font-size: 3.6rem;
	line-height: 4.8rem;
	letter-spacing: -0.05em;
	vertical-align: 0.15rem;
}

ul a
{
	text-decoration: none;
}

h1
{
	font-weight: 200;
	line-height: 4.4rem;
	letter-spacing: -0.0325em;
}

.postWrapper h1
{
	font-size: 3.6rem;
}

h2
{
	font-weight: 400;
	font-size: 2rem;
	line-height: 3.2rem;
}

h3
{
	font-size: 1.6rem;
	margin-bottom: 0.8rem;
}

h4
{
	font-weight: 400;
}

p,
pre
{
	margin: 0rem 0 1.6rem 0;
}

pre
{
	border-radius: 0.4rem;
	padding: 1.6rem;
	overflow: scroll;
	white-space: pre;
}

ul
{
	margin: 1.6rem 0 1.6rem 0;
	list-style: disc;
}

div#bugreporting,
div#t5Banner
{
	margin: 4.8rem auto;
	text-align: center;
	font-size: 2rem;
}

hr
{
	border: 0;
	border-bottom-width: 0.1rem;
	border-bottom-style: solid;
	margin: 1.6rem 0;
}

code
{
	font-family: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, "Ubuntu Mono", "DejaVu Sans Mono", "Courier New", monospace;
	padding: 0 0.15em;
	border-radius: 0.25em;
	/* border-width: 0.1rem;
	border-style: solid; */
}

pre
{
	border-radius: 0.8rem;
}

pre code
{
	background-color: inherit;
}

blockquote
{
	margin: 0.8rem 3.2rem 2.4rem 1.6rem;
	font-size: .85em;
	border-left-width: 8px;
	border-left-style: solid;
	padding: 0.8rem 1.6rem 0.8rem 1.6rem;
	display: inline-block;
	border-radius: 0.4rem;
}

blockquote p
{
	padding: 0;
	margin: auto;
}

p.lastUpdate,
p.flagArticle
{
	font-size: 1.6rem;
}



p.flagArticle
{
	display: inline;
}

.mainContent
{
	margin-bottom: 1.6rem;
}

footer
{
	margin-top: 4.8rem;
}

footer.pageFooter
{
	margin-top: 4.8rem;
	text-align: left;
}

footer #japan {
	display: inline-block;
	padding-left: 24px;
	text-align: right;
	background: url("/images/lang-jp.svg") left 13px no-repeat;
	background-position: top left;
	background-size: 20px 16px;
	height: 1em;
}

dt
{
	font-weight: 600;
}

li.featuredArticle,
#newArticles li.newArticle,
ul#generalArticles li,
ul.articleList li,
#results li
{
	background-position: top left;
	background-size: 1.6rem;
	background-repeat: no-repeat;
	padding-left: 2.4rem;
	margin: 0.24rem 0;
}

li.featuredArticle,
#newArticles li.newArticle,
ul#generalArticles li,
body.index ul.articleList li
{
	display: inline-block;
}

li.pinned
{
	font-size: 1.4em;
	line-height: 1.4em;
	padding: 1rem 1rem 0.25rem 1rem;
	background-image: none !important;
	margin-bottom: 2rem !important;
	border-radius: 0.8rem;

}

#section-list ul.articleList li
{
	display: block;
}

#results li {
	display: list-item;
}

#newArticles li.newArticle
{
	margin-top: 0.6rem;
}

li.pinned
{
	font-size:
}

li.general
{
	background-image: url("/images/summary.svg");
}

li.releasenotes
{
	background-image: url("/images/releasenotes.svg");
}

li.coda
{
	background-image: url("/images/product-coda.svg");
}

li.nova
{
	background-image: url("/images/nova-glyph.svg");
	background-position: 0 0.15em !important;
}

li.code-editor
{
	background-image: url("/images/product-coda-ios.svg");
}

li.transmit,
li.transmit5
{
	background-image: url("/images/product-transmit.svg");
	background-position: 0 0.25em !important;
}

li.transmit-ios
{
	background-image: url("/images/product-transmit-ios.svg");
}

li.prompt
{
	background-image: url("/images/product-prompt.svg");
}

li.statusboard
{
	background-image: url("/images/product-status-board.svg");
}

h2.relatedArticlesHeader
{
	margin-top: 2rem;
	margin-bottom: 2rem;
}

span.lastUpdate
{
	display: inline-block;
}

p.excerpt q:before,
p.excerpt q:after
{
	content: "";
}

ul.articleList
{
	list-style-type: none;
}

section#featuredArticles ul a
{
}

/* Tags */

ul#tagList
{
	margin: 0.8rem 0 1.6rem 0;
}

#tagList li
{
	font-size: 1.6rem;
	display: inline-block;
	padding: 0.56rem 0.8rem 0.4rem 0.8rem;
	margin: 0.4rem 1.2rem 0.4rem 0;
	line-height: 1.6rem;
	border-radius: 0.4rem;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

}

#tagList li:last-child
{
	margin-right: 0;
}

#tagList li a
{
	text-decoration: none;
	color: inherit;
}

/* Products */

#appList
{
	display: block;
}

#appList section
{
	display: inline-block;
}

#appList section h2,
#articleReporter legend
{
	display: block;
	text-align: center;
	font-weight: 200;
	font-size: 3.6rem;
	line-height: 4.8rem;
	letter-spacing: -0.216rem;
	background-size: 5.4rem;
}

#appList section h2
{
	background-position: center top;
	background-repeat: no-repeat;
}

#appList section h2 a
{
	display: block;
	text-decoration: none;
	padding-top: 6.3rem;
}

#appList section ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}


li.appList-cat
{
	margin: 1.6rem auto;
}

h2.catHeader-coda { background-image: url("/images/product-coda.svg"); }
h2.catHeader-transmit { background-image: url("/images/product-transmit.svg");  background-position: center .2em !important; }
h2.catHeader-statusboard { background-image: url("/images/product-status-board.svg"); }
h2.catHeader-code-editor { background-image: url("/images/product-coda-ios.svg"); }
h2.catHeader-transmit-ios { background-image: url("/images/product-transmit-ios.svg"); }
h2.catHeader-prompt { background-image: url("/images/product-prompt.svg"); }
h2.catHeader-nova { background-image: url("/images/nova-glyph.svg"); }

form,
input
{
	font-size: 1.6rem;
}

section.product-header
{
	background-repeat: no-repeat;
	background-position: top left;
	padding-left: 20.1rem;
	min-height: 18.1rem;
	margin-bottom: 2.4rem;
	background-size: 18.0rem 18.1rem;
}

#product-header-nova
{
	background-image: url("/images/nova-app-icon.png");
	background-size: 18rem 18rem;
	padding-left: 21.7rem;
	min-height: 18rem;
}

#product-header-coda
{
	background-image: url("/images/icon-coda25.png");
	background-size: 19.7rem 19.2rem;
	padding-left: 21.7rem;
	min-height: 19.2rem;
}

#product-header-transmit
{
	background-image: url("/images/icon-transmit5.png");
	background-size: 18.7rem 19.6rem;
	padding-left: 20.7rem;
	min-height: 19.6rem;
}

#product-header-transmit5
{
	background-image: url("/images/icon-transmit5.png");
	background-size: 18.7rem 19.6rem;
	padding-left: 20.7rem;
	min-height: 19.6rem;
}

#product-header-prompt
{
	background-image: url("/images/icon-prompt2.png");
}

#product-header-code-editor
{
	background-image: url("/images/icon-coda-ios.png");
	background-size: 18.1rem 18.1rem;
}

#product-header-transmit-ios
{
	background-image: url("/images/icon-transmit-ios.png");
}

#product-header-statusboard
{
	background-image: url("/images/icon-statusboard2.png");
}

/* Single Article */

#TableOfContents
{
	font-size: 1.3rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
	display: inline-block;

}

#TableOfContents ul
{
	margin: 0.5rem 0 1rem 0;
	padding: 0;
}

#TableOfContents ul li
{
	font-weight: 600;
	padding-top: 0em;
}

#TableOfContents ul li em
{
}

#TableOfContents ul ul
{
	margin-top: 0rem;
}

#TableOfContents ul li ul li
{
	padding-left: 1em;
	margin-top: 0;
	list-style-type: circle;
}

h1.postTitle a
{
	text-decoration: none;
}

.postBody h2,
.postBody h3,
.postBody h4
{
	margin: 2rem 0 0.5rem 0;
}

.postBody ul,
.postBody ol
{
	margin: 1em 0 2em 2em;
	list-style-position: outside;

}

.postBody ul ul,
.postBody ol ul
{
	margin: 0.5em 0 1em 0;
}

.postBody li
{
	margin-bottom: 0.55em;
}

.postBody dl
{
	margin: 1em 0;
}

.postBody dt
{
	margin-top: 1em;

}

.postBody dt,
.postBody dd
{
	border-left-width: 3px;
	border-left-style: solid;
	padding-left: 1em;
}

.postBody table
{
	display: table;
	border-collapse: collapse;
	margin: 1.6rem 0 2.4rem 0;
}

.postBody td,
.postBody th

{
	padding: 0.8rem;
	vertical-align: middle;
}

.postBody th,
.postBody th a
{
	text-transform: uppercase;
	letter-spacing: 0.15rem;
	font-size: 1.3rem;
}

h1.postTitle a,
.postBody th a
{
	color: inherit;
}

.postBody td p
{
	margin: 0.25em;
}

.postBody td a
{
	font-weight: 600;
}

.postBody th
{
	font-weight: 600;
	border-bottom: 1px solid;
}

.postBody img.fullwidth
{
	display: block;
	text-align: center;
	margin: 1.6rem auto 3.2rem auto;
	max-width: 100%;
	height: auto;
}

.postBody p.techNote
{
	padding: 1.6rem 3.2rem;
}

.postBody p + h2,
.postBody pre + h2

{
	margin-top: 4rem;
}

.postBody div[style] /* this is probably an embedded youtube video */
{
	margin: 1em auto;
}

#tldr
{
	background: url("/images/summary.svg") left center no-repeat;
	background-size: 1.6rem;
	padding-left: 2.4rem;
}

.breadcrumb-nav
{
	font-size: 0.85em;
	margin: 1em 0;

}

.breadcrumb
{
	font-weight: 600;
	text-transform: uppercase;
}


.breadcrumb a
{
	text-decoration: none;
}

.breadcrumb::after
{
	content: " > ";
}

.breadcrumb[data-here]::after
{
	content: "";
}


/* Search */

#search-container
{
	display: block;
	width: 90%;
	margin: 4em auto;
}

input#search
{
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	font-family: inherit;
	border: none;
	border-radius: 0.8rem;
	padding: 0.25em 0.5em 0.25em 1.75em;
	background-image: url("/images/search.svg");
	background-repeat: no-repeat;
	background-position: 0.5em 55%;
	background-size: 1em;
	width: 100%;
	font-weight: 200;
	transition: background-color 200ms linear;
	font-size: 3.6rem;
	margin: 0;
	display: block;
}

#search-results
{
	border-radius: 0.8rem;
	margin: 2.4rem auto;
	padding: 1.6rem;
}

#search-results h1
{
	/* background: url("/images/search.svg");
	background-position: center left;
	background-size: 1em;
	background-repeat: no-repeat;
	padding-left: 1em; */
	line-height: 1.5em;
	margin-top: 0;
}

#search-results.noResults h1,
#search-results h1.noResults
{
	display: none;
}

#search-results.noResults h1.noResults
{
	display: block;
}

ol#results
{
	margin: 1em 0;
}

ol#results li
{
	list-style: none;
	margin: 0 0 1em 1em;
}

#search-results.noResults ol {
	display: none;
}

li#Result a
{
}



/* ########################################### */
/*                                             */
/* ----- Wider than 540px -------------------- */
/*                                             */
/* ########################################### */

@media screen and (min-width: 540px)
{
	body
	{
		padding: 1.6rem 0rem 1.6rem 4.8rem;

	}

	h1
	{
		margin-top: 3.2rem;
		margin-bottom: 0.8rem;
	}

	body.toc
	{
		margin-left: 21vw;
		padding: 1.6rem;
	}

	body.toc #TableOfContents
	{
		padding: 1rem;
		display: inline-block;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		height: 100vh;
		width: 20vw;
		overflow: auto;
		z-index: 100;
		border-style: solid;
		border-width: 1px;
		margin-top: 0;
	}

	body.toc #TableOfContents ul {
		margin: 0 1rem;
	}

	body.toc #TableOfContents li
	{
		margin: 0;
	}

	header.pageHeader
	{
		white-space: nowrap;
		display: table;
		width: 100%;
		margin-left: -6.08rem;
	}

	body.toc header.pageHeader
	{
		margin-left: 0;
		display: block;
	}

	header.pageHeader div#shopMark
	{
		display: table-cell;
		vertical-align: middle;
	}

	header.pageHeader div#shopMark
	{
		text-align: left;
	}

	#appList
	{
		display: grid;
		grid-gap: 1em;
	}

	@media screen and (min-width: 680px)
	{
		#appList
		{
			grid-template-columns: 1fr 1fr 1fr;
		}
	}

	#appList section h2 a
	{
		display: block;
		text-decoration: none;
		padding-top: 6.3rem;
	}

	section#featuredArticles ul,
	section#newArticles ul,
	section.cat-general ul
	{
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-ms-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
		list-style-type: none;
		-webkit-column-gap: 4.8rem;
	}

	section#featuredArticles ul li,
	section.cat-general ul li
	{
		display: inline-block;
	}

	#tagList li
	{
		font-size: 1.6rem;
	}

	p.lastUpdate,
	p.flagArticle
	{
		font-size: 1.6rem;
	}

	#tldr
	{
		margin-left: -2.4rem;
	}

}


:target
{
	position:relative;

}

:target:before
{
	content: "☞";
	font-size: 2em;
	left: -1.3em;
	position: absolute;
	transform: rotate(24deg);

	-webkit-animation-name: wag;
	-moz-animation-name: wag;
	-ms-animation-name: wag;
	-o-animation-name: wag;
	animation-name: wag;
	-webkit-animation-duration: 300ms;
	-moz-animation-duration: 300ms;
	-ms-animation-duration: 300ms;
	-o-animation-duration: 300ms;
	animation-duration: 300ms;
	-webkit-animation-iteration-count: 2;
	-moz-animation-iteration-count: 2;
	-ms-animation-iteration-count: 2;
	-o-animation-iteration-count: 2;
	animation-iteration-count: 2;
	-webkit-animation-direction: alternate;
	-moz-animation-direction: alternate;
	-ms-animation-direction: alternate;
	-o-animation-direction: alternate;
	animation-direction: alternate;
	-webkit-animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-ms-animation-timing-function: ease-in-out;
	-o-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

body.toc :target:before
{
	left: -0.2em;
	position: relative;
	display: inline-block;

}

i.fa
{
    display: inline !important;
}

@keyframes wag {
  0%,
  100%     { transform: rotate(24deg); }
  50%      { transform: rotate(32deg); }
}

.releasenotes a[href*="?tag"]
{
    padding: 0.35em 0.45em 0.20em 0.45em;
    margin-right: 0.15em;
    border-radius: 0.4rem;
    color: #fff;
	font-weight: 600;
    line-height: 1em;
    font-size: 1.4rem;
    pointer-events: none;
    cursor: default;
}

section.releasenotes h1,
h1[id$="release-notes"]
{
    font-size: 4.8rem;
    letter-spacing: -0.05em;
	font-weight: 200;
    margin-bottom: 2rem;
}

section.releasenotes h1+ul,
section.releasenotes h1+ul li
{
    list-style: none;
    margin: 0 ;
    text-indent: 0;
}

section.releasenotes h1 + p + p a[title*="latest"],
.dl-button
{
    padding: 0.35em 0.45em 0.20em 0.45em;
    margin: 1rem 0;
    margin-right: 0.15em;
    border-radius: 0.4rem;
	font-weight: 600;
    font-size: 1.8rem;
    display: inline-block;
}

section.releasenotes h2
{
    margin-top: 8rem;
    font-size: 3.6rem;
	font-weight: 600;
}

section.releasenotes h2 + ul
{
	font-style: italic;
    display: block;
    margin: 0;
}

section.releasenotes h2 + ul li
{
    font-style: italic;
		font-weight: 200;
    display: block;
    margin-left: 0;
    text-indent: 0;

}

section.releasenotes h3
{
    font-size: 2.4rem;
}

ul#tagList li
{
	font-weight: 600;
}

strong em,
em strong
	{
		background-image: linear-gradient(-90deg, transparent 50%, tomato 50%);

		background-size: 200% 100%;

		animation-name: highlight;
		animation-duration: 2000ms;
		animation-delay: 1000ms;
		animation-timing-fuction: ease-in-out;
		animation-fill-mode: both;
	}

@keyframes highlight {
	from {
		background-position: 100% 0%;
	}

	to {
		background-position: 0% 0%;
	}
}