/* common.css for bitfume.com */

/* web fonts */
/* this one triggers a firefox error for some reason */
/* @font-face {
	font-family: 'HelveticaLightTTF';
	src: local('Helvetica Neue Light'), local('Helvetica-Neue-Light'), local('HelveticaNeueLight'), local('Helvetica Light'), local('Helvetica-Light'), local('HelveticaLight'), url('fonts/helvetica-light.ttf') format('truetype');
} */  /* 41 KB */
@font-face {
	font-family: 'HelveticaLightWOFF';
	src: local('Helvetica Neue Light'), local('Helvetica-Neue-Light'), local('HelveticaNeueLight'), local('Helvetica Light'), local('Helvetica-Light'), local('HelveticaLight'), url('fonts/helvetica-light.woff') format('woff');
} /* 20 KB */
/* @font-face {
	font-family: 'EmojiSymbolsTTF';
	src: url('../fonts/emoji-symbols.ttf') format('truetype');
} */ /* 25 KB */
@font-face {
	font-family: 'EmojiSymbolsWOFF';
	src: url('../fonts/emoji-symbols.woff') format('woff');
} /* 18 KB */

/* general */
* { outline: none; }
html, body {
	font-family: 'HelveticaLightWOFF', 'Helvetica Neue', 'Helvetica-Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;
	font-size: 11pt;
	font-weight: normal;
	line-height: 1.4em;
	letter-spacing: 0.035em;
}
body {
	max-width: 8.5in;
	margin: auto;
	padding: 0.5in;
}
th { line-height: normal; }
.clear { clear: both; }
strong, b {
	font-family: 'Helvetica Neue Bold', 'Helvetica-Neue-Bold', 'HelveticaNeueBold', 'Helvetica Bold', 'Helvetica-Bold', 'HelveticaBold', Helvetica, 'Arial Bold', 'Arial-Bold', 'ArialBold', Arial, sans-serif;
	letter-spacing: normal;
}

/* links */
a { color: #249adb; }
a:hover { color: #7bbe31; }

/* headings */
h1, h2, h3, h4, h5, h6, h7 { font-weight: normal; line-height: normal; }
h1 { font-size: 30pt; }
h2 { font-size: 20pt; }
h3 { font-size: 16pt; }
h4 { font-size: 14pt; }
h5 { font-size: 13pt; }
h6 { font-size: 12pt; }
h7 { font-size: 11pt; }
/* h2 { border-bottom: 1px solid #cc0000; } */

/* images */
img.pixel { image-rendering: pixelated; } /* upscaling only */
img.crisp { image-rendering: crisp-edges; } /* scaling up or down */
/*
ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;
*/
img.webkit { image-rendering: -webkit-optimize-contrast; }
img.auto { image-rendering: auto; }

/* note boxes and separators */
.note {
	padding: 1em;
	border: 2px solid #ccc;
	/* #249adb = blue */
	/* #cc0000 = red */
}
hr {
	border: none;
	height: 2px;
	color: #249adb;
	background-color: #ccc;
	margin-top: 24pt;
	margin-bottom: 24pt;
}

/* boxes and such */
.box {
	padding: 1em;
	border: 1px solid #ccc;
}
.code, .pre {
	white-space: pre-wrap;
	font-family: monospace;
}
/* white-space:
			auto	html	html
			wrap	spaces	breaks	notes
normal		yes		no		no		-
nowrap		no		no		no		-
pre			no		yes		yes		same as <pre> tag
pre-line	yes		no		yes		-
pre-wrap	yes		yes		yes		-
???			yes		yes		no		no formal support
*/

/* tables */
table { border: 1px solid #ccc; border-spacing:0; border-collapse: collapse; width: 6in; margin-bottom: 1em; }
table.float { width: 4in; margin-left: 0.5in; float: left; margin-bottom: 0.5in; }
table.float:nth-of-type(1) { margin-left: 0in; }

th { text-align: left; vertical-align: top; font-weight: normal; font-size: 12pt; background-color: #eee; padding: 12pt; border-bottom: 1px solid #ccc; }
th:first-child { text-align: left; }
th:last-child { text-align: right; }
th.main, th.main:first-child, th.main:last-child { font-size: 18pt; text-align: left; border-bottom: none; padding-bottom: 0;}
td { text-align: left; vertical-align: top; padding: 12pt; padding-bottom: 4pt; padding-top: 8pt; }
td:first-child { text-align: left; }
td:last-child { text-align: right; }
td.underline { border-top: 1px solid #ccc; height: 1px; padding: 0;}
.left   { text-align: left;       }
.center { text-align: center;     }
.right  { text-align: right;      }
.top    { vertical-align: top;    }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }

/* fancy button */
a.button {
	display: inline-block; padding: 0.5em; padding-right: 1em; padding-left: 0.75em; color: #fff; background-color: #249adb; text-decoration: none; border-radius: 12pt; text-align: center; min-width: 1in; line-height: 1.4em; margin-right: 0.5em; margin-bottom: 0.5em; }
a.button:hover {
	background-color: #7bbe31; }
a.button span:first-child {
	display: inline-block; position:relative; bottom: -0.2em;}

/* back / top buttons (with unicode icons) */
a.button.back span:first-child {
	display: inline-block; position:relative; bottom: -0.2em;}
a.button.top span:first-child {
	display: inline-block; position:relative; bottom: 0.1em;}

/* other fancy buttons (currently no special styles) */
/* a.button.permalink, a.button.print, a.button.download */

/* file download / symbol link */
a.symbol { font-size: 12pt; }
a.symbol span:first-child { font-family: 'EmojiSymbolsWOFF', 'Apple Symbols', 'Arial Unicode', 'Arial Unicode MS'; display: inline-block; position:relative; bottom: -3px; text-decoration: none; font-size: 130%; margin-right: 0.3em; }

/* table of contents */
.toc { }
/* add breaks after table of content links */
.toc a:after {
	content: "\a";
    white-space: pre;
}

/* expanding section */
div.expand-link {
	display: inline-block;
	padding-right: 1em;
	margin-bottom: 1em;
	cursor: pointer;
	color: #000000;
	-webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}
/* smaller, sub-text; eg 'click to expand' */
div.expand-link span {
	font-size: 0.75em;
	text-transform: uppercase;
	color: #aaa;
	letter-spacing: 0.1pt;
}
div.expand-link:hover {
	color: #7bbe31;
}
div.expand-link ::selection { background: transparent !important; }
div.expand-link ::-moz-selection { background: transparent !important; }
div.expand {
	border: 2px solid #cccccc;
	padding: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
	margin-bottom: 2em;
	display: none;
}
div.expand-link.collapsed span:first-child:before { }
div.expand-link.expanded span:first-child:before { }

/* mobile */

@media only screen and (max-device-width: 5in) {
	/* mobile - portrait */
	html, body { font-size: 13pt; }
	h1 { font-size: 30pt; }
	h2 { font-size: 24pt; }
	h3 { font-size: 20pt; }
	h4 { font-size: 18pt; }
	h5 { font-size: 16pt; }
	h6 { font-size: 14pt; }
	h7 { font-size: 13pt; }
	a.button { font-size: 13pt; }
	a.symbol { font-size: 13pt; }
}


@media only screen and (max-device-width: 640px) {
	/* portrait */
}
@media only screen and ((min-width:320px) and (max-width:767px) and (orientation:landscape)) {
	/* landscape */
}
/* @media only screen and ((min-width:768px) and (max-width:1024px) and (orientation:landscape)) { } */ /* tablet landscape */

/* print formatting */
/* page breaks, link restyling, button hiding, source text */
/* using !important to force an override of any other settings */
@media screen { .print { display: none; } }
@media print {
	a {
		color:black !important;
		text-decoration: none !important;
		font-weight: normal !important;
		font-family: 'Helvetica Neue Bold', 'Helvetica-Neue-Bold', 'HelveticaNeueBold', 'Helvetica Bold', 'Helvetica-Bold', 'HelveticaBold', Helvetica, 'Arial Bold', 'Arial-Bold', 'ArialBold', Arial, sans-serif !important;
		letter-spacing: normal !important;
	}
	a.button{ display: none !important; }
	a.back{ display: none !important; }
	.page-break {
		page-break-before: always !important;
		padding-top: 0.5in !important;
	}
	/* the below doesn't work in webkit due to a bug */
	/* .page-break:before {
		text-align: right;
		content: 'Printed from bitfume.com.';
		position: fixed;
		bottom: 0in;
		right: 0in;
		display: block;
		z-index: 1000;
		color: black;
		background-color: white;
		padding-top: 1em;
		padding-left: 1em;
	} */
	.expand-link { display: none !important; }
	.expand { display: block !important; }
	.print { display: block !important; }
	.no-print { display: none !important; }
}