@charset "utf-8";
/* CSS Document */

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
html, body
{
	padding: 0;
	margin: 0;
}
body
{
	background-color: #EAEAEA;
	font-family: 'Droid Arabic Kufi', serif;
	font-size: 14px;
	line-height: 22px;
	-webkit-text-size-adjust: none;
}
body *
{
	text-shadow: none;
}
h1, h2, h3, h4, h5, h6

{
		font-weight: normal;

}

p
{
	margin: 0 0 10px 0;
}
a, a:link, a:active, a:visited, a:hover
{
	color: inherit;
	text-decoration: none;
}

.headerdata1 li {
	display: inline-block;
	direction:rtl;
	float:right;
	padding-right:10px;
	height:40px;
	color:white;
	clear:both;
	
	}

.headerdata2 li {
	display: inline-block;
	direction:rtl;
	float:right;
	padding-right:10px;
	height:40px;
	color:white;
	
	}
.headerdata3 li {
	display: inline-block;
	direction:rtl;
	float:left;
	padding-left:30px;
	height:40px;
	color:white;
	
	}

.whats_new {
	direction:rtl;
	margin-top:50px;
	margin-right:50px;
	padding-bottom:0px;
}


/* Start from here Students New Portal Responsive website*/

#maincontainer{
	width:1100px;
	margin:0px auto;
	}
#header{
	width:100%;
	background-color:#3F3E3E;
	float:right;
	}
	
#student_data{
	display:none;
	visibility:hidden;
	width:100%;
	background-color:rgb(98, 96, 96);
	float:right;
	
}
#student_data li{
	display: inline-block;
	direction:rtl;
	float:right;
	padding-right:10px;
	height:20px;
	color:white;
	
}
#rightcolumn{
	width:165px;
	background-color:lightblue;
	float:right;
	}
#contentcolumn{
	width:935px;
	padding: 50px 0px 50px 0px;
	}
#footer{
	width:100%;
	background-color:black;
	color:white;
	text-align:center;
	height:30px;
	}


#contentcolumn h1{
	padding-top:20px;
	text-align:center;
	color:#F79B06;}


/* div boxes */

.box h3, .box1 h3, .box2 h3, .box3 h3, .box4 h3{
	text-align:right;
	position:relative;
	top:10px;
	right:10px;
	color:orange;
	display:block;
}

.box h5, .box1 h5, .box2 h5, .box3 h5, .box4 h5 {
	text-align:left;
	position: absolute;
	direction:rtl;
	top:5px;
	left:10px;
	color:orange;
	display:inline;
	font-weight:bold;

}


.box h6, .box1 h6, .box2 h6, .box3 h6, .box4 h6  {
	text-align:left;
	position: absolute;
	direction:rtl;
	bottom:5px;
	left:10px;
	color:orange;
	display:inline;
	font-weight:bold;
}


.box h3 a, .box1 h3 a, .box2 h3 a, .box3 h3 a, .box4 h3 a{
margin-right:5px;
padding-right: 14px;
background: url(../img/arrow.png) right 3px no-repeat;
font-size: 13px;
height: 20px;
overflow: hidden;
text-align:right;
color:#939191;
}

.box h7, .box1 h7, .box2 h7, .box3 h7, .box4 h7{
margin-right:5px;
padding-right: 14px;
background: url(../img/arrow.png) right 3px no-repeat;
font-size: 13px;
height: 20px;
overflow: hidden;
text-align:right;
color:#939191;
}

.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 80%;
  top: 30%;
  max-width:500px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}


.box {
	width:70%;
	height:250px;
	background:#F7F9B0;
	margin:0px auto;
	overflow: visible;

}

.box1 {
	width:70%;
	height:250px;
	background:#FDDBFB;
	margin:40px auto;
	overflow: visible;
}

.box2 {
	width:70%;
	height:250px;
	background:#ECD7FF;
	margin:40px auto;
	overflow: visible;
}

.box3 {
	width:70%;
	height:250px;
	background:#EEFFD4;
	margin:40px auto;
	overflow: visible;
}

.box4 {
	width:70%;
	height:250px;
	background:#FDF2CA;
	margin:40px auto;
	overflow: visible;
}

.studentData {
	width:646px;
	float:right;
	display:inline-block;
	margin-right:30px;
	margin-top:40px;
	border-radius: 5px 5px 5px 5px;
	background-color:white;
		padding-top:30px;

	}
	
.studentData p {
	color:red;
	font-size:14px;
	direction:rtl;
	padding-right:30px;

	}	
.studentImg {
	width:220px;
	height:250px;
	float:left;
	display:inline-block;
	margin-top:40px;
	}
	

	.studentImg img {
	width:100%;
	border-radius: 5px 5px 5px 5px;
	}
	
	.clear {clear:both;}

	.menu-wrapper {
		width: 165px;
		margin-left: auto;
	}
	@media screen and (max-width: 768px) {
		.menu-wrapper {
			width: 100%;
		}
	}


	
	@media screen and (max-width:959px){
		#maincontainer{
			width:100%;
			}
		#rightcolumn{
			width:30%;
			}
		#contentcolumn{
			width:70%;
			}
	}

	@media screen and (max-width:640px){
		#rightcolumn{
			width:100%;
			}
		#contentcolumn{
			width:100%;
			padding: 100px 0px 50px 0px;
			}
		.headerdata2{visibility: hidden;display: none;}
		
		#student_data{
	display:inline-block;
	visibility:visible;
	
}
	}

	@media screen and (max-width:320px){
		#maincontainer{
			width:320px;
			}
	}
	
	.HeaderStyle 
	{
		background-color:#CE7F83;
		color:White;
		font-weight:bold;
		
		}
		
	.RowStyle
	{
		background-color:White;
		border:solid 1px #CCCCCC;
		color:Black;
		text-align:center;
	}