#menu {
	font-family:verdana,sans-serif;
}


#menu ul, #menu li {
	
	/* line-height:3px; */
	text-align:left;
	font-size:12px;
	list-style-position:outside;  
}

/* menu starts here */

#menu {
	list-style:none;
	/* width:940px; */	
	   width: 100%;
	/* margin:0; */ /* auto;*/

   margin-bottom: 20px;
	margin-top: 0;
	height:30px;  /* was 45, trying to make it narrower */
	padding:2px 10px 0px 10px; /* area to the left and right of where the nav item words sit, and top and bottom, make this small so that the hover white is large? */
	
    	background: #174749;    
    	
	
}
/* tab starts here */

#menu li.main {
	float:left;
	display:block;
	position:relative;
	text-align:center;
	padding:5px 10px 0px 10px;	/* was 4px 10px; */
	margin:0 0px 0 0;  /* was 7px 30px 0 0;  */
	border:1px solid #174749;
	top: 0px;  /* this will force the words to sit up higher in the nav bar if it's negative */
	
}

#menu li li {
	/*border: 1px solid #ff0000;*/  /* the border's not going around the entire anchored item though */
}

#menu li.main:hover {
	border:1px solid #174749;     /* border around the top left and rt edge of the moused over main nav bar tab; something must be overriding or overlaying the bottom border */
	padding:5px 10px 0px 10px; /* was 7px 9px; */
	margin: 0;
	background:#ffffff;
	
}
#menu li.main a {
	font-size:12px;
	color: #FFFFFF;  /* text color on the main nav bar when no mouse on it */
	display:block;
	outline:0;
	text-decoration:none;
	height: 20px;
	top: auto;
}
#menu li.main:hover a {
	color:#666666;  /* text color on the main nav bar text when it's moused over */
}
/* menu containers here  */

#menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4 {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em;
	text-align:left;
	padding:10px 5px;
	/* border:1px solid #174749; */  /* border around the outer edge of the drop down */
	border-top: none;
	border-left: 1px solid #174749;
	border-right: 1px solid #174749;
	border-bottom: 1px solid #174749;
	z-index: 999;
	
	/* rounded corners */
    
  
	/* gradient */
    background:#FFFFFF;
	
}
#menu .menu-container-1 {
	width:140px;
}
#menu .menu-container-2 {
	width:280px;
}
#menu .menu-container-3 {
	width:420px;
}
#menu .menu-container-4 {
	width:620px;
}
#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
	top: 21px; /*auto;*/
	left:-16px;
}
/* columns ici */

#menu .column-1, #menu .column-2 {
	display:inline;
	float:left;
	position:relative;
	margin:0 5px;
}
#menu .column-1 {
	width:160px;
}
#menu .column-1b {
	width:180px;
}

#menu .column-2 {
	width:260px;
}
#menu .column-3 {
	width:390px;
}
#menu .column-4 {
	width:520px;
}
/* right menu */

#menu .menu-right {
	float:right;
	margin-right:10px;  /* was 0 */
}
#menu li .align-right {
	/*rounded corners */
    
    border-radius:5px 0 5px 5px;
	-moz-border-radius:5px 0 5px 5px;
	-webkit-border-radius:5px 0 5px 5px;
}
#menu li:hover .align-right {
	left:auto;
	right:-1px;
	top:auto;
}
/* menu h2, h3, p, etc.... */

#menu p, #menu h2, #menu h3, #menu ul li {
	line-height:14px;  /* was 21 */
	/*font-size:12px;*/
	text-align:left;
}
#menu p {
	line-height:18px;
	margin-bottom:10px;
	color:#F2E8E8;
}
#menu h3, #menu h2 {
	font-family: arial, helvetica, sans-serif;
	font-size:12px;
	margin:4px 0 4px 0; /* i changed this from 7px 0 13px 0 but not sur it really did anything */
	padding-bottom:5px;
	text-transform:uppercase;
	color: #333333;
	font-weight: bold;
}
#menu li:hover div a {
	/*box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;*/   /* wow, that's nuts. That's the thing that looks like a bottom border on the list items */
	color: #666666;
	font-size: 11px;
	padding-left: 6px;
	
	
}



#menu li.longText {
	text-decoration: none;
	padding-bottom: 5px;
	margin-bottom: 10px;
	/*border: 1px solid #0000ff;*/
}

#menu li.longText:hover {
	text-decoration: underline;
	padding-bottom: 5px;
	margin-bottom: 10px;
	/*border: 1px solid #0000ff;*/

}

.navicon {
	display: inline;
	float: left;
	padding-right: 4px;
}

#menu li ul {
	/* box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;   */   /* this was doing the "underline" on the last item in each list */
	list-style:none;
	list-style-position:outside;  
	padding:0;
	margin-bottom:12px;
	list-style-position:outside;   /* hoping this will fix the indent in ie6 and 7 */
}
#menu li ul li {
	float: none;
	font-size: 14px;   /* why aren't these responding to changes now? */
	/*line-height: 24px;*/  /* controls the amount of spacing between list items in the children, was 24 which looks too spaced out when line wraps */
	margin: 0;
	height:24px;  /* was 15 */
	padding: 5px 0;  /* was 0 but I want some vertical space between items that isn't line spacing and doesn't space out items that are 2 lines long */
	position: relative;
	text-align: left;
	/*width: 130px;*/
	/*border: 1px solid #ff0000;  */ /* not boxing the entire anchor though */
}
#menu li ul li:hover {
	background: none;
	border: medium none;
	margin: 0;
	padding: 5px 0; /* was 0 but I want some vertical space between items that isn't line spacing and doesn't space out items that are 2 lines long */
	text-decoration: underline;
}
/* login here */

#menu .form {
	margin:10px 0 0 45px;
}
#menu input {
	color:#e9e9e9;
	font-size:12px;
	outline:0 none;
	padding:9px;
	/* gradient */
    background:#6e6e6e;
	background:-moz-linear-gradient(top, #888, #575757);
	background:-webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	/* css3 borders */
    border:1px solid #555;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	/* css3 shadow effect */
    -moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
#menu input:focus {
	background: none repeat scroll 0 0 #313131;
}
#menu input:hover {
	border-color: #000000;
}
#menu .submit input {
	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
	border-radius: 10px 10px 10px 10px;
	box-shadow: 0 0 1px #EDF9FF inset;
	color: #FADDDE;
	padding: 9px;
	width: 90px;
}
#menu .submit input:hover {
	background: -moz-linear-gradient(center top, #444444, #3D3A3A) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#3D3A3A));
	cursor: pointer;
}
#menu .submit input:active {
	background: -moz-linear-gradient(center top, #444444, #111111) repeat scroll 0 0 transparent;
	background:-webkit-gradient(linear, left top, left bottom, from(#444444), to(#111111));
	border: 1px solid #9C9C9C;
	color: #9C9C9C;
}