@font-face {font-family: myFont01; src: url(../fonts/arabic/IsraRegular.ttf);}
.arab01 {font-family:myFont01}
* {
    margin: 0;
    padding: 0;
    font-family:myFont01;

}
body {
   direction: rtl; /* fadel */
  min-width: 370px;
}

#p8, #p1, #p2, #p3, #p4, #p5, #p6, #p7,
 #d1, #d2, #d3, #d4, #d5
,#c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8
{ border: 0px solid red;}
div[id^='p'], div[id^='d'], div[id^='c'], div[id^='e'] {
    position: relative;
}


div[id^='p'] img, div[id^='d'] img, div[id^='c'] img, div[id^='e'] img {
    width:25px;
    height: 30px;
    position: absolute;
    bottom: -12px;
    left: -12px;

}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordian {
    display: block;
    margin: 0 auto;
    width: 740px;
    height: 700px;
    overflow: hidden;
    position: relative;
    /*Time for some styling*/
    /*margin: 100px auto;*/
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

/*A small hack to prevent flickering on some browsers*/
.accordian > ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
}
/*.accordian*/


.accordian img {width:400px; height: auto;
                max-width: none;border-radius: 0; }
.accordian li {
    position: relative;
    display: block;
    width: 140px;
    float: right;

    border-left: 1px solid #888;

    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);

    /*Transitions to give animation effect*/
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /*If you hover on the images now you should be able to
    see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 85px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 405px !important;}

.lesswidth {width: 85px !important;}

.fullwidth {width:405px !important; }
/*.accordian */

/*.accordian > img {*/
    /*display: block;*/
/*}*/

/*Image title styles*/
 .image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 0; bottom: 0;
    width: 640px;

}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 22px;
}


/*#area {

    background-color: rgb(228, 231, 231);
    margin-top: 10px;

}*/

/*#area img {


    display: block;
    margin: 4px ;
    width:350px;
    margin-left: auto;
    margin-right: auto;
  by fadel
  it was this 
    height: 100%;
  change it to 
    height: auto;



}*/


/*            a{ color:white;}*/
            #FlowChart{
/*                background:white url(images/MS/cmpxs/cmp01.jpg) no-repeat 0 0 ;*/
                position:relative;
                z-index:0;
                background-size: contain  !important; 

/*              Commented By Fadel*/                
/*                max-width: 350px;*/
                width: 350px;
              
              
                /*            height: auto;*/
                height:620px;
                border:0px solid rgb(228, 231, 231);



/*                margin: 2px ;*/
                /*    width:350px;*/
                margin-left: auto;
                margin-right: auto;
                /*  by fadel*/
                /*  it was this */
                /*    height: 100%;*/
                /*  change it to */
                /*    height: 620px;*/
            }
            #FlowChart a div{position:absolute;}

    
#e1:hover, #e2:hover,
#c1:hover, #c2:hover, #c8:hover , #c3:hover  ,#c4:hover, #c5:hover, #c6:hover,#c7:hover,
#d1:hover, #d2:hover ,  #d3:hover ,  #d4:hover ,  #d5:hover ,  #d6:hover ,
#p1:hover, #p2:hover, #p3:hover, #p4:hover, #p5:hover, #p6:hover, #p7:hover, #p8:hover,
#p13:hover, #p14:hover, #p15:hover, #p16:hover, #p17:hover, #p18:hover, #p19:hover, #p20:hover {border:0px solid red; }
       
      

/*#the_navbar_header {background-color: #333333;font-size: 1.6em;}*/
/*.navbar-default { background-color: #333333;  border-color: #333333;margin-bottom: 0;}*/
/*.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #FFF; }*/

/*!* The Brand *!*/
/*#the_navbar_header .fa {color:#999;}*/
/*#the_navbar_header .fa:hover {color:white;}*/
/*a.navbar-brand span {font-size: 2em;line-height: 50%;}*/