/*
. = class
# = id
*/

/*SIDEBAR MENU*/
#sidebar
{
	/*DIMMENSIONS*/
	height: 100%;		/*FULL HEIGHT*/
	width: 250px;		/*250PX WIDTH (EXPANDED)*/
	
	/*VISUAL*/
	background-color: #fffff9;			/*#10 OFF WHITE*/
	box-shadow: 5px 0px 20px #e9e9e9;	/*#23 GREY (LIGHTER); SHADOW X OFFSET, Y OFFSET, BLUR, COLOR*/
	
	/*BEHAVIOR*/
	overflow-x: hidden;	/*HIDE HORIZONTAL OVERFLOW AND PREVENT SCROLLBAR*/
	position: fixed;	/*STAY IN THE SAME PLACE EVEN WHEN SCROLLING*/
	z-index: 1;			/*ALWAYS STAY ON TOP OF OTHER CONTENT*/
}

/*TOPBAR IN THE SIDEBAR*/
#sidebarTop
{
	/*DIMMENSIONS*/
	height: 75px;	/*HEIGHT FOR TOPBAR IN THE SIDEBAR*/
	
	/*SPACING*/
	margin-bottom: 15px;
	
	/*VISUAL*/
	background-color: #f4f4f4;			/*#24 GREY (LIGHTEST)*/
	border-bottom: 1px solid #e9e9e9;	/*#23 GREY (LIGHTER) / #d3d3d3 22 GREY (MEDIUM)*/
}

/*LOGO WITHIN THE TOPBAR IN THE SIDEBAR*/
#sidebarTopLogo
{
	/*DIMMENSIONS*/
	width: 100px;	/*TOTAL WIDTH 250px*/
	height: 31px;	/*TOTAL WIDTH 75px*/
	
	/*SPACING*/
	margin-top: 22px;
	margin-left: 75px;
	
	/*VISUAL*/
	background-image: url("/asset/image/logo.png");
	background-size: contain;
	background-repeat: no-repeat;
	
	/*BEHAVIOR*/
	position: absolute;
}

/*TOGGLE BUTTON WITHIN THE SIDEBAR MENU*/
#sidebarTopToggle
{
	/*SPACING*/
	right: 5px;
	top: 50px;
	
	/*TEXT*/
	font-size: 22px;
	color: #b3b3b3;			/*#20 GREY (DARKEST)*/
	
	/*BEHAVIOR*/
	position: absolute;
}

/*MAIN SIDEBAR WITH THE LINKS*/
#sidebarMain
{
	
}

/*LINKS WITHIN THE MAIN SIDEBAR MENU*/
#sidebarMain a
{
	/*SPACING*/
	padding-left: 10px;
	padding-top: 7px;
	padding-bottom: 7px;
	white-space: nowrap;
	
	/*VISUAL*/
	border-radius: 3px;
	
	/*TEXT*/
	font-size: 17px;
	text-decoration: none;	/*DONT ADJUST TEXT*/
	color: #6e6e68;			/*GRAY FONT COLOR*/
	
	/*BEHAVIOR*/
	display: block;			/*DISPLAY AS BLOCK*/
}

/*HOVER OVER A LINK IN THE SIDEBAR MENU*/
#sidebarMain a:hover
{
	/*VISUAL*/
	background-color: #f4f4f4;	/*#24 GREY (LIGHTEST)*/
	
	/*TEXT*/
	color: #000000;				/*BLACK FONT COLOR*/
}

/*TEXT IN MAIN SIDEBAR (NEXT TO ICON)*/
.sidebarMainLinkText
{
	/*ANIMATION*/
	transition: 0.5s;	/*TRANSITION TIME WHEN CHANGING PROPERTIES*/
}

/*ICON IN MAIN SIDEBAR (NEXT TO LINK)*/
.sidebarMainLinkIcon
{
	/*DIMMENSIONS*/
	width: 40px;
}