/* map=absolute, map ul/li & a =absolute  */
#map {position:absolute; top:-7px; left:161px;  width:655px; border:0px; margin:0px; background-color: #fff; z-index:300;} 

#map { float: left; 
       font-family: Arial,Helvetica,sans-serif; 
       font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; line-height: 17px; }
#map { background-image: url('http://myorganicfamily.com/images/dot.gif'); background-repeat: repeat-y; background-position: right center;}

#map p {padding-top:10px;}
#map a {color: #801D03; text-decoration:none;} /*  color:#801D03;  */
#map h1 { color: #1e5846; font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 14px; line-height: 1.2em;}
#map h2 { color: #009966; background-color:#fff; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 15px; line-height: 1em; padding-top:5px; padding-bottom:7px;}
#map h2.onleft { color: #801d03; font-size: 11px; text-align:left; line-height:13px;  text-decoration:none;}
#map h2.h2miessencesub { font-size:12px; line-height:16px;  font-family:verdana,arial,helvetica,sans-serif; font-weight:normal;}
#map h3 { color: #736983;  letter-spacing:0.03em; font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; line-height: 1.5em;}
#map h4 { color: #544c5f;  letter-spacing:0.03em; font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; line-height: 1.7em;}
#map h5 { color: #544c5f;  letter-spacing:0.03em; font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; line-height: 1.7em;}
#map h6 { color: #544c5f;  letter-spacing:0.03em; font-family: Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: bold; font-size: 11px; line-height: 1.7em;}

#map ul { margin:0px; padding:0px; list-style-type:none; list-style-image:none; list-style-position:outside; 
          position: absolute; top:15px; left:20px; }
/* firefox opera MAP*/
#map ul li { position: absolute; font-family:verdana, arial,helvetica,sans-serif; font-weight:bold; font-size:12px; line-height:14px;letter-spacing:0em; }       
/* position of transparent objects (eg cosmetics_menu & popup) on hover */
/* for below: if have img set height: nn px; also change line #map ul li#nutritional_menu a.tl  */                      
/* for below: each element can have width mentioned...if doing like stu */                      
#map ul li#skin_care_menu        { top: 0px; left: 2px; } 
#map ul li#body_oral_care_menu   { top: 0px; left: 46px; } 
#map ul li#hair_care_menu        { top: 0px; left: 97px; }
#map ul li#cosmetics_menu        { top: 0px; left: 140px; }
#map ul li#nutritional_menu      { top: 0px; left: 220px; }
#map ul li#household_menu        { top: 0px; left: 303px; }   
#map ul li#mother_baby_menu      { top: 0px; left: 386px; }   
#map ul li#essential-oils-menu   { top: 0px; left: 449px; } 
#map ul li#gifts_menu            { top: 0px; left: 550px; } 
* html #map ul li       { position:static; }
/*ie main MAP*/
* html #map ul li a.tl  { position: absolute; font-family:verdana,arial,helvetica,sans-serif; font-weight:bold; font-size:12px; line-height:14px; letter-spacing:0em; } 
* html #map ul li#skin_care_menu a.tl      { top: 0px; left: 2px; }
* html #map ul li#body_oral_care_menu a.tl { top: 0px; left: 46px; }
* html #map ul li#hair_care_menu a.tl      { top: 0px; left: 97px; }
* html #map ul li#cosmetics_menu a.tl      { top: 0px; left: 140px; }
* html #map ul li#nutritional_menu a.tl    { top: 0px; left: 220px; }
* html #map ul li#household_menu a.tl      { top: 0px; left: 303px; }
* html #map ul li#mother_baby_menu a.tl    { top: 0px; left: 386px; }
* html #map ul li#essential-oils-menu a.tl { top: 0px; left: 449px; }
* html #map ul li#gifts_menu a.tl          { top: 0px; left: 550px; }
/*ie firefox opera POPUP*/
#map ul li a { text-decoration: none; border-bottom: 0px solid #E1D8DB; font-weight:normal;}
/* firefox opera MAP */
#map ul li a.tl { background: transparent; display: block; text-indent: 0px; font-weight:bold; color:#828282; 
background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right;}     /*  color:#ce5231;  */
/*on above line hide text using text-indent: -9999px ... use this if using a background image at #map ul li#xxxxx a.tl */
#map ul li a.tl:hover{ z-index: 500; color:#e3701c;}  /* color:#e4a324; NOtext-decoration as it puts it to <hx> color:#e4a324; also see color set in a line a few lines below */
#map ul li#skin_care_menu a.tl      { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }  
#map ul li#body_oral_care_menu a.tl { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }
#map ul li#hair_care_menu a.tl      { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }
#map ul li#cosmetics_menu a.tl      { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }  
#map ul li#nutritional_menu a.tl    { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }
#map ul li#household_menu a.tl      { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }
#map ul li#mother_baby_menu a.tl    { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }
#map ul li#essential-oils-menu a.tl { height: 30px; background: transparent; padding-right:9px; background-image: url('http://myorganicfamily.com/images/dot-menu.gif'); background-repeat: repeat-y; background-position: top right; }
#map ul li#gifts_menu a.tl          { height: 30px; background: transparent; }
#map ul li span {color:#B9B9B9;}  /*a0cf90 e4a324 b97409*/

/* where to place POPUP relative to MAP item, also contain properties of popup */
#map ul li .popupbox, #map ul li a .popupbox { visibility: hidden; }
* html #map ul li a.tl:hover { border: 0px none;} /*NOtext-decoration as it puts it to <hx>*/
* html #map ul li a:hover .popupbox { visibility: visible; } /*NOtext-decoration as it puts it to <hx>*/
#map ul li:hover .popupbox { visibility: visible; }
.popupbox { display: block; position: absolute; height: auto; text-align: left; z-index:555; } /*consider overflow:hidden;*/
#skin_care_menu .popupbox        { left: -10px; top: 12px; width: 150px; }
#body_oral_care_menu .popupbox   { left: -15px; top: 12px; width: 150px; }
#hair_care_menu .popupbox        { left: -15px; top: 12px; width: 150px; }
#cosmetics_menu .popupbox        { left: -15px; top: 12px; width: 150px; }
#nutritional_menu .popupbox      { left: -15px; top: 12px; width: 150px; }
#household_menu .popupbox        { left: -15px; top: 12px; width: 150px; }
#mother_baby_menu .popupbox      { left: -15px; top: 12px; width: 150px; }
#essential-oils-menu .popupbox   { left: -15px; top: 12px; width: 150px; }
#gifts_menu .popupbox            { left: -70px;  top: 12px; width: 140px; }
.popupbox { border: 1px solid #ecf0f1; 
border-left: 1px solid   #e37f1c;
border-right: 1px solid  #e37f1c;
border-bottom: 1px solid #e37f1c;
        margin: 0px; padding:0px; background:#fff; display: block; z-index:555;} /* #f6c554; background-color is for box when it has div containers in popup */
.popup    { border: 0px; margin: 0px; padding:0px; background:#fff; display: block; z-index:555;} /* ebf2e1 background-color is for box when it has NO div containers in popup*/
.popup a { display: block;  }
.popup a.inlin { display: inline; padding:0px;}
#map ul li a:hover .popupbox .popup a:hover { text-decoration: underline; }
#map ul li:hover .popupbox .popup a:hover { text-decoration: underline; }  /* puts underline in FF and Opera */

b { overflow: hidden; display: block; height: 0px; }  /* had <b></b> before <div class="popup"> and after closing </div> to ensure all of box is active on hover */
/* .xb7 { overflow: hidden; display: block; height: 0px; }   this was for <b class="xb7"></b> */

/* sub menu */
.popup h1  {margin:0px; padding:0px; padding-left:5px; text-indent:0px;}
.popup h2  {margin:0px; padding:0px; padding-left:5px; text-indent:0px;}
.popup h3  {margin:0px; padding:0px; padding-left:5px; padding-top:7px; text-indent:0px; 
            font-family:verdana, arial,helvetica,sans-serif; font-weight:normal;}
.popup h4  {margin:0px; padding:0px; padding-left:5px; text-indent:0px;}
.popup h5  {margin:0px; padding:0px; padding-left:5px; text-indent:0px;}
.popup h6  {margin:0px; padding:0px; padding-left:5px; text-indent:0px;}
.popup p   {margin:0px; padding:0px; padding-left:5px; text-indent:0px; color:#202020; font-size:11px; font-weight:normal; line-height:1.2em;}
.popup a   {margin:0px; padding:0px; padding-left:10px; font-weight: normal; font-size: 11px; text-indent: 0pt;  }                                               
.popup a   {color: #8a1d03; text-decoration: none; }
.popup p a.apink  {color:#e33992;}                                         
.popup p.mTsmall  { font-size: 11px; line-height:14px;}                    

.popup div.col_features_1 { width:130px;  float:left; margin:3px; text-align:left; 
                          padding-left:5px; }
.popup div.col_features_2 { width:180px;  float:left; margin:3px; text-align:left; 
                          padding-left:5px;}
.popup div.col_features_3 { width:100px;  float:left; margin:3px; text-align:left; 
                          padding-left:5px; }
.popup div.col_features_4 { width:155px;  float:left; margin:3px; text-align:left; 
                          padding-left:5px; }