/* div { border: 1px solid lightgray; } */

body {
	margin: 0;
	padding: 0;
	color: #000;
    background: #EEE;
    vertical-align: top;
    font-family: helvetica, sans-serif; 
    font-size: 15px;
}

h1, h2, h3, h4, h5, p {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
}

h1, .headline  {
    font-size: 3em;
    font-weight: bolder;
    margin-top: 0em;
}

h2 {
	border-bottom: 1px solid gray; 
	margin-top: 1.5em;
}

h3, h4 {
	font-size: 1em;
	font-weight: bold;
	border-bottom: 1px solid lightgray; 
	margin-top: 1.5em; 
}

a:link    { color: #222; background-color: transparent; }
a:active  { color: #222; background-color: transparent; }
a:hover   { color: #CCC; background-color: transparent; }
a:visited { color: #333; background-color: transparent; }

img { border: 0; margin-left: auto; margin-right: auto; }

hr {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
}

ul {
	list-style-type: square;
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
}

li {
	margin-left: 16pt;
	margin-right: 16pt;
	margin-bottom: 4pt; 
}

dl {
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
	line-height: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin-top: -1.5em;
	margin-left: 6em;
}

pre {
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
	border: 1pt solid #DDD;
	color: #111;
	background: #EEE;
	font-size: .75em;
	max-width: 512pt;
}

pre img {
	max-width: 500pt;
	border: 2pt solid grey;
}

.banner {
	height: 128pt;
	background-color: #444; 
	color: #DDD; 
	margin-bottom: 8pt;
	margin-right: 0;
	margin-left: 0;
}

.logo {
	width: 96px;
	height: 96px;
	font-size: 78px;
	padding: 5px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 20px;
	float: left;
}

.header {
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
	padding-top: 1em;
}

.tagline {
	margin-top: 0.5em;
	font-size: 1.5em;
}

.navigation {
	margin-top: 0.5em;
	padding: 4pt;
}

.navigation a:link    { color: #DDD; background-color: transparent; }
.navigation A:link    { color: #DDD; background-color: transparent; }
.navigation A:active  { color: #DDD; background-color: transparent; }
.navigation A:visited { color: #DDD; background-color: transparent; }
.navigation A:hover   { color: #F93; background-color: transparent; }

.nav { margin: 2pt; }

.number {
	padding: 2pt;
	background: #060;
	color: white; 
}

.content {
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 3em;
}

.footer {
	border-top: 1pt solid #666;
	background: #EEE;
	color: #666;
	padding: 8pt;
	margin-left: 0pt;
	margin-right: 0pt;
	margin-top: 16pt;
	margin-bottom: 0pt;
	font-size: .6em;
	text-align: center;
}

.footer A:link    { color: #555; background-color: transparent; }
.footer A:active  { color: #555; background-color: transparent; }
.footer A:visited { color: #555; background-color: transparent; }

.subhead {
    font-size: 2em;
    font-weight: bolder;
    margin: 1em;
    clear: left;
}

.underscore	{
    font-size:  1.5em;
    font-weight: bolder;
    margin: 1em;
    clear: left;
    border-bottom: 2pt solid #666;
}

.release {
	font-size: 1em;
	font-weight: lighter;
	background-color: transparent;
	clear: left;
}

.icon { vertical-align:middle; border:0; }
.grab { width: 640pt; margin:0; padding:0; border:0; }

.q  {
	font-size: 1.1em; 
	font-weight: bold; 
}

.nav { border: 0; }


.group {
	width: 420pt;
	padding: 10pt;
	border: 2pt solid #360; 
	margin: 20pt;
}

.inducement {
    font-size: 2em;
    font-weight: bolder;
}

sup {
	font-size: .9em;
	font-weight: bolder;
}

.fineprint {
	color: #666;
	background-color: transparent;
	font-size: .666em;
}

.mark {
	color: #666;
	background-color: transparent;
	font-size: .666em;
	text-decoration: none;
    vertical-align: super;
}

.search {
	color: #111;
	background: #DDE;
	margin: -1pt;
	padding: 2pt;
	border: 2pt solid #EEE;
	text-align: center;
}

.news strong {
	font-size: 14pt;
	font-weight: bolder;
	line-height: 2em;
}

.quotes {
	margin: 1em;
	padding: 1em;
	border: 1pt solid #DDD;
	color: #000;
	background: #F5F5F5; 
}

.quote {
	font-size: .8em;
	text-align: left;
	padding: 0;
	margin-left: 2em;
	margin-right: .5em;
	margin-bottom: .5em;
	max-width: 420pt;
} 

.quote b {
	font-weight: bolder;
}

.quote strong {
	display: block;
	margin-top: .33em;
}

.helpimage {
	margin: 10pt;
	float: right;
}

.rssfeed {
}

.rsschannel {
	margin: 10pt;
}

.rsstitle {
	font-size: 2em;
	font-weight: bolder;
	line-height: 2em;
}

.rssdescription {
	font-size: 1.5em;
	font-weight: bold;
	margin-bottom: 30pt;
}

.rssdate {
	font-weight: bolder;
	border-bottom: 1pt solid lightgrey;
}

.rssitem {
	margin-bottom: 16pt;
}

.rsslink {
}

.download  {
	padding: 56pt; 
	font-size: 1.5em; 
	float: left;
}

.shantytown {
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
}

.shack {
	margin: 2em;
	float: left;
}

.screenshot {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.betabox {
	border: 2pt solid orange; 
	padding: 2em;
	margin-left: auto;
	margin-right: auto;
	max-width: 512pt;
}

.form {
	margin-top: 2em;
	margin-left: auto;
	margin-right: auto;
	max-width: 420pt;
	font-size: .8em;
}

.method {
	margin-left: 1em;
}

.error
{
	padding: 1em;
	border: 2pt solid #B00;
	color: #000;
	background: #FCC;
}

.support
{
	padding: 1em;
	border: 2pt solid #00C;
	color: #000;
	background: #DDF;
}

input { padding: .1em; }
.invalid { border: 2pt solid red; }
.valid { border: 2pt solid green; }

.hero-image {
	max-width: 512pt;
	height: auto;
}

.sidekick-image {
	max-width: 420pt;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.app {
	max-width: 512pt;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2em;
	clear: both; 
}

.app-emoji { font-size: 80px; margin-left: 5px; margin-right:5px; float: left; }
.app-emoji a { text-decoration: none; }
.app-icon { float: left; margin-right:.5em; }

/* captions */
.caption { text-align: center; font-size: 0.75em; color:darkgray; }
.caption a { color: darkgray; }


/* cards */

.cards {
	margin-left: auto;
	margin-right: auto;
	width: 512pt; 
}

.card {
	color: #111;
	background: #FFF;
	float: left;
	width: 230pt;
	height: 80pt;
	/* border: 2px solid gray; */
	border-bottom: 4px solid #444;
	padding: .6em;
	margin: .3em;
	text-align: left;
	/* border-radius: 6px; */
	font-size: 0.9em;
}

.card img {
	width: 96px;
	height: auto;
	float: left;
	margin-top: .5em;
	margin-bottom: .5em;
	margin-right: .5em; 
}

.card .app-emoji {
	float: left;
	margin-right: .25em; 
}

/* carousel */

.carousel {
	width: 512pt; 
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
}

.panes {
	width: 600%;
	position: relative;
	overflow: hidden;
	animation: carousel 30s infinite;
}

.panes > div {
	position: relative;
	float: left;
	width: 16.6%;
	margin: 0;
}

.carousel img {
	display: block;
	width: 100%;
}

@keyframes carousel{
    0%    { left:0%; }
    8%    { left:0%; }
    16%   { left:-100%; }
    25%   { left:-100%; }
    33%   { left:-200%; }
    42%   { left:-200%; }
    50%   { left:-300%; }
    58%   { left:-300%; }
    66%   { left:-400%; }
    75%   { left:-400%; }
    83%   { left:-500%; }
    91%   { left:-500%; }
    100%  { left:0%; }
}


/* media selectors */

@media screen and (max-width: 666px) {
	h1, h2, h3, h4 { font-size: 1.2em; }
	h1, h2, h3, h4, p { margin-top: 1em; padding: 0; }

	.banner { height: 96pt; }
	.logo { width: 40pt; height: 40pt; margin-top: -4pt; }
	.headline { font-size: 1.5em; margin: 0; padding: 0; }
	.tagline { font-size: .75em; }
	.navigation { font-size: .8em; margin-left: 1em; margin-right: 1em; margin-top: .125em; }
	.hero-image, .sidekick-image {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.app { font-size: .6em; }
	.carousel { width: 100%; }
	.cards { width: 100%; }
	.card { float: none; margin-right: auto; margin-left: auto; font-size: .8em; }
}

@media screen and (max-width: 333px) {
	body, h1, h2, h3, h4, h5, p { max-width: 320px; }

	.banner { height: 64pt; }
	.logo { width: 32pt; height: 32pt; margin-top: 0; margin-bottom: 2em; }
	.headline { font-size: 1em; }
	.tagline { margin: 0; padding: 0; }
	.navigation { font-size: 0.6em; margin: 0; }
	.card { width: 240px; font-size: .8em; }
}

@media (prefers-color-scheme: dark) {
	body {
		color: #EEE;
	    background: #000;
    }

	a:link    { color: #EEE; background-color: transparent; }
	a:active  { color: #EEE; background-color: transparent; }
	a:hover   { color: #EEE; background-color: transparent; }
	a:visited { color: #EEE; background-color: transparent; }

	.caption a { color: #EEE; }
	.card a { color: #333; }


}