html, body {}

.flowchart{width: 500px;margin:0 auto 15px;}
.flowchart .longer{
/* 	border-left:1px solid #C5C5C5; */
	padding-left: 15%;
	margin-left: -15px /*!important*/;
	display:none;
}
.flowchart .short{
	padding-left: 15%;
	margin-left: -15px /*!important*/;
	display:none;
}
.flowchart p, .flowchart a, .flowchart li, .flowchart span{color:#fff !important;*color:#000;text-align:left;text-decoration: none;text-decoration: none !important;border-bottom:none !important;}
.flowchart ul{list-style:none;margin: 0;padding: 0;}
.flowchart ul li{margin-top: 10px;}
.flowchart ul li p{margin:0;padding: 5px;padding-left: 30px;background: #f47321;}
.flowchart ul li ul li p{background: #A8B2BB;}
.flowchart ul ul{margin-left: 70px;}
.flowchart ul ul li{
	border-left:1px solid #C5C5C5;
	margin: 0 0 0 -15px;
	padding: 8px 0 0 15px;
}
.flowchart ul ul li:after{
	content: "-";
	color: #fff;
	float: left;
	margin-left: -16px;
	margin-top: -21px;
	border-left: 1px solid #C5C5C5;
	border-bottom: 1px solid #C5C5C5;
	padding-right: 10px;
}
.flowchart ul ul li p{background:#7686c2;}
.flowchart ul ul ul{margin-left: 15%;}
.flowchart .short ul ul ul ul ul ul ul ul, .flowchart .longer ul ul ul ul ul ul ul ul{padding-left: 40px;}

/** COMPARE LATER WITH MENUBOX OF SIDENAV **/
.flowchart .menuBox{
cursor: pointer;
width: 18px;
float: left;
height: 22px;
margin-left: 6px; /* IE8 and below */
margin-top:3px\9;
}
.flowchart .unfoldArrow{
	width: 18px;
	float: left;
	height: 22px;
	margin-left: 6px;
	background: url(/images/sidebarMenu/downMenu-arrow-white.gif) no-repeat 9px 4px;
}
.flowchart .finalLink{
background-image: url(/images/sidebarMenu/menu-arrow-white.gif);
background-repeat: no-repeat;
background-position:9px 4px;
}
.flowchart .firstLevel{
background-color:#f47321;
}
.flowchart .secondLevel{
background-color:#7686c2;
}
.flowchart .thirstLevel{
background-color:#98a2d2;
}
.flowchart span {
margin-top: -2px;
display: list-item;
-webkit-box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
	
background:url(/images/sidebarMenu/menu_icon_for_IE.gif) no-repeat\9; /* IE8 and below */
margin-top: 3px\9; /* IE8 and below */
height:16px\9; /* IE8 and below */
}
.flowchart .clicked{
	margin-left: 9px;
	width: 1px;
	-webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
	
	margin-left: 8px\9; /* IE8 and below */
	width: 4px\9; /* IE8 and below */
}
.flowchart .notclicked{
	width: 16px;
	-webkit-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -moz-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -o-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    -ms-transition: width 0.2s ease-out, margin-left 0.2s ease-out;
    transition: width 0.2s ease-out, margin-left 0.2s ease-out;
	
	width:20px\9; /* IE8 and below */
	height:16px\9; /* IE8 and below */
}

/*
	THIS CODE WILL HELP (IT'S NECESSARY) TO CREATE THE "FLOWCHART VIEW" STYLE
	ON THE LIST WITH "FLOWCHART" STYLE SELECTED.
*/
$(document).ready(function(){

	// THIS FUNCTION ALLOW IE TO DEAL WITH "GET ELEMENTS BY CLASS NAME"
	function getElementsByClassName(node, classname) {
		var a = [];
		var re = new RegExp('(^| )'+classname+'( |$)');
		var els = node.getElementsByTagName("*");
		for(var i=0,j=els.length; i<j; i++)
			if(re.test(els[i].className))a.push(els[i]);
		return a;
	}

	// this variable will just check if we are on a template with a flowchart inside.
	var flowcharts = getElementsByClassName(document.body,'flowchart');  // no document
	
	// IN CASE THERE IS A FLOWCHART LIST, THE FUN WILL START
	if($(flowcharts).html() != undefined){
	// FIRSTLY IT'S COUNTED HOW MANY FLOWCHART ARE THERE
	for(var m = 0; m < flowcharts.length; m++){
			var tempFlowchart = flowcharts[m];
	        var collapseOption = ''; // THIS VARIABLE WILL BE USED AS A SETTING TO FOLD OR NOT THE FLOWCHART
			
			// UMBRACO RETURN THE TEXT INSIDE "LI" WITHOUT "P", SO WE NEED TO GET ALL OF THEM AND MAKE IT PROPERLY
			var paragraphsList = tempFlowchart.getElementsByTagName('li');
			for(var i = 0; i < paragraphsList.length; i++){
				var tempParagraph = paragraphsList[i];
                
				// NEXT CONDITION WILL LOOK FOR THE SETTING TO FOLD OR UNFOLD THE FLOWCHART
                if(collapseOption === ''){
				// IF THE WORD COLLAPSE IS IN THE FIRST PARAGRAPH BETWEEN '*' ...
                var settingsRemoved = $(tempParagraph).html(),
					settings = settingsRemoved.split('*');
				// ...WE TAKE IT OUT FROM THE TEXT, AND SAVE IT FOR LATER IN A VARIABLE
                collapseOption = settings[1];
				// THE ORIGINAL HTML IS OVERWRITTEN WITH THE NEW ONE, WITHOUT "COLLAPSE" ON IT
                $(tempParagraph).html(settings[2]);
                }
				
				// THIS FUNCTION WILL CUT OUT ANY TEXT BETWEEN [ AND ], AND IT WILL BE ADDED AS "TITLE" TO THE PARAGRAPH
				var html = $(tempParagraph).html(),
                    lText = html.split('['),
					rText = html.split(']');
					
				if (typeof rText[0] === "undefined")
					{rText[0] = ""}  
				if (typeof rText[1] === "undefined")
					{rText[1] = ""}  
				if (typeof lText[0] === "undefined")
					{lText[0] = ""} 
				if (typeof lText[1] === "undefined")
					{lText[1] = ""}
					
				var titleText = lText[1].split(']');
				$(tempParagraph).attr({ title: titleText[0] });
				$(tempParagraph).html(lText[0]+rText[1]);
                
				var finalParagraph = $(tempParagraph).html();
                
                // IF THERE IS NOT CHILDS, IN WON'T HAVE FOLDED MENU ICON
                if($(tempParagraph).next('ul').text() == ''){
					$(tempParagraph).text('');
					if($(tempParagraph).parent().prop("class") === 'flowchart'){
						$(tempParagraph).append("<p class='finalLink firstLevel'>"+ finalParagraph +"</p>");
					}else if($(tempParagraph).parent().parent().prop("class") === 'flowchart'){
						$(tempParagraph).append("<p class='finalLink secondLevel'>"+ finalParagraph +"</p>");
					}else{
						$(tempParagraph).append("<p class='finalLink thirstLevel'>"+ finalParagraph +"</p>");
					}
				}else // IT WILL HAVE FOLDED MENU ICON IF THERE IS CHILDS
                {
                    $(tempParagraph).text('');
                    if(collapseOption =="collapse"){
                        $(tempParagraph).append("<div class='menuBox'><span class='notclicked'></span></div><p>"+ finalParagraph +"</p>");
                    }else{
                        $(tempParagraph).append("<div class='unfoldArrow'></div><p>"+ finalParagraph +"</p>");
                    }
                }
			};
			
			// WITH THE NEXT CLASSES WE WILL ADD A LINE AT LEFT SIDE IN CASE THERE IS MORE SECTIONS IN THE SAME LEVEL
			var list = tempFlowchart.getElementsByTagName('ul');
			for(var i = 0; i < list.length; i++){
				var temp = list[i];
                if($(temp).next('li').text() != ''){
					// LONGER WILL ADD THE LINE
				   $(temp).addClass('longer');
                }else{
					// SHORT WON'T ADD THE LINE
                    $(temp).addClass('short');
                }
			}
			
				// CREATE A NEW DIV WITH A CLASS CALLED "FLOWCHART"
			$(tempFlowchart).before("<div class='flowchart flowchartSerial_" + (m+1) + "'></div>");
				// SAVE THE CONTENT OF OUR NEW DIV
			var flowChartDiv = $('div.flowchartSerial_'+ (m+1));
			$(flowChartDiv).append($(tempFlowchart));
			
			// IF 'COLLAPSE' WAS WRITTEN AT THE BEGINNIG OF THE FLOWCHART, IT WILL BE COLLAPSED
            if(collapseOption == "collapse"){
				$(flowChartDiv).children('ul').children('ul').addClass('opened');
				$(flowChartDiv).children('ul').children('ul').slideToggle(350);
				$(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("clicked");
				$(flowChartDiv).children('ul').children('li').children('.menuBox').children('span').toggleClass("notclicked");
                flowchartSlideTest(flowChartDiv);
			// OTHERWISE, IT WILL BE NO COLLAPSED
            }else{
				// THE CLASSES LONGER AND SHORT HAVE A DISPLAY:NONE PROPERTY
				// SO THIS WILL OVERWRITE THAT PROPERTIES AND WILL EXPAND ALL
				$(flowChartDiv).find('.longer').show();
				$(flowChartDiv).find('.short').show();
            }
		}
    }
});

function flowchartSlideTest(variable){

$(variable).find('.menuBox').click(function(event){
    var div = $(this).parent('li').next('ul');
    
    if($(div).html() != undefined){
        var open = $(variable).children('ul').children('ul').find('.opened');
		// IF WE OPENED ANOTHER SECTION BEFORE, IT WILL BE CLOSED BEFORE OPENING THE NEW ONE
        if($(open).html() != $(div).html()){
            if(!$(this).parent().parent().hasClass('opened')){
                $(open).each(function() {
                $(this).toggleClass("opened");
                $(this).slideToggle(350);
                $(this).prev('li').children().children().toggleClass("clicked");
                $(this).prev('li').children().children().toggleClass("notclicked");
            });
            }
        }
        
        $(div).each(function(i) {
            $(div).slideToggle(350);
            $(div).toggleClass("opened");
        });
        
        $(this).children().toggleClass("clicked");
        $(this).children().toggleClass("notclicked");
    };

$(variable).children('ul').children('ul').removeClass('opened');
});
};