/*start of nav bar styles*/
/* unfortunate ie7 gap fix */
        .ie7 .navigation ul ul li{
            margin-bottom:;
        }

.header{
	width: 600px; 
	height:50px; 
}
.content{
	position:relative; 
	width: 600px; 
	height:500px; 
	color:white; 
	background-color: #e6056f; 
	overflow: visible;
	}
.item{
	position:absolute; 
	top:50px; 
	left:20px; 
	width: auto; 
	height:auto; 
	background-color: #FFF;
	}

.navigation {
	width: 440px;
        }
.navigation ul{
	/* positioning */
	position: relative;
	z-index: 3000;
	/* remove the dots next to list items: */
	list-style: none;
	/* get rid of any default or inherited margins and padding: */
	margin: 0;
	padding: 0;
	/* styling: */
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 15px;
	width: 530px;
        }
        
        /* we're using the direct descendant selectors > to ONLY affect the main menu items */
        .navigation > ul > li {
        /* positioning */ 
            position: relative;
            float: left;
			z-index: 200;
        /* styling: */
            left:;
        }
        .navigation > ul > li > a {
        /* positioning */ 
            display:block;
        /* styling: */
            text-decoration:none;
            
        }
        .navigation > ul > li > a:hover{
	/* styling: */
            /* [disabled]background-color:#666666; */ /* grey */
	color: #eeeeee; /* light grey */
        }
.navigation ul ul{ /* remove. this is for illustration purposes only */
	width: 200px; /* you need a width to accommodate tertiary menus */
	float: left;
	position: absolute;
	z-index: 9999999999999;
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.3s ease-in;
	-moz-transition: height 0.3s ease-in;
	-o-transition: height 0.3s ease-in;
	-ms-transition: height 0.3s ease-in;
	transition: height 0.3s ease-in;
	left: 0px;
	top: 40px;
        }
        

        /* don't display tertiary box yet */
        .navigation > ul > li:hover ul ul, .navigation > ul > li > a:hover ul ul{
            height:0;
            
        }
        /* tertiary drop-down box */
        .navigation ul ul ul{
            width:auto;
        }
        
        .navigation > ul > li:hover ul, .navigation > ul > li > a:hover ul,
        .navigation ul ul li:hover > ul, .navigation ul ul li a:hover > ul{
            height:220px; /* need a height to accommodate any tertiary menus */
        }
        
        /* drop-down item styles */
        /* if you want different styling for tertiary menus, just copy the 4 rules below and insert an additional ul: for example: ".navigation ul ul li", becomes: ".navigation ul ul ul li" */
        
        .navigation ul ul li{
	background-color: #333;
	opacity: 0.9;
	width:auto;
	-webkit-transition: background-color 0.3s ease;
	-moz-transition: background-color 0.3s ease;
	-o-transition: background-color 0.3s ease;
	-ms-transition: background-color 0.3s ease;
	transition: background-color 0.3s ease;

        }
        
        .navigation ul ul li:hover {
            background-color:#999; /* grey */
        }
        
        .navigation ul ul li a {
            display:block;
			text-align: left;
            text-decoration:none;
            padding:5px;
            color: #FFF; /* grey */
        }
        .navigation ul ul li a:hover, .navigation ul ul li:hover > a {
            color:#ffffff; /* white */
        }
        .navigation ul ul ul li a{
            border:0 !important;
        }
        .navigation ul ul ul li + li a{
            border-top:1px dotted #999 !important;
        }
        .navigation ul ul li + li a{
            border-top:1px dotted #999;
        }
        .navigation ul ul li:hover + li a{
            border-top:1px solid #eaeaea;
        }
        .navigation ul ul ul li:hover + li a{
            border: 0 !important;
        }
        .navigation ul ul ul li:hover + li{
            border-top:1px solid #999 !important;
        }