@font-face
{
font-family: titlefont;
src: url('fonts/BRLNSR.TTF');
}
body {
	margin: 0px;
	padding: 0px;
	background: #8b8e90 url(images/alt1.jpg);
}
#header {
	width:100%;
	background-image: url(images/header-white.png);
	background-repeat: no-repeat;
	background-position: top center;
}
#header .header-container {
	width: 950px;
	height: 139px;
	margin-left:auto;
	margin-right:auto;
}
#header .header-container .logo {
	width: 155px;
	height: 132px;
	background-image:url(images/logo.png);
	float:left;
}
#header .header-container .title {
	width: 440px;
	height: 132px;
	float:left;
}
h1.slogan {
	width: 603px;
	height: 134px;
	background-image:url(images/slogan2.png);
	padding: 0px;
	margin: 15px 0 0 0;
	text-indent: -100000px;
float:left;
}

#header .header-container .title .text1 {
	font-family: "titlefont";
	font-size:27px;
	line-height: 15px;
}
#header .header-container .title .text2 {
	font-family: "Traditional Arabic";
	font-weight: bold;
	font-size:27px;
	line-height:15px;
}
#header .header-container .title .text3 {
	font-family: "titlefont";
	font-size:17px;
	line-height: 0px;
}
#header .header-container .buttons {
	width: 355px;
	height: 132px;
	float:right;
}
#header .header-container .buttons1 {
	width: 355px;
	height: 40px;
}
#header .header-container .buttons1 .arabic {
	width: 41px;
	height: 25px;
	background-image:url(images/arabic.png);
	float:right;
	margin-top: 5px;
}
#header .header-container .buttons1 .arabic img {
	width: 41px;
	height: 25px;
	border: 0px;
}
#header .header-container .buttons2 {
	width: 355px;
	height: 92px;
}
#header .header-container .buttons2 .frames {
	width: 100px;
	height: 80px;
	background: #dddddd;
	border: solid 1px #aeaeaf;
	float:right;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-left: 15px;
	text-align:center;
	padding-top: 5px;
	transition: background .25s ease-in-out;
	-moz-transition: background .25s ease-in-out;
	-webkit-transition: background .25s ease-in-out;
}
#header .header-container .buttons2 .frames img {
	border: 0px;
}

#header .header-container .buttons2 :hover.frames {
	background: #efefef;
}

<style type="text/css">

a.boldbuttons{
background: transparent url('images/media/roundedge-blue-left.gif') no-repeat top left;
display: block;
float: left;
font: bold 13px Arial; /* Change 13px as desired */
line-height: 22px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 30px) */
height: 30px; /* Height of button background height */
padding-left: 8px; /* Width of left menu image */
text-decoration: none;

}

a:link.boldbuttons, a:visited.boldbuttons, a:hover.boldbuttons, a:active.boldbuttons{
color: white; /*button text color*/
}

a.boldbuttons span{
background: transparent url('images/media/roundedge-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 2px; /*Set 10px to be equal or greater than'padding-left' value above*/
}

a:hover.boldbuttons{ /* Hover state CSS */
text-decoration: underline;
}


.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}




a.css3dbutton {
    background: #1B3E54; /* background color of button */
    color: #FFFFFF;
    text-decoration: none;
    /* font size and style */
    position: relative;
		top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
		margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; font-style:normal; font-variant:normal; font-weight:bold; font-size:28px; font-family:Arial
}

a.css3dbutton, a:after.css3dbutton {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}

a:after.css3dbutton { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #1B3E54; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px gray
}

a:hover.css3dbutton {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #3780AA; /* background color when mouse rolls over button */
}

a:active.css3dbutton {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}



#social {
	width: 75px;
	height: 220px;
	background-image:url(images/social.png);
	position:fixed;
	top: 20%;
	right: 0px;
}
#social img {
	border: 0px;
	width: 75px;
	height: 220px;
}
#topmenu {
	width: 950px;
	margin-left:auto;
	margin-right:auto;
	background: #1B3E54 url('images/alt2.jpg') repeat-x top;
}
#topmenu .sub {
	background: transparent url(images/arrow.png) no-repeat right;
}
#topmenu :hover.sub {
	background: transparent url(images/arrow2.png) no-repeat right;
}
#topmenumobile {
	width: 450px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	background: #265775 url('images/alt2.jpg') repeat-x top;
	display:none
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  /* padding: 15px 4px 17px 0; */
  list-style: none;
  width: 950px;
}
ul li {
  color: #FFFFFF;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  background: #2B6486 url('images/alt2.jpg') repeat-x top;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s; font-style:normal; font-variant:normal; font-weight:bold; line-height:18px; font-size:12px; font-family:sans-serif; padding-left:15px; padding-right:15px; padding-top:8px; padding-bottom:8px
}
ul li a {
	color:#fff;
	text-decoration: none;
}
ul li a:hover {
	color:#fff;
	text-decoration: underline;
}
ul li:hover {
  background: #07486f;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 33px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #07486f; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
  z-index: 20;
}
ul li ul li:hover { background: #063450; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.slider-wrapper { 
	width: 950px; 
	margin:10px auto;
}


#content {
	width: 950px;
	margin-left:auto;
	margin-right:auto;
	background: #fff;
}
#content-left {
	width: 670px;
	float: left;
}
#content-left h2 {
	width: 100%;
	height: 31px;
	background-image:url(images/alt3.jpg);
	color:#FFF;
	font-family:"Comic Sans MS";
	font-size: 20px;
	font-weight:100;
	margin:0px;
	text-indent: 20px;
}
#content-left p {
	padding: 10px;
	font-family: "Tahoma", Geneva, sans-serif;
}
	
h3.annoucments {
	width: 250px;
	height:42px;
	background-image:url(images/annoucment.jpg);
	color:#FFF;
	font-family:"Comic Sans MS";
	font-size: 24px;
	font-weight:100;
	margin:0px;
	padding-top: 10px;
	padding-left: 120px;
}
#contentpage {
	width: 950px;
	margin-left:auto;
	margin-right:auto;
	background: #fff;
	padding: 5px 0px 10px 0px;
}
#contentpage .mo7tawa {
	padding:10px;
}
div.subpage {
	width: 100%;
	height:31px;
	background:#c3c3c3;
	color:#000;
	font-family:"Comic Sans MS";
	font-size: 22px;
	font-weight:100;
	margin: 0px;
	text-indent: 20px;
}
h2.sub1 {
	width: 350px;
	height:31px;
	background:#c3c3c3 url(images/pagebg.png) no-repeat left;
	color:#FFF;
	font-family:"Comic Sans MS";
	font-size: 22px;
	font-weight:100;
	margin: 0px;
	text-indent: 20px;
	float:left;
}
h2.sub2 {
	width: auto;
	height:28px;
	color:#000;
	font-family:"Comic Sans MS";
	font-size: 18px;
	font-weight:100;
	margin: 0px;
	text-indent: 20px;
	padding-top: 3px;
	float:left;
}
#news {
	width:100%;
	height:140px;
	background:#fff url(images/alt4.jpg) repeat-x bottom;
	clear:both;
}
#news img {
	width: 150px;
	height: 100px;
	margin: 15px;
	float:left;
	border: 0px;
	
}
#news p {
	font-family:"Tahoma", Geneva, sans-serif;
	font-size:16px;
	margin: 0px;
}
#news h2 {
	background: #FFFFFF;
	color: #224E68;
	font-weight: bold;
	margin: 0px;
	padding-top: 10px; padding-left:0px; padding-right:0px; padding-bottom:0px
}
#news a {
	color: #245471;
	text-decoration: none
}
#news .date {
	width: 130px;
	height: 20px;
	float: right;
	color: #204962;
	text-align: left;
	padding-top: 2px; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:tahoma
}
#news .readmore {
	width: 85px;
	height: 22px;
	background-image:url(images/more.png);
	float: right;
	margin-right: 20px;
}
#news .readmore img {
	width: 85px;
	height: 22px;
	border: 0px;
	float: none;
	margin: auto;
}
	
#content-right {
	width: 279px;
	float: right;
	background: #efefef url(images/alt5.jpg) repeat-y;
	border-left: solid 1px #FFF;
}
#content-right h2 {
	width: 100%;
	height: 31px;
	background-image:url(images/alt3.jpg);
	color:#FFF;
	font-family:"Comic Sans MS";
	font-size: 20px;
	font-weight:100;
	margin:0px;
	text-indent: 20px;
}
#content-right p {
	padding: 10px;
	font-family: "Tahoma", Geneva, sans-serif;
}
#keynote {
	width: 100%;
	height: 90px;
	clear:both;
	margin-top: 5px;
}
#keynote img {
	width: 77px;
	height: 91px;
	margin: 5px;
	float:left;
	margin-left: 5px;
	
}
#keynote p {
	font-family:"Tahoma", Geneva, sans-serif;
	font-size:12px;
	margin: 0px;
	line-height: 16px;
	padding: 0px;
}
#keynote h2 {
	background-position: 0% 0%; color: #234F6A;
	margin: 0px;
	font-size: 17px;
	font-weight: bold;
	font-family:"Traditional Arabic";
	text-indent: 0px;
	padding-top: 7px; padding-left:0px; padding-right:0px; padding-bottom:0px; background-image:none; background-repeat:repeat; background-attachment:scroll
}
#keynote a {
	color: #234F6A;
	text-decoration: none
}

	
#footer {
	width: 950px;
	margin-left:auto;
	margin-right:auto;
	background-image:url(images/fotback.gif);
	text-align:center;
	margin-top:10px;
	color: #FFFFFF;
	font-family:"Tahoma", Geneva, sans-serif;
	font-size:13px;
	height: 95px;
	padding-top:10px
}
#footer a {
	color: #FFF;
	font-family:"Tahoma", Geneva, sans-serif;
	text-decoration:none;
}
#footer .rights {
	display: block;
	top: 5px;
	float:left;
	margin-left: 10px;
	color: #999;
}
#footer .rights img {
	border: 0px;
}

p.padding {
	width: 234px;
	padding: 8px !important;
}
img.icons {
	margin-top:5px;
	margin-right: 10px;
	margin-left: -5px;
}

/*   Phone  : 480px -----------------------------   */
@media only screen and (max-width: 767px) and (min-width: 480px){

#header .header-container ,#contentpage , #content-right , ul , #content-left , .slider-wrapper , #content , #footer {width: 450px !important;}
#header .header-container .buttons , #news .readmore, #topmenu { display: none !important;}
#topmenumobile { display:block;}
#header .header-container .logo { margin-left: 140px;}
#content-left p { font-size: 12px;}
#content-right {border-left: 0px;}

}
/*   Phone  : 320px -----------------------------   */
@media only screen and (max-width: 479px) and (min-width: 320px){

#header .header-container ,#contentpage , #content-right , ul , #content-left , #header .header-container .title , .slider-wrapper , #content , #footer {width: 320px !important;}
#header .header-container .buttons , #news .readmore, #topmenu { display: none !important;}
#topmenumobile { display:block;width: 320px;}
#header .header-container .logo { margin-left: 80px;}
#content-left p { font-size: 12px;}
#content-right {border-left: 0px;}
#header .header-container .title .text1 {font-size:19px;}
#header .header-container .title .text2 {font-size:19px;}
#header .header-container .title .text3 { display:none;} 
#header .header-container .title {height: 70px;}

}