body
{
	background-color: #181717;
	font-family: Arial;
	margin: 0;
	height: 100%;
}

html
{
	height: 100%;
}

body a img
{
	border: none;
}

/************************* containers */
div.main
{
	width: 100%;
	height: auto;
	background: #181717;
}

div.main .content-container
{
	width: 950px;
	margin: 0 auto;
	position: relative;
	color: white;
	padding-bottom: 20px;
}

/************************* logo & nav */
div.topleft
{
	width: 213px;
	height: 300px;
	margin-left: 25px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	font-family: Helvetica;
	font-weight: bold;
	font-size: 98%;
}

div.topleft .logo 
{
	width: 213px;
	height: 70px;
}

div.topleft .nav
{
	width: 213px;
	height: auto;
	border-bottom: 4px solid #869ec0;
}

div.topleft .nav a,div.topleft .nav a:visited
{
	color: #f9ebf1;
	background: url(../images/menu-active.gif) repeat-x;
	display: block;
	width: 198px;
	height: 20px;
	text-decoration: none;
	padding: 6px 0 0px 15px;
	font-weight: normal;
	font-size: 80%;
}

div.topleft .nav a:hover, div.topleft .nav a.active
{
	background: url(../images/menu-hover.gif) repeat-x;
}

div.topleft .drink-positive
{
	
	width: 193px;
	height: 135px;
	padding: 10px;
	background: url(../images/left-box-bg.png) no-repeat;
}

div.topleft .drink-positive p
{
	margin: 0;
	padding: 0;
	line-height: 14px;
	font-size: 70%;
	font-weight: normal;
	color: Black;
}

div.topleft .drink-positive h5
{
	color: #e82888;
	margin: 0 0 3px 0;
	padding: 0;
	font-size: 100%;
	display: block;
}

div.topleft .drink-positive .text
{
	z-index: 0; position: absolute; left: 65px; width: 130px;
}
div.topleft .drink-positive .text a.block
{
	display: block; height: 143px; width: 213px; left: -65px; top: -9px; position: absolute; z-index: 500; background: transparent;
}
div.topleft .drink-positive .text h5 a 
{
	text-decoration: none; color: #e82888;
}
div.topleft .drink-positive .text p a 
{
	text-decoration: none; color: Black;
}

.tallsmallpink { font-variant: small-caps; color: #e82888; font-weight: bold; font-size: 80%; padding-left: 8px; }
.tallsmallpink a { font-variant: small-caps; color: #e82888; font-weight: bold;  text-decoration : none; }

div.topleft .komen-logo
{
	width: 213px;
	margin: -7px 0 0px 0px;
	height: 80px;
}

/************************* flash content */

div.home-flash
{
	width: 950px;
	height: 600px;
	position: absolute;
	top: -14px;
	left: 32px;
	z-index: 0;
}

/************************* content for all other pages */
.home_bkg
{
	width:auto;
	height: auto;
	padding-left:100px;
}
div.content
{
	width: 100%;
	height: auto;
	position: relative;
	top: 55px;
	left: 24px;
	z-index: 1;
	font-size: 70%;
	font-weight: lighter;
	padding-bottom: 20px;
	color: white;
}

div.content p 
{
	line-height: 15px;
	margin: 12px 0 12px 0;
}

div.content a 
{
	color: #e82888;
}

div.content .empty
{
	width: 705px;
	height: auto;
	padding-left: 245px;
}

div.content .content-left
{
	width: 329px;
	height: auto;
	float: left;
}

div.content .content-left .hero-list
{
	width: 329px;
	height: auto;
	margin-top: 20px;
	margin-left: -5px;
	
}

div.content .content-left .hero-list ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

div.content .content-left .hero-list a
{
	color: White;
	text-decoration: none;
	display: block;
	height: 17px;
	width: 100%;
	padding: 0 5px 0 5px;
}

div.content .content-left .hero-list a:hover
{
	background: url(../images/heroes-hover.gif)
}

div.content .content-left .hero-list .left-hero-list
{
	width: 140px;
	float: left;
}

div.content .content-left .hero-list .right-hero-list
{
	width: 140px;
	margin-left: 20px;
	float: left;
}

div.content .content-left #view-hero
{
	margin:10px 0 0;
}

div.content .content-left #view-hero select
{
	float:left;
	width:125px;
	margin-left:5px;
}

div.content .content-right 
{
	position: absolute;
	top: -27px;
	right: 0px;
	z-index: -1;
}

div.content .content-right .hero-list-pic
{
	position: absolute;
	top: 134px;
	right: 140px;
	z-index: 1;
	background-color: White;
	height: 230px;
	width: 180px;
	padding: 10px;
	color: Black;
	font-size: 100%;
}

div.content .content-right .big-bottle
{
	position: absolute;
	top: 1px;
	right: 45px;
	z-index: 3;
	height: 572px;
	width: 168px;
	padding: 0;
}
div.content .content-right .heroes-tour-right
{
	position: absolute;
	top: -1px;
	left: -350px;
	z-index: 3;
	height: 572px;
	width: 168px;
	padding: 0;
	margin: 0;
}
div.content .content-right .big-bottle-bottom
{
	position: absolute;
	top: 1px;
	right: 45px;
	z-index: 3;
	height: 572px;
	width: 168px;
	padding: 0;
}
div.content .content-right .bg-detailed
{
	position: absolute;
	top: -8px;
	right: -46px;
	z-index: -1;
	height: 563px;
	width: 571px;
	padding: 0;
}

/****         View Hero Bio            ***/
.ltImage
{
	border:solid 4px #fff;
}

div.content .content-right .hfh-tour
{
	position: absolute;
	top: 90px;
	right: -10px;
	z-index: 2;
	height: 234px;
	width: 366px;
	padding: 0;
}

div.content .map
{
	width:100%;
	height: auto;
	z-index: -1;
	position: absolute;
	top: 90px;
	left: 100px;
}

div.content .map-right 
{
	width:160px;
	height: auto;
	z-index: 1;
	padding-bottom: 50px;
	position: absolute;
	top: 145px;
	left: 780px;

}

div.content .map-right h3
{padding:0px 0px 10px;
}

div.content .map-right h2
{
	padding-top:5px;
}

div.content .map-right a
{
	font-weight: bold;
	color: White;
	text-decoration: none;
	display: block;
	width: 100%;
	margin: -7px 0 -7px -4px;
	padding: 2px 4px 2px 4px;
}

div.content .map-right a:hover,
div.content .map-right a.selected
{
	background: url(../images/orange-hover.gif);
}

div.content .map-right p a
{
	display: inherit; 
	width: inherit;
	margin: 3px 0 3px 0;
	padding: 0;
}

div.content .map-right p a:hover
{
	background: none;
}

div.content table a
{
	padding: 0 5px 0 5px;
	height: 17px;
	width: 70px;
	display: block;
	text-decoration: none;
}

div.content table a:hover
{
	background: url(../images/heroes-hover.gif);
	color: White;
}

h1{ font-size: 240%; font-weight: normal; color: #e82888; font-family: Arial; margin: 0; padding: 10px 0 0 0; }
h2{ font-size: 140%; font-weight: normal; color: White; font-family: Arial; margin: 0; padding: 10px 0 5px 0; }
h3{ font-size: 150%; font-weight: normal; color: #ff7f1d; font-family: Arial; margin: 0; padding: 0px 0 15px 0; }
h4{ font-size: 110%; font-weight: bold; color: #e82888; font-family: Arial; margin: 0; padding: 8px 0 8px 0; }

.tallorange { font-variant: small-caps; color: #ff7f1d; font-weight: bold; font-size: 110%; }
.tallpink { font-variant: small-caps; color: #e82888; font-weight: bold; font-size: 110%; }
.tallwhite { font-variant: small-caps; color: white; font-weight: bold; font-size: 110%; }

div.float-left {float: left; padding: 0 10px 0 0; margin: 3px 0 0 0;}
div.float-right {float: right; padding: 0 10px 0 0; margin: 3px 0 0 0;}
div.clearfloats {clear: both; height: 0; margin:0; padding:0; overflow:hidden;}
.small {font-size: 70%;}
.smaller {font-size: 80%;}

/************************* footer */

div.bottom
{
	height: 50px;
	padding: 0;
	width: 950px;
	margin: 90px auto;
	font-size: 60%;
	color: White;
	position: relative;
	z-index: 4;
}

div.bottom a
{
	color: white;
	text-decoration: underline;
}

div.bottom .left-footer
{
	float: left;
	padding-left: 25px;
	color: white;
}

div.bottom .right-footer
{
	float: right;
	margin-top: 9px;
}

.gray
{
  color: #8a8989;
}
.more-space 
{
  padding-top: 10px
}
.empty table tr, .empty table td { 
  padding: 0 0 8px 0; 
  margin: 0; 
  font-size: 12px;
}