/* this is the clipping region for the menu. its width and height get set by script,

 depending on the size of the items table */

.transMenu

{

    position: absolute;

    overflow: hidden;

    left: -1000px;

    top: -1000px;

}



/* this is the main container for the menu itself. its width and height get set by script,

 depending on the size of the items table */

.transMenu .content

{

    position: absolute;

}



/* this table comprises all menu items. each TR is one item.

 It is relatively positioned so that the shadow and background

 transparent divs can be positioned underneath it */

.transMenu .items

{

    position: relative;

    left: 0px;

    top: 0px;

    z-index: 2;

}



.transMenu.top .items

{

    border-top: none;

}



/* each TR.item is one menu item */

.transMenu .item

{

    color: white;

    font-size: 12px;

    font-weight: bold;

    font-family: sans-serif;

    text-decoration: none;

    /* this is a hack for mac/ie5, which incorrectly cascades

     the border properties of the parent table to each row */

    border: none;

    cursor: pointer;

    cursor: hand;

}



/* this DIV is the semi-transparent background of each menu.

 the -moz-opacity is a proprietary way to get transparency in mozilla,

 the filter is for IE/windows 5.0+. */

/* we set the background color in script because ie mac does not use it;

 that browser only uses a semi-transparent white PNG

 that the spacer gif inside this DIV is replaced by */

.transMenu .background

{

    position: absolute;

    left: 0px;

    top: 0px;

    z-index: 1;

    -moz-opacity: .9;

    filter: alpha( opacity = 90 );

}



/* same concept as .background, but this is the sliver of shadow

 on the right of the menu. Its left, height, and background are set by script.

 In IE5/mac, it uses a PNG */

.transMenu .shadowRight

{

    position: absolute;

    z-index: 3;

    top: 3px;

    width: 2px;

    -moz-opacity: .4;

    filter: alpha( opacity = 40 );

}



/* same concept as .background, but this is the sliver

 of shadow on the bottom of the menu. Its top, width, and

 background are set by script. In IE5/mac, it uses a PNG */

.transMenu .shadowBottom

{

    position: absolute;

    z-index: 1;

    left: 3px;

    height: 2px;

    -moz-opacity: .4;

    filter: alpha( opacity = 40 );

}



/* this is the class that is used when the mouse is over

 an item. script sets the row to this class when required. */

.transMenu .item.hover

{

    background: #fdfdfd;

    color: black;

}



/* this is either the dingbat that indicates there is a submenu,

 or a spacer gif in its place. We give it extra margin to create

 some space between the text and the dingbat */

.transMenu .item img

{

    margin-left: 10px;

}



/* this is the container for the buttons. its width is set in 

order to make the container align with the left column on the

page */

div#menuHolder

{

    width: 164px;

}



/* this makes it so when your mouse is over one of the buttons,

it becomes translucent and lets the background color show through. */

div#menuHolder a.hover img

{

    -moz-opacity: 0.8;

    filter: alpha( opacity = 80 );

}



/* when the slideshow is paused, this fades it out */

img#butterfly.hover

{

    -moz-opacity: 0.7;

    filter: alpha( opacity = 70 );

}



/* makes it so the cursor looks like a hand when over the butterfly

image, to make it clear that it is clickable (otherwise it would

remain an arrow*/

img#butterfly

{

   /* cursor: pointer;

    cursor: hand;*/

}





/*this section sets the colors that the buttons turn when activated*/

a#homeButton{background-color: green;}

a#calcButton{background-color: rgb( 0, 131, 199 );}

a#supportButton{background-color: rgb( 219, 4, 101 );}

a#partnersButton{background-color: red;}

a#contactButton{background-color: gray;}



ol{list-style-type:upper-roman;}

ol>ol{list-style-type:upper-alpha;}

ol>ol>ol{list-style-type:decimal;}



*#simile

{

	color:white!important;

	font-family:Verdana, Arial;

	font-size:10px!important;

	padding-left:9px!important;

	padding-top:3px!important;

	padding-bottom:15px!important;

}



*#simile strong

{

	font-size:13px!important;

}

.normalText
{
	color: White;
	font-family:Verdana;
    font-size: 13px; 
}
.buttonText
{
	color: Black;
	font-family:Verdana;
	font-size: 13px;	
}
.emphText
{
	color: White;
	font-family:Verdana;
	font-size: 16px;
	font-weight: bold;
}