body {
	font-family: Tahoma;
	font-size: 12px;
	background-image: url("http://www.imakinations.com/images/nebel.jpg");
	background-attachment: fixed;
	background-repeat: no repeat;
	margin: 0px;
	padding: 0px;
	text-align: center;

}
#wrapper {
	background-color: #FDF7E3;
	margin: auto;
	width: 1000px;
	position: relative;
	text-align: center;
	padding: 0px;
	height: 100%;
	border-right: 4px;
	border-bottom: 3px;
	border-left: 4px;
}

#header {
	position: relative;
	padding: 0px;
	margin: 0px;
	display: block;
	background-image: url(../images/NameImage3.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	height: 200px;
	background-color: #F3730A;
	vertical-align: top;
}

#header p {
		padding: 50px 3px 0px 25px;
	margin: 0px;	
}

#header a {
	color: #2A4480;
	text-decoration: underline;
	font-size: 16px;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


#content {
	font-size: 14px;
	text-align: left;
	position: relative;
	margin: 0px 10px 10px 200px;
	letter-spacing: 1px;
	vertical-align: top;
	padding: 5px 2px 10px 10px;
	border: none;
	display: block;
	color: #000000;
	font-weight: bold;
}

#content a {
	color: #000000;
	text-decoration: underline;
	}
	
#content ul {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: bold;
	line-height: 2em;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: black;
	text-decoration: none;
	background-color: #CCCCCC;
	text-indent: 5px;
	list-style-position: outside;
	list-style-image: url(arrow.gif);
	list-style-type: square;
	padding: 6px;
	margin: 2px;
}

#content p {
	font-size : 100%;
	font-weight : normal;
	ine-height : 120%;
	font-family: Arial, Helvetica, sans-serif;
	padding: 3px;
}

#content h1 {
	font-family: Arial;
	font-size: 180%;
	font-weight: bold;
	color: black;
	padding: 0px;
	margin: 0px;
}

#content h2 {
	font-family: Arial;
	font-size: 150%;
	font-weight: bold;
	color: #1240AB;
	padding: 0px;
	margin: 0px;
}

#content h3 {
	font-family: Arial;
	font-size: 120%;
	font-weight: bold;
	color: #1240AB;
	padding: 0px;
	margin: 0px;
}

.smalltext {
	font-size: 9px;
}
.line {
	background-color: #7C7C7C;
	margin: 0px;
	padding: 5px 0px 0px;
	position: relative;
	display: block;
	line-height: 115%;
	height: 30px;
	color: #FFFFFF;
	text-align: center;
	vertical-align: middle;
	font-size: 16px;
	font-weight: bolder;
}

.line a {
	color: #FFFFFF;
}



.singlecolumn {
	width: 210px;
	margin: 10px 10px 15px 3px;
	position: relative;
	float: right;
	text-align: left;
	display: block;
	height: 310px;
	vertical-align: top;
	padding: 0px;
	color: #000000;
	background-image: url(../images/SingleColumnBckgrn.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-color: #FFFFFF;
	font-size: 14px;

}
.singlecolumn p {
	margin: 4px;
	padding: 0px;
	font-weight: normal;
}


.stylebanner {
	text-align: center;
	vertical-align: middle;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	height: 55px;
	position: relative;
	display: block;
	font-family: Tahoma;
	background-image: url(../images/StyleBannerBackGrnd.jpg);
	background-repeat: no-repeat;
	background-position: center top;

	}

.stylebanner h1 {
	margin: 0px;
	vertical-align: text-bottom;
	display: block;
	padding-top: 7px;
	line-height: 125%;
	font-size: 18px;


}
.stylebanner p {
	margin: 0px;
	padding: 3px;
}


#footer {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	line-height: 16px;
	padding-top: 5px;
	color: #FFFFFF;
	padding-left: 0px;
	text-align: center;
	display: block;
	margin: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #1240AB;

}
.singlecolumn100 {
	width: 168px;
	margin: 0px 7px 5px 0px;
	position: relative;
	float: left;
	text-align: left;
	display: block;
	vertical-align: top;
	padding: 3px 3px 3px 10px;
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	text-decoration: none;
	background-color: #FFFFFF;
	background-image: url(../images/SingleColumnBckgrn2.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	border-left-style: solid;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
	border-right-style: solid;
}

.singlecolumn100 a {
	font-family: "Verdana";
	font-size: 16px;
	color: #666666;
	margin-top: 10px;
	font-weight: normal;
	}

#smallfont {
	font-size: 12px;

}
.toppadding {
	margin: 0px;
	padding-top: 100px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
h2 {
	margin: 0px;
}
.FloatRight {
	text-align: left;
	display: inline-table;
	margin: 0px;
	padding: 0px;
	float: right;
	width: 350px;
	position: relative;
	font-weight: normal;
	vertical-align: top;




}
.FeatureArea {
	width: 210px;
	position: relative;
	float: right;
	text-align: left;
	display: block;
	vertical-align: top;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	background-color: #FFF;
	border: medium solid #663;
	margin-top: 15px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}




Genius FadeShow Source

/* Copyright (C) 2010 Kary Pace 
 * This software is released under GNU license
 * in the hopes it will be helpful
*/

var TimeLeft = 0;
var FadeTime = 4000.0;
var delay = 160.0;
var e0 = document.getElementById("s0");
var e1 = document.getElementById("s1");
var s0 = 0;
var s1 = 1; 
var images: [ "blank.jpg", "neweggfi.jpg", "novamedalslide.jpg"]; // as many images as you want
var imagepak = [];
var len = images.length;

/* loads 39 highly compressed slides, total is 1.67 MB */
/* jpg slides compressed in Gimp at 50% compression */
function init()
{
  for (i=0;i< len;i++)
  {
    imagepak[i] = new Image();
    imagepak[i].src = images[i];
  }
  e1.src = imagepak[0].src;
  fade();
};

/* Controls the show by incrementing the slides in the global
 * variable s0 and s1. I've added a Commodore 64 slide just
 * for nostalgic fun. It gets skipped on subsequent loops thru the show.
*/
function fade()
{ 
  if (s1 == len) // skip C64 intro on subsequent runs
  {
    s0 = len - 1;
    s1 = 3;
  }
  if (s0 == len) // resume normal order of slides
  {
    s0 = 3;
    s1 = s0 + 1;
  }
  e0.src = imagepak[s0].src;
  e1.src = imagepak[s1].src;
  s0++;
  s1++;
  TimeLeft = FadeTime;
  animate(new Date().getTime());
};

/* Possibly the world's simplest fade show animation function.
 * It simply changes the opacity for all browsers and the filter
 * value for Microsoft. The opacity and filter values are simply
 * a matter of the ratio of TimeLeft/FadeTime.
*/
function animate(lastTime)
{
  var curTime = new Date().getTime();
  var elapsedTime = curTime - lastTime;
  if(TimeLeft <= elapsedTime)
  {
    setop(0);
    setTimeout("fade()",delay);
    return;
  }   
  TimeLeft -= elapsedTime;
  var newOp = TimeLeft/FadeTime;
  setop(newOp);
  setTimeout("animate(" + curTime + ")", delay);
};

/* Sub-function to change opacity and filter */
function setop(op)
{
  e0.style.opacity = op;
  e1.style.opacity = 1 - op;
  e0.style.filter = 'alpha(opacity = ' + (op*100) + ')';
  e1.style.filter = 'alpha(opacity = ' + ((1-op)*100) + ')';
};
window.onload = init