/*  Responsive stylesheet
 *  Sub Nav Styles
 *  Defaults for Blue colour - Orange, Green and Teal colours overridden in their respective stylesheets
 *	Breaks at:
 *    < 650px for phones
 */
@media screen and (max-width: 650px) {
	
	/* for navigation */
	#subpage {
		padding-top:42px; /* the height of the menu bar */
	}
	#left {
		position:absolute;
		width:auto;
		left:0;
		right:0; /* we will put padding on the contents */
		top:0;
	}
	#TreeView_Menu {
		display: none;
		
		background-color:#fff;
		-webkit-box-shadow: 0 3px 4px 0 rgba(0,0,0,0.4);
		box-shadow: 0 3px 4px 0 rgba(0,0,0,0.4);	
		position: relative;
		z-index:1000;
	}
	#TreeView_Menu li {
		background-color: #fff;
	}
	#TreeView_Menu li.Hidden {
		display: block !important;
	}
	#TreeView_Menu a {
		padding-left:40px;
		padding-right: 20px;
		background-position: 20px -712px;
	}
	#left .customLeftNavHeaderDiv {
		background:none !important;
		padding-left:20px;
		padding-right: 0px;
		font-family: "MetaNormal","Helvetica Neue", Arial,Verdana,sans-serif;
		color:#fff;
		line-height: 42px;
	}
	#left a.customLeftNavHeader {
		display: none;
	}
	#left #nav-subnav-toggle {
		display: block;
		
		background-image:url("../images/arrows-icons.png");
		background-position: right -3067px;
		background-repeat: no-repeat;
	}
	
	#TreeView_Menu li ul li a {
		padding-left:60px;
		background-position: 40px -712px;
	}
	#TreeView_Menu li ul li ul li a {
		padding-left:80px;
		background-position: 60px -712px;
	}
	
	#TreeView_Menu li.Collapsed:hover>ul {
		display: block;
	}
	
	
	/* BLUE ARROWS */
	#TreeView_Menu li a:hover, #TreeView_Menu>li:hover>a {
		background-position: 20px -1351px;
	}
	#TreeView_Menu li>ul>li>a:hover, #TreeView_Menu>li>ul>li:hover>a {
		background-position: 40px -1351px;
	}
	#TreeView_Menu li>ul>li>ul>li>a:hover, #TreeView_Menu li>ul>li>ul>li:hover>a {
		background-position: 60px -1351px;
	}
	#TreeView_Menu li.Expanded>a:hover, #TreeView_Menu li.Expanded:hover>a {
		background-position: 20px -1022px;
	}
	#TreeView_Menu li>ul>li.Expanded>a:hover, #TreeView_Menu li>ul>li.Expanded:hover>a {
		background-position: 40px -1022px;
	}
	#TreeView_Menu li>ul>li>ul>li.Expanded>a:hover, #TreeView_Menu li>ul>li>ul>li.Expanded:hover>a {
		background-position: 60px -1022px;
	}
	#TreeView_Menu .selected a {
		background-position: 20px -1351px !important;
	}
	#TreeView_Menu li>ul>li.selected a {
		background-position: 40px -1351px !important;
	}
	#TreeView_Menu li>ul>li>ul>li.selected a {
		background-position: 60px -1351px !important;
	}
	
	#TreeView_Menu>li.HasChild>a:hover, #TreeView_Menu>li.HasChild:hover>a {
		background-position: 20px -1022px;
	}
	#TreeView_Menu>li>ul>li.HasChild>a:hover, #TreeView_Menu>li>ul>li.HasChild:hover>a {
		background-position: 40px -1022px;
	}
	
	#TreeView_Menu li.Expanded>a {
		background-position: 20px -2371px;
	}
	#TreeView_Menu li>ul>li.Expanded>a {
		background-position: 40px -2371px;
	}
	#TreeView_Menu li>ul>li>ul>li.Expanded>a {
		background-position: 60px -2371px;
	}
}