@import url('https://fonts.googleapis.com/css?family=Raleway:900|Barlow:400,500');

body
{
	font-family: Barlow, DINOT, DIN, Helvetica, Arial, sans-serif;
	line-height: 1.4;
	background-color: #333;
	color: #eee;
	font-size: 130%;
	margin: 0 0;
	padding: 0 0;
}

.small
{
	font-size: 0.8em;
}

.large
{
	font-size: 1.2em;
}

.story p
{
	font-family: Palatino, Georgia, 'Times New Roman', serif;
	font-size: 1em;
}



@media (max-width: 800px)
{
	body 	{	font-size: 120%;	}
	.small 	{	font-size: 0.85em;	}
	.large 	{	font-size: 1.15em;	}
	.story p{	font-size: 1.1em;	}
}

@media (max-width: 440px)
{
	body 	{	font-size: 107%;	}
	.small 	{	font-size: 0.9em;	}
	.large 	{	font-size: 1.1em;	}
	.story p{	font-size: 1.05em;	}
}


.wrap
{
	display: block;
	border: 0px solid #000;
}

.candy
{
	background-color: #fc636d;
	color: #fff;
}
.candy h2
{
	color: #fff;
}

.marsipan
{
	background-color: #bfdb6e;
	color: #222;
}

.charcoal
{
	background-color: #444;
	color: #eee;
}


.charcoal h1, .charcoal h2
{
	color: #fff;
}

.paper h1, .paper h2
{
	color: #333;
}





.content
{
	min-width: 320px;
	max-width: 960px;
	margin: 0 auto;
	padding-bottom: 4em;
}


footer
{
	padding-bottom: 4em;
}





nav
{
	padding: 0 0;
	background-color: #fff;
	color: #444;
}

.charcoal nav.sub
{
	background-color: #444;
}

nav ul
{
	display: block;
	box-sizing: border-box;
	min-width: none;
	max-width: 960px;
	margin: 0 auto;
	padding: 0 0.5%;
	font-weight: bold;
}

nav.sub ul
{
	font-weight: normal;
}

nav ul li
{
	display: inline-block;
	margin: 0em 0em;
	padding: 0em 0em;
}

nav ul li a
{
	display: inline-block;
	padding: 1em 1.7ex;
}

nav.sub ul li a
{
	padding: 0.5em 1ex;
}

nav ul li.current
{	
	color: #999;
}

nav.sub ul li.current a
{
	border-bottom: 3px solid #666;
}

.candy nav ul li.current
{
	background-color: #fc636d;
	color: #ffdce3;
}

.marsipan nav ul li.current
{
	background-color: #bfdb6e;
	color: #fff;
}

.charcoal nav ul li.current
{
	background-color: #444;
	color: #fff;
}

.emblem
{
	font-weight: 300;
	letter-spacing: -1px;
}

nav ul li.current a
{
	color: #fff;
}




h1, h2, h3, h4, h5, h6
{
	font-family: Barlow, Helvetica, Arial, sans-serif;
}

h1
{
	font-family: Raleway, Barlow, Helvetica, Arial, sans-serif;
	font-size: 2.5em;
	font-weight: 900;
	text-transform: uppercase;
	color: #443;
	letter-spacing: 0.3ex;
	margin-top: 1em;
	margin-bottom: 0.5em;
	line-height: 1.3;
}

.h1sub
{
	margin-top: -1em;
}

h2
{
	font-size: 1.5em;
	font-weight: 400;
	color: #555;
	margin: 1em 0 0.2em 0;
	padding: 0 0;
	letter-spacing: -0.050em;
}

h3
{
	font-size: 1.2em;
	font-weight: 500;
	color: #555;
	margin: 1em 0 0.2em 0;
}






a, .paper a
{
	text-decoration: none;
	color: #00a0f0;

	-webkit-transition: color 125ms ease-out;
       -moz-transition: color 125ms ease-out;
         -o-transition: color 125ms ease-out;
            transition: color 125ms ease-out;
}



a:hover
{
	color: #00b0ff;
}

a.juicy
{
	display: inline-block;
	padding: 2ex 4ex;
	margin: 1ex auto;
	background-color: #eff;
	border-radius: 4px;
	border: 1px solid #acc;
}




.voiceover
{
	display: inline;
	color: #fff;
	background-color: rgba(0,0,0,0.45);
	border-radius: 2px;
	padding: 0.5ex 1ex 0.7ex 1ex;
	line-height: 2;

	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
}

.voiceover.descriptive
{
	color: rgba(255, 205, 215, 0.9);
}




section
{
	margin: 4% auto;	
	padding: 1ex 0;
	page-break-inside: avoid;
}

section.airy
{
	margin-top: 12%;
	margin-bottom: 16%;
}

section.tight
{
	margin-bottom: 0;
}

section.top
{
	margin-bottom: 0;
}


section p, section table
{
	padding: 0 0;
}

p
{
	padding: 0 0;
	margin: 0.5em 0 1em 0;
}

.chunky
{
	color: #fff;
	text-shadow:
		1px 1px #bbc7ce,
		2px 2px #bbc7ce,
		3px 3px #bbc7ce,
		4px 4px #bbc7ce,
		5px 5px #bbc7ce,
		6px 6px #bbc7ce,
		7px 7px #bbc7ce,
		8px 8px #bbc7ce,
		9px 9px #bbc7ce,
		10px 10px #bbc7ce,
		11px 11px #bbc7ce,
		12px 12px #bbc7ce,
		-4px -4px 15px #eee;
	letter-spacing: 0.2em;
	line-height: 1.5;
}

.candy .chunky
{
	text-shadow:
		0px 1px #ebb,
		0px 2px #ebb,
		0px 3px #ebb,
		0px 4px #ebb,

		1px 5px #c02e59,
		2px 6px #e03e69,
		3px 7px #e03e69,
		4px 8px #e03e69,
		5px 9px #e03e69,
		6px 10px #e03e69,
		7px 11px #e03e69,
		8px 12px #e03e69,
		9px 13px #e03e69,
		10px 14px #e03e69,
		11px 15px #e03e69,
		12px 16px #e03e69,
		-4px -4px 15px #ff8598;
}

.charcoal .chunky
{
	text-shadow:
		0px 1px #567,
		0px 2px #567,
		0px 3px #567,
		0px 4px #567,

		1px 5px #30363c,
		2px 6px #30363c,
		3px 7px #30363c,
		4px 8px #30363c,
		5px 9px #30363c,
		6px 10px #30363c,
		7px 11px #30363c,
		8px 12px #30363c,
		9px 13px #30363c,
		10px 14px #30363c,
		11px 15px #30363c,
		12px 16px #30363c,
		-4px -4px 15px #666;
}

.marsipan .chunky
{
	color: #c4e071;
	text-shadow:
		0px 1px #8fbd4a,
		0px 2px #8fbd4a,
		0px 3px #8fbd4a,
		0px 4px #8fbd4a,

		1px 5px #5d9c54,
		2px 6px #5d9c54,
		3px 7px #5d9c54,
		4px 8px #5d9c54,
		5px 9px #5d9c54,
		6px 10px #5d9c54,
		7px 11px #5d9c54,
		8px 12px #5d9c54,
		9px 13px #5d9c54,
		10px 14px #5d9c54,
		11px 15px #5d9c54,
		12px 16px #5d9c54,
		-4px -4px 15px #d0eb77;

}




.centered
{
	text-align: center;
}




.card
{
	position: relative;
	background-color: #fff;
	color: #494949;
	margin: 0 0;
	padding: 1ex 10%;
	border-radius: 2px;
	box-shadow:0px 1px 1px #000;
}

.card .corner-deco
{
	z-index: 0;
	position: absolute;
	top: -0.9ex;
	left: 0.1ex;
	font-size: 500%;
	font-family: Georgia, Helvetica, Arial;
	font-style: italic;
	color: #bfdb6e;
	text-shadow:
		0px 1px #8fbd4a,
		0px 2px #8fbd4a,
		0px 3px #8fbd4a,
		0px 4px #8fbd4a,

		1px 5px rgba(0,0,0,0.02),
		2px 6px rgba(0,0,0,0.02),
		3px 7px rgba(0,0,0,0.02),
		4px 8px rgba(0,0,0,0.02),
		5px 9px rgba(0,0,0,0.02),
		6px 10px rgba(0,0,0,0.02),
		-2px -2px 12px rgba(100,150,100,0.35);
}

.card h2
{
	color: #555;
}

a:hover .card
{
	box-shadow:0px 2px 2px #000;
}

a .card h2
{
	zz-color: #00b8f0;
	color: #00a0f0;
}

a:hover .card h2
{
	color: #00b0ff;
}




.badge-circle
{
	display: inline-block;
	zz-border: 2px solid #eee;
	background: #eee;
	height: 2em;
	width: 2em;
	line-height: 2;
	padding: 0 0;
	border-radius: 2ex;
	transition: background-color 0s, color 0s, transform 0.2s ease-out;
}


a:hover .card .badge-circle
{
	background: #0dc7ff;
	color: #fff;
	transform: scale(1.2,1.2);
}


/*
ul.tabbed-menu
{
	list-style-type: none;
	padding: 0 0 0 0ex;
	margin: 8% 0 12% 0ex;
}

ul.tabbed-menu li
{
	display: inline-block;
	margin: 1ex 0;
	font-family: Barlow, Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	font-weight: 500;
}

ul.tabbed-menu a,
ul.tabbed-menu .selected
{
	padding: 1ex 2ex 1ex 2ex;
	margin: 0 0;
}


ul.tabbed-menu .selected
{
	color: #555;
	text-shadow: 0px 1px 0px #fcfcfc;
}
*/


.label
{
	font-family: Barlow, Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	color: #777;
	padding-right: 2ex;
	white-space: nowrap;
}

.uc
{
	font-size: 0.7em;
	text-transform: uppercase;
	padding-top: 0.4em;
}

.faint
{
	color: #898989;
}

.fineprint
{
	color: #909090;
	font-size: 0.9em;
}

.discernible
{
	font-family: Monaco, "Lucida Console", "Courier New", Courier, monospace;
	letter-spacing: 0.1ex;
}

.warning
{
	font-family: Barlow, Helvetica, Arial, sans-serif;
	margin: 2em 0;
	text-align: center;
	font-size: 0.8em;
}

.warning .text-icon
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.3em;
	color: #eb3;
	position: relative;
	top: 0.2ex;
}


.caption
{
	display: block;
	max-width: 26em;
	margin-top: 0.5em ;
	margin-bottom: 1em;
	color: #4c4c4c;
	font-family: Barlow, Helvetica, Arial, sans-serif;
	line-height: 1.3;
	font-size: 0.9em;
}


.charcoal .caption
{
	color: #ddd;
}

.charcoal .faint
{
	color: #999;
}


details
{
	cursor: default;
}

details summary
{
	color: #00a0f0;
	cursor: pointer;
}

.charcoal details summary
{
	color: #00c4ff;
}



.paper p
{
	color: #333;
}

.paper .caption
{
	color: #444;
}








table
{
	border-spacing: 0 0.7ex;
}

td
{
	vertical-align: top;
	line-height: 1.2em;
}

td.label
{
	width: 1%;
}

.table-multi-column-spacer
{
	padding-left: 10ex;
}



ul
{
	list-style-type: square;
	padding: 0 0 0 0ex;
	margin: 0.5ex 0 1em 1em;
	list-style-position: outside;
}

ul li
{
	margin-bottom: 1ex;
	margin-left: 0em;
	line-height: 1.1em;
}

ul li b
{
	color: #554;
}

ul li p.detail
{
	margin: 0.1ex 0 1ex 0;
	font-size: 0.9em;
}


ul.link-list
{
	list-style-type: none;
	margin-left: 0ex;
}

ul li .icon
{
	font-size: 130%;
	position: relative;
	top: 0.1em;
	margin-right: 0.25ex;
	margin-top: 0.3ex;
	margin-bottom: 0.4ex;
}





.showcase-bg
{
}

.showcase
{
	display: block;
	margin: 2em auto 0em auto;
	width: 100%;
}

.polaroid
{
	background-color: #fff;
	padding: 2% 2%;
}

.polaroid .showcase
{
	margin: 0 0;
}


.elevated
{
	box-shadow: 0px 2px 2px #999;
}

.b-lazy
{
        -webkit-transition: opacity 250ms ease-in-out;
           -moz-transition: opacity 250ms ease-in-out;
             -o-transition: opacity 250ms ease-in-out;
                transition: opacity 250ms ease-in-out;
                 /*max-width: 100%;*/
                   opacity: 0;
                   min-height: 1px;
}

.b-lazy.b-loaded
{
               opacity: 1;
}




.lazy-container
{
	position: relative;
	xx-height: 0;
	xx-padding-bottom: 50%;
	zz-overflow: hidden;
	text-align: center;
}

.lazy-container.loading
{
	background: url("../media/loading.gif") no-repeat center center;
}

.lazy-container.loaded
{
}

.lazy-container.error
{
	background: #777 url(../media/error.png) no-repeat center center;
}



.lazy
{
	width: 100%;
	height: auto;
}

.lazy-noscript
{
	width: 100%;
	height: auto;
}

.lazy.loading
{
}

.lazy.loaded
{
}

.lazy.error
{
}


.img-container
{
	position: relative;
	height: 0;
	padding-bottom: 50%; /* Set actual explicitly */
	text-align: center;
}
.img-container img
{
	width: 100%;
	height: auto;
}


.img-deco-browser
{
	box-sizing: border-box;
	background: #6c6c6c;
	border-radius: 6px 6px 3px 3px;
	padding: 0.5%;
	padding-top: 4%;
	border-top: 1px solid #999;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.4);
}
.img-deco-browser img
{
	display: block;
}


.img-deco-mobile
{
	box-sizing: border-box;
	background: #6c6c6c;
	border-radius: 15px;
	padding: 2.5%;
	padding-top: 10%;
	padding-bottom: 15%;
	border-top: 1px solid #999;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.4);
}
.img-deco-mobile img
{
	display: block;
}


.img-deco-tablet
{
	box-sizing: border-box;
	background: #6c6c6c;
	border-radius: 10px;
	padding: 1.5%;
	padding-top: 4%;
	padding-bottom: 8%;
	border-top: 1px solid #999;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.4);
}
.img-deco-tablet img
{
	display: block;
}


.img-deco-polaroid
{
	box-sizing: border-box;
	background: #fff;
	border-radius: 2px;
	padding: 2.5%;
	box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.4);
}
.img-deco-polaroid img
{
	display: block;
}


@media (max-width: 700px)
{
	.img-deco-mobile 	{ border-radius: 10px; }
	.img-deco-tablet 	{ border-radius: 7px; }
}

@media (max-width: 550px)
{
	.img-deco-mobile 	{ border-radius: 6px; }
	.img-deco-tablet 	{ border-radius: 4px; }
}



a:hover .affordance-text
{
	color: #00b8f0;
}

a .affordance-label
{
	display: block;
	position: absolute;
	text-align: center;
	bottom: 42%;
	right: 4%;
	height: 1em;
	width: 1em;
	border-radius: 1em;
	background: rgba(0,0,0,0.6);
	color: #00c4ff;
	zz-color: #ccc;
	padding: 0 0;
	font-size: 2em;
	line-height: 0.8;
	font-weight: normal;
	box-shadow: 0px -1px 0px rgba(255,255,255,0.3);
	zz-border: 1px solid  rgba(255,255,255,0.9);
}

a:hover .affordance-label
{
	color: #fff;
	background-color: #00c4ff; 
	zz-border: 1px solid  #00c4ff;
	box-shadow: 0px 2px 0px rgba(0,0,0,0.1);
}


.lazy-preview
{
	display: block;
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 5px;
	right: 5px;
	height: auto;
	z-index: -1;
	background-color: #999;
	opacity: 0.75;
	border-radius: 3px;
}

.loading .lazy-preview
{
	background: #999 url(../media/loading.gif) no-repeat center center;
}


.loaded .lazy-preview
{
	display: none;
	opacity: 0;
	height: 0;
}

.error .lazy-preview
{
	background: #777 url(../media/error.png) no-repeat center center;
}



.flex-horiz
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	align-content: flex-end;
}

.flex-item-full
{
	width: 95%;
	margin: 0 0;
	padding: 0.5ex 2.5%;
}

.flex-item-half-break
{
	width: 45%;
	margin: 0 0;
	padding: 0.5ex 2.5%;
}

.flex-item-third
{
	width: 28%;
	margin: 0 0;
	padding: 0.5ex 2.5%;
}

.flex-item-twothirds
{
	width: 61%;
	margin: 0 0;
	padding: 0.5ex 2.5%;
}

.display-below-550w
{
	display: none;
}

@media (max-width: 700px)
{
	.flex-item-half-break 	{ width: 95%; }
}

@media (max-width: 550px)
{
	.display-below-550w	{ display: initial; }
	.display-above-550w	{ display: none; }
}








@media screen
{
	.print-only
	{
		display: none !important;
	}
}



@media print
{
	body	
	{
		font-size: 10.5pt;
		background-color: #fff;
		color: #000;
	}

	ul.tabbed-menu .selected
	{
		border-radius: 4px;
		border: 0px;
		background-color: #fff;
		padding: 0.7ex 0 0.3ex 0;
		margin: 0 0;
		position: relative;
		top: 0px;
		font-size: 1.4em;
	}

	.chunky
	{
		margin-top: 10%;
		margin-bottom: 5%;

		color: #000;
		text-shadow: none;
	}

	a
	{
		color: #000;
	}

	ul li b
	{
		color: #000;
	}

	.no-print
	{
		display: none !important;
	}


}