@charset "utf-8";

/* Class names must be unique */
 
/* HTML5 new tags called out for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	display: block;
}

body {
	background-color: #FFFAD6;
	background-image: url(../images/water1.jpg);
	background-repeat: repeat;
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

/* for body tag of print pages */
.white {
	background-color: #FFF;
	background-image: none;
}

/* for body tag of front page */
.black {
	background-color: #000;
	background-image: none;
}

#tble1 {
	border-spacing: 0;
	margin: 0px;
	width: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

/* links page */

#tble2 {
	border-spacing: 0;
	border-collapse: collapse;
	columns: 2;
	width: 90%;
	margin-top: 0px;
	margin-right: 5%;
	margin-bottom: 0px;
	margin-left: 5%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

.tdnk {
	text-align: left;
	vertical-align: top;
	font-weight: 500;
	width: 50%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

/* for table tag of print pages */

#print {
	border-spacing: 0;
	margin: 0px;
	width: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	background-color: #FFF;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	color: #000;
	text-align: justify;
	vertical-align: top;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 20px;
}

/* Front page cells */

#td1 {
	background-color: #000;
	background-image: url(../images/StMark12.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	height: 475px;
	width: 100%;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 50px;
	vertical-align: top;
}

.td2_3 {
	width: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	background-color: #000;
	margin: 0px;
	padding-right: 40px;
	padding-bottom: 0px;
	padding-left: 40px;
	padding-top: 0px;
	text-align: justify;
	color: #FFF;
}

.ArbImg {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	vertical-align: top;
	margin-top: 155px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
  
/* tables of main pages */

#tr1 {
	background-color: #000000;
	margin: 0px;
	width: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#tr2 {
	background-color: #00C;
	margin: 0px;
	width: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#tr3 {
	background-color: #FFFFCC;
	margin: 0px;
	width: 100%;
	left: 0px;
	right: 0px;
	border-top-width: 0px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FFFFCC;
	border-left-color: #FFFFCC;
}

#td11 {
	background-color: #000;
	background-image: url(../images/topFrame.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin: 0px;
	height: 102px;
	width: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

.td21 {
	background-color: #000;
	text-align: center;
	vertical-align: top;
	padding: 3px;
	width: 18%;
	height: 164px;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

.td22 {
	background-color: #000;
	text-align: center;
	vertical-align: top;
	padding: 3px;
	width: 18%;
	height: 164px;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#td23 {
	background-color: #00C;
	background-image: url(../images/sky.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	vertical-align: top;
	padding: 3px;
	height: 164px;
	width: 64%;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#td31 {
	background-image: url(../images/water1.jpg);
	background-repeat: repeat;
	margin: 0px;
	width: 100%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 40px;
	padding-bottom: 0px;
	padding-left: 40px;
	text-align: justify;
	color: #000;
}

/* home page */

#tr3H {
	background-color: #FFFFCC;
	margin: 0px;
	width: 100%;
	left: 0px;
	right: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#td22H {
	background-color: #00C;
	background-image: url(../images/sky.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	text-align: left;
	vertical-align: top;
	padding: 3px;
	height: 164px;
	width: 82%;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#td31H {
	background-color: #000;
	text-align: center;
	vertical-align: top;
	padding: 3px;
	width: 18%;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

#td32H {
	background-color: #FF0;
	background-image: url(../images/water1.jpg);
	background-repeat: repeat;
	margin: 0px;
	width: 82%;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	vertical-align: top;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	text-align: justify;
	color: #000;
}
  
/* Top and bottom navigation buttons */

a.nav:link {
	text-decoration: none;
	color: #99FFFF;
	background-color: #000000;
	padding: 2px 2px 3px;
	border: 2px double #99FFFF;
	border-radius: 8px;
}
a.nav:visited {
	color: #FFCCFF;
	text-decoration: none;
	background-color: #990099;
	padding: 2px 2px 3px;
	border: 2px double #FFCCFF;
	border-radius: 8px;
}
a.nav:hover {
	color: #FFFF00;
	text-decoration: underline;
	background-color: #CC3300;
	padding: 2px 2px 3px;
	border: 2px double #FFFF00;
	border-radius: 8px;
}
a.nav:active {
	color: #FFCC00;
	text-decoration: none;
	background-color: #FF0000;
	padding: 2px 2px 3px;
	border: 2px double #FFCC00;
	border-radius: 8px;
}

/* Top and side Navigation panels, 
   and navigation text at bottom of index page */
   
a.navI:link {
	text-decoration: none; 
	color: #99FFFF;
}
a.navI:visited {
	color: #FFCCFF; 
	text-decoration: none;
}
a.navI:hover {
	color: #FFFF00;
	text-decoration: underline;
}
a.navI:active {
	color: #FFCC00; 
	text-decoration: none;
}

/* Bottom navigation banner */

a.navII:link {
	text-decoration: none; 
	color: #FFFFFF;
}
a.navII:visited {
	color: #FFCCFF; 
	text-decoration: none;
}
a.navII:hover {
	color: #FFFF00;
	text-decoration: underline;
}
a.navII:active {
	color: #FFCC00; 
	text-decoration: none;
}

/* Paragraph navigation text */

a.para:link {
	text-decoration: none; 
	color: #0000FF;
}
a.para:visited {
	color: #CC0099; 
	text-decoration: none;
}
a.para:hover {
	color: #FF0000; 
	text-decoration: underline;
}
a.para:active {
	color: #FF9900; 
	text-decoration: none;
}

/* Index page Arabic navigation button */

a.navIndex:link {
	text-decoration: none;
	color: #99FFFF;
	padding: 2px 2px 3px;
	border: medium ridge #99FFFF;
	border-radius: 8px;
}
a.navIndex:visited {
	color: #FFCCFF;
	text-decoration: none;
	padding: 2px 2px 3px;
	border: medium ridge #FFCCFF;
	border-radius: 8px;
}
a.navIndex:hover {
	color: #FFFF00;
	text-decoration: underline;
	padding: 2px 2px 3px;
	border: medium outset #FFFF00;
	border-radius: 8px;
}
a.navIndex:active {
	color: #FFCC00;
	text-decoration: none;
	padding: 2px 2px 3px;
	border: medium inset #FFCC00;
	border-radius: 8px;
}

div {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	line-height: normal;
}

/* Top and side Navigation panels */

div.navgI {
	text-indent: 0pt;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: italic;
	line-height: normal;
	color: #99FFFF;
	font-weight: bolder;
	text-align: center;
}

h1 {
	text-align: center;
	vertical-align: top;
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-size: 24pt;
	text-shadow: 2px 2px 3px #CCCCCC;
}

h2 {
	text-align: left;
}

/* Images */

.right {
	box-shadow: 5px 5px 10px #666666;
	float: right;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
}

.shadow {
	box-shadow: 5px 5px 10px #666666;
}

.center {
	text-align: center;
	position: relative;
}

/* mainly for page titles aligned left */

.left {
	text-align: left;
}

/* ruler */

.rulerblack {
	height: 1px;
	background-color: #000;
	border: 1px solid #000;
}

.rulerwhite {
	color: #FFF;
	height: 2px;
	width: 100%;
	background-color: #FFF;
}

img.topI {
	float: right;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 45px;
	box-shadow: 5px 5px 10px #666666;
}

img.topII {
	float: right;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 25px;
	box-shadow: 5px 5px 10px #666666;
}

p {
	text-indent: 16pt;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	line-height: normal;
}

p.sub {
	text-indent: 0pt;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	font-style: normal;
	line-height: normal;
}

/* Index page text navigation buttons */

p.subI {
	visibility: hidden;
}

/* used in Why born in Islam page */

.smll {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: normal;
	text-indent: 0pt;
}

/* bottom navigation text in Index and home pages.
   Use <strong> to bold */

p.navgI {
	text-indent: 0pt;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: normal;
	padding-right: 3px;
	padding-left: 3px;
	text-align: center;
	margin-bottom: 15px;
}

/* Bottom navigation buttons, and 
   bottom navigation text in print pages. 
   Use <strong> to bold */
   
p.navg {
	text-indent: 0pt;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: 2.4;
	padding-right: 3px;
	padding-left: 3px;
	text-align: center;
	margin-bottom: 15px;
}

/* Top navigation buttons */

p.navTop {
	text-indent: 0;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8pt;
	font-style: normal;
	line-height: 2.4;
	padding-right: 3px;
	padding-left: 3px;
	position: relative;
	top: 127px;
}

span {
	position:relative;
	left: 16pt;
}

.spn40 {
	position: relative;
	left: 40px;
}

.spn65 {
	position: relative;
	left: 65px;
}

span.marq1 {
	color: #30C;
	position: relative;
	left: 0pt;
}

span.lst {
	color: #FFFAD6;
	position: relative;
	left: 0px;
}

/* return to list of contents */

span.fnt {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	font-style: normal;
	position:relative;
	left: 0pt;
}

ul {
	list-style-position: outside;
	list-style-type: disc;
}

/* top navigation list */

ol li {
	list-style-type: upper-roman;
	font-weight: bold; 
	margin-left: -10px; 
	} 
ol ol li {
	list-style-type: upper-alpha;
	margin-left: -25px; 
	} 
ol ol ol li {
	list-style-type: decimal;
	margin-left: -25px; 
	} 
ol ol ol ol li {
	list-style-type: lower-roman;
	margin-left: -20px; 
	} 

/* obsolete */
marquee {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-style: italic;
	color: #FFFFFF;
	background-color: #3300CC;
	font-weight: bolder;
	text-align: left;
	vertical-align: top;
	height: 27px;
	width: 100%;
}

/* new marquee */
.wrapper {
	height: 27px;	
	width: 450px; 
	background-color: #3300CC;
	border: 1px solid #aaa; 
	margin: 0 auto; 
	overflow: hidden; 
	border-radius: 8px;
    box-sizing: border-box;
	box-shadow: 3px 3px 6px #666666;
}
.marquee {
	position: relative;
	overflow: hidden;
	float: left;
}
.marquee span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-style: italic;
	color: #FFFFFF;
	font-weight: bolder;
	padding-left: 450px;
	white-space: nowrap;
	display: inline;
	position: relative;
	left: 0%;
	-moz-animation: marquee 50s infinite linear;
	-webkit-animation: marquee 50s infinite linear;
	-o-animation: marquee 50s infinite linear;
	animation: marquee 50s infinite linear;
}
.marquee span:hover {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	animation-play-state: paused;
}
@-webkit-keyframes marquee{
	0% {left: 0%;}
	100% {left: -100%;}
}
@-moz-keyframes marquee{
	0% {left: 0%;}
	100% {left: -100%;}
}
@-o-keyframes marquee{
	0% {left: 0%;}
	100% {left: -100%;}
}
@keyframes marquee{
	0% {left: 0%;}
	100% {left: -100%;}
} 

/* Bottom navigation banner (div) and (nav) respectively */

.box1 {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	z-index: 4;
	width: 100%;
	height: auto;
	visibility: visible;
	background-color: #00C;
	border-top-width: thick;
	border-top-style: ridge;
	border-top-color: #0FF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9pt;
	font-weight: bold;
	text-indent: 0pt;
	text-align: center;
	color: #FFFF00;
}

.pad {
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}

/* iGive */

.igive {
	background-color: #CFF;
	float: right;
	width: 200px;
	box-shadow: inset 3px 3px 10px #666666;
	border-radius: 40px / 20px;
	padding-right: 3px;
	padding-left: 6px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	vertical-align: top;
	text-align: center;
	text-indent: 0px;
	margin-top: 6px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 9px;
	font-style: normal;
	font-weight: normal;
	color: #000;
	border: 3px solid #C00;
}

.igiveh {
	background-color: #CFF;
	vertical-align: top;
	width: 90%;
	box-shadow: inset 3px 3px 10px #666666;
	border-radius: 40px / 20px;
	padding-right: 3px;
	padding-left: 6px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	text-align: center;
	text-indent: 0px;
	margin-top: 6px;
	margin-right: 7%;
	margin-bottom: 0px;
	margin-left: 3%;
	font-style: normal;
	font-weight: normal;
	color: #000;
}

.mrgn {
	border: 2px inset #F00;
	margin-top: 5px;
	box-shadow: 2px 2px 6px #666666;
}

@media only screen and (max-width:768px) {
p.subI {
	visibility: hidden;
}
p.navTop {	
    position: relative;
	top: 50px;
}
p[class="sub center"] img {
	display: none;
}
}

@media only screen and (max-width:480px) {
img, .wrapper, .marquee {
	display: none;
}
#td31 {
	padding-right: 5px;
	padding-left: 5px;
}
/* two text navigation buttons */
p.subI {
	font-family: "Arabic Transparent";
	font-size: 17pt;
	font-style: normal;
	line-height: 1.75;
	font-weight: 600;
	text-align: left;
	text-indent: 0pt;
	margin-left: 35px;
	position: relative;
	top: 170px;
	visibility: visible;
}
.td21 {
	width: 0%;
}
.td22 {
	width: 40%;
}
#td23 {
	width: 60%;
}
.td2_3 {
	padding-right: 5px;
	padding-left: 5px;
}
}

@media only screen and (max-width:320px) {
.igive, .box1 {
	display: none;
}
}