﻿
body {
    margin-left:13%; margin-right:12%;
    background-color:white; color:black;
}

#putlogo {
    position:absolute; top:12px; left:16%; width:90px; height:100px;
}
#headTable {
     width:300px; height:80px; margin-top:150px; margin-left:10px; font-family:Tahoma; font-size:29px; line-height:1.4;
}
em {
color:blue; font-size:16px;}

@font-face {
    font-family: 'Calibri';
    src: url('../Sitefonts/calibri.ttf') format('truetype');
}
@font-face {
    font-family: 'AdobeNaskh';
    src: url('../Sitefonts/AdobeNaskh-Medium.otf') format('opentype');
}
@font-face {
    font-family: 'Mohanadb';
    src: url('../Sitefonts/AL-MOHANAD_BOLD.TTF') format('truetype');
}
@font-face {
    font-family: 'HacenJD';
    src: url('../Sitefonts/Hacen Jordan.ttf') format('truetype');
}
#PhotoSection { margin:0; width:99%; }

#PhotoShow { width:99%; margin-top:-7px; overflow: hidden; }

#leftphoto {
    width:18%; height:200px; float:left; text-align:center; margin-right:2px; 
    }
#midphoto {
    width:64.4%; height:200px; float:left; text-align:center; margin-left:2px; margin-right:0;  overflow:hidden;
    }

#rightphoto {
    width:21%; height:200px; float:left; text-align:center; margin-right:0; 
    }


#mainContent {
     width:100%; height:400px;
	 border-width:2px; border-color:black; background-color:white;
     line-height: 20px; overflow: hidden; text-align: center;
  }

.LeftSide{ 
     width: 8%; float:left; margin:34px 34px; 
	 background-color: white; color:darkred; list-style-type:none; 
	 }

.MidSide { 
     width: 53%; float:left; margin:0 12px 0 12px; direction:ltr;
     text-align:justify; line-height:1.6em; background-color: white; 
	 }
	 
.RightSide { 
     width: 24%; float:left; margin-left:10px; margin-top:35px;
     text-align:right; background-color: #FFF; color:darkolivegreen; 
	 }
		
.ClearLine { clear:both; line-height:0.5em; }


#ArabicDiv { margin-left:5%; margin-right:6%;}

#ImageSide{ width:26%; height:200px; margin-left:0; margin-top:12px; float:left; display:inline-block; }

#ArabicText {
    width:70%;
    font-family:Tahoma; display:inline-block; position: relative; float:left; margin-left:3%;
    font-size:18.2px; line-height:135%; direction:rtl; background-color:white; }

#ArabicTextR {
    width:92%;
    font-family:Tahoma; display:inline-block; position: relative; float:right; margin-right:6%;
    font-size:19px; line-height:135%; direction:rtl; background-color:white; }

#ArabicText p { padding:1px 1px; text-align:justify; }
#ArabicTextR p { padding:1px 1px; text-align:justify; }

#EnglishDiv { width:100%; margin-right:1%; margin-left:5%; }
#EnglishText p {
    width:82%; text-align:justify;
    padding:10px 10px 10px 40px; font-family:Calibri; display:inline-block; position:relative; float:left;
    font-size:19px; line-height:130%; direction:ltr; background-color:white; }

#EnglishImage { width:0; height:210px; margin-left:2%; margin-top:22px; float:left; display:inline-block; box-shadow: 3px 3px 9px gray; overflow:hidden;}

#logosfooter {
    width:100%; height:240px; text-align:center; font-family:Tahoma; font-size:20px; line-height:0.45;}

#Midlogo { margin-left:3%; margin-right:3%; line-height:0.65; font-size:15px; padding-top:2px; }

#EnglishSide{ border: 1px solid white;
   /* margin-left:4%; width:84%; height:auto; border:1px solid black;     */
}
#EnglishLetter{
    margin-left:2%; width:45%; float:left; border-radius:40px; background:linear-gradient(to Right, white, #8fc47f);
    padding:25px; direction:ltr; font-family:Calibri; font-size:19px; line-height:1.3;
    border-top:1px dotted gray; border-left:1px dotted gray; border-bottom:1px dotted gray;
  }
#EnglishLetter p {text-align: justify; }

#ArabicLetter{
    width:41%; float:left; border-radius:40px; background:linear-gradient(to left, white, #8fc47f);
    padding:25px; direction:rtl; font-family:Tahoma; font-size:18.8px; line-height:1.3; 
     border-top:1px dotted gray; border-right:1px dotted gray; border-bottom:1px dotted gray;
}

#ArabicLetter p {
    text-align: justify; }

.Button2 {
    padding: 5px 5px; Width:80px; height:24px;
    border: 1px solid #446d88; 
    background: #58a linear-gradient(#77a0bb, #58a);
    border-radius: 4px; box-shadow: 0 1px 5px gray;  
    text-shadow: 0 -1px 1px #335166;
    font-size: 16px; line-height:22px;
}
.Button2 a {text-decoration:none; color:white;}



#ArabicDivC { margin-left:10%; margin-right:10%;}

#ArabicTextC {
    width:100%; font-family:Tahoma; 
    font-size:19px; line-height:150%; direction:rtl; background-color:white; 
}
#ArabicTextC p { padding:10px 25px 5px 25px; text-align:justify; }

#ArabicImageC { width:25%; height:200px; margin-right:5%; margin-top:5px; float:right;
              overflow:hidden; display:inline-block;  box-shadow: 3px 3px 9px gray;}

#EnglishDivC { margin-right:10%; margin-left:10%; }
#EnglishTextC {
    width:100%; 
    font-family:Calibri; display:inline-block; position:relative; 
    font-size:20px; line-height:120%; direction:ltr; background-color:white;
}	
#EnglishTextC P { padding:10px 25px 20px 25px; text-align:justify; }

#EnglishImageC { margin-top:10px; width:100%; height:200px; margin-left:5%; margin-right:5%;
                 float:left; display:inline-block; overflow:hidden;}

#ImageLine tr td {
    margin-left:2%; text-align:center; font-family:Tahoma; font-size:20px; 
}
/*
.flip3D { width:240px; height:200px; margin:10px; float:left;}
.flip3D > .front {
        position:absolute;
        transform:perspective(600px) rotateY(0deg);
        background:#ffd800; width:200px; height:200px; border-radius: 7px;
        backface-visibility:hidden;
        transition:transform .5s linear 0s;
}
.flip3D > .back {
        position:absolute;
        transform: perspective(600px) rotateY(180deg);
        background:#58a; width:200px; height:200px; border-radius: 7px;
        backface-visibility: hidden;
        transition: transform .5s linear 0s;
}
.flip3D:hover > .front { transform: perspective(600px) rotateY(-180deg);}
.flip3D:hover > .back { transform: perspective(600px) rotateY(0deg);}
*/
