/*
	Spearmint main style sheet
*/

body { margin: 0; padding: 0; background-color: #8A9; color: #000; }
#outer { margin: 10px 0; width: 100%; background-color: #FFF }
.illustration { width: 60%; max-width: 600px; height: auto; }
div.logoareatext { padding-top:5%; padding-left:5%; }
div.logoarea { padding-top:15%; padding-left:10%; width: 30%; max-width: 256px; }
img.logoarea { width: 100%; max-width: 256px; height: auto; }
div.screenshot { text-align: center; background-color: #555; }
img.screenshot { width: 100%; max-width: 480px; height: auto; }
.sectionHeader { clear: both; text-align: center; padding:10px; background: #555; color: #FFF; }
.whatisContent { padding-left: 1em; padding-right: 1em; }
.sectionContent { padding-left: 1em; padding-right: 1em; padding-bottom: 1em; }

/* Float the page in the center of the browser. */
@media screen and (min-width: 1024px) {
	body { padding-left: 10px; padding-right: 10px; }
	#outer { margin: 10px auto; width: 70%; }
	.whatisContent { padding-left: 2em; padding-right: 2em; }
	.sectionContent { padding-left: 2em; padding-right: 2em; padding-bottom: 2em; }
}

/* Big enough that having screenshot float at right side won't crush content text */
@media screen and (min-width: 1500px) {
	div.screenshot { float: right; text-align: none; background-color: none; }
	img.screenshot { width: 460px; height: 259px; }
	.whatisContent { padding-left: 2em; padding-right: 470px; }
}

/* Header sizes */
h1 {font-size: 1.6em; padding: 0; margin: 0}
h2 {font-size: 1.4em; padding: 0; margin: 0}
h3 {font-size: 1.2em; padding: 0; margin: 0}
h4 {font-size: 1.2em; padding: 0; margin: 0; text-decoration: underline}

a:link {color:#898;} /* unvisited link */
a:visited {color:#676;} /* visited link */
a:hover {color:#080;} /* mouse over link */
a:active {color:#080;} /* selected link */

@font-face
{
font-family: mplus-1mn-regular;
/* http://mplus-fonts.sourceforge.jp/webfonts/mplus-1mn-regular.ttf */
src: url('../fonts/mplus-1mn-regular.ttf')
     format("truetype");
}

/*
h1, h2, h3, h4, h5, h6 {
  font-family: mplus-1mn-regular;
}

.title {
  font-family: mplus-1mn-regular;
}
*/