/*************************************************************************
http://www.sitepoint.com/css3-vertical-accordion_menu-sidenav-using-target-selector/
*************************************************************************
How to Create a CSS3-Only Vertical accordion_menu-sidenav Using the :target Selector/
/*************************************************************************
	Used for login
*************************************************************************/

/*  Used with sidenav - not being used right now - Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* The side navigation menu 
	https://www.w3schools.com/howto/howto_js_menu-sidenav.asp
	overflow-y: scroll; /* Enable vertical scroll 
position: fixed; /* Stay in place */
	
.menu-sidenav {
    height: auto; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position:absolute; /* Stay in place */
    z-index: 700; /* Stay on top */
    top: 100px;
	left: 0;
   	background-color: #ffffff; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
	
    padding-top: 20px; /* Place content 60px from the top */
	 padding-bottom: 20px; /* Place content 60px from the bottom */
    transition: 0.5s; /* 0.5 second transition effect to slide in the menu-sidenav */
	
}



/* The navigation menu links */
.menu-sidenav a {
    padding: 8px 8px 8px 8px;
    text-decoration: none;
    font-size: 18px;
    color: #26AE58;
    display: block;
    transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.menu-sidenav a:hover, .offcanvas a:focus{
    color: #1A4B9D;
}


/* Position and style the close button (top right corner) */
.menu-sidenav .closebtn {
    position: absolute;
	color: #1A4B9D;
    top: 20px;
    right: 15px;
    font-size: 48px;
    
}

/* On smaller screens, where height is less than 450px, change the style of the menu-sidenav (less padding and a smaller font size) */
@media screen and (max-height: 416px) {
    .menu-sidenav {padding-top: 15px;}
    .menu-sidenav a {font-size: 18px;}
}

article.accordion_menu-sidenav
{
	display: block;
	width: 250px;
	padding: 0.5em 0.5em 3px 0.5em;
	margin: 0 auto;
	background-color: #ffffff;
	border-radius: 0px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}

article.accordion_menu-sidenav section
{
	display: block;
	font-size: 20px;
	width: 240px;
	height: 2em;
	padding: 0 5px 0 5px;
	margin: 0 0 0 0;
	color: #fff;
	background-color: #ffffff;
	overflow: hidden;
	border-radius: 0px;
}

/*************************************************************************
The section title is now styled to use all the available room in the closed state:
*************************************************************************/
article.accordion_menu-sidenav section h2
{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	line-height: 125%;
	padding: 0;
	margin: 0;
	color: #fff;
	text-align:left;
}

article.accordion_menu-sidenav section h2 a
{
	display: block;
	width: 100%;
	line-height: 150%;
	text-decoration: none;
	color: #1A4B9D;
	outline: 0 none;
	
	
}

  
/*************************************************************************
We can now ‘open’ the active section using the :target selector. We set a larger height and background color, then enlarge and re-color the title too:
*************************************************************************/
article.accordion_menu-sidenav section:target
{
	height: auto;
	background-color:#ffffff;
}

article.accordion_menu-sidenav section:target h2
{
	font-size: 22px;
	color: #ffffff;
}
/*************************************************************************
If necessary, you can set the section height to auto so it uses the minimum space it requires. However, that makes it impossible to add nice CSS3 transitions which smoothly resizes the element…
*************************************************************************/

article.accordion_menu-sidenav section,
article.accordion section h2
{
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}