/* special purpose style sheet for the front splash page */

body {
	margin: 0pt 0pt 0pt 0pt;
	padding: 0pt 0pt 0pt 0pt;
	font-family: Baskerville, Georgia, Garamond, "Times New Roman", serif;

	/* palette for blurred-edge fabric */
	background-color: white;

	/* palette for blue-orange fabric layers */
	/* background-color: #787878; */ /* average image luminosity */
	/* background-color: #222; */ /* dark gray */
	/* background-color: #242024; */
	/* background-color: #201c20; */
	/* background-color: #484048; */
	/* background-color: #363036; */   /* slightly purple gray */
	color: #f0f0f0;        /* slightly off-white in case background image doesn't load */

	/* background-color: #407750; */
	/* color: #c8fec0;*/

	/* green palette for green image */
	/* background-color: #001800; */
	/* color: #e8ffe8; */

	/* border: thick solid red; */
}
/*********** generic formatting ****************/
/* link colors */
A:link 	  { color: #e8e8e8;}   /* looks white, but would show up against pure white */
A:visited { color: #d0d0d0;}   /* just slightly darker */
A:active  { color: red; }

/* strip out all margins and padding so elements can be placed precisely */
h1, h2,  p {
	padding: 0pt 0pt 0pt 0pt;
	margin: 0pt 0pt 0pt 0pt;
	font-weight: normal;
	/* border: thin solid red; */
}
h1 {    font-size: 28pt; font-family: bold; }
h2 {	font-size: 24pt; }
p  {	font-size: 18pt; }

/************************ layout formatting *************************/
/* Create a fixed size box with the background element to which all
   the element positions can be referenced.  The body margin settings
   will cause this box to float to the middle */

div.splash {

	/* This relative position property is necessary so that the
	   position of the contained elements are specified relative
	   to this div; this establishes this div as the "containing
	   block" for the rest of the elements.  The containing block for 
	   this div is the container of the root element (the viewport). */
	position: relative;
	top: 0px;
	left: 0px;

	/* approximate a vertical centering by making the top margin
	   proportional to the screen width; this is about right for typical
	  window geometries.  The left and right margins are set to
	  auto so this div will be centered in the body. */
	margin: 5% auto 0pt auto;
	padding: 0px 0px 0px 0px;

	/* fixed size box to match the background image */
	width: 700px;
	height: 700px;
   	background-image: url('../images/splash.jpg');
	background-repeat: no-repeat;
	background-position: left top; 
	text-align: left;
}

/* place every element at an absolute location within the div.splash */
div.address {
	position: absolute;
	top: 95px;
	left: 140px;
}
div.address p {
	margin-top: 6pt;
}

h2#kinetic {	   
	position: absolute;
	top: 230px;
	right: 75px;
}
h2#rossums {
	position: absolute;
	bottom: 70px;
	right: 140px;
}
h2#performance {
	position: absolute;
	bottom: 225px;
	left: 155px;
}
h2#projects {
	position: absolute;
	top: 60px;
	right: 60px;
}		   
p#other {
	position: absolute;
	bottom: 50px;
	left: 50px;
}
p#upcoming {
	position: absolute;
	top: 450px;
	right: 30px;
	font-size: 20pt;
	color: #ffffc0;
}