@charset "utf-8";

/*** nav from net.tus ***/
 /* Navigation */
  #navigation {
	position: relative; /*so we can add any elements and position absolute them relatively to this nav */
    height: 27px;
	
		  
			/**drop shadow **/
			-moz-box-shadow: 2px 2px 3px  rgba(100,100 ,100 ,0.7);
			-webkit-box-shadow: 2px 2px 3pxrgba(100,100 ,100 ,0.7);
			box-shadow: 2px 2px 3px rgba(100,100 ,100 ,0.7);
			
		border: #985307 1px solid;
	
	
	/* new design */	
		left: -30px;
		border-top-left-radius: 10px;
		-moz-border-radius-topleft: 10px; 
		
		border-top-right-radius: 10px;
		-moz-border-radius-topright: 10px;
		 
		padding: 0 28px 0 30px;
		
		 /* fallback */
		background-color: #CB260A;
	 background: #CB260A url(../img/web/bg_redGradient.jpg) repeat-x; 
	 
		 /* Firefox 3.6+ */
			   background: -moz-linear-gradient(top,  #F4341A, #CB260A);
			  
			  /* Safari 4-5, Chrome 1-9 */
			  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
			) */
			  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4341A), to(#CB260A));
			  
			  /* Safari 5.1+, Chrome 10+ */
			  background: -webkit-linear-gradient(#F4341A, #CB260A);
			  
			  /* Opera 11.10+ */
			  background: -o-linear-gradient(#F4341A, #CB260A);
		
		
			
  }
    #nav_main ul.navigation {
      position: relative;
      height:25px; 
	  /*   background: url(images/global/arrow.gif) no-repeat center 30px;
        */
	padding: 1px 0;
		
		/* prevly used outline and border, like the btns, but ff screwed up the outline by covering outline the dropshadow and subnavs when shown,
		so decided to use borders for both divs, this one and the outer one above instead of outline and border on only this div 
			border: #E7998C 1px solid;
			outline: #985307 1px solid;
		*/
		
		
		
} 

		/*new design -ribbon */
		.navRibbon{
			
			position: absolute;
			
			bottom: -14px;
			width: 19px;
			height: 14px;
			background:#CB260A;
			border: #985307 1px solid;
			border: none;
			
			/**drop shadow **/
			-moz-box-shadow: 2px 2px 3px  rgba(100,100 ,100 ,0.7);
			-webkit-box-shadow: 2px 2px 3pxrgba(100,100 ,100 ,0.7);
			box-shadow: 2px 2px 3px rgba(100,100 ,100 ,0.7);
		}
		
		.navRibbon.left{
			left: -1px;
			border-bottom-left-radius: 100% 50%;
			-moz-border-radius-bottomleft:100% 50%;
			border-right: none;
			
			/** fallback for ie**/
			background: url(../img/web/bg_navRibbon_l.png)  no-repeat;
			
			  background: -moz-linear-gradient(top, #CB260A, #831A08); 
			  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CB260A), to( #831A08));
			  background:  -webkit-linear-gradient(#CB260A, #831A08);			  
			  background: -o-linear-gradient(#CB260A, #831A08);
		}
		.navRibbon.right{
			right: -1px;
			border-bottom-right-radius: 100% 50%;
			-moz-border-radius-bottomright:100% 50%;
			border-left: none;
			
			/** fallback for ie**/
			background: url(../img/web/bg_navRibbon_r.png)  no-repeat;
			
			  background: -moz-linear-gradient(top, #CB260A, #831A08); 
			  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#CB260A), to( #831A08));
			  background:  -webkit-linear-gradient(#CB260A, #831A08);			  
			  background: -o-linear-gradient(#CB260A, #831A08);
	
		}
		
		
		.navRibbon.left::after {
		  content: '';
		  position: absolute;
		  right: 0;
		  width: 66%;  height: 66%;
		  background: #000;
		  border-top-left-radius: 100% 50%;
		  -moz-border-radius-topleft: 100% 50%;
		  
		  border-bottom-left-radius: 100% 50%;
		   -moz-border-radius-bottomleft: 100% 50%;
		}
		.navRibbon.right::after {
		  content: '';
		  position: absolute;
		  left:0 ;
		  width: 66%;  height: 66%;
		  background: #000;
		  border-top-right-radius: 100% 50%;
		  -moz-border-radius-topright: 100% 50%;
		  
		  border-bottom-right-radius: 100% 50%;
		   -moz-border-radius-bottomright: 100% 50%;
		  
		}
		
		
      #nav_main ul.navigation li {
        display: block;
        float: left;
        position: relative;
		
		
      }
	     
	  
        #nav_main ul.navigation li a {
          display: block;
          float: left;
          padding: 7px 14px 4px 14px;
          font-size: 13px;
          line-height: 13px;
		  text-transform: uppercase;
		 
		  
		  
		  	/*add left,right borders to the parents so they look upraised */
		  	  border-left: #E2543F 1px solid;
		border-right: #A4200B 1px solid;
		
	
		
        }
		 #nav_main ul.navigation li:last-child a{
		/*	border-right: none; */
          }
		
		/* main nav text style */
        /* Navigation Link Colors */
        #nav_main ul.navigation li a:link,
        #nav_main ul.navigation li a:visited {
          color: #FFF;
          text-decoration: none;
		/* color: #4D4D4E; */
        }
        #nav_main ul.navigation li a:hover {
          color: #fff;
          text-decoration: none;

			background: #CB260A ; 
        }
		
		
        #nav_main ul.navigation li a:active {
          color: #a1917b; 
		 
        }
         #nav_main ul.navigation li.parent {
			  
			
		 }
		    #nav_main ul.navigation li.parent a {
				background: url(../img/web/ico_arrow_down_white.png) 6px 50% no-repeat; 
          padding-left: 20px;
		
			}
						/* the bg arrow will apply to the children, so have to clear it here */
						#nav_main ul.navigation li.parent ul a { 
								background:none;		
								padding-left: 5px;
						}
			
		/* when hovering on the children subnav, change parent to */
        #nav_main ul.navigation li.parent > a:hover,
        #nav_main ul.navigation li:hover.parent > a {
    		background: #CB260A url(../img/web/ico_arrow_down_white.png) 6px 50% no-repeat; 
			

		
		}
		
			/* for current page, will show dark red color */
		 #nav_main ul.navigation li.current  a.current{
       /* fallback */
			  background-color: #8F1C07;
			 
		/* Firefox 3.6+ */
			   background: -moz-linear-gradient(top, #8F1C07, #B83C1D);
			  
			  /* Safari 4-5, Chrome 1-9 */
			  /* -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]
			) */
			  background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#8F1C07), to(#B83C1D));
			  
			  /* Safari 5.1+, Chrome 10+ */
			  background:  -webkit-linear-gradient(#8F1C07, #B83C1D);
			  
			  /* Opera 11.10+ */
			  background: -o-linear-gradient(#8F1C07, #B83C1D);

		
			
		}
		
		/* if this is the current page and it has children (parent), show a dark red arrow below it to connect to subnav */
		 #nav_main ul.navigation li.parent.current  {
			   height: 35px;
			   background:  url(../img/web/ico_darkRed_nav_arrow.png) 40px 100% no-repeat; 
		 }
		/* gap l and r - add to create the border shadow effect on the left side of last item on the left, and right side on the item on the right */
		#nav_main ul.navigation li.gapl a
		{

			border-right: none;
		}
		#nav_main ul.navigation li.gapl a:hover
		{
			background: none;
		}
		#nav_main ul.navigation li.gapr 
		{	float: right;
		}
		#nav_main ul.navigation li.gapr a
		{
			
			border-left: none;
		}
		#nav_main ul.navigation li.gapr a:hover
		{
			background: none;
		}
		/*** for the last parent, put it right aligh */
		#nav_main ul.navigation li.parent.last
		{
			
			color:#09C;
			float: right;
			clear: right;
						
		}
		#ngi_myStuff{
			position: absolute;
			top: 3px;
			left: 19px;
			
		}
		.nav_icon{	
			 position: absolute;
			top: 2px;
			left: 11px;
			
		}
		 li.parent .nav_icon{ /*for the one w children, gotta move the icon a bit right to allow space for arrow down */
			
			left: 18px;
			
		 }
		
		/* children ddlist nav of parent */
        #nav_main ul.navigation li ul {
          /* background: #5c5449 url(images/global/dd_top_border.png) no-repeat 0 0;
         */
			  background-color: #ACB2A4;
			  
		 border: 1px solid #080808;
		 border-top: 1px solid  #985307;
          top: 23px;
          left: 0px;
          position: absolute;
          width: 182px;
          padding-top: 2px;
          display: none;
        	z-index: 1;
		}		
		/* if this is children subnav of the 'last' parent (or only right align parent) move the ddlist to the left more so it wont fall down the right browser border*/
        #nav_main ul.navigation li.last ul {
          left: -80px;
		}
		
		
		
        #nav_main ul.navigation li:hover ul {
          display: block;
		  z-index: 101; /* coz the ddlist can get blocked by sth in the back, like home page banner's learn more link (has zindex:5 ) */
		  
        }
        #nav_main ul.navigation li:hover a {
          color: #fff;
        }
          #nav_main ul.navigation li ul li {
            border-bottom: 1px solid #D1D4CC;
            padding: 3px 4px;
            width: 174px;
          }
          #nav_main ul.navigation li:last-child {
            border-bottom: none;
			
          }
            #nav_main ul.navigation li ul li a {
              display: block;
              width: 158px;
              background: transparent;
              line-height: 16px;
              
              padding: 3px 7px;
             color:#4D4D4E; !important;
              
			
			  border: 1px solid transparent;
              -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
            }
			#nav_main ul.navigation li ul li a:link,  
			#nav_main ul.navigation li ul li a:visited{
              	font-size: 12px;
             	color:#333; !important;
              	
            }
			
            #nav_main ul.navigation li ul li a:hover {
          	    background: #40372f;
              color: #FFF;
			  
              border: 1px solid #40372f;
            }


			
			
 /*********** Navigation sub ********/
  #navigation_sub {
	position: relative; /*so we can add any elements and position absolute them relatively to this nav */
    height: 30px;
  }
    #nav_main ul.navigation_sub {
      position: relative;
	  top: 8px;
   /*   height: 17px;   to prepare incase too many subcat and subnav has 2 lines*/ 

	background-color: #AD3417;
			  	
	border-radius: 5px;
	-moz-border-radius: 5px;
	
			 
} 
    
      #nav_main ul.navigation_sub li {
        display: block;
        float: left;
        position: relative;
		
		
      }
	  
	  /* rightmost item - use class "last" */
	   #nav_main ul.navigation_sub li.last {
        display: block;
        float:right;
        position: relative;
		clear: right;
		
      }
	     
	  
        #nav_main ul.navigation_sub li a {
          display: block;
          float: left;
          padding: 3px 10px 5px 10px;
          font-size: 11px;
          line-height: 10px;
		 

        }
#nav_main ul.navigation_sub li a:link,
        #nav_main ul.navigation_sub li a:visited {
          color: #F97D6B;
          text-decoration: none;
		
        }
        #nav_main ul.navigation_sub li a:hover {
          color: #fff;
          text-decoration:underline;

			/*background: #CB260A ; */ 
        }
#nav_main ul.navigation_sub li.current a:link, 
#nav_main ul.navigation_sub li.current a:visited
{
	font-weight: bold;
	color:#FFF;
}


/* notification no. */
#nav_main .notifNumBox{
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 4px;
		
		/*drop shadow */
		-moz-box-shadow: 1px 1px 2px  rgba(100,100 ,100 ,0.3);
		-webkit-box-shadow: 1px 1px 2pxrgba(100,100 ,100 ,0.3);
		box-shadow: 1px 1px 2px rgba(100,100 ,100 ,0.3);
}

/* main nav */
#nav_main ul.navigation  .notifNumBox{
		padding: 2px 5px;
	
		position: absolute;
		top: -10px;
		right: -10px;
		
		background: #7DA012;   /* #CB260A; */
		border: 1px solid #000;
		color: white;
				
}
	
		
		
	/* in the childnav ddlist */
#nav_main ul.navigation .child-nav .notifNumBox{
	padding: 2px  5px;
		border: 1px solid #333;
		background: #7DA012;   /* #F23319; */
		position: relative;
		top: 1px;		
		color: white;
		
}
	/* in the second nav bar of */ 
#nav_main ul.navigation_sub  .notifNumBox{
	padding: 2px 5px;
	background: #7DA012; /* #F97D6B; */
	border: 1px solid #333; /* #CB260A; */
	position: relative;
	top: 2px;
	color: white;
	font-weight: normal;
}