/* Pretty Stuff
================================== */

/* Zero down margin and paddin on all elements */
* 
{
  margin: 0;
  padding: 0;
}

body 
{
	font-family: arial, Helvetica, sans-serif;
	font-size: 80%; /* initially set to percentage so that ems work without producing miniscule text in IE */
	text-align: left; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
	color: black;
	background-color: #7F2BB9;
	padding: 0 0 6em 0;
	margin:0px auto;

}
#heading 
{
  margin:0px auto;
  height: 150px;
  width: 747px;
  left:    0px;	 
  background: url(images/header.gif) no-repeat;
  background-color: white;
  padding: 20px;
}
#navigation 
{
  list-style: none;
}

#footer 
{
  position: relative;	
  top: -400px;	
  background-color: white transparent;
  left: 100px;
  padding: 1px 0px;
  text-align: center;
  font-size: 80%;
  color: #AAAAAA;
}
  #wrapper h3
      {
	position: relative;
	top:         -435px;
	left:         20px;
	width:    210px;
	height:   25px;
	background: url(images/titles/feng_shui.gif) no-repeat;
      }
      #fengshui 
      {
	position:relative;
	top:    -1150px;
	left:   -165px;
	width: 600px;
	margin-left: 0px;
	margin: 0 0 0 auto;
      }
#footer2 a
{
	text-decoration:none;
	color: #aaaaaa;
}

h1 {
	font-size:10px;
	font-weight:normal;
}

/* The Core Technique
================================= */

body 
{
  text-align: center; 
}

#wrapper 
{
  width: 787px; 
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  background: url(images/nautilus_centered.jpg);
  padding-right: 0px;
}
#wrapper h4 
{
	position: relative;
	top:    -40px;
	left:   0px;
	width:  12px;
	height: 350px;
	background: url(images/side_a.jpe) top left no-repeat;
	padding:  0px;
}
#wrapper h2 
{
	position: relative;
	top:       -370px;
	left:        27px;
	width:    737px;
	height:   90px;
	background: url(images/topbar/topbar.jpg) no-repeat;
}

#navigation 
{
  width: 170px; 
  float: left; 
}

#content 
{
  position: relative;
  top: -400px;
  width: 600px; 
  float: right; 
  padding: 50px 10px 0 0;
}
#content p 
{
	position: relative;
	top: -100px;
	left: 0px;
	width: 500px;
	font-size: 80%;
	line-height: 2.0em;
	padding-left: 2em;
}
#content .p1
{
	position: relative;
	top:  -180px;
	left:  120px;
	width: 600px;
	font-family: "Comic Sans MS", arial, Helvetica, sans-serif;
	font-size: 18px; /* initially set to percentage so that ems work without producing miniscule text in IE */
	text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
	color: purple;
	margin: 0 2em -15px 2em;
	display: block;
	padding-top: 4em;
}
#content .p2
{
	position: relative;
	top:   -150px;
	left:  -10px;
	width: 250px;
	font-family: "Comic Sans MS", arial, Helvetica, sans-serif;
	font-size: 18px; /* initially set to percentage so that ems work without producing miniscule text in IE */
	text-align: right; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
	color: purple;
	margin: 0 2em -15px 2em;
}
#content .p3
{
	position: relative;
	top:  -100px;
	left:   90px;
	width: 300px;
	font-family: "Comic Sans MS", arial, Helvetica, sans-serif;
	font-size: 18px; /* initially set to percentage so that ems work without producing miniscule text in IE */
	text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
	color: purple;
	margin: 0 2em -15px 2em;
}
#content .p4
{
	position: relative;
	top:  -70px;
	left: 150px;
	width: 300px;
	font-family: "Comic Sans MS", arial, Helvetica, sans-serif;
	font-size: 18px; /* initially set to percentage so that ems work without producing miniscule text in IE */
	text-align: center; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
	color: purple;
	margin: 0 2em -15px 2em;
}
#footer 
{ 
  clear: both; 
} 

.menutitle
{
	 cursor: pointer;
	 margin-bottom: 0px;
	 background-color: white;
	 color: blue;
	 width: 150px;
	 padding: 2px;
	 font:  95%/1.6 "Comic Sans MS", arial, Helvetica, sans-serif;
	 text-align: left; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
}
.submenu
{
	 margin-bottom: 0.0em;
	 background-color: white;
	 color: blue;
	 width: 170px;
	 padding: 2px;
         left: 0px;
	 margin-left: 1.0em;
	 font:  80%/0.4 "Comic Sans MS", arial, Helvetica, sans-serif;
	 text-align: left; /* needed to center the container in IE5.x because it doesn't like 'margin: 0 auto' */
}
a:link, a:visited
{
	 text-decoration: none;
         color: blue;
}
.verticaltext
{
 	 font: bold 13px Arial;
	 position: absolute;
	 right: 3px;
	 top: 20px;
	 width: 15px;
	 writing-mode: tb-rl;
}
input
{
        font-family: Comic Sans MS;
	font-size: 1.0em;
}
textarea
{
        font-family: Comic Sans MS;
	font-size: 1.0em;
}

/* --- menu styles ---
note:
	not all browsers render styles the same way so try out your style sheet
	on different browsers before publishing;
*/
/* level 0 inner */
.m0l0iout 
{
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
	padding: 4px;
        background: #6a4acf;
	color: #FFFFFF;
}
.m0l0iover 
{
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: underline;
	padding: 4px;
	color: #FFFFFF;
}

/* level 0 outer */
.m0l0oout 
{
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	border : 0px solid #FFFFFF;
	background: #4682B4;
	color: #ffffff;
}
.m0l0oover 
{
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	border : 0px solid #FFFFFF;
	background: #cc66ff;
	color: #ffffff;
}

/* level 1 inner */
.m0l1iout 
{
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
	padding: 4px;
	background: #ff0099;
	color: #ffffff;
}
.m0l1iover 
{
	font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	padding: 4px;
        background: #cc0000;
	color: #ffffff;
}

/* level 1 outer */
.m0l1oout 
{
	font: 10px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	border : 1px solid #ffffff;
	background: #cc66ff;
	filter: alpha(opacity=100);
	color: #ffffff;
}
.m0l1oover 
{
	font: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	border : 1px solid #FFFFFF;
	background: #0066ff;
	color: #ffffff;
}

/* level 2 inner */
.m0l2iover 
{
	font: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	padding: 4px;
	background: #cc66ff;
	color: #ffffff;
}

/* level 2 outer */
.m0l2oout 
{
	font: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	border : 1px solid #ffffff;
	background: #0099cc;
	color: #ffffff;
}
.m0l2oover 
{
	font: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration : none;
	border : 1px solid #ffffff;
	background: #0066ff;
	color: #ffffff;
}