/******************************************************************************/
/**  kasey.ca / Smugmug / Menu Navigation / CSS                              **/
/******************************************************************************/

/* CSS Section */

/* style the outer div to give it width */
.menu {
   z-index:99;
   position:relative;                  /* Make the container moveable */
   margin: 0 auto 30px;                /* top R/L bottom */
   width:100%;                         /* Main bar total width */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

/* float the list to make it horizontal and a relative position so that you can control the dropdown menu positon */
.menu li {
   float:left;                         /* float right will reverse the main buttons */
   text-align:center;
   width:auto; 
   position:relative;
   padding: 0;
}

/* style the links for the top level */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;               /* none, overline, underline */
   color:white;                        /* color of text */
   background:#404040;
/* border:1px solid black;             /* optional */        
/* border-width:1px 1px 1px 1px;       /* optional */
   font-size:12pt;
   font-family: buenard, verdana, Comic Sans MS, tahoma, helvetica, arial, sans-serif;
   width:auto;                         /* Defines the main box dimensions. */
   height:20px;                        /* How tall your cells are */
   line-height:20px;                   /* vertical text alignment in cell */ 
   padding: 0 10px;                    /* top/bottom R/L */
   min-width: 60px;                    /* set to smallest text and use R/L padding above to space out */
}

/* main hover */
.menu a:hover, .menu :hover > a {
   color:white;
   background:black;
}

/* Fix so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:130px; w\idth:130px;}

/* Style the table so that it takes no part in the layout */
.menu table {position:absolute; top:0; left:0;}


/******************************************************************************/
/**  LEVEL 2                                                                 **/
/******************************************************************************/

/* Fix for IE5.5 */
* html .menu ul ul {top:20px; t\op:21px;}   /* IE gap between main bar and the dropdown items */

/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   height:0;
   top:20px;       /* move drop vertically */
   left:0;         /* move drop horizontally   */
   width:170px;    /* Size of the daughter cells */
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
   color:white;
   background:#404040;
   height:20px; 
   line-height:20px; 
   width:150px;
}

/* style the second level background non-hover */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
   background:#404040;  /* if 3rd level exists */
}

/* Fix for IE5.5 */
* html .menu ul ul a {width:140px; w\idth:140px;}

/* 2nd level hover */
.menu ul ul a:hover, .menu ul ul :hover > a, .menu ul ul :hover > a.drop {
   color:white;
   background:black;
}


/******************************************************************************/
/**  LEVEL 3                                                                 **/
/******************************************************************************/

/* position the third level flyout menu */
.menu ul ul ul {
   left:170px; 
   top:0;
   width:150px;
   height:auto;
}

/* style the third level links */
.menu ul ul ul a, .menu ul ul ul a:visited {
   color:white;            /* hover 2nd > 3rd & 4th */
   background:#404040;       /* hover 3rd > 4th */
   height:20px; 
   line-height:20px; 
   width:150px;
}

.menu ul ul ul li a {color:white;}
.menu ul ul ul li a:hover {color:white;}

/* 3nd level hover */
.menu ul ul ul a:hover, .menu ul ul ul :hover > a, .menu ul ul ul :hover > a.drop {
   color:white;
   background:black;
}


/******************************************************************************/
/**  LEVEL 4                                                                 **/
/******************************************************************************/

/* position the fourth level flyout menu */
.menu ul ul ul ul {
   left:170px; 
   top:0;
   width:150px;
   height: auto !important;
}

/* non-hover */
.menu ul ul ul ul li a {
   color:white;
   width:150px;
}

/* hover */
.menu ul ul ul ul a:hover, .menu ul ul ul ul :hover > a, .menu ul ul ul ul :hover > a.drop {
   color:white;
   background:black;
}


/******************************************************************************/
/**  LEVEL 5                                                                 **/
/******************************************************************************/

/* position the fourth level flyout menu */
.menu ul ul ul ul ul {
   left:170px; 
   top:0;
   width:150px;
   height: auto !important;
}

/* non-hover */
.menu ul ul ul ul ul li a {
   color:white;
   width:150px;
}

/* hover */
.menu ul ul ul ul ul a:hover, .menu ul ul ul ul ul :hover > a, .menu ul ul ul ul ul :hover > a.drop {
   color:white;
   background:black;
}


/******************************************************************************/
/**  LEVEL 6                                                                 **/
/******************************************************************************/

/* position the fourth level flyout menu */
.menu ul ul ul ul ul ul {
   left:170px; 
   top:0;
   width:150px;
   height: auto !important;
}

/* non-hover */
.menu ul ul ul ul ul ul li a {
   color:white;
   width:150px;
}

/* hover */
.menu ul ul ul ul ul ul a:hover, .menu ul ul ul ul ul ul :hover > a, .menu ul ul ul ul ul ul :hover > a.drop {
   color:white;
   background:black;
}


/******************************************************************************/
/**  LEVEL 7                                                                 **/
/******************************************************************************/

/* position the fourth level flyout menu */
.menu ul ul ul ul ul {
   left:170px; 
   top:0;
   width:150px;
   height: auto !important;
}

/* non-hover */
.menu ul ul ul ul ul ul ul li a {
   color:white;
   width:150px;
}

/* hover */
.menu ul ul ul ul ul ul ul a:hover, .menu ul ul ul ul ul ul ul :hover > a, .menu ul ul ul ul ul ul ul :hover > a.drop {
   color:white;
   background:black;
}


/******************************************************************************/
/**  Visiblity                                                               **/
/******************************************************************************/

/* make the 2nd level visible when hover on 1st level */
.menu ul :hover ul {visibility:visible;}

/* make the 3rd level visible when you hover over 2nd level */
.menu ul :hover ul :hover ul {visibility:visible;}

/* make the 4th level visible when you hover over 3rd level */
.menu ul :hover ul :hover ul :hover ul {visibility:visible;}

/* make the 5th level visible when you hover over 4rd level */
.menu ul :hover ul :hover ul :hover ul :hover ul {visibility:visible;}

/* make the 6th level visible when you hover over 5th level */
.menu ul :hover ul :hover ul :hover ul :hover ul :hover ul {visibility:visible;}

/* make the 7th level visible when you hover over 6th level */
.menu ul :hover ul :hover ul :hover ul :hover ul :hover ul :hover ul {visibility:visible;}

/* keep the 3rd level hidden when you hover on 1st level */
.menu ul :hover ul ul {visibility:hidden;}

/* keep the 4th level hidden when you hover on 2nd level */
.menu ul :hover ul :hover ul ul {visibility:hidden;}

/* keep the 5th level hidden when you hover on 3rd level */
.menu ul :hover ul :hover ul :hover ul ul {visibility:hidden;}

/* keep the 6th level hidden when you hover on 4th level */
.menu ul :hover ul :hover ul :hover ul :hover ul ul {visibility:hidden;}

/* keep the 7th level hidden when you hover on 5th level */
.menu ul :hover ul :hover ul :hover ul :hover ul :hover ul ul {visibility:hidden;}

/* End CSS Menu Navigation Code */