#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: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;
}

/* the following styles are for the top line of the nav, with the tabs to the main site sections */
 
 .upperNav ul {
  list-style: none;
  background-color: #ffffff; /* shocking pink while I debug the spacing, then put it back to white */
  
  /*text-align: center;*/
  padding: 0;
  margin: 0;
   
}

.upperNav li {
  font-family: verdana,sans-serif;
  /*font-size: 1.2em;*/
  font-size:12px;
  line-height: 20px; /* was 30 */
  height: 20px; /* was 30 */
  border-bottom: 1px solid #888;
  text-align: center; /* put words in center of fixed width li item */
  background-color: #ccc;
  border-radius: 12px 12px 0px 0px;
  border: 1px solid #999;
  /* padding:0px 20px 0px 20px; */  /* padding around the words when they're grey... if I leave this here it looks bad when I mouse over, if i take it out, the lengths bounce around on mouse over/off */
  
}

.upperNav a {
  text-decoration: none;
  color: #333;
  display: block;
 /*  transition: .3s background-color; */   /* with the delay on, the rounded corners visibly start off as square */
}
 
.upperNav li a:hover {
  background-color: #4B7B6D; /* green but not quite the dark one */
  
  border-radius: 12px 12px 0px 0px;
  color: #fff;
 /* padding:0px 20px 0px 20px; */ /* padding around the words on the mouseover of the top nav bar, changing to green-grey */
}
 
.upperNav a.active {
  background-color: #174749; /* dark green that matches the main nav below */
  border-radius: 12px 12px 0px 0px;
  color: #ffffff;
  cursor: default;
}

.upperNav a.active:hover {
  background-color: #174749; /* don't change hover color of active tab */
  
}

/* when it's not media screen width 650, I don't want the rounded corners */
@media screen and (max-width: 599px) {
	.upperNav li ul, .upperNav li, .upperNav li a:hover,.upperNav a.active{
		border-radius: 0px;
		}
 }
@media screen and (min-width: 600px) {
  .upperNav li {
    width: 110px;  /* was 120 */
 /* padding: 0 5px 0 15px; */
    border-bottom: none;
    /*height: 50px; */
 /*    line-height: 50px; */
  /*  font-size: 1.4em; */
   display: inline-block;
  }


.upperNav li {
    display: inline-block;
     margin-right: 4px;  /* was -4 maybe this messes up and leaves cracks? wow taking this out makes more gaps */
	 /* when you make the margin right really small (ie large negative), it makes the item cover over the right side of the previous item, ie it shifts it left; when you go large, it shifts things to the right, putting the background color (the shocking pink I'm playing with) to the left of each item; when I make it 0, there is still space, which appears to be about 4 pixels, which I guess is why someone was trying 4 pixels on this; -5 was the magic bullet*/
  }
 
 /* submenus */
  .upperNav li ul {
    position: absolute;
	z-index: 9999;
    display: none;
   /* width: inherit; */
   width: 190px;
   background: #fff;
   text-align: left;
   border-top: none;
	border-left: 1px solid #174749;
	border-right: 1px solid #174749;  
	border-bottom: 1px solid #174749;
	border-top: 1px solid #174749;
	
  }

  .upperNav li:hover ul {
    display: block;
  }
  
 /* .upperNav li ul li:hover {
	 text-decoration: underline;
	 background: #fff;
	 color: #333;
	}
	*/
	
	.upperNav ul li ul li a:hover {
	 text-decoration: underline;
	 background: #fff;
	 color: #333;
	}
	
  .upperNav li ul li {
	 background: #fff;
	color: #333333;
   text-align: left;
     width: 170px; /* i made this smaller than the 190 above, to  get the right border to show */
	 padding-left: 5px;
	 margin-left: 5px; /* this isn't working i'm trying to give some space before the word */
	  height: 30px;
	  
  }
  
  .upperNav ul li  ul li {
	 background: #fff;
	 text-align: left;
     width: 170px; /* i made this smaller than the 190 above, to  get the right border to show */
	 padding-left: 5px;
	 margin-left: 5px; /* this isn't working i'm trying to give some space before the word */
	 border: none;
	 padding-top: 10px;
	 
  }
  
  .upperNav ul li  ul li a {
	 background: #fff;
	color: #333;
   text-align: left;
     width: 170px; /* i made this smaller than the 190 above, to  get the right border to show */
	 padding-left: 5px;
	 margin-left: 5px; /* this isn't working i'm trying to give some space before the word */
	  font-size:11px; 
  }
  
  
  #login-menu  {
	background: #fff;
	color: #174749;
	font-weight: bold;
	border: none;
	/* margin: 0px 15px  0px 15px; */
	padding: 0px 5px 0px 5px; 
	width: 130px;
  }
  
   #acct-menu {
	background: #fff;
	color: #174749;
	font-weight: bold;
	border: none;
	/* margin: 0px 15px  0px 15px; */
	/* padding: 0px 5px 0px 5px; */
	width: 120px; /* not as wide as login menu ; or wait, longer because of name etc*/
  }
  
   #welcome {
	background: #fff;
	color: #174749;
	font-weight: normal;
	border: none;
	text-align: left;
	/* margin: 0px 15px  0px 15px; */
	/* padding: 0px 5px 0px 5px; */
	/* width: 120px; */ /* not as wide as login menu ; or wait, longer because of name etc*/
  }
  
  #login-menu   a, #acct-menu  a{
	background: #fff;
	color: #174749;
	font-weight: bold;
	border: none;
	
  }
  
  #acct-menu   li a{
   font-weight: normal;
   }
   
  #login-menu  a:hover{
	background: #4B7B6D;
	border-radius: 0px;
	color: #ffffff;
  }
  
   #acct-menu  a:hover, #welcome a:hover{
	
	border-radius: 0px;
	
  }
  
    }