/* MENU CSS FILE - 18 FEB 2014 */

/* id=some     uses  #some   */
/* class=some  uses  .some   */

.navigation {
width: 180px;    /* 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;      /*   was 1.5    was 2 - 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;
}

.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%);
}

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

.navigation > li.sub ul {    /* level 2 when mouseover main */
margin: 0;
padding: 0;
width: 180px;           /* 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: 1.5em;       /* was 2 - 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%);
}

.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%);
}

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