body {
	color: black;
	background: white;
	font-size: xx-small;
	font-family: sans-serif;
	margin: 0;
}

/* Layout */

body {
	grid: "a a a a a"  13em
	      "b c c c c"
}
body::slot(a) { background: url(sea.jpg); background-size: 100% 100% }
body::slot(b) { background: black }

h2 { flow: a }
ul.menu { flow: b }
h3, p { flow: c }

/* Centered heading with shadow */

h2 {
	margin: 0;
	color: #F63;
	text-shadow: 0.05em 0.1em 0.1em black;
	font: 50px/80px Sand, Bolide, Textile, Marker Felt, Chalkboard,
	  Comic Sans, cursive;	/* Line is vertically centered */
	font-size-adjust: 0.5;
	white-space: nowrap;	/* Ensures height is always 80px */
	text-align: center;
}

/* Style of the menu, with background for current item and hover effect */

ul.menu {
	margin: 0;
	padding: 0.5em 0;	/* No bullets, so no indent needed either */
	color: white;
	background: black;
	font-family: Sand, Bolide, Textile, Marker Felt, Chalkboard,
	  Comic Sans, cursive;
	font-size-adjust: 0.5;
	line-height: 1.4;
}
ul.menu li {
	margin: 0;		/* Menu items look like block: no bullets */
	padding: 0;
	list-style: none;
}
ul.menu a {
	display: block;		/* Make clickable area as wide as the menu */
	color: white;		/* For IE6; should be 'inherit' instead */
	margin: 0 0.5em;	/* A little narrower than the menu itself */
	padding: 0 0.5em;	/* A little narrower than its background, too */
}
li.current a {			/* The current item is highlighted */
	background: url(point.png) right center no-repeat #808080;
}
ul.menu a:hover {		/* Hovered item ditto, but also color change */
	color: #FF0;
	background: url(point.png) right center no-repeat #808080;
}
ul.menu li.contact {		/* Separate item from others with a rule */
	margin-top: 0.5em;
	border-top: 0.1em dotted #808080;
	padding-top: 0.5em;
}

h3 {font-size: 100%; margin: 0.5em 1em}
p {margin: 0 1em 1.2em 1em}
img.ill1 {float: left; margin: 0 0.5em 0.5em 0}
img.ill2 {float: right; margin: 0 0 0.5em 0.5em}

a:link, a:visited {text-decoration: none}