/**********************************
	The Living Garden  CSS file
	2nd Nature Productions
	
	IWO Creative
	Jay Wolters 10-06
**********************************/

body {
	font-family:Arial, Helvetica, sans-serif;
	padding: 0px;
	margin: 0px;
	background:#e1d4c3 url(images/tlg_bg.jpg) top left repeat-x;
}

#wrapper {
	display: block;
	margin:0;
	padding:0px;
	width:100%;
}

/*Custom Home Page classes*/
.home #header {
	display: block;
	width:841px;
	height:90px;
	padding: 0px;
	margin: 0px;
	background: url(images/tlg_header.jpg) top left no-repeat;
}

.home #content {
	display: block;
	width:841px;
	height:627px;
	padding: 0px;
	margin: 0px;
	background:url(images/tlg_content.jpg) bottom left no-repeat;
}

.home #content p {
	font: 12px/14px Arial, Helvetica, sans-serif;
	color:white;
	margin:25px 0 0 270px;
	width: 320px;
}

/******DIVINE custom page******/
.divine #header {background: url(images/divine_header.gif) top left no-repeat;}
.divine #content {background:url(images/divine_content.gif) no-repeat bottom left;}
.divine #menu {background: url(images/divine_menu.jpg) top left no-repeat;}
.divine #wrapper{height: 800px;min-width:1124px;background: url(images/divine_background.jpg) top right no-repeat;}
.divine .headline{display:block; width:504px; height:80px; background:url(images/headline_divine.gif) top left no-repeat; padding:0; margin:0;}
.divine .headline span {display:none;}
.divine #mediabuttons ul li a{
	color:#003300;
}
body.divine {background:#98a277 url(images/divine_bg.jpg) top left repeat-x;}

/******FOUNTAIN custom page******/
.fountain #header {background: url(images/fountain_header.gif) top left no-repeat;}
.fountain #content {background:url(images/fountain_content.gif) no-repeat bottom left;}
.fountain #menu {background: url(images/fountain_menu.jpg) top left no-repeat;}
.fountain #wrapper{height: 800px;min-width:1124px;background: url(images/fountain_background.jpg) top right no-repeat;}
.fountain .headline{display:block; width:504px; height:80px; background:url(images/headline_fountain.gif) top left no-repeat; padding:0; margin:0;}
.fountain .headline span {display:none;}
.fountain #mediabuttons ul li a{
	color:#330099;
}
body.fountain {background:#8280ea url(images/fountain_bg.jpg) top left repeat-x;}

/******THE ROCK custom page******/
.rock #header {background: url(images/rock_header.gif) top left no-repeat;}
.rock #content {background:url(images/rock_content.gif) no-repeat bottom left;}
.rock #menu {background: url(images/rock_menu.jpg) top left no-repeat;}
.rock #wrapper{height: 800px;min-width:1124px;background: url(images/rock_background.jpg) top right no-repeat;}
.rock .headline{display:block; width:504px; height:80px; background:url(images/headline_rock.gif) top left no-repeat; padding:0; margin:0;}
.rock .headline span {display:none;}
.rock #mediabuttons ul li a{
	color:#4a443c;
}
body.rock {background:#a49686 url(images/rock_bg.jpg) top left repeat-x;}

/******GEISHA custom page******/
.geisha #header {background: url(images/geisha_header.gif) top left no-repeat;}
.geisha #content {background:url(images/geisha_content.gif) no-repeat bottom left;}
.geisha #menu {background: url(images/geisha_menu.jpg) top left no-repeat;}
.geisha #wrapper{height: 800px;min-width:1124px;background: url(images/geisha_background.jpg) top right no-repeat;}
.geisha .headline{display:block; width:504px; height:80px; background:url(images/headline_geisha.gif) top left no-repeat; padding:0; margin:0;}
.geisha .headline span {display:none;}
.geisha #mediabuttons ul li a{
	color:#8c7554;
}
body.geisha {background:#deb985 url(images/geisha_bg.jpg) top left repeat-x;}

/******LADY OF THE LAKE custom page******/
.lol #header {background: url(images/lol_header.gif) top left no-repeat;}
.lol #content {background:url(images/lol_content.gif) no-repeat bottom left;}
.lol #menu {background: url(images/lol_menu.jpg) top left no-repeat;}
.lol #wrapper{height: 800px;min-width:1124px;background: url(images/lol_background.jpg) top right no-repeat;}
.lol .headline{display:block; width:504px; height:80px; background:url(images/headline_lol.gif) top left no-repeat; padding:0; margin:0;}
.lol .headline span {display:none;}
.lol #mediabuttons ul li a{	color:#6f5e6b;}
body.lol {background:#bea1b7 url(images/lol_bg.jpg) top left repeat-x;}

/******FORCE OF NATURE custom page******/
.fon #header {background: url(images/fon_header.gif) top left no-repeat;}
.fon #content {background:url(images/fon_content.gif) no-repeat bottom left;}
.fon #menu {background: url(images/fon_menu.jpg) top left no-repeat;}
.fon #wrapper{height: 800px;min-width:1124px;background: url(images/fon_background.jpg) top right no-repeat;}
.fon .headline{display:block; width:504px; height:80px; background:url(images/headline_fon.gif) top left no-repeat; padding:0; margin:0;}
.fon .headline span {display:none;}
.fon #mediabuttons ul li a{	color:#5e4c3e;}
body.fon {background:#a7876e url(images/fon_bg.jpg) top left repeat-x;}

/******ORCHID custom page******/
.orchid #header {background: url(images/orchid_header.gif) top left no-repeat;}
.orchid #content {background:url(images/orchid_content.gif) no-repeat bottom left;}
.orchid #menu {background: url(images/orchid_menu.jpg) top left no-repeat;}
.orchid #wrapper{height: 800px;min-width:1124px;background: url(images/orchid_background.jpg) top right no-repeat;}
.orchid .headline{display:block; width:504px; height:80px; background:url(images/headline_orchid.gif) top left no-repeat; padding:0; margin:0;}
.orchid .headline span {display:none;}
.orchid #mediabuttons ul li a{	color:#60514d;}
body.orchid {background:#e0beb4 url(images/orchid_bg.jpg) top left repeat-x;}

/******Sirens custom page******/
.siren #header {background: url(images/siren_header.gif) top left no-repeat;}
.siren #content {background:url(images/siren_content.gif) no-repeat bottom left;}
.siren #menu {background: url(images/siren_menu.jpg) top left no-repeat;}
.siren #wrapper{height: 800px;min-width:1124px;background: url(images/siren_background.jpg) top right no-repeat;}
.siren .headline{display:block; width:504px; height:80px; background:url(images/headline_siren.gif) top left no-repeat; padding:0; margin:0;}
.siren .headline span {display:none;}
.siren #mediabuttons ul li a{	color:#263841;}
body.siren {background:#e0beb4 url(images/siren_bg.jpg) top left repeat-x;}

/*Common interface*/
#content{
	left:236px;
	top:90px;
	position:absolute;
	width:841px;
	height:627px;
	padding: 0px;
	margin: 0px;
	background:url(images/tlg_interior_content.jpg) no-repeat;
}

#content>p {
	font: 12px/14px Arial, Helvetica, sans-serif;
	margin:10px 0 0 90px;
	width:690px;
	}
#content>Table{
	margin:10px 0 0 70px;
	width: 660px;
	border: 0px
}
#content Table td { vertical-align:top;}
#content Table ul, #content Table h4 {width:300px; margin: 5px;}
#content ul {
	list-style:none;
	font: 12px/14px Arial, Helvetica, sans-serif;
	margin:10px 0 0 70px;
	width: 660px;
	padding-left:0px;
}
#content ul li {
	margin-left:8px;
	
}
#content h1, #content h2, #content h3, #content h4 {
	margin:10px 0 0 70px;
	width: 660px;
}
#scroll_zone{
	width:841px;
	height:627px;
	overflow:auto;
}
#scroll_zone>p{
	font: 12px/14px Arial, Helvetica, sans-serif;
	margin:10px 0 0 90px;
	width:690px;
}

.fan_letters{
	filter:alpha(opacity=65);-moz-opacity:.65;opacity:.65;
	display:block;
	width:600px;
	margin:10px 0 10px 90px;
	background:#F3F1EB;
	padding: 5px;
}
.fan_letters>p{
	font: 12px/14px Arial, Helvetica, sans-serif;
	}
#header {
	left:236px;
	position:absolute;
	width:841px;
	height:90px;
	padding: 0px;
	margin: 0px;
	background: url(images/tlg_interior_head.jpg) top left no-repeat;
}

#menu { 
	z-index:200;
	position:absolute;
	display: block;
	padding: 0px;
	margin: 0px;
	width:236px;
	height:717px;
	background: url(images/tlg_menu.jpg) top left no-repeat;
}

#menu ul {
	font: bold 14px Geneva, Arial, Helvetica, sans-serif;
	text-align:center;
	list-style: none;
	display:block;
	width: 135px;
	padding-left:0px;
	margin: 45px 0px 0px 74px;
}

#menu li{
	list-style-type: none;
	margin-left:0px;
	padding:0px;
}

#menu ul li a {
	color:black;
	display:block;
	text-decoration:none;
	height:28px;
	margin: 3px 0 0 0;
}

#menu ul li a:hover {
	color:#81220e;
	background:url(images/tlg_menu_hover.gif) bottom center no-repeat;
}

#menu ul li ul {
	display:none;
}

#menu ul li:hover ul, #menu ul li.over ul {
	display:block;
	position:absolute; 
	top:110px; 
	left:200px; 
	border:0; 
	padding:4px 0px; 
	margin:0; 
	list-style-type:none;
	border-top:3px solid #f9f1e7;
	border-left:3px solid #f9f1e7;
	border-right:3px solid #4d3f2d;
	border-bottom:3px solid #4d3f2d;
	background: #e1d4c3;
}

#footer {
	position:absolute;
	top:717px;
	display: block;
	clear:both;
	height:112px;
	width:1077px;
	padding: 0px;
	margin: 0px;
	background:url(images/tlg_footer.jpg) top left no-repeat;
}

#footer ul {
	padding-left:0px;
	list-style: none;
	display:block;
	margin: 40px 0px 0px 380px;
}

#footer ul li {
	display:block;
	width: 60px;
	height:62px;
	float:left;
	margin-right:18px;
}

#footer ul li a {
	display:block;
	width: 60px;
	height:64px;
}

#footer ul li a span {
	display:none;		
}
#btnSirens{background:url(images/btnSiren.gif) top left no-repeat;}
#btnFountain{background:url(images/btnFountain.gif) top left no-repeat;}
#btnRock{background:url(images/btnRock.gif) top left no-repeat;}
#btnGeisha{background:url(images/btnGeisha.gif) top left no-repeat;}
#btnLOL{background:url(images/btnLOL.gif) top left no-repeat;}
#btnFON{background:url(images/btnFON.gif) top left no-repeat;}
#btnDivine{background:url(images/btnDivine.gif) top left no-repeat;}
#btnOrchid{background:url(images/btnOrchid.gif) top left no-repeat;}

/**Character page media buttons **/
#mediabuttons{
	display:block;
	margin:10px 0 0 90px;;
	padding: 0px;
}
#mediabuttons ul{
	padding:0px;
	list-style: none;
	display:block;
	width:320px;
	height:20px;
	margin: 0px 0px 0px 0px;
}
#mediabuttons ul li{
	display:block;
	margin:0px 10px 0px 0px;
	padding:0px;
	float: left;
	
}
#mediabuttons ul li a{
	text-decoration:none;
	font-weight:600;
	font-size: 14px;
}
#mediabuttons ul li a:hover{
	color:#fff;
	text-decoration:underline;
}
#charPhotoGallery {
	margin:10px 0 0 90px;
	width:550px;
	height:400px;
}

#charVideo{
	margin:10px 0 0 90px;
	width:400px;
	height:350px;
}

#charText>p{
	font: 14px/18px Arial, Helvetica, sans-serif;
	margin:10px 0 0 90px;
	width:460px;
}
.fon_sub {font-style: italic; color: #FEDABD;}