﻿/* RESTORE
================================================== */

@media only screen and (min-width: 1024px) {
   	
	
	body					{position:relative !important; left:0 !important}
	#header 					{left:0 !important;}
	#body					{margin-left:220px !important}
	
}


	
/* ALL
================================================== */

    @media only screen and (min-width: 320px) and (max-width: 1023px) {
   	
	body					{position:relative; left:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}
	#header 					{left:-200px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}
	#body					{margin-left:0}
	.responsive_left_menu	{display:block;}
	
	
}
	
#header 						{width:200px;padding:0; position:fixed; left:0; height:100%;background-color:#fff; z-index:998;}
#body						{position:relative; z-index:999; margin:0; padding:0; margin-left:220px; overflow:hidden;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}
#menu_left					{overflow:hidden;}

#cssmenu ul  li.top_menu	{height:44px}
#top button				{display:none;}

/* ------------------------ MENU ------------------------ */


#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display : block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



#cssmenu > ul > li{
 margin-bottom:20px

}

#cssmenu ul ul li{
 margin-top:10px

}


/* ------------------------ MENU ------------------------ */

#cssmenu > ul > li > a {
  height:20px;
  line-height:20px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  position: relative;

}

#cssmenu > ul > li > a .menu_square		{float:left; width:6px; height:20px; background-color:#fff; margin-right:1px}

#cssmenu > ul > li > a .menu_text		{position: relative;float:left; height:20px;line-height:20px;}
#cssmenu > ul > li > a .menu_square2	{position: absolute;z-index:1;width:0%;background-color:#000;height:20px;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease;}
#cssmenu > ul > li > a .menu_title		{position: relative;z-index:2; padding:0 10px;}


#cssmenu > ul > li > a:hover > .menu_square {
  background-color: #000;
}
#cssmenu > ul > li > a:hover .menu_square2 {
  width:100%
}
#cssmenu > ul > li > a:hover > .menu_text {
  color:#fff
}

#cssmenu > ul > li.active > a > .menu_square,
#cssmenu > ul > li.open > a > .menu_square {
  background-color: #000; width:6px;
}
#cssmenu > ul > li.active > a .menu_square2,
#cssmenu > ul > li.open > a .menu_square2 {
  width:100%
}
#cssmenu > ul > li.active > a > .menu_text,
#cssmenu > ul > li.open > a > .menu_text {
  color:#fff
}



/* ------------------------ SOUS MENU ------------------------ */


#cssmenu ul ul {
  display: none;
}

#cssmenu ul ul.open {
  display: block;
}

#cssmenu ul ul li a {
  height:18px;
  line-height:18px;
  padding-left: 0px;
  cursor: pointer;
  z-index: 2;
  font-size: 12px;
  text-decoration: none;
  position: relative;

}

#cssmenu ul ul li a .menu_square		{float:left; width:6px; height:18px; background-color:#fff; margin-right:1px}
#cssmenu ul ul li a .menu_text		{position: absolute;z-index:2;float:left; height:18px;line-height:20px; padding:0 10px;color:#999}


#cssmenu ul ul li a:hover .menu_square,
#cssmenu ul ul li.active a .menu_square,



#cssmenu ul ul li.open a .menu_square {
  background-color: #999;
}

#cssmenu ul ul li a:hover .menu_text,
#cssmenu ul ul li.active a .menu_text,
#cssmenu ul ul li.open a .menu_text {
  color:#333
}



/* ------------------------ SOCIAL ------------------------ */


.menu_social					{height:18px;margin-left:10px !important;}
.menu_social_square				{width:6px; height:20px; background-color:#666; margin-right:1px; display:block}

.menu_social a					{background-color:#fff; display:block; height:18px;line-height:18px; padding:3px 6px !important}
.menu_social a:hover				{background-color:#000; color:#fff}