/* CSS particular to the splash page. */


header {
	margin: auto;
	font-family: "Magra", sans-serif;
	}
header h1 {
	text-align: center;
	color: #BDD9DD;
	font-size: 72pt;
	letter-spacing: -0.07em;
	}
header h2 {
	text-align: center;
	color: #5BB8B6;
	font-size: 16pt;
	margin-top: -2pt;
	}



#ScreenshotCanvas {
	background: url(images/DesktopBackground.jpg) no-repeat;
	background-size: cover;
	padding: 0;
	margin: auto;
	min-width: 830px;
	}

#ScreenshotCanvas div {
	/* Inner containing div, which is floated by 'margin: auto' in the main div. */
	position: relative;
	width: 830px;
	margin: auto;
	height: 425px;
	}

#ScreenshotCanvas a {
	position: absolute;
	}

#ScreenshotCanvas img {
	box-shadow: 2px 2px 5px 0px #aaa;
	}

#ScreenshotCanvas img:hover {
	box-shadow: 2px 2px 5px 0px #cc0;
	}

#ScreenshotCanvas figcaption {
	margin: 5pt;
	color: #999;
	text-align: center;
	font-size: 10pt;
	}

ul, dl, div.Teardrop {
	padding: 20pt;
	}

/* Float the inner containers within the TeardropContainer, which themselves will hold Teardrops */
div.TeardropContainer > div {
	float: left;
	}

/* Clear the float on whatever follows the teardrop arrangement. */
div.TeardropContainer + * {
	clear: both;
	padding-top: 20pt;
	}


ul, dl {
	margin: 15pt 0;
	background-color: #005263;
	}

#ScreenshotCanvas, div.Teardrop {
	border: 1px solid black;
	background-color: #005371;
	min-height: 63pt;
	}

ul, dl, #ScreenshotCanvas, div.Teardrop {
	border-radius: 15pt 0 15pt 0;
	}

div.Teardrop {
	text-align: center;
	}
div.Teardrop h1 {
	margin: -6pt 0 10pt 0;
	text-decoration: underline;
	}
div.Teardrop p {
	margin: 0;
	}


div.Teardrop h1 {
	color: #FFFAE2;	/* SEE ALSO a:link in style.css. */
}


/* Make the enclosingly-linked copy appear as palin text within the teardrops. */
div.TeardropContainer a:link,
div.TeardropContainer a:visited {
	text-decoration: none;
	color: white;
	}

/* Special link-hovering behaviour for the teardrops. */
a:hover div.Teardrop {
	background-color: #006B92;
	}