/* THIS IS THE NEW MENU CSS FILE - 4 JULY 2013 */

#navigation {
width: 200px;
margin: 0;
padding: 0;
list-style: none;
color: #1f1;                  /* not working - idling main text */
font: 100% arial, sans-seroff;
box-shadow: 4px 4px 4px 4px rgba(90, 120, 160, 1);    /* level 1 shadow */
border-radius: 1px;           /* level 1 shadow radius */
}

#navigation2 {
width: 200px;
margin: 0;
padding: 0;
list-style: none;
color: #1f1;                  /* not working - idling main text */
font: 100% arial, sans-seroff;
box-shadow: 4px 4px 4px 4px rgba(90, 120, 160, 1);    /* level 1 shadow */
border-radius: 1px;           /* level 1 shadow radius */
}







#navigation > li {             /* main idling */ 
line-height: 1em;            /*    2em    needed for main cell height */ 
display: block;
width: 100%;
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 8px 8px 8px 8px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eefff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to left, #eeffff 0%, #88ccff 100%);
border-radius: 5px;
z-index: 511;
}

#navigation2 > li {            /* main idling */ 
line-height: 1em;             /*    2em   needed for main cell height */ 
display: block;
width: 100%;
-moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15);
box-shadow: 8px 8px 8px 8px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.15);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eefff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to left, #eeffff 0%, #88ccff 100%);
border-radius: 5px;
z-index: 511;
}




#navigation > li > a {
display: block;
padding: 10px;                /* padding on main - was 1em; */
font-weight: bold;
color: #11f;                  /* idling main text */
text-decoration: none;
}

#navigation2 > li > a {
display: block;
padding: 10px;                /* padding on main - was 1em; */
font-weight: bold;
color: #11f;                  /* idling main text */
text-decoration: none;
}








#navigation > li > a:hover {  /* main when mouseover */
background: #acf;             /* background */
color: #11f;                  /* main text */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to right, #eeffff 0%, #88ccff 100%);
}

#navigation2 > li > a:hover {  /* main when mouseover */
background: #acf;             /* background */
color: #11f;                  /* main text */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to right, #eeffff 0%, #88ccff 100%);
}






#navigation > li.sub {
position: relative;
}

#navigation2 > li.sub {
position: relative;
}




#navigation > li.sub ul {     /* level 2 when mouseover main */
margin: 0;
padding: 0;
width: 200px;                 /* was 15em; */
list-style: none;
font: 100% arial, sans-seriff;
background: #cef;             /* level 2 background when mouseover main */
color: #f11;
position: absolute;
left: -1000em;
box-shadow: 4px 4px 4px 4px rgba(90, 120, 160, 1);    /* level 2 shadow */
border-radius: 5px;          /* level 2 foreground and shadow radius */
}

#navigation2 > li.sub ul {     /* level 2 when mouseover main */
margin: 0;
padding: 0;
width: 200px;                 /* was 15em; */
list-style: none;
font: 100% arial, sans-seriff;
background: #cef;             /* level 2 background when mouseover main */
color: #f11;
position: absolute;
left: -1000em;
box-shadow: 4px 4px 4px 4px rgba(90, 120, 160, 1);    /* level 2 shadow */
border-radius: 5px;          /* level 2 foreground and shadow radius */
}







#navigation > li.sub ul li {
display: block;
width: 100%;
line-height: 2em;            /* needed for level 2 height */
}

#navigation2 > li.sub ul li {
display: block;
width: 100%;
line-height: 2em;            /* needed for level 2 height */
}







#navigation > li.sub ul li a {  /* sub when mouseover main */
height: 100%;
display: block;
color: #11f;                  /* level 2 mouseover text */
font-size: 100%;
font-weight: bold;
text-decoration: none;
padding: 10px;                /* level 2 padding */
background: #cef;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eefff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to left, #eeffff 0%, #88ccff 100%);
}

#navigation2 > li.sub ul li a {  /* sub when mouseover main */
height: 100%;
display: block;
color: #11f;                  /* level 2 mouseover text */
font-size: 100%;
font-weight: bold;
text-decoration: none;
padding: 10px;                /* level 2 padding */
background: #cef;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eefff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to left, #eeffff 0%, #88ccff 100%);
}




#navigation > li.sub ul li a:hover {
background: #9cf;             /* level2 background when mouseover*/
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to right, #eeffff 0%, #88ccff 100%);
}

#navigation2 > li.sub ul li a:hover {
background: #9cf;             /* level2 background when mouseover*/
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #eeffff), color-stop(1, #88ccff));
background-image: -webkit-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -moz-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -ms-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: -o-linear-gradient(left, #eeffff 0%, #88ccff 100%);
background-image: linear-gradient(to right, #eeffff 0%, #88ccff 100%);
}




#navigation > li.sub:hover ul {
top: 0;
left: 200px;                  /* was 15em; */
}

#navigation2 > li.sub:hover ul {
top: 0;
left: 200px;                  /* was 15em; */
}