* {
	margin: 0px;
	padding: 0px;
	}
body {
	background-color: #0054A6;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url('../images/bg1.gif');
	background-repeat: repeat;
	}
#container_outside {
	margin: 10px auto;
	text-align: center; /* KLUDGE - to make sure all browsers center the container */
	border: 5px solid #FCF739; /* yellow */
	width: 787px;
	}
#container  {
	width: 763px;
	border: 12px solid #ED1B24; /* red */
	background-color: #2E3192;
	position: relative;
	}
#masthead {
	position: relative;
	height: 203px;
	}
#masthead img.main {
	position: absolute;
	top: -18px;
	left: -18px;
	}
#masthead img.sub {
	position: absolute;
	bottom: -31px;
	left: 245px;
	}
#bruce_hiq {
	position: absolute;
	top: -17px;
	left: 345px;
	}
#content {
	color: white;
	text-align: left;
	position: relative;
	height: 860px; /* KLUDGE - it's rediculous that I have to do this, but clear:both isn't working....not worht looking into - i'll just slap a height on */
	}
a:link, a:visited {
	text-decoration: none;
	}


	
/* CONTAINERS *********************************/

.contentBox {
	color: white;
	font-size: 11px;
	}
.contentBox img {
	border: 0px;
	}
.contentBox h1 {
	font-size: 22px;
	text-align: center;
	margin: 4px 0px;
	}
#illustration {
	position: absolute;
	top: 0px;
	left: 10px;
	height: 133px;
	width: 207px;
	background-image: url('../images/box_homepage_illustration.gif');
	background-position: top left;
	}
#illustration:hover, #illustration:active {
	background-position: bottom left;
	}
#illustration h1 { color: #FFFF00; }
#illustration:hover h1, #illustration:active h1 { color: #FFFFFF; }
#illustration .text {
	padding-left:12px;
	float:left;
	}
#illustration img {
	float: right;
	position: relative;
	top: -115px;
	right: -14px;
	}

#gallery {
	position: absolute;
	top: 150px;
	left: 10px;
	height: 133px;
	width: 207px;
	background-image: url('../images/box_homepage_gallery.gif');
	background-position: top left;
	}
#gallery:hover, #gallery:active {
	background-position: bottom left;
	}
#gallery h1 { color: #FFFFFF; }
#gallery:hover h1, #gallery:active h1 { color: #FFFF00; }
#gallery .text {
	position: relative;
	left:-13px;
	float:right;
	}
#gallery img {
	float: left;
	position: relative;
	top: -14px;
	right: 0px;
	}
	
#speaker {
	position: absolute;
	top: 0px;
	right: 10px;
	height: 133px;
	width: 207px;
	background-image: url('../images/box_homepage_speaking.gif');
	background-position: top left;
	}
#speaker:hover, #speaker:active {
	background-position: bottom left;
	}
#speaker h1 { color: #FFFF00; }
#speaker:hover h1, #speaker:active h1 { color: #FFFFFF; }
#speaker .text {
	padding-left: 12px;
	float:left;
	}
#speaker img {
	float: right;
	position: relative;
	top: -26px;
	right: 10px;
	}

#about {
	position: absolute;
	top: 150px;
	right: 10px;
	height: 133px;
	width: 207px;
	background-image: url('../images/box_homepage_about.gif');
	background-position: top left;
	}
#about:hover, #about:active {
	background-position: bottom left;
	}
#about h1 { z-index: 100; color: #FFFFFF; text-align:right; padding-right: 10px; }
#about:hover h1, #about:active h1 { color: #FFFF00; }
#about .text {
	z-index: 100; /* Kludge */
	position: relative;
	left: -5px;
	top: -2px;
	line-height: 13px;
	}
#about img {
	z-index: 100; /* Kludge */
	float: left;
	position: relative;
	top: -38px;
	left: -3px;
	}
	
#video {
	position: absolute;
	top: 34px;
	left: 225px;
	height: 248px;
	width: 300px;
	padding: 3px;
	background-color: black;
	border: 3px solid #0065CA;
	}
#store {
	position: absolute;
	top: 300px;
	left: 10px;
	height: 269px;
	width: 578px;
	background-image: url('../images/box_homepage_store.gif');
	color: black;
	padding: 5px;
	}
#store h1 a:link, #store h1 a:visited {
	color: #FF0000;
	font-size: 28px;
	margin: 0px;
	margin-bottom: 3px;
	}
#store h1 a:hover, #store h1 a:active {
	color: #274AA4;
	}
#store div.text {
	float: left;
	width: 435px;
	margin: 10px;
	font-size: 14px;
	line-height: 18px;
	}
a:link#store_clickToSee, a:visited#store_clickToSee {
	font-size: 18px;
	font-weight: 900;
	text-decoration: none;
	color: black;
	}
a:hover#store_clickToSee, a:active#store_clickToSee {
	color: red;
	}
#learnToDraw {
	position: absolute;
	top: 295px;
	right: 20px;
	height: 84px;
	width: 139px;
	}
#blog {
	position: absolute;
	top: 393px;
	right: 20px;
	height: 84px;
	width: 139px;
	}
#email {
	position: absolute;
	top: 490px;
	right: 20px;
	height: 84px;
	width: 139px;
	}

/* PRODUCT BOXES ****************************************************************/
#productBoxes {
	margin: 10px 0px;
	}
#productBoxes img.big {
	float: left;
	margin: 5px 10px;
	}
#store a.bigProduct:link, #store a.bigProduct:visited {
	display: block;
	height: 135px;
	width: 119px;
	background-position: bottom left;
	background-repeat: no-repeat;
	float: left;
	position: relative;
	top: 5px;
	}
#store a.bigProduct:hover, #store a.bigProduct:active {
	background-position: top left;
	}
a.productBox:link, a.productBox:visited {
	display: block;
	height: 115px;
	width: 94px;
	background-position: bottom left;
	background-repeat: no-repeat;
	float: left;
	position: relative;
	}
a.productBox:hover, a.productBox:active {
	background-position: top left;
	}
	
	
/* ******************************************************/
#bottomText {
	position: absolute;
	top: 590px;
	left: 10px;
	clear:both;
	}
#bottomText a:link, #bottomText a:visited {
	color: white;
	text-decoration: underline;
	}
#bottomText a:hover, #bottomText a:active {
	color: #C4DCF5;
	}
#bottomLinks {
	text-align: center;
	}
#bottomLinks a:link, #bottomLinks a:visited {
	font-size: 11px;
	color: #B3CBE4;
	text-decoration: none;
	padding: 4px;
	}
#bottomLinks a:hover, #bottomLinks a:active {
	color: white;
	}


#roundedCorner_btmLeft {
	position: absolute;
	bottom: -17px;
	left: -17px;
	}
#roundedCorner_btmRight {
	position: absolute;
	bottom: -17px;
	right: -17px;
	}