/*
	CSS for customized IG menus displayed on small screens (<750 px)

	This is modeled on the "collapsed" version of the internal IG menus,
	and will only display in the collapsed state. The menu is hidden in favor
	of larger, template menu when screen is larger, so no "uncollapsed" 
	version is necessary.	
 */

	#topmenu #igMenu  {
		display : block;
		background : url(http://www.integritas-group.com/images/menu.png) repeat-x right top;
		position : relative;
		overflow : hidden;
		cursor : pointer;
		height : 33px; 
		margin : 0;
		padding : 0;
	}
	
	/* Javascript will toggle this class when click menuExpander */
	#topmenu #igMenu.expand  {
		height : auto;
	}
	
	/* Add this div in the menu to implement expandable menu on small screens (js will bind click event to it) */
	#topmenu #igMenu #igMenuExpander {
		position : relative;
		top : 0;
		left : 0;
		cursor : pointer;
		width : 40px;
		height : 33px;
		background : url(http://www.integritas-group.com/images/btn-3line.jpg) no-repeat;
		background-size: auto 32px;
	}
	
	/* This is the expandable menu layout for small screens */
	#topmenu #igMenu ul {
		float : none;
		list-style-type : none;
		line-height : 1.0;
		position : relative;
		left : 0;
		border-bottom : 0;
		margin : 0;
		padding : 0;
		width : 100%;
	}
	
	#topmenu #igMenu ul li {
		float : left;
		position : relative;
		border : 0;
		width : 90%;
		margin: 0 0 0 5%;
		font-size: 14px;
		font-weight: 600;
		text-transform : uppercase;
	}
	
	#topmenu #igMenu ul li.current {
		font-weight: 800;
	}
	
	#topmenu #igMenu ul li a, #topmenu #igMenu ul li a:link, #topmenu #igMenu ul li a:active, #topmenu #igMenu ul li a:visited{
		position : relative;
		color : #868686;
		text-decoration : none;
		white-space : nowrap;
		display : block;
		background : url(http://www.integritas-group.com/images/menu.png) repeat-x right top;
		border : 0;
		padding : 8px 20px 0;
		margin : 3px 0 0;
		height : 25px;
	}
	
	#topmenu #igMenu ul li:first-child a{
		margin : 3px 0 0;
	}
	
}