@charset "utf-8";
/* CSS Document */
#container {
border: 0px #000000 solid;
background-color: white;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;	
font-weight: normal;
font-style: normal;
visibility: visible;
position: absolute;
width: 99%;
height: 99%;
margin: auto;
min-height: 768px;
min-width: 1024px;
top: 0px;
left: 0px;
}
#main {
border: 0px purple solid;
width: 1024px;
height: 768px;
margin: auto;
position: absolute;
left: 40px;
}

#newMoonPIC {
border: 0px teal solid;
position: absolute;
top: 20px;
left: 250px;
width: 550px;
height: 320px;
}
#halfMoonPIC {
border: 0px maroon solid;
position: absolute;
top: 420px;
left: 60px;
top: 460px;
width: 500px;
height: 330px;
}
#fullMoonPIC {
border: 0px navy solid;
position: absolute;
width: 500px;
height: 620px;
top: 50px;
left: 480px;
}
#blueMoonPIC {
border: 0px teal solid;
position: absolute;
top: 40px;
left: 180px;
width: 500px;
height: 500px;
}
#whoPIC {
border: 0px teal solid;
position: absolute;
top: 0px;
left: 220px;
width: 500px;
height: 500px;
}
#morePIC {
border: 0px teal solid;
position: absolute;
top: 20px;
left: 240px;
width: 500px;
height: 300px;
}
#whatPIC {
border: 0px teal solid;
position: absolute;
top: 155px;
left: 5%;
width: 400px;
height: 400px;
}
#whyPIC {
border: 0px lime solid;
position: absolute;
top: 320px;
width: 500px;
height: 480px;
left: 400px;
}
#howPIC {
border: 0px gray solid;
position: absolute;
top: 230px;
left: 520px;
height: 550px;
width: 500px;
}
#buzzPIC {
border: 0px teal solid;
position: absolute;
top: 5px;
left: 18%;
width: 500px;
height: 500px;
}
#certPIC {
border: 0px teal solid;
position: absolute;
top: 155px;
left: 16%;
width: 400px;
height: 400px;
}
#newMoonTXT {
border: 0px olive solid;
position: absolute;
left: 260px;
height: 300px;
top: 460px;
width: 450px;
}
#halfMoonTXT {
border: 0px gray solid;
position: absolute;
top: 240px;
left: 420px;
height: 250px;
width: 440px;
}
#fullMoonTXT {
border: 0px green solid;
width: 480px;
top: 440px;
left: 100px;
height: 300px;
position: absolute;
min-width: 400px;
}
#blueMoonTXT {
border: 0px olive solid;
position: absolute;
top: 500px;
left: 500px;
width: 450px;
height: 340px;
}
#whoTXT {
border: 0px gray solid;
position: absolute;
top: 360px;
left: 540px;
height: 340px;
width: 380px;
}
#moreTXT {
border: 0px gray solid;
position: absolute;
top: 320px;
left: 300px;
height: 400px;
width: 650px;
}
#whatTXT {
border: 0px yellow solid;
width: 400px;
top: 60px;
left: 550px;
height: 720px;
position: absolute;
}

#whyTXT {
border: 0px green solid;
width: 480px;
top: 60px;
left: 230px;
height: 280px;
position: absolute;
}

#howTXT {
border: 0px teal solid;
position: absolute;
top: 40px;
left: 220px;
width: 300px;
height: 650px;
}
#buzzTXT {
border: 0px gray solid;
position: absolute;
top: 400px;
left: 350px;
height: 300px;
width: 600px;
}
#certTXT {
border: 0px olive solid;
position: absolute;
left: 30%;
width: 45%;
height: 390px;
top: 200px;
}
#sideNAV01 {
border: 0px blue solid;
width: 220px;
top: 100px;
height: 530px;
position: absolute;
}
#sideNAV02 {
	border: 0px fuchsia solid;
	position: absolute;
	width: 210px;
	height: 200px;
	top: 332px;
	left: 5px;
}
#sideNAV03 {
border: 0px navy solid;
position: absolute;
width: 210px;
height: 200px;
top: 368px;
left: 5px;
}

#topNAV01 {
border: 0px aqua solid;
position: absolute;
top: 260px;
left: 230px;
width: 600px;
height: 51px;
}

#topNAV02 {
border: 0px aqua solid;
position: absolute;
top: 240px;
left: 230px;
width: 40%;
height: 89px;
}

#newMoonNAV {
border: 0px aqua solid;
position: absolute;
top: 462px;
left: 500px;
width: 370px;
height: 51px;
}
#halfMoonNAV {
border: 0px aqua solid;
position: absolute;
top: 241px;
left: 660px;
width: 370px;
height: 51px;
}
#fullMoonNAV {
border: 0px aqua solid;
position: absolute;
top: 441px;
left: 340px;
width: 370px;
height: 51px;
}
#blueMoonNAV {
border: 0px aqua solid;
position: absolute;
top: 501px;
left: 740px;
width: 370px;
height: 51px;
}

div#topNAV01 a span {
display: none;
}
div#newMoonNAV a span {
display: none;
}
div#halfMoonNAV a span {
display: none;
}
div#fullMoonNAV a span {
display: none;
}
div#blueMoonNAV a span {
display: none;
}

/* moon nav text boxes */
div#topNAV01 a:hover span {
	display:block;
	color:#666666;
	border: 0px aqua solid;
	background-image:url(images/menu-moonbox.jpg);
	background-position: center center;
	background-repeat:no-repeat;
	position: absolute;
	top: -32px;
	left: 400px;
	width: 100px;
	height: 102px;
	font: 10px Verdana, sans-serif;
	text-align: center;
	text-decoration:none;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
div#newMoonNAV a:hover span {
	display:block;
	color:#666666;
	border: 0px aqua solid;
	background-image:url(images/menu-moonbox.jpg);
	background-position: center center;
	background-repeat:no-repeat;
	position: absolute;
	top: -32px;
	left: 280px;
	width: 100px;
	height: 102px;
	font: 10px Verdana, sans-serif;
	text-align: center;
	text-decoration:none;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
div#halfMoonNAV a:hover span {
	display:block;
	color:#666666;
	border: 0px aqua solid;
	background-image:url(images/menu-moonbox.jpg);
	background-position: center center;
	background-repeat:no-repeat;
	position: absolute;
	top: -32px;
	left: 280px;
	width: 100px;
	height: 102px;
	font: 10px Verdana, sans-serif;
	text-align: center;
	text-decoration:none;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
div#fullMoonNAV a:hover span {
	display:block;
	color:#666666;
	border: 0px aqua solid;
	background-image:url(images/menu-moonbox.jpg);
	background-position: center center;
	background-repeat:no-repeat;
	position: absolute;
	top: -32px;
	left: 280px;
	width: 100px;
	height: 102px;
	font: 10px Verdana, sans-serif;
	text-align: center;
	text-decoration:none;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}
div#blueMoonNAV a:hover span {
	display:block;
	color:#666666;
	border: 0px aqua solid;
	background-image:url(images/menu-moonbox.jpg);
	background-position: center center;
	background-repeat:no-repeat;
	position: absolute;
	top: -32px;
	left: 280px;
	width: 100px;
	height: 102px;
	font: 10px Verdana, sans-serif;
	text-align: center;
	text-decoration:none;
	padding-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}

#sideBAR {
border: 0px orange solid;
width: 40px;
height: 700px;
position: absolute;
top: 5px;
right: 5px;
}
#corner {
border: 0px silver solid;
position: absolute;
bottom: 10px;
left: 10px;
width: 28px;
height: 38px;
}
#footer {
border: 0px red solid;
position: absolute;
bottom: 10px;
right: 10px;
width: 300px;
height: 10px;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;
font-style: normal;
color: silver;
}
p em {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FF6600;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #333333;
line-height: 25px;
}
p a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #FF6600;
line-height: 25px;
font-weight: bold;
text-decoration: none;
}
p b{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: black;
}
p b a{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FF6600;
font-style: italic;
}
p b em{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #FF6600;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FF6600;
}
p im {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #FF6600;
line-height: 25px;
font-weight: bold;
}
p im a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
color: #FF6600;
line-height: 25px;
font-weight: bold;
text-decoration: none;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #000000;
}
h2 {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 24px;
font-style: normal;
font-weight: bold;
color: #FF6600;
}
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 25px;
color: #333333;
list-style-position: outside;
list-style-image: url(images/bullet01.gif);
list-style-type: none;
}
ul em {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FF6600;
}
ul a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FF6600;
text-decoration: none;
}

#mycustomscroll {
overflow: auto;
position: relative;
background-color: #FFFFFF;
padding: 0px 10px 0px 45px;
}		

/* Scroll Bar Master Styling Starts Here */
/*  scrollgeneric is used for corrective styling of elements, and should not be modified or removed */ 
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}
.vscrollerbase {
width:15px;
background-color: #F0F0F0;
background-image: url(images/scrollbar-bknd.gif);
}
.vscrollerbar {
background-image: url(images/scrollbar.gif);
width: 15px;
/* following is the bit that allows us fixed height scrollbars */
height: 23px !important;
/* for fixed height, we force the vscrollerbar class with an !important decleration, and fleXcroll follows suit.*/
background-image: url(images/scrollbar.gif);
/* unfortunately, due to limitations of CSS, we cannot provide a color for the background when we are
using alpha images, thay have to be transparent.*/
}

/* html .vscrollerbar {*/
/* IE6 alpha png trick */
/* filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src='scrollbar.jpg');*/
/* background-image: none;}*/

.hscrollerbase {
height: 11px; 
background-color: #F0F0F0;
}
.hscrollerbar {
height: 11px;
}
.vscrollerbar, .hscrollerbar {
/* paddings of these elements will decide how far the scrollbar will stop in both ends, and are not actually
used for styling, and are set to 0 by the script, here we will set them the size of our faux arrows */
padding: 0px;
z-index: 2;
}
/* scroller jog box, just in case */
.scrollerjogbox {
width: 11px;
height: 11px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background: #FFFFFF;
}