/*-----------------------------------------------------------------------------
		NAV/MENU STYLES - DEFAULT TO SMALLER SCREENS FIRST
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
		DIVS
-----------------------------------------------------------------------------*/
DIV.social {
			height: 40px;
			width: 100%;
			text-align: center;
}

#nav, #navAlmost {
			border-top: 1px solid #998887;  /* width style color */
			border-bottom: 1px solid #998887;  /* width style color */
			background-color: #FFC1C1; /* Rosy Brown 1 */
			height: auto;
			width: auto;
			padding: 0px;
			padding-bottom: 2px;
			margin: 0px;
}

#nav {
			display: none;
}

#navAlmost {
			text-align: center;  /* height is auto margin on img changes height */
}


/*-----------------------------------------------------------------------------
		GENERAL
-----------------------------------------------------------------------------*/
#nav ul {
			list-style: none;  	/* remove list defaults to style for nav */
}

#nav ul li:first-child {
			border-top: 1px solid #FFE4E1;
}
#nav > ul > li:first-child {
			border-top: none;
}

#nav ul li {
			border-bottom: 1px solid #FFE4E1; /* also FFE9E9 */			
}

#nav li ul {				/* now done from js but leave here anyway */
			display: none;  /* initially hide all sub-menus */
}

#nav ul,
#nav li {
			cursor: pointer;
			margin: 0;
			padding: 0;
			position: relative;
			z-index: 1;
}

#nav li {
			font-family: PT Sans, arial, sans-serif;  
			font-size: 17px;
			font-weight: normal;
			color: black;
			line-height: 40px;
			text-indent: 16px;
}

#nav a, #navAlmost a {
			display: block;  /* make whole area selectable */
			font-family: PT Sans, arial, sans-serif;  
			font-size: 17px;
			font-weight: normal;
			text-decoration: none;
			color: black;
}

#navAlmost a{
			color:  #3C4F68;  /* also #3C4F68, #587498 */
}

#nav ul ul a {
			color: white;
}


#navList li {
			background-position: 96% 12px;
			background-repeat: no-repeat;
}

#navList .collapsed, #navList .expanded {
			background-size: 17px 17px;
}
	
#navList .collapsed {
			background-image: url( "/images/collapsed.png" );
}
  
#navList .expanded {
			background-image: url( "/images/expanded.png" );
}


/*-----------------------------------------------------------------------------
		SPECIFIC
-----------------------------------------------------------------------------*/
#nav > ul > li {
			background-color: #FFC1C1; /* Rosy Brown 1 */
			float: none; /* make vertical */
			display: block;
			padding-left: 0px;
			padding-right: 0px;
			border-left: none;
			border-right: none;
}

#nav > ul > li:hover {
			color: black;
			background-color: #FFE1E1; /* little lighter than Rosy Brown 1 */
}


/* First Level Drop Down menu */
#nav > ul > li > ul {
			position: relative;
			width: auto;
			top: auto;
			left: auto;
}

#nav > ul > li > ul > li {
			color: white;
			background-color: #587498; /* dark blue */
			text-indent: 33px;
			xheight: 30px;  /* causes a prob on vert. leave out */
}

#nav > ul > li > ul > li:hover {
			color: white;
			background-color: #88A4B8; /* light blue */
}


/* Second Level Drop Down Menu */
#nav > ul > li > ul > li > ul {
			position: relative;
			width: auto;
			top: auto;
			left: auto;
}

#nav > ul > li > ul > li > ul > li {
			color: white;
			background-color: #589874; /* dark green */
			text-indent: 48px;
}

#nav > ul > li > ul > li > ul > li:hover {
			color: white;
			background-color: #88B8A4; /* light green */
}


#nav .social A {
			display: inline;
			padding: 0px;
			border: 0px;
}


/*-----------------------------------------------------------------------------
		SPRITES
-----------------------------------------------------------------------------*/
#img_textFollowUs, #img_buttonFacebook, #img_buttonTwitter,
#img_iconMenu {
			background-image: url( "/images/navSprite.png" );
}

#img_textFollowUs {
			background-position: 0px 108px;
			width: 40px;
			height: 28px;
}

#img_buttonFacebook, #img_buttonTwitter {
			width: 25px;
			height: 22px;
			padding: 0px;
			margin-top: 3px;
}
#img_buttonFacebook {
			background-position: -48px 104px;
			border: 7px solid #395F9E;
			margin-left: 7px;
			margin-right: 7px;
}
#img_buttonTwitter {
			background-position: -84px 104px;
			border: 7px solid #00ACF0;
}

#img_iconMenu {
			background-position: -165px 106px;
			width: 108px;
			height: 29px;
			padding: 0px;
			margin: 8px;  /* height is auto so this causes height */
			vertical-align: middle;
}


/*-----------------------------------------------------------------------------
		MARKER - MEDIA QUERIES
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
		MENU GOES HORIZONTAL
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 830px)
{
		/* Divs */
		DIV.social {
			height: 30px;
			padding-top: 5px;
			xmargin-right: 4px;
			xfloat: right;
			width: 99%; /* OR these 2 lines */
			text-align: right;
		}

		#nav {
			display: block;
			height: 40px; /* 30 40 */
			padding: 0px;
		}
  
		#navAlmost {
			display: none;
		}


		/* General */
		#nav ul li {
			border-bottom: 0px;	
		}

		#nav li {
			font-size: 17px; /* 14 17 */
			line-height: 40px; /* 30 40 */
			xheight: 30px;  /* causes a prob vert. leave out */
		}

		#nav a {
			font-size: 17px; /* 14 17 */
		}

		#xnavList li {
			background-image: none !important;
			background-repeat: no-repeat;
		}
  
  
		/* Specific */
		#nav > ul > li {
			float: left;  /* make horizontal */
			display: inline;
			xpadding-left: 16px; /* covered by nav li text-indent above */
			padding-right: 16px;
			border-left: 1px solid #998887; /* also 413131 */
			border-right: 1px solid #FFE4E1; /* also FFE9E9 */
		}
		#nav > ul > li:first-child {
			border-left: none;
		}
		#nav > ul > li:last-child {
			border-right: none;
		}

	
		/* First Level Drop Down menu */
		#nav > ul > li > ul {
			position: absolute;
			width: 220px; /* 210 220*/
			top: 100%;
			left: 0;
		}

		#nav > ul > li > ul > li {
			text-indent: 16px;
		}


		/* Second Level Drop Down Menu */
		#nav > ul > li > ul > li > ul {
			position: absolute;
			width: 220px; /* 210 220 */
			top: 0;
			left: 100%;
		}

		#nav > ul > li > ul > li >ul >li {
			text-indent: 16px;
		}


		/* Sprites */
		#img_buttonFacebook, #img_buttonTwitter {
			border: 1px solid white;
			margin: 0px;
		}
}