** ****************************************************************************************** *
** MANDRAGORE PLANETE  UI   (bootstrap)
** *******************************************************************************************

 
#include  "#SYSPATHMS4BI+\zInclude\IncludeChartExcel.h" 
#include  "#SYSPATHMS4BI+\02-DEMO-DESKTOP-BI-EXCELandSTANDARD\99-DATABASE\VersionADO\300-00-CreateDBDemoExcel.ms4" 
text : text0:="Testing Collapse", text1:=" Lorem ipsum dolor sit amet, consectetur adipisicing elit,\n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n   quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
integer : $yes := 1, $no:=0;
    
	<div  $IsVisible_lg :  /* visible only large (screen) */
 	    DrawWindow : "Win61" , actions : $WinCustom +  $WinMinimize + $WinMaximize + $WinClose ,  position : 80, 1450,600,1020  TITLE : "  Window Web: URL" 
									url : "https://demos.ms4bi.com/demo/product.php"  ,
	    DrawWindow : "Win62" , actions : $WinCustom +  $WinMinimize + $WinMaximize  , position : 150,  700,1200,750  TITLE : "  Window Web: MS4 script" 
									url :  UrlMs4Script    /* key word ms4script */
	>;								  
  DBconnect{Ms4DB}(LEnvDemoExcelDB);

Begin_Block_Rwd  :  margin_page  
  Setting :
  	Backgroundcolor : "GAINSBORO" ;   
 
  
 printSw "\n\n  #   MS4BI : UI    Collapse   #   \n";	
 printSw "\n  ###  Collapsible : Button & Icon & UI (Charts )### \n";
<Rwd_Row :  3  
<Rwd_Col : sm:2,md:3,lg:4: 
 
     < collapse :  "Demo4"  , Hidden : $yes ,	<button :  $Bts_btn_Warning ,  icon   :  $fa_3x + $fa_pull_left+   $fa_quote_left ,  text " Text + Chart   : click \n me" > 
     <Text : $Bts_Text_primary    , style:"font-size:14px"  , text1 > 
      FormExcel : Chart(xl3DBarStacked100),height : "250px", width : "350px"   title :  ""    use View   (" [ms4EmplBusinessDollars20111213]") ,
  
   > /* end collapse */	
   > /* end col */
 > ; /* end row */
 printSw "\l ###  Collapsible : Button & Icon & UI (list group , panel ..)### \n";
<Rwd_Row :  4  
<Rwd_Col : sm:2,md:3,lg:4: 
  < collapse :  "Demo3"  , Hidden : $yes ,	<button :  $Bts_btn_danger ,  icon   :  $fa_3x + $fa_pull_left + $fa_quote_right ,  text "   UI : click \n me" > 
    BEGIN	/* begin : optional --> items collapse */
       <Text : $Bts_Text_primary    , style:"font-size:14px"  , text1 >  
   
		<Panel     : $Bts_Panel_default ,
		<Panel_Header      : " " ,<icon :  $fa_0x +  $fa_pull_right + $fa_bell>,<text : ""," Notifications Panel" >   > 
			<list_group             :     
				<list_groupitem       :    url : "#"  ,  <icon : $fa_1x   +    $fa_comment ,<Text :"","New comments " >><Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  > 
				<list_groupitem       :    url : "#"  ,  <icon : $fa_1x   +    $fa_twitter ,<Text :"","3 New Followers " >><Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
					
			   FormExcel : Chart(xlSurface),height : "90%", width : "90%"   title :  ""    use View   (" [ms4EmplBusinessDollars20111213]") ,
			   	<list_groupitem       :    url : "#"  ,<icon : $fa_1x   +   $fa_envelope ,<Text :"","Message Sent " >>  <Text : $Bts_Text_right_small  , " --12 minutes ago-- " >  >  

			   FormPchart : DrawRADAR,  height : "90%", width : "90%" title : "" ,   ImageAera :700, 500 ,
			                           TYPE : $RDCIRCLE,  FORMAT :"$"  	use View  ("ms4EmplBusinessDollars20111213")   ,
				<list_groupitem       :    url : "#"  ,<icon : $fa_1x  +    $fa_tasks ,<Text :"","New Task " >>         <Text : $Bts_Text_right_small  , " --27 minutes ago-- " >  >  
				<list_groupitem       :    url : "#"  ,<icon : $fa_1x  +    $fa_shopping_cart ,<Text :"","Server Crashed! "> ><Text : $Bts_Text_right_small  , " --New Order Placed-- " >  > 
				<list_groupitem       :    url : "#"  ,<icon : $fa_1x  +    $fa_money ,<Text :"","Payment Received " >>  <Text : $Bts_Text_right_small  , " --Yesterday-- " >  > 
				<list_groupitem       :    url : "https://getms4bi.com"  ,  <icon :   $fa_2x   +   $fa_bar_chart_o   >    > 
				<list_groupitem       :     url : "http://facebook.com"  <button :  $Bts_btn_social_facebook  , icon : $fa_facebook	 > 	   > 
				<notification : $Bts_Notif_danger , icon :   $fa_5x+   $fa_bomb , text: "**danger!** You should ." ,   url : "https://getms4bi.com"  , " read this message"	> 
				FormPlus :  DrawQrCODE type : $MAIL ("http://www.mgplanete.com"),
			>, /* end list-group */
		<Panel_Footer       :  ""    , <button :    $Bts_btn_social_block_twitter     ,"Sign in with twitter : MgPlanete ">  > 
		>,/* end panel */	
    END	/* end : optional */			
     > /* end collapse */
  > /* end col */
 > ; /* end row */	 
<Rwd_Row :  5
<Rwd_Col : sm:2,md:3,lg:4: 
   printSw "\n\n  ###   MS4BI : UI    Collapse :  Panel ###   \n",
 
  < collapse :  "Panel-a"  ,  Hidden : $yes ,	
     <Panel     : $ms4_Panel_green ,	  
	    Panel_Header      : ""  ,
		    <icon : $fa_0x + $fa_pull_right + $fa_hand_o_left ,  style:"color:#dff7ae" ><Text :"", " /w  #### Fuller ####  /w " > 
	 		<icon : $fa_2x + $fa_pull_left +$fa_cogs,   style:"color:#dff7ae"    >
        	<icon : $fa_4x + $fa_pull_left + $fa_reddit_alien,    style:"color:white;"><Text :"",  "  /y #### Panel Header 1 <--Click here #### /y  "   >  
		>  /* end panel */
    BEGIN	/* begin : optional --> items collapse */
		<Panel     : $Bts_Panel_default ,
		<Panel_Header      : " " ,<icon :   $fa_fw+$fa_bell>,<text: ""," Menu 1 " >  > 
		<panel_body      :
			<list_group             :     
				<list_groupitem       :    url : "#"  ,  <icon : $fa_1x   +    $fa_comment ,<Text :"","New comments "> ><Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  > 
				<list_groupitem       :    url : "#"  ,  <icon : $fa_1x   +    $fa_twitter ,<Text :"","3 New Followers "> ><Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
		 		<list_groupitem       :    url : "#"  ,  <icon : $fa_1x   +    $fa_tasks ,<Text :"","New Task "> >         <Text : $Bts_Text_right_small  , " --27 minutes ago-- " >  >  
		 		<list_groupitem       :    url : "http://facebook.com"  <button :  $Bts_btn_social_facebook  , icon : $fa_facebook	 > 	   > 
	  		>, /* end list-group */
			>,/* end panel */	  
 		>,/* end panel */
     END	/* end : optional */	
     > , /* end collapse */
	 
    < collapse :  "panel-b"  ,  hidden : $no ,		 <Panel     : $Bts_Panel_Default ,	 Panel_Header      : " <h6>Click here 2 Collapse (no hidden)</h6> "   >  /* end panel */
 	 BEGIN	/* begin : optional -->items collapse */
		<Panel     : $Bts_Panel_Info ,
		<Panel_Header      : " " ,<icon :   $fa_fw + $fa_bell>,<text:""," Menu 1 " >  >,
		
			<list_group             :     
				<list_groupitem       :     url : "#"  ,  <icon : $fa_1x  +   $fa_comment ,<text:"","New comments " >><Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
	  		 	<list_groupitem       :     url : "http://facebook.com"  <button :  $Bts_btn_social_facebook  , icon : $fa_facebook	 > 	   > 
	  		>, /* end list-group */
 		>,/* end panel */	    
     END	/* end : optional */	
     > /* end collapse */  
  > /* end col */
 > ; /* end row */
position  : relative,auto,450 :	 
  printSw "###  Normal Buttons ### \n";   
            <button :   $Bts_btn_default   ,"Default">;
            <button :   $Bts_btn_success   ,"Success">;
			<button :   $Bts_btn_primary   ,"Primary">;
			<button :   $Bts_btn_info      ,"Info">;
			<button :   $Bts_btn_warning   ,"Warning">;
			<button :   $Bts_btn_danger    ,"Danger">;
			<button :   $Bts_btn_link      ,"Link">;
			
	 printSw "### Large Circle Buttons ### \n";                            
			<button :   $Bts_default_btn_circle_lg ,  icon   :  $fa_check , text : "" >	;
			<button :   $Bts_primary_btn_circle_lg ,  icon   :  $fa_list , text : "" >	;  
			<button :   $Bts_success_btn_circle_lg ,  icon   : $fa_link , text : "" >	; 
			<button :   $Bts_info_btn_circle_lg ,  icon   :  $fa_check , text : "" >	;
			<button :   $Bts_warning_btn_circle_lg,  icon   :  $fa_times , text : "" >	;
			<button :   $Bts_danger_btn_circle_lg,  icon   :  $fa_heart , text : "" >	; 		
			
			
printSw "\l ### Social Buttons ###  \n"; 
printSw "####    Social Buttons with Font Awesome Icons ####   \n"; 
 position  : relative,auto,450 :  	
 			<button :    $Bts_btn_social_block_bitbucket,icon :$fa_bitbucket   ,"Sign in with Bitbucket">;
 			<button :    $Bts_btn_social_block_dropbox,icon :$fa_dropbox     ,"Sign in with Dropbox ">;
 			<button :    $Bts_btn_social_block_facebook,icon :$fa_facebook    ,"Sign in with Facebook">;
 			<button :    $Bts_btn_social_block_flickr ,icon :$fa_flickr     ,"Sign in with Flickr">;
 			<button :    $Bts_btn_social_block_github,icon :$fa_github      ,"Sign in with GitHub">;
 			<button :    $Bts_btn_social_block_google_plus,icon :$fa_google_plus ,"Sign in with Google">;
 			<button :    $Bts_btn_social_block_instagram,icon :$fa_instagram   ,"Sign in with Instagram">;
 			<button :    $Bts_btn_social_block_linkedin ,icon: $fa_linkedin   ,"Sign in with linkedin">;
 			<button :    $Bts_btn_social_block_pinterest,icon: $fa_pinterest   ,"Sign in with pinterest">;
 			<button :    $Bts_btn_social_block_tumblr ,icon :$fa_tumblr     ,"Sign in with tumblr">;
 			<button :    $Bts_btn_social_block_twitter ,icon: $fa_twitter    ,"Sign in with twitter">;
 			<button :    $Bts_btn_social_block_vk  ,icon :$fa_vk        ,"Sign in with  Vk ">;
						
 End_position ; 
 position  : relative,auto,550 :	
 printSw "\l"; 
 			<button :    $Bts_btn_social_bitbucket,icon: $fa_bitbucket > ;
 			<button :    $Bts_btn_social_dropbox ,icon: $fa_dropbox > ;
 			<button :    $Bts_btn_social_facebook,icon :$fa_facebook >;
 			<button :    $Bts_btn_social_flickr  ,icon: $fa_flickr > ;
 			<button :    $Bts_btn_social_github ,icon: $fa_github > ;
 			<button :    $Bts_btn_social_google_plus ,icon: $fa_google_plus> ;
 			<button :    $Bts_btn_social_instagram ,icon: $fa_instagram  > ;
 			<button :    $Bts_btn_social_linkedin ,icon :$fa_linkedin  > ;
 			<button :    $Bts_btn_social_pinterest ,icon :$fa_pinterest > ;
 			<button :    $Bts_btn_social_tumblr ,icon :$fa_tumblr > ;
 			<button :    $Bts_btn_social_twitter  ,icon: $fa_twitter >;
 			<button :    $Bts_btn_social_vk    ,icon :$fa_vk  >  ;	
printSW "\n\n #### TABLE RESPONSIVE 2 (var) ####  \n\n";
position  : relative,auto,550 :  	
 	<table $Bts_Class_Table	 :  
				<trow :  
					<tcell : <button :   $Bts_btn_danger_btn_sm ,"12">  
							<Text : ""    , "Total messages" > 
					>
					<tcell : <button :   $Bts_btn_primary_btn_sm ,"28"> 
							<Text : ""    , "Posts" > 
					>
					<tcell :  <button :   $Bts_btn_info_btn_sm ,"15"> 
								<Text : ""   , "Comments" > 
					>
				>,/* end 1 Trow table */
			  <trow :  
					<tcell : <button :   $Bts_btn_info_btn_sm ,"20">  
	                          <Text : ""    , "News" > 
					>
					<tcell :   <button : $Bts_btn_success_btn_sm ,"40">  
	                          <Text : ""    , "Likes" > 
					>
					<tcell :  <button :   $Bts_btn_danger_btn_sm ,"30"> 
							  <Text : ""    , "Notifications" > 
					>
				>,/* end 2 Trow table */
				<trow :  
					<tcell :   <button :   $Bts_btn_warning_btn_sm ,"20"> 
								<Text :""    , " Albums" > 
					>
					<tcell :   <button :   $Bts_btn_default_btn_sm ,"40"> 
								<Text : ""    , "Groups" >,
					>
					<tcell :  <button :   $Bts_btn_warning_btn_sm ,"30"> 
								<Text : ""    , "Permissions" > 
					>
				>,/* end 3 Trow table */
			>; /* table end */	

	 printSw "\n\n # MS4BI : UI TEXT  #  \n";  			
<Panel     : $Bts_Panel_success , 
 <Panel_Header      : "" > 
	printSw "#  Basic Title H1,H2,H3,H4 , underline..#  ", 
	printSw "#  Basic Title H1 #  ", printSw "##  Basic Title H2 ##   ", 
	printSw "###  Basic Title H3 ###  ", printSw "####  Basic Title H4 ####  ", 
	printSw "#####  Basic Title H5 #####  ", printSw "######  Basic Title H6 ######  ",
	<Text :$Bts_Text_left	 + $label_warning, " ###b $label_warning : Text    ** ipsum dolor sit amet,** consectet  ###b \n">,
	
 >;/* end panel */	
 text : percent50  := "80%",$progresRED;  
 concatene "style='width:" , percent50 , ";' " into $progresRED; 
 
 printSw "\n \n # MS4BI : UI Progress Bar  #  \n";  
 		 position  : relative,auto,650 :
		 
	       <div :
		         <Text :""    , " Memory" > ,
		          <Text :$Bts_Text_right_small    , " 10/200 GB" > ,
			>, /* end div */		  
				<div $Bts_progress_small	 :
					<div "style='width:60%;' "  +  $Bts_progress_bar + $bg_lazur :
					>, /* end div */
	  			>, /* end div */
			<div :
		         <Text :""    , " Bandwidth" > ,
		          <Text :$Bts_Text_right_small    , " 20 GB" > ,
			 >, /* end div */		  
				<div $Bts_progress_small	 :  
					<div $progresRED +  $Bts_progress_bar + $bg_red :
					>, /* end div */
	  			>, /* end div */
				<div :
		     <Text :""    , " Activity" > ,
		          <Text :$Bts_Text_right_small    , " 73%" > ,
			 >, /* end div */		  
				<div $Bts_progress_small	 :
					<div "style='width: 40%;' "  +  $Bts_progress_bar :
					>, /* end div */
	  			> ; /* end div */				
			
printSw "\n\n # MS4BI : UI table responsive 1 #  \n";  
  
   position  : relative,auto,550 : 
 begin_div : table responsive     
	|	 # |	Date |	Time 	| Amount |
	| 3326 |	10/21/2013 |	3:29 PM |	$321.33  |
	| 3325 |	10/21/2013 |	3:20 PM |	$234.34  |
	| 3324 |	** 10/21/2013 ** |	3:03 PM |	$724.17  |
	| 3323 |	10/21/2013 |	3:00 PM |	$23.71   |
	| 3322 |	10/21/2013 |	2:49 PM 	|   $8345.23 |
	| 3321 |	10/21/2013 |	2:23 PM 	|/b	$245.12 /b |
	| 3320 |	10/21/2013 | /r	2:15 PM  /r |	$5663.54 |
	| 3319 |	10/21/2013 |	2:13 PM |	$943.45  |
 end_div  ;
 printSW "\l\n";
    position  : relative,auto,750 : 
     begin_div : table "0Table"     /* style */
 			| Option | Description |
			| data   | path to **data files to supply** the data that will be passed into templates. |
			| engine | engine to be used for processing templates. --Handlebars is the default.--    |
			| ext    | extension to be used for dest files.                                      |     
	end_div  ;   
	position  : relative,auto,850 : 
   printSw "\n\n  # MS4BI : UI FRAME responsive 2 #  \n";
 <icon : $fa_5x + $fa_list_alt, style:"background:MistyRose" ,   <text:"",  "  ** Basic syntax ** "  >	>	;
 	  begin_div : Frame "comment"  /* style */
\n cuius omnis sermo **erat de amicitia  querebatur**, 
\n quod /r omnibus/r in rebus  homines /b diligentiores essent;/b 
\n capras   et oves quot /g quisque haberet,/g
\n ** dicere posse, __amicos quot haberet__,** 
\n non  posse **dicere  et ** 
\n cin illis --quidem parandis adhibere curam,-- 
\l 
\n in amicis **eligendis** neglegentis 
\n >>esse nec  habere   quasi>> 
 
\n   $$getms4bi.com$$ 
\n   %%contact@mgplanete.com%%  
\l
 
<`` html
<div class='section'>
  <a class='big button' href='...'>View in GitHub</a>
</div>
``>
     end_div  ; 	


 printSw "\n\n # MS4BI : UI ICON #  \n";	 
<button :   $Bts_btn_info    icon   :   $fa_address_book_o , text "adress"> ;
  
  begin_div : Frame "comment"  /* style */
    basic MS4 script syntax  :  **button :**  --var-- (button) ,  **icon :**   **attribut :**  --var-- (attribut) ,    --var-- (icon) , --text :-- (optional) --var-- (text -optional-)  
\n example :	/r&lt; button :   /r    /r icon   :/r   $fa_address_book_o ,"adress"&gt;	 
     end_div  ;
	 
  
	<button :   $Bts_btn_info    icon   :  $fa_5x +  $fa_address_book_o ,"adress"> ; 
  begin_div : Frame "comment"  /* style */
    basic MS4 script syntax  :  **button :**  --var-- (button) ,  **icon :**   **attribut :**  --var-- (attribut) ,    --var-- (icon) , --text :-- (optional)--var-- (text -optional-)  
\n example :	/r&lt; icon :   (attribut :)/r $fa_5x ,    $fa_address_book_o ,"adress"	&gt;	 
     end_div  ;
	
	<button :  $Bts_btn_Success  ,icon   :  $fa_3x + $fa_pull_right + $fa_flag  ,"Font Awesome\n right">
	<button :  $Bts_btn_Success  ,icon   :  $fa_3x + $fa_pull_left +  $fa_flag  ,  "Font Awesome\n left">
 begin_div : Frame "comment"  /* style */
    basic MS4 script syntax  :  **button :**  --var-- (button) ,  **icon :**   **attribut :**  --var1 + var2-- (attributs : size+ right) ,    --var-- (icon) , --text :-- (optional) --var-- (text -optional-)  
\n example :	/r&lt;  icon :   (attribut)/r $fa_3x  + , $fa_flag  +   $fa_pull_right or left/r   ,&lt text: "","Font Awesome right" &gt	&gt; 
     end_div  ;
	 
	<button :  $Bts_btn_Success  ,<icon   :  $fa_3x + $fa_pull_left +  $fa_flag ,   style:"color:red"   , <text: "","Font Awesome\n RED">>>
	<button :  $Bts_warning_btn_circle_xl   ,<icon   :  $fa_2x  + $fa_flag ,  style:"color:red"   > >;
 begin_div : Frame "comment"  /* style */
    basic MS4 script syntax  :  **button :**  --var-- (button) ,  **icon :**   **attribut :**  --var1 + var2-- (attributs : size+ right), --style:"string"--,    --var-- (icon) , --text :-- (optional) --var-- (text -optional-)  
\n example : &lt;  icon :   (attribut)  $fa_3x +  $fa_flag    +   $fa_pull_right or left  , /r  style:"color:red"/r ,<text: "","Font Awesome RED"&gt	&gt; 
     end_div  ;
	printsw "\n";	
	<url : "http://www.mgplanete.com",<button :  $Bts_warning_btn_circle_xl  , 
   <icon   :    $fa_pull_left + $fa_flag,   style:"color:blue;font-size:4rem"   , 
       <TEXT :$Bts_Text_right_small  + $badge," /b   ** MgPlanete \n\nSoftware ** /b ">>>  ;			
 
position  : relative,auto,520 : 
 
 printSw "\n\n # MS4BI : UI LIST GROUP  #  \n";			
	  
 <list_group             :     
		    <list_groupitem       :    url : "#"  ,  
			          <icon : $fa_1x   +   $fa_comment ,<Text :"","New comments " >>
					  <Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
			<list_groupitem       :    url : "#"  ,
			          <icon : $fa_1x   +    $fa_twitter ,<Text :"","3 New Followers " >>
					  <Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
	 
	 >, /* end list-group */ 
<Panel     : $Bts_Panel_default ,
<Panel_Header      : " " ,<icon :   $fa_fw +$fa_bell,<text:""," Notifications Panel" > > >,
  	  <list_group             :     
		    <list_groupitem       :    url : "#"  ,
			            <icon : $fa_1x    +     $fa_comment ,<Text :"","New comments " >>
			            <Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
			<list_groupitem       :    url : "#"  ,
			             <icon : $fa_1x    +     $fa_twitter ,<Text :"","3 New Followers " >>
						 <Text : $Bts_Text_right_small  , " --4 minutes ago-- " >  >  
			<list_groupitem       :    url : "#"  ,
			             <icon : $fa_1x    +     $fa_envelope ,<Text :"","Message Sent " > > 
						 <Text : $Bts_Text_right_small  , " --12 minutes ago-- " >  >  
			<list_groupitem       :    url : "#"  ,
			             <icon : $fa_1x    +     $fa_tasks ,<Text :"","New Task " >    >     
						 <Text : $Bts_Text_right_small  , " --27 minutes ago-- " >  >  
			<list_groupitem       :    url : "#"  ,
			            <icon : $fa_1x    +     $fa_upload ,<Text :"","Server Rebooted " >> 
						<Text : $Bts_Text_right_small  , " --11:32 AM-- " >  >  
			<list_groupitem       :    url : "#"  ,
			            <icon : $fa_1x    +     $fa_bolt ,<Text :"","Server Crashed! " > >  
						<Text : $Bts_Text_right_small  , " --11:13 AM-- " >  >  
			<list_groupitem       :    url : "#"  ,
			            <icon : $fa_1x    +     $fa_shopping_cart ,<Text :"","Server Crashed! " >>
						<Text : $Bts_Text_right_small  , " --New Order Placed-- " >  >  
			<list_groupitem       :    url : "#"  ,
			            <icon : $fa_1x    +     $fa_money ,<Text :"","Payment Received " >>  
						<Text : $Bts_Text_right_small  , " --Yesterday-- " >  >  
	 	    <list_groupitem       :    url : "https://getms4bi.com"  ,  
			            <icon :   $fa_2x   +   $fa_bar_chart_o   >    > 
	    	<list_groupitem       :    url : "http://facebook.com"  
			            <button :  $Bts_btn_social_facebook    ,icon : $fa_facebook > 	   > 

	 >  /* end list-group */
	<Panel_Footer       :  ""    , <button :    $Bts_btn_social_block_twitter     ,"Sign in with twitter">  > 
 >;/* end panel */	

  	 printSw "\n\n # MS4BI : UI Panel & NOTICATION  #  \n";  
 	 position  : relative,auto,650 : 
	 <Panel     : $ms4_Panel_green ,
	  <Panel_Header      : "####  Basic Panel & Body & Footer Green #### " >  ,
	   <Panel_Body     + $bg_gray   :
		<notification : $Bts_Notif_success_Dismissable ,  "**Success!** This alert box could indicate a successful or positive action."> , 
		<notification : $Bts_Notif_info_Dismissable    ,  "**Info!** This alert box could indicate a info or positive action."> , 
		<notification : $Bts_Notif_warning_Dismissable ,  "**__Warning!__** This alert box could indicate a Warning or positive action."> , 	 
		<notification : $Bts_Notif_danger_Dismissable  ,  "### Danger! ### This alert box could indicate a danger or positive action."> , 	 
	    >,/* end body panel */
		<Panel_Footer       :  " example Panel Footer " >  ,
	 >;/* end panel */		
	 


	 	 printSw "\n\n # MS4BI : UI WIDGETS  #  \n";  	 
 position  : relative,auto,auto : 	 
 <Rwd_Row + "bg-gray"  :  4 /* 1 : optional */
        <Rwd_Col :   lg:2   :  
	         <div $widgetStyle + $bg_navy :
 				   <Rwd_Row + "vertical-align" :  5
				     <Rwd_Col :   xs:3  : 
 					   <icon : $fa_3x  + $fa_pull_left   +   $fa_user   > ,
				       >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 217 ##b " > ,
 					   >, /* end col xs:8 */
			         >,/* end Row 5 */
			   >, /* end div */
 	    >, /* end col lg:2 */
 	    <Rwd_Col :   lg:2   :  
	         <div $widgetStyle + $bg_black :
 				   <Rwd_Row + "vertical-align" :  5
				     <Rwd_Col :   xs:3  : 
 					   <icon : $fa_3x  + $fa_pull_left   +   $fa_thumbs_up   > ,
				       >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 400 ##b " > ,
 					   >, /* end col xs:8 */
					>,/* end Row 5 */
				 >, /* end div */
	         >, /* end col lg:2 */
			  
	        <Rwd_Col :   lg:2   :  
	           <div $widgetStyle + $bg_white :
 				   <Rwd_Row + "vertical-align" :  5
				     <Rwd_Col :   xs:3  : 
 					   <icon : $fa_3x  + $fa_pull_left  + $fa_rss   > ,
				       >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 10 ##b " > ,
 					   >, /* end col xs:8 */
					>,/* end Row 5 */
			   >, /* end div */
 	         >, /* end col lg:2 */
			   
			 <Rwd_Col :   lg:2   :  
	             <div $widgetStyle + $bg_lazur :
 				   <Rwd_Row + "vertical-align" :  5
				     <Rwd_Col :   xs:3  : 
 					   <icon : $fa_3x  + $fa_pull_left  +   $fa_phone   >, 
				       >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 420 ##b " > ,
 					   >, /* end col xs:8 */
 					>,/* end Row 5 */
			   >, /* end div */
	         >, /* end col lg:2 */
 			<Rwd_Col :   lg:2   :  
	           <div $widgetStyle + $bg_red :
 				   <Rwd_Row + "vertical-align" :  5
				     <Rwd_Col :   xs:3  : 
 					   <icon : $fa_3x  + $fa_pull_left  +    $fa_euro   > ,
				       >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 462 ##b " > ,
 					   >, /* end col xs:8 */
 					>,/* end Row 5 */
			   >, /* end div */
	         >, /* end col lg:2 */
 						
			<Rwd_Col :   lg:2   :  
	           <div $widgetStyle + $bg_yellow :
 				   <Rwd_Row + "vertical-align" :  5
				     <Rwd_Col :   xs:3  : 
 					   <icon : $fa_3x  + $fa_pull_left   +   $fa_shield   > ,
				       >,/* end col xs:4 */
					  <Rwd_Col :   xs:9, "text-right" : 
 					   <Text : $Bts_Text_right    , "  ##b 610 ##b " > ,
 					   >, /* end col xs:8 */
 					>,/* end Row 5 */
			   >, /* end div */
	         >, /* end col lg:2 */
	        
		>;	
BEGIN  /* first chart */ 
    
   	FormPlus :	DrawPIE , title :"-txx-=068  Business 2011 by  EMPLOYEE " , ANGLE :120 , 
	TYPE : $STANDARD, FORMAT: "$"  use View  ("[ms4EmplTotalBusiness2011]");
	 
     printSW "<div style='width: 100px; padding-top: 15px; padding-bottom: 15px; border: 5px dotted #267F00; " + 
             " text-align: center; background: #4CFF00; border-radius: 20px 0 20px 0;'> " + 
             " <strong>blabla</strong></div>";
 
 END ; /* first chart */ 		
 End_Block_Rwd ;