/* General
----------------------------------------------------------------------------------------------------*/

* {
	margin:0;
	padding:0;
}

body {
	background:#ccc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:80%;
	overflow-y:scroll;
}

img {
	border:none;
}




/* Containers
----------------------------------------------------------------------------------------------------*/

#outerwrapper {
	margin:20px auto;
	width:972px;
}

#wrapper {
	background:#fff;	
	width: 972px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 0px 0px 10px #999;
	-moz-box-shadow: 0px 0px 10px #999;
	box-shadow: 0px 0px 10px #999;
	border:1px solid #999;
	padding:10px;
	float:left;
}

#header {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background:#09f url(images/site_objects/grad_blue.jpg) repeat-x top;
	padding:10px;
	width:930px;
}
html > body #header {
	float:left;
}

#footer {
	clear:both;
	float:left;
	margin:0 0 10px 5px;
	background:#333 url(images/site_objects/grad_black.jpg) repeat-x top;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	color:#fff;
	width:952px;
}
html > body #footer {
	margin:0 0 10px 10px;
}

.content {
	clear:both;
	margin:20px 0 20px 0;
	float:left;
}

/* Navigation
----------------------------------------------------------------------------------------------------*/


#header ul {
	margin:0;
	padding:0;
	float:left;
}

#header li {
	width:137px;
	float:left;
	text-align:center;
	overflow:hidden;
	padding:10px 0 0 0;
	margin:0 10px 0 0;
	list-style:none;
}

#header a, #header a:link, #header a:visited {
	color:#000;
	text-decoration:none;
	font-size:130%;
	font-weight:bold;
	display:block;
	padding:80px 0 10px 0;
}
	#header a:hover, #header a:focus, #header a:active {
		color:#00689d;
	}

#header p {
	padding:0px 5px;
}

#header .subtext{
	padding-top:15px;
}

a.prev, a.next {
	padding:0!important;
	margin:0;
}

/*Menu Color Classes*/

#header #home, #header #audio, #header #videos, #header #literature, #header #downloads, #header #quran, #header #contactus, #header #events {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin:0 10px 0 0;
}

#header #home {
	background:#fff url(images/icons/ico_home.gif) top left no-repeat;
}
	#header .home_hover {
		background:#fff url(images/icons/ico_home_hover.gif) top left no-repeat!important;
	}
	
#header #audio {
	background:#fff url(images/icons/ico_audio.gif) top left no-repeat;
}
	#header .audio_hover {
		background:#fff url(images/icons/ico_audio_hover.gif) top left no-repeat!important;
	}
	
#header #videos {
	background:#fff url(images/icons/ico_videos.gif) top left no-repeat;
}
	#header .videos_hover {
		background:#fff url(images/icons/ico_videos_hover.gif) top left no-repeat!important;
	}
	
#header #literature {
	background:#fff url(images/icons/ico_literature.gif) top left no-repeat;
}
	#header .literature_hover {
		background:#fff url(images/icons/ico_literature_hover.gif) top left no-repeat!important;
	}

#header #downloads {
	background:#fff url(images/icons/ico_downloads.gif) top left no-repeat;
}
	#header .downloads_hover {
		background:#fff url(images/icons/ico_downloads_hover.gif) top left no-repeat!important;
	}

#header #quran {
	background:#fff url(images/icons/ico_quran.gif) top left no-repeat;
}
	#header .quran_hover {
		background:#fff url(images/icons/ico_quran_hover.gif) top left no-repeat!important;
	}

#header #contactus {
	background:#fff url(images/icons/ico_contactus.gif) top left no-repeat;
}
	#header .contactus_hover {
		background:#fff url(images/icons/ico_contactus_hover.gif) top left no-repeat!important;
	}

#header #events {
	background:#fff url(images/icons/ico_events.gif) top left no-repeat;
}
	#header .events_hover {
		background:#fff url(images/icons/ico_events_hover.gif) top left no-repeat!important;
	}

#header .leftbutton {
	float:left;
	margin:50px 10px 0 0;
}
#header .rightbutton {
	float:right;
	margin:50px 0 0 0;
}


p.brand {
	font-size:250%;
	padding:10px 0 10px 0;
}

.payment {
	float:left;
	width:180px;
	margin:5px 10px 0 105px;
	padding:15px 0 10px 95px;
	background:url(images/pictures/paypal.gif) no-repeat top left;
}

.socialmedia {
	float:right;
	width:180px;
	margin:0 10px 0 0;
}
	.socialmedia ul {
		list-style:none;
		margin:0;
		padding:0;
	}
		.socialmedia ul li {
			list-style:none;
			margin:0;
		}
			a.facebook, a.facebook:link, a.facebook:visited {
				background:url(images/icons/ico_facebook.gif) no-repeat left;
				padding:10px 0 10px 55px;
				color:#000;
				display:block;
				text-decoration:none;
			}
			a.about, a.about:link, a.about:visited {
				background:url(images/icons/ico_about.gif) no-repeat left;
				padding:10px 0 10px 55px;
				color:#000;
				display:block;
				text-decoration:none;
			}
			a.youtube, a.youtube:link, a.youtube:visited {
				background:url(images/icons/ico_youtube.gif) no-repeat left;
				padding:10px 0 10px 55px;
				color:#000;
				display:block;
				text-decoration:none;
			}
				a.facebook:hover, a.facebook:focus, a.facebook:active {
					text-decoration:underline;
				}
				a.about:hover, a.about:focus, a.about:active {
					text-decoration:underline;
				}
				a.youtube:hover, a.youtube:focus, a.youtube:active {
					text-decoration:underline;
				}




/* margins
----------------------------------------------------------------------------------------------------*/

.right10 {
	margin-right: 10px;
}

.left10 {
	margin-left: 5px;
}

html > body .left10 {
	margin-left: 10px;
}

.right20 {
	margin-right: 10px;
}

html > body .right20 {
	margin-right: 20px;
}

.left20 {
	margin-left: 10px;
}

html > body .left20 {
	margin-left: 20px;
}

.top20 {
	margin-top:20px;
}




/* buttons */

a.arrow, a.arrow:link, a.arrow:visited {
	background: url(images/site_objects/arrow_right_f1.gif) no-repeat left top;
	padding:0 0 5px 22px;
	color:#000;
	text-decoration:none;
	display:block;
}
	a.arrow:hover, a.arrow:focus, a.arrow:active {
		background: url(images/site_objects/arrow_right_f2.gif) no-repeat left top;
		padding:0 0 5px 22px;
		color:#000;
		text-decoration:underline;
		display:block;
	}
	
a.more, a.more:link, a.more:visited {
	background: url(images/site_objects/black_arrow_right_f1.gif) no-repeat left top;
	padding:2px 0 5px 22px;
	color:#000;
	text-decoration:none;
	display:block;
}
	a.more:hover, a.more:focus, a.more:active {
		background: url(images/site_objects/black_arrow_right_f2.gif) no-repeat left top;
		padding:2px 0 5px 22px;
		color:#000;
		text-decoration:underline;
		display:block;
	}
	
a.top, a.top:link, a.top:visited {
	background: url(images/site_objects/top_f1.gif) no-repeat left top;
	padding:2px 0 5px 22px;
	color:#000;
	text-decoration:none;
	display:block;
}
	a.top:hover, a.top:focus, a.top:active {
		background: url(images/site_objects/top_f2.gif) no-repeat left top;
		padding:2px 0 5px 22px;
		color:#000;
		text-decoration:underline;
		display:block;
	}
a.back, a.back:link, a.back:visited {
	background: url(images/site_objects/back_arrow_f1.gif) no-repeat left top;
	padding:2px 0 5px 22px;
	color:#000;
	text-decoration:none;
	display:block;
}
	a.back:hover, a.back:focus, a.back:active {
		background: url(images/site_objects/back_arrow_f2.gif) no-repeat left top;
		padding:2px 0 5px 22px;
		color:#000;
		text-decoration:underline;
		display:block;
	}

a.pdf, a.pdf:link, a.pdf:visited {
	background: url(images/site_objects/pdf.gif) no-repeat left top;
	padding:2px 0 5px 22px;
	color:#000;
	text-decoration:none;
	display:block;
}
	a.pdf:hover, a.pdf:focus, a.pdf:active {
		background: url(images/site_objects/pdf.gif) no-repeat left top;
		padding:2px 0 5px 22px;
		color:#000;
		text-decoration:underline;
		display:block;
	}

a.download, a.download:link, a.download:visited {
	background: url(images/site_objects/download_f1.gif) no-repeat left top;
	padding:2px 0 5px 22px;
	color:#000;
	text-decoration:none;
	display:block;
}
	a.download:hover, a.download:focus, a.download:active {
		background: url(images/site_objects/download_f2.gif) no-repeat left top;
		padding:2px 0 5px 22px;
		color:#000;
		text-decoration:underline;
		display:block;
	}


a.sample, a.sample:link, a.sample:visited {
	background:#ffab18 url(images/site_objects/button_bg_sample.jpg) no-repeat top left;
	padding:5px 5px 5px 25px;
	width:70px;
	float:left;
	text-decoration:none;
	color:#000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
	a.sample:hover, a.sample:focus, a.sample:active {
		background:#ffab18 url(images/site_objects/button_bg_sample.jpg) no-repeat top left;
		padding:5px 5px 5px 25px;
		width:70px;
		float:left;
		text-decoration:underline;
		color:#000;
	}
	
a.info, a.info:link, a.info:visited {
	background:#ffab18 url(images/site_objects/button_bg_info.jpg) no-repeat top left;
	padding:5px 5px 5px 25px;
	width:70px;
	float:left;
	text-decoration:none;
	color:#000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
	a.info:hover, a.info:focus, a.info:active {
		background:#ffab18 url(images/site_objects/button_bg_info.jpg) no-repeat top left;
		padding:5px 5px 5px 25px;
		width:70px;
		float:left;
		text-decoration:underline;
		color:#000;
	}

a.cart, a.cart:link, a.cart:visited {
	background:#ffab18 url(images/site_objects/button_bg_cart.jpg) no-repeat top left;
	padding:5px 5px 5px 25px;
	width:70px;
	float:left;
	text-decoration:none;
	color:#000;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
	a.cart:hover, a.cart:focus, a.cart:active {
		background:#ffab18 url(images/site_objects/button_bg_cart.jpg) no-repeat top left;
		padding:5px 5px 5px 25px;
		width:70px;
		float:left;
		text-decoration:underline;
		color:#000;
	}


/* typography
----------------------------------------------------------------------------------------------------*/

h1 {
	color:#fff;
	font-weight:normal;
	margin:0 0 10px 0;
	font-size:160%;
	line-height:1em;
}

.grid_3 h2 {
	color:#fff;
	font-weight:normal;
	margin:0 0 10px 0;
	font-size:160%;
	line-height:1em;
}

.speakerbiog h2 {
	padding:20px 0 10px 0;
}

.grid_3 p {
	margin: 0 0 10px 0;
}

ul.speakers {
	list-style:none;
	border-top:1px dotted #fff;
}
	ul.speakers li {
		margin:0;
		padding:5px 0 5px 0;
		border-bottom:1px dotted #fff;
	}
	ul.speakers li.noline {
		padding:5px 0 0 0;
		border-bottom:none;
	}
		ul.speakers li a, ul.speakers li a:link, ul.speakers li a:visited {
			color:#fff;
			text-decoration:none;
			float:left;
		}
		ul.speakers li a:hover, ul.speakers li a:focus, ul.speakers li a:active {
			color:#fff;
			text-decoration:underline;
			float:left;
		}
		html > body ul.speakers li a, html > body ul.speakers li a:link, html > body ul.speakers li a:visited, html > body ul.speakers li a:hover, html > body ul.speakers li a:focus, html > body ul.speakers li a:active {
			float:none;
		}
		ul.speakers li a.lit {
			font-weight:bold;
		}

.black_col p {
	color:#fff;
	font-size:130%;
	font-weight:bold;
	margin:20px 0 0 0;
}
.black_col p.right {
	font-size:120%;
	font-weight:normal;
	text-align:right;
}

p.hotspottext {
	width:120px;
}

p.intro {
	color:#fff;
	margin:0 0 10px 0;
	font-size:120%;
	width:440px;
	font-weight:bold;
}

p.footnote {
	font-size:90%;
	color:#666;
}

.margin_p {
	margin:0 0 10px 0;
}

.buttons p {
	margin:0 0 7px 0;
	float:left;
}
.buttons embed {
	margin:0 0 7px 0;
}

.speakerbiog p {
	margin:0 0 10px 0;
	color:#fff;
}


a, a:link, a:visited {
	color:#000;
	text-decoration:underline;
}
a:hover, a:focus, a:active {
	color:#000;
	text-decoration:none;
}

.code {
	font-family:"Courier New", Courier, monospace;
	padding:10px;
	margin:10px 0;
	background:#ebebeb;
}




/*toggle styles*/

h3.trigger {
	background: url(images/site_objects/toggle_plus.gif) no-repeat 0 5px;
	width: 180px;
	float: left;
	font-size:140%;
	font-weight:normal;
	border-bottom:1px dotted #000;
	padding:5px 0 5px 20px;
}
h3.trigger a {
	color: #000;
	text-decoration: none;
	display: block;
}
h3.trigger a:hover { color: #fff; }
h3.active {
		background: url(images/site_objects/toggle_minus.gif) no-repeat 0 5px;
} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	background: #f0f0f0;
	overflow: hidden;
	clear: both;
	border-bottom:1px dotted #000;
}
.toggle_container .block {
	padding: 10px 10px 3px 10px; /*--Padding of Container--*/
}

.toggle_container .block a, .toggle_container .block a:link, .toggle_container .block a:visited {
	text-decoration:none;
}
.toggle_container .block a:hover, .toggle_container .block a:focus, .toggle_container .block a:active {
	text-decoration:underline;
}


/* col colours
----------------------------------------------------------------------------------------------------*/

.red_col {
	background:#f00 url(images/site_objects/grad_red.jpg) repeat-x top;
}
.blue_col {
	background:#09f url(images/site_objects/grad_blue.jpg) repeat-x top;
}
.green_col {
	background:#6f0 url(images/site_objects/grad_green.jpg) repeat-x top;
}

.audio_col {
	background:#0099ff url(images/pictures/bg_audio.jpg) no-repeat top right;
}
.video_col {
	background:#0099ff url(images/pictures/bg_videos.jpg) no-repeat top right;
}
.literature_col {
	background:#0099ff url(images/pictures/bg_literature.jpg) no-repeat top right;
}
.downloads_col {
	background:#0099ff url(images/pictures/bg_downloads.jpg) no-repeat top right;
}
.contactus_col {
	background:#0099ff url(images/pictures/bg_contactus.jpg) no-repeat top right;
}
.quran_col {
	background:#0099ff url(images/pictures/bg_quran.jpg) no-repeat top right;
}
.events_col {
	background:#0099ff url(images/pictures/bg_events.jpg) no-repeat top right;
}
.quiz_col {
	background:#0099ff url(images/pictures/bg_quiz.jpg) no-repeat top right;
}
.about_col {
	background:#0099ff url(images/pictures/bg_about.jpg) no-repeat top right;
}
.delivery_col {
	background:#0099ff url(images/pictures/bg_parcels.jpg) no-repeat top right;
}
.competition_col {
	background:#6f0 url(images/pictures/bg_competition.jpg) no-repeat top right;
}

.islamovision_col {
	background:#2381ff url(images/pictures/bg_islamovision.jpg) no-repeat top right;
}

.bg_delivery {
	background:#ffd800 url(images/pictures/bg_delivery.jpg) no-repeat top right;
}
.pink_col {
	background:#f0f url(images/site_objects/grad_pink.jpg) repeat-x top;
}
.orange_col {
	background:#f90 url(images/site_objects/grad_orange.jpg) repeat-x top;
}
.silver_col {
	background:#ccc url(images/site_objects/grad_silver.jpg) repeat-x top;
}
.gold_col {
	background:#fc3 url(images/site_objects/grad_gold.jpg) repeat-x top;
}
.purple_col {
	background:#f09 url(images/site_objects/grad_purple.jpg) repeat-x top;
}
.black_col {
	background:#333 url(images/site_objects/grad_black.jpg) repeat-x top;
}
.feedback_col {
	background:#ccc url(images/pictures/bg_feedback.jpg) repeat-x top right;
}
	.feedback_col p, .feedback_col p a.arrow {
		color:#fff;
	}





/* Grid
----------------------------------------------------------------------------------------------------*/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	display:inline;
	float: left;
	position: relative;
}


#wrapper .grid_1 {
	width:61px;
}

#wrapper .grid_2 {
	width:142px;
}

#wrapper .grid_3 {
	width:203px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:10px;
	height:150px;
}
	html > body #wrapper .grid_3 {
		height:auto;
		min-height:150px;
	}
		#wrapper .grid_3 .details {
			float:left;
			width:203px;
		}
	
		#wrapper .grid_3 .details .image {
			float:left;
			width:93px;
			margin:0 10px 0 0;
		}
		#wrapper .grid_3 .details .buttons {
			float:left;
			width:100px;
			margin:0;
		}

#wrapper .grid_3_shadow {
	width:201px;
	-webkit-box-shadow: 0px 0px 10px #999;
	-moz-box-shadow: 0px 0px 10px #999;
	box-shadow: 0px 0px 10px #999;
	border:1px solid #999;
}

#wrapper .grid_3_nopad {
	padding:0;
	display:block;
}

	#wrapper #footer .grid_3 {
		width:203px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding:10px;
		min-height:100px;
	}
	#wrapper #footer .copyright {
		clear:both;
		padding:10px;
	}


#wrapper .grid_4 {
	/*width:304px;*/
	width:250px;
	margin-right:20px;
}

#wrapper .grid_5 {
	/*width:385px;*/
	width:420px;
}

	#wrapper .grid_5 h1 {
		color:#000;
	}
	#wrapper .grid_5 h2 {
		font-weight:bold;
		font-size:130%;
	}
	#wrapper .grid_5 h3 {
		font-size:130%;
		margin:0 0 10px 0;
	}
	#wrapper .grid_5 p {
		margin:0 0 10px 0;
	}
	#wrapper .grid_5 p.price {
		font-size:140%;
	}
	#wrapper .grid_5 p.price span {
		margin-right:20px;
	}

#wrapper .grid_6 {
	width:446px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:10px;
	min-height:150px;
}

#wrapper .grid_6_nopad {
	padding:0;
	display:block;
}

#wrapper .grid_7 {
	width:547px;
}

#wrapper .grid_8 {
	width:628px;
}

#wrapper .grid_9 {
	width:689px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:10px;
	min-height:150px;
}

#wrapper .grid_9_nopad {
	width:709px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:0px;
}

#wrapper .grid_10 {
	width:790px;
}

#wrapper .grid_11 {
	width:871px;
}

#wrapper .grid_12 {
	width:932px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding:10px;
	background:#000;
	margin:0 0 20px 10px;
	-webkit-box-shadow: 0px 0px 10px #999;
	-moz-box-shadow: 0px 0px 10px #999;
	box-shadow: 0px 0px 10px #999;
	border:1px solid #999;
	height:50px;
}

#player {
	margin:20px 0 0 0;
}


/* List items
----------------------------------------------------------------------------------------------------*/
ul.animation {
  list-style: none;
  margin: 0;
  padding: 0;
  clear:both;
}

ul.animation li {
  float: left;
  /*padding: 10px;*/
  display: block;
  margin-right: 20px;
}

ul.animation li.nomargin {
  margin-right: 0;
}

ul.animation li a {
	display: block;
	overflow: hidden;
	/*  height: 150px;*/
	width: 100px;
	cursor:pointer;
	background:#ccc;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	min-height:150px;
	/*padding: 10px;*/
	background:#ccc url(images/site_objects/grad_silver.jpg) repeat-x top;
	/*-webkit-box-shadow: 0px 0px 10px #999;
	-moz-box-shadow: 0px 0px 10px #999;
	box-shadow: 0px 0px 10px #999;
	border:1px solid #999;*/
}

ul.animation li a h2 {
	font-weight:normal;
	margin:0 0 10px 0;
}

#a1 {
  width:468px;
}
  
/*ul.animation li a:hover, ul.animation li a:focus, ul.animation li a:active {
  background:#f09 url(images/site_objects/grad_purple.jpg) repeat-x top;
}*/

.featured_1 {
	background:url(images/pictures/pic_featured_1.jpg) top right no-repeat!important;
}


ul.loweralpha li {
	list-style:lower-alpha;
}



/*	form elements */

.cssform p {
	clear: left;
	padding: 5px 0 5px 0;
	padding-left: 170px; /*width of left column containing the label elements*/
	background:#ccc url(images/site_objects/grad_silver.jpg) repeat-x top;
	height: 1%;
	margin:0 0 5px 0;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.cssform label{
	color:#fff;
	font-weight: bold;
	margin-top: 5px;
	float: left;
	margin-left: -155px; /*width of left column*/
	width: 150px; /*width of labels. Should be smaller than left column (155px) to create some right margin*/
}

.cssform input[type="text"]{ /*width of text boxes. IE6 does not understand this attribute*/
	width: 180px;
}

.cssform textarea{
	width: 250px;
	height: 150px;
}




/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* http://sonspring.com/journal/clearing-floats */

.hr {
	border-top: 1px solid #000;
	clear:both
}
.greyhr {
	border-top: 1px solid #ccc;
	clear:both
}

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */

.clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearboth {
	clear:both;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

.floatleft {
	float:left;
}
.floatright {
	float:right;
}

.borderbottom {
	border-bottom:1px solid #000;
	padding-bottom:10px;
}

.nominheight {
	height:auto!important;
}
html > body .nominheight {
	height:auto;
	min-height:0px!important;
}