Body
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#424242;
    line-height:18px;
    margin:0px;
    }
td,tr{
 font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#424242;
    line-height:18px;
    margin:0px;
	}
.bg{
background-image:url(images/apollo_bodybg.jpg);
background-repeat:repeat-x; 
background-position:top center;
}

.textfield
{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#656565;
border:1px solid #A09D9D;
background-color:#ffffff;
height:16px;
}


.copyright
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#8C8C8C;
    }

td.padding
   {
   padding-right:12px;
   padding-left:16px;
   padding-top:34px;
   }

.border
{
border:0px solid #BFBFBF;
}

form{
margin: 0px;
padding: 0px;
}

.bullet
{
background-image:url(images/apollo_bullet1.gif);
background-repeat:no-repeat;
background-position:5px 8px;
}



.price
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px; 
    font-weight:bold;
    color:#9D2528;
    }

.heading
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:bold;
    color:#424242;
    padding-top:6px;
    }

.heading1
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:22px; 
    font-weight:bold;
    color:#9D2528;
    padding-top:6px;
    }

.heading2
    {
    font-family:tahoma;
    font-size:12px; 
    font-weight:bold;
    color:#000000;
    }

.heading3
    {
    font-family:tahoma;
    font-size:12px; 
    font-weight:bold;
    color:#FF2716;
    }

.heading4
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:bold;
    color:#000000;
    }

.heading5
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#6D6D6D;
    }

/*-------------css for read more links-----------------------*/

.readmore
    {
    font-family:tahoma;
    font-size:10px; 
    font-weight:bold;
    color:#4A73BF;
    text-decoration:none;
    }

.readmore a:link
    {
    font-family:tahoma;
    font-size:10px; 
    font-weight:bold;
    color:#4A73BF;
    text-decoration:none;
    }

.readmore a:visited
    {
    font-family:tahoma;
    font-size:10px; 
    font-weight:bold;
    color:#4A73BF;
    text-decoration:none;

    }

.readmore a:active
    {
    font-family:tahoma;
    font-size:10px; 
    font-weight:bold;
    color:#4A73BF;
    text-decoration:none;

    }

.readmore a:hover{
font-family: tahoma;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #9D2528;
border-bottom: 1px dotted #9D2528;
}

/*-------------End for css for read more links-----------------------*/


/*-------------css for addtocart links-------------------------------*/

.home_link
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#9D2528;
    text-decoration:none;
    }

.home_link a:link
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#5E5E5E;
    text-decoration:none;
    }

.home_link a:visited
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#5E5E5E;
    text-decoration:none;
    }

.home_link a:active
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#5E5E5E;
    text-decoration:none;
    }

.home_link a:hover
    {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px; 
    font-weight:normal;
    color:#9D2528;
    text-decoration:none;
    border-bottom: 1px dotted #9D2528;
    }

/*-------------End for css for addtocart links-----------------------*/

.bg_addtocart
{
width:87px;
height:15px;
background-color:#9D2528;
}

.bg_addtocart_hover
{
width:87px;
height:15px;
background-color:#7C7C7C;
}

.bg_more
{
width:52px;
height:15px;
background-color:#7C7C7C;
}

.bg_more_hover
{
width:52px;
height:15px;
background-color:#9D2528;
}

.bg_wishlist
{
width:111px;
height:15px;
background-color:#7C7C7C;
}

.bg_wishlist_hover
{
width:111px;
height:15px;
background-color:#9D2528;
}


/*-------------css for addtocart links-------------------------------*/

.addtocart_link
    {
    font-family:tahoma;
    font-size:11px; 
    font-weight:bold;
    color:#FFFFFF;
    font-variant:small-caps;
    text-decoration:none;
    }

.addtocart_link a:link
    {
    font-family:tahoma;
    font-size:11px; 
    font-weight:bold;
    color:#FFFFFF;
    font-variant:small-caps;
    text-decoration:none;
    }

.addtocart_link a:visited
    {
    font-family:tahoma;
    font-size:11px; 
    font-weight:bold;
    color:#FFFFFF;
    font-variant:small-caps;
    text-decoration:none;
    }

.addtocart_link a:active
    {
    font-family:tahoma;
    font-size:11px; 
    font-weight:bold;
    color:#FFFFFF;
    font-variant:small-caps;
    text-decoration:none;
    }

.addtocart_link a:hover
    {
    font-family:tahoma;
    font-size:11px; 
    font-weight:bold;
    color:#FFFFFF;
    font-variant:small-caps;
    text-decoration:none;
    border-bottom: 1px dotted #ffffff;
    }
.lightgrey
{
font-family: tahoma;
color: #707070;
font-size: 11px;
padding-top:20px;
/*text-decoration:none;*/
}
.lightgrey:hover
{
font-family: tahoma;
color: #707070;
font-size: 11px;
text-decoration:underline;
}
.lightgrey1
{
font-family: tahoma;
color: #484848;
font-size: 11px;
text-decoration:none;
}
.lightgrey1:hover
{
font-family: tahoma;
color: #484848;
font-size: 11px;
text-decoration:underline;
}

/*-------------End for css for addtocart links-----------------------*/
/*
I have applied, in em's, the width of the menu to the "container" div ~ <div id="menu">, 
that way we can forget about IE's Box Model problems as all block elements inside this will naturally fill the container's width by default, 
even if borders are used on internal elements.

em widths are used to enable the menu to resize to contain text if/when text is enlarged. 
And for the purposes of this demo I have added a background color to this div for visual reasons only.
*/

body{
margin: 0px;

}

#menu{
margin-top: 5px;
width: 16em;
background-color: #;
}


/*
Now that the list, <ul>, elements are all contained. The first thing we do is remove the Bullets and Indents which browsers naturally apply to <ul> elements by default. 
Both padding and margin require to be set to zero as different browsers create the indent using either of these properties.
*/


#menu ul{
list-style: none;
margin: 0px;
padding: 0px;
}


/*
Then we would like to make the <h2> headings and the <a> anchors appear in the same size text and with borders but with slightly differing colors 
to differentiate between the two. This is also where we'll add any color, background changes to the anchor text on hover.
*/


#menu a, #menu h2{
font-family: tahoma;
font-size: 13px;
border: 1px solid #ffffff;
display: block;
margin: 0px;
padding: 0px 15px;
}

#menu a{
color: #414141;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
background-image:url(images/apollo_bg_leftnav.gif);
background-repeat:no-repeat;
background-position:top left;
text-decoration: none;
padding-left:10px;
}

#menu h2{
color: #25292C;
background-color:#CFCED3;
text-transform: uppercase;
}

#menu a:hover{
color: #E0E0E0;
background-image:url(images/apollo_bg_leftnav_h.gif);
background-repeat:no-repeat;
background-position:top left;
font-weight:bold;
}


#menu1 a{
color: #414141;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
background-color:#DDDDDD;
text-decoration: none;
padding:0px 5px;
}

#menu1 a:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color: #E0E0E0;
background-color:#9D2528;
}


/*

Now we want to move the third level nested level lists out to where they should be, to their "pop out" position.

The way we do this is to use Absolute Positioning which takes them out of the flow of the page and allows us to position them where we want.

*/

#menu li{
position: relative;
}


#menu ul ul ul{
position: absolute;
top: 0px;
left: 100%;
width: 13em;
display: none;
}

div#menu ul ul ul, div#menu ul ul li:hover ul ul{
display: none;
}


div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul
{display: block;}
/*---width for third level dropdowns---*/
#menu ul ul ul ul{
position: absolute;
top: 0px;
left: 100%;
width: 12em;
display: none;
}


/*
div#menu ul ul li:hover ul ul{display: none;}
It is used to hide third level popout menu and
div#menu ul ul ul li:hover ul is used to show third level popout menu
*/


/*

That has now moved the required lists, taken them out of the flow of the menu, but there are two things wrong.

   1. They are not positioned where we would like them to be.
   2. They are not the correct width any more

Both problems are overcome together.

These lists, when they were in the flow of the menu (in the default "static" position), appeared in the flow, and took their inheritable properties from their parent elements. However now we have removed them from the flow using Absolute Positioning they have no parent element, instead they have a containing block. So the "pop-outs", at the minute are positioned at top: 0; and left: 0; of their Initial Containing Block (the viewport or <html> root element). You don't need to read all that if you don't want. All we really need to know is:

    If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed...

    ...If there is no such ancestor, the containing block is the initial containing block.

For Our menus we establish new containing blocks for these popout <ul>'s by adding position: relative; to these <ul>'s nearest ancestors, which is always an <li> element. Then because using position relative with no offset co-ordinates specified does not affect the actual position of an element we do not need to single out only affected <li>'s we can apply it to all.

For the width correction, Absolutely Positioned Elements need to be explicitly told what width to be. If you set the width to be 100% they will become 100% of their containing block, and because we're going to establish new containing blocks for them we can safely tell them to use percentage widths again.

This CSS below has now corrected the width and positioning, trust me it has, but now the "popouts" are appearing on top of the first level lists because both their coordinates were set at zero we need to adjust the left co-ordinate to move the popouts over to the right side of their containing block. Lets set them to 100% left to avoid having to do any sums with widths again.

#menu li {position: relative;}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}

This now shows all the popouts in their correct position, remember to view with a non-IE browser.

*/

/*---------------for ie deformities-----------------------*/
/*--------------white space between different links-------*/
#menu ul li{
float: left;
width: 100%;
}

#menu ul li a{
height: 1%;
}zzz
			
/*---------css end for vertical text links----------------------------------------*/