@charset "utf-8";


body {
    
    font-family: Open sans, Tahoma, sans-serif;
    font-size: 16px;
    
    background: url("deco.jpg");
    background-color: #8AC007;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
}

@media (max-width: 870px) {
	body {    
		background-size: cover;
	}
}

#map {
	display: none; width: 70%; max-width: 99%;  height: 600px;  border: 1px #e7dccd solid; margin: 7px auto;
}

@media (max-width: 800px) {
	#map {
		width: 99%;
		height: 500px;
	}
}


.gm-style .gm-style-iw {
	font-size: 16px;
	font-family: Open sans, Tahoma, sans-serif;
	color: black;
}

table, tr {
	text-align: center
}

input {
	font-size: 16px;
}

.header {
	background: #eef;
	border-bottom: 1px solid #ddd;
	padding: 7px;
}
.caption {
	font-family: Open sans, Tahoma, sans-serif;
	font-size: 18px;
	text-align: center;
	width: 10em;
    color: white;
    border-radius: 11px;
	background: #4f9c2c;
	opacity: 0.9;
}

.arrow {
	font-weight: bold;
	text-decoration: none;
}
.arrow:hover {
	text-decoration: underline;
}
.command {
	font-family: Open sans, Tahoma, sans-serif;
	font-weight: bold;
	text-decoration: none;
}

.command:hover {
	text-decoration: underline;
}

.head-row {
	color: black;
	background-color: yellow;
	font-weight: bold;
}

.today-row {
	background-color: #90EE90;
	color: black
}

#timetable tr td {
	text-align: center;
}

.timetable td {
	border-width: 1px;
	border-spacing: 1px;
	padding: 1px;
	border-style: inset;
	border-color: #CCCCCC;
}

.timetable {
	border-width: 1px;
	border-collapse: collapse;
	border-color: gray;
	margin: 0 auto;
	width: 100%;
	color: black;
	background: #d5ff80;
	opacity: 0.9;
}

#dtable {
	border-radius: 11px;
	background: #4f9c2c;
	padding: 3px;
	height: auto;
	margin: auto;
	font-size: 18pt;
	margin-bottom: 11px;
	font-family: Open sans, Tahoma, sans-serif;
	direction: rtl;
	color: white;
}

#table {
	border-radius: 20px;
	background: #4f9c2c;
	padding: 5px;
	width: 300px;
	height: auto;
	opacity: 0.9;
	margin: 20px auto;
	font-size: 18pt;
	margin-bottom: 11px;
	font-family: Open sans, Tahoma, sans-serif;
	color: white;
}

.tinfo {

	border-radius: 11px;
	background: #4f9c2c;
	height: auto;
	width: 300px;
	padding: 11px 5px;
	height: auto;
	opacity: 0.9;
	margin: 20px auto;
	font-family: Open sans, Tahoma, sans-serif;
	color: white;
}




#ttext {

	margin-top: 20px;
	border-radius: 11px;
	background: #4f9c2c;
	padding: 7px;
	height: auto;
	opacity: 0.9;
	margin: 20px auto;
	font-family: Open sans, Tahoma, sans-serif;
	color: white;
	line-height: 25px;
}


#tmessage, #tmessageEn  {

	border-radius: 11px;
	background: #F1F8E9;
	padding: 3px 11px 20px 11px;
	opacity: 0.9;
	margin: 20px auto;
	font-family: Open sans, Tahoma, sans-serif;
	color: black;
	display:none;
}


#tmessage p, #tmessageEn p {
  	
   text-align: justify;
   font-size: 18px;
   line-height: 25px;
	
}


#tmessage h1, #tmessageEn h1 {

	text-align: center;
	font-size: 21px;
	color: green;
	padding: 3px;
}

#tmessage h2, #tmessageEn h2 {

	font-size: 20px;
	color: green;
	
}


#tmessage a, #tmessageEn a, #tmessageAr a {
      
	color: green;
	word-break: break-word;
	overflow-wrap: break-word;
}


video {
	margin: 11px auto 11px auto;  
	width: 100%;
}

audio {
	margin: 11px auto 11px auto;
	width: 100%;  
}

@font-face {
    font-family: me_quranR3HOQ;
    font-style: normal;
    src: url('HAFS.ttf');
}


#tmessage .arabic, #tmessageEn .arabic {

   font-size: 20pt;
    text-align: center;
    font-family: me_quranR3HOQ;
    direction: rtl;
    line-height: 36pt;
    color: #008000;

}


#tmessageAr {

	border-radius: 11px;
	background: #F1F8E9;
	padding: 3px 11px 20px 11px;
	opacity: 0.9;
	margin: 20px auto;
	font-family: me_quranR3HOQ, Arial, monospace;
	color: black;
	display:none;
}

#tmessageAr p {	

   text-align: justify;
   font-size: 20px;
   line-height: 32px;
   direction: rtl;
	
}

#tmessageAr h1 {

	text-align: center;
	font-size: 21px;
	color: green;
	padding: 3px;
	direction: rtl;
}

#tmessageAr h2 {

	font-size: 20px;
	color: green;
	direction: rtl;
}

a {
    color: white;
}


#address {

	font-size: 16px;
	width: 96%;
	padding-left: 5px;
	border-radius: 5px;
	height: 30px;
	margin-bottom: 11px;
	font-family: Open sans, Tahoma, sans-serif;
}

		
.button {
	border: 1px solid #0a3c59;
	background: #3e779d;
	background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
	background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
	background: -moz-linear-gradient(top, #65a9d7, #3e779d);
	background: -ms-linear-gradient(top, #65a9d7, #3e779d);
	background: -o-linear-gradient(top, #65a9d7, #3e779d);
	background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
	padding: 7px;
	margin: 10px;
	color: white;
	border-radius: 7px;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
	text-shadow: #7ea4bd 0 1px 0;
	color: white;
	font-size: 18px;
	font-family: Open sans, Tahoma, sans-serif;
	text-decoration: none;
	vertical-align: middle;
    display: inline-block;
}

.button:hover {
	border: 1px solid #0a3c59;
	text-shadow: #1e4158 0 1px 0;
	background: #3e779d;
	background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
	background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
	background: -moz-linear-gradient(top, #65a9d7, #3e779d);
	background: -ms-linear-gradient(top, #65a9d7, #3e779d);
	background: -o-linear-gradient(top, #65a9d7, #3e779d);
	background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
	color: #fff;
}
.button:active {
	text-shadow: #1e4158 0 1px 0;
	border: 1px solid #0a3c59;
	background: #65a9d7;
	background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
	background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
	background: -moz-linear-gradient(top, #3e779d, #65a9d7);
	background: -ms-linear-gradient(top, #3e779d, #65a9d7);
	background: -o-linear-gradient(top, #3e779d, #65a9d7);
	background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
	color: #fff;
}