@charset "utf-8";

/* Fonts */

@font-face
{
	font-family: 'Chrono Regular';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebRegular.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebRegular.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Regular Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebRegularItalic.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebRegularItalic.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Medium';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMedium.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebMedium.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Medium Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebMediumItalic.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebMediumItalic.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Light';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLight.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebLight.woff') format('woff');
}

@font-face
{
	font-family: 'Chrono Light Italic';
	src:
		url('/fonts/ChronoWeb_EOT/ChronoWebLightItalic.eot?#iefix') format('embedded-opentype'), 
		url('/fonts/ChronoWeb_WOFF/ChronoWebLightItalic.woff') format('woff');
}

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

a
{
	text-decoration: none;
	color: inherit;
}

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

a img
{
	outline: none;
}

ul,
dl
{
	list-style: none;
}

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

body
{
	font-size: 1.5rem;
	line-height: 2rem;
	
	font-family: "Chrono Regular", 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;
}

p,
li,
dt,
dd,
code
{
	
}

strong,
b
{
	font-family: "Chrono Medium" sans-serif;
	font-weight: normal;
}

em,
i
{
	font-family: "Chrono Regular Italic", sans-serif;
	font-style: normal;
}

strong em,
em strong
b i,
i b
{
	font-family: "Chrono Medium Italic", sans-serif;
	font-style: normal;
}


a.logo
{
	display: inline-block;
	background-image: url("/images/panic-logo-gray.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-family: "Chrono Light", sans-serif;
	text-decoration: none;
	font-size: 3.6rem;
	line-height: 4.8rem;
	letter-spacing: -0.28rem;
	vertical-align: 0.15rem;
}

ul a
{
	text-decoration: none;
}

h1
{
	font-size: 2rem;
	line-height: 2.4rem;
	margin: 0.8rem 0 0.8rem 0;
}

body.index a.logo
{
/* 	background-image: url("/images/panic-logo-medium-blue.svg"); */
	background-image: url("//signserver.panic.com/get/svg")
}

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

h3
{
	font-family: 'Chrono Medium', sans-serif;
	font-size: 1.6rem;
	margin-bottom: 0.8rem;
}

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
{
	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: "Menlo", monospace;
	font-size: 1.4rem;

}

pre code
{
	border-radius: 0.8rem;
}

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-family: 'Chrono Medium', sans-serif;
}

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

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


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

#results li {
	display: list-item;
}

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

/* #results li.general, */
li.featuredArticle.general,
li.newArticle.general,
ul#generalArticles li,
ul.articleList li.general
{
	background-image: url("/images/summary.svg");
}

/* #results li.coda, */
li.featuredArticle.coda,
li.newArticle.coda,
ul.articleList li.coda
{
	background-image: url("/images/product-coda.svg");
}

/* #results li.coda-ios, */
li.featuredArticle.coda-ios,
li.newArticle.coda-ios,
ul.articleList li.coda-ios
{
	background-image: url("/images/product-coda-ios.svg");
}

/* #results li.transmit, */
li.featuredArticle.transmit,
li.newArticle.transmit,
ul.articleList li.transmit
{
	background-image: url("/images/product-transmit.svg");
	background-position-y: .2em;
}

/* #results li.transmit-ios, */
li.featuredArticle.transmit-ios,
li.newArticle.transmit-ios,
ul.articleList li.transmit-ios
{
	background-image: url("/images/product-transmit-ios.svg");
}

/* #results li.prompt, */
li.featuredArticle.prompt,
li.newArticle.prompt,
ul.articleList li.prompt
{
	background-image: url("/images/product-prompt.svg");
}

/* #results li.statusboard, */
li.featuredArticle.statusboard,
li.newArticle.statusboard,
ul.articleList 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
{

}

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

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

section#featuredArticles ul a
{
	font-family: 'Chrono Regular', sans-serif;
}

/* Tags */

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

#tagList li
{
	font-family: "Chrono Regular", sans-serif;
	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 section
{
	display: inline-block;
	width: 100%;
	margin-bottom: 3.2rem;
	vertical-align: top;
}

#appList section h2,
#articleReporter legend
{
	display: block;
	text-align: center;
	font-family: "Chrono Light", sans-serif;
	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;
}

#appList section li a
{
/* 	font-family: 'Chrono Medium'; */
}

#appList section li a.moreLink
{
	font-family: 'Chrono Regular', sans-serif;
}

section.appList-cat
{
	margin: 1.6rem 1.28rem 3.2rem 0;
}

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-coda-ios { 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"); }

form,
input
{
	font-family: "Chrono Regular", sans-serif;
	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-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-transmit.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-coda-ios
{
	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;
}

#TableOfContents ul li
{
	font-family: "Chrono Medium", sans-serif;
	padding-top: 0em;
}

#TableOfContents ul li em
{
	font-family: "Chrono Medium Italic", sans-serif;
}

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

#TableOfContents ul li ul li
{
	font-family: "Chrono Regular", sans-serif;
	padding-left: 1em;
	margin-top: 0;
	list-style-type: circle;
}


h1.postTitle
{
	font-family: "Chrono Light", sans-serif;
	font-size: 3.6rem;
	line-height: 4.4rem;
	letter-spacing: -0.216rem;
/* 	margin-bottom: 1em; */
}

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

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

.postBody h4
{
	font-family: "Chrono Medium", sans-serif;
}

.postBody ul,
.postBody ol
{
	margin: 1.6rem 0 2.4rem 0;
	list-style-position: inside;
}

.postBody ol li
{
	margin: 1.6rem 0 2.4rem 0;
}

.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

{
/* 	border-width: 1px; */
/* 	border-style: solid; */
	padding: 0.8rem;
	vertical-align: middle;
}

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

.postBody td p
{
	margin: 0.25em;
}

.postBody td a
{
	font-family: "Chrono Medium", sans-serif;
}

.postBody th
{
	font-family: "Chrono Regular", sans-serif;
	border-bottom: 1px solid;
}

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

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

.postBody p + h2,
.postBody pre + h2

{
	margin-top: 4rem;
}

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



/* Search */

#search-container,
body.toc header.pageHeader #search-container
{
	display: block;
}

input#search,
body.toc header.pageHeader input#search
{
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;	width: 100%;
	border: none;
	border-radius: 0.2rem;
	padding: 0.6rem 0.4rem 0.6rem 3.84rem;
	font-size: 1.92rem;
	background-image: url("/images/search.svg");
	background-repeat: no-repeat;
	background-position: .96rem center;
	background-size: 1.92rem;
	margin: 1.6rem 0;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#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: 1.6rem;
	background-repeat: no-repeat;
	padding-left: 2rem;
	line-height: 3.2rem;
	margin-top: 0;
}

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

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

ol#results
{
	margin: 1.6rem 0;
}

ol#results li
{
	list-style-position: inside;
	list-style: decimal;
	margin: 0rem 0 1.2rem 4.8rem;
}

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

li#Result a
{
}

/* Article Reporter */

span#reportArticle
{
	cursor: pointer;
}

fieldset#bait
{
	position: absolute;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	top: -100vh;
	z-index: 0;
}


#articleReporterTextLabel,
#articleReporterEmailLabel
{
	display: none;
}

section#articleReporter
{
	position: fixed;
	padding: 1rem;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%;
	height: 0;
	z-index: -100;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#articleReporter legend
{
	font-family: "Chrono Regular", sans-serif;
	font-size: 3.6rem;
	line-height: 5.04rem;
}

form#articleReporterForm
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#articleReporter fieldset
{
	display: block;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

textarea#articleReporterText
{
	height: 20rem;
	padding: 1rem;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	border: 0;

	border-radius: 0.4rem;
	border-style: solid;
	border-width: 1px;
	font-size: 1.8rem;
	line-height: 2.4rem;
	font-family: Menlo, monospace;

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

#articleReporter fieldset:nth-of-type(2)
{
	position: relative;
}

input#articleReporterEmail,
input#articleReporterSubmit,
input#articleReporterCancel
{
	font-size: 1.8rem;
	line-height: 2.4rem;
	display: block;
	box-sizing: border-box;
	border-radius: 0.4rem;
	padding: 0.4rem 0.8rem;
	margin: 1rem 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	border: 0;
	width: 100%;
}


input#articleReporterSubmit,
input#articleReporterCancel
{
	text-align: center;
	cursor: pointer;
}

body.articleReporting .postWrapper,
body.articleReporting .pageHeader,
body.articleReporting .pageFooter
{
	-webkit-filter: blur(0.4rem);
}

body.articleReporting section#articleReporter
{
	height: 100%;
	opacity: 1;
	z-index: 10;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}





/* ########################################### */
/*                                             */
/* ----- 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;
		background-color: rgba(255,255,255,0.8);
		border-color: white;
		border-style: solid;
		border-width: 1px;
		margin-top: 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,
	header.pageHeader div#search-container
	{
		display: table-cell;
		vertical-align: middle;
	}
	
	header.pageHeader div#shopMark
	{
		text-align: left;
	}
	
	header.pageHeader div#search-container
	{
		text-align: right;
	}
	
	input#search
	{
		width: 21.759rem;
		font-size: 1.6rem;
		padding-left: 2.4rem;
		margin: 0 -6.16rem 0 0;
	}
	
	#appList section
	{
		display: inline-block;
		vertical-align: top;
		width: 27.5rem;
	}
	
	#appList section h2
	{
	}
	
	#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;
	}
	
	ul#tagList
	{
/* 		margin-top: 3.2rem; */
/* 		margin-bottom: -1.6rem; */
	}
	
	#tagList li
	{
		font-size: 1.6rem;
	}
	
	p.lastUpdate,
	p.flagArticle
	{
		font-size: 1.6rem;
	}
	
	#tldr
	{
		margin-left: -2.4rem;
	}
	
	form#articleReporterForm
	{
		position: absolute;
		width: 75%;
		top: 20%;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	input#articleReporterSubmit,
	input#articleReporterCancel
	{
		display: inline-block;
		position: absolute;
		top: 5rem;
	}
	
	input#articleReporterEmail
	{
		width: '100%';
		display: block;
		left: 0;
	}
		
	input#articleReporterSubmit
	{
		width: 20%;
		right: 22%;
		margin: 0;
	}
	
	input#articleReporterCancel
	{
		width: 20%;
		right: 0%;
		margin: 0;
	}
	
	body.articleReporting section#articleReporter
	{
		-webkit-transition: opacity 0.25s ease;
		-moz-transition: opacity 0.25s ease;
		-ms-transition: opacity 0.25s ease;
		-o-transition: opacity 0.25s ease;
		transition: opacity 0.25s ease;
	}


}

h4#legacyTD,
h4#currentTD,
h4#sierra
{
	font-family: "Chrono Regular", sans-serif;
}

#sierra { display: none; }
#sierra.detected { display: block; }

.detected
{
	padding: 1em 2em;
	font-size: 1.3em;
	line-height: 1.3em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 8px;
}

: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;

}

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