/*
	CSS for customized IG collapsible sidebar displayed on small screens (<750 px)

	This is modeled on the "collapsed" version of the internal IG left sidebar,
	and will only display in the collapsed state. The collapsible sidebar is hidden in favor
	of the displayed sidebar when screen is larger, so no "uncollapsed" 
	version is necessary.	
 */


	/* Include this class to have an expandable left section for small screens */
	#collapsibleSidebar  {
		display : block;
		position: relative;
		float : none;
		overflow : hidden;
		background : url(http://www.integritas-group.com/images/btn-expand.png), url(http://www.integritas-group.com/images/menu.png);
		background-repeat : no-repeat, repeat-x;
		background-position : 3px 0, right top;
		background-size : auto 30px;
		cursor : pointer;
		margin : -10px auto;
		padding: 33px 0 0;
		width : 100%;
		height : 0;
	}
	
	/* This div defines the title to display in the collapsed sidebar (next to the expand button) */
	#collapsibleSidebar #sidebarExpanderTitle {
		display : block;
		position : absolute;
		top : 0;
		left : 40px;
		font-size: 14px;
		font-weight: 600;
		text-transform : uppercase;
		line-height : 33px;
		
		/* Disables text selection */
		-webkit-touch-callout: none; 
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	/* This div expands the sidebar for display (js will bind click event to it) */
	#collapsibleSidebar #sidebarExpander {
		display : block;
		position : absolute;
		top : 0;
		left : 0;
		cursor : pointer;
		width : 40px;
		height : 33px;
		zindex : 10;
	}

	/* Javascript will toggle this class when click expand button */
	#collapsibleSidebar.expand  {
		background : url(http://www.integritas-group.com/images/btn-shrink.png), url(http://www.integritas-group.com/images/menu.png);
		background-repeat : no-repeat, repeat-x;
		background-position : 3px 0, right top;
		background-size : auto 30px;
		border-bottom: 4px solid #C52020;
		height : auto;
		padding: 50px 0 0;
	}
	
	#collapsibleSidebar .row  {
		padding-bottom: 20px;
	}
