/* Fix Webkit Bugs in  old  IOS + Android  */
@media screen and (-webkit-min-device-pixel-ratio:0){

	ul.menu-tree { -webkit-animation: bugfix infinite 1s; }
	@-webkit-keyframes bugfix { 
		from { padding: 0;  } 
		to { padding: 0; } 
		}
}


/* 
=====================================================
Demo Wrapper Styles
These wrappers are used for visual purposes only
For example  
===================================================== */	
#wrapper{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding:20px; width: 299.875px; }
#wrap-menu-tree{ margin:0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#widget{ 
	position:relative; 
	max-width:400px; /* change this value to suit your design | usually 100% for responsiveness */
	margin:0 auto;
}

/* 
=====================================================
The grey background for the light accordion 
==================================================== */
.accordion-light-wrap{ 
	width:100%; /* change this value to suit your design | usually 100% for responsiveness */
	margin:0 auto;   
	background:#D9E0F0; 
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 1);
	box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}

/* 
==================================================
The paper folds below the light accordion 
================================================== */
.accordion-light-wrap:before, 
.accordion-light-wrap:after {
  content: '';
  position: absolute;
  z-index: -1;
  height: 6px;
  background: #D9E0F0;
  border: 1px solid #9A9FAA;
  border-radius: 10px;
}
.accordion-light-wrap:after {
  left: 0;
  right: 0;
  bottom: -3px;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
}
.accordion-light-wrap:before {
  left: 4px;
  right: 4px;
  bottom: -6px;
  border-color: #9A9FAA;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}

/* 
=====================================================
The Black background for the dark accordion 
===================================================== */
.accordion-dark-wrap{ 
	width:100%; /* change this value to suit your design | usually 100% for responsiveness */
	margin:0 auto;  
	background:#34313A; 
	-webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 1);
	box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}

/* The paper folds below the dark accordion */
.accordion-dark-wrap:before, 
.accordion-dark-wrap:after {
  content: '';
  position: absolute;
  z-index: -1;
  height: 6px;
  background: #34313A;
  border: 1px solid #000;
  border-radius: 10px;
}
.accordion-dark-wrap:after {
  left: 0;
  right: 0;
  bottom: -4px;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 1);
}
.accordion-dark-wrap:before {
  left: 4px;
  right: 4px;
  bottom: -7px;
  border-color: #000;
  -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 1);
  box-shadow: 0 0 2px rgba(0, 0, 0, 1);
}

/*
======================================== 
The tree menu wrapper 
======================================*/
.tree-wrap{ 
	width:98%; 
	max-width:400px; 
	margin:0 auto; 
}


/* End Demo Styles */


/* Basic Menu Styling 
 * No Icons, No Colors,  No Borders
 * We shall define all these in themes 
 * For easy management 
========================================= */

ul.menu-tree, 
ul.menu-tree li{
	list-style:none; 
	margin:0; 
	padding:0; 
	zoom: 1;  
}

ul.menu-tree,
ul.menu-tree li,
ul.menu-tree ul,
ul.menu-tree li a, 
ul.menu-tree li label{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Functional Menu Styling
 * Submenu Show and Hide Definitions
 ============================================= */

ul.menu-tree input {
	position: absolute;
	top: -9999px;
	left: -9999px;
	opacity: 0;
}

ul.menu-tree label{	
	width:100%;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;	

}

ul.menu-tree input ~ ul { display: none; }
ul.menu-tree input:checked:not(:disabled) ~ ul { display: block; }
ul.menu-tree input:disabled + label {
	opacity: .4;
	cursor:  default;
}

/* All Menu Functions End Here 
 * The Rest is Eye Candy - Visual stuff 
 * Split the menu according to behaviour 
 * Tree Menu vs Accordion 
 ===================================================== */
 
ul.menu-tree.tree, 
ul.menu-tree.tree ul {  margin-left:18px;  }
ul.menu-tree.tree li a { 
	color:#555; 
	padding:.2em 7px .2em 27px;
	margin-bottom:1px;
	line-height:normal;
	display:block; 
	text-decoration:none; 
	border:1px dashed transparent; 
	background:url(../images/icon-file.html) 5px 50% no-repeat;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
ul.menu-tree.tree li a { font-size:0.9em; }
ul.menu-tree.tree li a:hover, 
ul.menu-tree.tree li a:focus,
ul.menu-tree.tree li a:active { 
	color:#000; 
	border:1px solid #D7E1EC!important; 
	background-color:#D7E1EC!important; 
	-moz-border-radius:3px;
	-webkit-border-radius:3px; 
	border-radius:3px; 
}

/* Default parent menu | Collapsed state */
ul.menu-tree.tree label{
	padding:.15em 7px .15em 28px;
	margin-bottom:1px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px; 
	border-radius:3px;
	position:relative;
	color:#444;
	background:url(../images/icon-folder-normal.html) 5px 50% no-repeat;
}

/* Parent menu | Open state */
ul.menu-tree.tree  input:checked + label{
	background:url(../images/icon-folder-opened.html) 5px 50% no-repeat;
	border:1px solid #B9D4E5; background-color:#E7EEF7;
	-webkit-box-shadow: inset 0 11px rgba(255, 255, 255, 0.6);
	-moz-box-shadow: inset 0 11px rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 11px rgba(255, 255, 255, 0.6);
}

/* CSS3 Arrows */
ul.menu-tree.tree label::before { 
    content: '';
    top: 50%;
    left:-3px; 
    width: 0;
    height: 0;
	margin: -3px 0 0 0;
	position: absolute;
    border: 4px solid transparent;
    border-left-color: #848E9A;
}

ul.menu-tree.tree input:checked + label::before{
    border: 4px solid transparent;
    border-top-color: #848E9A;
	left:-12px;
}

ul.menu-tree.tree ul li label::before { }

/* Easy icon category grouping*/  
ul.menu-tree.tree ul a:hover { 
	background-color:#D7E1EC!important;
	border:1px solid #D7E1EC!important;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}

ul.menu-tree.tree ul.pdfs li a{ background:url(../images/pdf.html)5px 50% no-repeat; }
ul.menu-tree.tree ul.word li a{ background:url(../images/word.html)5px 50% no-repeat; }
ul.menu-tree.tree ul.excel li a{ background:url(../images/excel.html)5px 50% no-repeat; }
ul.menu-tree.tree ul.powerpoint li a{ background:url(../images/powerpoint.html)5px 50% no-repeat; }
ul.menu-tree.tree ul.music li a{ background:url(../images/music.html)5px 50% no-repeat; }
ul.menu-tree.tree ul.photos li a{ background:url(../images/photos.html)5px 50% no-repeat; }



 
 /* The Accordions 
 ===================================================== */
 
/* All Accordion Styling 
 * No themes at this level 
====================================================== */
ul.menu-tree.accordion{ }
ul.menu-tree.accordion li, 
ul.menu-tree.accordion li a, 
ul.menu-tree.accordion label{
	display:block;
}

ul.menu-tree.accordion li a{
	text-decoration:none;  
	padding:0.1em 2.2em; 
	font-size:0.9em; 
}

ul.menu-tree.accordion li a i{font-size:1.2em;}
ul.menu-tree.accordion label{ 
	padding:0.4em 1.5em ; 
	font-size:0.95em; 
	font-weight:400;  
	text-transform:uppercase; 
	position:relative;
	background-position:100%; 
}

ul.menu-tree.accordion label i{ padding-right:8px; }
ul.menu-tree.accordion li a i{ padding-right:8px; } 
ul.menu-tree.accordion ul li label { 
	padding:0.3em 2.2em; 
	text-transform:none;
	margin-top:-1px; 
	z-index:2; 
}

ul.menu-tree.accordion .notification {
	width: 20px;
	height: 16px;
	color:#fff;
	line-height:16px;
	font-size:9px;
	position:absolute;
	top:20%;
	right: 5px;
	text-align:center;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.8);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.8);
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.8);	
	text-shadow:0px 1px 0px rgba(0,0,0,.15);	
	-webkit-border-radius:1em;
	-moz-border-radius:1em;
	border-radius:1em;		
}

ul.menu-tree.accordion label::before { 
    content: '';
    top: 50%;
    left:0; 
    width: 0;
    height: 0;
	margin: -3px 0 0 8px;
	position: absolute;
    border: 4px solid transparent;
    border-left-color: #848E9A;
}

ul.menu-tree.accordion input:checked + label::before{
    border: 4px solid transparent;
    border-top-color: #fff;
	margin: -2px 0 0 6px;
}

ul.menu-tree.accordion ul li label::before { 
	left:11px; 
	margin: -3px 0 0 8px; 
}

/*
======================================================== 
Accordion Themes Start Here
======================================================== 
*/

/* Light Accordion Theme 
======================================================== */
ul.menu-tree.accordion.light label,
ul.menu-tree.accordion.light li a{ 	text-shadow: 0 1px rgba(255, 255, 255, 0.6); } 
ul.menu-tree.accordion.light li a:hover{ color:#41495C; }
ul.menu-tree.accordion.light label{ color:#373D54; border:1px solid transparent; }
ul.menu-tree.accordion.light li a{ color:#66708A;  }
ul.menu-tree.accordion.light label:hover{
	background-image:-webkit-linear-gradient(top, #CDD6EB, #CDD6EB);
	background-image:-moz-linear-gradient(top, #CDD6EB, #CDD6EB);
	background-image:-ms-linear-gradient(top, #CDD6EB, #CDD6EB);
	background-image:-o-linear-gradient(top, #CDD6EB, #CDD6EB);
	background-image: linear-gradient(top, #CDD6EB, #CDD6EB);
	-webkit-box-shadow: inset 0 14px rgba(255, 255, 255, 0.25);
	box-shadow: inset 0 14px rgba(255, 255, 255, 0.25);
	background-color:#E2E9F9;

}

ul.menu-tree.accordion.light  input:checked + label,
ul.menu-tree.accordion.light  input:checked + label:hover{
	color:#F0F5FF;
	background-color:#4285F2;
	text-shadow: 0 -1px rgba(0, 0, 0, 0.2); 
	background-image:-webkit-linear-gradient(top, #78AAFE, #2774F0);
	background-image:-moz-linear-gradient(top, #78AAFE, #2774F0);
	background-image:-ms-linear-gradient(top, #78AAFE, #2774F0);
	background-image:-o-linear-gradient(top, #78AAFE, #2774F0);
	background-image: linear-gradient(top, #78AAFE, #2774F0);
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px rgba(0, 0, 0, 0.04);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px rgba(0, 0, 0, 0.04);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 1px rgba(0, 0, 0, 0.04);
}

ul.menu-tree.accordion.light  input:checked + label:hover{ border-top-color:#2774F0; }
ul.menu-tree.accordion.light ul li input:checked + label, 
ul.menu-tree.accordion.light ul li input:checked + label:hover{
	background-color:#93A1BD;
	background-image:-webkit-linear-gradient(top, #B6C1D7, #8B9BBA);
	background-image:-moz-linear-gradient(top, #B6C1D7, #8B9BBA);
	background-image:-ms-linear-gradient(top, #B6C1D7, #8B9BBA);
	background-image:-o-linear-gradient(top, #B6C1D7, #8B9BBA);
	background-image: linear-gradient(top, #B6C1D7, #8B9BBA);
	-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 -1px rgba(0, 0, 0, 0.01);
	-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 -1px rgba(0, 0, 0, 0.01);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 -1px rgba(0, 0, 0, 0.01);
	border-top-color:#878F9C;	
}

ul.menu-tree.accordion.light .notification { background-color:#9BA5BC; }
ul.menu-tree.accordion.light  input:checked + label .notification,
ul.menu-tree.accordion.light ul li input:checked + label .notification  {
	color:#9BA5BC;
	text-shadow:none;
	background-color:#fff;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.1);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.1);
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.1);		
}

ul.menu-tree.accordion.light  input:checked + label .notification{ color:#307AF1;}
ul.menu-tree.accordion.light.strips label{ border-bottom:1px solid #CBD5EB; border-top:1px solid #EBEEFC;  }
ul.menu-tree.accordion.light.strips  input:checked + label{ border-top-color:#E3ECF0; }
ul.menu-tree.accordion.light.strips ul li input:checked + label {border-top-color:#878F9C; }
ul.menu-tree.accordion.light.strips input:disabled + label{ border-bottom:1px solid #B8C6E4; border-top:1px solid #FFF; }
ul.menu-tree.accordion.light.strips ul li label { border-bottom-color:#D9E0F0; border-top-color:#D9E0F0; }
ul.menu-tree.accordion.light.strips li > ul > li:last-child { border-bottom:1px solid #CBD5EB; }
ul.menu-tree.accordion.light.strips ul li input:disabled + label{ 
	border-bottom:1px solid #D9E0F0; 
	border-top:1px solid #D9E0F0;
}


/* Dark Accordion Theme 
========================================================================= */
ul.menu-tree.accordion.dark .notification {
	background-color:#44414A;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 1px rgba(255, 255, 255, 0);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 1px rgba(255, 255, 255, 0);
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 1px rgba(255, 255, 255, 0);	
	-webkit-border-radius:2px;
	-moz-border-radius:2px;
	border-radius:2px;	
}

ul.menu-tree.accordion.dark label, 
ul.menu-tree.accordion.dark li a{ color:#9D99AA; text-shadow: 0 -1px rgba(0, 0, 0, 0.3); }
ul.menu-tree.accordion.dark li a{ color:#706C7A; }
ul.menu-tree.accordion.dark.strips label{ 
	border-bottom:1px solid #2C2831;  
	border-top:1px solid #423F49;

}

ul.menu-tree.accordion.dark.strips input:disabled + label{ border-bottom:1px solid#28242D; border-top:1px solid #55505F; }
ul.menu-tree.accordion.dark.strips li > ul{ border-bottom:1px solid #2C2831;  border-top:1px solid #423F49; }
ul.menu-tree.accordion.dark.strips ul li label { border-color:transparent; }
ul.menu-tree.accordion.dark.strips ul li input:disabled + label{ border-color:transparent; }
ul.menu-tree.accordion.dark.strips li > ul > li > ul { border-bottom:1px solid #423F49; border-top:1px solid #2C2831; }
ul.menu-tree.accordion.dark  input:checked + label,
ul.menu-tree.accordion.dark  input:checked + label:hover{
	background-color:#4184EF;
	background-image:-webkit-linear-gradient(top, #478DFF, #2674F0);
	background-image:-moz-linear-gradient(top, #478DFF, #2674F0);
	background-image:-ms-linear-gradient(top, #478DFF, #2674F0);
	background-image:-o-linear-gradient(top, #478DFF, #2674F0);
	background-image: linear-gradient(top, #478DFF, #2674F0);
	-webkit-box-shadow: inset 0 15px rgba(255, 255, 255, 0.15);
	box-shadow: inset 0 15px rgba(255, 255, 255, 0.15);	
	color:#fff;
}

ul.menu-tree.accordion.dark ul li input:checked + label,
ul.menu-tree.accordion.dark ul li  input:checked + label:hover{
	background-color:#34313A;
	background-image:none;
	-webkit-box-shadow:none;
	box-shadow:none;
	color:#3C85FA;
}

ul.menu-tree.accordion.dark  input:checked + label .notification{ 
	color:#fff;
	background-color:#2969D3; 
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);		
}

ul.menu-tree.accordion.dark ul li  input:checked + label .notification{ 
	color:#478DFF;
	background-color:#49464F; 
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.15);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.15);
  	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6), 0 1px rgba(255, 255, 255, 0.15);		
}

ul.menu-tree.accordion.dark ul li  input:checked + label::before{
    border: 4px solid transparent;
    border-top-color: #4284F2;
	margin: -2px 0 0 6px;
}